bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
58 lines (57 loc) • 5.92 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { cn } from "../../lib/utils.js";
import { ErrorDisplay } from "../ui-components/ErrorDisplay.js";
import { LoadingButton } from "../ui-components/LoadingButton.js";
import { PasswordInput } from "../ui-components/PasswordInput.js";
import { WarningCard } from "../ui-components/WarningCard.js";
import { Alert, AlertDescription, AlertTitle } from "../ui/alert.js";
export function OAuthRestoreForm({ provider, encryptedBackup, onSuccess, onError, className = "", }) {
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const providerInfo = {
google: {
name: "Google",
icon: (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", "aria-label": "Google icon", children: [_jsx("title", { children: "Google" }), _jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] })),
},
github: {
name: "GitHub",
icon: (_jsxs("svg", { width: "20", height: "20", fill: "currentColor", viewBox: "0 0 24 24", "aria-label": "GitHub icon", children: [_jsx("title", { children: "GitHub" }), _jsx("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" })] })),
},
twitter: {
name: "X",
icon: (_jsxs("svg", { width: "20", height: "20", fill: "currentColor", viewBox: "0 0 24 24", children: [_jsx("title", { children: "X (Twitter)" }), _jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" })] })),
},
};
const info = providerInfo[provider] || { name: provider, icon: null };
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setError("");
try {
// Import decryption function
const { decryptBackup } = await import("bitcoin-backup");
// Try to decrypt the backup
const decrypted = await decryptBackup(encryptedBackup, password);
if (!decrypted) {
throw new Error("Invalid backup format");
}
// Success - pass the decrypted backup as string
onSuccess(JSON.stringify(decrypted));
}
catch (err) {
console.error("Decryption error:", err);
const errorMessage = err instanceof Error && err.message.includes("Invalid passphrase")
? "Incorrect password. Please try again."
: "Failed to decrypt backup. Please check your password.";
setError(errorMessage);
onError?.(new Error(errorMessage));
}
finally {
setLoading(false);
}
};
return (_jsxs("div", { className: cn("flex flex-col gap-6", className), children: [_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("div", { className: "flex justify-center", children: info.icon }), _jsx("h1", { className: "text-3xl font-bold text-center", children: "Welcome Back!" }), _jsxs("p", { className: "text-muted-foreground text-center", children: ["We found your backup linked to ", info.name] })] }), _jsxs(Alert, { className: "border-green-200 bg-green-50", children: [_jsxs("svg", { width: "16", height: "16", fill: "currentColor", viewBox: "0 0 20 20", className: "text-green-600", children: [_jsx("title", { children: "Check Circle" }), _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" })] }), _jsx(AlertTitle, { className: "font-medium", children: "Backup Found" }), _jsxs(AlertDescription, { children: ["Your encrypted backup was successfully retrieved from ", info.name, ". Enter your password to decrypt it."] })] }), _jsx(ErrorDisplay, { error: error }), _jsx("form", { onSubmit: handleSubmit, children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(PasswordInput, { label: "Backup Password", value: password, onChange: setPassword, placeholder: "Enter your backup password", disabled: loading, autoFocus: true }), _jsx(LoadingButton, { type: "submit", disabled: !password, loading: loading, loadingText: "Decrypting...", className: "w-full", children: "Unlock Wallet" })] }) }), _jsx(WarningCard, { message: "If you've forgotten your password, you'll need to use your recovery phrase to restore your wallet." })] }));
}