@openfort/react 1.6.0 → 1.6.2

package/build/components/Common/Modal/index.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { useTransition } from 'react-transition-state';
+import ResizeObserver from 'resize-observer-polyfill';
 import { useConnectionStrategy } from '../../../core/ConnectionStrategyContext.js';
 import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
 import FocusTrap from '../../../hooks/useFocusTrap.js';
@@ -107,6 +108,7 @@ onInfo, }) => {
     };
     let blockTimeout;
     const contentRef = useCallback((node) => {
+        var _a;
         if (!node)
             return;
         ref.current = node;
@@ -116,6 +118,16 @@ onInfo, }) => {
         blockTimeout = setTimeout(() => setInTransition(false), 360);
         // Calculate new content bounds
         updateBounds(node);
+        // Auto-fit: re-measure whenever the active page's content size changes, so
+        // every page — and any new one — sizes the modal correctly without having
+        // to call triggerResize() itself.
+        (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        const observer = new ResizeObserver(() => {
+            if (ref.current === node)
+                updateBounds(node);
+        });
+        observer.observe(node);
+        resizeObserverRef.current = observer;
     }, [open, inTransition]);
     // Update layout on chain/network switch to avoid clipping
     const strategy = useConnectionStrategy();
@@ -123,10 +135,12 @@ onInfo, }) => {
     const chainId = (_j = (_f = strategy === null || strategy === void 0 ? void 0 : strategy.getChainId()) !== null && _f !== void 0 ? _f : (_h = (_g = bridge === null || bridge === void 0 ? void 0 : bridge.account) === null || _g === void 0 ? void 0 : _g.chain) === null || _h === void 0 ? void 0 : _h.id) !== null && _j !== void 0 ? _j : bridge === null || bridge === void 0 ? void 0 : bridge.chainId;
     const switchChain = (_k = bridge === null || bridge === void 0 ? void 0 : bridge.switchChain) === null || _k === void 0 ? void 0 : _k.switchChain;
     const ref = useRef(null);
+    const resizeObserverRef = useRef(null);
     useEffect(() => {
         if (ref.current)
             updateBounds(ref.current);
     }, [chainId, switchChain, mobile, context.uiConfig, context.resize]);
+    useEffect(() => () => { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     useEffect(() => {
         if (!mounted) {
             setDimensions({

package/build/components/Common/Modal/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/Openfort/types.d.ts

@@ -492,7 +492,7 @@ export type SignRequest = ({
     kind: 'typedData';
     typedData: SignTypedDataPayload;
 }) & {
-    resolve: (signature: `0x${string}`) => void;
+    resolve: (signature: string) => void;
     reject: (reason?: unknown) => void;
 };
 export type BuyProviderId = 'moonpay' | 'coinbase' | 'stripe';

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

@@ -1,19 +1,51 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { formatUnits } from 'viem';
-import { TOKEN_LOGO, symbolToColor } from '../../../constants/logos.js';
+import { currencyLogoUrl } from '../../../constants/logos.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
 import { useSolanaWalletAssets } from '../../../solana/hooks/useSolanaWalletAssets.js';
 import { ModalHeading } from '../../Common/Modal/styles.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
-import { SelectTokenContent, EmptyState, ContentWrapper, TokenList, TokenContainer, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenLogoArea, TokenLogoImg, TokenLogoFallback } from '../SelectToken/styles.js';
+import { AssetChainLogo } from '../Deposit/AssetChainLogo.js';
+import { SelectTokenContent, EmptyState, ContentWrapper, TokenList, TokenContainer, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenLogoArea } from '../SelectToken/styles.js';
 
 const ZERO = BigInt(0);
+const USDC_MINT_MAINNET = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v';
+const USDC_MINT_DEVNET = '4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU';
+const USDT_MINT_MAINNET = 'Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB';
+/**
+ * Default tokens to surface at zero balance: native SOL plus the stablecoins we
+ * ship verified mints for (USDC on the active cluster, USDT on mainnet). Skips any
+ * already held.
+ */
+function buildSolanaDefaults(cluster, held) {
+    const isMainnet = cluster === 'mainnet-beta' || cluster === 'mainnet';
+    const heldMints = new Set(held.map((t) => t.mint));
+    const defaults = [];
+    if (!heldMints.has('native')) {
+        defaults.push({ mint: 'native', symbol: 'SOL', name: 'Solana', amount: ZERO, decimals: 9, isNative: true });
+    }
+    const usdcMint = isMainnet ? USDC_MINT_MAINNET : USDC_MINT_DEVNET;
+    if (!heldMints.has(usdcMint)) {
+        defaults.push({ mint: usdcMint, symbol: 'USDC', name: 'USD Coin', amount: ZERO, decimals: 6, isNative: false });
+    }
+    if (isMainnet && !heldMints.has(USDT_MINT_MAINNET)) {
+        defaults.push({
+            mint: USDT_MINT_MAINNET,
+            symbol: 'USDT',
+            name: 'Tether USD',
+            amount: ZERO,
+            decimals: 6,
+            isNative: false,
+        });
+    }
+    return defaults;
+}
+/** Token logo with the Solana chain badge, matching the EVM inventory. */
 function SolanaTokenLogo({ symbol }) {
-    var _a;
-    const [imgError, setImgError] = useState(false);
-    const url = (_a = TOKEN_LOGO[symbol.toUpperCase()]) !== null && _a !== void 0 ? _a : null;
-    return (jsx(TokenLogoArea, { children: url && !imgError ? (jsx(TokenLogoImg, { src: url, alt: symbol, onError: () => setImgError(true) })) : (jsx(TokenLogoFallback, { "$bg": symbolToColor(symbol), children: symbol.charAt(0).toUpperCase() })) }));
+    var _a, _b;
+    return (jsx(TokenLogoArea, { children: jsx(AssetChainLogo, { assetLogo: (_a = currencyLogoUrl(symbol)) !== null && _a !== void 0 ? _a : '', chainLogo: (_b = currencyLogoUrl('SOL')) !== null && _b !== void 0 ? _b : '', symbol: symbol }) }));
 }
 /**
  * SVM counterpart of {@link AssetInventory}: lists the connected Solana wallet's
@@ -23,11 +55,18 @@ function SolanaTokenLogo({ symbol }) {
 const SolanaAssetInventory = () => {
     const { data, isLoading } = useSolanaWalletAssets();
     const { triggerResize } = useOpenfort();
+    const wallet = useSolanaEmbeddedWallet();
+    const cluster = wallet.cluster;
     useEffect(() => {
         if (!isLoading)
             triggerResize();
     }, [isLoading, triggerResize]);
-    const tokens = (data !== null && data !== void 0 ? data : []).filter((t) => t.amount > ZERO);
+    // Held tokens first, then default zero-balance tokens (SOL + stablecoins) so the
+    // list is never empty.
+    const tokens = useMemo(() => {
+        const held = (data !== null && data !== void 0 ? data : []).filter((t) => t.amount > ZERO);
+        return [...held, ...buildSolanaDefaults(cluster, held)];
+    }, [data, cluster]);
     if (isLoading) {
         return (jsxs(SelectTokenContent, { onBack: routes.SOL_CONNECTED, children: [jsx(ModalHeading, { children: "Your assets" }), jsx(EmptyState, { children: "Loading balances..." })] }));
     }

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

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

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

@@ -2,8 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { motion } from 'framer-motion';
 import { useState, useEffect, useMemo } from 'react';
 import { formatUnits } from 'viem';
+import { DEFAULT_ASSETS, isStableSymbol } from '../../../constants/defaultAssets.js';
 import { TOKEN_LOGO, symbolToColor } from '../../../constants/logos.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
+import { getNativeCurrency } from '../../../utils/rpc.js';
 import Chain from '../../Common/Chain/index.js';
 import { ModalHeading } from '../../Common/Modal/styles.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
@@ -23,6 +26,44 @@ const priceFormatter = new Intl.NumberFormat('en-US', {
     minimumFractionDigits: 2,
     maximumFractionDigits: 4,
 });
+/**
+ * Default tokens to surface at zero balance so the inventory is never empty: the
+ * active chain's native token plus the documented default ERC-20s for that chain
+ * (USDC / USDT / DAI / wrapped native). Skips any already held.
+ */
+function buildDefaultTokens(chainId, held) {
+    var _a;
+    if (chainId === undefined)
+        return [];
+    const heldKeys = new Set(held.map((t) => (t.type === 'erc20' ? `${t.chainId}-${t.address.toLowerCase()}` : `${t.chainId}-native`)));
+    const defaults = [];
+    if (!heldKeys.has(`${chainId}-native`)) {
+        const native = getNativeCurrency(chainId);
+        defaults.push({
+            type: 'native',
+            chainId,
+            balance: ZERO,
+            metadata: { symbol: native.symbol, decimals: native.decimals, fiat: { value: 0, currency: 'USD' } },
+        });
+    }
+    for (const token of (_a = DEFAULT_ASSETS[chainId]) !== null && _a !== void 0 ? _a : []) {
+        if (heldKeys.has(`${chainId}-${token.address.toLowerCase()}`))
+            continue;
+        defaults.push({
+            type: 'erc20',
+            chainId,
+            address: token.address,
+            balance: ZERO,
+            metadata: {
+                symbol: token.symbol,
+                name: token.name,
+                decimals: token.decimals,
+                fiat: isStableSymbol(token.symbol) ? { value: 1, currency: 'USD' } : undefined,
+            },
+        });
+    }
+    return defaults;
+}
 function getTokenLogoUrl(token) {
     var _a;
     const symbol = getAssetSymbol(token).toUpperCase();
@@ -35,7 +76,7 @@ function TokenLogo({ 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;
+    var _a, _b, _c;
     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';
@@ -45,9 +86,6 @@ function renderTokenRow(token) {
     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)) {
@@ -101,6 +139,7 @@ const AssetInventory = () => {
     var _a;
     const { data, multiChain, isLoading: isBalancesLoading } = useEthereumWalletAssets({ multiChain: true });
     const { triggerResize, chains } = useOpenfort();
+    const { chainId } = useEthereumEmbeddedWallet();
     const [showDetails, setShowDetails] = useState(false);
     useEffect(() => {
         if (!isBalancesLoading)
@@ -110,7 +149,12 @@ const AssetInventory = () => {
         triggerResize();
     }, [showDetails]);
     const tokens = (_a = (multiChain ? data : null)) !== null && _a !== void 0 ? _a : [];
-    const hasBalance = tokens.some((t) => t.balance > ZERO);
+    // Held tokens (any chain) first, then default zero-balance tokens for the active
+    // chain so the list is never empty and always shows the chain's essentials.
+    const displayTokens = useMemo(() => {
+        const held = tokens.filter((t) => t.balance > ZERO);
+        return [...held, ...buildDefaultTokens(chainId, held)];
+    }, [tokens, chainId]);
     const chainNameMap = useMemo(() => {
         const map = new Map();
         for (const c of chains)
@@ -138,7 +182,7 @@ const AssetInventory = () => {
                 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"));
+    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: displayTokens.length > 0 ? displayTokens.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/Connected/EthereumConnected.js

@@ -106,11 +106,8 @@ const EthereumConnected = () => {
         : undefined;
     const locales = useLocales();
     const balanceNode = assets && !isLoading ? (jsx(TextLinkButton, { type: "button", onClick: () => {
-            const firstBalanceAsset = getFirstBalanceAsset(assets);
-            if (!firstBalanceAsset) {
-                setRoute(routes.NO_ASSETS_AVAILABLE);
-                return;
-            }
+            // The inventory always shows the chain's native token + stablecoin
+            // defaults, so there's no empty state to gate on.
             setRoute(routes.ASSET_INVENTORY);
         }, children: jsxs(Balance, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: ["$", nFormatter(totalBalanceUsd)] }, `chain-${chain === null || chain === void 0 ? void 0 : chain.id}`) })) : null;
     const noWalletFallback = hasEthereumWallets ? (jsx(Button, { onClick: () => context.setRoute(routes.SELECT_WALLET_TO_RECOVER), children: "Manage wallets" })) : (jsx(Button, { onClick: () => context.setRoute({ route: routes.CONNECTORS, connectType: 'link' }), icon: jsx(Unsupported, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "130", height: "120", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Unsupported wallet icon" }), jsx("path", { d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z", fill: "currentColor", stroke: "var(--ck-body-background, #fff)", strokeWidth: "1.5" }), jsx("path", { d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z", fill: "white" })] }) }), children: "Connect wallet" }));

package/build/components/Pages/Connected/EthereumConnected.js.map

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

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

@@ -6,6 +6,7 @@ import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeConte
 import useIsMobile from '../../../hooks/useIsMobile.js';
 import styled from '../../../styles/styled/index.js';
 import { isIOS } from '../../../utils/index.js';
+import { TextLinkButton } from '../../Common/Button/styles.js';
 import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
 import { ScrollArea } from '../../Common/ScrollArea/index.js';
 import { routes } from '../../Openfort/types.js';
@@ -83,6 +84,8 @@ const DepositWallet = () => {
     // (the funding deposit-address mint uses a fixed nominal amount regardless).
     const [amount, setAmount] = useState('1');
     const [pressedPreset, setPressedPreset] = useState(null);
+    // Collapse the wallet list to keep the picker short on mobile; "Show more" reveals the rest.
+    const [showAllWallets, setShowAllWallets] = useState(false);
     const depositPageUrl = (_b = (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.depositPageUrl) !== null && _b !== void 0 ? _b : OPENFORT_DEPOSIT_PAGE_URL;
     // Solana sources have no numeric chain id and no desktop EVM-extension send, so
     // they route through the deeplink (Phantom) on every platform instead of the
@@ -125,20 +128,22 @@ const DepositWallet = () => {
     // Trust's in-app dApp browser was removed on iOS (Apple, 2021) — the link
     // dead-ends there, so hide it on iOS while keeping it on Android.
     const deeplinks = isIOS() ? allDeeplinks.filter((d) => d.app !== 'trust') : allDeeplinks;
+    const WALLET_LIMIT = 3;
+    const visibleDeeplinks = showAllWallets ? deeplinks : deeplinks.slice(0, WALLET_LIMIT);
     useEffect(() => {
         triggerResize();
-    }, [route.receiverAddress, route.loading, route.status, deeplinks.length, triggerResize]);
+    }, [route.receiverAddress, route.loading, route.status, deeplinks.length, showAllWallets, triggerResize]);
     if (isDepositFlowActive(route.status))
         return jsx(DepositProgress, { status: route.status });
-    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from wallet" }), jsx(TestnetNotice, {}), route.targetUnsupported && (jsx(UnsupportedNetworkNotice, { targetChain: route.target.chain, railChains: route.railChains })), !route.targetUnsupported && route.accountUnusableOnTarget && (jsx(AccountChainNotice, { targetChain: route.target.chain })), !route.targetUnsupported && !route.accountUnusableOnTarget && (jsxs(Layout, { children: [jsxs(TopFixed, { children: [jsx(RouteSelectors, { chains: route.chains, chain: route.chain, currency: route.currency, chainLabel: "Supported chain", onChainChange: route.setChain, onCurrencyChange: route.setCurrency }), !route.isAvailable && jsx(ModalBody, { children: "Funding isn't available right now." }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: (_m = (_l = route.activeCurrency) === null || _l === void 0 ? void 0 : _l.symbol) !== null && _m !== void 0 ? _m : '' }), jsx(AmountInput, { value: amount, onChange: handleAmountChange, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: PRESETS.map((preset) => (jsx(PresetButton, { type: "button", "$active": pressedPreset === preset, onClick: () => handlePreset(preset), children: preset }, preset))) })] }), jsx(StepDivider, { children: "Then select the wallet you want to use" })] }), jsx(ProvidersRegion, { children: isMobile || isSolanaSrc || !bridge ? (jsxs(Fragment, { children: [!depositPageUrl && (jsx(ModalBody, { style: { marginTop: 12 }, children: "Use a deposit address below to fund from your wallet." })), route.loading && !route.pm && (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" })] })), deeplinks.length > 0 && (jsx(ScrollArea, { fill: true, children: jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: deeplinks.map((d) => (jsxs("a", { href: amountValid ? d.url : undefined, "aria-disabled": !amountValid, target: "_blank", rel: "noreferrer", style: {
-                                                ...walletListBtn,
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                                gap: 8,
-                                                opacity: amountValid ? 1 : 0.55,
-                                                pointerEvents: amountValid ? 'auto' : 'none',
-                                            }, children: [WALLET_LOGO[d.app] && jsx(ButtonLogo, { children: WALLET_LOGO[d.app] }), d.label, " \u2197"] }, d.app))) }) }))] })) : (jsx(DepositWalletDesktop, { receiverAddress: route.receiverAddress, activeChain: route.activeChain, activeCurrency: route.activeCurrency, loading: route.loading, amount: amount })) }), jsxs(FixedFooter, { children: [jsx(AddressPageLink, { label: "Or send to a deposit address" }), route.error && jsx(ModalBody, { style: { color: '#dc2626', marginTop: 12 }, children: route.error.message })] })] }))] }));
+    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from wallet" }), jsx(TestnetNotice, {}), route.targetUnsupported && (jsx(UnsupportedNetworkNotice, { targetChain: route.target.chain, railChains: route.railChains })), !route.targetUnsupported && route.accountUnusableOnTarget && (jsx(AccountChainNotice, { targetChain: route.target.chain })), !route.targetUnsupported && !route.accountUnusableOnTarget && (jsxs(Layout, { children: [jsxs(TopFixed, { children: [jsx(RouteSelectors, { chains: route.chains, chain: route.chain, currency: route.currency, chainLabel: "Supported chain", onChainChange: route.setChain, onCurrencyChange: route.setCurrency }), !route.isAvailable && jsx(ModalBody, { children: "Funding isn't available right now." }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: (_m = (_l = route.activeCurrency) === null || _l === void 0 ? void 0 : _l.symbol) !== null && _m !== void 0 ? _m : '' }), jsx(AmountInput, { value: amount, onChange: handleAmountChange, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: PRESETS.map((preset) => (jsx(PresetButton, { type: "button", "$active": pressedPreset === preset, onClick: () => handlePreset(preset), children: preset }, preset))) })] }), jsx(StepDivider, { children: "Then select the wallet you want to use" })] }), jsx(ProvidersRegion, { children: isMobile || isSolanaSrc || !bridge ? (jsxs(Fragment, { children: [!depositPageUrl && (jsx(ModalBody, { style: { marginTop: 12 }, children: "Use a deposit address below to fund from your wallet." })), route.loading && !route.pm && (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" })] })), deeplinks.length > 0 && (jsx(ScrollArea, { fill: true, children: jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [visibleDeeplinks.map((d) => (jsxs("a", { href: amountValid ? d.url : undefined, "aria-disabled": !amountValid, target: "_blank", rel: "noreferrer", style: {
+                                                    ...walletListBtn,
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    gap: 8,
+                                                    opacity: amountValid ? 1 : 0.55,
+                                                    pointerEvents: amountValid ? 'auto' : 'none',
+                                                }, children: [WALLET_LOGO[d.app] && jsx(ButtonLogo, { children: WALLET_LOGO[d.app] }), d.label, " \u2197"] }, d.app))), deeplinks.length > WALLET_LIMIT && (jsx(TextLinkButton, { type: "button", onClick: () => setShowAllWallets((v) => !v), style: { alignSelf: 'center', marginTop: 2 }, children: showAllWallets ? 'Show less' : `Show ${deeplinks.length - WALLET_LIMIT} more` }))] }) }))] })) : (jsx(DepositWalletDesktop, { receiverAddress: route.receiverAddress, activeChain: route.activeChain, activeCurrency: route.activeCurrency, loading: route.loading, amount: amount })) }), jsxs(FixedFooter, { children: [jsx(AddressPageLink, { label: "Or send to a deposit address" }), route.error && jsx(ModalBody, { style: { color: '#dc2626', marginTop: 12 }, children: route.error.message })] })] }))] }));
 };
 
 export { DepositWallet as default };

package/build/components/Pages/DepositWallet/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/ExportKey/index.js

@@ -1,14 +1,16 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { KeyIcon } from '../../../assets/icons.js';
 import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
-import Button from '../../Common/Button/index.js';
-import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
+import { CopyIconButton } from '../../Common/CopyToClipboard/CopyIconButton.js';
 import { ModalHeading, ModalContent, ModalBody } from '../../Common/Modal/styles.js';
 import { FloatingGraphic } from '../../FloatingGraphic/index.js';
 import { PageContent } from '../../PageContent/index.js';
+import { Label, AddressRow, AddressField } from '../Receive/styles.js';
+import { HoldButton, HoldFill, HoldLabel, KeyReveal } from './styles.js';
 
 // TODO: Localize
+const HOLD_MS = 5000;
 const ExportKey = () => {
     var _a, _b;
     const wallet = useEthereumEmbeddedWallet();
@@ -22,6 +24,42 @@ const ExportKey = () => {
     const [exportedKey, setExportedKey] = useState(null);
     const [exportError, setExportError] = useState(null);
     const [showExportedKey, setShowExportedKey] = useState(false);
+    // Press-and-hold gate: the key only reveals after a deliberate 5s hold.
+    const [progress, setProgress] = useState(0);
+    const holdingRef = useRef(false);
+    const rafRef = useRef(null);
+    const startRef = useRef(0);
+    const stopHold = useCallback(() => {
+        holdingRef.current = false;
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+        setProgress((p) => (p >= 1 ? p : 0));
+    }, []);
+    const startHold = useCallback(() => {
+        if (showExportedKey || holdingRef.current)
+            return;
+        holdingRef.current = true;
+        startRef.current = performance.now();
+        const tick = (now) => {
+            if (!holdingRef.current)
+                return;
+            const p = Math.min(1, (now - startRef.current) / HOLD_MS);
+            setProgress(p);
+            if (p >= 1) {
+                holdingRef.current = false;
+                setShowExportedKey(true);
+                return;
+            }
+            rafRef.current = requestAnimationFrame(tick);
+        };
+        rafRef.current = requestAnimationFrame(tick);
+    }, [showExportedKey]);
+    useEffect(() => () => {
+        if (rafRef.current !== null)
+            cancelAnimationFrame(rafRef.current);
+    }, []);
     useEffect(() => {
         const asyncExportKey = async () => {
             try {
@@ -45,7 +83,9 @@ const ExportKey = () => {
                     logo: jsx(KeyIcon, {}),
                 }, logoBottomLeft: {
                     logo: jsx(KeyIcon, {}),
-                } }), jsxs(ModalContent, { children: [jsxs(ModalBody, { children: [isSmartAccount ? (jsxs("p", { style: { marginBottom: 6 }, children: ["This is your account's ", jsx("strong", { children: "owner (signer) key" }), " \u2014 not the account itself. Your smart account", accountAddress ? ` (${accountAddress.slice(0, 6)}…${accountAddress.slice(-4)})` : '', " is a contract with no private key, so importing this key into another wallet shows the owner address,", ' ', jsx("strong", { children: "not your funds" }), ". To move funds, use Send to withdraw to another wallet."] })) : (jsx("p", { style: { marginBottom: 6 }, children: "With your private key, you can access your account outside this application." })), jsx("p", { children: "Keep it safe and never share it with anyone you don't trust." })] }), !showExportedKey ? (jsx(Button, { onClick: () => setShowExportedKey(true), style: { marginTop: 12 }, children: "Export key" })) : exportError ? (jsx(ModalBody, { style: { marginTop: 12 }, "$error": true, children: exportError })) : exportedKey ? (jsx("div", { style: { marginTop: 12 }, children: jsxs(CopyText, { value: exportedKey, children: [exportedKey.slice(0, 10), "...", exportedKey.slice(-10)] }) })) : (jsx(Fragment, { children: "Loading..." }))] })] }));
+                } }), jsxs(ModalContent, { children: [jsxs(ModalBody, { children: [isSmartAccount ? (jsxs("p", { style: { marginBottom: 6 }, children: ["This is your account's ", jsx("strong", { children: "owner (signer) key" }), " \u2014 not the account itself. Your smart account", accountAddress ? ` (${accountAddress.slice(0, 6)}…${accountAddress.slice(-4)})` : '', " is a contract with no private key, so importing this key into another wallet shows the owner address,", ' ', jsx("strong", { children: "not your funds" }), ". To move funds, use Send to withdraw to another wallet."] })) : (jsx("p", { style: { marginBottom: 6 }, children: "With your private key, you can access your account outside this application." })), jsx("p", { children: "Keep it safe and never share it with anyone you don't trust." })] }), !showExportedKey ? (jsxs(HoldButton, { type: "button", onPointerDown: startHold, onPointerUp: stopHold, onPointerLeave: stopHold, onPointerCancel: stopHold, style: { marginTop: 12 }, children: [jsx(HoldFill, { style: { width: `${progress * 100}%` } }), jsx(HoldLabel, { children: progress > 0
+                                    ? `Hold to reveal… ${Math.ceil((1 - progress) * (HOLD_MS / 1000))}s`
+                                    : 'Hold 5s to reveal key' })] })) : exportError ? (jsx(ModalBody, { style: { marginTop: 12 }, "$error": true, children: exportError })) : exportedKey ? (jsxs(KeyReveal, { children: [jsx(Label, { children: "Your private key" }), jsxs(AddressRow, { children: [jsx(AddressField, { style: { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }, children: exportedKey }), jsx(CopyIconButton, { value: exportedKey })] })] })) : (jsx(Fragment, { children: "Loading..." }))] })] }));
 };
 
 export { ExportKey as default };

package/build/components/Pages/ExportKey/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/ExportKey/styles.d.ts

@@ -0,0 +1,5 @@
+/** Press-and-hold reveal button: a fill grows left→right over the hold duration. */
+export declare const HoldButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const HoldFill: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HoldLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const KeyReveal: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,47 @@
+import styled from '../../../styles/styled/index.js';
+
+/** Press-and-hold reveal button: a fill grows left→right over the hold duration. */
+const HoldButton = styled.button `
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: var(--ck-primary-button-border-radius, 16px);
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-secondary-button-background);
+  color: var(--ck-body-color);
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+  transition: border-color 150ms ease;
+
+  &:hover {
+    border-color: var(--ck-body-color-muted);
+  }
+`;
+const HoldFill = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: var(--ck-focus-color, #1a88f8);
+  opacity: 0.22;
+  pointer-events: none;
+`;
+const HoldLabel = styled.span `
+  position: relative;
+  z-index: 1;
+`;
+const KeyReveal = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 12px;
+  text-align: left;
+`;
+
+export { HoldButton, HoldFill, HoldLabel, KeyReveal };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -8,7 +8,7 @@ import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
 import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
 import { CopyIconButton } from '../../Common/CopyToClipboard/CopyIconButton.js';
 import CustomQRCode from '../../Common/CustomQRCode/index.js';
-import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { ModalHeading } from '../../Common/Modal/styles.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { PageContent } from '../../PageContent/index.js';
@@ -63,7 +63,7 @@ const Receive = () => {
         const timer = setTimeout(() => context.triggerResize(), 100);
         return () => clearTimeout(timer);
     }, [address, context]);
-    return (jsx(PageContent, { onBack: isSolanaRoute ? routes.SOL_CONNECTED : routes.CONNECTED, children: jsxs(ReceiveContent, { children: [jsx(ModalHeading, { children: "Receive funds" }), jsx(ModalBody, { children: "Scan the QR code or copy your wallet details." }), address && (jsx(QRWrapper, { children: jsx(CustomQRCode, { value: qrValue, image: jsx("div", { style: { padding: 10 }, children: renderLogo() }) }) })), jsxs(AddressSection, { children: [jsx(Label, { children: "Your wallet address" }), jsxs(AddressRow, { children: [jsx(AddressField, { children: address !== null && address !== void 0 ? address : '--' }), jsx(CopyIconButton, { value: address !== null && address !== void 0 ? address : '' })] })] }), networkLabel && jsxs(NetworkInfo, { children: ["Network: ", networkLabel] })] }) }));
+    return (jsx(PageContent, { onBack: isSolanaRoute ? routes.SOL_CONNECTED : routes.CONNECTED, children: jsxs(ReceiveContent, { children: [jsx(ModalHeading, { children: "Receive money" }), address && (jsx(QRWrapper, { children: jsx(CustomQRCode, { value: qrValue, image: jsx("div", { style: { padding: 10 }, children: renderLogo() }) }) })), jsxs(AddressSection, { children: [jsx(Label, { children: "Your wallet address" }), jsxs(AddressRow, { children: [jsx(AddressField, { children: address !== null && address !== void 0 ? address : '--' }), jsx(CopyIconButton, { value: address !== null && address !== void 0 ? address : '' })] })] }), networkLabel && jsxs(NetworkInfo, { children: ["Network: ", networkLabel] })] }) }));
 };
 
 export { Receive as default };

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

@@ -1,19 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { formatUnits } from 'viem';
-import { TOKEN_LOGO, symbolToColor } from '../../../constants/logos.js';
+import { currencyLogoUrl } from '../../../constants/logos.js';
 import { useSolanaWalletAssets } from '../../../solana/hooks/useSolanaWalletAssets.js';
 import { ModalHeading } from '../../Common/Modal/styles.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
-import { SelectTokenContent, EmptyState, TokenList, TokenButton, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenBalance, TokenLogoArea, TokenLogoImg, TokenLogoFallback } from './styles.js';
+import { AssetChainLogo } from '../Deposit/AssetChainLogo.js';
+import { SelectTokenContent, EmptyState, TokenList, TokenButton, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenBalance, TokenLogoArea } from './styles.js';
 
 const ZERO = BigInt(0);
+/** Token logo with the Solana chain badge, matching the EVM picker. */
 function SolanaTokenLogo({ symbol }) {
-    var _a;
-    const [imgError, setImgError] = useState(false);
-    const url = (_a = TOKEN_LOGO[symbol.toUpperCase()]) !== null && _a !== void 0 ? _a : null;
-    return (jsx(TokenLogoArea, { children: url && !imgError ? (jsx(TokenLogoImg, { src: url, alt: symbol, onError: () => setImgError(true) })) : (jsx(TokenLogoFallback, { "$bg": symbolToColor(symbol), children: symbol.charAt(0).toUpperCase() })) }));
+    var _a, _b;
+    return (jsx(TokenLogoArea, { children: jsx(AssetChainLogo, { assetLogo: (_a = currencyLogoUrl(symbol)) !== null && _a !== void 0 ? _a : '', chainLogo: (_b = currencyLogoUrl('SOL')) !== null && _b !== void 0 ? _b : '', symbol: symbol }) }));
 }
 const SolanaSelectToken = () => {
     const { setSendForm, setRoute, triggerResize } = useOpenfort();

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

@@ -2,6 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChainTypeEnum } from '@openfort/openfort-js';
 import { useState, useEffect } from 'react';
 import { formatUnits } from 'viem';
+import { currencyLogoUrl, chainLogoUrl } from '../../../constants/logos.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
 import { Arrow, ArrowChevron, TextLinkButton } from '../../Common/Button/styles.js';
@@ -10,8 +12,9 @@ import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { EVM_BUY_CURRENCIES } from '../Buy/evmCurrencies.js';
 import { SOLANA_BUY_CURRENCIES } from '../Buy/solanaCurrencies.js';
+import { AssetChainLogo } from '../Deposit/AssetChainLogo.js';
 import { getAssetSymbol, getAssetDecimals, formatBalanceWithSymbol } from '../Send/utils.js';
-import { SelectTokenContent, EmptyState, TokenList, TokenButton, TokenInfo, TokenSymbol, TokenName, TokenBalance } from './styles.js';
+import { SelectTokenContent, EmptyState, TokenList, TokenButton, TokenLeftGroup, TokenLogoArea, TokenInfo, TokenSymbol, TokenName, TokenBalance } from './styles.js';
 
 const ZERO = BigInt(0);
 const usdFormatter = new Intl.NumberFormat('en-US', {
@@ -27,6 +30,7 @@ const SelectToken = ({ isBuyFlow }) => {
         triggerResize();
     }, [viewAllAssets]);
     const { chainType } = useOpenfortCore();
+    const { chainId } = useEthereumEmbeddedWallet();
     const { data: walletAssets, isLoading: isBalancesLoading } = useEthereumWalletAssets();
     // Buys pick from a fixed buyable-currency list (USDC first, then native) per
     // chain family, so the picker always has options even for a fresh wallet with no
@@ -68,7 +72,7 @@ const SelectToken = ({ isBuyFlow }) => {
             return jsx(EmptyState, { children: "No supported tokens found for this network yet." });
         }
         return (jsxs(TokenList, { children: [selectableTokens.map((token) => {
-                    var _a, _b, _c, _d, _e;
+                    var _a, _b, _c, _d, _e, _f, _g;
                     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';
@@ -101,7 +105,7 @@ const SelectToken = ({ isBuyFlow }) => {
                             }
                         }
                     }
-                    return (jsxs(TokenButton, { type: "button", onClick: () => handleSelect(token), style: { opacity: isDisabled ? 0.4 : 1, cursor: isDisabled ? 'not-allowed' : 'pointer' }, children: [jsxs(TokenInfo, { children: [jsx(TokenSymbol, { children: displayName }), isBuyFlow && jsx(TokenName, { children: displaySymbol })] }), isBuyFlow ? (jsx(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314" }) })) : (jsxs(TokenInfo, { children: [jsx(TokenBalance, { children: balanceDisplay }), usdValue ? jsx(TokenName, { style: { textAlign: 'end' }, children: usdValue }) : null] }))] }, key));
+                    return (jsxs(TokenButton, { type: "button", onClick: () => handleSelect(token), style: { opacity: isDisabled ? 0.4 : 1, cursor: isDisabled ? 'not-allowed' : 'pointer' }, children: [jsxs(TokenLeftGroup, { children: [jsx(TokenLogoArea, { children: jsx(AssetChainLogo, { assetLogo: (_f = currencyLogoUrl(displaySymbol)) !== null && _f !== void 0 ? _f : '', chainLogo: (_g = chainLogoUrl(chainId)) !== null && _g !== void 0 ? _g : '', symbol: displaySymbol }) }), jsxs(TokenInfo, { children: [jsx(TokenSymbol, { children: displayName }), isBuyFlow && jsx(TokenName, { children: displaySymbol })] })] }), isBuyFlow ? (jsx(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314" }) })) : (jsxs(TokenInfo, { children: [jsx(TokenBalance, { children: balanceDisplay }), usdValue ? jsx(TokenName, { style: { textAlign: 'end' }, children: usdValue }) : null] }))] }, key));
                 }), !isBuyFlow && (jsx(TextLinkButton, { type: "button", onClick: () => {
                         setViewAllAssets(!viewAllAssets);
                     }, children: viewAllAssets ? 'View less assets' : 'View all assets' }))] }));

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

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