@b3dotfun/sdk 0.0.42 → 0.0.43-alpha.1

package/dist/cjs/shared/react/hooks/useCurrencyConversion.js

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrencyConversion = useCurrencyConversion;
+const react_1 = require("../../../global-account/react");
+const number_1 = require("../../../shared/utils/number");
+const currencyStore_1 = require("../stores/currencyStore");
+/**
+ * Hook for currency conversion and formatting with real-time exchange rates.
+ *
+ * This hook provides currency conversion functionality using live exchange rates
+ * and formats values according to currency-specific rules (decimals, symbols, etc.).
+ *
+ * @returns Currency conversion utilities and state
+ *
+ * @example
+ * ```tsx
+ * function PriceDisplay({ amount }: { amount: number }) {
+ *   const { formatCurrencyValue, selectedCurrency } = useCurrencyConversion();
+ *   return <div>{formatCurrencyValue(amount)}</div>;
+ * }
+ * ```
+ */
+function useCurrencyConversion() {
+    const selectedCurrency = (0, currencyStore_1.useCurrencyStore)(state => state.selectedCurrency);
+    const baseCurrency = (0, currencyStore_1.useCurrencyStore)(state => state.baseCurrency);
+    // Get exchange rate for the selected currency
+    const { rate: exchangeRate } = (0, react_1.useExchangeRate)({
+        baseCurrency,
+        quoteCurrency: selectedCurrency === baseCurrency ? "USD" : selectedCurrency,
+    });
+    // Always fetch USD rate for tooltip purposes
+    const { rate: usdRate } = (0, react_1.useExchangeRate)({
+        baseCurrency,
+        quoteCurrency: "USD",
+    });
+    /**
+     * Formats a numeric value as a currency string with proper conversion and formatting.
+     *
+     * Behavior:
+     * - When exchange rate is unavailable, displays value in base currency
+     * - Applies currency-specific formatting rules:
+     *   - JPY/KRW: No decimal places
+     *   - ETH/SOL: 6 significant digits with subscript notation for small values
+     *   - Fiat (USD/EUR/GBP/CAD/AUD): 2 decimal places minimum for values < 1000
+     * - Handles symbol positioning (prefix for fiat, suffix for crypto)
+     *
+     * @param value - The numeric value to format (in base currency)
+     * @param options - Optional formatting overrides
+     * @param options.decimals - Override number of decimal places
+     * @param options.currency - Override currency (bypasses conversion)
+     * @returns Formatted currency string with appropriate symbol and decimal places
+     *
+     * @example
+     * ```tsx
+     * formatCurrencyValue(100) // Returns "$100.00" if USD is selected
+     * formatCurrencyValue(0.0001) // Returns "0.0₄1 ETH" if ETH is selected
+     * formatCurrencyValue(1500) // Returns "¥1,500" if JPY is selected
+     * formatCurrencyValue(100, { decimals: 4, currency: "ETH" }) // Returns "100.0000 ETH"
+     * ```
+     */
+    const formatCurrencyValue = (value, options) => {
+        const overrideCurrency = options?.currency;
+        const overrideDecimals = options?.decimals;
+        // Custom currency provided - bypass conversion and use simple formatting
+        if (overrideCurrency) {
+            const decimalsToUse = overrideDecimals !== undefined ? overrideDecimals : overrideCurrency === "B3" ? 0 : 2;
+            const formatted = (0, number_1.formatDisplayNumber)(value, {
+                fractionDigits: decimalsToUse,
+                showSubscripts: false,
+            });
+            return `${formatted} ${overrideCurrency}`;
+        }
+        // Custom decimals for base currency without conversion
+        if (overrideDecimals !== undefined && selectedCurrency === baseCurrency) {
+            const formatted = (0, number_1.formatDisplayNumber)(value, {
+                fractionDigits: overrideDecimals,
+                showSubscripts: false,
+            });
+            return `${formatted} ${baseCurrency}`;
+        }
+        // If no exchange rate available, show base currency to prevent showing
+        // incorrect values with wrong currency symbols during rate fetching
+        if (selectedCurrency === baseCurrency || !exchangeRate) {
+            const formatted = (0, number_1.formatDisplayNumber)(value, {
+                significantDigits: baseCurrency === "B3" ? 6 : 8,
+                showSubscripts: true,
+            });
+            return `${formatted} ${baseCurrency}`;
+        }
+        // Convert value using current exchange rate
+        const convertedValue = value * exchangeRate;
+        const symbol = currencyStore_1.CURRENCY_SYMBOLS[selectedCurrency];
+        // Currencies that display symbol before the number (e.g., $100.00)
+        const prefixCurrencies = ["USD", "EUR", "GBP", "CAD", "AUD"];
+        let formatted;
+        if (selectedCurrency === "JPY" || selectedCurrency === "KRW") {
+            // Japanese Yen and Korean Won don't use decimal places
+            formatted = (0, number_1.formatDisplayNumber)(convertedValue, {
+                fractionDigits: 0,
+                showSubscripts: false,
+            });
+        }
+        else if (selectedCurrency === "ETH" || selectedCurrency === "SOL") {
+            // Crypto currencies use more precision and subscript notation
+            // for very small amounts (e.g., 0.0₃45 ETH)
+            formatted = (0, number_1.formatDisplayNumber)(convertedValue, {
+                significantDigits: 6,
+                showSubscripts: true,
+            });
+        }
+        else {
+            // Standard fiat currencies (USD, EUR, GBP, CAD, AUD)
+            // Use 2 decimal places minimum for amounts under 1000
+            formatted = (0, number_1.formatDisplayNumber)(convertedValue, {
+                significantDigits: 6,
+                fractionDigits: convertedValue < 1000 ? 2 : undefined,
+                showSubscripts: true,
+            });
+        }
+        // Apply currency symbol with correct positioning
+        if (prefixCurrencies.includes(selectedCurrency)) {
+            return `${symbol}${formatted}`;
+        }
+        else {
+            // Suffix currencies: JPY, KRW, ETH, SOL, B3
+            return `${formatted} ${symbol}`;
+        }
+    };
+    /**
+     * Formats a tooltip value showing the alternate currency representation.
+     *
+     * Behavior:
+     * - When displaying base currency: Shows USD equivalent
+     * - When displaying other currency: Shows base currency equivalent
+     * - For custom currencies: Shows appropriate conversion or original value
+     *
+     * @param value - The numeric value to format
+     * @param customCurrency - Optional custom currency override
+     * @returns Formatted tooltip string
+     *
+     * @example
+     * ```tsx
+     * formatTooltipValue(100) // Returns "$150.00 USD" if displaying B3 with rate 1.5
+     * formatTooltipValue(100, "ETH") // Returns "100.0000 ETH" if custom currency
+     * ```
+     */
+    const formatTooltipValue = (value, customCurrency) => {
+        const displayCurrency = customCurrency || selectedCurrency;
+        const absoluteValue = Math.abs(value);
+        // Custom currency provided
+        if (customCurrency) {
+            if (customCurrency === baseCurrency) {
+                // Show USD equivalent for base currency using USD rate
+                const usdValue = usdRate ? absoluteValue * usdRate : absoluteValue;
+                const formatted = (0, number_1.formatDisplayNumber)(usdValue, {
+                    significantDigits: 6,
+                    fractionDigits: usdValue < 1000 ? 2 : undefined,
+                    showSubscripts: true,
+                });
+                return `$${formatted} USD`;
+            }
+            else {
+                // Show as-is for other custom currencies
+                return `${(0, number_1.formatDisplayNumber)(absoluteValue, { significantDigits: 6 })} ${customCurrency}`;
+            }
+        }
+        // Showing base currency - display USD equivalent
+        if (displayCurrency === baseCurrency) {
+            const usdValue = usdRate ? absoluteValue * usdRate : absoluteValue;
+            const formatted = (0, number_1.formatDisplayNumber)(usdValue, {
+                significantDigits: 6,
+                fractionDigits: usdValue < 1000 ? 2 : undefined,
+                showSubscripts: true,
+            });
+            return `$${formatted} USD`;
+        }
+        // Showing other currency - display base currency equivalent
+        const formatted = (0, number_1.formatDisplayNumber)(absoluteValue, {
+            significantDigits: baseCurrency === "B3" ? 6 : 8,
+            showSubscripts: true,
+        });
+        return `${formatted} ${baseCurrency}`;
+    };
+    return {
+        /** Currently selected display currency */
+        selectedCurrency,
+        /** Base currency used for conversion (typically B3) */
+        baseCurrency,
+        /** Current exchange rate from base to selected currency (undefined while loading) */
+        exchangeRate,
+        /** Format a value with currency conversion and proper symbol/decimal handling */
+        formatCurrencyValue,
+        /** Format a tooltip value showing alternate currency representation */
+        formatTooltipValue,
+        /** Symbol for the currently selected currency (e.g., "$", "€", "ETH") */
+        selectedCurrencySymbol: currencyStore_1.CURRENCY_SYMBOLS[selectedCurrency],
+        /** Symbol for the base currency */
+        baseCurrencySymbol: currencyStore_1.CURRENCY_SYMBOLS[baseCurrency],
+    };
+}

package/dist/cjs/shared/react/index.d.ts

@@ -1 +1,3 @@
+export * from "./components";
 export * from "./hooks";
+export * from "./stores";

package/dist/cjs/shared/react/index.js

@@ -14,4 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
 __exportStar(require("./hooks"), exports);
+__exportStar(require("./stores"), exports);

package/dist/cjs/shared/react/stores/currencyModalStore.d.ts

@@ -0,0 +1,7 @@
+interface CurrencyModalState {
+    isOpen: boolean;
+    openModal: () => void;
+    closeModal: () => void;
+}
+export declare const useCurrencyModalStore: import("zustand").UseBoundStore<import("zustand").StoreApi<CurrencyModalState>>;
+export {};

package/dist/cjs/shared/react/stores/currencyModalStore.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrencyModalStore = void 0;
+const zustand_1 = require("zustand");
+exports.useCurrencyModalStore = (0, zustand_1.create)(set => ({
+    isOpen: false,
+    openModal: () => set({ isOpen: true }),
+    closeModal: () => set({ isOpen: false }),
+}));

package/dist/cjs/shared/react/stores/currencyStore.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Supported currencies for display and conversion.
+ * Includes fiat currencies (USD, EUR, GBP, JPY, CAD, AUD, KRW) and crypto (ETH, SOL, B3).
+ */
+export type SupportedCurrency = "ETH" | "USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD" | "B3" | "SOL" | "KRW";
+/**
+ * Currency symbols used for display formatting.
+ * Prefix currencies (USD, EUR, GBP, CAD, AUD) show symbol before the amount.
+ * Suffix currencies (JPY, KRW, ETH, SOL, B3) show symbol after the amount.
+ */
+export declare const CURRENCY_SYMBOLS: Record<SupportedCurrency, string>;
+/**
+ * Human-readable currency names for display in selectors and labels.
+ */
+export declare const CURRENCY_NAMES: Record<SupportedCurrency, string>;
+/**
+ * Currency store state interface.
+ * @property selectedCurrency - The currency currently selected for display
+ * @property baseCurrency - The base currency for conversion (typically B3)
+ * @property setSelectedCurrency - Update the selected display currency
+ * @property setBaseCurrency - Update the base currency for conversions
+ */
+interface CurrencyState {
+    selectedCurrency: SupportedCurrency;
+    baseCurrency: SupportedCurrency;
+    setSelectedCurrency: (currency: SupportedCurrency) => void;
+    setBaseCurrency: (currency: SupportedCurrency) => void;
+}
+/**
+ * Zustand store for managing currency selection and conversion.
+ * Persists user's selected currency preference in localStorage.
+ *
+ * @example
+ * ```tsx
+ * const { selectedCurrency, setSelectedCurrency } = useCurrencyStore();
+ * // Change display currency to USD
+ * setSelectedCurrency('USD');
+ * ```
+ */
+export declare const useCurrencyStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<CurrencyState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<CurrencyState, CurrencyState>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: CurrencyState) => void) => () => void;
+        onFinishHydration: (fn: (state: CurrencyState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<CurrencyState, CurrencyState>>;
+    };
+}>;
+export {};

package/dist/cjs/shared/react/stores/currencyStore.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrencyStore = exports.CURRENCY_NAMES = exports.CURRENCY_SYMBOLS = void 0;
+const zustand_1 = require("zustand");
+const middleware_1 = require("zustand/middleware");
+/**
+ * Currency symbols used for display formatting.
+ * Prefix currencies (USD, EUR, GBP, CAD, AUD) show symbol before the amount.
+ * Suffix currencies (JPY, KRW, ETH, SOL, B3) show symbol after the amount.
+ */
+exports.CURRENCY_SYMBOLS = {
+    ETH: "ETH",
+    USD: "$",
+    EUR: "€",
+    GBP: "£",
+    JPY: "¥",
+    CAD: "C$",
+    AUD: "A$",
+    B3: "B3",
+    SOL: "SOL",
+    KRW: "₩",
+};
+/**
+ * Human-readable currency names for display in selectors and labels.
+ */
+exports.CURRENCY_NAMES = {
+    ETH: "Ethereum",
+    USD: "US Dollar",
+    EUR: "Euro",
+    GBP: "British Pound",
+    JPY: "Japanese Yen",
+    CAD: "Canadian Dollar",
+    AUD: "Australian Dollar",
+    B3: "B3",
+    SOL: "Solana",
+    KRW: "Korean Won",
+};
+/**
+ * Zustand store for managing currency selection and conversion.
+ * Persists user's selected currency preference in localStorage.
+ *
+ * @example
+ * ```tsx
+ * const { selectedCurrency, setSelectedCurrency } = useCurrencyStore();
+ * // Change display currency to USD
+ * setSelectedCurrency('USD');
+ * ```
+ */
+exports.useCurrencyStore = (0, zustand_1.create)()((0, middleware_1.persist)(set => ({
+    selectedCurrency: "B3",
+    baseCurrency: "B3",
+    setSelectedCurrency: currency => set({ selectedCurrency: currency }),
+    setBaseCurrency: currency => set({ baseCurrency: currency }),
+}), {
+    name: "currency-storage",
+    version: 2,
+}));

package/dist/cjs/shared/react/stores/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./currencyModalStore";
+export * from "./currencyStore";

package/dist/cjs/shared/react/stores/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./currencyModalStore"), exports);
+__exportStar(require("./currencyStore"), exports);

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

@@ -32,4 +32,5 @@ export declare function AnySpend(props: {
         preventDefault: () => void;
     }) => void;
     onSuccess?: (txHash?: string) => void;
+    customUsdInputValues?: string[];
 }): 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, onTokenSelect, onSuccess, }) {
+function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     // Determine if we're in "buy mode" based on whether destination token props are provided
@@ -50,6 +50,8 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // Add refs to track URL state
     const initialUrlProcessed = useRef(false);
     const lastUrlUpdate = useRef(null);
+    // Track if onSuccess has been called for the current order
+    const onSuccessCalled = useRef(false);
     const [activeTab, setActiveTab] = useState(defaultActiveTab);
     const [orderId, setOrderId] = useState(loadOrder);
     const { orderAndTransactions: oat, getOrderAndTransactionsError } = useAnyspendOrderAndTransactions(orderId);
@@ -387,12 +389,17 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         }
     }, [anyspendQuote, isSrcInputDirty]);
     useEffect(() => {
-        if (oat?.data?.order.status === "executed") {
+        if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
             console.log("Calling onSuccess");
             const txHash = oat?.data?.executeTx?.txHash;
             onSuccess?.(txHash);
+            onSuccessCalled.current = true;
         }
-    }, [oat?.data?.executeTx?.txHash, oat?.data?.order.status, onSuccess]);
+    }, [oat?.data?.order.status, oat?.data?.executeTx?.txHash, onSuccess]);
+    // Reset flag when orderId changes
+    useEffect(() => {
+        onSuccessCalled.current = false;
+    }, [orderId]);
     const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
         onSuccess: data => {
             const orderId = data.data.id;
@@ -667,7 +674,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, 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: () => {
+    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), customUsdInputValues: customUsdInputValues }) })), _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/AnySpendCustom.js

@@ -10,7 +10,7 @@ import { simpleHashChainToChainName } from "../../../shared/utils/simplehash.js"
 import invariant from "invariant";
 import { ChevronRight, ChevronRightCircle, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { base } from "viem/chains";
 import { useFeatureFlags } from "../contexts/FeatureFlagsContext.js";
@@ -117,6 +117,8 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     // Update recipient logic to use custom recipient
     const recipientAddress = customRecipientAddress || currentWallet.address;
     const [orderId, setOrderId] = useState(loadOrder);
+    // Track if onSuccess has been called for the current order
+    const onSuccessCalled = React.useRef(false);
     const [srcChainId, setSrcChainId] = useState(base.id);
     // Get token list for token balance check
     const chainName = useMemo(() => simpleHashChainToChainName(srcChainId), [srcChainId]);
@@ -230,12 +232,17 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
     // Get geo data and onramp options (after quote is available)
     const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(srcFiatAmount);
     useEffect(() => {
-        if (oat?.data?.order.status === "executed") {
+        if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
             console.log("Calling onSuccess");
             const txHash = oat?.data?.executeTx?.txHash;
             onSuccess?.(txHash);
+            onSuccessCalled.current = true;
         }
-    }, [oat?.data?.executeTx?.txHash, oat?.data?.order.status, onSuccess]);
+    }, [oat?.data?.order.status, oat?.data?.executeTx?.txHash, onSuccess]);
+    // Reset flag when orderId changes
+    useEffect(() => {
+        onSuccessCalled.current = false;
+    }, [orderId]);
     const { createOrder: createRegularOrder, isCreatingOrder: isCreatingRegularOrder } = useAnyspendCreateOrder({
         onSuccess: data => {
             setOrderId(data.data.id);

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

@@ -19,5 +19,6 @@ export interface AnySpendDepositHypeProps {
     onTokenSelect?: (token: components["schemas"]["Token"], event: {
         preventDefault: () => void;
     }) => void;
+    customUsdInputValues?: string[];
 }
 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, onTokenSelect, }) {
+function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress, paymentType = "crypto", sourceTokenAddress, sourceTokenChainId, onSuccess, mainFooter, onTokenSelect, customUsdInputValues, }) {
     // 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, 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 => {
+    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), customUsdInputValues: customUsdInputValues }) })), _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/PanelOnramp.d.ts

@@ -1,7 +1,7 @@
 import { components } from "../../../../anyspend/types/api";
 import { GetQuoteResponse } from "../../../../anyspend/types/api_req_res";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
-export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, anyspendQuote, onShowPointsDetail, }: {
+export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, anyspendQuote, onShowPointsDetail, customUsdInputValues, }: {
     srcAmountOnRamp: string;
     setSrcAmountOnRamp: (amount: string) => void;
     selectedPaymentMethod?: FiatPaymentMethod;
@@ -18,4 +18,5 @@ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selec
     hideDstToken?: boolean;
     anyspendQuote?: GetQuoteResponse;
     onShowPointsDetail?: () => void;
+    customUsdInputValues?: string[];
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -11,7 +11,7 @@ import { useFeatureFlags } from "../../contexts/FeatureFlagsContext.js";
 import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
 import { PointsBadge } from "./PointsBadge.js";
-export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, onShowPointsDetail, }) {
+export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, onShowPointsDetail, customUsdInputValues = ["5", "10", "20", "25"], }) {
     const featureFlags = useFeatureFlags();
     // Get geo-based onramp options to access fee information
     const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
@@ -69,9 +69,11 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
     const handleQuickAmount = (value) => {
         setSrcAmountOnRamp(value);
     };
-    return (_jsxs("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === 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" })] })) : selectedPaymentMethod === 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" }) }), "Stripe"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _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, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, 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: {
+    return (_jsxs("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === 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" })] })) : selectedPaymentMethod === 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" }) }), "Stripe"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _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, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
                                         width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
-                                    } })] }) }), _jsx("div", { className: cn("mx-auto mb-6 inline-grid grid-cols-4 gap-2", hideDstToken && "mb-0"), children: ["5", "10", "20", "25"].map(value => (_jsxs("button", { onClick: () => handleQuickAmount(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 ${srcAmountOnRamp === value
+                                    } })] }) }), _jsx("div", { className: cn("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0"), children: customUsdInputValues
+                            .filter(v => !isNaN(Number(v)))
+                            .map(value => (_jsxs("button", { onClick: () => handleQuickAmount(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 ${srcAmountOnRamp === value
                                 ? "border-as-border-secondary bg-as-surface-secondary"
                                 : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: (() => {
                                                 const fee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod.NONE);