@b3dotfun/sdk 0.0.29-alpha.3 → 0.0.29-alpha.5

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

@@ -27,6 +27,7 @@ const RecipientSelection_1 = require("./common/RecipientSelection");
 const escrow_1 = require("../../../anyspend/abis/escrow");
 const lucide_react_1 = require("lucide-react");
 const PanelOnramp_1 = require("./common/PanelOnramp");
+const SLIPPAGE_PERCENT = 3;
 function generateEncodedDataForDepositHype(amount, beneficiary) {
     (0, invariant_1.default)(BigInt(amount) > 0, "Amount must be greater than zero");
     const encodedData = (0, viem_1.encodeFunctionData)({
@@ -42,7 +43,7 @@ function AnySpendDepositHype(props) {
 }
 function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, depositContractAddress, mainFooter, }) {
     // Use shared flow hook
-    const { activePanel, setActivePanel, orderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
+    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
         paymentType,
         recipientAddress,
         loadOrder,
@@ -50,6 +51,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
         onTransactionSuccess: onSuccess,
         sourceTokenAddress,
         sourceTokenChainId,
+        slippage: SLIPPAGE_PERCENT,
     });
     // Button state logic
     const btnInfo = (0, react_3.useMemo)(() => {
@@ -133,7 +135,10 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             (0, invariant_1.default)(selectedRecipientAddress, "Recipient address is not found");
             (0, invariant_1.default)(depositContractAddress, "Deposit contract address is not found");
             const srcAmountBigInt = BigInt(activeInputAmountInWei);
-            const depositAmountWei = anyspendQuote.data?.currencyOut?.amount || "0";
+            // TODO: temp subtract 3% for slippage
+            const originalDepositAmountWei = anyspendQuote.data?.currencyOut?.amount || "0";
+            const depositAmountWei = ((BigInt(originalDepositAmountWei) * BigInt(100 - SLIPPAGE_PERCENT)) /
+                BigInt(100)).toString();
             const encodedData = generateEncodedDataForDepositHype(depositAmountWei, selectedRecipientAddress);
             createOrder({
                 recipientAddress: selectedRecipientAddress,
@@ -221,6 +226,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
     };
     // Order details view
     const orderDetailsView = ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-col gap-4", children: oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
+                            setOrderId(undefined);
                             setActivePanel(useAnyspendFlow_1.PanelView.MAIN);
                             onSuccess?.();
                         } })] })) }) }));

package/dist/cjs/anyspend/react/components/common/ConnectWalletPayment.js

@@ -1,17 +1,23 @@
 "use strict";
 "use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ConnectWalletPayment;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
 const react_1 = require("../../../../global-account/react");
+const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
 const number_1 = require("../../../../shared/utils/number");
 const framer_motion_1 = require("framer-motion");
 const lucide_react_1 = require("lucide-react");
+const wagmi_1 = require("wagmi");
 const OrderDetailsCollapsible_1 = require("./OrderDetailsCollapsible");
 function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, }) {
     const profile = (0, react_1.useProfile)({ address: order.recipientAddress });
     const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
+    const { address: connectedAddress } = (0, wagmi_1.useAccount)();
     const srcToken = order.metadata.srcToken;
     const dstToken = order.metadata.dstToken;
     const expectedDstAmount = order.type === "mint_nft" ||
@@ -26,5 +32,7 @@ function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecut
     }
     return ((0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col items-center gap-6", children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, className: "flex w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0", disabled: txLoading || isSwitchingOrExecuting, onClick: onPayment, children: txLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transaction Pending", (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                                     ? "Pay from Phantom Wallet"
-                                    : "Pay from Connected Wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] }) }));
+                                    : "Pay from Connected Wallet" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) }), (0, jsx_runtime_1.jsxs)("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === anyspend_1.RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+                            ? (0, centerTruncate_1.default)(phantomWalletAddress, 6)
+                            : (0, centerTruncate_1.default)(connectedAddress || "")] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] }) }));
 }

package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js

@@ -5,16 +5,12 @@ exports.CryptoPaymentMethodType = void 0;
 exports.CryptoPaymentMethod = CryptoPaymentMethod;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
-const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
 const cn_1 = require("../../../../shared/utils/cn");
 const formatAddress_1 = require("../../../../shared/utils/formatAddress");
-const thirdweb_1 = require("../../../../shared/utils/thirdweb");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const react_dom_1 = require("react-dom");
 const sonner_1 = require("sonner");
-const react_3 = require("thirdweb/react");
-const wallets_1 = require("thirdweb/wallets");
 const wagmi_1 = require("wagmi");
 var CryptoPaymentMethodType;
 (function (CryptoPaymentMethodType) {
@@ -24,45 +20,138 @@ var CryptoPaymentMethodType;
 })(CryptoPaymentMethodType || (exports.CryptoPaymentMethodType = CryptoPaymentMethodType = {}));
 function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
     const { wallet: globalWallet } = (0, react_1.useAccountWallet)();
-    const activeWallet = (0, react_3.useActiveWallet)();
+    const { address, isConnected, connector } = (0, wagmi_1.useAccount)();
+    const { connect, connectors, isPending } = (0, wagmi_1.useConnect)();
     const { disconnect } = (0, wagmi_1.useDisconnect)();
-    const { disconnect: disconnectThirdweb } = (0, react_3.useDisconnect)();
+    const { data: walletClient } = (0, wagmi_1.useWalletClient)();
     const [showWalletModal, setShowWalletModal] = (0, react_2.useState)(false);
-    // Define available wallets for the modal
-    const availableWallets = [
-        (0, wallets_1.createWallet)("io.metamask"),
-        // createWallet("com.coinbase.wallet"),
-        (0, wallets_1.createWallet)("me.rainbow"),
-        (0, wallets_1.createWallet)("walletConnect"),
-        (0, wallets_1.createWallet)("io.rabby"),
-        (0, wallets_1.createWallet)("app.phantom"),
-    ];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-methods flex flex-col gap-3", children: [!activeWallet ? (
-                            // Not connected - show single connect button
-                            (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowWalletModal(true), className: "crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start text-left", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }), (0, jsx_runtime_1.jsx)("p", { className: "text-as-primary/60 text-sm", children: "Choose from multiple wallet options" })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })) : (
-                            // Connected - show wallet info
-                            (0, jsx_runtime_1.jsx)("div", { className: "crypto-payment-method-connect-wallet wallet-connected bg-as-surface-primary border-as-border-secondary rounded-xl border", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-8 w-8 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-green-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(activeWallet.getAccount()?.address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                                                        setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                                                        onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                                                    }, className: "bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors", children: "Use Wallet" }), (0, jsx_runtime_1.jsx)("button", { onClick: async () => {
-                                                        disconnect();
-                                                        disconnectThirdweb(activeWallet);
-                                                        sonner_1.toast.success("Wallet disconnected");
-                                                        if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
-                                                            setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
-                                                        }
-                                                    }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) })), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+    const [selectedWalletConnector, setSelectedWalletConnector] = (0, react_2.useState)(null);
+    const [modalStep, setModalStep] = (0, react_2.useState)("wallet-selection");
+    // Define available wallet connectors
+    const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name));
+    // Define wallet options with icons and info
+    const walletOptions = [
+        {
+            id: "metamask",
+            name: "MetaMask",
+            icon: "🦊",
+            description: "Connect using MetaMask browser extension",
+            connector: availableConnectors.find(c => c.name === "MetaMask"),
+        },
+        {
+            id: "coinbase",
+            name: "Coinbase Wallet",
+            icon: "🔵",
+            description: "Connect using Coinbase Wallet",
+            connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
+        },
+        {
+            id: "rainbow",
+            name: "Rainbow",
+            icon: "🌈",
+            description: "Connect using Rainbow wallet",
+            connector: availableConnectors.find(c => c.name === "Rainbow"),
+        },
+        {
+            id: "walletconnect",
+            name: "WalletConnect",
+            icon: "🔗",
+            description: "Connect using WalletConnect protocol",
+            connector: availableConnectors.find(c => c.name === "WalletConnect"),
+        },
+    ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
+    // Reset modal state when closing
+    const handleCloseModal = () => {
+        setShowWalletModal(false);
+        setModalStep("wallet-selection");
+        setSelectedWalletConnector(null);
+    };
+    // Function to request wallet permissions for specific wallet
+    const requestWalletPermissions = async (walletConnector) => {
+        try {
+            // If a specific wallet connector is provided and it's different from current
+            if (walletConnector && connector?.name !== walletConnector.name) {
+                // Disconnect current and connect to the selected wallet
+                // if (isConnected) {
+                //   disconnect();
+                //   // Small delay to ensure disconnection
+                //   await new Promise(resolve => setTimeout(resolve, 100));
+                // }
+                await connect({ connector: walletConnector });
+                setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                sonner_1.toast.success(`Connected to ${walletConnector.name}`);
+                return;
+            }
+            // If same wallet or no specific wallet, request permissions for account switching
+            if (walletClient && "request" in walletClient) {
+                await walletClient.request({
+                    method: "wallet_requestPermissions",
+                    params: [{ eth_accounts: {} }],
+                });
+                sonner_1.toast.success("Account selection completed");
+                setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+            }
+            else {
+                // Fallback: show modal for manual wallet selection
+                setShowWalletModal(true);
+            }
+        }
+        catch (error) {
+            console.error("Failed to request wallet permissions:", error);
+            if (error && typeof error === "object" && "message" in error) {
+                const errorMessage = error.message.toLowerCase();
+                if (errorMessage.includes("rejected") ||
+                    errorMessage.includes("denied") ||
+                    errorMessage.includes("cancelled")) {
+                    sonner_1.toast.error("Account selection cancelled");
+                }
+                else {
+                    sonner_1.toast.error("Failed to open account selection");
+                }
+            }
+            else {
+                sonner_1.toast.error("Failed to open account selection");
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative flex flex-col gap-10"), children: [(0, jsx_runtime_1.jsx)("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-6 w-6" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-around gap-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 text-center", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-methods flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+                                    // Always show wallet selection modal first
+                                    setShowWalletModal(true);
+                                }, className: "crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-blue-600" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
                                     setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
                                     onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
-                                }, disabled: isCreatingOrder, className: "crypto-payment-method-transfer bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] }), showWalletModal &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Connect Wallet" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowWalletModal(false), className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)(react_3.ConnectEmbed, { client: thirdweb_1.client, chain: b3Chain_1.thirdwebB3Mainnet, wallets: availableWallets, showThirdwebBranding: false, theme: (0, react_3.lightTheme)(), onConnect: async (wallet) => {
-                                    console.log("Wallet connected:", wallet);
-                                    // setShowWalletModal(false);
-                                    setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                                    onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                                    setShowWalletModal(false);
-                                }, style: {
-                                    width: "100%",
-                                    minHeight: "300px",
-                                } })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
+                                }, disabled: isCreatingOrder, className: "crypto-payment-method-transfer bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ZapIcon, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start text-left", children: (0, jsx_runtime_1.jsx)("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), isConnected && ((0, jsx_runtime_1.jsxs)("div", { className: "installed-wallets", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                                setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                                onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                                sonner_1.toast.success(`Selected ${connector?.name || "wallet"}`);
+                                            }, className: (0, cn_1.cn)("crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+                                                ? "connected-wallet border-as-brand bg-as-brand/5"
+                                                : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), 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-3", children: [globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Wallet", className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-blue-600" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })), (0, jsx_runtime_1.jsx)("button", { onClick: e => {
+                                                                    e.stopPropagation();
+                                                                    disconnect();
+                                                                    sonner_1.toast.success("Wallet disconnected");
+                                                                    if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+                                                                        setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
+                                                                    }
+                                                                }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) }) })] }))] })] }), showWalletModal &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [modalStep === "account-selection" && ((0, jsx_runtime_1.jsx)("button", { onClick: () => setModalStep("wallet-selection"), className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-5 w-5" }) })), (0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: modalStep === "wallet-selection"
+                                                    ? "Select a payment method"
+                                                    : `Connect ${selectedWalletConnector?.name}` })] }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCloseModal, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: modalStep === "wallet-selection" ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), walletOptions.map(walletOption => {
+                                                const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
+                                                return ((0, jsx_runtime_1.jsx)("button", { onClick: async () => {
+                                                        setSelectedWalletConnector(walletOption.connector);
+                                                        setModalStep("account-selection");
+                                                    }, disabled: isPending, className: `w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
+                                                        ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
+                                                        : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, 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-3", children: [(0, jsx_runtime_1.jsx)("div", { className: `flex h-12 w-12 items-center justify-center rounded-xl text-xl ${isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"}`, children: walletOption.icon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && ((0, jsx_runtime_1.jsx)("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200", children: "Connected" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
+                                            })] }) })) : (
+                                /* Account Selection Step */
+                                (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: ["Connect to ", selectedWalletConnector?.name, " to view available accounts"] }), (0, jsx_runtime_1.jsx)("button", { onClick: async () => {
+                                                handleCloseModal();
+                                                await requestWalletPermissions(selectedWalletConnector);
+                                            }, disabled: isPending, className: "w-full rounded-lg border border-gray-200 bg-white p-4 text-center transition-all hover:border-gray-300 hover:shadow-md disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-gray-600 dark:text-gray-400" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: isPending
+                                                                    ? `Connecting to ${selectedWalletConnector?.name}...`
+                                                                    : `Connect ${selectedWalletConnector?.name}` }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isPending ? "Please check your wallet" : "Click to connect and select account" })] })] }) })] })) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
 }

package/dist/cjs/anyspend/react/components/common/OrderDetails.js

@@ -49,6 +49,9 @@ function getOrderSuccessText({ order, tournament, formattedActualDstAmount, dstT
             actionText = `funded ${tournament?.name}`;
             return `Successfully ${actionText}`;
         case "custom":
+            if (order.metadata.action === anyspend_1.DEPOSIT_HYPE_ACTION) {
+                return `Successfully deposited ${(0, number_1.formatTokenAmount)(BigInt(order.payload?.amount || "0"), 18)} HYPE to ${recipient}`;
+            }
             actionText = order.metadata.action || `executed contract`;
             return `Successfully ${actionText}`;
         default:
@@ -145,7 +148,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
     const [txHash, setTxHash] = (0, react_5.useState)();
     const [showQRCode, setShowQRCode] = (0, react_5.useState)(false);
     const { isLoading: txLoading, isSuccess: txSuccess } = (0, wagmi_1.useWaitForTransactionReceipt)({ hash: txHash });
-    const { switchChainAndExecute, isSwitchingOrExecuting } = (0, react_1.useUnifiedChainSwitchAndExecute)();
+    const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = (0, react_1.useUnifiedChainSwitchAndExecute)();
     const { colorMode } = (0, react_2.useColorMode)();
     const roundedUpSrcAmount = (0, react_5.useMemo)(() => {
         // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
@@ -175,11 +178,11 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
             to = order.srcTokenAddress;
             value = BigInt(0);
         }
-        const txHash = await switchChainAndExecute(order.srcChain, { to, data: txData, value });
+        const txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
         if (txHash) {
             setTxHash(txHash);
         }
-    }, [order, switchChainAndExecute]);
+    }, [order, switchChainAndExecuteWithEOA]);
     // Main payment handler that triggers chain switch and payment
     const handlePayment = async () => {
         console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);

package/dist/cjs/anyspend/react/components/common/PaySection.js

@@ -9,13 +9,15 @@ 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 wagmi_1 = require("wagmi");
 const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
 const FiatPaymentMethod_1 = require("./FiatPaymentMethod");
 const OrderTokenAmount_1 = require("./OrderTokenAmount");
 const TokenBalance_1 = require("./TokenBalance");
 function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }) {
-    const { address: globalAddress, wallet: globalWallet, ensName: connectedName } = (0, react_1.useAccountWallet)();
-    const connectedAddress = globalWallet?.address;
+    const { address: connectedAddress, isConnected } = (0, wagmi_1.useAccount)();
+    const { data: profileData } = (0, react_1.useProfile)({ address: connectedAddress });
+    const connectedName = profileData?.displayName;
     const { data: srcTokenMetadata } = (0, react_1.useTokenData)(selectedSrcToken?.chainId, selectedSrcToken?.address);
     // Add ref to track if we've applied metadata
     const appliedSrcMetadataRef = (0, react_3.useRef)(false);
@@ -41,13 +43,13 @@ function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, se
     (0, react_3.useEffect)(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
-    return ((0, jsx_runtime_1.jsxs)(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" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [globalAddress ? ((0, jsx_runtime_1.jsx)("div", { className: "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" })] })) : selectedCryptoPaymentMethod === 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)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, 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" })] })) }))] }), paymentType === "crypto" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    return ((0, jsx_runtime_1.jsxs)(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" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isConnected ? ((0, jsx_runtime_1.jsx)("div", { className: "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" })] })) : selectedCryptoPaymentMethod === 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)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, 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" })] })) }))] }), paymentType === "crypto" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                             setIsSrcInputDirty(true);
                             setSrcAmount(value);
                         }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {
                                     style: "currency",
                                     fallback: "",
-                                }) }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
+                                }) }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: connectedAddress, onChangeInput: value => {
                                     setIsSrcInputDirty(true);
                                     setSrcAmount(value);
                                 } })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_1.Input, { type: "text", value: srcAmount, onChange: e => setSrcAmount(e.target.value.replace(/[^0-9.]/g, "")), placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {

package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts

@@ -18,8 +18,9 @@ interface UseAnyspendFlowProps {
     onTransactionSuccess?: () => void;
     sourceTokenAddress?: string;
     sourceTokenChainId?: number;
+    slippage?: number;
 }
-export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, }: UseAnyspendFlowProps): {
+export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage, }: UseAnyspendFlowProps): {
     activePanel: PanelView;
     setActivePanel: import("react").Dispatch<import("react").SetStateAction<PanelView>>;
     orderId: string | undefined;

package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js

@@ -22,7 +22,9 @@ var PanelView;
     PanelView[PanelView["ORDER_DETAILS"] = 4] = "ORDER_DETAILS";
     PanelView[PanelView["LOADING"] = 5] = "LOADING";
 })(PanelView || (exports.PanelView = PanelView = {}));
-function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, }) {
+function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage = 0, }) {
+    const searchParams = (0, react_2.useSearchParamsSSR)();
+    const router = (0, react_2.useRouter)();
     // Panel and order state
     const [activePanel, setActivePanel] = (0, react_3.useState)(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
     const [orderId, setOrderId] = (0, react_3.useState)(loadOrder);
@@ -49,6 +51,11 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
             setSelectedRecipientAddress(globalAddress);
         }
     }, [selectedRecipientAddress, globalAddress]);
+    (0, react_3.useEffect)(() => {
+        if (paymentType === "crypto") {
+            setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET);
+        }
+    }, [paymentType]);
     // Fetch specific token when sourceTokenAddress and sourceTokenChainId are provided
     (0, react_3.useEffect)(() => {
         const fetchSourceToken = async () => {
@@ -96,13 +103,25 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
         if (anyspendQuote?.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
             const amount = anyspendQuote.data.currencyOut.amount;
             const decimals = anyspendQuote.data.currencyOut.currency.decimals;
-            const formattedAmount = (0, number_1.formatTokenAmount)(BigInt(amount), decimals, 6, false);
+            // Apply slippage (0-100) - reduce amount by slippage percentageFixed slippage value
+            const amountWithSlippage = (BigInt(amount) * BigInt(100 - slippage)) / BigInt(100);
+            const formattedAmount = (0, number_1.formatTokenAmount)(amountWithSlippage, decimals, 6, false);
             setDstAmount(formattedAmount);
         }
         else {
             setDstAmount("");
         }
-    }, [anyspendQuote]);
+    }, [anyspendQuote, slippage]);
+    // Update useEffect for URL parameter to not override loadOrder
+    (0, react_3.useEffect)(() => {
+        if (loadOrder)
+            return; // Skip if we have a loadOrder
+        const orderIdParam = searchParams.get("orderId");
+        if (orderIdParam) {
+            setOrderId(orderIdParam);
+            setActivePanel(PanelView.ORDER_DETAILS);
+        }
+    }, [searchParams, loadOrder]);
     // Order creation hooks
     const { createOrder, isCreatingOrder } = (0, react_1.useAnyspendCreateOrder)({
         onSuccess: data => {
@@ -110,6 +129,18 @@ function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder,
             setOrderId(newOrderId);
             setActivePanel(PanelView.ORDER_DETAILS);
             onOrderSuccess?.(newOrderId);
+            // Add orderId and payment method to URL for persistence
+            const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
+            params.set("orderId", newOrderId);
+            if (selectedCryptoPaymentMethod !== CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE) {
+                console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
+                params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
+            }
+            else {
+                console.log("Payment method is NONE, not setting in URL");
+            }
+            console.log("Final URL params:", params.toString());
+            router.push(`${window.location.pathname}?${params.toString()}`);
         },
         onError: error => {
             console.error(error);

package/dist/cjs/anyspend/react/hooks/useSigMint.d.ts

@@ -48,8 +48,8 @@ export declare const useGenerateSigMintData: ({ recipientAddress, contractAddres
             creatorMap?: {} | undefined;
             chainId: number;
             address: string;
-            _id: string | {};
             title: string;
+            _id: string | {};
         };
     } | null;
     error: Error | null;

package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.d.ts

@@ -5,6 +5,7 @@ export interface UnifiedTransactionParams {
 }
 export declare function useUnifiedChainSwitchAndExecute(): {
     switchChainAndExecute: (targetChainId: number, params: UnifiedTransactionParams) => Promise<string | undefined>;
+    switchChainAndExecuteWithEOA: (targetChainId: number, params: UnifiedTransactionParams) => Promise<string | undefined>;
     isSwitchingOrExecuting: boolean;
     isActiveSmartWallet: boolean | undefined;
     isActiveEOAWallet: boolean | undefined;

package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js

@@ -164,6 +164,7 @@ function useUnifiedChainSwitchAndExecute() {
     }, [isActiveSmartWallet, isActiveEOAWallet, handleAASendTransaction, handleEOASwitchChainAndSendTransaction]);
     return {
         switchChainAndExecute,
+        switchChainAndExecuteWithEOA: handleEOASwitchChainAndSendTransaction,
         isSwitchingOrExecuting,
         isActiveSmartWallet,
         isActiveEOAWallet,

package/dist/cjs/shared/constants/chains/b3Chain.d.ts

@@ -88,9 +88,9 @@ export declare const getViemChainConfig: (config: ChainNetworks) => {
     readonly rpc: string;
     readonly icon: {
         format: string;
-        url: string;
-        width: number;
         height: number;
+        width: number;
+        url: string;
     };
 };
 export declare const thirdwebB3Testnet: ThirdwebChain;

package/dist/cjs/shared/constants/chains/supported.d.ts

@@ -10,9 +10,9 @@ export declare const supportedChainNetworks: {
     testnet?: boolean | undefined;
     fees?: Record<string, any> | undefined;
     formatters?: Record<string, any> | undefined;
+    color?: string | undefined;
     testnetConfigID?: number | undefined;
     badge?: string | undefined;
-    color?: string | undefined;
     enabledFeatures?: string[] | undefined;
     blockExplorers: {
         default: string;
@@ -35,13 +35,13 @@ export declare const supportedChainNetworks: {
             uri: string;
         }[];
     };
-    _id: string | {};
     icon: {
         format: string;
-        url: string;
-        width: number;
         height: number;
+        width: number;
+        url: string;
     };
+    _id: string | {};
 }[];
 export declare const coingeckoChains: Record<number, {
     coingecko_id: string;

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

@@ -21,6 +21,7 @@ import { RecipientSelection } from "./common/RecipientSelection.js";
 import { ESCROW_ABI } from "../../../anyspend/abis/escrow.js";
 import { ArrowDown } from "lucide-react";
 import { PanelOnramp } from "./common/PanelOnramp.js";
+const SLIPPAGE_PERCENT = 3;
 function generateEncodedDataForDepositHype(amount, beneficiary) {
     invariant(BigInt(amount) > 0, "Amount must be greater than zero");
     const encodedData = encodeFunctionData({
@@ -36,7 +37,7 @@ export function AnySpendDepositHype(props) {
 }
 function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, depositContractAddress, mainFooter, }) {
     // Use shared flow hook
-    const { activePanel, setActivePanel, orderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
+    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
         paymentType,
         recipientAddress,
         loadOrder,
@@ -44,6 +45,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
         onTransactionSuccess: onSuccess,
         sourceTokenAddress,
         sourceTokenChainId,
+        slippage: SLIPPAGE_PERCENT,
     });
     // Button state logic
     const btnInfo = useMemo(() => {
@@ -127,7 +129,10 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             invariant(selectedRecipientAddress, "Recipient address is not found");
             invariant(depositContractAddress, "Deposit contract address is not found");
             const srcAmountBigInt = BigInt(activeInputAmountInWei);
-            const depositAmountWei = anyspendQuote.data?.currencyOut?.amount || "0";
+            // TODO: temp subtract 3% for slippage
+            const originalDepositAmountWei = anyspendQuote.data?.currencyOut?.amount || "0";
+            const depositAmountWei = ((BigInt(originalDepositAmountWei) * BigInt(100 - SLIPPAGE_PERCENT)) /
+                BigInt(100)).toString();
             const encodedData = generateEncodedDataForDepositHype(depositAmountWei, selectedRecipientAddress);
             createOrder({
                 recipientAddress: selectedRecipientAddress,
@@ -215,6 +220,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
     };
     // Order details view
     const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
+                            setOrderId(undefined);
                             setActivePanel(PanelView.MAIN);
                             onSuccess?.();
                         } })] })) }) }));