@b3dotfun/sdk 0.1.70-alpha.14 → 0.1.70-alpha.16

package/src/anyspend/react/components/AnySpend.tsx

@@ -71,6 +71,7 @@ import { LoginStep } from "@b3dotfun/sdk/global-account/react/components/SignInW
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
+import { PureTransferView } from "./common/PureTransferView";
 import { RecipientSelection } from "./common/RecipientSelection";
 import { TabSection } from "./common/TabSection";
 import { AnySpendCustomizationProvider, useAnySpendCustomization } from "./context/AnySpendCustomizationContext";
@@ -100,6 +101,7 @@ export enum PanelView {
   DIRECT_TRANSFER_SUCCESS,
   FIAT_KYC,
   FIAT_AUTH,
+  PURE_TRANSFER_ADDRESS,
 }
 
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -687,7 +689,10 @@ function AnySpendInner({
     globalAddress,
   });
 
-  const recipientProfile = useProfile({ address: effectiveRecipientAddress, fresh: true });
+  const recipientProfile = useProfile({
+    address: effectiveRecipientAddress,
+    fresh: true,
+  });
   const recipientName = recipientProfile.data?.name;
 
   // Check token balance for crypto payments
@@ -807,12 +812,15 @@ function AnySpendInner({
       anyspendQuote.data.currencyOut?.currency?.decimals
     ) {
       if (isSrcInputDirty) {
-        // Don't override dstAmount if we have a fixed destinationTokenAmount
-        if (!destinationTokenAmount) {
-          const amount = anyspendQuote.data.currencyOut.amount;
-          const decimals = anyspendQuote.data.currencyOut.currency.decimals;
-          setDstAmount(formatTokenAmount(BigInt(amount), decimals, 6, false));
-        }
+        // The user is driving the SOURCE (exact-in): reflect the quote's OUTPUT even
+        // when a fixed destinationTokenAmount pre-filled the receive. That lock only
+        // governs the INITIAL exact-out state (untouched source → compute the pay for
+        // the fixed receive). Once the user edits the pay, keeping the receive pinned
+        // shows a value that doesn't match the quote — the URL amount "overrides" the
+        // real output, an invalid mismatched swap.
+        const amount = anyspendQuote.data.currencyOut.amount;
+        const decimals = anyspendQuote.data.currencyOut.currency.decimals;
+        setDstAmount(formatTokenAmount(BigInt(amount), decimals, 6, false));
       } else {
         const amount = anyspendQuote.data.currencyIn.amount;
         const decimals = anyspendQuote.data.currencyIn.currency.decimals;
@@ -820,15 +828,12 @@ function AnySpendInner({
       }
     } else {
       if (isSrcInputDirty) {
-        // Don't reset dstAmount if we have a fixed destinationTokenAmount
-        if (!destinationTokenAmount) {
-          setDstAmount("");
-        }
+        setDstAmount("");
       } else {
         setSrcAmount("");
       }
     }
-  }, [anyspendQuote, isSrcInputDirty, destinationTokenAmount]);
+  }, [anyspendQuote, isSrcInputDirty]);
 
   // Call onSuccess when order is executed
   useOnOrderSuccess({ orderData: oat, orderId, onSuccess });
@@ -906,15 +911,36 @@ function AnySpendInner({
   const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
 
   // Determine button state and text
-  const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
+  const btnInfo: {
+    text: string;
+    disable: boolean;
+    error: boolean;
+    loading: boolean;
+  } = useMemo(() => {
     // For fiat tab, check srcAmountOnRamp; for crypto tab, check activeInputAmountInWei
     const hasAmount =
       activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
-    if (!hasAmount) return { text: "Enter an amount", disable: true, error: false, loading: false };
+    if (!hasAmount)
+      return {
+        text: "Enter an amount",
+        disable: true,
+        error: false,
+        loading: false,
+      };
     if (isSameChainSameToken && !allowDirectTransfer)
-      return { text: "Select a different token or chain", disable: true, error: false, loading: false };
+      return {
+        text: "Select a different token or chain",
+        disable: true,
+        error: false,
+        loading: false,
+      };
     if (isLoadingAnyspendQuote && !isSameChainSameToken)
-      return { text: "Loading quote...", disable: true, error: false, loading: true };
+      return {
+        text: "Loading quote...",
+        disable: true,
+        error: false,
+        loading: true,
+      };
     if (isCreatingOrder || isCreatingOnrampOrder || isSwitchingOrExecuting)
       return {
         text: isSwitchingOrExecuting ? "Transferring..." : "Creating order...",
@@ -923,15 +949,31 @@ function AnySpendInner({
         loading: true,
       };
     if ((!anyspendQuote || !anyspendQuote.success) && !(isSameChainSameToken && allowDirectTransfer))
-      return { text: "No quote found", disable: true, error: false, loading: false };
+      return {
+        text: "No quote found",
+        disable: true,
+        error: false,
+        loading: false,
+      };
 
     if (activeTab === "fiat") {
       // For fiat: check recipient first, then payment method
-      if (!effectiveRecipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
+      if (!effectiveRecipientAddress)
+        return {
+          text: "Select recipient",
+          disable: false,
+          error: false,
+          loading: false,
+        };
 
       // If no fiat payment method selected, show "Select payment method"
       if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
-        return { text: "Select payment method", disable: false, error: false, loading: false };
+        return {
+          text: "Select payment method",
+          disable: false,
+          error: false,
+          loading: false,
+        };
       }
       // If payment method is selected, show "Continue"
       return { text: "Continue", disable: false, error: false, loading: false };
@@ -942,11 +984,22 @@ function AnySpendInner({
 
       // If no payment method selected, show "Choose payment method"
       if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
-        return { text: "Choose payment method", disable: false, error: false, loading: false };
+        return {
+          text: "Choose payment method",
+          disable: false,
+          error: false,
+          loading: false,
+        };
       }
 
       // Check recipient after payment method
-      if (!effectiveRecipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
+      if (!effectiveRecipientAddress)
+        return {
+          text: "Select recipient",
+          disable: false,
+          error: false,
+          loading: false,
+        };
 
       // If payment method selected, show appropriate action
       if (
@@ -954,10 +1007,22 @@ function AnySpendInner({
         effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
       ) {
         const buttonText = isSameChainSameToken && allowDirectTransfer ? "Transfer" : "Swap";
-        return { text: buttonText, disable: false, error: false, loading: false };
+        return {
+          text: buttonText,
+          disable: false,
+          error: false,
+          loading: false,
+        };
       }
       if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
-        return { text: "Continue to payment", disable: false, error: false, loading: false };
+        const transferText =
+          isSameChainSameToken && allowDirectTransfer ? "Show deposit address" : "Continue to payment";
+        return {
+          text: transferText,
+          disable: false,
+          error: false,
+          loading: false,
+        };
       }
     }
 
@@ -1063,10 +1128,18 @@ function AnySpendInner({
   // Handle crypto swap creation
   const handleCryptoSwap = async (method: CryptoPaymentMethodType) => {
     try {
-      const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+      // TRANSFER_CRYPTO is the manual deposit-address flow — no connected wallet to send from.
+      const isDirectTransfer =
+        isSameChainSameToken && allowDirectTransfer && method !== CryptoPaymentMethodType.TRANSFER_CRYPTO;
 
       invariant(effectiveRecipientAddress, "Recipient address is not found");
 
+      // Same-token manual deposit → show recipient address + watch, no relayer order, no fee
+      if (isSameChainSameToken && allowDirectTransfer && method === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+        navigateToPanel(PanelView.PURE_TRANSFER_ADDRESS, "forward");
+        return;
+      }
+
       const srcAmountBigInt = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
 
       // Handle direct transfer (same chain/token) - bypass backend, transfer directly
@@ -1089,10 +1162,6 @@ function AnySpendInner({
       // Regular swap flow - use backend
       invariant(anyspendQuote, "Relay price is not found");
 
-      // Debug: Check payment method values
-      console.log("handleCryptoSwap - method parameter:", method);
-      console.log("handleCryptoSwap - selectedCryptoPaymentMethod state:", selectedCryptoPaymentMethod);
-
       createOrder({
         recipientAddress: effectiveRecipientAddress,
         orderType: "swap",
@@ -1100,7 +1169,11 @@ function AnySpendInner({
         dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
         srcToken: selectedSrcToken,
         dstToken: isBuyMode
-          ? { ...selectedDstToken, chainId: destinationTokenChainId, address: destinationTokenAddress }
+          ? {
+              ...selectedDstToken,
+              chainId: destinationTokenChainId,
+              address: destinationTokenAddress,
+            }
           : selectedDstToken,
         srcAmount: srcAmountBigInt.toString(),
         expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
@@ -1759,6 +1832,20 @@ function AnySpendInner({
     </div>
   );
 
+  const pureTransferAddressView = (
+    <PureTransferView
+      mode={mode}
+      recipientAddress={effectiveRecipientAddress ?? ""}
+      chainId={selectedSrcChainId}
+      token={selectedSrcToken}
+      displayAmount={srcAmount && srcAmount !== "0" ? `${srcAmount} ${selectedSrcToken.symbol}` : undefined}
+      isActive={activePanel === PanelView.PURE_TRANSFER_ADDRESS}
+      onBack={navigateBack}
+      onClose={() => setB3ModalOpen(false)}
+      onTransferDetected={() => onSuccess?.()}
+    />
+  );
+
   // Add tabs to the main component when no order is loaded
   return (
     <StyleRoot>
@@ -1839,6 +1926,9 @@ function AnySpendInner({
             <div key="fiat-auth-view" className={cn(mode === "page" && "p-6")}>
               {authView}
             </div>,
+            <div key="pure-transfer-address-view" className={cn(mode === "page" && "p-6")}>
+              {pureTransferAddressView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>

package/src/anyspend/react/components/AnySpendCustomExactIn.tsx

@@ -574,7 +574,11 @@ function AnySpendCustomExactInInner({
 
   const handleCryptoOrder = async () => {
     try {
-      const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+      // TRANSFER_CRYPTO is the manual deposit-address flow — no connected wallet to send from.
+      const isDirectTransfer =
+        isSameChainSameToken &&
+        allowDirectTransfer &&
+        effectiveCryptoPaymentMethod !== CryptoPaymentMethodType.TRANSFER_CRYPTO;
 
       if (!isDirectTransfer) {
         invariant(anyspendQuote, "Relay price is not found");

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

@@ -0,0 +1,212 @@
+"use client";
+
+import { getChainName, getPaymentUrl, ZERO_ADDRESS } from "@b3dotfun/sdk/anyspend";
+import type { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { CopyToClipboard } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { ChevronLeft, Loader2, X } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { TransferResult } from "../../hooks/useWatchTransfer";
+import { useWatchTransfer } from "../../hooks/useWatchTransfer";
+import { ChainWarningText, WarningText } from "./WarningText";
+import { TransferResultScreen } from "./TransferResultScreen";
+
+export interface PureTransferViewProps {
+  mode?: "modal" | "page";
+  /** The recipient address where funds will land (the user's own wallet) */
+  recipientAddress: string;
+  /** Chain ID to watch on */
+  chainId: number;
+  /** Token the user sends — drives the QR code and balance watcher */
+  token: components["schemas"]["Token"];
+  /** Human-readable amount to display (display-only; skip row if empty or "0") */
+  displayAmount?: string;
+  /** Whether this panel is the currently active panel; gates the balance watcher */
+  isActive?: boolean;
+  /** Callback when back chevron is clicked */
+  onBack?: () => void;
+  /** Callback when X close button is clicked */
+  onClose?: () => void;
+  /** Callback when an incoming transfer is detected */
+  onTransferDetected?: (result: TransferResult) => void;
+}
+
+/**
+ * A self-contained view that shows the recipient address as a QR code + copy button and
+ * watches for an incoming same-chain/same-token transfer via `useWatchTransfer`. When a
+ * transfer is detected it renders `TransferResultScreen`.
+ *
+ * This is the "TRANSFER_CRYPTO" path for same-token AnySpend deposits — no relayer order,
+ * no fee; the user simply sends the token directly to their own address.
+ */
+export function PureTransferView({
+  mode = "modal",
+  recipientAddress,
+  chainId,
+  token,
+  displayAmount,
+  isActive,
+  onBack,
+  onClose,
+  onTransferDetected,
+}: PureTransferViewProps) {
+  const [transferResult, setTransferResult] = useState<TransferResult | null>(null);
+
+  // Fix 4: reset transferResult when the panel becomes active again
+  useEffect(() => {
+    if (isActive) setTransferResult(null);
+  }, [isActive]);
+
+  // Fix 3: stabilize the callback so it doesn't re-run the watcher effect every render
+  const handleTransferDetected = useCallback(
+    (result: TransferResult) => {
+      setTransferResult(result);
+      onTransferDetected?.(result);
+    },
+    [onTransferDetected],
+  );
+
+  const { isWatching } = useWatchTransfer({
+    address: recipientAddress,
+    chainId,
+    tokenAddress: token.address,
+    tokenDecimals: token.decimals,
+    // Fix 1: also require a non-empty recipient before enabling the watcher
+    enabled: !!recipientAddress && !transferResult && isActive,
+    onTransferDetected: handleTransferDetected,
+  });
+
+  // Fix 2: guard qrValue when recipientAddress is empty
+  const qrValue = useMemo(
+    () =>
+      recipientAddress
+        ? getPaymentUrl(
+            recipientAddress,
+            undefined,
+            token.address === ZERO_ADDRESS ? "ETH" : token.address,
+            chainId,
+            token.decimals,
+          )
+        : "",
+    [recipientAddress, token.address, token.decimals, chainId],
+  );
+
+  const chainName = useMemo(() => {
+    try {
+      return getChainName(chainId);
+    } catch {
+      return "the specified chain";
+    }
+  }, [chainId]);
+
+  // Guard: if no address yet, render nothing
+  if (!recipientAddress) return null;
+
+  // Once a transfer is detected, hand off to the shared success screen
+  if (transferResult) {
+    return (
+      <TransferResultScreen
+        mode={mode}
+        transferResult={transferResult}
+        token={token}
+        chainId={chainId}
+        recipientAddress={recipientAddress}
+        onBack={onBack}
+        onClose={onClose}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "anyspend-container anyspend-pure-transfer font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6",
+      )}
+    >
+      <div className="anyspend-pure-transfer-content flex flex-col gap-4">
+        {/* Header */}
+        <div className="anyspend-pure-transfer-header flex items-center justify-between">
+          {onBack ? (
+            <button
+              onClick={onBack}
+              className="anyspend-pure-transfer-back text-as-secondary hover:text-as-primary"
+              aria-label="Go back"
+            >
+              <ChevronLeft className="h-5 w-5" />
+            </button>
+          ) : (
+            <div className="w-5" />
+          )}
+          <h2 className="anyspend-pure-transfer-title text-as-primary text-base font-semibold">Send {token.symbol}</h2>
+          {onClose ? (
+            <button
+              onClick={onClose}
+              className="anyspend-pure-transfer-close text-as-secondary hover:text-as-primary"
+              aria-label="Close"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          ) : (
+            <div className="w-5" />
+          )}
+        </div>
+
+        {/* Optional amount badge */}
+        {displayAmount && (
+          <div className="anyspend-pure-transfer-amount-badge border-as-border-secondary bg-as-surface-secondary flex items-center justify-center rounded-xl border px-4 py-2">
+            <span className="text-as-primary text-sm font-medium">{displayAmount}</span>
+          </div>
+        )}
+
+        {/* QR Code and address block — mirrors QRDeposit ~lines 413-453 */}
+        <div className="anyspend-pure-transfer-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4">
+          {/* QR Code */}
+          <div className="anyspend-pure-transfer-qr-code-container flex flex-col items-center gap-2">
+            <div className="anyspend-pure-transfer-qr-code rounded-lg bg-white p-2">
+              <QRCodeSVG value={qrValue} size={120} level="M" marginSize={0} />
+            </div>
+            <span className="anyspend-pure-transfer-qr-scan-hint text-as-secondary text-xs">
+              SCAN WITH <span className="inline-block">🦊</span>
+            </span>
+          </div>
+
+          {/* Address info */}
+          <div className="anyspend-pure-transfer-address-container flex flex-1 flex-col gap-1">
+            <span className="anyspend-pure-transfer-address-label text-as-secondary text-sm">Deposit address:</span>
+            <div className="anyspend-pure-transfer-address-row flex items-start gap-1">
+              <span className="anyspend-pure-transfer-address text-as-primary break-all font-mono text-sm leading-relaxed">
+                {recipientAddress}
+              </span>
+              <CopyToClipboard
+                text={recipientAddress}
+                className="anyspend-pure-transfer-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Warnings — mirrors QRDeposit ~lines 456-460 */}
+        <ChainWarningText chainId={chainId} />
+        <WarningText>
+          Only send {token.symbol} on {chainName}. Other tokens will not be converted.
+        </WarningText>
+
+        {/* Watching indicator — mirrors QRDeposit ~lines 462-473 */}
+        {isWatching && (
+          <div className="anyspend-pure-transfer-watching bg-as-brand/10 flex items-center justify-center gap-2 rounded-lg p-3">
+            <Loader2 className="text-as-brand h-4 w-4 animate-spin" />
+            <span className="text-as-brand text-sm">Watching for incoming transfer...</span>
+          </div>
+        )}
+
+        {/* Full-width copy button — mirrors QRDeposit ~lines 476-484 */}
+        <CopyToClipboard text={recipientAddress}>
+          <button className="anyspend-pure-transfer-copy-button bg-as-brand hover:bg-as-brand/90 flex w-full items-center justify-center gap-2 rounded-xl py-3.5 font-medium text-white transition-all">
+            Copy deposit address
+          </button>
+        </CopyToClipboard>
+      </div>
+    </div>
+  );
+}

package/src/global-account/client-manager.ts

@@ -19,6 +19,37 @@ let socketClientUrl: string | null = null;
 let restClient: ClientApplication | null = null;
 let restClientUrl: string | null = null;
 
+// The pinned @b3dotfun/b3-api client's generated usersMethods predates `setBio`,
+// so `users.setBio(...)` throws "setBio is not a function". Re-register the users
+// service with the full list (mirrors users.shared.ts). Remove once the
+// @b3dotfun/b3-api pin includes setBio.
+const USERS_METHODS = [
+  "find",
+  "get",
+  "create",
+  "patch",
+  "remove",
+  "setReferralCode",
+  "syncTwProfiles",
+  "setAvatar",
+  "setBio",
+  "registerUsername",
+  "getMe",
+];
+
+// Re-register on every client the manager builds — the active transport
+// (REST/socket) switches at runtime.
+function ensureUsersCustomMethods(client: ClientApplication): void {
+  try {
+    const connection = (client as any).get("connection");
+    if (connection?.service) {
+      (client as any).use("users", connection.service("users"), { methods: USERS_METHODS });
+    }
+  } catch {
+    // Non-fatal: keep whatever methods the generated client already exposes.
+  }
+}
+
 /**
  * Creates a socket client
  */
@@ -27,6 +58,7 @@ function createSocketClient(): ClientApplication {
   if (!socketClient || socketClientUrl !== url) {
     socketInstance = io(url, { transports: ["websocket"] });
     socketClient = createClient(socketio(socketInstance), clientOptions);
+    ensureUsersCustomMethods(socketClient);
     socketClientUrl = url;
   }
   return socketClient;
@@ -48,6 +80,7 @@ function createRestClient(): ClientApplication {
   if (!restClient || restClientUrl !== url) {
     const connection = rest(url).fetch(resolveFetch());
     restClient = createClient(connection, clientOptions);
+    ensureUsersCustomMethods(restClient);
     restClientUrl = url;
   }
   return restClient;