@b3dotfun/sdk 0.1.68 → 0.1.69-alpha.1

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

@@ -0,0 +1,247 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+export interface VariablePricingConfig {
+  enabled: boolean;
+  minAmount?: string;
+  maxAmount?: string;
+  suggestedAmount?: string;
+  label?: string;
+  currency?: string;
+}
+
+interface VariablePricingInputProps {
+  config: VariablePricingConfig;
+  tokenDecimals: number;
+  tokenSymbol: string;
+  themeColor?: string;
+  onChange: (amountWei: string) => void;
+}
+
+export function VariablePricingInput({
+  config,
+  tokenDecimals,
+  tokenSymbol,
+  themeColor,
+  onChange,
+}: VariablePricingInputProps) {
+  const currency = config.currency || tokenSymbol;
+
+  // Convert suggested amount from wei to display
+  const initialValue = useMemo(() => {
+    if (config.suggestedAmount) {
+      try {
+        return formatUnits(config.suggestedAmount, tokenDecimals);
+      } catch {
+        return "";
+      }
+    }
+    return "";
+  }, [config.suggestedAmount, tokenDecimals]);
+
+  const [displayValue, setDisplayValue] = useState(initialValue);
+  const [error, setError] = useState<string | null>(null);
+
+  // Min/max in display units
+  const minDisplay = useMemo(() => {
+    if (!config.minAmount) return null;
+    try {
+      return parseFloat(formatUnits(config.minAmount, tokenDecimals));
+    } catch {
+      return null;
+    }
+  }, [config.minAmount, tokenDecimals]);
+
+  const maxDisplay = useMemo(() => {
+    if (!config.maxAmount) return null;
+    try {
+      return parseFloat(formatUnits(config.maxAmount, tokenDecimals));
+    } catch {
+      return null;
+    }
+  }, [config.maxAmount, tokenDecimals]);
+
+  // Preset amounts
+  const presetAmounts = useMemo(() => {
+    const presets: { label: string; value: string }[] = [];
+
+    if (config.suggestedAmount) {
+      try {
+        const suggested = parseFloat(formatUnits(config.suggestedAmount, tokenDecimals));
+        const candidates = [suggested / 2, suggested, suggested * 2];
+
+        for (const val of candidates) {
+          if (val <= 0) continue;
+          if (minDisplay !== null && val < minDisplay) continue;
+          if (maxDisplay !== null && val > maxDisplay) continue;
+          const display = val % 1 === 0 ? val.toString() : val.toFixed(2);
+          presets.push({ label: `${display}`, value: display });
+        }
+      } catch {
+        // skip presets
+      }
+    }
+    return presets;
+  }, [config.suggestedAmount, tokenDecimals, minDisplay, maxDisplay]);
+
+  const validate = useCallback(
+    (value: string): string | null => {
+      const parsed = parseFloat(value);
+      if (!value || isNaN(parsed)) return "Please enter a valid number";
+      if (parsed <= 0) return "Please enter an amount";
+      if (minDisplay !== null && parsed < minDisplay) {
+        const display = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+        return `Minimum amount is ${display} ${currency}`;
+      }
+      if (maxDisplay !== null && parsed > maxDisplay) {
+        const display = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+        return `Maximum amount is ${display} ${currency}`;
+      }
+      return null;
+    },
+    [minDisplay, maxDisplay, currency],
+  );
+
+  const convertToWei = useCallback(
+    (value: string): string => {
+      try {
+        const [whole, frac = ""] = value.split(".");
+        const paddedFrac = frac.padEnd(tokenDecimals, "0").slice(0, tokenDecimals);
+        const factor = BigInt(10) ** BigInt(tokenDecimals);
+        return (BigInt(whole || "0") * factor + BigInt(paddedFrac)).toString();
+      } catch {
+        return "0";
+      }
+    },
+    [tokenDecimals],
+  );
+
+  const handleChange = useCallback(
+    (value: string) => {
+      setDisplayValue(value);
+      const validationError = validate(value);
+      setError(validationError);
+
+      if (!validationError && value && parseFloat(value) > 0) {
+        onChange(convertToWei(value));
+      } else {
+        onChange("0");
+      }
+    },
+    [validate, convertToWei, onChange],
+  );
+
+  const handlePresetClick = useCallback(
+    (value: string) => {
+      setDisplayValue(value);
+      setError(null);
+      onChange(convertToWei(value));
+    },
+    [convertToWei, onChange],
+  );
+
+  // Notify parent with initial value on mount
+  useEffect(() => {
+    if (initialValue && !validate(initialValue)) {
+      onChange(convertToWei(initialValue));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const formatHint = () => {
+    if (minDisplay !== null && maxDisplay !== null) {
+      const minStr = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+      const maxStr = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+      return `${minStr} – ${maxStr} ${currency}`;
+    }
+    if (minDisplay !== null) {
+      const minStr = minDisplay % 1 === 0 ? minDisplay.toString() : minDisplay.toFixed(2);
+      return `Min: ${minStr} ${currency}`;
+    }
+    if (maxDisplay !== null) {
+      const maxStr = maxDisplay % 1 === 0 ? maxDisplay.toString() : maxDisplay.toFixed(2);
+      return `Max: ${maxStr} ${currency}`;
+    }
+    return null;
+  };
+
+  const hint = formatHint();
+
+  return (
+    <div className="anyspend-variable-pricing mb-6">
+      <label
+        htmlFor="variable-pricing-amount"
+        className="mb-3 block text-lg font-semibold text-gray-900 dark:text-gray-100"
+      >
+        {config.label || "Enter amount"}
+      </label>
+
+      {/* Preset buttons */}
+      {presetAmounts.length > 0 && (
+        <div className="mb-3 flex flex-wrap gap-2">
+          {presetAmounts.map(preset => (
+            <button
+              key={preset.value}
+              type="button"
+              onClick={() => handlePresetClick(preset.value)}
+              className={cn(
+                "rounded-full border px-4 py-2 text-sm font-medium transition-colors",
+                displayValue === preset.value
+                  ? "border-transparent text-white"
+                  : "border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-neutral-600 dark:text-gray-300 dark:hover:bg-neutral-800",
+              )}
+              style={
+                displayValue === preset.value ? { backgroundColor: themeColor || "hsl(var(--as-brand))" } : undefined
+              }
+            >
+              {preset.label} {currency}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Input */}
+      <div className="relative">
+        <input
+          id="variable-pricing-amount"
+          type="text"
+          inputMode="decimal"
+          value={displayValue}
+          onChange={e => {
+            // Normalize comma decimal separators for locale compatibility
+            const normalized = e.target.value.replace(",", ".");
+            handleChange(normalized);
+          }}
+          className="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-3.5 pr-16 text-lg font-semibold text-gray-900 placeholder:text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-neutral-600 dark:bg-neutral-800 dark:text-gray-100 dark:placeholder:text-neutral-600 dark:focus:border-blue-400"
+          placeholder="0.00"
+        />
+        <span className="absolute right-4 top-1/2 -translate-y-1/2 text-sm font-medium text-gray-400 dark:text-gray-500">
+          {currency}
+        </span>
+      </div>
+
+      {/* Hint */}
+      {hint && <p className="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{hint}</p>}
+
+      {/* Error */}
+      <AnimatePresence initial={false}>
+        {error && (
+          <motion.p
+            key="variable-price-error"
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.15, ease: "easeOut" }}
+            className="mt-1.5 text-sm text-red-500"
+          >
+            {error}
+          </motion.p>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

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

@@ -101,7 +101,7 @@ export function CryptoPaymentMethod({
   return (
     <div
       className={
-        classes?.container || "crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-5"
+        classes?.container || "crypto-payment-method mx-auto h-fit w-full max-w-[460px] px-5 pb-5 pt-5 sm:px-0 sm:pt-5"
       }
     >
       <div className={cn("relative flex flex-col gap-10")}>

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

@@ -85,7 +85,7 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack, classes }: F
   const [showAllDiscountTiers, setShowAllDiscountTiers] = useState(false);
 
   return (
-    <div className={classes?.container || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-3 px-5"}>
+    <div className={classes?.container || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-3 px-5"}>
       <div className="flex w-full flex-col gap-3">
         <div className="text-center">
           <h3 className={classes?.title || "text-as-primary text-lg font-bold"}>Fee Breakdown</h3>

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

@@ -110,7 +110,7 @@ export function FiatPaymentMethodComponent({
   // Show loading state while checking geo availability
   if (isLoadingGeoOnramp) {
     return (
-      <div className={classes?.container || "fiat-payment-method mx-auto w-[460px] max-w-full p-5"}>
+      <div className={classes?.container || "fiat-payment-method mx-auto w-full max-w-[460px] p-5"}>
         <div className="flex flex-col gap-6">
           <div className={classes?.header || "flex items-center gap-4"}>
             <button
@@ -136,7 +136,7 @@ export function FiatPaymentMethodComponent({
   }
 
   return (
-    <div className={classes?.container || "fiat-payment-method mx-auto w-[460px] max-w-full p-5"}>
+    <div className={classes?.container || "fiat-payment-method mx-auto w-full max-w-[460px] p-5"}>
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className={classes?.header || "flex items-center gap-4"}>

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

@@ -1235,7 +1235,7 @@ function TransactionDetails({
 }
 
 export const OrderDetailsLoadingView = (
-  <div className={"mx-auto flex w-[460px] max-w-full flex-col items-center gap-4"}>
+  <div className={"mx-auto flex w-full max-w-[460px] flex-col items-center gap-4"}>
     {/* Status Badge */}
     <Badge
       variant="default"

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

@@ -11,7 +11,7 @@ interface PointsDetailPanelProps {
 
 export function PointsDetailPanel({ pointsAmount = 0, onBack, classes }: PointsDetailPanelProps) {
   return (
-    <div className={classes?.container || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5"}>
+    <div className={classes?.container || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-4 px-5"}>
       <div className="flex flex-col items-center gap-4 text-center">
         <h3 className={classes?.title || "text-as-primary text-xl font-bold"}>Earn Points with Every Swap</h3>
         <p className={classes?.description || "text-as-primary/70 text-balance text-sm leading-relaxed"}>

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

@@ -94,7 +94,7 @@ export function RecipientSelection({
   const canConfirm = recipientAddress && isAddressValid;
 
   return (
-    <div className={classes?.container || "recipient-selection mx-auto w-[460px] max-w-full p-5"}>
+    <div className={classes?.container || "recipient-selection mx-auto w-full max-w-[460px] p-5"}>
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className={classes?.header || "flex justify-around"}>

package/src/anyspend/react/components/index.ts

@@ -10,6 +10,7 @@ export type {
   ShippingOption,
   DiscountResult,
   AddressData,
+  VariablePricingConfig,
 } from "./checkout/AnySpendCheckout";
 export { AnySpendCheckoutTrigger } from "./checkout/AnySpendCheckoutTrigger";
 export type { AnySpendCheckoutTriggerProps } from "./checkout/AnySpendCheckoutTrigger";

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

@@ -18,3 +18,4 @@ export * from "./useSigMint";
 export * from "./useStripeClientSecret";
 export * from "./useStripeSupport";
 export * from "./useWatchTransfer";
+export * from "./useKycStatus";

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

@@ -11,7 +11,9 @@ 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 { useValidatedClientReferenceId } from "./useValidatedClientReferenceId";
 
 export type OnrampOptions = {
@@ -24,6 +26,8 @@ export type OnrampOptions = {
 export type CreateOnrampOrderParams = Omit<CreateOrderParams, "srcChain" | "srcToken" | "srcAmount"> & {
   srcFiatAmount: string;
   onramp: OnrampOptions;
+  /** When true, fees are added on top of srcAmount (payer pays more, receiver gets exact amount) */
+  feeOnTop?: boolean;
 };
 
 export type UseAnyspendCreateOnrampOrderProps = {
@@ -38,6 +42,7 @@ export type UseAnyspendCreateOnrampOrderProps = {
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspendCreateOnrampOrderProps = {}) {
   // Get B3 context values
   const { partnerId } = useB3Config();
+  const { address } = useAccount();
 
   // Get validated client reference ID from B3 context
   const createValidatedClientReferenceId = useValidatedClientReferenceId();
@@ -79,6 +84,16 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
         // Create order with USDC on Base as source
         const srcAmountOnRampInWei = parseUnits(srcFiatAmount, USDC_BASE.decimals);
 
+        // 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.
+        let kycWalletHeaders: Record<string, string> | undefined;
+        if (onramp.vendor === "stripe-web2" && address) {
+          kycWalletHeaders = getCachedWalletHeaders(address);
+        }
+
         return await anyspendService.createOrder({
           recipientAddress: normalizeAddress(recipientAddress),
           type: orderType,
@@ -115,6 +130,8 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
           clientReferenceId,
           visitorData,
           callbackMetadata: params.callbackMetadata,
+          feeOnTop: params.feeOnTop,
+          kycWalletHeaders,
         });
       } catch (error: any) {
         // If the error has a response with message and statusCode, throw that

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

@@ -0,0 +1,150 @@
+"use client";
+
+import { ANYSPEND_MAINNET_BASE_URL } from "@b3dotfun/sdk/anyspend/constants";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { useAccount, useSignMessage } from "wagmi";
+
+export interface KycStatusResponse {
+  kycRequired: boolean;
+  status: "not_verified" | "pending" | "completed" | "approved" | "declined" | "needs_review" | "expired";
+  inquiry?: {
+    inquiryId: string;
+    sessionToken: string;
+  };
+  config?: {
+    templateId: string;
+    environment: string;
+  };
+}
+
+interface KycInquiryResponse {
+  inquiryId: string;
+  sessionToken: string;
+}
+
+interface KycVerifyResponse {
+  status: string;
+}
+
+function buildWalletAuthMessage(walletAddress: string, timestamp: number): string {
+  return `AnySpend wants to verify your identity for card payments.\n\nThis signature does not trigger a blockchain transaction or cost any gas.\n\nWallet: ${walletAddress.toLowerCase()}\nNonce: ${timestamp}`;
+}
+
+/** Module-level signature cache to avoid repeated wallet prompts within the 5-minute window. */
+const headerCache = new Map<string, { headers: Record<string, string>; expiresAt: number }>();
+
+/**
+ * Returns cached wallet auth headers without triggering a wallet signature prompt.
+ * Returns undefined if no valid cache exists for the given address.
+ */
+export function getCachedWalletHeaders(address: string): Record<string, string> | undefined {
+  const cached = headerCache.get(address.toLowerCase());
+  if (cached && Date.now() < cached.expiresAt) return cached.headers;
+  return undefined;
+}
+
+/**
+ * Returns a function that builds the wallet-signature auth headers.
+ * Caches signatures for 4 minutes (server allows 5-minute window).
+ */
+export function useWalletAuthHeaders() {
+  const { address } = useAccount();
+  const { signMessageAsync } = useSignMessage();
+
+  const getHeaders = useCallback(async (): Promise<Record<string, string>> => {
+    if (!address) throw new Error("No wallet connected");
+    const walletAddress = address.toLowerCase();
+
+    const cached = headerCache.get(walletAddress);
+    if (cached && Date.now() < cached.expiresAt) return cached.headers;
+
+    const timestamp = Math.floor(Date.now() / 1000);
+    const message = buildWalletAuthMessage(walletAddress, timestamp);
+    const signature = await signMessageAsync({ message });
+
+    const headers = {
+      "X-Wallet-Address": walletAddress,
+      "X-Wallet-Signature": signature,
+      "X-Wallet-Timestamp": String(timestamp),
+    };
+    // 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]);
+
+  return { address, getHeaders };
+}
+
+export function useKycStatus(enabled = true) {
+  const { address, getHeaders } = useWalletAuthHeaders();
+
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ["kyc-status", address],
+    queryFn: async () => {
+      const headers = await getHeaders();
+      const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/kyc/status`, { headers });
+      const json = await response.json();
+      if (!response.ok) throw new Error(json.message || "Failed to fetch KYC status");
+      return json.data as KycStatusResponse;
+    },
+    enabled: enabled && !!address,
+    staleTime: 30_000,
+    retry: 0,
+    refetchOnWindowFocus: false,
+  });
+
+  return {
+    kycStatus: data || null,
+    isLoadingKycStatus: isLoading,
+    kycStatusError: error,
+    refetchKycStatus: refetch,
+  };
+}
+
+export function useCreateKycInquiry() {
+  const { address, getHeaders } = useWalletAuthHeaders();
+
+  const { mutateAsync, isPending } = useMutation({
+    mutationFn: async () => {
+      if (!address) throw new Error("No wallet connected");
+      const headers = await getHeaders();
+      const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/kyc/inquiry`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+      });
+      const json = await response.json();
+      if (!response.ok) throw new Error(json.message || "Failed to create KYC inquiry");
+      return json.data as KycInquiryResponse;
+    },
+  });
+
+  return {
+    createInquiry: mutateAsync,
+    isCreatingInquiry: isPending,
+  };
+}
+
+export function useVerifyKyc() {
+  const { address, getHeaders } = useWalletAuthHeaders();
+
+  const { mutateAsync, isPending } = useMutation({
+    mutationFn: async (inquiryId: string) => {
+      if (!address) throw new Error("No wallet connected");
+      const headers = await getHeaders();
+      const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/kyc/verify`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+        body: JSON.stringify({ inquiryId }),
+      });
+      const json = await response.json();
+      if (!response.ok) throw new Error(json.message || "Failed to verify KYC");
+      return json.data as KycVerifyResponse;
+    },
+  });
+
+  return {
+    verifyKyc: mutateAsync,
+    isVerifying: isPending,
+  };
+}

package/src/anyspend/services/anyspend.ts

@@ -72,6 +72,8 @@ export const anyspendService = {
     clientReferenceId,
     visitorData,
     callbackMetadata,
+    feeOnTop,
+    kycWalletHeaders,
   }: {
     recipientAddress: string;
     type: string;
@@ -88,6 +90,9 @@ export const anyspendService = {
     clientReferenceId?: string;
     visitorData?: VisitorData;
     callbackMetadata?: Record<string, unknown>;
+    feeOnTop?: boolean;
+    /** Wallet signature auth headers for KYC lookup (stripe-web2 orders only). */
+    kycWalletHeaders?: Record<string, string>;
   }) => {
     const accessToken = await app.authentication.getAccessToken();
     const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/orders`, {
@@ -97,6 +102,7 @@ export const anyspendService = {
         ...(visitorData?.requestId && { "X-Fingerprint-Request-Id": visitorData.requestId }),
         ...(visitorData?.visitorId && { "X-Fingerprint-Visitor-Id": visitorData.visitorId }),
         ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+        ...kycWalletHeaders,
       },
       body: JSON.stringify({
         recipientAddress,
@@ -113,6 +119,7 @@ export const anyspendService = {
         partnerId,
         ...(clientReferenceId && { clientReferenceId }),
         ...(callbackMetadata && { callbackMetadata }),
+        ...(feeOnTop != null && { feeOnTop }),
       }),
     });
     const data: CreateOrderResponse = await response.json();

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

@@ -210,8 +210,6 @@ export function B3DynamicModal() {
         hideCloseButton={hideCloseButton}
         hideGABranding={isAnySpendType}
         onEscapeKeyDown={!isClosable ? e => e.preventDefault() : undefined}
-        onPointerDownOutside={!isClosable ? e => e.preventDefault() : undefined}
-        onInteractOutside={!isClosable ? e => e.preventDefault() : undefined}
       >
         <ModalTitle className="sr-only hidden">{contentType?.type || "Modal"}</ModalTitle>
         <ModalDescription className="sr-only hidden">{contentType?.type || "Modal Body"}</ModalDescription>

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

@@ -1,16 +1,20 @@
+import { EIP1193 } from "thirdweb/wallets";
 import { useAuthentication } from "../../hooks";
 import { useAutoSelectWallet } from "../../hooks/useAutoSelectWallet";
 
 const AuthenticationProvider = ({
   partnerId,
   automaticallySetFirstEoa,
+  defaultEoaProvider,
 }: {
   partnerId: string;
   automaticallySetFirstEoa: boolean;
+  defaultEoaProvider?: EIP1193.EIP1193Provider;
 }) => {
   useAuthentication(partnerId);
   useAutoSelectWallet({
     enabled: automaticallySetFirstEoa,
+    defaultEoaProvider,
   });
 
   return null;

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

@@ -8,7 +8,7 @@ import "@relayprotocol/relay-kit-ui/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useEffect, useMemo } from "react";
 import { ThirdwebProvider } from "thirdweb/react";
-import { Account, Wallet } from "thirdweb/wallets";
+import { Account, EIP1193, Wallet } from "thirdweb/wallets";
 import { CreateConnectorFn, WagmiProvider } from "wagmi";
 import { ClientType, setClientType } from "../../../client-manager";
 import { StyleRoot } from "../StyleRoot";
@@ -29,6 +29,7 @@ export function B3Provider({
   accountOverride,
   environment,
   automaticallySetFirstEoa,
+  defaultEoaProvider,
   simDuneApiKey,
   // deprecated since v0.0.87
   toaster: _toaster,
@@ -48,6 +49,8 @@ export function B3Provider({
   accountOverride?: Account;
   environment?: "development" | "production";
   automaticallySetFirstEoa?: boolean;
+  /** EIP-1193 provider to auto-connect as the default EOA wallet (e.g., Farcaster frame wallet) */
+  defaultEoaProvider?: EIP1193.EIP1193Provider;
   simDuneApiKey?: string;
   toaster?: {
     position?: "top-center" | "top-right" | "bottom-center" | "bottom-right";
@@ -104,7 +107,11 @@ export function B3Provider({
                     {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
                     <StyleRoot id="b3-root" />
                   </RelayKitProviderWrapper>
-                  <AuthenticationProvider partnerId={partnerId} automaticallySetFirstEoa={!!automaticallySetFirstEoa} />
+                  <AuthenticationProvider
+                    partnerId={partnerId}
+                    automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+                    defaultEoaProvider={defaultEoaProvider}
+                  />
                 </B3ConfigProvider>
               </LocalSDKProvider>
             </ToastProvider>