zopassport 0.1.0

package/app/src/App.tsx

@@ -0,0 +1,331 @@
+import React, { useState, useEffect } from 'react';
+import { ZoPassportSDK } from 'zopassport';
+import { ZoLanding, ZoPassportPage, WalletFullPage } from 'zopassport/react';
+import type { ZoUser } from 'zopassport';
+
+// Get client key from environment
+const CLIENT_KEY = import.meta.env.VITE_ZO_CLIENT_KEY || '';
+const API_URL = import.meta.env.VITE_ZO_API_URL;
+
+// Validate configuration
+if (!CLIENT_KEY || CLIENT_KEY === 'your-client-key-here') {
+  console.error(`
+╔════════════════════════════════════════════════════════════╗
+║                    ⚠️  CONFIGURATION ERROR                  ║
+╠════════════════════════════════════════════════════════════╣
+║  Missing ZO_CLIENT_KEY!                                    ║
+║                                                            ║
+║  1. Copy .env.example to .env                              ║
+║     cp .env.example .env                                   ║
+║                                                            ║
+║  2. Edit .env and add your client key                      ║
+║     VITE_ZO_CLIENT_KEY=your-actual-key                     ║
+║                                                            ║
+║  Get your key at: https://zo.xyz/developers                ║
+╚════════════════════════════════════════════════════════════╝
+  `);
+}
+
+// Initialize SDK
+const sdk = new ZoPassportSDK({
+  clientKey: CLIENT_KEY,
+  baseUrl: API_URL,
+  autoRefresh: true,
+});
+
+type Screen = 'landing' | 'passport' | 'wallet';
+
+function App() {
+  const [screen, setScreen] = useState<Screen>('landing');
+  const [user, setUser] = useState<ZoUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [walletBalance, setWalletBalance] = useState(0);
+  const [walletOpen, setWalletOpen] = useState(false);
+  const [isLoadingBalance, setIsLoadingBalance] = useState(false);
+
+  // Fetch wallet balance
+  const fetchWalletBalance = async () => {
+    setIsLoadingBalance(true);
+    try {
+      const balance = await sdk.getWalletBalance();
+      console.log('[App] Wallet balance fetched:', balance);
+      setWalletBalance(balance);
+    } catch (error) {
+      console.warn('[App] Could not fetch wallet balance, using default:', error);
+      // Don't throw - just keep the existing balance
+    } finally {
+      setIsLoadingBalance(false);
+    }
+  };
+
+  // Check for existing session on mount
+  useEffect(() => {
+    const checkSession = async () => {
+      setIsLoading(true);
+      try {
+        if (sdk.isAuthenticated) {
+          const profile = await sdk.getProfile();
+          if (profile) {
+            setUser(profile);
+            setScreen('passport');
+            // Fetch wallet balance
+            await fetchWalletBalance();
+          }
+        }
+      } catch (error) {
+        console.error('Session check failed:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    checkSession();
+  }, []);
+
+  // Refresh balance when wallet opens
+  useEffect(() => {
+    if (walletOpen) {
+      fetchWalletBalance();
+    }
+  }, [walletOpen]);
+
+  // Auth handlers
+  const handleSendOTP = async (countryCode: string, phoneNumber: string) => {
+    return sdk.auth.sendOTP(countryCode, phoneNumber);
+  };
+
+  const handleVerifyOTP = async (countryCode: string, phoneNumber: string, otp: string) => {
+    const result = await sdk.loginWithPhone(countryCode, phoneNumber, otp);
+    if (result.success && result.user) {
+      return { success: true, user: result.user };
+    }
+    return { success: false, error: result.error };
+  };
+
+  const handleAuthSuccess = async (userId: string, userData: ZoUser) => {
+    setUser(userData);
+    setScreen('passport');
+    // Fetch wallet balance
+    try {
+      const balance = await sdk.getWalletBalance();
+      setWalletBalance(balance);
+    } catch (e) {
+      console.error('Failed to fetch wallet:', e);
+    }
+  };
+
+  const handleLogout = async () => {
+    await sdk.logout();
+    setUser(null);
+    setScreen('landing');
+    setWalletBalance(0);
+  };
+
+  // Loading screen
+  if (isLoading) {
+    return (
+      <div style={styles.loadingContainer}>
+        <div style={styles.loader} />
+        <p style={styles.loadingText}>Loading Zo Passport...</p>
+      </div>
+    );
+  }
+
+  // Config error screen
+  if (!CLIENT_KEY || CLIENT_KEY === 'your-client-key-here') {
+    return (
+      <div style={styles.errorContainer}>
+        <div style={styles.errorCard}>
+          <div style={styles.errorIcon}>⚠️</div>
+          <h1 style={styles.errorTitle}>Configuration Required</h1>
+          <p style={styles.errorText}>
+            Your Zo Passport needs a client key to connect to the Zo World.
+          </p>
+          <div style={styles.codeBlock}>
+            <p style={styles.codeComment}># 1. Copy the example config</p>
+            <code>cp .env.example .env</code>
+            <p style={styles.codeComment}># 2. Edit .env with your key</p>
+            <code>VITE_ZO_CLIENT_KEY=your-key</code>
+            <p style={styles.codeComment}># 3. Restart the dev server</p>
+            <code>npm run dev</code>
+          </div>
+          <a 
+            href="https://zo.xyz/developers" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            style={styles.getKeyButton}
+          >
+            Get Your Client Key →
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  // Landing / Auth screen
+  if (screen === 'landing') {
+    return (
+      <ZoLanding
+        onAuthSuccess={handleAuthSuccess}
+        sendOTP={handleSendOTP}
+        verifyOTP={handleVerifyOTP}
+      />
+    );
+  }
+
+  // Main Passport screen
+  return (
+    <div style={styles.container}>
+      {/* Header */}
+      <header style={styles.header}>
+        <img 
+          src="/figma-assets/landing-zo-logo.png" 
+          alt="Zo" 
+          style={styles.logo}
+        />
+        <button onClick={handleLogout} style={styles.logoutButton}>
+          Logout
+        </button>
+      </header>
+
+      {/* Full Passport Page */}
+      <ZoPassportPage
+        user={user}
+        balance={walletBalance}
+        completion={{ done: 8, total: 10 }}
+        walletOpen={walletOpen}
+        onWalletToggle={() => setWalletOpen(!walletOpen)}
+      />
+
+      {/* Wallet Full Screen */}
+      {walletOpen && (
+        <WalletFullPage
+          user={user}
+          balance={walletBalance}
+          onClose={() => setWalletOpen(false)}
+          isLoading={isLoadingBalance}
+          onRefresh={fetchWalletBalance}
+        />
+      )}
+    </div>
+  );
+}
+
+const styles: { [key: string]: React.CSSProperties } = {
+  // Loading
+  loadingContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100vh',
+    background: '#000',
+  },
+  loader: {
+    width: '48px',
+    height: '48px',
+    border: '3px solid rgba(255,255,255,0.1)',
+    borderTopColor: '#fff',
+    borderRadius: '50%',
+    animation: 'spin 1s linear infinite',
+  },
+  loadingText: {
+    marginTop: '16px',
+    color: 'rgba(255,255,255,0.6)',
+    fontSize: '14px',
+  },
+  // Error
+  errorContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '100vh',
+    background: 'linear-gradient(180deg, #000 0%, #1a1a2e 100%)',
+    padding: '24px',
+  },
+  errorCard: {
+    background: 'rgba(255,255,255,0.05)',
+    border: '1px solid rgba(255,255,255,0.1)',
+    borderRadius: '24px',
+    padding: '48px',
+    maxWidth: '500px',
+    textAlign: 'center' as const,
+  },
+  errorIcon: {
+    fontSize: '64px',
+    marginBottom: '24px',
+  },
+  errorTitle: {
+    fontFamily: 'Syne, sans-serif',
+    fontSize: '28px',
+    fontWeight: 800,
+    marginBottom: '16px',
+  },
+  errorText: {
+    color: 'rgba(255,255,255,0.6)',
+    fontSize: '16px',
+    lineHeight: 1.6,
+    marginBottom: '24px',
+  },
+  codeBlock: {
+    background: 'rgba(0,0,0,0.5)',
+    borderRadius: '12px',
+    padding: '20px',
+    textAlign: 'left' as const,
+    fontFamily: 'monospace',
+    fontSize: '14px',
+    marginBottom: '24px',
+  },
+  codeComment: {
+    color: 'rgba(255,255,255,0.4)',
+    margin: '8px 0 4px 0',
+    fontSize: '12px',
+  },
+  getKeyButton: {
+    display: 'inline-block',
+    background: '#fff',
+    color: '#000',
+    padding: '16px 32px',
+    borderRadius: '12px',
+    textDecoration: 'none',
+    fontWeight: 600,
+    fontSize: '16px',
+    transition: 'transform 0.2s',
+  },
+  // Main container
+  container: {
+    minHeight: '100%',
+    background: '#000',
+  },
+  // Header
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '12px 16px',
+    borderBottom: '1px solid rgba(255,255,255,0.1)',
+    background: '#000',
+    position: 'sticky' as const,
+    top: 0,
+    zIndex: 100,
+    flexShrink: 0,
+  },
+  logo: {
+    width: '36px',
+    height: '36px',
+  },
+  logoutButton: {
+    background: 'transparent',
+    border: '1px solid rgba(255,255,255,0.2)',
+    borderRadius: '8px',
+    padding: '8px 16px',
+    color: 'rgba(255,255,255,0.6)',
+    cursor: 'pointer',
+    fontSize: '14px',
+    transition: 'all 0.2s',
+  },
+};
+
+export default App;
+
+
+

package/app/src/components/FounderBadge.tsx

@@ -0,0 +1,26 @@
+// src/components/FounderBadge.tsx
+// Founder badge SVG icon
+
+import React from 'react';
+
+export interface FounderBadgeProps {
+  /** Size in pixels (default: 32) */
+  size?: number;
+}
+
+export const FounderBadge: React.FC<FounderBadgeProps> = ({ size = 32 }) => (
+  <svg width={size} height={size} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12.0117 3.15234C13.1449 2.14828 14.8551 2.14828 15.9883 3.15234L16.0996 3.25684L17.7715 4.89453L20.1123 4.91895L20.2646 4.92383C21.7758 5.01516 22.9848 6.22423 23.0762 7.73535L23.0811 7.8877L23.1045 10.2275L24.7432 11.9004L24.8477 12.0117C25.8517 13.1449 25.8517 14.8551 24.8477 15.9883L24.7432 16.0996L23.1045 17.7715L23.0811 20.1123C23.0646 21.6938 21.8262 22.9818 20.2646 23.0762L20.1123 23.0811L17.7715 23.1045L16.0996 24.7432C14.9697 25.8498 13.1826 25.8852 12.0117 24.8477L11.9004 24.7432L10.2275 23.1045L7.8877 23.0811C6.30625 23.0646 5.01821 21.8262 4.92383 20.2646L4.91895 20.1123L4.89453 17.7715L3.25684 16.0996C2.11446 14.9333 2.11446 13.0667 3.25684 11.9004L4.89453 10.2275L4.91895 7.8877L4.92383 7.73535C5.01821 6.17382 6.30624 4.93536 7.8877 4.91895L10.2275 4.89453L11.9004 3.25684L12.0117 3.15234Z"
+      fill="#FF2F8E"
+      stroke="#111111"
+      strokeWidth="4"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13.5008 16.1741H15.8997C16.4443 16.1741 16.8858 16.6156 16.8858 17.1602C16.8858 17.7048 16.4443 18.1463 15.8997 18.1463H12.2286C11.4558 18.1463 10.8293 17.5199 10.8293 16.7471C10.8293 16.4219 10.9425 16.1069 11.1495 15.8562L14.0743 12.3137H11.8434C11.2988 12.3137 10.8573 11.8722 10.8573 11.3276C10.8573 10.783 11.2988 10.3415 11.8434 10.3415H15.4226C16.1921 10.3415 16.8158 10.9652 16.8158 11.7347C16.8158 12.0634 16.6996 12.3816 16.4876 12.6329L13.5008 16.1741Z"
+      fill="white"
+    />
+  </svg>
+);
+

package/app/src/components/OTPInput.tsx

@@ -0,0 +1,149 @@
+// src/components/OTPInput.tsx
+// 6-digit OTP input component
+
+import React, { useRef, useEffect } from 'react';
+
+export interface OTPInputProps {
+  /** Current OTP value array */
+  value: string[];
+  /** Callback when OTP changes */
+  onChange: (otp: string[]) => void;
+  /** Callback when all 6 digits entered */
+  onComplete?: (otp: string) => void;
+  /** Number of digits (default: 6) */
+  length?: number;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Error message */
+  error?: string;
+  /** Auto-focus first input */
+  autoFocus?: boolean;
+  /** Additional CSS class */
+  className?: string;
+}
+
+export const OTPInput: React.FC<OTPInputProps> = ({
+  value,
+  onChange,
+  onComplete,
+  length = 6,
+  disabled = false,
+  error,
+  autoFocus = true,
+  className = '',
+}) => {
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  // Initialize refs array
+  useEffect(() => {
+    inputRefs.current = inputRefs.current.slice(0, length);
+  }, [length]);
+
+  // Auto-focus first input
+  useEffect(() => {
+    if (autoFocus && inputRefs.current[0]) {
+      setTimeout(() => inputRefs.current[0]?.focus(), 100);
+    }
+  }, [autoFocus]);
+
+  const handleChange = (index: number, inputValue: string) => {
+    // Only allow digits
+    if (inputValue && !/^\d$/.test(inputValue)) return;
+
+    const newOtp = [...value];
+    newOtp[index] = inputValue;
+    onChange(newOtp);
+
+    // Auto-focus next input
+    if (inputValue && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+
+    // Check if complete
+    if (newOtp.every(digit => digit !== '') && index === length - 1) {
+      onComplete?.(newOtp.join(''));
+    }
+  };
+
+  const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Backspace: move to previous input
+    if (e.key === 'Backspace' && !value[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData('text').slice(0, length);
+    const digits = pastedData.replace(/\D/g, '').split('');
+    
+    if (digits.length > 0) {
+      const newOtp = [...value];
+      digits.forEach((digit, i) => {
+        if (i < length) newOtp[i] = digit;
+      });
+      onChange(newOtp);
+      
+      // Focus last filled input or the one after
+      const focusIndex = Math.min(digits.length, length - 1);
+      inputRefs.current[focusIndex]?.focus();
+      
+      if (newOtp.every(digit => digit !== '')) {
+        onComplete?.(newOtp.join(''));
+      }
+    }
+  };
+
+  return (
+    <div className={`zo-otp-input ${className}`}>
+      <div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
+        {Array.from({ length }).map((_, index) => (
+          <input
+            key={index}
+            ref={(el) => { inputRefs.current[index] = el; }}
+            type="text"
+            inputMode="numeric"
+            maxLength={1}
+            value={value[index] || ''}
+            onChange={(e) => handleChange(index, e.target.value)}
+            onKeyDown={(e) => handleKeyDown(index, e)}
+            onPaste={handlePaste}
+            disabled={disabled}
+            style={{
+              width: '48px',
+              height: '56px',
+              backgroundColor: 'rgba(255, 255, 255, 0.1)',
+              border: error
+                ? '1px solid #ef4444'
+                : '1px solid rgba(255, 255, 255, 0.2)',
+              borderRadius: '8px',
+              textAlign: 'center',
+              color: 'white',
+              fontFamily: 'Rubik, system-ui, sans-serif',
+              fontSize: '20px',
+              fontWeight: 600,
+              cursor: disabled ? 'not-allowed' : 'text',
+              opacity: disabled ? 0.5 : 1,
+            }}
+          />
+        ))}
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <p
+          style={{
+            color: '#ef4444',
+            fontSize: '14px',
+            marginTop: '8px',
+            textAlign: 'center',
+            fontFamily: 'Rubik, system-ui, sans-serif',
+          }}
+        >
+          {error}
+        </p>
+      )}
+    </div>
+  );
+};
+

package/app/src/components/PhoneInput.tsx

@@ -0,0 +1,109 @@
+// src/components/PhoneInput.tsx
+// Phone number input with country code selector
+
+import React, { useState } from 'react';
+import { COUNTRY_CODES, parsePhoneNumber } from '../lib/utils/phone';
+
+export interface PhoneInputProps {
+  /** Current phone number value */
+  value: string;
+  /** Current country code (without +) */
+  countryCode: string;
+  /** Callback when phone number changes */
+  onChange: (phone: string) => void;
+  /** Callback when country code changes */
+  onCountryChange: (code: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Error message */
+  error?: string;
+  /** Additional CSS class */
+  className?: string;
+}
+
+export const PhoneInput: React.FC<PhoneInputProps> = ({
+  value,
+  countryCode,
+  onChange,
+  onCountryChange,
+  placeholder = '555-123-4567',
+  disabled = false,
+  error,
+  className = '',
+}) => {
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const digits = parsePhoneNumber(e.target.value);
+    onChange(digits);
+  };
+
+  return (
+    <div className={`zo-phone-input ${className}`}>
+      <div style={{ display: 'flex', gap: '8px' }}>
+        {/* Country Code Selector */}
+        <select
+          value={countryCode}
+          onChange={(e) => onCountryChange(e.target.value)}
+          disabled={disabled}
+          style={{
+            flex: 1,
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            border: '1px solid rgba(255, 255, 255, 0.2)',
+            borderRadius: '8px',
+            padding: '12px 16px',
+            color: 'white',
+            fontFamily: 'Rubik, system-ui, sans-serif',
+            fontSize: '14px',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.5 : 1,
+          }}
+        >
+          {COUNTRY_CODES.map((country) => (
+            <option key={country.code} value={country.code} style={{ backgroundColor: 'black' }}>
+              {country.flag} +{country.code}
+            </option>
+          ))}
+        </select>
+
+        {/* Phone Number Input */}
+        <input
+          type="tel"
+          value={value}
+          onChange={handlePhoneChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          style={{
+            flex: 2,
+            backgroundColor: 'rgba(255, 255, 255, 0.1)',
+            border: error
+              ? '1px solid #ef4444'
+              : '1px solid rgba(255, 255, 255, 0.2)',
+            borderRadius: '8px',
+            padding: '12px 16px',
+            color: 'white',
+            fontFamily: 'Rubik, system-ui, sans-serif',
+            fontSize: '14px',
+            cursor: disabled ? 'not-allowed' : 'text',
+            opacity: disabled ? 0.5 : 1,
+          }}
+        />
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <p
+          style={{
+            color: '#ef4444',
+            fontSize: '14px',
+            marginTop: '8px',
+            fontFamily: 'Rubik, system-ui, sans-serif',
+          }}
+        >
+          {error}
+        </p>
+      )}
+    </div>
+  );
+};
+