@b3dotfun/sdk 0.0.30 → 0.0.31-alpha.0

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

@@ -1,6 +1,5 @@
 import {
   Button,
-  CopyToClipboard,
   ManageAccountModalProps,
   TabsContentPrimitive,
   TabsListPrimitive,
@@ -9,29 +8,27 @@ import {
   TWSignerWithMetadata,
   useAccountAssets,
   useAuthentication,
-  useB3BalanceFromAddresses,
   useGetAllTWSigners,
   useModalStore,
-  useNativeBalance,
-  useProfile,
   useRemoveSessionKey,
 } from "@b3dotfun/sdk/global-account/react";
-import { BankIcon } from "@b3dotfun/sdk/global-account/react/components/icons/BankIcon";
 import { SignOutIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SignOutIcon";
-import { SwapIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SwapIcon";
-import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
+
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { LinkIcon, Loader2, Pencil, Triangle, UnlinkIcon } from "lucide-react";
+import { BarChart3, Coins, Image, LinkIcon, Loader2, Settings, UnlinkIcon } from "lucide-react";
 import { useState } from "react";
 import { Chain } from "thirdweb";
 import { useActiveAccount, useProfiles, useUnlinkProfile } from "thirdweb/react";
 import { formatUnits } from "viem";
-import useFirstEOA from "../../hooks/useFirstEOA";
+
 import { getProfileDisplayInfo } from "../../utils/profileDisplay";
 import { AccountAssets } from "../AccountAssets/AccountAssets";
+import { ContentTokens } from "./ContentTokens";
 
-type TabValue = "balance" | "assets" | "apps" | "settings";
+import { BalanceContent } from "./BalanceContent";
+
+type TabValue = "overview" | "tokens" | "nfts" | "apps" | "settings";
 
 interface ManageAccountProps {
   onLogout?: () => void;
@@ -43,11 +40,6 @@ interface ManageAccountProps {
   containerClassName?: string;
 }
 
-function centerTruncate(str: string, length = 4) {
-  if (str.length <= length * 2) return str;
-  return `${str.slice(0, length)}...${str.slice(-length)}`;
-}
-
 export function ManageAccount({
   onLogout,
   onSwap: _onSwap,
@@ -57,28 +49,17 @@ export function ManageAccount({
 }: ManageAccountProps) {
   const [revokingSignerId, setRevokingSignerId] = useState<string | null>(null);
   const account = useActiveAccount();
-  const { data: assets, isLoading } = useAccountAssets(account?.address);
-  const { data: b3Balance } = useB3BalanceFromAddresses(account?.address);
-  const { data: nativeBalance } = useNativeBalance(account?.address);
-  const { address: eoaAddress } = useFirstEOA();
-  const { data: profile } = useProfile({
-    address: eoaAddress || account?.address,
-    fresh: true,
-  });
-  const { data: eoaNativeBalance } = useNativeBalance(eoaAddress);
-  const { data: eoaB3Balance } = useB3BalanceFromAddresses(eoaAddress);
+  const { data: nfts, isLoading } = useAccountAssets(account?.address);
+
   const { data: signers, refetch: refetchSigners } = useGetAllTWSigners({
     chain,
     accountAddress: account?.address,
   });
-  const { setB3ModalOpen, setB3ModalContentType, contentType } = useModalStore();
-  const { activeTab = "balance", setActiveTab } = contentType as ManageAccountModalProps;
+  const { setB3ModalOpen, contentType } = useModalStore();
+  const { activeTab = "overview", setActiveTab } = contentType as ManageAccountModalProps;
   const { logout } = useAuthentication(partnerId);
   const [logoutLoading, setLogoutLoading] = useState(false);
 
-  console.log("account", account);
-  console.log("eoaAddress", eoaAddress);
-
   const { removeSessionKey } = useRemoveSessionKey({
     chain,
     onSuccess: tx => {
@@ -105,275 +86,6 @@ export function ManageAccount({
     setLogoutLoading(false);
   };
 
-  const BalanceContent = () => {
-    const { info: eoaInfo } = useFirstEOA();
-
-    return (
-      <div className="flex flex-col gap-6">
-        {/* Profile Section */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <div className="relative">
-              {profile?.avatar ? (
-                <img src={profile?.avatar} alt="Profile" className="size-24 rounded-full" />
-              ) : (
-                <div className="bg-b3-primary-wash size-24 rounded-full" />
-              )}
-              <div className="bg-b3-grey border-b3-background absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4">
-                <Pencil size={16} className="text-b3-background" />
-              </div>
-            </div>
-            <div>
-              <h2 className="text-b3-grey text-xl font-semibold">
-                {profile?.displayName || formatUsername(profile?.name || "")}
-              </h2>
-              <span className="text-b3-foreground-muted">{formatUsername(profile?.name || "")}</span>
-            </div>
-          </div>
-        </div>
-        <div className="manage-account-address bg-b3-line flex h-11 items-center gap-2 rounded-full px-4">
-          <span className="text-b3-grey font-neue-montreal-semibold">{centerTruncate(account?.address || "")}</span>
-          <CopyToClipboard text={account?.address || ""} />
-        </div>
-
-        {/* Quick Actions */}
-        <div className="grid grid-cols-2 gap-3">
-          <Button
-            className="manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl"
-            onClick={() => {
-              setB3ModalOpen(true);
-              setB3ModalContentType({
-                type: "anySpend",
-                defaultActiveTab: "fiat",
-                showBackButton: true,
-              });
-            }}
-          >
-            <BankIcon size={24} className="text-b3-primary-blue shrink-0" />
-            <div className="text-b3-grey font-neue-montreal-semibold">Deposit</div>
-          </Button>
-          <Button
-            className="manage-account-swap bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex h-[84px] w-full flex-col items-start gap-2 rounded-2xl"
-            onClick={() => {
-              setB3ModalOpen(true);
-              setB3ModalContentType({
-                type: "anySpend",
-                showBackButton: true,
-              });
-            }}
-          >
-            <SwapIcon size={24} className="text-b3-primary-blue" />
-            <div className="text-b3-grey font-neue-montreal-semibold">Swap</div>
-          </Button>
-        </div>
-
-        {/* Balance Section */}
-        <div className="space-y-4">
-          <h3 className="text-b3-grey font-neue-montreal-semibold">Balance</h3>
-
-          {/* B3 Balance */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-full">
-                <img src="https://cdn.b3.fun/b3-coin-3d.png" alt="B3" className="size-10" />
-              </div>
-              <div>
-                <div className="flex items-center gap-2">
-                  <span className="text-b3-grey font-neue-montreal-semibold">B3</span>
-                </div>
-                <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
-                  {b3Balance?.formattedTotal || "0.00"} B3
-                </div>
-              </div>
-            </div>
-            <div className="text-right">
-              <div className="text-b3-grey font-neue-montreal-semibold">
-                ${b3Balance?.balanceUsdFormatted || "0.00"}
-              </div>
-              <div className="flex items-center gap-1">
-                {b3Balance?.priceChange24h !== null && b3Balance?.priceChange24h !== undefined ? (
-                  <>
-                    <Triangle
-                      className={`size-3 ${b3Balance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}`}
-                    />
-                    <span
-                      className={`font-neue-montreal-medium text-sm ${b3Balance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`}
-                    >
-                      {b3Balance.priceChange24h >= 0 ? "+" : ""}
-                      {b3Balance.priceChange24h.toFixed(2)}%
-                    </span>
-                  </>
-                ) : (
-                  <span className="text-b3-foreground-muted font-neue-montreal-medium text-sm">--</span>
-                )}
-              </div>
-            </div>
-          </div>
-
-          {/* ETH Balance */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-full">
-                <img src="https://cdn.b3.fun/ethereum.svg" alt="ETH" className="size-10" />
-              </div>
-              <div>
-                <div className="flex items-center gap-2">
-                  <span className="text-b3-grey font-neue-montreal-semibold">Ethereum</span>
-                </div>
-                <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
-                  {nativeBalance?.formattedTotal || "0.00"} ETH
-                </div>
-              </div>
-            </div>
-            <div className="text-right">
-              <div className="text-b3-grey font-neue-montreal-semibold">
-                ${nativeBalance?.formattedTotalUsd || "0.00"}
-              </div>
-              <div className="flex items-center gap-2">
-                {nativeBalance?.priceChange24h !== null && nativeBalance?.priceChange24h !== undefined ? (
-                  <>
-                    <Triangle
-                      className={`size-3 ${nativeBalance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}`}
-                    />
-                    <span
-                      className={`font-neue-montreal-medium text-sm ${nativeBalance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`}
-                    >
-                      {nativeBalance.priceChange24h >= 0 ? "+" : ""}
-                      {nativeBalance.priceChange24h.toFixed(2)}%
-                    </span>
-                  </>
-                ) : (
-                  <span className="text-b3-foreground-muted font-neue-montreal-medium text-sm">--</span>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* EOA Account Balance Section - matching global balance styling */}
-        {eoaAddress && (
-          <div className="space-y-4">
-            <h3 className="text-b3-grey font-neue-montreal-semibold">Connected {eoaInfo?.data?.name || "Wallet"}</h3>
-
-            {/* EOA Address */}
-            <div className="manage-account-address bg-b3-line flex h-11 items-center gap-2 rounded-full px-4">
-              <span className="text-b3-grey font-neue-montreal-semibold">{centerTruncate(eoaAddress)}</span>
-              <CopyToClipboard text={eoaAddress} />
-            </div>
-
-            {/* EOA B3 Balance */}
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-full">
-                  <img src="https://cdn.b3.fun/b3-coin-3d.png" alt="B3" className="size-10" />
-                </div>
-                <div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-b3-grey font-neue-montreal-semibold">B3</span>
-                  </div>
-                  <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
-                    {eoaB3Balance?.formattedTotal || "0.00"} B3
-                  </div>
-                </div>
-              </div>
-              <div className="text-right">
-                <div className="text-b3-grey font-neue-montreal-semibold">
-                  ${eoaB3Balance?.balanceUsdFormatted || "0.00"}
-                </div>
-                <div className="flex items-center gap-1">
-                  {eoaB3Balance?.priceChange24h !== null && eoaB3Balance?.priceChange24h !== undefined ? (
-                    <>
-                      <Triangle
-                        className={`size-3 ${eoaB3Balance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}`}
-                      />
-                      <span
-                        className={`font-neue-montreal-medium text-sm ${eoaB3Balance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`}
-                      >
-                        {eoaB3Balance.priceChange24h >= 0 ? "+" : ""}
-                        {eoaB3Balance.priceChange24h.toFixed(2)}%
-                      </span>
-                    </>
-                  ) : (
-                    <span className="text-b3-foreground-muted font-neue-montreal-medium text-sm">--</span>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* EOA ETH Balance */}
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-full">
-                  <img src="https://cdn.b3.fun/ethereum.svg" alt="ETH" className="size-10" />
-                </div>
-                <div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-b3-grey font-neue-montreal-semibold">Ethereum</span>
-                  </div>
-                  <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
-                    {eoaNativeBalance?.formattedTotal || "0.00"} ETH
-                  </div>
-                </div>
-              </div>
-              <div className="text-right">
-                <div className="text-b3-grey font-neue-montreal-semibold">
-                  ${eoaNativeBalance?.formattedTotalUsd || "0.00"}
-                </div>
-                <div className="flex items-center gap-2">
-                  {eoaNativeBalance?.priceChange24h !== null && eoaNativeBalance?.priceChange24h !== undefined ? (
-                    <>
-                      <Triangle
-                        className={`size-3 ${eoaNativeBalance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}`}
-                      />
-                      <span
-                        className={`font-neue-montreal-medium text-sm ${eoaNativeBalance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`}
-                      >
-                        {eoaNativeBalance.priceChange24h >= 0 ? "+" : ""}
-                        {eoaNativeBalance.priceChange24h.toFixed(2)}%
-                      </span>
-                    </>
-                  ) : (
-                    <span className="text-b3-foreground-muted font-neue-montreal-medium text-sm">--</span>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Global Account Info */}
-        <div className="border-b3-line flex items-center justify-between rounded-2xl border p-4">
-          <div className="">
-            <div className="flex items-center gap-2">
-              <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="h-4" />
-              <h3 className="font-neue-montreal-semibold text-b3-grey">Global Account</h3>
-            </div>
-
-            <p className="text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm">
-              Your universal account for all B3-powered apps
-            </p>
-          </div>
-          <button
-            className="text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border"
-            onClick={onLogoutEnhanced}
-          >
-            {logoutLoading ? <Loader2 className="animate-spin" /> : <SignOutIcon size={16} className="text-b3-grey" />}
-          </button>
-        </div>
-      </div>
-    );
-  };
-
-  const AssetsContent = () => (
-    <div className="grid grid-cols-3 gap-4">
-      {assets?.nftResponse ? (
-        <AccountAssets nfts={assets.nftResponse} isLoading={isLoading} />
-      ) : (
-        <div className="col-span-3 py-12 text-center text-gray-500">No NFTs found</div>
-      )}
-    </div>
-  );
-
   const AppsContent = () => (
     <div className="space-y-4">
       {signers?.map((signer: TWSignerWithMetadata) => (
@@ -429,10 +141,7 @@ export function ManageAccount({
     const handleUnlink = async (profile: any) => {
       setUnlinkingAccountId(profile.title);
       try {
-        await unlinkProfile({
-          client,
-          profileToUnlink: profile.originalProfile,
-        });
+        unlinkProfile({ client, profileToUnlink: profile.originalProfile });
       } catch (error) {
         console.error("Error unlinking account:", error);
       } finally {
@@ -558,7 +267,7 @@ export function ManageAccount({
             </div>
 
             <p className="text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm">
-              Your universal account for all B3-powered apps
+              Your universal account for all B3 apps
             </p>
           </div>
           <button
@@ -579,55 +288,91 @@ export function ManageAccount({
           defaultValue={activeTab}
           onValueChange={value => {
             const tab = value as TabValue;
-            if (["balance", "assets", "apps", "settings"].includes(tab)) {
+            if (["overview", "tokens", "nfts", "apps", "settings"].includes(tab)) {
               setActiveTab?.(tab);
             }
           }}
         >
-          <TabsListPrimitive className="font-neue-montreal-semibold text-b3-grey flex h-8 w-full items-start justify-start gap-8 border-0 text-xl md:p-4">
-            <TabTriggerPrimitive
-              value="balance"
-              className="data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4"
-            >
-              Overview
-            </TabTriggerPrimitive>
-            <TabTriggerPrimitive
-              value="assets"
-              className="data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4"
-            >
-              Mints
-            </TabTriggerPrimitive>
-            {/*
-            // TODO: Apps is a remnant of session key flow. Moving forward, we should find a way to properly associate apps from linked partners that a user has logged in with
-            https://linear.app/npclabs/issue/B3-2318/find-a-way-to-properly-display-which-partner-apps-a-user-has-logged-in
-            
-            <TabTriggerPrimitive
-              value="apps"
-              className="data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4"
-            >
-              Apps
-            </TabTriggerPrimitive> */}
-            <TabTriggerPrimitive
-              value="settings"
-              className="data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4"
-            >
-              Settings
-            </TabTriggerPrimitive>
-          </TabsListPrimitive>
+          <div className="px-4">
+            <TabsListPrimitive className="grid h-auto grid-cols-2 grid-rows-2 gap-3 rounded-none border-none bg-transparent">
+              <TabTriggerPrimitive
+                value="overview"
+                className="data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg"
+              >
+                <BarChart3 size={20} className="text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" />
+                <span className="text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white">
+                  Overview
+                </span>
+              </TabTriggerPrimitive>
+              <TabTriggerPrimitive
+                value="tokens"
+                className="data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg"
+              >
+                <Coins size={20} className="text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" />
+                <span className="text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white">
+                  Tokens
+                </span>
+              </TabTriggerPrimitive>
+              <TabTriggerPrimitive
+                value="nfts"
+                className="data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg"
+              >
+                <Image size={20} className="text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" />
+                <span className="text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white">
+                  NFTs
+                </span>
+              </TabTriggerPrimitive>
+              {/*
+              // TODO: Apps is a remnant of session key flow. Moving forward, we should find a way to properly associate apps from linked partners that a user has logged in with
+              // https://linear.app/npclabs/issue/B3-2318/find-a-way-to-properly-display-which-partner-apps-a-user-has-logged-in
+              <TabTriggerPrimitive
+                value="apps"
+                className="data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-16 w-full flex-col items-start justify-between rounded-xl border border-gray-200 bg-white p-3 text-left shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg col-start-1 col-end-2"
+              >
+                <div className="flex w-full items-center justify-between">
+                  <Grid3X3 size={20} className="text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" />
+                  <span className="text-b3-grey font-neue-montreal-bold text-lg group-data-[state=active]:text-white">4</span>
+                </div>
+                <span className="text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white">
+                  Apps
+                </span>
+              </TabTriggerPrimitive>
+              */}
+              <TabTriggerPrimitive
+                value="settings"
+                className="data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg"
+              >
+                <Settings size={20} className="text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" />
+                <span className="text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white">
+                  Settings
+                </span>
+              </TabTriggerPrimitive>
+            </TabsListPrimitive>
+          </div>
+
+          <TabsContentPrimitive value="overview" className="px-4 pb-4 pt-2">
+            <BalanceContent onLogout={onLogout} partnerId={partnerId} />
+          </TabsContentPrimitive>
 
-          <TabsContentPrimitive value="balance" className="pt-4 md:p-4">
-            <BalanceContent />
+          <TabsContentPrimitive value="tokens" className="px-4 pb-4 pt-2">
+            <ContentTokens activeTab={activeTab} />
           </TabsContentPrimitive>
 
-          <TabsContentPrimitive value="assets" className="pt-4 md:p-4">
-            <AssetsContent />
+          <TabsContentPrimitive value="nfts" className="px-4 pb-4 pt-2">
+            <div className="grid grid-cols-3 gap-4">
+              {nfts?.nftResponse ? (
+                <AccountAssets nfts={nfts.nftResponse} isLoading={isLoading} />
+              ) : (
+                <div className="col-span-3 py-12 text-center text-gray-500">No NFTs found</div>
+              )}
+            </div>
           </TabsContentPrimitive>
 
-          <TabsContentPrimitive value="apps" className="pt-4 md:p-4">
+          <TabsContentPrimitive value="apps" className="px-4 pb-4 pt-2">
             <AppsContent />
           </TabsContentPrimitive>
 
-          <TabsContentPrimitive value="settings" className="pt-4 md:p-4">
+          <TabsContentPrimitive value="settings" className="px-4 pb-4 pt-2">
             <SettingsContent />
           </TabsContentPrimitive>
         </TabsPrimitive>

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

@@ -0,0 +1,46 @@
+import { Triangle } from "lucide-react";
+import { ReactNode } from "react";
+
+interface TokenBalanceRowProps {
+  icon: ReactNode;
+  name: string;
+  balance: string;
+  usdValue: string;
+  priceChange?: number | null;
+}
+
+export function TokenBalanceRow({ icon, name, balance, usdValue, priceChange }: TokenBalanceRowProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-full">{icon}</div>
+        <div>
+          <div className="flex items-center gap-2">
+            <span className="text-b3-grey font-neue-montreal-semibold">{name}</span>
+          </div>
+          <div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">{balance}</div>
+        </div>
+      </div>
+      <div className="text-right">
+        <div className="text-b3-grey font-neue-montreal-semibold">${usdValue}</div>
+        <div className="flex items-center gap-1">
+          {priceChange !== null && priceChange !== undefined ? (
+            <>
+              <Triangle
+                className={`size-3 ${priceChange >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}`}
+              />
+              <span
+                className={`font-neue-montreal-medium text-sm ${priceChange >= 0 ? "text-b3-positive" : "text-b3-negative"}`}
+              >
+                {priceChange >= 0 ? "+" : ""}
+                {priceChange.toFixed(2)}%
+              </span>
+            </>
+          ) : (
+            <span className="text-b3-foreground-muted font-neue-montreal-medium text-sm">--</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/global-account/react/components/TokenIcon.tsx

@@ -0,0 +1,87 @@
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import React, { useCallback, useMemo, useState } from "react";
+
+interface TokenIconProps {
+  src: string;
+  alt: string;
+  className?: string;
+  size?: number;
+}
+
+// Create a global image cache to prevent re-loading
+const imageCache = new Map<string, boolean>();
+
+export const TokenIcon: React.FC<TokenIconProps> = ({ src, alt, className, size = 40 }) => {
+  const [isLoaded, setIsLoaded] = useState(() => imageCache.get(src) || false);
+  const [hasError, setHasError] = useState(false);
+
+  const handleLoad = useCallback(() => {
+    imageCache.set(src, true);
+    setIsLoaded(true);
+  }, [src]);
+
+  const handleError = useCallback(() => {
+    setHasError(true);
+  }, []);
+
+  // Memoize the image element to prevent unnecessary re-renders
+  const imageElement = useMemo(
+    () => (
+      <img
+        src={src}
+        alt={alt}
+        className={cn("transition-opacity duration-200", className, {
+          "opacity-100": isLoaded && !hasError,
+          "opacity-0": !isLoaded || hasError,
+        })}
+        onLoad={handleLoad}
+        onError={handleError}
+        loading="eager" // Load immediately since these are critical UI elements
+        decoding="async"
+        style={{
+          width: size,
+          height: size,
+        }}
+      />
+    ),
+    [src, alt, className, isLoaded, hasError, handleLoad, handleError, size],
+  );
+
+  // Show a placeholder while loading or if there's an error
+  const placeholder = useMemo(
+    () => (
+      <div
+        className={cn(
+          "bg-b3-primary-wash flex items-center justify-center rounded-full transition-opacity duration-200",
+          {
+            "opacity-0": isLoaded && !hasError,
+            "opacity-100": !isLoaded || hasError,
+          },
+        )}
+        style={{
+          width: size,
+          height: size,
+        }}
+      >
+        <span className="text-b3-grey font-neue-montreal-semibold text-xs">{alt.charAt(0).toUpperCase()}</span>
+      </div>
+    ),
+    [alt, isLoaded, hasError, size],
+  );
+
+  return (
+    <div className="relative inline-block" style={{ width: size, height: size }}>
+      {placeholder}
+      <div className="absolute inset-0">{imageElement}</div>
+    </div>
+  );
+};
+
+// Pre-defined token icons for common tokens
+export const B3TokenIcon: React.FC<Omit<TokenIconProps, "src" | "alt">> = props => (
+  <TokenIcon src="https://cdn.b3.fun/b3-coin-3d.png" alt="B3" {...props} />
+);
+
+export const EthereumTokenIcon: React.FC<Omit<TokenIconProps, "src" | "alt">> = props => (
+  <TokenIcon src="https://cdn.b3.fun/ethereum.svg" alt="ETH" {...props} />
+);