@b3dotfun/sdk 0.1.70-alpha.11 → 0.1.70-alpha.13

package/src/anyspend/react/components/__tests__/QRDeposit.test.tsx

@@ -0,0 +1,256 @@
+import { USDC_BASE } from "@b3dotfun/sdk/anyspend";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+/**
+ * Deterministic component test for the `pureTransferOnly` "Fund Wallet" behavior.
+ *
+ * When `pureTransferOnly` is true, the destination token MIRRORS the user-selected
+ * source token, so funding is always a same-chain/same-token PURE TRANSFER:
+ *   - NO `deposit_first` swap order is created (the order-creation effect early-returns
+ *     on `isPureTransfer`), so `createOrder` is never called.
+ *   - The QR/deposit address is the recipient's OWN wallet address (not a global/order
+ *     address minted by AnySpend).
+ *   - `useWatchTransfer` watches the user's wallet for the EXACT token they selected.
+ *
+ * This guards the bug where "Fund Wallet" with USDC delivered ETH instead.
+ */
+
+// --- Spies / captured args observable across the test file ---
+
+// createOrder spy returned by useCreateDepositFirstOrder.
+const createOrderSpy = vi.fn();
+
+// reset spy returned by useWatchTransfer — QRDeposit calls reset() on token switch to
+// clear the stale balance baseline (see Test B).
+const resetSpy = vi.fn();
+
+// Captures the most recent props passed to useWatchTransfer so we can assert which
+// token/decimals/address the pure-transfer path is watching.
+let watchTransferArgs: any;
+
+// Holds the `setToken` callback handed to the mocked Relay TokenSelector so a test
+// can simulate the user switching the source token.
+let capturedSetToken: ((token: any) => void) | undefined;
+
+// Allows Test D to flip useTokenData's return (null = API miss) for the
+// AnySpendDeposit-level decimals-invariant assertion.
+const tokenDataState: { data: any; isLoading: boolean } = { data: null, isLoading: false };
+
+// --- Mocks ---
+
+// Mock the four hooks QRDeposit imports (relative paths from the component file).
+vi.mock("../../hooks/useCreateDepositFirstOrder", () => ({
+  useCreateDepositFirstOrder: () => ({ createOrder: createOrderSpy, isCreatingOrder: false }),
+}));
+
+vi.mock("../../hooks/useAnyspendOrderAndTransactions", () => ({
+  useAnyspendOrderAndTransactions: () => ({ orderAndTransactions: undefined }),
+}));
+
+vi.mock("../../hooks/useWatchTransfer", () => ({
+  useWatchTransfer: (props: any) => {
+    watchTransferArgs = props;
+    return { isWatching: true, reset: resetSpy };
+  },
+}));
+
+vi.mock("../../hooks/useOnOrderSuccess", () => ({
+  useOnOrderSuccess: () => undefined,
+}));
+
+// Mock the Relay TokenSelector: render a button that, when clicked, invokes the passed
+// `setToken` with a chosen token, simulating the user switching the source token. Also
+// render the provided `trigger` so the rest of the component tree still mounts.
+vi.mock("@relayprotocol/relay-kit-ui", () => ({
+  TokenSelector: ({ setToken, trigger }: any) => {
+    capturedSetToken = setToken;
+    return (
+      <div data-testid="token-selector">
+        {trigger}
+        <button data-testid="switch-token" onClick={() => setToken(SWITCHED_ETH_ON_BASE)} />
+      </div>
+    );
+  },
+}));
+
+// Spread the real global-account/react (Button, Badge, etc. are needed by transitively
+// imported sub-components and render fine under happy-dom). Override only `toast` so the
+// error path doesn't depend on a toast provider.
+vi.mock("@b3dotfun/sdk/global-account/react", async importOriginal => {
+  const actual = await importOriginal<any>();
+  return { ...actual, toast: { error: vi.fn(), success: vi.fn() } };
+});
+
+// Mock the wallet/balance/token hooks at their SOURCE modules (the barrel re-exports
+// these, so the override binds reliably). This lets AnySpendDeposit (Test D) render
+// without a ThirdwebProvider / wallet context and keeps the token-data fetch deterministic.
+vi.mock("@b3dotfun/sdk/global-account/react/hooks/useAccountWallet", () => ({
+  useAccountWallet: () => ({ connectedEOAWallet: undefined }),
+}));
+
+vi.mock("@b3dotfun/sdk/global-account/react/hooks/useSimBalance", () => ({
+  useSimBalance: () => ({ data: undefined, isLoading: false }),
+  useSimSvmBalance: () => ({ data: undefined, isLoading: false }),
+  useSimTokenBalance: () => ({ data: undefined, isLoading: false }),
+}));
+
+vi.mock("@b3dotfun/sdk/global-account/react/hooks/useTokenData", () => ({
+  useTokenData: () => tokenDataState,
+}));
+
+// --- Fixtures ---
+
+const RECIPIENT = "0x1111111111111111111111111111111111111111";
+
+// A DIFFERENT token than USDC for the "switch source token" test: native ETH on Base.
+const SWITCHED_ETH_ON_BASE = {
+  chainId: 8453,
+  address: "0x0000000000000000000000000000000000000000",
+  symbol: "ETH",
+  name: "Ethereum",
+  decimals: 18,
+  logoURI: "https://assets.relay.link/icons/1/light.png",
+};
+
+// Imported lazily so module-level mocks are registered before the component graph loads.
+async function loadQRDeposit() {
+  const mod = await import("../QRDeposit");
+  return mod.QRDeposit;
+}
+
+async function loadAnySpendDeposit() {
+  const mod = await import("../AnySpendDeposit");
+  return mod.AnySpendDeposit;
+}
+
+beforeEach(() => {
+  watchTransferArgs = undefined;
+  capturedSetToken = undefined;
+  tokenDataState.data = null;
+  tokenDataState.isLoading = false;
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("QRDeposit pureTransferOnly (Fund Wallet)", () => {
+  it("Test A — pure transfer creates NO order and uses the wallet's own address", async () => {
+    const QRDeposit = await loadQRDeposit();
+
+    render(
+      <QRDeposit
+        pureTransferOnly
+        recipientAddress={RECIPIENT}
+        destinationToken={USDC_BASE}
+        destinationChainId={8453}
+      />,
+    );
+
+    // The whole point: no swap/bridge order is created in pure-transfer mode.
+    expect(createOrderSpy).not.toHaveBeenCalled();
+
+    // It watches the recipient's OWN wallet for a direct incoming transfer, and is enabled.
+    expect(watchTransferArgs).toBeDefined();
+    expect(watchTransferArgs.address).toBe(RECIPIENT);
+    expect(watchTransferArgs.enabled).toBe(true);
+
+    // The mirror followed the initial selection: it watches for the EXACT funding token
+    // (Base USDC, 6 decimals) — NOT a generic 18-decimal fallback.
+    expect(watchTransferArgs.chainId).toBe(USDC_BASE.chainId);
+    expect(watchTransferArgs.tokenAddress).toBe(USDC_BASE.address);
+    expect(watchTransferArgs.tokenDecimals).toBe(6);
+
+    // The displayed deposit address is the recipient's own address, NOT a global/order address.
+    expect(screen.getByText(RECIPIENT)).toBeTruthy();
+  });
+
+  it("Test B — switching the source token stays a pure transfer (no order; mirror follows selection)", async () => {
+    const QRDeposit = await loadQRDeposit();
+
+    render(
+      <QRDeposit
+        pureTransferOnly
+        recipientAddress={RECIPIENT}
+        destinationToken={USDC_BASE}
+        destinationChainId={8453}
+      />,
+    );
+
+    // Sanity: still USDC before the switch.
+    expect(watchTransferArgs.tokenAddress).toBe(USDC_BASE.address);
+    expect(watchTransferArgs.tokenDecimals).toBe(6);
+
+    // User switches the source token to native ETH on Base via the (mocked) TokenSelector.
+    expect(capturedSetToken).toBeDefined();
+    fireEvent.click(screen.getByTestId("switch-token"));
+
+    // The balance watcher baseline is reset on token switch, so the new token isn't
+    // compared against the old token's (differently-scaled) balance.
+    expect(resetSpy).toHaveBeenCalled();
+
+    // Still a pure transfer: no order is ever created, even after switching tokens.
+    expect(createOrderSpy).not.toHaveBeenCalled();
+
+    // The mirror followed the new selection: now watching native ETH (18 decimals) on Base.
+    expect(watchTransferArgs.address).toBe(RECIPIENT);
+    expect(watchTransferArgs.enabled).toBe(true);
+    expect(watchTransferArgs.chainId).toBe(SWITCHED_ETH_ON_BASE.chainId);
+    expect(watchTransferArgs.tokenAddress).toBe(SWITCHED_ETH_ON_BASE.address);
+    expect(watchTransferArgs.tokenDecimals).toBe(18);
+  });
+
+  it("Test C — control: pureTransferOnly=false with source != destination DOES create an order", async () => {
+    const QRDeposit = await loadQRDeposit();
+
+    // No pureTransferOnly: source defaults to ETH-on-Base, which differs from the USDC dest,
+    // so this is a real swap and the normal deposit_first order path must run.
+    render(<QRDeposit recipientAddress={RECIPIENT} destinationToken={USDC_BASE} destinationChainId={8453} />);
+
+    // The flag is what gates the pure-transfer behavior: without it, an order IS created once.
+    expect(createOrderSpy).toHaveBeenCalledTimes(1);
+
+    // And it's created with the USDC destination token (the swap path is intact).
+    const orderArgs = createOrderSpy.mock.calls[0][0];
+    expect(orderArgs.recipientAddress).toBe(RECIPIENT);
+    expect(orderArgs.dstToken.address).toBe(USDC_BASE.address);
+    expect(orderArgs.dstToken.decimals).toBe(6);
+    // Source defaulted to native ETH on Base (the differing token that forces a swap).
+    expect(orderArgs.srcToken.address).toBe("0x0000000000000000000000000000000000000000");
+  });
+});
+
+describe("AnySpendDeposit decimals invariant (KNOWN_FUNDING_TOKENS fallback)", () => {
+  it("Test D — Base USDC keeps decimals: 6 even when useTokenData returns null", async () => {
+    const AnySpendDeposit = await loadAnySpendDeposit();
+
+    // Simulate the API miss: useTokenData returns null. The KNOWN_FUNDING_TOKENS fallback
+    // in AnySpendDeposit must still resolve Base USDC to decimals: 6 (never the generic 18),
+    // and that fully-resolved token is forwarded to QRDeposit as the pure-transfer source.
+    tokenDataState.data = null;
+    tokenDataState.isLoading = false;
+
+    render(
+      <AnySpendDeposit
+        pureTransferOnly
+        recipientAddress={RECIPIENT}
+        destinationTokenAddress={USDC_BASE.address}
+        destinationTokenChainId={USDC_BASE.chainId}
+      />,
+    );
+
+    // pureTransferOnly no longer auto-opens QR — AnySpendDeposit lands on the chooser
+    // (select-chain) screen first. Navigate into QR exactly like the user would, by
+    // clicking the "Deposit with QR Code" option.
+    fireEvent.click(screen.getByText("Deposit with QR Code"));
+
+    // Verified end-to-end through the REAL AnySpendDeposit -> REAL QRDeposit: the pure-transfer
+    // source mirrors the destination, so useWatchTransfer is called with USDC's 6 decimals.
+    expect(watchTransferArgs).toBeDefined();
+    expect(watchTransferArgs.tokenAddress).toBe(USDC_BASE.address);
+    expect(watchTransferArgs.tokenDecimals).toBe(6);
+    // No swap order in pure-transfer mode.
+    expect(createOrderSpy).not.toHaveBeenCalled();
+  });
+});

package/src/global-account/react/components/SignInWithB3/BetterAuthSignIn.tsx

@@ -1,4 +1,5 @@
 import { Button, Input, Loading, useAuthStore } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useState } from "react";
 import {
@@ -20,6 +21,7 @@ const DEFAULT_SOCIAL_PROVIDERS: SocialProviderConfig[] = [
   { id: "discord", label: "Discord" },
   { id: "microsoft", label: "Microsoft" },
   { id: "slack", label: "Slack" },
+  { id: "twitter", label: "X" },
 ];
 
 export interface BetterAuthSignInProps {
@@ -415,7 +417,16 @@ export function BetterAuthSignIn({
                       />
                     </svg>
                   ) : (
-                    icon && <img src={icon} alt="" className="h-5 w-5" />
+                    icon && (
+                      <img
+                        src={icon}
+                        alt=""
+                        className={cn(
+                          "h-5 w-5",
+                          (provider.id === "github" || provider.id === "twitter") && "dark:invert",
+                        )}
+                      />
+                    )
                   )}
                   <span>{isProviderLoading ? "Redirecting..." : label}</span>
                 </button>

package/src/global-account/react/components/SignInWithB3/components/AuthButton.tsx

@@ -1,4 +1,5 @@
 import { Button } from "../../custom/Button";
+import { cn } from "@b3dotfun/sdk/shared/utils";
 import { Github, Mail } from "lucide-react";
 import { strategyIcons, strategyLabels } from "../utils/signInUtils";
 
@@ -31,7 +32,14 @@ export function AuthButton({
       className="flex w-full items-center justify-center bg-gray-100 px-2 py-3 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
     >
       {strategyIcon ? (
-        <img src={strategyIcon} alt={`${strategyLabel} icon`} className="h-9 w-9" />
+        <img
+          src={strategyIcon}
+          alt={`${strategyLabel} icon`}
+          className={cn(
+            "h-9 w-9",
+            (strategy === "github" || strategy === "twitter" || strategy === "x") && "dark:invert",
+          )}
+        />
       ) : FallbackIcon ? (
         <FallbackIcon className="h-9 w-9 text-gray-900 dark:text-gray-100" />
       ) : (

package/src/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.tsx

@@ -18,6 +18,7 @@ const SOCIAL_PROVIDERS: { id: BetterAuthSocialProvider; label: string }[] = [
   { id: "discord", label: "Discord" },
   { id: "microsoft", label: "Microsoft" },
   { id: "slack", label: "Slack" },
+  { id: "twitter", label: "X" },
 ];
 
 interface LoginStepBetterAuthProps {

package/src/global-account/react/components/SignInWithB3/utils/signInUtils.ts

@@ -65,6 +65,7 @@ export const strategyIcons: Record<string, string> = {
   google: "https://cdn.b3.fun/google.svg",
   github: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg",
   x: "https://cdn.b3.fun/x.svg?1",
+  twitter: "https://cdn.b3.fun/x.svg?1",
   discord: "https://cdn.b3.fun/discord.svg",
   apple: "https://cdn.b3.fun/apple.svg",
   guest: "https://cdn.b3.fun/incognito.svg",
@@ -75,6 +76,7 @@ export const strategyIcons: Record<string, string> = {
 export const strategyLabels: Record<string, string> = {
   google: "Google",
   x: "X",
+  twitter: "X",
   discord: "Discord",
   apple: "Apple",
   guest: "Guest",

package/src/global-account/react/hooks/useBetterAuth.ts

@@ -7,7 +7,7 @@ import { useUserQuery } from "./useUserQuery";
 
 const debug = debugB3React("useBetterAuth");
 
-export type BetterAuthSocialProvider = "google" | "discord" | "apple" | "github" | "slack" | "microsoft";
+export type BetterAuthSocialProvider = "google" | "discord" | "apple" | "github" | "slack" | "microsoft" | "twitter";
 
 /** Thrown when email verification is required before the user can sign in. */
 export class EmailVerificationRequiredError extends Error {

package/src/global-account/react/stores/useModalStore.ts

@@ -645,8 +645,16 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
   destinationTokenAddress: string;
   /** The destination chain ID */
   destinationTokenChainId: number;
+  /**
+   * When false, the destination token is user-selectable even though a default destination token is
+   * provided (the provided destination is used only as the initial/default value). Used by the
+   * wallet-funding deposit flow so the user can change the receive token away from the default
+   * (Base USDC). Defaults to true (locked destination). Does not affect the QR/pure-transfer path. */
+  lockDestinationToken?: boolean;
   /** Callback when deposit succeeds */
   onSuccess?: (amount: string) => void;
+  /** Callback when the modal's close control is pressed. */
+  onClose?: () => void;
   /** Callback for opening a custom modal (e.g., for special token handling) */
   onOpenCustomModal?: () => void;
   /** Custom footer content */
@@ -687,6 +695,12 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
   classes?: AnySpendAllClasses;
   /** Whether to allow direct transfer without swap */
   allowDirectTransfer?: boolean;
+  /**
+   * When true, the QR-deposit path is a PURE TRANSFER: the destination token/chain
+   * mirror the user's selected source token, so the exact token they send lands in
+   * their wallet on the same chain (no swap/bridge).
+   */
+  pureTransferOnly?: boolean;
   /** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
   callbackMetadata?: Record<string, unknown>;
 }