@b3dotfun/sdk 0.0.46 → 0.0.47-test.4

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

@@ -0,0 +1,245 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const react_1 = require("@testing-library/react");
+const useCurrencyConversion_1 = require("../useCurrencyConversion");
+// Mock the external dependencies
+// Store mock rates for different quote currencies
+const mockRates = {};
+// Mock store state
+const mockStoreState = {
+    selectedCurrency: "B3",
+    baseCurrency: "B3",
+    setSelectedCurrency: vitest_1.vi.fn(),
+    setBaseCurrency: vitest_1.vi.fn(),
+};
+vitest_1.vi.mock("@b3dotfun/sdk/global-account/react", () => ({
+    useExchangeRate: vitest_1.vi.fn((params) => {
+        const rate = mockRates[params?.quoteCurrency];
+        return { rate };
+    }),
+}));
+vitest_1.vi.mock("@b3dotfun/sdk/shared/utils/number", () => ({
+    formatDisplayNumber: vitest_1.vi.fn((value) => {
+        const num = Number(value);
+        if (isNaN(num))
+            return "0";
+        return num.toLocaleString("en-US", { maximumFractionDigits: 6 });
+    }),
+}));
+vitest_1.vi.mock("../../stores/currencyStore", () => ({
+    useCurrencyStore: vitest_1.vi.fn((selector) => {
+        if (selector) {
+            return selector(mockStoreState);
+        }
+        return mockStoreState;
+    }),
+    CURRENCY_SYMBOLS: {
+        B3: "B3",
+        USD: "$",
+        EUR: "€",
+        GBP: "£",
+        JPY: "¥",
+        CAD: "C$",
+        AUD: "A$",
+        ETH: "ETH",
+        SOL: "SOL",
+        KRW: "₩",
+    },
+}));
+(0, vitest_1.describe)("useCurrencyConversion", () => {
+    (0, vitest_1.beforeEach)(() => {
+        vitest_1.vi.clearAllMocks();
+        // Reset mock rates to default
+        Object.keys(mockRates).forEach(key => delete mockRates[key]);
+        mockRates.USD = 1.0;
+        // Reset store state
+        mockStoreState.selectedCurrency = "B3";
+        mockStoreState.baseCurrency = "B3";
+    });
+    (0, vitest_1.describe)("formatCurrencyValue", () => {
+        (0, vitest_1.it)("should format base currency (B3) without conversion", () => {
+            mockStoreState.selectedCurrency = "B3";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const formatted = result.current.formatCurrencyValue(100);
+            (0, vitest_1.expect)(formatted).toContain("B3");
+            (0, vitest_1.expect)(formatted).toContain("100");
+        });
+        (0, vitest_1.it)("should show base currency when exchange rate is unavailable", () => {
+            mockRates.USD = undefined;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const formatted = result.current.formatCurrencyValue(100);
+            (0, vitest_1.expect)(formatted).toContain("B3");
+            (0, vitest_1.expect)(formatted).not.toContain("$");
+        });
+        (0, vitest_1.it)("should format USD with prefix symbol", () => {
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const formatted = result.current.formatCurrencyValue(100);
+            (0, vitest_1.expect)(formatted).toMatch(/^\$/);
+            (0, vitest_1.expect)(formatted).toContain("200");
+        });
+        (0, vitest_1.it)("should format EUR with prefix symbol", () => {
+            mockRates.EUR = 1.8;
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "EUR";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const formatted = result.current.formatCurrencyValue(100);
+            (0, vitest_1.expect)(formatted).toMatch(/^€/);
+        });
+        (0, vitest_1.it)("should format JPY without decimals", () => {
+            mockRates.JPY = 150;
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "JPY";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const formatted = result.current.formatCurrencyValue(100);
+            (0, vitest_1.expect)(formatted).toContain("¥");
+            (0, vitest_1.expect)(formatted).not.toContain(".");
+        });
+        (0, vitest_1.it)("should format KRW without decimals", () => {
+            mockRates.KRW = 1300;
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "KRW";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const formatted = result.current.formatCurrencyValue(100);
+            (0, vitest_1.expect)(formatted).toContain("₩");
+            (0, vitest_1.expect)(formatted).not.toContain(".");
+        });
+        (0, vitest_1.it)("should format ETH with suffix symbol", () => {
+            mockRates.ETH = 0.0005;
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "ETH";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const formatted = result.current.formatCurrencyValue(100);
+            (0, vitest_1.expect)(formatted).toContain("ETH");
+            (0, vitest_1.expect)(formatted).not.toMatch(/^ETH/);
+        });
+        (0, vitest_1.it)("should format SOL with suffix symbol", () => {
+            mockRates.SOL = 0.05;
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "SOL";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const formatted = result.current.formatCurrencyValue(100);
+            (0, vitest_1.expect)(formatted).toContain("SOL");
+            (0, vitest_1.expect)(formatted).not.toMatch(/^SOL/);
+        });
+        (0, vitest_1.it)("should handle small USD amounts with proper conversion", () => {
+            mockRates.USD = 1.5;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const formatted = result.current.formatCurrencyValue(10);
+            // 10 * 1.5 = 15
+            (0, vitest_1.expect)(formatted).toMatch(/^\$/);
+            (0, vitest_1.expect)(formatted).toContain("15");
+        });
+        (0, vitest_1.it)("should apply correct exchange rate conversion", () => {
+            const testRate = 3.5;
+            mockRates.USD = testRate;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const inputValue = 100;
+            const formatted = result.current.formatCurrencyValue(inputValue);
+            (0, vitest_1.expect)(formatted).toContain("350");
+        });
+    });
+    (0, vitest_1.describe)("return values", () => {
+        (0, vitest_1.it)("should return selected currency", () => {
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            (0, vitest_1.expect)(result.current.selectedCurrency).toBe("USD");
+        });
+        (0, vitest_1.it)("should return base currency", () => {
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            (0, vitest_1.expect)(result.current.baseCurrency).toBe("B3");
+        });
+        (0, vitest_1.it)("should return exchange rate", () => {
+            const testRate = 2.5;
+            mockRates.USD = testRate;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            (0, vitest_1.expect)(result.current.exchangeRate).toBe(testRate);
+        });
+        (0, vitest_1.it)("should return correct currency symbols", () => {
+            mockStoreState.selectedCurrency = "EUR";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            (0, vitest_1.expect)(result.current.selectedCurrencySymbol).toBe("€");
+            (0, vitest_1.expect)(result.current.baseCurrencySymbol).toBe("B3");
+        });
+    });
+    (0, vitest_1.describe)("formatTooltipValue", () => {
+        (0, vitest_1.it)("should show USD equivalent when displaying base currency", () => {
+            mockRates.USD = 1.5;
+            mockStoreState.selectedCurrency = "B3";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const tooltip = result.current.formatTooltipValue(100);
+            (0, vitest_1.expect)(tooltip).toContain("USD");
+            (0, vitest_1.expect)(tooltip).toContain("150");
+        });
+        (0, vitest_1.it)("should show base currency when displaying other currency", () => {
+            mockRates.EUR = 0.9;
+            mockRates.USD = 1.2;
+            mockStoreState.selectedCurrency = "EUR";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const tooltip = result.current.formatTooltipValue(100);
+            (0, vitest_1.expect)(tooltip).toContain("B3");
+            (0, vitest_1.expect)(tooltip).toContain("100");
+        });
+        (0, vitest_1.it)("should handle custom currency for base currency", () => {
+            mockRates.USD = 2.0;
+            mockRates.EUR = 1.8;
+            mockStoreState.selectedCurrency = "EUR";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const tooltip = result.current.formatTooltipValue(100, "B3");
+            (0, vitest_1.expect)(tooltip).toContain("USD");
+            (0, vitest_1.expect)(tooltip).toContain("200");
+        });
+        (0, vitest_1.it)("should handle custom currency for non-base currency", () => {
+            mockRates.USD = 2.0;
+            mockStoreState.selectedCurrency = "USD";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const tooltip = result.current.formatTooltipValue(50, "ETH");
+            (0, vitest_1.expect)(tooltip).toContain("ETH");
+            (0, vitest_1.expect)(tooltip).toContain("50");
+        });
+        (0, vitest_1.it)("should handle absolute values for negative amounts", () => {
+            mockRates.USD = 1.5;
+            mockStoreState.selectedCurrency = "B3";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const tooltip = result.current.formatTooltipValue(-100);
+            (0, vitest_1.expect)(tooltip).toContain("USD");
+            (0, vitest_1.expect)(tooltip).toContain("150");
+            (0, vitest_1.expect)(tooltip).not.toContain("-");
+        });
+        (0, vitest_1.it)("should handle exchange rate unavailable", () => {
+            mockRates.USD = undefined;
+            mockStoreState.selectedCurrency = "B3";
+            mockStoreState.baseCurrency = "B3";
+            const { result } = (0, react_1.renderHook)(() => (0, useCurrencyConversion_1.useCurrencyConversion)());
+            const tooltip = result.current.formatTooltipValue(100);
+            (0, vitest_1.expect)(tooltip).toContain("USD");
+            (0, vitest_1.expect)(tooltip).toContain("100");
+        });
+    });
+});

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

@@ -1,4 +1,3 @@
-export * from "./auth-token";
 export * from "./cn";
 export * from "./formatNumber";
 export * from "./formatUsername";

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

@@ -15,7 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 // Export utility functions
-__exportStar(require("./auth-token"), exports);
 __exportStar(require("./cn"), exports);
 __exportStar(require("./formatNumber"), exports);
 __exportStar(require("./formatUsername"), exports);

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

@@ -6,7 +6,7 @@ import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet, useP
 import { cn } from "../../../shared/utils/cn.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
 import invariant from "invariant";
-import { ArrowDown, HistoryIcon } from "lucide-react";
+import { ArrowDown, HistoryIcon, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -16,7 +16,6 @@ import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFing
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { CryptoPaySection } from "./common/CryptoPaySection.js";
 import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
-import { ErrorSection } from "./common/ErrorSection.js";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails.js";
 import { OrderHistory } from "./common/OrderHistory.js";
@@ -332,7 +331,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
         ? parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals).toString()
         : parseUnits(dstAmount.replace(/,/g, ""), selectedDstToken.decimals).toString();
     const srcAmountOnrampInWei = parseUnits(srcAmountOnRamp.replace(/,/g, ""), USDC_BASE.decimals).toString();
-    const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = useAnyspendQuote(activeTab === "crypto"
+    const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote(activeTab === "crypto"
         ? {
             srcChain: selectedSrcChainId,
             dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
@@ -462,38 +461,38 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
     // Determine button state and text
     const btnInfo = useMemo(() => {
         if (activeInputAmountInWei === "0")
-            return { text: "Enter an amount", disable: true, error: false };
+            return { text: "Enter an amount", disable: true, error: false, loading: false };
         if (isLoadingAnyspendQuote)
-            return { text: "Loading...", disable: true, error: false };
+            return { text: "Loading quote...", disable: true, error: false, loading: true };
         if (!recipientAddress)
-            return { text: "Select recipient", disable: false, error: false };
+            return { text: "Select recipient", disable: false, error: false, loading: false };
         if (isCreatingOrder || isCreatingOnrampOrder)
-            return { text: "Creating order...", disable: true, error: false };
+            return { text: "Creating order...", disable: true, error: false, loading: true };
         if (!anyspendQuote || !anyspendQuote.success)
-            return { text: "Get rate error", disable: true, error: true };
+            return { text: "No quote found", disable: true, error: false, loading: false };
         if (activeTab === "crypto") {
             // If no payment method selected, show "Choose payment method"
             if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
-                return { text: "Choose payment method", disable: false, error: false };
+                return { text: "Choose payment method", disable: false, error: false, loading: false };
             }
             // If payment method selected, show appropriate action
             if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
                 selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
-                return { text: "Swap", disable: false, error: false };
+                return { text: "Swap", disable: false, error: false, loading: false };
             }
             if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
-                return { text: "Continue to payment", disable: false, error: false };
+                return { text: "Continue to payment", disable: false, error: false, loading: false };
             }
         }
         if (activeTab === "fiat") {
             // If no fiat payment method selected, show "Select payment method"
             if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
-                return { text: "Select payment method", disable: false, error: false };
+                return { text: "Select payment method", disable: false, error: false, loading: false };
             }
             // If payment method is selected, show "Buy"
-            return { text: "Buy", disable: false, error: false };
+            return { text: "Buy", disable: false, error: false, loading: false };
         }
-        return { text: "Buy", disable: false, error: false };
+        return { text: "Buy", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
         isLoadingAnyspendQuote,
@@ -748,7 +747,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
                         }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, selectedRecipientAddress: recipientAddress, recipientName: recipientName || undefined, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, onChangeDstAmount: value => {
                             setIsSrcInputDirty(false);
                             setDstAmount(value);
-                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward") }))] }), _jsx(ErrorSection, { error: getAnyspendQuoteError }), _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.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 }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
+                        }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward") }))] }), _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.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), 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: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }));
     const onrampPaymentView = (_jsx(PanelOnrampPayment, { srcAmountOnRamp: srcAmountOnRamp, recipientName: recipientName || undefined, recipientAddress: recipientAddress, isBuyMode: isBuyMode, destinationTokenChainId: destinationTokenChainId, destinationTokenAddress: destinationTokenAddress, selectedDstChainId: selectedDstChainId, selectedDstToken: selectedDstToken, orderType: "swap", anyspendQuote: anyspendQuote, globalAddress: globalAddress, onOrderCreated: orderId => {
             setOrderId(orderId);
             navigateToPanel(PanelView.ORDER_DETAILS, "forward");

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

@@ -12,12 +12,11 @@ import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFing
 import { CryptoPaySection } from "./common/CryptoPaySection.js";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
 import { CryptoReceiveSection } from "./common/CryptoReceiveSection.js";
-import { ErrorSection } from "./common/ErrorSection.js";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
 import { OrderDetails } from "./common/OrderDetails.js";
 import { PointsDetailPanel } from "./common/PointsDetailPanel.js";
 import { RecipientSelection } from "./common/RecipientSelection.js";
-import { ArrowDown } from "lucide-react";
+import { ArrowDown, Loader2 } from "lucide-react";
 import { PanelOnramp } from "./common/PanelOnramp.js";
 const SLIPPAGE_PERCENT = 3;
 export const HYPE_TOKEN_DETAILS = {
@@ -30,7 +29,7 @@ export function AnySpendDepositHype(props) {
 }
 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({
+    const { activePanel, setActivePanel, orderId, setOrderId, oat, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, dstAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod, selectedFiatPaymentMethod, setSelectedFiatPaymentMethod, selectedRecipientAddress, setSelectedRecipientAddress, recipientName, globalAddress, anyspendQuote, isLoadingAnyspendQuote, activeInputAmountInWei, geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support, createOrder, isCreatingOrder, createOnrampOrder, isCreatingOnrampOrder, } = useAnyspendFlow({
         paymentType,
         recipientAddress,
         loadOrder,
@@ -44,17 +43,17 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
     // Button state logic
     const btnInfo = useMemo(() => {
         if (activeInputAmountInWei === "0")
-            return { text: "Enter an amount", disable: true, error: false };
+            return { text: "Enter an amount", disable: true, error: false, loading: false };
         if (isLoadingAnyspendQuote)
-            return { text: "Loading quote...", disable: true, error: false };
+            return { text: "Loading quote...", disable: true, error: false, loading: true };
         if (isCreatingOrder || isCreatingOnrampOrder)
-            return { text: "Creating order...", disable: true, error: false };
+            return { text: "Creating order...", disable: true, error: false, loading: true };
         if (!selectedRecipientAddress)
-            return { text: "Select recipient", disable: false, error: false };
+            return { text: "Select recipient", disable: false, error: false, loading: false };
         if (!anyspendQuote || !anyspendQuote.success)
-            return { text: "Get quote error", disable: true, error: true };
+            return { text: "Get quote error", disable: true, error: true, loading: false };
         if (!dstAmount)
-            return { text: "No quote available", disable: true, error: true };
+            return { text: "No quote available", disable: true, error: true, loading: false };
         // Check minimum deposit amount (10 HYPE)
         // Use the raw amount from the quote instead of the formatted display string
         if (anyspendQuote.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
@@ -62,22 +61,22 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
             const decimals = anyspendQuote.data.currencyOut.currency.decimals;
             const actualAmount = parseFloat(rawAmountInWei) / Math.pow(10, decimals);
             if (actualAmount < 10) {
-                return { text: "Minimum 10 HYPE deposit", disable: true, error: true };
+                return { text: "Minimum 10 HYPE deposit", disable: true, error: true, loading: false };
             }
         }
         if (paymentType === "crypto") {
             if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
-                return { text: "Choose payment method", disable: false, error: false };
+                return { text: "Choose payment method", disable: false, error: false, loading: false };
             }
-            return { text: "Continue to deposit", disable: false, error: false };
+            return { text: "Continue to deposit", disable: false, error: false, loading: false };
         }
         if (paymentType === "fiat") {
             if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
-                return { text: "Select payment method", disable: false, error: false };
+                return { text: "Select payment method", disable: false, error: false, loading: false };
             }
-            return { text: "Buy", disable: false, error: false };
+            return { text: "Buy", disable: false, error: false, loading: false };
         }
-        return { text: "Continue to deposit", disable: false, error: false };
+        return { text: "Continue to deposit", disable: false, error: false, loading: false };
     }, [
         activeInputAmountInWei,
         isLoadingAnyspendQuote,
@@ -115,7 +114,7 @@ function AnySpendDepositHypeInner({ loadOrder, mode = "modal", recipientAddress,
     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] }));
+                            }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => setActivePanel(PanelView.POINTS_DETAIL) }))] }) }), _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"), 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: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }) }), mainFooter ? mainFooter : null] }));
     // Handle crypto order creation
     const handleCryptoOrder = async () => {
         try {

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

@@ -7,9 +7,9 @@ import { OrderHistoryItem } from "./OrderHistoryItem.js";
 export function OrderHistory({ mode, onBack, onSelectOrder }) {
     const { address } = useAccountWallet();
     const { orderHistory, isLoadingOrderHistory, refetchOrderHistory } = useAnyspendOrderHistory(address);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-6 flex w-full items-center gap-4", children: [_jsx(Button, { onClick: onBack, variant: "ghost", size: "icon", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-xl font-semibold", children: "Order History" }), _jsx("p", { className: "text-as-primary/30 text-sm", children: "View your past transactions" })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-8 flex w-full items-center gap-3", children: [_jsx(Button, { onClick: onBack, variant: "ghost", size: "icon", className: "hover:bg-as-surface-secondary", children: _jsx(ArrowLeft, { className: "h-5 w-5" }) }), _jsx("div", { className: "flex-1", children: _jsx("h3", { className: "text-as-primary text-2xl font-bold", children: "Order History" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "hover:bg-as-surface-secondary", onClick: () => {
                             refetchOrderHistory();
-                        }, children: _jsx(RefreshCcw, { className: "text-as-primary/30 hover:text-as-primary h-4 w-4 cursor-pointer transition-all hover:rotate-180" }) })] }), isLoadingOrderHistory ? (_jsx("div", { className: "w-full space-y-4", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-[160px] w-full rounded-lg" }, i))) })) : !orderHistory?.length ? (_jsx("div", { className: "bg-as-light-brand w-full rounded-lg border p-8 text-center", children: _jsx("p", { className: "text-b3-react-muted-foreground", children: "No order history found" }) })) : (_jsx("div", { className: "mb-12 w-full space-y-4", children: [...orderHistory]
+                        }, children: _jsx(RefreshCcw, { className: "text-as-secondary hover:text-as-primary h-5 w-5 cursor-pointer transition-all hover:rotate-180" }) })] }), isLoadingOrderHistory ? (_jsx("div", { className: "w-full space-y-3", children: [1, 2, 3].map(i => (_jsx(Skeleton, { className: "h-[180px] w-full rounded-2xl" }, i))) })) : !orderHistory?.length ? (_jsx("div", { className: "bg-as-surface-secondary w-full rounded-2xl p-12 text-center", children: _jsx("p", { className: "text-as-secondary text-sm", children: "No order history found" }) })) : (_jsx("div", { className: "mb-12 w-full space-y-3", children: [...orderHistory]
                     .sort((a, b) => b.createdAt - a.createdAt)
                     .map(order => (_jsx(OrderHistoryItem, { order: order, onSelectOrder: onSelectOrder, mode: mode }, order.id))) }))] }));
 }

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ALL_CHAINS, getChainName, getStatusDisplay } from "../../../../anyspend/index.js";
-import { Badge, Button, useIsMobile } from "../../../../global-account/react/index.js";
+import { Badge, useIsMobile } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import { formatTokenAmount } from "../../../../shared/utils/number.js";
-import { ArrowRight, ChevronDown } from "lucide-react";
+import { getVendorDisplayName } from "../../../../shared/utils/payment.utils.js";
+import { ArrowRight } from "lucide-react";
 import TimeAgo from "react-timeago";
-import { b3 } from "viem/chains";
 export function OrderHistoryItem({ order, onSelectOrder, mode }) {
     const nft = order.type === "mint_nft" ? order.metadata.nft : undefined;
     const tournament = order.type === "join_tournament" || order.type === "fund_tournament" ? order.metadata.tournament : undefined;
@@ -19,9 +19,12 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }) {
         : order.payload.expectedDstAmount;
     const { text: orderStatusText, status: orderDisplayStatus } = getStatusDisplay(order);
     const isSmallView = useIsMobile() || mode === "modal";
-    return (_jsxs("div", { className: cn("bg-as-light-brand/20 rounded-lg border p-4", onSelectOrder && "hover:bg-as-light-brand/30 hover:border-as-brand cursor-pointer transition-colors"), onClick: () => onSelectOrder?.(order.id), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Badge, { className: cn("px-3 py-1 text-xs", orderDisplayStatus === "processing" && "bg-yellow-500/10 text-yellow-500", orderDisplayStatus === "success" && "bg-green-500/10 text-green-500", orderDisplayStatus === "failure" && "bg-red-500/10 text-red-500"), children: orderStatusText }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-nano label-style text-as-primary/30", children: _jsx(TimeAgo, { date: new Date(order.createdAt) }) }) })] }), order.oneClickBuyUrl ? (_jsx("div", { className: "mb-3 mt-4 flex items-center gap-1", children: _jsxs("div", { className: "bg-b3-react-background flex flex-1 flex-col gap-1 rounded-lg border p-4 px-5", children: [_jsxs("h3", { className: "text-as-primary/50 flex items-center gap-2 text-xl font-semibold", children: [_jsxs("span", { children: ["Buy ", _jsxs("span", { className: "text-as-primary", children: ["$", formatTokenAmount(BigInt(order.srcAmount), order.metadata.srcToken.decimals)] }), ` of`] }), _jsxs("span", { className: "text-as-primary flex items-center gap-2", children: [nft ? (_jsx("img", { src: nft.imageUrl, alt: nft.name, className: "h-6 w-6" })) : tournament ? (_jsx("img", { src: tournament.imageUrl, alt: tournament.name, className: "h-6 w-6" })) : (_jsx("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: "h-6 w-6" })), nft ? nft.name : tournament ? tournament.name : dstToken.symbol] }), _jsxs("span", { className: "flex items-center gap-2", children: [` on `, _jsxs("span", { className: "text-as-primary flex items-center gap-2", children: [_jsx("img", { src: ALL_CHAINS[order.dstChain]?.logoUrl, alt: getChainName(order.dstChain), className: "h-4" }), order.dstChain !== b3.id && getChainName(order.dstChain)] })] })] }), _jsxs("p", { className: "label-style text-as-primary/30 mt-1 flex items-center gap-2 text-xs", children: ["Paying via", " ", _jsx("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "-mt-1 h-3" })] })] }) })) : (_jsxs("div", { className: cn("mb-3 mt-4 flex items-center gap-1", isSmallView && "flex-col"), children: [_jsxs("div", { className: "bg-b3-react-background flex w-full flex-1 flex-col gap-1 overflow-hidden rounded-lg border p-4 px-5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: order.metadata.srcToken.metadata.logoURI, alt: order.metadata.srcToken.symbol, className: "h-6 w-6 rounded-full" }), _jsxs("div", { className: "text-as-primary flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: [formatTokenAmount(BigInt(order.srcAmount), order.metadata.srcToken.decimals), " ", order.metadata.srcToken.symbol] })] }), _jsxs("div", { className: "label-style text-as-primary/50 flex items-center gap-2 text-sm", children: ["from", _jsx("img", { src: ALL_CHAINS[order.srcChain]?.logoUrl, alt: getChainName(order.srcChain), className: cn("h-4", order.srcChain !== b3.id && "w-4 rounded-full", order.srcChain === b3.id && "h-3") }), getChainName(order.srcChain)] })] }), _jsx("div", { className: cn("h-8 w-8 shrink-0 -rotate-90 opacity-30", isSmallView && "rotate-0"), children: _jsx(ChevronDown, { className: "h-8 w-8" }) }), _jsxs("div", { className: "bg-b3-react-background flex w-full flex-1 flex-col gap-1 overflow-hidden rounded-lg border p-4 px-5", children: [_jsx("div", { className: "flex items-center gap-2", children: nft ? (_jsxs(_Fragment, { children: [_jsx("img", { src: nft.imageUrl, alt: nft.name, className: "h-6 w-6 rounded-full" }), _jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: nft.name })] })) : tournament ? (_jsxs(_Fragment, { children: [_jsx("img", { src: tournament.imageUrl, alt: tournament.name, className: "h-6 w-6 rounded-full" }), _jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: tournament.name })] })) : (_jsxs(_Fragment, { children: [_jsx("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: "h-6 w-6 rounded-full" }), _jsxs("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold", children: [formatTokenAmount(actualDstAmount
+    // Check if this is a one-click payment order
+    const isOneClickPayment = !!order.oneClickBuyUrl;
+    const vendorName = order.onrampMetadata?.vendor ? getVendorDisplayName(order.onrampMetadata.vendor) : null;
+    return (_jsxs("div", { className: cn("bg-as-surface-secondary hover:bg-as-surface-tertiary rounded-xl p-4 transition-all", onSelectOrder && "cursor-pointer"), onClick: () => onSelectOrder?.(order.id), children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn("text-xs font-semibold", orderDisplayStatus === "processing" && "text-yellow-600", orderDisplayStatus === "success" && "text-green-600", orderDisplayStatus === "failure" && "text-red-600"), children: orderStatusText }), isOneClickPayment && vendorName && (_jsx(Badge, { variant: "outline", className: "text-as-secondary px-2 py-0.5 text-[10px]", children: vendorName }))] }), _jsx("div", { className: "text-as-secondary text-[10px] font-medium uppercase tracking-wide", children: _jsx(TimeAgo, { date: new Date(order.createdAt) }) })] }), _jsxs("div", { className: cn("flex items-center", isSmallView ? "gap-2" : "gap-4"), children: [_jsxs("div", { className: cn("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2"), children: [_jsx("img", { src: order.metadata.srcToken.metadata.logoURI, alt: order.metadata.srcToken.symbol, className: cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: [formatTokenAmount(BigInt(order.srcAmount), order.metadata.srcToken.decimals), " ", order.metadata.srcToken.symbol] }), _jsxs("div", { className: cn("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [_jsx("img", { src: ALL_CHAINS[order.srcChain]?.logoUrl, alt: getChainName(order.srcChain), className: "h-3 w-3" }), _jsx("span", { className: "truncate", children: getChainName(order.srcChain) })] })] })] }), _jsx(ArrowRight, { className: cn("text-as-secondary shrink-0 opacity-30", isSmallView ? "h-4 w-4" : "h-5 w-5") }), _jsx("div", { className: cn("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2"), children: nft ? (_jsxs(_Fragment, { children: [_jsx("img", { src: nft.imageUrl, alt: nft.name, className: cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: nft.name }), _jsxs("div", { className: cn("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [_jsx("img", { src: ALL_CHAINS[order.dstChain]?.logoUrl, alt: getChainName(order.dstChain), className: "h-3 w-3" }), _jsx("span", { className: "truncate", children: getChainName(order.dstChain) })] })] })] })) : tournament ? (_jsxs(_Fragment, { children: [_jsx("img", { src: tournament.imageUrl, alt: tournament.name, className: cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: tournament.name }), _jsxs("div", { className: cn("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [_jsx("img", { src: ALL_CHAINS[order.dstChain]?.logoUrl, alt: getChainName(order.dstChain), className: "h-3 w-3" }), _jsx("span", { className: "truncate", children: getChainName(order.dstChain) })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx("img", { src: dstToken.metadata.logoURI, alt: dstToken.symbol, className: cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm"), children: [formatTokenAmount(actualDstAmount
                                                     ? BigInt(actualDstAmount)
                                                     : expectedDstAmount
                                                         ? BigInt(expectedDstAmount)
-                                                        : BigInt(0), dstToken.decimals), " ", dstToken.symbol] })] })) }), _jsxs("div", { className: "label-style text-as-primary/50 flex items-center gap-2 text-sm", children: ["to", _jsx("img", { src: ALL_CHAINS[order.dstChain]?.logoUrl, alt: getChainName(order.dstChain), className: cn("h-4", order.dstChain !== b3.id && "w-4 rounded-full", order.dstChain === b3.id && "h-3") }), getChainName(order.dstChain)] })] })] })), _jsx("div", { className: "flex items-center justify-end", children: _jsxs(Button, { variant: "link", size: "sm", className: "h-auto", onClick: () => onSelectOrder?.(order.id), children: [orderDisplayStatus === "processing" ? "Proceed with payment" : "Details", " ", _jsx(ArrowRight, { className: "ml-2 h-3 w-3" })] }) })] }, `anyspend-${order.id}`));
+                                                        : BigInt(0), dstToken.decimals), " ", dstToken.symbol] }), _jsxs("div", { className: cn("text-as-secondary flex items-center gap-1", isSmallView ? "text-[10px]" : "text-xs"), children: [_jsx("img", { src: ALL_CHAINS[order.dstChain]?.logoUrl, alt: getChainName(order.dstChain), className: "h-3 w-3" }), _jsx("span", { className: "truncate", children: getChainName(order.dstChain) })] })] })] })) })] })] }, `anyspend-${order.id}`));
 }