@diviswap/sdk 1.7.6

package/dist/cli/templates/nextjs-app/dashboard-hooks.ts.hbs

@@ -0,0 +1,180 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { use{{prefix}}Auth } from '~/context/diviswap-auth-context';
+
+export function use{{prefix}}Dashboard() {
+  const { customerId, customerEmail, isAuthenticated } = use{{prefix}}Auth();
+
+  // API functions that include customer context
+  const getTransactions = async (params?: any) => {
+    if (!isAuthenticated || !customerId) return [];
+    const queryParams = new URLSearchParams({
+      resource: 'transactions',
+      customerId,
+      customerEmail,
+      ...params
+    });
+    const response = await fetch(`/api/diviswap?${queryParams}`);
+    if (!response.ok) throw new Error('Failed to fetch transactions');
+    return response.json();
+  };
+
+  const getPayees = async () => {
+    if (!isAuthenticated || !customerId) return [];
+    const response = await fetch(`/api/diviswap?resource=payees&customerId=${customerId}&customerEmail=${customerEmail}`);
+    if (!response.ok) throw new Error('Failed to fetch payees');
+    return response.json();
+  };
+
+  const getAddresses = async (params?: { chain_id?: number; is_default?: boolean }) => {
+    if (!isAuthenticated || !customerId) return [];
+    const queryParams = new URLSearchParams({
+      resource: 'addresses',
+      customerId,
+      customerEmail,
+      ...(params?.chain_id && { chain_id: params.chain_id.toString() }),
+      ...(params?.is_default !== undefined && { is_default: params.is_default.toString() })
+    });
+    const response = await fetch(`/api/diviswap?${queryParams}`);
+    if (!response.ok) throw new Error('Failed to fetch addresses');
+    return response.json();
+  };
+
+  const createAddress = async (data: { chain_id: number; address: string; is_default?: boolean }) => {
+    if (!isAuthenticated || !customerId) throw new Error('Not authenticated');
+    const response = await fetch('/api/diviswap', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        action: 'createAddress',
+        customerId,
+        customerEmail,
+        ...data
+      })
+    });
+    if (!response.ok) throw new Error('Failed to create address');
+    return response.json();
+  };
+
+  const setDefaultAddress = async (data: { chain_id: number; address: string }) => {
+    if (!isAuthenticated || !customerId) throw new Error('Not authenticated');
+    const response = await fetch('/api/diviswap', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        action: 'setDefaultAddress',
+        customerId,
+        customerEmail,
+        ...data
+      })
+    });
+    if (!response.ok) throw new Error('Failed to set default address');
+    return response.json();
+  };
+
+  const deleteAddress = async (data: { chain_id: number; address: string }) => {
+    if (!isAuthenticated || !customerId) throw new Error('Not authenticated');
+    const response = await fetch('/api/diviswap', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        action: 'deleteAddress',
+        customerId,
+        customerEmail,
+        ...data
+      })
+    });
+    if (!response.ok) throw new Error('Failed to delete address');
+    return response.json();
+  };
+  
+  const [loading, setLoading] = useState(true);
+  const [transactions, setTransactions] = useState<any[]>([]);
+  const [payees, setPayees] = useState<any[]>([]);
+  const [addresses, setAddresses] = useState<any[]>([]);
+  
+  const [stats, setStats] = useState({
+    totalVolume: 0,
+    pendingTransactions: 0,
+    completedTransactions: 0,
+    failedTransactions: 0,
+  });
+  
+  const [chartData, setChartData] = useState<any[]>([]);
+
+  useEffect(() => {
+    loadDashboardData();
+  }, []);
+
+  const loadDashboardData = async () => {
+    try {
+      setLoading(true);
+      const [txData, payeeData, addressData] = await Promise.all([
+        getTransactions({ limit: 50 }),
+        getPayees(),
+        getAddresses()
+      ]);
+      
+      setTransactions(txData || []);
+      setPayees(payeeData || []);
+      setAddresses(addressData || []);
+      
+      // Calculate stats
+      if (txData && txData.length > 0) {
+        const totalVolume = txData.reduce((sum: number, tx: any) => sum + (tx.amount || 0), 0);
+        const pendingTransactions = txData.filter((tx: any) => tx.status === 'pending').length;
+        const completedTransactions = txData.filter((tx: any) => tx.status === 'completed').length;
+        const failedTransactions = txData.filter((tx: any) => tx.status === 'failed').length;
+        
+        setStats({
+          totalVolume,
+          pendingTransactions,
+          completedTransactions,
+          failedTransactions,
+        });
+        
+        // Prepare chart data (last 7 days)
+        const last7Days = Array.from({ length: 7 }, (_, i) => {
+          const date = new Date();
+          date.setDate(date.getDate() - (6 - i));
+          return date.toISOString().split('T')[0];
+        });
+        
+        const dailyVolumes = last7Days.map(date => {
+          const dayTransactions = txData.filter((tx: any) => 
+            tx.createdAt && new Date(tx.createdAt).toISOString().split('T')[0] === date
+          );
+          const volume = dayTransactions.reduce((sum: number, tx: any) => sum + (tx.amount || 0), 0);
+          
+          return {
+            date: new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+            volume: volume / 100, // Convert cents to dollars
+            transactions: dayTransactions.length,
+          };
+        });
+        
+        setChartData(dailyVolumes);
+      }
+    } catch (error) {
+      console.error('Error loading dashboard data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {
+    stats,
+    chartData,
+    transactions: transactions.slice(0, 5), // Recent 5 transactions
+    payees,
+    addresses,
+    loading,
+    refresh: loadDashboardData,
+    // Address management functions
+    getAddresses,
+    createAddress,
+    setDefaultAddress,
+    deleteAddress,
+  };
+}

package/dist/cli/templates/nextjs-app/example-page.tsx.hbs

@@ -0,0 +1,276 @@
+'use client';
+
+import { useState } from 'react';
+import { LiberexKYC, LiberexKYCModal } from '@/components/diviswap-kyc-wizard';
+import '@/components/diviswap-kyc-wizard.css';
+
+export default function DiviswapDemo() {
+  // Demo state
+  const [currentDemo, setCurrentDemo] = useState<'kyc-inline' | 'kyc-modal' | 'features'>('kyc-inline');
+  const [showKYCModal, setShowKYCModal] = useState(false);
+  const [kycResults, setKycResults] = useState<any[]>([]);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const handleKYCSuccess = (result: any) => {
+    setKycResults(prev => [...prev, { ...result, timestamp: new Date().toISOString() }]);
+    setShowSuccess(true);
+    
+    // Auto-hide success message after 3 seconds
+    setTimeout(() => setShowSuccess(false), 3000);
+  };
+
+  const handleKYCError = (error: Error) => {
+    alert(`KYC Error: ${error.message}`);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <div className="bg-white shadow">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center py-6">
+            <h1 className="text-2xl font-bold text-gray-900">Diviswap KYC Wizard Demo</h1>
+            <div className="text-sm text-gray-600">
+              Ready-to-use KYC component
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Success Banner */}
+      {showSuccess && (
+        <div className="bg-green-50 border border-green-200 rounded-md p-4 mx-4 mt-4">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <svg className="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+              </svg>
+            </div>
+            <div className="ml-3">
+              <p className="text-sm font-medium text-green-800">
+                KYC completed successfully! Check the console for full details.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Demo Navigation */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex space-x-1 mb-8">
+          <button
+            onClick={() => setCurrentDemo('kyc-inline')}
+            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors ${
+              currentDemo === 'kyc-inline'
+                ? 'bg-indigo-100 text-indigo-700 border-2 border-indigo-200'
+                : 'text-gray-500 hover:text-gray-700 border-2 border-transparent'
+            }`}
+          >
+            📝 Inline KYC Wizard
+          </button>
+          <button
+            onClick={() => setCurrentDemo('kyc-modal')}
+            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors ${
+              currentDemo === 'kyc-modal'
+                ? 'bg-indigo-100 text-indigo-700 border-2 border-indigo-200'
+                : 'text-gray-500 hover:text-gray-700 border-2 border-transparent'
+            }`}
+          >
+            🚀 Modal KYC Wizard
+          </button>
+          <button
+            onClick={() => setCurrentDemo('features')}
+            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors ${
+              currentDemo === 'features'
+                ? 'bg-indigo-100 text-indigo-700 border-2 border-indigo-200'
+                : 'text-gray-500 hover:text-gray-700 border-2 border-transparent'
+            }`}
+          >
+            ✨ Features & Themes
+          </button>
+        </div>
+
+        {/* Inline KYC Demo */}
+        {currentDemo === 'kyc-inline' && (
+          <div className="space-y-6">
+            <div className="text-center">
+              <h2 className="text-xl font-semibold text-gray-900 mb-2">Inline KYC Wizard</h2>
+              <p className="text-gray-600 max-w-2xl mx-auto">
+                This is the KYC wizard component embedded directly in your page. Perfect for dedicated verification pages or onboarding flows.
+              </p>
+            </div>
+            
+            <div className="max-w-4xl mx-auto">
+              <LiberexKYC
+                onSuccess={handleKYCSuccess}
+                onError={handleKYCError}
+                theme="light"
+                className="mx-auto"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Modal KYC Demo */}
+        {currentDemo === 'kyc-modal' && (
+          <div className="space-y-6">
+            <div className="text-center">
+              <h2 className="text-xl font-semibold text-gray-900 mb-2">Modal KYC Wizard</h2>
+              <p className="text-gray-600 max-w-2xl mx-auto mb-8">
+                Use the KYC wizard as a modal overlay. Perfect for prompting users to complete verification without leaving their current page.
+              </p>
+              
+              <button
+                onClick={() => setShowKYCModal(true)}
+                className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                🚀 Launch KYC Modal
+              </button>
+            </div>
+            
+            <div className="bg-white rounded-lg p-8 text-center">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">Integration Code</h3>
+              <div className="bg-gray-50 rounded-md p-4 text-left">
+                <pre className="text-sm text-gray-800 overflow-x-auto">
+{`import { LiberexKYCModal } from '@/components/diviswap-kyc-wizard';
+
+function MyComponent() {
+  const [showKYC, setShowKYC] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setShowKYC(true)}>
+        Complete Verification
+      </button>
+      
+      <LiberexKYCModal
+        isOpen={showKYC}
+        onClose={() => setShowKYC(false)}
+        onSuccess={(result) => {
+          console.log('KYC completed!', result);
+          setShowKYC(false);
+        }}
+      />
+    </>
+  );
+}`}
+                </pre>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Features Demo */}
+        {currentDemo === 'features' && (
+          <div className="space-y-8">
+            <div className="text-center">
+              <h2 className="text-xl font-semibold text-gray-900 mb-2">Features & Customization</h2>
+              <p className="text-gray-600 max-w-2xl mx-auto">
+                The KYC wizard supports themes, step customization, and various integration patterns.
+              </p>
+            </div>
+            
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+              {/* Features List */}
+              <div className="bg-white rounded-lg p-6 shadow">
+                <h3 className="text-lg font-medium text-gray-900 mb-4">✨ Key Features</h3>
+                <ul className="space-y-3 text-sm">
+                  <li className="flex items-start">
+                    <span className="flex-shrink-0 h-1.5 w-1.5 rounded-full bg-indigo-500 mt-2 mr-3"></span>
+                    <span><strong>Multi-step wizard:</strong> Intro → Personal → ID → Address → Review → Success</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="flex-shrink-0 h-1.5 w-1.5 rounded-full bg-indigo-500 mt-2 mr-3"></span>
+                    <span><strong>Full validation:</strong> Real-time form validation with helpful error messages</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="flex-shrink-0 h-1.5 w-1.5 rounded-full bg-indigo-500 mt-2 mr-3"></span>
+                    <span><strong>Responsive design:</strong> Mobile-optimized with desktop support</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="flex-shrink-0 h-1.5 w-1.5 rounded-full bg-indigo-500 mt-2 mr-3"></span>
+                    <span><strong>Theme support:</strong> Light/dark themes plus custom colors</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="flex-shrink-0 h-1.5 w-1.5 rounded-full bg-indigo-500 mt-2 mr-3"></span>
+                    <span><strong>Progress tracking:</strong> Visual progress indicator throughout</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="flex-shrink-0 h-1.5 w-1.5 rounded-full bg-indigo-500 mt-2 mr-3"></span>
+                    <span><strong>API integration:</strong> Works with your existing API routes</span>
+                  </li>
+                </ul>
+              </div>
+              
+              {/* Theme Examples */}
+              <div className="bg-white rounded-lg p-6 shadow">
+                <h3 className="text-lg font-medium text-gray-900 mb-4">🎨 Theme Options</h3>
+                <div className="space-y-4">
+                  <div className="flex items-center space-x-3">
+                    <div className="w-4 h-4 bg-white border-2 border-gray-300 rounded"></div>
+                    <span className="text-sm">Light theme (default)</span>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <div className="w-4 h-4 bg-gray-800 rounded"></div>
+                    <span className="text-sm">Dark theme</span>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <div className="w-4 h-4 bg-gradient-to-r from-purple-500 to-pink-500 rounded"></div>
+                    <span className="text-sm">Custom colors</span>
+                  </div>
+                </div>
+                
+                <div className="mt-6 bg-gray-50 rounded p-3">
+                  <p className="text-xs text-gray-600 mb-2">Custom theme example:</p>
+                  <pre className="text-xs text-gray-800 overflow-x-auto">
+{`<LiberexKYC 
+  theme={{
+    primaryColor: '#8B5CF6',
+    backgroundColor: '#F8FAFC',
+    textColor: '#1E293B'
+  }}
+/>`}
+                  </pre>
+                </div>
+              </div>
+            </div>
+            
+            {/* Results Section */}
+            {kycResults.length > 0 && (
+              <div className="bg-white rounded-lg p-6 shadow">
+                <h3 className="text-lg font-medium text-gray-900 mb-4">📊 Recent Submissions</h3>
+                <div className="space-y-3">
+                  {kycResults.slice(-3).map((result, index) => (
+                    <div key={index} className="flex items-center justify-between p-3 bg-green-50 rounded-md">
+                      <div>
+                        <p className="text-sm font-medium text-green-800">KYC Submission #{kycResults.length - index}</p>
+                        <p className="text-xs text-green-600">{new Date(result.timestamp).toLocaleString()}</p>
+                      </div>
+                      <div className="text-green-700">
+                        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                        </svg>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* KYC Modal */}
+      <LiberexKYCModal
+        isOpen={showKYCModal}
+        onClose={() => setShowKYCModal(false)}
+        onSuccess={(result) => {
+          handleKYCSuccess(result);
+          setShowKYCModal(false);
+        }}
+        onError={handleKYCError}
+        theme="light"
+      />
+    </div>
+  );
+}