@b3dotfun/sdk 0.0.24 → 0.0.25

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

@@ -8,16 +8,19 @@ import {
   TWSignerWithMetadata,
   useAccountAssets,
   useAuthentication,
-  useB3,
   useB3BalanceFromAddresses,
   useGetAllTWSigners,
   useModalStore,
   useNativeBalance,
+  useProfile,
   useRemoveSessionKey,
 } from "@b3dotfun/sdk/global-account/react";
-import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+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 { ArrowRightLeft } from "lucide-react";
+import { Loader2, Pencil, Triangle } from "lucide-react";
 import { useState } from "react";
 import { Chain } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";
@@ -32,6 +35,7 @@ interface ManageAccountProps {
   onViewProfile?: () => void;
   chain: Chain;
   partnerId: string;
+  containerClassName?: string;
 }
 
 function centerTruncate(str: string, length = 4) {
@@ -46,17 +50,17 @@ export function ManageAccount({
   chain,
   partnerId,
 }: ManageAccountProps) {
-  const { automaticallySetFirstEoa } = useB3();
   const [activeTab, setActiveTab] = useState("balance");
   const [revokingSignerId, setRevokingSignerId] = useState<string | null>(null);
   const account = useActiveAccount();
-  const {
-    address: eoaAddress,
-    info: { data: eoaInfo },
-  } = useFirstEOA();
   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: signers, refetch: refetchSigners } = useGetAllTWSigners({
@@ -67,6 +71,9 @@ export function ManageAccount({
   const { logout } = useAuthentication(partnerId);
   const [logoutLoading, setLogoutLoading] = useState(false);
 
+  console.log("account", account);
+  console.log("eoaAddress", eoaAddress);
+
   const { removeSessionKey } = useRemoveSessionKey({
     chain,
     onSuccess: tx => {
@@ -93,187 +100,352 @@ export function ManageAccount({
     setLogoutLoading(false);
   };
 
-  const BalanceContent = () => (
-    <div className="flex h-full flex-col items-center justify-between gap-8">
-      <div className="w-full">
-        <div className="border-b3-react-border bg-b3-react-subtle flex flex-col rounded-lg border p-4">
-          <div className="mb-4 flex items-center gap-3">
-            <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" className="h-6 w-6" />
-            <h2 className="font-neue-montreal-bold text-b3-react-primary text-lg">Global Account</h2>
+  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>
 
-          {!automaticallySetFirstEoa && (
-            <div className="mb-4">
-              <div className="flex items-center gap-4">
-                <img src="https://cdn.b3.fun/b3-coin-3d.png" alt="B3" className="h-10 w-10" />
-                <span className="font-neue-montreal-bold text-2xl">{b3Balance?.formattedTotal || "--"} B3</span>
+        {/* 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 className="border-b3-react-border my-4 border-t" />
-              <div className="flex items-center gap-4">
-                <img src="https://cdn.b3.fun/ethereum.svg" alt="ETH" className="h-10 w-10" />
-                <span className="font-neue-montreal-bold text-2xl">{nativeBalance?.formattedTotal || "--"} ETH</span>
+              <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="flex flex-col gap-2">
-            <p className="text-b3-react-secondary-foreground text-sm">Your universal account for all B3-powered apps</p>
-            <div className="flex items-center gap-2">
-              <span className="text-b3-react-muted-foreground font-mono text-sm">
-                {centerTruncate(account?.address || "", 6)}
-              </span>
-              <CopyToClipboard text={account?.address || ""} />
+            <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>
-      </div>
 
-      <div className="border-b3-react-border bg-b3-react-subtle w-full rounded-lg border p-4">
+        {/* EOA Account Balance Section - matching global balance styling */}
         {eoaAddress && (
-          <>
-            <div>
-              <h3 className="font-neue-montreal-bold text-b3-react-primary mb-2">Connected {eoaInfo?.name}</h3>
-              <div className="flex items-center gap-4">
-                <img src="https://cdn.b3.fun/ethereum.svg" alt="ETH" className="h-10 w-10" />
-                <span className="font-neue-montreal-bold text-2xl">{eoaNativeBalance?.formattedTotal || "--"} ETH</span>
+          <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 className="border-b3-react-border my-4 border-t" />
-              <div className="flex items-center gap-4">
-                <img src="https://cdn.b3.fun/b3-coin-3d.png" alt="B3" className="h-10 w-10" />
-                <span className="font-neue-montreal-bold text-2xl">{eoaB3Balance?.formattedTotal || "--"} B3</span>
+            </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-b3-react-muted-foreground mt-2">
-                <span className="font-mono text-sm">{centerTruncate(eoaAddress, 6)}</span>
-                <CopyToClipboard text={eoaAddress} />
+              <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>
         )}
-      </div>
 
-      <div className="flex w-full gap-4">
-        <Button
-          className="font-neue-montreal-medium flex-1"
-          onClick={() => {
-            setB3ModalOpen(true);
-            setB3ModalContentType({
-              type: "anySpend",
-              defaultActiveTab: "fiat",
-              showBackButton: true,
-            });
-          }}
-        >
-          Deposit
-        </Button>
-        <Button
-          variant="default"
-          className="font-neue-montreal-medium flex-1"
-          onClick={() => {
-            setB3ModalOpen(true);
-            setB3ModalContentType({
-              type: "anySpend",
-              showBackButton: true,
-            });
-          }}
-        >
-          <ArrowRightLeft className="mr-2 h-4 w-4" />
-          Swap
-        </Button>
+        {/* 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>
-    </div>
-  );
+    );
+  };
 
   const AssetsContent = () => (
-    <div className="bg-b3-react-card border-b3-react-border rounded-lg border p-4">
-      {assets?.nftResponse && <AccountAssets nfts={assets.nftResponse} isLoading={isLoading} />}
+    <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="bg-b3-react-card border-b3-react-border rounded-lg border p-4">
+    <div className="space-y-4">
       {signers?.map((signer: TWSignerWithMetadata) => (
-        <div
-          key={signer.id}
-          className="border-b3-react-border flex items-center justify-between border-b py-4 last:border-b-0"
-        >
-          <div className="flex items-center gap-4">
-            <div className="bg-b3-react-muted flex h-8 w-8 items-center justify-center rounded-full">
-              <span className="text-b3-react-muted-foreground text-xs">App</span>
-            </div>
-            <div className="flex flex-col">
-              <span className="font-neue-montreal-bold mb-2 text-base">{signer.partner.name}</span>
-              <div className="text-b3-react-muted-foreground flex flex-col gap-1.5">
-                <span className="text-b3-react-muted-foreground font-mono text-xs">
-                  Added: {new Date(signer.createdAt).toLocaleDateString()}
-                </span>
-                <span className="text-b3-react-muted-foreground font-mono text-xs">
-                  Expires: {new Date(Number(signer.endTimestamp) * 1000).toLocaleDateString()}
-                </span>
-                <span className="text-b3-react-muted-foreground font-mono text-xs">
-                  Max spend: {formatNumber(Number(formatUnits(signer.nativeTokenLimitPerTransaction, 18)))} ETH
-                </span>
-                <span className="text-b3-react-muted-foreground font-mono text-xs">
-                  Approved Contracts: {signer.approvedTargets.map(formatAddress).join(", ")}
-                </span>
+        <div key={signer.id} className="rounded-xl border border-gray-200 p-4 dark:border-gray-800">
+          <div className="flex items-start justify-between">
+            <div className="flex items-start gap-4">
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
+                <span className="text-xs font-medium text-gray-600 dark:text-gray-400">App</span>
+              </div>
+              <div>
+                <h3 className="font-medium text-gray-900 dark:text-white">{signer.partner.name}</h3>
+                <div className="mt-2 space-y-1">
+                  <p className="text-xs text-gray-500">Added {new Date(signer.createdAt).toLocaleDateString()}</p>
+                  <p className="text-xs text-gray-500">
+                    Expires {new Date(Number(signer.endTimestamp) * 1000).toLocaleDateString()}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    Max spend: {formatNumber(Number(formatUnits(signer.nativeTokenLimitPerTransaction, 18)))} ETH
+                  </p>
+                </div>
               </div>
             </div>
+            <Button
+              variant="outline"
+              size="sm"
+              className="border-red-200 text-red-500 hover:border-red-300 hover:text-red-600"
+              onClick={() => handleRevoke(signer)}
+              disabled={revokingSignerId === signer.id}
+            >
+              {revokingSignerId === signer.id ? "Revoking..." : "Revoke"}
+            </Button>
           </div>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-8 border-0 bg-red-500/80 px-4 text-xs font-medium text-white hover:bg-red-600/90"
-            onClick={() => handleRevoke(signer)}
-            disabled={revokingSignerId === signer.id}
-          >
-            {revokingSignerId === signer.id ? "Revoking..." : "Revoke"}
-          </Button>
         </div>
       ))}
 
-      {!signers?.length && <div className="text-b3-react-muted-foreground py-8 text-center">No connected apps</div>}
+      {!signers?.length && <div className="py-12 text-center text-gray-500">No connected apps</div>}
     </div>
   );
 
   return (
-    <div className="flex flex-col gap-4 p-4">
+    <div className="b3-manage-account bg-b3-background flex flex-col rounded-xl">
       <div className="flex-1">
         <TabsPrimitive defaultValue={activeTab} onValueChange={setActiveTab}>
-          <TabsListPrimitive className="mb-4 w-full">
-            <TabTriggerPrimitive value="balance" className="font-neue-montreal-bold text-base">
-              Balance
+          <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="font-neue-montreal-bold text-base">
-              NFTs
+            <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>
-            <TabTriggerPrimitive value="apps" className="font-neue-montreal-bold text-base">
+            <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>
           </TabsListPrimitive>
 
-          <TabsContentPrimitive value="balance">
+          <TabsContentPrimitive value="balance" className="pt-4 md:p-4">
             <BalanceContent />
           </TabsContentPrimitive>
 
-          <TabsContentPrimitive value="assets">
+          <TabsContentPrimitive value="assets" className="pt-4 md:p-4">
             <AssetsContent />
           </TabsContentPrimitive>
 
-          <TabsContentPrimitive value="apps">
+          <TabsContentPrimitive value="apps" className="pt-4 md:p-4">
             <AppsContent />
           </TabsContentPrimitive>
         </TabsPrimitive>
       </div>
-
-      <div className="flex flex-col gap-2">
-        <div className="border-b3-react-border border-t" />
-        <Button
-          variant="outline"
-          size="sm"
-          className="font-neue-montreal-medium text-b3-react-muted-foreground hover:text-b3-react-foreground"
-          onClick={onLogoutEnhanced}
-        >
-          {logoutLoading ? "Logging out..." : "Logout"}
-        </Button>
-      </div>
     </div>
   );
 }

package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx

@@ -42,10 +42,10 @@ export function LoginStepContainer({ children, partnerId }: LoginStepContainerPr
   const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
 
   return (
-    <div className="flex flex-col items-center justify-center py-6">
-      {partnerLogo && <img src={partnerLogo} alt="Partner Logo" className="mb-4 h-12 w-auto object-contain" />}
+    <div className="flex flex-col items-center justify-center">
+      {partnerLogo && <img src={partnerLogo} alt="Partner Logo" className="mb-6 mt-6 h-12 w-auto object-contain" />}
       {children}
-      <h2 className="mt-3 flex items-center gap-2 text-lg font-bold">
+      <h2 className="mt-6 flex items-center gap-2 text-lg font-bold">
         Powered by
         <img alt="B3 Logo" className="h-5" src="https://cdn.b3.fun/b3_logo.svg" />
         Connect
@@ -111,6 +111,7 @@ export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepPro
           title: "Sign in with B3",
           titleIcon: "https://cdn.b3.fun/b3_logo.svg",
         }}
+        className="b3-login-step"
         onConnect={async wallet => {
           try {
             setIsAuthenticating(true);

package/src/global-account/react/components/custom/CopyToClipboard.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@b3dotfun/sdk/shared/utils";
 import { Check, Copy } from "lucide-react";
 import { useState } from "react";
 
@@ -5,9 +6,10 @@ interface CopyToClipboardProps {
   text?: string;
   onCopy?: () => void;
   children?: React.ReactNode;
+  className?: string;
 }
 
-export function CopyToClipboard({ text, onCopy, children }: CopyToClipboardProps) {
+export function CopyToClipboard({ text, onCopy, children, className }: CopyToClipboardProps) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {
@@ -29,17 +31,18 @@ export function CopyToClipboard({ text, onCopy, children }: CopyToClipboardProps
   return (
     <div
       onClick={handleCopy}
-      className="text-b3-react-muted-foreground hover:text-b3-react-foreground flex cursor-pointer items-center gap-1 text-xs transition-all duration-200"
+      className={cn(
+        "text-b3-foreground-muted hover:text-b3-foreground-muted/80 flex cursor-pointer items-center gap-1 text-xs transition-all duration-200",
+        className,
+      )}
     >
       {copied ? (
         <>
           <Check className="h-4 w-4" />
-          <span>Copied</span>
         </>
       ) : (
         <>
           <Copy className="h-4 w-4" />
-          <span>Copy</span>
         </>
       )}
     </div>

package/src/global-account/react/components/icons/BankIcon.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+export interface BankIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function BankIcon({ className, size = 24, color = "#3268EF", style }: BankIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path
+        d="M2.25 9H21.75L12 3L2.25 9Z"
+        stroke={color}
+        strokeWidth="2.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M5.25 9V15.75" stroke={color} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M9.75 9V15.75" stroke={color} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M14.25 9V15.75" stroke={color} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M18.75 9V15.75" stroke={color} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M3 15.75H21" stroke={color} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M1.5 19.5H22.5" stroke={color} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export default BankIcon;