@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.1

package/dist/cjs/anyspend/react/components/AnySpendCustom.js

@@ -43,14 +43,14 @@ const constants_1 = require("../../../anyspend/constants");
 const react_1 = require("../../../anyspend/react");
 const react_2 = require("../../../global-account/react");
 const utils_1 = require("../../../shared/utils");
+const react_3 = require("../../../global-account/react");
 const formatAddress_1 = require("../../../shared/utils/formatAddress");
 const number_1 = require("../../../shared/utils/number");
 const simplehash_1 = require("../../../shared/utils/simplehash");
 const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
-const react_3 = require("motion/react");
-const react_4 = __importStar(require("react"));
-const sonner_1 = require("sonner");
+const react_4 = require("motion/react");
+const react_5 = __importStar(require("react"));
 const chains_1 = require("viem/chains");
 const FeatureFlagsContext_1 = require("../contexts/FeatureFlagsContext");
 const useAutoSetActiveWalletFromWagmi_1 = require("../hooks/useAutoSetActiveWalletFromWagmi");
@@ -154,12 +154,12 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const router = (0, react_2.useRouter)();
     // Auto-set active wallet from wagmi
     (0, useAutoSetActiveWalletFromWagmi_1.useAutoSetActiveWalletFromWagmi)();
-    const [activePanel, setActivePanel] = (0, react_4.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
-    const [activeTab, setActiveTab] = (0, react_4.useState)(activeTabProps);
+    const [activePanel, setActivePanel] = (0, react_5.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
+    const [activeTab, setActiveTab] = (0, react_5.useState)(activeTabProps);
     // Payment method state with dual-state system (auto + explicit user selection)
     // Note: AnySpendCustom doesn't use auto-selection, only explicit user selection
     const { setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods } = (0, useCryptoPaymentMethodState_1.useCryptoPaymentMethodState)();
-    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_4.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
+    const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = (0, react_5.useState)(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
     // Get current user's wallet
     const currentWallet = (0, react_2.useAccountWallet)();
     // Recipient address state with dual-state system (auto + explicit user selection)
@@ -168,12 +168,12 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         recipientAddressFromProps: recipientAddressProps,
         globalAddress: currentWallet.address,
     });
-    const [orderId, setOrderId] = (0, react_4.useState)(loadOrder);
+    const [orderId, setOrderId] = (0, react_5.useState)(loadOrder);
     // Track if onSuccess has been called for the current order
-    const onSuccessCalled = react_4.default.useRef(false);
-    const [srcChainId, setSrcChainId] = (0, react_4.useState)(chains_1.base.id);
+    const onSuccessCalled = react_5.default.useRef(false);
+    const [srcChainId, setSrcChainId] = (0, react_5.useState)(chains_1.base.id);
     // Get token list for token balance check
-    const chainName = (0, react_4.useMemo)(() => (0, simplehash_1.simpleHashChainToChainName)(srcChainId), [srcChainId]);
+    const chainName = (0, react_5.useMemo)(() => (0, simplehash_1.simpleHashChainToChainName)(srcChainId), [srcChainId]);
     const { data: tokenList } = (0, react_1.useAnyspendTokenList)(srcChainId, "");
     // Get token balances for the selected chain
     const { nativeTokens, fungibleTokens } = (0, react_2.useTokenBalancesByChain)({
@@ -182,7 +182,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         enabled: !!currentWallet?.wallet?.address && !!chainName,
     });
     // Find a token with a balance, prioritizing tokens the user already owns
-    const getTokenWithBalance = (0, react_4.useCallback)(() => {
+    const getTokenWithBalance = (0, react_5.useCallback)(() => {
         if (!currentWallet?.wallet?.address || (!nativeTokens && !fungibleTokens) || !tokenList) {
             return (0, anyspend_1.getDefaultToken)(srcChainId);
         }
@@ -212,10 +212,10 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         return (0, anyspend_1.getDefaultToken)(srcChainId);
     }, [currentWallet?.wallet?.address, nativeTokens, fungibleTokens, tokenList, srcChainId]);
     // Set the selected token with preference for tokens user owns
-    const [srcToken, setSrcToken] = (0, react_4.useState)((0, anyspend_1.getDefaultToken)(srcChainId));
-    const [dirtySelectSrcToken, setDirtySelectSrcToken] = (0, react_4.useState)(false);
+    const [srcToken, setSrcToken] = (0, react_5.useState)((0, anyspend_1.getDefaultToken)(srcChainId));
+    const [dirtySelectSrcToken, setDirtySelectSrcToken] = (0, react_5.useState)(false);
     // Update token when chain changes or token balances are loaded
-    (0, react_4.useEffect)(() => {
+    (0, react_5.useEffect)(() => {
         if (tokenList?.length && !dirtySelectSrcToken) {
             const tokenWithBalance = getTokenWithBalance();
             if ((0, anyspend_1.eqci)(tokenWithBalance.address, dstToken.address) === false) {
@@ -224,7 +224,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         }
     }, [srcChainId, tokenList, getTokenWithBalance, nativeTokens, fungibleTokens, dirtySelectSrcToken, dstToken.address]);
     // const { account: isAuthenticated } = useB3();
-    const getRelayQuoteRequest = (0, react_4.useMemo)(() => {
+    const getRelayQuoteRequest = (0, react_5.useMemo)(() => {
         return generateGetRelayQuoteRequest({
             orderType: orderType,
             srcChainId: activeTab === "fiat" ? chains_1.base.id : srcChainId,
@@ -267,7 +267,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         router.push(`${window.location.pathname}?${params.toString()}`);
     };
     // Update dependent amount when relay price changes
-    const srcAmount = (0, react_4.useMemo)(() => {
+    const srcAmount = (0, react_5.useMemo)(() => {
         if (!anyspendQuote?.data ||
             !anyspendQuote?.data?.currencyIn?.amount ||
             !anyspendQuote?.data?.currencyIn?.currency?.decimals)
@@ -282,10 +282,10 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         }
     }, [activeTab, anyspendQuote?.data]);
     const formattedSrcAmount = srcAmount ? (0, number_1.formatTokenAmount)(srcAmount, srcToken.decimals, 6, false) : null;
-    const srcFiatAmount = (0, react_4.useMemo)(() => (activeTab === "fiat" && srcAmount ? (0, number_1.formatUnits)(srcAmount.toString(), constants_1.USDC_BASE.decimals) : "0"), [activeTab, srcAmount]);
+    const srcFiatAmount = (0, react_5.useMemo)(() => (activeTab === "fiat" && srcAmount ? (0, number_1.formatUnits)(srcAmount.toString(), constants_1.USDC_BASE.decimals) : "0"), [activeTab, srcAmount]);
     // Get geo data and onramp options (after quote is available)
     const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcFiatAmount);
-    (0, react_4.useEffect)(() => {
+    (0, react_5.useEffect)(() => {
         if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
             console.log("Calling onSuccess");
             const relayTxs = oat?.data?.relayTxs;
@@ -296,7 +296,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         }
     }, [oat?.data?.order.status, oat?.data?.executeTx?.txHash, oat?.data?.relayTxs, onSuccess]);
     // Reset flag when orderId changes
-    (0, react_4.useEffect)(() => {
+    (0, react_5.useEffect)(() => {
         onSuccessCalled.current = false;
     }, [orderId]);
     const { createOrder: createRegularOrder, isCreatingOrder: isCreatingRegularOrder } = (0, react_1.useAnyspendCreateOrder)({
@@ -305,7 +305,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         },
         onError: error => {
             console.error(error);
-            sonner_1.toast.error("Failed to create order: " + error.message);
+            react_3.toast.error("Failed to create order: " + error.message);
         },
     });
     const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = (0, react_1.useAnyspendCreateOnrampOrder)({
@@ -314,7 +314,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         },
         onError: error => {
             console.error(error);
-            sonner_1.toast.error("Failed to create order: " + error.message);
+            react_3.toast.error("Failed to create order: " + error.message);
         },
     });
     const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
@@ -401,7 +401,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         }
         catch (err) {
             console.error(err);
-            sonner_1.toast.error(err.message);
+            react_3.toast.error(err.message);
             throw err;
         }
     };
@@ -427,7 +427,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             }
             catch (err) {
                 console.error("Error creating order:", err);
-                (0, sonner_1.toast)(`Error creating order: ${err instanceof Error ? err.message : err}`);
+                react_3.toast.error(`Error creating order: ${err instanceof Error ? err.message : err}`);
             }
         }
     };
@@ -437,7 +437,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
             (0, invariant_1.default)(recipientAddress, "Recipient address is not found");
             if (!srcFiatAmount || parseFloat(srcFiatAmount) <= 0) {
-                sonner_1.toast.error("Please enter a valid amount");
+                react_3.toast.error("Please enter a valid amount");
                 return;
             }
             // Determine vendor and payment method string based on selected payment method
@@ -445,7 +445,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             let paymentMethodString = "";
             if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY) {
                 if (coinbaseAvailablePaymentMethods.length === 0) {
-                    sonner_1.toast.error("Coinbase Pay not available");
+                    react_3.toast.error("Coinbase Pay not available");
                     return;
                 }
                 vendor = "coinbase";
@@ -453,14 +453,14 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
             }
             else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
                 if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    sonner_1.toast.error("Stripe not available");
+                    react_3.toast.error("Stripe not available");
                     return;
                 }
                 vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
                 paymentMethodString = "";
             }
             else {
-                sonner_1.toast.error("Please select a payment method");
+                react_3.toast.error("Please select a payment method");
                 return;
             }
             await handleCreateOrder(recipientAddress, {
@@ -470,10 +470,10 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
         }
         catch (err) {
             console.error(err);
-            sonner_1.toast.error("Failed to create order: " + err.message);
+            react_3.toast.error("Failed to create order: " + err.message);
         }
     };
-    const recipientSection = showRecipient ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+    const recipientSection = showRecipient ? ((0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
             opacity: hasMounted ? 1 : 0,
             y: hasMounted ? 0 : 20,
             filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -483,8 +483,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                         ? "Receive NFT at"
                         : orderType === "join_tournament"
                             ? "Join for"
-                            : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: (0, jsx_runtime_1.jsx)("span", { children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(recipientAddress) }) }) }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })] }, recipientAddress)) : null;
-    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: () => {
+                            : "Recipient" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [recipientAddress ? ((0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("text-as-tertiarry flex items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: (0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: recipientName ? (0, utils_1.formatUsername)(recipientName) : (0, formatAddress_1.shortenAddress)(recipientAddress) }) }) })) : ((0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: (0, jsx_runtime_1.jsx)("div", { className: "whitespace-nowrap text-sm font-medium", children: "Select recipient" }) })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })] }, recipientAddress)) : null;
+    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", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
     const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && ((0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: method => {
@@ -522,36 +522,36 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                                         // Reset payment methods when switching tabs
                                         resetPaymentMethods();
                                         setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE);
-                                    }, children: "Pay with fiat" })) : ((0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", "text-as-primary/50 cursor-not-allowed bg-transparent"), disabled: true, children: "Pay with fiat" }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "crypto", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+                                    }, children: "Pay with fiat" })) : ((0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: (0, utils_1.cn)("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", "text-as-primary/50 cursor-not-allowed bg-transparent"), disabled: true, children: "Pay with fiat" }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary w-[140px]", children: "Fiat payments are not supported for this amount" }) })] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "crypto", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") }) })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [connectedAddress ? ((0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry whitespace-nowrap", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(connectedAddress || "") })) : ((0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Connect wallet" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Transfer crypto" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",
                                                     }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)(OrderToken_1.OrderToken, { address: currentWallet?.wallet?.address, context: "from", chainId: srcChainId, setChainId: setSrcChainId, token: srcToken, setToken: token => {
                                                                 setDirtySelectSrcToken(true);
                                                                 setSrcToken(token);
-                                                            }, requiredAmount: srcAmount || undefined })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+                                                            }, requiredAmount: srcAmount || undefined })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                                    }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex items-center gap-1.5 text-sm", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(with fee)" }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), renderPointsBadge()] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
-                                                                            10000).toFixed(2), " ", "fee"] }))] })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
+                                                    }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(with fee)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary whitespace-nowrap font-semibold", children: [formattedSrcAmount || "--", " ", srcToken.symbol] })] }), anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
+                                                                            10000).toFixed(2), " ", "fee"] }))] })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: false, animate: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE ? ("Choose payment method") : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+                                        }, transition: { duration: 0.3, delay: 0.3, ease: "easeInOut" }, className: "flex w-full flex-col gap-2", children: (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", disabled: isCreatingOrder || isLoadingAnyspendQuote || !anyspendQuote, onClick: () => handleConfirmOrder(), className: "relative w-full", children: isCreatingOrder ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Creating order..." })] })) : isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading quote..." })] })) : !recipientAddress ? ("Select recipient") : effectiveCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE ? ("Choose payment method") : anyspendQuote ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Checkout" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "absolute right-0 top-1/2 size-6 -translate-y-1/2 opacity-70" })] })) : ("No quote found") }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabsContent, { value: "fiat", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary flex w-full flex-col gap-4 rounded-xl border p-4", children: [(0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex items-center gap-1.5 text-sm", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(USD)" }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), renderPointsBadge()] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] }), anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
-                                                                    1e6).toFixed(2), " ", "fee"] }))] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-as-tertiarry flex flex-wrap items-center gap-1.5 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "whitespace-nowrap", children: ["Total ", (0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry", children: "(USD)" })] }), anyspendQuote?.data?.fee && ((0, jsx_runtime_1.jsx)(react_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(react_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/40 hover:text-as-primary/60 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(react_2.TooltipContent, { side: "top", children: (0, jsx_runtime_1.jsx)(FeeBreakDown_1.FeeBreakDown, { fee: anyspendQuote.data.fee }) })] }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end gap-0.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [renderPointsBadge(), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary whitespace-nowrap text-xl font-semibold", children: ["$", srcFiatAmount || "0.00"] })] }), anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && ((0, jsx_runtime_1.jsxs)("span", { className: "text-as-secondary text-xs", children: ["incl. $", ((Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
+                                                                    1e6).toFixed(2), " ", "fee"] }))] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex w-full flex-col items-center justify-between gap-2"), children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: false, animate: {
                                             opacity: hasMounted ? 1 : 0,
                                             y: hasMounted ? 0 : 20,
                                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
@@ -570,7 +570,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
                 setActivePanel(PanelView.CONFIRM_ORDER);
             } }) }));
     // Crypto payment method view
-    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: currentWallet?.wallet?.address, globalWallet: currentWallet?.wallet, selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
+    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { selectedPaymentMethod: effectiveCryptoPaymentMethod, setSelectedPaymentMethod: method => {
                 // When user explicitly selects a payment method, save it
                 setSelectedCryptoPaymentMethod(method);
             }, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {

package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.d.ts

@@ -18,6 +18,7 @@ export interface AnySpendCustomExactInProps {
     destinationToken: components["schemas"]["Token"];
     destinationChainId: number;
     onSuccess?: (amount: string) => void;
+    onOpenCustomModal?: () => void;
     mainFooter?: React.ReactNode;
     onTokenSelect?: (token: components["schemas"]["Token"], event: {
         preventDefault: () => void;

package/dist/cjs/anyspend/react/components/AnySpendCustomExactIn.js

@@ -13,8 +13,8 @@ const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("motion/react");
 const react_3 = require("react");
-const sonner_1 = require("sonner");
 const react_4 = require("thirdweb/react");
+const constants_1 = require("../../constants");
 const useAnyspendFlow_1 = require("../hooks/useAnyspendFlow");
 const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
 const CryptoPaySection_1 = require("./common/CryptoPaySection");
@@ -31,7 +31,7 @@ function AnySpendCustomExactIn(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendCustomExactInInner, { ...props }) }));
 }
-function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, orderType = "custom_exact_in", minDestinationAmount, header, }) {
+function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, destinationToken, destinationChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, customExactInConfig, orderType = "custom_exact_in", minDestinationAmount, header, }) {
     const actionLabel = customExactInConfig?.action ?? "Custom Execution";
     const DESTINATION_TOKEN_DETAILS = {
         SYMBOL: destinationToken.symbol ?? "TOKEN",
@@ -88,6 +88,9 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
     const btnInfo = (0, react_3.useMemo)(() => {
         if (activeInputAmountInWei === "0")
             return { text: "Enter an amount", disable: true, error: false, loading: false };
+        if (orderType === "hype_duel" && selectedSrcToken?.address?.toLowerCase() === constants_1.B3_TOKEN.address.toLowerCase()) {
+            return { text: "Convert to HYPE using B3", disable: false, error: false, loading: false };
+        }
         if (isLoadingAnyspendQuote)
             return { text: "Loading quote...", disable: true, error: false, loading: true };
         if (isCreatingOrder || isCreatingOnrampOrder)
@@ -150,8 +153,13 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         minDestinationAmount,
         DESTINATION_TOKEN_DETAILS.SYMBOL,
         orderType,
+        selectedSrcToken,
     ]);
     const onMainButtonClick = async () => {
+        if (orderType === "hype_duel" && selectedSrcToken?.address?.toLowerCase() === constants_1.B3_TOKEN.address.toLowerCase()) {
+            onOpenCustomModal?.();
+            return;
+        }
         if (btnInfo.disable)
             return;
         if (!selectedRecipientOrDefault) {
@@ -199,7 +207,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         }
         catch (err) {
             console.error(err);
-            sonner_1.toast.error("Failed to create order: " + err.message);
+            react_1.toast.error("Failed to create order: " + err.message);
         }
     };
     const handleFiatOrder = async () => {
@@ -207,14 +215,14 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             (0, invariant_1.default)(anyspendQuote, "Relay price is not found");
             (0, invariant_1.default)(selectedRecipientOrDefault, "Recipient address is not found");
             if (!srcAmount || parseFloat(srcAmount) <= 0) {
-                sonner_1.toast.error("Please enter a valid amount");
+                react_1.toast.error("Please enter a valid amount");
                 return;
             }
             let vendor;
             let paymentMethodString = "";
             if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY) {
                 if (coinbaseAvailablePaymentMethods.length === 0) {
-                    sonner_1.toast.error("Coinbase Pay not available");
+                    react_1.toast.error("Coinbase Pay not available");
                     return;
                 }
                 vendor = "coinbase";
@@ -222,13 +230,13 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             }
             else if (selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
                 if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
-                    sonner_1.toast.error("Stripe not available");
+                    react_1.toast.error("Stripe not available");
                     return;
                 }
                 vendor = "stripe-web2";
             }
             else {
-                sonner_1.toast.error("Please select a payment method");
+                react_1.toast.error("Please select a payment method");
                 return;
             }
             const payload = buildCustomPayload(selectedRecipientOrDefault);
@@ -251,7 +259,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
         }
         catch (err) {
             console.error(err);
-            sonner_1.toast.error("Failed to create order: " + err.message);
+            react_1.toast.error("Failed to create order: " + err.message);
         }
     };
     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.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTxs: oat.data.relayTxs, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onPaymentMethodChange: setSelectedCryptoPaymentMethod, onBack: () => {
@@ -263,7 +271,7 @@ function AnySpendCustomExactInInner({ loadOrder, mode = "modal", recipientAddres
             setSelectedRecipientAddress(address);
             setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
         } }));
-    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { globalAddress: globalAddress, globalWallet: undefined, selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onSelectPaymentMethod: (method) => {
+    const cryptoPaymentMethodView = ((0, jsx_runtime_1.jsx)(CryptoPaymentMethod_1.CryptoPaymentMethod, { selectedPaymentMethod: selectedCryptoPaymentMethod, setSelectedPaymentMethod: setSelectedCryptoPaymentMethod, isCreatingOrder: isCreatingOrder, onBack: () => setActivePanel(useAnyspendFlow_1.PanelView.MAIN), onSelectPaymentMethod: (method) => {
             setSelectedCryptoPaymentMethod(method);
             setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
         } }));

package/dist/cjs/anyspend/react/components/AnySpendStakeB3.js

@@ -13,7 +13,6 @@ const invariant_1 = __importDefault(require("invariant"));
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("motion/react");
 const react_3 = require("react");
-const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
 const wagmi_1 = require("wagmi");
@@ -158,7 +157,7 @@ function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmo
             });
             // If allowance is insufficient, request approval first
             if (allowance < BigInt(userStakeAmount)) {
-                sonner_1.toast.info("Approving B3 spending...");
+                react_1.toast.info("Approving B3 spending...");
                 const approvalData = (0, viem_1.encodeFunctionData)({
                     abi: viem_1.erc20Abi,
                     functionName: "approve",
@@ -170,7 +169,7 @@ function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmo
                     value: BigInt(0),
                 });
                 if (!approvalHash) {
-                    sonner_1.toast.error("Approval failed. Please try again.");
+                    react_1.toast.error("Approval failed. Please try again.");
                     return;
                 }
                 const approvalReceipt = await basePublicClient.waitForTransactionReceipt({
@@ -178,12 +177,12 @@ function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmo
                     confirmations: 1,
                 });
                 if (approvalReceipt?.status !== "success") {
-                    sonner_1.toast.error("Approval failed. Please try again.");
+                    react_1.toast.error("Approval failed. Please try again.");
                     return;
                 }
             }
             // Execute the stake
-            sonner_1.toast.info("Staking B3...");
+            react_1.toast.info("Staking B3...");
             const stakeData = (0, viem_1.encodeFunctionData)({
                 abi: anyspend_1.ABI_ERC20_STAKING,
                 functionName: "stake",
@@ -196,12 +195,12 @@ function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmo
             });
             if (stakeHash) {
                 setStakingTxHash(stakeHash);
-                sonner_1.toast.success("Staking transaction submitted!");
+                react_1.toast.success("Staking transaction submitted!");
             }
         }
         catch (error) {
             console.error("@@b3-stake:error:", error);
-            sonner_1.toast.error("Staking failed. Please try again.");
+            react_1.toast.error("Staking failed. Please try again.");
             setShowSuccessModal(false); // Ensure modal doesn't show on error
         }
         finally {
@@ -210,7 +209,7 @@ function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, stakeAmo
     };
     const confirmAmount = () => {
         if (!isAmountValid) {
-            sonner_1.toast.error("Please enter a valid amount to stake");
+            react_1.toast.error("Please enter a valid amount to stake");
             return;
         }
         // Check if user has sufficient B3 balance for direct staking

package/dist/cjs/anyspend/react/components/AnySpendStakeB3ExactIn.js

@@ -10,7 +10,6 @@ const number_1 = require("../../../shared/utils/number");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("motion/react");
 const react_3 = require("react");
-const sonner_1 = require("sonner");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
 const wagmi_1 = require("wagmi");
@@ -160,7 +159,7 @@ function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress,
             });
             // If allowance is insufficient, request approval first
             if (allowance < BigInt(userStakeAmount)) {
-                sonner_1.toast.info("Approving B3 spending...");
+                react_1.toast.info("Approving B3 spending...");
                 const approvalData = (0, viem_1.encodeFunctionData)({
                     abi: viem_1.erc20Abi,
                     functionName: "approve",
@@ -172,7 +171,7 @@ function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress,
                     value: BigInt(0),
                 });
                 if (!approvalHash) {
-                    sonner_1.toast.error("Approval failed. Please try again.");
+                    react_1.toast.error("Approval failed. Please try again.");
                     return;
                 }
                 const approvalReceipt = await basePublicClient.waitForTransactionReceipt({
@@ -180,12 +179,12 @@ function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress,
                     confirmations: 1,
                 });
                 if (approvalReceipt?.status !== "success") {
-                    sonner_1.toast.error("Approval failed. Please try again.");
+                    react_1.toast.error("Approval failed. Please try again.");
                     return;
                 }
             }
             // Execute the stake
-            sonner_1.toast.info("Staking B3...");
+            react_1.toast.info("Staking B3...");
             const stakeData = (0, viem_1.encodeFunctionData)({
                 abi: anyspend_1.ABI_ERC20_STAKING,
                 functionName: "stake",
@@ -198,12 +197,12 @@ function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress,
             });
             if (stakeHash) {
                 setStakingTxHash(stakeHash);
-                sonner_1.toast.success("Staking transaction submitted!");
+                react_1.toast.success("Staking transaction submitted!");
             }
         }
         catch (error) {
             console.error("@@b3-stake-custom-exact-in:error:", error);
-            sonner_1.toast.error("Staking failed. Please try again.");
+            react_1.toast.error("Staking failed. Please try again.");
             setShowSuccessModal(false); // Ensure modal doesn't show on error
         }
         finally {
@@ -212,7 +211,7 @@ function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenAddress,
     };
     const confirmAmount = () => {
         if (!isAmountValid) {
-            sonner_1.toast.error("Please enter a valid amount to stake");
+            react_1.toast.error("Please enter a valid amount to stake");
             return;
         }
         // Check if user has sufficient B3 balance for direct staking

package/dist/cjs/anyspend/react/components/AnyspendDepositHype.d.ts

@@ -11,6 +11,7 @@ export interface AnySpendDepositHypeProps {
     sourceTokenAddress?: string;
     sourceTokenChainId?: number;
     onSuccess?: () => void;
+    onOpenCustomModal?: () => void;
     mainFooter?: React.ReactNode;
     /**
      * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
@@ -22,4 +23,4 @@ export interface AnySpendDepositHypeProps {
     customUsdInputValues?: string[];
     preferEoa?: boolean;
 }
-export declare function AnySpendDepositHype({ loadOrder, mode, recipientAddress, paymentType, sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AnySpendDepositHype({ loadOrder, mode, recipientAddress, paymentType, sourceTokenAddress, sourceTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js

@@ -10,7 +10,7 @@ exports.HYPE_TOKEN_DETAILS = {
     SYMBOL: "HYPE",
     LOGO_URI: "https://cdn.hypeduel.com/hypes-coin.svg",
 };
-function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }) {
+function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, }) {
     if (!recipientAddress)
         return null;
     const header = () => ((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" }) }) }));
@@ -23,5 +23,5 @@ function AnySpendDepositHype({ loadOrder, mode = "modal", recipientAddress, paym
             logoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI,
         },
     };
-    return ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: hypeToken, destinationChainId: chains_1.base.id, orderType: "hype_duel", minDestinationAmount: 10, header: header, onSuccess: onSuccess, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa }));
+    return ((0, jsx_runtime_1.jsx)(AnySpendCustomExactIn_1.AnySpendCustomExactIn, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, paymentType: paymentType, sourceTokenAddress: sourceTokenAddress, sourceTokenChainId: sourceTokenChainId, destinationToken: hypeToken, destinationChainId: chains_1.base.id, orderType: "hype_duel", minDestinationAmount: 10, header: header, onSuccess: onSuccess, onOpenCustomModal: onOpenCustomModal, mainFooter: mainFooter, onTokenSelect: onTokenSelect, customUsdInputValues: customUsdInputValues, preferEoa: preferEoa }));
 }

package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.d.ts

@@ -5,12 +5,6 @@ export declare enum CryptoPaymentMethodType {
     TRANSFER_CRYPTO = "transfer_crypto"
 }
 interface CryptoPaymentMethodProps {
-    globalAddress?: string;
-    globalWallet?: {
-        meta?: {
-            icon?: string;
-        };
-    };
     selectedPaymentMethod: CryptoPaymentMethodType;
     setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;
     isCreatingOrder: boolean;