@b3dotfun/sdk 0.1.66-alpha.4 → 0.1.67-alpha.0

package/src/anyspend/utils/format.ts

@@ -27,6 +27,7 @@ export const getStatusDisplay = (
       return {
         text: depositText,
         status: "processing",
+        description: "Waiting for your deposit to be confirmed on-chain",
       };
     }
     case "waiting_stripe_payment":
@@ -44,7 +45,7 @@ export const getStatusDisplay = (
       };
 
     case "sending_token_from_vault":
-      return { text: "Sending Token", status: "processing" };
+      return { text: "Sending Token", status: "processing", description: "Preparing your tokens for delivery" };
 
     case "relay":
     case "executing":
@@ -76,9 +77,17 @@ export const getStatusDisplay = (
     }
 
     case "refunding":
-      return { text: "Order Refunding", status: "processing" };
+      return {
+        text: "Refunding Order",
+        status: "processing",
+        description: "Your funds are being returned to your wallet",
+      };
     case "refunded":
-      return { text: "Order Refunded", status: "failure" };
+      return {
+        text: "Order Refunded",
+        status: "failure",
+        description: "Your funds have been returned to your wallet.",
+      };
 
     case "failure":
       return {

package/src/global-account/react/components/B3DynamicModal.tsx

@@ -84,6 +84,9 @@ export function B3DynamicModal() {
     "anySpendBondKit",
   ];
 
+  // AnySpend modal types should not show the "Global Account" branding footer
+  const isAnySpendType = contentType?.type?.toLowerCase().startsWith("anyspend") ?? false;
+
   // Check if current content type is in freestyle types
   const isFreestyleType = freestyleTypes.includes(contentType?.type as string);
   // Determine if modal should be closable - defaults to true unless explicitly set to false
@@ -194,8 +197,8 @@ export function B3DynamicModal() {
       <ModalContent
         className={cn(
           contentClass,
-          "rounded-2xl bg-white shadow-xl dark:bg-gray-900",
-          "border border-gray-200 dark:border-gray-800",
+          "rounded-2xl bg-white shadow-xl dark:bg-neutral-900",
+          "border border-gray-200 dark:border-neutral-800",
           (contentType?.type === "manageAccount" ||
             contentType?.type === "deposit" ||
             contentType?.type === "send" ||
@@ -205,6 +208,7 @@ export function B3DynamicModal() {
           "mx-auto w-full max-w-md sm:max-w-lg",
         )}
         hideCloseButton={hideCloseButton}
+        hideGABranding={isAnySpendType}
         onEscapeKeyDown={!isClosable ? e => e.preventDefault() : undefined}
         onPointerDownOutside={!isClosable ? e => e.preventDefault() : undefined}
         onInteractOutside={!isClosable ? e => e.preventDefault() : undefined}
@@ -251,7 +255,7 @@ export function B3DynamicModal() {
                 animate={{ height: "auto" }}
                 exit={{ height: 0 }}
                 transition={{ duration: 0.3, ease: "easeInOut" }}
-                className="toast-section relative z-10 overflow-hidden bg-white dark:border-gray-800 dark:bg-gray-900"
+                className="toast-section relative z-10 overflow-hidden bg-white dark:border-neutral-800 dark:bg-neutral-900"
               >
                 <motion.div
                   initial={{ opacity: 0, y: -10 }}
@@ -269,7 +273,7 @@ export function B3DynamicModal() {
       </ModalContent>
 
       {/* Animate inner container margin to cover branding when toasts appear */}
-      {isOpen && (
+      {isOpen && !isAnySpendType && (
         <style>{`
           .modal-inner-content {
             transition: margin-bottom 0.3s ease-in-out;

package/src/global-account/react/components/ui/dialog.tsx

@@ -38,11 +38,13 @@ type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
   hideCloseButton?: boolean;
   closeBtnClassName?: string;
+  /** Hide the "Global Account" branding footer below the modal */
+  hideGABranding?: boolean;
 };
 
 const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<DialogContentElement>> =
   React.forwardRef<DialogContentElement, DialogContentProps>(
-    ({ className, children, hideCloseButton = true, closeBtnClassName, ...props }, ref) => {
+    ({ className, children, hideCloseButton = true, closeBtnClassName, hideGABranding, ...props }, ref) => {
       const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
       return (
         <DialogPortal container={container}>
@@ -60,7 +62,12 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
             )}
             {...props}
           >
-            <div className="modal-inner-content mb-[23px] flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)] dark:border-gray-700 dark:bg-gray-900">
+            <div
+              className={cn(
+                "modal-inner-content flex flex-1 flex-col overflow-hidden rounded-xl border border-[#D1D1D6] bg-white shadow-[0_20px_24px_-4px_rgba(10,13,18,0.08),0_8px_8px_-4px_rgba(10,13,18,0.03),0_3px_3px_-1.5px_rgba(10,13,18,0.04)] dark:border-neutral-700 dark:bg-neutral-900",
+                !hideGABranding && "mb-[23px]",
+              )}
+            >
               {children}
               {!hideCloseButton && (
                 <DialogPrimitive.Close
@@ -75,12 +82,14 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
               )}
             </div>
             {/* Global Account Footer - Absolutely positioned on outer grey layer */}
-            <div className="b3-modal-ga-branding absolute bottom-[10px] left-0 right-0 flex items-center justify-center gap-1.5 pt-[10px]">
-              <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="h-4 w-4" />
-              <span className="font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]">
-                Global Account
-              </span>
-            </div>
+            {!hideGABranding && (
+              <div className="b3-modal-ga-branding absolute bottom-[10px] left-0 right-0 flex items-center justify-center gap-1.5 pt-[10px]">
+                <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="h-4 w-4" />
+                <span className="font-neue-montreal-semibold text-xs uppercase leading-none tracking-[0.72px] text-[#0B57C2]">
+                  Global Account
+                </span>
+              </div>
+            )}
           </DialogPrimitive.Content>
         </DialogPortal>
       );

package/src/global-account/react/components/ui/drawer.tsx

@@ -30,8 +30,8 @@ DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & { hideGABranding?: boolean }
+>(({ className, children, hideGABranding: _hideGABranding, ...props }, ref) => {
   const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
   return (
     <DrawerPortal container={container}>

package/src/shared/utils/number.ts

@@ -121,6 +121,18 @@ export const formatDisplayNumber = (
   return formatter.format(v);
 };
 
+/**
+ * Safely convert a string to BigInt, returning 0n for invalid values.
+ * Use this for consumer-provided amount strings that may not be valid wei values.
+ */
+export function safeBigInt(value: string): bigint {
+  try {
+    return BigInt(value);
+  } catch {
+    return BigInt(0);
+  }
+}
+
 export function formatUnits(value: string, decimals = 18) {
   const factor = BigInt(10) ** BigInt(decimals);
   const wholePart = BigInt(value) / factor;

package/src/styles/index.css

@@ -126,7 +126,7 @@
   --as-on-disabled: 0 0% 44%;
   --as-shadow-lg: 220 29% 5%;
   --as-quaternary: 240 6% 65%;
-  --as-tertiarry: 235 6% 34%;
+  --as-tertiary: 235 6% 50%;
   --as-success-secondary: 89 85% 89%;
   --as-content-icon-success: 95 85% 35%;
   --as-content-disabled: 220 6% 47%;
@@ -219,7 +219,7 @@ html[data-theme="dark"] .b3-root,
   --as-on-surface-disabled: 0 0% 78%;
   --as-on-disabled: 0 0% 44%;
   --as-quaternary: 240 6% 65%;
-  --as-tertiarry: 240 6% 65%;
+  --as-tertiary: 240 6% 65%;
   --as-success-secondary: 95 85% 35%;
   --as-content-icon-success: 89 85% 89%;
   --as-content-disabled: 220 6% 47%;
@@ -703,3 +703,49 @@ Dark version
 .tw-header {
   display: none !important; /* Hide the TW "BSMNT" header */
 }
+
+/* AnySpend Checkout: modal trigger overrides */
+.anyspend-checkout-trigger .anyspend-payment-methods {
+  border: none;
+  border-radius: 0;
+}
+.anyspend-checkout-trigger .anyspend-payment-title {
+  font-size: 0;
+  padding-left: 0.75rem;
+}
+.anyspend-checkout-trigger .anyspend-payment-title::before {
+  content: "Payment options";
+  font-size: 1.125rem;
+}
+.anyspend-checkout-trigger .anyspend-payment-panel {
+  gap: 0;
+}
+.anyspend-checkout-trigger .anyspend-payment-method-btn {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.anyspend-checkout-trigger .anyspend-payment-method-panel {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+/* AnySpend Checkout: 2-column grid layout */
+.anyspend-checkout-grid {
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: 1fr;
+}
+@media (min-width: 768px) {
+  .anyspend-checkout-grid {
+    grid-template-columns: 1fr var(--anyspend-cart-width, 380px);
+  }
+  .anyspend-checkout-grid > .anyspend-payment-col {
+    order: 1;
+  }
+  .anyspend-checkout-grid > .anyspend-cart-col {
+    order: 2;
+    position: sticky;
+    top: 32px;
+    align-self: start;
+  }
+}

package/dist/cjs/anyspend/react/components/checkout/CryptoCheckoutPanel.d.ts

@@ -1,33 +0,0 @@
-import { components } from "../../../../anyspend/types/api";
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-interface CryptoCheckoutPanelProps {
-    recipientAddress: string;
-    destinationTokenAddress: string;
-    destinationTokenChainId: number;
-    totalAmount: string;
-    buttonText?: string;
-    themeColor?: string;
-    onSuccess?: (result: {
-        txHash?: string;
-        orderId?: string;
-    }) => void;
-    onError?: (error: Error) => void;
-    callbackMetadata?: Record<string, unknown>;
-    classes?: AnySpendCheckoutClasses;
-}
-export declare function CryptoCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText, themeColor, onSuccess, onError, callbackMetadata, classes, }: CryptoCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
-export interface TokenSelectorModalProps {
-    open: boolean;
-    onClose: () => void;
-    tokenList: components["schemas"]["Token"][] | undefined;
-    isLoadingTokens: boolean;
-    tokenSearchQuery: string;
-    onSearchChange: (query: string) => void;
-    onSelectToken: (token: components["schemas"]["Token"]) => void;
-    selectedToken: components["schemas"]["Token"] | null;
-    walletAddress?: string;
-    chainId: number;
-    onChainChange: (chainId: number) => void;
-}
-export declare function TokenSelectorModal({ open, onClose, tokenList, isLoadingTokens, tokenSearchQuery, onSearchChange, onSelectToken, selectedToken, walletAddress, chainId, onChainChange, }: TokenSelectorModalProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/cjs/anyspend/react/components/checkout/CryptoCheckoutPanel.js

@@ -1,317 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CryptoCheckoutPanel = CryptoCheckoutPanel;
-exports.TokenSelectorModal = TokenSelectorModal;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const useAnyspendQuote_1 = require("../../../../anyspend/react/hooks/useAnyspendQuote");
-const useAnyspendCreateOrder_1 = require("../../../../anyspend/react/hooks/useAnyspendCreateOrder");
-const useAnyspendOrderAndTransactions_1 = require("../../../../anyspend/react/hooks/useAnyspendOrderAndTransactions");
-const useAnyspendTokens_1 = require("../../../../anyspend/react/hooks/useAnyspendTokens");
-const useOnOrderSuccess_1 = require("../../../../anyspend/react/hooks/useOnOrderSuccess");
-const anyspend_1 = require("../../../../anyspend");
-const chain_1 = require("../../../../anyspend/utils/chain");
-const react_1 = require("../../../../global-account/react");
-const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
-const number_1 = require("../../../../shared/utils/number");
-const token_1 = require("../../../../anyspend/utils/token");
-const cn_1 = require("../../../../shared/utils/cn");
-const react_2 = require("../../../../global-account/react");
-const react_3 = require("../../../../global-account/react");
-const dialog_1 = require("../../../../global-account/react/components/ui/dialog");
-const drawer_1 = require("../../../../global-account/react/components/ui/drawer");
-const lucide_react_1 = require("lucide-react");
-const viem_1 = require("viem");
-const react_4 = require("motion/react");
-const react_5 = require("react");
-const ChainTokenIcon_1 = require("../common/ChainTokenIcon");
-function CryptoCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, buttonText = "Pay", themeColor, onSuccess, onError, callbackMetadata, classes, }) {
-    const [selectedSrcChainId, setSelectedSrcChainId] = (0, react_5.useState)(destinationTokenChainId);
-    const [selectedSrcToken, setSelectedSrcToken] = (0, react_5.useState)(null);
-    const [showTokenSelector, setShowTokenSelector] = (0, react_5.useState)(false);
-    const [tokenSearchQuery, setTokenSearchQuery] = (0, react_5.useState)("");
-    // Get wallet & modal
-    const { address: walletAddress } = (0, react_1.useAccountWallet)();
-    const { partnerId } = (0, react_1.useB3Config)();
-    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
-    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
-    // Get destination token data
-    const { data: dstTokenData } = (0, react_1.useTokenData)(destinationTokenChainId, destinationTokenAddress);
-    // Get token list for source chain
-    const { data: tokenList, isLoading: isLoadingTokens } = (0, useAnyspendTokens_1.useAnyspendTokenList)(selectedSrcChainId, tokenSearchQuery);
-    // Set default source token to destination token (same-chain, no swap needed)
-    (0, react_5.useEffect)(() => {
-        if (!selectedSrcToken && tokenList && tokenList.length > 0) {
-            // Try to find the destination token in the list
-            const dstToken = tokenList.find((t) => t.address.toLowerCase() === destinationTokenAddress.toLowerCase() && t.chainId === destinationTokenChainId);
-            if (dstToken) {
-                setSelectedSrcToken(dstToken);
-            }
-            else {
-                // Default to first token
-                setSelectedSrcToken(tokenList[0]);
-            }
-        }
-    }, [tokenList, selectedSrcToken, destinationTokenAddress, destinationTokenChainId]);
-    // Compute source amount from destination amount using quote
-    const isSameToken = selectedSrcToken &&
-        selectedSrcToken.address.toLowerCase() === destinationTokenAddress.toLowerCase() &&
-        selectedSrcToken.chainId === destinationTokenChainId;
-    const { anyspendQuote, isLoadingAnyspendQuote } = (0, useAnyspendQuote_1.useAnyspendQuote)({
-        type: "swap",
-        srcChain: selectedSrcChainId,
-        dstChain: destinationTokenChainId,
-        srcTokenAddress: selectedSrcToken?.address || "",
-        dstTokenAddress: destinationTokenAddress,
-        tradeType: "EXACT_OUTPUT",
-        amount: totalAmount,
-    });
-    // Get balance
-    const tokenAddress = selectedSrcToken
-        ? (0, token_1.isNativeToken)(selectedSrcToken.address)
-            ? "native"
-            : selectedSrcToken.address
-        : undefined;
-    const { data: balanceData } = (0, react_1.useSimTokenBalance)(walletAddress, tokenAddress, selectedSrcChainId);
-    const balance = (0, react_5.useMemo)(() => {
-        const b = balanceData?.balances?.[0];
-        if (!b?.amount)
-            return { raw: BigInt(0), formatted: "0", decimals: 18 };
-        return {
-            raw: BigInt(b.amount),
-            formatted: (0, number_1.formatTokenAmount)(BigInt(b.amount), b.decimals),
-            decimals: b.decimals,
-        };
-    }, [balanceData]);
-    // Determine the amount to pay in source token
-    const srcAmount = (0, react_5.useMemo)(() => {
-        if (isSameToken)
-            return totalAmount;
-        return anyspendQuote?.data?.currencyIn?.amount || "0";
-    }, [isSameToken, totalAmount, anyspendQuote]);
-    const srcAmountFormatted = (0, react_5.useMemo)(() => {
-        if (!selectedSrcToken)
-            return "0";
-        const decimals = selectedSrcToken.decimals || 18;
-        return (0, number_1.formatTokenAmount)(BigInt(srcAmount || "0"), decimals);
-    }, [srcAmount, selectedSrcToken]);
-    // Check if user has enough balance
-    const hasEnoughBalance = balance.raw >= BigInt(srcAmount || "0");
-    // Order tracking state
-    const [orderId, setOrderId] = (0, react_5.useState)();
-    const [isSendingDeposit, setIsSendingDeposit] = (0, react_5.useState)(false);
-    const depositSentRef = (0, react_5.useRef)(false);
-    // Wallet transaction execution
-    const { switchChainAndExecute } = (0, react_1.useUnifiedChainSwitchAndExecute)();
-    // Create order
-    const { createOrder, isCreatingOrder } = (0, useAnyspendCreateOrder_1.useAnyspendCreateOrder)({
-        onSuccess: (data) => {
-            const id = data?.data?.id;
-            if (id) {
-                setOrderId(id);
-            }
-        },
-        onError: (error) => {
-            setIsSendingDeposit(false);
-            onError?.(error);
-        },
-    });
-    // Poll order status until executed
-    const { orderAndTransactions: oat } = (0, useAnyspendOrderAndTransactions_1.useAnyspendOrderAndTransactions)(orderId);
-    // Send deposit transaction once order is created and ready
-    (0, react_5.useEffect)(() => {
-        if (!oat?.data?.order || depositSentRef.current)
-            return;
-        const order = oat.data.order;
-        if (order.status !== "scanning_deposit_transaction")
-            return;
-        if (oat.data.depositTxs?.length)
-            return; // Already deposited
-        depositSentRef.current = true;
-        const sendDeposit = async () => {
-            try {
-                setIsSendingDeposit(true);
-                const amount = BigInt(order.srcAmount);
-                if ((0, token_1.isNativeToken)(order.srcTokenAddress)) {
-                    await switchChainAndExecute(order.srcChain, {
-                        to: order.globalAddress,
-                        value: amount,
-                    });
-                }
-                else {
-                    const data = (0, viem_1.encodeFunctionData)({
-                        abi: viem_1.erc20Abi,
-                        functionName: "transfer",
-                        args: [order.globalAddress, amount],
-                    });
-                    await switchChainAndExecute(order.srcChain, {
-                        to: order.srcTokenAddress,
-                        data,
-                        value: BigInt(0),
-                    });
-                }
-            }
-            catch (error) {
-                depositSentRef.current = false;
-                onError?.(error instanceof Error ? error : new Error(error?.message || "Transaction rejected"));
-            }
-            finally {
-                setIsSendingDeposit(false);
-            }
-        };
-        sendDeposit();
-    }, [oat, switchChainAndExecute, onError]);
-    // Only call onSuccess when order is actually executed with a real txHash
-    (0, useOnOrderSuccess_1.useOnOrderSuccess)({
-        orderData: oat,
-        orderId,
-        onSuccess: (txHash) => {
-            onSuccess?.({ orderId, txHash });
-        },
-    });
-    const isWaitingForExecution = !!orderId && oat?.data?.order.status !== "executed";
-    const handlePay = (0, react_5.useCallback)(async () => {
-        if (!selectedSrcToken || !walletAddress)
-            return;
-        depositSentRef.current = false;
-        const dstToken = {
-            address: destinationTokenAddress,
-            chainId: destinationTokenChainId,
-            decimals: dstTokenData?.decimals || 18,
-            symbol: dstTokenData?.symbol || "",
-            name: dstTokenData?.name || "",
-            metadata: {
-                logoURI: dstTokenData?.logoURI || "",
-            },
-        };
-        createOrder({
-            recipientAddress,
-            orderType: "swap",
-            srcChain: selectedSrcChainId,
-            dstChain: destinationTokenChainId,
-            srcToken: selectedSrcToken,
-            dstToken,
-            srcAmount,
-            expectedDstAmount: totalAmount,
-            callbackMetadata,
-        });
-    }, [
-        selectedSrcToken,
-        walletAddress,
-        recipientAddress,
-        selectedSrcChainId,
-        destinationTokenChainId,
-        destinationTokenAddress,
-        dstTokenData,
-        srcAmount,
-        totalAmount,
-        callbackMetadata,
-        createOrder,
-    ]);
-    const handleSelectToken = (token) => {
-        setSelectedSrcToken(token);
-        setSelectedSrcChainId(token.chainId);
-        setShowTokenSelector(false);
-        setTokenSearchQuery("");
-    };
-    const isLoading = isLoadingAnyspendQuote || isLoadingTokens;
-    const isPending = isCreatingOrder || isSendingDeposit || isWaitingForExecution;
-    const canPay = walletAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("anyspend-crypto-panel flex flex-col gap-4", classes?.cryptoPanel), children: [(0, jsx_runtime_1.jsxs)("div", { className: "anyspend-token-selector", children: [(0, jsx_runtime_1.jsx)("label", { className: "anyspend-token-label mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Pay with" }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowTokenSelector(true), className: (0, cn_1.cn)("anyspend-token-btn flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 transition-colors hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-gray-600", classes?.tokenSelector), children: [selectedSrcToken ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[selectedSrcToken.chainId]?.logoUrl || "", tokenUrl: selectedSrcToken.metadata?.logoURI, className: "h-8 w-8" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-left", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: selectedSrcToken.symbol }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Balance: ", balance.formatted] })] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-400", children: "Select token" })), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 text-gray-400" })] })] }), (0, jsx_runtime_1.jsx)(TokenSelectorModal, { open: showTokenSelector, onClose: () => {
-                    setShowTokenSelector(false);
-                    setTokenSearchQuery("");
-                }, tokenList: tokenList, isLoadingTokens: isLoadingTokens, tokenSearchQuery: tokenSearchQuery, onSearchChange: setTokenSearchQuery, onSelectToken: handleSelectToken, selectedToken: selectedSrcToken, walletAddress: walletAddress, chainId: selectedSrcChainId, onChainChange: chainId => {
-                    setSelectedSrcChainId(chainId);
-                    setSelectedSrcToken(null);
-                    setTokenSearchQuery("");
-                } }), (0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: (0, cn_1.cn)("anyspend-quote-display rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/50", classes?.quoteDisplay), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "You pay" }), (0, jsx_runtime_1.jsx)(react_4.AnimatePresence, { mode: "wait", children: isLoadingAnyspendQuote ? ((0, jsx_runtime_1.jsx)(react_4.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: (0, jsx_runtime_1.jsx)(react_2.TextShimmer, { duration: 1, className: "text-sm", children: "Fetching quote..." }) }, "quote-loading")) : ((0, jsx_runtime_1.jsxs)(react_4.motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: [srcAmountFormatted, " ", selectedSrcToken?.symbol || ""] }, "quote-amount")) })] }) }), (0, jsx_runtime_1.jsx)(react_4.AnimatePresence, { children: walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && ((0, jsx_runtime_1.jsxs)(react_4.motion.p, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2, ease: "easeOut" }, className: "anyspend-balance-warning text-center text-sm text-red-500", children: ["Insufficient ", selectedSrcToken.symbol, " balance"] }, "balance-warning")) }), !walletAddress ? ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                    setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: b3Chain_1.thirdwebB3Chain, partnerId });
-                    setB3ModalOpen(true);
-                }, className: (0, cn_1.cn)("anyspend-crypto-pay-btn w-full rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]", classes?.payButton), style: themeColor ? { backgroundColor: themeColor } : undefined, children: "Connect Wallet to Pay" })) : ((0, jsx_runtime_1.jsx)("button", { onClick: handlePay, disabled: !canPay, className: (0, cn_1.cn)("anyspend-crypto-pay-btn w-full rounded-xl px-4 py-3.5 text-sm font-semibold text-white transition-all", canPay ? "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]" : "cursor-not-allowed bg-blue-600 opacity-50", classes?.payButton), style: !canPay ? undefined : themeColor ? { backgroundColor: themeColor } : undefined, children: isPending ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }), isCreatingOrder
-                            ? "Creating order..."
-                            : isSendingDeposit
-                                ? "Confirm in wallet..."
-                                : "Confirming transaction..."] })) : (buttonText) }))] }));
-}
-const SOURCE_CHAINS = Object.values(chain_1.EVM_MAINNET).map(c => ({ id: c.id, name: c.name, logoUrl: c.logoUrl }));
-function TokenSelectorModal({ open, onClose, tokenList, isLoadingTokens, tokenSearchQuery, onSearchChange, onSelectToken, selectedToken, walletAddress, chainId, onChainChange, }) {
-    const isMobile = (0, react_3.useIsMobile)();
-    const searchInputRef = (0, react_5.useRef)(null);
-    // Fetch all balances for the wallet on this chain
-    const { data: balanceData } = (0, react_1.useSimBalance)(walletAddress, [chainId]);
-    // Build a lookup map: lowercase token address -> balance info
-    const balanceMap = (0, react_5.useMemo)(() => {
-        const map = new Map();
-        if (!balanceData?.balances)
-            return map;
-        for (const b of balanceData.balances) {
-            if (b.amount && BigInt(b.amount) > BigInt(0)) {
-                map.set(b.address.toLowerCase(), {
-                    raw: BigInt(b.amount),
-                    formatted: (0, number_1.formatTokenAmount)(BigInt(b.amount), b.decimals),
-                    decimals: b.decimals,
-                });
-            }
-        }
-        return map;
-    }, [balanceData]);
-    // Sort tokens: tokens with balance first (sorted by balance desc), then the rest
-    const sortedTokenList = (0, react_5.useMemo)(() => {
-        if (!tokenList)
-            return undefined;
-        const withBalance = [];
-        const withoutBalance = [];
-        for (const token of tokenList) {
-            const bal = balanceMap.get(token.address.toLowerCase());
-            if (bal) {
-                withBalance.push(token);
-            }
-            else {
-                withoutBalance.push(token);
-            }
-        }
-        withBalance.sort((a, b) => {
-            const balA = balanceMap.get(a.address.toLowerCase())?.raw || BigInt(0);
-            const balB = balanceMap.get(b.address.toLowerCase())?.raw || BigInt(0);
-            if (balB > balA)
-                return 1;
-            if (balB < balA)
-                return -1;
-            return 0;
-        });
-        return [...withBalance, ...withoutBalance];
-    }, [tokenList, balanceMap]);
-    // Keep showing the previous list while new chain tokens are loading
-    const prevListRef = (0, react_5.useRef)(undefined);
-    if (sortedTokenList && sortedTokenList.length > 0) {
-        prevListRef.current = sortedTokenList;
-    }
-    const displayList = sortedTokenList && sortedTokenList.length > 0
-        ? sortedTokenList
-        : isLoadingTokens
-            ? prevListRef.current
-            : sortedTokenList;
-    // Focus search input when modal opens
-    (0, react_5.useEffect)(() => {
-        if (open) {
-            const timer = setTimeout(() => searchInputRef.current?.focus(), 100);
-            return () => clearTimeout(timer);
-        }
-    }, [open]);
-    const ModalComponent = isMobile ? drawer_1.Drawer : dialog_1.Dialog;
-    const ModalContent = isMobile ? drawer_1.DrawerContent : dialog_1.DialogContent;
-    const ModalTitle = isMobile ? drawer_1.DrawerTitle : dialog_1.DialogTitle;
-    const ModalDescription = isMobile ? drawer_1.DrawerDescription : dialog_1.DialogDescription;
-    return ((0, jsx_runtime_1.jsxs)(ModalComponent, { open: open, onOpenChange: (v) => {
-            if (!v)
-                onClose();
-        }, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
-                    __html: `.anyspend-token-modal .b3-modal-ga-branding { display: none; } .anyspend-token-modal .modal-inner-content { margin-bottom: 0; }`,
-                } }), (0, jsx_runtime_1.jsxs)(ModalContent, { className: "anyspend-token-modal flex max-h-[80dvh] flex-col overflow-hidden rounded-2xl bg-white p-0 shadow-xl sm:max-h-[70dvh] dark:bg-gray-900", children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only", children: "Select token" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only", children: "Choose a token to pay with" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-h-0 flex-1 flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between px-5 py-4", children: (0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: "Select token" }) }), (0, jsx_runtime_1.jsx)("div", { className: "anyspend-chain-selector flex items-center gap-2 px-5 pb-3", children: SOURCE_CHAINS.map(chain => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onChainChange(chain.id), title: chain.name, className: "relative shrink-0 rounded-full transition-opacity", style: { opacity: chain.id === chainId ? 1 : 0.4 }, children: [(0, jsx_runtime_1.jsx)("img", { src: chain.logoUrl, alt: chain.name, className: "h-7 w-7 rounded-full" }), chain.id === chainId && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-full", style: { boxShadow: "0 0 0 2px #3b82f6" } }))] }, chain.id))) }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-token-search flex items-center gap-2 border-b border-gray-100 px-5 py-2.5 dark:border-gray-800", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "h-4 w-4 shrink-0 text-gray-400" }), (0, jsx_runtime_1.jsx)("input", { ref: searchInputRef, type: "text", value: tokenSearchQuery, onChange: e => onSearchChange(e.target.value), placeholder: "Search tokens...", className: "anyspend-token-search-input w-full bg-transparent text-sm outline-none placeholder:text-gray-400 dark:text-gray-100" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "anyspend-token-list relative flex-1 overflow-y-auto", style: { minHeight: 300 }, children: [displayList?.map((token) => {
-                                        const isSelected = selectedToken &&
-                                            selectedToken.address.toLowerCase() === token.address.toLowerCase() &&
-                                            selectedToken.chainId === token.chainId;
-                                        const tokenBalance = balanceMap.get(token.address.toLowerCase());
-                                        return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onSelectToken(token), className: (0, cn_1.cn)("anyspend-token-option flex w-full items-center gap-3 px-5 py-3 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-800", isSelected && "bg-blue-50 dark:bg-blue-900/20"), children: [(0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[token.chainId]?.logoUrl || "", tokenUrl: token.metadata?.logoURI, className: "h-8 w-8" }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: token.symbol }), (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-gray-500 dark:text-gray-400", children: token.name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [tokenBalance && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-300", children: tokenBalance.formatted })), isSelected && (0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-blue-600" })] })] }, `${token.chainId}-${token.address}`));
-                                    }), !isLoadingTokens && displayList && displayList.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "px-5 py-8 text-center text-sm text-gray-400", children: "No tokens found" }))] })] })] })] }));
-}

package/dist/cjs/anyspend/react/components/checkout/QRCheckoutPanel.d.ts

@@ -1,17 +0,0 @@
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-interface QRCheckoutPanelProps {
-    recipientAddress: string;
-    destinationTokenAddress: string;
-    destinationTokenChainId: number;
-    totalAmount: string;
-    themeColor?: string;
-    onSuccess?: (result: {
-        txHash?: string;
-        orderId?: string;
-    }) => void;
-    onError?: (error: Error) => void;
-    callbackMetadata?: Record<string, unknown>;
-    classes?: AnySpendCheckoutClasses;
-}
-export declare function QRCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onError, callbackMetadata, classes, }: QRCheckoutPanelProps): import("react/jsx-runtime").JSX.Element;
-export {};