@b3dotfun/sdk 0.1.69-alpha.2 → 0.1.69-alpha.21

package/src/anyspend/react/components/checkout/CartSummary.tsx

@@ -2,13 +2,12 @@
 
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
-import { useMemo } from "react";
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-import type { CheckoutSummaryLine } from "./AnySpendCheckout";
+import { useMemo, type ReactNode } from "react";
+import type { AnySpendCheckoutClasses, CheckoutSummaryLine } from "./AnySpendCheckout";
 
 interface CartSummaryProps {
   /** Formatted total (final amount after all adjustments) */
-  total: string;
+  total: ReactNode;
   tokenSymbol?: string;
   classes?: AnySpendCheckoutClasses;
   /** Formatted subtotal (sum of items only — shown when adjustments exist) */
@@ -20,6 +19,8 @@ interface CartSummaryProps {
   summaryLines?: CheckoutSummaryLine[];
   /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
   usdEquivalent?: string | null;
+  /** When true, hide adjustment rows and USD equivalent (caller passes a skeleton as `total`). */
+  pricesLoading?: boolean;
 }
 
 export function CartSummary({
@@ -33,35 +34,38 @@ export function CartSummary({
   discount,
   summaryLines,
   usdEquivalent,
+  pricesLoading = false,
 }: CartSummaryProps) {
-  const hasAdjustments =
-    !!shipping?.amount || !!tax?.amount || !!discount?.amount || (summaryLines && summaryLines.length > 0);
-
   const formattedShipping = useMemo(
-    () => (shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null),
-    [shipping?.amount, tokenDecimals],
+    () => (!pricesLoading && shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null),
+    [pricesLoading, shipping?.amount, tokenDecimals],
   );
 
   const formattedTax = useMemo(
-    () => (tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null),
-    [tax?.amount, tokenDecimals],
+    () => (!pricesLoading && tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null),
+    [pricesLoading, tax?.amount, tokenDecimals],
   );
 
   const formattedDiscount = useMemo(
-    () => (discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null),
-    [discount?.amount, tokenDecimals],
+    () => (!pricesLoading && discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null),
+    [pricesLoading, discount?.amount, tokenDecimals],
   );
 
   const formattedSummaryLines = useMemo(
     () =>
-      summaryLines?.map(line => ({
-        ...line,
-        formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
-        isNegative: safeBigInt(line.amount) < BigInt(0),
-      })),
-    [summaryLines, tokenDecimals],
+      pricesLoading
+        ? undefined
+        : summaryLines?.map(line => ({
+            ...line,
+            formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
+            isNegative: safeBigInt(line.amount) < BigInt(0),
+          })),
+    [pricesLoading, summaryLines, tokenDecimals],
   );
 
+  const hasAdjustments =
+    !!formattedShipping || !!formattedTax || !!formattedDiscount || !!formattedSummaryLines?.length;
+
   return (
     <div className={cn("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary)}>
       {/* Subtotal — only shown when adjustments exist */}
@@ -147,7 +151,7 @@ export function CartSummary({
             {total} {tokenSymbol}
           </span>
         </div>
-        {usdEquivalent && (
+        {!pricesLoading && usdEquivalent && (
           <div className="flex justify-end">
             <span className="text-xs text-gray-400 dark:text-gray-500">~{usdEquivalent} USD</span>
           </div>

package/src/anyspend/react/components/checkout/CheckoutCartPanel.tsx

@@ -7,12 +7,15 @@ import type { CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses } from
 import { CartItemRow } from "./CartItemRow";
 import { CartSummary } from "./CartSummary";
 import { PoweredByBranding } from "./PoweredByBranding";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface CheckoutCartPanelProps {
   items: CheckoutItem[];
   totalAmount: string;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+  pricesLoading?: boolean;
   organizationName?: string;
   organizationLogo?: string;
   classes?: AnySpendCheckoutClasses;
@@ -31,6 +34,7 @@ export function CheckoutCartPanel({
   totalAmount,
   tokenSymbol = "",
   tokenDecimals = 18,
+  pricesLoading = false,
   organizationName,
   organizationLogo,
   classes,
@@ -56,7 +60,7 @@ export function CheckoutCartPanel({
   }, [items, tokenDecimals]);
 
   return (
-    <div className={cn("anyspend-cart-panel flex flex-col", classes?.cartPanel)}>
+    <div className={cn("anyspend-cart-panel flex flex-col", classes?.cartPanel)} aria-busy={pricesLoading || undefined}>
       <h2
         className={cn(
           "anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100",
@@ -69,14 +73,18 @@ export function CheckoutCartPanel({
       <div className="anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800">
         {items.map((item, index) => {
           const itemTotal = safeBigInt(item.amount) * BigInt(item.quantity);
-          const formattedPrice = `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+          const formattedPrice: ReactNode = pricesLoading ? (
+            <PriceSkeleton />
+          ) : (
+            `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`
+          );
 
           return <CartItemRow key={item.id || index} item={item} formattedPrice={formattedPrice} classes={classes} />;
         })}
       </div>
 
       <CartSummary
-        total={formattedTotal}
+        total={pricesLoading ? <PriceSkeleton className="w-20" /> : formattedTotal}
         tokenSymbol={tokenSymbol}
         classes={classes}
         subtotal={formattedSubtotal}
@@ -86,6 +94,7 @@ export function CheckoutCartPanel({
         discount={discount}
         summaryLines={summaryLines}
         usdEquivalent={usdEquivalent}
+        pricesLoading={pricesLoading}
       />
 
       {footer === undefined ? (

package/src/anyspend/react/components/checkout/CheckoutFormPanel.tsx

@@ -31,6 +31,8 @@ interface CheckoutFormPanelProps {
   /** Token info for display */
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+  pricesLoading?: boolean;
   /** CSS class overrides */
   classes?: AnySpendCheckoutClasses;
   /** Current form data (lifted state) */
@@ -62,6 +64,7 @@ export function CheckoutFormPanel({
   validateDiscount,
   tokenSymbol,
   tokenDecimals,
+  pricesLoading = false,
   classes,
   formData,
   onFormDataChange,
@@ -144,6 +147,7 @@ export function CheckoutFormPanel({
           onSelect={onShippingChange}
           tokenSymbol={tokenSymbol}
           tokenDecimals={tokenDecimals}
+          pricesLoading={pricesLoading}
         />
       )}
       {enableDiscountCode && validateDiscount && (
@@ -153,6 +157,7 @@ export function CheckoutFormPanel({
           onRemove={onDiscountRemoved}
           tokenSymbol={tokenSymbol}
           tokenDecimals={tokenDecimals}
+          pricesLoading={pricesLoading}
         />
       )}
     </>

package/src/anyspend/react/components/checkout/CheckoutPaymentPanel.tsx

@@ -186,14 +186,12 @@ export function CheckoutPaymentPanel({
   const accordionButtonClass = (active: boolean) =>
     cn(
       "anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors",
-      active
-        ? "bg-white dark:bg-neutral-900"
-        : "bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800",
+      !active && "hover:bg-gray-50 dark:hover:bg-neutral-800",
       classes?.paymentMethodButton,
     );
 
   const expandedPanelClass = cn(
-    "anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900",
+    "anyspend-payment-method-panel border-t border-gray-100 px-4 py-4 dark:border-neutral-800",
   );
 
   return (

package/src/anyspend/react/components/checkout/CheckoutSuccess.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { getExplorerTxUrl } from "@b3dotfun/sdk/anyspend";
+import { b3Viem } from "@b3dotfun/sdk/shared/constants/chains/b3Viem";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { ExternalLink } from "lucide-react";
 import { motion } from "motion/react";
@@ -9,13 +11,21 @@ import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
 
 interface CheckoutSuccessProps {
   txHash?: string;
+  dstChainId?: number;
   orderId?: string;
   returnUrl?: string;
   returnLabel?: string;
   classes?: AnySpendCheckoutClasses;
 }
 
-export function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, classes }: CheckoutSuccessProps) {
+export function CheckoutSuccess({
+  txHash,
+  dstChainId,
+  orderId,
+  returnUrl,
+  returnLabel,
+  classes,
+}: CheckoutSuccessProps) {
   const { content, slots } = useAnySpendCustomization();
 
   if (slots.successScreen) {
@@ -29,7 +39,7 @@ export function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, class
               : "Your payment has been processed successfully.",
           txHash,
           orderId,
-          explorerUrl: txHash ? `https://explorer.b3.fun/tx/${txHash}` : undefined,
+          explorerUrl: txHash ? getExplorerTxUrl(dstChainId ?? b3Viem.id, txHash) : undefined,
           onDone: () => {
             if (returnUrl) window.location.href = returnUrl;
           },
@@ -69,7 +79,7 @@ export function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, class
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.3, delay: 0.5, ease: "easeOut" }}
-          href={`https://explorer.b3.fun/tx/${txHash}`}
+          href={getExplorerTxUrl(dstChainId ?? b3Viem.id, txHash)}
           target="_blank"
           rel="noopener noreferrer"
           className="anyspend-success-tx-link mt-4 flex items-center gap-1.5 text-sm text-blue-600 hover:underline dark:text-blue-400"

package/src/anyspend/react/components/checkout/CryptoPayPanel.tsx

@@ -11,15 +11,12 @@ import { getPaymentUrl } from "@b3dotfun/sdk/anyspend/utils/chain";
 import { isNativeToken } from "@b3dotfun/sdk/anyspend/utils/token";
 import {
   useAccountWallet,
-  useB3Config,
   useIsMobile,
-  useModalStore,
   useSimTokenBalance,
   useTokenData,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { ShinyButton, TextShimmer } from "@b3dotfun/sdk/global-account/react";
-import { thirdwebB3Chain } from "@b3dotfun/sdk/shared/constants/chains/b3Chain";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { Check, ChevronDown, ChevronsUpDown, Copy, Loader2, QrCode } from "lucide-react";
@@ -27,8 +24,10 @@ import { QRCodeSVG } from "qrcode.react";
 import { encodeFunctionData, erc20Abi } from "viem";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useConnectModal } from "thirdweb/react";
 import { TokenSelector } from "@relayprotocol/relay-kit-ui";
 import { ChainTokenIcon } from "../common/ChainTokenIcon";
+import { connectModalConfig } from "../common/CryptoPaymentMethod";
 import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
 
 interface CryptoPayPanelProps {
@@ -76,11 +75,10 @@ export function CryptoPayPanel({
   const [selectedSrcToken, setSelectedSrcToken] = useState<components["schemas"]["Token"] | null>(null);
   const [copied, setCopied] = useState(false);
 
-  const { address: walletAddress } = useAccountWallet();
-  const effectiveAddress = senderAddress || walletAddress;
-  const { partnerId } = useB3Config();
-  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
-  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const { address: walletAddress, connectedEOAWallet } = useAccountWallet();
+  const connectedAddress = walletAddress || connectedEOAWallet?.getAccount()?.address;
+  const effectiveAddress = connectedAddress || senderAddress;
+  const { connect: openConnectModal } = useConnectModal();
 
   const { data: dstTokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
 
@@ -235,9 +233,8 @@ export function CryptoPayPanel({
   /* ------------------------------------------------------------------ */
   const [walletOrderId, setWalletOrderId] = useState<string | undefined>();
   const [isSendingDeposit, setIsSendingDeposit] = useState(false);
-  const [depositRejected, setDepositRejected] = useState(false);
   const depositSentRef = useRef(false);
-  const { switchChainAndExecute } = useUnifiedChainSwitchAndExecute();
+  const { switchChainAndExecuteWithEOA } = useUnifiedChainSwitchAndExecute();
 
   const { createOrder: createSwapOrder, isCreatingOrder: isCreatingSwapOrder } = useAnyspendCreateOrder({
     onSuccess: data => {
@@ -254,7 +251,7 @@ export function CryptoPayPanel({
 
   // Auto-send deposit tx once swap order is ready
   useEffect(() => {
-    if (!walletOat?.data?.order || depositSentRef.current || depositRejected) return;
+    if (!walletOat?.data?.order || depositSentRef.current) return;
     const order = walletOat.data.order;
     if (order.status !== "scanning_deposit_transaction") return;
     if (walletOat.data.depositTxs?.length) return;
@@ -264,8 +261,9 @@ export function CryptoPayPanel({
       try {
         setIsSendingDeposit(true);
         const amount = BigInt(order.srcAmount);
+        let txHash: string | undefined;
         if (isNativeToken(order.srcTokenAddress)) {
-          await switchChainAndExecute(order.srcChain, {
+          txHash = await switchChainAndExecuteWithEOA(order.srcChain, {
             to: order.globalAddress as `0x${string}`,
             value: amount,
           });
@@ -275,30 +273,33 @@ export function CryptoPayPanel({
             functionName: "transfer",
             args: [order.globalAddress as `0x${string}`, amount],
           });
-          await switchChainAndExecute(order.srcChain, {
+          txHash = await switchChainAndExecuteWithEOA(order.srcChain, {
             to: order.srcTokenAddress as `0x${string}`,
             data,
             value: BigInt(0),
           });
         }
+        if (!txHash) {
+          // User cancelled or tx failed — reset so they can retry
+          depositSentRef.current = false;
+          setWalletOrderId(undefined);
+          return;
+        }
         // Deposit sent — notify parent to transition to order lifecycle tracking
         if (walletOrderId) {
           onOrderCreatedRef.current?.(walletOrderId);
         }
       } catch (error: any) {
         depositSentRef.current = false;
-        const isUserRejection =
-          error?.code === 4001 || error?.message?.includes("rejected") || error?.message?.includes("denied");
-        if (isUserRejection) {
-          setDepositRejected(true);
-        }
+        // Reset order so user can retry
+        setWalletOrderId(undefined);
         onErrorRef.current?.(error instanceof Error ? error : new Error(error?.message || "Transaction rejected"));
       } finally {
         setIsSendingDeposit(false);
       }
     };
     sendDeposit();
-  }, [walletOat, switchChainAndExecute, walletOrderId, depositRejected]);
+  }, [walletOat, switchChainAndExecuteWithEOA, walletOrderId]);
 
   useOnOrderSuccess({
     orderData: walletOat,
@@ -309,8 +310,9 @@ export function CryptoPayPanel({
   const isWaitingForExecution = !!walletOrderId && walletOat?.data?.order.status !== "executed";
 
   const handleWalletPay = useCallback(() => {
-    if (!selectedSrcToken || !walletAddress) return;
+    if (!selectedSrcToken || !connectedAddress) return;
     depositSentRef.current = false;
+    setWalletOrderId(undefined);
     createSwapOrder({
       recipientAddress,
       orderType: "swap",
@@ -325,7 +327,7 @@ export function CryptoPayPanel({
     });
   }, [
     selectedSrcToken,
-    walletAddress,
+    connectedAddress,
     effectiveAddress,
     recipientAddress,
     selectedSrcChainId,
@@ -360,14 +362,30 @@ export function CryptoPayPanel({
     }
   };
 
-  const handleConnectWallet = () => {
-    setB3ModalContentType({ type: "signInWithB3", showBackButton: false, chain: thirdwebB3Chain, partnerId });
-    setB3ModalOpen(true);
+  const [shouldAutoPay, setShouldAutoPay] = useState(false);
+
+  const handleConnectWallet = async () => {
+    try {
+      const wallet = await openConnectModal(connectModalConfig);
+      if (wallet) {
+        setShouldAutoPay(true);
+      }
+    } catch (error) {
+      console.error("Failed to connect wallet:", error);
+    }
   };
 
+  // Auto-trigger payment after wallet connect
+  useEffect(() => {
+    if (shouldAutoPay && connectedAddress && selectedSrcToken && hasEnoughBalance && !isLoadingAnyspendQuote) {
+      setShouldAutoPay(false);
+      handleWalletPay();
+    }
+  }, [shouldAutoPay, connectedAddress, selectedSrcToken, hasEnoughBalance, isLoadingAnyspendQuote, handleWalletPay]);
+
   const isLoading = isLoadingAnyspendQuote;
   const isPending = isCreatingSwapOrder || isSendingDeposit || isWaitingForExecution;
-  const canPay = walletAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
+  const canPay = connectedAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
 
   const chainName = ALL_CHAINS[selectedSrcChainId]?.name || "the specified chain";
   const chainLogoUrl = ALL_CHAINS[selectedSrcChainId]?.logoUrl;
@@ -478,7 +496,7 @@ export function CryptoPayPanel({
 
       {/* ---- Insufficient balance warning ---- */}
       <AnimatePresence>
-        {walletAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (
+        {connectedAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (
           <motion.p
             key="balance-warning"
             initial={{ opacity: 0, height: 0 }}
@@ -493,7 +511,7 @@ export function CryptoPayPanel({
       </AnimatePresence>
 
       {/* ---- Wallet Pay Button ---- */}
-      {!walletAddress ? (
+      {!connectedAddress ? (
         <ShinyButton
           accentColor={themeColor || "hsl(var(--as-brand))"}
           onClick={handleConnectWallet}

package/src/anyspend/react/components/checkout/DiscountCodeInput.tsx

@@ -5,6 +5,7 @@ import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number
 import { X, Loader2, Check } from "lucide-react";
 import { useState, useCallback } from "react";
 import type { DiscountResult } from "../../../types/forms";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface DiscountCodeInputProps {
   onApply: (code: string) => Promise<DiscountResult>;
@@ -13,6 +14,8 @@ interface DiscountCodeInputProps {
   loading?: boolean;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — renders applied amount as skeleton. */
+  pricesLoading?: boolean;
   className?: string;
 }
 
@@ -29,6 +32,7 @@ export function DiscountCodeInput({
   loading = false,
   tokenSymbol = "",
   tokenDecimals = 6,
+  pricesLoading = false,
   className,
 }: DiscountCodeInputProps) {
   const [code, setCode] = useState("");
@@ -67,11 +71,17 @@ export function DiscountCodeInput({
           <div className="flex items-center gap-2">
             <Check className="h-4 w-4 text-green-600 dark:text-green-400" />
             <span className="anyspend-discount-value text-sm font-medium text-green-700 dark:text-green-300">
-              {appliedDiscount.discount_type === "percentage"
-                ? `${appliedDiscount.discount_value}% off`
-                : appliedDiscount.discount_amount
-                  ? `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
-                  : "Discount applied"}
+              {appliedDiscount.discount_type === "percentage" ? (
+                `${appliedDiscount.discount_value}% off`
+              ) : appliedDiscount.discount_amount ? (
+                pricesLoading ? (
+                  <PriceSkeleton />
+                ) : (
+                  `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
+                )
+              ) : (
+                "Discount applied"
+              )}
             </span>
           </div>
           <button

package/src/anyspend/react/components/checkout/FiatCheckoutPanel.tsx

@@ -10,14 +10,20 @@ import { USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import { getStripePromise } from "@b3dotfun/sdk/shared/utils/payment.utils";
-import { ShinyButton, TextShimmer, useB3Config, useModalStore, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import {
+  ShinyButton,
+  TextShimmer,
+  useAccountWallet,
+  useB3Config,
+  useModalStore,
+  useTokenData,
+} from "@b3dotfun/sdk/global-account/react";
 import { thirdwebB3Chain } from "@b3dotfun/sdk/shared/constants/chains/b3Chain";
 import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import type { PaymentIntentResult, StripePaymentElementOptions } from "@stripe/stripe-js";
 import { Loader2, Lock, Wallet } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useAccount } from "wagmi";
 import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
 import { KycGate } from "./KycGate";
 
@@ -58,7 +64,7 @@ export function FiatCheckoutPanel({
   const onErrorRef = useRef(onError);
   onErrorRef.current = onError;
 
-  const { address } = useAccount();
+  const { address } = useAccountWallet();
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
 

package/src/anyspend/react/components/checkout/KycGate.tsx

@@ -1,12 +1,17 @@
 "use client";
 
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
-import { ShinyButton, TextShimmer, useB3Config, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import {
+  ShinyButton,
+  TextShimmer,
+  useAccountWallet,
+  useB3Config,
+  useModalStore,
+} from "@b3dotfun/sdk/global-account/react";
 import { thirdwebB3Chain } from "@b3dotfun/sdk/shared/constants/chains/b3Chain";
 import { Loader2, ShieldCheck, AlertTriangle, Clock, Wallet } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useAccount } from "wagmi";
 import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
 import { useCreateKycInquiry, useKycStatus, useVerifyKyc, useWalletAuthHeaders } from "../../hooks/useKycStatus";
 
@@ -20,7 +25,7 @@ interface KycGateProps {
 }
 
 export function KycGate({ themeColor, classes, enabled = false, onStatusResolved }: KycGateProps) {
-  const { address } = useAccount();
+  const { address } = useAccountWallet();
   const { partnerId } = useB3Config();
   // Gate the status fetch behind explicit user consent so the wallet
   // signature prompt doesn't fire automatically on tab open.

package/src/anyspend/react/components/checkout/PriceSkeleton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+
+interface PriceSkeletonProps {
+  className?: string;
+}
+
+export function PriceSkeleton({ className }: PriceSkeletonProps) {
+  return (
+    <span
+      className={cn(
+        "animate-pulse-fade bg-b3-react-background inline-block h-4 w-16 rounded-md align-middle",
+        className,
+      )}
+      aria-hidden="true"
+    />
+  );
+}

package/src/anyspend/react/components/checkout/ShippingSelector.tsx

@@ -3,6 +3,7 @@
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
 import type { ShippingOption } from "../../../types/forms";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface ShippingSelectorProps {
   options: ShippingOption[];
@@ -10,6 +11,8 @@ interface ShippingSelectorProps {
   onSelect: (option: ShippingOption) => void;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — renders price as skeleton. */
+  pricesLoading?: boolean;
   className?: string;
 }
 
@@ -25,6 +28,7 @@ export function ShippingSelector({
   onSelect,
   tokenSymbol = "",
   tokenDecimals = 6,
+  pricesLoading = false,
   className,
 }: ShippingSelectorProps) {
   if (options.length === 0) return null;
@@ -63,7 +67,7 @@ export function ShippingSelector({
               </div>
             </div>
             <div className="anyspend-shipping-option-price text-sm font-medium text-gray-900 dark:text-gray-100">
-              {formatAmount(option.amount, tokenDecimals, tokenSymbol)}
+              {pricesLoading ? <PriceSkeleton /> : formatAmount(option.amount, tokenDecimals, tokenSymbol)}
             </div>
           </label>
         ))}

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

@@ -17,13 +17,21 @@ export enum CryptoPaymentMethodType {
   TRANSFER_CRYPTO = "transfer_crypto",
 }
 
-const recommendWallets = [
+export const recommendWallets = [
   createWallet("io.metamask"),
   createWallet("com.coinbase.wallet"),
   createWallet("me.rainbow"),
   createWallet("io.rabby"),
 ];
 
+export const connectModalConfig = {
+  client,
+  setActive: false as const,
+  size: "compact" as const,
+  showThirdwebBranding: false,
+  wallets: recommendWallets,
+};
+
 interface CryptoPaymentMethodProps {
   selectedPaymentMethod: CryptoPaymentMethodType;
   setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;
@@ -65,13 +73,7 @@ export function CryptoPaymentMethod({
         disconnect(connectedEOAWallet);
       }
 
-      const wallet = await openConnectModal({
-        client,
-        setActive: false,
-        size: "compact",
-        showThirdwebBranding: false,
-        wallets: recommendWallets,
-      });
+      const wallet = await openConnectModal(connectModalConfig);
 
       if (wallet) {
         setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);

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

@@ -10,7 +10,7 @@ import {
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Badge, CopyToClipboard, ShinyButton, TextLoop } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
-import { b3 } from "viem/chains";
+import { b3Viem } from "@b3dotfun/sdk/shared/constants/chains/b3Viem";
 
 import { toast } from "@b3dotfun/sdk/global-account/react";
 import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
@@ -63,7 +63,7 @@ export function InsufficientDepositPayment({
             <img
               src={ALL_CHAINS[order.srcChain].logoUrl}
               alt={getChainName(order.srcChain)}
-              className={cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none")}
+              className={cn("h-6 rounded-full", order.srcChain === b3Viem.id && "h-5 rounded-none")}
             />
           </Badge>
         </div>