@b3dotfun/sdk 0.1.69-alpha.1 → 0.1.69-alpha.11

package/dist/cjs/global-account/react/hooks/useAuthentication.js

@@ -22,7 +22,7 @@ const useTWAuth_1 = require("./useTWAuth");
 const useUserQuery_1 = require("./useUserQuery");
 const debug = (0, debug_1.debugB3React)("useAuthentication");
 function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
-    const { onConnectCallback, onLogoutCallback } = (0, react_2.useContext)(LocalSDKProvider_1.LocalSDKContext);
+    const { onConnectCallback, onLogoutCallback, disableBSMNTAuthentication } = (0, react_2.useContext)(LocalSDKProvider_1.LocalSDKContext);
     const { disconnect } = (0, react_3.useDisconnect)();
     const wallets = (0, react_3.useConnectedWallets)();
     // Keep refs so logout() always disconnects current wallets, not stale closure values.
@@ -54,7 +54,7 @@ function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
     const { authenticate } = (0, useTWAuth_1.useTWAuth)();
     const { user, setUser } = (0, useUserQuery_1.useUserQuery)();
     const useAutoConnectLoadingPrevious = (0, react_2.useRef)(false);
-    const wagmiConfig = (0, createWagmiConfig_1.createWagmiConfig)({ partnerId });
+    const wagmiConfig = (0, react_2.useMemo)(() => (0, createWagmiConfig_1.createWagmiConfig)({ partnerId }), [partnerId]);
     const { connect } = (0, wagmi_1.useConnect)();
     const activeWagmiAccount = (0, wagmi_1.useAccount)();
     const { switchAccount } = (0, wagmi_1.useSwitchAccount)();
@@ -105,9 +105,7 @@ function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
             });
         }
         syncWagmiFunc();
-        // wagmi config shouldn't change
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [partnerId, wallets]);
+    }, [wagmiConfig, wallets, connect, switchAccount]);
     (0, react_2.useEffect)(() => {
         syncWagmi();
     }, [wallets, syncWagmi]);
@@ -127,9 +125,11 @@ function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
             setIsAuthenticated(true);
             setIsAuthenticating(false);
             debug("Re-authenticated successfully", { userAuth });
-            // Authenticate on BSMNT with B3 JWT
-            const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(userAuth.accessToken);
-            debug("@@b3Jwt", b3Jwt);
+            if (!disableBSMNTAuthentication) {
+                // Authenticate on BSMNT with B3 JWT
+                const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(userAuth.accessToken);
+                debug("@@b3Jwt", b3Jwt);
+            }
             return userAuth;
         }
         catch (error) {
@@ -140,12 +140,23 @@ function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
             setIsAuthenticated(true);
             setIsAuthenticating(false);
             debug("Fresh authentication successful", { userAuth });
-            // Authenticate on BSMNT with B3 JWT
-            const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(userAuth.accessToken);
-            debug("@@b3Jwt", b3Jwt);
+            if (!disableBSMNTAuthentication) {
+                // Authenticate on BSMNT with B3 JWT
+                const b3Jwt = await (0, bsmnt_1.authenticateWithB3JWT)(userAuth.accessToken);
+                debug("@@b3Jwt", b3Jwt);
+            }
             return userAuth;
         }
-    }, [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting]);
+    }, [
+        activeWallet,
+        partnerId,
+        authenticate,
+        setIsAuthenticated,
+        setIsAuthenticating,
+        setUser,
+        setHasStartedConnecting,
+        disableBSMNTAuthentication,
+    ]);
     const logout = (0, react_2.useCallback)(async (callback) => {
         // Disconnect ecosystem/smart wallets from the connected wallets list.
         // EOA wallets (MetaMask, Coinbase Wallet) are left in the list so they can

package/dist/cjs/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/cjs/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/cjs/global-account/react/hooks/useTWAuth.js

@@ -16,7 +16,6 @@ const useSearchParamsSSR_1 = require("./useSearchParamsSSR");
  * @deprecated Use useAuth() instead
  */
 function useTWAuth() {
-    console.warn("useTWAuth is deprecated. Please migrate to useAuth() for authentication.");
     const referralCode = (0, useSearchParamsSSR_1.useSearchParam)("referralCode");
     const authenticate = (0, react_1.useCallback)(async (wallet, partnerId) => {
         if (!wallet || !wallet?.getAuthToken?.())

package/dist/cjs/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/cjs/global-account/react/utils/createWagmiConfig.d.ts

@@ -25,21 +25,3 @@ export declare function createWagmiConfig(options: CreateWagmiConfigOptions): im
 }, {
     "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;
-}>)[]>;

package/dist/cjs/global-account/react/utils/createWagmiConfig.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createWagmiConfig = createWagmiConfig;
-exports.getCachedWagmiConfig = getCachedWagmiConfig;
 const constants_1 = require("../../../shared/constants");
 const supported_1 = require("../../../shared/constants/chains/supported");
 const thirdweb_1 = require("../../../shared/utils/thirdweb");
@@ -31,19 +30,3 @@ function createWagmiConfig(options) {
         connectors: finalConnectors,
     });
 }
-/** Module-level cache — wagmi configs must not be recreated on every render. */
-const wagmiConfigCache = new Map();
-/**
- * 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.
- */
-function getCachedWagmiConfig(options) {
-    const key = options.partnerId;
-    let config = wagmiConfigCache.get(key);
-    if (!config) {
-        config = createWagmiConfig(options);
-        wagmiConfigCache.set(key, config);
-    }
-    return config;
-}

package/dist/cjs/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/cjs/global-account/react/utils/index.js

@@ -17,4 +17,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./notificationsAPI"), exports);
 __exportStar(require("./profileDisplay"), exports);
 __exportStar(require("./toast"), exports);
-__exportStar(require("./updateAvatar"), exports);

package/dist/cjs/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/cjs/shared/utils/session-duration.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SESSION_DURATION_LABELS = exports.SESSION_DURATION_OPTIONS = void 0;
+exports.getSessionDurationDays = getSessionDurationDays;
+exports.setSessionDurationDays = setSessionDurationDays;
+const STORAGE_KEY_PREFIX = "b3-session-duration";
+const DEFAULT_DAYS = 7;
+// 0 = session cookie (expires when browser closes)
+exports.SESSION_DURATION_OPTIONS = [0, 1, 7, 14, 30];
+function storageKey(partnerId) {
+    return partnerId ? `${STORAGE_KEY_PREFIX}_${partnerId}` : STORAGE_KEY_PREFIX;
+}
+/**
+ * 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
+ */
+function getSessionDurationDays(userPreferences, partnerId) {
+    if (userPreferences) {
+        if (partnerId) {
+            const v = userPreferences[partnerId]?.sessionDuration;
+            if (exports.SESSION_DURATION_OPTIONS.includes(v))
+                return v;
+        }
+        const v = userPreferences["sessionDuration"];
+        if (exports.SESSION_DURATION_OPTIONS.includes(v))
+            return v;
+    }
+    try {
+        if (partnerId) {
+            const stored = localStorage.getItem(storageKey(partnerId));
+            if (stored !== null) {
+                const parsed = Number(stored);
+                if (exports.SESSION_DURATION_OPTIONS.includes(parsed))
+                    return parsed;
+            }
+        }
+        const stored = localStorage.getItem(STORAGE_KEY_PREFIX);
+        if (stored !== null) {
+            const parsed = Number(stored);
+            if (exports.SESSION_DURATION_OPTIONS.includes(parsed))
+                return parsed;
+        }
+    }
+    catch {
+        // localStorage unavailable (e.g. SSR)
+    }
+    return DEFAULT_DAYS;
+}
+exports.SESSION_DURATION_LABELS = {
+    0: "Session only",
+    1: "1 day",
+    7: "7 days",
+    14: "14 days",
+    30: "30 days",
+};
+/** Cache the preference locally so it's available immediately on next login */
+function setSessionDurationDays(days, partnerId) {
+    try {
+        localStorage.setItem(storageKey(partnerId), String(days));
+    }
+    catch {
+        // ignore
+    }
+}

package/dist/esm/anyspend/react/components/AnySpendStakeB3.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ABI_ERC20_STAKING, B3_TOKEN, eqci } from "../../../anyspend/index.js";
+import { ABI_ERC20_STAKING, B3_TOKEN, eqci, getExplorerTxUrl } from "../../../anyspend/index.js";
 import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, toast, useHasMounted, useModalStore, useSimBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
 import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
 import { formatTokenAmount } from "../../../shared/utils/number.js";
@@ -262,7 +262,7 @@ export function AnySpendStakeB3({ loadOrder, mode = "modal", recipientAddress, s
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [_jsx("div", { className: "mb-6", children: _jsx("a", { href: `https://basescan.org/tx/${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", children: "View transaction" }) }), _jsx(Button, { onClick: () => {
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [_jsx("div", { className: "mb-6", children: _jsx("a", { 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", children: "View transaction" }) }), _jsx(Button, { onClick: () => {
                                     setB3ModalOpen(false);
                                     onSuccess?.();
                                 }, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary h-14 w-full rounded-xl text-lg font-medium", children: "Done" })] })] }) }));

package/dist/esm/anyspend/react/components/AnySpendStakeB3ExactIn.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ABI_ERC20_STAKING, B3_TOKEN, eqci } from "../../../anyspend/index.js";
+import { ABI_ERC20_STAKING, B3_TOKEN, eqci, getExplorerTxUrl } from "../../../anyspend/index.js";
 import { normalizeAddress } from "../../../anyspend/utils/index.js";
 import { Button, GlareCardRounded, Input, StyleRoot, TextLoop, toast, useHasMounted, useModalStore, useSimBalance, useUnifiedChainSwitchAndExecute, } from "../../../global-account/react/index.js";
 import { PUBLIC_BASE_RPC_URL } from "../../../shared/constants/index.js";
@@ -275,7 +275,7 @@ export function AnySpendStakeB3ExactIn({ loadOrder, mode = "modal", sourceTokenA
                             opacity: hasMounted ? 1 : 0,
                             y: hasMounted ? 0 : 20,
                             filter: hasMounted ? "blur(0px)" : "blur(10px)",
-                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [_jsx("div", { className: "mb-6", children: _jsx("a", { href: `https://basescan.org/tx/${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", children: "View transaction" }) }), _jsx(Button, { onClick: () => {
+                        }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "bg-b3-react-background w-full p-6", children: [_jsx("div", { className: "mb-6", children: _jsx("a", { 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", children: "View transaction" }) }), _jsx(Button, { onClick: () => {
                                     setB3ModalOpen(false);
                                     onSuccess?.(formatTokenAmount(BigInt(userStakeAmount), 18) ?? "");
                                 }, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary h-14 w-full rounded-xl text-lg font-medium", children: "Done" })] })] }) }));

package/dist/esm/anyspend/react/components/checkout/CheckoutPaymentPanel.js

@@ -53,9 +53,7 @@ export function CheckoutPaymentPanel({ recipientAddress, destinationTokenAddress
     if (activeOrderId) {
         return (_jsx(CheckoutOrderStatus, { orderId: activeOrderId, themeColor: themeColor, returnUrl: returnUrl, returnLabel: returnLabel, onSuccess: onSuccess, onError: onError, onRetry: handleRetry, showPoints: showPoints, showOrderId: showOrderId, classes: classes }));
     }
-    const accordionButtonClass = (active) => 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", 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");
+    const accordionButtonClass = (active) => cn("anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors", !active && "hover:bg-gray-50 dark:hover:bg-neutral-800", classes?.paymentMethodButton);
+    const expandedPanelClass = cn("anyspend-payment-method-panel border-t border-gray-100 px-4 py-4 dark:border-neutral-800");
     return (_jsxs("div", { className: cn("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel), children: [_jsx("h2", { className: cn("anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100", classes?.paymentTitle), children: "Payment" }), !isFormValid && (_jsx("p", { className: "text-sm text-amber-600 dark:text-amber-400", children: "Please complete the required fields above before proceeding to payment." })), _jsxs("div", { className: cn("anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-neutral-700 dark:border-neutral-700", !isFormValid && "pointer-events-none opacity-50", classes?.paymentMethodSelector), children: [_jsxs("div", { className: "anyspend-method-crypto", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto"), className: accordionButtonClass(paymentMethod === "crypto"), children: [_jsx(RadioCircle, { selected: paymentMethod === "crypto", themeColor: themeColor }), _jsx(Wallet, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Pay with crypto" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "crypto" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CryptoPayPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, buttonText: buttonText, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, senderAddress: senderAddress }) }) }, "crypto-panel")) })] }), _jsxs("div", { className: "anyspend-method-card", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "card" ? null : "card"), className: accordionButtonClass(paymentMethod === "card"), children: [_jsx(RadioCircle, { selected: paymentMethod === "card", themeColor: themeColor }), _jsx(CreditCard, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Credit or debit card" }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx(VisaLogo, {}), _jsx(MastercardLogo, {}), _jsx(AmexLogo, {})] })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "card" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(FiatCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes, feeOnTop: feeOnTop, kycEnabled: kycEnabled }) }) }, "card-panel")) })] }), _jsxs("div", { className: "anyspend-method-coinbase", children: [_jsxs("button", { onClick: () => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase"), className: accordionButtonClass(paymentMethod === "coinbase"), children: [_jsx(RadioCircle, { selected: paymentMethod === "coinbase", themeColor: themeColor }), _jsx(CoinbaseLogo, {}), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Coinbase Pay" })] }), _jsx(AnimatePresence, { initial: false, children: paymentMethod === "coinbase" && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2, ease: "easeOut" }, style: { overflow: "hidden" }, children: _jsx("div", { className: expandedPanelClass, children: _jsx(CoinbaseCheckoutPanel, { recipientAddress: recipientAddress, destinationTokenAddress: destinationTokenAddress, destinationTokenChainId: destinationTokenChainId, totalAmount: totalAmount, themeColor: themeColor, onOrderCreated: handleOrderCreated, onError: onError, callbackMetadata: callbackMetadata, classes: classes }) }) }, "coinbase-panel")) })] })] })] }));
 }

package/dist/esm/anyspend/react/components/checkout/CheckoutSuccess.d.ts

@@ -1,10 +1,11 @@
 import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
 interface CheckoutSuccessProps {
     txHash?: string;
+    dstChainId?: number;
     orderId?: string;
     returnUrl?: string;
     returnLabel?: string;
     classes?: AnySpendCheckoutClasses;
 }
-export declare function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, classes }: CheckoutSuccessProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckoutSuccess({ txHash, dstChainId, orderId, returnUrl, returnLabel, classes, }: CheckoutSuccessProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/anyspend/react/components/checkout/CheckoutSuccess.js

@@ -1,11 +1,13 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getExplorerTxUrl } from "../../../../anyspend/index.js";
+import { b3 } from "viem/chains";
 import { cn } from "../../../../shared/utils/cn.js";
 import { ExternalLink } from "lucide-react";
 import { motion } from "motion/react";
 import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext.js";
 import { AnimatedCheckmark } from "../icons/AnimatedCheckmark.js";
-export function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, classes }) {
+export function CheckoutSuccess({ txHash, dstChainId, orderId, returnUrl, returnLabel, classes, }) {
     const { content, slots } = useAnySpendCustomization();
     if (slots.successScreen) {
         return (_jsx(_Fragment, { children: slots.successScreen({
@@ -15,7 +17,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 ?? b3.id, txHash) : undefined,
                 onDone: () => {
                     if (returnUrl)
                         window.location.href = returnUrl;
@@ -24,5 +26,5 @@ export function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, class
                 returnLabel: content.returnButtonLabel || returnLabel,
             }) }));
     }
-    return (_jsxs("div", { className: cn("anyspend-checkout-success flex flex-col items-center py-8 text-center", classes?.successPanel), children: [_jsx("div", { className: "anyspend-success-icon mb-4", children: _jsx(AnimatedCheckmark, { className: "h-16 w-16" }) }), _jsx(motion.h2, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 1.0, ease: "easeOut" }, className: "anyspend-success-title text-xl font-semibold text-gray-900 dark:text-gray-100", children: content.successTitle || "Payment Successful" }), _jsx(motion.p, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 1.15, ease: "easeOut" }, className: "anyspend-success-description mt-2 text-sm text-gray-500 dark:text-gray-400", children: content.successDescription || "Your payment has been processed successfully." }), txHash && (_jsxs(motion.a, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, delay: 0.5, ease: "easeOut" }, href: `https://explorer.b3.fun/tx/${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", children: ["View Transaction", _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] })), !txHash && orderId && (_jsxs(motion.p, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, delay: 0.5, ease: "easeOut" }, className: "anyspend-success-order-id mt-4 text-xs text-gray-400 dark:text-gray-500", children: ["Order ID: ", orderId] })), returnUrl && (_jsx(motion.a, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 0.6, ease: "easeOut" }, href: returnUrl, className: cn("anyspend-success-return-btn mt-6 inline-flex rounded-xl px-6 py-3 text-sm font-medium transition-colors", classes?.returnButton), style: { backgroundColor: "#111827", color: "#fff" }, children: content.returnButtonLabel || returnLabel || "Return to Store" }))] }));
+    return (_jsxs("div", { className: cn("anyspend-checkout-success flex flex-col items-center py-8 text-center", classes?.successPanel), children: [_jsx("div", { className: "anyspend-success-icon mb-4", children: _jsx(AnimatedCheckmark, { className: "h-16 w-16" }) }), _jsx(motion.h2, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 1.0, ease: "easeOut" }, className: "anyspend-success-title text-xl font-semibold text-gray-900 dark:text-gray-100", children: content.successTitle || "Payment Successful" }), _jsx(motion.p, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 1.15, ease: "easeOut" }, className: "anyspend-success-description mt-2 text-sm text-gray-500 dark:text-gray-400", children: content.successDescription || "Your payment has been processed successfully." }), txHash && (_jsxs(motion.a, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, delay: 0.5, ease: "easeOut" }, href: getExplorerTxUrl(dstChainId ?? b3.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", children: ["View Transaction", _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] })), !txHash && orderId && (_jsxs(motion.p, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3, delay: 0.5, ease: "easeOut" }, className: "anyspend-success-order-id mt-4 text-xs text-gray-400 dark:text-gray-500", children: ["Order ID: ", orderId] })), returnUrl && (_jsx(motion.a, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: 0.6, ease: "easeOut" }, href: returnUrl, className: cn("anyspend-success-return-btn mt-6 inline-flex rounded-xl px-6 py-3 text-sm font-medium transition-colors", classes?.returnButton), style: { backgroundColor: "#111827", color: "#fff" }, children: content.returnButtonLabel || returnLabel || "Return to Store" }))] }));
 }

package/dist/esm/anyspend/react/components/checkout/FiatCheckoutPanel.js

@@ -5,19 +5,18 @@ import { USDC_BASE } from "../../../../anyspend/constants/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import { formatUnits } from "../../../../shared/utils/number.js";
 import { getStripePromise } from "../../../../shared/utils/payment.utils.js";
-import { ShinyButton, TextShimmer, useB3Config, useModalStore, useTokenData } from "../../../../global-account/react/index.js";
+import { ShinyButton, TextShimmer, useAccountWallet, useB3Config, useModalStore, useTokenData, } from "../../../../global-account/react/index.js";
 import { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
 import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-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 { KycGate } from "./KycGate.js";
 export function FiatCheckoutPanel({ recipientAddress, destinationTokenAddress, destinationTokenChainId, totalAmount, themeColor, onSuccess, onOrderCreated, onError, callbackMetadata, classes, feeOnTop, kycEnabled = false, }) {
     // Stable refs for callback props to avoid re-triggering effects
     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);
     const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);

package/dist/esm/anyspend/react/components/checkout/KycGate.js

@@ -1,15 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../shared/utils/cn.js";
-import { ShinyButton, TextShimmer, useB3Config, useModalStore } from "../../../../global-account/react/index.js";
+import { ShinyButton, TextShimmer, useAccountWallet, useB3Config, useModalStore, } from "../../../../global-account/react/index.js";
 import { thirdwebB3Chain } from "../../../../shared/constants/chains/b3Chain.js";
 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 { useCreateKycInquiry, useKycStatus, useVerifyKyc, useWalletAuthHeaders } from "../../hooks/useKycStatus.js";
 export function KycGate({ themeColor, classes, enabled = false, onStatusResolved }) {
-    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/dist/esm/anyspend/react/components/common/OrderDetails.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ALL_CHAINS, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, RELAY_SOLANA_MAINNET_CHAIN_ID, ZERO_ADDRESS, } from "../../../../anyspend/index.js";
-import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useB3Config, useModalStore, useProfile, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useB3Config, useModalStore, useProfile, useToastContext, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
 import { useRouter, useSearchParams } from "../../../../shared/react/hooks/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
@@ -134,6 +134,11 @@ function roundTokenAmount(amount) {
 export const OrderDetails = memo(function OrderDetails({ mode = "modal", order, depositTxs, relayTxs, executeTx, refundTxs, cryptoPaymentMethod, selectedCryptoPaymentMethod, onPaymentMethodChange, onBack, disableUrlParamManagement = false, points, returnToHomeUrl, returnHomeLabel, classes, }) {
     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";

package/dist/esm/anyspend/react/components/common/OrderStatus.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getStatusDisplay } from "../../../../anyspend/index.js";
 import { useSearchParams } from "../../../../shared/react/index.js";
-import { Clock, Loader2, RotateCcw, X } from "lucide-react";
+import { AlertCircle, AlertTriangle, CheckCircle, Clock, Info, Loader2, RotateCcw, X } from "lucide-react";
+import { useToastContext } from "../../../../global-account/react/index.js";
 import { memo, useEffect, useRef } from "react";
 import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext.js";
 import { AnimatedCheckmark } from "../icons/AnimatedCheckmark.js";
@@ -14,6 +15,19 @@ function getStepIndex(status) {
         return 1;
     return -1;
 }
+function getToastIcon(type) {
+    const iconClass = "h-5 w-5";
+    switch (type) {
+        case "success":
+            return _jsx(CheckCircle, { className: `${iconClass} text-green-500` });
+        case "error":
+            return _jsx(AlertCircle, { className: `${iconClass} text-red-500` });
+        case "info":
+            return _jsx(Info, { className: `${iconClass} text-blue-500` });
+        case "warning":
+            return _jsx(AlertTriangle, { className: `${iconClass} text-amber-500` });
+    }
+}
 export const OrderStatus = memo(function OrderStatus({ order, selectedCryptoPaymentMethod, }) {
     const { text: defaultText, description: defaultDescription } = getStatusDisplay(order);
     const { content, slots } = useAnySpendCustomization();
@@ -58,9 +72,26 @@ export const OrderStatus = memo(function OrderStatus({ order, selectedCryptoPaym
         if (content.processingDescription)
             description = content.processingDescription;
     }
+    const { latestToast } = useToastContext();
+    // Override subtitle with toast notification when present (title stays unchanged)
+    let notificationIcon = undefined;
+    if (latestToast && currentStepIndex >= 0) {
+        description = latestToast.message;
+        notificationIcon = getToastIcon(latestToast.type);
+    }
     const paymentSteps = [
-        { 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) {
         if (!(order.status === "scanning_deposit_transaction" && cryptoPaymentMethod === "transfer_crypto")) {

package/dist/esm/anyspend/react/components/common/StepProgress.d.ts

@@ -1,7 +1,9 @@
+import React from "react";
 export interface Step {
     id: string | number;
     title: string;
     description?: string;
+    icon?: React.ReactNode;
 }
 export interface StepProgressProps {
     steps: Step[];

package/dist/esm/anyspend/react/components/common/StepProgress.js

@@ -1,14 +1,16 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { motion } from "framer-motion";
+import { TextMorph } from "torph/react";
 import { AnimatedCheckmark } from "../icons/AnimatedCheckmark.js";
 export function StepProgress({ steps, currentStepIndex, className = "", animateCompletedSteps = true, }) {
     const currentStep = steps[currentStepIndex];
-    return (_jsxs("div", { className: `flex w-full flex-col items-center gap-4 ${className}`, children: [_jsx("div", { className: "flex items-center gap-2", children: steps.map((_, index) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center", children: index < currentStepIndex ? (
+    return (_jsxs("div", { className: `flex w-full flex-col items-center gap-4 ${className}`, children: [_jsx("div", { className: "flex items-center gap-2", children: steps.map((_, index) => (_jsxs(React.Fragment, { children: [_jsx("div", { className: "flex items-center", children: index < currentStepIndex ? (
                             // Completed step - checkmark replaces the whole circle
                             _jsx(motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, children: _jsx(AnimatedCheckmark, { className: "h-10 w-10", strokeWidth: 2.5, static: !animateCompletedSteps }) })) : (_jsx(motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, className: `border-as-border-secondary relative flex h-10 w-10 items-center justify-center rounded-full border-[3px]`, children: index === currentStepIndex ? (
                                 // Current step - show spinning border and step number
                                 _jsxs(_Fragment, { children: [_jsx("div", { className: "border-t-as-primary absolute -inset-0.5 animate-spin rounded-full border-[3px] border-transparent" }), _jsx("span", { className: "text-as-primary font-semibold", children: index + 1 })] })) : (
                                 // Future step - show step number with disabled styling
-                                _jsx("span", { className: "text-as-content-disabled font-semibold", children: index + 1 })) })) }, index), index < steps.length - 1 && (_jsx("div", { className: "flex w-8 items-center justify-center gap-1", children: Array.from({ length: 6 }).map((_, dotIndex) => (_jsx("div", { className: "bg-as-primary/30 h-[2px] w-[2px] rounded-full" }, dotIndex))) }))] }))) }), currentStep && (_jsxs(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, className: "text-center", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: currentStep.title }), currentStep.description && _jsx("p", { className: "text-as-tertiary mt-1 text-sm", children: currentStep.description })] }))] }));
+                                _jsx("span", { className: "text-as-content-disabled font-semibold", children: index + 1 })) })) }), index < steps.length - 1 && (_jsx("div", { className: "flex w-8 items-center justify-center gap-1", children: Array.from({ length: 6 }).map((_, dotIndex) => (_jsx("div", { className: "bg-as-primary/30 h-[2px] w-[2px] rounded-full" }, dotIndex))) }))] }, index))) }), currentStep && (_jsxs(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, className: "text-center", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: _jsx(TextMorph, { children: currentStep.title }) }), currentStep.description && (_jsxs("p", { className: "text-as-tertiary mt-1 flex items-center justify-center gap-1.5 text-sm", children: [currentStep.icon, _jsx(TextMorph, { children: currentStep.description })] }))] }))] }));
 }