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

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

@@ -24,6 +24,7 @@ import {
   useB3Config,
   useModalStore,
   useProfile,
+  useToastContext,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { useRouter, useSearchParams } from "@b3dotfun/sdk/shared/react/hooks";
@@ -40,7 +41,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import TimeAgo from "react-timeago";
 
 import { encodeFunctionData, erc20Abi } from "viem";
-import { b3 } from "viem/chains";
+import { b3Viem } from "@b3dotfun/sdk/shared/constants/chains/b3Viem";
 import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
 import { usePhantomTransfer } from "../../hooks/usePhantomTransfer";
 import type { OrderDetailsClasses } from "../types/classes";
@@ -231,6 +232,13 @@ export const OrderDetails = memo(function OrderDetails({
   const router = useRouter();
   const searchParams = useSearchParams();
 
+  const { setHeaderMode } = useToastContext();
+
+  useEffect(() => {
+    setHeaderMode(true);
+    return () => setHeaderMode(false);
+  }, [setHeaderMode]);
+
   // Get theme from B3Provider context
   const { theme } = useB3Config();
   const colorMode = theme || "light";
@@ -1011,7 +1019,7 @@ export const OrderDetails = memo(function OrderDetails({
                     <img
                       src={ALL_CHAINS[order.srcChain].logoUrl}
                       alt={getChainName(order.srcChain)}
-                      className={cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none")}
+                      className={cn("h-6 rounded-full", order.srcChain === b3Viem.id && "h-5 rounded-none")}
                     />
                   </Badge>
                 </div>

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

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

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

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

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

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

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

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

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

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

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

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

package/src/anyspend/utils/chain.ts

@@ -3,7 +3,6 @@ import {
   ABSTRACT_PUBLIC_RPC,
   ARBITRUM_PUBLIC_RPC,
   AVALANCHE_PUBLIC_RPC,
-  B3_PUBLIC_RPC,
   BASE_PUBLIC_RPC,
   BSC_PUBLIC_RPC,
   ETHEREUM_PUBLIC_RPC,
@@ -12,6 +11,7 @@ import {
   POLYGON_PUBLIC_RPC,
 } from "@b3dotfun/sdk/anyspend/constants/rpc";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { b3Viem } from "@b3dotfun/sdk/shared/constants/chains/b3Viem";
 import invariant from "invariant";
 import {
   Account,
@@ -25,7 +25,7 @@ import {
   Transport,
   WalletClient,
 } from "viem";
-import { abstract, arbitrum, avalanche, b3, base, bsc, mainnet, optimism, polygon } from "viem/chains";
+import { abstract, arbitrum, avalanche, base, bsc, mainnet, optimism, polygon } from "viem/chains";
 import { ChainType, IBaseChain, IEVMChain, IHyperliquidChain, ISolanaChain } from "../types/chain";
 import {
   getAvaxToken,
@@ -203,16 +203,16 @@ export const EVM_MAINNET: Record<number, IEVMChain> = {
     coingeckoName: "bsc",
     wethAddress: "0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c",
   },
-  [b3.id]: {
-    id: b3.id,
-    name: b3.name,
+  [b3Viem.id]: {
+    id: b3Viem.id,
+    name: b3Viem.name,
     logoUrl: "https://assets.relay.link/icons/square/8333/light.png",
     type: ChainType.EVM,
     nativeRequired: parseEther("0.0001"),
     canDepositNative: true,
-    defaultToken: getEthToken(b3.id),
-    nativeToken: getEthToken(b3.id),
-    viem: getCustomEvmChain(b3, B3_PUBLIC_RPC),
+    defaultToken: getEthToken(b3Viem.id),
+    nativeToken: getEthToken(b3Viem.id),
+    viem: b3Viem,
     pollingInterval: 1000, // 1 second for B3
     zapperEnum: "B3_MAINNET",
     coingeckoName: "b3",
@@ -605,7 +605,7 @@ export function getPaymentUrl(
 }
 
 export function getExplorerTxUrl(chainId: number, txHash: string) {
-  if (chainId === b3.id) {
+  if (chainId === b3Viem.id) {
     return "https://explorer.b3.fun/b3/tx/" + txHash;
   }
   if (EVM_CHAINS[chainId]) {

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/better-auth-client.ts

@@ -0,0 +1,17 @@
+import { createAuthClient } from "better-auth/client";
+import { B3_API_URL } from "../app.shared";
+
+export type B3BetterAuthClient = ReturnType<typeof createB3BetterAuthClient>;
+
+export function createB3BetterAuthClient(baseURL: string = B3_API_URL) {
+  return createAuthClient({
+    baseURL,
+    basePath: "/auth",
+    fetchOptions: {
+      credentials: "include",
+    },
+  });
+}
+
+// Default singleton for standard usage
+export const betterAuthClient = createB3BetterAuthClient();

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) {

package/src/global-account/react/components/B3DynamicModal.tsx

@@ -27,6 +27,7 @@ import { LinkAccount } from "./LinkAccount/LinkAccount";
 import { LinkNewAccount } from "./LinkAccount/LinkNewAccount";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
 import NotificationsContent from "./ManageAccount/NotificationsContent";
+import SessionDurationContent from "./ManageAccount/SessionDurationContent";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { Send } from "./Send/Send";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
@@ -43,7 +44,7 @@ export function B3DynamicModal() {
   const navigateBack = useModalStore(state => state.navigateBack);
   const { theme } = useB3Config();
   const isMobile = useIsMobile();
-  const { toasts, removeToast } = useToastContext();
+  const { toasts, removeToast, headerMode } = useToastContext();
 
   // Define arrays for different modal type groups
   const fullWidthTypes = [
@@ -172,6 +173,8 @@ export function B3DynamicModal() {
         return <Send {...contentType} />;
       case "notifications":
         return <NotificationsContent {...contentType} />;
+      case "sessionDuration":
+        return <SessionDurationContent partnerId={contentType.partnerId} />;
       // Add other modal types here
       default:
         return null;
@@ -247,7 +250,7 @@ export function B3DynamicModal() {
 
           {/* Toast Container - Part of modal-inner-content layer */}
           <AnimatePresence>
-            {toasts.length > 0 && (
+            {!headerMode && toasts.length > 0 && (
               <motion.div
                 initial={{ height: 0 }}
                 animate={{ height: "auto" }}

package/src/global-account/react/components/B3Provider/B3ConfigProvider.tsx

@@ -15,6 +15,8 @@ const DEFAULT_PERMISSIONS: PermissionsConfig = {
   endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
 };
 
+export type AuthStrategy = "thirdweb" | "better-auth";
+
 export interface B3ConfigContextType {
   accountOverride?: Account;
   automaticallySetFirstEoa: boolean;
@@ -25,6 +27,7 @@ export interface B3ConfigContextType {
   partnerId: string;
   stripePublishableKey?: string;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+  authStrategy: AuthStrategy;
 }
 
 const B3ConfigContext = createContext<B3ConfigContextType | null>(null);
@@ -40,6 +43,7 @@ export function B3ConfigProvider({
   partnerId,
   stripePublishableKey,
   createClientReferenceId,
+  authStrategy = "thirdweb",
 }: {
   children: React.ReactNode;
   accountOverride?: Account;
@@ -51,6 +55,7 @@ export function B3ConfigProvider({
   partnerId: string;
   stripePublishableKey?: string;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+  authStrategy?: AuthStrategy;
 }) {
   return (
     <B3ConfigContext.Provider
@@ -64,6 +69,7 @@ export function B3ConfigProvider({
         partnerId,
         stripePublishableKey,
         createClientReferenceId,
+        authStrategy,
       }}
     >
       {children}

package/src/global-account/react/components/B3Provider/B3Provider.native.tsx

@@ -1,19 +1,16 @@
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WalletProvider } from "@b3dotfun/sdk/wallet/react";
 import { ThirdwebProvider } from "thirdweb/react";
 import { Account, Wallet } from "thirdweb/wallets";
 
 import { ClientType } from "../../../client-manager";
 
-import { WagmiProvider } from "wagmi";
+import { useMemo } from "react";
 import { createWagmiConfig } from "../../utils/createWagmiConfig";
 import AuthenticationProvider from "./AuthenticationProvider";
 import { B3ConfigProvider } from "./B3ConfigProvider";
 import { LocalSDKProvider } from "./LocalSDKProvider";
 
-// Create queryClient instance
-const queryClient = new QueryClient();
-
 /**
  * Main B3Provider component
  */
@@ -82,23 +79,21 @@ export function InnerProvider({
   partnerId: string;
   rpcUrls?: Record<number, string>;
 }) {
-  const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls });
+  const wagmiConfig = useMemo(() => createWagmiConfig({ partnerId, rpcUrls }), [partnerId, rpcUrls]);
 
   return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <B3ConfigProvider
-          accountOverride={accountOverride}
-          environment={environment}
-          automaticallySetFirstEoa={false}
-          theme={theme}
-          clientType={clientType}
-          partnerId={partnerId}
-          defaultPermissions={defaultPermissions}
-        >
-          {children}
-        </B3ConfigProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+    <WalletProvider wagmiConfig={wagmiConfig}>
+      <B3ConfigProvider
+        accountOverride={accountOverride}
+        environment={environment}
+        automaticallySetFirstEoa={false}
+        theme={theme}
+        clientType={clientType}
+        partnerId={partnerId}
+        defaultPermissions={defaultPermissions}
+      >
+        {children}
+      </B3ConfigProvider>
+    </WalletProvider>
   );
 }