@b3dotfun/sdk 0.0.23 → 0.0.24

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

@@ -294,7 +294,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
         setRecipientAddress(recipientAddressFromProps || globalAddress);
     }, [recipientAddressFromProps, globalAddress]);
     // Get geo-based onramp options for fiat payments
-    const { geoData, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support } = useGeoOnrampOptions(isMainnet, srcAmountOnRamp);
+    const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(isMainnet, srcAmountOnRamp);
     // Helper function to map payment method to onramp vendor
     const getOnrampVendor = (paymentMethod) => {
         switch (paymentMethod) {
@@ -302,10 +302,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                 return "coinbase";
             case FiatPaymentMethod.STRIPE:
                 // Determine if it's stripe onramp or stripe-web2 based on support
-                if (isStripeOnrampSupported) {
-                    return "stripe";
-                }
-                else if (stripeWeb2Support?.isSupport) {
+                if (stripeWeb2Support?.isSupport) {
                     return "stripe-web2";
                 }
                 return undefined;
@@ -685,7 +682,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                 paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
             }
             else if (paymentMethod === FiatPaymentMethod.STRIPE) {
-                if (!isStripeOnrampSupported && (!stripeWeb2Support || !stripeWeb2Support.isSupport)) {
+                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
                     toast.error("Stripe not available");
                     return;
                 }
@@ -800,7 +797,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                                 setActiveTab("fiat");
                                 setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
                                 setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
-                            }, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(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: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsxs(_Fragment, { children: [globalWallet?.meta?.icon && (_jsx("img", { src: globalWallet.meta.icon || "", alt: globalWallet.ensName || "", className: "bg-b3-react-foreground size-6 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex items-center gap-1", children: [connectedName && _jsx("span", { children: formatUsername(connectedName) }), _jsx("span", { children: shortenAddress(connectedAddress || "") })] })] })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+                            }, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(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: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx(_Fragment, { children: _jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") }) })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(true);
                                     setSrcAmount(value);
                                 }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
@@ -825,7 +822,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
                             const tempDstAmount = dstAmount;
                             setSrcAmount(tempDstAmount);
                             setDstAmount(tempSrcAmount);
-                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "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: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsxs(_Fragment, { children: [recipientAddress ? (_jsxs(_Fragment, { children: [recipientProfile?.data?.avatar && (_jsx("img", { src: recipientProfile.data?.avatar || "", alt: "Connected Wallet", className: "bg-as-primary h-6 w-6 rounded-full" })), _jsxs("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: [recipientName && _jsx("span", { children: formatUsername(recipientName) }), _jsx("span", { children: shortenAddress(recipientAddress || "") })] })] })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
+                        }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "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: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsx("button", { className: cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsxs(_Fragment, { children: [recipientAddress ? (_jsx(_Fragment, { children: _jsx("span", { className: "text-as-tertiarry flex items-center gap-1 text-sm", children: recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress || "") }) })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] }) })) : (_jsx("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: _jsx("div", { className: "text-sm font-medium", children: "Select recipient" }) }))] }), isBuyMode ? (
                             // Fixed destination token display in buy mode
                             _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [selectedDstToken.metadata?.logoURI && (_jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : (_jsx(OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
                                     setIsSrcInputDirty(false);

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

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { BondkitToken } from "@b3dotfun/bondkit";
+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";
@@ -166,7 +166,7 @@ export function AnySpendBondKit({ mode = "modal", recipientAddress, contractAddr
             setValidationError("Please enter a valid amount");
         }
     };
-    const header = () => (_jsx("div", { className: "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: [ethAmount, " ETH"] }), 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..." }) }) }));

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

@@ -1,6 +1,6 @@
 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, useChainSwitchWithAction, useHasMounted, useModalStore, useTokenBalance, } from "../../../global-account/react/index.js";
+import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useHasMounted, useModalStore, useTokenBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
 import { baseMainnet } from "../../../shared/constants/chains/supported.js";
 import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
@@ -8,7 +8,7 @@ import { motion } from "motion/react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { createPublicClient, encodeFunctionData, erc20Abi, formatUnits, http } from "viem";
-import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { useAccount, useWaitForTransactionReceipt } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom.js";
 import { EthIcon } from "./icons/EthIcon.js";
 import { SolIcon } from "./icons/SolIcon.js";
@@ -98,8 +98,7 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
     });
     // Wagmi hooks
     const { address } = useAccount();
-    const { writeContractAsync } = useWriteContract();
-    const { switchChainAndExecute } = useChainSwitchWithAction();
+    const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
     // State for direct buying flow (when user has B3 tokens)
     const [isBuying, setIsBuying] = useState(false);
     const [buyingTxHash, setBuyingTxHash] = useState("");
@@ -255,36 +254,44 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
             return;
         try {
             setIsBuying(true);
-            await switchChainAndExecute(chainId, async () => {
-                // Check current allowance for B3 token to entryModule
-                const allowance = await basePublicClient.readContract({
-                    address: B3_TOKEN.address,
+            // Check current allowance for B3 token to entryModule
+            const allowance = await basePublicClient.readContract({
+                address: B3_TOKEN.address,
+                abi: erc20Abi,
+                functionName: "allowance",
+                args: [address, paymentConfig.entryModule],
+            });
+            // If allowance is insufficient, request approval first
+            if (allowance < totalCost) {
+                toast.info("Approving B3 spending...");
+                const approvalData = encodeFunctionData({
                     abi: erc20Abi,
-                    functionName: "allowance",
-                    args: [address, paymentConfig.entryModule],
+                    functionName: "approve",
+                    args: [paymentConfig.entryModule, totalCost],
                 });
-                // If allowance is insufficient, request approval
-                if (allowance < totalCost) {
-                    toast.info("Approving B3 spending...");
-                    await writeContractAsync({
-                        address: B3_TOKEN.address,
-                        abi: erc20Abi,
-                        functionName: "approve",
-                        args: [paymentConfig.entryModule, totalCost],
-                    });
-                    toast.info("Approval confirmed. Proceeding with spin purchase...");
-                }
-                // Execute the buy entries and spin
-                toast.info("Buying spins...");
-                const buyHash = await writeContractAsync({
-                    address: spinwheelContractAddress,
-                    abi: SPIN_WHEEL_ABI,
-                    functionName: "buyEntriesAndSpin",
-                    args: [address, BigInt(userSpinQuantity)],
+                await switchChainAndExecute(chainId, {
+                    to: B3_TOKEN.address,
+                    data: approvalData,
+                    value: BigInt(0),
                 });
+                toast.info("Approval confirmed. Proceeding with spin purchase...");
+            }
+            // Execute the buy entries and spin
+            toast.info("Buying spins...");
+            const buyData = encodeFunctionData({
+                abi: SPIN_WHEEL_ABI,
+                functionName: "buyEntriesAndSpin",
+                args: [address, BigInt(userSpinQuantity)],
+            });
+            const buyHash = await switchChainAndExecute(chainId, {
+                to: spinwheelContractAddress,
+                data: buyData,
+                value: BigInt(0),
+            });
+            if (buyHash) {
                 setBuyingTxHash(buyHash);
                 toast.success("Spin purchase transaction submitted!");
-            });
+            }
         }
         catch (error) {
             console.error("@@anyspend-buy-spin:error:", error);
@@ -377,7 +384,7 @@ export function AnySpendBuySpin({ isMainnet = true, loadOrder, mode = "modal", s
                                         if (!hasEnoughBalance && debouncedQuantity) {
                                             return (_jsxs("div", { className: "bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5", children: [_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-as-primary text-sm font-semibold", children: "Swap & buy from any token" }), _jsxs(TextLoop, { children: [_jsx(EthIcon, { className: "h-8 w-8" }), _jsx(SolIcon, { className: "h-8 w-8" }), _jsx(UsdcIcon, { className: "h-8 w-8" })] }), _jsx(ArrowRight, { className: "text-as-primary h-4 w-4" }), _jsx("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", className: "h-7 w-7", alt: "B3 Token" })] }), _jsx("p", { className: "text-as-primary/50 text-sm font-medium", children: "No problem, we'll help you swap to B3 for your spins!" })] }));
                                         }
-                                    })() }), _jsx(Button, { onClick: confirmQuantity, disabled: !isQuantityValid || !displayQuantity || isBuying || isTxPending, 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: isBuying ? "Buying..." : isTxPending ? "Confirming..." : "Continue" })] })) : null })] }) }));
+                                    })() }), _jsx(Button, { onClick: confirmQuantity, disabled: !isQuantityValid || !displayQuantity || isBuying || isTxPending || isSwitchingOrExecuting, 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: isBuying || isSwitchingOrExecuting ? "Buying..." : isTxPending ? "Confirming..." : "Continue" })] })) : null })] }) }));
     }
     // AnySpend flow for when user needs to swap to B3
     const encodedData = generateEncodedDataForBuyEntriesAndSpin(address || "", userSpinQuantity);

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

@@ -218,7 +218,7 @@ function AnySpendCustomInner({ isMainnet = true, loadOrder, mode = "modal", reci
     const formattedSrcAmount = srcAmount ? formatTokenAmount(srcAmount, srcToken.decimals, 6, false) : null;
     const srcFiatAmount = useMemo(() => (activeTab === "fiat" && srcAmount ? formatUnits(srcAmount.toString(), USDC_BASE.decimals) : "0"), [activeTab, srcAmount]);
     // Get geo data and onramp options (after quote is available)
-    const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support } = useGeoOnrampOptions(isMainnet, srcFiatAmount);
+    const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(isMainnet, srcFiatAmount);
     useEffect(() => {
         if (oat?.data?.order.status === "executed") {
             console.log("Calling onSuccess");
@@ -245,7 +245,7 @@ function AnySpendCustomInner({ isMainnet = true, loadOrder, mode = "modal", reci
         },
     });
     const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
-    const { address: connectedAddress, name: connectedName, profile: connectedProfile } = useConnectedUserProfile();
+    const { address: connectedAddress, name: connectedName } = useConnectedUserProfile();
     const recipientProfile = useProfile({ address: recipientAddress });
     const recipientName = recipientProfile.data?.name;
     const handleCreateOrder = async (recipientAddress, onramp) => {
@@ -378,7 +378,7 @@ function AnySpendCustomInner({ isMainnet = true, loadOrder, mode = "modal", reci
                 paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
             }
             else if (paymentMethod === FiatPaymentMethod.STRIPE) {
-                if (!isStripeOnrampSupported && (!stripeWeb2Support || !stripeWeb2Support.isSupport)) {
+                if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
                     toast.error("Stripe not available");
                     return;
                 }
@@ -435,7 +435,7 @@ function AnySpendCustomInner({ isMainnet = true, loadOrder, mode = "modal", reci
                                                 opacity: hasMounted ? 1 : 0,
                                                 y: hasMounted ? 0 : 20,
                                                 filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsxs(_Fragment, { children: [connectedProfile?.data?.avatar && (_jsx("img", { src: connectedProfile.data?.avatar || "", alt: "Connected Wallet", className: "bg-as-primary h-6 w-6 rounded-full" })), _jsxs("span", { className: "text-as-tertiarry flex items-center gap-1", children: [connectedName && _jsx("span", { children: formatUsername(connectedName) }), _jsx("span", { children: shortenAddress(connectedAddress || "") })] })] })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
+                                            }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [connectedAddress ? (_jsx(_Fragment, { children: _jsx("span", { className: "text-as-tertiarry flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") }) })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(motion.div, { initial: false, animate: {
                                                         opacity: hasMounted ? 1 : 0,
                                                         y: hasMounted ? 0 : 20,
                                                         filter: hasMounted ? "blur(0px)" : "blur(10px)",

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

@@ -1,6 +1,6 @@
 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, useChainSwitchWithAction, useHasMounted, useModalStore, useTokenBalance, } from "../../../global-account/react/index.js";
+import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, useHasMounted, useModalStore, useTokenBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
 import invariant from "invariant";
 import { ArrowRight, Loader2 } from "lucide-react";
@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { createPublicClient, encodeFunctionData, erc20Abi, http } from "viem";
 import { base } from "viem/chains";
-import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { useAccount, useWaitForTransactionReceipt } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom.js";
 import { EthIcon } from "./icons/EthIcon.js";
 import { SolIcon } from "./icons/SolIcon.js";
@@ -37,8 +37,7 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
     });
     // Wagmi hooks for direct staking
     const { address } = useAccount();
-    const { writeContractAsync } = useWriteContract();
-    const { switchChainAndExecute } = useChainSwitchWithAction();
+    const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
     // State for direct staking flow
     const [isStaking, setIsStaking] = useState(false);
     const [stakingTxHash, setStakingTxHash] = useState("");
@@ -142,36 +141,44 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
             return;
         try {
             setIsStaking(true);
-            await switchChainAndExecute(base.id, async () => {
-                // Check current allowance
-                const allowance = await basePublicClient.readContract({
-                    address: B3_TOKEN.address,
+            // Check current allowance
+            const allowance = await basePublicClient.readContract({
+                address: B3_TOKEN.address,
+                abi: erc20Abi,
+                functionName: "allowance",
+                args: [address, ERC20Staking],
+            });
+            // If allowance is insufficient, request approval first
+            if (allowance < BigInt(userStakeAmount)) {
+                toast.info("Approving B3 spending...");
+                const approvalData = encodeFunctionData({
                     abi: erc20Abi,
-                    functionName: "allowance",
-                    args: [address, ERC20Staking],
+                    functionName: "approve",
+                    args: [ERC20Staking, BigInt(userStakeAmount)],
                 });
-                // If allowance is insufficient, request approval
-                if (allowance < BigInt(userStakeAmount)) {
-                    toast.info("Approving B3 spending...");
-                    await writeContractAsync({
-                        address: B3_TOKEN.address,
-                        abi: erc20Abi,
-                        functionName: "approve",
-                        args: [ERC20Staking, BigInt(userStakeAmount)],
-                    });
-                    toast.info("Approval confirmed. Proceeding with stake...");
-                }
-                // Execute the stake
-                toast.info("Staking B3...");
-                const stakeHash = await writeContractAsync({
-                    address: ERC20Staking,
-                    abi: ABI_ERC20_STAKING,
-                    functionName: "stake",
-                    args: [BigInt(userStakeAmount), recipientAddress],
+                await switchChainAndExecute(base.id, {
+                    to: B3_TOKEN.address,
+                    data: approvalData,
+                    value: BigInt(0),
                 });
+                toast.info("Approval confirmed. Proceeding with stake...");
+            }
+            // Execute the stake
+            toast.info("Staking B3...");
+            const stakeData = encodeFunctionData({
+                abi: ABI_ERC20_STAKING,
+                functionName: "stake",
+                args: [BigInt(userStakeAmount), recipientAddress],
+            });
+            const stakeHash = await switchChainAndExecute(base.id, {
+                to: ERC20Staking,
+                data: stakeData,
+                value: BigInt(0),
+            });
+            if (stakeHash) {
                 setStakingTxHash(stakeHash);
                 toast.success("Staking transaction submitted!");
-            });
+            }
         }
         catch (error) {
             console.error("@@b3-stake:error:", error);
@@ -227,7 +234,7 @@ export function AnySpendStakeB3({ isMainnet = true, loadOrder, mode = "modal", r
                                                         ? `No problem, we'll help you swap to ${debouncedAmount} B3!`
                                                         : "Not enough B3? We'll help you swap from other coins." })] }));
                                     }
-                                })() }), _jsx(Button, { onClick: confirmAmount, disabled: !isAmountValid || !displayAmount || isStaking || isTxPending, 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: isStaking ? "Staking..." : isTxPending ? "Confirming..." : "Continue" })] })] }) }));
+                                })() }), _jsx(Button, { onClick: confirmAmount, disabled: !isAmountValid || !displayAmount || isStaking || isTxPending || isSwitchingOrExecuting, 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: isStaking || isSwitchingOrExecuting ? "Staking..." : isTxPending ? "Confirming..." : "Continue" })] })] }) }));
     }
     // Success Modal for Direct Staking
     if (showSuccessModal) {

package/dist/esm/anyspend/react/components/common/Accordion.d.ts

@@ -0,0 +1,7 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from "react";
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../../../shared/utils/index.js";
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => _jsx(AccordionPrimitive.Item, { ref: ref, className: cn("", className), ...props }));
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn("border-as-border-secondary bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border px-4 py-3 text-left transition-colors hover:bg-gray-100/50 data-[state=open]:rounded-b-none dark:border-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-700/50", className), ...props, children: [_jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: children }), _jsx(ChevronDown, { className: "h-4 w-4 text-gray-500 transition-transform duration-200 data-[state=open]:rotate-180 dark:text-gray-400" })] })));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden", ...props, children: _jsx("div", { className: cn("border-as-border-secondary bg-as-surface-secondary w-full rounded-b-xl border-x border-b py-2 pr-4", className), children: children }) })));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -5,9 +5,7 @@ import { ShinyButton, useProfile } from "../../../../global-account/react/index.
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
 import { motion } from "framer-motion";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { useMemo } from "react";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
-import { StepProgress } from "./StepProgress.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, "");
@@ -20,27 +18,10 @@ export default function ConnectWalletPayment({ order, onPayment, txLoading, isSw
         ? "0"
         : order.payload.expectedDstAmount.toString();
     const formattedExpectedDstAmount = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
-    const steps = useMemo(() => [
-        {
-            id: 1,
-            title: "Connect Wallet",
-            description: "Connect your wallet to continue",
-        },
-        {
-            id: 2,
-            title: "Awaiting Payment",
-            description: "Send your payment to the address below",
-        },
-        {
-            id: 3,
-            title: "Complete Payment",
-            description: "Finalize your transaction",
-        },
-    ], []);
     if (!srcToken || !dstToken) {
         return _jsx("div", { children: "Loading..." });
     }
-    return (_jsxs("div", { className: "flex w-full flex-col items-center gap-6", children: [_jsx(StepProgress, { steps: steps, currentStepIndex: 1 }), _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 }) })] })] }));
+    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 }) })] }) }));
 }

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

@@ -27,7 +27,7 @@ export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedP
         }
     };
     // Load geo-based onramp options like in PanelOnramp
-    const { coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(isMainnet, srcAmountOnRamp);
+    const { coinbaseAvailablePaymentMethods, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(isMainnet, srcAmountOnRamp);
     // Generate payment methods based on geo availability (like in PanelOnrampPayment)
     const availablePaymentMethods = [];
     // Add Coinbase Pay if available
@@ -43,7 +43,7 @@ export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedP
         });
     }
     // Add Stripe if available
-    if (isStripeOnrampSupported || (stripeWeb2Support && stripeWeb2Support.isSupport)) {
+    if (stripeWeb2Support && stripeWeb2Support.isSupport) {
         const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE);
         availablePaymentMethods.push({
             id: FiatPaymentMethod.STRIPE,