diff options
| -rw-r--r-- | src/app.js | 40 | ||||
| -rw-r--r-- | tools/send-enter-keys-test.js | 136 |
2 files changed, 170 insertions, 6 deletions
@@ -696,6 +696,25 @@ function attachZoom(box, img) { } if (typeof window !== 'undefined') { window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && ui.lightbox) goBack(() => { ui.lightbox = null; }); }); + // Enter walks the Send flow: from an amount (or any field) it presses the + // screen's main button — Review, Pay, Send — and with nothing focused it + // presses it again, so amount ⏎ reviews and ⏎ again confirms. A held key + // (auto-repeat) never presses anything: one deliberate tap per step. + window.addEventListener('keydown', (e) => { + if (e.key !== 'Enter' || e.repeat || e.isComposing || e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) return; + if (ui.screen !== 'wallet' || ui.tab !== 'send') return; + const pane = document.querySelector('[data-send-pane]'); + if (!pane) return; + const a = document.activeElement; + const onBody = !a || a === document.body || a === document.documentElement; + // buttons and links answer Enter themselves; the recipient field has its own + if (!onBody && !(a.tagName === 'INPUT' && pane.contains(a) && !/^(checkbox|radio|button|submit)$/.test(a.type))) return; + const btn = pane.querySelector('.btn-primary.btn-block:not(:disabled), .btn-primary.grow:not(:disabled)'); + if (!btn) return; + e.preventDefault(); + if (!onBody) a.blur(); // the next Enter belongs to the screen this one opens + btn.click(); + }); } function render() { @@ -4396,10 +4415,11 @@ function balanceCard() { ui.accountUserChosen = true; // a deliberate pick — no auto-select behind it ui.account = view; try { localStorage.setItem(ACCOUNT_KEY, view); } catch {} - // selecting an account lands on its history (home), any open - // payment detail belonged to the other account + // selecting Spending lands on its history (home); Savings opens on + // its Receive pane, the deposit address being what you swiped over + // for. Any open payment detail belonged to the other account. ui.txDetail = null; ui.arkMoveDetail = null; ui.arkReconDetail = null; ui.arkExitDetail = null; ui.giftDetail = null; - ui.tab = 'history'; + ui.tab = view === 'savings' ? 'receive' : 'history'; render(); }; // Where will a released touch flick land? Nearest card, pushed one over @@ -4603,7 +4623,7 @@ function balanceCard() { ui.account = v; try { localStorage.setItem(ACCOUNT_KEY, v); } catch {} ui.txDetail = null; ui.arkMoveDetail = null; ui.arkReconDetail = null; ui.arkExitDetail = null; ui.giftDetail = null; - ui.tab = 'history'; + ui.tab = v === 'savings' ? 'receive' : 'history'; // as commitAccount render(); }, }, faceFor(v), ...(v === 'spending' ? cardExtras(v) : [])))); @@ -4668,6 +4688,7 @@ function tabContent() { if (detailOpen) return hist; sendFocused = false; const pane = ui.tab === 'receive' ? receiveTab() : sendTab(); + if (ui.tab === 'send' && pane && pane.setAttribute) pane.setAttribute('data-send-pane', ''); // Past the recipient — an amount to enter, a payment to confirm — the // history is one more thing on screen while you're about to send. if (ui.tab === 'send' && sendFocused) return pane; @@ -5178,8 +5199,15 @@ function recipientRow(s, r, i) { class: 'mono-input grow send-dest', placeholder: i === 0 ? t('destPlaceholder') : 'bc1q…', rows: String(destRows(shown)), wrap: 'soft', autocapitalize: 'none', autocomplete: 'off', spellcheck: 'false', value: shown, - // one line of text: Enter doesn't break it - onKeydown: (e) => { if (e.key === 'Enter') e.preventDefault(); }, + // one line of text: Enter doesn't break it — it picks the top suggestion + // when the list is showing + onKeydown: (e) => { + if (e.key !== 'Enter') return; + e.preventDefault(); + if (e.isComposing || e.repeat) return; + const top = i === 0 && suggest && suggest._rows && suggest._rows[0]; + if (top) sendSearch.pick(top); + }, // pasted text is complete: it moves on at once, like the Paste button onPaste: () => { r._pasted = true; }, // the delay lets the keyboard start opening (and any render() swap of diff --git a/tools/send-enter-keys-test.js b/tools/send-enter-keys-test.js new file mode 100644 index 0000000..dc44ef3 --- /dev/null +++ b/tools/send-enter-keys-test.js @@ -0,0 +1,136 @@ +// Keyboard path through the wallet: swiping the carousel to Savings opens its +// Receive pane (the on-chain address, no extra tap); on Send, Enter in the +// recipient field picks the top suggestion, and Enter after an amount +// presses the screen's main button (Review), Enter again presses the next +// one (confirm). A held Enter (auto-repeat) presses nothing. +// Uses the live registrar for the 'adam' lookup. Spends nothing: the wallet +// is fresh and empty, and the confirm step is checked on a stand-in button. +// Run: bun tools/send-enter-keys-test.js +import puppeteer from './puppeteer.js'; +import { generateMnemonic } from '@scure/bip39'; +import { wordlist } from '@scure/bip39/wordlists/english'; +import { buildHtml } from '../build.js'; +const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); +let ok = true; +const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; }; +const html = await buildHtml({ minify: true, pwa: false }); +const server = Bun.serve({ port: 0, fetch: (req) => { + const p = new URL(req.url).pathname; + if (p.startsWith('/punks') || p === '/verify-worker.js' || p.startsWith('/locales') || /\.js$/.test(p)) { const f = Bun.file('dist' + p); return f.size ? new Response(f) : new Response('', { status: 404 }); } + return new Response(html, { headers: { 'content-type': 'text/html' } }); +} }); +const browser = await puppeteer.launch({ executablePath: process.env.CHROME || '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox'] }); +const page = await browser.newPage(); +const errs = []; page.on('pageerror', (e) => errs.push(String(e))); +const click = (t) => page.evaluate((x) => { const e = [...document.querySelectorAll('button')].find((n) => n.textContent.trim().toLowerCase().includes(x)); if (e) { e.click(); return true; } return false; }, t); +const lit = () => page.evaluate(() => document.querySelector('.tabs .active, .tabs [aria-selected=true]')?.textContent.trim() || ''); +const addrShown = () => page.evaluate(() => document.querySelector('.addr-box')?.textContent.trim() || ''); +// swipe the carousel to a card the way a finger does: scroll the strip, let it settle +const swipeTo = (cls) => page.evaluate((c) => { + const el = document.querySelector('.bal-carousel'); const k = el && el.querySelector('.' + c); + if (!k) return false; + el.scrollTo({ left: k.offsetLeft + k.offsetWidth / 2 - el.clientWidth / 2, behavior: 'auto' }); + el.dispatchEvent(new Event('scroll')); + return true; +}, cls); +// Replace the main button's action with a recorder, so a press is visible +// and nothing is really sent. +const armPrimary = () => page.evaluate(() => { + const b = document.querySelector('[data-send-pane] .btn-primary.btn-block:not(:disabled), [data-send-pane] .btn-primary.grow:not(:disabled)'); + if (!b) return null; + window.__pressed = null; + b.onclick = () => { window.__pressed = b.textContent.trim(); }; + return b.textContent.trim(); +}); +try { + await page.setViewport({ width: 390, height: 844 }); + await page.goto(server.url.origin, { waitUntil: 'domcontentloaded' }); + await sleep(400); + await click('create a new wallet'); await sleep(500); await click('to import'); await sleep(400); + await page.waitForSelector('textarea'); await page.type('textarea', generateMnemonic(wordlist)); await click('open wallet'); + for (let i = 0; i < 80 && !(await page.evaluate(() => [...document.querySelectorAll('button')].some((b) => b.textContent.trim() === 'Send'))); i++) { + await page.evaluate(() => [...document.querySelectorAll('button')].find((b) => /^(not now|skip|continue|later)$/i.test(b.textContent.trim()))?.click()); + await sleep(400); + } + await sleep(3000); // features (names, zaps, ark) load + + console.log('[carousel → Savings]'); + // a fresh wallet is Savings only: set up its Spending side for the carousel + for (let i = 0; i < 60 && !(await click('set up a spending account')); i++) await sleep(500); + for (let i = 0; i < 60 && !(await page.$('.bal-carousel .face-savings')); i++) { + await page.evaluate(() => [...document.querySelectorAll('button')].find((b) => /^(not now|skip|continue|later|done)$/i.test(b.textContent.trim()))?.click()); + await sleep(500); + } + check('the carousel is up', !!(await page.$('.bal-carousel .face-savings'))); + await swipeTo('face-spending'); await sleep(1200); + check('on Spending, its history (no pane open)', !(await lit()), await lit()); + await swipeTo('face-savings'); await sleep(1200); + let a = await addrShown(); + check('Savings opens on Receive', /receive/i.test(await lit()), await lit()); + check('...showing the on-chain deposit address', /^(bc1|tb1|bcrt1)/.test(a), a); + await swipeTo('face-spending'); await sleep(1200); + check('back on Spending, history again', !(await lit()), await lit()); + + console.log('[recipient: Enter picks the top suggestion]'); + await page.evaluate(() => [...document.querySelectorAll('button')].find((b) => b.textContent.trim() === 'Send')?.click()); + await page.waitForSelector('textarea.send-dest', { timeout: 10000 }); + await page.focus('textarea.send-dest'); + await page.keyboard.type('adam', { delay: 80 }); + let top = ''; + for (let i = 0; i < 40 && !top; i++) { await sleep(250); top = await page.evaluate(() => { const s = document.querySelector('.send-suggest'); return s && s.style.display !== 'none' ? s.querySelector('.item .muted')?.textContent.trim() || s.querySelector('.item')?.textContent.trim() || '' : ''; }); } + check('suggestions show for "adam"', !!top, top || await page.evaluate(() => document.querySelector('[data-send-pane]')?.innerText.slice(0, 200))); + await page.keyboard.press('Enter'); + let amt = null; + for (let i = 0; i < 40 && !amt; i++) { await sleep(250); amt = await page.$('[data-send-pane] input[type=number]'); } + const field = await page.evaluate(() => document.querySelector('textarea.send-dest')?.value ?? document.querySelector('[data-send-pane] h3')?.textContent); + check('Enter picked it: the amount step is up', !!amt, field); + check('no line break went into the field', !/\n/.test(field || ''), JSON.stringify(field)); + + console.log('[amount: Enter presses the main button]'); + await page.focus('[data-send-pane] input[type=number]'); + await page.keyboard.type('1000'); + const label = await armPrimary(); + check('there is a main button to press', !!label, label); + await page.keyboard.down('Enter'); await page.keyboard.up('Enter'); + check('Enter in the amount pressed it', await page.evaluate(() => window.__pressed) === label, label); + check('...and let go of the field', await page.evaluate(() => document.activeElement === document.body)); + + console.log('[nothing focused: Enter presses the next main button]'); + const label2 = await armPrimary(); + await page.keyboard.press('Enter'); + check('Enter with nothing focused pressed it', await page.evaluate(() => window.__pressed) === label2, label2); + + console.log('[held Enter presses nothing]'); + await armPrimary(); + await page.evaluate(() => window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', repeat: true, bubbles: true }))); + check('an auto-repeat Enter is ignored', await page.evaluate(() => window.__pressed) === null); + + console.log('[the real thing: adam ⏎ 1000 ⏎ goes to the next screen]'); + await page.evaluate(() => [...document.querySelectorAll('button')].find((b) => b.textContent.trim() === 'Send')?.click()); await sleep(400); + await page.evaluate(() => [...document.querySelectorAll('button')].find((b) => b.textContent.trim() === 'Send')?.click()); + await page.waitForSelector('textarea.send-dest', { timeout: 10000 }); + await page.$eval('textarea.send-dest', (e) => { e.value = ''; e.dispatchEvent(new Event('input', { bubbles: true })); }); await sleep(300); + await page.focus('textarea.send-dest'); + await page.keyboard.type('adam', { delay: 80 }); + await sleep(2500); + await page.keyboard.press('Enter'); + await page.waitForSelector('[data-send-pane] input[type=number]', { timeout: 10000 }); + await page.focus('[data-send-pane] input[type=number]'); + await page.keyboard.type('1000'); + const before = await page.evaluate(() => document.querySelector('[data-send-pane]')?.innerText || ''); + await page.keyboard.press('Enter'); + await sleep(2500); + const after = await page.evaluate(() => document.querySelector('[data-send-pane]')?.innerText || ''); + console.log(' screen after ⏎:', JSON.stringify(after.slice(0, 200))); + check('the screen moved on to the review', after !== before && /Send$/.test(after.trim()), after.slice(-40)); + const confirmLabel = await armPrimary(); + await page.keyboard.press('Enter'); + check('⏎ again presses Send (stand-in: nothing is sent)', confirmLabel === 'Send' && await page.evaluate(() => window.__pressed) === 'Send', confirmLabel); + check('no page errors', errs.length === 0, errs.join('; ').slice(0, 300)); +} catch (e) { + console.error(e); ok = false; +} finally { + await browser.close(); server.stop(); +} +console.log(ok ? 'PASS' : 'FAIL'); +process.exit(ok ? 0 : 1); |