@enbox/browser 0.3.48 → 0.3.51

package/dist/esm/ui/connect-modal.js

@@ -2,21 +2,22 @@
  * Connect modal — the single surface that owns a whole connect session.
  *
  * One Shadow-DOM dialog whose stage morphs in place through the session:
- * QR (phone path) → pairing code → connected, with the in-browser popup
- * path and the wallet catalog folded in as in-place alternates. The modal
- * never chains into a second modal and stays mounted until the session
- * resolves (connected / denied / cancelled).
+ * QR / deep-link handoff (phone path) → pairing code → connected, with the
+ * in-browser popup path and the wallet catalog folded in as in-place
+ * alternates. The modal never chains into a second modal and stays mounted
+ * until the session resolves (connected / denied / cancelled).
  *
  * Layout: three zones —
  *
  * 1. **Header** — requesting app identity + close.
- * 2. **Stage** — a height-stable region where states crossfade: the QR
- *    (or deep link on phones), the pairing-code input, progress, success,
- *    and error states.
+ * 2. **Stage** — a height-stable region where states crossfade: the
+ *    clickable QR (joined by a Continue deep-link button on phones; both
+ *    open the wallet in a new tab so this session stays alive underneath),
+ *    the pairing-code input, progress, success, and error states.
  * 3. **Footer** — the wallet identity row ("Connecting with" + the selected
- *    wallet and the next catalog wallets as tiles, capped so the same wallet
- *    never appears twice), a More tile that expands the full catalog grid
- *    with search + custom URL in place, and the alternate-method link.
+ *    wallet and the next catalog wallets as tiles), a More tile that expands
+ *    the remaining wallets as a matching grid (search + custom URL) in
+ *    place — a wallet is never shown twice — and the alternate-method link.
  *
  * Theming: the stylesheet is static and reads `--ec-*` design tokens.
  * Light/dark follows the visitor's system via `prefers-color-scheme` and
@@ -52,8 +53,16 @@ import { fetchWalletWellKnown, probeWalletWellKnown } from './wallet-well-known.
 import { RelayConnectCancelledError, runRelayConnect } from '../relay-connect-runner.js';
 /** localStorage key remembering the last successful method + wallet. */
 const LAST_CHOICE_STORAGE_KEY = 'enbox:connect:lastChoice';
-/** Safety margin subtracted from the relay pointer TTL before re-minting. */
-const REMINT_SAFETY_MS = 30000;
+/**
+ * Safety margin subtracted from the relay pointer TTL before re-minting.
+ *
+ * The pointer is single-use and its TTL starts at mint time, but the wallet
+ * only dereferences it after the user scans — and, on a locked wallet, after
+ * they finish the unlock ceremony. A scanned code must therefore carry
+ * enough remaining life to absorb that whole window, so re-mint well before
+ * the deadline rather than just ahead of it.
+ */
+const REMINT_SAFETY_MS = 120000;
 /** Minimum delay before an automatic re-mint. */
 const REMINT_MIN_MS = 10000;
 /** Pairing code length (matches the wallet's generated PIN). */
@@ -239,6 +248,7 @@ export function runConnectModal(options) {
         let settled = false;
         let relaySession;
         let remintTimer;
+        let remintAt;
         let popupBusy = false;
         let pinResolve;
         const discoveryCache = new Map();
@@ -269,8 +279,9 @@ export function runConnectModal(options) {
         const cleanup = () => {
             var _a;
             relaySession === null || relaySession === void 0 ? void 0 : relaySession.cancel();
-            clearTimeout(remintTimer);
+            clearRemint();
             document.removeEventListener('keydown', onKeydown);
+            document.removeEventListener('visibilitychange', onVisibilityReturn);
             (_a = systemDark === null || systemDark === void 0 ? void 0 : systemDark.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(systemDark, 'change', onSchemeChange);
             try {
                 document.body.removeChild(host);
@@ -313,26 +324,50 @@ export function runConnectModal(options) {
         const renderBusy = (message) => {
             setStage(el('div', 'spinner'), el('p', 'stage-caption', message));
         };
+        /**
+         * Schedules the "finish in the wallet" morph after a handoff link is
+         * followed. Deferred one tick so the anchor's default new-tab navigation
+         * completes before the anchor is replaced, and guarded so a session that
+         * moved on meanwhile (re-mint, wallet response, settle) is never
+         * overwritten.
+         */
+        const morphToAway = (walletName) => {
+            const session = relaySession;
+            setTimeout(() => {
+                if (settled || session !== relaySession || (session === null || session === void 0 ? void 0 : session.active) !== true || pinResolve !== undefined) {
+                    return;
+                }
+                renderAway(walletName);
+            }, 0);
+        };
+        /**
+         * Builds one same-device handoff anchor for the wallet URI. The wallet
+         * opens in a new tab so this modal — and the relay session under it —
+         * stays alive, with the pairing-code entry waiting when the user
+         * switches back. `noopener` keeps the wallet tab from reaching back into
+         * this one.
+         */
+        const buildHandoffLink = (handoff, walletName, className) => {
+            const link = document.createElement('a');
+            link.className = className;
+            link.href = handoff.walletUri;
+            link.target = '_blank';
+            link.rel = 'noopener noreferrer';
+            link.addEventListener('click', () => { morphToAway(walletName); });
+            return link;
+        };
         const renderQr = (handoff) => {
             var _a;
             const wallet = walletUrl !== undefined ? walletByUrl(walletUrl) : undefined;
             const walletName = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.name) !== null && _a !== void 0 ? _a : 'your wallet';
-            if (isMobile) {
-                const link = document.createElement('a');
-                link.className = 'deep-link';
-                link.href = handoff.walletUri;
-                if (wallet !== undefined) {
-                    link.appendChild(buildWalletIcon(wallet));
-                }
-                link.appendChild(el('span', 'deep-link-label', `Continue in ${walletName}`));
-                setStage(link, el('p', 'stage-caption', `${walletName} opens to approve this connection.`), el('p', 'stage-subline', 'Come back here when you’re done.'));
-                return;
-            }
-            const qrBox = document.createElement('div');
-            qrBox.className = 'qr-box';
+            // The QR card is itself a handoff link on every device: opening it on
+            // this device runs the exact handshake the camera path runs on another
+            // one, and scanning it keeps working either way.
+            const qrLink = buildHandoffLink(handoff, walletName, 'qr-box qr-link');
+            qrLink.setAttribute('aria-label', `Open ${walletName} on this device`);
             // Fixed colors on the white card: dark-on-light QRs scan reliably in
             // both appearances (inverted codes trip up some camera apps).
-            qrBox.replaceChildren(qrToSvg(encodeQr(handoff.walletUri), {
+            qrLink.replaceChildren(qrToSvg(encodeQr(handoff.walletUri), {
                 dark: '#14141f',
                 light: 'transparent',
                 quietZone: 2,
@@ -340,22 +375,46 @@ export function runConnectModal(options) {
             // The selected wallet's mark sits at the QR centre — the "this is the
             // wallet you're connecting to" cue. The 44px plate over the ~180px
             // symbol occludes ~5% of modules, well inside ECC level M's 15%
-            // recovery budget.
+            // recovery budget (the compact variant scales the plate down to
+            // match).
             if (wallet !== undefined) {
                 const logo = el('div', 'qr-logo');
                 logo.appendChild(buildWalletIcon(wallet));
-                qrBox.appendChild(logo);
+                qrLink.appendChild(logo);
             }
-            setStage(qrBox, el('p', 'stage-caption', 'Scan with your phone’s camera'), el('p', 'stage-subline', `${walletName} stays on your phone.`));
+            if (isMobile) {
+                const link = buildHandoffLink(handoff, walletName, 'deep-link');
+                if (wallet !== undefined) {
+                    link.appendChild(buildWalletIcon(wallet));
+                }
+                link.appendChild(el('span', 'deep-link-label', `Continue in ${walletName}`));
+                qrLink.classList.add('compact');
+                setStage(link, el('p', 'stage-subline', `${walletName} opens in a new tab — approve there, then come back for your code.`), el('div', 'stage-divider', 'or scan with another phone'), qrLink);
+                return;
+            }
+            setStage(qrLink, el('p', 'stage-caption', 'Scan with your phone’s camera'), el('p', 'stage-subline', `${walletName} stays on your phone — or click the code to open it here.`));
+        };
+        /**
+         * Shown once a handoff link is followed on this device: the approval is
+         * happening in the wallet tab, this one waits for the code. "Start over"
+         * mints a fresh pointer — the right recovery, because the pointer the
+         * wallet tab carried away is single-use.
+         */
+        const renderAway = (walletName) => {
+            setStage(el('div', 'spinner'), el('p', 'stage-caption', `Finish in ${walletName}`), el('p', 'stage-subline', isMobile
+                ? `Approve the connection in the ${walletName} tab, then come back here for your code.`
+                : 'Approve the connection in the tab that just opened, then come back here for your code.'), stageLinkButton('Start over', () => { void startPhone(); }));
         };
         const renderClaimed = () => {
+            const walletName = walletUrl !== undefined ? walletByUrl(walletUrl).name : 'your wallet';
             const pulse = document.createElement('div');
             pulse.className = 'claimed-pulse';
-            setStage(pulse, el('p', 'stage-caption', 'Phone connected — finish there'), el('p', 'stage-subline', 'Approve the request on your phone, then come back here.'));
+            setStage(pulse, el('p', 'stage-caption', `Request received — approve in ${walletName}`), el('p', 'stage-subline', 'Once you approve, you’ll get a code to enter here.'));
         };
         const renderPin = (attempt, previousError) => {
             return new Promise((resolvePin) => {
                 pinResolve = resolvePin;
+                const walletName = walletUrl !== undefined ? walletByUrl(walletUrl).name : 'your wallet';
                 const boxes = document.createElement('div');
                 boxes.className = 'pin-row';
                 if (previousError !== undefined) {
@@ -410,9 +469,9 @@ export function runConnectModal(options) {
                         submitIfComplete();
                     });
                 });
-                setStage(el('p', 'stage-caption', 'Enter the code shown on your phone'), boxes, ...(previousError !== undefined
-                    ? [el('p', 'stage-error', 'That code doesn’t match — check your phone.')]
-                    : [el('p', 'stage-subline', attempt === 1 ? 'Phone connected.' : '')]));
+                setStage(el('p', 'stage-caption', `Enter the code shown in ${walletName}`), boxes, ...(previousError !== undefined
+                    ? [el('p', 'stage-error', `That code doesn’t match — check ${walletName}.`)]
+                    : [el('p', 'stage-subline', attempt === 1 ? 'This confirms you’re the one approving.' : '')]));
                 inputs[0].focus();
             });
         };
@@ -430,16 +489,21 @@ export function runConnectModal(options) {
         const renderPhoneUnavailable = () => {
             setStage(el('p', 'stage-caption', 'This wallet can’t connect by phone here.'), el('p', 'stage-subline', 'You can continue in this browser instead.'), stageButton('Use this browser', () => { startPopup(); }));
         };
+        // The popup surface is a small window on desktop but a new tab on
+        // phones — the copy names whichever the visitor will actually see.
+        const popupSurface = isMobile ? 'tab' : 'window';
         const renderPopupPrompt = () => {
-            setStage(el('p', 'stage-caption', 'Connect with a wallet in this browser'), el('p', 'stage-subline', 'Your wallet opens in a small window to approve this connection.'), stageButton('Open wallet window', () => { startPopup(); }));
+            setStage(el('p', 'stage-caption', 'Connect with a wallet in this browser'), el('p', 'stage-subline', isMobile
+                ? 'Your wallet opens in a new tab to approve this connection — no code needed.'
+                : 'Your wallet opens in a small window to approve this connection.'), stageButton(isMobile ? 'Open wallet' : 'Open wallet window', () => { startPopup(); }));
         };
         const renderPopupWaiting = () => {
-            setStage(el('div', 'spinner'), el('p', 'stage-caption', 'Finish in the wallet window'), el('p', 'stage-subline', 'We’ll wrap up here as soon as you’re done.'));
+            setStage(el('div', 'spinner'), el('p', 'stage-caption', `Finish in the wallet ${popupSurface}`), el('p', 'stage-subline', 'We’ll wrap up here as soon as you’re done.'));
         };
         const renderPopupInterrupted = (blocked) => {
             setStage(el('p', 'stage-caption', blocked
-                ? 'Your browser blocked the wallet window.'
-                : 'The wallet window was closed.'), stageButton(blocked ? 'Open it now' : 'Reopen window', () => { startPopup(); }), ...(isMobile ? [] : [stageLinkButton('Use your phone instead', () => { void switchMethod('phone'); })]));
+                ? `Your browser blocked the wallet ${popupSurface}.`
+                : `The wallet ${popupSurface} was closed.`), stageButton(blocked ? 'Open it now' : `Reopen ${popupSurface}`, () => { startPopup(); }), stageLinkButton(isMobile ? 'Use a code instead' : 'Use your phone instead', () => { void switchMethod('phone'); }));
         };
         // ── Method drivers ─────────────────────────────────────────
         const resolveConnectServerUrl = (origin) => __awaiter(this, void 0, void 0, function* () {
@@ -453,19 +517,28 @@ export function runConnectModal(options) {
             }
             return cached;
         });
-        const scheduleRemint = (expiresInSeconds) => {
+        const clearRemint = () => {
             clearTimeout(remintTimer);
+            remintAt = undefined;
+        };
+        const remintNow = () => {
+            // Never re-mint once the wallet has responded (pairing in progress).
+            if (!settled && pinResolve === undefined && method === 'phone') {
+                void startPhone();
+            }
+        };
+        const scheduleRemint = (expiresInSeconds) => {
+            clearRemint();
             const delay = Math.max(REMINT_MIN_MS, expiresInSeconds * 1000 - REMINT_SAFETY_MS);
-            remintTimer = setTimeout(() => {
-                // Never re-mint once the wallet has responded (pairing in progress).
-                if (!settled && pinResolve === undefined && method === 'phone') {
-                    void startPhone();
-                }
-            }, delay);
+            // The deadline is kept alongside the timer: background tabs (mobile
+            // especially) throttle or freeze timers, so the visibility handler
+            // re-checks it when the user returns.
+            remintAt = Date.now() + delay;
+            remintTimer = setTimeout(remintNow, delay);
         };
         const startPhone = () => __awaiter(this, void 0, void 0, function* () {
             relaySession === null || relaySession === void 0 ? void 0 : relaySession.cancel();
-            clearTimeout(remintTimer);
+            clearRemint();
             if (walletUrl === undefined) {
                 renderError('No wallet is configured.');
                 return;
@@ -499,14 +572,14 @@ export function runConnectModal(options) {
                     },
                     onClaimed: () => {
                         if (session.active && !settled) {
-                            // The phone has the request — stop re-minting (a new pointer
+                            // The wallet has the request — stop re-minting (a new pointer
                             // would orphan the approval in progress) and show progress.
-                            clearTimeout(remintTimer);
+                            clearRemint();
                             renderClaimed();
                         }
                     },
                     requestPin: (attempt, previousError) => {
-                        clearTimeout(remintTimer);
+                        clearRemint();
                         return renderPin(attempt, previousError);
                     },
                 });
@@ -533,7 +606,7 @@ export function runConnectModal(options) {
         const startPopup = () => {
             // Synchronous popup open inside the click's call stack.
             relaySession === null || relaySession === void 0 ? void 0 : relaySession.cancel();
-            clearTimeout(remintTimer);
+            clearRemint();
             if (walletUrl === undefined) {
                 renderError('No wallet is configured.');
                 return;
@@ -591,7 +664,7 @@ export function runConnectModal(options) {
             if (method === 'browser') {
                 // window.open must stay inside a user gesture — prompt for the click.
                 relaySession === null || relaySession === void 0 ? void 0 : relaySession.cancel();
-                clearTimeout(remintTimer);
+                clearRemint();
                 renderFooter();
                 renderPopupPrompt();
             }
@@ -620,15 +693,17 @@ export function runConnectModal(options) {
             if (method === 'phone') {
                 const alt = document.createElement('button');
                 alt.className = 'footer-link method-link';
-                alt.textContent = 'No phone? Use this browser →';
+                // On a phone both methods open the wallet on this device — what the
+                // popup channel actually buys the visitor is skipping the code.
+                alt.textContent = isMobile ? 'Or connect without a code →' : 'No phone? Use this browser →';
                 // startPopup runs synchronously in this click handler.
                 alt.addEventListener('click', () => { startPopup(); });
                 row.appendChild(alt);
             }
-            else if (!isMobile) {
+            else {
                 const alt = document.createElement('button');
                 alt.className = 'footer-link method-link';
-                alt.textContent = 'Use your phone instead →';
+                alt.textContent = isMobile ? 'Use a code instead →' : 'Use your phone instead →';
                 alt.addEventListener('click', () => { void switchMethod('phone'); });
                 row.appendChild(alt);
             }
@@ -637,7 +712,7 @@ export function runConnectModal(options) {
             }
         };
         const buildWalletSwitcher = () => {
-            var _a;
+            var _a, _b;
             // Identity row: selected wallet + the next catalog wallets, then the
             // More tile expanding the full catalog in place.
             const row = document.createElement('div');
@@ -666,26 +741,31 @@ export function runConnectModal(options) {
             const panel = document.createElement('div');
             panel.className = 'wallet-panel';
             panel.hidden = true;
-            const hiddenCount = wallets.filter((wallet) => !rowWallets.some((shown) => shown.url === wallet.url)).length;
+            // The panel grid holds only the wallets NOT already visible in the
+            // row, so expanding never shows the same wallet twice.
+            const gridWallets = wallets.filter((wallet) => !rowWallets.some((shown) => shown.url === wallet.url));
             const more = document.createElement('button');
             more.className = 'row-tile more-tile';
             more.title = 'All wallets';
             more.setAttribute('aria-expanded', 'false');
-            more.appendChild(el('span', 'more-count', hiddenCount > 0 ? `+${hiddenCount}` : '⋯'));
+            more.appendChild(el('span', 'more-count', gridWallets.length > 0 ? `+${gridWallets.length}` : '⋯'));
             more.appendChild(el('span', 'row-tile-name', 'More'));
             more.addEventListener('click', () => {
                 panel.hidden = !panel.hidden;
                 more.setAttribute('aria-expanded', panel.hidden ? 'false' : 'true');
+                if (!panel.hidden) {
+                    updateScrollHint();
+                }
             });
             row.appendChild(more);
             const label = rowWallets.length > 0 ? el('div', 'wallet-row-label', 'Connecting with') : undefined;
-            // Search filter — appears once the catalog outgrows one grid row.
+            // Search filter — appears once the grid outgrows one row of tiles.
             const tiles = [];
             const empty = document.createElement('div');
             empty.className = 'wallet-empty';
-            empty.textContent = 'No wallets match your search.';
+            empty.textContent = 'No other wallets match your search.';
             empty.hidden = true;
-            if (wallets.length > WALLET_SEARCH_THRESHOLD) {
+            if (gridWallets.length > WALLET_SEARCH_THRESHOLD) {
                 const search = document.createElement('input');
                 search.type = 'search';
                 search.className = 'wallet-search';
@@ -704,28 +784,34 @@ export function runConnectModal(options) {
                         }
                     }
                     empty.hidden = visible > 0;
+                    updateScrollHint();
                 });
                 panel.appendChild(search);
             }
-            // Square tiles, three per row; past two rows the grid scrolls in
-            // place so a large catalog never stretches the modal.
+            // Tiles matching the identity row, four per row; past three rows the
+            // grid scrolls in place, with a bottom fade hinting at more below.
+            const scrollWrap = document.createElement('div');
+            scrollWrap.className = 'wallet-scroll-wrap';
+            scrollWrap.hidden = gridWallets.length === 0;
             const scroll = document.createElement('div');
             scroll.className = 'wallet-scroll';
             const grid = document.createElement('div');
             grid.className = 'wallet-grid';
-            for (const wallet of wallets) {
+            const updateScrollHint = () => {
+                const overflowing = scroll.scrollHeight - scroll.clientHeight > 1;
+                const atEnd = scroll.scrollTop + scroll.clientHeight >= scroll.scrollHeight - 1;
+                scrollWrap.classList.toggle('scroll-hint', overflowing && !atEnd);
+            };
+            scroll.addEventListener('scroll', updateScrollHint);
+            for (const wallet of gridWallets) {
                 const tile = document.createElement('button');
                 tile.className = 'wallet-tile';
-                tile.title = wallet.name;
+                tile.title = (_b = wallet.description) !== null && _b !== void 0 ? _b : wallet.name;
                 tile.appendChild(buildWalletIcon(wallet));
                 const tileName = document.createElement('span');
                 tileName.className = 'wallet-tile-name';
                 tileName.textContent = wallet.name;
                 tile.appendChild(tileName);
-                if (wallet.url === walletUrl) {
-                    tile.classList.add('selected');
-                    tile.setAttribute('aria-pressed', 'true');
-                }
                 tile.addEventListener('click', () => {
                     selectWallet(wallet.url);
                 });
@@ -734,7 +820,8 @@ export function runConnectModal(options) {
             }
             scroll.appendChild(grid);
             scroll.appendChild(empty);
-            panel.appendChild(scroll);
+            scrollWrap.appendChild(scroll);
+            panel.appendChild(scrollWrap);
             // Custom wallet URL (the power-user path, demoted to the disclosure).
             const custom = document.createElement('div');
             custom.className = 'wallet-custom';
@@ -819,6 +906,26 @@ export function runConnectModal(options) {
             }
         };
         document.addEventListener('keydown', onKeydown);
+        // The visitor typically comes back from the wallet tab mid-session.
+        const onVisibilityReturn = () => {
+            var _a;
+            if (document.visibilityState !== 'visible' || settled) {
+                return;
+            }
+            // Background tabs throttle (or freeze) timers, so a re-mint that came
+            // due while the user was away fires now instead of never.
+            if (remintAt !== undefined && Date.now() >= remintAt) {
+                remintNow();
+                return;
+            }
+            // Returning with the code in hand: put the caret in the first empty
+            // pairing-code box so they can type it straight away.
+            if (pinResolve !== undefined) {
+                const inputs = Array.from(shadow.querySelectorAll('.pin-input'));
+                (_a = inputs.find((input) => input.value === '')) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        document.addEventListener('visibilitychange', onVisibilityReturn);
         overlay.appendChild(modal);
         shadow.appendChild(overlay);
         document.body.appendChild(host);
@@ -1060,6 +1167,31 @@ const MODAL_STYLES = `
     .qr-logo .wallet-icon { width: 30px; height: 30px; }
     .qr-logo .wallet-badge { border-radius: 8px; font-size: 15px; }
 
+    /* The QR card doubles as the same-device handoff link. */
+    a.qr-box { display: block; cursor: pointer; }
+    .qr-box.qr-link:hover {
+      border-color: var(--ec-accent);
+      box-shadow: 0 0 0 3px var(--ec-accent-soft);
+    }
+    .qr-box.compact { width: 160px; height: 160px; }
+    .qr-box.compact .qr-logo { width: 36px; height: 36px; }
+    .qr-box.compact .qr-logo .wallet-icon { width: 24px; height: 24px; }
+
+    .stage-divider {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      color: var(--ec-muted);
+      font-size: 12px;
+    }
+    .stage-divider::before, .stage-divider::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: var(--ec-border);
+    }
+
     .claimed-pulse {
       width: 64px; height: 64px; border-radius: 50%;
       background: var(--ec-accent-soft); position: relative;
@@ -1176,7 +1308,7 @@ const MODAL_STYLES = `
       grid-template-columns: repeat(4, 1fr);
       gap: 8px;
     }
-    .row-tile {
+    .row-tile, .wallet-tile {
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -1191,15 +1323,15 @@ const MODAL_STYLES = `
       font-size: 11px;
       cursor: pointer;
     }
-    .row-tile:hover { border-color: var(--ec-accent); }
+    .row-tile:hover, .wallet-tile:hover { border-color: var(--ec-accent); }
     .row-tile.selected {
       border-color: var(--ec-accent);
       background: var(--ec-accent-soft);
       box-shadow: inset 0 0 0 1px var(--ec-accent);
     }
     .row-tile.selected .row-tile-name { font-weight: 600; }
-    .row-tile .wallet-icon { width: 28px; height: 28px; }
-    .row-tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .row-tile .wallet-icon, .wallet-tile .wallet-icon { width: 28px; height: 28px; }
+    .row-tile-name, .wallet-tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
     .more-tile { color: var(--ec-muted); }
     .more-tile:hover { color: var(--ec-text); }
@@ -1225,46 +1357,33 @@ const MODAL_STYLES = `
     }
     .wallet-search:focus { outline: none; border-color: var(--ec-accent); }
 
-    .wallet-scroll { max-height: 260px; overflow-y: auto; }
+    /* Cap the grid at three rows of tiles; past that it scrolls in place,
+       and the wrapper's bottom fade hints that more wallets are below. */
+    .wallet-scroll-wrap { position: relative; }
+    .wallet-scroll { max-height: 220px; overflow-y: auto; }
+    .wallet-scroll-wrap.scroll-hint::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 28px;
+      background: linear-gradient(to bottom, transparent, var(--ec-bg));
+      pointer-events: none;
+    }
     .wallet-grid {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 8px;
-    }
-    .wallet-tile {
-      aspect-ratio: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
+      grid-template-columns: repeat(4, 1fr);
       gap: 8px;
-      padding: 8px;
-      min-width: 0;
-      background: var(--ec-surface);
-      border: 1px solid var(--ec-border);
-      border-radius: 12px;
-      color: var(--ec-text);
-      font-size: 12px;
-      cursor: pointer;
-    }
-    .wallet-tile:hover { border-color: var(--ec-accent); }
-    .wallet-tile.selected {
-      border-color: var(--ec-accent);
-      background: var(--ec-accent-soft);
-      box-shadow: inset 0 0 0 1px var(--ec-accent);
     }
-    .wallet-tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
     .wallet-icon { position: relative; width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; }
-    .wallet-tile .wallet-icon { width: 40px; height: 40px; }
     .wallet-badge {
       width: 100%; height: 100%; border-radius: 8px; display: inline-flex;
       align-items: center; justify-content: center; font-size: 13px;
       font-weight: 600; background: var(--ec-accent-soft); color: var(--ec-accent);
     }
-    .wallet-tile .wallet-badge { border-radius: 10px; font-size: 17px; }
     .wallet-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
-    .wallet-tile .wallet-img { border-radius: 10px; }
 
     .wallet-empty { padding: 10px 4px; font-size: 12px; color: var(--ec-muted); text-align: center; }