@b3dotfun/sdk 0.0.29 → 0.0.30-alpha.1

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

@@ -650,12 +650,12 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         window.scrollTo({ top: 0, behavior: "smooth" });
     }, [activePanel]);
     const historyView = (_jsx("div", { className: "mx-auto flex w-[560px] max-w-full flex-col items-center", children: _jsx(OrderHistory, { mode: mode, onBack: () => setActivePanel(PanelView.MAIN), onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: oat.data.order }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
+    const orderDetailsView = (_jsx("div", { className: "mx-auto w-[460px] max-w-full", children: _jsx("div", { className: "relative flex flex-col gap-4", children: oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatus, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.MAIN);
                             setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
                         } })] })) }) }));
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
                             if (activeTab === "fiat" || isBuyMode) {
                                 return;
                             }

package/dist/esm/anyspend/react/components/AnySpendBondKit.d.ts

@@ -1,2 +1,2 @@
 import { AnySpendBondKitProps } from "../../../global-account/react/stores/useModalStore";
-export declare function AnySpendBondKit({ mode, recipientAddress, contractAddress, minTokensOut, imageUrl, ethAmount: initialEthAmount, onSuccess, }: AnySpendBondKitProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnySpendBondKit({ mode, recipientAddress, contractAddress, minTokensOut, imageUrl, b3Amount: initialB3Amount, onSuccess, }: AnySpendBondKitProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,10 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { BondkitToken } from "../../../bondkit/index.js";
 import { Button, GlareCardRounded, Input, StyleRoot, useHasMounted, useTokenData, } from "../../../global-account/react/index.js";
 import { baseMainnet } from "../../../shared/constants/chains/supported.js";
 import { motion } from "motion/react";
 import { useEffect, useMemo, useState } from "react";
 import { createPublicClient, encodeFunctionData, formatEther, http, parseEther } from "viem";
-import { ABI_bondKit } from "../../abis/bondKit.js";
+import { BondkitToken, BondkitTokenABI } from "../../../bondkit/index.js";
 import { AnySpendCustom } from "./AnySpendCustom.js";
 // Debounce utility function
 function debounce(func, wait) {
@@ -21,11 +20,11 @@ function formatNumberWithCommas(x) {
     parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     return parts.join(".");
 }
-export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, ethAmount: initialEthAmount, onSuccess, }) {
+export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddress, minTokensOut = "0", imageUrl, b3Amount: initialB3Amount, onSuccess, }) {
     const hasMounted = useHasMounted();
-    const [showAmountPrompt, setShowAmountPrompt] = useState(!initialEthAmount);
-    const [ethAmount, setEthAmount] = useState(initialEthAmount || "");
-    const [isAmountValid, setIsAmountValid] = useState(!!initialEthAmount);
+    const [showAmountPrompt, setShowAmountPrompt] = useState(!initialB3Amount);
+    const [b3Amount, setB3Amount] = useState(initialB3Amount || "");
+    const [isAmountValid, setIsAmountValid] = useState(!!initialB3Amount);
     const [validationError, setValidationError] = useState("");
     const [tokenName, setTokenName] = useState("");
     const [tokenSymbol, setTokenSymbol] = useState("");
@@ -57,12 +56,12 @@ export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddr
                 const [name, symbol] = await Promise.all([
                     basePublicClient.readContract({
                         address: contractAddress,
-                        abi: ABI_bondKit,
+                        abi: BondkitTokenABI,
                         functionName: "name",
                     }),
                     basePublicClient.readContract({
                         address: contractAddress,
-                        abi: ABI_bondKit,
+                        abi: BondkitTokenABI,
                         functionName: "symbol",
                     }),
                 ]);
@@ -79,8 +78,8 @@ export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddr
             fetchTokenName();
         }
     }, [contractAddress, basePublicClient]);
-    // Get native token data for the chain
-    const { data: tokenData, isError: isTokenError, isLoading, } = useTokenData(baseMainnet.id, "0x0000000000000000000000000000000000000000");
+    // Get b3 token data
+    const { data: tokenData, isError: isTokenError, isLoading, } = useTokenData(baseMainnet.id, "0xB3B32F9f8827D4634fE7d973Fa1034Ec9fdDB3B3");
     // Convert token data to AnySpend Token type
     const dstToken = useMemo(() => {
         if (!tokenData)
@@ -116,16 +115,16 @@ export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddr
             setIsLoadingQuote(false);
         }
     }, 500), [bondkitTokenClient]);
-    // Fetch initial quote if ethAmount is provided
+    // Fetch initial quote if b3Amount is provided
     useEffect(() => {
-        if (initialEthAmount && bondkitTokenClient) {
-            debouncedGetQuote(initialEthAmount);
+        if (initialB3Amount && bondkitTokenClient) {
+            debouncedGetQuote(initialB3Amount);
         }
-    }, [initialEthAmount, bondkitTokenClient, debouncedGetQuote]);
+    }, [initialB3Amount, bondkitTokenClient, debouncedGetQuote]);
     const validateAndSetAmount = (value) => {
         // Allow empty input
         if (value === "") {
-            setEthAmount("");
+            setB3Amount("");
             setIsAmountValid(false);
             setValidationError("");
             setQuote(null);
@@ -141,14 +140,14 @@ export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddr
         if ((value.match(/\./g) || []).length > 1) {
             return;
         }
-        // Prevent more than 18 decimal places (ETH precision)
+        // Prevent more than 18 decimal places (B3 precision)
         const parts = value.split(".");
         if (parts[1] && parts[1].length > 18) {
             return;
         }
         // Clean the input - remove leading zeros if not decimal
         const cleanedValue = value.startsWith("0") && !value.startsWith("0.") ? value.replace(/^0+/, "0") : value;
-        setEthAmount(cleanedValue);
+        setB3Amount(cleanedValue);
         try {
             const parsedAmount = parseEther(cleanedValue);
             if (parsedAmount <= BigInt(0)) {
@@ -166,7 +165,7 @@ export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddr
             setValidationError("Please enter a valid amount");
         }
     };
-    const header = () => (_jsx("div", { className: "bg-as-surface-primary w-full px-6 py-4", children: _jsxs("div", { className: "flex w-full flex-col items-center space-y-6", children: [_jsxs("h2", { className: "text-[28px] font-bold", children: ["Buy ", tokenName, " (", tokenSymbol, ")"] }), _jsxs("div", { className: "flex w-full flex-col items-center space-y-2", children: [_jsxs("span", { className: "text-[28px] font-bold", children: [ethAmount, " ETH"] }), quote && (_jsxs("span", { className: "text-lg", children: ["\u2248 ", formatNumberWithCommas(parseFloat(quote).toFixed(4)), " ", tokenSymbol] }))] })] }) }));
+    const header = () => (_jsx("div", { className: "bg-as-surface-primary w-full px-6 py-4", children: _jsxs("div", { className: "flex w-full flex-col items-center space-y-6", children: [_jsxs("h2", { className: "text-[28px] font-bold", children: ["Buy ", tokenName, " (", tokenSymbol, ")"] }), _jsxs("div", { className: "flex w-full flex-col items-center space-y-2", children: [_jsxs("span", { className: "text-[28px] font-bold", children: [b3Amount, " B3"] }), quote && (_jsxs("span", { className: "text-lg", children: ["\u2248 ", formatNumberWithCommas(parseFloat(quote).toFixed(4)), " ", tokenSymbol] }))] })] }) }));
     // Show loading state while fetching token data
     if (isLoading) {
         return (_jsx(StyleRoot, { children: _jsx("div", { className: "b3-root b3-modal bg-b3-react-background flex w-full flex-col items-center p-8", children: _jsx("p", { className: "text-as-primary/70 text-center text-sm", children: "Loading payment information..." }) }) }));
@@ -188,18 +187,18 @@ export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddr
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("p", { className: "text-as-primary/70 text-sm font-medium", children: "ETH Amount" }) }), _jsx("div", { className: "relative", children: _jsx(Input, { type: "text", inputMode: "decimal", placeholder: "0.1", value: ethAmount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && ethAmount ? "border-as-red" : "border-b3-react-border"}` }) }), !isAmountValid && ethAmount && _jsx("p", { className: "text-as-red text-sm", children: validationError }), _jsxs("div", { className: "bg-as-on-surface-2/30 rounded-lg border border-white/10 p-4 backdrop-blur-sm", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary/70 text-sm font-medium", children: "Total Cost:" }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: "text-as-primary text-lg font-bold", children: [ethAmount || "0", " ETH"] }) })] }), isLoadingQuote ? (_jsx("div", { className: "mt-2 text-center", children: _jsx("span", { className: "text-as-primary/70 text-sm", children: "Calculating tokens..." }) })) : quote ? (_jsxs("div", { className: "mt-2 flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary/70 text-sm font-medium", children: "You'll receive:" }), _jsxs("span", { className: "text-as-primary text-sm font-medium", children: ["\u2248 ", formatNumberWithCommas(parseFloat(quote).toFixed(4)), " ", tokenSymbol] })] })) : null] }), _jsx(Button, { onClick: () => {
-                                        if (isAmountValid && ethAmount) {
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("p", { className: "text-as-primary/70 text-sm font-medium", children: "B3 Amount" }) }), _jsx("div", { className: "relative", children: _jsx(Input, { type: "text", inputMode: "decimal", placeholder: "0.1", value: b3Amount, onChange: e => validateAndSetAmount(e.target.value), className: `h-14 px-4 text-lg ${!isAmountValid && b3Amount ? "border-as-red" : "border-b3-react-border"}` }) }), !isAmountValid && b3Amount && _jsx("p", { className: "text-as-red text-sm", children: validationError }), _jsxs("div", { className: "bg-as-on-surface-2/30 rounded-lg border border-white/10 p-4 backdrop-blur-sm", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary/70 text-sm font-medium", children: "Total Cost:" }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: "text-as-primary text-lg font-bold", children: [b3Amount || "0", " B3"] }) })] }), isLoadingQuote ? (_jsx("div", { className: "mt-2 text-center", children: _jsx("span", { className: "text-as-primary/70 text-sm", children: "Calculating tokens..." }) })) : quote ? (_jsxs("div", { className: "mt-2 flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary/70 text-sm font-medium", children: "You'll receive:" }), _jsxs("span", { className: "text-as-primary text-sm font-medium", children: ["\u2248 ", formatNumberWithCommas(parseFloat(quote).toFixed(4)), " ", tokenSymbol] })] })) : null] }), _jsx(Button, { onClick: () => {
+                                        if (isAmountValid && b3Amount) {
                                             setShowAmountPrompt(false);
                                         }
-                                    }, disabled: !isAmountValid || !ethAmount || isLoadingQuote, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium", children: "Continue" })] }) })] }) }));
+                                    }, disabled: !isAmountValid || !b3Amount || isLoadingQuote, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium", children: "Continue" })] }) })] }) }));
     }
     const encodedData = encodeFunctionData({
-        abi: ABI_bondKit,
+        abi: BondkitTokenABI,
         functionName: "buyFor",
-        args: [recipientAddress, BigInt(minTokensOut)],
+        args: [recipientAddress, parseEther(b3Amount), BigInt(minTokensOut)],
     });
-    return (_jsx(AnySpendCustom, { mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: baseMainnet.id, dstToken: dstToken, dstAmount: parseEther(ethAmount).toString(), contractAddress: contractAddress, encodedData: encodedData, metadata: {
+    return (_jsx(AnySpendCustom, { mode: mode, recipientAddress: recipientAddress, orderType: "custom", dstChainId: baseMainnet.id, dstToken: dstToken, dstAmount: parseEther(b3Amount).toString(), contractAddress: contractAddress, encodedData: encodedData, metadata: {
             type: "custom",
             action: "BondKit Buy",
         }, header: header, onSuccess: onSuccess, showRecipient: true }));

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { B3_TOKEN } from "../../../anyspend/index.js";
 import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useHasMounted, useModalStore, useTokenBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
+import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
 import { baseMainnet } from "../../../shared/constants/chains/supported.js";
 import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
@@ -82,7 +83,7 @@ function generateEncodedDataForBuyEntriesAndSpin(user, quantity) {
 }
 const basePublicClient = createPublicClient({
     chain: baseMainnet,
-    transport: http(),
+    transport: http(PUBLIC_BASE_RPC_URL),
 });
 export function AnySpendBuySpin({ loadOrder, mode = "modal", spinwheelContractAddress, chainId, recipientAddress, prefillQuantity, onSuccess, }) {
     const hasMounted = useHasMounted();

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

@@ -413,7 +413,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
+    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4", mode === "modal" && "bg-b3-react-background rounded-xl"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod }), _jsx(OrderDetails, { mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, cryptoPaymentMethod: activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.CONFIRM_ORDER);
                             // Remove orderId from URL when canceling

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ABI_ERC20_STAKING, B3_TOKEN } from "../../../anyspend/index.js";
 import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useHasMounted, useModalStore, useTokenBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
+import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
 import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
@@ -16,7 +17,7 @@ import { SolIcon } from "./icons/SolIcon.js";
 import { UsdcIcon } from "./icons/USDCIcon.js";
 const basePublicClient = createPublicClient({
     chain: base,
-    transport: http(),
+    transport: http(PUBLIC_BASE_RPC_URL),
 });
 const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
 function generateEncodedDataForStakingB3(amount, beneficiary) {

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

@@ -1,4 +1,4 @@
-export declare function AnySpendDepositHype(props: {
+export interface AnySpendDepositHypeProps {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress: string;
@@ -7,4 +7,6 @@ export declare function AnySpendDepositHype(props: {
     sourceTokenChainId?: number;
     onSuccess?: () => void;
     depositContractAddress?: string;
-}): import("react/jsx-runtime").JSX.Element;
+    mainFooter?: React.ReactNode;
+}
+export declare function AnySpendDepositHype(props: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { B3_TOKEN } from "../../../anyspend/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { B3_TOKEN, DEPOSIT_HYPE_ACTION } from "../../../anyspend/index.js";
 import { Button, ShinyButton, StyleRoot, TransitionPanel } from "../../../global-account/react/index.js";
 import { cn } from "../../../shared/utils/cn.js";
 import invariant from "invariant";
@@ -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({
@@ -34,9 +35,9 @@ export function AnySpendDepositHype(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendDepositHypeInner, { ...props }) }));
 }
-function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, depositContractAddress, }) {
+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(() => {
@@ -116,6 +118,10 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             await handleFiatOrder();
         }
     };
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
+                                setIsSrcInputDirty(false);
+                                setSrcAmount(value);
+                            }, anyspendQuote: anyspendQuote }))] }) }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));
     // Handle crypto order creation
     const handleCryptoOrder = async () => {
         try {
@@ -123,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,
@@ -138,7 +147,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
                     amount: depositAmountWei,
                     data: encodedData,
                     to: depositContractAddress,
-                    action: "deposit HYPE",
+                    action: DEPOSIT_HYPE_ACTION,
                 },
             });
         }
@@ -200,7 +209,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
                     amount: depositAmountWei,
                     data: encodedData,
                     to: depositContractAddress,
-                    action: "deposit HYPE",
+                    action: DEPOSIT_HYPE_ACTION,
                 },
             });
         }
@@ -210,7 +219,8 @@ 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 }), _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: () => {
+    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?.();
                         } })] })) }) }));
@@ -244,10 +254,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
                     center: { x: 0, opacity: 1 },
                     exit: { x: -300, opacity: 0 },
                 }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
-                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: _jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(PaySection, { paymentType: "crypto", selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, selectedFiatPaymentMethod: selectedFiatPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), onSelectFiatPaymentMethod: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD }) })), _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary absolute left-1/2 top-[calc(50%+56px)] z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", paymentType === "fiat" && "hidden"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
-                                                    setIsSrcInputDirty(false);
-                                                    setSrcAmount(value);
-                                                }, anyspendQuote: anyspendQuote }))] }) }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) })] }) }, "main-view"),
+                    _jsx("div", { className: cn(mode === "page" && "p-6"), children: mainView }, "main-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: fiatPaymentMethodView }, "fiat-payment-method-view"),
                     _jsx("div", { className: cn(mode === "page" && "p-6"), children: recipientSelectionView }, "recipient-selection-view"),

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

@@ -2,13 +2,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { RELAY_SOLANA_MAINNET_CHAIN_ID } from "../../../../anyspend/index.js";
 import { ShinyButton, useProfile } from "../../../../global-account/react/index.js";
+import centerTruncate from "../../../../shared/utils/centerTruncate.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { motion } from "framer-motion";
 import { ChevronRight, Loader2 } from "lucide-react";
+import { useAccount } from "wagmi";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
 export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, }) {
     const profile = useProfile({ address: order.recipientAddress });
     const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
+    const { address: connectedAddress } = useAccount();
     const srcToken = order.metadata.srcToken;
     const dstToken = order.metadata.dstToken;
     const expectedDstAmount = order.type === "mint_nft" ||
@@ -23,5 +26,7 @@ export default function ConnectWalletPayment({ order, onPayment, txLoading, isSw
     }
     return (_jsx("div", { className: "flex w-full flex-col items-center gap-6", children: _jsxs(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: [_jsx(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 ? (_jsxs(_Fragment, { children: ["Transaction Pending", _jsx(Loader2, { className: "ml-2 h-5 w-5 animate-spin" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap pl-4 text-lg md:text-sm", children: order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                                     ? "Pay from Phantom Wallet"
-                                    : "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsx("div", { className: "mt-4", children: _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] }) }));
+                                    : "Pay from Connected Wallet" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) }), _jsxs("span", { className: "label-style text-as-primary/50 text-xs", children: ["Connected to:", " ", order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+                            ? centerTruncate(phantomWalletAddress, 6)
+                            : centerTruncate(connectedAddress || "")] }), _jsx("div", { className: "mt-4", children: _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }) })] }) }));
 }

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

@@ -1,17 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAccountWallet } from "../../../../global-account/react/index.js";
-import { thirdwebB3Mainnet } from "../../../../shared/constants/chains/b3Chain.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
-import { client } from "../../../../shared/utils/thirdweb.js";
-import { ChevronLeft, ChevronRightCircle, Wallet, X } from "lucide-react";
+import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
-import { ConnectEmbed, lightTheme, useActiveWallet, useDisconnect as useThirdwebDisconnect } from "thirdweb/react";
-import { createWallet } from "thirdweb/wallets";
-import { useDisconnect } from "wagmi";
+import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 export var CryptoPaymentMethodType;
 (function (CryptoPaymentMethodType) {
     CryptoPaymentMethodType["NONE"] = "none";
@@ -20,45 +16,132 @@ export var CryptoPaymentMethodType;
 })(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
 export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
     const { wallet: globalWallet } = useAccountWallet();
-    const activeWallet = useActiveWallet();
+    const { address, isConnected, connector } = useAccount();
+    const { connect, connectors, isPending } = useConnect();
     const { disconnect } = useDisconnect();
-    const { disconnect: disconnectThirdweb } = useThirdwebDisconnect();
+    const { data: walletClient } = useWalletClient();
     const [showWalletModal, setShowWalletModal] = useState(false);
-    // Define available wallets for the modal
-    const availableWallets = [
-        createWallet("io.metamask"),
-        // createWallet("com.coinbase.wallet"),
-        createWallet("me.rainbow"),
-        createWallet("walletConnect"),
-        createWallet("io.rabby"),
-        createWallet("app.phantom"),
-    ];
-    return (_jsxs("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [_jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_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: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) }) }), _jsxs("div", { className: "crypto-payment-methods flex flex-col gap-3", children: [!activeWallet ? (
-                            // Not connected - show single connect button
-                            _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: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }), _jsx("p", { className: "text-as-primary/60 text-sm", children: "Choose from multiple wallet options" })] })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })) : (
-                            // Connected - show wallet info
-                            _jsx("div", { className: "crypto-payment-method-connect-wallet wallet-connected bg-as-surface-primary border-as-border-secondary rounded-xl border", children: _jsxs("div", { className: "flex items-center justify-between p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-8 w-8 rounded-full" })) : (_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: _jsx(Wallet, { className: "h-4 w-4 text-green-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(activeWallet.getAccount()?.address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_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" }), _jsx("button", { onClick: async () => {
-                                                        disconnect();
-                                                        disconnectThirdweb(activeWallet);
-                                                        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: _jsx(X, { className: "h-4 w-4" }) })] })] }) })), _jsxs("button", { onClick: () => {
+    // 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"),
+        },
+        {
+            id: "phantom",
+            name: "Phantom",
+            icon: "https://phantom.app/favicon.ico",
+            description: "Connect using Phantom wallet",
+            connector: availableConnectors.find(c => c.name === "Phantom"),
+        },
+    ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
+    // Reset modal state when closing
+    const handleCloseModal = () => {
+        setShowWalletModal(false);
+    };
+    // 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);
+                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: {} }],
+                });
+                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")) {
+                    toast.error("Account selection cancelled");
+                }
+                else {
+                    toast.error("Failed to open account selection");
+                }
+            }
+            else {
+                toast.error("Failed to open account selection");
+            }
+        }
+    };
+    return (_jsxs("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [_jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_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: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), _jsxs("div", { className: "crypto-payment-methods flex flex-col gap-6", children: [_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: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-4 w-4 text-blue-600" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), _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: [_jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] }), showWalletModal &&
-                createPortal(_jsx("div", { className: "pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Connect Wallet" }), _jsx("button", { onClick: () => setShowWalletModal(false), className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx(ConnectEmbed, { client: client, chain: thirdwebB3Mainnet, wallets: availableWallets, showThirdwebBranding: false, theme: 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: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: _jsx(ZapIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), isConnected && (_jsxs("div", { className: "installed-wallets", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), _jsx("div", { className: "space-y-2", children: _jsx("button", { onClick: () => {
+                                                setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                                onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                                                toast.success(`Selected ${connector?.name || "wallet"}`);
+                                            }, className: 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: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet.meta.icon, alt: "Wallet", className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
+                                                                    e.stopPropagation();
+                                                                    disconnect();
+                                                                    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: _jsx(X, { className: "h-4 w-4" }) })] })] }) }) })] }))] })] }), showWalletModal &&
+                createPortal(_jsx("div", { className: "wallet-connection-modal pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), _jsx("button", { onClick: handleCloseModal, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-3", children: walletOptions.map(walletOption => {
+                                        const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
+                                        return (_jsx("button", { onClick: async () => {
+                                                handleCloseModal();
+                                                await requestWalletPermissions(walletOption.connector);
+                                            }, disabled: isPending, className: `wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
+                                                ? "wallet-option--active 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: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_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 }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && (_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" }))] }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), _jsx(ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
+                                    }) }) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
 }