@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.10

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>

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

@@ -24,6 +24,7 @@ import {
   useB3Config,
   useModalStore,
   useProfile,
+  useToastContext,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { useRouter, useSearchParams } from "@b3dotfun/sdk/shared/react/hooks";
@@ -40,7 +41,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import TimeAgo from "react-timeago";
 
 import { encodeFunctionData, erc20Abi } from "viem";
-import { b3 } from "viem/chains";
+import { b3Viem } from "@b3dotfun/sdk/shared/constants/chains/b3Viem";
 import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
 import { usePhantomTransfer } from "../../hooks/usePhantomTransfer";
 import type { OrderDetailsClasses } from "../types/classes";
@@ -231,6 +232,13 @@ export const OrderDetails = memo(function OrderDetails({
   const router = useRouter();
   const searchParams = useSearchParams();
 
+  const { setHeaderMode } = useToastContext();
+
+  useEffect(() => {
+    setHeaderMode(true);
+    return () => setHeaderMode(false);
+  }, [setHeaderMode]);
+
   // Get theme from B3Provider context
   const { theme } = useB3Config();
   const colorMode = theme || "light";
@@ -1011,7 +1019,7 @@ export const OrderDetails = memo(function OrderDetails({
                     <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>

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

@@ -11,7 +11,7 @@ import { ChevronDown, Copy } from "lucide-react";
 import { motion } from "motion/react";
 import { memo, useState } from "react";
 
-import { b3 } from "viem/chains";
+import { b3Viem } from "@b3dotfun/sdk/shared/constants/chains/b3Viem";
 import type { OrderDetailsCollapsibleClasses } from "../types/classes";
 
 type Order = components["schemas"]["Order"];
@@ -154,15 +154,15 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
 
                 <div className="order-details-chain-info text-as-primary/50 flex items-center gap-2">
                   <span className="order-details-chain-text">
-                    on {order.dstChain !== b3.id && getChainName(order.dstChain)}
+                    on {order.dstChain !== b3Viem.id && getChainName(order.dstChain)}
                   </span>
                   <img
                     src={ALL_CHAINS[order.dstChain].logoUrl}
                     alt={getChainName(order.dstChain)}
                     className={cn(
                       "order-details-chain-logo h-3",
-                      order.dstChain !== b3.id && "w-3 rounded-full",
-                      order.dstChain === b3.id && "h-4",
+                      order.dstChain !== b3Viem.id && "w-3 rounded-full",
+                      order.dstChain === b3Viem.id && "h-4",
                     )}
                   />
                 </div>

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

@@ -1,7 +1,9 @@
 import { getStatusDisplay } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { useSearchParams } from "@b3dotfun/sdk/shared/react";
-import { Clock, Loader2, RotateCcw, X } from "lucide-react";
+import { AlertCircle, AlertTriangle, CheckCircle, Clock, Info, Loader2, RotateCcw, X } from "lucide-react";
+import { useToastContext } from "@b3dotfun/sdk/global-account/react";
+import type { ToastType } from "@b3dotfun/sdk/global-account/react";
 import React, { memo, useEffect, useRef } from "react";
 import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext";
 import { AnimatedCheckmark } from "../icons/AnimatedCheckmark";
@@ -15,6 +17,20 @@ function getStepIndex(status: string): number {
   return -1;
 }
 
+function getToastIcon(type: ToastType): React.ReactNode {
+  const iconClass = "h-5 w-5";
+  switch (type) {
+    case "success":
+      return <CheckCircle className={`${iconClass} text-green-500`} />;
+    case "error":
+      return <AlertCircle className={`${iconClass} text-red-500`} />;
+    case "info":
+      return <Info className={`${iconClass} text-blue-500`} />;
+    case "warning":
+      return <AlertTriangle className={`${iconClass} text-amber-500`} />;
+  }
+}
+
 export const OrderStatus = memo(function OrderStatus({
   order,
   selectedCryptoPaymentMethod,
@@ -56,9 +72,28 @@ export const OrderStatus = memo(function OrderStatus({
     if (content.processingDescription) description = content.processingDescription;
   }
 
+  const { latestToast } = useToastContext();
+
+  // Override subtitle with toast notification when present (title stays unchanged)
+  let notificationIcon: React.ReactNode = undefined;
+  if (latestToast && currentStepIndex >= 0) {
+    description = latestToast.message;
+    notificationIcon = getToastIcon(latestToast.type);
+  }
+
   const paymentSteps: Step[] = [
-    { id: 1, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
-    { id: 2, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
+    {
+      id: 1,
+      title: text,
+      description: typeof description === "string" ? description : defaultDescription || "",
+      icon: notificationIcon,
+    },
+    {
+      id: 2,
+      title: text,
+      description: typeof description === "string" ? description : defaultDescription || "",
+      icon: notificationIcon,
+    },
   ];
 
   if (currentStepIndex === 0) {

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

@@ -1,12 +1,15 @@
 "use client";
 
+import React from "react";
 import { motion } from "framer-motion";
+import { TextMorph } from "torph/react";
 import { AnimatedCheckmark } from "../icons/AnimatedCheckmark";
 
 export interface Step {
   id: string | number;
   title: string;
   description?: string;
+  icon?: React.ReactNode;
 }
 
 export interface StepProgressProps {
@@ -32,8 +35,8 @@ export function StepProgress({
       {/* Step Progress Indicator */}
       <div className="flex items-center gap-2">
         {steps.map((_, index) => (
-          <>
-            <div key={index} className="flex items-center">
+          <React.Fragment key={index}>
+            <div className="flex items-center">
               {index < currentStepIndex ? (
                 // Completed step - checkmark replaces the whole circle
                 <motion.div
@@ -71,7 +74,7 @@ export function StepProgress({
                 ))}
               </div>
             )}
-          </>
+          </React.Fragment>
         ))}
       </div>
 
@@ -83,8 +86,15 @@ export function StepProgress({
           transition={{ delay: 0.3 }}
           className="text-center"
         >
-          <h2 className="text-as-primary text-xl font-semibold">{currentStep.title}</h2>
-          {currentStep.description && <p className="text-as-tertiary mt-1 text-sm">{currentStep.description}</p>}
+          <h2 className="text-as-primary text-xl font-semibold">
+            <TextMorph>{currentStep.title}</TextMorph>
+          </h2>
+          {currentStep.description && (
+            <p className="text-as-tertiary mt-1 flex items-center justify-center gap-1.5 text-sm">
+              {currentStep.icon}
+              <TextMorph>{currentStep.description}</TextMorph>
+            </p>
+          )}
         </motion.div>
       )}
     </div>

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

@@ -10,7 +10,7 @@ import { ChevronLeft, Copy } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import { memo, useEffect, useMemo, useState } from "react";
 
-import { b3 } from "viem/chains";
+import { b3Viem } from "@b3dotfun/sdk/shared/constants/chains/b3Viem";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
 import { PaymentMethodSwitch } from "./PaymentMethodSwitch";
@@ -193,7 +193,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
                   alt={getChainName(order.srcChain)}
                   className={cn(
                     "order-transfer-crypto-chain-logo h-6 rounded-full",
-                    order.srcChain === b3.id && "h-5 rounded-none",
+                    order.srcChain === b3Viem.id && "h-5 rounded-none",
                   )}
                 />
                 <span className="order-transfer-crypto-chain-name text-as-primary text-sm font-semibold">

package/src/anyspend/react/hooks/useAnyspendCreateOnrampOrder.ts

@@ -11,9 +11,8 @@ import { useMemo } from "react";
 
 import { parseUnits } from "viem";
 import { base } from "viem/chains";
-import { useAccount } from "wagmi";
 import { CreateOrderParams } from "./useAnyspendCreateOrder";
-import { getCachedWalletHeaders } from "./useKycStatus";
+import { getCachedWalletHeaders, useWalletAuthHeaders } from "./useKycStatus";
 import { useValidatedClientReferenceId } from "./useValidatedClientReferenceId";
 
 export type OnrampOptions = {
@@ -42,7 +41,7 @@ export type UseAnyspendCreateOnrampOrderProps = {
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspendCreateOnrampOrderProps = {}) {
   // Get B3 context values
   const { partnerId } = useB3Config();
-  const { address } = useAccount();
+  const { address, getHeaders: getWalletAuthHeaders } = useWalletAuthHeaders();
 
   // Get validated client reference ID from B3 context
   const createValidatedClientReferenceId = useValidatedClientReferenceId();
@@ -86,12 +85,11 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
 
         // For card payments, include wallet auth headers so the backend can verify
         // KYC by the signing wallet address (may differ from the B3 JWT address).
-        // Only use already-cached headers — never trigger a fresh wallet signature
-        // here, as that would prompt the user without their explicit consent.
-        // KycGate pre-caches the headers in the "Continue to Verify" user-gesture.
+        // First try cached headers (from KycGate), then sign on-the-fly.
+        // The user is already clicking "Continue"/"Pay" so signing here is acceptable.
         let kycWalletHeaders: Record<string, string> | undefined;
         if (onramp.vendor === "stripe-web2" && address) {
-          kycWalletHeaders = getCachedWalletHeaders(address);
+          kycWalletHeaders = getCachedWalletHeaders(address) || (await getWalletAuthHeaders());
         }
 
         return await anyspendService.createOrder({

package/src/anyspend/react/hooks/useAnyspendQuote.ts

@@ -26,20 +26,20 @@ export function useAnyspendQuote(req: GetQuoteRequest): UseAnyspendQuoteResult {
     },
     enabled: Boolean(
       req.srcChain &&
-        req.dstChain &&
-        req.srcTokenAddress &&
-        req.dstTokenAddress &&
-        BigInt(
-          req.type === "swap" || req.type === "hype_duel" || req.type === "x402_swap" || req.type === "custom_exact_in"
-            ? req.amount
-            : req.type === "mint_nft"
+      req.dstChain &&
+      req.srcTokenAddress &&
+      req.dstTokenAddress &&
+      BigInt(
+        req.type === "swap" || req.type === "hype_duel" || req.type === "x402_swap" || req.type === "custom_exact_in"
+          ? req.amount
+          : req.type === "mint_nft"
+            ? req.price
+            : req.type === "join_tournament"
               ? req.price
-              : req.type === "join_tournament"
-                ? req.price
-                : req.type === "fund_tournament"
-                  ? req.fundAmount
-                  : req.payload.amount,
-        ) !== BigInt(0),
+              : req.type === "fund_tournament"
+                ? req.fundAmount
+                : req.payload.amount,
+      ) !== BigInt(0),
     ),
     refetchInterval: 10000,
     retry: false,

package/src/anyspend/react/hooks/useCreateDepositFirstOrder.ts

@@ -1,13 +1,13 @@
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
-import { CreateOrderResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
-import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
+import type { components } from "@b3dotfun/sdk/anyspend/types/api";
+import type { CreateOrderResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
+import type { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { useB3Config } from "@b3dotfun/sdk/global-account/react";
 import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { DepositContractConfig } from "../components/AnySpendDeposit";
+import type { DepositContractConfig } from "../components/AnySpendDeposit";
 
 export type CreateDepositFirstOrderParams = {
   recipientAddress: string;

package/src/anyspend/react/hooks/useKycStatus.ts

@@ -1,9 +1,9 @@
 "use client";
 
 import { ANYSPEND_MAINNET_BASE_URL } from "@b3dotfun/sdk/anyspend/constants";
+import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
-import { useAccount, useSignMessage } from "wagmi";
 
 export interface KycStatusResponse {
   kycRequired: boolean;
@@ -46,14 +46,17 @@ export function getCachedWalletHeaders(address: string): Record<string, string>
 
 /**
  * Returns a function that builds the wallet-signature auth headers.
+ * Uses useAccountWallet (thirdweb) instead of wagmi so signing works
+ * for all wallet types (social login, EOA, smart wallet, etc.).
  * Caches signatures for 4 minutes (server allows 5-minute window).
  */
 export function useWalletAuthHeaders() {
-  const { address } = useAccount();
-  const { signMessageAsync } = useSignMessage();
+  const { address, wallet } = useAccountWallet();
+  const signMessage = wallet.signMessage;
 
   const getHeaders = useCallback(async (): Promise<Record<string, string>> => {
     if (!address) throw new Error("No wallet connected");
+    if (!signMessage) throw new Error("Wallet does not support message signing");
     const walletAddress = address.toLowerCase();
 
     const cached = headerCache.get(walletAddress);
@@ -61,7 +64,7 @@ export function useWalletAuthHeaders() {
 
     const timestamp = Math.floor(Date.now() / 1000);
     const message = buildWalletAuthMessage(walletAddress, timestamp);
-    const signature = await signMessageAsync({ message });
+    const signature = await signMessage({ message });
 
     const headers = {
       "X-Wallet-Address": walletAddress,
@@ -71,7 +74,7 @@ export function useWalletAuthHeaders() {
     // Cache for 4 minutes so repeated fetches don't re-prompt the user
     headerCache.set(walletAddress, { headers, expiresAt: Date.now() + 4 * 60 * 1000 });
     return headers;
-  }, [address, signMessageAsync]);
+  }, [address, signMessage]);
 
   return { address, getHeaders };
 }

package/src/anyspend/types/api_req_res.ts

@@ -1,12 +1,17 @@
 import { paths } from "./api";
 
-export type GetOrderAndTxsResponse = paths["/orders/{orderId}"]["get"]["responses"]["200"]["content"]["application/json"];
+export type GetOrderAndTxsResponse =
+  paths["/orders/{orderId}"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetQuoteRequest = paths["/orders/quote"]["post"]["requestBody"]["content"]["application/json"];
 export type GetQuoteResponse = paths["/orders/quote"]["post"]["responses"]["200"]["content"]["application/json"];
 
-export type GetCoinbaseOnrampOptionsResponse = paths["/onramp/coinbase/options"]["get"]["responses"]["200"]["content"]["application/json"];
+export type GetCoinbaseOnrampOptionsResponse =
+  paths["/onramp/coinbase/options"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetOrderHistoryResponse = paths["/orders"]["get"]["responses"]["200"]["content"]["application/json"];
-export type GetTokenListResponse = paths["/chains/{chainId}/tokens"]["get"]["responses"]["200"]["content"]["application/json"];
+export type GetTokenListResponse =
+  paths["/chains/{chainId}/tokens"]["get"]["responses"]["200"]["content"]["application/json"];
 export type CreateOrderResponse = paths["/orders"]["post"]["responses"]["200"]["content"]["application/json"];
-export type GetStripeSupportedResponse = paths["/onramp/stripe/supported"]["get"]["responses"]["200"]["content"]["application/json"];
-export type GetStripeClientSecret = paths["/stripe/clientSecret"]["get"]["responses"]["200"]["content"]["application/json"];
+export type GetStripeSupportedResponse =
+  paths["/onramp/stripe/supported"]["get"]["responses"]["200"]["content"]["application/json"];
+export type GetStripeClientSecret =
+  paths["/stripe/clientSecret"]["get"]["responses"]["200"]["content"]["application/json"];