@b3dotfun/sdk 0.0.41 → 0.0.42-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 +1 -0
- package/dist/cjs/anyspend/react/components/AnySpend.js +18 -2
- package/dist/cjs/anyspend/react/components/AnySpendBondKit.js +0 -1
- package/dist/cjs/anyspend/react/components/AnySpendBuySpin.js +0 -1
- package/dist/cjs/anyspend/react/components/AnySpendCustom.d.ts +1 -0
- package/dist/cjs/anyspend/react/components/AnySpendCustom.js +76 -14
- package/dist/cjs/anyspend/react/components/AnySpendNFT.d.ts +2 -1
- package/dist/cjs/anyspend/react/components/AnySpendNFT.js +2 -2
- package/dist/cjs/anyspend/react/components/AnySpendStakeB3.js +0 -1
- package/dist/cjs/anyspend/react/components/AnyspendSignatureMint.js +1 -2
- package/dist/cjs/anyspend/react/components/common/CryptoPaySection.js +1 -1
- package/dist/cjs/anyspend/react/components/common/CryptoReceiveSection.js +2 -1
- package/dist/cjs/anyspend/react/components/common/PanelOnramp.js +4 -1
- package/dist/cjs/anyspend/react/components/common/PointsBadge.d.ts +7 -0
- package/dist/cjs/anyspend/react/components/common/PointsBadge.js +7 -0
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js +5 -3
- package/dist/cjs/anyspend/services/anyspend.d.ts +1 -1
- package/dist/cjs/anyspend/services/anyspend.js +2 -0
- package/dist/cjs/anyspend/types/api.d.ts +41 -1
- package/dist/cjs/anyspend/utils/orderPayload.js +3 -0
- package/dist/cjs/bondkit/components/TradingView.js +3 -4
- package/dist/cjs/bondkit/swapService.js +3 -0
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.js +19 -13
- package/dist/cjs/global-account/react/hooks/index.d.ts +1 -0
- package/dist/cjs/global-account/react/hooks/index.js +3 -1
- package/dist/cjs/global-account/react/hooks/useAccountAssets.js +5 -2
- package/dist/cjs/global-account/react/hooks/useAuthentication.js +1 -1
- package/dist/cjs/global-account/react/hooks/useGlobalAccount.d.ts +6 -0
- package/dist/cjs/global-account/react/hooks/useGlobalAccount.js +32 -0
- package/dist/cjs/global-account/react/hooks/useQueryB3.js +5 -2
- package/dist/cjs/global-account/react/hooks/useQueryBSMNT.js +5 -2
- package/dist/cjs/global-account/react/hooks/useTokenBalancesByChain.js +7 -1
- package/dist/cjs/global-account/react/hooks/useTokenFromUrl.js +2 -2
- package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +1 -2
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +1 -1
- package/dist/cjs/shared/utils/fetchBalances.d.ts +1 -1
- package/dist/esm/anyspend/react/components/AnySpend.d.ts +1 -0
- package/dist/esm/anyspend/react/components/AnySpend.js +18 -2
- package/dist/esm/anyspend/react/components/AnySpendBondKit.js +0 -1
- package/dist/esm/anyspend/react/components/AnySpendBuySpin.js +0 -1
- package/dist/esm/anyspend/react/components/AnySpendCustom.d.ts +1 -0
- package/dist/esm/anyspend/react/components/AnySpendCustom.js +43 -14
- package/dist/esm/anyspend/react/components/AnySpendNFT.d.ts +2 -1
- package/dist/esm/anyspend/react/components/AnySpendNFT.js +2 -2
- package/dist/esm/anyspend/react/components/AnySpendStakeB3.js +0 -1
- package/dist/esm/anyspend/react/components/AnyspendSignatureMint.js +1 -2
- package/dist/esm/anyspend/react/components/common/CryptoPaySection.js +1 -1
- package/dist/esm/anyspend/react/components/common/CryptoReceiveSection.js +2 -1
- package/dist/esm/anyspend/react/components/common/PanelOnramp.js +4 -1
- package/dist/esm/anyspend/react/components/common/PointsBadge.d.ts +7 -0
- package/dist/esm/anyspend/react/components/common/PointsBadge.js +4 -0
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js +5 -3
- package/dist/esm/anyspend/services/anyspend.d.ts +1 -1
- package/dist/esm/anyspend/services/anyspend.js +2 -0
- package/dist/esm/anyspend/types/api.d.ts +41 -1
- package/dist/esm/anyspend/utils/orderPayload.js +3 -0
- package/dist/esm/bondkit/components/TradingView.js +3 -4
- package/dist/esm/bondkit/swapService.js +5 -2
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.js +19 -13
- package/dist/esm/global-account/react/hooks/index.d.ts +1 -0
- package/dist/esm/global-account/react/hooks/index.js +1 -0
- package/dist/esm/global-account/react/hooks/useAccountAssets.js +2 -2
- package/dist/esm/global-account/react/hooks/useAuthentication.js +1 -1
- package/dist/esm/global-account/react/hooks/useGlobalAccount.d.ts +6 -0
- package/dist/esm/global-account/react/hooks/useGlobalAccount.js +29 -0
- package/dist/esm/global-account/react/hooks/useQueryB3.js +5 -2
- package/dist/esm/global-account/react/hooks/useQueryBSMNT.js +5 -2
- package/dist/esm/global-account/react/hooks/useTokenBalancesByChain.js +4 -1
- package/dist/esm/global-account/react/hooks/useTokenFromUrl.js +2 -2
- package/dist/esm/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +2 -3
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +1 -1
- package/dist/esm/shared/utils/fetchBalances.d.ts +1 -1
- package/dist/styles/index.css +1 -1
- package/dist/types/anyspend/react/components/AnySpend.d.ts +1 -0
- package/dist/types/anyspend/react/components/AnySpendCustom.d.ts +1 -0
- package/dist/types/anyspend/react/components/AnySpendNFT.d.ts +2 -1
- package/dist/types/anyspend/react/components/common/PointsBadge.d.ts +7 -0
- package/dist/types/anyspend/services/anyspend.d.ts +1 -1
- package/dist/types/anyspend/types/api.d.ts +41 -1
- package/dist/types/global-account/react/hooks/index.d.ts +1 -0
- package/dist/types/global-account/react/hooks/useGlobalAccount.d.ts +6 -0
- package/dist/types/global-account/react/stores/useModalStore.d.ts +1 -1
- package/dist/types/shared/utils/fetchBalances.d.ts +1 -1
- package/package.json +22 -23
- package/src/anyspend/react/components/AnySpend.tsx +23 -1
- package/src/anyspend/react/components/AnySpendBondKit.tsx +0 -1
- package/src/anyspend/react/components/AnySpendBuySpin.tsx +0 -1
- package/src/anyspend/react/components/AnySpendCustom.tsx +74 -15
- package/src/anyspend/react/components/AnySpendNFT.tsx +3 -0
- package/src/anyspend/react/components/AnySpendStakeB3.tsx +0 -1
- package/src/anyspend/react/components/AnyspendSignatureMint.tsx +1 -2
- package/src/anyspend/react/components/common/CryptoPaySection.tsx +1 -1
- package/src/anyspend/react/components/common/CryptoReceiveSection.tsx +6 -8
- package/src/anyspend/react/components/common/PanelOnramp.tsx +10 -10
- package/src/anyspend/react/components/common/PointsBadge.tsx +20 -0
- package/src/anyspend/react/hooks/useAnyspendFlow.ts +5 -3
- package/src/anyspend/react/hooks/useAnyspendOrderAndTransactions.ts +1 -1
- package/src/anyspend/react/hooks/useCoinbaseOnrampOptions.ts +1 -1
- package/src/anyspend/services/anyspend.ts +3 -1
- package/src/anyspend/types/api.ts +41 -1
- package/src/anyspend/utils/orderPayload.ts +3 -0
- package/src/bondkit/components/TradingView.tsx +3 -5
- package/src/bondkit/swapService.ts +10 -7
- package/src/global-account/react/components/B3Provider/B3Provider.tsx +21 -17
- package/src/global-account/react/hooks/index.ts +1 -0
- package/src/global-account/react/hooks/useAccountAssets.ts +4 -3
- package/src/global-account/react/hooks/useAuthentication.ts +1 -1
- package/src/global-account/react/hooks/useGlobalAccount.tsx +36 -0
- package/src/global-account/react/hooks/useOneBalance.tsx +1 -1
- package/src/global-account/react/hooks/useQueryB3.ts +22 -15
- package/src/global-account/react/hooks/useQueryBSMNT.ts +22 -15
- package/src/global-account/react/hooks/useTokenBalancesByChain.tsx +4 -1
- package/src/global-account/react/hooks/useTokenFromUrl.tsx +2 -2
- package/src/global-account/react/hooks/useUnifiedChainSwitchAndExecute.ts +2 -3
- package/src/global-account/react/stores/useModalStore.ts +1 -1
- package/src/shared/utils/fetchBalances.ts +1 -1
|
@@ -49,7 +49,7 @@ function AnySpend(props) {
|
|
|
49
49
|
const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
|
|
50
50
|
return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendInner, { ...props }) }));
|
|
51
51
|
}
|
|
52
|
-
function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, }) {
|
|
52
|
+
function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, }) {
|
|
53
53
|
const searchParams = (0, react_2.useSearchParamsSSR)();
|
|
54
54
|
const router = (0, react_2.useRouter)();
|
|
55
55
|
// Determine if we're in "buy mode" based on whether destination token props are provided
|
|
@@ -57,6 +57,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
57
57
|
// Add refs to track URL state
|
|
58
58
|
const initialUrlProcessed = (0, react_4.useRef)(false);
|
|
59
59
|
const lastUrlUpdate = (0, react_4.useRef)(null);
|
|
60
|
+
// Track if onSuccess has been called for the current order
|
|
61
|
+
const onSuccessCalled = (0, react_4.useRef)(false);
|
|
60
62
|
const [activeTab, setActiveTab] = (0, react_4.useState)(defaultActiveTab);
|
|
61
63
|
const [orderId, setOrderId] = (0, react_4.useState)(loadOrder);
|
|
62
64
|
const { orderAndTransactions: oat, getOrderAndTransactionsError } = (0, react_1.useAnyspendOrderAndTransactions)(orderId);
|
|
@@ -328,8 +330,9 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
328
330
|
srcTokenAddress: selectedSrcToken.address,
|
|
329
331
|
dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
|
|
330
332
|
type: "swap",
|
|
331
|
-
tradeType: isSrcInputDirty ? "EXACT_INPUT" : "
|
|
333
|
+
tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXACT_OUTPUT",
|
|
332
334
|
amount: activeInputAmountInWei,
|
|
335
|
+
recipientAddress,
|
|
333
336
|
}
|
|
334
337
|
: {
|
|
335
338
|
srcChain: chains_1.base.id,
|
|
@@ -339,6 +342,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
339
342
|
type: "swap",
|
|
340
343
|
tradeType: "EXACT_INPUT",
|
|
341
344
|
amount: srcAmountOnrampInWei,
|
|
345
|
+
recipientAddress,
|
|
342
346
|
onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
|
|
343
347
|
});
|
|
344
348
|
// Load custom recipients from local storage on mount
|
|
@@ -391,6 +395,18 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
391
395
|
}
|
|
392
396
|
}
|
|
393
397
|
}, [anyspendQuote, isSrcInputDirty]);
|
|
398
|
+
(0, react_4.useEffect)(() => {
|
|
399
|
+
if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
|
|
400
|
+
console.log("Calling onSuccess");
|
|
401
|
+
const txHash = oat?.data?.executeTx?.txHash;
|
|
402
|
+
onSuccess?.(txHash);
|
|
403
|
+
onSuccessCalled.current = true;
|
|
404
|
+
}
|
|
405
|
+
}, [oat?.data?.order.status, oat?.data?.executeTx?.txHash, onSuccess]);
|
|
406
|
+
// Reset flag when orderId changes
|
|
407
|
+
(0, react_4.useEffect)(() => {
|
|
408
|
+
onSuccessCalled.current = false;
|
|
409
|
+
}, [orderId]);
|
|
394
410
|
const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOrder)({
|
|
395
411
|
onSuccess: data => {
|
|
396
412
|
const orderId = data.data.id;
|
|
@@ -202,7 +202,6 @@ function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, mi
|
|
|
202
202
|
args: [recipientAddress, (0, viem_1.parseEther)(b3Amount), BigInt(minTokensOut)],
|
|
203
203
|
});
|
|
204
204
|
return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: supported_1.baseMainnet.id, dstToken: dstToken, dstAmount: (0, viem_1.parseEther)(b3Amount).toString(), contractAddress: contractAddress, encodedData: encodedData, metadata: {
|
|
205
|
-
type: "custom",
|
|
206
205
|
action: "BondKit Buy",
|
|
207
206
|
}, header: header, onSuccess: onSuccess, showRecipient: true }));
|
|
208
207
|
}
|
|
@@ -396,7 +396,6 @@ function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress,
|
|
|
396
396
|
// AnySpend flow for when user needs to swap to B3
|
|
397
397
|
const encodedData = generateEncodedDataForBuyEntriesAndSpin(address || "", userSpinQuantity);
|
|
398
398
|
return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: chainId, dstToken: anyspend_1.B3_TOKEN, dstAmount: totalCost.toString(), contractAddress: spinwheelContractAddress, spenderAddress: paymentConfig.entryModule, encodedData: encodedData, metadata: {
|
|
399
|
-
type: "custom",
|
|
400
399
|
action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`,
|
|
401
400
|
}, header: header, onSuccess: txHash => onSuccess?.(txHash), showRecipient: false }));
|
|
402
401
|
}
|
|
@@ -1,4 +1,37 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
2
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
37
|
};
|
|
@@ -16,15 +49,18 @@ const simplehash_1 = require("../../../shared/utils/simplehash");
|
|
|
16
49
|
const invariant_1 = __importDefault(require("invariant"));
|
|
17
50
|
const lucide_react_1 = require("lucide-react");
|
|
18
51
|
const react_3 = require("motion/react");
|
|
19
|
-
const react_4 = require("react");
|
|
52
|
+
const react_4 = __importStar(require("react"));
|
|
20
53
|
const sonner_1 = require("sonner");
|
|
21
54
|
const chains_1 = require("viem/chains");
|
|
55
|
+
const FeatureFlagsContext_1 = require("../contexts/FeatureFlagsContext");
|
|
22
56
|
const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
|
|
23
57
|
const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
|
|
24
58
|
const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
|
|
25
59
|
const OrderDetails_1 = require("./common/OrderDetails");
|
|
26
60
|
const OrderHistory_1 = require("./common/OrderHistory");
|
|
27
61
|
const OrderToken_1 = require("./common/OrderToken");
|
|
62
|
+
const PointsBadge_1 = require("./common/PointsBadge");
|
|
63
|
+
const PointsDetailPanel_1 = require("./common/PointsDetailPanel");
|
|
28
64
|
const RecipientSelection_1 = require("./common/RecipientSelection");
|
|
29
65
|
var PanelView;
|
|
30
66
|
(function (PanelView) {
|
|
@@ -35,8 +71,9 @@ var PanelView;
|
|
|
35
71
|
PanelView[PanelView["RECIPIENT_SELECTION"] = 4] = "RECIPIENT_SELECTION";
|
|
36
72
|
PanelView[PanelView["CRYPTO_PAYMENT_METHOD"] = 5] = "CRYPTO_PAYMENT_METHOD";
|
|
37
73
|
PanelView[PanelView["FIAT_PAYMENT_METHOD"] = 6] = "FIAT_PAYMENT_METHOD";
|
|
74
|
+
PanelView[PanelView["POINTS_DETAIL"] = 7] = "POINTS_DETAIL";
|
|
38
75
|
})(PanelView || (PanelView = {}));
|
|
39
|
-
function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChainId, dstToken, dstAmount, contractAddress, tokenId, contractType, encodedData, spenderAddress, }) {
|
|
76
|
+
function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChainId, dstToken, recipientAddress, dstAmount, contractAddress, tokenId, contractType, encodedData, spenderAddress, }) {
|
|
40
77
|
switch (orderType) {
|
|
41
78
|
case "mint_nft": {
|
|
42
79
|
(0, invariant_1.default)(contractType, "Contract type is required");
|
|
@@ -46,6 +83,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
|
|
|
46
83
|
srcTokenAddress: srcToken.address,
|
|
47
84
|
dstChain: dstChainId,
|
|
48
85
|
dstTokenAddress: dstToken.address,
|
|
86
|
+
recipientAddress,
|
|
49
87
|
price: dstAmount,
|
|
50
88
|
contractAddress: contractAddress,
|
|
51
89
|
tokenId: tokenId,
|
|
@@ -59,6 +97,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
|
|
|
59
97
|
srcTokenAddress: srcToken.address,
|
|
60
98
|
dstChain: dstChainId,
|
|
61
99
|
dstTokenAddress: dstToken.address,
|
|
100
|
+
recipientAddress,
|
|
62
101
|
price: dstAmount,
|
|
63
102
|
contractAddress: contractAddress,
|
|
64
103
|
};
|
|
@@ -70,6 +109,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
|
|
|
70
109
|
srcTokenAddress: srcToken.address,
|
|
71
110
|
dstChain: dstChainId,
|
|
72
111
|
dstTokenAddress: dstToken.address,
|
|
112
|
+
recipientAddress,
|
|
73
113
|
fundAmount: dstAmount,
|
|
74
114
|
contractAddress: contractAddress,
|
|
75
115
|
};
|
|
@@ -81,6 +121,7 @@ function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChai
|
|
|
81
121
|
srcTokenAddress: srcToken.address,
|
|
82
122
|
dstChain: dstChainId,
|
|
83
123
|
dstTokenAddress: dstToken.address,
|
|
124
|
+
recipientAddress,
|
|
84
125
|
payload: {
|
|
85
126
|
amount: dstAmount,
|
|
86
127
|
data: encodedData,
|
|
@@ -98,8 +139,9 @@ function AnySpendCustom(props) {
|
|
|
98
139
|
const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
|
|
99
140
|
return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomInner, { ...props }) }));
|
|
100
141
|
}
|
|
101
|
-
function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, }) {
|
|
142
|
+
function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, onShowPointsDetail, }) {
|
|
102
143
|
const hasMounted = (0, react_2.useHasMounted)();
|
|
144
|
+
const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
|
|
103
145
|
const searchParams = (0, react_2.useSearchParamsSSR)();
|
|
104
146
|
const router = (0, react_2.useRouter)();
|
|
105
147
|
const [activePanel, setActivePanel] = (0, react_4.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
|
|
@@ -114,6 +156,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
114
156
|
// Update recipient logic to use custom recipient
|
|
115
157
|
const recipientAddress = customRecipientAddress || currentWallet.address;
|
|
116
158
|
const [orderId, setOrderId] = (0, react_4.useState)(loadOrder);
|
|
159
|
+
// Track if onSuccess has been called for the current order
|
|
160
|
+
const onSuccessCalled = react_4.default.useRef(false);
|
|
117
161
|
const [srcChainId, setSrcChainId] = (0, react_4.useState)(chains_1.base.id);
|
|
118
162
|
// Get token list for token balance check
|
|
119
163
|
const chainName = (0, react_4.useMemo)(() => (0, simplehash_1.simpleHashChainToChainName)(srcChainId), [srcChainId]);
|
|
@@ -174,10 +218,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
174
218
|
srcToken: activeTab === "fiat" ? constants_1.USDC_BASE : srcToken,
|
|
175
219
|
dstChainId: dstChainId,
|
|
176
220
|
dstToken: dstToken,
|
|
221
|
+
recipientAddress,
|
|
177
222
|
dstAmount: dstAmount,
|
|
178
223
|
contractAddress: contractAddress,
|
|
179
|
-
tokenId:
|
|
180
|
-
contractType:
|
|
224
|
+
tokenId: orderType === "mint_nft" ? metadata?.nftContract?.tokenId : undefined,
|
|
225
|
+
contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
|
|
181
226
|
encodedData: encodedData,
|
|
182
227
|
spenderAddress: spenderAddress,
|
|
183
228
|
});
|
|
@@ -190,8 +235,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
190
235
|
encodedData,
|
|
191
236
|
metadata?.nftContract?.tokenId,
|
|
192
237
|
metadata?.nftContract?.type,
|
|
193
|
-
metadata?.type,
|
|
194
238
|
orderType,
|
|
239
|
+
recipientAddress,
|
|
195
240
|
spenderAddress,
|
|
196
241
|
srcChainId,
|
|
197
242
|
srcToken,
|
|
@@ -226,12 +271,17 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
226
271
|
// Get geo data and onramp options (after quote is available)
|
|
227
272
|
const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcFiatAmount);
|
|
228
273
|
(0, react_4.useEffect)(() => {
|
|
229
|
-
if (oat?.data?.order.status === "executed") {
|
|
274
|
+
if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
|
|
230
275
|
console.log("Calling onSuccess");
|
|
231
276
|
const txHash = oat?.data?.executeTx?.txHash;
|
|
232
277
|
onSuccess?.(txHash);
|
|
278
|
+
onSuccessCalled.current = true;
|
|
233
279
|
}
|
|
234
|
-
}, [oat?.data?.
|
|
280
|
+
}, [oat?.data?.order.status, oat?.data?.executeTx?.txHash, onSuccess]);
|
|
281
|
+
// Reset flag when orderId changes
|
|
282
|
+
(0, react_4.useEffect)(() => {
|
|
283
|
+
onSuccessCalled.current = false;
|
|
284
|
+
}, [orderId]);
|
|
235
285
|
const { createOrder: createRegularOrder, isCreatingOrder: isCreatingRegularOrder } = (0, react_1.useAnyspendCreateOrder)({
|
|
236
286
|
onSuccess: data => {
|
|
237
287
|
setOrderId(data.data.id);
|
|
@@ -267,7 +317,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
267
317
|
srcAmount: srcAmount.toString(),
|
|
268
318
|
recipientAddress,
|
|
269
319
|
creatorAddress: currentWallet?.wallet?.address,
|
|
270
|
-
nft:
|
|
320
|
+
nft: orderType === "mint_nft"
|
|
271
321
|
? metadata.nftContract.type === "erc1155"
|
|
272
322
|
? {
|
|
273
323
|
type: "erc1155",
|
|
@@ -288,7 +338,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
288
338
|
imageUrl: metadata.nftContract.imageUrl,
|
|
289
339
|
}
|
|
290
340
|
: undefined,
|
|
291
|
-
tournament:
|
|
341
|
+
tournament: orderType === "join_tournament" || orderType === "fund_tournament"
|
|
292
342
|
? {
|
|
293
343
|
...metadata.tournament,
|
|
294
344
|
contractAddress: contractAddress,
|
|
@@ -296,13 +346,12 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
296
346
|
}
|
|
297
347
|
: undefined,
|
|
298
348
|
// only populate payload for custom tx
|
|
299
|
-
payload:
|
|
349
|
+
payload: orderType === "custom"
|
|
300
350
|
? {
|
|
301
351
|
amount: dstAmount,
|
|
302
352
|
data: encodedData,
|
|
303
353
|
spenderAddress: spenderAddress,
|
|
304
354
|
to: contractAddress,
|
|
305
|
-
action: metadata.action,
|
|
306
355
|
}
|
|
307
356
|
: undefined,
|
|
308
357
|
};
|
|
@@ -427,6 +476,16 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
427
476
|
router.push(`${window.location.pathname}?${params.toString()}`);
|
|
428
477
|
} })), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }));
|
|
429
478
|
const loadingView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [(0, jsx_runtime_1.jsxs)(react_2.Badge, { variant: "default", className: "bg-b3-react-muted/30 border-b3-react-border hover:bg-b3-react-muted/50 flex items-center gap-3 px-4 py-1 text-base transition-all", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-react-foreground size-4 animate-spin" }), (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1, className: "font-sf-rounded text-base font-semibold", children: "Loading..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-8 w-48" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "ml-4 h-8 w-32" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mt-4 h-8 w-24" })] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-4 h-12 w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)(react_2.Skeleton, { className: "rounded-lg bg-white/5 p-6 pb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "size-[200px]" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("div", { className: "size-5 rounded-full" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col gap-2", children: [1, 2, 3].map(i => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }, i))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-muted/30 mt-8 w-full rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "mb-3 h-4 w-48" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 flex-1" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-3", children: [1, 2, 3, 4, 5].map(i => ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-24" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-32" })] }, i))) }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-10 w-full" }), mode === "page" && (0, jsx_runtime_1.jsx)("div", { className: "h-12" })] }));
|
|
479
|
+
// Render points badge if conditions are met
|
|
480
|
+
const renderPointsBadge = () => {
|
|
481
|
+
if (featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0) {
|
|
482
|
+
return ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => {
|
|
483
|
+
onShowPointsDetail?.();
|
|
484
|
+
setActivePanel(PanelView.POINTS_DETAIL);
|
|
485
|
+
} }));
|
|
486
|
+
}
|
|
487
|
+
return null;
|
|
488
|
+
};
|
|
430
489
|
// Confirm order view.
|
|
431
490
|
const confirmOrderView = ((0, jsx_runtime_1.jsxs)("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), (0, jsx_runtime_1.jsxs)(react_2.Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
|
|
432
491
|
setActiveTab("crypto");
|
|
@@ -451,7 +510,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
451
510
|
opacity: hasMounted ? 1 : 0,
|
|
452
511
|
y: hasMounted ? 0 : 20,
|
|
453
512
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
454
|
-
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
|
|
513
|
+
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), renderPointsBadge()] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
|
|
455
514
|
opacity: hasMounted ? 1 : 0,
|
|
456
515
|
y: hasMounted ? 0 : 20,
|
|
457
516
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
@@ -463,7 +522,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
463
522
|
opacity: hasMounted ? 1 : 0,
|
|
464
523
|
y: hasMounted ? 0 : 20,
|
|
465
524
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
466
|
-
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(USD)" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
|
|
525
|
+
}, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(USD)" })] }), renderPointsBadge()] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
|
|
467
526
|
opacity: hasMounted ? 1 : 0,
|
|
468
527
|
y: hasMounted ? 0 : 20,
|
|
469
528
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
@@ -490,6 +549,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
490
549
|
setSelectedFiatPaymentMethod(method);
|
|
491
550
|
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
492
551
|
}, srcAmountOnRamp: srcFiatAmount }) }));
|
|
552
|
+
// Points detail view
|
|
553
|
+
const pointsDetailView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
|
|
493
554
|
// Return the TransitionPanel with all views
|
|
494
555
|
return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
|
|
495
556
|
? oat
|
|
@@ -509,5 +570,6 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
509
570
|
(0, jsx_runtime_1.jsx)("div", { className: "w-full", children: recipientSelectionView }, "recipient-selection-view"),
|
|
510
571
|
(0, jsx_runtime_1.jsx)("div", { className: "w-full", children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
|
|
511
572
|
(0, jsx_runtime_1.jsx)("div", { className: "w-full", children: fiatPaymentMethodView }, "fiat-payment-method-view"),
|
|
573
|
+
(0, jsx_runtime_1.jsx)("div", { className: "w-full", children: pointsDetailView }, "points-detail-view"),
|
|
512
574
|
] }) }));
|
|
513
575
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { components } from "../../../anyspend/types/api";
|
|
2
|
-
export declare function AnySpendNFT({ loadOrder, mode, recipientAddress, nftContract, onSuccess, }: {
|
|
2
|
+
export declare function AnySpendNFT({ loadOrder, mode, recipientAddress, nftContract, onSuccess, onShowPointsDetail, }: {
|
|
3
3
|
loadOrder?: string;
|
|
4
4
|
mode?: "modal" | "page";
|
|
5
5
|
recipientAddress?: string;
|
|
6
6
|
nftContract: components["schemas"]["NftContract"];
|
|
7
7
|
onSuccess?: (txHash?: string) => void;
|
|
8
|
+
onShowPointsDetail?: () => void;
|
|
8
9
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -29,7 +29,7 @@ const CONTRACT_URI_ABI = [
|
|
|
29
29
|
type: "function",
|
|
30
30
|
},
|
|
31
31
|
];
|
|
32
|
-
function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, }) {
|
|
32
|
+
function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, onShowPointsDetail, }) {
|
|
33
33
|
const [imageUrlWithFallback, setFallbackImageUrl] = (0, react_3.useState)(nftContract.imageUrl);
|
|
34
34
|
const [isLoadingFallback, setIsLoadingFallback] = (0, react_3.useState)(false);
|
|
35
35
|
// Fetch contract metadata when imageUrl is empty
|
|
@@ -89,7 +89,7 @@ function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract,
|
|
|
89
89
|
return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { loadOrder: loadOrder, mode: mode, activeTab: "fiat", recipientAddress: recipientAddress, orderType: "mint_nft", dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: {
|
|
90
90
|
type: "mint_nft",
|
|
91
91
|
nftContract: nftContract,
|
|
92
|
-
}, header: header, onSuccess: onSuccess }));
|
|
92
|
+
}, header: header, onSuccess: onSuccess, onShowPointsDetail: onShowPointsDetail }));
|
|
93
93
|
}
|
|
94
94
|
function DropdownMenu({ nftContract }) {
|
|
95
95
|
const [open, setOpen] = (0, react_3.useState)(false);
|
|
@@ -264,7 +264,6 @@ function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmo
|
|
|
264
264
|
}
|
|
265
265
|
const encodedData = generateEncodedDataForStakingB3(userStakeAmount, recipientAddress);
|
|
266
266
|
return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: chains_1.base.id, dstToken: anyspend_1.B3_TOKEN, dstAmount: userStakeAmount, contractAddress: ERC20Staking, encodedData: encodedData, metadata: {
|
|
267
|
-
type: "custom",
|
|
268
267
|
action: "stake B3",
|
|
269
268
|
}, header: header, onSuccess: onSuccess, showRecipient: true }));
|
|
270
269
|
}
|
|
@@ -72,8 +72,7 @@ function AnyspendSignatureMint({ loadOrder, mode = "modal", signatureData, image
|
|
|
72
72
|
}
|
|
73
73
|
const encodedData = generateEncodedDataForSignatureMint(signatureData);
|
|
74
74
|
const price = (0, viem_1.parseEther)(signatureData.payload.price?.toString() || "0");
|
|
75
|
-
return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: signatureData.payload.to, orderType: "custom", dstChainId: signatureData.collection.chainId, dstToken: dstToken, dstAmount: price.toString(), contractAddress: signatureData.collection.address, encodedData: encodedData, metadata: {
|
|
76
|
-
type: "custom",
|
|
75
|
+
return ((0, jsx_runtime_1.jsx)(AnySpendCustom_1.AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: signatureData.payload.to, orderType: "custom", dstChainId: signatureData.collection.chainId, dstToken: dstToken, dstAmount: price.toString(), contractAddress: signatureData.collection.address || "", encodedData: encodedData, metadata: {
|
|
77
76
|
action: "Signature Mint",
|
|
78
77
|
}, header: header, onSuccess: onSuccess, showRecipient: true }));
|
|
79
78
|
}
|
|
@@ -18,7 +18,7 @@ function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedS
|
|
|
18
18
|
// Determine which address to use based on payment method
|
|
19
19
|
const walletAddress = selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET
|
|
20
20
|
? connectedSmartWallet?.getAccount()?.address
|
|
21
|
-
: connectedEOAWallet?.getAccount()?.address
|
|
21
|
+
: connectedEOAWallet?.getAccount()?.address;
|
|
22
22
|
const { data: profileData } = (0, react_1.useProfile)({ address: walletAddress });
|
|
23
23
|
const connectedName = profileData?.displayName;
|
|
24
24
|
// Add ref to track if we've applied metadata
|
|
@@ -10,6 +10,7 @@ const lucide_react_1 = require("lucide-react");
|
|
|
10
10
|
const react_1 = require("motion/react");
|
|
11
11
|
const FeatureFlagsContext_1 = require("../../contexts/FeatureFlagsContext");
|
|
12
12
|
const OrderTokenAmount_1 = require("./OrderTokenAmount");
|
|
13
|
+
const PointsBadge_1 = require("./PointsBadge");
|
|
13
14
|
function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, onShowPointsDetail, }) {
|
|
14
15
|
const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
|
|
15
16
|
return ((0, jsx_runtime_1.jsxs)(react_1.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "receive-section 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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: isDepositMode ? "Deposit" : "Receive" }), selectedRecipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, cn_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(selectedRecipientAddress || "") }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: onSelectRecipient, children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode || isDepositMode ? (
|
|
@@ -51,5 +52,5 @@ function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, select
|
|
|
51
52
|
}
|
|
52
53
|
// Using inline style to ensure color displays
|
|
53
54
|
return ((0, jsx_runtime_1.jsxs)("span", { className: "ml-2", style: { color: percentageNum >= 10 ? "red" : "#FFD700" }, children: ["(", isNegative ? "-" : "", percentage, "%)"] }));
|
|
54
|
-
})()] }), featureFlags.showPoints && anyspendQuote?.data?.pointsAmount
|
|
55
|
+
})()] }), featureFlags.showPoints && anyspendQuote?.data?.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] })] }));
|
|
55
56
|
}
|
|
@@ -13,6 +13,7 @@ const sonner_1 = require("sonner");
|
|
|
13
13
|
const FeatureFlagsContext_1 = require("../../contexts/FeatureFlagsContext");
|
|
14
14
|
const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
|
|
15
15
|
const OrderTokenAmountFiat_1 = require("./OrderTokenAmountFiat");
|
|
16
|
+
const PointsBadge_1 = require("./PointsBadge");
|
|
16
17
|
function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, onShowPointsDetail, }) {
|
|
17
18
|
const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
|
|
18
19
|
// Get geo-based onramp options to access fee information
|
|
@@ -78,5 +79,7 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
|
|
|
78
79
|
: "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && ((0, jsx_runtime_1.jsx)(OrderTokenAmountFiat_1.OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.formatAddress)(_recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? chain_1.ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: chain_1.ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-sm", children: (() => {
|
|
79
80
|
const fee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE);
|
|
80
81
|
return fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total";
|
|
81
|
-
})() }), featureFlags.showPoints &&
|
|
82
|
+
})() }), featureFlags.showPoints &&
|
|
83
|
+
anyspendQuote?.data?.pointsAmount &&
|
|
84
|
+
anyspendQuote?.data?.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)(PointsBadge_1.PointsBadge, { pointsAmount: anyspendQuote.data.pointsAmount, pointsMultiplier: anyspendQuote.data.pointsMultiplier, onClick: () => onShowPointsDetail?.() }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE).toFixed(2)] })] }) })] })] }));
|
|
82
85
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PointsBadge = PointsBadge;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
function PointsBadge({ pointsAmount, pointsMultiplier, onClick }) {
|
|
6
|
+
return ((0, jsx_runtime_1.jsxs)("button", { className: "bg-as-brand hover:scale-102 active:scale-98 relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 transition-all", onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 h-full w-full rounded-lg border border-white/10 border-t-white/20 bg-gradient-to-b from-white/10 to-white/0" }), (0, jsx_runtime_1.jsxs)("span", { className: "relative text-xs text-white", children: ["+", pointsAmount.toLocaleString(), " pts", pointsMultiplier && pointsMultiplier > 1 && (0, jsx_runtime_1.jsxs)("span", { className: "ml-1 opacity-80", children: ["(", pointsMultiplier, "x)"] })] })] }));
|
|
7
|
+
}
|
|
@@ -111,15 +111,17 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
|
|
|
111
111
|
}
|
|
112
112
|
};
|
|
113
113
|
// Get quote
|
|
114
|
-
|
|
114
|
+
// For fiat payments, always use USDC decimals (6) regardless of selectedSrcToken
|
|
115
|
+
const effectiveDecimals = paymentType === "fiat" ? anyspend_1.USDC_BASE.decimals : selectedSrcToken.decimals;
|
|
116
|
+
const activeInputAmountInWei = (0, viem_1.parseUnits)(srcAmount.replace(/,/g, ""), effectiveDecimals).toString();
|
|
115
117
|
const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = (0, react_1.useAnyspendQuote)({
|
|
116
118
|
srcChain: paymentType === "fiat" ? chains_1.base.id : selectedSrcChainId,
|
|
117
119
|
dstChain: isDepositMode ? chains_1.base.id : selectedDstChainId, // For deposits, always Base; for swaps, use selected destination
|
|
118
120
|
srcTokenAddress: paymentType === "fiat" ? anyspend_1.USDC_BASE.address : selectedSrcToken.address,
|
|
119
121
|
dstTokenAddress: isDepositMode ? anyspend_1.B3_TOKEN.address : selectedSrcToken.address, // For deposits, always B3
|
|
120
|
-
type: "
|
|
121
|
-
tradeType: "EXACT_INPUT",
|
|
122
|
+
type: "hype_duel",
|
|
122
123
|
amount: activeInputAmountInWei,
|
|
124
|
+
recipientAddress: selectedRecipientAddress,
|
|
123
125
|
onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
|
|
124
126
|
});
|
|
125
127
|
// Get geo options for fiat
|
|
@@ -28,7 +28,7 @@ export declare const anyspendService: {
|
|
|
28
28
|
}>;
|
|
29
29
|
getOrderAndTransactions: (orderId: string | undefined) => Promise<GetOrderAndTxsResponse>;
|
|
30
30
|
getOrderHistory: (creatorAddress: string | undefined, limit?: number, offset?: number) => Promise<GetOrderHistoryResponse>;
|
|
31
|
-
getCoinbaseOnrampOptions: (country: string, visitorData?: VisitorData) => Promise<GetCoinbaseOnrampOptionsResponse>;
|
|
31
|
+
getCoinbaseOnrampOptions: (country: string | undefined, visitorData?: VisitorData) => Promise<GetCoinbaseOnrampOptionsResponse>;
|
|
32
32
|
checkStripeSupport: (usdAmount?: string, visitorData?: VisitorData) => Promise<{
|
|
33
33
|
stripeOnramp: boolean;
|
|
34
34
|
stripeWeb2: components["schemas"]["StripeWeb2Support"];
|
|
@@ -69,6 +69,7 @@ exports.anyspendService = {
|
|
|
69
69
|
return data;
|
|
70
70
|
},
|
|
71
71
|
getOrderAndTransactions: async (orderId) => {
|
|
72
|
+
(0, invariant_1.default)(orderId, "orderId is required");
|
|
72
73
|
const response = await fetch(`${constants_1.ANYSPEND_MAINNET_BASE_URL}/orders/${orderId}`);
|
|
73
74
|
const data = await response.json();
|
|
74
75
|
return data;
|
|
@@ -86,6 +87,7 @@ exports.anyspendService = {
|
|
|
86
87
|
return data;
|
|
87
88
|
},
|
|
88
89
|
getCoinbaseOnrampOptions: async (country, visitorData) => {
|
|
90
|
+
(0, invariant_1.default)(country, "country is required");
|
|
89
91
|
const params = new URLSearchParams({
|
|
90
92
|
country,
|
|
91
93
|
// include fingerprintId and requestId in the query params
|
|
@@ -503,11 +503,16 @@ export interface paths {
|
|
|
503
503
|
* @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
|
|
504
504
|
*/
|
|
505
505
|
dstTokenAddress: string;
|
|
506
|
+
/**
|
|
507
|
+
* @description Recipient address
|
|
508
|
+
* @example 0x55c71fca5e01cf246718748ae540473e608d0282
|
|
509
|
+
*/
|
|
510
|
+
recipientAddress?: string;
|
|
506
511
|
/**
|
|
507
512
|
* @description Type of trade execution
|
|
508
513
|
* @enum {string}
|
|
509
514
|
*/
|
|
510
|
-
tradeType: "EXACT_INPUT" | "
|
|
515
|
+
tradeType: "EXACT_INPUT" | "EXACT_OUTPUT";
|
|
511
516
|
/**
|
|
512
517
|
* @description Amount to quote
|
|
513
518
|
* @example 1000000000000000000
|
|
@@ -544,6 +549,11 @@ export interface paths {
|
|
|
544
549
|
* @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
|
|
545
550
|
*/
|
|
546
551
|
dstTokenAddress: string;
|
|
552
|
+
/**
|
|
553
|
+
* @description Recipient address
|
|
554
|
+
* @example 0x55c71fca5e01cf246718748ae540473e608d0282
|
|
555
|
+
*/
|
|
556
|
+
recipientAddress?: string;
|
|
547
557
|
/** @description Custom payload for execution */
|
|
548
558
|
payload: {
|
|
549
559
|
/** @description Encoded transaction data */
|
|
@@ -567,6 +577,11 @@ export interface paths {
|
|
|
567
577
|
dstChain: number;
|
|
568
578
|
srcTokenAddress: string;
|
|
569
579
|
dstTokenAddress: string;
|
|
580
|
+
/**
|
|
581
|
+
* @description Recipient address
|
|
582
|
+
* @example 0x55c71fca5e01cf246718748ae540473e608d0282
|
|
583
|
+
*/
|
|
584
|
+
recipientAddress?: string;
|
|
570
585
|
/** @enum {string} */
|
|
571
586
|
onrampVendor?: "coinbase" | "stripe" | "stripe-web2";
|
|
572
587
|
contractAddress: string;
|
|
@@ -581,6 +596,11 @@ export interface paths {
|
|
|
581
596
|
dstChain: number;
|
|
582
597
|
srcTokenAddress: string;
|
|
583
598
|
dstTokenAddress: string;
|
|
599
|
+
/**
|
|
600
|
+
* @description Recipient address
|
|
601
|
+
* @example 0x55c71fca5e01cf246718748ae540473e608d0282
|
|
602
|
+
*/
|
|
603
|
+
recipientAddress?: string;
|
|
584
604
|
/** @enum {string} */
|
|
585
605
|
onrampVendor?: "coinbase" | "stripe" | "stripe-web2";
|
|
586
606
|
contractAddress: string;
|
|
@@ -592,6 +612,11 @@ export interface paths {
|
|
|
592
612
|
dstChain: number;
|
|
593
613
|
srcTokenAddress: string;
|
|
594
614
|
dstTokenAddress: string;
|
|
615
|
+
/**
|
|
616
|
+
* @description Recipient address
|
|
617
|
+
* @example 0x55c71fca5e01cf246718748ae540473e608d0282
|
|
618
|
+
*/
|
|
619
|
+
recipientAddress?: string;
|
|
595
620
|
/** @enum {string} */
|
|
596
621
|
onrampVendor?: "coinbase" | "stripe" | "stripe-web2";
|
|
597
622
|
contractAddress: string;
|
|
@@ -622,6 +647,11 @@ export interface paths {
|
|
|
622
647
|
* @example 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
|
|
623
648
|
*/
|
|
624
649
|
dstTokenAddress: string;
|
|
650
|
+
/**
|
|
651
|
+
* @description Recipient address
|
|
652
|
+
* @example 0x55c71fca5e01cf246718748ae540473e608d0282
|
|
653
|
+
*/
|
|
654
|
+
recipientAddress?: string;
|
|
625
655
|
/**
|
|
626
656
|
* @description Amount to quote
|
|
627
657
|
* @example 1000000000000000000
|
|
@@ -1087,6 +1117,11 @@ export interface components {
|
|
|
1087
1117
|
* @example 990000
|
|
1088
1118
|
*/
|
|
1089
1119
|
actualDstAmount: string | null;
|
|
1120
|
+
/**
|
|
1121
|
+
* @description Amount in after fee
|
|
1122
|
+
* @example 990000
|
|
1123
|
+
*/
|
|
1124
|
+
amountInAfterFee: string | null;
|
|
1090
1125
|
};
|
|
1091
1126
|
/** @description HypeDuel-specific payload */
|
|
1092
1127
|
HypeDuelPayload: {
|
|
@@ -1100,6 +1135,11 @@ export interface components {
|
|
|
1100
1135
|
* @example 990000
|
|
1101
1136
|
*/
|
|
1102
1137
|
actualDstAmount: string | null;
|
|
1138
|
+
/**
|
|
1139
|
+
* @description Amount in after fee
|
|
1140
|
+
* @example 990000
|
|
1141
|
+
*/
|
|
1142
|
+
amountInAfterFee: string | null;
|
|
1103
1143
|
};
|
|
1104
1144
|
/** @description Custom execution payload */
|
|
1105
1145
|
CustomPayload: {
|