@b3dotfun/sdk 0.0.29-alpha.2 → 0.0.29-alpha.4
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/AnyspendDepositHype.js +3 -1
- package/dist/cjs/anyspend/react/components/common/ConnectWalletPayment.js +9 -1
- package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js +130 -41
- package/dist/cjs/anyspend/react/components/common/OrderDetails.js +3 -3
- package/dist/cjs/anyspend/react/components/common/PaySection.js +6 -4
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js +29 -0
- package/dist/cjs/anyspend/react/hooks/useSigMint.d.ts +1 -1
- package/dist/cjs/bondkit/abis/BondkitTokenABI.d.ts +60 -12
- package/dist/cjs/bondkit/abis/BondkitTokenABI.js +39 -6
- package/dist/cjs/bondkit/abis/BondkitTokenFactoryABI.d.ts +0 -25
- package/dist/cjs/bondkit/abis/BondkitTokenFactoryABI.js +0 -9
- package/dist/cjs/bondkit/constants.js +1 -1
- package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.d.ts +1 -0
- package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +1 -0
- package/dist/cjs/shared/constants/chains/b3Chain.d.ts +2 -2
- package/dist/cjs/shared/constants/chains/supported.d.ts +4 -4
- package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +3 -1
- package/dist/esm/anyspend/react/components/common/ConnectWalletPayment.js +6 -1
- package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js +133 -44
- package/dist/esm/anyspend/react/components/common/OrderDetails.js +3 -3
- package/dist/esm/anyspend/react/components/common/PaySection.js +7 -5
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js +30 -1
- package/dist/esm/anyspend/react/hooks/useSigMint.d.ts +1 -1
- package/dist/esm/bondkit/abis/BondkitTokenABI.d.ts +60 -12
- package/dist/esm/bondkit/abis/BondkitTokenABI.js +39 -6
- package/dist/esm/bondkit/abis/BondkitTokenFactoryABI.d.ts +0 -25
- package/dist/esm/bondkit/abis/BondkitTokenFactoryABI.js +0 -9
- package/dist/esm/bondkit/constants.js +1 -1
- package/dist/esm/global-account/react/hooks/useUnifiedChainSwitchAndExecute.d.ts +1 -0
- package/dist/esm/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +1 -0
- package/dist/esm/shared/constants/chains/b3Chain.d.ts +2 -2
- package/dist/esm/shared/constants/chains/supported.d.ts +4 -4
- package/dist/styles/index.css +1 -1
- package/dist/types/anyspend/react/hooks/useSigMint.d.ts +1 -1
- package/dist/types/bondkit/abis/BondkitTokenABI.d.ts +60 -12
- package/dist/types/bondkit/abis/BondkitTokenFactoryABI.d.ts +0 -25
- package/dist/types/global-account/react/hooks/useUnifiedChainSwitchAndExecute.d.ts +1 -0
- package/dist/types/shared/constants/chains/b3Chain.d.ts +2 -2
- package/dist/types/shared/constants/chains/supported.d.ts +4 -4
- package/package.json +1 -1
- package/src/anyspend/react/components/AnyspendDepositHype.tsx +4 -0
- package/src/anyspend/react/components/common/ConnectWalletPayment.tsx +9 -0
- package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx +289 -103
- package/src/anyspend/react/components/common/OrderDetails.tsx +3 -3
- package/src/anyspend/react/components/common/PaySection.tsx +9 -7
- package/src/anyspend/react/hooks/useAnyspendFlow.ts +33 -1
- package/src/bondkit/abis/BondkitTokenABI.ts +39 -6
- package/src/bondkit/abis/BondkitTokenFactoryABI.ts +0 -9
- package/src/bondkit/constants.ts +1 -1
- package/src/global-account/react/hooks/useUnifiedChainSwitchAndExecute.ts +1 -0
|
@@ -161,11 +161,6 @@ exports.BondkitTokenABI = [
|
|
|
161
161
|
name: "ValidationInvalidLPSplitRatio",
|
|
162
162
|
type: "error",
|
|
163
163
|
},
|
|
164
|
-
{
|
|
165
|
-
inputs: [{ internalType: "address", name: "providedAddress", type: "address" }],
|
|
166
|
-
name: "ValidationInvalidMigrationAdminAddress",
|
|
167
|
-
type: "error",
|
|
168
|
-
},
|
|
169
164
|
{
|
|
170
165
|
inputs: [{ internalType: "uint24", name: "value", type: "uint24" }],
|
|
171
166
|
name: "ValidationInvalidV4PoolFee",
|
|
@@ -186,6 +181,15 @@ exports.BondkitTokenABI = [
|
|
|
186
181
|
name: "Approval",
|
|
187
182
|
type: "event",
|
|
188
183
|
},
|
|
184
|
+
{
|
|
185
|
+
anonymous: false,
|
|
186
|
+
inputs: [
|
|
187
|
+
{ indexed: true, internalType: "address", name: "previousAdmin", type: "address" },
|
|
188
|
+
{ indexed: true, internalType: "address", name: "newAdmin", type: "address" },
|
|
189
|
+
],
|
|
190
|
+
name: "B3AdminUpdated",
|
|
191
|
+
type: "event",
|
|
192
|
+
},
|
|
189
193
|
{
|
|
190
194
|
anonymous: false,
|
|
191
195
|
inputs: [
|
|
@@ -237,6 +241,15 @@ exports.BondkitTokenABI = [
|
|
|
237
241
|
name: "BondkitTokenMigrated",
|
|
238
242
|
type: "event",
|
|
239
243
|
},
|
|
244
|
+
{
|
|
245
|
+
anonymous: false,
|
|
246
|
+
inputs: [
|
|
247
|
+
{ indexed: false, internalType: "uint256", name: "totalRaisedBonding", type: "uint256" },
|
|
248
|
+
{ indexed: false, internalType: "uint256", name: "targetAmount", type: "uint256" },
|
|
249
|
+
],
|
|
250
|
+
name: "DexTriggerThresholdMet",
|
|
251
|
+
type: "event",
|
|
252
|
+
},
|
|
240
253
|
{
|
|
241
254
|
anonymous: false,
|
|
242
255
|
inputs: [
|
|
@@ -305,6 +318,13 @@ exports.BondkitTokenABI = [
|
|
|
305
318
|
stateMutability: "nonpayable",
|
|
306
319
|
type: "function",
|
|
307
320
|
},
|
|
321
|
+
{
|
|
322
|
+
inputs: [],
|
|
323
|
+
name: "b3Admin",
|
|
324
|
+
outputs: [{ internalType: "address", name: "", type: "address" }],
|
|
325
|
+
stateMutability: "view",
|
|
326
|
+
type: "function",
|
|
327
|
+
},
|
|
308
328
|
{
|
|
309
329
|
inputs: [{ internalType: "address", name: "account", type: "address" }],
|
|
310
330
|
name: "balanceOf",
|
|
@@ -400,6 +420,13 @@ exports.BondkitTokenABI = [
|
|
|
400
420
|
stateMutability: "view",
|
|
401
421
|
type: "function",
|
|
402
422
|
},
|
|
423
|
+
{
|
|
424
|
+
inputs: [],
|
|
425
|
+
name: "getB3Admin",
|
|
426
|
+
outputs: [{ internalType: "address", name: "", type: "address" }],
|
|
427
|
+
stateMutability: "view",
|
|
428
|
+
type: "function",
|
|
429
|
+
},
|
|
403
430
|
{
|
|
404
431
|
inputs: [],
|
|
405
432
|
name: "getBondingCurveConfig",
|
|
@@ -542,7 +569,6 @@ exports.BondkitTokenABI = [
|
|
|
542
569
|
{ internalType: "uint256", name: "lpSplitRatioFeeRecipientBps", type: "uint256" },
|
|
543
570
|
{ internalType: "uint256", name: "targetAmount", type: "uint256" },
|
|
544
571
|
{ internalType: "address", name: "tradingToken", type: "address" },
|
|
545
|
-
{ internalType: "address", name: "migrationAdminAddress", type: "address" },
|
|
546
572
|
{ internalType: "address", name: "bondingPhaseSplitter", type: "address" },
|
|
547
573
|
{ internalType: "address", name: "v4PoolManager", type: "address" },
|
|
548
574
|
{ internalType: "address", name: "v4Hook", type: "address" },
|
|
@@ -662,6 +688,13 @@ exports.BondkitTokenABI = [
|
|
|
662
688
|
stateMutability: "nonpayable",
|
|
663
689
|
type: "function",
|
|
664
690
|
},
|
|
691
|
+
{
|
|
692
|
+
inputs: [{ internalType: "address", name: "_newAdmin", type: "address" }],
|
|
693
|
+
name: "updateB3Admin",
|
|
694
|
+
outputs: [],
|
|
695
|
+
stateMutability: "nonpayable",
|
|
696
|
+
type: "function",
|
|
697
|
+
},
|
|
665
698
|
{
|
|
666
699
|
inputs: [{ internalType: "address", name: "_bondingPhaseSplitter", type: "address" }],
|
|
667
700
|
name: "updateSplitter",
|
|
@@ -106,14 +106,6 @@ export declare const BondkitTokenFactoryABI: readonly [{
|
|
|
106
106
|
}];
|
|
107
107
|
readonly name: "ValidationInvalidLPSplitRatio";
|
|
108
108
|
readonly type: "error";
|
|
109
|
-
}, {
|
|
110
|
-
readonly inputs: readonly [{
|
|
111
|
-
readonly internalType: "address";
|
|
112
|
-
readonly name: "providedAddress";
|
|
113
|
-
readonly type: "address";
|
|
114
|
-
}];
|
|
115
|
-
readonly name: "ValidationInvalidMigrationAdminAddress";
|
|
116
|
-
readonly type: "error";
|
|
117
109
|
}, {
|
|
118
110
|
readonly inputs: readonly [{
|
|
119
111
|
readonly internalType: "uint24";
|
|
@@ -157,11 +149,6 @@ export declare const BondkitTokenFactoryABI: readonly [{
|
|
|
157
149
|
readonly internalType: "address";
|
|
158
150
|
readonly name: "feeRecipient";
|
|
159
151
|
readonly type: "address";
|
|
160
|
-
}, {
|
|
161
|
-
readonly indexed: false;
|
|
162
|
-
readonly internalType: "address";
|
|
163
|
-
readonly name: "migrationAdmin";
|
|
164
|
-
readonly type: "address";
|
|
165
152
|
}];
|
|
166
153
|
readonly name: "BondkitTokenCreated";
|
|
167
154
|
readonly type: "event";
|
|
@@ -259,10 +246,6 @@ export declare const BondkitTokenFactoryABI: readonly [{
|
|
|
259
246
|
readonly internalType: "address";
|
|
260
247
|
readonly name: "tradingToken";
|
|
261
248
|
readonly type: "address";
|
|
262
|
-
}, {
|
|
263
|
-
readonly internalType: "address";
|
|
264
|
-
readonly name: "migrationAdminAddress";
|
|
265
|
-
readonly type: "address";
|
|
266
249
|
}, {
|
|
267
250
|
readonly internalType: "address";
|
|
268
251
|
readonly name: "bondingPhaseSplitter";
|
|
@@ -350,10 +333,6 @@ export declare const BondkitTokenFactoryABI: readonly [{
|
|
|
350
333
|
readonly internalType: "address";
|
|
351
334
|
readonly name: "tradingToken";
|
|
352
335
|
readonly type: "address";
|
|
353
|
-
}, {
|
|
354
|
-
readonly internalType: "address";
|
|
355
|
-
readonly name: "migrationAdminAddress";
|
|
356
|
-
readonly type: "address";
|
|
357
336
|
}, {
|
|
358
337
|
readonly internalType: "address";
|
|
359
338
|
readonly name: "bondingPhaseSplitter";
|
|
@@ -461,10 +440,6 @@ export declare const BondkitTokenFactoryABI: readonly [{
|
|
|
461
440
|
readonly internalType: "address";
|
|
462
441
|
readonly name: "tradingToken";
|
|
463
442
|
readonly type: "address";
|
|
464
|
-
}, {
|
|
465
|
-
readonly internalType: "address";
|
|
466
|
-
readonly name: "migrationAdminAddress";
|
|
467
|
-
readonly type: "address";
|
|
468
443
|
}, {
|
|
469
444
|
readonly internalType: "address";
|
|
470
445
|
readonly name: "bondingPhaseSplitter";
|
|
@@ -60,11 +60,6 @@ exports.BondkitTokenFactoryABI = [
|
|
|
60
60
|
name: "ValidationInvalidLPSplitRatio",
|
|
61
61
|
type: "error",
|
|
62
62
|
},
|
|
63
|
-
{
|
|
64
|
-
inputs: [{ internalType: "address", name: "providedAddress", type: "address" }],
|
|
65
|
-
name: "ValidationInvalidMigrationAdminAddress",
|
|
66
|
-
type: "error",
|
|
67
|
-
},
|
|
68
63
|
{
|
|
69
64
|
inputs: [{ internalType: "uint24", name: "value", type: "uint24" }],
|
|
70
65
|
name: "ValidationInvalidV4PoolFee",
|
|
@@ -83,7 +78,6 @@ exports.BondkitTokenFactoryABI = [
|
|
|
83
78
|
{ indexed: false, internalType: "string", name: "name", type: "string" },
|
|
84
79
|
{ indexed: false, internalType: "string", name: "symbol", type: "string" },
|
|
85
80
|
{ indexed: true, internalType: "address", name: "feeRecipient", type: "address" },
|
|
86
|
-
{ indexed: false, internalType: "address", name: "migrationAdmin", type: "address" },
|
|
87
81
|
],
|
|
88
82
|
name: "BondkitTokenCreated",
|
|
89
83
|
type: "event",
|
|
@@ -135,7 +129,6 @@ exports.BondkitTokenFactoryABI = [
|
|
|
135
129
|
{ internalType: "uint256", name: "lpSplitRatioFeeRecipientBps", type: "uint256" },
|
|
136
130
|
{ internalType: "uint256", name: "targetAmount", type: "uint256" },
|
|
137
131
|
{ internalType: "address", name: "tradingToken", type: "address" },
|
|
138
|
-
{ internalType: "address", name: "migrationAdminAddress", type: "address" },
|
|
139
132
|
{ internalType: "address", name: "bondingPhaseSplitter", type: "address" },
|
|
140
133
|
{ internalType: "address", name: "v4PoolManager", type: "address" },
|
|
141
134
|
{ internalType: "address", name: "v4Hook", type: "address" },
|
|
@@ -178,7 +171,6 @@ exports.BondkitTokenFactoryABI = [
|
|
|
178
171
|
{ internalType: "uint256", name: "lpSplitRatioFeeRecipientBps", type: "uint256" },
|
|
179
172
|
{ internalType: "uint256", name: "targetAmount", type: "uint256" },
|
|
180
173
|
{ internalType: "address", name: "tradingToken", type: "address" },
|
|
181
|
-
{ internalType: "address", name: "migrationAdminAddress", type: "address" },
|
|
182
174
|
{ internalType: "address", name: "bondingPhaseSplitter", type: "address" },
|
|
183
175
|
{ internalType: "address", name: "v4PoolManager", type: "address" },
|
|
184
176
|
{ internalType: "address", name: "v4Hook", type: "address" },
|
|
@@ -230,7 +222,6 @@ exports.BondkitTokenFactoryABI = [
|
|
|
230
222
|
{ internalType: "uint256", name: "lpSplitRatioFeeRecipientBps", type: "uint256" },
|
|
231
223
|
{ internalType: "uint256", name: "targetAmount", type: "uint256" },
|
|
232
224
|
{ internalType: "address", name: "tradingToken", type: "address" },
|
|
233
|
-
{ internalType: "address", name: "migrationAdminAddress", type: "address" },
|
|
234
225
|
{ internalType: "address", name: "bondingPhaseSplitter", type: "address" },
|
|
235
226
|
{ internalType: "address", name: "v4PoolManager", type: "address" },
|
|
236
227
|
{ internalType: "address", name: "v4Hook", type: "address" },
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.BaseMainnetRpcUrl = exports.BaseBondkitTokenFactoryContractAddress = void 0;
|
|
4
|
-
exports.BaseBondkitTokenFactoryContractAddress = "
|
|
4
|
+
exports.BaseBondkitTokenFactoryContractAddress = "0x5d641bbB206d4B5585eCCd919F36270200A9A2Ad";
|
|
5
5
|
exports.BaseMainnetRpcUrl = "https://base-rpc.publicnode.com";
|
|
@@ -5,6 +5,7 @@ export interface UnifiedTransactionParams {
|
|
|
5
5
|
}
|
|
6
6
|
export declare function useUnifiedChainSwitchAndExecute(): {
|
|
7
7
|
switchChainAndExecute: (targetChainId: number, params: UnifiedTransactionParams) => Promise<string | undefined>;
|
|
8
|
+
switchChainAndExecuteWithEOA: (targetChainId: number, params: UnifiedTransactionParams) => Promise<string | undefined>;
|
|
8
9
|
isSwitchingOrExecuting: boolean;
|
|
9
10
|
isActiveSmartWallet: boolean | undefined;
|
|
10
11
|
isActiveEOAWallet: boolean | undefined;
|
|
@@ -164,6 +164,7 @@ function useUnifiedChainSwitchAndExecute() {
|
|
|
164
164
|
}, [isActiveSmartWallet, isActiveEOAWallet, handleAASendTransaction, handleEOASwitchChainAndSendTransaction]);
|
|
165
165
|
return {
|
|
166
166
|
switchChainAndExecute,
|
|
167
|
+
switchChainAndExecuteWithEOA: handleEOASwitchChainAndSendTransaction,
|
|
167
168
|
isSwitchingOrExecuting,
|
|
168
169
|
isActiveSmartWallet,
|
|
169
170
|
isActiveEOAWallet,
|
|
@@ -88,9 +88,9 @@ export declare const getViemChainConfig: (config: ChainNetworks) => {
|
|
|
88
88
|
readonly rpc: string;
|
|
89
89
|
readonly icon: {
|
|
90
90
|
format: string;
|
|
91
|
-
url: string;
|
|
92
|
-
width: number;
|
|
93
91
|
height: number;
|
|
92
|
+
width: number;
|
|
93
|
+
url: string;
|
|
94
94
|
};
|
|
95
95
|
};
|
|
96
96
|
export declare const thirdwebB3Testnet: ThirdwebChain;
|
|
@@ -10,9 +10,9 @@ export declare const supportedChainNetworks: {
|
|
|
10
10
|
testnet?: boolean | undefined;
|
|
11
11
|
fees?: Record<string, any> | undefined;
|
|
12
12
|
formatters?: Record<string, any> | undefined;
|
|
13
|
+
color?: string | undefined;
|
|
13
14
|
testnetConfigID?: number | undefined;
|
|
14
15
|
badge?: string | undefined;
|
|
15
|
-
color?: string | undefined;
|
|
16
16
|
enabledFeatures?: string[] | undefined;
|
|
17
17
|
blockExplorers: {
|
|
18
18
|
default: string;
|
|
@@ -35,13 +35,13 @@ export declare const supportedChainNetworks: {
|
|
|
35
35
|
uri: string;
|
|
36
36
|
}[];
|
|
37
37
|
};
|
|
38
|
-
_id: string | {};
|
|
39
38
|
icon: {
|
|
40
39
|
format: string;
|
|
41
|
-
url: string;
|
|
42
|
-
width: number;
|
|
43
40
|
height: number;
|
|
41
|
+
width: number;
|
|
42
|
+
url: string;
|
|
44
43
|
};
|
|
44
|
+
_id: string | {};
|
|
45
45
|
}[];
|
|
46
46
|
export declare const coingeckoChains: Record<number, {
|
|
47
47
|
coingecko_id: string;
|
|
@@ -36,7 +36,7 @@ export function AnySpendDepositHype(props) {
|
|
|
36
36
|
}
|
|
37
37
|
function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, depositContractAddress, mainFooter, }) {
|
|
38
38
|
// Use shared flow hook
|
|
39
|
-
const { activePanel, setActivePanel, orderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
|
|
39
|
+
const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
|
|
40
40
|
paymentType,
|
|
41
41
|
recipientAddress,
|
|
42
42
|
loadOrder,
|
|
@@ -215,6 +215,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
215
215
|
};
|
|
216
216
|
// Order details view
|
|
217
217
|
const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
|
|
218
|
+
setOrderId(undefined);
|
|
218
219
|
setActivePanel(PanelView.MAIN);
|
|
219
220
|
onSuccess?.();
|
|
220
221
|
} })] })) }) }));
|
|
@@ -233,6 +234,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
233
234
|
setSelectedFiatPaymentMethod(method);
|
|
234
235
|
setActivePanel(PanelView.MAIN);
|
|
235
236
|
}, srcAmountOnRamp: srcAmount }));
|
|
237
|
+
console.log("activePanel", activePanel, orderId, oat);
|
|
236
238
|
// If showing token selection, render with panel transitions
|
|
237
239
|
return (_jsx(StyleRoot, { children: _jsx("div", { className: cn("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
|
|
238
240
|
"bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
|
|
@@ -2,13 +2,16 @@
|
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend/index.js";
|
|
4
4
|
import { ShinyButton, useProfile } from "../../../../global-account/react/index.js";
|
|
5
|
+
import centerTruncate from "../../../../shared/utils/centerTruncate.js";
|
|
5
6
|
import { formatTokenAmount } from "../../../../shared/utils/number.js";
|
|
6
7
|
import { motion } from "framer-motion";
|
|
7
8
|
import { ChevronRight, Loader2 } from "lucide-react";
|
|
9
|
+
import { useAccount } from "wagmi";
|
|
8
10
|
import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
|
|
9
11
|
export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, }) {
|
|
10
12
|
const profile = useProfile({ address: order.recipientAddress });
|
|
11
13
|
const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
|
|
14
|
+
const { address: connectedAddress } = useAccount();
|
|
12
15
|
const srcToken = order.metadata.srcToken;
|
|
13
16
|
const dstToken = order.metadata.dstToken;
|
|
14
17
|
const expectedDstAmount = order.type === "mint_nft" ||
|
|
@@ -23,5 +26,7 @@ export default function ConnectWalletPayment({ order, onPayment, txLoading, isSw
|
|
|
23
26
|
}
|
|
24
27
|
return (_jsx("div", { className: "flex w-full flex-col items-center gap-6", children: _jsxs(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, className: "flex w-full flex-col items-center gap-2", children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
|
|
25
28
|
? "Pay from Phantom Wallet"
|
|
26
|
-
: "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }),
|
|
29
|
+
: "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsxs("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
|
|
30
|
+
? centerTruncate(phantomWalletAddress, 6)
|
|
31
|
+
: centerTruncate(connectedAddress || "")] }), _jsx("div", { className: "mt-4", children: _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] }) }));
|
|
27
32
|
}
|
|
@@ -1,17 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useAccountWallet } from "../../../../global-account/react/index.js";
|
|
4
|
-
import { thirdwebB3Mainnet } from "../../../../shared/constants/chains/b3Chain.js";
|
|
5
4
|
import { cn } from "../../../../shared/utils/cn.js";
|
|
6
5
|
import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
|
|
7
|
-
import {
|
|
8
|
-
import { ChevronLeft, ChevronRightCircle, Wallet, X } from "lucide-react";
|
|
6
|
+
import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
|
|
9
7
|
import { useState } from "react";
|
|
10
8
|
import { createPortal } from "react-dom";
|
|
11
9
|
import { toast } from "sonner";
|
|
12
|
-
import {
|
|
13
|
-
import { createWallet } from "thirdweb/wallets";
|
|
14
|
-
import { useDisconnect } from "wagmi";
|
|
10
|
+
import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
|
|
15
11
|
export var CryptoPaymentMethodType;
|
|
16
12
|
(function (CryptoPaymentMethodType) {
|
|
17
13
|
CryptoPaymentMethodType["NONE"] = "none";
|
|
@@ -20,45 +16,138 @@ export var CryptoPaymentMethodType;
|
|
|
20
16
|
})(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
|
|
21
17
|
export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
|
|
22
18
|
const { wallet: globalWallet } = useAccountWallet();
|
|
23
|
-
const
|
|
19
|
+
const { address, isConnected, connector } = useAccount();
|
|
20
|
+
const { connect, connectors, isPending } = useConnect();
|
|
24
21
|
const { disconnect } = useDisconnect();
|
|
25
|
-
const {
|
|
22
|
+
const { data: walletClient } = useWalletClient();
|
|
26
23
|
const [showWalletModal, setShowWalletModal] = useState(false);
|
|
27
|
-
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
24
|
+
const [selectedWalletConnector, setSelectedWalletConnector] = useState(null);
|
|
25
|
+
const [modalStep, setModalStep] = useState("wallet-selection");
|
|
26
|
+
// Define available wallet connectors
|
|
27
|
+
const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name));
|
|
28
|
+
// Define wallet options with icons and info
|
|
29
|
+
const walletOptions = [
|
|
30
|
+
{
|
|
31
|
+
id: "metamask",
|
|
32
|
+
name: "MetaMask",
|
|
33
|
+
icon: "🦊",
|
|
34
|
+
description: "Connect using MetaMask browser extension",
|
|
35
|
+
connector: availableConnectors.find(c => c.name === "MetaMask"),
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
id: "coinbase",
|
|
39
|
+
name: "Coinbase Wallet",
|
|
40
|
+
icon: "🔵",
|
|
41
|
+
description: "Connect using Coinbase Wallet",
|
|
42
|
+
connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
id: "rainbow",
|
|
46
|
+
name: "Rainbow",
|
|
47
|
+
icon: "🌈",
|
|
48
|
+
description: "Connect using Rainbow wallet",
|
|
49
|
+
connector: availableConnectors.find(c => c.name === "Rainbow"),
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
id: "walletconnect",
|
|
53
|
+
name: "WalletConnect",
|
|
54
|
+
icon: "🔗",
|
|
55
|
+
description: "Connect using WalletConnect protocol",
|
|
56
|
+
connector: availableConnectors.find(c => c.name === "WalletConnect"),
|
|
57
|
+
},
|
|
58
|
+
].filter(wallet => wallet.connector); // Only show wallets that have available connectors
|
|
59
|
+
// Reset modal state when closing
|
|
60
|
+
const handleCloseModal = () => {
|
|
61
|
+
setShowWalletModal(false);
|
|
62
|
+
setModalStep("wallet-selection");
|
|
63
|
+
setSelectedWalletConnector(null);
|
|
64
|
+
};
|
|
65
|
+
// Function to request wallet permissions for specific wallet
|
|
66
|
+
const requestWalletPermissions = async (walletConnector) => {
|
|
67
|
+
try {
|
|
68
|
+
// If a specific wallet connector is provided and it's different from current
|
|
69
|
+
if (walletConnector && connector?.name !== walletConnector.name) {
|
|
70
|
+
// Disconnect current and connect to the selected wallet
|
|
71
|
+
// if (isConnected) {
|
|
72
|
+
// disconnect();
|
|
73
|
+
// // Small delay to ensure disconnection
|
|
74
|
+
// await new Promise(resolve => setTimeout(resolve, 100));
|
|
75
|
+
// }
|
|
76
|
+
await connect({ connector: walletConnector });
|
|
77
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
78
|
+
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
79
|
+
toast.success(`Connected to ${walletConnector.name}`);
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
// If same wallet or no specific wallet, request permissions for account switching
|
|
83
|
+
if (walletClient && "request" in walletClient) {
|
|
84
|
+
await walletClient.request({
|
|
85
|
+
method: "wallet_requestPermissions",
|
|
86
|
+
params: [{ eth_accounts: {} }],
|
|
87
|
+
});
|
|
88
|
+
toast.success("Account selection completed");
|
|
89
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
90
|
+
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
// Fallback: show modal for manual wallet selection
|
|
94
|
+
setShowWalletModal(true);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
catch (error) {
|
|
98
|
+
console.error("Failed to request wallet permissions:", error);
|
|
99
|
+
if (error && typeof error === "object" && "message" in error) {
|
|
100
|
+
const errorMessage = error.message.toLowerCase();
|
|
101
|
+
if (errorMessage.includes("rejected") ||
|
|
102
|
+
errorMessage.includes("denied") ||
|
|
103
|
+
errorMessage.includes("cancelled")) {
|
|
104
|
+
toast.error("Account selection cancelled");
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
toast.error("Failed to open account selection");
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
toast.error("Failed to open account selection");
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
return (_jsxs("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [_jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), _jsxs("div", { className: "crypto-payment-methods flex flex-col gap-6", children: [_jsxs("button", { onClick: () => {
|
|
116
|
+
// Always show wallet selection modal first
|
|
117
|
+
setShowWalletModal(true);
|
|
118
|
+
}, className: "crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-4 w-4 text-blue-600" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), _jsxs("button", { onClick: () => {
|
|
51
119
|
setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
|
|
52
120
|
onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
|
|
53
|
-
}, disabled: isCreatingOrder, className: "crypto-payment-method-transfer bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [_jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
121
|
+
}, disabled: isCreatingOrder, className: "crypto-payment-method-transfer bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: _jsx(ZapIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), isConnected && (_jsxs("div", { className: "installed-wallets", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), _jsx("div", { className: "space-y-2", children: _jsx("button", { onClick: () => {
|
|
122
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
123
|
+
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
124
|
+
toast.success(`Selected ${connector?.name || "wallet"}`);
|
|
125
|
+
}, className: cn("crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
|
|
126
|
+
? "connected-wallet border-as-brand bg-as-brand/5"
|
|
127
|
+
: "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet.meta.icon, alt: "Wallet", className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
|
|
128
|
+
e.stopPropagation();
|
|
129
|
+
disconnect();
|
|
130
|
+
toast.success("Wallet disconnected");
|
|
131
|
+
if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
132
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
|
|
133
|
+
}
|
|
134
|
+
}, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) })] })] }) }) })] }))] })] }), showWalletModal &&
|
|
135
|
+
createPortal(_jsx("div", { className: "pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [modalStep === "account-selection" && (_jsx("button", { onClick: () => setModalStep("wallet-selection"), className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(ChevronLeft, { className: "h-5 w-5" }) })), _jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: modalStep === "wallet-selection"
|
|
136
|
+
? "Select a payment method"
|
|
137
|
+
: `Connect ${selectedWalletConnector?.name}` })] }), _jsx("button", { onClick: handleCloseModal, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "space-y-4", children: modalStep === "wallet-selection" ? (_jsx(_Fragment, { children: _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), walletOptions.map(walletOption => {
|
|
138
|
+
const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
|
|
139
|
+
return (_jsx("button", { onClick: async () => {
|
|
140
|
+
setSelectedWalletConnector(walletOption.connector);
|
|
141
|
+
setModalStep("account-selection");
|
|
142
|
+
}, disabled: isPending, className: `w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
|
|
143
|
+
? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
|
|
144
|
+
: "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-12 w-12 items-center justify-center rounded-xl text-xl ${isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"}`, children: walletOption.icon }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && (_jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200", children: "Connected" }))] }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), _jsx(ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
|
|
145
|
+
})] }) })) : (
|
|
146
|
+
/* Account Selection Step */
|
|
147
|
+
_jsxs("div", { className: "space-y-4", children: [_jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: ["Connect to ", selectedWalletConnector?.name, " to view available accounts"] }), _jsx("button", { onClick: async () => {
|
|
148
|
+
handleCloseModal();
|
|
149
|
+
await requestWalletPermissions(selectedWalletConnector);
|
|
150
|
+
}, disabled: isPending, className: "w-full rounded-lg border border-gray-200 bg-white p-4 text-center transition-all hover:border-gray-300 hover:shadow-md disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500", children: _jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700", children: _jsx(Wallet, { className: "h-5 w-5 text-gray-600 dark:text-gray-400" }) }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: isPending
|
|
151
|
+
? `Connecting to ${selectedWalletConnector?.name}...`
|
|
152
|
+
: `Connect ${selectedWalletConnector?.name}` }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isPending ? "Please check your wallet" : "Click to connect and select account" })] })] }) })] })) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
|
|
64
153
|
}
|
|
@@ -139,7 +139,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
|
|
|
139
139
|
const [txHash, setTxHash] = useState();
|
|
140
140
|
const [showQRCode, setShowQRCode] = useState(false);
|
|
141
141
|
const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
|
|
142
|
-
const {
|
|
142
|
+
const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
|
|
143
143
|
const { colorMode } = useColorMode();
|
|
144
144
|
const roundedUpSrcAmount = useMemo(() => {
|
|
145
145
|
// Display the full transfer amount without rounding since users need to see the exact value they're transferring.
|
|
@@ -169,11 +169,11 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
|
|
|
169
169
|
to = order.srcTokenAddress;
|
|
170
170
|
value = BigInt(0);
|
|
171
171
|
}
|
|
172
|
-
const txHash = await
|
|
172
|
+
const txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
|
|
173
173
|
if (txHash) {
|
|
174
174
|
setTxHash(txHash);
|
|
175
175
|
}
|
|
176
|
-
}, [order,
|
|
176
|
+
}, [order, switchChainAndExecuteWithEOA]);
|
|
177
177
|
// Main payment handler that triggers chain switch and payment
|
|
178
178
|
const handlePayment = async () => {
|
|
179
179
|
console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Input,
|
|
2
|
+
import { Input, useProfile, useTokenData } from "../../../../global-account/react/index.js";
|
|
3
3
|
import { formatUsername } from "../../../../shared/utils/index.js";
|
|
4
4
|
import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
|
|
5
5
|
import { formatDisplayNumber } from "../../../../shared/utils/number.js";
|
|
6
6
|
import { ChevronRight } from "lucide-react";
|
|
7
7
|
import { motion } from "motion/react";
|
|
8
8
|
import { useEffect, useRef } from "react";
|
|
9
|
+
import { useAccount } from "wagmi";
|
|
9
10
|
import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
|
|
10
11
|
import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
|
|
11
12
|
import { OrderTokenAmount } from "./OrderTokenAmount.js";
|
|
12
13
|
import { TokenBalance } from "./TokenBalance.js";
|
|
13
14
|
export function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }) {
|
|
14
|
-
const { address:
|
|
15
|
-
const
|
|
15
|
+
const { address: connectedAddress, isConnected } = useAccount();
|
|
16
|
+
const { data: profileData } = useProfile({ address: connectedAddress });
|
|
17
|
+
const connectedName = profileData?.displayName;
|
|
16
18
|
const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
|
|
17
19
|
// Add ref to track if we've applied metadata
|
|
18
20
|
const appliedSrcMetadataRef = useRef(false);
|
|
@@ -38,13 +40,13 @@ export function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChai
|
|
|
38
40
|
useEffect(() => {
|
|
39
41
|
appliedSrcMetadataRef.current = false;
|
|
40
42
|
}, [selectedSrcToken.address, selectedSrcToken.chainId]);
|
|
41
|
-
return (_jsxs(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" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [
|
|
43
|
+
return (_jsxs(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" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })) : (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) }))] }), paymentType === "crypto" ? (_jsxs(_Fragment, { children: [_jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
|
|
42
44
|
setIsSrcInputDirty(true);
|
|
43
45
|
setSrcAmount(value);
|
|
44
46
|
}, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
|
|
45
47
|
style: "currency",
|
|
46
48
|
fallback: "",
|
|
47
|
-
}) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress:
|
|
49
|
+
}) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: connectedAddress, onChangeInput: value => {
|
|
48
50
|
setIsSrcInputDirty(true);
|
|
49
51
|
setSrcAmount(value);
|
|
50
52
|
} })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { type: "text", value: srcAmount, onChange: e => setSrcAmount(e.target.value.replace(/[^0-9.]/g, "")), placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
|