bigblocks/dist-registry/components/bap-identity-components-backupformatdetector.json

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

{
  "name": "bap-identity-components-backupformatdetector",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/bap-identity/components/BackupFormatDetector.tsx",
      "type": "registry:component",
      "content": "import {\n\tCheckCircledIcon,\n\tCrossCircledIcon,\n\tExclamationTriangleIcon,\n\tInfoCircledIcon,\n} from \"@radix-ui/react-icons\";\nimport { useEffect } from \"react\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { Badge } from \"../../ui/badge.js\";\nimport { Card, CardContent } from \"../../ui/card.js\";\nimport { useMasterKeyMigration } from \"../hooks/useMasterKeyMigration.js\";\nimport type { BackupFormatDetectorProps } from \"../types/migration.js\";\n\nexport function BackupFormatDetector({\n\tbackup,\n\tonFormatDetected,\n\tshowDetails = true,\n\tsize = \"2\",\n}: BackupFormatDetectorProps) {\n\tconst { detectBackupFormat } = useMasterKeyMigration();\n\n\tconst result = detectBackupFormat(backup);\n\n\t// Call callback when format is detected\n\tuseEffect(() => {\n\t\tonFormatDetected?.(result);\n\t}, [result, onFormatDetected]);\n\n\tconst getFormatBadgeColor = () => {\n\t\tif (!result.isValid) return \"red\";\n\t\treturn result.format === \"type42\" ? \"green\" : \"orange\";\n\t};\n\n\tconst getFormatDisplayName = () => {\n\t\tif (!result.isValid) return \"Invalid\";\n\t\treturn result.format === \"type42\" ? \"Type 42\" : \"Legacy BIP32\";\n\t};\n\n\tconst getStatusIcon = () => {\n\t\tif (!result.isValid) return <CrossCircledIcon width=\"14\" height=\"14\" />;\n\t\treturn result.format === \"type42\" ? (\n\t\t\t<CheckCircledIcon width=\"14\" height=\"14\" />\n\t\t) : (\n\t\t\t<ExclamationTriangleIcon width=\"14\" height=\"14\" />\n\t\t);\n\t};\n\n\tconst getStatusMessage = () => {\n\t\tif (!result.isValid) {\n\t\t\treturn \"Invalid backup format detected. This backup may be corrupted or incomplete.\";\n\t\t}\n\n\t\tif (result.format === \"type42\") {\n\t\t\treturn \"Modern Type 42 format with enhanced privacy and flexibility.\";\n\t\t}\n\n\t\treturn \"Legacy BIP32 format. Consider migrating to Type 42 for better security.\";\n\t};\n\n\treturn (\n\t\t<Card\n\t\t\tclassName={cn(\n\t\t\t\tsize === \"1\" ? \"text-sm\" : size === \"3\" ? \"text-base\" : \"text-sm\",\n\t\t\t)}\n\t\t>\n\t\t\t<CardContent className=\"p-6\">\n\t\t\t\t<div className=\"flex flex-col gap-3\">\n\t\t\t\t\t{/* Header */}\n\t\t\t\t\t<div className=\"flex justify-between items-center\">\n\t\t\t\t\t\t<h3 className=\"text-lg font-bold\">Backup Format Analysis</h3>\n\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\tgetFormatBadgeColor() === \"red\"\n\t\t\t\t\t\t\t\t\t? \"destructive\"\n\t\t\t\t\t\t\t\t\t: getFormatBadgeColor() === \"green\"\n\t\t\t\t\t\t\t\t\t\t? \"default\"\n\t\t\t\t\t\t\t\t\t\t: \"secondary\"\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclassName=\"text-sm\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t{getStatusIcon()}\n\t\t\t\t\t\t\t\t{getFormatDisplayName()}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Badge>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Status Message */}\n\t\t\t\t\t<Card\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"p-4\",\n\t\t\t\t\t\t\tresult.isValid\n\t\t\t\t\t\t\t\t? result.format === \"type42\"\n\t\t\t\t\t\t\t\t\t? \"bg-green-50 border-green-200\"\n\t\t\t\t\t\t\t\t\t: \"bg-orange-50 border-orange-200\"\n\t\t\t\t\t\t\t\t: \"bg-red-50 border-red-200\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"flex items-start gap-2\">\n\t\t\t\t\t\t\t<div className=\"mt-0.5\">\n\t\t\t\t\t\t\t\t{result.isValid ? (\n\t\t\t\t\t\t\t\t\tresult.format === \"type42\" ? (\n\t\t\t\t\t\t\t\t\t\t<CheckCircledIcon\n\t\t\t\t\t\t\t\t\t\t\twidth=\"14\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"14\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-green-600\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<ExclamationTriangleIcon\n\t\t\t\t\t\t\t\t\t\t\twidth=\"14\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"14\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-orange-600\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<CrossCircledIcon\n\t\t\t\t\t\t\t\t\t\twidth=\"14\"\n\t\t\t\t\t\t\t\t\t\theight=\"14\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"text-red-600\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<p className=\"text-sm\">{getStatusMessage()}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Card>\n\n\t\t\t\t\t{/* Detailed Information */}\n\t\t\t\t\t{showDetails && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<h4 className=\"text-sm font-medium mb-2\">Format Details</h4>\n\t\t\t\t\t\t\t<div className=\"space-y-3\">\n\t\t\t\t\t\t\t\t<div className=\"flex justify-between items-center\">\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tBackup Type\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\tresult.format === \"type42\" ? \"default\" : \"secondary\"\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tclassName=\"text-xs\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{result.format === \"type42\"\n\t\t\t\t\t\t\t\t\t\t\t? \"Type 42 Master\"\n\t\t\t\t\t\t\t\t\t\t\t: \"Legacy BIP32 Master\"}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"flex justify-between items-center\">\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tHas Encrypted Data\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t{result.hasEncryptedData ? (\n\t\t\t\t\t\t\t\t\t\t\t<CheckCircledIcon\n\t\t\t\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-green-600\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<CrossCircledIcon\n\t\t\t\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-red-600\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t{result.hasEncryptedData ? \"Yes\" : \"No\"}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"flex justify-between items-center\">\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tKey Components\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<div className=\"flex gap-1 flex-wrap\">\n\t\t\t\t\t\t\t\t\t\t{result.keyInfo.hasXprv && (\n\t\t\t\t\t\t\t\t\t\t\t<Badge variant=\"outline\" className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t\txprv\n\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{result.keyInfo.hasMnemonic && (\n\t\t\t\t\t\t\t\t\t\t\t<Badge variant=\"outline\" className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t\tmnemonic\n\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{result.keyInfo.hasRootPk && (\n\t\t\t\t\t\t\t\t\t\t\t<Badge variant=\"default\" className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t\trootPk\n\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{result.keyInfo.hasIds && (\n\t\t\t\t\t\t\t\t\t\t\t<Badge variant=\"secondary\" className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t\tids\n\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{result.estimatedCreationDate && (\n\t\t\t\t\t\t\t\t\t<div className=\"flex justify-between items-center\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\tCreated\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t{new Date(\n\t\t\t\t\t\t\t\t\t\t\t\tresult.estimatedCreationDate,\n\t\t\t\t\t\t\t\t\t\t\t).toLocaleDateString()}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Format-specific information */}\n\t\t\t\t\t{result.isValid && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<h4 className=\"text-sm font-medium mb-2\">\n\t\t\t\t\t\t\t\t{result.format === \"type42\"\n\t\t\t\t\t\t\t\t\t? \"Type 42 Features\"\n\t\t\t\t\t\t\t\t\t: \"Legacy Format Info\"}\n\t\t\t\t\t\t\t</h4>\n\n\t\t\t\t\t\t\t{result.format === \"type42\" ? (\n\t\t\t\t\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t<CheckCircledIcon\n\t\t\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-green-600\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\tPrivate key derivation for enhanced privacy\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t<CheckCircledIcon\n\t\t\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-green-600\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\tCounter-based identity paths (bap:0, bap:1, ...)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t<CheckCircledIcon\n\t\t\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-green-600\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">Unlimited identity space</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t<CheckCircledIcon\n\t\t\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-green-600\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\tSimpler backup format (single WIF key)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t<InfoCircledIcon\n\t\t\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-orange-600\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\tBIP32 hierarchical deterministic keys\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t<InfoCircledIcon\n\t\t\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-orange-600\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\tRequires xprv + mnemonic for full restore\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t<ExclamationTriangleIcon\n\t\t\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-orange-600\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">Limited to 2^31 child keys</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t\t\t<ExclamationTriangleIcon\n\t\t\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-orange-600\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t\t\tPublic key derivation reduces privacy\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/backupformatdetector.tsx"
    }
  ]
}