@b3dotfun/sdk 0.0.40-alpha.14 → 0.0.40-alpha.15

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

@@ -1,3 +1,4 @@
+import { components } from "../../types/api";
 export interface RecipientOption {
     address: string;
     icon?: string;
@@ -23,4 +24,11 @@ export declare function AnySpend(props: {
     recipientAddress?: string;
     loadOrder?: string;
     hideTransactionHistoryButton?: boolean;
+    /**
+     * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+     * Useful for handling special cases like B3 token selection.
+     */
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -49,7 +49,7 @@ function AnySpend(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendInner, { ...props }) }));
 }
-function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, }) {
+function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, }) {
     const searchParams = (0, react_2.useSearchParamsSSR)();
     const router = (0, react_2.useRouter)();
     // Determine if we're in "buy mode" based on whether destination token props are provided
@@ -665,7 +665,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                     setActivePanel(PanelView.MAIN);
                     setSelectedCryptoPaymentMethod(CryptoPaymentMethod_1.CryptoPaymentMethodType.NONE); // Reset payment method when going back
                 } })) }) }));
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), (0, jsx_runtime_1.jsx)(TabSection_1.TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }) })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "ghost", className: (0, cn_1.cn)("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
                             if (activeTab === "fiat" || isBuyMode) {
                                 return;
                             }

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

@@ -1,3 +1,4 @@
+import { components } from "../../../anyspend/types/api";
 export declare const HYPE_TOKEN_DETAILS: {
     SYMBOL: string;
     LOGO_URI: string;
@@ -11,5 +12,12 @@ export interface AnySpendDepositHypeProps {
     sourceTokenChainId?: number;
     onSuccess?: () => void;
     mainFooter?: React.ReactNode;
+    /**
+     * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+     * Useful for handling special cases like B3 token selection.
+     */
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }
 export declare function AnySpendDepositHype(props: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -35,7 +35,7 @@ function AnySpendDepositHype(props) {
     const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
     return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(AnySpendDepositHypeInner, { ...props }) }));
 }
-function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, }) {
+function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, }) {
     // Use shared flow hook
     const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = (0, useAnyspendFlow_1.useAnyspendFlow)({
         paymentType,
@@ -119,7 +119,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             await handleFiatOrder();
         }
     };
-    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL) }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
+    const mainView = ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? ((0, jsx_runtime_1.jsx)(CryptoPaySection_1.CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(useAnyspendFlow_1.PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: (0, jsx_runtime_1.jsx)(PanelOnramp_1.PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: anyspend_1.B3_TOKEN, destinationChainId: chains_1.base.id, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: useAnyspendFlow_1.PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL) }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", className: (0, cn_1.cn)("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && ((0, jsx_runtime_1.jsx)(CryptoReceiveSection_1.CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(useAnyspendFlow_1.PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: anyspend_1.B3_TOKEN, dstTokenSymbol: exports.HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: exports.HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: chains_1.base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setSrcAmount(value);
                             }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(useAnyspendFlow_1.PanelView.POINTS_DETAIL) }))] }) }), (0, jsx_runtime_1.jsx)(ErrorSection_1.ErrorSection, { error: getAnyspendQuoteError }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: (0, cn_1.cn)("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: (0, jsx_runtime_1.jsx)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (0, cn_1.cn)("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: (0, cn_1.cn)(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));

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

@@ -11,6 +11,9 @@ interface CryptoPaySectionProps {
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
     onSelectCryptoPaymentMethod: () => void;
     anyspendQuote?: any;
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }
-export declare function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }: CryptoPaySectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, }: CryptoPaySectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -12,7 +12,7 @@ const react_3 = require("react");
 const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
 const OrderTokenAmount_1 = require("./OrderTokenAmount");
 const TokenBalance_1 = require("./TokenBalance");
-function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }) {
+function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, }) {
     const { connectedSmartWallet, connectedEOAWallet } = (0, react_1.useAccountWallet)();
     const { data: srcTokenMetadata } = (0, react_1.useTokenData)(selectedSrcToken?.chainId, selectedSrcToken?.address);
     // Determine which address to use based on payment method
@@ -48,7 +48,7 @@ function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedS
     return ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [walletAddress ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: connectedName ? (0, utils_1.formatUsername)(connectedName) : (0, formatAddress_1.shortenAddress)(walletAddress || "") })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.GLOBAL_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Global Account", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethod_1.CryptoPaymentMethodType.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: walletAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
                     setIsSrcInputDirty(true);
                     setSrcAmount(value);
-                }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {
+                }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken, onTokenSelect: onTokenSelect }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, {
                             style: "currency",
                             fallback: "",
                         }) }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: walletAddress, onChangeInput: value => {

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

@@ -1,5 +1,5 @@
 import { components } from "../../../../anyspend/types/api";
-export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName, }: {
+export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, }: {
     disabled?: boolean;
     inputValue: string;
     onChangeInput: (value: string) => void;
@@ -15,4 +15,7 @@ export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput,
     innerClassName?: string;
     amountClassName?: string;
     tokenSelectClassName?: string;
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -11,7 +11,7 @@ const react_2 = require("../../../../global-account/react");
 const utils_1 = require("../../../../shared/utils");
 const relay_kit_ui_1 = require("@reservoir0x/relay-kit-ui");
 const ChainTokenIcon_1 = require("./ChainTokenIcon");
-function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName, }) {
+function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, }) {
     // Track previous token to detect changes
     const prevTokenRef = (0, react_1.useRef)(token.address);
     (0, react_1.useEffect)(() => {
@@ -28,19 +28,33 @@ function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, addres
         }
     }, [token.address, chainId, context, onChangeInput]);
     const handleTokenSelect = (newToken) => {
-        // Mark that we're about to change tokens
-        prevTokenRef.current = "changing"; // Temporary value to force effect
-        // Set the chain ID first
-        setChainId(newToken.chainId);
-        // Then set the new token
-        setToken({
+        const token = {
             address: newToken.address,
-            chainId: newToken.chainId, // Use the new chain ID
+            chainId: newToken.chainId,
             decimals: newToken.decimals,
             metadata: { logoURI: newToken.logoURI },
             name: newToken.name,
             symbol: newToken.symbol,
-        });
+        };
+        // Call the onTokenSelect callback if provided
+        if (onTokenSelect) {
+            let isDefaultPrevented = false;
+            const event = {
+                preventDefault: () => {
+                    isDefaultPrevented = true;
+                },
+            };
+            onTokenSelect(token, event);
+            if (isDefaultPrevented) {
+                return; // Early return if callback prevented default behavior
+            }
+        }
+        // Mark that we're about to change tokens
+        prevTokenRef.current = "changing"; // Temporary value to force effect
+        // Set the chain ID first
+        setChainId(newToken.chainId);
+        // Then set the new token
+        setToken(token);
         // If this is the source token, reset the amount immediately
         if (context === "from") {
             onChangeInput("0.01");

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

@@ -1,3 +1,4 @@
+import { components } from "../../types/api";
 export interface RecipientOption {
     address: string;
     icon?: string;
@@ -23,4 +24,11 @@ export declare function AnySpend(props: {
     recipientAddress?: string;
     loadOrder?: string;
     hideTransactionHistoryButton?: boolean;
+    /**
+     * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+     * Useful for handling special cases like B3 token selection.
+     */
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -42,7 +42,7 @@ export function AnySpend(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendInner, { ...props }) }));
 }
-function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, }) {
+function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     // Determine if we're in "buy mode" based on whether destination token props are provided
@@ -658,7 +658,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                     setActivePanel(PanelView.MAIN);
                     setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
                 } })) }) }));
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [isBuyMode && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: setActiveTab, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }) })), _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "top-[calc(50%+56px)] cursor-default", activeTab === "fiat" && "hidden"), onClick: () => {
                             if (activeTab === "fiat" || isBuyMode) {
                                 return;
                             }

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

@@ -1,3 +1,4 @@
+import { components } from "../../../anyspend/types/api";
 export declare const HYPE_TOKEN_DETAILS: {
     SYMBOL: string;
     LOGO_URI: string;
@@ -11,5 +12,12 @@ export interface AnySpendDepositHypeProps {
     sourceTokenChainId?: number;
     onSuccess?: () => void;
     mainFooter?: React.ReactNode;
+    /**
+     * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+     * Useful for handling special cases like B3 token selection.
+     */
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }
 export declare function AnySpendDepositHype(props: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -28,7 +28,7 @@ export function AnySpendDepositHype(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendDepositHypeInner, { ...props }) }));
 }
-function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, }) {
+function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, }) {
     // Use shared flow hook
     const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
         paymentType,
@@ -112,7 +112,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             await handleFiatOrder();
         }
     };
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
+    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2", children: [_jsx("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: _jsx("div", { children: _jsx("h1", { className: "text-as-primary text-xl font-bold", children: paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat" }) }) }), _jsx("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [paymentType === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmount, setSrcAmountOnRamp: setSrcAmount, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: setActivePanel, _recipientAddress: recipientAddress, destinationToken: B3_TOKEN, destinationChainId: base.id, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, hideDstToken: true, destinationAmount: dstAmount, onDestinationTokenChange: () => { }, onDestinationChainChange: () => { }, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }) })), _jsx("div", { className: cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden"), children: _jsx(Button, { variant: "ghost", className: cn("swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"), children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) }), paymentType === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: true, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => setActivePanel(PanelView.RECIPIENT_SELECTION), dstAmount: dstAmount, dstToken: B3_TOKEN, dstTokenSymbol: HYPE_TOKEN_DETAILS.SYMBOL, dstTokenLogoURI: HYPE_TOKEN_DETAILS.LOGO_URI, selectedDstChainId: base.id, setSelectedDstChainId: () => { }, setSelectedDstToken: () => { }, onChangeDstAmount: value => {
                                 setIsSrcInputDirty(false);
                                 setSrcAmount(value);
                             }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }))] }) }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0"), children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: btnInfo.text }) }), mainFooter ? mainFooter : null] }));

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

@@ -11,6 +11,9 @@ interface CryptoPaySectionProps {
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
     onSelectCryptoPaymentMethod: () => void;
     anyspendQuote?: any;
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }
-export declare function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }: CryptoPaySectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, }: CryptoPaySectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,7 +9,7 @@ import { useEffect, useRef } from "react";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
 import { OrderTokenAmount } from "./OrderTokenAmount.js";
 import { TokenBalance } from "./TokenBalance.js";
-export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }) {
+export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, }) {
     const { connectedSmartWallet, connectedEOAWallet } = useAccountWallet();
     const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
     // Determine which address to use based on payment method
@@ -45,7 +45,7 @@ export function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, se
     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: [walletAddress ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(walletAddress || "") })) : ("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: walletAddress, 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, {
+                }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken, onTokenSelect: onTokenSelect }), _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: walletAddress, onChangeInput: value => {

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

@@ -1,5 +1,5 @@
 import { components } from "../../../../anyspend/types/api";
-export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName, }: {
+export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, }: {
     disabled?: boolean;
     inputValue: string;
     onChangeInput: (value: string) => void;
@@ -15,4 +15,7 @@ export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput,
     innerClassName?: string;
     amountClassName?: string;
     tokenSelectClassName?: string;
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -8,7 +8,7 @@ import { Button } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import { TokenSelector } from "@reservoir0x/relay-kit-ui";
 import { ChainTokenIcon } from "./ChainTokenIcon.js";
-export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName, }) {
+export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect = false, canEditAmount = true, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, }) {
     // Track previous token to detect changes
     const prevTokenRef = useRef(token.address);
     useEffect(() => {
@@ -25,19 +25,33 @@ export function OrderTokenAmount({ disabled, inputValue, onChangeInput, context,
         }
     }, [token.address, chainId, context, onChangeInput]);
     const handleTokenSelect = (newToken) => {
-        // Mark that we're about to change tokens
-        prevTokenRef.current = "changing"; // Temporary value to force effect
-        // Set the chain ID first
-        setChainId(newToken.chainId);
-        // Then set the new token
-        setToken({
+        const token = {
             address: newToken.address,
-            chainId: newToken.chainId, // Use the new chain ID
+            chainId: newToken.chainId,
             decimals: newToken.decimals,
             metadata: { logoURI: newToken.logoURI },
             name: newToken.name,
             symbol: newToken.symbol,
-        });
+        };
+        // Call the onTokenSelect callback if provided
+        if (onTokenSelect) {
+            let isDefaultPrevented = false;
+            const event = {
+                preventDefault: () => {
+                    isDefaultPrevented = true;
+                },
+            };
+            onTokenSelect(token, event);
+            if (isDefaultPrevented) {
+                return; // Early return if callback prevented default behavior
+            }
+        }
+        // Mark that we're about to change tokens
+        prevTokenRef.current = "changing"; // Temporary value to force effect
+        // Set the chain ID first
+        setChainId(newToken.chainId);
+        // Then set the new token
+        setToken(token);
         // If this is the source token, reset the amount immediately
         if (context === "from") {
             onChangeInput("0.01");

package/dist/types/anyspend/react/components/AnySpend.d.ts

@@ -1,3 +1,4 @@
+import { components } from "../../types/api";
 export interface RecipientOption {
     address: string;
     icon?: string;
@@ -23,4 +24,11 @@ export declare function AnySpend(props: {
     recipientAddress?: string;
     loadOrder?: string;
     hideTransactionHistoryButton?: boolean;
+    /**
+     * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+     * Useful for handling special cases like B3 token selection.
+     */
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 export declare const HYPE_TOKEN_DETAILS: {
     SYMBOL: string;
     LOGO_URI: string;
@@ -11,5 +12,12 @@ export interface AnySpendDepositHypeProps {
     sourceTokenChainId?: number;
     onSuccess?: () => void;
     mainFooter?: React.ReactNode;
+    /**
+     * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+     * Useful for handling special cases like B3 token selection.
+     */
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }
 export declare function AnySpendDepositHype(props: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/anyspend/react/components/common/CryptoPaySection.d.ts

@@ -11,6 +11,9 @@ interface CryptoPaySectionProps {
     selectedCryptoPaymentMethod: CryptoPaymentMethodType;
     onSelectCryptoPaymentMethod: () => void;
     anyspendQuote?: any;
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }
-export declare function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, }: CryptoPaySectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CryptoPaySection({ selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, onSelectCryptoPaymentMethod, anyspendQuote, onTokenSelect, }: CryptoPaySectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/anyspend/react/components/common/OrderTokenAmount.d.ts

@@ -1,5 +1,5 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName, }: {
+export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput, context, address, chainId, setChainId, token, setToken, hideTokenSelect, canEditAmount, className, innerClassName, amountClassName, tokenSelectClassName, onTokenSelect, }: {
     disabled?: boolean;
     inputValue: string;
     onChangeInput: (value: string) => void;
@@ -15,4 +15,7 @@ export declare function OrderTokenAmount({ disabled, inputValue, onChangeInput,
     innerClassName?: string;
     amountClassName?: string;
     tokenSelectClassName?: string;
+    onTokenSelect?: (token: components["schemas"]["Token"], event: {
+        preventDefault: () => void;
+    }) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.40-alpha.14",
+  "version": "0.0.40-alpha.15",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/AnySpend.tsx

@@ -73,6 +73,11 @@ export function AnySpend(props: {
   recipientAddress?: string;
   loadOrder?: string;
   hideTransactionHistoryButton?: boolean;
+  /**
+   * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+   * Useful for handling special cases like B3 token selection.
+   */
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -91,6 +96,7 @@ function AnySpendInner({
   loadOrder,
   hideTransactionHistoryButton,
   recipientAddress: recipientAddressFromProps,
+  onTokenSelect,
 }: {
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
@@ -99,6 +105,7 @@ function AnySpendInner({
   loadOrder?: string;
   hideTransactionHistoryButton?: boolean;
   recipientAddress?: string;
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -871,6 +878,7 @@ function AnySpendInner({
             selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
             onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
             anyspendQuote={anyspendQuote}
+            onTokenSelect={onTokenSelect}
           />
         ) : (
           <motion.div

package/src/anyspend/react/components/AnyspendDepositHype.tsx

@@ -1,4 +1,5 @@
 import { B3_TOKEN } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Button, ShinyButton, StyleRoot, TransitionPanel } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import invariant from "invariant";
@@ -36,6 +37,11 @@ export interface AnySpendDepositHypeProps {
   sourceTokenChainId?: number;
   onSuccess?: () => void;
   mainFooter?: React.ReactNode;
+  /**
+   * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+   * Useful for handling special cases like B3 token selection.
+   */
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }
 
 export function AnySpendDepositHype(props: AnySpendDepositHypeProps) {
@@ -57,6 +63,7 @@ function AnySpendDepositHypeInner({
   sourceTokenChainId,
   onSuccess,
   mainFooter,
+  onTokenSelect,
 }: AnySpendDepositHypeProps) {
   // Use shared flow hook
   const {
@@ -202,6 +209,7 @@ function AnySpendDepositHypeInner({
               selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
               onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
               anyspendQuote={anyspendQuote}
+              onTokenSelect={onTokenSelect}
             />
           ) : (
             <motion.div

package/src/anyspend/react/components/common/CryptoPaySection.tsx

@@ -24,6 +24,8 @@ interface CryptoPaySectionProps {
   onSelectCryptoPaymentMethod: () => void;
   // Quote data
   anyspendQuote?: any;
+  // Token selection callback
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }
 
 export function CryptoPaySection({
@@ -37,6 +39,7 @@ export function CryptoPaySection({
   selectedCryptoPaymentMethod,
   onSelectCryptoPaymentMethod,
   anyspendQuote,
+  onTokenSelect,
 }: CryptoPaySectionProps) {
   const { connectedSmartWallet, connectedEOAWallet } = useAccountWallet();
   const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
@@ -132,6 +135,7 @@ export function CryptoPaySection({
         setChainId={setSelectedSrcChainId}
         token={selectedSrcToken}
         setToken={setSelectedSrcToken}
+        onTokenSelect={onTokenSelect}
       />
       <div className="flex items-center justify-between">
         <div className="text-as-primary/50 flex h-5 items-center text-sm">

package/src/anyspend/react/components/common/OrderTokenAmount.tsx

@@ -27,6 +27,7 @@ export function OrderTokenAmount({
   innerClassName,
   amountClassName,
   tokenSelectClassName,
+  onTokenSelect,
 }: {
   disabled?: boolean;
   inputValue: string;
@@ -43,6 +44,7 @@ export function OrderTokenAmount({
   innerClassName?: string;
   amountClassName?: string;
   tokenSelectClassName?: string;
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }) {
   // Track previous token to detect changes
   const prevTokenRef = useRef<string>(token.address);
@@ -64,6 +66,31 @@ export function OrderTokenAmount({
   }, [token.address, chainId, context, onChangeInput]);
 
   const handleTokenSelect = (newToken: any) => {
+    const token: components["schemas"]["Token"] = {
+      address: newToken.address,
+      chainId: newToken.chainId,
+      decimals: newToken.decimals,
+      metadata: { logoURI: newToken.logoURI },
+      name: newToken.name,
+      symbol: newToken.symbol,
+    };
+
+    // Call the onTokenSelect callback if provided
+    if (onTokenSelect) {
+      let isDefaultPrevented = false;
+      const event = {
+        preventDefault: () => {
+          isDefaultPrevented = true;
+        },
+      };
+
+      onTokenSelect(token, event);
+
+      if (isDefaultPrevented) {
+        return; // Early return if callback prevented default behavior
+      }
+    }
+
     // Mark that we're about to change tokens
     prevTokenRef.current = "changing"; // Temporary value to force effect
 
@@ -71,14 +98,7 @@ export function OrderTokenAmount({
     setChainId(newToken.chainId);
 
     // Then set the new token
-    setToken({
-      address: newToken.address,
-      chainId: newToken.chainId, // Use the new chain ID
-      decimals: newToken.decimals,
-      metadata: { logoURI: newToken.logoURI },
-      name: newToken.name,
-      symbol: newToken.symbol,
-    });
+    setToken(token);
 
     // If this is the source token, reset the amount immediately
     if (context === "from") {