@b3dotfun/sdk 0.0.40-alpha.6 → 0.0.40-alpha.8
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.js +1 -1
- package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +1 -1
- package/dist/cjs/anyspend/react/components/common/CryptoReceiveSection.js +38 -36
- package/dist/cjs/anyspend/react/components/common/PanelOnramp.d.ts +3 -1
- package/dist/cjs/anyspend/react/components/common/PanelOnramp.js +7 -6
- package/dist/cjs/anyspend/react/contexts/FeatureFlagsContext.d.ts +11 -0
- package/dist/cjs/anyspend/react/contexts/FeatureFlagsContext.js +21 -0
- package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts +1 -65
- package/dist/cjs/anyspend/react/providers/AnyspendProvider.d.ts +5 -2
- package/dist/cjs/anyspend/react/providers/AnyspendProvider.js +5 -3
- package/dist/cjs/anyspend/react/providers/index.d.ts +1 -0
- package/dist/cjs/anyspend/react/providers/index.js +3 -0
- package/dist/cjs/anyspend/types/api_req_res.d.ts +8 -1
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.d.ts +3 -2
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.js +35 -16
- package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js +4 -3
- package/dist/cjs/global-account/react/hooks/useAuthentication.js +1 -2
- package/dist/esm/anyspend/react/components/AnySpend.js +1 -1
- package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +1 -1
- package/dist/esm/anyspend/react/components/common/CryptoReceiveSection.js +38 -36
- package/dist/esm/anyspend/react/components/common/PanelOnramp.d.ts +3 -1
- package/dist/esm/anyspend/react/components/common/PanelOnramp.js +7 -6
- package/dist/esm/anyspend/react/contexts/FeatureFlagsContext.d.ts +11 -0
- package/dist/esm/anyspend/react/contexts/FeatureFlagsContext.js +17 -0
- package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts +1 -65
- package/dist/esm/anyspend/react/providers/AnyspendProvider.d.ts +5 -2
- package/dist/esm/anyspend/react/providers/AnyspendProvider.js +5 -3
- package/dist/esm/anyspend/react/providers/index.d.ts +1 -0
- package/dist/esm/anyspend/react/providers/index.js +1 -0
- package/dist/esm/anyspend/types/api_req_res.d.ts +8 -1
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.d.ts +3 -2
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.js +36 -17
- package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js +3 -2
- package/dist/esm/global-account/react/hooks/useAuthentication.js +1 -2
- package/dist/types/anyspend/react/components/common/PanelOnramp.d.ts +3 -1
- package/dist/types/anyspend/react/contexts/FeatureFlagsContext.d.ts +11 -0
- package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts +1 -65
- package/dist/types/anyspend/react/providers/AnyspendProvider.d.ts +5 -2
- package/dist/types/anyspend/react/providers/index.d.ts +1 -0
- package/dist/types/anyspend/types/api_req_res.d.ts +8 -1
- package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts +3 -2
- package/package.json +6 -5
- package/src/anyspend/react/components/AnySpend.tsx +1 -0
- package/src/anyspend/react/components/AnyspendDepositHype.tsx +1 -0
- package/src/anyspend/react/components/common/CryptoReceiveSection.tsx +56 -45
- package/src/anyspend/react/components/common/PanelOnramp.tsx +22 -16
- package/src/anyspend/react/contexts/FeatureFlagsContext.tsx +34 -0
- package/src/anyspend/react/providers/AnyspendProvider.tsx +11 -6
- package/src/anyspend/react/providers/index.ts +1 -0
- package/src/anyspend/types/api_req_res.ts +10 -1
- package/src/global-account/react/components/B3Provider/B3Provider.tsx +49 -24
- package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx +4 -2
- package/src/global-account/react/hooks/useAuthentication.ts +1 -2
|
@@ -663,7 +663,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
663
663
|
setActivePanel(PanelView.MAIN);
|
|
664
664
|
setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back
|
|
665
665
|
} })) }) }));
|
|
666
|
-
const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_3.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: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
|
|
666
|
+
const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_3.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: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
|
|
667
667
|
if (activeTab === "fiat" || isBuyMode) {
|
|
668
668
|
return;
|
|
669
669
|
}
|
|
@@ -118,7 +118,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
|
|
|
118
118
|
await handleFiatOrder();
|
|
119
119
|
}
|
|
120
120
|
};
|
|
121
|
-
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)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_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, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION }) })), (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, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
|
|
121
|
+
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)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_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, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote }) })), (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, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
|
|
122
122
|
setIsSrcInputDirty(false);
|
|
123
123
|
setSrcAmount(value);
|
|
124
124
|
}, 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] }));
|
|
@@ -8,46 +8,48 @@ const formatAddress_1 = require("../../../../shared/utils/formatAddress");
|
|
|
8
8
|
const number_1 = require("../../../../shared/utils/number");
|
|
9
9
|
const lucide_react_1 = require("lucide-react");
|
|
10
10
|
const react_1 = require("motion/react");
|
|
11
|
+
const FeatureFlagsContext_1 = require("../../contexts/FeatureFlagsContext");
|
|
11
12
|
const OrderTokenAmount_1 = require("./OrderTokenAmount");
|
|
12
13
|
function CryptoReceiveSection({ isDepositMode = false, isBuyMode = false, selectedRecipientAddress, recipientName, onSelectRecipient, dstAmount, dstToken, selectedDstChainId, setSelectedDstChainId, setSelectedDstToken, onChangeDstAmount, anyspendQuote, dstTokenSymbol, dstTokenLogoURI, }) {
|
|
14
|
+
const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
|
|
13
15
|
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 ? (
|
|
14
16
|
// Fixed destination token display for buy mode and deposit mode
|
|
15
17
|
(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [(dstTokenLogoURI || dstToken.metadata?.logoURI) && ((0, jsx_runtime_1.jsx)("img", { src: dstTokenLogoURI || dstToken.metadata?.logoURI, alt: dstTokenSymbol || dstToken.symbol, className: "h-8 w-8 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-brand text-lg font-bold", children: dstTokenSymbol || dstToken.symbol })] })] })) : (
|
|
16
18
|
// Token selection for regular swap mode
|
|
17
|
-
(0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: selectedRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: [(0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyOut?.amountUsd, {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
19
|
+
(0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: selectedRecipientAddress, context: "to", inputValue: dstAmount, onChangeInput: onChangeDstAmount || (() => { }), chainId: selectedDstChainId || dstToken.chainId, setChainId: setSelectedDstChainId || (() => { }), token: dstToken, setToken: setSelectedDstToken || (() => { }) })), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/50 flex h-5 items-center justify-between text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyOut?.amountUsd, {
|
|
20
|
+
style: "currency",
|
|
21
|
+
fallback: "",
|
|
22
|
+
}), anyspendQuote?.data?.currencyIn?.amountUsd &&
|
|
23
|
+
anyspendQuote?.data?.currencyOut?.amountUsd &&
|
|
24
|
+
(() => {
|
|
25
|
+
const calculatePriceImpact = (inputUsd, outputUsd) => {
|
|
26
|
+
if (!inputUsd || !outputUsd) {
|
|
27
|
+
return { percentage: "0.00", isNegative: false };
|
|
28
|
+
}
|
|
29
|
+
const input = Number(inputUsd);
|
|
30
|
+
const output = Number(outputUsd);
|
|
31
|
+
// Handle edge cases
|
|
32
|
+
if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
|
|
33
|
+
return { percentage: "0.00", isNegative: false };
|
|
34
|
+
}
|
|
35
|
+
const percentageValue = ((output - input) / input) * 100;
|
|
36
|
+
// Handle the -0.00% case
|
|
37
|
+
if (percentageValue > -0.005 && percentageValue < 0) {
|
|
38
|
+
return { percentage: "0.00", isNegative: false };
|
|
39
|
+
}
|
|
40
|
+
return {
|
|
41
|
+
percentage: Math.abs(percentageValue).toFixed(2),
|
|
42
|
+
isNegative: percentageValue < 0,
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
const { percentage, isNegative } = calculatePriceImpact(anyspendQuote.data.currencyIn.amountUsd, anyspendQuote.data.currencyOut.amountUsd);
|
|
46
|
+
// Parse the percentage as a number for comparison
|
|
47
|
+
const percentageNum = parseFloat(percentage);
|
|
48
|
+
// Don't show if less than 1%
|
|
49
|
+
if (percentageNum < 1) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
// Using inline style to ensure color displays
|
|
53
|
+
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 && anyspendQuote.data.pointsAmount > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-as-brand font-medium", children: ["+", anyspendQuote.data.pointsAmount.toLocaleString(), " pts"] }) }, `points-${anyspendQuote.data.pointsAmount}`))] })] }));
|
|
53
55
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { components } from "../../../../anyspend/types/api";
|
|
2
|
+
import { GetQuoteResponse } from "../../../../anyspend/types/api_req_res";
|
|
2
3
|
import { FiatPaymentMethod } from "./FiatPaymentMethod";
|
|
3
|
-
export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, }: {
|
|
4
|
+
export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, anyspendQuote, }: {
|
|
4
5
|
srcAmountOnRamp: string;
|
|
5
6
|
setSrcAmountOnRamp: (amount: string) => void;
|
|
6
7
|
selectedPaymentMethod?: FiatPaymentMethod;
|
|
@@ -15,4 +16,5 @@ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selec
|
|
|
15
16
|
recipientSelectionPanelIndex: number;
|
|
16
17
|
dstTokenSymbol?: string;
|
|
17
18
|
hideDstToken?: boolean;
|
|
19
|
+
anyspendQuote?: GetQuoteResponse;
|
|
18
20
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -10,9 +10,11 @@ const formatAddress_1 = require("../../../../shared/utils/formatAddress");
|
|
|
10
10
|
const lucide_react_1 = require("lucide-react");
|
|
11
11
|
const react_3 = require("react");
|
|
12
12
|
const sonner_1 = require("sonner");
|
|
13
|
+
const FeatureFlagsContext_1 = require("../../contexts/FeatureFlagsContext");
|
|
13
14
|
const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
|
|
14
15
|
const OrderTokenAmountFiat_1 = require("./OrderTokenAmountFiat");
|
|
15
|
-
function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, }) {
|
|
16
|
+
function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, }) {
|
|
17
|
+
const featureFlags = (0, FeatureFlagsContext_1.useFeatureFlags)();
|
|
16
18
|
// Get geo-based onramp options to access fee information
|
|
17
19
|
const { stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
|
|
18
20
|
// Helper function to get fees from API data
|
|
@@ -73,9 +75,8 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
|
|
|
73
75
|
width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
|
|
74
76
|
} })] }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto mb-6 inline-grid grid-cols-4 gap-2", hideDstToken && "mb-0"), children: ["5", "10", "20", "25"].map(value => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
|
|
75
77
|
? "border-as-border-secondary bg-as-surface-secondary"
|
|
76
|
-
: "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.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
})() }) })] })] }));
|
|
78
|
+
: "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
|
+
const fee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE);
|
|
80
|
+
return fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total";
|
|
81
|
+
})() }), featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-brand text-sm font-medium", children: ["+", anyspendQuote.data.pointsAmount.toLocaleString(), " pts"] }, `points-${anyspendQuote.data.pointsAmount}`))] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod_1.FiatPaymentMethod.NONE).toFixed(2)] })] }) })] })] }));
|
|
81
82
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
export interface FeatureFlags {
|
|
3
|
+
showPoints?: boolean;
|
|
4
|
+
}
|
|
5
|
+
interface FeatureFlagsProviderProps {
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
featureFlags?: FeatureFlags;
|
|
8
|
+
}
|
|
9
|
+
export declare function FeatureFlagsProvider({ children, featureFlags }: FeatureFlagsProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function useFeatureFlags(): FeatureFlags;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.FeatureFlagsProvider = FeatureFlagsProvider;
|
|
5
|
+
exports.useFeatureFlags = useFeatureFlags;
|
|
6
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
const FeatureFlagsContext = (0, react_1.createContext)(undefined);
|
|
9
|
+
const defaultFeatureFlags = {
|
|
10
|
+
showPoints: false,
|
|
11
|
+
};
|
|
12
|
+
function FeatureFlagsProvider({ children, featureFlags = defaultFeatureFlags }) {
|
|
13
|
+
return (0, jsx_runtime_1.jsx)(FeatureFlagsContext.Provider, { value: { featureFlags }, children: children });
|
|
14
|
+
}
|
|
15
|
+
function useFeatureFlags() {
|
|
16
|
+
const context = (0, react_1.useContext)(FeatureFlagsContext);
|
|
17
|
+
if (!context) {
|
|
18
|
+
return defaultFeatureFlags;
|
|
19
|
+
}
|
|
20
|
+
return context.featureFlags;
|
|
21
|
+
}
|
|
@@ -78,71 +78,7 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
|
|
|
78
78
|
globalAddress: string | undefined;
|
|
79
79
|
hasEnoughBalance: boolean;
|
|
80
80
|
isBalanceLoading: boolean;
|
|
81
|
-
anyspendQuote:
|
|
82
|
-
success: boolean;
|
|
83
|
-
message: string;
|
|
84
|
-
data: {
|
|
85
|
-
operation?: string;
|
|
86
|
-
sender?: string;
|
|
87
|
-
recipient?: string;
|
|
88
|
-
currencyIn?: {
|
|
89
|
-
currency?: {
|
|
90
|
-
chainId?: number;
|
|
91
|
-
address?: string;
|
|
92
|
-
symbol?: string;
|
|
93
|
-
name?: string;
|
|
94
|
-
decimals?: number;
|
|
95
|
-
metadata?: {
|
|
96
|
-
logoURI?: string;
|
|
97
|
-
};
|
|
98
|
-
};
|
|
99
|
-
amount?: string;
|
|
100
|
-
amountFormatted?: string;
|
|
101
|
-
amountUsd?: string;
|
|
102
|
-
minimumAmount?: string;
|
|
103
|
-
};
|
|
104
|
-
currencyOut?: {
|
|
105
|
-
currency?: {
|
|
106
|
-
chainId?: number;
|
|
107
|
-
address?: string;
|
|
108
|
-
symbol?: string;
|
|
109
|
-
name?: string;
|
|
110
|
-
decimals?: number;
|
|
111
|
-
metadata?: {
|
|
112
|
-
logoURI?: string;
|
|
113
|
-
};
|
|
114
|
-
};
|
|
115
|
-
amount?: string;
|
|
116
|
-
amountFormatted?: string;
|
|
117
|
-
amountUsd?: string;
|
|
118
|
-
minimumAmount?: string;
|
|
119
|
-
};
|
|
120
|
-
totalImpact?: {
|
|
121
|
-
usd?: string;
|
|
122
|
-
percent?: string;
|
|
123
|
-
};
|
|
124
|
-
swapImpact?: {
|
|
125
|
-
usd?: string;
|
|
126
|
-
percent?: string;
|
|
127
|
-
};
|
|
128
|
-
rate?: string;
|
|
129
|
-
slippageTolerance?: {
|
|
130
|
-
origin?: {
|
|
131
|
-
usd?: string;
|
|
132
|
-
value?: string;
|
|
133
|
-
percent?: string;
|
|
134
|
-
};
|
|
135
|
-
destination?: {
|
|
136
|
-
usd?: string;
|
|
137
|
-
value?: string;
|
|
138
|
-
percent?: string;
|
|
139
|
-
};
|
|
140
|
-
};
|
|
141
|
-
timeEstimate?: number;
|
|
142
|
-
userBalance?: string;
|
|
143
|
-
};
|
|
144
|
-
statusCode: number;
|
|
145
|
-
} | undefined;
|
|
81
|
+
anyspendQuote: import("../../types/api_req_res").GetQuoteResponse | undefined;
|
|
146
82
|
isLoadingAnyspendQuote: boolean;
|
|
147
83
|
getAnyspendQuoteError: Error | null;
|
|
148
84
|
activeInputAmountInWei: string;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
+
import { FeatureFlags } from "../contexts/FeatureFlagsContext";
|
|
2
3
|
interface AnyspendProviderProps {
|
|
3
4
|
children: ReactNode;
|
|
5
|
+
featureFlags?: FeatureFlags;
|
|
4
6
|
}
|
|
5
7
|
/**
|
|
6
8
|
* AnyspendProvider is a top-level provider that wraps your application to provide
|
|
@@ -12,17 +14,18 @@ interface AnyspendProviderProps {
|
|
|
12
14
|
* - Safe to use at the application root
|
|
13
15
|
* - Configures sensible defaults for query caching
|
|
14
16
|
* - Handles Stripe payment redirects and modal state
|
|
17
|
+
* - Provides feature flags configuration
|
|
15
18
|
*
|
|
16
19
|
* @example
|
|
17
20
|
* ```tsx
|
|
18
21
|
* function App() {
|
|
19
22
|
* return (
|
|
20
|
-
* <AnyspendProvider>
|
|
23
|
+
* <AnyspendProvider featureFlags={{ showPoints: true }}>
|
|
21
24
|
* <YourApp />
|
|
22
25
|
* </AnyspendProvider>
|
|
23
26
|
* );
|
|
24
27
|
* }
|
|
25
28
|
* ```
|
|
26
29
|
*/
|
|
27
|
-
export declare const AnyspendProvider: ({ children }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare const AnyspendProvider: ({ children, featureFlags }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
28
31
|
export {};
|
|
@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
6
6
|
const react_1 = require("../../../global-account/react");
|
|
7
7
|
const react_query_1 = require("@tanstack/react-query");
|
|
8
8
|
const react_2 = require("react");
|
|
9
|
+
const FeatureFlagsContext_1 = require("../contexts/FeatureFlagsContext");
|
|
9
10
|
const StripeRedirectHandler_1 = require("./StripeRedirectHandler");
|
|
10
11
|
const defaultQueryClientConfig = {
|
|
11
12
|
defaultOptions: {
|
|
@@ -26,20 +27,21 @@ const defaultQueryClientConfig = {
|
|
|
26
27
|
* - Safe to use at the application root
|
|
27
28
|
* - Configures sensible defaults for query caching
|
|
28
29
|
* - Handles Stripe payment redirects and modal state
|
|
30
|
+
* - Provides feature flags configuration
|
|
29
31
|
*
|
|
30
32
|
* @example
|
|
31
33
|
* ```tsx
|
|
32
34
|
* function App() {
|
|
33
35
|
* return (
|
|
34
|
-
* <AnyspendProvider>
|
|
36
|
+
* <AnyspendProvider featureFlags={{ showPoints: true }}>
|
|
35
37
|
* <YourApp />
|
|
36
38
|
* </AnyspendProvider>
|
|
37
39
|
* );
|
|
38
40
|
* }
|
|
39
41
|
* ```
|
|
40
42
|
*/
|
|
41
|
-
const AnyspendProvider = function AnyspendProvider({ children }) {
|
|
43
|
+
const AnyspendProvider = function AnyspendProvider({ children, featureFlags }) {
|
|
42
44
|
const [queryClient] = (0, react_2.useState)(() => new react_query_1.QueryClient(defaultQueryClientConfig));
|
|
43
|
-
return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsxs)(react_1.TooltipProvider, { children: [(0, jsx_runtime_1.jsx)(StripeRedirectHandler_1.StripeRedirectHandler, {}), children] }) }));
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(FeatureFlagsContext_1.FeatureFlagsProvider, { featureFlags: featureFlags, children: (0, jsx_runtime_1.jsxs)(react_1.TooltipProvider, { children: [(0, jsx_runtime_1.jsx)(StripeRedirectHandler_1.StripeRedirectHandler, {}), children] }) }) }));
|
|
44
46
|
};
|
|
45
47
|
exports.AnyspendProvider = AnyspendProvider;
|
|
@@ -14,5 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.useFeatureFlags = void 0;
|
|
17
18
|
__exportStar(require("./AnyspendProvider"), exports);
|
|
18
19
|
__exportStar(require("./StripeRedirectHandler"), exports);
|
|
20
|
+
var FeatureFlagsContext_1 = require("../contexts/FeatureFlagsContext");
|
|
21
|
+
Object.defineProperty(exports, "useFeatureFlags", { enumerable: true, get: function () { return FeatureFlagsContext_1.useFeatureFlags; } });
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import { paths } from "./api";
|
|
2
2
|
export type GetOrderAndTxsResponse = paths["/orders/{orderId}"]["get"]["responses"]["200"]["content"]["application/json"];
|
|
3
3
|
export type GetQuoteRequest = paths["/orders/quote"]["post"]["requestBody"]["content"]["application/json"];
|
|
4
|
-
|
|
4
|
+
type BaseGetQuoteResponse = paths["/orders/quote"]["post"]["responses"]["200"]["content"]["application/json"];
|
|
5
|
+
export type GetQuoteResponse = BaseGetQuoteResponse & {
|
|
6
|
+
data: BaseGetQuoteResponse["data"] & {
|
|
7
|
+
pointsAmount?: number;
|
|
8
|
+
pointsMultiplier?: number;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
5
11
|
export type GetCoinbaseOnrampOptionsResponse = paths["/onramp/coinbase/options"]["get"]["responses"]["200"]["content"]["application/json"];
|
|
6
12
|
export type GetOrderHistoryResponse = paths["/orders"]["get"]["responses"]["200"]["content"]["application/json"];
|
|
7
13
|
export type GetTokenListResponse = paths["/chains/{chainId}/tokens"]["get"]["responses"]["200"]["content"]["application/json"];
|
|
8
14
|
export type CreateOrderResponse = paths["/orders"]["post"]["responses"]["200"]["content"]["application/json"];
|
|
9
15
|
export type GetStripeSupportedResponse = paths["/onramp/stripe/supported"]["get"]["responses"]["200"]["content"]["application/json"];
|
|
10
16
|
export type GetStripeClientSecret = paths["/stripe/clientSecret"]["get"]["responses"]["200"]["content"]["application/json"];
|
|
17
|
+
export {};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { PermissionsConfig } from "../../../../global-account/types/permissions";
|
|
2
|
+
import "@reservoir0x/relay-kit-ui/styles.css";
|
|
2
3
|
import { Account } from "thirdweb/wallets";
|
|
3
4
|
import { ClientType } from "../../../client-manager";
|
|
4
5
|
import { B3ContextType } from "./types";
|
|
5
|
-
import "@reservoir0x/relay-kit-ui/styles.css";
|
|
6
6
|
/**
|
|
7
7
|
* Main B3Provider component
|
|
8
8
|
*/
|
|
9
|
-
export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, }: {
|
|
9
|
+
export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, partnerId, }: {
|
|
10
10
|
theme: "light" | "dark";
|
|
11
11
|
children: React.ReactNode;
|
|
12
12
|
accountOverride?: Account;
|
|
@@ -19,6 +19,7 @@ export declare function B3Provider({ theme, children, accountOverride, environme
|
|
|
19
19
|
};
|
|
20
20
|
clientType?: ClientType;
|
|
21
21
|
rpcUrls?: Record<number, string>;
|
|
22
|
+
partnerId?: string;
|
|
22
23
|
}): import("react/jsx-runtime").JSX.Element;
|
|
23
24
|
/**
|
|
24
25
|
* Inner provider component that provides the actual B3Context
|
|
@@ -5,8 +5,13 @@ exports.InnerProvider = InnerProvider;
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const react_1 = require("../../../../global-account/react");
|
|
7
7
|
const analytics_1 = require("../../../../global-account/utils/analytics");
|
|
8
|
+
const constants_1 = require("../../../../shared/constants");
|
|
8
9
|
const supported_1 = require("../../../../shared/constants/chains/supported");
|
|
10
|
+
const debug_1 = require("../../../../shared/utils/debug");
|
|
11
|
+
const thirdweb_1 = require("../../../../shared/utils/thirdweb");
|
|
12
|
+
require("@reservoir0x/relay-kit-ui/styles.css");
|
|
9
13
|
const react_query_1 = require("@tanstack/react-query");
|
|
14
|
+
const wagmi_adapter_1 = require("@thirdweb-dev/wagmi-adapter");
|
|
10
15
|
const react_2 = require("react");
|
|
11
16
|
const sonner_1 = require("sonner");
|
|
12
17
|
const react_3 = require("thirdweb/react");
|
|
@@ -14,7 +19,7 @@ const wagmi_1 = require("wagmi");
|
|
|
14
19
|
const client_manager_1 = require("../../../client-manager");
|
|
15
20
|
const StyleRoot_1 = require("../StyleRoot");
|
|
16
21
|
const types_1 = require("./types");
|
|
17
|
-
|
|
22
|
+
const debug = (0, debug_1.debugB3React)("B3Provider");
|
|
18
23
|
/**
|
|
19
24
|
* Default permissions configuration for B3 provider
|
|
20
25
|
*/
|
|
@@ -24,24 +29,12 @@ const DEFAULT_PERMISSIONS = {
|
|
|
24
29
|
startDate: new Date(),
|
|
25
30
|
endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
|
|
26
31
|
};
|
|
27
|
-
/**
|
|
28
|
-
* Creates wagmi config with optional custom RPC URLs
|
|
29
|
-
* @param rpcUrls - Optional mapping of chain IDs to RPC URLs
|
|
30
|
-
*/
|
|
31
|
-
function createWagmiConfig(rpcUrls) {
|
|
32
|
-
return (0, wagmi_1.createConfig)({
|
|
33
|
-
chains: [supported_1.supportedChains[0], ...supported_1.supportedChains.slice(1)],
|
|
34
|
-
transports: Object.fromEntries(supported_1.supportedChains.map(chain => [chain.id, (0, wagmi_1.http)(rpcUrls?.[chain.id])])),
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
32
|
// Create queryClient instance
|
|
38
33
|
const queryClient = new react_query_1.QueryClient();
|
|
39
34
|
/**
|
|
40
35
|
* Main B3Provider component
|
|
41
36
|
*/
|
|
42
|
-
function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType = "rest", rpcUrls, }) {
|
|
43
|
-
// Create wagmi config with custom RPC URLs if provided
|
|
44
|
-
const [wagmiConfig] = (0, react_2.useState)(() => createWagmiConfig(rpcUrls));
|
|
37
|
+
function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType = "rest", rpcUrls, partnerId, }) {
|
|
45
38
|
// Initialize Google Analytics on mount
|
|
46
39
|
(0, react_2.useEffect)(() => {
|
|
47
40
|
(0, analytics_1.loadGA4Script)();
|
|
@@ -50,7 +43,32 @@ function B3Provider({ theme = "light", children, accountOverride, environment, a
|
|
|
50
43
|
(0, react_2.useEffect)(() => {
|
|
51
44
|
(0, client_manager_1.setClientType)(clientType);
|
|
52
45
|
}, [clientType]);
|
|
53
|
-
|
|
46
|
+
const ecocystemConfig = (0, react_2.useMemo)(() => {
|
|
47
|
+
if (!partnerId)
|
|
48
|
+
return undefined;
|
|
49
|
+
return {
|
|
50
|
+
ecosystemId: constants_1.ecosystemWalletId,
|
|
51
|
+
partnerId: partnerId,
|
|
52
|
+
client: thirdweb_1.client,
|
|
53
|
+
};
|
|
54
|
+
}, [partnerId]);
|
|
55
|
+
/**
|
|
56
|
+
* Creates wagmi config with optional custom RPC URLs
|
|
57
|
+
* @param rpcUrls - Optional mapping of chain IDs to RPC URLs
|
|
58
|
+
*/
|
|
59
|
+
const wagmiConfig = (0, react_2.useMemo)(() => (0, wagmi_1.createConfig)({
|
|
60
|
+
chains: [supported_1.supportedChains[0], ...supported_1.supportedChains.slice(1)],
|
|
61
|
+
transports: Object.fromEntries(supported_1.supportedChains.map(chain => [chain.id, (0, wagmi_1.http)(rpcUrls?.[chain.id])])),
|
|
62
|
+
connectors: [
|
|
63
|
+
(0, wagmi_adapter_1.inAppWalletConnector)({
|
|
64
|
+
...(ecocystemConfig || {}),
|
|
65
|
+
client: thirdweb_1.client,
|
|
66
|
+
}),
|
|
67
|
+
// injected(),
|
|
68
|
+
// coinbaseWallet({ appName: "HypeDuel" }),
|
|
69
|
+
],
|
|
70
|
+
}), [partnerId]);
|
|
71
|
+
return ((0, jsx_runtime_1.jsx)(react_3.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: wagmiConfig, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, clientType: clientType, children: (0, jsx_runtime_1.jsxs)(react_1.RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, (0, jsx_runtime_1.jsx)(StyleRoot_1.StyleRoot, { id: "b3-root" }), (0, jsx_runtime_1.jsx)(sonner_1.Toaster, { theme: theme, position: toaster?.position, style: toaster?.style })] }) }) }) }) }) }));
|
|
54
72
|
}
|
|
55
73
|
/**
|
|
56
74
|
* Inner provider component that provides the actual B3Context
|
|
@@ -61,6 +79,7 @@ function InnerProvider({ children, accountOverride, environment, defaultPermissi
|
|
|
61
79
|
const wallets = (0, react_3.useConnectedWallets)();
|
|
62
80
|
const setActiveWallet = (0, react_3.useSetActiveWallet)();
|
|
63
81
|
const isAuthenticated = (0, react_1.useAuthStore)(state => state.isAuthenticated);
|
|
82
|
+
debug("@@wallets", wallets);
|
|
64
83
|
const [user, setUser] = (0, react_2.useState)(() => {
|
|
65
84
|
// Try to restore user from localStorage on initialization
|
|
66
85
|
if (typeof window !== "undefined") {
|
|
@@ -91,7 +110,7 @@ function InnerProvider({ children, accountOverride, environment, defaultPermissi
|
|
|
91
110
|
const setWallet = (0, react_2.useCallback)((wallet) => {
|
|
92
111
|
setManuallySelectedWallet(wallet);
|
|
93
112
|
const account = wallet.getAccount();
|
|
94
|
-
|
|
113
|
+
debug("@@setWallet", wallet.id, account?.address);
|
|
95
114
|
setActiveWallet(wallet);
|
|
96
115
|
}, [setManuallySelectedWallet, setActiveWallet]);
|
|
97
116
|
(0, react_2.useEffect)(() => {
|
|
@@ -8,6 +8,7 @@ const thirdweb_1 = require("../../../../../shared/utils/thirdweb");
|
|
|
8
8
|
const react_2 = require("react");
|
|
9
9
|
const react_3 = require("thirdweb/react");
|
|
10
10
|
const wallets_1 = require("thirdweb/wallets");
|
|
11
|
+
const debug = (0, debug_1.debugB3React)("LoginStepCustom");
|
|
11
12
|
function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, maxInitialWallets = 2, automaticallySetFirstEoa, }) {
|
|
12
13
|
const [isLoading, setIsLoading] = (0, react_2.useState)(false);
|
|
13
14
|
const [showAllWallets, setShowAllWallets] = (0, react_2.useState)(false);
|
|
@@ -24,7 +25,7 @@ function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, max
|
|
|
24
25
|
const handleConnect = async (strategy) => {
|
|
25
26
|
try {
|
|
26
27
|
setIsLoading(true);
|
|
27
|
-
|
|
28
|
+
debug("setIsAuthenticating:true:3");
|
|
28
29
|
setIsAuthenticating(true);
|
|
29
30
|
const options = (0, react_1.getConnectOptionsFromStrategy)(strategy);
|
|
30
31
|
let connectResult;
|
|
@@ -45,7 +46,7 @@ function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, max
|
|
|
45
46
|
connectResult = await connect(options);
|
|
46
47
|
}
|
|
47
48
|
const account = connectResult?.getAccount();
|
|
48
|
-
|
|
49
|
+
debug("@@connectResult", { connectResult, account, options });
|
|
49
50
|
if (!account)
|
|
50
51
|
throw new Error("Failed to connect");
|
|
51
52
|
await onSuccess(account);
|
|
@@ -58,7 +59,7 @@ function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategies, max
|
|
|
58
59
|
}
|
|
59
60
|
finally {
|
|
60
61
|
setIsLoading(false);
|
|
61
|
-
|
|
62
|
+
debug("setIsAuthenticating:false:3");
|
|
62
63
|
setIsAuthenticating(false);
|
|
63
64
|
}
|
|
64
65
|
};
|
|
@@ -122,8 +122,7 @@ function useAuthentication(partnerId, loginWithSiwe) {
|
|
|
122
122
|
if (activeWallet) {
|
|
123
123
|
debug("@@logout:activeWallet", activeWallet);
|
|
124
124
|
disconnect(activeWallet);
|
|
125
|
-
debug("@@logout:
|
|
126
|
-
console.log("@@gio:logout:activeWallet", activeWallet);
|
|
125
|
+
debug("@@logout:activeWallet", activeWallet);
|
|
127
126
|
}
|
|
128
127
|
// Log out of each wallet
|
|
129
128
|
wallets.forEach(wallet => {
|
|
@@ -656,7 +656,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
656
656
|
setActivePanel(PanelView.MAIN);
|
|
657
657
|
setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
|
|
658
658
|
} })) }) }));
|
|
659
|
-
const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_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: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
|
|
659
|
+
const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_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: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
|
|
660
660
|
if (activeTab === "fiat" || isBuyMode) {
|
|
661
661
|
return;
|
|
662
662
|
}
|