@casperid/react 1.0.1 → 1.1.0

package/src/screens/MintingIdentity.tsx

@@ -1,446 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { motion } from 'framer-motion';
-import { Shield, Network, AlertCircle, CheckCircle2, Wallet, Fingerprint } from 'lucide-react';
-import { t } from '../utils/i18n';
-
-type VerificationTier = 'layer_1' | 'layer_2' | 'layer_3';
-
-interface MintingIdentityProps {
-    tier: VerificationTier;
-    sessionToken?: string;
-    requestId?: string; // Only needed for L2/L3 submission
-    onNext: (result?: { wallet?: string; didAddress?: string; credentialHash?: string }) => void;
-    onError?: (error: string) => void;
-    apiBaseUrl?: string;
-    previewMode?: boolean;
-    language?: string;
-}
-
-type MintingStatus = 'processing' | 'minting' | 'completed' | 'failed';
-
-// Tier-specific status messages
-const getStatusMessages = (tier: VerificationTier, language: string) => {
-    if (tier === 'layer_1') {
-        return {
-            processing: {
-                title: t('generating_wallet', language),
-                subtitle: t('wallet_subtitle', language)
-            },
-            minting: {
-                title: t('minting_did', language),
-                subtitle: t('did_subtitle', language)
-            },
-            completed: {
-                title: t('identity_created', language),
-                subtitle: t('identity_created_subtitle', language)
-            },
-            failed: {
-                title: t('setup_failed', language),
-                subtitle: t('setup_failed_subtitle', language)
-            }
-        };
-    }
-
-    // L2/L3 messages
-    return {
-        processing: {
-            title: tier === 'layer_2' ? t('processing_liveness', language) : t('processing_documents', language),
-            subtitle: t('processing_subtitle', language)
-        },
-        minting: {
-            title: t('minting_identity', language),
-            subtitle: t('minting_subtitle', language)
-        },
-        completed: {
-            title: t('verification_submitted', language),
-            subtitle: t('verification_submitted_subtitle', language)
-        },
-        failed: {
-            title: t('verification_failed', language),
-            subtitle: t('verification_failed_subtitle', language)
-        }
-    };
-};
-
-const MintingIdentity: React.FC<MintingIdentityProps> = ({
-    tier,
-    sessionToken,
-    requestId,
-    onNext,
-    onError,
-    apiBaseUrl = 'https://apis.casperid.com',
-    previewMode = false,
-    language = 'EN'
-}) => {
-    const [status, setStatus] = useState<MintingStatus>('processing');
-    const [progress, setProgress] = useState(0);
-    const [error, setError] = useState('');
-    const [wallet, setWallet] = useState<string | null>(null);
-    const [didAddress, setDidAddress] = useState<string | null>(null);
-    const [credentialHash, setCredentialHash] = useState<string | null>(null);
-    const [humanId, setHumanId] = useState<string | null>(null);
-
-    // Prevent double execution in React StrictMode
-    const hasStartedRef = useRef(false);
-
-    const statusMessages = getStatusMessages(tier, language);
-    const currentMessage = statusMessages[status];
-
-    // Main setup effect
-    useEffect(() => {
-        if (hasStartedRef.current) return;
-        hasStartedRef.current = true;
-
-        if (previewMode) {
-            runPreviewMode();
-        } else {
-            runSetup();
-        }
-    }, []);
-
-    // Preview mode simulation
-    const runPreviewMode = async () => {
-        setStatus('processing');
-        setProgress(20);
-        await sleep(1000);
-        setProgress(50);
-        await sleep(1000);
-        setStatus('minting');
-        setProgress(70);
-        await sleep(1000);
-        setProgress(100);
-        setStatus('completed');
-
-        if (tier === 'layer_1') {
-            setWallet('account-hash-abc123...');
-            setHumanId('casper-user-1234');
-            setDidAddress('did:casper:abc123...');
-        } else {
-            setCredentialHash('mock-credential-hash-xyz');
-        }
-
-        await sleep(1500);
-        onNext({
-            wallet: 'account-hash-abc123...',
-            didAddress: 'did:casper:abc123...',
-            credentialHash: 'mock-credential-hash-xyz'
-        });
-    };
-
-    // Real setup based on tier
-    const runSetup = async () => {
-        try {
-            if (tier === 'layer_1') {
-                await runL1Setup();
-            } else {
-                await runL2L3Setup();
-            }
-        } catch (err) {
-            const message = err instanceof Error ? err.message : 'Setup failed';
-            setError(message);
-            setStatus('failed');
-            onError?.(message);
-        }
-    };
-
-    // L1 Setup: Wallet + DID creation (synchronous)
-    const runL1Setup = async () => {
-        // Step 1: Generate wallet
-        setStatus('processing');
-        setProgress(10);
-
-        const walletResponse = await fetch(`${apiBaseUrl}/api/passkey/wallet/generate`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${sessionToken}`
-            },
-            credentials: 'include'
-        });
-
-        if (!walletResponse.ok) {
-            const errorData = await walletResponse.json().catch(() => ({}));
-            throw new Error(errorData.error || 'Failed to generate wallet');
-        }
-
-        const walletData = await walletResponse.json();
-        if (!walletData.success || !walletData.walletInfo?.walletAddress) {
-            throw new Error(walletData.error || 'Wallet generation failed');
-        }
-
-        setWallet(walletData.walletInfo.walletAddress);
-        if (walletData.walletInfo.humanId) {
-            setHumanId(walletData.walletInfo.humanId);
-        }
-        setProgress(50);
-
-        // Step 2: Mint DID
-        setStatus('minting');
-        setProgress(60);
-
-        const didResponse = await fetch(`${apiBaseUrl}/api/passkey/did/mint`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${sessionToken}`
-            },
-            credentials: 'include'
-        });
-
-        if (!didResponse.ok) {
-            const errorData = await didResponse.json().catch(() => ({}));
-            throw new Error(errorData.error || 'Failed to mint DID');
-        }
-
-        const didData = await didResponse.json();
-        if (!didData.success) {
-            throw new Error(didData.error || 'DID minting failed');
-        }
-
-        setDidAddress(didData.did_address);
-        setCredentialHash(didData.transaction_hash);
-        setProgress(100);
-        setStatus('completed');
-
-        // Auto-proceed after showing success
-        await sleep(1500);
-        onNext({
-            wallet: walletData.walletInfo.walletAddress,
-            didAddress: didData.did_address,
-            credentialHash: didData.transaction_hash
-        });
-    };
-
-    // L2/L3 Setup: Submit verification (no polling)
-    const runL2L3Setup = async () => {
-        setStatus('processing');
-        setProgress(30);
-
-        // For L2/L3, we just confirm the submission was successful
-        // The actual verification happens in background, user tier upgrades when ready
-        await sleep(500);
-        setProgress(60);
-
-        setStatus('minting');
-        setProgress(80);
-
-        await sleep(500);
-        setProgress(100);
-        setStatus('completed');
-
-        // Auto-proceed after showing success
-        await sleep(1500);
-        onNext({ credentialHash: requestId });
-    };
-
-    const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
-
-    const handleRetry = () => {
-        setStatus('processing');
-        setProgress(0);
-        setError('');
-        hasStartedRef.current = false;
-
-        if (previewMode) {
-            runPreviewMode();
-        } else {
-            runSetup();
-        }
-    };
-
-    // Get tier-specific icon
-    const getTierIcon = () => {
-        if (tier === 'layer_1') {
-            return status === 'minting' ? <Fingerprint className="text-brand w-4 h-4" /> : <Wallet className="text-brand w-4 h-4" />;
-        }
-        return <Shield className="text-brand w-4 h-4" />;
-    };
-
-    // Get status label for transaction status
-    const getStatusLabel = () => {
-        if (tier === 'layer_1') {
-            if (status === 'processing') return t('creating_wallet', language);
-            if (status === 'minting') return t('minting_did_chain', language);
-            if (status === 'completed') return t('identity_live', language);
-        } else {
-            if (status === 'processing') return t('validating_docs', language);
-            if (status === 'minting') return t('submitting_verification', language);
-            if (status === 'completed') return t('verification_queued', language);
-        }
-        return '';
-    };
-
-    return (
-        <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="flex-1 flex flex-col items-center justify-center px-8 text-center"
-        >
-            {/* Rotating card animation */}
-            <div className="relative w-64 h-64 flex items-center justify-center mb-12">
-                <div className="absolute inset-0 rounded-full border-4 border-dashed border-brand-20 animate-[spin_10s_linear_infinite]" />
-                <div className="absolute inset-4 rounded-full border-2 border-[#6DE8EC]/20 animate-[spin_6s_linear_infinite_reverse]" />
-
-                <motion.div
-                    animate={status !== 'failed' ? { rotateY: [0, 180, 360], y: [-10, 10, -10] } : {}}
-                    transition={{ duration: 6, repeat: Infinity, ease: 'easeInOut' }}
-                    className={`relative w-40 h-56 backdrop-blur-xl border rounded-2xl flex flex-col p-4 ${status === 'completed'
-                        ? 'bg-green-500/10 border-green-500/30 shadow-[0_0_50px_-12px_rgba(34,197,94,0.5)]'
-                        : status === 'failed'
-                            ? 'bg-red-500/10 border-red-500/30 shadow-[0_0_50px_-12px_rgba(239,68,68,0.5)]'
-                            : 'bg-brand/10 border-brand-30 shadow-[0_0_50px_-12px_rgba(114,43,238,0.5)]'
-                        }`}
-                >
-                    <div className="flex justify-between items-start mb-6">
-                        <div className={`w-8 h-8 rounded flex items-center justify-center ${status === 'completed'
-                            ? 'bg-green-500/30'
-                            : status === 'failed'
-                                ? 'bg-red-500/30'
-                                : 'bg-brand/30'
-                            }`}>
-                            {status === 'completed' ? (
-                                <CheckCircle2 className="text-green-500 w-4 h-4" />
-                            ) : status === 'failed' ? (
-                                <AlertCircle className="text-red-500 w-4 h-4" />
-                            ) : (
-                                getTierIcon()
-                            )}
-                        </div>
-                        <div className={`w-6 h-1 rounded-full ${status === 'completed'
-                            ? 'bg-green-500/40'
-                            : status === 'failed'
-                                ? 'bg-red-500/40'
-                                : 'bg-brand/40'
-                            }`} />
-                    </div>
-                    <div className="space-y-3 mb-auto">
-                        <div className={`h-2 w-3/4 rounded-full ${status === 'completed'
-                            ? 'bg-green-500/20'
-                            : status === 'failed'
-                                ? 'bg-red-500/20'
-                                : 'bg-brand/20'
-                            }`} />
-                        <div className={`h-2 w-1/2 rounded-full ${status === 'completed'
-                            ? 'bg-green-500/20'
-                            : status === 'failed'
-                                ? 'bg-red-500/20'
-                                : 'bg-brand/20'
-                            }`} />
-                    </div>
-                    <div className="flex items-center gap-2 mt-4">
-                        <div className={`size-6 rounded-full overflow-hidden border border-white/10 ${status === 'completed'
-                            ? 'bg-gradient-to-tr from-green-500 to-[#6DE8EC]'
-                            : status === 'failed'
-                                ? 'bg-gradient-to-tr from-red-500 to-orange-500'
-                                : 'bg-gradient-to-tr from-brand to-[#6DE8EC]'
-                            }`} />
-                        <div className="flex flex-col items-start max-w-[80px]">
-                            {humanId ? (
-                                <motion.span 
-                                    initial={{ opacity: 0 }}
-                                    animate={{ opacity: 1 }}
-                                    className="text-[10px] font-bold text-white/90 truncate w-full text-left"
-                                >
-                                    {humanId}
-                                </motion.span>
-                            ) : (
-                                <div className="h-1.5 w-12 bg-white/20 rounded-full mb-1" />
-                            )}
-                            <div className="h-1 w-8 bg-white/10 rounded-full" />
-                        </div>
-                    </div>
-                    {status !== 'failed' && status !== 'completed' && (
-                        <motion.div
-                            animate={{ top: ['0%', '100%', '0%'] }}
-                            transition={{ duration: 2, repeat: Infinity }}
-                            className="absolute inset-0 bg-gradient-to-b from-transparent via-brand-10 to-transparent h-1/2 w-full"
-                        />
-                    )}
-                </motion.div>
-            </div>
-
-            <div className="space-y-4">
-                <h2 className={`text-2xl font-bold bg-clip-text ${status === 'completed'
-                    ? 'text-green-500'
-                    : status === 'failed'
-                        ? 'text-red-500'
-                        : 'dark:bg-gradient-to-r dark:from-slate-100 dark:to-slate-400 bg-slate-900 dark:text-transparent text-slate-900'
-                    }`}>
-                    {currentMessage.title}
-                </h2>
-                <p className="dark:text-slate-400 text-slate-500 text-sm leading-relaxed max-w-[280px] mx-auto">
-                    {currentMessage.subtitle}
-                </p>
-            </div>
-
-            {/* Error with retry button */}
-            {status === 'failed' && (
-                <div className="mt-6 space-y-3">
-                    <p className="text-red-500 text-sm">{error}</p>
-                    <button
-                        onClick={handleRetry}
-                        className="px-6 py-3 bg-brand text-white rounded-2xl font-bold"
-                    >
-                        {t('try_again', language)}
-                    </button>
-                </div>
-            )}
-
-            {/* Wallet/DID display for L1 */}
-            {tier === 'layer_1' && wallet && status === 'completed' && (
-                <div className="mt-6 p-3 dark:bg-white/5 bg-black/5 rounded-xl border dark:border-white/10 border-black/5">
-                    <p className="text-[10px] text-muted mb-1">{t('your_wallet', language)}</p>
-                    <p className="text-xs font-mono text-main break-all">
-                        {wallet.slice(0, 20)}...{wallet.slice(-10)}
-                    </p>
-                </div>
-            )}
-
-            {/* Credential hash display for L2/L3 */}
-            {tier !== 'layer_1' && credentialHash && status === 'completed' && (
-                <div className="mt-6 p-3 dark:bg-white/5 bg-black/5 rounded-xl border dark:border-white/10 border-black/5">
-                    <p className="text-[10px] text-muted mb-1">{t('verification_id', language)}</p>
-                    <p className="text-xs font-mono text-main break-all">
-                        {credentialHash.slice(0, 20)}...
-                    </p>
-                </div>
-            )}
-
-            {/* Transaction status (only show when not failed) */}
-            {status !== 'failed' && (
-                <div className="w-full mt-12 p-6 dark:bg-brand/5 bg-brand/5 border-t dark:border-white/5 border-black/5">
-                    <div className="flex justify-between items-center mb-3">
-                        <span className="text-xs font-medium text-brand uppercase tracking-widest">
-                            {tier === 'layer_1' ? t('setup_status', language) : t('transaction_status', language)}
-                        </span>
-                        <span className={`text-xs font-bold ${status === 'completed' ? 'text-green-500' : 'text-[#6DE8EC]'
-                            }`}>
-                            {t('complete_percent', language).replace('{percent}', progress.toString())}
-                        </span>
-                    </div>
-                    <div className="w-full h-1.5 dark:bg-brand/10 bg-brand/10 rounded-full overflow-hidden mb-4">
-                        <motion.div
-                            initial={{ width: '0%' }}
-                            animate={{ width: `${progress}%` }}
-                            transition={{ duration: 0.5 }}
-                            className={`h-full rounded-full ${status === 'completed'
-                                ? 'bg-gradient-to-r from-green-500 to-[#6DE8EC]'
-                                : 'bg-gradient-to-r from-brand to-[#6DE8EC]'
-                                } shadow-[0_0_10px_rgba(114,43,238,0.5)]`}
-                        />
-                    </div>
-                    <div className="flex items-center gap-3 px-3 py-2 dark:bg-brand/10 bg-brand/10 rounded-xl border dark:border-brand-10 border-brand-5">
-                        <Network className={`w-4 h-4 ${status === 'completed' ? 'text-green-500' : 'text-brand'
-                            }`} />
-                        <p className="text-[10px] dark:text-slate-300 text-slate-600 font-medium">
-                            {getStatusLabel()}
-                        </p>
-                    </div>
-                </div>
-            )}
-        </motion.div>
-    );
-};
-
-export default MintingIdentity;