@diviswap/sdk 1.7.6

package/src/cli/templates/nextjs-app/kyc-wizard.tsx.hbs

@@ -0,0 +1,711 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { ArrowRight, ArrowLeft, CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
+
+// Types
+type KYCStep = 'intro' | 'personal' | 'identification' | 'address' | 'review' | 'success';
+
+interface KycFormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  dobDay: string;
+  dobMonth: string;
+  dobYear: string;
+  idType: 'ssn' | 'tin' | 'passport';
+  idNumber: string;
+  addressLine1: string;
+  addressLine2?: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  country: string;
+}
+
+interface LiberexKYCProps {
+  onSuccess?: (status: any) => void;
+  onError?: (error: Error) => void;
+  onClose?: () => void;
+  theme?: 'light' | 'dark' | {
+    primaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    borderRadius?: string;
+  };
+  steps?: KYCStep[];
+  autoClose?: boolean;
+  className?: string;
+}
+
+export function LiberexKYC({
+  onSuccess,
+  onError,
+  onClose,
+  theme = 'light',
+  steps = ['intro', 'personal', 'identification', 'address', 'review', 'success'],
+  autoClose = false,
+  className = ''
+}: LiberexKYCProps) {
+  const [currentStep, setCurrentStep] = useState<KYCStep>(steps[0]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState<KycFormData>({
+    firstName: '',
+    lastName: '',
+    email: '',
+    dobDay: '',
+    dobMonth: '',
+    dobYear: '',
+    idType: 'ssn',
+    idNumber: '',
+    addressLine1: '',
+    addressLine2: '',
+    city: '',
+    state: '',
+    postalCode: '',
+    country: 'US'
+  });
+
+  // Theme configuration
+  const themeConfig = typeof theme === 'string' ? {
+    primaryColor: theme === 'dark' ? '#6366f1' : '#4f46e5',
+    backgroundColor: theme === 'dark' ? '#1f2937' : '#ffffff',
+    textColor: theme === 'dark' ? '#f9fafb' : '#1f2937',
+    borderRadius: '8px'
+  } : theme;
+
+  const stepIndex = steps.indexOf(currentStep);
+  const totalSteps = steps.filter(s => s !== 'intro' && s !== 'success').length;
+  const progressPercentage = stepIndex === 0 ? 0 : ((stepIndex - 1) / (totalSteps - 1)) * 100;
+
+  const submitKYC = async () => {
+    setIsSubmitting(true);
+    try {
+      // Format date of birth
+      const dateOfBirth = `${formData.dobYear}-${formData.dobMonth.padStart(2, '0')}-${formData.dobDay.padStart(2, '0')}`;
+      
+      // Prepare KYC data
+      const kycData = {
+        personalInfo: {
+          firstName: formData.firstName,
+          lastName: formData.lastName,
+          email: formData.email,
+          dateOfBirth,
+          ssn: formData.idType === 'ssn' ? formData.idNumber.replace(/-/g, '') : undefined,
+          tin: formData.idType === 'tin' ? formData.idNumber : undefined,
+          passport: formData.idType === 'passport' ? formData.idNumber : undefined,
+        },
+        address: {
+          addressLine1: formData.addressLine1,
+          addressLine2: formData.addressLine2,
+          city: formData.city,
+          state: formData.state,
+          postalCode: formData.postalCode,
+          country: formData.country,
+        }
+      };
+      
+      // Call your KYC submission API
+      const response = await fetch('/api/diviswap', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          action: 'submitKYC',
+          ...kycData 
+        }),
+      });
+      
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'KYC submission failed');
+      }
+      
+      const result = await response.json();
+      
+      if (steps.includes('success')) {
+        setCurrentStep('success');
+      }
+      
+      onSuccess?.(result);
+      
+      if (autoClose) {
+        setTimeout(() => onClose?.(), 2000);
+      }
+      
+    } catch (error: any) {
+      console.error('KYC submission error:', error);
+      onError?.(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const nextStep = () => {
+    const currentIndex = steps.indexOf(currentStep);
+    if (currentIndex < steps.length - 1) {
+      setCurrentStep(steps[currentIndex + 1]);
+    }
+  };
+
+  const prevStep = () => {
+    const currentIndex = steps.indexOf(currentStep);
+    if (currentIndex > 0) {
+      setCurrentStep(steps[currentIndex - 1]);
+    }
+  };
+
+  const updateFormData = (updates: Partial<KycFormData>) => {
+    setFormData(prev => ({ ...prev, ...updates }));
+  };
+
+  const containerStyle = {
+    backgroundColor: themeConfig.backgroundColor,
+    color: themeConfig.textColor,
+    borderRadius: themeConfig.borderRadius
+  };
+
+  const primaryButtonStyle = {
+    backgroundColor: themeConfig.primaryColor,
+    borderRadius: themeConfig.borderRadius
+  };
+
+  return (
+    <div className={`diviswap-kyc-container ${className}`} style={containerStyle}>
+      {/* Progress Bar */}
+      {currentStep !== 'intro' && currentStep !== 'success' && (
+        <div className="progress-container">
+          <div className="progress-bar">
+            <div 
+              className="progress-fill" 
+              style={{ 
+                width: `${progressPercentage}%`,
+                backgroundColor: themeConfig.primaryColor 
+              }}
+            />
+          </div>
+          <div className="progress-text">
+            Step {Math.max(stepIndex, 1)} of {totalSteps}
+          </div>
+        </div>
+      )}
+
+      {/* Step Content */}
+      {currentStep === 'intro' && (
+        <IntroStep 
+          onNext={nextStep}
+          onClose={onClose}
+          theme={themeConfig}
+        />
+      )}
+
+      {currentStep === 'personal' && (
+        <PersonalInfoStep
+          formData={formData}
+          updateFormData={updateFormData}
+          onNext={nextStep}
+          onPrev={prevStep}
+          theme={themeConfig}
+        />
+      )}
+
+      {currentStep === 'identification' && (
+        <IdentificationStep
+          formData={formData}
+          updateFormData={updateFormData}
+          onNext={nextStep}
+          onPrev={prevStep}
+          theme={themeConfig}
+        />
+      )}
+
+      {currentStep === 'address' && (
+        <AddressStep
+          formData={formData}
+          updateFormData={updateFormData}
+          onNext={nextStep}
+          onPrev={prevStep}
+          theme={themeConfig}
+        />
+      )}
+
+      {currentStep === 'review' && (
+        <ReviewStep
+          formData={formData}
+          onSubmit={submitKYC}
+          onPrev={prevStep}
+          isSubmitting={isSubmitting}
+          theme={themeConfig}
+        />
+      )}
+
+      {currentStep === 'success' && (
+        <SuccessStep
+          onClose={onClose}
+          theme={themeConfig}
+        />
+      )}
+    </div>
+  );
+}
+
+// Step Components
+function IntroStep({ onNext, onClose, theme }: any) {
+  return (
+    <div className="kyc-step intro-step">
+      <div className="step-header">
+        <CheckCircle className="step-icon" style={{ color: theme.primaryColor }} />
+        <h2>Identity Verification</h2>
+        <p>We need to verify your identity to comply with financial regulations. This process takes about 3 minutes.</p>
+      </div>
+      
+      <div className="verification-info">
+        <div className="info-item">
+          <span className="info-number">1</span>
+          <div>
+            <h4>Personal Information</h4>
+            <p>Basic details like name and date of birth</p>
+          </div>
+        </div>
+        <div className="info-item">
+          <span className="info-number">2</span>
+          <div>
+            <h4>Identification</h4>
+            <p>Government-issued ID verification</p>
+          </div>
+        </div>
+        <div className="info-item">
+          <span className="info-number">3</span>
+          <div>
+            <h4>Address</h4>
+            <p>Current residential address</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="step-actions">
+        <button 
+          onClick={onNext}
+          className="btn-primary"
+          style={{ backgroundColor: theme.primaryColor }}
+        >
+          Start Verification
+          <ArrowRight className="btn-icon" />
+        </button>
+        {onClose && (
+          <button onClick={onClose} className="btn-secondary">
+            Not Now
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function PersonalInfoStep({ formData, updateFormData, onNext, onPrev, theme }: any) {
+  const isValid = formData.firstName && formData.lastName && formData.email && 
+                  formData.dobDay && formData.dobMonth && formData.dobYear;
+
+  return (
+    <div className="kyc-step personal-step">
+      <div className="step-header">
+        <h2>Personal Information</h2>
+        <p>Please enter your legal name as it appears on your government-issued ID.</p>
+      </div>
+
+      <form className="step-form">
+        <div className="form-row">
+          <div className="form-field">
+            <label>First Name</label>
+            <input
+              type="text"
+              value={formData.firstName}
+              onChange={(e) => updateFormData({ firstName: e.target.value })}
+              placeholder="John"
+              required
+            />
+          </div>
+          <div className="form-field">
+            <label>Last Name</label>
+            <input
+              type="text"
+              value={formData.lastName}
+              onChange={(e) => updateFormData({ lastName: e.target.value })}
+              placeholder="Doe"
+              required
+            />
+          </div>
+        </div>
+
+        <div className="form-field">
+          <label>Email Address</label>
+          <input
+            type="email"
+            value={formData.email}
+            onChange={(e) => updateFormData({ email: e.target.value })}
+            placeholder="john@example.com"
+            required
+          />
+        </div>
+
+        <div className="form-field">
+          <label>Date of Birth</label>
+          <div className="date-inputs">
+            <select
+              value={formData.dobMonth}
+              onChange={(e) => updateFormData({ dobMonth: e.target.value })}
+              required
+            >
+              <option value="">Month</option>
+              {Array.from({ length: 12 }, (_, i) => (
+                <option key={i + 1} value={String(i + 1)}>
+                  {new Date(0, i).toLocaleString('en', { month: 'long' })}
+                </option>
+              ))}
+            </select>
+            <select
+              value={formData.dobDay}
+              onChange={(e) => updateFormData({ dobDay: e.target.value })}
+              required
+            >
+              <option value="">Day</option>
+              {Array.from({ length: 31 }, (_, i) => (
+                <option key={i + 1} value={String(i + 1)}>
+                  {i + 1}
+                </option>
+              ))}
+            </select>
+            <select
+              value={formData.dobYear}
+              onChange={(e) => updateFormData({ dobYear: e.target.value })}
+              required
+            >
+              <option value="">Year</option>
+              {Array.from({ length: 100 }, (_, i) => {
+                const year = new Date().getFullYear() - 18 - i;
+                return (
+                  <option key={year} value={String(year)}>
+                    {year}
+                  </option>
+                );
+              })}
+            </select>
+          </div>
+        </div>
+      </form>
+
+      <div className="step-actions">
+        <button onClick={onPrev} className="btn-secondary">
+          <ArrowLeft className="btn-icon" />
+          Back
+        </button>
+        <button 
+          onClick={onNext}
+          disabled={!isValid}
+          className="btn-primary"
+          style={{ backgroundColor: theme.primaryColor }}
+        >
+          Continue
+          <ArrowRight className="btn-icon" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function IdentificationStep({ formData, updateFormData, onNext, onPrev, theme }: any) {
+  const isValid = formData.idType && formData.idNumber;
+
+  return (
+    <div className="kyc-step identification-step">
+      <div className="step-header">
+        <h2>Government ID</h2>
+        <p>We need to verify your government-issued identification.</p>
+      </div>
+
+      <form className="step-form">
+        <div className="form-field">
+          <label>ID Type</label>
+          <select
+            value={formData.idType}
+            onChange={(e) => updateFormData({ idType: e.target.value as 'ssn' | 'tin' | 'passport' })}
+            required
+          >
+            <option value="ssn">Social Security Number (SSN)</option>
+            <option value="tin">Taxpayer Identification Number (TIN)</option>
+            <option value="passport">Passport Number</option>
+          </select>
+        </div>
+
+        <div className="form-field">
+          <label>
+            {formData.idType === 'ssn' && 'Social Security Number'}
+            {formData.idType === 'tin' && 'Taxpayer Identification Number'}
+            {formData.idType === 'passport' && 'Passport Number'}
+          </label>
+          <input
+            type="text"
+            value={formData.idNumber}
+            onChange={(e) => updateFormData({ idNumber: e.target.value })}
+            placeholder={
+              formData.idType === 'ssn' ? '123-45-6789' :
+              formData.idType === 'tin' ? '12-3456789' :
+              'A12345678'
+            }
+            required
+          />
+        </div>
+      </form>
+
+      <div className="step-actions">
+        <button onClick={onPrev} className="btn-secondary">
+          <ArrowLeft className="btn-icon" />
+          Back
+        </button>
+        <button 
+          onClick={onNext}
+          disabled={!isValid}
+          className="btn-primary"
+          style={{ backgroundColor: theme.primaryColor }}
+        >
+          Continue
+          <ArrowRight className="btn-icon" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function AddressStep({ formData, updateFormData, onNext, onPrev, theme }: any) {
+  const isValid = formData.addressLine1 && formData.city && formData.state && 
+                  formData.postalCode && formData.country;
+
+  return (
+    <div className="kyc-step address-step">
+      <div className="step-header">
+        <h2>Address Information</h2>
+        <p>Please provide your current residential address.</p>
+      </div>
+
+      <form className="step-form">
+        <div className="form-field">
+          <label>Address Line 1</label>
+          <input
+            type="text"
+            value={formData.addressLine1}
+            onChange={(e) => updateFormData({ addressLine1: e.target.value })}
+            placeholder="123 Main Street"
+            required
+          />
+        </div>
+
+        <div className="form-field">
+          <label>Address Line 2 (Optional)</label>
+          <input
+            type="text"
+            value={formData.addressLine2}
+            onChange={(e) => updateFormData({ addressLine2: e.target.value })}
+            placeholder="Apt 4B"
+          />
+        </div>
+
+        <div className="form-row">
+          <div className="form-field">
+            <label>City</label>
+            <input
+              type="text"
+              value={formData.city}
+              onChange={(e) => updateFormData({ city: e.target.value })}
+              placeholder="New York"
+              required
+            />
+          </div>
+          <div className="form-field">
+            <label>State</label>
+            <input
+              type="text"
+              value={formData.state}
+              onChange={(e) => updateFormData({ state: e.target.value })}
+              placeholder="NY"
+              required
+            />
+          </div>
+        </div>
+
+        <div className="form-row">
+          <div className="form-field">
+            <label>Postal Code</label>
+            <input
+              type="text"
+              value={formData.postalCode}
+              onChange={(e) => updateFormData({ postalCode: e.target.value })}
+              placeholder="10001"
+              required
+            />
+          </div>
+          <div className="form-field">
+            <label>Country</label>
+            <select
+              value={formData.country}
+              onChange={(e) => updateFormData({ country: e.target.value })}
+              required
+            >
+              <option value="US">United States</option>
+              <option value="CA">Canada</option>
+              <option value="UK">United Kingdom</option>
+              {/* Add more countries as needed */}
+            </select>
+          </div>
+        </div>
+      </form>
+
+      <div className="step-actions">
+        <button onClick={onPrev} className="btn-secondary">
+          <ArrowLeft className="btn-icon" />
+          Back
+        </button>
+        <button 
+          onClick={onNext}
+          disabled={!isValid}
+          className="btn-primary"
+          style={{ backgroundColor: theme.primaryColor }}
+        >
+          Continue
+          <ArrowRight className="btn-icon" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function ReviewStep({ formData, onSubmit, onPrev, isSubmitting, theme }: any) {
+  return (
+    <div className="kyc-step review-step">
+      <div className="step-header">
+        <h2>Review Your Information</h2>
+        <p>Please review your information before submitting.</p>
+      </div>
+
+      <div className="review-sections">
+        <div className="review-section">
+          <h3>Personal Information</h3>
+          <div className="review-item">
+            <span>Name:</span>
+            <span>{formData.firstName} {formData.lastName}</span>
+          </div>
+          <div className="review-item">
+            <span>Email:</span>
+            <span>{formData.email}</span>
+          </div>
+          <div className="review-item">
+            <span>Date of Birth:</span>
+            <span>{formData.dobMonth}/{formData.dobDay}/{formData.dobYear}</span>
+          </div>
+        </div>
+
+        <div className="review-section">
+          <h3>Identification</h3>
+          <div className="review-item">
+            <span>ID Type:</span>
+            <span>{formData.idType.toUpperCase()}</span>
+          </div>
+          <div className="review-item">
+            <span>ID Number:</span>
+            <span>***-**-{formData.idNumber.slice(-4)}</span>
+          </div>
+        </div>
+
+        <div className="review-section">
+          <h3>Address</h3>
+          <div className="review-item">
+            <span>Address:</span>
+            <span>
+              {formData.addressLine1}
+              {formData.addressLine2 && `, ${formData.addressLine2}`}
+            </span>
+          </div>
+          <div className="review-item">
+            <span>City, State:</span>
+            <span>{formData.city}, {formData.state} {formData.postalCode}</span>
+          </div>
+          <div className="review-item">
+            <span>Country:</span>
+            <span>{formData.country}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="step-actions">
+        <button onClick={onPrev} className="btn-secondary" disabled={isSubmitting}>
+          <ArrowLeft className="btn-icon" />
+          Back
+        </button>
+        <button 
+          onClick={onSubmit}
+          disabled={isSubmitting}
+          className="btn-primary"
+          style={{ backgroundColor: theme.primaryColor }}
+        >
+          {isSubmitting ? (
+            <>
+              <Loader2 className="btn-icon animate-spin" />
+              Submitting...
+            </>
+          ) : (
+            <>
+              Submit Verification
+              <ArrowRight className="btn-icon" />
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function SuccessStep({ onClose, theme }: any) {
+  return (
+    <div className="kyc-step success-step">
+      <div className="step-header">
+        <CheckCircle className="step-icon success-icon" style={{ color: theme.primaryColor }} />
+        <h2>Verification Submitted!</h2>
+        <p>Your identity verification has been submitted successfully. We'll review your information and notify you of the results.</p>
+      </div>
+
+      <div className="success-info">
+        <div className="info-box">
+          <h4>What happens next?</h4>
+          <ul>
+            <li>We'll review your information within 24-48 hours</li>
+            <li>You'll receive an email with the verification results</li>
+            <li>Once approved, you can access all platform features</li>
+          </ul>
+        </div>
+      </div>
+
+      {onClose && (
+        <div className="step-actions">
+          <button 
+            onClick={onClose}
+            className="btn-primary"
+            style={{ backgroundColor: theme.primaryColor }}
+          >
+            Continue
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Export modal version
+export function LiberexKYCModal({ isOpen, onClose, ...props }: LiberexKYCProps & { isOpen: boolean }) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="diviswap-kyc-modal-overlay">
+      <div className="diviswap-kyc-modal">
+        <LiberexKYC {...props} onClose={onClose} />
+      </div>
+    </div>
+  );
+}