bigblocks/dist-registry/components/backup-recovery-identitygeneration.json

Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React

{
  "name": "backup-recovery-identitygeneration",
  "type": "registry:component",
  "dependencies": [
    "@radix-ui/react-icons"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/backup-recovery/IdentityGeneration.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { InfoCircledIcon, PlusIcon, UploadIcon } from \"@radix-ui/react-icons\";\nimport { useState } from \"react\";\nimport type React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\nimport { type Step, StepIndicator } from \"../ui-components/StepIndicator.js\";\nimport { Alert, AlertDescription } from \"../ui/alert.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"../ui/card.js\";\nimport { Separator } from \"../ui/separator.js\";\n\nexport interface IdentityGenerationProps {\n\tonGenerate: () => void;\n\tonImport: (file: File) => void;\n\tloading?: boolean;\n\terror?: string;\n\tclassName?: string;\n}\n\nexport function IdentityGeneration({\n\tonGenerate,\n\tonImport,\n\tloading = false,\n\terror,\n\tclassName = \"\",\n}: IdentityGenerationProps) {\n\tconst [dragActive, setDragActive] = useState(false);\n\n\tconst steps: Step[] = [\n\t\t{\n\t\t\tid: \"generate\",\n\t\t\tlabel: \"Generate BAP Keys\",\n\t\t\tdescription: \"We'll create a unique BAP identity that only you control\",\n\t\t\tstatus: \"active\",\n\t\t},\n\t\t{\n\t\t\tid: \"password\",\n\t\t\tlabel: \"Create Password\",\n\t\t\tdescription: \"Encrypt your keys with a strong password\",\n\t\t\tstatus: \"pending\",\n\t\t},\n\t\t{\n\t\t\tid: \"backup\",\n\t\t\tlabel: \"Save Backup\",\n\t\t\tdescription: \"Download your encrypted backup for safekeeping\",\n\t\t\tstatus: \"pending\",\n\t\t},\n\t];\n\n\tconst handleDrag = (e: React.DragEvent) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tif (e.type === \"dragenter\" || e.type === \"dragover\") {\n\t\t\tsetDragActive(true);\n\t\t} else if (e.type === \"dragleave\") {\n\t\t\tsetDragActive(false);\n\t\t}\n\t};\n\n\tconst handleDrop = (e: React.DragEvent) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tsetDragActive(false);\n\n\t\tif (e.dataTransfer.files?.[0]) {\n\t\t\tonImport(e.dataTransfer.files[0]);\n\t\t}\n\t};\n\n\tconst handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (e.target.files?.[0]) {\n\t\t\tonImport(e.target.files[0]);\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className={cn(\"flex flex-col gap-6\", className)}>\n\t\t\t<div className=\"flex flex-col items-center gap-2\">\n\t\t\t\t<h2 className=\"text-2xl font-bold text-center\">Create Your Identity</h2>\n\t\t\t\t<p className=\"text-sm text-muted-foreground text-center\">\n\t\t\t\t\tGenerate a new Bitcoin identity or import existing backup\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<StepIndicator steps={steps} variant=\"vertical\" />\n\n\t\t\t{error && (\n\t\t\t\t<Alert variant=\"destructive\">\n\t\t\t\t\t<AlertDescription>{error}</AlertDescription>\n\t\t\t\t</Alert>\n\t\t\t)}\n\n\t\t\t<Button\n\t\t\t\tsize=\"lg\"\n\t\t\t\tonClick={onGenerate}\n\t\t\t\tdisabled={loading}\n\t\t\t\tclassName=\"w-full\"\n\t\t\t>\n\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t{loading && (\n\t\t\t\t\t\t<span className=\"animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full\" />\n\t\t\t\t\t)}\n\t\t\t\t\t{loading ? (\n\t\t\t\t\t\t\"Generating...\"\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<PlusIcon className=\"h-5 w-5\" aria-label=\"Add\" />\n\t\t\t\t\t\t\tGenerate New BAP Identity\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Button>\n\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<Separator className=\"flex-1\" />\n\t\t\t\t<span className=\"text-sm text-muted-foreground\">or</span>\n\t\t\t\t<Separator className=\"flex-1\" />\n\t\t\t</div>\n\n\t\t\t<label\n\t\t\t\tclassName={cn(\"cursor-pointer\", loading && \"cursor-not-allowed\")}\n\t\t\t\tonDragEnter={handleDrag}\n\t\t\t\tonDragLeave={handleDrag}\n\t\t\t\tonDragOver={handleDrag}\n\t\t\t\tonDrop={handleDrop}\n\t\t\t>\n\t\t\t\t<Card\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"border-2 border-dashed p-8 text-center transition-all\",\n\t\t\t\t\t\tdragActive ? \"border-primary\" : \"border-muted-foreground/25\",\n\t\t\t\t\t\tloading && \"opacity-60\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<CardContent className=\"flex flex-col items-center gap-3 p-0\">\n\t\t\t\t\t\t<UploadIcon\n\t\t\t\t\t\t\tclassName=\"h-12 w-12 text-muted-foreground\"\n\t\t\t\t\t\t\taria-label=\"Import\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"flex flex-col items-center gap-1\">\n\t\t\t\t\t\t\t<p className=\"font-medium\">Import Existing Identity</p>\n\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\tDrag and drop your backup file here, or click to browse\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</CardContent>\n\t\t\t\t</Card>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\taccept=\".json,.txt\"\n\t\t\t\t\tonChange={handleFileSelect}\n\t\t\t\t\tclassName=\"hidden\"\n\t\t\t\t\tdisabled={loading}\n\t\t\t\t/>\n\t\t\t</label>\n\n\t\t\t<Alert>\n\t\t\t\t<InfoCircledIcon className=\"h-4 w-4\" aria-label=\"Information\" />\n\t\t\t\t<AlertDescription>\n\t\t\t\t\t<strong>What is a BAP Identity?</strong> A BAP (Bitcoin Attestation\n\t\t\t\t\tProtocol) identity uses cryptographic keys to authenticate you across\n\t\t\t\t\tapplications. While you'll create a password to encrypt and protect\n\t\t\t\t\tyour keys locally, you won't need passwords to log into websites -\n\t\t\t\t\tyour BAP ID proves who you are cryptographically.\n\t\t\t\t</AlertDescription>\n\t\t\t</Alert>\n\t\t</div>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/identitygeneration.tsx"
    }
  ]
}