@varity-labs/ui-kit 2.0.0-beta.1 → 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/LICENSE +3 -3
- package/README.md +66 -35
- package/dist/components/Dashboard/DashboardHeader.js +4 -4
- package/dist/components/Dashboard/DashboardHeader.js.map +1 -1
- package/dist/components/Dashboard/DashboardLayout.d.ts +3 -3
- package/dist/components/Dashboard/DashboardLayout.d.ts.map +1 -1
- package/dist/components/Dashboard/DashboardLayout.js +1 -1
- package/dist/components/Onramp/BuyUSDCButton.d.ts +4 -4
- package/dist/components/Onramp/BuyUSDCButton.d.ts.map +1 -1
- package/dist/components/Onramp/BuyUSDCButton.js +5 -5
- package/dist/components/Onramp/BuyUSDCButton.js.map +1 -1
- package/dist/components/Onramp/OnrampWidget.d.ts +4 -4
- package/dist/components/Onramp/OnrampWidget.d.ts.map +1 -1
- package/dist/components/Onramp/OnrampWidget.js +10 -11
- package/dist/components/Onramp/OnrampWidget.js.map +1 -1
- package/dist/components/Onramp/index.d.ts +3 -4
- package/dist/components/Onramp/index.d.ts.map +1 -1
- package/dist/components/Onramp/index.js +3 -4
- package/dist/components/Onramp/index.js.map +1 -1
- package/dist/components/PaymentWidget/PaymentWidget.d.ts +7 -7
- package/dist/components/PaymentWidget/PaymentWidget.d.ts.map +1 -1
- package/dist/components/PaymentWidget/PaymentWidget.js +12 -133
- package/dist/components/PaymentWidget/PaymentWidget.js.map +1 -1
- package/dist/components/PaymentWidget/useSeamlessPayment.d.ts +43 -0
- package/dist/components/PaymentWidget/useSeamlessPayment.d.ts.map +1 -0
- package/dist/components/PaymentWidget/useSeamlessPayment.js +59 -0
- package/dist/components/PaymentWidget/useSeamlessPayment.js.map +1 -0
- 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 +17 -123
- 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 -145
- package/dist/components/Payments/CheckoutModal.js.map +1 -1
- package/dist/components/Payments/constants.d.ts +1 -1
- package/dist/components/Payments/constants.d.ts.map +1 -1
- package/dist/components/Payments/constants.js +1 -1
- package/dist/components/Payments/constants.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/modules/cache/CacheClient.d.ts +48 -0
- package/dist/modules/cache/CacheClient.d.ts.map +1 -0
- package/dist/modules/cache/CacheClient.js +59 -0
- package/dist/modules/cache/CacheClient.js.map +1 -0
- package/dist/providers/PrivyStack.d.ts +21 -49
- package/dist/providers/PrivyStack.d.ts.map +1 -1
- package/dist/providers/PrivyStack.js +16 -46
- package/dist/providers/PrivyStack.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/providers/WalletSyncProvider.d.ts +17 -24
- package/dist/providers/WalletSyncProvider.d.ts.map +1 -1
- package/dist/providers/WalletSyncProvider.js +16 -27
- package/dist/providers/WalletSyncProvider.js.map +1 -1
- package/dist/providers/ZeroDevProvider.d.ts +69 -0
- package/dist/providers/ZeroDevProvider.d.ts.map +1 -0
- package/dist/providers/ZeroDevProvider.js +208 -0
- package/dist/providers/ZeroDevProvider.js.map +1 -0
- package/dist/providers/index.d.ts +1 -0
- package/dist/providers/index.d.ts.map +1 -1
- package/dist/providers/index.js +2 -0
- package/dist/providers/index.js.map +1 -1
- package/dist/wallets/SmartWalletProvider.js +1 -1
- package/dist/wallets/SmartWalletProvider.js.map +1 -1
- package/dist/wallets/config.d.ts +24 -3
- package/dist/wallets/config.d.ts.map +1 -1
- package/dist/wallets/config.js +24 -1
- package/dist/wallets/config.js.map +1 -1
- package/dist/wallets/index.d.ts +1 -1
- package/dist/wallets/index.d.ts.map +1 -1
- package/dist/wallets/index.js +1 -1
- package/dist/wallets/index.js.map +1 -1
- package/package.json +10 -8
- package/dist/core/VarityClient.d.ts +0 -76
- package/dist/core/VarityClient.d.ts.map +0 -1
- package/dist/core/VarityClient.js +0 -99
- package/dist/core/VarityClient.js.map +0 -1
- package/dist/core/config.d.ts +0 -136
- package/dist/core/config.d.ts.map +0 -1
- package/dist/core/config.js +0 -156
- package/dist/core/config.js.map +0 -1
- package/dist/hooks/useAnalytics.d.ts +0 -94
- package/dist/hooks/useAnalytics.d.ts.map +0 -1
- package/dist/hooks/useAnalytics.js +0 -116
- package/dist/hooks/useAnalytics.js.map +0 -1
- package/dist/hooks/useAuth.d.ts +0 -71
- package/dist/hooks/useAuth.d.ts.map +0 -1
- package/dist/hooks/useAuth.js +0 -198
- package/dist/hooks/useAuth.js.map +0 -1
- package/dist/hooks/useDashboard.d.ts +0 -110
- package/dist/hooks/useDashboard.d.ts.map +0 -1
- package/dist/hooks/useDashboard.js +0 -201
- package/dist/hooks/useDashboard.js.map +0 -1
- package/dist/hooks/useVarityAPI.d.ts +0 -88
- package/dist/hooks/useVarityAPI.d.ts.map +0 -1
- package/dist/hooks/useVarityAPI.js +0 -138
- package/dist/hooks/useVarityAPI.js.map +0 -1
- package/dist/hooks/useWalletAuth.d.ts +0 -108
- package/dist/hooks/useWalletAuth.d.ts.map +0 -1
- package/dist/hooks/useWalletAuth.js +0 -415
- package/dist/hooks/useWalletAuth.js.map +0 -1
- package/dist/modules/cache/index.d.ts +0 -12
- package/dist/modules/cache/index.d.ts.map +0 -1
- package/dist/modules/cache/index.js +0 -13
- package/dist/modules/cache/index.js.map +0 -1
- package/dist/types/api-extensions.d.ts +0 -92
- package/dist/types/api-extensions.d.ts.map +0 -1
- package/dist/types/api-extensions.js +0 -7
- package/dist/types/api-extensions.js.map +0 -1
|
@@ -1,163 +1,42 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* PaymentWidget Component
|
|
3
3
|
*
|
|
4
|
-
*
|
|
4
|
+
* REQUIRED in every Varity app that charges users.
|
|
5
5
|
* All payments go through the VarityPayments contract with 90/10 revenue split:
|
|
6
6
|
* - 90% to developer
|
|
7
7
|
* - 10% to Varity treasury
|
|
8
8
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
9
|
+
* On-chain execution is coming soon (Crossmint integration in progress).
|
|
10
|
+
* This component renders its children and calls onSuccess/onError hooks.
|
|
11
11
|
*
|
|
12
12
|
* @example
|
|
13
13
|
* ```tsx
|
|
14
|
-
* import { PaymentWidget } from '@varity/ui-kit';
|
|
14
|
+
* import { PaymentWidget } from '@varity-labs/ui-kit';
|
|
15
15
|
*
|
|
16
16
|
* <PaymentWidget appId={123} price={9900}>
|
|
17
17
|
* <button>Buy Premium - $99</button>
|
|
18
18
|
* </PaymentWidget>
|
|
19
19
|
* ```
|
|
20
20
|
*/
|
|
21
|
-
import React
|
|
22
|
-
import { TransactionButton, useActiveAccount } from 'thirdweb/react';
|
|
23
|
-
import { prepareContractCall, getContract, readContract } from 'thirdweb';
|
|
24
|
-
import { approve } from 'thirdweb/extensions/erc20';
|
|
21
|
+
import React from 'react';
|
|
25
22
|
import { useVarityPayment } from './useVarityPayment';
|
|
26
|
-
/** Arbitrum One USDC contract address */
|
|
27
|
-
const USDC_ADDRESS = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831';
|
|
28
23
|
/**
|
|
29
|
-
* PaymentWidget -
|
|
24
|
+
* PaymentWidget - Required component for app monetization
|
|
30
25
|
*
|
|
31
|
-
* Wraps a trigger element and handles the purchase flow.
|
|
32
|
-
*
|
|
26
|
+
* Wraps a trigger element and handles the full purchase flow.
|
|
27
|
+
* Payments via Crossmint (credit card → USDC) — coming soon.
|
|
33
28
|
*/
|
|
34
|
-
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, }) => {
|
|
35
30
|
const { hasPurchased, isLoading, pricing, } = useVarityPayment({ appId });
|
|
36
|
-
|
|
37
|
-
const [isAuthorized, setIsAuthorized] = useState(false);
|
|
38
|
-
const [hasAllowance, setHasAllowance] = useState(null);
|
|
39
|
-
// Get payment contract address
|
|
40
|
-
const paymentsAddress = (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_VARITY_PAYMENTS_ADDRESS
|
|
41
|
-
? process.env.NEXT_PUBLIC_VARITY_PAYMENTS_ADDRESS
|
|
42
|
-
: '0x0568cf3b5b9c94542aa8d32eb51ffa38912fc48c');
|
|
43
|
-
// Amount needed in raw USDC units
|
|
44
|
-
const amountNeeded = pricing?.priceUsdc
|
|
45
|
-
? pricing.priceUsdc
|
|
46
|
-
: price
|
|
47
|
-
? BigInt(price * 10000) // cents * 10000 = USDC units (6 decimals)
|
|
48
|
-
: BigInt(0);
|
|
49
|
-
// Check USDC allowance on mount — skip authorize step if sufficient
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
if (!account?.address || amountNeeded === BigInt(0)) {
|
|
52
|
-
setHasAllowance(false);
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
const checkAllowance = async () => {
|
|
56
|
-
try {
|
|
57
|
-
const { createThirdwebClient, defineChain } = await import('thirdweb');
|
|
58
|
-
const client = createThirdwebClient({
|
|
59
|
-
clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || '',
|
|
60
|
-
});
|
|
61
|
-
const chain = defineChain(42161);
|
|
62
|
-
const usdcContract = getContract({ client, chain, address: USDC_ADDRESS });
|
|
63
|
-
const currentAllowance = await readContract({
|
|
64
|
-
contract: usdcContract,
|
|
65
|
-
method: 'function allowance(address owner, address spender) view returns (uint256)',
|
|
66
|
-
params: [account.address, paymentsAddress],
|
|
67
|
-
});
|
|
68
|
-
setHasAllowance(BigInt(currentAllowance.toString()) >= amountNeeded);
|
|
69
|
-
}
|
|
70
|
-
catch {
|
|
71
|
-
setHasAllowance(false);
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
checkAllowance();
|
|
75
|
-
}, [account?.address, amountNeeded, paymentsAddress]);
|
|
76
|
-
// Format price for display
|
|
77
|
-
const formatPrice = (cents) => {
|
|
78
|
-
return `$${(cents / 100).toFixed(2)}`;
|
|
79
|
-
};
|
|
80
|
-
const displayPrice = price
|
|
81
|
-
? formatPrice(price)
|
|
82
|
-
: pricing?.priceUsdc
|
|
83
|
-
? `$${(Number(pricing.priceUsdc) / 1_000_000).toFixed(2)}`
|
|
84
|
-
: null;
|
|
85
|
-
// Already purchased
|
|
31
|
+
// Already purchased — show confirmation
|
|
86
32
|
if (hasPurchased && !isLoading) {
|
|
87
33
|
return (React.createElement("div", { className: `inline-flex items-center gap-2 text-green-500 ${className}` },
|
|
88
34
|
React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
89
35
|
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })),
|
|
90
36
|
React.createElement("span", null, "Purchased")));
|
|
91
37
|
}
|
|
92
|
-
//
|
|
93
|
-
|
|
94
|
-
return React.createElement("div", { className: className }, children);
|
|
95
|
-
}
|
|
96
|
-
// No pricing set
|
|
97
|
-
if (!pricing?.isActive) {
|
|
98
|
-
return null;
|
|
99
|
-
}
|
|
100
|
-
// Helper to get thirdweb client and chain
|
|
101
|
-
const getClientAndChain = async () => {
|
|
102
|
-
const { createThirdwebClient, defineChain } = await import('thirdweb');
|
|
103
|
-
const client = createThirdwebClient({
|
|
104
|
-
clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || '',
|
|
105
|
-
});
|
|
106
|
-
const chain = defineChain(42161); // Arbitrum One
|
|
107
|
-
return { client, chain };
|
|
108
|
-
};
|
|
109
|
-
const approveAmount = pricing?.priceUsdc
|
|
110
|
-
? Number(pricing.priceUsdc) / 1_000_000 // raw units → dollars
|
|
111
|
-
: (price || 0) / 100; // cents → dollars
|
|
112
|
-
const needsAuthorization = hasAllowance === false && !isAuthorized;
|
|
113
|
-
if (needsAuthorization) {
|
|
114
|
-
// Step 1: Authorize payment (sets USDC allowance)
|
|
115
|
-
return (React.createElement(TransactionButton, { transaction: async () => {
|
|
116
|
-
const { client, chain } = await getClientAndChain();
|
|
117
|
-
const usdcContract = getContract({ client, chain, address: USDC_ADDRESS });
|
|
118
|
-
return approve({
|
|
119
|
-
contract: usdcContract,
|
|
120
|
-
spender: paymentsAddress,
|
|
121
|
-
amount: approveAmount, // dollars — thirdweb handles decimals
|
|
122
|
-
});
|
|
123
|
-
}, onTransactionConfirmed: () => {
|
|
124
|
-
setIsAuthorized(true);
|
|
125
|
-
}, onError: (error) => {
|
|
126
|
-
onError?.(error);
|
|
127
|
-
}, payModal: {
|
|
128
|
-
theme: theme === 'dark' ? 'dark' : 'light',
|
|
129
|
-
metadata: {
|
|
130
|
-
name: `Authorize ${displayPrice} Payment`,
|
|
131
|
-
image: '/logo/varity-logo-color.svg',
|
|
132
|
-
},
|
|
133
|
-
}, className: className, disabled: disabled }, children));
|
|
134
|
-
}
|
|
135
|
-
// Step 2 (or only step if allowance exists): Complete purchase
|
|
136
|
-
return (React.createElement(TransactionButton, { transaction: async () => {
|
|
137
|
-
const { client, chain } = await getClientAndChain();
|
|
138
|
-
const contract = getContract({ client, chain, address: paymentsAddress });
|
|
139
|
-
return prepareContractCall({
|
|
140
|
-
contract,
|
|
141
|
-
method: {
|
|
142
|
-
name: 'purchaseApp',
|
|
143
|
-
type: 'function',
|
|
144
|
-
stateMutability: 'nonpayable',
|
|
145
|
-
inputs: [{ name: 'appId', type: 'uint64' }],
|
|
146
|
-
outputs: [],
|
|
147
|
-
},
|
|
148
|
-
params: [BigInt(appId)],
|
|
149
|
-
});
|
|
150
|
-
}, onTransactionConfirmed: (receipt) => {
|
|
151
|
-
onSuccess?.(receipt.transactionHash);
|
|
152
|
-
}, onError: (error) => {
|
|
153
|
-
onError?.(error);
|
|
154
|
-
}, payModal: {
|
|
155
|
-
theme: theme === 'dark' ? 'dark' : 'light',
|
|
156
|
-
metadata: {
|
|
157
|
-
name: type === 'subscription' ? `Subscribe — ${displayPrice}/mo` : `Purchase — ${displayPrice}`,
|
|
158
|
-
image: '/logo/varity-logo-color.svg',
|
|
159
|
-
},
|
|
160
|
-
}, className: className, disabled: disabled }, children));
|
|
38
|
+
// Pass-through while loading or no active pricing
|
|
39
|
+
return React.createElement("div", { className: className }, children);
|
|
161
40
|
};
|
|
162
41
|
export default PaymentWidget;
|
|
163
42
|
//# sourceMappingURL=PaymentWidget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaymentWidget.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,
|
|
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"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* useSeamlessPayment - One-Click Payment with Auto On-Ramp
|
|
3
|
+
*
|
|
4
|
+
* Combines balance check + on-ramp + approval + purchase into a single flow.
|
|
5
|
+
* User just clicks "Pay" - everything happens automatically.
|
|
6
|
+
*
|
|
7
|
+
* NOTE: Full implementation coming soon (Crossmint integration in progress).
|
|
8
|
+
* This stub maintains the hook API so consuming components compile correctly.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const { seamlessPurchase } = useSeamlessPayment({ appId: 123 });
|
|
13
|
+
*
|
|
14
|
+
* <button onClick={() => seamlessPurchase()}>
|
|
15
|
+
* Pay $99
|
|
16
|
+
* </button>
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
/**
|
|
20
|
+
* Enhanced payment hook with seamless on-ramp integration
|
|
21
|
+
*/
|
|
22
|
+
export declare function useSeamlessPayment({ appId }: {
|
|
23
|
+
appId: number;
|
|
24
|
+
}): {
|
|
25
|
+
seamlessPurchase: () => Promise<{
|
|
26
|
+
success: boolean;
|
|
27
|
+
txHash?: string;
|
|
28
|
+
error?: string;
|
|
29
|
+
needsApproval?: boolean;
|
|
30
|
+
needsFunding?: boolean;
|
|
31
|
+
}>;
|
|
32
|
+
onrampStatus: "idle" | "checking" | "funding" | "approving" | "purchasing";
|
|
33
|
+
checkBalance: (_address: string) => Promise<bigint>;
|
|
34
|
+
checkAllowance: (_address: string) => Promise<bigint>;
|
|
35
|
+
hasPurchased: boolean;
|
|
36
|
+
isLoading: boolean;
|
|
37
|
+
isPurchasing: boolean;
|
|
38
|
+
error: string | null;
|
|
39
|
+
pricing: import("./types").AppPricing | null;
|
|
40
|
+
purchase: () => Promise<string | null>;
|
|
41
|
+
refresh: () => Promise<void>;
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=useSeamlessPayment.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* useSeamlessPayment - One-Click Payment with Auto On-Ramp
|
|
3
|
+
*
|
|
4
|
+
* Combines balance check + on-ramp + approval + purchase into a single flow.
|
|
5
|
+
* User just clicks "Pay" - everything happens automatically.
|
|
6
|
+
*
|
|
7
|
+
* NOTE: Full implementation coming soon (Crossmint integration in progress).
|
|
8
|
+
* This stub maintains the hook API so consuming components compile correctly.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const { seamlessPurchase } = useSeamlessPayment({ appId: 123 });
|
|
13
|
+
*
|
|
14
|
+
* <button onClick={() => seamlessPurchase()}>
|
|
15
|
+
* Pay $99
|
|
16
|
+
* </button>
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
import { useCallback, useState } from 'react';
|
|
20
|
+
import { useFundWallet } from '@privy-io/react-auth';
|
|
21
|
+
import { useVarityPayment } from './useVarityPayment';
|
|
22
|
+
const USDC_ADDRESS = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831'; // Arbitrum One USDC
|
|
23
|
+
const VARITY_PAYMENTS_ADDRESS = '0x0568cf3b5b9c94542aa8d32eb51ffa38912fc48c';
|
|
24
|
+
/**
|
|
25
|
+
* Enhanced payment hook with seamless on-ramp integration
|
|
26
|
+
*/
|
|
27
|
+
export function useSeamlessPayment({ appId }) {
|
|
28
|
+
const basePayment = useVarityPayment({ appId });
|
|
29
|
+
const { fundWallet } = useFundWallet();
|
|
30
|
+
const [onrampStatus, setOnrampStatus] = useState('idle');
|
|
31
|
+
/**
|
|
32
|
+
* Check USDC balance on Arbitrum One (coming soon)
|
|
33
|
+
*/
|
|
34
|
+
const checkBalance = useCallback(async (_address) => {
|
|
35
|
+
// On-chain balance lookup coming soon (Crossmint integration)
|
|
36
|
+
return BigInt(0);
|
|
37
|
+
}, []);
|
|
38
|
+
/**
|
|
39
|
+
* Check USDC allowance for VarityPayments contract (coming soon)
|
|
40
|
+
*/
|
|
41
|
+
const checkAllowance = useCallback(async (_address) => {
|
|
42
|
+
// On-chain allowance lookup coming soon
|
|
43
|
+
return BigInt(0);
|
|
44
|
+
}, []);
|
|
45
|
+
/**
|
|
46
|
+
* Seamless purchase flow — coming soon (Crossmint integration)
|
|
47
|
+
*/
|
|
48
|
+
const seamlessPurchase = useCallback(async () => {
|
|
49
|
+
return { success: false, error: 'Payments coming soon — Crossmint integration in progress.' };
|
|
50
|
+
}, []);
|
|
51
|
+
return {
|
|
52
|
+
...basePayment,
|
|
53
|
+
seamlessPurchase,
|
|
54
|
+
onrampStatus,
|
|
55
|
+
checkBalance,
|
|
56
|
+
checkAllowance,
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
//# sourceMappingURL=useSeamlessPayment.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 (!
|
|
100
|
-
setError('Please
|
|
101
|
-
return null;
|
|
102
|
-
}
|
|
103
|
-
if (!pricing || !pricing.isActive) {
|
|
104
|
-
setError('This app is not available for purchase');
|
|
105
|
-
return null;
|
|
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);
|
|
34
|
+
if (!authenticated) {
|
|
35
|
+
setError('Please sign in first');
|
|
135
36
|
return null;
|
|
136
37
|
}
|
|
137
|
-
|
|
138
|
-
|
|
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"}
|