bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
58 lines (57 loc) • 4.64 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { InfoCircledIcon, PlusIcon, UploadIcon } from "@radix-ui/react-icons";
import { useState } from "react";
import { cn } from "../../lib/utils.js";
import { StepIndicator } from "../ui-components/StepIndicator.js";
import { Alert, AlertDescription } from "../ui/alert.js";
import { Button } from "../ui/button.js";
import { Card, CardContent } from "../ui/card.js";
import { Separator } from "../ui/separator.js";
export function IdentityGeneration({ onGenerate, onImport, loading = false, error, className = "", }) {
const [dragActive, setDragActive] = useState(false);
const steps = [
{
id: "generate",
label: "Generate BAP Keys",
description: "We'll create a unique BAP identity that only you control",
status: "active",
},
{
id: "password",
label: "Create Password",
description: "Encrypt your keys with a strong password",
status: "pending",
},
{
id: "backup",
label: "Save Backup",
description: "Download your encrypted backup for safekeeping",
status: "pending",
},
];
const handleDrag = (e) => {
e.preventDefault();
e.stopPropagation();
if (e.type === "dragenter" || e.type === "dragover") {
setDragActive(true);
}
else if (e.type === "dragleave") {
setDragActive(false);
}
};
const handleDrop = (e) => {
e.preventDefault();
e.stopPropagation();
setDragActive(false);
if (e.dataTransfer.files?.[0]) {
onImport(e.dataTransfer.files[0]);
}
};
const handleFileSelect = (e) => {
if (e.target.files?.[0]) {
onImport(e.target.files[0]);
}
};
return (_jsxs("div", { className: cn("flex flex-col gap-6", className), children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("h2", { className: "text-2xl font-bold text-center", children: "Create Your Identity" }), _jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Generate a new Bitcoin identity or import existing backup" })] }), _jsx(StepIndicator, { steps: steps, variant: "vertical" }), error && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })), _jsx(Button, { size: "lg", onClick: onGenerate, disabled: loading, className: "w-full", children: _jsxs("div", { className: "flex items-center gap-2", children: [loading && (_jsx("span", { className: "animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full" })), loading ? ("Generating...") : (_jsxs(_Fragment, { children: [_jsx(PlusIcon, { className: "h-5 w-5", "aria-label": "Add" }), "Generate New BAP Identity"] }))] }) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Separator, { className: "flex-1" }), _jsx("span", { className: "text-sm text-muted-foreground", children: "or" }), _jsx(Separator, { className: "flex-1" })] }), _jsxs("label", { className: cn("cursor-pointer", loading && "cursor-not-allowed"), onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, children: [_jsx(Card, { className: cn("border-2 border-dashed p-8 text-center transition-all", dragActive ? "border-primary" : "border-muted-foreground/25", loading && "opacity-60"), children: _jsxs(CardContent, { className: "flex flex-col items-center gap-3 p-0", children: [_jsx(UploadIcon, { className: "h-12 w-12 text-muted-foreground", "aria-label": "Import" }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("p", { className: "font-medium", children: "Import Existing Identity" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Drag and drop your backup file here, or click to browse" })] })] }) }), _jsx("input", { type: "file", accept: ".json,.txt", onChange: handleFileSelect, className: "hidden", disabled: loading })] }), _jsxs(Alert, { children: [_jsx(InfoCircledIcon, { className: "h-4 w-4", "aria-label": "Information" }), _jsxs(AlertDescription, { children: [_jsx("strong", { children: "What is a BAP Identity?" }), " A BAP (Bitcoin Attestation Protocol) identity uses cryptographic keys to authenticate you across applications. While you'll create a password to encrypt and protect your keys locally, you won't need passwords to log into websites - your BAP ID proves who you are cryptographically."] })] })] }));
}