@diviswap/sdk 1.7.15 → 1.7.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli/index.js +1 -1
- package/dist/cli/templates/nextjs-app/actions.ts.hbs +45 -38
- package/dist/cli/templates/nextjs-app/api-hooks.ts.hbs +10 -10
- package/dist/cli/templates/nextjs-app/api-route.ts.hbs +75 -70
- package/dist/cli/templates/nextjs-app/auth-context.tsx.hbs +1 -1
- package/dist/cli/templates/nextjs-app/client.ts.hbs +4 -4
- package/dist/cli/templates/nextjs-app/dashboard-hooks.ts.hbs +7 -7
- package/dist/cli/templates/nextjs-app/example-page.tsx.hbs +9 -9
- package/dist/cli/templates/nextjs-app/hooks.ts.hbs +7 -7
- package/dist/cli/templates/nextjs-app/kyc-hooks.ts.hbs +2 -2
- package/dist/cli/templates/nextjs-app/kyc-wizard.css.hbs +16 -16
- package/dist/cli/templates/nextjs-app/kyc-wizard.tsx.hbs +71 -38
- package/dist/cli/templates/nextjs-app/layout-wrapper.tsx.hbs +4 -4
- package/dist/cli/templates/nextjs-app/layout.tsx.hbs +4 -4
- package/dist/cli/templates/nextjs-app/middleware.ts.hbs +15 -15
- package/dist/cli/templates/nextjs-app/provider-wrapper.tsx.hbs +4 -4
- package/dist/cli/templates/nextjs-app/provider.tsx.hbs +15 -15
- package/dist/cli/templates/nextjs-app/setup-provider.tsx.hbs +4 -4
- package/dist/cli/templates/react/api-client-wrapper.ts.hbs +11 -11
- package/dist/cli/templates/react/example.tsx.hbs +6 -6
- package/dist/cli/templates/react/tanstack-hooks.ts.hbs +14 -14
- package/dist/cli/templates/webhooks/nextjs.hbs +3 -3
- package/package.json +1 -1
- package/src/cli/templates/nextjs-app/actions.ts.hbs +45 -38
- package/src/cli/templates/nextjs-app/api-hooks.ts.hbs +10 -10
- package/src/cli/templates/nextjs-app/api-route.ts.hbs +75 -70
- package/src/cli/templates/nextjs-app/auth-context.tsx.hbs +1 -1
- package/src/cli/templates/nextjs-app/client.ts.hbs +4 -4
- package/src/cli/templates/nextjs-app/dashboard-hooks.ts.hbs +7 -7
- package/src/cli/templates/nextjs-app/example-page.tsx.hbs +9 -9
- package/src/cli/templates/nextjs-app/hooks.ts.hbs +7 -7
- package/src/cli/templates/nextjs-app/kyc-hooks.ts.hbs +2 -2
- package/src/cli/templates/nextjs-app/kyc-wizard.css.hbs +16 -16
- package/src/cli/templates/nextjs-app/kyc-wizard.tsx.hbs +71 -38
- package/src/cli/templates/nextjs-app/layout-wrapper.tsx.hbs +4 -4
- package/src/cli/templates/nextjs-app/layout.tsx.hbs +4 -4
- package/src/cli/templates/nextjs-app/middleware.ts.hbs +15 -15
- package/src/cli/templates/nextjs-app/provider-wrapper.tsx.hbs +4 -4
- package/src/cli/templates/nextjs-app/provider.tsx.hbs +15 -15
- package/src/cli/templates/nextjs-app/setup-provider.tsx.hbs +4 -4
- package/src/cli/templates/react/api-client-wrapper.ts.hbs +11 -11
- package/src/cli/templates/react/example.tsx.hbs +6 -6
- package/src/cli/templates/react/tanstack-hooks.ts.hbs +14 -14
- package/src/cli/templates/webhooks/nextjs.hbs +3 -3
|
@@ -26,7 +26,7 @@ interface {{prefix}}AuthProviderProps {
|
|
|
26
26
|
clearCustomer: () => Promise<void>;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
// This provider receives props instead of using
|
|
29
|
+
// This provider receives props instead of using useDiviswap directly
|
|
30
30
|
// to avoid circular dependencies
|
|
31
31
|
export function {{prefix}}AuthProvider({
|
|
32
32
|
children,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
// This file is auto-generated by
|
|
2
|
-
// It provides a client for communicating with the
|
|
1
|
+
// This file is auto-generated by Diviswap SDK CLI
|
|
2
|
+
// It provides a client for communicating with the Diviswap API routes
|
|
3
3
|
|
|
4
|
-
export class
|
|
5
|
-
constructor(private baseUrl: string = '/api/
|
|
4
|
+
export class DiviswapClient {
|
|
5
|
+
constructor(private baseUrl: string = '/api/diviswap') {}
|
|
6
6
|
|
|
7
7
|
private async request<T = any>(
|
|
8
8
|
endpoint: string,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import { useEffect, useState } from 'react';
|
|
4
|
-
import { use{{prefix}}Auth } from '~/context/
|
|
4
|
+
import { use{{prefix}}Auth } from '~/context/diviswap-auth-context';
|
|
5
5
|
|
|
6
6
|
export function use{{prefix}}Dashboard() {
|
|
7
7
|
const { customerId, customerEmail, isAuthenticated } = use{{prefix}}Auth();
|
|
@@ -15,14 +15,14 @@ export function use{{prefix}}Dashboard() {
|
|
|
15
15
|
customerEmail,
|
|
16
16
|
...params
|
|
17
17
|
});
|
|
18
|
-
const response = await fetch(`/api/
|
|
18
|
+
const response = await fetch(`/api/diviswap?${queryParams}`);
|
|
19
19
|
if (!response.ok) throw new Error('Failed to fetch transactions');
|
|
20
20
|
return response.json();
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
const getPayees = async () => {
|
|
24
24
|
if (!isAuthenticated || !customerId) return [];
|
|
25
|
-
const response = await fetch(`/api/
|
|
25
|
+
const response = await fetch(`/api/diviswap?resource=payees&customerId=${customerId}&customerEmail=${customerEmail}`);
|
|
26
26
|
if (!response.ok) throw new Error('Failed to fetch payees');
|
|
27
27
|
return response.json();
|
|
28
28
|
};
|
|
@@ -36,14 +36,14 @@ export function use{{prefix}}Dashboard() {
|
|
|
36
36
|
...(params?.chain_id && { chain_id: params.chain_id.toString() }),
|
|
37
37
|
...(params?.is_default !== undefined && { is_default: params.is_default.toString() })
|
|
38
38
|
});
|
|
39
|
-
const response = await fetch(`/api/
|
|
39
|
+
const response = await fetch(`/api/diviswap?${queryParams}`);
|
|
40
40
|
if (!response.ok) throw new Error('Failed to fetch addresses');
|
|
41
41
|
return response.json();
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
const createAddress = async (data: { chain_id: number; address: string; is_default?: boolean }) => {
|
|
45
45
|
if (!isAuthenticated || !customerId) throw new Error('Not authenticated');
|
|
46
|
-
const response = await fetch('/api/
|
|
46
|
+
const response = await fetch('/api/diviswap', {
|
|
47
47
|
method: 'POST',
|
|
48
48
|
headers: { 'Content-Type': 'application/json' },
|
|
49
49
|
body: JSON.stringify({
|
|
@@ -59,7 +59,7 @@ export function use{{prefix}}Dashboard() {
|
|
|
59
59
|
|
|
60
60
|
const setDefaultAddress = async (data: { chain_id: number; address: string }) => {
|
|
61
61
|
if (!isAuthenticated || !customerId) throw new Error('Not authenticated');
|
|
62
|
-
const response = await fetch('/api/
|
|
62
|
+
const response = await fetch('/api/diviswap', {
|
|
63
63
|
method: 'POST',
|
|
64
64
|
headers: { 'Content-Type': 'application/json' },
|
|
65
65
|
body: JSON.stringify({
|
|
@@ -75,7 +75,7 @@ export function use{{prefix}}Dashboard() {
|
|
|
75
75
|
|
|
76
76
|
const deleteAddress = async (data: { chain_id: number; address: string }) => {
|
|
77
77
|
if (!isAuthenticated || !customerId) throw new Error('Not authenticated');
|
|
78
|
-
const response = await fetch('/api/
|
|
78
|
+
const response = await fetch('/api/diviswap', {
|
|
79
79
|
method: 'POST',
|
|
80
80
|
headers: { 'Content-Type': 'application/json' },
|
|
81
81
|
body: JSON.stringify({
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import '@/components/
|
|
4
|
+
import { DiviswapKYC, DiviswapKYCModal } from '@/components/diviswap-kyc-wizard';
|
|
5
|
+
import '@/components/diviswap-kyc-wizard.css';
|
|
6
6
|
|
|
7
|
-
export default function
|
|
7
|
+
export default function DiviswapDemo() {
|
|
8
8
|
// Demo state
|
|
9
9
|
const [currentDemo, setCurrentDemo] = useState<'kyc-inline' | 'kyc-modal' | 'features'>('kyc-inline');
|
|
10
10
|
const [showKYCModal, setShowKYCModal] = useState(false);
|
|
@@ -29,7 +29,7 @@ export default function LiberExDemo() {
|
|
|
29
29
|
<div className="bg-white shadow">
|
|
30
30
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
31
31
|
<div className="flex justify-between items-center py-6">
|
|
32
|
-
<h1 className="text-2xl font-bold text-gray-900">
|
|
32
|
+
<h1 className="text-2xl font-bold text-gray-900">Diviswap KYC Wizard Demo</h1>
|
|
33
33
|
<div className="text-sm text-gray-600">
|
|
34
34
|
Ready-to-use KYC component
|
|
35
35
|
</div>
|
|
@@ -101,7 +101,7 @@ export default function LiberExDemo() {
|
|
|
101
101
|
</div>
|
|
102
102
|
|
|
103
103
|
<div className="max-w-4xl mx-auto">
|
|
104
|
-
<
|
|
104
|
+
<DiviswapKYC
|
|
105
105
|
onSuccess={handleKYCSuccess}
|
|
106
106
|
onError={handleKYCError}
|
|
107
107
|
theme="light"
|
|
@@ -132,7 +132,7 @@ export default function LiberExDemo() {
|
|
|
132
132
|
<h3 className="text-lg font-medium text-gray-900 mb-4">Integration Code</h3>
|
|
133
133
|
<div className="bg-gray-50 rounded-md p-4 text-left">
|
|
134
134
|
<pre className="text-sm text-gray-800 overflow-x-auto">
|
|
135
|
-
{`import {
|
|
135
|
+
{`import { DiviswapKYCModal } from '@/components/diviswap-kyc-wizard';
|
|
136
136
|
|
|
137
137
|
function MyComponent() {
|
|
138
138
|
const [showKYC, setShowKYC] = useState(false);
|
|
@@ -143,7 +143,7 @@ function MyComponent() {
|
|
|
143
143
|
Complete Verification
|
|
144
144
|
</button>
|
|
145
145
|
|
|
146
|
-
<
|
|
146
|
+
<DiviswapKYCModal
|
|
147
147
|
isOpen={showKYC}
|
|
148
148
|
onClose={() => setShowKYC(false)}
|
|
149
149
|
onSuccess={(result) => {
|
|
@@ -223,7 +223,7 @@ function MyComponent() {
|
|
|
223
223
|
<div className="mt-6 bg-gray-50 rounded p-3">
|
|
224
224
|
<p className="text-xs text-gray-600 mb-2">Custom theme example:</p>
|
|
225
225
|
<pre className="text-xs text-gray-800 overflow-x-auto">
|
|
226
|
-
{`<
|
|
226
|
+
{`<DiviswapKYC
|
|
227
227
|
theme={{
|
|
228
228
|
primaryColor: '#8B5CF6',
|
|
229
229
|
backgroundColor: '#F8FAFC',
|
|
@@ -261,7 +261,7 @@ function MyComponent() {
|
|
|
261
261
|
</div>
|
|
262
262
|
|
|
263
263
|
{/* KYC Modal */}
|
|
264
|
-
<
|
|
264
|
+
<DiviswapKYCModal
|
|
265
265
|
isOpen={showKYCModal}
|
|
266
266
|
onClose={() => setShowKYCModal(false)}
|
|
267
267
|
onSuccess={(result) => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useEffect, useCallback } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { useDiviswap } from '{{providerImportPath}}';
|
|
3
3
|
import type { Transaction, Payee, TransactionStatus } from '{{typesImportPath}}';
|
|
4
4
|
|
|
5
5
|
// IMPORTANT: These hooks use direct SDK calls which may not work properly
|
|
@@ -7,11 +7,11 @@ import type { Transaction, Payee, TransactionStatus } from '{{typesImportPath}}'
|
|
|
7
7
|
// pattern demonstrated in api-hooks.ts instead.
|
|
8
8
|
|
|
9
9
|
// Re-export the main hook
|
|
10
|
-
export {
|
|
10
|
+
export { useDiviswap };
|
|
11
11
|
|
|
12
12
|
// Convenience hook for authentication
|
|
13
13
|
export function useAuth() {
|
|
14
|
-
const { user, login, logout, register, loading, error } =
|
|
14
|
+
const { user, login, logout, register, loading, error } = useDiviswap();
|
|
15
15
|
|
|
16
16
|
return {
|
|
17
17
|
user,
|
|
@@ -27,7 +27,7 @@ export function useAuth() {
|
|
|
27
27
|
|
|
28
28
|
// Hook for managing transactions
|
|
29
29
|
export function useTransactions() {
|
|
30
|
-
const { createTransaction, getTransactions, error } =
|
|
30
|
+
const { createTransaction, getTransactions, error } = useDiviswap();
|
|
31
31
|
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
|
32
32
|
const [loading, setLoading] = useState(false);
|
|
33
33
|
|
|
@@ -76,7 +76,7 @@ export function useTransactions() {
|
|
|
76
76
|
|
|
77
77
|
// Hook for managing payees
|
|
78
78
|
export function usePayees() {
|
|
79
|
-
const { getPayees, createPayee, deletePayee, error } =
|
|
79
|
+
const { getPayees, createPayee, deletePayee, error } = useDiviswap();
|
|
80
80
|
const [payees, setPayees] = useState<Payee[]>([]);
|
|
81
81
|
const [loading, setLoading] = useState(false);
|
|
82
82
|
|
|
@@ -141,7 +141,7 @@ export function usePayees() {
|
|
|
141
141
|
{{#if (includes features "fees")}}
|
|
142
142
|
// Hook for fee calculations
|
|
143
143
|
export function useFeeCalculator() {
|
|
144
|
-
const { calculateFees } =
|
|
144
|
+
const { calculateFees } = useDiviswap();
|
|
145
145
|
const [fees, setFees] = useState<any>(null);
|
|
146
146
|
const [loading, setLoading] = useState(false);
|
|
147
147
|
const [error, setError] = useState<Error | null>(null);
|
|
@@ -184,7 +184,7 @@ export function useFeeCalculator() {
|
|
|
184
184
|
{{#if (includes features "realtime")}}
|
|
185
185
|
// Hook for real-time transaction updates
|
|
186
186
|
export function useTransactionUpdates(transactionId?: string) {
|
|
187
|
-
const { socket, subscribeToTransaction, unsubscribeFromTransaction } =
|
|
187
|
+
const { socket, subscribeToTransaction, unsubscribeFromTransaction } = useDiviswap();
|
|
188
188
|
const [updates, setUpdates] = useState<any[]>([]);
|
|
189
189
|
const [latestStatus, setLatestStatus] = useState<TransactionStatus | null>(null);
|
|
190
190
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
-
import { use{{prefix}}Auth } from '~/context/
|
|
4
|
+
import { use{{prefix}}Auth } from '~/context/diviswap-auth-context';
|
|
5
5
|
|
|
6
6
|
interface KYCFormData {
|
|
7
7
|
firstName: string;
|
|
@@ -53,7 +53,7 @@ export function use{{prefix}}KYC() {
|
|
|
53
53
|
};
|
|
54
54
|
|
|
55
55
|
// Call API to submit KYC
|
|
56
|
-
const response = await fetch('/api/
|
|
56
|
+
const response = await fetch('/api/diviswap', {
|
|
57
57
|
method: 'POST',
|
|
58
58
|
headers: { 'Content-Type': 'application/json' },
|
|
59
59
|
body: JSON.stringify({
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/*
|
|
2
|
-
.
|
|
1
|
+
/* Diviswap KYC Wizard Styles */
|
|
2
|
+
.diviswap-kyc-container {
|
|
3
3
|
max-width: 600px;
|
|
4
4
|
margin: 0 auto;
|
|
5
5
|
padding: 2rem;
|
|
@@ -288,7 +288,7 @@
|
|
|
288
288
|
}
|
|
289
289
|
|
|
290
290
|
/* Modal */
|
|
291
|
-
.
|
|
291
|
+
.diviswap-kyc-modal-overlay {
|
|
292
292
|
position: fixed;
|
|
293
293
|
top: 0;
|
|
294
294
|
left: 0;
|
|
@@ -302,7 +302,7 @@
|
|
|
302
302
|
padding: 1rem;
|
|
303
303
|
}
|
|
304
304
|
|
|
305
|
-
.
|
|
305
|
+
.diviswap-kyc-modal {
|
|
306
306
|
background-color: white;
|
|
307
307
|
border-radius: 12px;
|
|
308
308
|
max-width: 600px;
|
|
@@ -311,54 +311,54 @@
|
|
|
311
311
|
overflow-y: auto;
|
|
312
312
|
}
|
|
313
313
|
|
|
314
|
-
.
|
|
314
|
+
.diviswap-kyc-modal .diviswap-kyc-container {
|
|
315
315
|
border: none;
|
|
316
316
|
box-shadow: none;
|
|
317
317
|
margin: 0;
|
|
318
318
|
}
|
|
319
319
|
|
|
320
320
|
/* Dark Theme */
|
|
321
|
-
.
|
|
321
|
+
.diviswap-kyc-container[data-theme="dark"] {
|
|
322
322
|
background-color: #1f2937;
|
|
323
323
|
color: #f9fafb;
|
|
324
324
|
border-color: #374151;
|
|
325
325
|
}
|
|
326
326
|
|
|
327
|
-
.
|
|
328
|
-
.
|
|
327
|
+
.diviswap-kyc-container[data-theme="dark"] .form-field input,
|
|
328
|
+
.diviswap-kyc-container[data-theme="dark"] .form-field select {
|
|
329
329
|
background-color: #374151;
|
|
330
330
|
border-color: #4b5563;
|
|
331
331
|
color: #f9fafb;
|
|
332
332
|
}
|
|
333
333
|
|
|
334
|
-
.
|
|
335
|
-
.
|
|
334
|
+
.diviswap-kyc-container[data-theme="dark"] .form-field input:focus,
|
|
335
|
+
.diviswap-kyc-container[data-theme="dark"] .form-field select:focus {
|
|
336
336
|
border-color: #6366f1;
|
|
337
337
|
}
|
|
338
338
|
|
|
339
|
-
.
|
|
339
|
+
.diviswap-kyc-container[data-theme="dark"] .review-section {
|
|
340
340
|
background-color: #374151;
|
|
341
341
|
border-color: #4b5563;
|
|
342
342
|
}
|
|
343
343
|
|
|
344
|
-
.
|
|
344
|
+
.diviswap-kyc-container[data-theme="dark"] .btn-secondary {
|
|
345
345
|
border-color: #4b5563;
|
|
346
346
|
color: #d1d5db;
|
|
347
347
|
}
|
|
348
348
|
|
|
349
|
-
.
|
|
349
|
+
.diviswap-kyc-container[data-theme="dark"] .btn-secondary:hover {
|
|
350
350
|
background-color: #374151;
|
|
351
351
|
border-color: #6b7280;
|
|
352
352
|
}
|
|
353
353
|
|
|
354
|
-
.
|
|
354
|
+
.diviswap-kyc-container[data-theme="dark"] .info-box {
|
|
355
355
|
background-color: #064e3b;
|
|
356
356
|
border-color: #047857;
|
|
357
357
|
}
|
|
358
358
|
|
|
359
359
|
/* Responsive Design */
|
|
360
360
|
@media (max-width: 640px) {
|
|
361
|
-
.
|
|
361
|
+
.diviswap-kyc-container {
|
|
362
362
|
padding: 1rem;
|
|
363
363
|
margin: 1rem;
|
|
364
364
|
}
|
|
@@ -417,7 +417,7 @@
|
|
|
417
417
|
|
|
418
418
|
/* High Contrast Mode */
|
|
419
419
|
@media (prefers-contrast: high) {
|
|
420
|
-
.
|
|
420
|
+
.diviswap-kyc-container {
|
|
421
421
|
border-width: 2px;
|
|
422
422
|
}
|
|
423
423
|
|
|
@@ -23,22 +23,55 @@ interface KycFormData {
|
|
|
23
23
|
country: string;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
interface
|
|
27
|
-
|
|
26
|
+
interface ThemeConfig {
|
|
27
|
+
primaryColor?: string;
|
|
28
|
+
backgroundColor?: string;
|
|
29
|
+
textColor?: string;
|
|
30
|
+
borderRadius?: string;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
interface KYCStatus {
|
|
34
|
+
verified: boolean;
|
|
35
|
+
status: string;
|
|
36
|
+
customerId?: string;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
interface DiviswapKYCProps {
|
|
40
|
+
onSuccess?: (status: KYCStatus) => void;
|
|
28
41
|
onError?: (error: Error) => void;
|
|
29
42
|
onClose?: () => void;
|
|
30
|
-
theme?: 'light' | 'dark' |
|
|
31
|
-
primaryColor?: string;
|
|
32
|
-
backgroundColor?: string;
|
|
33
|
-
textColor?: string;
|
|
34
|
-
borderRadius?: string;
|
|
35
|
-
};
|
|
43
|
+
theme?: 'light' | 'dark' | ThemeConfig;
|
|
36
44
|
steps?: KYCStep[];
|
|
37
45
|
autoClose?: boolean;
|
|
38
46
|
className?: string;
|
|
39
47
|
}
|
|
40
48
|
|
|
41
|
-
|
|
49
|
+
interface StepProps {
|
|
50
|
+
onNext: () => void;
|
|
51
|
+
onPrev?: () => void;
|
|
52
|
+
onClose?: () => void;
|
|
53
|
+
theme: ThemeConfig;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
interface FormStepProps extends StepProps {
|
|
57
|
+
formData: KycFormData;
|
|
58
|
+
updateFormData: (updates: Partial<KycFormData>) => void;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
interface ReviewStepProps {
|
|
62
|
+
formData: KycFormData;
|
|
63
|
+
onSubmit: () => void;
|
|
64
|
+
onPrev: () => void;
|
|
65
|
+
isSubmitting: boolean;
|
|
66
|
+
theme: ThemeConfig;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
interface SuccessStepProps {
|
|
70
|
+
onClose?: () => void;
|
|
71
|
+
theme: ThemeConfig;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
export function DiviswapKYC({
|
|
42
75
|
onSuccess,
|
|
43
76
|
onError,
|
|
44
77
|
onClose,
|
|
@@ -46,7 +79,7 @@ export function LiberexKYC({
|
|
|
46
79
|
steps = ['intro', 'personal', 'identification', 'address', 'review', 'success'],
|
|
47
80
|
autoClose = false,
|
|
48
81
|
className = ''
|
|
49
|
-
}:
|
|
82
|
+
}: DiviswapKYCProps) {
|
|
50
83
|
const [currentStep, setCurrentStep] = useState<KYCStep>(steps[0]);
|
|
51
84
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
52
85
|
const [formData, setFormData] = useState<KycFormData>({
|
|
@@ -106,7 +139,7 @@ export function LiberexKYC({
|
|
|
106
139
|
};
|
|
107
140
|
|
|
108
141
|
// Call your KYC submission API
|
|
109
|
-
const response = await fetch('/api/
|
|
142
|
+
const response = await fetch('/api/diviswap', {
|
|
110
143
|
method: 'POST',
|
|
111
144
|
headers: { 'Content-Type': 'application/json' },
|
|
112
145
|
body: JSON.stringify({
|
|
@@ -132,9 +165,9 @@ export function LiberexKYC({
|
|
|
132
165
|
setTimeout(() => onClose?.(), 2000);
|
|
133
166
|
}
|
|
134
167
|
|
|
135
|
-
} catch (error
|
|
168
|
+
} catch (error) {
|
|
136
169
|
console.error('KYC submission error:', error);
|
|
137
|
-
onError?.(error);
|
|
170
|
+
onError?.(error instanceof Error ? error : new Error(String(error)));
|
|
138
171
|
} finally {
|
|
139
172
|
setIsSubmitting(false);
|
|
140
173
|
}
|
|
@@ -155,22 +188,22 @@ export function LiberexKYC({
|
|
|
155
188
|
};
|
|
156
189
|
|
|
157
190
|
const updateFormData = (updates: Partial<KycFormData>) => {
|
|
158
|
-
setFormData(prev => (
|
|
191
|
+
setFormData(prev => ({ ...prev, ...updates }));
|
|
159
192
|
};
|
|
160
193
|
|
|
161
|
-
const containerStyle =
|
|
194
|
+
const containerStyle = {
|
|
162
195
|
backgroundColor: themeConfig.backgroundColor,
|
|
163
196
|
color: themeConfig.textColor,
|
|
164
197
|
borderRadius: themeConfig.borderRadius
|
|
165
|
-
|
|
198
|
+
};
|
|
166
199
|
|
|
167
|
-
const primaryButtonStyle =
|
|
200
|
+
const primaryButtonStyle = {
|
|
168
201
|
backgroundColor: themeConfig.primaryColor,
|
|
169
202
|
borderRadius: themeConfig.borderRadius
|
|
170
|
-
|
|
203
|
+
};
|
|
171
204
|
|
|
172
205
|
return (
|
|
173
|
-
<div className={`
|
|
206
|
+
<div className={`diviswap-kyc-container ${className}`} style={containerStyle}>
|
|
174
207
|
{/* Progress Bar */}
|
|
175
208
|
{currentStep !== 'intro' && currentStep !== 'success' && (
|
|
176
209
|
<div className="progress-container">
|
|
@@ -180,7 +213,7 @@ export function LiberexKYC({
|
|
|
180
213
|
style=\{{
|
|
181
214
|
width: progressPercentage + '%',
|
|
182
215
|
backgroundColor: themeConfig.primaryColor
|
|
183
|
-
|
|
216
|
+
}}
|
|
184
217
|
/>
|
|
185
218
|
</div>
|
|
186
219
|
<div className="progress-text">
|
|
@@ -249,11 +282,11 @@ export function LiberexKYC({
|
|
|
249
282
|
}
|
|
250
283
|
|
|
251
284
|
// Step Components
|
|
252
|
-
function IntroStep({ onNext, onClose, theme }:
|
|
285
|
+
function IntroStep({ onNext, onClose, theme }: StepProps) {
|
|
253
286
|
return (
|
|
254
287
|
<div className="kyc-step intro-step">
|
|
255
288
|
<div className="step-header">
|
|
256
|
-
<CheckCircle className="step-icon" style=\{{ color: theme.primaryColor
|
|
289
|
+
<CheckCircle className="step-icon" style=\{{ color: theme.primaryColor }} />
|
|
257
290
|
<h2>Identity Verification</h2>
|
|
258
291
|
<p>We need to verify your identity to comply with financial regulations. This process takes about 3 minutes.</p>
|
|
259
292
|
</div>
|
|
@@ -286,7 +319,7 @@ function IntroStep({ onNext, onClose, theme }: any) {
|
|
|
286
319
|
<button
|
|
287
320
|
onClick={onNext}
|
|
288
321
|
className="btn-primary"
|
|
289
|
-
style=\{{ backgroundColor: theme.primaryColor
|
|
322
|
+
style=\{{ backgroundColor: theme.primaryColor }}
|
|
290
323
|
>
|
|
291
324
|
Start Verification
|
|
292
325
|
<ArrowRight className="btn-icon" />
|
|
@@ -301,7 +334,7 @@ function IntroStep({ onNext, onClose, theme }: any) {
|
|
|
301
334
|
);
|
|
302
335
|
}
|
|
303
336
|
|
|
304
|
-
function PersonalInfoStep({ formData, updateFormData, onNext, onPrev, theme }:
|
|
337
|
+
function PersonalInfoStep({ formData, updateFormData, onNext, onPrev, theme }: FormStepProps) {
|
|
305
338
|
const isValid = formData.firstName && formData.lastName && formData.email &&
|
|
306
339
|
formData.dobDay && formData.dobMonth && formData.dobYear;
|
|
307
340
|
|
|
@@ -402,7 +435,7 @@ function PersonalInfoStep({ formData, updateFormData, onNext, onPrev, theme }: a
|
|
|
402
435
|
onClick={onNext}
|
|
403
436
|
disabled={!isValid}
|
|
404
437
|
className="btn-primary"
|
|
405
|
-
style=\{{ backgroundColor: theme.primaryColor
|
|
438
|
+
style=\{{ backgroundColor: theme.primaryColor }}
|
|
406
439
|
>
|
|
407
440
|
Continue
|
|
408
441
|
<ArrowRight className="btn-icon" />
|
|
@@ -412,7 +445,7 @@ function PersonalInfoStep({ formData, updateFormData, onNext, onPrev, theme }: a
|
|
|
412
445
|
);
|
|
413
446
|
}
|
|
414
447
|
|
|
415
|
-
function IdentificationStep({ formData, updateFormData, onNext, onPrev, theme }:
|
|
448
|
+
function IdentificationStep({ formData, updateFormData, onNext, onPrev, theme }: FormStepProps) {
|
|
416
449
|
const isValid = formData.idType && formData.idNumber;
|
|
417
450
|
|
|
418
451
|
return (
|
|
@@ -465,7 +498,7 @@ function IdentificationStep({ formData, updateFormData, onNext, onPrev, theme }:
|
|
|
465
498
|
onClick={onNext}
|
|
466
499
|
disabled={!isValid}
|
|
467
500
|
className="btn-primary"
|
|
468
|
-
style=\{{ backgroundColor: theme.primaryColor
|
|
501
|
+
style=\{{ backgroundColor: theme.primaryColor }}
|
|
469
502
|
>
|
|
470
503
|
Continue
|
|
471
504
|
<ArrowRight className="btn-icon" />
|
|
@@ -475,7 +508,7 @@ function IdentificationStep({ formData, updateFormData, onNext, onPrev, theme }:
|
|
|
475
508
|
);
|
|
476
509
|
}
|
|
477
510
|
|
|
478
|
-
function AddressStep({ formData, updateFormData, onNext, onPrev, theme }:
|
|
511
|
+
function AddressStep({ formData, updateFormData, onNext, onPrev, theme }: FormStepProps) {
|
|
479
512
|
const isValid = formData.addressLine1 && formData.city && formData.state &&
|
|
480
513
|
formData.postalCode && formData.country;
|
|
481
514
|
|
|
@@ -567,7 +600,7 @@ function AddressStep({ formData, updateFormData, onNext, onPrev, theme }: any) {
|
|
|
567
600
|
onClick={onNext}
|
|
568
601
|
disabled={!isValid}
|
|
569
602
|
className="btn-primary"
|
|
570
|
-
style=\{{ backgroundColor: theme.primaryColor
|
|
603
|
+
style=\{{ backgroundColor: theme.primaryColor }}
|
|
571
604
|
>
|
|
572
605
|
Continue
|
|
573
606
|
<ArrowRight className="btn-icon" />
|
|
@@ -577,7 +610,7 @@ function AddressStep({ formData, updateFormData, onNext, onPrev, theme }: any) {
|
|
|
577
610
|
);
|
|
578
611
|
}
|
|
579
612
|
|
|
580
|
-
function ReviewStep({ formData, onSubmit, onPrev, isSubmitting, theme }:
|
|
613
|
+
function ReviewStep({ formData, onSubmit, onPrev, isSubmitting, theme }: ReviewStepProps) {
|
|
581
614
|
return (
|
|
582
615
|
<div className="kyc-step review-step">
|
|
583
616
|
<div className="step-header">
|
|
@@ -643,7 +676,7 @@ function ReviewStep({ formData, onSubmit, onPrev, isSubmitting, theme }: any) {
|
|
|
643
676
|
onClick={onSubmit}
|
|
644
677
|
disabled={isSubmitting}
|
|
645
678
|
className="btn-primary"
|
|
646
|
-
style=\{{ backgroundColor: theme.primaryColor
|
|
679
|
+
style=\{{ backgroundColor: theme.primaryColor }}
|
|
647
680
|
>
|
|
648
681
|
{isSubmitting ? (
|
|
649
682
|
<>
|
|
@@ -662,11 +695,11 @@ function ReviewStep({ formData, onSubmit, onPrev, isSubmitting, theme }: any) {
|
|
|
662
695
|
);
|
|
663
696
|
}
|
|
664
697
|
|
|
665
|
-
function SuccessStep({ onClose, theme }:
|
|
698
|
+
function SuccessStep({ onClose, theme }: SuccessStepProps) {
|
|
666
699
|
return (
|
|
667
700
|
<div className="kyc-step success-step">
|
|
668
701
|
<div className="step-header">
|
|
669
|
-
<CheckCircle className="step-icon success-icon" style=\{{ color: theme.primaryColor
|
|
702
|
+
<CheckCircle className="step-icon success-icon" style=\{{ color: theme.primaryColor }} />
|
|
670
703
|
<h2>Verification Submitted!</h2>
|
|
671
704
|
<p>Your identity verification has been submitted successfully. We'll review your information and notify you of the results.</p>
|
|
672
705
|
</div>
|
|
@@ -687,7 +720,7 @@ function SuccessStep({ onClose, theme }: any) {
|
|
|
687
720
|
<button
|
|
688
721
|
onClick={onClose}
|
|
689
722
|
className="btn-primary"
|
|
690
|
-
style=\{{ backgroundColor: theme.primaryColor
|
|
723
|
+
style=\{{ backgroundColor: theme.primaryColor }}
|
|
691
724
|
>
|
|
692
725
|
Continue
|
|
693
726
|
</button>
|
|
@@ -698,13 +731,13 @@ function SuccessStep({ onClose, theme }: any) {
|
|
|
698
731
|
}
|
|
699
732
|
|
|
700
733
|
// Export modal version
|
|
701
|
-
export function
|
|
734
|
+
export function DiviswapKYCModal({ isOpen, onClose, ...props }: DiviswapKYCProps & { isOpen: boolean }) {
|
|
702
735
|
if (!isOpen) return null;
|
|
703
736
|
|
|
704
737
|
return (
|
|
705
|
-
<div className="
|
|
706
|
-
<div className="
|
|
707
|
-
<
|
|
738
|
+
<div className="diviswap-kyc-modal-overlay">
|
|
739
|
+
<div className="diviswap-kyc-modal">
|
|
740
|
+
<DiviswapKYC {...props} onClose={onClose} />
|
|
708
741
|
</div>
|
|
709
742
|
</div>
|
|
710
743
|
);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DiviswapProvider } from '@diviswap/sdk/react';
|
|
2
2
|
|
|
3
|
-
export default function
|
|
3
|
+
export default function DiviswapLayout({
|
|
4
4
|
children,
|
|
5
5
|
}: {
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
}) {
|
|
8
8
|
return (
|
|
9
|
-
<
|
|
9
|
+
<DiviswapProvider>
|
|
10
10
|
{children}
|
|
11
|
-
</
|
|
11
|
+
</DiviswapProvider>
|
|
12
12
|
);
|
|
13
13
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DiviswapProvider } from './lbx-provider';
|
|
2
2
|
|
|
3
|
-
export default function
|
|
3
|
+
export default function DiviswapLayout({
|
|
4
4
|
children,
|
|
5
5
|
}: {
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
}) {
|
|
8
8
|
return (
|
|
9
|
-
<
|
|
9
|
+
<DiviswapProvider>
|
|
10
10
|
{children}
|
|
11
|
-
</
|
|
11
|
+
</DiviswapProvider>
|
|
12
12
|
);
|
|
13
13
|
}
|