@b3dotfun/sdk 0.0.22-alpha.1 → 0.0.22-alpha.2

package/dist/cjs/global-account/react/components/ManageAccount/ManageAccount.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ManageAccount = ManageAccount;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -9,6 +12,7 @@ const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
 const viem_1 = require("viem");
+const useFirstEOA_1 = __importDefault(require("../../hooks/useFirstEOA"));
 const AccountAssets_1 = require("../AccountAssets/AccountAssets");
 function centerTruncate(str, length = 4) {
     if (str.length <= length * 2)
@@ -16,12 +20,16 @@ function centerTruncate(str, length = 4) {
     return `${str.slice(0, length)}...${str.slice(-length)}`;
 }
 function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, }) {
+    const { automaticallySetFirstEoa } = (0, react_1.useB3)();
     const [activeTab, setActiveTab] = (0, react_2.useState)("balance");
     const [revokingSignerId, setRevokingSignerId] = (0, react_2.useState)(null);
     const account = (0, react_3.useActiveAccount)();
+    const { address: eoaAddress, info: { data: eoaInfo }, } = (0, useFirstEOA_1.default)();
     const { data: assets, isLoading } = (0, react_1.useAccountAssets)(account?.address);
     const { data: b3Balance } = (0, react_1.useB3BalanceFromAddresses)(account?.address);
     const { data: nativeBalance } = (0, react_1.useNativeBalance)(account?.address);
+    const { data: eoaNativeBalance } = (0, react_1.useNativeBalance)(eoaAddress);
+    const { data: eoaB3Balance } = (0, react_1.useB3BalanceFromAddresses)(eoaAddress);
     const { data: signers, refetch: refetchSigners } = (0, react_1.useGetAllTWSigners)({
         chain,
         accountAddress: account?.address,
@@ -29,7 +37,6 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
     const { setB3ModalOpen, setB3ModalContentType } = (0, react_1.useModalStore)();
     const { logout } = (0, react_1.useAuthentication)(partnerId);
     const [logoutLoading, setLogoutLoading] = (0, react_2.useState)(false);
-    console.log("@@assets", assets);
     const { removeSessionKey } = (0, react_1.useRemoveSessionKey)({
         chain,
         onSuccess: tx => {
@@ -53,7 +60,7 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    const BalanceContent = () => ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col items-center justify-between gap-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "border-b3-react-border bg-b3-react-subtle flex flex-col rounded-lg border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-6 w-6" }), (0, jsx_runtime_1.jsx)("h2", { className: "font-neue-montreal-bold text-b3-react-primary text-lg", children: "Global Account" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-secondary-foreground text-sm", children: "Your universal account for all B3-powered apps" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-muted-foreground font-mono text-sm", children: centerTruncate(account?.address || "", 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "border-b3-react-border bg-b3-react-subtle w-full rounded-lg border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", className: "h-10 w-10" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-bold text-2xl", children: [b3Balance?.formattedTotal || "--", " B3"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "border-b3-react-border my-4 border-t" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", className: "h-10 w-10" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-bold text-2xl", children: [nativeBalance?.formattedTotal || "--", " ETH"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { className: "font-neue-montreal-medium flex-1", onClick: () => {
+    const BalanceContent = () => ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col items-center justify-between gap-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "border-b3-react-border bg-b3-react-subtle flex flex-col rounded-lg border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-6 w-6" }), (0, jsx_runtime_1.jsx)("h2", { className: "font-neue-montreal-bold text-b3-react-primary text-lg", children: "Global Account" })] }), !automaticallySetFirstEoa && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", className: "h-10 w-10" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-bold text-2xl", children: [b3Balance?.formattedTotal || "--", " B3"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "border-b3-react-border my-4 border-t" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", className: "h-10 w-10" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-bold text-2xl", children: [nativeBalance?.formattedTotal || "--", " ETH"] })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-b3-react-secondary-foreground text-sm", children: "Your universal account for all B3-powered apps" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-muted-foreground font-mono text-sm", children: centerTruncate(account?.address || "", 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "border-b3-react-border bg-b3-react-subtle w-full rounded-lg border p-4", children: eoaAddress && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h3", { className: "font-neue-montreal-bold text-b3-react-primary mb-2", children: ["Connected ", eoaInfo?.name] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", className: "h-10 w-10" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-bold text-2xl", children: [eoaNativeBalance?.formattedTotal || "--", " ETH"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "border-b3-react-border my-4 border-t" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", className: "h-10 w-10" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-bold text-2xl", children: [eoaB3Balance?.formattedTotal || "--", " B3"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-b3-react-muted-foreground mt-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-mono text-sm", children: centerTruncate(eoaAddress, 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: eoaAddress })] })] }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { className: "font-neue-montreal-medium flex-1", onClick: () => {
                             setB3ModalOpen(true);
                             setB3ModalContentType({
                                 type: "anySpend",

package/dist/cjs/global-account/react/hooks/useFirstEOA.d.ts

@@ -0,0 +1,6 @@
+import { Wallet } from "thirdweb/wallets";
+export default function useFirstEOA(): {
+    account: Wallet | undefined;
+    address: string | undefined;
+    info: import("@tanstack/react-query").UseQueryResult<import("thirdweb/wallets").WalletInfo, Error>;
+};

package/dist/cjs/global-account/react/hooks/useFirstEOA.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useFirstEOA;
+const react_1 = require("../../../global-account/react");
+const react_2 = require("react");
+const react_3 = require("thirdweb/react");
+function useFirstEOA() {
+    const wallets = (0, react_3.useConnectedWallets)();
+    const isConnected = (0, react_1.useAuthStore)(state => state.isConnected);
+    const [firstEOA, setFirstEOA] = (0, react_2.useState)(undefined);
+    const [address, setAddress] = (0, react_2.useState)(undefined);
+    const walletInfo = (0, react_3.useWalletInfo)(firstEOA?.id);
+    console.log("@@wallets", wallets);
+    console.log("@@wallets:isConnected", isConnected);
+    (0, react_2.useEffect)(() => {
+        const autoSelectFirstEOAWallet = async () => {
+            // Only proceed if auto-selection is enabled and user is authenticated
+            if (!isConnected) {
+                console.log("@@wallets:not connected");
+                return;
+            }
+            // Find the first EOA wallet (excluding ecosystem wallets)
+            const isEOAWallet = (wallet) => !wallet.id.startsWith("ecosystem.");
+            const firstEOAWallet = wallets.find(isEOAWallet);
+            console.log("@@wallets:firstEOAWallet", firstEOAWallet);
+            const account = await firstEOAWallet?.getAccount();
+            console.log("@@wallets:account", account);
+            setFirstEOA(firstEOAWallet);
+            console.log("@@wallets:address", account?.address);
+            setAddress(account?.address);
+        };
+        autoSelectFirstEOAWallet();
+    }, [isConnected, wallets]);
+    return {
+        account: firstEOA,
+        address,
+        info: walletInfo,
+    };
+}

package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, CopyToClipboard, useAccountAssets, useAuthentication, useB3BalanceFromAddresses, useGetAllTWSigners, useNativeBalance, useRemoveSessionKey, useModalStore, TabsPrimitive, TabsContentPrimitive, TabsListPrimitive, TabTriggerPrimitive, } from "../../../../global-account/react/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, CopyToClipboard, TabsContentPrimitive, TabsListPrimitive, TabsPrimitive, TabTriggerPrimitive, useAccountAssets, useAuthentication, useB3, useB3BalanceFromAddresses, useGetAllTWSigners, useModalStore, useNativeBalance, useRemoveSessionKey, } from "../../../../global-account/react/index.js";
 import { formatAddress } from "../../../../shared/utils/formatAddress.js";
 import { formatNumber } from "../../../../shared/utils/formatNumber.js";
 import { ArrowRightLeft } from "lucide-react";
 import { useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import { formatUnits } from "viem";
+import useFirstEOA from "../../hooks/useFirstEOA.js";
 import { AccountAssets } from "../AccountAssets/AccountAssets.js";
 function centerTruncate(str, length = 4) {
     if (str.length <= length * 2)
@@ -13,12 +14,16 @@ function centerTruncate(str, length = 4) {
     return `${str.slice(0, length)}...${str.slice(-length)}`;
 }
 export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, }) {
+    const { automaticallySetFirstEoa } = useB3();
     const [activeTab, setActiveTab] = useState("balance");
     const [revokingSignerId, setRevokingSignerId] = useState(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 { data: eoaNativeBalance } = useNativeBalance(eoaAddress);
+    const { data: eoaB3Balance } = useB3BalanceFromAddresses(eoaAddress);
     const { data: signers, refetch: refetchSigners } = useGetAllTWSigners({
         chain,
         accountAddress: account?.address,
@@ -26,7 +31,6 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
     const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
     const { logout } = useAuthentication(partnerId);
     const [logoutLoading, setLogoutLoading] = useState(false);
-    console.log("@@assets", assets);
     const { removeSessionKey } = useRemoveSessionKey({
         chain,
         onSuccess: tx => {
@@ -50,7 +54,7 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    const BalanceContent = () => (_jsxs("div", { className: "flex h-full flex-col items-center justify-between gap-8", children: [_jsx("div", { className: "w-full", children: _jsxs("div", { className: "border-b3-react-border bg-b3-react-subtle flex flex-col rounded-lg border p-4", children: [_jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-6 w-6" }), _jsx("h2", { className: "font-neue-montreal-bold text-b3-react-primary text-lg", children: "Global Account" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-b3-react-secondary-foreground text-sm", children: "Your universal account for all B3-powered apps" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-b3-react-muted-foreground font-mono text-sm", children: centerTruncate(account?.address || "", 6) }), _jsx(CopyToClipboard, { text: account?.address || "" })] })] })] }) }), _jsxs("div", { className: "border-b3-react-border bg-b3-react-subtle w-full rounded-lg border p-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", className: "h-10 w-10" }), _jsxs("span", { className: "font-neue-montreal-bold text-2xl", children: [b3Balance?.formattedTotal || "--", " B3"] })] }), _jsx("div", { className: "border-b3-react-border my-4 border-t" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", className: "h-10 w-10" }), _jsxs("span", { className: "font-neue-montreal-bold text-2xl", children: [nativeBalance?.formattedTotal || "--", " ETH"] })] })] }), _jsxs("div", { className: "flex w-full gap-4", children: [_jsx(Button, { className: "font-neue-montreal-medium flex-1", onClick: () => {
+    const BalanceContent = () => (_jsxs("div", { className: "flex h-full flex-col items-center justify-between gap-8", children: [_jsx("div", { className: "w-full", children: _jsxs("div", { className: "border-b3-react-border bg-b3-react-subtle flex flex-col rounded-lg border p-4", children: [_jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-6 w-6" }), _jsx("h2", { className: "font-neue-montreal-bold text-b3-react-primary text-lg", children: "Global Account" })] }), !automaticallySetFirstEoa && (_jsxs("div", { className: "mb-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", className: "h-10 w-10" }), _jsxs("span", { className: "font-neue-montreal-bold text-2xl", children: [b3Balance?.formattedTotal || "--", " B3"] })] }), _jsx("div", { className: "border-b3-react-border my-4 border-t" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", className: "h-10 w-10" }), _jsxs("span", { className: "font-neue-montreal-bold text-2xl", children: [nativeBalance?.formattedTotal || "--", " ETH"] })] })] })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-b3-react-secondary-foreground text-sm", children: "Your universal account for all B3-powered apps" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-b3-react-muted-foreground font-mono text-sm", children: centerTruncate(account?.address || "", 6) }), _jsx(CopyToClipboard, { text: account?.address || "" })] })] })] }) }), _jsx("div", { className: "border-b3-react-border bg-b3-react-subtle w-full rounded-lg border p-4", children: eoaAddress && (_jsx(_Fragment, { children: _jsxs("div", { children: [_jsxs("h3", { className: "font-neue-montreal-bold text-b3-react-primary mb-2", children: ["Connected ", eoaInfo?.name] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", className: "h-10 w-10" }), _jsxs("span", { className: "font-neue-montreal-bold text-2xl", children: [eoaNativeBalance?.formattedTotal || "--", " ETH"] })] }), _jsx("div", { className: "border-b3-react-border my-4 border-t" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", className: "h-10 w-10" }), _jsxs("span", { className: "font-neue-montreal-bold text-2xl", children: [eoaB3Balance?.formattedTotal || "--", " B3"] })] }), _jsxs("div", { className: "text-b3-react-muted-foreground mt-2", children: [_jsx("span", { className: "font-mono text-sm", children: centerTruncate(eoaAddress, 6) }), _jsx(CopyToClipboard, { text: eoaAddress })] })] }) })) }), _jsxs("div", { className: "flex w-full gap-4", children: [_jsx(Button, { className: "font-neue-montreal-medium flex-1", onClick: () => {
                             setB3ModalOpen(true);
                             setB3ModalContentType({
                                 type: "anySpend",

package/dist/esm/global-account/react/hooks/useFirstEOA.d.ts

@@ -0,0 +1,6 @@
+import { Wallet } from "thirdweb/wallets";
+export default function useFirstEOA(): {
+    account: Wallet | undefined;
+    address: string | undefined;
+    info: import("@tanstack/react-query").UseQueryResult<import("thirdweb/wallets").WalletInfo, Error>;
+};

package/dist/esm/global-account/react/hooks/useFirstEOA.js

@@ -0,0 +1,36 @@
+import { useAuthStore } from "../../../global-account/react/index.js";
+import { useEffect, useState } from "react";
+import { useConnectedWallets, useWalletInfo } from "thirdweb/react";
+export default function useFirstEOA() {
+    const wallets = useConnectedWallets();
+    const isConnected = useAuthStore(state => state.isConnected);
+    const [firstEOA, setFirstEOA] = useState(undefined);
+    const [address, setAddress] = useState(undefined);
+    const walletInfo = useWalletInfo(firstEOA?.id);
+    console.log("@@wallets", wallets);
+    console.log("@@wallets:isConnected", isConnected);
+    useEffect(() => {
+        const autoSelectFirstEOAWallet = async () => {
+            // Only proceed if auto-selection is enabled and user is authenticated
+            if (!isConnected) {
+                console.log("@@wallets:not connected");
+                return;
+            }
+            // Find the first EOA wallet (excluding ecosystem wallets)
+            const isEOAWallet = (wallet) => !wallet.id.startsWith("ecosystem.");
+            const firstEOAWallet = wallets.find(isEOAWallet);
+            console.log("@@wallets:firstEOAWallet", firstEOAWallet);
+            const account = await firstEOAWallet?.getAccount();
+            console.log("@@wallets:account", account);
+            setFirstEOA(firstEOAWallet);
+            console.log("@@wallets:address", account?.address);
+            setAddress(account?.address);
+        };
+        autoSelectFirstEOAWallet();
+    }, [isConnected, wallets]);
+    return {
+        account: firstEOA,
+        address,
+        info: walletInfo,
+    };
+}

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

@@ -0,0 +1,6 @@
+import { Wallet } from "thirdweb/wallets";
+export default function useFirstEOA(): {
+    account: Wallet | undefined;
+    address: string | undefined;
+    info: import("@tanstack/react-query").UseQueryResult<import("thirdweb/wallets").WalletInfo, Error>;
+};

package/package.json

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

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

@@ -1,18 +1,19 @@
 import {
   Button,
   CopyToClipboard,
+  TabsContentPrimitive,
+  TabsListPrimitive,
+  TabsPrimitive,
+  TabTriggerPrimitive,
   TWSignerWithMetadata,
   useAccountAssets,
   useAuthentication,
+  useB3,
   useB3BalanceFromAddresses,
   useGetAllTWSigners,
+  useModalStore,
   useNativeBalance,
   useRemoveSessionKey,
-  useModalStore,
-  TabsPrimitive,
-  TabsContentPrimitive,
-  TabsListPrimitive,
-  TabTriggerPrimitive,
 } from "@b3dotfun/sdk/global-account/react";
 import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
@@ -21,6 +22,7 @@ import { useState } from "react";
 import { Chain } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";
 import { formatUnits } from "viem";
+import useFirstEOA from "../../hooks/useFirstEOA";
 import { AccountAssets } from "../AccountAssets/AccountAssets";
 
 interface ManageAccountProps {
@@ -44,12 +46,19 @@ 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 { data: eoaNativeBalance } = useNativeBalance(eoaAddress);
+  const { data: eoaB3Balance } = useB3BalanceFromAddresses(eoaAddress);
   const { data: signers, refetch: refetchSigners } = useGetAllTWSigners({
     chain,
     accountAddress: account?.address,
@@ -58,8 +67,6 @@ export function ManageAccount({
   const { logout } = useAuthentication(partnerId);
   const [logoutLoading, setLogoutLoading] = useState(false);
 
-  console.log("@@assets", assets);
-
   const { removeSessionKey } = useRemoveSessionKey({
     chain,
     onSuccess: tx => {
@@ -94,6 +101,20 @@ export function ManageAccount({
             <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>
           </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>
+              </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>
+          )}
           <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">
@@ -107,15 +128,26 @@ export function ManageAccount({
       </div>
 
       <div className="border-b3-react-border bg-b3-react-subtle w-full rounded-lg border p-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>
-        </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>
+        {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>
+              <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>
+              <div className="text-b3-react-muted-foreground mt-2">
+                <span className="font-mono text-sm">{centerTruncate(eoaAddress, 6)}</span>
+                <CopyToClipboard text={eoaAddress} />
+              </div>
+            </div>
+          </>
+        )}
       </div>
 
       <div className="flex w-full gap-4">

package/src/global-account/react/hooks/useFirstEOA.tsx

@@ -0,0 +1,44 @@
+import { useAuthStore } from "@b3dotfun/sdk/global-account/react";
+import { useEffect, useState } from "react";
+import { useConnectedWallets, useWalletInfo } from "thirdweb/react";
+import { Wallet } from "thirdweb/wallets";
+
+export default function useFirstEOA() {
+  const wallets = useConnectedWallets();
+  const isConnected = useAuthStore(state => state.isConnected);
+  const [firstEOA, setFirstEOA] = useState<Wallet | undefined>(undefined);
+  const [address, setAddress] = useState<string | undefined>(undefined);
+  const walletInfo = useWalletInfo(firstEOA?.id);
+
+  console.log("@@wallets", wallets);
+  console.log("@@wallets:isConnected", isConnected);
+
+  useEffect(() => {
+    const autoSelectFirstEOAWallet = async () => {
+      // Only proceed if auto-selection is enabled and user is authenticated
+      if (!isConnected) {
+        console.log("@@wallets:not connected");
+        return;
+      }
+
+      // Find the first EOA wallet (excluding ecosystem wallets)
+      const isEOAWallet = (wallet: Wallet) => !wallet.id.startsWith("ecosystem.");
+      const firstEOAWallet = wallets.find(isEOAWallet);
+      console.log("@@wallets:firstEOAWallet", firstEOAWallet);
+
+      const account = await firstEOAWallet?.getAccount();
+      console.log("@@wallets:account", account);
+      setFirstEOA(firstEOAWallet);
+      console.log("@@wallets:address", account?.address);
+      setAddress(account?.address);
+    };
+
+    autoSelectFirstEOAWallet();
+  }, [isConnected, wallets]);
+
+  return {
+    account: firstEOA,
+    address,
+    info: walletInfo,
+  };
+}