@b3dotfun/sdk 0.0.29-alpha.1 → 0.0.29-alpha.2
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/constants/index.d.ts +1 -0
- package/dist/cjs/anyspend/constants/index.js +2 -1
- package/dist/cjs/anyspend/react/components/AnySpend.js +1 -1
- package/dist/cjs/anyspend/react/components/AnySpendCustom.js +1 -1
- package/dist/cjs/anyspend/react/components/AnyspendDepositHype.d.ts +4 -2
- package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +9 -8
- package/dist/cjs/anyspend/react/components/common/OrderDetailsCollapsible.js +6 -4
- package/dist/cjs/anyspend/react/components/common/OrderStatus.d.ts +2 -0
- package/dist/cjs/anyspend/react/components/common/OrderStatus.js +2 -2
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +2 -0
- package/dist/esm/anyspend/constants/index.d.ts +1 -0
- package/dist/esm/anyspend/constants/index.js +1 -0
- package/dist/esm/anyspend/react/components/AnySpend.js +1 -1
- package/dist/esm/anyspend/react/components/AnySpendCustom.js +1 -1
- package/dist/esm/anyspend/react/components/AnyspendDepositHype.d.ts +4 -2
- package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +11 -10
- package/dist/esm/anyspend/react/components/common/OrderDetailsCollapsible.js +7 -5
- package/dist/esm/anyspend/react/components/common/OrderStatus.d.ts +2 -0
- package/dist/esm/anyspend/react/components/common/OrderStatus.js +2 -2
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +2 -0
- package/dist/styles/index.css +1 -1
- package/dist/types/anyspend/constants/index.d.ts +1 -0
- package/dist/types/anyspend/react/components/AnyspendDepositHype.d.ts +4 -2
- package/dist/types/anyspend/react/components/common/OrderStatus.d.ts +2 -0
- package/dist/types/global-account/react/stores/useModalStore.d.ts +2 -0
- package/package.json +1 -1
- package/src/anyspend/constants/index.ts +2 -0
- package/src/anyspend/react/components/AnySpend.tsx +1 -1
- package/src/anyspend/react/components/AnySpendCustom.tsx +1 -1
- package/src/anyspend/react/components/AnyspendDepositHype.tsx +131 -129
- package/src/anyspend/react/components/common/OrderDetailsCollapsible.tsx +10 -4
- package/src/anyspend/react/components/common/OrderStatus.tsx +9 -2
- package/src/global-account/react/stores/useModalStore.ts +2 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.VENDOR_DISPLAY_NAMES = exports.PAYMENT_METHOD_ICONS = exports.STRIPE_CONFIG = exports.DEFAULT_NFT_CONTRACT = exports.NFT_CONTRACTS = exports.ETH_BASE = exports.USDC_BASE = exports.B3_TOKEN = exports.SOLANA_TOKEN_2022_PROGRAM_ID = exports.SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = exports.RELAY_SOLANA_MAINNET_CHAIN_ID = exports.RELAY_SOL_ADDRESS = exports.RELAY_ETH_ADDRESS = exports.ANYSPEND_MAINNET_BASE_URL = void 0;
|
|
3
|
+
exports.DEPOSIT_HYPE_ACTION = exports.VENDOR_DISPLAY_NAMES = exports.PAYMENT_METHOD_ICONS = exports.STRIPE_CONFIG = exports.DEFAULT_NFT_CONTRACT = exports.NFT_CONTRACTS = exports.ETH_BASE = exports.USDC_BASE = exports.B3_TOKEN = exports.SOLANA_TOKEN_2022_PROGRAM_ID = exports.SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = exports.RELAY_SOLANA_MAINNET_CHAIN_ID = exports.RELAY_SOL_ADDRESS = exports.RELAY_ETH_ADDRESS = exports.ANYSPEND_MAINNET_BASE_URL = void 0;
|
|
4
4
|
const chains_1 = require("viem/chains");
|
|
5
5
|
exports.ANYSPEND_MAINNET_BASE_URL = process.env.NEXT_PUBLIC_ANYSPEND_BASE_URL || "https://mainnet.anyspend.com";
|
|
6
6
|
exports.RELAY_ETH_ADDRESS = "0x0000000000000000000000000000000000000000";
|
|
@@ -81,3 +81,4 @@ exports.VENDOR_DISPLAY_NAMES = {
|
|
|
81
81
|
stripe: "Stripe",
|
|
82
82
|
unknown: "Unknown Vendor",
|
|
83
83
|
};
|
|
84
|
+
exports.DEPOSIT_HYPE_ACTION = "deposit_hype";
|
|
@@ -657,7 +657,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
657
657
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
658
658
|
}, [activePanel]);
|
|
659
659
|
const historyView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => setActivePanel(PanelView.MAIN), onSelectOrder: onSelectOrder }) }));
|
|
660
|
-
const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order }), (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
|
|
660
|
+
const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
|
|
661
661
|
setOrderId(undefined);
|
|
662
662
|
setActivePanel(PanelView.MAIN);
|
|
663
663
|
setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back
|
|
@@ -419,7 +419,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
419
419
|
const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
|
|
420
420
|
setActivePanel(PanelView.HISTORY);
|
|
421
421
|
}, onSelectOrder: onSelectOrder }) }));
|
|
422
|
-
const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order }), (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
|
|
422
|
+
const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
|
|
423
423
|
setOrderId(undefined);
|
|
424
424
|
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
425
425
|
// Remove orderId from URL when canceling
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface AnySpendDepositHypeProps {
|
|
2
2
|
loadOrder?: string;
|
|
3
3
|
mode?: "modal" | "page";
|
|
4
4
|
recipientAddress: string;
|
|
@@ -7,4 +7,6 @@ export declare function AnySpendDepositHype(props: {
|
|
|
7
7
|
sourceTokenChainId?: number;
|
|
8
8
|
onSuccess?: () => void;
|
|
9
9
|
depositContractAddress?: string;
|
|
10
|
-
|
|
10
|
+
mainFooter?: React.ReactNode;
|
|
11
|
+
}
|
|
12
|
+
export declare function AnySpendDepositHype(props: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -40,7 +40,7 @@ function AnySpendDepositHype(props) {
|
|
|
40
40
|
const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
|
|
41
41
|
return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendDepositHypeInner, { ...props }) }));
|
|
42
42
|
}
|
|
43
|
-
function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, depositContractAddress, }) {
|
|
43
|
+
function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, depositContractAddress, mainFooter, }) {
|
|
44
44
|
// Use shared flow hook
|
|
45
45
|
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, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
|
|
46
46
|
paymentType,
|
|
@@ -122,6 +122,10 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
122
122
|
await handleFiatOrder();
|
|
123
123
|
}
|
|
124
124
|
};
|
|
125
|
+
const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(PaySection_1.PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
|
|
126
|
+
setIsSrcInputDirty(false);
|
|
127
|
+
setSrcAmount(value);
|
|
128
|
+
}, anyspendQuote: anyspendQuote }))] }) }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
|
|
125
129
|
// Handle crypto order creation
|
|
126
130
|
const handleCryptoOrder = async () => {
|
|
127
131
|
try {
|
|
@@ -144,7 +148,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
144
148
|
amount: depositAmountWei,
|
|
145
149
|
data: encodedData,
|
|
146
150
|
to: depositContractAddress,
|
|
147
|
-
action:
|
|
151
|
+
action: anyspend_1.DEPOSIT_HYPE_ACTION,
|
|
148
152
|
},
|
|
149
153
|
});
|
|
150
154
|
}
|
|
@@ -206,7 +210,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
206
210
|
amount: depositAmountWei,
|
|
207
211
|
data: encodedData,
|
|
208
212
|
to: depositContractAddress,
|
|
209
|
-
action:
|
|
213
|
+
action: anyspend_1.DEPOSIT_HYPE_ACTION,
|
|
210
214
|
},
|
|
211
215
|
});
|
|
212
216
|
}
|
|
@@ -216,7 +220,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
216
220
|
}
|
|
217
221
|
};
|
|
218
222
|
// Order details view
|
|
219
|
-
const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order }), (0, jsx_runtime_1.jsx)(OrderDetails_1.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" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
|
|
223
|
+
const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetails_1.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" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
|
|
220
224
|
setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
|
|
221
225
|
onSuccess?.();
|
|
222
226
|
} })] })) }) }));
|
|
@@ -250,10 +254,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
250
254
|
center: { x: 0, opacity: 1 },
|
|
251
255
|
exit: { x: -300, opacity: 0 },
|
|
252
256
|
}, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
|
|
253
|
-
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children:
|
|
254
|
-
setIsSrcInputDirty(false);
|
|
255
|
-
setSrcAmount(value);
|
|
256
|
-
}, anyspendQuote: anyspendQuote }))] }) }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) })] }) }, "main-view"),
|
|
257
|
+
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: mainView }, "main-view"),
|
|
257
258
|
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
|
|
258
259
|
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
|
|
259
260
|
(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
|
|
@@ -35,8 +35,10 @@ exports.OrderDetailsCollapsible = (0, react_3.memo)(function OrderDetailsCollaps
|
|
|
35
35
|
: order.type === "fund_tournament"
|
|
36
36
|
? "Fund tournament"
|
|
37
37
|
: order.type === "custom"
|
|
38
|
-
? order.metadata.action
|
|
39
|
-
?
|
|
40
|
-
:
|
|
41
|
-
|
|
38
|
+
? order.metadata.action === anyspend_1.DEPOSIT_HYPE_ACTION
|
|
39
|
+
? "Deposit HYPE"
|
|
40
|
+
: order.metadata.action
|
|
41
|
+
? (0, anyspend_1.capitalizeFirstLetter)(order.metadata.action)
|
|
42
|
+
: "Contract execution"
|
|
43
|
+
: "" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-end gap-2", children: [order.type === "swap" ? (`~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === "mint_nft" ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("div", { children: tournament?.name || "Tournament" })] })) : order.type === "custom" && order.metadata.action === anyspend_1.DEPOSIT_HYPE_ACTION ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, number_1.formatTokenAmount)(BigInt(order.payload.amount), dstToken.decimals), " HYPE"] }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { children: ["on ", order.dstChain !== chains_1.b3.id && (0, anyspend_1.getChainName)(order.dstChain)] }), (0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[order.dstChain].logoUrl, alt: (0, anyspend_1.getChainName)(order.dstChain), className: (0, utils_1.cn)("h-3", order.dstChain !== chains_1.b3.id && "w-3 rounded-full", order.dstChain === chains_1.b3.id && "h-4") })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsx)("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" })] })) }));
|
|
42
44
|
});
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { components } from "../../../../anyspend/types/api";
|
|
2
|
+
import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
|
|
2
3
|
export declare const OrderStatus: import("react").NamedExoticComponent<{
|
|
3
4
|
order: components["schemas"]["Order"];
|
|
5
|
+
selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
|
|
4
6
|
}>;
|
|
@@ -7,11 +7,11 @@ const react_1 = require("../../../../shared/react");
|
|
|
7
7
|
const lucide_react_1 = require("lucide-react");
|
|
8
8
|
const react_2 = require("react");
|
|
9
9
|
const StepProgress_1 = require("./StepProgress");
|
|
10
|
-
exports.OrderStatus = (0, react_2.memo)(function OrderStatus({ order }) {
|
|
10
|
+
exports.OrderStatus = (0, react_2.memo)(function OrderStatus({ order, selectedCryptoPaymentMethod, }) {
|
|
11
11
|
const isComplete = order.status === "executed";
|
|
12
12
|
const { text, status: displayStatus, description } = (0, anyspend_1.getStatusDisplay)(order);
|
|
13
13
|
const searchParams = (0, react_1.useSearchParams)();
|
|
14
|
-
const cryptoPaymentMethod = searchParams.get("cryptoPaymentMethod");
|
|
14
|
+
const cryptoPaymentMethod = selectedCryptoPaymentMethod || searchParams.get("cryptoPaymentMethod");
|
|
15
15
|
console.log("OrderStatus", displayStatus);
|
|
16
16
|
console.log("OrderStatus", order);
|
|
17
17
|
const paymentSteps = [
|
|
@@ -300,6 +300,8 @@ export interface AnySpendDepositHypeProps extends BaseModalProps {
|
|
|
300
300
|
paymentType?: "crypto" | "fiat";
|
|
301
301
|
/** Deposit contract address */
|
|
302
302
|
depositContractAddress: string;
|
|
303
|
+
/** Main footer */
|
|
304
|
+
mainFooter?: React.ReactNode;
|
|
303
305
|
/** Callback function called when the deposit is successful */
|
|
304
306
|
onSuccess?: () => void;
|
|
305
307
|
}
|
|
@@ -650,7 +650,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
650
650
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
651
651
|
}, [activePanel]);
|
|
652
652
|
const historyView = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: () => setActivePanel(PanelView.MAIN), onSelectOrder: onSelectOrder }) }));
|
|
653
|
-
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 }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
|
|
653
|
+
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, onBack: () => {
|
|
654
654
|
setOrderId(undefined);
|
|
655
655
|
setActivePanel(PanelView.MAIN);
|
|
656
656
|
setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
|
|
@@ -413,7 +413,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
413
413
|
const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
|
|
414
414
|
setActivePanel(PanelView.HISTORY);
|
|
415
415
|
}, onSelectOrder: onSelectOrder }) }));
|
|
416
|
-
const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order }), _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: activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
|
|
416
|
+
const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { 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: activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
|
|
417
417
|
setOrderId(undefined);
|
|
418
418
|
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
419
419
|
// Remove orderId from URL when canceling
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface AnySpendDepositHypeProps {
|
|
2
2
|
loadOrder?: string;
|
|
3
3
|
mode?: "modal" | "page";
|
|
4
4
|
recipientAddress: string;
|
|
@@ -7,4 +7,6 @@ export declare function AnySpendDepositHype(props: {
|
|
|
7
7
|
sourceTokenChainId?: number;
|
|
8
8
|
onSuccess?: () => void;
|
|
9
9
|
depositContractAddress?: string;
|
|
10
|
-
|
|
10
|
+
mainFooter?: React.ReactNode;
|
|
11
|
+
}
|
|
12
|
+
export declare function AnySpendDepositHype(props: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
2
|
-
import { B3_TOKEN } from "../../../anyspend/index.js";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { B3_TOKEN, DEPOSIT_HYPE_ACTION } from "../../../anyspend/index.js";
|
|
3
3
|
import { Button, ShinyButton, StyleRoot, TransitionPanel } from "../../../global-account/react/index.js";
|
|
4
4
|
import { cn } from "../../../shared/utils/cn.js";
|
|
5
5
|
import invariant from "invariant";
|
|
@@ -34,7 +34,7 @@ export function AnySpendDepositHype(props) {
|
|
|
34
34
|
const fingerprintConfig = getFingerprintConfig();
|
|
35
35
|
return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendDepositHypeInner, { ...props }) }));
|
|
36
36
|
}
|
|
37
|
-
function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, depositContractAddress, }) {
|
|
37
|
+
function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, depositContractAddress, mainFooter, }) {
|
|
38
38
|
// Use shared flow hook
|
|
39
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({
|
|
40
40
|
paymentType,
|
|
@@ -116,6 +116,10 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
116
116
|
await handleFiatOrder();
|
|
117
117
|
}
|
|
118
118
|
};
|
|
119
|
+
const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
|
|
120
|
+
setIsSrcInputDirty(false);
|
|
121
|
+
setSrcAmount(value);
|
|
122
|
+
}, anyspendQuote: anyspendQuote }))] }) }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
|
|
119
123
|
// Handle crypto order creation
|
|
120
124
|
const handleCryptoOrder = async () => {
|
|
121
125
|
try {
|
|
@@ -138,7 +142,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
138
142
|
amount: depositAmountWei,
|
|
139
143
|
data: encodedData,
|
|
140
144
|
to: depositContractAddress,
|
|
141
|
-
action:
|
|
145
|
+
action: DEPOSIT_HYPE_ACTION,
|
|
142
146
|
},
|
|
143
147
|
});
|
|
144
148
|
}
|
|
@@ -200,7 +204,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
200
204
|
amount: depositAmountWei,
|
|
201
205
|
data: encodedData,
|
|
202
206
|
to: depositContractAddress,
|
|
203
|
-
action:
|
|
207
|
+
action: DEPOSIT_HYPE_ACTION,
|
|
204
208
|
},
|
|
205
209
|
});
|
|
206
210
|
}
|
|
@@ -210,7 +214,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
210
214
|
}
|
|
211
215
|
};
|
|
212
216
|
// Order details view
|
|
213
|
-
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 }), _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: () => {
|
|
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: () => {
|
|
214
218
|
setActivePanel(PanelView.MAIN);
|
|
215
219
|
onSuccess?.();
|
|
216
220
|
} })] })) }) }));
|
|
@@ -244,10 +248,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
244
248
|
center: { x: 0, opacity: 1 },
|
|
245
249
|
exit: { x: -300, opacity: 0 },
|
|
246
250
|
}, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
|
|
247
|
-
_jsx("div", { className: cn(mode === "page" && "p-6"), children:
|
|
248
|
-
setIsSrcInputDirty(false);
|
|
249
|
-
setSrcAmount(value);
|
|
250
|
-
}, anyspendQuote: anyspendQuote }))] }) }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) })] }) }, "main-view"),
|
|
251
|
+
_jsx("div", { className: cn(mode === "page" && "p-6"), children: mainView }, "main-view"),
|
|
251
252
|
_jsx("div", { className: cn(mode === "page" && "p-6"), children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
|
|
252
253
|
_jsx("div", { className: cn(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
|
|
253
254
|
_jsx("div", { className: cn(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { ALL_CHAINS, capitalizeFirstLetter, getChainName } from "../../../../anyspend/index.js";
|
|
3
|
+
import { ALL_CHAINS, capitalizeFirstLetter, DEPOSIT_HYPE_ACTION, getChainName } from "../../../../anyspend/index.js";
|
|
4
4
|
import { CopyToClipboard } from "../../../../global-account/react/index.js";
|
|
5
5
|
import { cn } from "../../../../shared/utils/index.js";
|
|
6
6
|
import centerTruncate from "../../../../shared/utils/centerTruncate.js";
|
|
@@ -29,8 +29,10 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ o
|
|
|
29
29
|
: order.type === "fund_tournament"
|
|
30
30
|
? "Fund tournament"
|
|
31
31
|
: order.type === "custom"
|
|
32
|
-
? order.metadata.action
|
|
33
|
-
?
|
|
34
|
-
:
|
|
35
|
-
|
|
32
|
+
? order.metadata.action === DEPOSIT_HYPE_ACTION
|
|
33
|
+
? "Deposit HYPE"
|
|
34
|
+
: order.metadata.action
|
|
35
|
+
? capitalizeFirstLetter(order.metadata.action)
|
|
36
|
+
: "Contract execution"
|
|
37
|
+
: "" }), _jsxs("div", { className: "flex items-end gap-2", children: [order.type === "swap" ? (`~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === "mint_nft" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "h-5 w-5" }), _jsx("div", { children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "h-5 w-5" }), _jsx("div", { children: tournament?.name || "Tournament" })] })) : order.type === "custom" && order.metadata.action === DEPOSIT_HYPE_ACTION ? (_jsx("div", { className: "flex items-center gap-2", children: _jsxs("div", { children: [formatTokenAmount(BigInt(order.payload.amount), dstToken.decimals), " HYPE"] }) })) : null, _jsxs("div", { className: "text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex w-full justify-between gap-4", children: [_jsx("div", { className: "text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "flex w-full items-center", children: [_jsx("div", { className: "divider w-full" }), _jsx("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "divider w-full" })] })) }));
|
|
36
38
|
});
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { components } from "../../../../anyspend/types/api";
|
|
2
|
+
import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
|
|
2
3
|
export declare const OrderStatus: import("react").NamedExoticComponent<{
|
|
3
4
|
order: components["schemas"]["Order"];
|
|
5
|
+
selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
|
|
4
6
|
}>;
|
|
@@ -4,11 +4,11 @@ import { useSearchParams } from "../../../../shared/react/index.js";
|
|
|
4
4
|
import { Check, X } from "lucide-react";
|
|
5
5
|
import { memo } from "react";
|
|
6
6
|
import { StepProgress } from "./StepProgress.js";
|
|
7
|
-
export const OrderStatus = memo(function OrderStatus({ order }) {
|
|
7
|
+
export const OrderStatus = memo(function OrderStatus({ order, selectedCryptoPaymentMethod, }) {
|
|
8
8
|
const isComplete = order.status === "executed";
|
|
9
9
|
const { text, status: displayStatus, description } = getStatusDisplay(order);
|
|
10
10
|
const searchParams = useSearchParams();
|
|
11
|
-
const cryptoPaymentMethod = searchParams.get("cryptoPaymentMethod");
|
|
11
|
+
const cryptoPaymentMethod = selectedCryptoPaymentMethod || searchParams.get("cryptoPaymentMethod");
|
|
12
12
|
console.log("OrderStatus", displayStatus);
|
|
13
13
|
console.log("OrderStatus", order);
|
|
14
14
|
const paymentSteps = [
|
|
@@ -300,6 +300,8 @@ export interface AnySpendDepositHypeProps extends BaseModalProps {
|
|
|
300
300
|
paymentType?: "crypto" | "fiat";
|
|
301
301
|
/** Deposit contract address */
|
|
302
302
|
depositContractAddress: string;
|
|
303
|
+
/** Main footer */
|
|
304
|
+
mainFooter?: React.ReactNode;
|
|
303
305
|
/** Callback function called when the deposit is successful */
|
|
304
306
|
onSuccess?: () => void;
|
|
305
307
|
}
|