@b3dotfun/sdk 0.0.64 → 0.0.65-test.1

package/dist/types/global-account/react/components/index.d.ts

@@ -13,6 +13,8 @@ export { SignInWithB3Privy } from "./SignInWithB3/SignInWithB3Privy";
 export { LoginStepContainer } from "./SignInWithB3/steps/LoginStep";
 export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } from "./SignInWithB3/utils/signInUtils";
 export { ManageAccount } from "./ManageAccount/ManageAccount";
+export { Deposit } from "./Deposit/Deposit";
+export { Send } from "./Send/Send";
 export { AvatarEditor } from "./AvatarEditor/AvatarEditor";
 export { ProfileEditor } from "./ProfileEditor/ProfileEditor";
 export { RequestPermissions } from "./RequestPermissions/RequestPermissions";
@@ -40,8 +42,8 @@ export { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 export { ScrollArea, ScrollBar } from "./ui/scroll-area";
 export { ShinyButton } from "./ui/ShinyButton";
 export { Skeleton } from "./ui/skeleton";
-export { TabTrigger as TabTriggerPrimitive, TabsContent as TabsContentPrimitive, TabsList as TabsListPrimitive, Tabs as TabsPrimitive, } from "./ui/Tabs";
-export { TabTrigger, Tabs, TabsContent, TabsList, TabsTransitionWrapper } from "./ui/TabSystem";
+export { TabsContent as TabsContentPrimitive, TabsList as TabsListPrimitive, Tabs as TabsPrimitive, TabTrigger as TabTriggerPrimitive, } from "./ui/Tabs";
+export { Tabs, TabsContent, TabsList, TabsTransitionWrapper, TabTrigger } from "./ui/TabSystem";
 export { TextLoop } from "./ui/text-loop";
 export { TextShimmer } from "./ui/text-shimmer";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";

package/dist/types/global-account/react/hooks/index.d.ts

@@ -23,7 +23,7 @@ export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 export { useMediaQuery } from "./useMediaQuery";
 export { useNativeBalance, useNativeBalanceFromRPC } from "./useNativeBalance";
 export { useOneBalance } from "./useOneBalance";
-export { useProfile, useProfilePreference, type CombinedProfile, type PreferenceRequestBody, type Profile, } from "./useProfile";
+export { useProfile, useProfilePreference, useProfileSettings, useDisplayName, type CombinedProfile, type PreferenceRequestBody, type Profile, type DisplayNameRequestBody, } from "./useProfile";
 export { useQueryB3 } from "./useQueryB3";
 export { useQueryBSMNT } from "./useQueryBSMNT";
 export { useRemoveSessionKey } from "./useRemoveSessionKey";

package/dist/types/global-account/react/hooks/useGlobalAccount.d.ts

@@ -3,4 +3,5 @@ export declare function useGlobalAccount(): {
     account: Wallet | undefined;
     address: string | undefined;
     info: import("@tanstack/react-query").UseQueryResult<import("thirdweb/wallets").WalletInfo, Error>;
+    wallet: Wallet | undefined;
 };

package/dist/types/global-account/react/stores/index.d.ts

@@ -1,3 +1,4 @@
 export { useAuthStore } from "./useAuthStore";
 export { useModalStore } from "./useModalStore";
+export { useRecentAddressesStore } from "./useRecentAddressesStore";
 export type { AnySpendBuySpinProps, AnySpendFundTournamentProps, AnySpendJoinTournamentProps, AnySpendModalProps, AnySpendNftProps, AnySpendOrderHistoryProps, AnySpendStakeB3Props, AnyspendOrderDetailsProps, ManageAccountModalProps, ModalContentType, RequestPermissionsModalProps, SignInWithB3ModalProps, } from "./useModalStore";

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -77,9 +77,9 @@ export interface ManageAccountModalProps extends BaseModalProps {
     /** Partner ID */
     partnerId: string;
     /** Active Tab */
-    activeTab?: "overview" | "tokens" | "nfts" | "apps" | "settings";
+    activeTab?: "home" | "tokens" | "nfts" | "apps" | "settings" | "swap";
     /** Function to set the active tab */
-    setActiveTab?: (tab: "overview" | "tokens" | "nfts" | "apps" | "settings") => void;
+    setActiveTab?: (tab: "home" | "tokens" | "nfts" | "apps" | "settings" | "swap") => void;
     /** Whether to show the referral information */
     showReferralInfo?: boolean;
     /** Whether to show the swap button */
@@ -325,6 +325,15 @@ export interface LinkAccountModalProps extends BaseModalProps {
     partnerId: string;
     chain: Chain;
 }
+export interface LinkNewAccountModalProps extends BaseModalProps {
+    type: "linkNewAccount";
+    showBackButton?: boolean;
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+    onClose?: () => void;
+    partnerId: string;
+    chain: Chain;
+}
 export interface AnySpendDepositHypeProps extends BaseModalProps {
     /** Modal type identifier */
     type: "anySpendDepositHype";
@@ -357,10 +366,32 @@ export interface ProfileEditorModalProps extends BaseModalProps {
     /** Callback function called when profile is successfully updated */
     onSuccess?: () => void;
 }
+/**
+ * Props for the Deposit modal
+ * Allows users to deposit tokens into their global account
+ */
+export interface DepositModalProps extends BaseModalProps {
+    /** Modal type identifier */
+    type: "deposit";
+    /** Callback function called when deposit is successful */
+    onSuccess?: () => void;
+}
+/**
+ * Props for the Send modal
+ * Allows users to send tokens from their global account to another address
+ */
+export interface SendModalProps extends BaseModalProps {
+    /** Modal type identifier */
+    type: "send";
+    /** Pre-filled recipient address (optional) */
+    recipientAddress?: string;
+    /** Callback function called when send is successful */
+    onSuccess?: (txHash?: string) => void;
+}
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | ProfileEditorModalProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendStakeB3ExactInProps | AnySpendStakeUpsideProps | AnySpendStakeUpsideExactInProps | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | LinkNewAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps | DepositModalProps | SendModalProps | ProfileEditorModalProps;
 /**
  * State interface for the modal store
  */

package/dist/types/global-account/react/stores/useRecentAddressesStore.d.ts

@@ -0,0 +1,25 @@
+interface RecentAddress {
+    address: string;
+    timestamp: number;
+}
+interface RecentAddressesStore {
+    recentAddresses: RecentAddress[];
+    addRecentAddress: (address: string) => void;
+    clearRecentAddresses: () => void;
+}
+/**
+ * Store for managing recently used addresses in the Send flow
+ * Persists to localStorage and keeps the last 6 unique addresses
+ */
+export declare const useRecentAddressesStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<RecentAddressesStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<RecentAddressesStore, RecentAddressesStore>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: RecentAddressesStore) => void) => () => void;
+        onFinishHydration: (fn: (state: RecentAddressesStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<RecentAddressesStore, RecentAddressesStore>>;
+    };
+}>;
+export {};

package/dist/types/global-account/react/utils/profileDisplay.d.ts

@@ -13,6 +13,8 @@ export interface ExtendedProfileDetails {
     name?: string;
     username?: string;
     profileImageUrl?: string;
+    picture?: string;
+    pfpUrl?: string;
 }
 export interface ExtendedProfile extends Omit<Profile, "details"> {
     details: ExtendedProfileDetails;

package/dist/types/shared/constants/chains/supported.d.ts

@@ -53,10 +53,10 @@ export declare function getCoingeckoChainInfo(chainId: number): {
     name: string;
     native_coin_id: string;
 };
-export declare const b3MainnetThirdWeb: Readonly<import("thirdweb/dist/types/chains/types").ChainOptions & {
+export declare const b3MainnetThirdWeb: Readonly<import("thirdweb/chains").ChainOptions & {
     rpc: string;
 }>;
-export declare const b3TestnetThirdWeb: Readonly<import("thirdweb/dist/types/chains/types").ChainOptions & {
+export declare const b3TestnetThirdWeb: Readonly<import("thirdweb/chains").ChainOptions & {
     rpc: string;
 }>;
 export declare const b3Mainnet: import("viem").Chain;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.64",
+  "version": "0.0.65-test.1",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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,7 @@ import {
   useTokenData,
   useTokenFromUrl,
 } from "@b3dotfun/sdk/global-account/react";
+import BottomNavigation from "@b3dotfun/sdk/global-account/react/components/ManageAccount/BottomNavigation";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
@@ -28,6 +32,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 +125,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);
 
@@ -769,6 +799,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 +986,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 +1013,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>
   );
 

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",
       )}
     >