@b3dotfun/sdk 0.1.65 → 0.1.66-alpha.1
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/cjs/anyspend/react/components/AnySpend.d.ts +2 -0
- package/dist/cjs/anyspend/react/components/AnySpend.js +7 -16
- package/dist/cjs/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts +6 -1
- package/dist/cjs/anyspend/react/components/AnySpendCollectorClubPurchase.js +151 -22
- package/dist/cjs/anyspend/react/components/AnySpendCustom.js +4 -50
- package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.d.ts +2 -0
- package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.js +4 -2
- package/dist/cjs/anyspend/react/components/AnySpendDeposit.d.ts +3 -1
- package/dist/cjs/anyspend/react/components/AnySpendDeposit.js +2 -2
- package/dist/cjs/anyspend/react/components/AnySpendWorkflowTrigger.d.ts +31 -0
- package/dist/cjs/anyspend/react/components/AnySpendWorkflowTrigger.js +14 -0
- package/dist/cjs/anyspend/react/components/QRDeposit.js +5 -13
- package/dist/cjs/anyspend/react/components/ccShopAbi.d.ts +113 -0
- package/dist/cjs/anyspend/react/components/ccShopAbi.js +63 -0
- package/dist/cjs/anyspend/react/components/common/CryptoPaySection.d.ts +1 -3
- package/dist/cjs/anyspend/react/components/common/CryptoPaySection.js +3 -3
- package/dist/cjs/anyspend/react/components/common/OrderTokenAmount.d.ts +1 -4
- package/dist/cjs/anyspend/react/components/common/OrderTokenAmount.js +3 -57
- package/dist/cjs/anyspend/react/components/common/PaySection.js +1 -1
- package/dist/cjs/anyspend/react/components/index.d.ts +2 -0
- package/dist/cjs/anyspend/react/components/index.js +3 -1
- package/dist/cjs/anyspend/react/hooks/index.d.ts +1 -0
- package/dist/cjs/anyspend/react/hooks/index.js +1 -0
- package/dist/cjs/anyspend/react/hooks/useAnyspendCreateOnrampOrder.js +1 -0
- package/dist/cjs/anyspend/react/hooks/useAnyspendCreateOrder.d.ts +1 -0
- package/dist/cjs/anyspend/react/hooks/useAnyspendCreateOrder.js +1 -0
- package/dist/cjs/anyspend/react/hooks/useOnOrderSuccess.d.ts +10 -0
- package/dist/cjs/anyspend/react/hooks/useOnOrderSuccess.js +27 -0
- package/dist/cjs/anyspend/services/anyspend.d.ts +2 -1
- package/dist/cjs/anyspend/services/anyspend.js +2 -1
- package/dist/cjs/anyspend/utils/chain.d.ts +1 -1
- package/dist/cjs/anyspend/utils/chain.js +72 -62
- package/dist/cjs/app.shared.js +8 -0
- package/dist/cjs/global-account/react/components/B3DynamicModal.js +4 -0
- package/dist/cjs/global-account/react/hooks/useFirstEOA.d.ts +4 -4
- package/dist/cjs/global-account/react/hooks/useUserQuery.js +10 -0
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +37 -1
- package/dist/cjs/global-account/react/stores/userStore.js +1 -0
- package/dist/esm/anyspend/react/components/AnySpend.d.ts +2 -0
- package/dist/esm/anyspend/react/components/AnySpend.js +7 -16
- package/dist/esm/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts +6 -1
- package/dist/esm/anyspend/react/components/AnySpendCollectorClubPurchase.js +152 -23
- package/dist/esm/anyspend/react/components/AnySpendCustom.js +4 -17
- package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.d.ts +2 -0
- package/dist/esm/anyspend/react/components/AnySpendCustomExactIn.js +4 -2
- package/dist/esm/anyspend/react/components/AnySpendDeposit.d.ts +3 -1
- package/dist/esm/anyspend/react/components/AnySpendDeposit.js +2 -2
- package/dist/esm/anyspend/react/components/AnySpendWorkflowTrigger.d.ts +31 -0
- package/dist/esm/anyspend/react/components/AnySpendWorkflowTrigger.js +11 -0
- package/dist/esm/anyspend/react/components/QRDeposit.js +6 -14
- package/dist/esm/anyspend/react/components/ccShopAbi.d.ts +113 -0
- package/dist/esm/anyspend/react/components/ccShopAbi.js +60 -0
- package/dist/esm/anyspend/react/components/common/CryptoPaySection.d.ts +1 -3
- package/dist/esm/anyspend/react/components/common/CryptoPaySection.js +3 -3
- package/dist/esm/anyspend/react/components/common/OrderTokenAmount.d.ts +1 -4
- package/dist/esm/anyspend/react/components/common/OrderTokenAmount.js +2 -56
- package/dist/esm/anyspend/react/components/common/PaySection.js +1 -1
- package/dist/esm/anyspend/react/components/index.d.ts +2 -0
- package/dist/esm/anyspend/react/components/index.js +1 -0
- package/dist/esm/anyspend/react/hooks/index.d.ts +1 -0
- package/dist/esm/anyspend/react/hooks/index.js +1 -0
- package/dist/esm/anyspend/react/hooks/useAnyspendCreateOnrampOrder.js +1 -0
- package/dist/esm/anyspend/react/hooks/useAnyspendCreateOrder.d.ts +1 -0
- package/dist/esm/anyspend/react/hooks/useAnyspendCreateOrder.js +1 -0
- package/dist/esm/anyspend/react/hooks/useOnOrderSuccess.d.ts +10 -0
- package/dist/esm/anyspend/react/hooks/useOnOrderSuccess.js +24 -0
- package/dist/esm/anyspend/services/anyspend.d.ts +2 -1
- package/dist/esm/anyspend/services/anyspend.js +2 -1
- package/dist/esm/anyspend/utils/chain.d.ts +1 -1
- package/dist/esm/anyspend/utils/chain.js +72 -62
- package/dist/esm/app.shared.js +8 -0
- package/dist/esm/global-account/react/components/B3DynamicModal.js +4 -0
- package/dist/esm/global-account/react/hooks/useFirstEOA.d.ts +4 -4
- package/dist/esm/global-account/react/hooks/useUserQuery.js +11 -1
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +37 -1
- package/dist/esm/global-account/react/stores/userStore.js +1 -0
- package/dist/types/anyspend/react/components/AnySpend.d.ts +2 -0
- package/dist/types/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts +6 -1
- package/dist/types/anyspend/react/components/AnySpendCustomExactIn.d.ts +2 -0
- package/dist/types/anyspend/react/components/AnySpendDeposit.d.ts +3 -1
- package/dist/types/anyspend/react/components/AnySpendWorkflowTrigger.d.ts +31 -0
- package/dist/types/anyspend/react/components/ccShopAbi.d.ts +113 -0
- package/dist/types/anyspend/react/components/common/CryptoPaySection.d.ts +1 -3
- package/dist/types/anyspend/react/components/common/OrderTokenAmount.d.ts +1 -4
- package/dist/types/anyspend/react/components/index.d.ts +2 -0
- package/dist/types/anyspend/react/hooks/index.d.ts +1 -0
- package/dist/types/anyspend/react/hooks/useAnyspendCreateOrder.d.ts +1 -0
- package/dist/types/anyspend/react/hooks/useOnOrderSuccess.d.ts +10 -0
- package/dist/types/anyspend/services/anyspend.d.ts +2 -1
- package/dist/types/anyspend/utils/chain.d.ts +1 -1
- package/dist/types/global-account/react/hooks/useFirstEOA.d.ts +4 -4
- package/dist/types/global-account/react/stores/useModalStore.d.ts +37 -1
- package/package.json +1 -1
- package/src/anyspend/README.md +14 -0
- package/src/anyspend/docs/checkout-sessions.md +228 -0
- package/src/anyspend/docs/components.md +26 -0
- package/src/anyspend/docs/examples.md +58 -0
- package/src/anyspend/docs/hooks.md +32 -0
- package/src/anyspend/llms.txt +185 -0
- package/src/anyspend/react/components/AnySpend.tsx +9 -17
- package/src/anyspend/react/components/AnySpendCollectorClubPurchase.tsx +206 -22
- package/src/anyspend/react/components/AnySpendCustom.tsx +3 -18
- package/src/anyspend/react/components/AnySpendCustomExactIn.tsx +5 -1
- package/src/anyspend/react/components/AnySpendDeposit.tsx +5 -0
- package/src/anyspend/react/components/AnySpendWorkflowTrigger.tsx +73 -0
- package/src/anyspend/react/components/QRDeposit.tsx +19 -15
- package/src/anyspend/react/components/ccShopAbi.ts +64 -0
- package/src/anyspend/react/components/common/CryptoPaySection.tsx +0 -5
- package/src/anyspend/react/components/common/OrderTokenAmount.tsx +1 -70
- package/src/anyspend/react/components/common/PaySection.tsx +0 -1
- package/src/anyspend/react/components/index.ts +2 -0
- package/src/anyspend/react/hooks/index.ts +1 -0
- package/src/anyspend/react/hooks/useAnyspendCreateOnrampOrder.ts +1 -0
- package/src/anyspend/react/hooks/useAnyspendCreateOrder.ts +2 -0
- package/src/anyspend/react/hooks/useOnOrderSuccess.ts +36 -0
- package/src/anyspend/services/anyspend.ts +3 -0
- package/src/anyspend/utils/chain.ts +81 -65
- package/src/app.shared.ts +11 -0
- package/src/global-account/react/components/B3DynamicModal.tsx +4 -0
- package/src/global-account/react/hooks/useUserQuery.ts +12 -1
- package/src/global-account/react/stores/useModalStore.ts +39 -2
- package/src/global-account/react/stores/userStore.ts +1 -0
|
@@ -26,27 +26,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
28
|
import { USDC_BASE } from "../../../anyspend/constants/index.js";
|
|
29
|
+
import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
|
|
29
30
|
import { formatUnits } from "../../../shared/utils/number.js";
|
|
30
|
-
import { useMemo } from "react";
|
|
31
|
-
import { encodeFunctionData } from "viem";
|
|
31
|
+
import { useEffect, useMemo, useState } from "react";
|
|
32
|
+
import { createPublicClient, encodeFunctionData, http } from "viem";
|
|
33
|
+
import { base } from "viem/chains";
|
|
32
34
|
import { AnySpendCustom } from "./AnySpendCustom.js";
|
|
35
|
+
import { BUY_PACKS_FOR_ABI, BUY_PACKS_FOR_WITH_DISCOUNT_ABI, GET_DISCOUNT_CODE_ABI, IS_DISCOUNT_CODE_VALID_FOR_PACK_ABI, } from "./ccShopAbi.js";
|
|
33
36
|
// Collector Club Shop contract addresses on Base
|
|
34
37
|
const CC_SHOP_ADDRESS = "0x47366E64E4917dd4DdC04Fb9DC507c1dD2b87294";
|
|
35
38
|
const CC_SHOP_ADDRESS_STAGING = "0x8b751143342ac41eB965E55430e3F7Adf6BE01fA";
|
|
36
39
|
const BASE_CHAIN_ID = 8453;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
{ internalType: "uint256", name: "amount", type: "uint256" },
|
|
43
|
-
],
|
|
44
|
-
name: "buyPacksFor",
|
|
45
|
-
outputs: [],
|
|
46
|
-
stateMutability: "nonpayable",
|
|
47
|
-
type: "function",
|
|
48
|
-
};
|
|
49
|
-
export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = USDC_BASE, recipientAddress, spenderAddress, isStaging = false, onSuccess, header, showRecipient = true, vendingMachineId, packType, forceFiatPayment, }) {
|
|
40
|
+
const basePublicClient = createPublicClient({
|
|
41
|
+
chain: base,
|
|
42
|
+
transport: http(PUBLIC_BASE_RPC_URL),
|
|
43
|
+
});
|
|
44
|
+
export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = USDC_BASE, recipientAddress, spenderAddress, isStaging = false, onSuccess, header, showRecipient = true, vendingMachineId, packType, forceFiatPayment, discountCode, }) {
|
|
50
45
|
const ccShopAddress = isStaging ? CC_SHOP_ADDRESS_STAGING : CC_SHOP_ADDRESS;
|
|
51
46
|
// Calculate total amount needed (pricePerPack * packAmount)
|
|
52
47
|
const totalAmount = useMemo(() => {
|
|
@@ -58,15 +53,130 @@ export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activ
|
|
|
58
53
|
return "0";
|
|
59
54
|
}
|
|
60
55
|
}, [pricePerPack, packAmount]);
|
|
61
|
-
//
|
|
56
|
+
// Discount code validation state
|
|
57
|
+
const [discountInfo, setDiscountInfo] = useState({
|
|
58
|
+
isValid: false,
|
|
59
|
+
discountAmount: BigInt(0),
|
|
60
|
+
minPurchaseAmount: BigInt(0),
|
|
61
|
+
isLoading: false,
|
|
62
|
+
error: null,
|
|
63
|
+
});
|
|
64
|
+
// Validate discount code on-chain when provided
|
|
65
|
+
useEffect(() => {
|
|
66
|
+
if (!discountCode) {
|
|
67
|
+
setDiscountInfo({
|
|
68
|
+
isValid: false,
|
|
69
|
+
discountAmount: BigInt(0),
|
|
70
|
+
minPurchaseAmount: BigInt(0),
|
|
71
|
+
isLoading: false,
|
|
72
|
+
error: null,
|
|
73
|
+
});
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
let cancelled = false;
|
|
77
|
+
const validateDiscount = async () => {
|
|
78
|
+
setDiscountInfo(prev => ({ ...prev, isLoading: true, error: null }));
|
|
79
|
+
try {
|
|
80
|
+
// Validate against specific pack and fetch full details in parallel
|
|
81
|
+
const [validForPack, codeDetails] = await Promise.all([
|
|
82
|
+
basePublicClient.readContract({
|
|
83
|
+
address: ccShopAddress,
|
|
84
|
+
abi: [IS_DISCOUNT_CODE_VALID_FOR_PACK_ABI],
|
|
85
|
+
functionName: "isDiscountCodeValidForPack",
|
|
86
|
+
args: [discountCode, BigInt(packId)],
|
|
87
|
+
}),
|
|
88
|
+
basePublicClient.readContract({
|
|
89
|
+
address: ccShopAddress,
|
|
90
|
+
abi: [GET_DISCOUNT_CODE_ABI],
|
|
91
|
+
functionName: "getDiscountCode",
|
|
92
|
+
args: [discountCode],
|
|
93
|
+
}),
|
|
94
|
+
]);
|
|
95
|
+
if (cancelled)
|
|
96
|
+
return;
|
|
97
|
+
const [isValid, discountAmount] = validForPack;
|
|
98
|
+
const { minPurchaseAmount, packId: restrictedPackId, exists } = codeDetails;
|
|
99
|
+
if (!exists) {
|
|
100
|
+
setDiscountInfo({
|
|
101
|
+
isValid: false,
|
|
102
|
+
discountAmount: BigInt(0),
|
|
103
|
+
minPurchaseAmount: BigInt(0),
|
|
104
|
+
isLoading: false,
|
|
105
|
+
error: "Discount code does not exist",
|
|
106
|
+
});
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
if (!isValid) {
|
|
110
|
+
// Provide specific error based on code details
|
|
111
|
+
if (restrictedPackId !== BigInt(0) && restrictedPackId !== BigInt(packId)) {
|
|
112
|
+
setDiscountInfo({
|
|
113
|
+
isValid: false,
|
|
114
|
+
discountAmount: BigInt(0),
|
|
115
|
+
minPurchaseAmount: BigInt(0),
|
|
116
|
+
isLoading: false,
|
|
117
|
+
error: "Discount code is not valid for this pack",
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
else {
|
|
121
|
+
setDiscountInfo({
|
|
122
|
+
isValid: false,
|
|
123
|
+
discountAmount: BigInt(0),
|
|
124
|
+
minPurchaseAmount: BigInt(0),
|
|
125
|
+
isLoading: false,
|
|
126
|
+
error: "Invalid or expired discount code",
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
setDiscountInfo({ isValid: true, discountAmount, minPurchaseAmount, isLoading: false, error: null });
|
|
132
|
+
}
|
|
133
|
+
catch (error) {
|
|
134
|
+
if (cancelled)
|
|
135
|
+
return;
|
|
136
|
+
console.error("Failed to validate discount code", { discountCode, error });
|
|
137
|
+
setDiscountInfo({
|
|
138
|
+
isValid: false,
|
|
139
|
+
discountAmount: BigInt(0),
|
|
140
|
+
minPurchaseAmount: BigInt(0),
|
|
141
|
+
isLoading: false,
|
|
142
|
+
error: "Failed to validate discount code",
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
validateDiscount();
|
|
147
|
+
return () => {
|
|
148
|
+
cancelled = true;
|
|
149
|
+
};
|
|
150
|
+
}, [discountCode, ccShopAddress, packId]);
|
|
151
|
+
// Calculate effective dstAmount after discount
|
|
152
|
+
const effectiveDstAmount = useMemo(() => {
|
|
153
|
+
if (!discountCode || !discountInfo.isValid || discountInfo.discountAmount === BigInt(0)) {
|
|
154
|
+
return totalAmount;
|
|
155
|
+
}
|
|
156
|
+
const total = BigInt(totalAmount);
|
|
157
|
+
const discount = discountInfo.discountAmount;
|
|
158
|
+
if (discount >= total) {
|
|
159
|
+
console.error("Discount exceeds total price", { totalAmount, discountAmount: discount.toString() });
|
|
160
|
+
return "0";
|
|
161
|
+
}
|
|
162
|
+
return (total - discount).toString();
|
|
163
|
+
}, [totalAmount, discountCode, discountInfo.isValid, discountInfo.discountAmount]);
|
|
164
|
+
// Calculate fiat amount (effectiveDstAmount in USD, assuming USDC with 6 decimals)
|
|
62
165
|
const srcFiatAmount = useMemo(() => {
|
|
63
|
-
if (!
|
|
166
|
+
if (!effectiveDstAmount || effectiveDstAmount === "0")
|
|
64
167
|
return "0";
|
|
65
|
-
return formatUnits(
|
|
66
|
-
}, [
|
|
67
|
-
// Encode the
|
|
168
|
+
return formatUnits(effectiveDstAmount, USDC_BASE.decimals);
|
|
169
|
+
}, [effectiveDstAmount]);
|
|
170
|
+
// Encode the contract function call (with or without discount)
|
|
68
171
|
const encodedData = useMemo(() => {
|
|
69
172
|
try {
|
|
173
|
+
if (discountCode && discountInfo.isValid) {
|
|
174
|
+
return encodeFunctionData({
|
|
175
|
+
abi: [BUY_PACKS_FOR_WITH_DISCOUNT_ABI],
|
|
176
|
+
functionName: "buyPacksForWithDiscount",
|
|
177
|
+
args: [recipientAddress, BigInt(packId), BigInt(packAmount), discountCode],
|
|
178
|
+
});
|
|
179
|
+
}
|
|
70
180
|
return encodeFunctionData({
|
|
71
181
|
abi: [BUY_PACKS_FOR_ABI],
|
|
72
182
|
functionName: "buyPacksFor",
|
|
@@ -74,17 +184,36 @@ export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activ
|
|
|
74
184
|
});
|
|
75
185
|
}
|
|
76
186
|
catch (error) {
|
|
77
|
-
console.error("Failed to encode function data", { recipientAddress, packId, packAmount, error });
|
|
187
|
+
console.error("Failed to encode function data", { recipientAddress, packId, packAmount, discountCode, error });
|
|
78
188
|
return "0x";
|
|
79
189
|
}
|
|
80
|
-
}, [recipientAddress, packId, packAmount]);
|
|
190
|
+
}, [recipientAddress, packId, packAmount, discountCode, discountInfo.isValid]);
|
|
81
191
|
// Default header if not provided
|
|
82
192
|
const defaultHeader = () => (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: "Buy Collector Club Packs" }), _jsxs("p", { className: "text-as-secondary text-sm", children: ["Purchase ", packAmount, " pack", packAmount !== 1 ? "s" : "", " using any token"] })] }) }));
|
|
83
|
-
|
|
193
|
+
// Don't render AnySpendCustom while discount is being validated (avoids showing wrong price)
|
|
194
|
+
if (discountCode && discountInfo.isLoading) {
|
|
195
|
+
return (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("p", { className: "text-as-secondary text-sm", children: "Validating discount code..." }) }));
|
|
196
|
+
}
|
|
197
|
+
if (discountCode && discountInfo.error) {
|
|
198
|
+
return (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("p", { className: "text-sm text-red-500", children: discountInfo.error }) }));
|
|
199
|
+
}
|
|
200
|
+
if (discountCode &&
|
|
201
|
+
discountInfo.isValid &&
|
|
202
|
+
discountInfo.minPurchaseAmount > BigInt(0) &&
|
|
203
|
+
BigInt(packAmount) < discountInfo.minPurchaseAmount) {
|
|
204
|
+
return (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("p", { className: "text-sm text-red-500", children: ["Minimum purchase of ", discountInfo.minPurchaseAmount.toString(), " pack", discountInfo.minPurchaseAmount > BigInt(1) ? "s" : "", " required for this discount code"] }) }));
|
|
205
|
+
}
|
|
206
|
+
if (discountCode && discountInfo.isValid && effectiveDstAmount === "0") {
|
|
207
|
+
return (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("p", { className: "text-sm text-red-500", children: "Discount exceeds total price" }) }));
|
|
208
|
+
}
|
|
209
|
+
return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, activeTab: activeTab, recipientAddress: recipientAddress, spenderAddress: spenderAddress ?? ccShopAddress, orderType: "custom", dstChainId: BASE_CHAIN_ID, dstToken: paymentToken, dstAmount: effectiveDstAmount, contractAddress: ccShopAddress, encodedData: encodedData, metadata: {
|
|
84
210
|
packId,
|
|
85
211
|
packAmount,
|
|
86
212
|
pricePerPack,
|
|
87
213
|
vendingMachineId,
|
|
88
214
|
packType,
|
|
215
|
+
...(discountCode && discountInfo.isValid
|
|
216
|
+
? { discountCode, discountAmount: discountInfo.discountAmount.toString() }
|
|
217
|
+
: {}),
|
|
89
218
|
}, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient, srcFiatAmount: srcFiatAmount, forceFiatPayment: forceFiatPayment }));
|
|
90
219
|
}
|
|
@@ -11,9 +11,10 @@ import { simpleHashChainToChainName } from "../../../shared/utils/simplehash.js"
|
|
|
11
11
|
import invariant from "invariant";
|
|
12
12
|
import { ChevronRight, ChevronRightCircle, Info, Loader2 } from "lucide-react";
|
|
13
13
|
import { motion } from "motion/react";
|
|
14
|
-
import
|
|
14
|
+
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
15
15
|
import { base } from "viem/chains";
|
|
16
16
|
import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState.js";
|
|
17
|
+
import { useOnOrderSuccess } from "../hooks/useOnOrderSuccess.js";
|
|
17
18
|
import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
|
|
18
19
|
import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
|
|
19
20
|
import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
|
|
@@ -126,8 +127,6 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
126
127
|
globalAddress: currentWallet.address,
|
|
127
128
|
});
|
|
128
129
|
const [orderId, setOrderId] = useState(loadOrder);
|
|
129
|
-
// Track if onSuccess has been called for the current order
|
|
130
|
-
const onSuccessCalled = React.useRef(false);
|
|
131
130
|
const [srcChainId, setSrcChainId] = useState(base.id);
|
|
132
131
|
// Get token list for token balance check
|
|
133
132
|
const chainName = useMemo(() => simpleHashChainToChainName(srcChainId), [srcChainId]);
|
|
@@ -265,20 +264,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
265
264
|
}, [activeTab, srcFiatAmountForGeoCheck]);
|
|
266
265
|
// Get geo data and onramp options (use srcFiatAmountForGeoCheck to check availability regardless of activeTab)
|
|
267
266
|
const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support } = useGeoOnrampOptions(srcFiatAmountForGeoCheck);
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
console.log("Calling onSuccess");
|
|
271
|
-
const relayTxs = oat?.data?.relayTxs;
|
|
272
|
-
const lastRelayTxHash = relayTxs?.[relayTxs.length - 1]?.txHash;
|
|
273
|
-
const txHash = oat?.data?.executeTx?.txHash || lastRelayTxHash;
|
|
274
|
-
onSuccess?.(txHash);
|
|
275
|
-
onSuccessCalled.current = true;
|
|
276
|
-
}
|
|
277
|
-
}, [oat?.data?.order.status, oat?.data?.executeTx?.txHash, oat?.data?.relayTxs, onSuccess]);
|
|
278
|
-
// Reset flag when orderId changes
|
|
279
|
-
useEffect(() => {
|
|
280
|
-
onSuccessCalled.current = false;
|
|
281
|
-
}, [orderId]);
|
|
267
|
+
// Call onSuccess when order is executed
|
|
268
|
+
useOnOrderSuccess({ orderData: oat, orderId, onSuccess });
|
|
282
269
|
const { createOrder: createRegularOrder, isCreatingOrder: isCreatingRegularOrder } = useAnyspendCreateOrder({
|
|
283
270
|
onSuccess: data => {
|
|
284
271
|
setOrderId(data.data.id);
|
|
@@ -44,6 +44,8 @@ export interface AnySpendCustomExactInProps {
|
|
|
44
44
|
classes?: AnySpendCustomExactInClasses;
|
|
45
45
|
/** When true, allows direct transfer without swap if source and destination token/chain are the same */
|
|
46
46
|
allowDirectTransfer?: boolean;
|
|
47
|
+
/** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
|
|
48
|
+
callbackMetadata?: Record<string, unknown>;
|
|
47
49
|
}
|
|
48
50
|
export declare function AnySpendCustomExactIn(props: AnySpendCustomExactInProps): import("react/jsx-runtime").JSX.Element;
|
|
49
51
|
export {};
|
|
@@ -29,7 +29,7 @@ export function AnySpendCustomExactIn(props) {
|
|
|
29
29
|
const fingerprintConfig = getFingerprintConfig();
|
|
30
30
|
return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomExactInInner, { ...props }) }));
|
|
31
31
|
}
|
|
32
|
-
function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, destinationTokenAmount, orderType = "custom_exact_in", minDestinationAmount, header, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, }) {
|
|
32
|
+
function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, destinationTokenAmount, orderType = "custom_exact_in", minDestinationAmount, header, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, callbackMetadata, }) {
|
|
33
33
|
const actionLabel = customExactInConfig?.action ?? "Custom Execution";
|
|
34
34
|
const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
|
|
35
35
|
const DESTINATION_TOKEN_DETAILS = {
|
|
@@ -222,7 +222,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
222
222
|
};
|
|
223
223
|
const headerContent = header ? (header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote })) : (_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsxs("div", { children: [_jsx("h1", { className: "text-as-primary text-xl font-bold", children: actionLabel }), _jsx("p", { className: "text-as-secondary text-sm", children: "Pay from any token to execute a custom exact-in transaction." })] }) }));
|
|
224
224
|
const mainView = (_jsxs("div", { className: classes?.container ||
|
|
225
|
-
"anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect
|
|
225
|
+
"anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [headerContent, _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: selectedRecipientOrDefault, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL), onShowFeeDetail: () => setActivePanel(PanelView.FEE_DETAIL), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: classes?.swapDirectionButton ||
|
|
226
226
|
"swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: false, effectiveRecipientAddress: selectedRecipientOrDefault, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: isSrcInputDirty && !destinationTokenAmount ? dstAmount : dstAmountInput, dstToken: selectedDstToken, dstTokenSymbol: DESTINATION_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: DESTINATION_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
|
|
227
227
|
setIsSrcInputDirty(false);
|
|
228
228
|
setDstAmountInput(value);
|
|
@@ -278,6 +278,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
278
278
|
? normalizeAddress(customExactInConfig.spenderAddress)
|
|
279
279
|
: undefined,
|
|
280
280
|
},
|
|
281
|
+
callbackMetadata,
|
|
281
282
|
});
|
|
282
283
|
}
|
|
283
284
|
else {
|
|
@@ -295,6 +296,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
|
|
|
295
296
|
expectedDstAmount: expectedDstAmountRaw,
|
|
296
297
|
creatorAddress: globalAddress,
|
|
297
298
|
payload,
|
|
299
|
+
callbackMetadata,
|
|
298
300
|
});
|
|
299
301
|
}
|
|
300
302
|
}
|
|
@@ -101,6 +101,8 @@ export interface AnySpendDepositProps {
|
|
|
101
101
|
allowDirectTransfer?: boolean;
|
|
102
102
|
/** Fixed destination token amount (in wei/smallest unit). When provided, user cannot change the amount. */
|
|
103
103
|
destinationTokenAmount?: string;
|
|
104
|
+
/** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
|
|
105
|
+
callbackMetadata?: Record<string, unknown>;
|
|
104
106
|
}
|
|
105
107
|
/**
|
|
106
108
|
* A flexible deposit component that wraps AnySpendCustomExactIn with optional chain selection.
|
|
@@ -137,4 +139,4 @@ export interface AnySpendDepositProps {
|
|
|
137
139
|
* onSuccess={(amount) => console.log(`Deposited ${amount}`)}
|
|
138
140
|
* />
|
|
139
141
|
*/
|
|
140
|
-
export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, classes, allowDirectTransfer, destinationTokenAmount, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;
|
|
142
|
+
export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, classes, allowDirectTransfer, destinationTokenAmount, callbackMetadata, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -94,7 +94,7 @@ function ChainIcon({ chainId, className }) {
|
|
|
94
94
|
* onSuccess={(amount) => console.log(`Deposited ${amount}`)}
|
|
95
95
|
* />
|
|
96
96
|
*/
|
|
97
|
-
export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, destinationTokenAmount, }) {
|
|
97
|
+
export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, }) {
|
|
98
98
|
// Extract deposit-specific classes for convenience
|
|
99
99
|
const depositClasses = classes?.deposit;
|
|
100
100
|
const { connectedEOAWallet } = useAccountWallet();
|
|
@@ -206,5 +206,5 @@ export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, p
|
|
|
206
206
|
// Deposit view
|
|
207
207
|
return (_jsxs("div", { className: depositClasses?.form || "anyspend-deposit anyspend-deposit-form relative", children: [shouldShowChainSelection && (_jsxs("button", { onClick: handleBack, className: depositClasses?.backButton ||
|
|
208
208
|
"anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1", children: [_jsx("svg", { className: depositClasses?.backIcon || "anyspend-deposit-back-icon h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), _jsx("span", { className: depositClasses?.backText || "anyspend-deposit-back-text text-sm", children: "Back" })] })), onClose && (_jsx("button", { onClick: onClose, className: depositClasses?.closeButton ||
|
|
209
|
-
"anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: _jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: depositClasses?.formContent || cn("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.customExactIn, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount }, selectedChainId)) : (_jsx(AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.anySpend, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount }, selectedChainId)) }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "px-4 pb-4" } })] }));
|
|
209
|
+
"anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10", children: _jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: depositClasses?.formContent || cn("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8"), children: isCustomDeposit ? (_jsx(AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: selectedChainId, destinationToken: destinationToken, destinationChainId: destinationTokenChainId, orderType: effectiveOrderType, minDestinationAmount: minDestinationAmount, header: header ?? defaultHeader, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa, customExactInConfig: depositContractConfig, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.customExactIn, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata }, selectedChainId)) : (_jsx(AnySpend, { loadOrder: loadOrder, mode: mode, defaultActiveTab: paymentType, recipientAddress: recipientAddress, sourceChainId: selectedChainId, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, onSuccess: txHash => onSuccess?.(txHash ?? ""), onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, hideHeader: true, hideBottomNavigation: true, disableUrlParamManagement: true, returnToHomeUrl: returnToHomeUrl, customRecipientLabel: customRecipientLabel, returnHomeLabel: returnHomeLabel, classes: classes?.anySpend, allowDirectTransfer: allowDirectTransfer, destinationTokenAmount: destinationTokenAmount, callbackMetadata: callbackMetadata }, selectedChainId)) }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "px-4 pb-4" } })] }));
|
|
210
210
|
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { AnySpendAllClasses } from "./types/classes";
|
|
2
|
+
export interface AnySpendWorkflowTriggerProps {
|
|
3
|
+
/** Payment recipient address (hex) */
|
|
4
|
+
recipientAddress: string;
|
|
5
|
+
/** Destination chain ID */
|
|
6
|
+
chainId: number;
|
|
7
|
+
/** Destination token address */
|
|
8
|
+
tokenAddress: string;
|
|
9
|
+
/** Required payment amount in token base units (wei) */
|
|
10
|
+
amount: string;
|
|
11
|
+
/** Workflow ID to trigger */
|
|
12
|
+
workflowId: string;
|
|
13
|
+
/** Organization ID that owns the workflow */
|
|
14
|
+
orgId: string;
|
|
15
|
+
/** Optional callback metadata merged into the order */
|
|
16
|
+
callbackMetadata?: {
|
|
17
|
+
/** Passed as trigger result inputs — accessible via {{root.result.inputs.*}} */
|
|
18
|
+
inputs?: Record<string, unknown>;
|
|
19
|
+
} & Record<string, unknown>;
|
|
20
|
+
/** Callback when payment succeeds */
|
|
21
|
+
onSuccess?: (amount: string) => void;
|
|
22
|
+
/** Callback when modal is closed */
|
|
23
|
+
onClose?: () => void;
|
|
24
|
+
/** Display mode */
|
|
25
|
+
mode?: "modal" | "page";
|
|
26
|
+
/** Custom action label */
|
|
27
|
+
actionLabel?: string;
|
|
28
|
+
/** Custom class names */
|
|
29
|
+
classes?: AnySpendAllClasses;
|
|
30
|
+
}
|
|
31
|
+
export declare function AnySpendWorkflowTrigger({ recipientAddress, chainId, tokenAddress, amount, workflowId, orgId, callbackMetadata, onSuccess, onClose, mode, actionLabel, classes, }: AnySpendWorkflowTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { AnySpendDeposit } from "./AnySpendDeposit.js";
|
|
4
|
+
export function AnySpendWorkflowTrigger({ recipientAddress, chainId, tokenAddress, amount, workflowId, orgId, callbackMetadata, onSuccess, onClose, mode, actionLabel, classes, }) {
|
|
5
|
+
const metadata = useMemo(() => ({
|
|
6
|
+
workflowId,
|
|
7
|
+
orgId,
|
|
8
|
+
...callbackMetadata,
|
|
9
|
+
}), [workflowId, orgId, callbackMetadata]);
|
|
10
|
+
return (_jsx(AnySpendDeposit, { recipientAddress: recipientAddress, destinationTokenAddress: tokenAddress, destinationTokenChainId: chainId, destinationTokenAmount: amount, callbackMetadata: metadata, onSuccess: onSuccess, onClose: onClose, mode: mode, actionLabel: actionLabel, classes: classes, allowDirectTransfer: true }));
|
|
11
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ALL_CHAINS, getAvailableChainIds, isSameChainAndToken } from "../../../anyspend/index.js";
|
|
2
|
+
import { ALL_CHAINS, getAvailableChainIds, getPaymentUrl, isSameChainAndToken, ZERO_ADDRESS, } from "../../../anyspend/index.js";
|
|
3
3
|
import { Button, toast } from "../../../global-account/react/index.js";
|
|
4
4
|
import { cn } from "../../../shared/utils/cn.js";
|
|
5
5
|
import { TokenSelector } from "@relayprotocol/relay-kit-ui";
|
|
@@ -8,6 +8,7 @@ import { QRCodeSVG } from "qrcode.react";
|
|
|
8
8
|
import { useEffect, useRef, useState } from "react";
|
|
9
9
|
import { useAnyspendOrderAndTransactions } from "../hooks/useAnyspendOrderAndTransactions.js";
|
|
10
10
|
import { useCreateDepositFirstOrder } from "../hooks/useCreateDepositFirstOrder.js";
|
|
11
|
+
import { useOnOrderSuccess } from "../hooks/useOnOrderSuccess.js";
|
|
11
12
|
import { useWatchTransfer } from "../hooks/useWatchTransfer.js";
|
|
12
13
|
import { ChainTokenIcon } from "./common/ChainTokenIcon.js";
|
|
13
14
|
import { OrderDetails } from "./common/OrderDetails.js";
|
|
@@ -43,7 +44,6 @@ export function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourc
|
|
|
43
44
|
const [orderId, setOrderId] = useState();
|
|
44
45
|
const [globalAddress, setGlobalAddress] = useState();
|
|
45
46
|
const orderCreatedRef = useRef(false);
|
|
46
|
-
const onSuccessCalled = useRef(false);
|
|
47
47
|
const [transferResult, setTransferResult] = useState(null);
|
|
48
48
|
// Source token/chain as state (can be changed by user)
|
|
49
49
|
const [sourceChainId, setSourceChainId] = useState(sourceChainIdProp ?? 8453);
|
|
@@ -125,19 +125,11 @@ export function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourc
|
|
|
125
125
|
isPureTransfer,
|
|
126
126
|
]);
|
|
127
127
|
// Call onSuccess when order is executed
|
|
128
|
-
|
|
129
|
-
if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
|
|
130
|
-
const txHash = oat?.data?.executeTx?.txHash;
|
|
131
|
-
onSuccess?.(txHash);
|
|
132
|
-
onSuccessCalled.current = true;
|
|
133
|
-
}
|
|
134
|
-
}, [oat?.data?.order.status, oat?.data?.executeTx?.txHash, onSuccess]);
|
|
135
|
-
// Reset onSuccess flag when orderId changes
|
|
136
|
-
useEffect(() => {
|
|
137
|
-
onSuccessCalled.current = false;
|
|
138
|
-
}, [orderId]);
|
|
128
|
+
useOnOrderSuccess({ orderData: oat, orderId, onSuccess });
|
|
139
129
|
// For pure transfers, always use recipient address; for orders, use global address
|
|
140
130
|
const displayAddress = isPureTransfer ? recipientAddress : globalAddress || recipientAddress;
|
|
131
|
+
// Generate EIP-681 payment URI for the QR code so wallets know which chain/token to use
|
|
132
|
+
const qrValue = getPaymentUrl(displayAddress, undefined, sourceToken.address === ZERO_ADDRESS ? "ETH" : sourceToken.address, sourceChainId, sourceToken.decimals);
|
|
141
133
|
const handleCopyAddress = async () => {
|
|
142
134
|
if (displayAddress) {
|
|
143
135
|
await navigator.clipboard.writeText(displayAddress);
|
|
@@ -170,7 +162,7 @@ export function QRDeposit({ mode = "modal", recipientAddress, sourceToken: sourc
|
|
|
170
162
|
}
|
|
171
163
|
return (_jsx("div", { className: classes?.container ||
|
|
172
164
|
cn("anyspend-container anyspend-qr-deposit font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6", mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsxs("div", { className: classes?.content || "anyspend-qr-deposit-content flex flex-col gap-4", children: [_jsxs("div", { className: classes?.header || "anyspend-qr-header flex items-center justify-between", children: [_jsx("button", { onClick: handleBack, className: classes?.backButton || "anyspend-qr-back-button text-as-secondary hover:text-as-primary", children: _jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("h2", { className: classes?.title || "anyspend-qr-title text-as-primary text-base font-semibold", children: "Deposit" }), onClose ? (_jsx("button", { onClick: handleClose, className: classes?.closeButton || "anyspend-qr-close-button text-as-secondary hover:text-as-primary", children: _jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })) : (_jsx("div", { className: "w-5" }))] }), _jsxs("div", { className: classes?.tokenSelectorContainer || "anyspend-qr-token-selector flex flex-col gap-1.5", children: [_jsx("label", { className: classes?.tokenSelectorLabel || "anyspend-qr-token-label text-as-secondary text-sm", children: "Send" }), _jsx(TokenSelector, { chainIdsFilter: getAvailableChainIds("from"), context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: getAvailableChainIds("from"), multiWalletSupportEnabled: true, onAnalyticEvent: undefined, setToken: handleTokenSelect, supportedWalletVMs: ["evm"], token: undefined, trigger: _jsxs(Button, { variant: "outline", role: "combobox", className: classes?.tokenSelectorTrigger ||
|
|
173
|
-
"anyspend-qr-token-trigger border-as-stroke bg-as-surface-secondary flex h-auto w-full items-center justify-between gap-2 rounded-xl border px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [sourceToken.metadata?.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[sourceChainId]?.logoUrl, tokenUrl: sourceToken.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: sourceToken.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[sourceChainId]?.name ?? "Unknown" })] })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) })] }), _jsxs("div", { className: classes?.qrContent || "anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4", children: [_jsxs("div", { className: classes?.qrCodeContainer || "anyspend-qr-code-container flex flex-col items-center gap-2", children: [_jsx("div", { className: classes?.qrCode || "anyspend-qr-code rounded-lg bg-white p-2", children: _jsx(QRCodeSVG, { value:
|
|
165
|
+
"anyspend-qr-token-trigger border-as-stroke bg-as-surface-secondary flex h-auto w-full items-center justify-between gap-2 rounded-xl border px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [sourceToken.metadata?.logoURI ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[sourceChainId]?.logoUrl, tokenUrl: sourceToken.metadata.logoURI, className: "h-8 min-h-8 w-8 min-w-8" })) : (_jsx("div", { className: "h-8 w-8 rounded-full bg-gray-700" })), _jsxs("div", { className: "flex flex-col items-start gap-0", children: [_jsx("div", { className: "text-as-primary font-semibold", children: sourceToken.symbol }), _jsx("div", { className: "text-as-primary/70 text-xs", children: ALL_CHAINS[sourceChainId]?.name ?? "Unknown" })] })] }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-70" })] }) })] }), _jsxs("div", { className: classes?.qrContent || "anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4", children: [_jsxs("div", { className: classes?.qrCodeContainer || "anyspend-qr-code-container flex flex-col items-center gap-2", children: [_jsx("div", { className: classes?.qrCode || "anyspend-qr-code rounded-lg bg-white p-2", children: _jsx(QRCodeSVG, { value: qrValue, size: 120, level: "M", marginSize: 0 }) }), _jsxs("span", { className: classes?.qrScanHint || "anyspend-qr-scan-hint text-as-secondary text-xs", children: ["SCAN WITH ", _jsx("span", { className: "inline-block", children: "\uD83E\uDD8A" })] })] }), _jsxs("div", { className: classes?.addressContainer || "anyspend-qr-address-container flex flex-1 flex-col gap-1", children: [_jsx("span", { className: classes?.addressLabel || "anyspend-qr-address-label text-as-secondary text-sm", children: "Deposit address:" }), _jsxs("div", { className: classes?.addressRow || "anyspend-qr-address-row flex items-start gap-1", children: [_jsx("span", { className: classes?.address || "anyspend-qr-address text-as-primary break-all font-mono text-sm leading-relaxed", children: displayAddress }), _jsx("button", { onClick: handleCopyAddress, className: classes?.addressCopyIcon ||
|
|
174
166
|
"anyspend-qr-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0", children: copied ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Copy, { className: "h-4 w-4" }) })] })] })] }), _jsx(ChainWarningText, { chainId: destinationChainId }), _jsxs(WarningText, { children: ["Only send ", sourceToken.symbol, " on ", ALL_CHAINS[sourceChainId]?.name ?? "the specified chain", ". Other tokens will not be converted."] }), isPureTransfer && isWatchingTransfer && (_jsxs("div", { className: classes?.watchingIndicator ||
|
|
175
167
|
"anyspend-qr-watching flex items-center justify-center gap-2 rounded-lg bg-blue-500/10 p-3", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin text-blue-500" }), _jsx("span", { className: "text-sm text-blue-500", children: "Watching for incoming transfer..." })] })), _jsx("button", { onClick: handleCopyAddress, className: classes?.copyButton ||
|
|
176
168
|
"anyspend-qr-copy-button flex w-full items-center justify-center gap-2 rounded-xl bg-blue-500 py-3.5 font-medium text-white transition-all hover:bg-blue-600", children: "Copy deposit address" })] }) }));
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
export declare const BUY_PACKS_FOR_ABI: {
|
|
2
|
+
readonly inputs: readonly [{
|
|
3
|
+
readonly internalType: "address";
|
|
4
|
+
readonly name: "user";
|
|
5
|
+
readonly type: "address";
|
|
6
|
+
}, {
|
|
7
|
+
readonly internalType: "uint256";
|
|
8
|
+
readonly name: "packId";
|
|
9
|
+
readonly type: "uint256";
|
|
10
|
+
}, {
|
|
11
|
+
readonly internalType: "uint256";
|
|
12
|
+
readonly name: "amount";
|
|
13
|
+
readonly type: "uint256";
|
|
14
|
+
}];
|
|
15
|
+
readonly name: "buyPacksFor";
|
|
16
|
+
readonly outputs: readonly [];
|
|
17
|
+
readonly stateMutability: "nonpayable";
|
|
18
|
+
readonly type: "function";
|
|
19
|
+
};
|
|
20
|
+
export declare const BUY_PACKS_FOR_WITH_DISCOUNT_ABI: {
|
|
21
|
+
readonly inputs: readonly [{
|
|
22
|
+
readonly internalType: "address";
|
|
23
|
+
readonly name: "user";
|
|
24
|
+
readonly type: "address";
|
|
25
|
+
}, {
|
|
26
|
+
readonly internalType: "uint256";
|
|
27
|
+
readonly name: "packId";
|
|
28
|
+
readonly type: "uint256";
|
|
29
|
+
}, {
|
|
30
|
+
readonly internalType: "uint256";
|
|
31
|
+
readonly name: "amount";
|
|
32
|
+
readonly type: "uint256";
|
|
33
|
+
}, {
|
|
34
|
+
readonly internalType: "string";
|
|
35
|
+
readonly name: "discountCode";
|
|
36
|
+
readonly type: "string";
|
|
37
|
+
}];
|
|
38
|
+
readonly name: "buyPacksForWithDiscount";
|
|
39
|
+
readonly outputs: readonly [];
|
|
40
|
+
readonly stateMutability: "nonpayable";
|
|
41
|
+
readonly type: "function";
|
|
42
|
+
};
|
|
43
|
+
export declare const IS_DISCOUNT_CODE_VALID_FOR_PACK_ABI: {
|
|
44
|
+
readonly inputs: readonly [{
|
|
45
|
+
readonly internalType: "string";
|
|
46
|
+
readonly name: "code";
|
|
47
|
+
readonly type: "string";
|
|
48
|
+
}, {
|
|
49
|
+
readonly internalType: "uint256";
|
|
50
|
+
readonly name: "packId";
|
|
51
|
+
readonly type: "uint256";
|
|
52
|
+
}];
|
|
53
|
+
readonly name: "isDiscountCodeValidForPack";
|
|
54
|
+
readonly outputs: readonly [{
|
|
55
|
+
readonly internalType: "bool";
|
|
56
|
+
readonly name: "isValid";
|
|
57
|
+
readonly type: "bool";
|
|
58
|
+
}, {
|
|
59
|
+
readonly internalType: "uint256";
|
|
60
|
+
readonly name: "discountAmount";
|
|
61
|
+
readonly type: "uint256";
|
|
62
|
+
}];
|
|
63
|
+
readonly stateMutability: "view";
|
|
64
|
+
readonly type: "function";
|
|
65
|
+
};
|
|
66
|
+
export declare const GET_DISCOUNT_CODE_ABI: {
|
|
67
|
+
readonly inputs: readonly [{
|
|
68
|
+
readonly internalType: "string";
|
|
69
|
+
readonly name: "code";
|
|
70
|
+
readonly type: "string";
|
|
71
|
+
}];
|
|
72
|
+
readonly name: "getDiscountCode";
|
|
73
|
+
readonly outputs: readonly [{
|
|
74
|
+
readonly components: readonly [{
|
|
75
|
+
readonly internalType: "uint256";
|
|
76
|
+
readonly name: "discountAmount";
|
|
77
|
+
readonly type: "uint256";
|
|
78
|
+
}, {
|
|
79
|
+
readonly internalType: "uint256";
|
|
80
|
+
readonly name: "expiresAt";
|
|
81
|
+
readonly type: "uint256";
|
|
82
|
+
}, {
|
|
83
|
+
readonly internalType: "bool";
|
|
84
|
+
readonly name: "used";
|
|
85
|
+
readonly type: "bool";
|
|
86
|
+
}, {
|
|
87
|
+
readonly internalType: "bool";
|
|
88
|
+
readonly name: "exists";
|
|
89
|
+
readonly type: "bool";
|
|
90
|
+
}, {
|
|
91
|
+
readonly internalType: "uint256";
|
|
92
|
+
readonly name: "maxUses";
|
|
93
|
+
readonly type: "uint256";
|
|
94
|
+
}, {
|
|
95
|
+
readonly internalType: "uint256";
|
|
96
|
+
readonly name: "usedCount";
|
|
97
|
+
readonly type: "uint256";
|
|
98
|
+
}, {
|
|
99
|
+
readonly internalType: "uint256";
|
|
100
|
+
readonly name: "packId";
|
|
101
|
+
readonly type: "uint256";
|
|
102
|
+
}, {
|
|
103
|
+
readonly internalType: "uint256";
|
|
104
|
+
readonly name: "minPurchaseAmount";
|
|
105
|
+
readonly type: "uint256";
|
|
106
|
+
}];
|
|
107
|
+
readonly internalType: "struct CCShop.DiscountCode";
|
|
108
|
+
readonly name: "";
|
|
109
|
+
readonly type: "tuple";
|
|
110
|
+
}];
|
|
111
|
+
readonly stateMutability: "view";
|
|
112
|
+
readonly type: "function";
|
|
113
|
+
};
|