@b3dotfun/sdk 0.0.65-alpha.0 → 0.0.65-test.3

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

@@ -12,8 +12,11 @@ import {
   Button,
   ShinyButton,
   StyleRoot,
+  TabsPrimitive,
   TransitionPanel,
   useAccountWallet,
+  useB3,
+  useModalStore,
   useProfile,
   useRouter,
   useSearchParamsSSR,
@@ -21,6 +24,8 @@ 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";
@@ -28,6 +33,7 @@ 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";
@@ -120,6 +126,31 @@ 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);
 
@@ -444,6 +475,8 @@ function AnySpendInner({
   const recipientProfile = useProfile({ address: recipientAddress, fresh: true });
   const recipientName = recipientProfile.data?.name;
 
+  const globalWalletImage = useAccountWalletImage();
+
   // Auto-set active wallet from wagmi
   useAutoSetActiveWalletFromWagmi();
 
@@ -769,6 +802,10 @@ 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");
@@ -952,7 +989,7 @@ function AnySpendInner({
   );
 
   const orderDetailsView = (
-    <div className={"mx-auto w-[460px] max-w-full"}>
+    <div className={"mx-auto w-[460px] max-w-full px-5"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
           <OrderDetails
@@ -979,185 +1016,209 @@ function AnySpendInner({
 
   const mainView = (
     <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"
-              />
+      <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>
-            <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" }}
+        )}
+
+        {/* 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}
+              />
+            </motion.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);
+            }}
           >
-            <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);
-                }
+            <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);
               }}
-              _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}
+              selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
             />
-          </motion.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;
-            }
+        </div>
 
-            // 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);
-          }}
+        {/* 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")}
         >
-          <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={selectedCryptoPaymentMethod}
-          />
-        )}
+          <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>
-
-      {/* 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="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",
+              });
+            }
+          }}
         >
-          <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>
+          <BottomNavigation />
+        </TabsPrimitive>
+      </div>
     </div>
   );
 
@@ -1190,7 +1251,7 @@ function AnySpendInner({
       }}
       onBack={navigateBack}
       recipientEnsName={globalWallet?.ensName}
-      recipientImageUrl={globalWallet?.meta?.icon}
+      recipientImageUrl={globalWalletImage}
     />
   );
 
@@ -1207,8 +1268,6 @@ function AnySpendInner({
 
   const cryptoPaymentMethodView = (
     <CryptoPaymentMethod
-      globalAddress={globalAddress}
-      globalWallet={globalWallet}
       selectedPaymentMethod={selectedCryptoPaymentMethod}
       setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
       isCreatingOrder={isCreatingOrder}

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

@@ -664,7 +664,7 @@ function AnySpendCustomInner({
   const historyView = (
     <div
       className={cn(
-        "mx-auto flex w-full max-w-2xl flex-col items-center p-5",
+        "mx-auto flex w-full max-w-2xl flex-col items-center",
         mode === "modal" && "bg-b3-react-background",
       )}
     >
@@ -1237,8 +1237,6 @@ function AnySpendCustomInner({
   const cryptoPaymentMethodView = (
     <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
       <CryptoPaymentMethod
-        globalAddress={currentWallet?.wallet?.address}
-        globalWallet={currentWallet?.wallet}
         selectedPaymentMethod={selectedCryptoPaymentMethod}
         setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
         isCreatingOrder={isCreatingOrder}

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

@@ -499,8 +499,6 @@ function AnySpendCustomExactInInner({
 
   const cryptoPaymentMethodView = (
     <CryptoPaymentMethod
-      globalAddress={globalAddress}
-      globalWallet={undefined}
       selectedPaymentMethod={selectedCryptoPaymentMethod}
       setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
       isCreatingOrder={isCreatingOrder}

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

@@ -464,8 +464,6 @@ function AnySpendDepositHypeInner({
 
   const cryptoPaymentMethodView = (
     <CryptoPaymentMethod
-      globalAddress={globalAddress}
-      globalWallet={undefined}
       selectedPaymentMethod={selectedCryptoPaymentMethod}
       setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
       isCreatingOrder={isCreatingOrder}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
+import { useAccountWalletImage } from "@b3dotfun/sdk/global-account/react/hooks/useAccountWallet";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
@@ -22,12 +23,6 @@ export enum CryptoPaymentMethodType {
 }
 
 interface CryptoPaymentMethodProps {
-  globalAddress?: string;
-  globalWallet?: {
-    meta?: {
-      icon?: string;
-    };
-  };
   selectedPaymentMethod: CryptoPaymentMethodType;
   setSelectedPaymentMethod: (method: CryptoPaymentMethodType) => void;
   isCreatingOrder: boolean;
@@ -42,11 +37,7 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const {
-    wallet: globalWallet,
-    connectedEOAWallet: connectedEOAWallet,
-    connectedSmartWallet: connectedSmartWallet,
-  } = useAccountWallet();
+  const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = useAccountWallet();
   const { connector, address } = useAccount();
   const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
@@ -58,6 +49,8 @@ export function CryptoPaymentMethod({
   const isConnected = !!connectedEOAWallet;
   const globalAddress = connectedSmartWallet?.getAccount()?.address;
 
+  const walletImage = useAccountWalletImage();
+
   // Use custom hook to determine wallet display logic
   const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
 
@@ -192,7 +185,7 @@ export function CryptoPaymentMethod({
   };
 
   return (
-    <div className="crypto-payment-method mx-auto h-fit w-[460px] max-w-full">
+    <div className="crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5">
       <div className={cn("relative flex flex-col gap-10")}>
         {/* Header */}
         <button
@@ -341,8 +334,8 @@ export function CryptoPaymentMethod({
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-3">
-                        {globalWallet?.meta?.icon ? (
-                          <img src={globalWallet.meta.icon} alt="Global Account" className="h-10 w-10 rounded-full" />
+                        {walletImage ? (
+                          <img src={walletImage} alt="Global Account" className="h-10 w-10 rounded-full" />
                         ) : (
                           <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100">
                             <Wallet className="h-5 w-5 text-purple-600" />

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

@@ -83,7 +83,7 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
   const [showAllDiscountTiers, setShowAllDiscountTiers] = useState(false);
 
   return (
-    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-3">
+    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-3 px-5">
       <div className="flex w-full flex-col gap-3">
         <div className="text-center">
           <h3 className="text-as-primary text-lg font-bold">Fee Breakdown</h3>

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

@@ -81,7 +81,7 @@ export function FiatPaymentMethodComponent({
   // Show loading state while checking geo availability
   if (isLoadingGeoOnramp) {
     return (
-      <div className="fiat-payment-method mx-auto w-[460px] max-w-full">
+      <div className="fiat-payment-method mx-auto w-[460px] max-w-full px-5">
         <div className="flex flex-col gap-6">
           <div className="flex items-center gap-4">
             <button
@@ -104,7 +104,7 @@ export function FiatPaymentMethodComponent({
   }
 
   return (
-    <div className="fiat-payment-method mx-auto w-[460px] max-w-full">
+    <div className="fiat-payment-method mx-auto w-[460px] max-w-full px-5">
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className="flex items-center gap-4">