@b3dotfun/sdk 0.0.24 → 0.0.25

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

@@ -4,6 +4,7 @@ exports.B3DynamicModal = B3DynamicModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../anyspend/react");
 const react_2 = require("../../../global-account/react");
+const cn_1 = require("../../../shared/utils/cn");
 const debug_1 = require("../../../shared/utils/debug");
 const useB3_1 = require("./B3Provider/useB3");
 const ManageAccount_1 = require("./ManageAccount/ManageAccount");
@@ -17,9 +18,9 @@ function B3DynamicModal() {
     const { isOpen, setB3ModalOpen, contentType, history, navigateBack } = (0, react_2.useModalStore)();
     const { theme } = (0, useB3_1.useB3)();
     const isMobile = (0, react_2.useIsMobile)();
-    let contentClass = `b3-modal ${theme === "dark" ? "dark" : ""}`;
     let hideCloseButton = false;
-    if ([
+    // Define arrays for different modal type groups
+    const fullWidthTypes = [
         "anySpend",
         "anySpendNft",
         "anySpendJoinTournament",
@@ -30,10 +31,8 @@ function B3DynamicModal() {
         "signInWithB3",
         "anySpendSignatureMint",
         "anySpendBondKit",
-    ].find(type => contentType?.type === type)) {
-        contentClass += " w-full";
-    }
-    if ([
+    ];
+    const freestyleTypes = [
         "anySpendNft",
         "anySpendJoinTournament",
         "anySpendFundTournament",
@@ -41,16 +40,15 @@ function B3DynamicModal() {
         "anySpendBuySpin",
         "anySpendSignatureMint",
         "anySpendBondKit",
-    ].find(type => contentType?.type === type)) {
-        // Due to the dynamic of (Pay with crypto),(Pay with fiat), we want the height fixed to 90dvh but still scrollable.
-        // NOTE: Just leave it here in case we want the fixed height
-        // contentClass += " min-h-[90dvh] b3-modal-freestyle";
-        contentClass += " b3-modal-freestyle";
+    ];
+    // Check if current content type is in freestyle types
+    const isFreestyleType = freestyleTypes.includes(contentType?.type);
+    if (isFreestyleType) {
         hideCloseButton = true;
     }
-    if (contentType?.type === "transak") {
-        contentClass += " transak-modal";
-    }
+    // Build content class using cn utility
+    // eslint-disable-next-line tailwindcss/no-custom-classname
+    const contentClass = (0, cn_1.cn)("b3-modal", theme === "dark" && "dark", fullWidthTypes.includes(contentType?.type) && "w-full", isFreestyleType && "b3-modal-freestyle", contentType?.type === "signInWithB3" && "p-0", contentType?.type === "anySpend" && "md:px-6", contentType?.type === "transak" && "transak-modal");
     debug("contentType", contentType);
     const renderContent = () => {
         if (!contentType)
@@ -93,5 +91,5 @@ function B3DynamicModal() {
     const ModalContent = isMobile ? drawer_1.DrawerContent : dialog_1.DialogContent;
     const ModalTitle = isMobile ? drawer_1.DrawerTitle : dialog_1.DialogTitle;
     const ModalDescription = isMobile ? drawer_1.DrawerDescription : dialog_1.DialogDescription;
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: (0, jsx_runtime_1.jsxs)(ModalContent, { className: contentClass, hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: "no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]", children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "b3-modal-back-button mb-4 flex items-center gap-2 transition-colors hover:text-white", children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2190" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: "Back" })] })), renderContent()] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: (0, jsx_runtime_1.jsxs)(ModalContent, { className: (0, cn_1.cn)(contentClass, "rounded-2xl bg-white shadow-xl dark:bg-gray-900", "border border-gray-200 dark:border-gray-800", "mx-auto w-full max-w-md", "sm:max-w-lg"), hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: "no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]", children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Back" })] })), renderContent()] })] }) }));
 }

package/dist/cjs/global-account/react/components/B3Provider/B3Provider.d.ts

@@ -6,8 +6,7 @@ export declare const wagmiConfig: import("wagmi").Config<readonly [import("viem"
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ isMainnetAnySpend, theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, }: {
-    isMainnetAnySpend?: boolean;
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;

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

@@ -32,8 +32,8 @@ const queryClient = new react_query_1.QueryClient();
 /**
  * Main B3Provider component
  */
-function B3Provider({ isMainnetAnySpend = true, theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, }) {
-    return ((0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: exports.wagmiConfig, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_3.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, children: (0, jsx_runtime_1.jsxs)(react_1.RelayKitProviderWrapper, { isMainnet: isMainnetAnySpend, simDuneApiKey: simDuneApiKey, children: [children, (0, jsx_runtime_1.jsx)(StyleRoot_1.StyleRoot, { id: "b3-root" }), (0, jsx_runtime_1.jsx)(sonner_1.Toaster, { theme: theme, position: toaster?.position, style: toaster?.style })] }) }) }) }) }) }));
+function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, }) {
+    return ((0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: exports.wagmiConfig, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_3.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, children: (0, jsx_runtime_1.jsxs)(react_1.RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, (0, jsx_runtime_1.jsx)(StyleRoot_1.StyleRoot, { id: "b3-root" }), (0, jsx_runtime_1.jsx)(sonner_1.Toaster, { theme: theme, position: toaster?.position, style: toaster?.style })] }) }) }) }) }) }));
 }
 /**
  * Inner provider component that provides the actual B3Context

package/dist/cjs/global-account/react/components/B3Provider/B3Provider.native.d.ts

@@ -4,8 +4,7 @@ import { B3ContextType } from "./types";
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ isMainnetAnySpend, theme, children, accountOverride, environment, }: {
-    isMainnetAnySpend?: boolean;
+export declare function B3Provider({ theme, children, accountOverride, environment, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;

package/dist/cjs/global-account/react/components/B3Provider/B3Provider.native.js

@@ -21,9 +21,7 @@ const queryClient = new react_query_1.QueryClient();
 /**
  * Main B3Provider component
  */
-function B3Provider({ 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-isMainnetAnySpend = true, theme = "light", children, accountOverride, environment, }) {
+function B3Provider({ theme = "light", children, accountOverride, environment, }) {
     return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_2.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, children: children }) }) }));
 }
 /**

package/dist/cjs/global-account/react/components/B3Provider/RelayKitProviderWrapper.d.ts

@@ -1,5 +1,4 @@
-export declare function RelayKitProviderWrapper({ isMainnet, children, simDuneApiKey, }: {
-    isMainnet: boolean;
+export declare function RelayKitProviderWrapper({ children, simDuneApiKey, }: {
     children: React.ReactNode;
     simDuneApiKey?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/global-account/react/components/B3Provider/RelayKitProviderWrapper.js

@@ -5,17 +5,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const relay_kit_ui_1 = require("@reservoir0x/relay-kit-ui");
 const relay_sdk_1 = require("@reservoir0x/relay-sdk");
 const react_1 = require("react");
-function RelayKitProviderWrapper({ isMainnet, children, simDuneApiKey, }) {
+function RelayKitProviderWrapper({ children, simDuneApiKey, }) {
     const [relayChains, setRelayChains] = (0, react_1.useState)([]);
     (0, react_1.useEffect)(() => {
         const fetchChains = async () => {
-            const chains = await (0, relay_sdk_1.fetchChainConfigs)(isMainnet ? relay_sdk_1.MAINNET_RELAY_API : relay_sdk_1.TESTNET_RELAY_API);
+            const chains = await (0, relay_sdk_1.fetchChainConfigs)(relay_sdk_1.MAINNET_RELAY_API);
             setRelayChains(chains);
         };
         fetchChains();
-    }, [isMainnet]);
+    }, []);
     return ((0, jsx_runtime_1.jsx)(relay_kit_ui_1.RelayKitProvider, { options: {
-            baseApiUrl: isMainnet ? relay_sdk_1.MAINNET_RELAY_API : relay_sdk_1.TESTNET_RELAY_API,
+            baseApiUrl: relay_sdk_1.MAINNET_RELAY_API,
             source: "anyspend",
             duneConfig: {
                 apiKey: simDuneApiKey,

package/dist/cjs/global-account/react/components/ManageAccount/ManageAccount.d.ts

@@ -6,6 +6,7 @@ interface ManageAccountProps {
     onViewProfile?: () => void;
     chain: Chain;
     partnerId: string;
+    containerClassName?: string;
 }
 export declare function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, }: ManageAccountProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ManageAccount = ManageAccount;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../../global-account/react");
-const formatAddress_1 = require("../../../../shared/utils/formatAddress");
+const BankIcon_1 = require("../../../../global-account/react/components/icons/BankIcon");
+const SignOutIcon_1 = require("../../../../global-account/react/components/icons/SignOutIcon");
+const SwapIcon_1 = require("../../../../global-account/react/components/icons/SwapIcon");
+const utils_1 = require("../../../../shared/utils");
 const formatNumber_1 = require("../../../../shared/utils/formatNumber");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
@@ -20,14 +23,17 @@ 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 { address: eoaAddress } = (0, useFirstEOA_1.default)();
+    const { data: profile } = (0, react_1.useProfile)({
+        address: eoaAddress || account?.address,
+        fresh: true,
+    });
     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)({
@@ -37,6 +43,8 @@ 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("account", account);
+    console.log("eoaAddress", eoaAddress);
     const { removeSessionKey } = (0, react_1.useRemoveSessionKey)({
         chain,
         onSuccess: tx => {
@@ -60,21 +68,24 @@ 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" })] }), !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",
-                                defaultActiveTab: "fiat",
-                                showBackButton: true,
-                            });
-                        }, children: "Deposit" }), (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "default", className: "font-neue-montreal-medium flex-1", onClick: () => {
-                            setB3ModalOpen(true);
-                            setB3ModalContentType({
-                                type: "anySpend",
-                                showBackButton: true,
-                            });
-                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightLeft, { className: "mr-2 h-4 w-4" }), "Swap"] })] })] }));
-    const AssetsContent = () => ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-card border-b3-react-border rounded-lg border p-4", children: assets?.nftResponse && (0, jsx_runtime_1.jsx)(AccountAssets_1.AccountAssets, { nfts: assets.nftResponse, isLoading: isLoading }) }));
-    const AppsContent = () => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-card border-b3-react-border rounded-lg border p-4", children: [signers?.map((signer) => ((0, jsx_runtime_1.jsxs)("div", { className: "border-b3-react-border flex items-center justify-between border-b py-4 last:border-b-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-react-muted flex h-8 w-8 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-react-muted-foreground text-xs", children: "App" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-bold mb-2 text-base", children: signer.partner.name }), (0, jsx_runtime_1.jsxs)("div", { className: "text-b3-react-muted-foreground flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-b3-react-muted-foreground font-mono text-xs", children: ["Added: ", new Date(signer.createdAt).toLocaleDateString()] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-b3-react-muted-foreground font-mono text-xs", children: ["Expires: ", new Date(Number(signer.endTimestamp) * 1000).toLocaleDateString()] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-b3-react-muted-foreground font-mono text-xs", children: ["Max spend: ", (0, formatNumber_1.formatNumber)(Number((0, viem_1.formatUnits)(signer.nativeTokenLimitPerTransaction, 18))), " ETH"] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-b3-react-muted-foreground font-mono text-xs", children: ["Approved Contracts: ", signer.approvedTargets.map(formatAddress_1.formatAddress).join(", ")] })] })] })] }), (0, jsx_runtime_1.jsx)(react_1.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, children: revokingSignerId === signer.id ? "Revoking..." : "Revoke" })] }, signer.id))), !signers?.length && (0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-muted-foreground py-8 text-center", children: "No connected apps" })] }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsxs)(react_1.TabsPrimitive, { defaultValue: activeTab, onValueChange: setActiveTab, children: [(0, jsx_runtime_1.jsxs)(react_1.TabsListPrimitive, { className: "mb-4 w-full", children: [(0, jsx_runtime_1.jsx)(react_1.TabTriggerPrimitive, { value: "balance", className: "font-neue-montreal-bold text-base", children: "Balance" }), (0, jsx_runtime_1.jsx)(react_1.TabTriggerPrimitive, { value: "assets", className: "font-neue-montreal-bold text-base", children: "NFTs" }), (0, jsx_runtime_1.jsx)(react_1.TabTriggerPrimitive, { value: "apps", className: "font-neue-montreal-bold text-base", children: "Apps" })] }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "balance", children: (0, jsx_runtime_1.jsx)(BalanceContent, {}) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "assets", children: (0, jsx_runtime_1.jsx)(AssetsContent, {}) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "apps", children: (0, jsx_runtime_1.jsx)(AppsContent, {}) })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-b3-react-border border-t" }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "outline", size: "sm", className: "font-neue-montreal-medium text-b3-react-muted-foreground hover:text-b3-react-foreground", onClick: onLogoutEnhanced, children: logoutLoading ? "Logging out..." : "Logout" })] })] }));
+    const BalanceContent = () => {
+        const { info: eoaInfo } = (0, useFirstEOA_1.default)();
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [profile?.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: profile?.avatar, alt: "Profile", className: "size-24 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-grey border-b3-background absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 16, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-b3-grey text-xl font-semibold", children: profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "") }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted", children: (0, utils_1.formatUsername)(profile?.name || "") })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "manage-account-address bg-b3-line flex h-11 items-center gap-2 rounded-full px-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: centerTruncate(account?.address || "") }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: account?.address || "" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [(0, jsx_runtime_1.jsxs)(react_1.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,
+                                });
+                            }, children: [(0, jsx_runtime_1.jsx)(BankIcon_1.BankIcon, { size: 24, className: "text-b3-primary-blue shrink-0" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Deposit" })] }), (0, jsx_runtime_1.jsxs)(react_1.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,
+                                });
+                            }, children: [(0, jsx_runtime_1.jsx)(SwapIcon_1.SwapIcon, { size: 24, className: "text-b3-primary-blue" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Swap" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold", children: "Balance" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", className: "size-10" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: "B3" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: [b3Balance?.formattedTotal || "0.00", " B3"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", b3Balance?.balanceUsdFormatted || "0.00"] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: b3Balance?.priceChange24h !== null && b3Balance?.priceChange24h !== undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Triangle, { className: `size-3 ${b3Balance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), (0, jsx_runtime_1.jsxs)("span", { className: `font-neue-montreal-medium text-sm ${b3Balance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [b3Balance.priceChange24h >= 0 ? "+" : "", b3Balance.priceChange24h.toFixed(2), "%"] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", className: "size-10" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: "Ethereum" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: [nativeBalance?.formattedTotal || "0.00", " ETH"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", nativeBalance?.formattedTotalUsd || "0.00"] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: nativeBalance?.priceChange24h !== null && nativeBalance?.priceChange24h !== undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Triangle, { className: `size-3 ${nativeBalance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), (0, jsx_runtime_1.jsxs)("span", { className: `font-neue-montreal-medium text-sm ${nativeBalance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [nativeBalance.priceChange24h >= 0 ? "+" : "", nativeBalance.priceChange24h.toFixed(2), "%"] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] })] }), eoaAddress && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-b3-grey font-neue-montreal-semibold", children: ["Connected ", eoaInfo?.data?.name || "Wallet"] }), (0, jsx_runtime_1.jsxs)("div", { className: "manage-account-address bg-b3-line flex h-11 items-center gap-2 rounded-full px-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: centerTruncate(eoaAddress) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: eoaAddress })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3-coin-3d.png", alt: "B3", className: "size-10" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: "B3" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: [eoaB3Balance?.formattedTotal || "0.00", " B3"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", eoaB3Balance?.balanceUsdFormatted || "0.00"] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: eoaB3Balance?.priceChange24h !== null && eoaB3Balance?.priceChange24h !== undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Triangle, { className: `size-3 ${eoaB3Balance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), (0, jsx_runtime_1.jsxs)("span", { className: `font-neue-montreal-medium text-sm ${eoaB3Balance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [eoaB3Balance.priceChange24h >= 0 ? "+" : "", eoaB3Balance.priceChange24h.toFixed(2), "%"] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/ethereum.svg", alt: "ETH", className: "size-10" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: "Ethereum" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: [eoaNativeBalance?.formattedTotal || "0.00", " ETH"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", eoaNativeBalance?.formattedTotalUsd || "0.00"] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: eoaNativeBalance?.priceChange24h !== null && eoaNativeBalance?.priceChange24h !== undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Triangle, { className: `size-3 ${eoaNativeBalance.priceChange24h >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), (0, jsx_runtime_1.jsxs)("span", { className: `font-neue-montreal-medium text-sm ${eoaNativeBalance.priceChange24h >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [eoaNativeBalance.priceChange24h >= 0 ? "+" : "", eoaNativeBalance.priceChange24h.toFixed(2), "%"] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "border-b3-line flex items-center justify-between rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4" }), (0, jsx_runtime_1.jsx)("h3", { className: "font-neue-montreal-semibold text-b3-grey", children: "Global Account" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm", children: "Your universal account for all B3-powered apps" })] }), (0, jsx_runtime_1.jsx)("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, children: logoutLoading ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" }) : (0, jsx_runtime_1.jsx)(SignOutIcon_1.SignOutIcon, { size: 16, className: "text-b3-grey" }) })] })] }));
+    };
+    const AssetsContent = () => ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-4", children: assets?.nftResponse ? ((0, jsx_runtime_1.jsx)(AccountAssets_1.AccountAssets, { nfts: assets.nftResponse, isLoading: isLoading })) : ((0, jsx_runtime_1.jsx)("div", { className: "col-span-3 py-12 text-center text-gray-500", children: "No NFTs found" })) }));
+    const AppsContent = () => ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [signers?.map((signer) => ((0, jsx_runtime_1.jsx)("div", { className: "rounded-xl border border-gray-200 p-4 dark:border-gray-800", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: "App" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-medium text-gray-900 dark:text-white", children: signer.partner.name }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 space-y-1", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-500", children: ["Added ", new Date(signer.createdAt).toLocaleDateString()] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-500", children: ["Expires ", new Date(Number(signer.endTimestamp) * 1000).toLocaleDateString()] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-500", children: ["Max spend: ", (0, formatNumber_1.formatNumber)(Number((0, viem_1.formatUnits)(signer.nativeTokenLimitPerTransaction, 18))), " ETH"] })] })] })] }), (0, jsx_runtime_1.jsx)(react_1.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, children: revokingSignerId === signer.id ? "Revoking..." : "Revoke" })] }) }, signer.id))), !signers?.length && (0, jsx_runtime_1.jsx)("div", { className: "py-12 text-center text-gray-500", children: "No connected apps" })] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "b3-manage-account bg-b3-background flex flex-col rounded-xl", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsxs)(react_1.TabsPrimitive, { defaultValue: activeTab, onValueChange: setActiveTab, children: [(0, jsx_runtime_1.jsxs)(react_1.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", children: [(0, jsx_runtime_1.jsx)(react_1.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", children: "Overview" }), (0, jsx_runtime_1.jsx)(react_1.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", children: "Mints" }), (0, jsx_runtime_1.jsx)(react_1.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", children: "Apps" })] }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "balance", className: "pt-4 md:p-4", children: (0, jsx_runtime_1.jsx)(BalanceContent, {}) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "assets", className: "pt-4 md:p-4", children: (0, jsx_runtime_1.jsx)(AssetsContent, {}) }), (0, jsx_runtime_1.jsx)(react_1.TabsContentPrimitive, { value: "apps", className: "pt-4 md:p-4", children: (0, jsx_runtime_1.jsx)(AppsContent, {}) })] }) }) }));
 }

package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStep.js

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

package/dist/cjs/global-account/react/components/custom/CopyToClipboard.d.ts

@@ -2,6 +2,7 @@ interface CopyToClipboardProps {
     text?: string;
     onCopy?: () => void;
     children?: React.ReactNode;
+    className?: string;
 }
-export declare function CopyToClipboard({ text, onCopy, children }: CopyToClipboardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CopyToClipboard({ text, onCopy, children, className }: CopyToClipboardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/global-account/react/components/custom/CopyToClipboard.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyToClipboard = CopyToClipboard;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../../shared/utils");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");
-function CopyToClipboard({ text, onCopy, children }) {
+function CopyToClipboard({ text, onCopy, children, className }) {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const handleCopy = async () => {
         if (!text)
@@ -17,5 +18,5 @@ function CopyToClipboard({ text, onCopy, children }) {
     if (children) {
         return ((0, jsx_runtime_1.jsx)("div", { onClick: handleCopy, className: "cursor-pointer", children: children }));
     }
-    return ((0, jsx_runtime_1.jsx)("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", children: copied ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Copied" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { children: "Copy" })] })) }));
+    return ((0, jsx_runtime_1.jsx)("div", { onClick: handleCopy, className: (0, utils_1.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), children: copied ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" }) })) }));
 }

package/dist/cjs/global-account/react/components/icons/BankIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface BankIconProps {
+    className?: string;
+    size?: number;
+    color?: string;
+    style?: React.CSSProperties;
+}
+export declare function BankIcon({ className, size, color, style }: BankIconProps): import("react/jsx-runtime").JSX.Element;
+export default BankIcon;

package/dist/cjs/global-account/react/components/icons/BankIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BankIcon = BankIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function BankIcon({ className, size = 24, color = "#3268EF", style }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [(0, jsx_runtime_1.jsx)("path", { d: "M2.25 9H21.75L12 3L2.25 9Z", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.25 9V15.75", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.75 9V15.75", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.25 9V15.75", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.75 9V15.75", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 15.75H21", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M1.5 19.5H22.5", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+exports.default = BankIcon;

package/dist/cjs/global-account/react/components/icons/EditIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface EditIconProps {
+    className?: string;
+    size?: number;
+    color?: string;
+    style?: React.CSSProperties;
+}
+export declare function EditIcon({ className, size, color, style }: EditIconProps): import("react/jsx-runtime").JSX.Element;
+export default EditIcon;

package/dist/cjs/global-account/react/components/icons/EditIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditIcon = EditIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function EditIcon({ className, size = 16, color = "white", style }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [(0, jsx_runtime_1.jsx)("path", { d: "M5.79313 13.5001H3C2.86739 13.5001 2.74021 13.4474 2.64645 13.3536C2.55268 13.2599 2.5 13.1327 2.5 13.0001V10.207C2.50006 10.0745 2.55266 9.94753 2.64625 9.85383L10.3538 2.14633C10.4475 2.05263 10.5746 2 10.7072 2C10.8397 2 10.9669 2.05263 11.0606 2.14633L13.8538 4.93758C13.9474 5.03134 14.0001 5.15847 14.0001 5.29102C14.0001 5.42357 13.9474 5.5507 13.8538 5.64446L6.14625 13.3538C6.05255 13.4474 5.92556 13.5 5.79313 13.5001Z", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.5 4L12 7.5", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+exports.default = EditIcon;

package/dist/cjs/global-account/react/components/icons/SignOutIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface SignOutIconProps {
+    className?: string;
+    size?: number;
+    color?: string;
+    style?: React.CSSProperties;
+}
+export declare function SignOutIcon({ className, size, color, style }: SignOutIconProps): import("react/jsx-runtime").JSX.Element;
+export default SignOutIcon;

package/dist/cjs/global-account/react/components/icons/SignOutIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignOutIcon = SignOutIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function SignOutIcon({ className, size = 16, color = "#676767", style }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 2.5H3V13.5H7", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 8H14", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M11.5 5.5L14 8L11.5 10.5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+exports.default = SignOutIcon;

package/dist/cjs/global-account/react/components/icons/SwapIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface SwapIconProps {
+    className?: string;
+    size?: number;
+    color?: string;
+    style?: React.CSSProperties;
+}
+export declare function SwapIcon({ className, size, color, style }: SwapIconProps): import("react/jsx-runtime").JSX.Element;
+export default SwapIcon;

package/dist/cjs/global-account/react/components/icons/SwapIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapIcon = SwapIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function SwapIcon({ className, size = 24, color = "#3268EF", style }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [(0, jsx_runtime_1.jsx)("path", { d: "M8.75 9H4.25V4.5", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.25 9.00013L6.90125 6.34888C8.43666 4.81353 10.5154 3.94539 12.6868 3.93276C14.8581 3.92012 16.9468 4.764 18.5 6.28138", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.25 15H20.75V19.5", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M20.75 15L18.0988 17.6512C16.5633 19.1866 14.4846 20.0547 12.3132 20.0674C10.1419 20.08 8.05317 19.2361 6.5 17.7188", stroke: color, strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+exports.default = SwapIcon;

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

@@ -10,6 +10,12 @@ export declare function useB3BalanceFromAddresses(addresses?: string[] | string
         address: string;
         balance: bigint;
         formatted: string;
+        balanceUsd: number;
+        balanceUsdFormatted: string;
+        priceChange24h: number | null;
     }[];
+    balanceUsd: number;
+    balanceUsdFormatted: string;
+    priceChange24h: number | null;
 }, Error>;
 export default useB3BalanceFromAddresses;

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

@@ -6,6 +6,7 @@ const formatNumber_1 = require("../../../shared/utils/formatNumber");
 const react_query_1 = require("@tanstack/react-query");
 const viem_1 = require("viem");
 const chains_1 = require("viem/chains");
+const useTokenPrice_1 = require("./useTokenPrice");
 // ABI for just balanceOf
 const abi = [
     {
@@ -23,6 +24,8 @@ const client = (0, viem_1.createPublicClient)({
 });
 async function fetchB3Balances(addresses) {
     try {
+        // Fetch price with change data once (same for all addresses since it's the same token)
+        const priceData = await (0, useTokenPrice_1.fetchTokenPriceWithChange)(anyspend_1.B3_TOKEN.address, anyspend_1.B3_TOKEN.chainId, "usd");
         // Fetch all balances in parallel
         const balances = await Promise.all(addresses.map(async (address) => {
             const balance = await client.readContract({
@@ -31,18 +34,26 @@ async function fetchB3Balances(addresses) {
                 functionName: "balanceOf",
                 args: [address],
             });
+            const balanceUsd = Number((0, viem_1.formatUnits)(balance, anyspend_1.B3_TOKEN.decimals)) * priceData.price;
             return {
                 address,
                 balance,
                 formatted: (0, viem_1.formatUnits)(balance, anyspend_1.B3_TOKEN.decimals),
+                balanceUsd,
+                balanceUsdFormatted: (0, formatNumber_1.formatNumber)(balanceUsd),
+                priceChange24h: priceData.priceChange24h,
             };
         }));
         // Calculate total
         const totalBalance = balances.reduce((sum, { balance }) => sum + balance, BigInt(0));
+        const totalBalanceUsd = balances.reduce((sum, { balanceUsd }) => sum + balanceUsd, 0);
         return {
             totalBalance,
             formattedTotal: (0, formatNumber_1.formatNumber)(Number((0, viem_1.formatUnits)(totalBalance, anyspend_1.B3_TOKEN.decimals))),
             breakdown: balances,
+            balanceUsd: totalBalanceUsd,
+            balanceUsdFormatted: (0, formatNumber_1.formatNumber)(totalBalanceUsd),
+            priceChange24h: priceData.priceChange24h,
         };
     }
     catch (error) {

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

@@ -1,10 +1,16 @@
 export declare function useNativeBalance(address?: string, chainIds?: string): import("@tanstack/react-query").UseQueryResult<{
     total: number;
     formattedTotal: string;
+    totalUsd: number;
+    formattedTotalUsd: string;
+    priceChange24h: number | null;
     breakdown: {
         chainId: number;
         balance: bigint;
         formatted: string;
+        balanceUsd: number;
+        balanceUsdFormatted: string;
+        priceChange24h: number | null;
     }[];
 }, Error>;
 /**

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

@@ -7,6 +7,7 @@ const formatNumber_1 = require("../../../shared/utils/formatNumber");
 const react_query_1 = require("@tanstack/react-query");
 const sonner_1 = require("sonner");
 const viem_1 = require("viem");
+const useTokenPrice_1 = require("./useTokenPrice");
 async function fetchNativeBalance(address, chainIds) {
     if (!address)
         throw new Error("Address is required");
@@ -20,20 +21,52 @@ async function fetchNativeBalance(address, chainIds) {
         const balance = (0, viem_1.formatUnits)(BigInt(curr.balance), curr.tokenDecimals);
         return acc + Number(balance);
     }, 0);
+    // TODO: Revive me once CoinGecko supports B3
+    let usdBalances = {};
+    let globalPriceChange24h = null;
+    try {
+        for (const item of data.data) {
+            // Use chain ID once since native token ETH is the same across all chains
+            const priceData = await (0, useTokenPrice_1.fetchNativeTokenPriceWithChange)("eth");
+            // Store the price change globally (same for all chains since it's ETH)
+            if (globalPriceChange24h === null) {
+                globalPriceChange24h = priceData.priceChange24h;
+            }
+            usdBalances[item.chainId] = {
+                balance: total * priceData.price,
+                formatted: (0, formatNumber_1.formatNumber)(total * priceData.price),
+                priceChange24h: priceData.priceChange24h,
+            };
+        }
+    }
+    catch (error) {
+        console.error("@@useNativeBalance:error in price calculation", error);
+    }
+    const totalUsd = Object.values(usdBalances).reduce((acc, curr) => acc + curr.balance, 0);
     return {
         total,
         formattedTotal: (0, formatNumber_1.formatNumber)(total),
-        breakdown: data.data.map(item => ({
-            chainId: item.chainId,
-            balance: BigInt(item.balance),
-            formatted: (0, formatNumber_1.formatNumber)(Number((0, viem_1.formatUnits)(BigInt(item.balance), item.tokenDecimals))),
-        })),
+        totalUsd,
+        formattedTotalUsd: (0, formatNumber_1.formatNumber)(totalUsd),
+        priceChange24h: globalPriceChange24h,
+        breakdown: data.data.map(item => {
+            const usdBalance = usdBalances[item.chainId]?.balance || 0;
+            const priceChange = usdBalances[item.chainId]?.priceChange24h || null;
+            return {
+                chainId: item.chainId,
+                balance: BigInt(item.balance),
+                formatted: (0, formatNumber_1.formatNumber)(Number((0, viem_1.formatUnits)(BigInt(item.balance), item.tokenDecimals))),
+                balanceUsd: usdBalance,
+                balanceUsdFormatted: (0, formatNumber_1.formatNumber)(usdBalance),
+                priceChange24h: priceChange,
+            };
+        }),
     };
 }
 function useNativeBalance(address, chainIds = "8333") {
     return (0, react_query_1.useQuery)({
         queryKey: ["nativeBalance", address, chainIds],
-        queryFn: () => fetchNativeBalance(address, chainIds),
+        queryFn: () => fetchNativeBalance(address || "", chainIds),
         enabled: Boolean(address),
         staleTime: 30 * 1000, // Consider data fresh for 30 seconds
         gcTime: 5 * 60 * 1000, // Keep unused data in cache for 5 minutes

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

@@ -7,6 +7,16 @@ interface UseTokenPriceProps {
     refreshInterval?: number;
     queryOptions?: Omit<UseQueryOptions<number, Error>, "queryKey" | "queryFn" | "refetchInterval" | "staleTime" | "retry" | "retryDelay">;
 }
+export declare function fetchNativeTokenPriceUsd(contractAddress: string, network: string): Promise<number>;
+export declare function fetchNativeTokenPriceWithChange(network: string): Promise<{
+    price: number;
+    priceChange24h: number | null;
+}>;
+export declare function fetchTokenPrice(contractAddress: string, chainId: number, vsCurrency?: string): Promise<number>;
+export declare function fetchTokenPriceWithChange(contractAddress: string, chainId: number, vsCurrency?: string): Promise<{
+    price: number;
+    priceChange24h: number | null;
+}>;
 export declare function useTokenPrice({ contractAddress, chainId, // Default to Base
 vsCurrency, refreshInterval, queryOptions, }: UseTokenPriceProps): {
     price: number;