@openfort/react 1.0.3 → 1.0.4

package/build/components/Openfort/types.d.ts

@@ -372,6 +372,9 @@ export type Asset = {
     };
     raw?: getAssets.Erc20Asset;
 };
+export type MultiChainAsset = Asset & {
+    chainId: number;
+};
 export type SendFormState = {
     recipient: string;
     amount: string;

package/build/components/Pages/AssetInventory/index.js

@@ -1,10 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { useState, useEffect, useMemo } from 'react';
 import { formatUnits } from 'viem';
+import { TOKEN_LOGO, symbolToColor } from '../../../constants/logos.js';
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
+import Chain from '../../Common/Chain/index.js';
 import { ModalHeading } from '../../Common/Modal/styles.js';
-import { EmptyState } from '../BuyProviderSelect/styles.js';
-import { SelectTokenContent, TokenList, TokenContainer, TokenInfo, TokenSymbol, TokenBalance, TokenName } from '../SelectToken/styles.js';
-import { getAssetSymbol, getAssetDecimals, formatBalanceWithSymbol } from '../Send/utils.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { SelectTokenContent, EmptyState, ContentWrapper, ChainGroup, ChainGroupHeader, TokenPill, TokenPillSymbol, InfoLink, TokenList, TokenContainer, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenBalance, TokenLogoArea, TokenLogoImg, TokenLogoFallback, ChainBadge } from '../SelectToken/styles.js';
+import { getAssetSymbol, getAssetDecimals } from '../Send/utils.js';
 
 const ZERO = BigInt(0);
 const usdFormatter = new Intl.NumberFormat('en-US', {
@@ -13,53 +17,128 @@ const usdFormatter = new Intl.NumberFormat('en-US', {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
 });
-const AssetInventory = () => {
-    const { data: walletAssets, isLoading: isBalancesLoading } = useEthereumWalletAssets();
-    // Show all tokens for both buy and send flows
-    const selectableTokens = walletAssets || [];
-    const renderContent = () => {
-        if (!selectableTokens.length) {
-            if (isBalancesLoading) {
-                return jsx(EmptyState, { children: "Loading balances\u2026" });
+const priceFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 4,
+});
+function getTokenLogoUrl(token) {
+    var _a;
+    const symbol = getAssetSymbol(token).toUpperCase();
+    return (_a = TOKEN_LOGO[symbol]) !== null && _a !== void 0 ? _a : null;
+}
+function TokenLogo({ token }) {
+    const [imgError, setImgError] = useState(false);
+    const symbol = getAssetSymbol(token);
+    const logoUrl = getTokenLogoUrl(token);
+    return (jsxs(TokenLogoArea, { children: [logoUrl && !imgError ? (jsx(TokenLogoImg, { src: logoUrl, alt: symbol, onError: () => setImgError(true) })) : (jsx(TokenLogoFallback, { "$bg": symbolToColor(symbol), children: symbol.charAt(0).toUpperCase() })), jsx(ChainBadge, { children: jsx(Chain, { id: token.chainId, unsupported: false, size: 14 }) })] }));
+}
+function renderTokenRow(token) {
+    var _a, _b, _c, _d;
+    const key = token.type === 'erc20' ? `${token.chainId}-${token.address}` : `${token.chainId}-native`;
+    const displaySymbol = getAssetSymbol(token);
+    const displayName = ((_a = token.metadata) === null || _a === void 0 ? void 0 : _a.name) || displaySymbol || 'Unknown Token';
+    const decimals = getAssetDecimals(token);
+    const pricePerToken = (_c = (_b = token.metadata) === null || _b === void 0 ? void 0 : _b.fiat) === null || _c === void 0 ? void 0 : _c.value;
+    let usdValue = null;
+    let balanceNum = '';
+    let priceDisplay = null;
+    const isBalanceLoaded = token.balance !== undefined;
+    const hasZeroBalance = isBalanceLoaded && ((_d = token.balance) !== null && _d !== void 0 ? _d : ZERO) <= ZERO;
+    if (hasZeroBalance)
+        return null;
+    if (isBalanceLoaded && token.balance !== undefined) {
+        const amount = parseFloat(formatUnits(token.balance, decimals));
+        if (Number.isFinite(amount)) {
+            balanceNum = `${amount.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 4 })} ${displaySymbol}`;
+            if (pricePerToken !== undefined) {
+                const totalUsd = amount * pricePerToken;
+                if (totalUsd >= 0.01) {
+                    usdValue = usdFormatter.format(totalUsd);
+                }
+                else if (totalUsd > 0) {
+                    usdValue = '<$0.01';
+                }
+                else {
+                    usdValue = usdFormatter.format(0);
+                }
+                priceDisplay = `@${priceFormatter.format(pricePerToken)}`;
             }
-            return jsx(EmptyState, { children: "No supported tokens found for this network yet." });
         }
-        return (jsx(TokenList, { children: selectableTokens.map((token) => {
-                var _a, _b, _c, _d, _e;
-                const key = token.type === 'erc20' ? token.address : 'native';
-                const displaySymbol = getAssetSymbol(token);
-                const displayName = ((_a = token.metadata) === null || _a === void 0 ? void 0 : _a.name) || displaySymbol || 'Unknown Token';
-                const decimals = getAssetDecimals(token);
-                const pricePerToken = (_c = (_b = token.metadata) === null || _b === void 0 ? void 0 : _b.fiat) === null || _c === void 0 ? void 0 : _c.value;
-                let usdValue = null;
-                // Show loading state for balances
-                const isBalanceLoaded = token.balance !== undefined;
-                const balanceDisplay = isBalanceLoaded
-                    ? formatBalanceWithSymbol(token.balance, decimals, ((_d = token.metadata) === null || _d === void 0 ? void 0 : _d.symbol) || '')
-                    : 'Loading...';
-                // Check if token has zero balance (for send flow opacity)
-                const hasZeroBalance = isBalanceLoaded && ((_e = token.balance) !== null && _e !== void 0 ? _e : ZERO) <= ZERO;
-                if (hasZeroBalance)
-                    return null;
-                if (isBalanceLoaded && pricePerToken !== undefined && token.balance !== undefined) {
-                    const amount = parseFloat(formatUnits(token.balance, decimals));
-                    if (Number.isFinite(amount)) {
-                        const totalUsd = amount * pricePerToken;
-                        if (totalUsd >= 0.01) {
-                            usdValue = usdFormatter.format(totalUsd);
-                        }
-                        else if (totalUsd > 0) {
-                            usdValue = '<$0.01';
-                        }
-                        else {
-                            usdValue = usdFormatter.format(0);
-                        }
-                    }
-                }
-                return (jsxs(TokenContainer, { children: [jsx(TokenInfo, { children: jsx(TokenSymbol, { children: displayName }) }), jsxs(TokenInfo, { children: [jsx(TokenBalance, { children: balanceDisplay }), usdValue ? jsx(TokenName, { style: { textAlign: 'end' }, children: usdValue }) : null] })] }, key));
-            }) }));
-    };
-    return (jsxs(SelectTokenContent, { children: [jsx(ModalHeading, { children: "Your assets" }), renderContent()] }));
+    }
+    return (jsxs(TokenContainer, { children: [jsxs(TokenLeftGroup, { children: [jsx(TokenLogo, { token: token }), jsxs(TokenInfo, { style: { textAlign: 'left' }, children: [jsx(TokenSymbol, { children: displayName }), jsx(TokenName, { children: balanceNum || 'Loading...' })] })] }), jsxs(TokenInfo, { children: [usdValue ? jsx(TokenBalance, { children: usdValue }) : null, priceDisplay ? jsx(TokenName, { style: { textAlign: 'end' }, children: priceDisplay }) : null] })] }, key));
+}
+const PILL_LOGO_SIZE = 16;
+function PillLogo({ symbol }) {
+    var _a;
+    const [imgError, setImgError] = useState(false);
+    const url = (_a = TOKEN_LOGO[symbol.toUpperCase()]) !== null && _a !== void 0 ? _a : null;
+    if (!url || imgError) {
+        return (jsx("span", { style: {
+                width: PILL_LOGO_SIZE,
+                height: PILL_LOGO_SIZE,
+                borderRadius: '50%',
+                background: symbolToColor(symbol),
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 9,
+                fontWeight: 700,
+                color: '#fff',
+                flexShrink: 0,
+            }, children: symbol.charAt(0).toUpperCase() }));
+    }
+    return (jsx("img", { src: url, alt: symbol, onError: () => setImgError(true), style: {
+            width: PILL_LOGO_SIZE,
+            height: PILL_LOGO_SIZE,
+            borderRadius: '50%',
+            objectFit: 'cover',
+            flexShrink: 0,
+        } }));
+}
+const AssetInventory = () => {
+    var _a;
+    const { data, multiChain, isLoading: isBalancesLoading } = useEthereumWalletAssets({ multiChain: true });
+    const { triggerResize, chains } = useOpenfort();
+    const [showDetails, setShowDetails] = useState(false);
+    useEffect(() => {
+        if (!isBalancesLoading)
+            triggerResize();
+    }, [isBalancesLoading]);
+    useEffect(() => {
+        triggerResize();
+    }, [showDetails]);
+    const tokens = (_a = (multiChain ? data : null)) !== null && _a !== void 0 ? _a : [];
+    const hasBalance = tokens.some((t) => t.balance > ZERO);
+    const chainNameMap = useMemo(() => {
+        const map = new Map();
+        for (const c of chains)
+            map.set(c.id, c.name);
+        return map;
+    }, [chains]);
+    const groupedByChain = useMemo(() => {
+        var _a;
+        const groups = new Map();
+        for (const t of tokens) {
+            if (!groups.has(t.chainId))
+                groups.set(t.chainId, []);
+            groups.get(t.chainId).push({
+                symbol: getAssetSymbol(t),
+                name: ((_a = t.metadata) === null || _a === void 0 ? void 0 : _a.name) || getAssetSymbol(t),
+            });
+        }
+        return groups;
+    }, [tokens]);
+    if (isBalancesLoading) {
+        return (jsxs(SelectTokenContent, { children: [jsx(ModalHeading, { children: "Your assets" }), jsx(EmptyState, { children: "Loading balances..." })] }));
+    }
+    if (showDetails) {
+        return (jsxs(SelectTokenContent, { onBack: () => {
+                setShowDetails(false);
+            }, children: [jsx(ModalHeading, { children: "Configured assets" }), jsx(motion.div, { initial: { opacity: 0, scale: 1.1 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.2, ease: [0.26, 0.08, 0.25, 1] }, style: { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }, children: jsx(ContentWrapper, { style: { overflowY: 'auto', maxHeight: 400 }, children: Array.from(groupedByChain.entries()).map(([chainId, assets]) => (jsxs(ChainGroup, { children: [jsxs(ChainGroupHeader, { children: [jsx(Chain, { id: chainId, unsupported: false, size: 18 }), chainNameMap.get(chainId) || `Chain ${chainId}`] }), assets.map((a) => (jsxs(TokenPill, { children: [jsx(PillLogo, { symbol: a.symbol }), jsx(TokenPillSymbol, { children: a.symbol }), a.name !== a.symbol && a.name] }, `${chainId}-${a.symbol}`)))] }, chainId))) }) })] }, "details"));
+    }
+    return (jsxs(SelectTokenContent, { children: [jsx(ModalHeading, { children: "Your assets" }), jsxs(ContentWrapper, { children: [jsxs(InfoLink, { type: "button", onClick: () => setShowDetails(true), children: [jsxs("svg", { role: "img", "aria-label": "Info", width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1.25" }), jsx("path", { d: "M7 6.25V10", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" }), jsx("circle", { cx: "7", cy: "4.25", r: "0.75", fill: "currentColor" })] }), "Only configured chains and tokens are shown"] }), jsx(TokenList, { children: hasBalance ? tokens.map(renderTokenRow) : jsx(EmptyState, { children: "No assets found" }) })] })] }, "assets"));
 };
 
 export { AssetInventory };

package/build/components/Pages/AssetInventory/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/SelectToken/styles.d.ts

@@ -12,4 +12,17 @@ export declare const TokenInfo: import("styled-components").StyledComponent<"div
 export declare const TokenSymbol: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TokenName: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TokenBalance: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TokenLeftGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenLogoArea: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenLogoFallback: import("styled-components").StyledComponent<"div", any, {
+    $bg: string;
+}, never>;
+export declare const TokenLogoImg: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const ChainBadge: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EmptyState: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InfoLink: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChainGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChainGroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenPill: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenPillSymbol: import("styled-components").StyledComponent<"span", any, {}, never>;

package/build/components/Pages/SelectToken/styles.js

@@ -67,12 +67,114 @@ const TokenBalance = styled.span `
   font-weight: 600;
   color: var(--ck-body-color);
 `;
+const TokenLeftGroup = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+`;
+const TokenLogoArea = styled.div `
+  position: relative;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+`;
+const TokenLogoFallback = styled.div `
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: ${(p) => p.$bg};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+  user-select: none;
+`;
+const TokenLogoImg = styled.img `
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+`;
+const ChainBadge = styled.div `
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--ck-body-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 0 0.7px var(--ck-body-background);
+`;
 const EmptyState = styled.div `
   margin-top: 28px;
   font-size: 13px;
   color: var(--ck-body-color-muted);
   text-align: center;
 `;
+const InfoLink = styled.button `
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  width: 100%;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--ck-body-color-muted, rgba(255, 255, 255, 0.4));
+  padding: 0 0 8px;
+  cursor: pointer;
+  transition: color 0.15s ease;
+  svg { opacity: 0.6; }
+  &:hover {
+    color: var(--ck-body-color, #fff);
+    svg { opacity: 1; }
+  }
+`;
+const ContentWrapper = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+`;
+const ChainGroup = styled.div `
+  &:not(:first-child) {
+    margin-top: 16px;
+  }
+`;
+const ChainGroupHeader = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ck-body-color, #fff);
+  margin-bottom: 8px;
+`;
+const TokenPill = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 10px;
+  background: var(--ck-body-background-secondary, rgba(255, 255, 255, 0.06));
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ck-body-color-muted, rgba(255, 255, 255, 0.6));
+  &:not(:last-child) {
+    margin-bottom: 4px;
+  }
+`;
+const TokenPillSymbol = styled.span `
+  color: var(--ck-body-color, #fff);
+  font-weight: 600;
+`;
 
-export { EmptyState, SelectTokenContent, TokenBalance, TokenButton, TokenContainer, TokenInfo, TokenList, TokenName, TokenSymbol };
+export { ChainBadge, ChainGroup, ChainGroupHeader, ContentWrapper, EmptyState, InfoLink, SelectTokenContent, TokenBalance, TokenButton, TokenContainer, TokenInfo, TokenLeftGroup, TokenList, TokenLogoArea, TokenLogoFallback, TokenLogoImg, TokenName, TokenPill, TokenPillSymbol, TokenSymbol };
 //# sourceMappingURL=styles.js.map

package/build/components/Pages/SelectToken/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/SendConfirmation/index.js

@@ -116,6 +116,7 @@ const SendConfirmation = () => {
     const [isPollingBalance, setIsPollingBalance] = useState(false);
     const originalBalanceRef = useRef(undefined);
     const pollingIntervalRef = useRef(null);
+    const submittingRef = useRef(false);
     // Inline transaction state management (replaces useEthereumSendTransaction + useEthereumWriteContract)
     const [nativeTxHash, setNativeTxHash] = useState(undefined);
     const [isNativePending, setIsNativePending] = useState(false);
@@ -255,8 +256,11 @@ const SendConfirmation = () => {
         }
     }, [isPollingBalance, currentBalance]);
     const handleConfirm = async () => {
+        if (submittingRef.current)
+            return;
         if (!recipientAddress || !parsedAmount || parsedAmount <= BigInt(0) || insufficientBalance)
             return;
+        submittingRef.current = true;
         try {
             if (token.type === 'native') {
                 await sendTransactionAsync({
@@ -278,6 +282,9 @@ const SendConfirmation = () => {
         catch (_error) {
             // Errors are surfaced through mutation hooks
         }
+        finally {
+            submittingRef.current = false;
+        }
     };
     const handleCancel = () => {
         // Keep the current token, amount, and recipient when going back - don't reset

package/build/components/Pages/SendConfirmation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/constants/logos.d.ts

@@ -0,0 +1,2 @@
+export declare const TOKEN_LOGO: Record<string, string>;
+export declare function symbolToColor(symbol: string): string;

package/build/constants/logos.js

@@ -0,0 +1,58 @@
+const TW = 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains';
+// Unified symbol -> logo URL map (works for both native and ERC20)
+const TOKEN_LOGO = {
+    // Native tokens (chain logos from Trust Wallet info/)
+    ETH: `${TW}/ethereum/info/logo.png`,
+    BNB: `${TW}/smartchain/info/logo.png`,
+    TBNB: `${TW}/smartchain/info/logo.png`,
+    MATIC: `${TW}/polygon/info/logo.png`,
+    POL: `${TW}/polygon/info/logo.png`,
+    AVAX: `${TW}/avalanchec/info/logo.png`,
+    FTM: `${TW}/fantom/info/logo.png`,
+    CELO: `${TW}/celo/info/logo.png`,
+    FIL: `${TW}/filecoin/info/logo.png`,
+    METIS: `${TW}/metis/info/logo.png`,
+    IOTX: `${TW}/iotex/info/logo.png`,
+    EVMOS: `${TW}/evmos/info/logo.png`,
+    XDAI: `${TW}/xdai/info/logo.png`,
+    FLR: `${TW}/flare/info/logo.png`,
+    TLOS: `${TW}/telos/info/logo.png`,
+    // ERC20 tokens (using mainnet Ethereum addresses)
+    USDC: `${TW}/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png`,
+    USDT: `${TW}/ethereum/assets/0xdAC17F958D2ee523a2206206994597C13D831ec7/logo.png`,
+    DAI: `${TW}/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png`,
+    WETH: `${TW}/ethereum/assets/0xC02aaA39b223FE8D0A0e5c4F27eAD9083C756Cc2/logo.png`,
+    WBTC: `${TW}/ethereum/assets/0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599/logo.png`,
+    LINK: `${TW}/ethereum/assets/0x514910771AF9Ca656af840dff83E8264EcF986CA/logo.png`,
+    UNI: `${TW}/ethereum/assets/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/logo.png`,
+    AAVE: `${TW}/ethereum/assets/0x7Fc66500c84A76Ad7e9c93437bFc5Ac33E2DDaE9/logo.png`,
+    MKR: `${TW}/ethereum/assets/0x9f8F72aA9304c8B593d555F12eF6589cC3A579A2/logo.png`,
+    CRV: `${TW}/ethereum/assets/0xD533a949740bb3306d119CC777fa900bA034cd52/logo.png`,
+    LDO: `${TW}/ethereum/assets/0x5A98FcBEA516Cf06857215779Fd812CA3beF1B32/logo.png`,
+    SHIB: `${TW}/ethereum/assets/0x95aD61b0a150d79219dCF64E1E6Cc01f0B64C4cE/logo.png`,
+    ARB: `${TW}/arbitrum/assets/0x912CE59144191C1204E64559FE8253a0e49E6548/logo.png`,
+    OP: `${TW}/optimism/assets/0x4200000000000000000000000000000000000042/logo.png`,
+    STETH: `${TW}/ethereum/assets/0xae7ab96520DE3A18E5e111B5EaAb095312D7fE84/logo.png`,
+    CBETH: `${TW}/ethereum/assets/0xBe9895146f7AF43049ca1c1AE358B0541Ea49704/logo.png`,
+    RETH: `${TW}/ethereum/assets/0xae78736Cd615f374D3085123A210448E74Fc6393/logo.png`,
+    GRT: `${TW}/ethereum/assets/0xc944E90C64B2c07662A292be6244BDf05Cda44a7/logo.png`,
+    SNX: `${TW}/ethereum/assets/0xC011a73ee8576Fb46F5E1c5751cA3B9Fe0af2a6F/logo.png`,
+    COMP: `${TW}/ethereum/assets/0xc00e94Cb662C3520282E6f5717214004A7f26888/logo.png`,
+    PEPE: `${TW}/ethereum/assets/0x6982508145454Ce325dDbE47a25d4ec3d2311933/logo.png`,
+    SUSHI: `${TW}/ethereum/assets/0x6B3595068778DD592e39A122f4f5a5cF09C90fE2/logo.png`,
+    DYDX: `${TW}/ethereum/assets/0x92D6C1e31e14520e676a687F0a93788B716BEff5/logo.png`,
+    BEAM: `${TW}/ethereum/assets/0x62D0A8458eD7719FDAF978fe5929C6D342B0bFcE/logo.png`,
+    EUL: `${TW}/ethereum/assets/0xd9Fcd98c322942075A5C3860693e9f4f03AAE07b/logo.png`,
+};
+// Deterministic color from symbol string (only used if no logo is found)
+function symbolToColor(symbol) {
+    let hash = 0;
+    for (let i = 0; i < symbol.length; i++) {
+        hash = symbol.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const h = ((hash % 360) + 360) % 360;
+    return `hsl(${h}, 55%, 50%)`;
+}
+
+export { TOKEN_LOGO, symbolToColor };
+//# sourceMappingURL=logos.js.map

package/build/constants/logos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logos.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/ethereum/hooks/useEthereumWalletAssets.d.ts

@@ -1,29 +1,43 @@
-import type { Asset } from '../../components/Openfort/types';
+import type { Asset, MultiChainAsset } from '../../components/Openfort/types';
 import { OpenfortError } from '../../core/errors';
 import type { EthereumConfig } from '../../ethereum/types';
 type UseEthereumWalletAssetsOptions = {
     assets?: EthereumConfig['assets'];
+    /** When true, fetches assets for all configured chains and returns MultiChainAsset[]. */
+    multiChain?: boolean;
     staleTime?: number;
 };
+type WalletAssetsReturnBase = {
+    isLoading: boolean;
+    isError: boolean;
+    isSuccess: boolean;
+    isIdle: boolean;
+    error: OpenfortError | undefined;
+    refetch: () => Promise<unknown>;
+};
+type UseEthereumWalletAssetsResult = (WalletAssetsReturnBase & {
+    multiChain: true;
+    data: readonly MultiChainAsset[] | null;
+}) | (WalletAssetsReturnBase & {
+    multiChain: false;
+    data: readonly Asset[] | null;
+});
 /**
  * Returns wallet assets (tokens, NFTs) for the connected Ethereum address.
  * Uses ERC-7811 via Openfort's authenticated RPC proxy.
  *
- * @param options - Optional custom assets config and staleTime
+ * When `multiChain` is true, fetches assets across all configured chains
+ * via `wallet_getAssets` and returns `MultiChainAsset[]` (assets tagged with `chainId`).
+ *
+ * @param options - Optional custom assets config, multiChain flag, and staleTime
  * @returns assets, isLoading, error, refetch
  *
  * @example
  * ```tsx
  * const { data: assets, isLoading } = useEthereumWalletAssets()
+ * // Multi-chain:
+ * const { data, multiChain } = useEthereumWalletAssets({ multiChain: true })
  * ```
  */
-export declare const useEthereumWalletAssets: ({ assets: hookCustomAssets, staleTime, }?: UseEthereumWalletAssetsOptions) => {
-    data: readonly Asset[] | null;
-    isLoading: boolean;
-    isError: boolean;
-    isSuccess: boolean;
-    isIdle: boolean;
-    error: OpenfortError | undefined;
-    refetch: () => Promise<readonly Asset[] | undefined>;
-};
+export declare const useEthereumWalletAssets: ({ assets: hookCustomAssets, multiChain, staleTime, }?: UseEthereumWalletAssetsOptions) => UseEthereumWalletAssetsResult;
 export {};

package/build/ethereum/hooks/useEthereumWalletAssets.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { custom, createWalletClient, numberToHex } from 'viem';
+import { numberToHex, custom, createWalletClient, formatUnits } from 'viem';
 import { erc7811Actions } from 'viem/experimental';
 import { useOpenfort } from '../../components/Openfort/useOpenfort.js';
 import { OpenfortError, OpenfortReactErrorType } from '../../types.js';
@@ -8,20 +8,34 @@ import { openfortKeys } from '../../query/queryKeys.js';
 import { useAsyncData } from '../../shared/hooks/useAsyncData.js';
 import { useEthereumEmbeddedWallet } from './useEthereumEmbeddedWallet.js';
 
+function getUsdValue(asset) {
+    var _a, _b, _c;
+    const fiat = (_a = asset.metadata) === null || _a === void 0 ? void 0 : _a.fiat;
+    if (!(fiat === null || fiat === void 0 ? void 0 : fiat.value) || asset.balance === undefined)
+        return 0;
+    const decimals = (_c = (_b = asset.metadata) === null || _b === void 0 ? void 0 : _b.decimals) !== null && _c !== void 0 ? _c : 18;
+    const amount = Number.parseFloat(formatUnits(asset.balance, decimals));
+    return Number.isFinite(amount) ? amount * fiat.value : 0;
+}
 /**
  * Returns wallet assets (tokens, NFTs) for the connected Ethereum address.
  * Uses ERC-7811 via Openfort's authenticated RPC proxy.
  *
- * @param options - Optional custom assets config and staleTime
+ * When `multiChain` is true, fetches assets across all configured chains
+ * via `wallet_getAssets` and returns `MultiChainAsset[]` (assets tagged with `chainId`).
+ *
+ * @param options - Optional custom assets config, multiChain flag, and staleTime
  * @returns assets, isLoading, error, refetch
  *
  * @example
  * ```tsx
  * const { data: assets, isLoading } = useEthereumWalletAssets()
+ * // Multi-chain:
+ * const { data, multiChain } = useEthereumWalletAssets({ multiChain: true })
  * ```
  */
-const useEthereumWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000, } = {}) => {
-    var _a;
+const useEthereumWalletAssets = ({ assets: hookCustomAssets, multiChain = false, staleTime = 30000, } = {}) => {
+    var _a, _b;
     const wallet = useEthereumEmbeddedWallet();
     const isConnected = wallet.status === 'connected';
     const address = isConnected ? wallet.address : undefined;
@@ -29,6 +43,7 @@ const useEthereumWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000,
     const { walletConfig, publishableKey, overrides, thirdPartyAuth, chains } = useOpenfort();
     const { getAccessToken } = useUser();
     const chain = chains.find((c) => c.id === chainId);
+    const backendUrl = (overrides === null || overrides === void 0 ? void 0 : overrides.backendUrl) || 'https://api.openfort.io';
     const buildHeaders = useCallback(async () => {
         if (thirdPartyAuth) {
             const accessToken = await thirdPartyAuth.getAccessToken();
@@ -51,10 +66,25 @@ const useEthereumWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000,
         };
         return headers;
     }, [publishableKey, getAccessToken, thirdPartyAuth]);
+    /** For multiChain: walletConfig.ethereum.assets as backend assetFilter format (hex chainId -> [{ address, type }]). */
+    const customAssetsMultiChain = useMemo(() => {
+        var _a;
+        if (!multiChain)
+            return undefined;
+        const configAssets = (_a = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _a === void 0 ? void 0 : _a.assets;
+        if (!configAssets)
+            return undefined;
+        const mapped = {};
+        for (const [cid, addresses] of Object.entries(configAssets)) {
+            const hexChainId = numberToHex(Number(cid));
+            mapped[hexChainId] = addresses.map((addr) => ({ address: addr, type: 'erc20' }));
+        }
+        return Object.keys(mapped).length > 0 ? mapped : undefined;
+    }, [multiChain, (_a = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _a === void 0 ? void 0 : _a.assets]);
     const customTransport = useMemo(() => () => {
         return custom({
             async request({ method, params }) {
-                const res = await fetch(`${(overrides === null || overrides === void 0 ? void 0 : overrides.backendUrl) || 'https://api.openfort.io'}/rpc`, {
+                const res = await fetch(`${backendUrl}/rpc`, {
                     method: 'POST',
                     headers: await buildHeaders(),
                     body: JSON.stringify({
@@ -71,7 +101,7 @@ const useEthereumWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000,
                 return data.result;
             },
         });
-    }, [buildHeaders, overrides === null || overrides === void 0 ? void 0 : overrides.backendUrl]);
+    }, [buildHeaders, backendUrl]);
     const customAssetsToFetch = useMemo(() => {
         var _a;
         if (!chainId)
@@ -80,11 +110,101 @@ const useEthereumWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000,
         const assetsFromHook = hookCustomAssets ? hookCustomAssets[chainId] || [] : [];
         const allAssets = [...assetsFromConfig, ...assetsFromHook];
         return allAssets;
-    }, [(_a = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _a === void 0 ? void 0 : _a.assets, hookCustomAssets, chainId]);
+    }, [(_b = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _b === void 0 ? void 0 : _b.assets, hookCustomAssets, chainId]);
     const { data, error, isLoading, refetch } = useAsyncData({
-        queryKey: [...openfortKeys.walletAssets(chainId, customAssetsToFetch, address)],
+        queryKey: multiChain
+            ? ['wallet-assets', 'multi', address, customAssetsMultiChain]
+            : [...openfortKeys.walletAssets(chainId, customAssetsToFetch, address)],
         queryFn: async () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            if (multiChain) {
+                if (!address) {
+                    throw new OpenfortError('No wallet address available', OpenfortReactErrorType.UNEXPECTED_ERROR);
+                }
+                const headers = await buildHeaders();
+                const defaultRequest = fetch(`${backendUrl}/rpc`, {
+                    method: 'POST',
+                    headers,
+                    body: JSON.stringify({
+                        method: 'wallet_getAssets',
+                        params: { account: address },
+                        id: 1,
+                        jsonrpc: '2.0',
+                    }),
+                });
+                const customRequest = customAssetsMultiChain
+                    ? fetch(`${backendUrl}/rpc`, {
+                        method: 'POST',
+                        headers,
+                        body: JSON.stringify({
+                            method: 'wallet_getAssets',
+                            params: { account: address, assetFilter: customAssetsMultiChain },
+                            id: 2,
+                            jsonrpc: '2.0',
+                        }),
+                    })
+                    : null;
+                const responses = await Promise.all([defaultRequest, customRequest].filter(Boolean));
+                const [defaultData, customData] = await Promise.all(responses.map((r) => r.json()));
+                const result = { ...((_a = defaultData.result) !== null && _a !== void 0 ? _a : {}) };
+                if ((customData === null || customData === void 0 ? void 0 : customData.result) && typeof customData.result === 'object') {
+                    for (const [chainKey, assets] of Object.entries(customData.result)) {
+                        if (!Array.isArray(assets))
+                            continue;
+                        if (!result[chainKey]) {
+                            result[chainKey] = assets;
+                        }
+                        else {
+                            const existing = new Map(result[chainKey].map((a) => { var _a; return [(_a = a.address) !== null && _a !== void 0 ? _a : '', a]; }));
+                            for (const asset of assets) {
+                                existing.set((_b = asset.address) !== null && _b !== void 0 ? _b : '', asset);
+                            }
+                            result[chainKey] = Array.from(existing.values());
+                        }
+                    }
+                }
+                const allAssets = [];
+                for (const [chainIdKey, assets] of Object.entries(result)) {
+                    const cid = Number(chainIdKey);
+                    if (!Array.isArray(assets))
+                        continue;
+                    for (const a of assets) {
+                        if (a.type === 'erc20') {
+                            const asset = {
+                                type: 'erc20',
+                                address: ((_c = a.address) !== null && _c !== void 0 ? _c : '0x0'),
+                                balance: BigInt((_d = a.balance) !== null && _d !== void 0 ? _d : 0),
+                                metadata: {
+                                    name: ((_e = a.metadata) === null || _e === void 0 ? void 0 : _e.name) || 'Unknown Token',
+                                    symbol: ((_f = a.metadata) === null || _f === void 0 ? void 0 : _f.symbol) || 'UNKNOWN',
+                                    decimals: (_g = a.metadata) === null || _g === void 0 ? void 0 : _g.decimals,
+                                    fiat: (_h = a.metadata) === null || _h === void 0 ? void 0 : _h.fiat,
+                                },
+                                raw: a,
+                            };
+                            allAssets.push({ ...asset, chainId: cid });
+                        }
+                        else if (a.type === 'native') {
+                            const meta = ((_j = a.metadata) !== null && _j !== void 0 ? _j : {});
+                            const asset = {
+                                type: 'native',
+                                address: 'native',
+                                balance: BigInt((_k = a.balance) !== null && _k !== void 0 ? _k : 0),
+                                metadata: {
+                                    symbol: meta.symbol || 'ETH',
+                                    decimals: meta.decimals,
+                                    fiat: (_l = meta.fiat) !== null && _l !== void 0 ? _l : { value: 0, currency: 'USD' },
+                                },
+                                raw: a,
+                            };
+                            allAssets.push({ ...asset, chainId: cid });
+                        }
+                    }
+                }
+                allAssets.sort((a, b) => getUsdValue(b) - getUsdValue(a));
+                return allAssets;
+            }
+            // Single-chain path
             if (!address || !chainId || !chain) {
                 throw new OpenfortError('Wallet not connected', OpenfortReactErrorType.UNEXPECTED_ERROR, {
                     error: new Error('Address, chainId, or chain not available'),
@@ -115,8 +235,8 @@ const useEthereumWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000,
             // ERC-7811 response keys may be hex (e.g. "0x14a34") or numeric depending on the RPC
             const rawByChain = defaultAssetsRaw;
             const customByChain = customAssets;
-            const rawChainAssets = (_b = (_a = rawByChain[hexChainId]) !== null && _a !== void 0 ? _a : rawByChain[String(chainId)]) !== null && _b !== void 0 ? _b : [];
-            const customChainAssets = (_d = (_c = customByChain[hexChainId]) !== null && _c !== void 0 ? _c : customByChain[String(chainId)]) !== null && _d !== void 0 ? _d : [];
+            const rawChainAssets = (_o = (_m = rawByChain[hexChainId]) !== null && _m !== void 0 ? _m : rawByChain[String(chainId)]) !== null && _o !== void 0 ? _o : [];
+            const customChainAssets = (_q = (_p = customByChain[hexChainId]) !== null && _p !== void 0 ? _p : customByChain[String(chainId)]) !== null && _q !== void 0 ? _q : [];
             const defaultAssets = rawChainAssets.map((a) => {
                 var _a;
                 let asset;
@@ -153,7 +273,6 @@ const useEthereumWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000,
             const mergedAssets = [...defaultAssets];
             const customAssetsForChain = customChainAssets.flatMap((asset) => {
                 var _a, _b;
-                // Custom assets are explicitly requested as erc20; skip if the API returns something unexpected.
                 if (asset.type !== 'erc20')
                     return [];
                 if (!((_a = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _a === void 0 ? void 0 : _a.assets))
@@ -178,7 +297,7 @@ const useEthereumWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000,
             });
             return mergedAssets;
         },
-        enabled: isConnected && !!chainId && !!chain && !!address,
+        enabled: multiChain ? isConnected && !!address : isConnected && !!chainId && !!chain && !!address,
         staleTime,
     });
     const mappedError = useMemo(() => {
@@ -191,10 +310,11 @@ const useEthereumWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000,
     }, [error]);
     return {
         data: data !== null && data !== void 0 ? data : null,
+        multiChain,
         isLoading,
         isError: !!error,
         isSuccess: !!data && !error,
-        isIdle: !isConnected || !chainId || !chain,
+        isIdle: multiChain ? !address : !isConnected || !chainId || !chain,
         error: mappedError,
         refetch,
     };

package/build/ethereum/hooks/useEthereumWalletAssets.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEthereumWalletAssets.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"useEthereumWalletAssets.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.d.ts

@@ -44,7 +44,7 @@ export { default as Avatar } from './components/Common/Avatar';
 export { default as ChainIcon } from './components/Common/Chain';
 export { OpenfortButton } from './components/ConnectButton';
 export { OpenfortProvider } from './components/Openfort/OpenfortProvider';
-export type { CustomizableRoutes } from './components/Openfort/types';
+export type { CustomizableRoutes, MultiChainAsset } from './components/Openfort/types';
 export { LinkWalletOnSignUpOption, UIAuthProvider as AuthProvider } from './components/Openfort/types';
 export { embeddedWalletId } from './constants/openfort';
 export { OpenfortError, OpenfortReactErrorType, OpenfortReactErrorType as OpenfortErrorType, } from './core/errors';

package/build/utils/index.d.ts

@@ -9,4 +9,4 @@ declare function flattenChildren(children: React.ReactNode): ReactChildArray;
 export declare const isWalletConnectConnector: (connectorId?: string) => connectorId is "walletConnect";
 export declare const isCoinbaseWalletConnector: (connectorId?: string) => connectorId is "coinbaseWalletSDK";
 export declare const isInjectedConnector: (connectorId?: string) => connectorId is "injected";
-export { nFormatter, truncateEthAddress, truncateSolanaAddress, isMobile, isAndroid, detectBrowser, flattenChildren };
+export { detectBrowser, flattenChildren, isAndroid, isMobile, nFormatter, truncateEthAddress, truncateSolanaAddress };

package/build/version.d.ts

@@ -1 +1 @@
-export declare const OPENFORT_VERSION = "1.0.3";
+export declare const OPENFORT_VERSION = "1.0.4";

package/build/version.js

@@ -1,4 +1,4 @@
-const OPENFORT_VERSION = '1.0.3';
+const OPENFORT_VERSION = '1.0.4';
 
 export { OPENFORT_VERSION };
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openfort/react",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": "Openfort (https://www.openfort.io)",
   "license": "BSD-2-Clause license",
   "description": "The easiest way to integrate Openfort to your project.",