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

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

@@ -6,6 +6,7 @@ import {
   getDefaultToken,
   getExplorerTxUrl,
   getHyperliquidUSDCToken,
+  isSameChainAndToken,
   HYPERLIQUID_CHAIN_ID,
   HYPERLIQUID_USDC_ADDRESS,
   USDC_BASE,
@@ -71,6 +72,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 +102,7 @@ export enum PanelView {
   DIRECT_TRANSFER_SUCCESS,
   FIAT_KYC,
   FIAT_AUTH,
+  PURE_TRANSFER_ADDRESS,
 }
 
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -110,6 +113,13 @@ export function AnySpend(props: {
   sourceChainId?: number;
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
+  /**
+   * When false, the destination token is user-selectable even if 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 buy-mode display, current behavior).
+   */
+  lockDestinationToken?: boolean;
   recipientAddress?: string;
   loadOrder?: string;
   hideTransactionHistoryButton?: boolean;
@@ -166,6 +176,7 @@ function AnySpendInner({
   sourceChainId,
   destinationTokenAddress,
   destinationTokenChainId,
+  lockDestinationToken = true,
   mode = "modal",
   defaultActiveTab = "crypto",
   loadOrder,
@@ -191,6 +202,7 @@ function AnySpendInner({
   sourceChainId?: number;
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
+  lockDestinationToken?: boolean;
   mode?: "page" | "modal";
   defaultActiveTab?: "crypto" | "fiat";
   loadOrder?: string;
@@ -230,8 +242,10 @@ function AnySpendInner({
   // in the same frame that onStatusResolved sets it (setState is async).
   // When kycEnabled is false (default), pre-approve so the KYC gate is skipped.
   const kycApprovedRef = useRef(!kycEnabled);
-  // Determine if we're in "buy mode" based on whether destination token props are provided
-  const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
+  // Determine if we're in "buy mode" based on whether destination token props are provided.
+  // When lockDestinationToken is false, the provided destination is only a default and the user
+  // can change the receive token, so we stay out of buy mode (selectable swap mode).
+  const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId) && lockDestinationToken;
 
   // Add refs to track URL state
   const initialUrlProcessed = useRef(false);
@@ -323,10 +337,16 @@ function AnySpendInner({
     sessionStorage.setItem("anyspend_fiat_method", selectedFiatPaymentMethod);
   }, [selectedFiatPaymentMethod]);
 
+  // Whether a default destination token was provided. When lockDestinationToken is false this is
+  // used only as the INITIAL/default value (the user can still change the receive token), so the
+  // wallet-funding deposit flow defaults to Base USDC but stays selectable.
+  const hasProvidedDestination = !!(destinationTokenAddress && destinationTokenChainId);
+
   // Get initial chain IDs from URL or defaults
   const initialSrcChainId = sourceChainId || parseInt(searchParams.get("fromChainId") || "0") || mainnet.id;
   const initialDstChainId =
-    parseInt(searchParams.get("toChainId") || "0") || (isBuyMode ? destinationTokenChainId : base.id);
+    parseInt(searchParams.get("toChainId") || "0") ||
+    (isBuyMode ? destinationTokenChainId : hasProvidedDestination ? destinationTokenChainId : base.id);
 
   // State for source chain/token selection
   const [selectedSrcChainId, setSelectedSrcChainId] = useState<number>(initialSrcChainId);
@@ -368,19 +388,28 @@ function AnySpendInner({
   const isHyperliquidUSDCAddress = (address?: string) =>
     eqci(address, HYPERLIQUID_USDC_ADDRESS) || eqci(address, ZERO_ADDRESS);
 
-  const defaultDstToken = isBuyMode
-    ? // Special case: Hyperliquid uses zero address for USDC
-      destinationTokenChainId === HYPERLIQUID_CHAIN_ID && isHyperliquidUSDCAddress(destinationTokenAddress)
-      ? getHyperliquidUSDCToken()
-      : {
-          symbol: "",
-          chainId: destinationTokenChainId,
-          address: destinationTokenAddress,
-          name: "",
-          decimals: 18,
-          metadata: {},
-        }
-    : getDefaultToken(selectedDstChainId);
+  // Build a token object from the provided destination props (handles the Hyperliquid USDC special case).
+  // The inline truthiness check lets TypeScript narrow both props to non-null, so it is `undefined`
+  // unless both props are provided — i.e. only meaningful when hasProvidedDestination/isBuyMode is true.
+  const providedDstToken: components["schemas"]["Token"] | undefined =
+    destinationTokenChainId && destinationTokenAddress
+      ? destinationTokenChainId === HYPERLIQUID_CHAIN_ID && isHyperliquidUSDCAddress(destinationTokenAddress)
+        ? getHyperliquidUSDCToken()
+        : {
+            symbol: "",
+            chainId: destinationTokenChainId,
+            address: destinationTokenAddress,
+            name: "",
+            decimals: 18,
+            metadata: {},
+          }
+      : undefined;
+
+  // In buy mode the provided destination is locked. Otherwise, if a default destination was provided
+  // (selectable deposit flow) seed it as the default; falling back to the chain's default token only
+  // when no destination prop is given (standard swap mode).
+  const defaultDstToken =
+    (isBuyMode || hasProvidedDestination) && providedDstToken ? providedDstToken : getDefaultToken(selectedDstChainId);
   const dstTokenFromUrl = useTokenFromUrl({
     defaultToken: defaultDstToken,
     prefix: "to",
@@ -661,7 +690,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
@@ -781,12 +813,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;
@@ -794,15 +829,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 });
@@ -871,8 +903,7 @@ function AnySpendInner({
   const isSameChainSameToken = useMemo(() => {
     return (
       activeTab === "crypto" &&
-      selectedSrcChainId === selectedDstChainId &&
-      selectedSrcToken.address.toLowerCase() === selectedDstToken.address.toLowerCase()
+      isSameChainAndToken(selectedSrcChainId, selectedSrcToken.address, selectedDstChainId, selectedDstToken.address)
     );
   }, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
 
@@ -880,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...",
@@ -897,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 };
@@ -916,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 (
@@ -928,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,
+        };
       }
     }
 
@@ -1037,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
@@ -1063,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",
@@ -1074,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",
@@ -1733,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>
@@ -1813,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

@@ -2,7 +2,7 @@ import { getChainName, getExplorerTxUrl } from "@b3dotfun/sdk/anyspend";
 import { useGasPrice } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
-import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
+import { isSameChainAndToken, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import {
   Button,
   ShinyButton,
@@ -218,16 +218,11 @@ function AnySpendCustomExactInInner({
   const isSameChainSameToken = useMemo(() => {
     return (
       effectivePaymentType === "crypto" &&
-      selectedSrcChainId === selectedDstChainId &&
-      selectedSrcToken?.address?.toLowerCase() === selectedDstToken?.address?.toLowerCase()
+      selectedSrcToken != null &&
+      selectedDstToken != null &&
+      isSameChainAndToken(selectedSrcChainId, selectedSrcToken.address, selectedDstChainId, selectedDstToken.address)
     );
-  }, [
-    effectivePaymentType,
-    selectedSrcChainId,
-    selectedDstChainId,
-    selectedSrcToken?.address,
-    selectedDstToken?.address,
-  ]);
+  }, [effectivePaymentType, selectedSrcChainId, selectedDstChainId, selectedSrcToken, selectedDstToken]);
 
   // Check if this is a direct transfer
   const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
@@ -574,7 +569,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");