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

package/dist/types/global-account/react/hooks/useConnect.d.ts

@@ -1,9 +1,9 @@
 import { Chain } from "thirdweb";
-import { SingleStepAuthArgsType } from "thirdweb/wallets";
+import { MultiStepAuthArgsType, SingleStepAuthArgsType } from "thirdweb/wallets";
 /**
  * This hook is used to connect to a wallet using the thirdweb client.
  */
 export declare function useConnect(partnerId: string, chain?: Chain): {
-    connect: (strategyOptions?: SingleStepAuthArgsType) => Promise<import("thirdweb/wallets").Wallet | null>;
+    connect: (strategyOptions?: MultiStepAuthArgsType | SingleStepAuthArgsType) => Promise<import("thirdweb/wallets").Wallet | null>;
     isLoading: boolean;
 };

package/dist/types/global-account/react/hooks/useFirstEOA.d.ts

@@ -7451,8 +7451,10 @@ export declare function useFirstEOA(chain?: {
             [x: `bool[${string}]`]: undefined;
             [x: `bytes[${string}]`]: undefined;
             [x: `bytes1[${string}]`]: undefined;
-            [x: `bytes4[${string}]`]: undefined;
+            [x: `bytes7[${string}]`]: undefined;
+            [x: `bytes14[${string}]`]: undefined;
             [x: `bytes30[${string}]`]: undefined;
+            [x: `bytes5[${string}]`]: undefined;
             [x: `bytes18[${string}]`]: undefined;
             [x: `bytes6[${string}]`]: undefined;
             [x: `bytes9[${string}]`]: undefined;
@@ -7460,12 +7462,10 @@ export declare function useFirstEOA(chain?: {
             [x: `bytes10[${string}]`]: undefined;
             [x: `bytes2[${string}]`]: undefined;
             [x: `bytes3[${string}]`]: undefined;
-            [x: `bytes5[${string}]`]: undefined;
-            [x: `bytes7[${string}]`]: undefined;
+            [x: `bytes4[${string}]`]: undefined;
             [x: `bytes11[${string}]`]: undefined;
             [x: `bytes12[${string}]`]: undefined;
             [x: `bytes13[${string}]`]: undefined;
-            [x: `bytes14[${string}]`]: undefined;
             [x: `bytes15[${string}]`]: undefined;
             [x: `bytes16[${string}]`]: undefined;
             [x: `bytes17[${string}]`]: undefined;
@@ -7553,8 +7553,10 @@ export declare function useFirstEOA(chain?: {
             bool?: undefined;
             bytes?: undefined;
             bytes1?: undefined;
-            bytes4?: undefined;
+            bytes7?: undefined;
+            bytes14?: undefined;
             bytes30?: undefined;
+            bytes5?: undefined;
             bytes18?: undefined;
             bytes6?: undefined;
             bytes9?: undefined;
@@ -7562,12 +7564,10 @@ export declare function useFirstEOA(chain?: {
             bytes10?: undefined;
             bytes2?: undefined;
             bytes3?: undefined;
-            bytes5?: undefined;
-            bytes7?: undefined;
+            bytes4?: undefined;
             bytes11?: undefined;
             bytes12?: undefined;
             bytes13?: undefined;
-            bytes14?: undefined;
             bytes15?: undefined;
             bytes16?: undefined;
             bytes17?: undefined;

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -425,6 +425,15 @@ export interface SendModalProps extends BaseModalProps {
     /** Callback function called when send is successful */
     onSuccess?: (txHash?: string) => void;
 }
+/**
+ * Props for the Session Duration modal
+ * Allows users to configure how long they stay signed in
+ */
+export interface SessionDurationModalProps extends BaseModalProps {
+    type: "sessionDuration";
+    partnerId: string;
+    chain: Chain;
+}
 /**
  * Props for the Notifications modal
  * Allows users to manage notification settings and channels
@@ -626,7 +635,7 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | AnySpendCollectorClubPurchaseProps | AnySpendDepositModalProps | AnySpendWorkflowTriggerModalProps | AnySpendCheckoutTriggerModalProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendDepositUpsideProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | NotificationsModalProps | SessionDurationModalProps | AnySpendCollectorClubPurchaseProps | AnySpendDepositModalProps | AnySpendWorkflowTriggerModalProps | AnySpendCheckoutTriggerModalProps;
 /**
  * State interface for the modal store
  */

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,32 +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;
-}>)[]>;
-/**
- * Returns a cached wagmi config for the given partnerId.
- * Use this instead of calling createWagmiConfig() directly inside React components or hooks
- * to avoid registering duplicate EventEmitter listeners on every render.
- */
-export declare function getCachedWagmiConfig(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/shared/utils/session-duration.d.ts

@@ -0,0 +1,15 @@
+export declare const SESSION_DURATION_OPTIONS: readonly [0, 1, 7, 14, 30];
+export type SessionDurationDays = (typeof SESSION_DURATION_OPTIONS)[number];
+/**
+ * Read session duration for a specific partner.
+ *
+ * preferences shape: { [partnerId]: { sessionDuration: number }, sessionDuration?: number }
+ *
+ * Priority: user.preferences[partnerId].sessionDuration
+ *           → user.preferences.sessionDuration (global fallback)
+ *           → localStorage (per-partner) → localStorage (global) → default 7d
+ */
+export declare function getSessionDurationDays(userPreferences?: Record<string, any>, partnerId?: string): SessionDurationDays;
+export declare const SESSION_DURATION_LABELS: Record<SessionDurationDays, string>;
+/** Cache the preference locally so it's available immediately on next login */
+export declare function setSessionDurationDays(days: SessionDurationDays, partnerId?: string): void;

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.2",
+  "version": "0.1.69-alpha.20",
   "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",
@@ -338,6 +350,7 @@
     "socket.io-client": "4.7.5",
     "sonner": "1.7.4",
     "tailwind-merge": "2.6.0",
+    "torph": "^0.0.9",
     "typescript": "5.8.2",
     "vaul": "^1.1.2",
     "zustand": "4.5.6"
@@ -374,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": {
@@ -387,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",
@@ -403,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/AnySpendStakeB3.tsx

@@ -1,4 +1,4 @@
-import { ABI_ERC20_STAKING, B3_TOKEN, eqci } from "@b3dotfun/sdk/anyspend";
+import { ABI_ERC20_STAKING, B3_TOKEN, eqci, getExplorerTxUrl } from "@b3dotfun/sdk/anyspend";
 import {
   Button,
   GlareCardRounded,
@@ -474,7 +474,7 @@ export function AnySpendStakeB3({
           >
             <div className="mb-6">
               <a
-                href={`https://basescan.org/tx/${stakingTxHash}`}
+                href={getExplorerTxUrl(base.id, stakingTxHash)}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors"

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

@@ -1,4 +1,4 @@
-import { ABI_ERC20_STAKING, B3_TOKEN, eqci } from "@b3dotfun/sdk/anyspend";
+import { ABI_ERC20_STAKING, B3_TOKEN, eqci, getExplorerTxUrl } from "@b3dotfun/sdk/anyspend";
 import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import {
   Button,
@@ -492,7 +492,7 @@ export function AnySpendStakeB3ExactIn({
           >
             <div className="mb-6">
               <a
-                href={`https://basescan.org/tx/${stakingTxHash}`}
+                href={getExplorerTxUrl(base.id, stakingTxHash)}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors"

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/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"