@b3dotfun/sdk 0.1.69-alpha.9 → 0.1.69-test.0

package/dist/types/global-account/react/utils/createWagmiConfig.d.ts

@@ -1,4 +1,4 @@
-import { type CreateConnectorFn } from "wagmi";
+import type { CreateConnectorFn } from "wagmi";
 export interface CreateWagmiConfigOptions {
     partnerId: string;
     rpcUrls?: Record<number, string>;
@@ -6,7 +6,8 @@ export interface CreateWagmiConfigOptions {
     overrideDefaultConnectors?: boolean;
 }
 /**
- * Creates a wagmi config with optional custom RPC URLs and connectors
+ * Creates a wagmi config with the B3 ecosystem wallet connector.
+ * Delegates to createWalletConfig and adds the ecosystem connector on top.
  * @param options.partnerId - Partner ID for the ecosystem wallet
  * @param options.rpcUrls - Optional mapping of chain IDs to RPC URLs
  * @param options.connectors - Additional connectors to include
@@ -14,14 +15,4 @@ export interface CreateWagmiConfigOptions {
  */
 export declare function createWagmiConfig(options: CreateWagmiConfigOptions): import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], {
     [k: string]: import("viem").HttpTransport<undefined, false>;
-}, (CreateConnectorFn | CreateConnectorFn<import("thirdweb/dist/types/adapters/eip1193").EIP1193Provider | undefined, {
-    connect<withCapabilities extends boolean = false>(parameters?: import("@thirdweb-dev/wagmi-adapter").ConnectionOptions<withCapabilities> | undefined): Promise<{
-        accounts: withCapabilities extends true ? readonly {
-            address: `0x${string}`;
-            capabilities: Record<string, unknown>;
-        }[] : readonly `0x${string}`[];
-        chainId: number;
-    }>;
-}, {
-    "thirdweb:lastChainId": number;
-}>)[]>;
+}, CreateConnectorFn[]>;

package/dist/types/global-account/react/utils/index.d.ts

@@ -1,4 +1,3 @@
 export * from "./notificationsAPI";
 export * from "./profileDisplay";
 export * from "./toast";
-export * from "./updateAvatar";

package/dist/types/shared/constants/chains/b3Chain.d.ts

@@ -1,6 +1,6 @@
+import { ChainNetworks } from "@b3dotfun/sdk/global-account/types/chain-networks";
 import { Chain as ThirdwebChain } from "thirdweb";
 import { Chain } from "viem";
-import { ChainNetworks } from "@b3dotfun/sdk/global-account/types/chain-networks";
 export declare const nullAddress = "0x0000000000000000000000000000000000000000";
 export declare const avatarsNFTCollectionAddress = "0x658E2F67D3121A0eA81e5854be0b7539be27Aeb0";
 export declare const viemToThirdwebChain: (chain: Chain) => ThirdwebChain;
@@ -33,8 +33,8 @@ export declare const b3Mainnet: {
     experimental_preconfirmationTime?: number | undefined | undefined;
     rpcUrls: {
         readonly default: {
-            readonly http: readonly ["https://mainnet-rpc.b3.fun"];
-            readonly ws: readonly ["wss://mainnet-rpc.b3.fun/ws"];
+            readonly http: readonly ["https://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2"];
+            readonly ws: readonly ["wss://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2"];
         };
     };
     sourceId?: number | undefined | undefined;
@@ -43,7 +43,7 @@ export declare const b3Mainnet: {
     fees?: import("viem").ChainFees<undefined> | undefined;
     formatters?: undefined;
     serializers?: import("viem").ChainSerializers<undefined, import("viem").TransactionSerializable> | undefined;
-    readonly rpc: "https://mainnet-rpc.b3.fun";
+    readonly rpc: "https://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2";
     readonly icon: {
         readonly url: "https://cdn.b3.fun/b3_logo.svg";
         readonly width: 32;
@@ -128,8 +128,8 @@ export declare const b3Chain: Chain | {
     experimental_preconfirmationTime?: number | undefined | undefined;
     rpcUrls: {
         readonly default: {
-            readonly http: readonly ["https://mainnet-rpc.b3.fun"];
-            readonly ws: readonly ["wss://mainnet-rpc.b3.fun/ws"];
+            readonly http: readonly ["https://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2"];
+            readonly ws: readonly ["wss://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2"];
         };
     };
     sourceId?: number | undefined | undefined;
@@ -138,7 +138,7 @@ export declare const b3Chain: Chain | {
     fees?: import("viem").ChainFees<undefined> | undefined;
     formatters?: undefined;
     serializers?: import("viem").ChainSerializers<undefined, import("viem").TransactionSerializable> | undefined;
-    readonly rpc: "https://mainnet-rpc.b3.fun";
+    readonly rpc: "https://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2";
     readonly icon: {
         readonly url: "https://cdn.b3.fun/b3_logo.svg";
         readonly width: 32;

package/dist/types/shared/constants/chains/b3Viem.d.ts

@@ -0,0 +1,6 @@
+import type { Chain } from "viem";
+/**
+ * Viem's built-in `b3` chain points at mainnet-rpc.b3.fun; we spread it and override
+ * RPC URLs so all SDK call sites stay aligned with {@link B3_PUBLIC_RPC}.
+ */
+export declare const b3Viem: Chain;

package/dist/types/shared/constants/chains/supported.d.ts

@@ -2,6 +2,7 @@ import type { Chain as ThirdwebChain } from "thirdweb";
 export declare const supportedChains: import("viem").Chain[];
 export declare const supportedChainsTW: ThirdwebChain[];
 export declare const supportedChainNetworks: {
+    formatters?: Record<string, any> | undefined;
     contracts?: Record<string, {
         blockCreated?: number | undefined;
         address: string;
@@ -9,7 +10,6 @@ export declare const supportedChainNetworks: {
     sourceId?: number | undefined;
     testnet?: boolean | undefined;
     fees?: Record<string, any> | undefined;
-    formatters?: Record<string, any> | undefined;
     color?: string | undefined;
     testnetConfigID?: number | undefined;
     badge?: string | undefined;

package/dist/types/shared/utils/chains.d.ts

@@ -1,4 +1,4 @@
-import { Chain } from "viem/chains";
+import type { Chain } from "viem";
 export declare function getChainById(id: number): Chain | undefined;
 export declare function chainIdToName(id: number): string | undefined;
 export declare function getExplorerUrl(chain: Chain, txHash: string): string;

package/dist/types/wallet/react/components/ConnectWallet.d.ts

@@ -0,0 +1,11 @@
+export interface ConnectWalletProps {
+    /** Theme for the modal and button. Defaults to "light". */
+    theme?: "light" | "dark";
+    /** Label for the connect button. Defaults to "Connect Wallet". */
+    buttonLabel?: string;
+}
+/**
+ * Drop-in wallet connection component styled to match the B3 design system.
+ * Uses inline styles — works in any app without tailwind configuration.
+ */
+export declare function ConnectWallet({ theme: themeProp, buttonLabel }: ConnectWalletProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/wallet/react/components/WalletProvider.d.ts

@@ -0,0 +1,35 @@
+import { QueryClient } from "@tanstack/react-query";
+import { type Config, type CreateConnectorFn } from "wagmi";
+import type { Chain } from "viem";
+export interface WalletProviderProps {
+    children: React.ReactNode;
+    /**
+     * Chains to support. Defaults to SDK's supportedChains.
+     * Must be memoized or defined outside the component — inline arrays cause the
+     * wagmi config to rebuild on every render, losing wallet connection state.
+     */
+    chains?: Chain[];
+    /**
+     * Wagmi connectors. Must be memoized or defined outside the component — inline
+     * arrays cause the wagmi config to rebuild on every render, losing wallet connection state.
+     */
+    connectors?: CreateConnectorFn[];
+    /**
+     * Optional RPC URL overrides per chain ID.
+     * Must be memoized or defined outside the component — inline objects cause the
+     * wagmi config to rebuild on every render, losing wallet connection state.
+     */
+    rpcUrls?: Record<number, string>;
+    /** Escape hatch: pass a fully custom wagmi config. Overrides chains/connectors/rpcUrls. */
+    wagmiConfig?: Config;
+    /** Provide your own QueryClient for React Query. Defaults to an internal instance. */
+    queryClient?: QueryClient;
+    /** Whether to auto-reconnect the last wallet on mount. Defaults to false. */
+    reconnectOnMount?: boolean;
+}
+/**
+ * Standalone wallet connection provider.
+ * Wraps ThirdwebProvider, WagmiProvider, and QueryClientProvider.
+ * Use wagmi hooks (useAccount, useConnect, useDisconnect) directly inside.
+ */
+export declare function WalletProvider({ children, chains, connectors, rpcUrls, wagmiConfig: wagmiConfigProp, queryClient: queryClientProp, reconnectOnMount, }: WalletProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/wallet/react/hooks/useWalletDisconnect.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Disconnect the current wallet via wagmi.
+ * Consumers should use this instead of wagmi's useDisconnect directly
+ * to ensure a consistent disconnect API across the wallet module.
+ *
+ * Note: this only disconnects the wagmi layer. When used inside B3Provider,
+ * the thirdweb auth session is managed separately by B3Provider's own logout
+ * flow (useAuthentication). ConnectWallet is intended for standalone
+ * WalletProvider usage where thirdweb auth is not involved.
+ */
+export declare function useWalletDisconnect(): {
+    disconnect: () => void;
+};

package/dist/types/wallet/react/hooks/useWalletState.d.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "viem";
+import type { Connector } from "wagmi";
+export interface WalletConnector {
+    /** Display name of the wallet */
+    name: string;
+    /** Unique identifier for this connector instance */
+    uid: string;
+    /** Whether the wallet extension/app is detected in the browser */
+    isInstalled: boolean;
+    /** Connect using this connector. Returns a promise that resolves on success or rejects on failure/rejection. */
+    connect: () => Promise<void>;
+    /** Raw wagmi connector for advanced use */
+    connector: Connector;
+}
+export interface WalletState {
+    /** Connected wallet address, or undefined if not connected */
+    address: string | undefined;
+    /** Whether a wallet is currently connected */
+    isConnected: boolean;
+    /** Current chain the wallet is connected to */
+    chain: Chain | undefined;
+    /** Whether a connection attempt is in progress */
+    isPending: boolean;
+    /** Available wallet connectors, deduplicated by name */
+    connectors: WalletConnector[];
+}
+/**
+ * Unified wallet state from both thirdweb and wagmi layers.
+ * Provides available connectors with install status and connect functions.
+ */
+export declare function useWalletState(): WalletState;

package/dist/types/wallet/react/index.d.ts

@@ -0,0 +1,5 @@
+export { WalletProvider, type WalletProviderProps } from "./components/WalletProvider";
+export { createWalletConfig, type CreateWalletConfigOptions } from "../utils/createWalletConfig";
+export { useWalletDisconnect } from "./hooks/useWalletDisconnect";
+export { useWalletState, type WalletConnector, type WalletState } from "./hooks/useWalletState";
+export { ConnectWallet, type ConnectWalletProps } from "./components/ConnectWallet";

package/dist/types/wallet/utils/createWalletConfig.d.ts

@@ -0,0 +1,21 @@
+import { type CreateConnectorFn } from "wagmi";
+import type { Chain } from "viem";
+export interface CreateWalletConfigOptions {
+    /** Chains to support. Defaults to SDK's supportedChains. Must be non-empty. */
+    chains?: Chain[];
+    /**
+     * Wagmi connectors. Defaults to injected + Coinbase Wallet.
+     * Must be memoized if passed to WalletProvider — inline arrays
+     * will cause the config to rebuild on every render, losing wallet connection state.
+     */
+    connectors?: CreateConnectorFn[];
+    /** Optional RPC URL overrides per chain ID. */
+    rpcUrls?: Record<number, string>;
+}
+/**
+ * Creates a generic wagmi config with sensible defaults.
+ * No ecosystem wallet, no B3-specific concerns.
+ */
+export declare function createWalletConfig(options?: CreateWalletConfigOptions): import("wagmi").Config<readonly [Chain, ...Chain[]], {
+    [k: string]: import("viem").HttpTransport<undefined, false>;
+}, CreateConnectorFn[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.69-alpha.9",
+  "version": "0.1.69-test.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -205,6 +205,16 @@
       "import": "./dist/esm/notifications/types/index.js",
       "require": "./dist/cjs/notifications/types/index.js"
     },
+    "./wallet/react": {
+      "types": "./dist/types/wallet/react/index.d.ts",
+      "import": "./dist/esm/wallet/react/index.js",
+      "require": "./dist/cjs/wallet/react/index.js"
+    },
+    "./wallet/utils/*": {
+      "types": "./dist/types/wallet/utils/*.d.ts",
+      "import": "./dist/esm/wallet/utils/*.js",
+      "require": "./dist/cjs/wallet/utils/*.js"
+    },
     "./shared/utils": {
       "types": "./dist/types/shared/utils/index.d.ts",
       "import": "./dist/esm/shared/utils/index.js",
@@ -319,7 +329,9 @@
     "@stripe/stripe-js": "^7.3.1",
     "@thirdweb-dev/wagmi-adapter": "0.2.165",
     "@web3icons/react": "3.16.0",
+    "better-auth": "^1.5.6",
     "big.js": "^7.0.1",
+    "boring-avatars": "^2.0.4",
     "class-variance-authority": "0.7.0",
     "clsx": "2.0.0",
     "cmdk": "1.0.0",
@@ -375,6 +387,7 @@
     "thirdweb": "5.116.1",
     "tsc-alias": "^1.8.16",
     "tsc-watch": "^7.1.1",
+    "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^3.2.4"
   },
   "typesVersions": {
@@ -388,8 +401,6 @@
     "@fingerprintjs/fingerprintjs-pro-react": "^2.7.0",
     "@privy-io/react-auth": "^2.8.0",
     "@react-three/postprocessing": "2.16.6",
-    "@readyplayerme/react-avatar-creator": "0.5.0",
-    "@readyplayerme/visage": "6.10.0",
     "@tanstack/react-query": "5.55.0",
     "@wagmi/core": "2.20.3",
     "react": "^18.0.0 || ^19.0.0",
@@ -404,9 +415,6 @@
     "@react-three/postprocessing": {
       "optional": true
     },
-    "@readyplayerme/visage": {
-      "optional": true
-    },
     "react-native-mmkv": {
       "optional": true
     },

package/src/anyspend/constants/rpc.ts

@@ -17,7 +17,8 @@ export const AVALANCHE_PUBLIC_RPC = "https://avalanche-c-chain-rpc.publicnode.co
 export const BSC_PUBLIC_RPC = "https://bsc-rpc.publicnode.com";
 
 // Chain-specific public endpoints
-export const B3_PUBLIC_RPC = "https://mainnet-rpc.b3.fun/http";
+export const B3_PUBLIC_RPC =
+  "https://late-dimensional-yard.b3-mainnet.quiknode.pro/461dbdbd44158cd7a7a764a58ffb01a67eef77f2/";
 export const ABSTRACT_PUBLIC_RPC = "https://api.mainnet.abs.xyz";
 export const HYPEREVM_PUBLIC_RPC = "https://rpc.hyperliquid.xyz/evm";
 

package/src/anyspend/react/components/AnySpendNFT.tsx

@@ -8,7 +8,7 @@ import { formatDisplayNumber, formatTokenAmount } from "@b3dotfun/sdk/shared/uti
 import { MoreVertical } from "lucide-react";
 import { AnimatePresence } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { b3 } from "viem/chains";
+import { b3Viem } from "@b3dotfun/sdk/shared/constants/chains/b3Viem";
 import { GetQuoteResponse } from "../../types/api_req_res";
 import { AnySpendCustom } from "./AnySpendCustom";
 import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
@@ -215,7 +215,7 @@ function DropdownMenu({ nftContract }: { nftContract: components["schemas"]["Nft
           </div>
 
           <div className="hover:bg-as-on-surface-3 flex cursor-default items-center gap-2 rounded px-2">
-            <img src={chain?.logoUrl} className={cn("h-5 w-5", nftContract.chainId !== b3.id && "rounded-full")} />
+            <img src={chain?.logoUrl} className={cn("h-5 w-5", nftContract.chainId !== b3Viem.id && "rounded-full")} />
             <span className="text-sm">
               Minted on <span className="font-semibold">{chain ? getChainName(nftContract.chainId) : "Unknown"}</span>
             </span>

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

@@ -138,6 +138,8 @@ export interface AnySpendCheckoutProps {
   feeOnTop?: boolean;
   /** When true, identity verification (KYC) is required before card payment. Defaults to false. */
   kycEnabled?: boolean;
+  /** Extra metadata included under the 'callbackMetadata' key in the order's callbackMetadata (e.g. workflowId, orgId from checkout session) */
+  callbackMetadata?: Record<string, unknown>;
 }
 
 const emptyAddress: AddressData = { street: "", city: "", state: "", zip: "", country: "" };
@@ -187,6 +189,7 @@ export function AnySpendCheckout({
   variablePricing,
   feeOnTop,
   kycEnabled = false,
+  callbackMetadata: callbackMetadataProp,
 }: AnySpendCheckoutProps) {
   // ===== Variable pricing state =====
   const [variablePricingAmount, setVariablePricingAmount] = useState<string>("0");
@@ -342,8 +345,11 @@ export function AnySpendCheckout({
     if (isVariablePricingActive && variablePricingAmount !== "0") {
       meta.variablePricingAmount = variablePricingAmount;
     }
+    // Namespace caller-supplied metadata to avoid collisions with internal keys
+    if (callbackMetadataProp) meta.callbackMetadata = callbackMetadataProp;
     return Object.keys(meta).length > 0 ? meta : undefined;
   }, [
+    callbackMetadataProp,
     formData,
     selectedShipping,
     shippingAddress,
@@ -371,7 +377,15 @@ export function AnySpendCheckout({
 
   return (
     <AnySpendFingerprintWrapper fingerprint={fingerprint}>
-      <AnySpendCustomizationProvider slots={slots} content={content} theme={theme}>
+      <AnySpendCustomizationProvider
+        slots={slots}
+        content={{
+          successTitle: "Payment Successful",
+          successDescription: "Your payment has been processed successfully.",
+          ...content,
+        }}
+        theme={theme}
+      >
         <CheckoutLayout
           mode={mode}
           paymentPanel={

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { getExplorerTxUrl } from "@b3dotfun/sdk/anyspend";
-import { b3 } from "viem/chains";
+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";
@@ -39,7 +39,7 @@ export function CheckoutSuccess({
               : "Your payment has been processed successfully.",
           txHash,
           orderId,
-          explorerUrl: txHash ? getExplorerTxUrl(dstChainId ?? b3.id, txHash) : undefined,
+          explorerUrl: txHash ? getExplorerTxUrl(dstChainId ?? b3Viem.id, txHash) : undefined,
           onDone: () => {
             if (returnUrl) window.location.href = returnUrl;
           },
@@ -79,7 +79,7 @@ export function CheckoutSuccess({
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.3, delay: 0.5, ease: "easeOut" }}
-          href={getExplorerTxUrl(dstChainId ?? b3.id, 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/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>