@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.1

package/src/global-account/react/components/ManageAccount/BottomNavigation.tsx

@@ -0,0 +1,83 @@
+import { TabsListPrimitive, TabTriggerPrimitive, useModalStore } from "@b3dotfun/sdk/global-account/react";
+
+const HomeIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.5227 1.33636C12.1804 1.24368 11.8196 1.24368 11.4773 1.33636C11.08 1.44395 10.7454 1.7066 10.4784 1.91623L10.4038 1.97465L3.54376 7.31012C3.16713 7.6024 2.83532 7.85991 2.58806 8.19421C2.37107 8.48759 2.20942 8.8181 2.11106 9.1695C1.99898 9.56992 1.99943 9.98993 1.99995 10.4667L2.00002 17.8385C2 18.3657 1.99998 18.8204 2.03059 19.195C2.06289 19.5904 2.1342 19.9836 2.327 20.362C2.61462 20.9264 3.07356 21.3854 3.63805 21.673C4.01643 21.8658 4.40964 21.9371 4.80499 21.9694C5.17956 22 5.63431 22 6.16145 22H17.8386C18.3657 22 18.8205 22 19.195 21.9694C19.5904 21.9371 19.9836 21.8658 20.362 21.673C20.9265 21.3854 21.3854 20.9264 21.673 20.362C21.8658 19.9836 21.9371 19.5904 21.9694 19.195C22.0001 18.8204 22 18.3657 22 17.8386L22.0001 10.4667C22.0006 9.98993 22.0011 9.56992 21.889 9.1695C21.7906 8.8181 21.629 8.48759 21.412 8.19421C21.1647 7.8599 20.8329 7.6024 20.4563 7.31011L13.5963 1.97465L13.5216 1.91623C13.2546 1.7066 12.9201 1.44395 12.5227 1.33636ZM8.00003 16C7.44775 16 7.00003 16.4477 7.00003 17C7.00003 17.5523 7.44775 18 8.00003 18H16C16.5523 18 17 17.5523 17 17C17 16.4477 16.5523 16 16 16H8.00003Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+const SwapIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M20.4533 12.893C20.1755 15.5029 18.6968 17.9487 16.2498 19.3614C12.1843 21.7086 6.98576 20.3157 4.63855 16.2502L4.38855 15.8172M3.5465 11.107C3.8243 8.49711 5.30309 6.05138 7.75007 4.63862C11.8156 2.29141 17.0141 3.68434 19.3613 7.74983L19.6113 8.18285M3.49353 18.0661L4.22558 15.334L6.95763 16.0661M17.0428 7.93401L19.7748 8.66606L20.5069 5.93401"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+const SettingsIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.286 15.9606C19.2272 15.6362 19.2669 15.3016 19.4 15C19.5268 14.7042 19.7372 14.452 20.0055 14.2743C20.2738 14.0966 20.5882 14.0013 20.91 14H21C21.5304 14 22.0391 13.7893 22.4142 13.4142C22.7893 13.0391 23 12.5304 23 12C23 11.4696 22.7893 10.9609 22.4142 10.5858C22.0391 10.2107 21.5304 10 21 10H20.83C20.5082 9.99872 20.1938 9.90337 19.9255 9.72569C19.6572 9.54802 19.4468 9.29577 19.32 9V8.92C19.1869 8.61838 19.1472 8.28381 19.206 7.95941C19.2648 7.63502 19.4195 7.33568 19.65 7.1L19.71 7.04C19.896 6.85425 20.0435 6.63368 20.1441 6.39088C20.2448 6.14808 20.2966 5.88783 20.2966 5.625C20.2966 5.36217 20.2448 5.10192 20.1441 4.85912C20.0435 4.61632 19.896 4.39575 19.71 4.21C19.5243 4.02405 19.3037 3.87653 19.0609 3.77588C18.8181 3.67523 18.5578 3.62343 18.295 3.62343C18.0322 3.62343 17.7719 3.67523 17.5291 3.77588C17.2863 3.87653 17.0657 4.02405 16.88 4.21L16.82 4.27C16.5843 4.50054 16.285 4.65519 15.9606 4.714C15.6362 4.77282 15.3016 4.73312 15 4.6C14.7042 4.47324 14.452 4.26276 14.2743 3.99447C14.0966 3.72618 14.0013 3.41179 14 3.09V3C14 2.46957 13.7893 1.96086 13.4142 1.58579C13.0391 1.21071 12.5304 1 12 1C11.4696 1 10.9609 1.21071 10.5858 1.58579C10.2107 1.96086 10 2.46957 10 3V3.17C9.99872 3.49179 9.90337 3.80618 9.72569 4.07447C9.54802 4.34276 9.29577 4.55324 9 4.68H8.92C8.61838 4.81312 8.28381 4.85282 7.95941 4.794C7.63502 4.73519 7.33568 4.58054 7.1 4.35L7.04 4.29C6.85425 4.10405 6.63368 3.95653 6.39088 3.85588C6.14808 3.75523 5.88783 3.70343 5.625 3.70343C5.36217 3.70343 5.10192 3.75523 4.85912 3.85588C4.61632 3.95653 4.39575 4.10405 4.21 4.29C4.02405 4.47575 3.87653 4.69632 3.77588 4.93912C3.67523 5.18192 3.62343 5.44217 3.62343 5.705C3.62343 5.96783 3.67523 6.22808 3.77588 6.47088C3.87653 6.71368 4.02405 6.93425 4.21 7.12L4.27 7.18C4.50054 7.41568 4.65519 7.71502 4.714 8.03941C4.77282 8.36381 4.73312 8.69838 4.6 9C4.48572 9.31074 4.28059 9.5799 4.0113 9.77251C3.742 9.96512 3.42099 10.0723 3.09 10.08H3C2.46957 10.08 1.96086 10.2907 1.58579 10.6658C1.21071 11.0409 1 11.5496 1 12.08C1 12.6104 1.21071 13.1191 1.58579 13.4942C1.96086 13.8693 2.46957 14.08 3 14.08H3.17C3.49179 14.0813 3.80618 14.1766 4.07447 14.3543C4.34276 14.532 4.55324 14.7842 4.68 15.08C4.81312 15.3816 4.85282 15.7162 4.794 16.0406C4.73519 16.365 4.58054 16.6643 4.35 16.9L4.29 16.96C4.10405 17.1457 3.95653 17.3663 3.85588 17.6091C3.75523 17.8519 3.70343 18.1122 3.70343 18.375C3.70343 18.6378 3.75523 18.8981 3.85588 19.1409C3.95653 19.3837 4.10405 19.6043 4.29 19.79C4.47575 19.976 4.69632 20.1235 4.93912 20.2241C5.18192 20.3248 5.44217 20.3766 5.705 20.3766C5.96783 20.3766 6.22808 20.3248 6.47088 20.2241C6.71368 20.1235 6.93425 19.976 7.12 19.79L7.18 19.73C7.41568 19.4995 7.71502 19.3448 8.03941 19.286C8.36381 19.2272 8.69838 19.2669 9 19.4C9.31074 19.5143 9.5799 19.7194 9.77251 19.9887C9.96512 20.258 10.0723 20.579 10.08 20.91V21C10.08 21.5304 10.2907 22.0391 10.6658 22.4142C11.0409 22.7893 11.5496 23 12.08 23C12.6104 23 13.1191 22.7893 13.4942 22.4142C13.8693 22.0391 14.08 21.5304 14.08 21V20.83C14.0813 20.5082 14.1766 20.1938 14.3543 19.9255C14.532 19.6572 14.7842 19.4468 15.08 19.32C15.3816 19.1869 15.7162 19.1472 16.0406 19.206C16.365 19.2648 16.6643 19.4195 16.9 19.65L16.96 19.71C17.1457 19.896 17.3663 20.0435 17.6091 20.1441C17.8519 20.2448 18.1122 20.2966 18.375 20.2966C18.6378 20.2966 18.8981 20.2448 19.1409 20.1441C19.3837 20.0435 19.6043 19.896 19.79 19.71C19.976 19.5243 20.1235 19.3037 20.2241 19.0609C20.3248 18.8181 20.3766 18.5578 20.3766 18.295C20.3766 18.0322 20.3248 17.7719 20.2241 17.5291C20.1235 17.2863 19.976 17.0657 19.79 16.88L19.73 16.82C19.4995 16.5843 19.3448 16.285 19.286 15.9606ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+const BottomNavigation = () => {
+  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+
+  return (
+    <div className="b3-modal-bottom-navigation sticky bottom-0 left-0 w-full rounded-b-xl border-t border-gray-200 bg-[#FAFAFA]">
+      <TabsListPrimitive className="flex h-[68px] w-full items-center justify-center gap-4 border-none bg-transparent">
+        <TabTriggerPrimitive
+          value="home"
+          className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]"
+        >
+          <HomeIcon />
+          <span className="text-b3-grey font-neue-montreal-semibold text-xs">Home</span>
+        </TabTriggerPrimitive>
+
+        <TabTriggerPrimitive
+          value="swap"
+          className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]"
+          onClick={() => {
+            setB3ModalContentType({
+              type: "anySpend",
+              showBackButton: true,
+            });
+          }}
+        >
+          <SwapIcon />
+          <span className="text-b3-grey font-neue-montreal-semibold text-xs">Swap</span>
+        </TabTriggerPrimitive>
+
+        <TabTriggerPrimitive
+          value="settings"
+          className="data-[state=active]:border-b3-primary-blue group flex flex-initial flex-col items-center gap-1 border-r-0 border-t-0 px-6 pb-2 pt-2.5 text-[#a0a0ab] data-[state=active]:border-t-4 data-[state=active]:text-[#18181B]"
+        >
+          <SettingsIcon />
+          <span className="text-b3-grey font-neue-montreal-semibold text-xs">Settings</span>
+        </TabTriggerPrimitive>
+      </TabsListPrimitive>
+    </div>
+  );
+};
+
+export default BottomNavigation;

package/src/global-account/react/components/ManageAccount/ContentTokens.tsx

@@ -2,6 +2,7 @@ import { ALL_CHAINS, getExplorerTxUrl } from "@b3dotfun/sdk/anyspend";
 import { ChainTokenIcon } from "@b3dotfun/sdk/anyspend/react/components/common/ChainTokenIcon";
 import {
   Button,
+  toast,
   TransitionPanel,
   useAnalytics,
   useSimBalance,
@@ -12,7 +13,7 @@ import invariant from "invariant";
 import { ArrowLeft, CircleHelp, Copy, Loader2, Send } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { NumericFormat } from "react-number-format";
-import { toast } from "sonner";
+
 import { useActiveAccount } from "thirdweb/react";
 import { encodeFunctionData, erc20Abi, isAddress, parseUnits } from "viem";
 import { SimBalanceItem } from "../../hooks/useSimBalance";

package/src/global-account/react/components/ManageAccount/Header.tsx

@@ -0,0 +1,230 @@
+import {
+  CopyToClipboard,
+  ManageAccountModalProps,
+  useAuthentication,
+  useModalStore,
+} from "@b3dotfun/sdk/global-account/react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { AnimatePresence, motion } from "framer-motion";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
+import { useActiveWallet, useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
+import { Wallet } from "thirdweb/wallets";
+import { ChevronDownIcon } from "../icons/ChevronDownIcon";
+import LinkIcon from "../icons/LinkIcon";
+import SignOutIcon from "../icons/SignOutIcon";
+import { WalletIcon } from "../icons/WalletIcon";
+
+function centerTruncate(str: string, length = 4) {
+  if (!str) return "";
+  if (str.length <= length * 2) return str;
+  return `${str.slice(0, length)}...${str.slice(-length)}`;
+}
+
+// Check icon component
+const CheckIcon = ({ className }: { className?: string }) => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path
+      d="M16.6668 5L7.50016 14.1667L3.3335 10"
+      stroke="#0C68E9"
+      strokeWidth="1.66667"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// Wallet item component
+function WalletItem({ wallet, isActive, onClick }: { wallet: Wallet; isActive: boolean; onClick: () => void }) {
+  const account = wallet.getAccount();
+  const address = account?.address || "";
+  const { data: walletImage } = useWalletImage(wallet.id);
+
+  // Check if this is a global account (ecosystem wallet)
+  const isGlobalAccount = wallet.id.includes("ecosystem");
+
+  // Get wallet name from wallet metadata
+  const walletName = wallet.id.includes("coinbase")
+    ? "Coinbase Wallet"
+    : wallet.id.includes("metamask")
+      ? "MetaMask Wallet"
+      : wallet.id.includes("phantom")
+        ? "Phantom Wallet"
+        : wallet.id.includes("walletConnect")
+          ? "WalletConnect"
+          : isGlobalAccount
+            ? "Smart Wallet"
+            : "Wallet";
+
+  return (
+    <div
+      className={`b3-modal-wallet-item ${
+        isActive ? "b3-modal-wallet-item-active bg-[#F4F4F5]" : "hover:bg-b3-line/50"
+      } box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors`}
+      onClick={onClick}
+    >
+      <div className="relative size-10 shrink-0 text-clip rounded-full">
+        {isGlobalAccount ? (
+          <div className="flex size-full items-center justify-center p-1">
+            <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="size-full object-contain" />
+          </div>
+        ) : walletImage ? (
+          <img src={walletImage} alt={walletName} className="size-full object-contain p-1" />
+        ) : (
+          <div className="flex size-full items-center justify-center">
+            <WalletIcon />
+          </div>
+        )}
+      </div>
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <p className="text-b3-grey font-neue-montreal-semibold truncate text-sm">{walletName}</p>
+        <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">{centerTruncate(address, 4)}</p>
+      </div>
+      {isActive && (
+        <div className="shrink-0">
+          <CheckIcon />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function Header({ onLogout }: { onLogout?: () => void }) {
+  const activeWallet = useActiveWallet();
+
+  const connectedWallets = useConnectedWallets();
+  const setActiveWallet = useSetActiveWallet();
+  const contentType = useModalStore(state => state.contentType) as ManageAccountModalProps;
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+  const partnerId = contentType?.partnerId;
+
+  const { logout } = useAuthentication(partnerId);
+  const [logoutLoading, setLogoutLoading] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const account = activeWallet?.getAccount();
+  const address = account?.address || "";
+  const { data: activeWalletImage } = useWalletImage(activeWallet?.id);
+  const isActiveGlobalAccount = activeWallet?.id.includes("ecosystem");
+
+  const onLogoutEnhanced = async () => {
+    setLogoutLoading(true);
+    await logout();
+    onLogout?.();
+    setB3ModalOpen(false);
+    setLogoutLoading(false);
+  };
+
+  const handleWalletSwitch = (wallet: Wallet) => {
+    setActiveWallet(wallet);
+    setIsExpanded(false);
+  };
+
+  const handleLinkWallet = () => {
+    setB3ModalContentType({
+      type: "linkNewAccount",
+      partnerId,
+      chain: contentType?.chain,
+      onSuccess: async () => {
+        // Success handled by LinkAccount component
+      },
+    });
+  };
+
+  return (
+    <AccordionPrimitive.Root
+      type="single"
+      collapsible
+      value={isExpanded ? "wallet-switcher" : ""}
+      className="b3-modal-wallet-switcher bg-b3-background border-b3-line relative border-b"
+      onValueChange={(value: string) => setIsExpanded(value === "wallet-switcher")}
+    >
+      <AccordionPrimitive.Item value="wallet-switcher" className="border-none">
+        <AccordionPrimitive.Trigger className="b3-modal-wallet-switcher-trigger group flex w-full items-center justify-between border-none bg-transparent px-5 py-3 outline-none">
+          <div className="flex items-center gap-2">
+            <div className="relative size-10 shrink-0 text-clip rounded-full">
+              {isActiveGlobalAccount ? (
+                <div className="flex size-full items-center justify-center p-1">
+                  <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="size-full object-contain" />
+                </div>
+              ) : activeWalletImage ? (
+                <img src={activeWalletImage} alt="Active Wallet" className="size-full object-contain p-1" />
+              ) : (
+                <div className="flex size-full items-center justify-center">
+                  <WalletIcon />
+                </div>
+              )}
+            </div>
+            <div className="flex flex-col gap-0.5">
+              <p className="text-b3-grey font-neue-montreal-semibold text-left text-sm">Active Wallet</p>
+              <div className="flex items-center gap-1">
+                <p className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
+                  {centerTruncate(address, 4)}
+                </p>
+                <CopyToClipboard text={address} />
+              </div>
+            </div>
+          </div>
+          <ChevronDownIcon className="b3-modal-wallet-switcher-chevron text-b3-grey transition-transform duration-200 group-data-[state=open]:rotate-180" />
+        </AccordionPrimitive.Trigger>
+
+        <AnimatePresence>
+          {isExpanded && (
+            <AccordionPrimitive.Content forceMount className="absolute left-0 right-0 top-full z-50 overflow-visible">
+              <motion.div
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -10 }}
+                transition={{ duration: 0.2, ease: "easeInOut" }}
+                className="b3-modal-wallet-switcher-content flex flex-col gap-3 rounded-bl-3xl rounded-br-3xl bg-white px-2 pb-5 pt-3 shadow-[0px_32px_64px_-12px_rgba(10,13,18,0.14),0px_5px_5px_-2.5px_rgba(10,13,18,0.04)]"
+              >
+                {/* Connected Wallets */}
+                <div className="flex flex-col gap-3">
+                  {connectedWallets.map(wallet => (
+                    <WalletItem
+                      key={wallet.id}
+                      wallet={wallet}
+                      isActive={activeWallet?.id === wallet.id}
+                      onClick={() => handleWalletSwitch(wallet)}
+                    />
+                  ))}
+
+                  {/* Link Another Wallet */}
+                  <div
+                    className="b3-modal-link-another-wallet hover:bg-b3-line/50 box-border flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors"
+                    onClick={handleLinkWallet}
+                  >
+                    <div className="bg-b3-line flex size-10 shrink-0 items-center justify-center rounded-full">
+                      <LinkIcon className="text-b3-grey" />
+                    </div>
+                    <div className="flex flex-1 flex-col">
+                      <p className="text-b3-grey font-neue-montreal-semibold text-sm">Link another wallet</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Sign Out Button */}
+                <button
+                  className="b3-modal-sign-out-button border-b3-line hover:bg-b3-line bg-b3-background flex items-center justify-center gap-1.5 rounded-xl border border-solid p-2.5 transition-colors"
+                  onClick={onLogoutEnhanced}
+                  disabled={logoutLoading}
+                  style={{
+                    boxShadow: "inset 0px 0px 0px 1px rgba(10,13,18,0.18), inset 0px -2px 0px 0px rgba(10,13,18,0.05)",
+                  }}
+                >
+                  {logoutLoading ? (
+                    <Loader2 className="animate-spin" size={20} />
+                  ) : (
+                    <SignOutIcon size={20} className="text-b3-grey" />
+                  )}
+                  <p className="text-b3-grey font-neue-montreal-semibold text-base">Sign out</p>
+                </button>
+              </motion.div>
+            </AccordionPrimitive.Content>
+          )}
+        </AnimatePresence>
+      </AccordionPrimitive.Item>
+    </AccordionPrimitive.Root>
+  );
+}

package/src/global-account/react/components/ManageAccount/HomeActions.tsx

@@ -0,0 +1,118 @@
+import { Button, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { BankIcon } from "@b3dotfun/sdk/global-account/react/components/icons/BankIcon";
+import { SwapIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SwapIcon";
+import { cn } from "@b3dotfun/sdk/shared/utils";
+
+const SendIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path
+      d="M17.9958 1.21467C17.666 1.10449 17.359 1.18417 17.2063 1.22851C17.04 1.27683 16.8417 1.35425 16.6428 1.43191L2.51187 6.94641C2.28951 7.03315 2.07413 7.11717 1.9079 7.19936C1.76427 7.27038 1.45899 7.42845 1.28859 7.75646C1.10067 8.11818 1.10092 8.54881 1.28927 8.9103C1.46006 9.23811 1.76552 9.39582 1.90924 9.46667C2.07556 9.54867 2.29099 9.63241 2.51345 9.71889L6.4468 11.2485C6.74023 11.3626 6.88695 11.4197 7.03291 11.4232C7.16193 11.4263 7.2899 11.3994 7.40674 11.3446C7.53893 11.2826 7.65024 11.1713 7.87287 10.9487L11.9107 6.91083C12.2361 6.58539 12.7638 6.58539 13.0892 6.91083C13.4147 7.23626 13.4147 7.7639 13.0892 8.08934L9.05138 12.1272C8.82875 12.3498 8.71744 12.4611 8.65545 12.5933C8.60065 12.7101 8.57374 12.8381 8.57684 12.9671C8.58035 13.1131 8.6374 13.2598 8.75152 13.5532L10.2811 17.4865C10.3676 17.709 10.4514 17.9245 10.5334 18.0908C10.6042 18.2345 10.7619 18.54 11.0897 18.7108C11.4512 18.8991 11.8819 18.8994 12.2436 18.7115C12.5716 18.541 12.7297 18.2358 12.8007 18.0921C12.8829 17.9259 12.9669 17.7106 13.0536 17.4882L18.5681 3.35726C18.6458 3.15833 18.7232 2.96007 18.7715 2.79371C18.8159 2.64105 18.8955 2.334 18.7854 2.00419C18.6609 1.63157 18.3685 1.33915 17.9958 1.21467Z"
+      fill="#0C68E9"
+    />
+  </svg>
+);
+
+const BuyIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path
+      d="M9.99998 8.75C9.30962 8.75 8.74998 9.30964 8.74998 10C8.74998 10.6904 9.30962 11.25 9.99998 11.25C10.6903 11.25 11.25 10.6904 11.25 10C11.25 9.30964 10.6903 8.75 9.99998 8.75Z"
+      fill="#0C68E9"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.1666 2.5C12.3642 2.5 10.8013 2.95205 9.44241 3.37018L9.18862 3.44844C7.90485 3.84476 6.86213 4.16667 5.83332 4.16667C5.09512 4.16667 4.43564 4.08819 3.88041 3.98151L3.85421 3.97647C3.44746 3.89831 3.10585 3.83267 2.84038 3.79758C2.60748 3.76679 2.26236 3.7302 1.94675 3.84126C1.78134 3.89947 1.60242 3.98249 1.43327 4.12224C1.26411 4.26199 1.14882 4.42202 1.06045 4.57348C0.898119 4.85168 0.864329 5.167 0.849347 5.3925C0.833297 5.63407 0.833306 5.94132 0.833317 6.29588L0.833315 15.2922C0.833263 15.4565 0.833201 15.6516 0.932434 15.9263C0.981719 16.0628 1.06288 16.1945 1.10974 16.2664C1.15659 16.3383 1.24436 16.4657 1.34932 16.5659C1.41718 16.6306 1.49456 16.6992 1.58722 16.76C1.67809 16.8196 1.76087 16.8559 1.79699 16.8717L1.80356 16.8746C2.48669 17.1759 3.71203 17.5 5.83332 17.5C7.63579 17.5 9.19862 17.0479 10.5576 16.6298L10.8113 16.5516C12.0951 16.1552 13.1378 15.8333 14.1666 15.8333C14.9048 15.8333 15.5643 15.9118 16.1196 16.0185L16.1458 16.0235C16.5525 16.1017 16.8941 16.1673 17.1596 16.2024C17.3925 16.2332 17.7376 16.2698 18.0532 16.1587C18.2186 16.1005 18.3975 16.0175 18.5667 15.8778C18.7359 15.738 18.8511 15.578 18.9395 15.4265C19.1018 15.1483 19.1356 14.833 19.1506 14.6075C19.1667 14.3659 19.1667 14.0587 19.1666 13.7041L19.1667 4.70776C19.1667 4.54347 19.1668 4.34839 19.0675 4.07365C19.0182 3.9372 18.9371 3.80547 18.8902 3.73359C18.8434 3.6617 18.7556 3.53428 18.6507 3.43412C18.5828 3.36935 18.5054 3.30084 18.4127 3.24003C18.3219 3.1804 18.2391 3.14413 18.203 3.1283L18.1964 3.12542C17.5133 2.82409 16.2879 2.5 14.1666 2.5ZM15.8333 7.5C15.8333 7.03976 15.4602 6.66667 15 6.66667C14.5397 6.66667 14.1666 7.03976 14.1666 7.5V10.8333C14.1666 11.2936 14.5397 11.6667 15 11.6667C15.4602 11.6667 15.8333 11.2936 15.8333 10.8333V7.5ZM7.08331 10C7.08331 8.38917 8.38915 7.08333 9.99998 7.08333C11.6108 7.08333 12.9166 8.38917 12.9166 10C12.9166 11.6108 11.6108 12.9167 9.99998 12.9167C8.38915 12.9167 7.08331 11.6108 7.08331 10ZM4.99998 8.33333C5.46022 8.33333 5.83331 8.70643 5.83331 9.16667V12.5C5.83331 12.9602 5.46022 13.3333 4.99998 13.3333C4.53974 13.3333 4.16665 12.9602 4.16665 12.5V9.16667C4.16665 8.70643 4.53974 8.33333 4.99998 8.33333Z"
+      fill="#0C68E9"
+    />
+  </svg>
+);
+
+const HomeActionButton = ({
+  customClass,
+  icon,
+  label,
+  onClick,
+}: {
+  customClass: string;
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}) => {
+  return (
+    <Button
+      className={cn(
+        "border-b3-line hover:border-b3-primary-blue flex h-[84px] w-full flex-col items-center justify-center gap-2 rounded-2xl border-[1.5px] bg-[#FAFAFA] shadow-[0_0_0_1px_rgba(10,13,18,0.18)_inset,0_-2px_0_0_rgba(10,13,18,0.05)_inset,0_1px_2px_0_rgba(10,13,18,0.05)] hover:bg-[#FAFAFA]",
+        customClass,
+      )}
+      onClick={onClick}
+    >
+      {icon}
+      <div className="text-b3-grey font-neue-montreal-semibold">{label}</div>
+    </Button>
+  );
+};
+
+const HomeActions = ({ showDeposit, showSwap }: { showDeposit: boolean; showSwap: boolean }) => {
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+  const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+
+  return (
+    <div className="b3-modal-home-actions border-b3-line grid grid-cols-4 gap-3 border-b px-5 pb-6">
+      {showDeposit && (
+        <HomeActionButton
+          customClass="manage-account-deposit"
+          icon={<BankIcon size={24} className="text-b3-primary-blue shrink-0" />}
+          label="Deposit"
+          onClick={() => {
+            setB3ModalOpen(true);
+            setB3ModalContentType({
+              type: "deposit",
+              showBackButton: true,
+            });
+          }}
+        />
+      )}
+      <HomeActionButton
+        customClass="manage-account-send"
+        icon={<SendIcon />}
+        label="Send"
+        onClick={() => {
+          setB3ModalOpen(true);
+          setB3ModalContentType({
+            type: "send",
+            showBackButton: true,
+          });
+        }}
+      />
+      {showSwap && (
+        <HomeActionButton
+          customClass="manage-account-swap"
+          icon={<SwapIcon size={24} className="text-b3-primary-blue" />}
+          label="Swap"
+          onClick={() => {
+            setB3ModalOpen(true);
+            setB3ModalContentType({
+              type: "anySpend",
+              showBackButton: true,
+            });
+          }}
+        />
+      )}
+      <HomeActionButton
+        customClass="manage-account-buy "
+        icon={<BuyIcon />}
+        label="Buy"
+        onClick={() => {
+          setB3ModalOpen(true);
+          setB3ModalContentType({
+            type: "anySpend",
+            defaultActiveTab: "fiat",
+            showBackButton: true,
+          });
+        }}
+      />
+    </div>
+  );
+};
+
+export default HomeActions;

package/src/global-account/react/components/ManageAccount/HomeContent.tsx

@@ -0,0 +1,42 @@
+import { Tabs, TabsContent, TabsList, TabTrigger } from "../ui/Tabs";
+import { Header } from "./Header";
+import HomeActions from "./HomeActions";
+import NFTContent from "./NFTContent";
+import ProfileSection from "./ProfileSection";
+import TokenContent from "./TokenContent";
+
+interface HomeContentProps {
+  showDeposit?: boolean;
+  showSwap?: boolean;
+}
+
+export function HomeContent({ showDeposit = false, showSwap = true }: HomeContentProps) {
+  return (
+    <div className="flex flex-col">
+      <Header />
+      <div className="flex flex-col">
+        <ProfileSection />
+
+        <HomeActions showDeposit={showDeposit} showSwap={showSwap} />
+        <div className="b3-modal-balance-content space-y-2 p-5">
+          <Tabs defaultValue={"balance"}>
+            <TabsList className="b3-modal-balance-tabs-list">
+              <TabTrigger value="balance" className="font-neue-montreal-semibold p-0 pr-3">
+                Balance
+              </TabTrigger>
+              <TabTrigger value="nfts" className="font-neue-montreal-semibold p-0 pr-3">
+                NFTs
+              </TabTrigger>
+            </TabsList>
+            <TabsContent value="balance" className="px-0 pb-4 pt-2">
+              <TokenContent />
+            </TabsContent>
+            <TabsContent value="nfts" className="px-0 pb-4 pt-2">
+              <NFTContent />
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  );
+}