@b3dotfun/sdk 0.0.34 → 0.0.35-alpha.1

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

@@ -13,10 +13,11 @@ export var CryptoPaymentMethodType;
 (function (CryptoPaymentMethodType) {
     CryptoPaymentMethodType["NONE"] = "none";
     CryptoPaymentMethodType["CONNECT_WALLET"] = "connect_wallet";
+    CryptoPaymentMethodType["GLOBAL_WALLET"] = "global_wallet";
     CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
 })(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
 export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
-    const { wallet: globalWallet } = useAccountWallet();
+    const { wallet: globalWallet, address: globalAddress } = useAccountWallet();
     const { address, isConnected, connector } = useAccount();
     const { connect, connectors, isPending } = useConnect();
     const { disconnect } = useDisconnect();
@@ -122,20 +123,26 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
                                 }, 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: [_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 &&
+                                }, 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 || globalAddress) && (_jsxs("div", { className: "installed-wallets", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), _jsxs("div", { className: "space-y-2", children: [isConnected && (_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: [_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" }) })] })] }) })), globalAddress && (_jsx("button", { onClick: () => {
+                                                    setSelectedPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
+                                                    onSelectPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
+                                                    toast.success("Selected B3 Account");
+                                                }, className: cn("crypto-payment-method-global-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_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: "Global Account", className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: _jsx(Wallet, { className: "h-5 w-5 text-purple-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Global Account" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(globalAddress || "") })] })] }), _jsx("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] }))] })] }), 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 () => {

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

@@ -148,7 +148,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
     const [txHash, setTxHash] = useState();
     const [showQRCode, setShowQRCode] = useState(false);
     const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
-    const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
+    const { switchChainAndExecuteWithEOA, switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
     const roundedUpSrcAmount = useMemo(() => {
         // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
         // Use 21 significant digits (max allowed by Intl.NumberFormat)
@@ -192,11 +192,18 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
             to = order.srcTokenAddress;
             value = BigInt(0);
         }
-        const txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
+        // Use appropriate execution method based on payment method
+        let txHash;
+        if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
+            txHash = await switchChainAndExecute(order.srcChain, { to, data: txData, value });
+        }
+        else {
+            txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
+        }
         if (txHash) {
             setTxHash(txHash);
         }
-    }, [order, switchChainAndExecuteWithEOA, depositDeficit]);
+    }, [order, switchChainAndExecuteWithEOA, switchChainAndExecute, depositDeficit, effectiveCryptoPaymentMethod]);
     // Main payment handler that triggers chain switch and payment
     const handlePayment = async () => {
         console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
@@ -475,7 +482,8 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
                                                 ? `Waiting for payment`
                                                 : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`, chainId: order.srcChain, tx: null, isProcessing: true, delay: 0.5 }))] }) })] }) }), !depositEnoughAmount && order.status !== "expired" && (_jsx(InsufficientDepositPayment, { order: order, srcToken: srcToken, depositDeficit: depositDeficit, phantomWalletAddress: phantomWalletAddress, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, onPayment: handlePayment }))] }));
     }
-    return (_jsxs(_Fragment, { children: [statusDisplay === "processing" && (_jsx(_Fragment, { children: order.onrampMetadata ? (_jsx(PaymentVendorUI, { order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsx(ConnectWalletPayment, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
+    return (_jsxs(_Fragment, { children: [statusDisplay === "processing" && (_jsx(_Fragment, { children: order.onrampMetadata ? (_jsx(PaymentVendorUI, { order: order, dstTokenSymbol: dstToken.symbol })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+                    effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (_jsx(ConnectWalletPayment, { order: order, onPayment: handlePayment, onCancel: handleBack, txLoading: txLoading, isSwitchingOrExecuting: isSwitchingOrExecuting, phantomWalletAddress: phantomWalletAddress, tournament: tournament, nft: nft, cryptoPaymentMethod: effectiveCryptoPaymentMethod })) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
                 // Transfer Crypto Payment Method - Show new card-based UI
                 _jsx(TransferCryptoDetails, { order: order, recipientName: recipientName, srcToken: srcToken, dstToken: dstToken, tournament: tournament, nft: nft, onBack: handleBack })) : (_jsxs("div", { className: "relative flex w-full flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-as-primary/50", children: "Please send" }), _jsxs("div", { className: "flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0", children: [_jsx(CopyToClipboard, { text: roundedUpSrcAmount, onCopy: () => {
                                                 toast.success("Copied to clipboard");

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

@@ -1,8 +1,6 @@
 import { components } from "../../../types/api";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
-import { FiatPaymentMethod } from "./FiatPaymentMethod";
-interface PaySectionProps {
-    paymentType: "crypto" | "fiat";
+interface CryptoPaySectionProps {
     selectedSrcChainId: number;
     setSelectedSrcChainId: (chainId: number) => void;
     selectedSrcToken: components["schemas"]["Token"];
@@ -11,10 +9,8 @@ interface PaySectionProps {
     setSrcAmount: (amount: string) => void;
     setIsSrcInputDirty: (dirty: boolean) => void;
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
-    selectedFiatPaymentMethod: FiatPaymentMethod;
     onSelectCryptoPaymentMethod: () => void;
-    onSelectFiatPaymentMethod: () => void;
     anyspendQuote?: any;
 }
-export declare function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }: PaySectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }: CryptoPaySectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Input, useProfile, useTokenData } from "../../../../global-account/react/index.js";
+import { useProfile, useTokenData } from "../../../../global-account/react/index.js";
 import { formatUsername } from "../../../../shared/utils/index.js";
 import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
 import { formatDisplayNumber } from "../../../../shared/utils/number.js";
@@ -8,10 +8,9 @@ import { motion } from "motion/react";
 import { useEffect, useRef } from "react";
 import { useAccount } from "wagmi";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
-import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
 import { OrderTokenAmount } from "./OrderTokenAmount.js";
 import { TokenBalance } from "./TokenBalance.js";
-export function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }) {
+export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }) {
     const { address: connectedAddress, isConnected } = useAccount();
     const { data: profileData } = useProfile({ address: connectedAddress });
     const connectedName = profileData?.displayName;
@@ -40,18 +39,14 @@ export function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChai
     useEffect(() => {
         appliedSrcMetadataRef.current = false;
     }, [selectedSrcToken.address, selectedSrcToken.chainId]);
-    return (_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: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_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" }), paymentType === "crypto" ? (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_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("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) }))] }), paymentType === "crypto" ? (_jsxs(_Fragment, { children: [_jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
+    return (_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: "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_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 focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_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.GLOBAL_WALLET ? (_jsxs(_Fragment, { children: ["Global Account", _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: connectedAddress, 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: connectedAddress, 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: connectedAddress, onChangeInput: value => {
-                                    setIsSrcInputDirty(true);
-                                    setSrcAmount(value);
-                                } })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { type: "text", value: srcAmount, onChange: e => setSrcAmount(e.target.value.replace(/[^0-9.]/g, "")), placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
-                                        width: `${Math.max(50, srcAmount.length * 34)}px`,
-                                    } })] }) }), _jsx("div", { className: "mx-auto mb-6 inline-grid grid-cols-4 gap-2", children: ["5", "10", "20", "25"].map(value => (_jsxs("button", { onClick: () => setSrcAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmount === value
-                                ? "border-as-border-secondary bg-as-surface-secondary"
-                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) })] }))] }));
+                        } })] })] }));
 }

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

@@ -4,11 +4,12 @@ export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";
-export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3";
 export { AnySpendTournament } from "./AnySpendTournament";
+export { AnyspendSignatureMint } from "./AnyspendSignatureMint";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
 export { ChainTokenIcon } from "./common/ChainTokenIcon";
+export { CryptoPaySection } from "./common/CryptoPaySection";
 export { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 export { OrderDetails } from "./common/OrderDetails";
 export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible";
@@ -17,7 +18,6 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem";
 export { OrderStatus } from "./common/OrderStatus";
 export { OrderToken } from "./common/OrderToken";
 export { OrderTokenAmount } from "./common/OrderTokenAmount";
-export { PaySection } from "./common/PaySection";
 export { RecipientSelection } from "./common/RecipientSelection";
 export { StepProgress } from "./common/StepProgress";
 export { TokenBalance } from "./common/TokenBalance";

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

@@ -5,12 +5,13 @@ export { AnySpendBuySpin } from "./AnySpendBuySpin.js";
 export { AnySpendCustom } from "./AnySpendCustom.js";
 export * from "./AnySpendFingerprintWrapper.js";
 export { AnySpendNFT } from "./AnySpendNFT.js";
-export { AnyspendSignatureMint } from "./AnyspendSignatureMint.js";
 export { AnySpendStakeB3 } from "./AnySpendStakeB3.js";
 export { AnySpendTournament } from "./AnySpendTournament.js";
+export { AnyspendSignatureMint } from "./AnyspendSignatureMint.js";
 export { AnySpendNFTButton } from "./common/AnySpendNFTButton.js";
 // Common Components
 export { ChainTokenIcon } from "./common/ChainTokenIcon.js";
+export { CryptoPaySection } from "./common/CryptoPaySection.js";
 export { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
 export { OrderDetails } from "./common/OrderDetails.js";
 export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible.js";
@@ -19,7 +20,6 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem.js";
 export { OrderStatus } from "./common/OrderStatus.js";
 export { OrderToken } from "./common/OrderToken.js";
 export { OrderTokenAmount } from "./common/OrderTokenAmount.js";
-export { PaySection } from "./common/PaySection.js";
 export { RecipientSelection } from "./common/RecipientSelection.js";
 export { StepProgress } from "./common/StepProgress.js";
 export { TokenBalance } from "./common/TokenBalance.js";

package/dist/esm/global-account/react/components/B3DynamicModal.js

@@ -89,5 +89,5 @@ export function B3DynamicModal() {
     const ModalContent = isMobile ? DrawerContent : DialogContent;
     const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
     const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
-    return (_jsx(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: _jsxs(ModalContent, { className: cn(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", "mx-auto w-full max-w-md", "sm:max-w-lg sm:rounded-b-none"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]", contentType?.type === "manageAccount" && "h-[90dvh]"), children: [history.length > 0 && contentType?.showBackButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
+    return (_jsx(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: _jsxs(ModalContent, { className: cn(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", "mx-auto w-full max-w-md", "sm:max-w-lg sm:rounded-b-none"), hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]"), children: [history.length > 0 && contentType?.showBackButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
 }

package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js

@@ -53,13 +53,14 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
         const [unlinkingAccountId, setUnlinkingAccountId] = useState(null);
         const { data: profilesRaw = [], isLoading: isLoadingProfiles } = useProfiles({ client });
         const { mutate: unlinkProfile, isPending: isUnlinking } = useUnlinkProfile();
-        const { setB3ModalOpen, setB3ModalContentType, isLinking } = useModalStore();
+        const { setB3ModalOpen, setB3ModalContentType, isLinking, contentType } = useModalStore();
         const { user, setUser } = useB3();
         const [isUpdatingCode, setIsUpdatingCode] = useState(false);
         const [newReferralCode, setNewReferralCode] = useState("");
         const [isEditingCode, setIsEditingCode] = useState(false);
         const referallCodeRef = useRef(null);
         const { data: referrals, isLoading: isLoadingReferrals } = useQueryB3("referrals", "find", { query: { referrerId: user?.userId } }, !!user?.userId);
+        const showReferralInfo = contentType?.showReferralInfo ?? false;
         const mutationOptions = {
             onError: (error) => {
                 console.error("Error Unlinking account:", error);
@@ -145,7 +146,9 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
                 },
             });
         };
-        return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Linked Accounts" }), _jsxs(Button, { className: "bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2", onClick: handleOpenLinkModal, disabled: isLinking, children: [isLinking ? (_jsx(Loader2, { className: "text-b3-primary-blue animate-spin", size: 16 })) : (_jsx(LinkIcon, { size: 16, className: "text-b3-primary-blue" })), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? (_jsx("div", { className: "space-y-4", children: profiles.map(profile => (_jsxs("div", { className: "bg-b3-line flex items-center justify-between rounded-xl p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [profile.imageUrl ? (_jsx("img", { src: profile.imageUrl, alt: profile.title, className: "size-10 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: profile.title }), _jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(UnlinkIcon, { size: 16 })) })] }, profile.title))) })) : (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), _jsxs("div", { className: "bg-b3-line rounded-xl p-4", children: [isEditingCode && (_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsxs("div", { className: "flex items-center justify-between", children: [!isEditingCode && (_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsx("div", { className: "flex items-center gap-2", children: isEditingCode ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", placeholder: "Enter new code", ref: referallCodeRef }), _jsx(Button, { size: "sm", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : "Save" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+        return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Linked Accounts" }), _jsxs(Button, { className: "bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2", onClick: handleOpenLinkModal, disabled: isLinking, children: [isLinking ? (_jsx(Loader2, { className: "text-b3-primary-blue animate-spin", size: 16 })) : (_jsx(LinkIcon, { size: 16, className: "text-b3-primary-blue" })), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? (_jsx("div", { className: "space-y-4", children: profiles.map(profile => (_jsxs("div", { className: "bg-b3-line flex items-center justify-between rounded-xl p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [profile.imageUrl ? (_jsx("img", { src: profile.imageUrl, alt: profile.title, className: "size-10 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: profile.title }), _jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(UnlinkIcon, { size: 16 })) })] }, profile.title))) })) : (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), showReferralInfo && (
+                /* Referral Section */
+                _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), _jsxs("div", { className: "bg-b3-line rounded-xl p-4", children: [isEditingCode && (_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsxs("div", { className: "flex items-center justify-between", children: [!isEditingCode && (_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsx("div", { className: "flex items-center gap-2", children: isEditingCode ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", placeholder: "Enter new code", ref: referallCodeRef }), _jsx(Button, { size: "sm", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : "Save" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
                                                             setIsEditingCode(false);
                                                             setNewReferralCode("");
                                                         }, children: "Cancel" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", children: currentReferralCode }), _jsx(Button, { size: "icon", variant: "ghost", onClick: handleCopyCode, children: _jsx(Copy, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => {
@@ -153,7 +156,7 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
                                                             setTimeout(() => {
                                                                 referallCodeRef.current?.focus();
                                                             }, 100);
-                                                        }, children: _jsx(Pencil, { className: "h-4 w-4" }) })] })) })] })] }), _jsxs("div", { className: "bg-b3-line rounded-xl p-4", children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? (_jsx("div", { className: "flex justify-center py-4", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? (_jsx("div", { className: "space-y-3", children: referrals.data.map((referral) => (_jsxs("div", { className: "flex items-center justify-between rounded-lg bg-white p-3", children: [_jsx("div", { className: "text-sm font-medium", children: referral.referreeId }), _jsx("div", { className: "text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : (_jsx("div", { className: "py-4 text-center text-gray-500", children: "No referred users yet" }))] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), _jsx("div", { className: "bg-b3-line rounded-xl p-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), _jsx("div", { className: "bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), _jsxs("div", { className: "border-b3-line flex items-center justify-between rounded-2xl border p-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4" }), _jsx("h3", { className: "font-neue-montreal-semibold text-b3-grey", children: "Global Account" })] }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm", children: "Your universal account for all B3 apps" })] }), _jsx("button", { className: "text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border", onClick: onLogoutEnhanced, children: logoutLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(SignOutIcon, { size: 16, className: "text-b3-grey" }) })] })] }));
+                                                        }, children: _jsx(Pencil, { className: "h-4 w-4" }) })] })) })] })] }), _jsxs("div", { className: "bg-b3-line rounded-xl p-4", children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? (_jsx("div", { className: "flex justify-center py-4", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? (_jsx("div", { className: "space-y-3", children: referrals.data.map((referral) => (_jsxs("div", { className: "flex items-center justify-between rounded-lg bg-white p-3", children: [_jsx("div", { className: "text-sm font-medium", children: referral.referreeId }), _jsx("div", { className: "text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : (_jsx("div", { className: "py-4 text-center text-gray-500", children: "No referred users yet" }))] })] })), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), _jsx("div", { className: "bg-b3-line rounded-xl p-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), _jsx("div", { className: "bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), _jsxs("div", { className: "border-b3-line flex items-center justify-between rounded-2xl border p-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4" }), _jsx("h3", { className: "font-neue-montreal-semibold text-b3-grey", children: "Global Account" })] }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm", children: "Your universal account for all B3 apps" })] }), _jsx("button", { className: "text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border", onClick: onLogoutEnhanced, children: logoutLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(SignOutIcon, { size: 16, className: "text-b3-grey" }) })] })] }));
     };
     return (_jsx("div", { className: "b3-manage-account bg-b3-background flex flex-col rounded-xl", children: _jsx("div", { className: "flex-1", children: _jsxs(TabsPrimitive, { defaultValue: activeTab, onValueChange: value => {
                     const tab = value;

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3.js

@@ -6,7 +6,7 @@ import { Loading } from "../ui/Loading.js";
 export function SignInWithB3(props) {
     const { setB3ModalOpen, setB3ModalContentType, setEcoSystemAccountAddress } = useModalStore();
     const { account } = useB3();
-    const { isAuthenticating, isConnected } = useAuthentication(props.partnerId, props.loginWithSiwe);
+    const { isAuthenticatingV2, isAuthenticated } = useAuthentication(props.partnerId, props.loginWithSiwe);
     const isMobile = useIsMobile();
     useEffect(() => {
         if (account) {
@@ -21,10 +21,10 @@ export function SignInWithB3(props) {
         });
         setB3ModalOpen(true);
     };
-    if (isConnected) {
+    if (isAuthenticated) {
         return _jsx(ManageAccountButton, { ...props });
     }
-    if (isAuthenticating) {
+    if (isAuthenticatingV2) {
         return (_jsx(StyleRoot, { children: _jsxs(Button, { disabled: true, style: { backgroundColor: "#3368ef" }, className: "flex items-center gap-2 text-white", children: [props.withLogo !== false && (_jsx("img", { src: "https://cdn.b3.fun/b3_logo_white.svg", alt: "B3 Logo", className: "h-5 w-5" })), props.loadingButtonText || (isMobile ? _jsx(Loading, { size: "sm" }) : "Signing in…")] }) }));
     }
     return (_jsx(StyleRoot, { children: _jsx(Button, { onClick: handleClick, style: { backgroundColor: "#3368ef" }, className: "b3-sign-in-button flex items-center gap-2 font-medium text-white", children: props.buttonText ? (props.buttonText) : (_jsxs(_Fragment, { children: [_jsx("span", { children: "Sign in with" }), props.withLogo !== false && (_jsx("img", { src: "https://cdn.b3.fun/b3_logo_white.svg", alt: "B3 Logo", className: "h-5 w-6" }))] })) }) }));

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -19,6 +19,7 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
     const { setB3ModalContentType, setB3ModalOpen, isOpen } = useModalStore();
     const account = useActiveAccount();
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+    const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
     const isAuthenticating = useAuthStore(state => state.isAuthenticating);
     const isConnected = useAuthStore(state => state.isConnected);
     const setIsConnected = useAuthStore(state => state.setIsConnected);
@@ -163,6 +164,7 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
         if (loginWithSiwe) {
             debug("setIsAuthenticating:true:1");
             setIsAuthenticating(true);
+            setIsAuthenticatingV2(true);
             const userAuth = await authenticate(account, partnerId);
             setUser(userAuth.user);
         }
@@ -170,7 +172,17 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
         onLoginSuccess?.(account);
         debug("setIsAuthenticating:false:1");
         setIsAuthenticating(false);
-    }, [loginWithSiwe, onLoginSuccess, setIsAuthenticating, authenticate, partnerId, setUser, setIsConnected]);
+        setIsAuthenticatingV2(false);
+    }, [
+        loginWithSiwe,
+        onLoginSuccess,
+        setIsAuthenticating,
+        authenticate,
+        partnerId,
+        setUser,
+        setIsConnected,
+        setIsAuthenticatingV2,
+    ]);
     useEffect(() => {
         if (step === "permissions") {
             setB3ModalContentType({

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Privy.js

@@ -6,6 +6,7 @@ const debug = debugB3React("SignInWithB3Privy");
 export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }) {
     const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(partnerId, chain, onSuccess);
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+    const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
     const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
     const { logout } = useAuthentication(partnerId);
     debug("@@SignInWithB3Privy", {
@@ -33,10 +34,11 @@ export function SignInWithB3Privy({ onSuccess, onError, partnerId, chain }) {
             finally {
                 debug("setIsAuthenticating:false:7");
                 setIsAuthenticating(false);
+                setIsAuthenticatingV2(false);
             }
         }
         autoConnect();
-    }, [connectTw, onSuccess, onError, setIsAuthenticating, setIsAuthenticated, logout]);
+    }, [connectTw, onSuccess, onError, setIsAuthenticating, setIsAuthenticated, logout, setIsAuthenticatingV2]);
     // Currently we auto login, so we can show loading immediately and the onSuccess will proceed to the next modal
     return (_jsx("div", { className: "flex aspect-square items-center justify-center p-6", children: _jsx(Loading, { variant: "white", size: "lg" }) }));
 }

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStep.js

@@ -13,7 +13,7 @@ export function LoginStepContainer({ children, partnerId }) {
         },
     }, !!partnerId);
     const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center", children: [partnerLogo && (_jsx("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 mt-6 h-12 w-auto object-contain" })), children, _jsxs("h2", { className: "mt-6 flex items-center gap-2 text-lg font-bold", children: ["Powered by", _jsx("img", { alt: "B3 Logo", className: "h-5", src: "https://cdn.b3.fun/b3_logo.svg" }), "Connect"] })] }));
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center pt-6", children: [partnerLogo && (_jsx("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 h-12 w-auto object-contain" })), children, _jsxs("h2", { className: "mt-6 flex items-center gap-2 text-lg font-bold", children: ["Powered by", _jsx("img", { alt: "B3 Logo", className: "h-5", src: "https://cdn.b3.fun/b3_logo.svg" }), "Connect"] })] }));
 }
 export function LoginStep({ onSuccess, onError, partnerId, chain }) {
     const wallet = ecosystemWallet(ecosystemWalletId, {
@@ -21,6 +21,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }) {
     });
     const { theme } = useB3();
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+    const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
     const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
     const { logout } = useAuthentication(partnerId);
     return (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx(ConnectEmbed, { showThirdwebBranding: false, client: client, chain: chain, wallets: [wallet], theme: theme === "light"
@@ -61,6 +62,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }) {
             }, className: "b3-login-step", onConnect: async (wallet) => {
                 try {
                     setIsAuthenticating(true);
+                    setIsAuthenticatingV2(true);
                     debug("setIsAuthenticating:true:6");
                     const account = wallet.getAccount();
                     if (!account)
@@ -77,6 +79,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }) {
                 finally {
                     debug("setIsAuthenticating:false:6");
                     setIsAuthenticating(false);
+                    setIsAuthenticatingV2(false);
                 }
             } }) }));
 }

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js

@@ -10,6 +10,7 @@ export function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategi
     const [showAllWallets, setShowAllWallets] = useState(false);
     const { connect } = useConnect(partnerId, chain);
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+    const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
     const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
     const { logout } = useAuthentication(partnerId);
     const { connect: connectTW } = useConnectTW();
@@ -23,6 +24,7 @@ export function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategi
             setIsLoading(true);
             debug("setIsAuthenticating:true:3");
             setIsAuthenticating(true);
+            setIsAuthenticatingV2(true);
             const options = getConnectOptionsFromStrategy(strategy);
             let connectResult;
             if (automaticallySetFirstEoa) {
@@ -57,6 +59,7 @@ export function LoginStepCustom({ onSuccess, onError, partnerId, chain, strategi
             setIsLoading(false);
             debug("setIsAuthenticating:false:3");
             setIsAuthenticating(false);
+            setIsAuthenticatingV2(false);
         }
     };
     return (_jsxs(LoginStepContainer, { partnerId: partnerId, children: [authStrategies.length > 0 && (_jsx("div", { className: "mb-6 grid w-full grid-cols-4 gap-4", children: authStrategies.map(strategy => {

package/dist/esm/global-account/react/hooks/useAuthentication.d.ts

@@ -9,4 +9,5 @@ export declare function useAuthentication(partnerId: string, loginWithSiwe?: boo
     wallet: import("thirdweb/dist/types/wallets/in-app/core/wallet/types").EcosystemWallet;
     preAuthenticate: typeof preAuthenticate;
     connect: (strategyOptions?: import("thirdweb/wallets").SingleStepAuthArgsType) => Promise<import("thirdweb/wallets").Wallet | null>;
+    isAuthenticatingV2: boolean;
 };

package/dist/esm/global-account/react/hooks/useAuthentication.js

@@ -4,7 +4,7 @@ import { ecosystemWalletId } from "../../../shared/constants/index.js";
 import { b3MainnetThirdWeb } from "../../../shared/constants/chains/supported.js";
 import { debugB3React } from "../../../shared/utils/debug.js";
 import { client } from "../../../shared/utils/thirdweb.js";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useActiveWallet, useAutoConnect, useConnectedWallets, useDisconnect } from "thirdweb/react";
 import { ecosystemWallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
@@ -25,6 +25,11 @@ export function useAuthentication(partnerId, loginWithSiwe) {
     const setIsConnected = useAuthStore(state => state.setIsConnected);
     const isConnecting = useAuthStore(state => state.isConnecting);
     const isConnected = useAuthStore(state => state.isConnected);
+    const useAutoConnectLoadingPrevious = useRef(false);
+    const setIsAuthenticatingV2 = useAuthStore(state => state.setIsAuthenticatingV2);
+    const isAuthenticatingV2 = useAuthStore(state => state.isAuthenticatingV2);
+    const hasStartedConnecting = useAuthStore(state => state.hasStartedConnecting);
+    const setHasStartedConnecting = useAuthStore(state => state.setHasStartedConnecting);
     const { connect } = useConnect(partnerId, b3MainnetThirdWeb);
     const wallet = ecosystemWallet(ecosystemWalletId, {
         partnerId: partnerId,
@@ -33,11 +38,13 @@ export function useAuthentication(partnerId, loginWithSiwe) {
         client,
         wallets: [wallet],
         onConnect: async (wallet) => {
+            setHasStartedConnecting(true);
             try {
                 setIsConnected(true);
                 if (!loginWithSiwe) {
                     debug("Skipping SIWE login", { loginWithSiwe });
                     setIsAuthenticated(true);
+                    setIsAuthenticatingV2(false);
                     return;
                 }
                 debug("setIsAuthenticating:true:4");
@@ -51,6 +58,7 @@ export function useAuthentication(partnerId, loginWithSiwe) {
                     const userAuth = await app.reAuthenticate();
                     setUser(userAuth.user);
                     setIsAuthenticated(true);
+                    setIsAuthenticatingV2(false);
                     debug("Re-authenticated successfully", { userAuth });
                 }
                 catch (error) {
@@ -59,6 +67,7 @@ export function useAuthentication(partnerId, loginWithSiwe) {
                     const userAuth = await authenticate(account, partnerId);
                     setUser(userAuth.user);
                     setIsAuthenticated(true);
+                    setIsAuthenticatingV2(false);
                     debug("Fresh authentication successful", { userAuth });
                 }
             }
@@ -68,8 +77,18 @@ export function useAuthentication(partnerId, loginWithSiwe) {
                 debug("setIsAuthenticating:false:4");
                 setUser();
             }
+            setIsAuthenticatingV2(false);
         },
     });
+    /**
+     * useAutoConnectLoading starts as false
+     */
+    useEffect(() => {
+        if (!useAutoConnectLoading && useAutoConnectLoadingPrevious.current && !hasStartedConnecting) {
+            setIsAuthenticatingV2(false);
+        }
+        useAutoConnectLoadingPrevious.current = useAutoConnectLoading;
+    }, [useAutoConnectLoading]);
     // Ensure isAuthenticating stays true until we're fully ready
     useEffect(() => {
         if (useAutoConnectLoading) {
@@ -128,5 +147,6 @@ export function useAuthentication(partnerId, loginWithSiwe) {
         wallet,
         preAuthenticate,
         connect,
+        isAuthenticatingV2,
     };
 }

package/dist/esm/global-account/react/stores/useAuthStore.d.ts

@@ -25,6 +25,10 @@ interface AuthState {
         onError?: (error: Error) => void;
     }) => void;
     reset: () => void;
+    isAuthenticatingV2: boolean;
+    setIsAuthenticatingV2: (isAuthenticating: boolean) => void;
+    hasStartedConnecting: boolean;
+    setHasStartedConnecting: (hasStartedConnecting: boolean) => void;
 }
 export declare const useAuthStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AuthState>>;
 export {};

package/dist/esm/global-account/react/stores/useAuthStore.js

@@ -37,4 +37,8 @@ export const useAuthStore = create(set => ({
         onSuccess: undefined,
         onError: undefined,
     }),
+    isAuthenticatingV2: true,
+    setIsAuthenticatingV2: isAuthenticating => set({ isAuthenticatingV2: isAuthenticating }),
+    hasStartedConnecting: false,
+    setHasStartedConnecting: hasStartedConnecting => set({ hasStartedConnecting }),
 }));

package/dist/esm/global-account/react/stores/useModalStore.d.ts

@@ -82,6 +82,8 @@ export interface ManageAccountModalProps extends BaseModalProps {
     activeTab?: "overview" | "tokens" | "nfts" | "apps" | "settings";
     /** Function to set the active tab */
     setActiveTab?: (tab: "overview" | "tokens" | "nfts" | "apps" | "settings") => void;
+    /** Whether to show the referral information */
+    showReferralInfo?: boolean;
 }
 /**
  * Props for the AnySpend modal