@b3dotfun/sdk 0.1.2 → 0.1.5

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

@@ -32,8 +32,8 @@ import React, { useMemo } from "react";
 import { encodeFunctionData } from "viem";
 import { AnySpendCustom } from "./AnySpendCustom";
 
-// Collector Club Shop contract on Base
-const CC_SHOP_ADDRESS = "0x47366E64E4917dd4DdC04Fb9DC507c1dD2b87294";
+// Default Collector Club Shop contract on Base
+const DEFAULT_CC_SHOP_ADDRESS = "0x47366E64E4917dd4DdC04Fb9DC507c1dD2b87294";
 const BASE_CHAIN_ID = 8453;
 
 // ABI for buyPacksFor function only
@@ -83,9 +83,13 @@ export interface AnySpendCollectorClubPurchaseProps {
    */
   recipientAddress: string;
   /**
-   * Optional spender address (defaults to contract address)
+   * Optional spender address (defaults to shop address)
    */
   spenderAddress?: string;
+  /**
+   * Collector Club Shop contract address (defaults to Base mainnet shop)
+   */
+  ccShopAddress?: string;
   /**
    * Success callback
    */
@@ -124,7 +128,8 @@ export function AnySpendCollectorClubPurchase({
   pricePerPack,
   paymentToken = USDC_BASE,
   recipientAddress,
-  spenderAddress = CC_SHOP_ADDRESS,
+  ccShopAddress = DEFAULT_CC_SHOP_ADDRESS,
+  spenderAddress,
   onSuccess,
   header,
   showRecipient = true,
@@ -180,12 +185,12 @@ export function AnySpendCollectorClubPurchase({
       mode={mode}
       activeTab={activeTab}
       recipientAddress={recipientAddress}
-      spenderAddress={spenderAddress}
+      spenderAddress={spenderAddress ?? ccShopAddress}
       orderType="custom"
       dstChainId={BASE_CHAIN_ID}
       dstToken={paymentToken}
       dstAmount={totalAmount}
-      contractAddress={CC_SHOP_ADDRESS}
+      contractAddress={ccShopAddress}
       encodedData={encodedData}
       metadata={{
         packId,

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

@@ -1,3 +1,4 @@
+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";
@@ -9,17 +10,20 @@ import {
   toast,
   TransitionPanel,
   useAccountWallet,
+  useModalStore,
 } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
-import { ArrowDown, Loader2 } from "lucide-react";
+import { ArrowDown, CheckCircle, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { AnySpendCustomExactInClasses } from "./types/classes";
 
 import { useSetActiveWallet } from "thirdweb/react";
 import { B3_TOKEN } from "../../constants";
-import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow";
+import { useDirectTransfer } from "../hooks/useDirectTransfer";
+import { generateEncodedData, PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaySection } from "./common/CryptoPaySection";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
@@ -52,6 +56,7 @@ export interface AnySpendCustomExactInProps {
   sourceTokenChainId?: number;
   destinationToken: components["schemas"]["Token"];
   destinationChainId: number;
+  destinationTokenAmount?: string;
   onSuccess?: (amount: string) => void;
   onOpenCustomModal?: () => void;
   mainFooter?: React.ReactNode;
@@ -74,6 +79,10 @@ export interface AnySpendCustomExactInProps {
   customRecipientLabel?: string;
   /** Custom label for the return home button (overrides "Return to Home" / "Close") */
   returnHomeLabel?: string;
+  /** Custom class names for styling specific elements */
+  classes?: AnySpendCustomExactInClasses;
+  /** When true, allows direct transfer without swap if source and destination token/chain are the same */
+  allowDirectTransfer?: boolean;
 }
 
 export function AnySpendCustomExactIn(props: AnySpendCustomExactInProps) {
@@ -102,14 +111,18 @@ function AnySpendCustomExactInInner({
   customUsdInputValues,
   preferEoa,
   customExactInConfig,
+  destinationTokenAmount,
   orderType = "custom_exact_in",
   minDestinationAmount,
   header,
   returnToHomeUrl,
   customRecipientLabel,
   returnHomeLabel,
+  classes,
+  allowDirectTransfer = false,
 }: AnySpendCustomExactInProps) {
   const actionLabel = customExactInConfig?.action ?? "Custom Execution";
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
 
   const DESTINATION_TOKEN_DETAILS = {
     SYMBOL: destinationToken.symbol ?? "TOKEN",
@@ -131,8 +144,11 @@ function AnySpendCustomExactInInner({
     srcAmount,
     setSrcAmount,
     dstAmount,
+    dstAmountInput,
+    setDstAmountInput,
     isSrcInputDirty,
     setIsSrcInputDirty,
+    tradeType,
     selectedCryptoPaymentMethod,
     effectiveCryptoPaymentMethod,
     setSelectedCryptoPaymentMethod,
@@ -146,7 +162,9 @@ function AnySpendCustomExactInInner({
     isBalanceLoading,
     anyspendQuote,
     isLoadingAnyspendQuote,
+    isQuoteLoading,
     activeInputAmountInWei,
+    activeOutputAmountInWei,
     geoData,
     coinbaseAvailablePaymentMethods,
     stripeWeb2Support,
@@ -166,10 +184,27 @@ function AnySpendCustomExactInInner({
     slippage: SLIPPAGE_PERCENT,
     disableUrlParamManagement: true,
     orderType,
+    customExactInConfig,
   });
 
   const { connectedEOAWallet } = useAccountWallet();
   const setActiveWallet = useSetActiveWallet();
+  const { executeDirectTransfer, isTransferring: isSwitchingOrExecuting } = useDirectTransfer();
+
+  // Check if source and destination are the same token on the same chain
+  const isSameChainSameToken = useMemo(() => {
+    return (
+      paymentType === "crypto" &&
+      selectedSrcChainId === selectedDstChainId &&
+      selectedSrcToken?.address?.toLowerCase() === selectedDstToken?.address?.toLowerCase()
+    );
+  }, [paymentType, selectedSrcChainId, selectedDstChainId, selectedSrcToken?.address, selectedDstToken?.address]);
+
+  // Check if this is a direct transfer
+  const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+
+  // State for direct transfer success
+  const [directTransferTxHash, setDirectTransferTxHash] = useState<string | undefined>();
 
   // Get gas price for source chain (where the user pays from)
   const { gasPrice: gasPriceData, isLoading: isLoadingGas } = useGasPrice(selectedSrcChainId);
@@ -184,6 +219,18 @@ function AnySpendCustomExactInInner({
     }
   }, [preferEoa, connectedEOAWallet, setActiveWallet]);
 
+  // Prefill destination amount if provided (for EXACT_OUTPUT mode)
+  const appliedDestinationAmount = useRef(false);
+  useEffect(() => {
+    if (destinationTokenAmount && !appliedDestinationAmount.current) {
+      appliedDestinationAmount.current = true;
+      // Convert wei to human-readable format
+      const formattedAmount = formatUnits(destinationTokenAmount, destinationToken.decimals);
+      setDstAmountInput(formattedAmount);
+      setIsSrcInputDirty(false); // Switch to EXACT_OUTPUT mode
+    }
+  }, [destinationTokenAmount, destinationToken.decimals, setDstAmountInput, setIsSrcInputDirty]);
+
   const selectedRecipientOrDefault = selectedRecipientAddress ?? recipientAddress;
 
   const expectedDstAmountRaw = anyspendQuote?.data?.currencyOut?.amount ?? "0";
@@ -212,22 +259,34 @@ function AnySpendCustomExactInInner({
   };
 
   const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
-    if (activeInputAmountInWei === "0") return { text: "Enter an amount", disable: true, error: false, loading: false };
+    // Check for empty amount based on trade type
+    const isAmountEmpty =
+      tradeType === "EXACT_OUTPUT" ? !dstAmountInput || dstAmountInput === "0" : activeInputAmountInWei === "0";
+
+    const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+
+    if (isAmountEmpty) return { text: "Enter an amount", disable: true, error: false, loading: false };
     if (orderType === "hype_duel" && selectedSrcToken?.address?.toLowerCase() === B3_TOKEN.address.toLowerCase()) {
       return { text: "Convert to HYPE using B3", disable: false, error: false, loading: false };
     }
-    if (isLoadingAnyspendQuote) return { text: "Loading quote...", disable: true, error: false, loading: true };
-    if (isCreatingOrder || isCreatingOnrampOrder)
-      return { text: "Creating order...", disable: true, error: false, loading: true };
+    if (isQuoteLoading && !isDirectTransfer)
+      return { text: "Loading quote...", disable: true, error: false, loading: true };
+    if (isCreatingOrder || isCreatingOnrampOrder || isSwitchingOrExecuting)
+      return {
+        text: isSwitchingOrExecuting ? "Transferring..." : "Creating order...",
+        disable: true,
+        error: false,
+        loading: true,
+      };
     if (!selectedRecipientOrDefault) return { text: "Select recipient", disable: false, error: false, loading: false };
-    if (!anyspendQuote || !anyspendQuote.success)
+    if ((!anyspendQuote || !anyspendQuote.success) && !isDirectTransfer)
       return { text: "Get quote error", disable: true, error: true, loading: false };
 
-    // Check minimum destination amount if specified
-    // Check minimum destination amount if specified
+    // Check minimum destination amount if specified (skip for direct transfers)
     if (
+      !isDirectTransfer &&
       minDestinationAmount &&
-      anyspendQuote.data?.currencyOut?.amount &&
+      anyspendQuote?.data?.currencyOut?.amount &&
       anyspendQuote.data.currencyOut.currency &&
       anyspendQuote.data.currencyOut.currency.decimals != null
     ) {
@@ -256,8 +315,12 @@ function AnySpendCustomExactInInner({
       ) {
         return { text: "Insufficient balance", disable: true, error: true, loading: false };
       }
-      // Use different text based on order type
-      const buttonText = orderType === "hype_duel" ? "Continue to deposit" : `Execute ${actionLabel}`;
+      // Use different text based on order type and whether it's a direct transfer
+      const buttonText = isDirectTransfer
+        ? "Transfer"
+        : orderType === "hype_duel"
+          ? "Continue to deposit"
+          : `Execute ${actionLabel}`;
       return { text: buttonText, disable: false, error: false, loading: false };
     }
 
@@ -271,9 +334,10 @@ function AnySpendCustomExactInInner({
     return { text: "Continue", disable: false, error: false, loading: false };
   }, [
     activeInputAmountInWei,
-    isLoadingAnyspendQuote,
+    isQuoteLoading,
     isCreatingOrder,
     isCreatingOnrampOrder,
+    isSwitchingOrExecuting,
     selectedRecipientOrDefault,
     anyspendQuote,
     paymentType,
@@ -286,6 +350,10 @@ function AnySpendCustomExactInInner({
     DESTINATION_TOKEN_DETAILS.SYMBOL,
     orderType,
     selectedSrcToken,
+    tradeType,
+    dstAmountInput,
+    isSameChainSameToken,
+    allowDirectTransfer,
   ]);
 
   const onMainButtonClick = async () => {
@@ -327,7 +395,12 @@ function AnySpendCustomExactInInner({
   );
 
   const mainView = (
-    <div className="anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2">
+    <div
+      className={
+        classes?.container ||
+        "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2"
+      }
+    >
       {headerContent}
 
       <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
@@ -382,9 +455,10 @@ function AnySpendCustomExactInInner({
           >
             <Button
               variant="ghost"
-              className={cn(
-                "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
-              )}
+              className={
+                classes?.swapDirectionButton ||
+                "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"
+              }
             >
               <div className="relative flex items-center justify-center transition-opacity">
                 <ArrowDown className="text-as-primary/50 h-5 w-5" />
@@ -395,12 +469,12 @@ function AnySpendCustomExactInInner({
           {paymentType === "crypto" && (
             <CryptoReceiveSection
               isDepositMode={false}
-              isBuyMode={true}
+              isBuyMode={false}
               effectiveRecipientAddress={selectedRecipientOrDefault}
               recipientName={recipientName || undefined}
               customRecipientLabel={customRecipientLabel}
               onSelectRecipient={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
-              dstAmount={dstAmount}
+              dstAmount={isSrcInputDirty ? dstAmount : dstAmountInput}
               dstToken={selectedDstToken}
               dstTokenSymbol={DESTINATION_TOKEN_DETAILS.SYMBOL}
               dstTokenLogoURI={DESTINATION_TOKEN_DETAILS.LOGO_URI}
@@ -410,11 +484,11 @@ function AnySpendCustomExactInInner({
               isSrcInputDirty={isSrcInputDirty}
               onChangeDstAmount={value => {
                 setIsSrcInputDirty(false);
-                setSrcAmount(value);
+                setDstAmountInput(value);
               }}
-              anyspendQuote={anyspendQuote}
-              onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
-              onShowFeeDetail={() => setActivePanel(PanelView.FEE_DETAIL)}
+              anyspendQuote={isDirectTransfer ? undefined : anyspendQuote}
+              onShowPointsDetail={isDirectTransfer ? undefined : () => setActivePanel(PanelView.POINTS_DETAIL)}
+              onShowFeeDetail={isDirectTransfer ? undefined : () => setActivePanel(PanelView.FEE_DETAIL)}
             />
           )}
         </div>
@@ -430,10 +504,15 @@ function AnySpendCustomExactInInner({
           accentColor={"hsl(var(--as-brand))"}
           disabled={btnInfo.disable}
           onClick={onMainButtonClick}
-          className={cn(
-            "as-main-button relative w-full",
-            btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand",
-          )}
+          className={
+            (btnInfo.error && classes?.mainButtonError) ||
+            (btnInfo.disable && classes?.mainButtonDisabled) ||
+            classes?.mainButton ||
+            cn(
+              "as-main-button relative w-full",
+              btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand",
+            )
+          }
           textClassName={cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white")}
         >
           <div className="flex items-center justify-center gap-2">
@@ -443,9 +522,9 @@ function AnySpendCustomExactInInner({
         </ShinyButton>
       </motion.div>
 
-      {/* Gas indicator - show when source chain has gas data */}
-      {gasPriceData && !isLoadingGas && paymentType === "crypto" && (
-        <GasIndicator gasPrice={gasPriceData} className="mt-2 w-full" />
+      {/* Gas indicator - show when source chain has gas data, hide for direct transfers */}
+      {gasPriceData && !isLoadingGas && paymentType === "crypto" && !isDirectTransfer && (
+        <GasIndicator gasPrice={gasPriceData} className={classes?.gasIndicator || "mt-2 w-full"} />
       )}
 
       {mainFooter ? mainFooter : null}
@@ -454,24 +533,78 @@ function AnySpendCustomExactInInner({
 
   const handleCryptoOrder = async () => {
     try {
-      invariant(anyspendQuote, "Relay price is not found");
+      const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+
+      if (!isDirectTransfer) {
+        invariant(anyspendQuote, "Relay price is not found");
+      }
       invariant(selectedRecipientOrDefault, "Recipient address is not found");
 
-      const srcAmountBigInt = BigInt(activeInputAmountInWei);
-      const payload = buildCustomPayload(selectedRecipientOrDefault);
-
-      createOrder({
-        recipientAddress: selectedRecipientOrDefault,
-        orderType,
-        srcChain: selectedSrcChainId,
-        dstChain: selectedDstChainId,
-        srcToken: selectedSrcToken,
-        dstToken: selectedDstToken,
-        srcAmount: srcAmountBigInt.toString(),
-        expectedDstAmount: expectedDstAmountRaw,
-        creatorAddress: globalAddress,
-        payload,
-      });
+      // Handle direct transfer case (same token/chain) - bypass backend, transfer directly
+      if (isDirectTransfer) {
+        const srcAmountBigInt = BigInt(activeInputAmountInWei);
+
+        const txHash = await executeDirectTransfer({
+          chainId: selectedSrcChainId,
+          tokenAddress: selectedSrcToken.address,
+          recipientAddress: selectedRecipientOrDefault,
+          amount: srcAmountBigInt,
+          method: effectiveCryptoPaymentMethod,
+        });
+
+        if (txHash) {
+          setDirectTransferTxHash(txHash);
+          setActivePanel(PanelView.DIRECT_TRANSFER_SUCCESS);
+        }
+        return;
+      }
+
+      // At this point, anyspendQuote is guaranteed to be defined (invariant above ensures this)
+      if (tradeType === "EXACT_OUTPUT") {
+        // EXACT_OUTPUT mode: create a custom order (like AnySpendStakeUpside)
+        const srcAmountFromQuote = anyspendQuote?.data?.currencyIn?.amount;
+        invariant(srcAmountFromQuote, "Source amount from quote is not found");
+
+        const expectedDstAmount = anyspendQuote?.data?.currencyOut?.amount ?? "0";
+        const encodedData = generateEncodedData(customExactInConfig, activeOutputAmountInWei);
+
+        createOrder({
+          recipientAddress: selectedRecipientOrDefault,
+          orderType: "custom",
+          srcChain: selectedSrcChainId,
+          dstChain: selectedDstChainId,
+          srcToken: selectedSrcToken,
+          dstToken: selectedDstToken,
+          srcAmount: srcAmountFromQuote,
+          expectedDstAmount,
+          creatorAddress: globalAddress,
+          payload: {
+            amount: activeOutputAmountInWei,
+            data: encodedData,
+            to: customExactInConfig ? normalizeAddress(customExactInConfig.to) : undefined,
+            spenderAddress: customExactInConfig?.spenderAddress
+              ? normalizeAddress(customExactInConfig.spenderAddress)
+              : undefined,
+          },
+        });
+      } else {
+        // EXACT_INPUT mode: create custom_exact_in order (original behavior)
+        const srcAmountBigInt = BigInt(activeInputAmountInWei);
+        const payload = buildCustomPayload(selectedRecipientOrDefault);
+
+        createOrder({
+          recipientAddress: selectedRecipientOrDefault,
+          orderType,
+          srcChain: selectedSrcChainId,
+          dstChain: selectedDstChainId,
+          srcToken: selectedSrcToken,
+          dstToken: selectedDstToken,
+          srcAmount: srcAmountBigInt.toString(),
+          expectedDstAmount: expectedDstAmountRaw,
+          creatorAddress: globalAddress,
+          payload,
+        });
+      }
     } catch (err: any) {
       console.error(err);
       toast.error("Failed to create order: " + err.message);
@@ -509,24 +642,52 @@ function AnySpendCustomExactInInner({
         return;
       }
 
-      const payload = buildCustomPayload(selectedRecipientOrDefault);
-
-      createOnrampOrder({
-        recipientAddress: selectedRecipientOrDefault,
-        orderType,
-        dstChain: selectedDstChainId,
-        dstToken: selectedDstToken,
-        srcFiatAmount: srcAmount,
-        onramp: {
-          vendor,
-          paymentMethod: paymentMethodString,
-          country: geoData?.country || "US",
-          redirectUrl: window.location.origin,
-        },
-        expectedDstAmount: expectedDstAmountRaw,
-        creatorAddress: globalAddress,
-        payload,
-      });
+      const onrampOptions = {
+        vendor,
+        paymentMethod: paymentMethodString,
+        country: geoData?.country || "US",
+        redirectUrl: window.location.origin,
+      };
+
+      if (tradeType === "EXACT_OUTPUT") {
+        // EXACT_OUTPUT mode: create a custom order (like AnySpendStakeUpside)
+        const expectedDstAmount = anyspendQuote.data?.currencyOut?.amount ?? "0";
+        const encodedData = generateEncodedData(customExactInConfig, activeOutputAmountInWei);
+
+        createOnrampOrder({
+          recipientAddress: selectedRecipientOrDefault,
+          orderType: "custom",
+          dstChain: selectedDstChainId,
+          dstToken: selectedDstToken,
+          srcFiatAmount: srcAmount,
+          onramp: onrampOptions,
+          expectedDstAmount,
+          creatorAddress: globalAddress,
+          payload: {
+            amount: activeOutputAmountInWei,
+            data: encodedData,
+            to: customExactInConfig ? normalizeAddress(customExactInConfig.to) : undefined,
+            spenderAddress: customExactInConfig?.spenderAddress
+              ? normalizeAddress(customExactInConfig.spenderAddress)
+              : undefined,
+          },
+        });
+      } else {
+        // EXACT_INPUT mode: create custom_exact_in order (original behavior)
+        const payload = buildCustomPayload(selectedRecipientOrDefault);
+
+        createOnrampOrder({
+          recipientAddress: selectedRecipientOrDefault,
+          orderType,
+          dstChain: selectedDstChainId,
+          dstToken: selectedDstToken,
+          srcFiatAmount: srcAmount,
+          onramp: onrampOptions,
+          expectedDstAmount: expectedDstAmountRaw,
+          creatorAddress: globalAddress,
+          payload,
+        });
+      }
     } catch (err: any) {
       console.error(err);
       toast.error("Failed to create order: " + err.message);
@@ -625,13 +786,60 @@ function AnySpendCustomExactInInner({
     />
   ) : null;
 
+  const directTransferSuccessView = (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center justify-center gap-6 py-8"
+    >
+      <div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20">
+        <CheckCircle className="h-10 w-10 text-green-500" />
+      </div>
+      <div className="text-center">
+        <h2 className="text-as-primary mb-2 text-xl font-bold">Transfer Complete!</h2>
+        <p className="text-as-primary/60 text-sm">
+          {srcAmount} {selectedSrcToken.symbol} sent on {getChainName(selectedSrcChainId)}
+        </p>
+        <p className="text-as-primary/60 mt-1 text-sm">
+          to {selectedRecipientOrDefault?.slice(0, 6)}...{selectedRecipientOrDefault?.slice(-4)}
+        </p>
+      </div>
+      {directTransferTxHash && (
+        <a
+          href={getExplorerTxUrl(selectedSrcChainId, directTransferTxHash || "")}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-as-brand text-sm underline"
+        >
+          View Transaction
+        </a>
+      )}
+      <Button
+        className="bg-as-brand hover:bg-as-brand/90 mt-4 w-full rounded-xl py-3 font-semibold text-white"
+        onClick={() => {
+          onSuccess?.(srcAmount);
+          if (returnToHomeUrl) {
+            window.location.href = returnToHomeUrl;
+          } else {
+            setB3ModalOpen(false);
+          }
+        }}
+      >
+        {returnHomeLabel || (returnToHomeUrl ? "Return to Home" : "Done")}
+      </Button>
+    </motion.div>
+  );
+
   return (
     <StyleRoot>
       <div
-        className={cn(
-          "anyspend-container font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6",
-          mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
-        )}
+        className={
+          classes?.root ||
+          cn(
+            "anyspend-container font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6",
+            mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
+          )
+        }
       >
         <TransitionPanel
           activeIndex={
@@ -662,6 +870,7 @@ function AnySpendCustomExactInInner({
             <div key="loading-view">{loadingView}</div>,
             <div key="points-detail-view">{pointsDetailView}</div>,
             <div key="fee-detail-view">{feeDetailView}</div>,
+            <div key="direct-transfer-success-view">{directTransferSuccessView}</div>,
           ]}
         </TransitionPanel>
       </div>