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

package/dist/types/global-account/react/components/ManageAccount/SessionDurationContent.d.ts

@@ -0,0 +1,5 @@
+interface SessionDurationContentProps {
+    partnerId: string;
+}
+declare const SessionDurationContent: ({ partnerId }: SessionDurationContentProps) => import("react/jsx-runtime").JSX.Element;
+export default SessionDurationContent;

package/dist/types/global-account/react/components/SignInWithB3/utils/signInUtils.d.ts

@@ -3,15 +3,17 @@ import { SingleStepAuthArgsType, Wallet } from "thirdweb/wallets";
 type WalletType = Wallet["id"];
 type StrategyType = SingleStepAuthArgsType["strategy"];
 type CustomStrategyType = "basement" | "privy";
-type AllowedStrategies = StrategyType | WalletType | CustomStrategyType;
-export declare const allowedStrategies: readonly ["apple", "google", "x", "discord", "guest", "walletConnect", "io.metamask", "com.coinbase.wallet", "basement", "privy"];
+type AllowedStrategies = StrategyType | WalletType | CustomStrategyType | "email";
+type NonWalletStrategyType = Exclude<AllowedStrategies, WalletType>;
+export declare const allowedStrategies: readonly ["apple", "google", "github", "x", "discord", "email", "guest", "walletConnect", "io.metamask", "com.coinbase.wallet", "basement", "privy"];
 export type AllowedStrategy = (typeof allowedStrategies)[number];
 export declare function isWalletType(strategy: AllowedStrategies): strategy is WalletType;
-export declare function isStrategyType(strategy: AllowedStrategies): strategy is StrategyType;
+export declare function isStrategyType(strategy: AllowedStrategies): strategy is NonWalletStrategyType;
 export declare function getConnectOptionsFromStrategy(strategy: AllowedStrategy): {
     strategy: StrategyType;
     wallet?: Wallet;
     chain?: Chain;
 };
 export declare const strategyIcons: Record<string, string>;
+export declare const strategyLabels: Record<string, string>;
 export {};

package/dist/types/global-account/react/components/Toast/ToastContext.d.ts

@@ -11,6 +11,9 @@ interface ToastContextType {
     addToast: (type: ToastType, message: string, duration?: number) => string;
     removeToast: (id: string) => void;
     clearAll: () => void;
+    headerMode: boolean;
+    setHeaderMode: (enabled: boolean) => void;
+    latestToast: ToastItem | null;
 }
 export declare function ToastProvider({ children }: {
     children: React.ReactNode;

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

@@ -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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.69-alpha.1",
+  "version": "0.1.69-alpha.11",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -338,6 +338,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"
@@ -387,8 +388,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 +402,6 @@
     "@react-three/postprocessing": {
       "optional": true
     },
-    "@readyplayerme/visage": {
-      "optional": true
-    },
     "react-native-mmkv": {
       "optional": true
     },

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/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 { b3 } from "viem/chains";
 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 ?? b3.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 ?? 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"

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

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

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

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

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

@@ -24,6 +24,7 @@ import {
   useB3Config,
   useModalStore,
   useProfile,
+  useToastContext,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { useRouter, useSearchParams } from "@b3dotfun/sdk/shared/react/hooks";
@@ -231,6 +232,13 @@ export const OrderDetails = memo(function OrderDetails({
   const router = useRouter();
   const searchParams = useSearchParams();
 
+  const { setHeaderMode } = useToastContext();
+
+  useEffect(() => {
+    setHeaderMode(true);
+    return () => setHeaderMode(false);
+  }, [setHeaderMode]);
+
   // Get theme from B3Provider context
   const { theme } = useB3Config();
   const colorMode = theme || "light";

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

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

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

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

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

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

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

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

package/src/app.shared.ts

@@ -2,12 +2,11 @@ import { ClientApplication } from "@b3dotfun/b3-api";
 import { AuthenticationClient } from "@feathersjs/authentication-client";
 import Cookies from "js-cookie";
 import { B3_AUTH_COOKIE_NAME } from "./shared/constants";
+import { getSessionDurationDays } from "./shared/utils/session-duration";
 
 export const B3_API_URL =
   process.env.EXPO_PUBLIC_B3_API || process.env.NEXT_PUBLIC_B3_API || process.env.PUBLIC_B3_API || "https://api.b3.fun";
 
-const DEV_USER_GROUP = 4;
-
 export const authenticate = async (
   app: ClientApplication,
   accessToken: string,
@@ -33,12 +32,14 @@ export const authenticate = async (
       },
     );
 
-    // Extend cookie expiration to 30 days for dev users
-    if (response?.user?.userGroups?.includes(DEV_USER_GROUP)) {
-      const token = Cookies.get(B3_AUTH_COOKIE_NAME);
-      if (token) {
-        Cookies.set(B3_AUTH_COOKIE_NAME, token, { expires: 30 });
-      }
+    const token = Cookies.get(B3_AUTH_COOKIE_NAME);
+    if (token) {
+      const days = getSessionDurationDays(response?.user?.preferences, params?.partnerId);
+      Cookies.set(B3_AUTH_COOKIE_NAME, token, {
+        ...(days > 0 ? { expires: days } : {}),
+        secure: true,
+        sameSite: "Lax",
+      });
     }
 
     return response;

package/src/global-account/bsmnt.ts

@@ -73,12 +73,6 @@ export const resetSocket = () => {
   // reset the socket connection
 };
 
-export function extractAvatarIdFromUrl(url: string): string | null {
-  const regex = /https:\/\/models\.readyplayer\.me\/([a-f0-9]{24})\.[a-zA-Z0-9]+/;
-  const match = url.match(regex);
-  return match ? match[1] : null;
-}
-
 export const authenticateWithB3JWT = async (fullToken: string, params?: Record<string, any>) => {
   // Do not authenticate if there is no token
   if (!fullToken) {