@casperid/react 1.0.0 → 1.1.0

package/src/index.css

@@ -1,217 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
-@import "tailwindcss";
-
-@theme {
-    --font-sans: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
-}
-
-/* ============================================
-   CSS Variable Bridge — driven by <CasperIDModal theme={...} />
-   Variables are set dynamically by the component via scoped styles.
-   No defaults here to prevent flash of default colors.
-   ============================================ */
-:root {
-    /* Brand variables are injected by CasperIDModal component */
-    font-family: var(--casperid-font, "Plus Jakarta Sans", Inter, sans-serif);
-}
-
-/* Light mode (default) */
-:root,
-.light {
-    --bg-app: #f8fafc;
-    --text-primary: #0f172a;
-    --text-secondary: #64748b;
-    --glass-bg: rgba(255, 255, 255, 0.94);
-    --glass-border: rgba(0, 0, 0, 0.16);
-}
-
-/* Dark mode */
-.dark {
-    --bg-app: #0B0813;
-    --text-primary: #ffffff;
-    --text-secondary: #94a3b8;
-    --glass-bg: #0e0b16;
-    --glass-border: rgba(255, 255, 255, 0.18);
-}
-
-@layer base {
-    body {
-        @apply antialiased;
-    }
-}
-
-@layer components {
-    .glass-container {
-        @apply backdrop-blur-[32px] border transition-all duration-500;
-        background: var(--glass-bg);
-        border-color: var(--glass-border);
-    }
-
-    /* Force background color to prevent clipping or transparency issues in light mode */
-    :root:not(.dark) .glass-container {
-        background-color: var(--glass-bg) !important;
-    }
-
-    .dark .glass-container {
-        background-color: var(--glass-bg) !important;
-    }
-
-    .light .glass-container {
-        box-shadow:
-            0 20px 50px -12px rgba(0, 0, 0, 0.1),
-            0 0 0 1px rgba(0, 0, 0, 0.05);
-    }
-
-    .mesh-gradient {
-        @apply transition-all duration-700;
-        /* Vibrant mesh gradient using the dynamic primary color */
-        background:
-            radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--casperid-primary), transparent 65%) 0%, transparent 60%),
-            radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--casperid-primary), transparent 90%) 0%, transparent 50%);
-    }
-
-    .dark .mesh-gradient {
-        background:
-            radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--casperid-primary), transparent 80%) 0%, transparent 50%),
-            radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--casperid-primary), transparent 92%) 0%, transparent 40%);
-    }
-
-    .text-main {
-        color: var(--text-primary);
-    }
-
-    .text-muted {
-        color: var(--text-secondary);
-    }
-
-    .text-brand {
-        color: var(--casperid-primary);
-    }
-
-    /* ============================================
-       Brand Color Utilities (using CSS variables)
-       ============================================ */
-    .bg-brand {
-        background-color: var(--casperid-primary);
-    }
-
-    .bg-brand-90 {
-        background-color: color-mix(in srgb, var(--casperid-primary) 90%, transparent);
-    }
-
-    .bg-brand-20 {
-        background-color: color-mix(in srgb, var(--casperid-primary) 20%, transparent);
-    }
-
-    .bg-brand-10 {
-        background-color: color-mix(in srgb, var(--casperid-primary) 10%, transparent);
-    }
-
-    .bg-brand-5 {
-        background-color: color-mix(in srgb, var(--casperid-primary) 5%, transparent);
-    }
-
-    .hover\:bg-brand-90:hover {
-        background-color: color-mix(in srgb, var(--casperid-primary) 90%, transparent);
-    }
-
-    .hover\:bg-brand-15:hover {
-        background-color: color-mix(in srgb, var(--casperid-primary) 15%, transparent);
-    }
-
-    .border-brand {
-        border-color: var(--casperid-primary);
-    }
-
-    .border-brand-30 {
-        border-color: color-mix(in srgb, var(--casperid-primary) 30%, transparent);
-    }
-
-    .border-brand-20 {
-        border-color: color-mix(in srgb, var(--casperid-primary) 20%, transparent);
-    }
-
-    .border-brand-10 {
-        border-color: color-mix(in srgb, var(--casperid-primary) 10%, transparent);
-    }
-
-    .border-brand-5 {
-        border-color: color-mix(in srgb, var(--casperid-primary) 5%, transparent);
-    }
-
-    .border-brand-40 {
-        border-color: color-mix(in srgb, var(--casperid-primary) 40%, transparent);
-    }
-
-    .hover\:border-brand-40:hover {
-        border-color: color-mix(in srgb, var(--casperid-primary) 40%, transparent);
-    }
-
-    .hover\:border-brand-30:hover {
-        border-color: color-mix(in srgb, var(--casperid-primary) 30%, transparent);
-    }
-
-    .shadow-brand {
-        box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--casperid-primary) 30%, transparent);
-    }
-
-    .ring-brand {
-        --tw-ring-color: var(--casperid-primary);
-    }
-
-    .ring-brand-40 {
-        --tw-ring-color: color-mix(in srgb, var(--casperid-primary) 40%, transparent);
-    }
-
-    .selection-brand {
-        --tw-selection-bg: color-mix(in srgb, var(--casperid-primary) 30%, transparent);
-    }
-
-    /* Border radius utility */
-    .rounded-brand {
-        border-radius: var(--casperid-radius, 12px);
-    }
-
-    /* Focus ring utilities */
-    .focus-within\:ring-brand-40:focus-within {
-        --tw-ring-color: color-mix(in srgb, var(--casperid-primary) 40%, transparent);
-        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-    }
-
-    .focus\:ring-brand-30:focus {
-        --tw-ring-color: color-mix(in srgb, var(--casperid-primary) 30%, transparent);
-        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-    }
-
-    /* Gradient utilities */
-    .from-brand {
-        --tw-gradient-from: var(--casperid-primary) var(--tw-gradient-from-position);
-        --tw-gradient-to: color-mix(in srgb, var(--casperid-primary) 0%, transparent) var(--tw-gradient-to-position);
-        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-    }
-
-    .from-brand-20 {
-        --tw-gradient-from: color-mix(in srgb, var(--casperid-primary) 20%, transparent) var(--tw-gradient-from-position);
-        --tw-gradient-to: transparent var(--tw-gradient-to-position);
-        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-    }
-
-    .from-brand-5 {
-        --tw-gradient-from: color-mix(in srgb, var(--casperid-primary) 5%, transparent) var(--tw-gradient-from-position);
-        --tw-gradient-to: transparent var(--tw-gradient-to-position);
-        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-    }
-
-    .to-brand {
-        --tw-gradient-to: var(--casperid-primary) var(--tw-gradient-to-position);
-    }
-
-    .via-brand-10 {
-        --tw-gradient-to: transparent var(--tw-gradient-to-position);
-        --tw-gradient-stops: var(--tw-gradient-from), color-mix(in srgb, var(--casperid-primary) 10%, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to);
-    }
-}

package/src/index.ts

@@ -1,41 +0,0 @@
-// Styles (optional - consumers can import separately)
-import './index.css';
-
-// Main component
-export { CasperIDModal } from './CasperIDModal';
-export { default } from './CasperIDModal';
-
-// Individual screens (for advanced customisation / white-labelling)
-export { default as AuthSelectionScreen } from './screens/AuthSelection';
-export { default as LoginScreen } from './screens/Login';
-export { default as PinVerificationScreen } from './screens/PinVerification';
-export { default as SecurityUpgradeScreen } from './screens/SecurityUpgrade';
-export { default as FaceScanScreen } from './screens/FaceScan';
-export { default as VerifyIdentityChoiceScreen } from './screens/VerifyIdentityChoice';
-export { default as DocumentScanScreen } from './screens/DocumentScan';
-export { default as ReviewDataScreen } from './screens/ReviewData';
-export { default as MintingIdentityScreen } from './screens/MintingIdentity';
-export { default as IdentityVerifiedScreen } from './screens/IdentityVerified';
-export { default as PermissionsRequestScreen } from './screens/PermissionsRequest';
-
-// Shared components
-export { default as GlassContainer } from './shared/GlassContainer';
-export { default as Header } from './shared/Header';
-export { default as Footer } from './shared/Footer';
-
-// Types
-export type {
-    CasperIDModalProps,
-    CasperIDTheme,
-    Screen,
-    SDKMode,
-    VerificationTier,
-    ScreenProps,
-    DocumentType,
-    ExtractedDocumentData,
-    KYCState,
-    OTPState,
-} from './types';
-
-// Utilities
-export { fetchWithTimeout, ApiError, handleApiResponse } from './utils/fetchWithTimeout';

package/src/screens/AuthSelection.tsx

@@ -1,221 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { motion } from 'framer-motion';
-import { Fingerprint, Puzzle, ChevronRight, Smartphone, ShieldCheck, RefreshCw, Loader2, AlertCircle } from 'lucide-react';
-import { t } from '../utils/i18n';
-
-interface ExtensionUserData {
-    wallet: string;
-    cnsName?: string;
-    email?: string;
-    tier?: string;
-    humanId?: string;
-}
-
-interface AuthSelectionProps {
-    onNext: (method: 'extension' | 'otp') => void;
-    onExtensionSuccess?: (userData: ExtensionUserData) => void;
-    onError?: (error: string) => void;
-    language?: string;
-}
-
-const AuthSelection: React.FC<AuthSelectionProps> = ({
-    onNext,
-    onExtensionSuccess,
-    onError,
-    language = 'EN'
-}) => {
-    const [isCheckingExtension, setIsCheckingExtension] = useState(false);
-    const [extensionInstalled, setExtensionInstalled] = useState<boolean | null>(null);
-    const [error, setError] = useState('');
-
-    // Check if extension is installed on mount
-    useEffect(() => {
-        checkExtensionInstalled();
-    }, []);
-
-    // Listen for extension login events
-    useEffect(() => {
-        const handleExtensionLogin = (event: CustomEvent<ExtensionUserData>) => {
-            setIsCheckingExtension(false);
-            if (event.detail && event.detail.wallet) {
-                onExtensionSuccess?.(event.detail);
-            }
-        };
-
-        window.addEventListener('casperid-login', handleExtensionLogin as EventListener);
-        return () => {
-            window.removeEventListener('casperid-login', handleExtensionLogin as EventListener);
-        };
-    }, [onExtensionSuccess]);
-
-    const checkExtensionInstalled = useCallback(() => {
-        // Check for extension anchor or localStorage data
-        const anchor = document.getElementById('casperid-draggable-anchor');
-        let storedUser: string | null = null;
-
-        try {
-            storedUser = localStorage.getItem('casperid_user');
-        } catch {
-            // localStorage may not be available in some contexts
-        }
-
-        if (anchor || storedUser) {
-            setExtensionInstalled(true);
-            return true;
-        }
-
-        // Also check if we can detect extension via a brief timeout
-        // Extension injects its content script which adds the anchor
-        setTimeout(() => {
-            const anchorAfterDelay = document.getElementById('casperid-draggable-anchor');
-            setExtensionInstalled(!!anchorAfterDelay);
-        }, 500);
-
-        return false;
-    }, []);
-
-    const isValidUserData = (data: unknown): data is ExtensionUserData => {
-        return (
-            typeof data === 'object' &&
-            data !== null &&
-            'wallet' in data &&
-            typeof (data as ExtensionUserData).wallet === 'string' &&
-            (data as ExtensionUserData).wallet.length > 0
-        );
-    };
-
-    const handleExtensionLogin = async () => {
-        setIsCheckingExtension(true);
-        setError('');
-
-        // Check if already logged in via extension
-        try {
-            const storedUser = localStorage.getItem('casperid_user');
-            if (storedUser) {
-                const userData = JSON.parse(storedUser);
-                if (isValidUserData(userData)) {
-                    setIsCheckingExtension(false);
-                    onExtensionSuccess?.(userData);
-                    return;
-                }
-            }
-        } catch {
-            // Invalid stored data or localStorage not available, continue with extension trigger
-        }
-
-        // Check if extension anchor exists
-        const anchor = document.getElementById('casperid-draggable-anchor');
-
-        if (anchor) {
-            // Trigger click on the anchor to initiate login
-            anchor.click();
-
-            // Set a timeout to show error if no response
-            setTimeout(() => {
-                setIsCheckingExtension(false);
-                // Check again if login succeeded
-                try {
-                    const newStoredUser = localStorage.getItem('casperid_user');
-                    if (!newStoredUser) {
-                        setError(t('extension_connect_msg', language));
-                    }
-                } catch {
-                    setError(t('extension_connect_msg', language));
-                }
-            }, 3000);
-        } else {
-            // Extension not detected
-            setIsCheckingExtension(false);
-            setError(t('extension_not_detected', language));
-            onError?.('Extension not installed');
-        }
-    };
-
-    const handleOTPLogin = () => {
-        setError('');
-        onNext('otp');
-    };
-
-    return (
-        <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="flex-1 px-8 flex flex-col justify-center gap-8"
-        >
-            <div className="text-center space-y-3">
-                <div className="relative w-24 h-24 mx-auto mb-6">
-                    <div className="absolute inset-0 bg-brand-20 blur-2xl rounded-full" />
-                    <div className="relative w-full h-full glass-container flex items-center justify-center rounded-2xl border border-brand-30">
-                        <Fingerprint className="w-10 h-10 text-brand" />
-                    </div>
-                </div>
-                <h1 className="text-2xl font-extrabold leading-tight tracking-tight text-main">{t('welcome_back', language)}</h1>
-                <p className="text-muted text-sm leading-relaxed">
-                    {t('auth_subtitle', language)}
-                </p>
-            </div>
-
-            {/* Error Message */}
-            {error && (
-                <div className="flex items-start gap-3 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-2xl">
-                    <AlertCircle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
-                    <p className="text-red-600 dark:text-red-400 text-sm font-medium">{error}</p>
-                </div>
-            )}
-
-            <div className="space-y-4">
-                <button
-                    onClick={handleExtensionLogin}
-                    disabled={isCheckingExtension}
-                    className="w-full group relative overflow-hidden flex items-center gap-4 bg-brand hover:bg-brand-90 text-white py-5 px-6 rounded-2xl font-bold transition-all transform active:scale-[0.98] disabled:opacity-70 disabled:cursor-not-allowed shadow-brand"
-                >
-                    <div className="bg-white/20 p-2 rounded-lg">
-                        {isCheckingExtension ? (
-                            <Loader2 className="w-5 h-5 animate-spin" />
-                        ) : (
-                            <Puzzle className="w-5 h-5" />
-                        )}
-                    </div>
-                    <div className="flex flex-col items-start">
-                        <span className="text-base">
-                            {isCheckingExtension ? t('connecting', language) : t('sign_in_with_extension', language)}
-                        </span>
-                        <span className="text-[10px] uppercase tracking-widest text-white/70">
-                            {extensionInstalled === true ? t('extension_detected', language) : t('secure_wallet', language)}
-                        </span>
-                    </div>
-                    <ChevronRight className="ml-auto w-4 h-4 opacity-50 group-hover:opacity-100 transition-opacity" />
-                </button>
-
-                <button
-                    onClick={handleOTPLogin}
-                    disabled={isCheckingExtension}
-                    className="w-full group relative overflow-hidden flex items-center gap-4 dark:bg-white/5 bg-slate-100/50 hover:dark:bg-white/10 hover:bg-slate-200/80 border dark:border-white/10 border-slate-200 text-main py-5 px-6 rounded-2xl font-bold transition-all transform active:scale-[0.98] disabled:opacity-50"
-                >
-                    <div className="bg-brand-10 p-2 rounded-lg">
-                        <Smartphone className="w-5 h-5 text-brand" />
-                    </div>
-                    <div className="flex flex-col items-start">
-                        <span className="text-base">{t('sign_in_with_otp', language)}</span>
-                        <span className="text-[10px] uppercase tracking-widest text-brand font-bold">{t('two_factor_auth', language)}</span>
-                    </div>
-                    <ChevronRight className="ml-auto w-4 h-4 opacity-50 group-hover:opacity-100 transition-opacity" />
-                </button>
-            </div>
-
-            <div className="grid grid-cols-2 gap-3">
-                <div className="glass-container p-4 rounded-2xl flex flex-col items-center gap-2 text-center border-slate-200/50">
-                    <ShieldCheck className="w-5 h-5 text-brand" />
-                    <span className="text-[10px] font-bold text-muted">{t('fully_audited', language)}</span>
-                </div>
-                <div className="glass-container p-4 rounded-2xl flex flex-col items-center gap-2 text-center border-slate-200/50">
-                    <RefreshCw className="w-5 h-5 text-brand" />
-                    <span className="text-[10px] font-bold text-muted">{t('non_custodial', language)}</span>
-                </div>
-            </div>
-        </motion.div>
-    );
-};
-
-export default AuthSelection;