@b3dotfun/sdk 0.0.65-test.5 → 0.0.66-alpha.0

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

@@ -12,11 +12,8 @@ import {
   Button,
   ShinyButton,
   StyleRoot,
-  TabsPrimitive,
   TransitionPanel,
   useAccountWallet,
-  useB3,
-  useModalStore,
   useProfile,
   useRouter,
   useSearchParamsSSR,
@@ -24,8 +21,6 @@ import {
   useTokenData,
   useTokenFromUrl,
 } from "@b3dotfun/sdk/global-account/react";
-import BottomNavigation from "@b3dotfun/sdk/global-account/react/components/ManageAccount/BottomNavigation";
-import { useAccountWalletImage } from "@b3dotfun/sdk/global-account/react/hooks/useAccountWallet";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
@@ -33,12 +28,12 @@ import { ArrowDown, HistoryIcon, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
-import { defineChain } from "thirdweb";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { components } from "../../types/api";
 import { useAutoSelectCryptoPaymentMethod } from "../hooks/useAutoSelectCryptoPaymentMethod";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
+import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { CryptoPaySection } from "./common/CryptoPaySection";
@@ -126,31 +121,6 @@ function AnySpendInner({
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
 
-  const { partnerId } = useB3();
-  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
-
-  // Define base chain with RPC for modal props
-  const baseChain = useMemo(
-    () =>
-      defineChain({
-        id: 8453,
-        name: "Base",
-        nativeCurrency: {
-          name: "Ether",
-          symbol: "ETH",
-          decimals: 18,
-        },
-        rpc: "https://mainnet.base.org",
-        blockExplorers: [
-          {
-            name: "Basescan",
-            url: "https://basescan.org",
-          },
-        ],
-      }),
-    [],
-  );
-
   // Determine if we're in "buy mode" based on whether destination token props are provided
   const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
 
@@ -205,11 +175,17 @@ function AnySpendInner({
     setActivePanel(targetPanel);
   }, [activePanel]);
   const [customRecipients, setCustomRecipients] = useState<RecipientOption[]>([]);
-  // Add state for selected payment method
-  const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(
-    CryptoPaymentMethodType.NONE,
-  );
-  // Add state for selected fiat payment method
+
+  // Payment method state with dual-state system (auto + explicit user selection)
+  const {
+    cryptoPaymentMethod,
+    setCryptoPaymentMethod,
+    selectedCryptoPaymentMethod,
+    setSelectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
+    resetPaymentMethods,
+  } = useCryptoPaymentMethodState();
+
   const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState<FiatPaymentMethod>(FiatPaymentMethod.NONE);
   // const [newRecipientAddress, setNewRecipientAddress] = useState("");
   // const recipientInputRef = useRef<HTMLInputElement>(null);
@@ -228,7 +204,7 @@ function AnySpendInner({
   });
   const [selectedSrcToken, setSelectedSrcToken] = useState<components["schemas"]["Token"]>(srcTokenFromUrl);
   const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
-  const [srcAmount, setSrcAmount] = useState<string>(searchParams.get("fromAmount") || "0.01");
+  const [srcAmount, setSrcAmount] = useState<string>(searchParams.get("fromAmount") || "0");
 
   // State for onramp amount
   const [srcAmountOnRamp, setSrcAmountOnRamp] = useState<string>(searchParams.get("fromAmount") || "5");
@@ -475,8 +451,6 @@ function AnySpendInner({
   const recipientProfile = useProfile({ address: recipientAddress, fresh: true });
   const recipientName = recipientProfile.data?.name;
 
-  const globalWalletImage = useAccountWalletImage();
-
   // Auto-set active wallet from wagmi
   useAutoSetActiveWalletFromWagmi();
 
@@ -500,8 +474,9 @@ function AnySpendInner({
   // Auto-select crypto payment method based on available wallets and balance
   useAutoSelectCryptoPaymentMethod({
     paymentType: activeTab,
+    cryptoPaymentMethod,
+    setCryptoPaymentMethod,
     selectedCryptoPaymentMethod,
-    setSelectedCryptoPaymentMethod,
     hasEnoughBalance,
     isBalanceLoading,
   });
@@ -635,9 +610,9 @@ function AnySpendInner({
       // Add orderId and payment method to URL for persistence
       const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
       params.set("orderId", orderId);
-      if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
-        console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
-        params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
+      if (effectiveCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+        console.log("Setting cryptoPaymentMethod in URL:", effectiveCryptoPaymentMethod);
+        params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
       } else {
         console.log("Payment method is NONE, not setting in URL");
       }
@@ -705,7 +680,7 @@ function AnySpendInner({
       // For crypto: check payment method first, then recipient
 
       // If no payment method selected, show "Choose payment method"
-      if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+      if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
         return { text: "Choose payment method", disable: false, error: false, loading: false };
       }
 
@@ -714,12 +689,12 @@ function AnySpendInner({
 
       // If payment method selected, show appropriate action
       if (
-        selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
-        selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+        effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+        effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
       ) {
         return { text: "Swap", disable: false, error: false, loading: false };
       }
-      if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+      if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
         return { text: "Continue to payment", disable: false, error: false, loading: false };
       }
     }
@@ -734,7 +709,7 @@ function AnySpendInner({
     isCreatingOnrampOrder,
     anyspendQuote,
     activeTab,
-    selectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
     selectedFiatPaymentMethod,
   ]);
 
@@ -768,7 +743,7 @@ function AnySpendInner({
         // For crypto: check payment method first, then recipient
 
         // If no payment method selected, show payment method selection
-        if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+        if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
           console.log("No payment method selected, showing selection panel");
           navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward");
           return;
@@ -784,12 +759,12 @@ function AnySpendInner({
 
         // If payment method is selected, create order with payment method info
         if (
-          selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
-          selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ||
-          selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO
+          effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+          effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ||
+          effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO
         ) {
-          console.log("Creating crypto order with payment method:", selectedCryptoPaymentMethod);
-          await handleCryptoSwap(selectedCryptoPaymentMethod);
+          console.log("Creating crypto order with payment method:", effectiveCryptoPaymentMethod);
+          await handleCryptoSwap(effectiveCryptoPaymentMethod);
           return;
         }
       }
@@ -802,10 +777,6 @@ function AnySpendInner({
   const onClickHistory = () => {
     setOrderId(undefined);
     navigateToPanel(PanelView.HISTORY, "forward");
-    setB3ModalContentType({
-      type: "anySpendOrderHistory",
-      showBackButton: false,
-    });
     // Remove orderId and paymentMethod from URL when going back to history
     const params = new URLSearchParams(searchParams.toString());
     params.delete("orderId");
@@ -989,7 +960,7 @@ function AnySpendInner({
   );
 
   const orderDetailsView = (
-    <div className={"mx-auto w-[460px] max-w-full px-5"}>
+    <div className={"mx-auto w-[460px] max-w-full"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
           <OrderDetails
@@ -999,13 +970,17 @@ function AnySpendInner({
             relayTxs={oat.data.relayTxs}
             executeTx={oat.data.executeTx}
             refundTxs={oat.data.refundTxs}
-            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
-            onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+            selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
+            onPaymentMethodChange={method => {
+              // When user explicitly changes payment method, set it as selected
+              setSelectedCryptoPaymentMethod(method);
+            }}
             points={oat.data.points || undefined}
             onBack={() => {
               setOrderId(undefined);
               navigateBack();
-              setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
+              // Reset payment methods when going back
+              resetPaymentMethods();
             }}
           />
         )}
@@ -1015,210 +990,191 @@ function AnySpendInner({
   );
 
   const mainView = (
-    <div className={"mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5"}>
-      <div className={"flex w-full max-w-full flex-col items-center gap-2 px-5"}>
-        {/* Token Header - Show when in buy mode */}
-        {isBuyMode && (
-          <div className="mb-4 flex flex-col items-center gap-3 text-center">
-            {selectedDstToken.metadata?.logoURI && (
-              <div className="relative">
-                <img
-                  src={selectedDstToken.metadata.logoURI}
-                  alt={selectedDstToken.symbol}
-                  className="border-as-stroke h-12 w-12 rounded-full border-2 shadow-md"
-                />
-              </div>
-            )}
-            <div>
-              <h1 className="text-as-primary text-xl font-bold">Buy {selectedDstToken.symbol}</h1>
-            </div>
-          </div>
-        )}
-
-        {/* Tab section */}
-        <TabSection
-          activeTab={activeTab}
-          setActiveTab={setActiveTab}
-          setSelectedCryptoPaymentMethod={setSelectedCryptoPaymentMethod}
-          setSelectedFiatPaymentMethod={setSelectedFiatPaymentMethod}
-        />
-
-        <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
-          {/* Send section */}
-          {activeTab === "crypto" ? (
-            <CryptoPaySection
-              selectedSrcChainId={selectedSrcChainId}
-              setSelectedSrcChainId={setSelectedSrcChainId}
-              selectedSrcToken={selectedSrcToken}
-              setSelectedSrcToken={setSelectedSrcToken}
-              srcAmount={srcAmount}
-              setSrcAmount={setSrcAmount}
-              isSrcInputDirty={isSrcInputDirty}
-              setIsSrcInputDirty={setIsSrcInputDirty}
-              selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
-              onSelectCryptoPaymentMethod={() => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward")}
-              anyspendQuote={anyspendQuote}
-              onTokenSelect={onTokenSelect}
-              onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
-            />
-          ) : (
-            <motion.div
-              initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
-              animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
-              transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
-            >
-              <PanelOnramp
-                srcAmountOnRamp={srcAmountOnRamp}
-                setSrcAmountOnRamp={setSrcAmountOnRamp}
-                selectedPaymentMethod={selectedFiatPaymentMethod}
-                setActivePanel={(panelIndex: number) => {
-                  // Map panel index to navigation with direction
-                  const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
-                  if (panelsWithForwardNav.includes(panelIndex)) {
-                    navigateToPanel(panelIndex, "forward");
-                  } else {
-                    setActivePanel(panelIndex);
-                  }
-                }}
-                _recipientAddress={recipientAddress}
-                destinationToken={selectedDstToken}
-                destinationChainId={selectedDstChainId}
-                destinationAmount={dstAmount}
-                onDestinationTokenChange={setSelectedDstToken}
-                onDestinationChainChange={setSelectedDstChainId}
-                fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
-                recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
-                hideDstToken={isBuyMode}
-                anyspendQuote={anyspendQuote}
-                onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
-                onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
-                customUsdInputValues={customUsdInputValues}
+    <div className={"mx-auto flex w-[460px] max-w-full flex-col items-center gap-2"}>
+      {/* Token Header - Show when in buy mode */}
+      {isBuyMode && (
+        <div className="mb-4 flex flex-col items-center gap-3 text-center">
+          {selectedDstToken.metadata?.logoURI && (
+            <div className="relative">
+              <img
+                src={selectedDstToken.metadata.logoURI}
+                alt={selectedDstToken.symbol}
+                className="border-as-stroke h-12 w-12 rounded-full border-2 shadow-md"
               />
-            </motion.div>
+            </div>
           )}
-
-          {/* Reverse swap direction section */}
-          <Button
-            variant="ghost"
-            className={cn(
-              "border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
-              isBuyMode && "top-[calc(50%+56px)] cursor-default",
-              activeTab === "fiat" && "hidden",
-            )}
-            onClick={() => {
-              if (activeTab === "fiat" || isBuyMode) {
-                return;
-              }
-
-              // Swap chain selections
-              const tempSrcChainId = selectedSrcChainId;
-              const tempDstChainId = selectedDstChainId;
-              setSelectedSrcChainId(tempDstChainId);
-              setSelectedDstChainId(tempSrcChainId);
-
-              // Swap token selections
-              const tempSrcToken = selectedSrcToken;
-              const tempDstToken = selectedDstToken;
-              setSelectedSrcToken(tempDstToken);
-              setSelectedDstToken(tempSrcToken);
-
-              // Swap amounts
-              const tempSrcAmount = srcAmount;
-              const tempDstAmount = dstAmount;
-              setSrcAmount(tempDstAmount);
-              setDstAmount(tempSrcAmount);
-            }}
+          <div>
+            <h1 className="text-as-primary text-xl font-bold">Buy {selectedDstToken.symbol}</h1>
+          </div>
+        </div>
+      )}
+
+      {/* Tab section */}
+      <TabSection
+        activeTab={activeTab}
+        setActiveTab={tab => {
+          setActiveTab(tab);
+          // Reset payment methods when switching tabs
+          resetPaymentMethods();
+          setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
+        }}
+        setSelectedCryptoPaymentMethod={setSelectedCryptoPaymentMethod}
+        setSelectedFiatPaymentMethod={setSelectedFiatPaymentMethod}
+      />
+
+      <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
+        {/* Send section */}
+        {activeTab === "crypto" ? (
+          <CryptoPaySection
+            selectedSrcChainId={selectedSrcChainId}
+            setSelectedSrcChainId={setSelectedSrcChainId}
+            selectedSrcToken={selectedSrcToken}
+            setSelectedSrcToken={setSelectedSrcToken}
+            srcAmount={srcAmount}
+            setSrcAmount={setSrcAmount}
+            isSrcInputDirty={isSrcInputDirty}
+            setIsSrcInputDirty={setIsSrcInputDirty}
+            selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
+            onSelectCryptoPaymentMethod={() => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward")}
+            anyspendQuote={anyspendQuote}
+            onTokenSelect={onTokenSelect}
+            onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
+          />
+        ) : (
+          <motion.div
+            initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
+            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+            transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
           >
-            <div className="relative flex items-center justify-center transition-opacity">
-              <ArrowDown className="text-as-primary/50 h-5 w-5" />
-            </div>
-          </Button>
-
-          {/* Receive section - Hidden when fiat tab is active */}
-          {activeTab === "crypto" && (
-            <CryptoReceiveSection
-              isDepositMode={false}
-              isBuyMode={isBuyMode}
-              selectedRecipientAddress={recipientAddress}
-              recipientName={recipientName || undefined}
-              onSelectRecipient={() => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward")}
-              setRecipientAddress={setRecipientAddress}
-              recipientAddressFromProps={recipientAddressFromProps}
-              globalAddress={globalAddress}
-              dstAmount={dstAmount}
-              dstToken={selectedDstToken}
-              selectedDstChainId={selectedDstChainId}
-              setSelectedDstChainId={setSelectedDstChainId}
-              setSelectedDstToken={setSelectedDstToken}
-              isSrcInputDirty={isSrcInputDirty}
-              onChangeDstAmount={value => {
-                setIsSrcInputDirty(false);
-                setDstAmount(value);
+            <PanelOnramp
+              srcAmountOnRamp={srcAmountOnRamp}
+              setSrcAmountOnRamp={setSrcAmountOnRamp}
+              selectedPaymentMethod={selectedFiatPaymentMethod}
+              setActivePanel={(panelIndex: number) => {
+                // Map panel index to navigation with direction
+                const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
+                if (panelsWithForwardNav.includes(panelIndex)) {
+                  navigateToPanel(panelIndex, "forward");
+                } else {
+                  setActivePanel(panelIndex);
+                }
               }}
+              _recipientAddress={recipientAddress}
+              destinationToken={selectedDstToken}
+              destinationChainId={selectedDstChainId}
+              destinationAmount={dstAmount}
+              onDestinationTokenChange={setSelectedDstToken}
+              onDestinationChainChange={setSelectedDstChainId}
+              fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
+              recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
+              hideDstToken={isBuyMode}
               anyspendQuote={anyspendQuote}
               onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
               onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
-              selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+              customUsdInputValues={customUsdInputValues}
             />
-          )}
-        </div>
+          </motion.div>
+        )}
 
-        {/* Main button section */}
-        <motion.div
-          initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
-          animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
-          transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
-          className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2")}
-        >
-          <ShinyButton
-            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",
-            )}
-            textClassName={cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white")}
-          >
-            <div className="flex items-center justify-center gap-2">
-              {btnInfo.loading && <Loader2 className="h-4 w-4 animate-spin" />}
-              {btnInfo.text}
-            </div>
-          </ShinyButton>
-
-          {!hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (
-            <Button
-              variant="link"
-              onClick={onClickHistory}
-              className="text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors"
-            >
-              <HistoryIcon className="h-4 w-4" /> <span className="pr-4">Transaction History</span>
-            </Button>
-          ) : null}
-        </motion.div>
-      </div>
-      <div className="w-full">
-        <TabsPrimitive
-          defaultValue="swap"
-          onValueChange={value => {
-            if (value === "settings" || value === "home") {
-              setB3ModalContentType({
-                type: "manageAccount",
-                activeTab: value,
-                setActiveTab: () => {},
-                chain: baseChain,
-                partnerId,
-              });
-            } else if (value === "swap") {
-              setB3ModalContentType({
-                type: "anySpend",
-              });
+        {/* Reverse swap direction section */}
+        <Button
+          variant="ghost"
+          className={cn(
+            "border-as-stroke bg-as-surface-primary absolute left-1/2 top-1/2 z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
+            isBuyMode && "top-[calc(50%+56px)] cursor-default",
+            activeTab === "fiat" && "hidden",
+          )}
+          onClick={() => {
+            if (activeTab === "fiat" || isBuyMode) {
+              return;
             }
+
+            // Swap chain selections
+            const tempSrcChainId = selectedSrcChainId;
+            const tempDstChainId = selectedDstChainId;
+            setSelectedSrcChainId(tempDstChainId);
+            setSelectedDstChainId(tempSrcChainId);
+
+            // Swap token selections
+            const tempSrcToken = selectedSrcToken;
+            const tempDstToken = selectedDstToken;
+            setSelectedSrcToken(tempDstToken);
+            setSelectedDstToken(tempSrcToken);
+
+            // Swap amounts
+            const tempSrcAmount = srcAmount;
+            const tempDstAmount = dstAmount;
+            setSrcAmount(tempDstAmount);
+            setDstAmount(tempSrcAmount);
           }}
         >
-          <BottomNavigation />
-        </TabsPrimitive>
+          <div className="relative flex items-center justify-center transition-opacity">
+            <ArrowDown className="text-as-primary/50 h-5 w-5" />
+          </div>
+        </Button>
+
+        {/* Receive section - Hidden when fiat tab is active */}
+        {activeTab === "crypto" && (
+          <CryptoReceiveSection
+            isDepositMode={false}
+            isBuyMode={isBuyMode}
+            selectedRecipientAddress={recipientAddress}
+            recipientName={recipientName || undefined}
+            onSelectRecipient={() => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward")}
+            setRecipientAddress={setRecipientAddress}
+            recipientAddressFromProps={recipientAddressFromProps}
+            globalAddress={globalAddress}
+            dstAmount={dstAmount}
+            dstToken={selectedDstToken}
+            selectedDstChainId={selectedDstChainId}
+            setSelectedDstChainId={setSelectedDstChainId}
+            setSelectedDstToken={setSelectedDstToken}
+            isSrcInputDirty={isSrcInputDirty}
+            onChangeDstAmount={value => {
+              setIsSrcInputDirty(false);
+              setDstAmount(value);
+            }}
+            anyspendQuote={anyspendQuote}
+            onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
+            onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
+            selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
+          />
+        )}
       </div>
+
+      {/* Main button section */}
+      <motion.div
+        initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
+        animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+        transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
+        className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2")}
+      >
+        <ShinyButton
+          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",
+          )}
+          textClassName={cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white")}
+        >
+          <div className="flex items-center justify-center gap-2">
+            {btnInfo.loading && <Loader2 className="h-4 w-4 animate-spin" />}
+            {btnInfo.text}
+          </div>
+        </ShinyButton>
+
+        {!hideTransactionHistoryButton && (globalAddress || recipientAddress) ? (
+          <Button
+            variant="link"
+            onClick={onClickHistory}
+            className="text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors"
+          >
+            <HistoryIcon className="h-4 w-4" /> <span className="pr-4">Transaction History</span>
+          </Button>
+        ) : null}
+      </motion.div>
     </div>
   );
 
@@ -1251,7 +1207,7 @@ function AnySpendInner({
       }}
       onBack={navigateBack}
       recipientEnsName={globalWallet?.ensName}
-      recipientImageUrl={globalWalletImage}
+      recipientImageUrl={globalWallet?.meta?.icon}
     />
   );
 
@@ -1268,11 +1224,17 @@ function AnySpendInner({
 
   const cryptoPaymentMethodView = (
     <CryptoPaymentMethod
-      selectedPaymentMethod={selectedCryptoPaymentMethod}
-      setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
+      globalAddress={globalAddress}
+      globalWallet={globalWallet}
+      selectedPaymentMethod={effectiveCryptoPaymentMethod}
+      setSelectedPaymentMethod={method => {
+        // When user explicitly selects a payment method, save it
+        setSelectedCryptoPaymentMethod(method);
+      }}
       isCreatingOrder={isCreatingOrder}
       onBack={navigateBack}
       onSelectPaymentMethod={(method: CryptoPaymentMethodType) => {
+        // When user explicitly selects a payment method, save it and go back
         setSelectedCryptoPaymentMethod(method);
         navigateBack();
       }}