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

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

{
  "name": "backup-recovery-backupimport",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/backup-recovery/BackupImport.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { useCallback, useState } from \"react\";\nimport { useAuthMessages } from \"../../lib/auth-messages.js\";\nimport { cn } from \"../../lib/utils.js\";\nimport { useBapProfileSync } from \"../bap-identity/hooks/useBapProfileSync.js\";\nimport { DropZone, ErrorDisplay } from \"../ui-components/index.js\";\n\ninterface BackupImportProps {\n\tonImport: (file: File) => Promise<void> | void;\n\tdisabled?: boolean;\n\tclassName?: string;\n\tshowLabel?: boolean;\n\t// Profile sync options\n\tenableProfileSync?: boolean;\n\tmaxDiscoveryAttempts?: number;\n\tonImportSuccess?: () => void; // Called after successful import and optional profile sync\n}\n\nexport function BackupImport({\n\tonImport,\n\tdisabled = false,\n\tclassName = \"\",\n\tshowLabel = true,\n\tenableProfileSync = false,\n\tmaxDiscoveryAttempts = 50,\n\tonImportSuccess,\n}: BackupImportProps) {\n\tconst messages = useAuthMessages();\n\tconst [error, setError] = useState<string | null>(null);\n\n\t// Profile synchronization - only initialize if enabled\n\tconst profileSync = useBapProfileSync({\n\t\tautoSync: false, // Manual trigger only\n\t\tmaxDiscoveryAttempts,\n\t});\n\n\tconst handleFileChange = useCallback(\n\t\tasync (file: File) => {\n\t\t\tsetError(null);\n\t\t\ttry {\n\t\t\t\tawait onImport(file);\n\n\t\t\t\t// Optional: Trigger profile sync after successful backup import\n\t\t\t\tif (enableProfileSync && !profileSync.isScanning) {\n\t\t\t\t\t// Small delay to ensure import is fully processed\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tprofileSync.syncProfiles();\n\t\t\t\t\t}, 1000);\n\t\t\t\t}\n\n\t\t\t\t// Notify parent of successful import\n\t\t\t\tonImportSuccess?.();\n\t\t\t} catch (err) {\n\t\t\t\tsetError(\n\t\t\t\t\terr instanceof Error ? err.message : \"Failed to import backup\",\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[onImport, enableProfileSync, profileSync, onImportSuccess],\n\t);\n\n\treturn (\n\t\t<div className={cn(\"flex flex-col gap-4\", className)}>\n\t\t\t{showLabel && (\n\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t<p className=\"text-sm text-muted-foreground text-center\">\n\t\t\t\t\t\t{messages.labels.backupImport}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Drop Zone */}\n\t\t\t<DropZone\n\t\t\t\taccept=\".json,.txt,.backup\"\n\t\t\t\tdisabled={disabled}\n\t\t\t\ttitle={messages.labels.importBackupFile}\n\t\t\t\tdescription={messages.labels.backupSupport}\n\t\t\t\tdragActiveText=\"Drop your backup file here\"\n\t\t\t\tdragActiveDescription=\"Release to import\"\n\t\t\t\theight={150}\n\t\t\t\tonFileSelect={handleFileChange}\n\t\t\t\tonError={(error) => setError(error)}\n\t\t\t/>\n\n\t\t\t{error && <ErrorDisplay error={error} />}\n\t\t</div>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/backupimport.tsx"
    }
  ]
}