@varity-labs/ui-kit 2.0.0-beta.10 → 2.0.0-beta.12
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/components/PaymentWidget/PaymentWidget.d.ts +3 -12
- package/dist/components/PaymentWidget/PaymentWidget.d.ts.map +1 -1
- package/dist/components/PaymentWidget/PaymentWidget.js +8 -161
- package/dist/components/PaymentWidget/PaymentWidget.js.map +1 -1
- package/dist/components/PaymentWidget/useSeamlessPayment.d.ts +4 -12
- package/dist/components/PaymentWidget/useSeamlessPayment.d.ts.map +1 -1
- package/dist/components/PaymentWidget/useSeamlessPayment.js +15 -123
- package/dist/components/PaymentWidget/useSeamlessPayment.js.map +1 -1
- package/dist/components/PaymentWidget/useVarityPayment.d.ts +5 -1
- package/dist/components/PaymentWidget/useVarityPayment.d.ts.map +1 -1
- package/dist/components/PaymentWidget/useVarityPayment.js +16 -122
- package/dist/components/PaymentWidget/useVarityPayment.js.map +1 -1
- package/dist/components/Payments/CheckoutModal.d.ts +4 -1
- package/dist/components/Payments/CheckoutModal.d.ts.map +1 -1
- package/dist/components/Payments/CheckoutModal.js +23 -156
- package/dist/components/Payments/CheckoutModal.js.map +1 -1
- package/dist/providers/VarityDashboardProvider.d.ts +1 -7
- package/dist/providers/VarityDashboardProvider.d.ts.map +1 -1
- package/dist/providers/VarityDashboardProvider.js +4 -28
- package/dist/providers/VarityDashboardProvider.js.map +1 -1
- package/dist/wallets/config.d.ts +1 -3
- package/dist/wallets/config.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -6,16 +6,8 @@
|
|
|
6
6
|
* - 90% to developer
|
|
7
7
|
* - 10% to Varity treasury
|
|
8
8
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* The experience is identical to Stripe checkout.
|
|
12
|
-
*
|
|
13
|
-
* Flow:
|
|
14
|
-
* 1. User clicks purchase button
|
|
15
|
-
* 2. Credit card form appears (thirdweb Pay modal)
|
|
16
|
-
* 3. thirdweb converts USD → USDC on Arbitrum One
|
|
17
|
-
* 4. USDC approve + purchaseApp() execute automatically
|
|
18
|
-
* 5. User sees "Purchase complete" — never sees crypto
|
|
9
|
+
* On-chain execution is coming soon (Crossmint integration in progress).
|
|
10
|
+
* This component renders its children and calls onSuccess/onError hooks.
|
|
19
11
|
*
|
|
20
12
|
* @example
|
|
21
13
|
* ```tsx
|
|
@@ -32,8 +24,7 @@ import { PaymentWidgetProps } from './types';
|
|
|
32
24
|
* PaymentWidget - Required component for app monetization
|
|
33
25
|
*
|
|
34
26
|
* Wraps a trigger element and handles the full purchase flow.
|
|
35
|
-
*
|
|
36
|
-
* Credit card payments handled seamlessly via thirdweb Pay.
|
|
27
|
+
* Payments via Crossmint (credit card → USDC) — coming soon.
|
|
37
28
|
*/
|
|
38
29
|
export declare const PaymentWidget: React.FC<PaymentWidgetProps>;
|
|
39
30
|
export default PaymentWidget;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaymentWidget.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentWidget.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"PaymentWidget.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAG7C;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgCtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -6,16 +6,8 @@
|
|
|
6
6
|
* - 90% to developer
|
|
7
7
|
* - 10% to Varity treasury
|
|
8
8
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* The experience is identical to Stripe checkout.
|
|
12
|
-
*
|
|
13
|
-
* Flow:
|
|
14
|
-
* 1. User clicks purchase button
|
|
15
|
-
* 2. Credit card form appears (thirdweb Pay modal)
|
|
16
|
-
* 3. thirdweb converts USD → USDC on Arbitrum One
|
|
17
|
-
* 4. USDC approve + purchaseApp() execute automatically
|
|
18
|
-
* 5. User sees "Purchase complete" — never sees crypto
|
|
9
|
+
* On-chain execution is coming soon (Crossmint integration in progress).
|
|
10
|
+
* This component renders its children and calls onSuccess/onError hooks.
|
|
19
11
|
*
|
|
20
12
|
* @example
|
|
21
13
|
* ```tsx
|
|
@@ -26,170 +18,25 @@
|
|
|
26
18
|
* </PaymentWidget>
|
|
27
19
|
* ```
|
|
28
20
|
*/
|
|
29
|
-
import React
|
|
30
|
-
import { TransactionButton, useActiveAccount } from 'thirdweb/react';
|
|
31
|
-
import { prepareContractCall, getContract, readContract, defineChain } from 'thirdweb';
|
|
32
|
-
import { approve } from 'thirdweb/extensions/erc20';
|
|
21
|
+
import React from 'react';
|
|
33
22
|
import { useVarityPayment } from './useVarityPayment';
|
|
34
|
-
/** Arbitrum One USDC contract address */
|
|
35
|
-
const USDC_ADDRESS = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831';
|
|
36
|
-
/** Arbitrum One chain config for thirdweb */
|
|
37
|
-
const ARBITRUM_ONE = defineChain(42161);
|
|
38
|
-
/**
|
|
39
|
-
* Build the payModal config that hides all crypto complexity.
|
|
40
|
-
* Users see a clean credit card checkout — no wallets, tokens, or chains.
|
|
41
|
-
*
|
|
42
|
-
* The payModal auto-detects that the transaction needs USDC on Arbitrum One
|
|
43
|
-
* and shows the credit card on-ramp when the user has insufficient balance.
|
|
44
|
-
*/
|
|
45
|
-
function buildPayModalConfig(opts) {
|
|
46
|
-
return {
|
|
47
|
-
theme: opts.theme,
|
|
48
|
-
metadata: {
|
|
49
|
-
name: opts.title,
|
|
50
|
-
image: '/logo/varity-logo-color.svg',
|
|
51
|
-
},
|
|
52
|
-
// Credit card only — hide crypto swap/transfer options
|
|
53
|
-
buyWithCrypto: false,
|
|
54
|
-
// Prefer Stripe for the cleanest credit card experience
|
|
55
|
-
buyWithFiat: {
|
|
56
|
-
preferredProvider: 'stripe',
|
|
57
|
-
},
|
|
58
|
-
// Only show USDC on Arbitrum One, labeled as "USD" to hide crypto
|
|
59
|
-
supportedTokens: {
|
|
60
|
-
42161: [{
|
|
61
|
-
address: USDC_ADDRESS,
|
|
62
|
-
name: 'USD',
|
|
63
|
-
symbol: 'USD',
|
|
64
|
-
icon: 'https://assets.coingecko.com/coins/images/6319/standard/usdc.png',
|
|
65
|
-
}],
|
|
66
|
-
},
|
|
67
|
-
showThirdwebBranding: false,
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
23
|
/**
|
|
71
24
|
* PaymentWidget - Required component for app monetization
|
|
72
25
|
*
|
|
73
26
|
* Wraps a trigger element and handles the full purchase flow.
|
|
74
|
-
*
|
|
75
|
-
* Credit card payments handled seamlessly via thirdweb Pay.
|
|
27
|
+
* Payments via Crossmint (credit card → USDC) — coming soon.
|
|
76
28
|
*/
|
|
77
|
-
export const PaymentWidget = ({ appId, price, type = 'one-time',
|
|
29
|
+
export const PaymentWidget = ({ appId, price, type = 'one-time', onSuccess, onCancel, onError, theme = 'dark', className = '', children, disabled = false, }) => {
|
|
78
30
|
const { hasPurchased, isLoading, pricing, } = useVarityPayment({ appId });
|
|
79
|
-
|
|
80
|
-
const [isAuthorized, setIsAuthorized] = useState(false);
|
|
81
|
-
const [hasAllowance, setHasAllowance] = useState(null);
|
|
82
|
-
// Get payment contract address
|
|
83
|
-
const paymentsAddress = (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_VARITY_PAYMENTS_ADDRESS
|
|
84
|
-
? process.env.NEXT_PUBLIC_VARITY_PAYMENTS_ADDRESS
|
|
85
|
-
: '0x0568cf3b5b9c94542aa8d32eb51ffa38912fc48c');
|
|
86
|
-
// Amount needed in raw USDC units
|
|
87
|
-
const amountNeeded = pricing?.priceUsdc
|
|
88
|
-
? pricing.priceUsdc
|
|
89
|
-
: price
|
|
90
|
-
? BigInt(price * 10000) // cents * 10000 = USDC units (6 decimals)
|
|
91
|
-
: BigInt(0);
|
|
92
|
-
// Check USDC allowance on mount — skip authorize step if sufficient
|
|
93
|
-
useEffect(() => {
|
|
94
|
-
if (!account?.address || amountNeeded === BigInt(0)) {
|
|
95
|
-
setHasAllowance(false);
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
const checkAllowance = async () => {
|
|
99
|
-
try {
|
|
100
|
-
const { createThirdwebClient } = await import('thirdweb');
|
|
101
|
-
const client = createThirdwebClient({
|
|
102
|
-
clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || '',
|
|
103
|
-
});
|
|
104
|
-
const usdcContract = getContract({ client, chain: ARBITRUM_ONE, address: USDC_ADDRESS });
|
|
105
|
-
const currentAllowance = await readContract({
|
|
106
|
-
contract: usdcContract,
|
|
107
|
-
method: 'function allowance(address owner, address spender) view returns (uint256)',
|
|
108
|
-
params: [account.address, paymentsAddress],
|
|
109
|
-
});
|
|
110
|
-
setHasAllowance(BigInt(currentAllowance.toString()) >= amountNeeded);
|
|
111
|
-
}
|
|
112
|
-
catch {
|
|
113
|
-
setHasAllowance(false);
|
|
114
|
-
}
|
|
115
|
-
};
|
|
116
|
-
checkAllowance();
|
|
117
|
-
}, [account?.address, amountNeeded, paymentsAddress]);
|
|
118
|
-
// Calculate price in USD for display and payModal
|
|
119
|
-
const priceUsd = pricing?.priceUsdc
|
|
120
|
-
? Number(pricing.priceUsdc) / 1_000_000
|
|
121
|
-
: price
|
|
122
|
-
? price / 100
|
|
123
|
-
: 0;
|
|
124
|
-
const displayPrice = priceUsd > 0 ? `$${priceUsd.toFixed(2)}` : null;
|
|
125
|
-
// Already purchased
|
|
31
|
+
// Already purchased — show confirmation
|
|
126
32
|
if (hasPurchased && !isLoading) {
|
|
127
33
|
return (React.createElement("div", { className: `inline-flex items-center gap-2 text-green-500 ${className}` },
|
|
128
34
|
React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
129
35
|
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })),
|
|
130
36
|
React.createElement("span", null, "Purchased")));
|
|
131
37
|
}
|
|
132
|
-
//
|
|
133
|
-
|
|
134
|
-
return React.createElement("div", { className: className }, children);
|
|
135
|
-
}
|
|
136
|
-
// No pricing set
|
|
137
|
-
if (!pricing?.isActive) {
|
|
138
|
-
return null;
|
|
139
|
-
}
|
|
140
|
-
// Helper to get thirdweb client
|
|
141
|
-
const getClient = async () => {
|
|
142
|
-
const { createThirdwebClient } = await import('thirdweb');
|
|
143
|
-
return createThirdwebClient({
|
|
144
|
-
clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || '',
|
|
145
|
-
});
|
|
146
|
-
};
|
|
147
|
-
const needsAuthorization = hasAllowance === false && !isAuthorized;
|
|
148
|
-
if (needsAuthorization) {
|
|
149
|
-
// Step 1: Authorize payment (sets USDC allowance)
|
|
150
|
-
// payModal handles credit card on-ramp if user has no USDC
|
|
151
|
-
return (React.createElement(TransactionButton, { transaction: async () => {
|
|
152
|
-
const client = await getClient();
|
|
153
|
-
const usdcContract = getContract({ client, chain: ARBITRUM_ONE, address: USDC_ADDRESS });
|
|
154
|
-
return approve({
|
|
155
|
-
contract: usdcContract,
|
|
156
|
-
spender: paymentsAddress,
|
|
157
|
-
amount: priceUsd,
|
|
158
|
-
});
|
|
159
|
-
}, onTransactionConfirmed: () => {
|
|
160
|
-
setIsAuthorized(true);
|
|
161
|
-
}, onError: (error) => {
|
|
162
|
-
onError?.(error);
|
|
163
|
-
}, payModal: buildPayModalConfig({
|
|
164
|
-
theme,
|
|
165
|
-
title: `Payment — ${displayPrice}`,
|
|
166
|
-
}), className: className, disabled: disabled }, children));
|
|
167
|
-
}
|
|
168
|
-
// Step 2 (or only step if allowance exists): Complete purchase
|
|
169
|
-
return (React.createElement(TransactionButton, { transaction: async () => {
|
|
170
|
-
const client = await getClient();
|
|
171
|
-
const contract = getContract({ client, chain: ARBITRUM_ONE, address: paymentsAddress });
|
|
172
|
-
return prepareContractCall({
|
|
173
|
-
contract,
|
|
174
|
-
method: {
|
|
175
|
-
name: 'purchaseApp',
|
|
176
|
-
type: 'function',
|
|
177
|
-
stateMutability: 'nonpayable',
|
|
178
|
-
inputs: [{ name: 'appId', type: 'uint64' }],
|
|
179
|
-
outputs: [],
|
|
180
|
-
},
|
|
181
|
-
params: [BigInt(appId)],
|
|
182
|
-
});
|
|
183
|
-
}, onTransactionConfirmed: (receipt) => {
|
|
184
|
-
onSuccess?.(receipt.transactionHash);
|
|
185
|
-
}, onError: (error) => {
|
|
186
|
-
onError?.(error);
|
|
187
|
-
}, payModal: buildPayModalConfig({
|
|
188
|
-
theme,
|
|
189
|
-
title: type === 'subscription'
|
|
190
|
-
? `Subscribe — ${displayPrice}/mo`
|
|
191
|
-
: `Purchase — ${displayPrice}`,
|
|
192
|
-
}), className: className, disabled: disabled }, children));
|
|
38
|
+
// Pass-through while loading or no active pricing
|
|
39
|
+
return React.createElement("div", { className: className }, children);
|
|
193
40
|
};
|
|
194
41
|
export default PaymentWidget;
|
|
195
42
|
//# sourceMappingURL=PaymentWidget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaymentWidget.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentWidget.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"PaymentWidget.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,KAAK,EACL,KAAK,EACL,IAAI,GAAG,UAAU,EACjB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,GAAG,MAAM,EACd,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,QAAQ,GAAG,KAAK,GACjB,EAAE,EAAE;IACH,MAAM,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,GACR,GAAG,gBAAgB,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAEhC,wCAAwC;IACxC,IAAI,YAAY,IAAI,CAAC,SAAS,EAAE,CAAC;QAC/B,OAAO,CACL,6BAAK,SAAS,EAAE,iDAAiD,SAAS,EAAE;YAC1E,6BAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW;gBAC5E,8BAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAC,gBAAgB,GAAG,CACpF;YACN,8CAAsB,CAClB,CACP,CAAC;IACJ,CAAC;IAED,kDAAkD;IAClD,OAAO,6BAAK,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAO,CAAC;AACrD,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -4,16 +4,8 @@
|
|
|
4
4
|
* Combines balance check + on-ramp + approval + purchase into a single flow.
|
|
5
5
|
* User just clicks "Pay" - everything happens automatically.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* 2. If insufficient → Auto-trigger Privy on-ramp (Bridge/MoonPay/Coinbase modal)
|
|
10
|
-
* 3. Auto-approve USDC allowance if needed
|
|
11
|
-
* 4. Execute purchase (90/10 split)
|
|
12
|
-
*
|
|
13
|
-
* Integration with Bridge:
|
|
14
|
-
* - Once Bridge is configured in PrivyProvider's fundingMethodConfig
|
|
15
|
-
* - useFundWallet automatically uses Bridge (Stripe UX)
|
|
16
|
-
* - Falls back to MoonPay/Coinbase if Bridge unavailable
|
|
7
|
+
* NOTE: Full implementation coming soon (Crossmint integration in progress).
|
|
8
|
+
* This stub maintains the hook API so consuming components compile correctly.
|
|
17
9
|
*
|
|
18
10
|
* @example
|
|
19
11
|
* ```tsx
|
|
@@ -38,8 +30,8 @@ export declare function useSeamlessPayment({ appId }: {
|
|
|
38
30
|
needsFunding?: boolean;
|
|
39
31
|
}>;
|
|
40
32
|
onrampStatus: "idle" | "checking" | "funding" | "approving" | "purchasing";
|
|
41
|
-
checkBalance: (
|
|
42
|
-
checkAllowance: (
|
|
33
|
+
checkBalance: (_address: string) => Promise<bigint>;
|
|
34
|
+
checkAllowance: (_address: string) => Promise<bigint>;
|
|
43
35
|
hasPurchased: boolean;
|
|
44
36
|
isLoading: boolean;
|
|
45
37
|
isPurchasing: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSeamlessPayment.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/useSeamlessPayment.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"useSeamlessPayment.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/useSeamlessPayment.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AASH;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;4BAwBd,OAAO,CAAC;QACrD,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,YAAY,CAAC,EAAE,OAAO,CAAC;KACxB,CAAC;;6BAtBgD,MAAM,KAAG,OAAO,CAAC,MAAM,CAAC;+BAQtB,MAAM,KAAG,OAAO,CAAC,MAAM,CAAC;;;;;;;;EAyB7E"}
|
|
@@ -4,16 +4,8 @@
|
|
|
4
4
|
* Combines balance check + on-ramp + approval + purchase into a single flow.
|
|
5
5
|
* User just clicks "Pay" - everything happens automatically.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* 2. If insufficient → Auto-trigger Privy on-ramp (Bridge/MoonPay/Coinbase modal)
|
|
10
|
-
* 3. Auto-approve USDC allowance if needed
|
|
11
|
-
* 4. Execute purchase (90/10 split)
|
|
12
|
-
*
|
|
13
|
-
* Integration with Bridge:
|
|
14
|
-
* - Once Bridge is configured in PrivyProvider's fundingMethodConfig
|
|
15
|
-
* - useFundWallet automatically uses Bridge (Stripe UX)
|
|
16
|
-
* - Falls back to MoonPay/Coinbase if Bridge unavailable
|
|
7
|
+
* NOTE: Full implementation coming soon (Crossmint integration in progress).
|
|
8
|
+
* This stub maintains the hook API so consuming components compile correctly.
|
|
17
9
|
*
|
|
18
10
|
* @example
|
|
19
11
|
* ```tsx
|
|
@@ -26,11 +18,7 @@
|
|
|
26
18
|
*/
|
|
27
19
|
import { useCallback, useState } from 'react';
|
|
28
20
|
import { useFundWallet } from '@privy-io/react-auth';
|
|
29
|
-
import { useActiveAccount } from 'thirdweb/react';
|
|
30
|
-
import { readContract, getContract } from 'thirdweb';
|
|
31
|
-
import { createThirdwebClient, defineChain } from 'thirdweb';
|
|
32
21
|
import { useVarityPayment } from './useVarityPayment';
|
|
33
|
-
import { THIRDWEB_CLIENT_ID } from '../../config/chains';
|
|
34
22
|
const USDC_ADDRESS = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831'; // Arbitrum One USDC
|
|
35
23
|
const VARITY_PAYMENTS_ADDRESS = '0x0568cf3b5b9c94542aa8d32eb51ffa38912fc48c';
|
|
36
24
|
/**
|
|
@@ -39,123 +27,27 @@ const VARITY_PAYMENTS_ADDRESS = '0x0568cf3b5b9c94542aa8d32eb51ffa38912fc48c';
|
|
|
39
27
|
export function useSeamlessPayment({ appId }) {
|
|
40
28
|
const basePayment = useVarityPayment({ appId });
|
|
41
29
|
const { fundWallet } = useFundWallet();
|
|
42
|
-
const account = useActiveAccount();
|
|
43
30
|
const [onrampStatus, setOnrampStatus] = useState('idle');
|
|
44
|
-
const client = createThirdwebClient({ clientId: THIRDWEB_CLIENT_ID });
|
|
45
31
|
/**
|
|
46
|
-
* Check USDC balance on Arbitrum One
|
|
32
|
+
* Check USDC balance on Arbitrum One (coming soon)
|
|
47
33
|
*/
|
|
48
|
-
const checkBalance = useCallback(async (
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
address: USDC_ADDRESS,
|
|
53
|
-
});
|
|
54
|
-
const balance = await readContract({
|
|
55
|
-
contract: usdcContract,
|
|
56
|
-
method: 'function balanceOf(address) view returns (uint256)',
|
|
57
|
-
params: [address],
|
|
58
|
-
});
|
|
59
|
-
return BigInt(balance.toString());
|
|
60
|
-
}, [client]);
|
|
34
|
+
const checkBalance = useCallback(async (_address) => {
|
|
35
|
+
// On-chain balance lookup coming soon (Crossmint integration)
|
|
36
|
+
return BigInt(0);
|
|
37
|
+
}, []);
|
|
61
38
|
/**
|
|
62
|
-
* Check USDC allowance for VarityPayments contract
|
|
39
|
+
* Check USDC allowance for VarityPayments contract (coming soon)
|
|
63
40
|
*/
|
|
64
|
-
const checkAllowance = useCallback(async (
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
address: USDC_ADDRESS,
|
|
69
|
-
});
|
|
70
|
-
const allowance = await readContract({
|
|
71
|
-
contract: usdcContract,
|
|
72
|
-
method: 'function allowance(address owner, address spender) view returns (uint256)',
|
|
73
|
-
params: [address, VARITY_PAYMENTS_ADDRESS],
|
|
74
|
-
});
|
|
75
|
-
return BigInt(allowance.toString());
|
|
76
|
-
}, [client]);
|
|
41
|
+
const checkAllowance = useCallback(async (_address) => {
|
|
42
|
+
// On-chain allowance lookup coming soon
|
|
43
|
+
return BigInt(0);
|
|
44
|
+
}, []);
|
|
77
45
|
/**
|
|
78
|
-
* Seamless purchase flow
|
|
79
|
-
*
|
|
80
|
-
* Steps:
|
|
81
|
-
* 1. Check USDC balance
|
|
82
|
-
* 2. If insufficient → Open Bridge/MoonPay/Coinbase modal (via Privy)
|
|
83
|
-
* 3. Check USDC allowance
|
|
84
|
-
* 4. If insufficient → PaymentWidget's TransactionButton handles approval
|
|
85
|
-
* 5. Execute purchase
|
|
86
|
-
*
|
|
87
|
-
* User Experience:
|
|
88
|
-
* - Click "Pay $99"
|
|
89
|
-
* - If no USDC → Credit card modal opens (Bridge = Stripe UX)
|
|
90
|
-
* - Enter card details
|
|
91
|
-
* - "Processing..." (approval + purchase happen automatically)
|
|
92
|
-
* - "Payment successful!"
|
|
93
|
-
*
|
|
94
|
-
* User NEVER sees: USDC, blockchain, transactions, approvals
|
|
46
|
+
* Seamless purchase flow — coming soon (Crossmint integration)
|
|
95
47
|
*/
|
|
96
48
|
const seamlessPurchase = useCallback(async () => {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
}
|
|
100
|
-
if (!basePayment.pricing || !basePayment.pricing.isActive) {
|
|
101
|
-
return { success: false, error: 'This app is not available for purchase' };
|
|
102
|
-
}
|
|
103
|
-
if (basePayment.hasPurchased) {
|
|
104
|
-
return { success: false, error: 'You have already purchased this app' };
|
|
105
|
-
}
|
|
106
|
-
const needed = basePayment.pricing.priceUsdc;
|
|
107
|
-
try {
|
|
108
|
-
// Step 1: Check USDC balance
|
|
109
|
-
setOnrampStatus('checking');
|
|
110
|
-
const balance = await checkBalance(account.address);
|
|
111
|
-
console.log(`[SeamlessPayment] Balance: ${balance}, Needed: ${needed}`);
|
|
112
|
-
// Step 2: If insufficient balance, trigger on-ramp
|
|
113
|
-
if (balance < needed) {
|
|
114
|
-
const amountToFund = Number(needed - balance) / 1_000_000; // USDC has 6 decimals
|
|
115
|
-
const amountRounded = Math.ceil(amountToFund); // Round up to nearest dollar
|
|
116
|
-
console.log(`[SeamlessPayment] Insufficient USDC. Funding $${amountRounded}...`);
|
|
117
|
-
setOnrampStatus('funding');
|
|
118
|
-
// This opens Privy's funding modal
|
|
119
|
-
// If Bridge is configured → Bridge (Stripe) modal
|
|
120
|
-
// Otherwise → MoonPay/Coinbase modal
|
|
121
|
-
await fundWallet(account.address, {
|
|
122
|
-
chain: defineChain(42161), // Arbitrum One
|
|
123
|
-
asset: 'USDC',
|
|
124
|
-
amount: amountRounded.toString(),
|
|
125
|
-
});
|
|
126
|
-
console.log('[SeamlessPayment] Funding complete!');
|
|
127
|
-
// Return status so PaymentWidget can show "Please click again to complete purchase"
|
|
128
|
-
return {
|
|
129
|
-
success: false,
|
|
130
|
-
needsFunding: true,
|
|
131
|
-
error: 'Funding complete! Please click the purchase button again to complete your purchase.'
|
|
132
|
-
};
|
|
133
|
-
}
|
|
134
|
-
// Step 3: Check allowance
|
|
135
|
-
const allowance = await checkAllowance(account.address);
|
|
136
|
-
if (allowance < needed) {
|
|
137
|
-
// Let PaymentWidget's TransactionButton handle approval
|
|
138
|
-
console.log('[SeamlessPayment] Allowance insufficient, needs approval');
|
|
139
|
-
return { success: false, needsApproval: true };
|
|
140
|
-
}
|
|
141
|
-
// Step 4: Execute purchase (handled by basePayment.purchase)
|
|
142
|
-
setOnrampStatus('purchasing');
|
|
143
|
-
const txHash = await basePayment.purchase();
|
|
144
|
-
if (txHash) {
|
|
145
|
-
setOnrampStatus('idle');
|
|
146
|
-
return { success: true, txHash };
|
|
147
|
-
}
|
|
148
|
-
else {
|
|
149
|
-
return { success: false, error: 'Purchase failed - no transaction hash' };
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
catch (error) {
|
|
153
|
-
console.error('[SeamlessPayment] Error:', error);
|
|
154
|
-
setOnrampStatus('idle');
|
|
155
|
-
const errorMessage = error instanceof Error ? error.message : 'Unknown error';
|
|
156
|
-
return { success: false, error: errorMessage };
|
|
157
|
-
}
|
|
158
|
-
}, [account, basePayment, checkBalance, checkAllowance, fundWallet]);
|
|
49
|
+
return { success: false, error: 'Payments coming soon — Crossmint integration in progress.' };
|
|
50
|
+
}, []);
|
|
159
51
|
return {
|
|
160
52
|
...basePayment,
|
|
161
53
|
seamlessPurchase,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSeamlessPayment.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/useSeamlessPayment.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"useSeamlessPayment.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/useSeamlessPayment.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,YAAY,GAAG,4CAA4C,CAAC,CAAC,oBAAoB;AACvF,MAAM,uBAAuB,GAAG,4CAA4C,CAAC;AAE7E;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAqB;IAC7D,MAAM,WAAW,GAAG,gBAAgB,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAChD,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IACvC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAA+D,MAAM,CAAC,CAAC;IAEvH;;OAEG;IACH,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE,QAAgB,EAAmB,EAAE;QAC3E,8DAA8D;QAC9D,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,cAAc,GAAG,WAAW,CAAC,KAAK,EAAE,QAAgB,EAAmB,EAAE;QAC7E,wCAAwC;QACxC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,gBAAgB,GAAG,WAAW,CAAC,KAAK,IAMvC,EAAE;QACH,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,2DAA2D,EAAE,CAAC;IAChG,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,GAAG,WAAW;QACd,gBAAgB;QAChB,YAAY;QACZ,YAAY;QACZ,cAAc;KACf,CAAC;AACJ,CAAC"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* useVarityPayment Hook
|
|
3
|
-
* Manages purchase state for developer apps with 90/10 revenue split
|
|
3
|
+
* Manages purchase state for developer apps with 90/10 revenue split.
|
|
4
|
+
*
|
|
5
|
+
* NOTE: On-chain payment execution is coming soon (Crossmint integration).
|
|
6
|
+
* This hook currently provides the state API so consuming components compile
|
|
7
|
+
* and run without errors while the payment backend is finalised.
|
|
4
8
|
*/
|
|
5
9
|
import { UseVarityPaymentReturn, UseVarityPaymentOptions } from './types';
|
|
6
10
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVarityPayment.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/useVarityPayment.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"useVarityPayment.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/useVarityPayment.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EAExB,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,SAAgB,GACjB,EAAE,uBAAuB,GAAG,sBAAsB,CAqClD;AAED,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* useVarityPayment Hook
|
|
3
|
-
* Manages purchase state for developer apps with 90/10 revenue split
|
|
3
|
+
* Manages purchase state for developer apps with 90/10 revenue split.
|
|
4
|
+
*
|
|
5
|
+
* NOTE: On-chain payment execution is coming soon (Crossmint integration).
|
|
6
|
+
* This hook currently provides the state API so consuming components compile
|
|
7
|
+
* and run without errors while the payment backend is finalised.
|
|
4
8
|
*/
|
|
5
|
-
import { useState,
|
|
6
|
-
import {
|
|
7
|
-
import { prepareContractCall, readContract, getContract } from 'thirdweb';
|
|
8
|
-
import { createThirdwebClient } from 'thirdweb';
|
|
9
|
-
import { arbitrumOne, THIRDWEB_CLIENT_ID } from '../../config/chains';
|
|
10
|
-
import { VARITY_PAYMENTS_ADDRESS, VARITY_PAYMENTS_ABI, } from './types';
|
|
9
|
+
import { useState, useCallback } from 'react';
|
|
10
|
+
import { usePrivy } from '@privy-io/react-auth';
|
|
11
11
|
/**
|
|
12
12
|
* Hook for managing app purchase state
|
|
13
13
|
*
|
|
@@ -22,134 +22,28 @@ import { VARITY_PAYMENTS_ADDRESS, VARITY_PAYMENTS_ABI, } from './types';
|
|
|
22
22
|
*/
|
|
23
23
|
export function useVarityPayment({ appId, autoFetch = true, }) {
|
|
24
24
|
const [hasPurchased, setHasPurchased] = useState(false);
|
|
25
|
-
const [isLoading, setIsLoading] = useState(
|
|
25
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
26
26
|
const [isPurchasing, setIsPurchasing] = useState(false);
|
|
27
27
|
const [error, setError] = useState(null);
|
|
28
28
|
const [pricing, setPricing] = useState(null);
|
|
29
|
-
const
|
|
30
|
-
const { mutateAsync: sendTx } = useSendTransaction();
|
|
31
|
-
// Create thirdweb client
|
|
32
|
-
const client = createThirdwebClient({ clientId: THIRDWEB_CLIENT_ID });
|
|
33
|
-
// Get contract instance
|
|
34
|
-
const getPaymentsContract = useCallback(() => {
|
|
35
|
-
return getContract({
|
|
36
|
-
client,
|
|
37
|
-
chain: arbitrumOne, // Payments on Arb One (mainnet, real USDC)
|
|
38
|
-
address: VARITY_PAYMENTS_ADDRESS,
|
|
39
|
-
});
|
|
40
|
-
}, [client]);
|
|
41
|
-
/**
|
|
42
|
-
* Fetch pricing and purchase status
|
|
43
|
-
*/
|
|
44
|
-
const fetchData = useCallback(async () => {
|
|
45
|
-
if (!appId) {
|
|
46
|
-
setIsLoading(false);
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
try {
|
|
50
|
-
setIsLoading(true);
|
|
51
|
-
setError(null);
|
|
52
|
-
const contract = getPaymentsContract();
|
|
53
|
-
// Get app pricing
|
|
54
|
-
const pricingMethod = VARITY_PAYMENTS_ABI.find(m => m.name === 'getAppPricing');
|
|
55
|
-
if (pricingMethod) {
|
|
56
|
-
const pricingData = await readContract({
|
|
57
|
-
contract,
|
|
58
|
-
method: pricingMethod,
|
|
59
|
-
params: [BigInt(appId)],
|
|
60
|
-
});
|
|
61
|
-
setPricing({
|
|
62
|
-
priceUsdc: pricingData[0],
|
|
63
|
-
developer: pricingData[1],
|
|
64
|
-
isSubscription: pricingData[2],
|
|
65
|
-
intervalDays: Number(pricingData[3]),
|
|
66
|
-
isActive: pricingData[4],
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
// Check if user has purchased (if connected)
|
|
70
|
-
if (account?.address) {
|
|
71
|
-
const purchasedMethod = VARITY_PAYMENTS_ABI.find(m => m.name === 'hasUserPurchased');
|
|
72
|
-
if (purchasedMethod) {
|
|
73
|
-
const purchased = await readContract({
|
|
74
|
-
contract,
|
|
75
|
-
method: purchasedMethod,
|
|
76
|
-
params: [BigInt(appId), account.address],
|
|
77
|
-
});
|
|
78
|
-
setHasPurchased(purchased);
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
else {
|
|
82
|
-
setHasPurchased(false);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
catch (err) {
|
|
86
|
-
console.error('Failed to fetch payment data:', err);
|
|
87
|
-
// Don't show error for apps without pricing - just set pricing to null
|
|
88
|
-
setPricing(null);
|
|
89
|
-
setHasPurchased(false);
|
|
90
|
-
}
|
|
91
|
-
finally {
|
|
92
|
-
setIsLoading(false);
|
|
93
|
-
}
|
|
94
|
-
}, [appId, account?.address, getPaymentsContract]);
|
|
29
|
+
const { authenticated } = usePrivy();
|
|
95
30
|
/**
|
|
96
|
-
* Purchase the app
|
|
31
|
+
* Purchase the app — coming soon (Crossmint integration in progress)
|
|
97
32
|
*/
|
|
98
33
|
const purchase = useCallback(async () => {
|
|
99
|
-
if (!
|
|
34
|
+
if (!authenticated) {
|
|
100
35
|
setError('Please sign in first');
|
|
101
36
|
return null;
|
|
102
37
|
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
107
|
-
if (hasPurchased) {
|
|
108
|
-
setError('You have already purchased this app');
|
|
109
|
-
return null;
|
|
110
|
-
}
|
|
111
|
-
try {
|
|
112
|
-
setIsPurchasing(true);
|
|
113
|
-
setError(null);
|
|
114
|
-
const contract = getPaymentsContract();
|
|
115
|
-
const purchaseMethod = VARITY_PAYMENTS_ABI.find(m => m.name === 'purchaseApp');
|
|
116
|
-
if (!purchaseMethod) {
|
|
117
|
-
throw new Error('Purchase method not found in ABI');
|
|
118
|
-
}
|
|
119
|
-
const transaction = prepareContractCall({
|
|
120
|
-
contract,
|
|
121
|
-
method: purchaseMethod,
|
|
122
|
-
params: [BigInt(appId)],
|
|
123
|
-
// No value — purchaseApp is nonpayable, pulls USDC via ERC-20 transferFrom
|
|
124
|
-
});
|
|
125
|
-
const result = await sendTx(transaction);
|
|
126
|
-
const txHash = result.transactionHash;
|
|
127
|
-
// Update purchase status
|
|
128
|
-
setHasPurchased(true);
|
|
129
|
-
return txHash;
|
|
130
|
-
}
|
|
131
|
-
catch (err) {
|
|
132
|
-
const errorMessage = err instanceof Error ? err.message : 'Purchase failed';
|
|
133
|
-
setError(errorMessage);
|
|
134
|
-
console.error('Purchase error:', err);
|
|
135
|
-
return null;
|
|
136
|
-
}
|
|
137
|
-
finally {
|
|
138
|
-
setIsPurchasing(false);
|
|
139
|
-
}
|
|
140
|
-
}, [account, pricing, hasPurchased, appId, getPaymentsContract, sendTx]);
|
|
38
|
+
setError('Payments coming soon — in-app purchases will be available shortly.');
|
|
39
|
+
return null;
|
|
40
|
+
}, [authenticated]);
|
|
141
41
|
/**
|
|
142
42
|
* Refresh purchase status
|
|
143
43
|
*/
|
|
144
44
|
const refresh = useCallback(async () => {
|
|
145
|
-
|
|
146
|
-
}, [
|
|
147
|
-
// Auto-fetch on mount and when dependencies change
|
|
148
|
-
useEffect(() => {
|
|
149
|
-
if (autoFetch) {
|
|
150
|
-
fetchData();
|
|
151
|
-
}
|
|
152
|
-
}, [autoFetch, fetchData]);
|
|
45
|
+
// No-op until on-chain lookup is implemented
|
|
46
|
+
}, []);
|
|
153
47
|
return {
|
|
154
48
|
hasPurchased,
|
|
155
49
|
isLoading,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVarityPayment.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/useVarityPayment.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"useVarityPayment.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/useVarityPayment.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,QAAQ,EAAa,WAAW,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAOhD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,SAAS,GAAG,IAAI,GACQ;IACxB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAoB,IAAI,CAAC,CAAC;IAEhE,MAAM,EAAE,aAAa,EAAE,GAAG,QAAQ,EAAE,CAAC;IAErC;;OAEG;IACH,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,IAA4B,EAAE;QAC9D,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,QAAQ,CAAC,sBAAsB,CAAC,CAAC;YACjC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,QAAQ,CAAC,oEAAoE,CAAC,CAAC;QAC/E,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB;;OAEG;IACH,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACrC,6CAA6C;IAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,KAAK;QACL,OAAO;QACP,QAAQ;QACR,OAAO;KACR,CAAC;AACJ,CAAC;AAED,eAAe,gBAAgB,CAAC"}
|
|
@@ -2,7 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { SubscriptionPlan } from './types';
|
|
3
3
|
/**
|
|
4
4
|
* Checkout Modal Component
|
|
5
|
-
* Handles
|
|
5
|
+
* Handles payment processing for subscriptions.
|
|
6
|
+
*
|
|
7
|
+
* NOTE: On-chain payment execution is coming soon (Crossmint integration).
|
|
8
|
+
* This component currently shows a "Coming soon" message.
|
|
6
9
|
*/
|
|
7
10
|
interface CheckoutModalProps {
|
|
8
11
|
isOpen: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckoutModal.d.ts","sourceRoot":"","sources":["../../../src/components/Payments/CheckoutModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckoutModal.d.ts","sourceRoot":"","sources":["../../../src/components/Payments/CheckoutModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C;;;;;;GAMG;AAEH,UAAU,kBAAkB;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AASD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsGtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,34 +1,20 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { prepareContractCall, waitForReceipt } from 'thirdweb';
|
|
4
|
-
import { getContract } from 'thirdweb';
|
|
5
|
-
import { createThirdwebClient } from 'thirdweb';
|
|
6
|
-
import { formatUSDC, USDC_CONTRACT_ADDRESS } from './constants';
|
|
7
|
-
import { useSIWE } from '../SIWE/SIWEProvider';
|
|
8
|
-
import { varityL3Testnet } from '../../config/chains';
|
|
2
|
+
import { formatUSDC } from './constants';
|
|
9
3
|
var CheckoutStep;
|
|
10
4
|
(function (CheckoutStep) {
|
|
11
5
|
CheckoutStep["REVIEW"] = "review";
|
|
12
|
-
CheckoutStep["APPROVE"] = "approve";
|
|
13
6
|
CheckoutStep["PAYMENT"] = "payment";
|
|
14
|
-
CheckoutStep["CONFIRMING"] = "confirming";
|
|
15
7
|
CheckoutStep["SUCCESS"] = "success";
|
|
16
8
|
CheckoutStep["ERROR"] = "error";
|
|
17
9
|
})(CheckoutStep || (CheckoutStep = {}));
|
|
18
10
|
export const CheckoutModal = ({ isOpen, onClose, plan, clientId, paymentRecipient, onSuccess, onError, theme = 'dark', }) => {
|
|
19
11
|
const [currentStep, setCurrentStep] = useState(CheckoutStep.REVIEW);
|
|
20
12
|
const [error, setError] = useState(null);
|
|
21
|
-
const [txHash, setTxHash] = useState(null);
|
|
22
|
-
const { isAuthenticated } = useSIWE();
|
|
23
|
-
const account = useActiveAccount();
|
|
24
|
-
const { mutate: sendTransaction, isPending } = useSendTransaction();
|
|
25
|
-
const client = createThirdwebClient({ clientId });
|
|
26
13
|
// Reset state when modal opens
|
|
27
14
|
useEffect(() => {
|
|
28
15
|
if (isOpen) {
|
|
29
16
|
setCurrentStep(CheckoutStep.REVIEW);
|
|
30
17
|
setError(null);
|
|
31
|
-
setTxHash(null);
|
|
32
18
|
}
|
|
33
19
|
}, [isOpen]);
|
|
34
20
|
if (!isOpen)
|
|
@@ -37,158 +23,39 @@ export const CheckoutModal = ({ isOpen, onClose, plan, clientId, paymentRecipien
|
|
|
37
23
|
const textColor = theme === 'dark' ? 'text-white' : 'text-gray-900';
|
|
38
24
|
const mutedTextColor = theme === 'dark' ? 'text-gray-400' : 'text-gray-600';
|
|
39
25
|
const borderColor = theme === 'dark' ? 'border-gray-700' : 'border-gray-200';
|
|
40
|
-
const handlePayment = async () => {
|
|
41
|
-
if (!account || !isAuthenticated) {
|
|
42
|
-
setError('Please connect wallet and authenticate first');
|
|
43
|
-
setCurrentStep(CheckoutStep.ERROR);
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
try {
|
|
47
|
-
setCurrentStep(CheckoutStep.PAYMENT);
|
|
48
|
-
setError(null);
|
|
49
|
-
// Get USDC contract
|
|
50
|
-
const usdcContract = getContract({
|
|
51
|
-
client,
|
|
52
|
-
chain: varityL3Testnet,
|
|
53
|
-
address: USDC_CONTRACT_ADDRESS,
|
|
54
|
-
});
|
|
55
|
-
// Prepare USDC transfer transaction
|
|
56
|
-
const transaction = prepareContractCall({
|
|
57
|
-
contract: usdcContract,
|
|
58
|
-
method: 'function transfer(address to, uint256 amount) returns (bool)',
|
|
59
|
-
params: [paymentRecipient, BigInt(plan.price)],
|
|
60
|
-
});
|
|
61
|
-
// Send transaction
|
|
62
|
-
sendTransaction(transaction, {
|
|
63
|
-
onSuccess: async (result) => {
|
|
64
|
-
setTxHash(result.transactionHash);
|
|
65
|
-
setCurrentStep(CheckoutStep.CONFIRMING);
|
|
66
|
-
try {
|
|
67
|
-
// Wait for on-chain confirmation instead of a fixed timeout
|
|
68
|
-
await waitForReceipt({
|
|
69
|
-
client,
|
|
70
|
-
chain: varityL3Testnet,
|
|
71
|
-
transactionHash: result.transactionHash,
|
|
72
|
-
});
|
|
73
|
-
setCurrentStep(CheckoutStep.SUCCESS);
|
|
74
|
-
onSuccess?.(result.transactionHash);
|
|
75
|
-
}
|
|
76
|
-
catch (receiptErr) {
|
|
77
|
-
const msg = receiptErr?.message || 'Transaction failed on-chain';
|
|
78
|
-
setError(msg);
|
|
79
|
-
setCurrentStep(CheckoutStep.ERROR);
|
|
80
|
-
onError?.(receiptErr);
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
onError: (err) => {
|
|
84
|
-
const errorMessage = err.message || 'Payment failed';
|
|
85
|
-
setError(errorMessage);
|
|
86
|
-
setCurrentStep(CheckoutStep.ERROR);
|
|
87
|
-
onError?.(err);
|
|
88
|
-
},
|
|
89
|
-
});
|
|
90
|
-
}
|
|
91
|
-
catch (err) {
|
|
92
|
-
const errorMessage = err.message || 'Payment failed';
|
|
93
|
-
setError(errorMessage);
|
|
94
|
-
setCurrentStep(CheckoutStep.ERROR);
|
|
95
|
-
onError?.(err);
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
26
|
const handleClose = () => {
|
|
99
|
-
if (currentStep !== CheckoutStep.PAYMENT
|
|
27
|
+
if (currentStep !== CheckoutStep.PAYMENT) {
|
|
100
28
|
onClose();
|
|
101
29
|
}
|
|
102
30
|
};
|
|
103
31
|
return (React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" },
|
|
104
32
|
React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50", onClick: handleClose }),
|
|
105
33
|
React.createElement("div", { className: `relative w-full max-w-2xl mx-4 rounded-2xl shadow-2xl ${bgColor} ${textColor} border ${borderColor}` },
|
|
106
|
-
currentStep !== CheckoutStep.PAYMENT &&
|
|
34
|
+
currentStep !== CheckoutStep.PAYMENT && (React.createElement("button", { onClick: handleClose, className: "absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors" },
|
|
107
35
|
React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
108
36
|
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))),
|
|
109
37
|
React.createElement("div", { className: "p-8" },
|
|
110
38
|
React.createElement("h2", { className: "text-3xl font-bold mb-6" }, "Complete Your Subscription"),
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
39
|
+
React.createElement("div", { className: `border ${borderColor} rounded-lg p-6 mb-6` },
|
|
40
|
+
React.createElement("div", { className: "flex justify-between items-start mb-4" },
|
|
41
|
+
React.createElement("div", null,
|
|
42
|
+
React.createElement("h3", { className: `text-xl font-bold ${textColor}` },
|
|
43
|
+
plan.name,
|
|
44
|
+
" Plan"),
|
|
45
|
+
React.createElement("p", { className: mutedTextColor }, plan.description)),
|
|
46
|
+
React.createElement("div", { className: "text-right" },
|
|
47
|
+
React.createElement("p", { className: `text-2xl font-bold ${textColor}` }, formatUSDC(plan.price)),
|
|
48
|
+
React.createElement("p", { className: `text-sm ${mutedTextColor}` }, "per month"))),
|
|
49
|
+
React.createElement("div", { className: "space-y-2" },
|
|
50
|
+
React.createElement("p", { className: `font-semibold ${textColor} mb-2` }, "Included features:"),
|
|
51
|
+
plan.features.slice(0, 5).map((feature, index) => (React.createElement("div", { key: index, className: "flex items-center gap-2" },
|
|
52
|
+
React.createElement("svg", { className: "w-4 h-4 text-green-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
53
|
+
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })),
|
|
54
|
+
React.createElement("span", { className: `text-sm ${mutedTextColor}` }, feature)))))),
|
|
55
|
+
React.createElement("div", { className: `${theme === 'dark' ? 'bg-blue-900/30 border-blue-700' : 'bg-blue-50 border-blue-200'} border rounded-lg p-6 mb-6 text-center` },
|
|
56
|
+
React.createElement("p", { className: `text-lg font-semibold mb-2 ${textColor}` }, "Payments Coming Soon"),
|
|
57
|
+
React.createElement("p", { className: mutedTextColor }, "In-app payments are being integrated. You'll be able to subscribe using your credit card shortly.")),
|
|
58
|
+
React.createElement("button", { onClick: handleClose, className: `w-full py-3 ${theme === 'dark' ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-200 hover:bg-gray-300'} ${textColor} font-semibold rounded-lg transition-colors` }, "Close")))));
|
|
116
59
|
};
|
|
117
|
-
const ReviewStep = ({ plan, onProceed, theme, textColor, mutedTextColor, borderColor, isPending, }) => (React.createElement(React.Fragment, null,
|
|
118
|
-
React.createElement("div", { className: `border ${borderColor} rounded-lg p-6 mb-6` },
|
|
119
|
-
React.createElement("div", { className: "flex justify-between items-start mb-4" },
|
|
120
|
-
React.createElement("div", null,
|
|
121
|
-
React.createElement("h3", { className: `text-xl font-bold ${textColor}` },
|
|
122
|
-
plan.name,
|
|
123
|
-
" Plan"),
|
|
124
|
-
React.createElement("p", { className: mutedTextColor }, plan.description)),
|
|
125
|
-
React.createElement("div", { className: "text-right" },
|
|
126
|
-
React.createElement("p", { className: `text-2xl font-bold ${textColor}` }, formatUSDC(plan.price)),
|
|
127
|
-
React.createElement("p", { className: `text-sm ${mutedTextColor}` }, "per month"))),
|
|
128
|
-
React.createElement("div", { className: "space-y-2" },
|
|
129
|
-
React.createElement("p", { className: `font-semibold ${textColor} mb-2` }, "Included features:"),
|
|
130
|
-
plan.features.slice(0, 5).map((feature, index) => (React.createElement("div", { key: index, className: "flex items-center gap-2" },
|
|
131
|
-
React.createElement("svg", { className: "w-4 h-4 text-green-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
132
|
-
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })),
|
|
133
|
-
React.createElement("span", { className: `text-sm ${mutedTextColor}` }, feature)))))),
|
|
134
|
-
React.createElement("div", { className: `bg-${theme === 'dark' ? 'gray-800' : 'gray-50'} rounded-lg p-6 mb-6` },
|
|
135
|
-
React.createElement("h4", { className: `font-semibold mb-4 ${textColor}` }, "Payment Details"),
|
|
136
|
-
React.createElement("div", { className: "space-y-2" },
|
|
137
|
-
React.createElement("div", { className: "flex justify-between" },
|
|
138
|
-
React.createElement("span", { className: mutedTextColor }, "Subtotal"),
|
|
139
|
-
React.createElement("span", { className: textColor }, formatUSDC(plan.price))),
|
|
140
|
-
React.createElement("div", { className: "flex justify-between" },
|
|
141
|
-
React.createElement("span", { className: mutedTextColor }, "Currency"),
|
|
142
|
-
React.createElement("span", { className: textColor }, "USDC (Varity L3)")),
|
|
143
|
-
React.createElement("div", { className: `border-t ${borderColor} pt-2 mt-2` }),
|
|
144
|
-
React.createElement("div", { className: "flex justify-between font-bold" },
|
|
145
|
-
React.createElement("span", { className: textColor }, "Total Due Today"),
|
|
146
|
-
React.createElement("span", { className: `text-xl ${textColor}` }, formatUSDC(plan.price))))),
|
|
147
|
-
React.createElement("button", { onClick: onProceed, disabled: isPending, className: "w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2" }, isPending ? (React.createElement(React.Fragment, null,
|
|
148
|
-
React.createElement(LoadingSpinner, null),
|
|
149
|
-
"Processing...")) : (React.createElement(React.Fragment, null,
|
|
150
|
-
"Pay ",
|
|
151
|
-
formatUSDC(plan.price),
|
|
152
|
-
" USDC"))),
|
|
153
|
-
React.createElement("p", { className: `text-xs text-center mt-4 ${mutedTextColor}` }, "Your payment is secure and encrypted. Powered by Thirdweb on Varity L3.")));
|
|
154
|
-
const ProcessingStep = ({ message, txHash, theme, textColor, mutedTextColor }) => (React.createElement("div", { className: "text-center py-12" },
|
|
155
|
-
React.createElement("div", { className: "inline-flex items-center justify-center w-20 h-20 rounded-full bg-blue-500 text-white mb-6 animate-pulse" },
|
|
156
|
-
React.createElement(LoadingSpinner, null)),
|
|
157
|
-
React.createElement("h3", { className: `text-2xl font-bold mb-2 ${textColor}` }, message),
|
|
158
|
-
React.createElement("p", { className: mutedTextColor }, "Please wait while we process your transaction"),
|
|
159
|
-
txHash && (React.createElement("div", { className: "mt-6" },
|
|
160
|
-
React.createElement("p", { className: `text-sm ${mutedTextColor} mb-2` }, "Transaction Hash:"),
|
|
161
|
-
React.createElement("code", { className: `text-xs ${theme === 'dark' ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'} px-3 py-1 rounded` },
|
|
162
|
-
txHash.substring(0, 10),
|
|
163
|
-
"...",
|
|
164
|
-
txHash.substring(txHash.length - 10))))));
|
|
165
|
-
const SuccessStep = ({ plan, txHash, onClose, theme, textColor, mutedTextColor }) => (React.createElement("div", { className: "text-center py-12" },
|
|
166
|
-
React.createElement("div", { className: "inline-flex items-center justify-center w-20 h-20 rounded-full bg-green-500 text-white mb-6" },
|
|
167
|
-
React.createElement("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
168
|
-
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }))),
|
|
169
|
-
React.createElement("h3", { className: `text-2xl font-bold mb-2 ${textColor}` }, "Payment Successful!"),
|
|
170
|
-
React.createElement("p", { className: mutedTextColor },
|
|
171
|
-
"You're now subscribed to the ",
|
|
172
|
-
plan.name,
|
|
173
|
-
" plan"),
|
|
174
|
-
txHash && (React.createElement("div", { className: "mt-6" },
|
|
175
|
-
React.createElement("p", { className: `text-sm ${mutedTextColor} mb-2` }, "Transaction Hash:"),
|
|
176
|
-
React.createElement("code", { className: `text-xs ${theme === 'dark' ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-700'} px-3 py-1 rounded` }, txHash))),
|
|
177
|
-
React.createElement("button", { onClick: onClose, className: "mt-8 px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors" }, "Go to Dashboard")));
|
|
178
|
-
const ErrorStep = ({ error, onRetry, onClose, theme, textColor }) => (React.createElement("div", { className: "text-center py-12" },
|
|
179
|
-
React.createElement("div", { className: "inline-flex items-center justify-center w-20 h-20 rounded-full bg-red-500 text-white mb-6" },
|
|
180
|
-
React.createElement("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
181
|
-
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }))),
|
|
182
|
-
React.createElement("h3", { className: `text-2xl font-bold mb-2 ${textColor}` }, "Payment Failed"),
|
|
183
|
-
React.createElement("p", { className: "text-red-500 mb-8" }, error || 'An error occurred during payment'),
|
|
184
|
-
React.createElement("div", { className: "flex gap-4 justify-center" },
|
|
185
|
-
React.createElement("button", { onClick: onRetry, className: "px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors" }, "Try Again"),
|
|
186
|
-
React.createElement("button", { onClick: onClose, className: `px-6 py-3 ${theme === 'dark' ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-200 hover:bg-gray-300'} ${textColor} font-semibold rounded-lg transition-colors` }, "Cancel"))));
|
|
187
|
-
/**
|
|
188
|
-
* Loading Spinner Component
|
|
189
|
-
*/
|
|
190
|
-
const LoadingSpinner = () => (React.createElement("svg", { className: "animate-spin h-6 w-6", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" },
|
|
191
|
-
React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
192
|
-
React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })));
|
|
193
60
|
export default CheckoutModal;
|
|
194
61
|
//# sourceMappingURL=CheckoutModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckoutModal.js","sourceRoot":"","sources":["../../../src/components/Payments/CheckoutModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckoutModal.js","sourceRoot":"","sources":["../../../src/components/Payments/CheckoutModal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,11 +7,6 @@ export interface VarityDashboardProviderProps {
|
|
|
7
7
|
* Can also be set via NEXT_PUBLIC_PRIVY_APP_ID environment variable
|
|
8
8
|
*/
|
|
9
9
|
privyAppId?: string;
|
|
10
|
-
/**
|
|
11
|
-
* Thirdweb Client ID (from thirdweb Dashboard)
|
|
12
|
-
* Can also be set via NEXT_PUBLIC_THIRDWEB_CLIENT_ID environment variable
|
|
13
|
-
*/
|
|
14
|
-
thirdwebClientId?: string;
|
|
15
10
|
/**
|
|
16
11
|
* Appearance configuration
|
|
17
12
|
*/
|
|
@@ -67,7 +62,6 @@ export interface VarityDashboardProviderProps {
|
|
|
67
62
|
* return (
|
|
68
63
|
* <VarityDashboardProvider
|
|
69
64
|
* privyAppId="your-privy-app-id"
|
|
70
|
-
* thirdwebClientId="your-thirdweb-client-id"
|
|
71
65
|
* appearance={{
|
|
72
66
|
* theme: 'light',
|
|
73
67
|
* accentColor: '#2563EB',
|
|
@@ -80,7 +74,7 @@ export interface VarityDashboardProviderProps {
|
|
|
80
74
|
* }
|
|
81
75
|
* ```
|
|
82
76
|
*/
|
|
83
|
-
export declare function VarityDashboardProvider({ children, privyAppId,
|
|
77
|
+
export declare function VarityDashboardProvider({ children, privyAppId, appearance, loginMethods, initTimeout, onAddressChange, onWalletSyncChange, errorBoundary: ErrorBoundary, }: VarityDashboardProviderProps): React.JSX.Element;
|
|
84
78
|
export { useWalletSync };
|
|
85
79
|
export type { WalletSyncState };
|
|
86
80
|
export default VarityDashboardProvider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VarityDashboardProvider.d.ts","sourceRoot":"","sources":["../../src/providers/VarityDashboardProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAuB,SAAS,
|
|
1
|
+
{"version":3,"file":"VarityDashboardProvider.d.ts","sourceRoot":"","sources":["../../src/providers/VarityDashboardProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9D,OAAO,EAAsB,aAAa,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAwM1F,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,IAAI,MAAM,EAAE,CAAC;QAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC;IAC5F;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CACpE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,UAAU,EACV,UAGC,EACD,YAA4C,EAC5C,WAAmB,EACnB,eAAe,EACf,kBAAkB,EAClB,aAAa,EAAE,aAAa,GAC7B,EAAE,4BAA4B,qBA2D9B;AAGD,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC,eAAe,uBAAuB,CAAC"}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import React, { useState, useEffect
|
|
2
|
+
import React, { useState, useEffect } from 'react';
|
|
3
3
|
import { PrivyProvider, usePrivy } from '@privy-io/react-auth';
|
|
4
4
|
import { WagmiProvider } from '@privy-io/wagmi';
|
|
5
5
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
6
|
-
import { ThirdwebProvider } from 'thirdweb/react';
|
|
7
|
-
import { createThirdwebClient } from 'thirdweb';
|
|
8
6
|
import { http } from 'viem';
|
|
9
7
|
import { arbitrumSepolia, arbitrum } from 'viem/chains';
|
|
10
8
|
import { createConfig } from 'wagmi';
|
|
@@ -155,7 +153,6 @@ function PrivyReadyGate({ children, logo, initTimeout = 10000, }) {
|
|
|
155
153
|
* return (
|
|
156
154
|
* <VarityDashboardProvider
|
|
157
155
|
* privyAppId="your-privy-app-id"
|
|
158
|
-
* thirdwebClientId="your-thirdweb-client-id"
|
|
159
156
|
* appearance={{
|
|
160
157
|
* theme: 'light',
|
|
161
158
|
* accentColor: '#2563EB',
|
|
@@ -168,46 +165,26 @@ function PrivyReadyGate({ children, logo, initTimeout = 10000, }) {
|
|
|
168
165
|
* }
|
|
169
166
|
* ```
|
|
170
167
|
*/
|
|
171
|
-
export function VarityDashboardProvider({ children, privyAppId,
|
|
168
|
+
export function VarityDashboardProvider({ children, privyAppId, appearance = {
|
|
172
169
|
theme: 'light',
|
|
173
170
|
accentColor: '#2563EB',
|
|
174
171
|
}, loginMethods = ['email', 'google', 'wallet'], initTimeout = 10000, onAddressChange, onWalletSyncChange, errorBoundary: ErrorBoundary, }) {
|
|
175
172
|
// Get config from props or environment variables
|
|
176
173
|
const appId = privyAppId || process.env.NEXT_PUBLIC_PRIVY_APP_ID;
|
|
177
|
-
const clientId = thirdwebClientId || process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID;
|
|
178
174
|
// Validate required config
|
|
179
175
|
const [configError, setConfigError] = useState(null);
|
|
180
176
|
useEffect(() => {
|
|
181
177
|
if (!appId) {
|
|
182
178
|
setConfigError('Privy App ID is required (pass privyAppId prop or set NEXT_PUBLIC_PRIVY_APP_ID)');
|
|
183
179
|
}
|
|
184
|
-
else if (!clientId) {
|
|
185
|
-
setConfigError('Thirdweb Client ID is required (pass thirdwebClientId prop or set NEXT_PUBLIC_THIRDWEB_CLIENT_ID)');
|
|
186
|
-
}
|
|
187
180
|
else {
|
|
188
181
|
setConfigError(null);
|
|
189
182
|
}
|
|
190
|
-
}, [appId
|
|
191
|
-
// Create thirdweb client
|
|
192
|
-
const thirdwebClient = useMemo(() => {
|
|
193
|
-
if (!clientId)
|
|
194
|
-
return null;
|
|
195
|
-
try {
|
|
196
|
-
return createThirdwebClient({ clientId });
|
|
197
|
-
}
|
|
198
|
-
catch (error) {
|
|
199
|
-
console.error('Failed to create thirdweb client:', error);
|
|
200
|
-
return null;
|
|
201
|
-
}
|
|
202
|
-
}, [clientId]);
|
|
183
|
+
}, [appId]);
|
|
203
184
|
// Show config error
|
|
204
185
|
if (configError) {
|
|
205
186
|
return React.createElement(ConfigErrorScreen, { error: configError });
|
|
206
187
|
}
|
|
207
|
-
// Show thirdweb error
|
|
208
|
-
if (!thirdwebClient) {
|
|
209
|
-
return React.createElement(ConfigErrorScreen, { error: "Failed to initialize thirdweb client" });
|
|
210
|
-
}
|
|
211
188
|
const content = (React.createElement(PrivyProvider, { appId: appId, config: {
|
|
212
189
|
loginMethods,
|
|
213
190
|
appearance: {
|
|
@@ -225,8 +202,7 @@ export function VarityDashboardProvider({ children, privyAppId, thirdwebClientId
|
|
|
225
202
|
React.createElement(QueryClientProvider, { client: queryClient },
|
|
226
203
|
React.createElement(WagmiProvider, { config: wagmiConfig },
|
|
227
204
|
React.createElement(PrivyReadyGate, { logo: appearance.logo, initTimeout: initTimeout },
|
|
228
|
-
React.createElement(
|
|
229
|
-
React.createElement(WalletSyncProvider, { onAddressChange: onAddressChange, onSyncStateChange: onWalletSyncChange }, children)))))));
|
|
205
|
+
React.createElement(WalletSyncProvider, { onAddressChange: onAddressChange, onSyncStateChange: onWalletSyncChange }, children))))));
|
|
230
206
|
// Wrap with error boundary if provided
|
|
231
207
|
if (ErrorBoundary) {
|
|
232
208
|
return React.createElement(ErrorBoundary, null, content);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VarityDashboardProvider.js","sourceRoot":"","sources":["../../src/providers/VarityDashboardProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAa,
|
|
1
|
+
{"version":3,"file":"VarityDashboardProvider.js","sourceRoot":"","sources":["../../src/providers/VarityDashboardProvider.tsx"],"names":[],"mappings":"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"}
|
package/dist/wallets/config.d.ts
CHANGED
|
@@ -134,9 +134,7 @@ export declare const DEFAULT_GAS_BUDGET = 10000000;
|
|
|
134
134
|
*/
|
|
135
135
|
export declare function getDefaultSmartWalletConfig(client: any): {
|
|
136
136
|
client: any;
|
|
137
|
-
chain:
|
|
138
|
-
rpc: string;
|
|
139
|
-
}>;
|
|
137
|
+
chain: import("@varity-labs/sdk/chains").Chain;
|
|
140
138
|
gasless: {
|
|
141
139
|
/**
|
|
142
140
|
* Enable gas sponsorship by default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/wallets/config.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH;;;;;;GAMG;AACH,eAAO,MAAM,6BAA6B;IACxC;;;;OAIG;;IAGH;;;;;OAKG;;IAGH;;;;OAIG;;CAEK,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB;IACjC;;;;OAIG;;IAGH;;;OAGG;;CAEK,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;IAC3B;;OAEG;;IAGH;;;OAGG;;IAGH;;OAEG;;QAED;;WAEG;;QAGH;;;WAGG;;QAGH;;;WAGG;mCACqB,MAAM,EAAE;;CAE1B,CAAC;AAEX;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB;IAC5B,gCAAgC;;IAGhC,4EAA4E;;IAG5E,2BAA2B;;IAG3B,iDAAiD;;IAGjD,yBAAyB;;CAEjB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,kBAAkB,WAAa,CAAC;AAE7C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,2BAA2B,CAAC,MAAM,EAAE,GAAG
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/wallets/config.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH;;;;;;GAMG;AACH,eAAO,MAAM,6BAA6B;IACxC;;;;OAIG;;IAGH;;;;;OAKG;;IAGH;;;;OAIG;;CAEK,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB;IACjC;;;;OAIG;;IAGH;;;OAGG;;CAEK,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;IAC3B;;OAEG;;IAGH;;;OAGG;;IAGH;;OAEG;;QAED;;WAEG;;QAGH;;;WAGG;;QAGH;;;WAGG;mCACqB,MAAM,EAAE;;CAE1B,CAAC;AAEX;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB;IAC5B,gCAAgC;;IAGhC,4EAA4E;;IAG5E,2BAA2B;;IAG3B,iDAAiD;;IAGjD,yBAAyB;;CAEjB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,kBAAkB,WAAa,CAAC;AAE7C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,2BAA2B,CAAC,MAAM,EAAE,GAAG;;;;QAlFrD;;WAEG;;QAGH;;;WAGG;;QAGH;;WAEG;;YAED;;eAEG;;YAGH;;;eAGG;;YAGH;;;eAGG;uCACqB,MAAM,EAAE;;;;;EA4DnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH;;;;GAIG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAQtC;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAK9C"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@varity-labs/ui-kit",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.12",
|
|
4
4
|
"description": "React component library for building applications with Varity - Auth, payments, dashboard components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -73,8 +73,8 @@
|
|
|
73
73
|
"wagmi": "^2.12.0"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
76
|
-
"react": "
|
|
77
|
-
"react-dom": "
|
|
76
|
+
"react": ">=18.0.0",
|
|
77
|
+
"react-dom": ">=18.0.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
80
|
"thirdweb": "^5.112.0",
|
|
@@ -110,4 +110,4 @@
|
|
|
110
110
|
"ts-jest": "^29.4.6",
|
|
111
111
|
"typescript": "^5.3.0"
|
|
112
112
|
}
|
|
113
|
-
}
|
|
113
|
+
}
|