@casperid/react 1.0.0

package/src/screens/SecurityUpgrade.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Verified, RefreshCw } from 'lucide-react';
+import { t } from '../utils/i18n';
+
+interface SecurityUpgradeProps {
+    onNext: () => void;
+    onSkip?: () => void;
+    language?: string;
+}
+
+const SecurityUpgrade: React.FC<SecurityUpgradeProps> = ({ onNext, onSkip, language = 'EN' }) => (
+    <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="flex-1 flex flex-col"
+    >
+        <div className="p-6 pb-2">
+            <div className="flex justify-between items-center mb-4">
+                <span className="text-xs font-semibold uppercase tracking-widest text-brand/80">
+                    {t('verification_step', language)}
+                </span>
+                <span className="text-xs font-bold text-muted">{t('kyc_required', language)}</span>
+            </div>
+            <div className="w-full bg-brand/10 h-1.5 rounded-full overflow-hidden">
+                <div
+                    className="bg-brand h-full rounded-full"
+                    style={{ width: '40%' }}
+                />
+            </div>
+        </div>
+
+        <div className="flex-1 flex flex-col items-center justify-center px-8 text-center gap-8">
+            <div className="relative group">
+                <div className="absolute inset-0 bg-cyan-400/20 blur-3xl rounded-full scale-75 group-hover:scale-100 transition-transform duration-500" />
+                <div className="relative w-32 h-32 rounded-full bg-gradient-to-tr from-brand-20 to-brand-5 flex items-center justify-center border border-brand-30 shadow-inner">
+                    <Verified className="w-16 h-16 text-brand" />
+                </div>
+                <div className="absolute bottom-1 right-1 w-8 h-8 rounded-full dark:bg-[#171220] bg-white border-2 border-brand flex items-center justify-center">
+                    <RefreshCw className="w-4 h-4 text-brand" />
+                </div>
+            </div>
+
+            <div className="space-y-4">
+                <h1 className="text-2xl font-bold tracking-tight text-main leading-tight">
+                    {t('security_upgrade_required', language)}
+                </h1>
+                <p className="text-muted text-base leading-relaxed font-medium">
+                    {t('security_upgrade_desc', language)}
+                </p>
+            </div>
+
+            <div className="flex flex-wrap justify-center gap-2">
+                <span className="px-3 py-1 bg-brand/10 rounded-xl text-[10px] font-bold text-brand uppercase tracking-tighter border border-brand-10">
+                    {t('biometric_secure', language)}
+                </span>
+                <span className="px-3 py-1 bg-cyan-400/10 rounded-xl text-[10px] font-bold text-cyan-500 uppercase tracking-tighter border border-cyan-400/10">
+                    {t('zero_knowledge', language)}
+                </span>
+            </div>
+        </div>
+
+        <div className="p-8 space-y-4">
+            <button
+                onClick={onNext}
+                className="w-full bg-brand hover:bg-brand/90 text-white rounded-2xl py-4 font-bold text-lg shadow-xl shadow-brand transition-all active:scale-[0.98]"
+            >
+                {t('start_upgrade', language)}
+            </button>
+            {onSkip && (
+                <button
+                    onClick={onSkip}
+                    className="w-full dark:text-slate-400 text-slate-500 text-sm font-bold dark:hover:text-slate-200 hover:text-slate-800 transition-colors"
+                >
+                    {t('do_this_later', language)}
+                </button>
+            )}
+        </div>
+    </motion.div>
+);
+
+export default SecurityUpgrade;

package/src/screens/VerifyIdentityChoice.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Globe, CreditCard, Smartphone, ShieldCheck, ChevronRight } from 'lucide-react';
+import type { DocumentType } from '../types';
+import { t } from '../utils/i18n';
+
+interface VerifyIdentityChoiceProps {
+    onNext: (documentType: DocumentType) => void;
+    language?: string;
+}
+
+const docs: { id: DocumentType; title: string; desc: string; Icon: React.FC<any> }[] = [
+    { id: 'passport', title: 'Passport', desc: 'All countries supported', Icon: Globe },
+    { id: 'drivers_license', title: 'Driver License', desc: 'Government issued card', Icon: CreditCard },
+    { id: 'national_id', title: 'ID Card', desc: 'National identity document', Icon: Smartphone },
+];
+
+const VerifyIdentityChoice: React.FC<VerifyIdentityChoiceProps> = ({ onNext, language = 'EN' }) => (
+    <motion.div
+        initial={{ opacity: 0, x: 20 }}
+        animate={{ opacity: 1, x: 0 }}
+        exit={{ opacity: 0, x: -20 }}
+        className="flex-1 px-6 pt-4 flex flex-col"
+    >
+        <h3 className="text-2xl font-bold mb-2 text-main">{t('verify_identity', language)}</h3>
+        <p className="text-muted text-sm mb-8 leading-relaxed">
+            {t('choose_document', language)}
+        </p>
+
+        <div className="space-y-4 overflow-y-auto pr-1 pb-6">
+            {docs.map(({ id, title, desc, Icon }) => (
+                <button
+                    key={id}
+                    onClick={() => onNext(id)}
+                    className="w-full group cursor-pointer dark:bg-white/5 bg-slate-100/50 border dark:border-white/10 border-slate-200 rounded-2xl p-5 flex items-center gap-4 hover:dark:bg-brand/15 hover:bg-brand/5 hover:dark:border-brand-40 hover:border-brand-30 transition-all transform hover:-translate-y-1"
+                >
+                    <div className="w-14 h-14 rounded-xl dark:bg-slate-800/50 bg-white flex items-center justify-center text-brand group-hover:bg-brand/20 transition-colors border dark:border-transparent border-slate-100">
+                        <Icon className="w-8 h-8" />
+                    </div>
+                    <div className="flex-1 text-left">
+                        <h4 className="font-bold text-base text-main">{t(id, language)}</h4>
+                        <p className="text-xs text-muted font-medium">{t(`${id}_desc`, language)}</p>
+                    </div>
+                    <ChevronRight className="text-brand w-5 h-5" />
+                </button>
+            ))}
+
+            <div className="mt-8 relative h-32 w-full rounded-2xl overflow-hidden dark:bg-white/5 bg-slate-100/30 flex items-center justify-center border border-dashed dark:border-brand-30 border-brand-40">
+                <div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-brand via-transparent to-transparent" />
+                <div className="text-center z-10">
+                    <ShieldCheck className="text-brand/40 w-10 h-10 mx-auto mb-1" />
+                    <p className="text-[10px] text-muted uppercase tracking-tighter font-bold">Encrypted E2E</p>
+                </div>
+            </div>
+        </div>
+    </motion.div>
+);
+
+export default VerifyIdentityChoice;

package/src/shared/Footer.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface FooterProps {
+    children: React.ReactNode;
+}
+
+const Footer: React.FC<FooterProps> = ({ children }) => (
+    <footer className="p-8 text-center relative z-20">
+        {children}
+    </footer>
+);
+
+export default Footer;

package/src/shared/GlassContainer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface GlassContainerProps {
+    children: React.ReactNode;
+    className?: string;
+    theme?: string; // Added theme prop
+}
+
+const GlassContainer: React.FC<GlassContainerProps> = ({ children, className = '', theme = '' }) => ( // Destructure theme and provide default
+    <div
+        className={`glass-container relative w-full h-full rounded-[var(--casperid-radius,1.5rem)] overflow-hidden flex flex-col shadow-2xl border dark:border-white/10 border-white/40 ${className} ${theme}`} // Added theme to className
+    >
+        {children}
+    </div>
+);
+
+export default GlassContainer;

package/src/shared/Header.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Shield, X, Sun, Moon } from 'lucide-react';
+
+interface HeaderProps {
+    onClose?: () => void;
+    title?: string;
+    subtitle?: string;
+    showClose?: boolean;
+    theme: 'light' | 'dark';
+    toggleTheme: () => void;
+    logoUrl?: string;
+}
+
+const Header: React.FC<HeaderProps> = ({
+    onClose,
+    title = 'CasperID',
+    subtitle = 'SECURE SDK',
+    showClose = true,
+    theme,
+    toggleTheme,
+    logoUrl,
+}) => (
+    <header className="flex items-center justify-between px-6 pt-8 pb-4 relative z-20">
+        <div className="flex items-center gap-3">
+            <div className="p-2 bg-brand rounded-xl flex items-center justify-center shadow-brand">
+                {logoUrl ? (
+                    <img src={logoUrl} alt={title} className="w-5 h-5 object-contain" />
+                ) : (
+                    <Shield className="text-white w-5 h-5" />
+                )}
+            </div>
+            <div>
+                <h2 className="text-lg font-bold tracking-tight text-main">{title}</h2>
+                {subtitle && (
+                    <p className="text-[10px] uppercase tracking-widest text-brand font-bold">
+                        {subtitle}
+                    </p>
+                )}
+            </div>
+        </div>
+        <div className="flex items-center gap-2">
+            <button
+                onClick={toggleTheme}
+                className="p-2 dark:hover:bg-white/10 hover:bg-slate-200/50 rounded-xl transition-colors text-muted"
+                aria-label="Toggle theme"
+            >
+                {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+            </button>
+            {showClose && (
+                <button
+                    onClick={onClose}
+                    className="p-2 dark:hover:bg-white/10 hover:bg-slate-200/50 rounded-full transition-colors text-muted"
+                    aria-label="Close"
+                >
+                    <X className="w-5 h-5" />
+                </button>
+            )}
+        </div>
+    </header>
+);
+
+export default Header;

package/src/types.ts

@@ -0,0 +1,342 @@
+export type Screen =
+    | 'AuthSelection'
+    | 'Login'
+    | 'PasskeyAuth'       // Returning user biometric authentication
+    | 'PasskeyRegister'   // New user passkey creation
+    | 'PinVerification'
+    | 'SecurityUpgrade'
+    | 'FaceScan'
+    | 'VerifyIdentityChoice'
+    | 'DocumentScan'
+    | 'ReviewData'
+    | 'MintingIdentity'   // Unified screen for L1/L2/L3 minting
+    | 'IdentityVerified'
+    | 'PermissionsRequest';
+
+export type SDKMode = 'light' | 'dark' | 'system';
+export type VerificationTier = 'L1' | 'L2' | 'L3';
+export type LayoutMode = 'auto' | 'modal' | 'fullscreen';
+
+export interface CasperIDTheme {
+    primaryColor?: string;
+    borderRadius?: string;
+    fontFamily?: string;
+    mode?: SDKMode;
+    layout?: LayoutMode;
+}
+
+export interface CasperIDModalProps {
+    /** Whether the modal is visible */
+    isOpen: boolean;
+    /** Your CasperID API key (from the Business Dashboard) */
+    apiKey: string;
+    /** Theme overrides — merged with cloud-synced config */
+    theme?: CasperIDTheme;
+    /** Minimum verification tier required. SDK will auto step-up if needed. */
+    requiredTier?: VerificationTier;
+    /** Called when authentication/verification succeeds */
+    onSuccess?: (sessionToken: string, data?: { businessToken?: string }) => void;
+    /** Called when the user dismisses the modal */
+    onClose?: () => void;
+    /** Called when an unrecoverable error occurs */
+    onError?: (error: Error) => void;
+    /** Use 'login' for full auth, 'verify' for KYC-only mode */
+    mode?: 'login' | 'verify';
+    /**
+     * When true, renders the modal card inline (no fixed overlay, no backdrop).
+     * Used by the Design Studio preview pane.
+     */
+    previewMode?: boolean;
+    /** Force a specific screen (used by Design Studio step navigation) */
+    initialScreen?: Screen;
+    /** Base URL for API requests. Defaults to https://apis.casperid.com */
+    apiBaseUrl?: string;
+    /** Current layout mode — 'auto' (default), 'modal', or 'fullscreen' */
+    layout?: LayoutMode;
+    /** Terms of Service URL */
+    termsUrl?: string;
+    /** Privacy Policy URL */
+    privacyUrl?: string;
+    /** Logo URL for branding */
+    logoUrl?: string;
+    /** Default language for the SDK (e.g., 'EN', 'ES', 'FR') */
+    language?: string;
+}
+
+export interface ScreenProps {
+    onNext: (screen?: Screen) => void;
+    theme: 'light' | 'dark';
+    apiBaseUrl?: string;
+    language?: string;
+}
+
+// OTP Authentication State
+export interface OTPState {
+    email: string;
+    verificationId: string;
+}
+
+// API Response types
+export interface SendOTPResponse {
+    success: boolean;
+    verificationId?: string;
+    userExists?: boolean;
+    hasPasskey?: boolean;
+    error?: string;
+    message?: string;
+}
+
+export interface VerifyOTPResponse {
+    success: boolean;
+    sessionToken?: string;
+    business_token?: string;
+    expiresAt?: string;
+    error?: string;
+    attemptsLeft?: number;
+    userExists?: boolean;
+    hasPasskey?: boolean;
+    userAccount?: {
+        user_id: string;
+        wallet?: string;
+        tier?: string;
+        did_address?: string;
+    } | null;
+}
+
+// SDK Configuration
+export interface CasperIDConfig {
+    apiBaseUrl?: string;
+}
+
+// KYC Types
+export type DocumentType = 'passport' | 'drivers_license' | 'national_id';
+
+export interface KYCState {
+    requestId: string;
+    verificationTier: 'layer_2' | 'layer_3';
+    documentType?: DocumentType;
+    extractedData?: ExtractedDocumentData;
+    livenessVerified?: boolean;
+}
+
+export interface ExtractedDocumentData {
+    document_type?: string;
+    document_number?: string;
+    first_name?: string;
+    last_name?: string;
+    date_of_birth?: string;
+    gender?: string;
+    nationality?: string;
+    confidence?: number;
+}
+
+export interface StartVerificationResponse {
+    success: boolean;
+    verification?: {
+        requestId: string;
+        verificationType: string;
+        status: string;
+        requirements: {
+            livenessCheck?: boolean;
+            walletLink?: boolean;
+            identityDocument?: boolean;
+            nimcVerification?: boolean;
+        };
+        verificationMethod?: string;
+        expiresAt: string;
+        nextStep: string;
+    };
+    error?: string;
+}
+
+export interface LivenessResponse {
+    success: boolean;
+    liveness?: {
+        passed: boolean;
+        confidence: number;
+        antiSpoofingScore?: number;
+    };
+    error?: string;
+}
+
+export interface DocumentUploadResponse {
+    success: boolean;
+    upload_id?: string;
+    extracted_data?: ExtractedDocumentData;
+    confidence?: number;
+    needs_review?: boolean;
+    error?: string;
+}
+
+export interface VerificationStatusResponse {
+    success: boolean;
+    verification?: {
+        requestId: string;
+        status: 'pending' | 'in_progress' | 'completed' | 'failed' | 'cancelled';
+        verificationType?: string;
+        createdAt?: string;
+        completedAt?: string;
+        expiresAt?: string;
+        progress?: {
+            livenessCompleted?: boolean;
+            documentCompleted?: boolean;
+            livenessScore?: number;
+        };
+        results?: {
+            verified: boolean;
+            tier: string;
+            proofHash: string;
+            signature: string;
+        };
+        error?: string;
+    };
+    error?: string;
+}
+
+export interface Layer3SubmitResponse {
+    success: boolean;
+    verification_request_id?: string;
+    status?: string;
+    message?: string;
+    error?: string;
+}
+
+// Passkey / WebAuthn Types
+export interface PasskeyRegisterInitResponse {
+    success: boolean;
+    userId?: string;
+    options?: PublicKeyCredentialCreationOptionsJSON;
+    expiresIn?: number;
+    error?: string;
+}
+
+export interface PasskeyRegisterCompleteResponse {
+    success: boolean;
+    credential_id?: string;
+    session_token?: string;
+    business_token?: string;
+    expires_at?: string;
+    user?: {
+        user_id: string;
+        email: string;
+        tier: string;
+    };
+    error?: string;
+}
+
+export interface PasskeyAuthInitResponse {
+    success: boolean;
+    options?: PublicKeyCredentialRequestOptionsJSON;
+    error?: string;
+}
+
+export interface PasskeyAuthCompleteResponse {
+    success: boolean;
+    session_token?: string;
+    business_token?: string;
+    expires_at?: string;
+    user?: {
+        user_id: string;
+        email: string;
+        wallet?: string;
+        tier: string;
+        did_address?: string;
+    };
+    error?: string;
+}
+
+// WebAuthn JSON types (for transport)
+export interface PublicKeyCredentialCreationOptionsJSON {
+    challenge: string;
+    rp: {
+        name: string;
+        id?: string;
+    };
+    user: {
+        id: string;
+        name: string;
+        displayName: string;
+    };
+    pubKeyCredParams: Array<{
+        type: 'public-key';
+        alg: number;
+    }>;
+    timeout?: number;
+    attestation?: AttestationConveyancePreference;
+    authenticatorSelection?: {
+        authenticatorAttachment?: AuthenticatorAttachment;
+        residentKey?: ResidentKeyRequirement;
+        requireResidentKey?: boolean;
+        userVerification?: UserVerificationRequirement;
+    };
+    excludeCredentials?: Array<{
+        type: 'public-key';
+        id: string;
+        transports?: AuthenticatorTransport[];
+    }>;
+}
+
+export interface PublicKeyCredentialRequestOptionsJSON {
+    challenge: string;
+    timeout?: number;
+    rpId?: string;
+    allowCredentials?: Array<{
+        type: 'public-key';
+        id: string;
+        transports?: AuthenticatorTransport[];
+    }>;
+    userVerification?: UserVerificationRequirement;
+}
+
+// L1 Setup Types
+export interface WalletGenerateResponse {
+    success: boolean;
+    walletInfo?: {
+        walletAddress: string;
+        humanId: string;
+        publicKey: string;
+    };
+    alreadyExists?: boolean;
+    error?: string;
+}
+
+export interface DIDMintResponse {
+    success: boolean;
+    did_address?: string;
+    transaction_hash?: string;
+    error?: string;
+}
+
+// App Metadata for Branding
+export interface AppMetadata {
+    app_id: string;
+    name: string;
+    logo_url?: string;
+    theme?: {
+        primaryColor?: string;
+        borderRadius?: string;
+        fontFamily?: string;
+        layout?: LayoutMode;
+    };
+}
+
+export interface AppMetadataResponse {
+    success: boolean;
+    app?: AppMetadata;
+    error?: string;
+}
+
+// Auth State for SDK internal use
+export interface AuthState {
+    email: string;
+    sessionToken?: string;
+    businessToken?: string;
+    userExists: boolean;
+    hasPasskey: boolean;
+    userAccount?: {
+        user_id: string;
+        wallet?: string;
+        tier?: string;
+        did_address?: string;
+    } | null;
+}

package/src/utils/fetchWithTimeout.ts

@@ -0,0 +1,52 @@
+/**
+ * Fetch wrapper with timeout support
+ * @param url - The URL to fetch
+ * @param options - Fetch options
+ * @param timeout - Timeout in milliseconds (default: 30000)
+ * @returns Promise<Response>
+ */
+export async function fetchWithTimeout(
+    url: string,
+    options: RequestInit = {},
+    timeout: number = 30000
+): Promise<Response> {
+    const controller = new AbortController();
+    const id = setTimeout(() => controller.abort(), timeout);
+
+    try {
+        const response = await fetch(url, {
+            ...options,
+            signal: controller.signal
+        });
+        return response;
+    } finally {
+        clearTimeout(id);
+    }
+}
+
+/**
+ * Error class for API errors with status code
+ */
+export class ApiError extends Error {
+    status: number;
+
+    constructor(message: string, status: number) {
+        super(message);
+        this.name = 'ApiError';
+        this.status = status;
+    }
+}
+
+/**
+ * Helper to handle API response and throw on error
+ */
+export async function handleApiResponse<T>(response: Response): Promise<T> {
+    if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new ApiError(
+            errorData.error || errorData.message || `Request failed with status ${response.status}`,
+            response.status
+        );
+    }
+    return response.json();
+}