From 1e5e86f239a9060ff660a4d0e37f95c6d2ab192a Mon Sep 17 00:00:00 2001 From: Pavel Lesyuk Date: Tue, 30 Jun 2026 01:24:42 +0800 Subject: [PATCH 1/6] =?UTF-8?q?test(demo-wallet):=20redesign=20e2e=20suite?= =?UTF-8?q?=20=E2=80=94=20UI=20mocks=20+=20TON=20Connect=20mock-dApp=20(TO?= =?UTF-8?q?N-1701)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit UI-mock specs (mock-first via page.route on the walletkit API): unlock, dashboard, assets, nft, history, send, swap, staking, amount-formatting + page objects and a shared walletApi mock. No real wallet/funds — a fresh wallet + mocked Toncenter v3. TON Connect mock-dApp two-tab suite (connect / sendTransaction / signData / signMessage) driven by a self-contained @tonconnect/sdk mock-dApp fixture; asserts the redesigned modal copy + per-type actions. sendTransaction runs without funds via a mocked balance + disableNetworkSend (the wallet signs and responds to the dApp over the bridge but skips the on-chain broadcast). Stable Allure historyId (describe-chain + test title) for zero-manual TestOps linking. DemoWallet expect*Modal assertion helpers; mockdapp + tonconnect Playwright configs. --- apps/demo-wallet/e2e.mockdapp.config.ts | 96 ++++ apps/demo-wallet/e2e.tonconnect.config.ts | 79 +++ .../demo-wallet/e2e/demo-wallet/DemoWallet.ts | 97 +++- .../e2e/mock-dapp-tests/connect.spec.ts | 46 ++ .../e2e/mock-dapp-tests/signData.spec.ts | 50 ++ .../e2e/mock-dapp-tests/signMessage.spec.ts | 57 ++ .../e2e/mock-dapp-tests/transaction.spec.ts | 57 ++ apps/demo-wallet/e2e/mock-dapp/index.html | 41 ++ apps/demo-wallet/e2e/mock-dapp/main.ts | 121 ++++ .../e2e/mock-dapp/tonconnect-manifest.json | 5 + apps/demo-wallet/e2e/mock-dapp/vite.config.ts | 43 ++ apps/demo-wallet/e2e/mock-dapp/vite.svg | 1 + apps/demo-wallet/e2e/mocks/walletApi.ts | 534 ++++++++++++++++++ apps/demo-wallet/e2e/pages/AssetsPage.ts | 47 ++ apps/demo-wallet/e2e/pages/HistoryPage.ts | 48 ++ apps/demo-wallet/e2e/pages/NftPage.ts | 36 ++ .../demo-wallet/e2e/pages/UnlockWalletPage.ts | 63 +++ apps/demo-wallet/e2e/pages/index.ts | 4 + apps/demo-wallet/e2e/qa/WalletApp.ts | 30 +- apps/demo-wallet/e2e/ton-connect/MockDapp.ts | 75 +++ .../e2e/ton-connect/connect.spec.ts | 54 ++ .../e2e/ton-connect/mockDappFixture.ts | 110 ++++ .../e2e/ton-connect/twoTabFixture.ts | 75 +++ .../demo-wallet/e2e/ui-tests/UITestFixture.ts | 17 +- apps/demo-wallet/e2e/ui-tests/assets.spec.ts | 83 +++ .../e2e/ui-tests/dashboard.spec.ts | 72 +++ .../e2e/ui-tests/formatting.spec.ts | 55 ++ apps/demo-wallet/e2e/ui-tests/helpers.ts | 35 ++ apps/demo-wallet/e2e/ui-tests/history.spec.ts | 74 +++ apps/demo-wallet/e2e/ui-tests/nft.spec.ts | 42 ++ apps/demo-wallet/e2e/ui-tests/send.spec.ts | 63 +++ apps/demo-wallet/e2e/ui-tests/staking.spec.ts | 58 ++ apps/demo-wallet/e2e/ui-tests/swap.spec.ts | 52 ++ apps/demo-wallet/e2e/ui-tests/unlock.spec.ts | 87 +++ 34 files changed, 2404 insertions(+), 3 deletions(-) create mode 100644 apps/demo-wallet/e2e.mockdapp.config.ts create mode 100644 apps/demo-wallet/e2e.tonconnect.config.ts create mode 100644 apps/demo-wallet/e2e/mock-dapp-tests/connect.spec.ts create mode 100644 apps/demo-wallet/e2e/mock-dapp-tests/signData.spec.ts create mode 100644 apps/demo-wallet/e2e/mock-dapp-tests/signMessage.spec.ts create mode 100644 apps/demo-wallet/e2e/mock-dapp-tests/transaction.spec.ts create mode 100644 apps/demo-wallet/e2e/mock-dapp/index.html create mode 100644 apps/demo-wallet/e2e/mock-dapp/main.ts create mode 100644 apps/demo-wallet/e2e/mock-dapp/tonconnect-manifest.json create mode 100644 apps/demo-wallet/e2e/mock-dapp/vite.config.ts create mode 100644 apps/demo-wallet/e2e/mock-dapp/vite.svg create mode 100644 apps/demo-wallet/e2e/mocks/walletApi.ts create mode 100644 apps/demo-wallet/e2e/pages/AssetsPage.ts create mode 100644 apps/demo-wallet/e2e/pages/HistoryPage.ts create mode 100644 apps/demo-wallet/e2e/pages/NftPage.ts create mode 100644 apps/demo-wallet/e2e/pages/UnlockWalletPage.ts create mode 100644 apps/demo-wallet/e2e/ton-connect/MockDapp.ts create mode 100644 apps/demo-wallet/e2e/ton-connect/connect.spec.ts create mode 100644 apps/demo-wallet/e2e/ton-connect/mockDappFixture.ts create mode 100644 apps/demo-wallet/e2e/ton-connect/twoTabFixture.ts create mode 100644 apps/demo-wallet/e2e/ui-tests/assets.spec.ts create mode 100644 apps/demo-wallet/e2e/ui-tests/dashboard.spec.ts create mode 100644 apps/demo-wallet/e2e/ui-tests/formatting.spec.ts create mode 100644 apps/demo-wallet/e2e/ui-tests/helpers.ts create mode 100644 apps/demo-wallet/e2e/ui-tests/history.spec.ts create mode 100644 apps/demo-wallet/e2e/ui-tests/nft.spec.ts create mode 100644 apps/demo-wallet/e2e/ui-tests/send.spec.ts create mode 100644 apps/demo-wallet/e2e/ui-tests/staking.spec.ts create mode 100644 apps/demo-wallet/e2e/ui-tests/swap.spec.ts create mode 100644 apps/demo-wallet/e2e/ui-tests/unlock.spec.ts diff --git a/apps/demo-wallet/e2e.mockdapp.config.ts b/apps/demo-wallet/e2e.mockdapp.config.ts new file mode 100644 index 000000000..1769e8af0 --- /dev/null +++ b/apps/demo-wallet/e2e.mockdapp.config.ts @@ -0,0 +1,96 @@ +/** + * Copyright (c) TonTech. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import path from 'path'; +import { fileURLToPath } from 'url'; + +import { config } from 'dotenv'; +import { defineConfig, devices } from '@playwright/test'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); + +// Fully mock-first two-tab TON Connect config: pairs the SELF-CONTAINED QA Mock dApp +// (tab 1, :5175 — `e2e/mock-dapp/`, raw @tonconnect/sdk) with the redesigned demo-wallet +// (tab 2, :5173). The dApp drives connect / sendTransaction / signData / signMessage over +// the real TON Connect bridge; the wallet runs with on-chain broadcast suppressed +// (VITE_DISABLE_NETWORK_SEND) and the manifest domain check disabled +// (VITE_DISABLE_MANIFEST_DOMAIN_CHECK). Mirrors `e2e.tonconnect.config.ts`. +config({ quiet: true }); + +const workersCount = process.env.WORKERS_COUNT ? parseInt(process.env.WORKERS_COUNT) : undefined; +const timeout = process.env.TIMEOUT ? parseInt(process.env.TIMEOUT) : 60_000; +const headless = + process.env.ENABLE_HEADLESS === 'true' ? true : process.env.ENABLE_HEADLESS === 'false' ? false : undefined; + +// `127.0.0.1` (NOT `localhost`): WalletKit's manifest `isValidHost` guard rejects dot-less +// hosts before fetching, regardless of `disableManifestDomainCheck` — see the mock-dApp's +// main.ts / packages/walletkit/src/utils/url.ts. `127.0.0.1` has dots and passes. +const APP_URL = process.env.MOCK_DAPP_URL ?? 'http://127.0.0.1:5175/'; +const WALLET_SOURCE = process.env.E2E_WALLET_SOURCE ?? 'http://localhost:5173/'; + +// Absolute path to the mock-dApp vite config — robust to the cwd vite is launched from. +const MOCK_DAPP_VITE_CONFIG = path.resolve(__dirname, 'e2e/mock-dapp/vite.config.ts'); + +// Start the mock-dApp (tab 1) unless an external MOCK_DAPP_URL is supplied. +const mockDappServer = process.env.MOCK_DAPP_URL + ? [] + : [ + { + command: `pnpm --filter demo-wallet exec vite --config ${MOCK_DAPP_VITE_CONFIG}`, + url: 'http://127.0.0.1:5175/', + reuseExistingServer: !process.env.CI, + timeout: 120_000, + }, + ]; + +// Start the demo-wallet (tab 2) unless it is served elsewhere. Network send + manifest +// domain check are disabled so the wallet signs/responds over the bridge without broadcasting +// and accepts the localhost mock-dApp manifest. +const walletServer = WALLET_SOURCE.includes('localhost:5173') + ? [ + { + command: + 'VITE_DISABLE_NETWORK_SEND=true VITE_DISABLE_MANIFEST_DOMAIN_CHECK=true pnpm --filter demo-wallet dev', + url: 'http://localhost:5173/', + reuseExistingServer: !process.env.CI, + timeout: 120_000, + }, + ] + : []; + +export default defineConfig({ + testDir: './e2e/mock-dapp-tests', + timeout, + expect: { timeout }, + fullyParallel: false, + forbidOnly: !!process.env.CI, + // The handshake + requests ride the real TON Connect bridge; CI retries absorb transient + // bridge/timing hiccups (matches e2e.tonconnect.config.ts — that's why its gate is stable). + retries: process.env.CI ? 2 : 0, + workers: workersCount ?? 1, + reporter: [['list'], ['allure-playwright']], + use: { + baseURL: APP_URL, + screenshot: 'only-on-failure', + trace: 'retain-on-failure', + permissions: ['clipboard-read', 'clipboard-write'], + launchOptions: { + args: [ + '--no-sandbox', + '--disable-setuid-sandbox', + '--disable-dev-shm-usage', + '--no-first-run', + '--disable-infobars', + '--disable-blink-features=AutomationControlled', + ], + }, + headless, + }, + projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }], + webServer: [...mockDappServer, ...walletServer], +}); diff --git a/apps/demo-wallet/e2e.tonconnect.config.ts b/apps/demo-wallet/e2e.tonconnect.config.ts new file mode 100644 index 000000000..cc3d26da9 --- /dev/null +++ b/apps/demo-wallet/e2e.tonconnect.config.ts @@ -0,0 +1,79 @@ +/** + * Copyright (c) TonTech. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import { config } from 'dotenv'; +import { defineConfig, devices } from '@playwright/test'; + +// Two-tab TON Connect config: pairs the in-kit appkit-minter dApp (tab 1, :5174) with the +// redesigned demo-wallet (tab 2, :5173). The demo-wallet connects to the dApp over the real +// TON Connect bridge by pasting the universal link copied from the dApp's connect modal — +// the same pattern the appkit-minter gasless e2e uses. Mirrors `apps/appkit-minter/e2e.config.ts`. +config({ quiet: true }); + +const workersCount = process.env.WORKERS_COUNT ? parseInt(process.env.WORKERS_COUNT) : undefined; +const timeout = process.env.TIMEOUT ? parseInt(process.env.TIMEOUT) : 60_000; +const headless = + process.env.ENABLE_HEADLESS === 'true' ? true : process.env.ENABLE_HEADLESS === 'false' ? false : undefined; + +const APP_URL = process.env.MINTER_URL ?? 'http://localhost:5174/'; +const WALLET_SOURCE = process.env.E2E_WALLET_SOURCE ?? 'http://localhost:5173/'; + +// Start the minter (tab 1) unless an external MINTER_URL is supplied. +const minterServer = process.env.MINTER_URL + ? [] + : [ + { + command: 'pnpm --filter appkit-minter dev', + url: 'http://localhost:5174/', + reuseExistingServer: !process.env.CI, + timeout: 120_000, + }, + ]; +// Start the demo-wallet (tab 2) unless it is served elsewhere. +const walletServer = WALLET_SOURCE.includes('localhost:5173') + ? [ + { + command: 'pnpm --filter demo-wallet dev', + url: 'http://localhost:5173/', + reuseExistingServer: !process.env.CI, + timeout: 120_000, + }, + ] + : []; + +export default defineConfig({ + testDir: './e2e/ton-connect', + timeout, + expect: { timeout }, + fullyParallel: false, + forbidOnly: !!process.env.CI, + // Two-tab connect rides the real TON Connect bridge; CI retries absorb transient bridge/timing + // hiccups (matches apps/appkit-minter/e2e.config.ts — that's why its two-tab gate is stable). + retries: process.env.CI ? 2 : 0, + workers: workersCount ?? 1, + reporter: [['list'], ['allure-playwright']], + use: { + baseURL: APP_URL, + screenshot: 'only-on-failure', + trace: 'retain-on-failure', + permissions: ['clipboard-read', 'clipboard-write'], + launchOptions: { + args: [ + '--no-sandbox', + '--disable-setuid-sandbox', + '--disable-dev-shm-usage', + '--no-first-run', + '--disable-infobars', + '--disable-blink-features=AutomationControlled', + ], + }, + headless, + }, + projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }], + webServer: [...minterServer, ...walletServer], +}); diff --git a/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts b/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts index c6e3adbbd..c2f82c8b0 100644 --- a/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts +++ b/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts @@ -6,6 +6,8 @@ * */ +import { expect } from '@playwright/test'; + import { WalletApp } from '../qa'; // const timeout = 20_000; @@ -28,8 +30,12 @@ export class DemoWallet extends WalletApp { } const app = await this.open(); - // Welcome → "Add an existing wallet" → "Recovery phrase" + // Welcome → "Add an existing wallet" → "Recovery phrase". Wait for the welcome action to + // render — the app shows a loader until WalletKit initializes, so clicking immediately + // after navigation races that boot. Likewise wait for the picker option to mount/animate. + await app.getByTestId('welcome-add-existing').waitFor({ state: 'visible' }); await app.getByTestId('welcome-add-existing').click(); + await app.getByTestId('add-wallet-import').waitFor({ state: 'visible' }); await app.getByTestId('add-wallet-import').click(); // Setup password @@ -98,6 +104,95 @@ export class DemoWallet extends WalletApp { await this.close(); } + /** + * Approve or reject a SignMessage request (the gasless path: the dApp asks the wallet + * to sign an internal message without broadcasting it). The redesigned wallet renders + * this as a per-type "Sign message for {dApp}" modal (`sign-message-request`; actions + * `sign-message-approve` / `sign-message-reject`). Parity with the appkit-minter's + * `DemoWallet.signMessage` — the two page-objects are kept split on purpose (see + * TON-1682 D2; if kit moves to its own repo the object can't be shared). + */ + async signMessage(confirm: boolean = true): Promise { + const app = await this.open(); + const modal = app.getByTestId('sign-message-request'); + await modal.waitFor({ state: 'visible' }); + const chose = app.getByTestId(confirm ? 'sign-message-approve' : 'sign-message-reject'); + await chose.waitFor({ state: 'attached' }); + await chose.click(); + await modal.waitFor({ state: 'detached' }); + await this.close(); + } + + /** + * Assert the redesigned per-type request modals' static copy + per-type action buttons WHILE + * THE MODAL IS OPEN, without approving/rejecting. Each method waits for the type-specific modal + * (same testid the approve method anchors on), asserts the verified static strings, and leaves + * the page open so the matching `connect`/`accept`/`signData`/`signMessage` call can proceed. + * + * Only STATIC source-verified substrings are asserted (never the interpolated `{dApp}` name): + * - the title `

` static verb (e.g. "Connect to"), + * - a distinctive disclaimer/subtitle/section substring, + * - the per-type approve & reject buttons by testid. + * Strings traced to apps/demo-wallet/src/features/ton-connect/components/* (see TON-1701). + */ + async expectConnectModal(): Promise { + const app = await this.open(); + const modal = app.getByTestId('connect-request'); + await modal.waitFor({ state: 'visible' }); + + // Title verb (connect-request-modal.tsx verb="Connect to"). + await expect(modal.getByTestId('request')).toContainText('Connect to'); + // Disclaimer (connect-request-modal.tsx disclaimer="Only connect to trusted applications. …"). + await expect(modal).toContainText('Only connect to trusted applications'); + // Per-type action buttons (connect-approve / connect-reject). + await expect(app.getByTestId('connect-approve')).toBeVisible(); + await expect(app.getByTestId('connect-reject')).toBeVisible(); + } + + async expectTransactionModal(): Promise { + const app = await this.open(); + const modal = app.getByTestId('transaction-request'); + await modal.waitFor({ state: 'visible' }); + + // Title verb (transaction-request-modal.tsx verb="Confirm transaction for"). + await expect(modal.getByTestId('request')).toContainText('Confirm transaction for'); + // Subtitle (transaction-request-modal.tsx subtitle="A dApp wants to send a transaction from your wallet:"). + await expect(modal).toContainText('A dApp wants to send a transaction from your wallet'); + // "You will sign" details section (TransactionRequestDetails default title="You will sign"). + await expect(modal).toContainText('You will sign'); + // Per-type action buttons (send-transaction-approve / send-transaction-reject). + await expect(app.getByTestId('send-transaction-approve')).toBeVisible(); + await expect(app.getByTestId('send-transaction-reject')).toBeVisible(); + } + + async expectSignMessageModal(): Promise { + const app = await this.open(); + const modal = app.getByTestId('sign-message-request'); + await modal.waitFor({ state: 'visible' }); + + // Title verb (sign-message-request-modal.tsx verb="Sign message for"). + await expect(modal.getByTestId('request')).toContainText('Sign message for'); + // Subtitle about signing without broadcasting (sign-message-request-modal.tsx subtitle). + await expect(modal).toContainText('without broadcasting it'); + // Per-type action buttons (sign-message-approve / sign-message-reject). + await expect(app.getByTestId('sign-message-approve')).toBeVisible(); + await expect(app.getByTestId('sign-message-reject')).toBeVisible(); + } + + async expectSignDataModal(): Promise { + const app = await this.open(); + const modal = app.getByTestId('sign-data-request'); + await modal.waitFor({ state: 'visible' }); + + // Title verb (sign-data-request-modal.tsx verb="Sign data for"). + await expect(modal.getByTestId('request')).toContainText('Sign data for'); + // Text-payload body label (sign-data-request-modal.tsx renderDataToSign text case "Text Message"). + await expect(modal).toContainText('Text Message'); + // Per-type action buttons (sign-data-approve / sign-data-reject). + await expect(app.getByTestId('sign-data-approve')).toBeVisible(); + await expect(app.getByTestId('sign-data-reject')).toBeVisible(); + } + async sendTransaction(isPositiveCase: boolean, confirm: boolean, waitBeforeApprove: number = 0): Promise { await this.open(); if (isPositiveCase || waitBeforeApprove > 0) { diff --git a/apps/demo-wallet/e2e/mock-dapp-tests/connect.spec.ts b/apps/demo-wallet/e2e/mock-dapp-tests/connect.spec.ts new file mode 100644 index 000000000..498ba75a8 --- /dev/null +++ b/apps/demo-wallet/e2e/mock-dapp-tests/connect.spec.ts @@ -0,0 +1,46 @@ +/** + * Copyright (c) TonTech. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import { expect } from '@playwright/test'; + +import { mockDappFixture } from '../ton-connect/mockDappFixture'; + +/** + * Mock-first two-tab TON Connect — connect modal. + * + * Tab 1 = the self-contained QA Mock dApp (:5175). Tab 2 = the redesigned demo-wallet (:5173). + * `dapp.connectUrl()` clicks the dApp's Connect button and reads the universal link straight + * off `#dapp-connect-url` (no modal, no clipboard). `wallet.connectBy(url, false, confirm)` + * pastes it into the wallet's "Connect to dApp" flow and drives the redesigned per-type + * `connect-request` modal (`connect-approve` / `connect-reject`). The handshake rides the real + * TON Connect bridge. + */ +const test = mockDappFixture(); + +test.describe('TON Connect mock-dApp — connect (two-tab)', () => { + test('Approving the connect request connects the wallet to the dApp', async ({ wallet, dapp }) => { + const url = await dapp.connectUrl(); + // Bring the modal up (skip the atomic approve), assert the redesigned copy + buttons, then approve. + await wallet.connectBy(url, /* shouldSkipConnect */ true); + await wallet.expectConnectModal(); + await wallet.connect(true); + + // The connector reports a connected wallet (status change → #dapp-connected === 'true'). + await expect(await dapp.isConnected()).toBe(true); + }); + + test('Rejecting the connect request leaves the dApp disconnected', async ({ wallet, dapp }) => { + const url = await dapp.connectUrl(); + await wallet.connectBy(url, /* shouldSkipConnect */ true); + await wallet.expectConnectModal(); + await wallet.connect(false); + + // After a rejection the connector never flips to connected. + await expect(dapp.page.getByTestId('dapp-connected')).toHaveText(''); + }); +}); diff --git a/apps/demo-wallet/e2e/mock-dapp-tests/signData.spec.ts b/apps/demo-wallet/e2e/mock-dapp-tests/signData.spec.ts new file mode 100644 index 000000000..1b7d5848a --- /dev/null +++ b/apps/demo-wallet/e2e/mock-dapp-tests/signData.spec.ts @@ -0,0 +1,50 @@ +/** + * Copyright (c) TonTech. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import { expect } from '@playwright/test'; + +import { mockDappFixture } from '../ton-connect/mockDappFixture'; + +/** + * Mock-first two-tab TON Connect — signData (sign-data-request modal). + * + * signData carries no value transfer and no balance guard, so no wallet-API mock is needed. + * Flow: connect → `dapp.signData()` (text payload) → `wallet.signData(confirm)` drives the + * per-type `sign-data-request` modal (`sign-data-approve` / `sign-data-reject`). On approve the + * dApp receives an Ed25519 signature + signer address; on reject, a user-rejection error. + */ +const test = mockDappFixture(); + +test.describe('TON Connect mock-dApp — signData (two-tab)', () => { + test('Approving a signData request returns a signature to the dApp', async ({ wallet, dapp }) => { + const url = await dapp.connectUrl(); + await wallet.connectBy(url, false, true); + await dapp.isConnected(); + + await dapp.signData(); + // Assert the redesigned sign-data-request modal's copy + buttons before approving. + await wallet.expectSignDataModal(); + await wallet.signData(true); + + const result = await dapp.result(); + expect(result).toContain('signature'); + }); + + test('Rejecting a signData request returns a user-rejection error to the dApp', async ({ wallet, dapp }) => { + const url = await dapp.connectUrl(); + await wallet.connectBy(url, false, true); + await dapp.isConnected(); + + await dapp.signData(); + await wallet.expectSignDataModal(); + await wallet.signData(false); + + const error = await dapp.error(); + expect(error.toLowerCase()).toMatch(/reject|declined|cancel/); + }); +}); diff --git a/apps/demo-wallet/e2e/mock-dapp-tests/signMessage.spec.ts b/apps/demo-wallet/e2e/mock-dapp-tests/signMessage.spec.ts new file mode 100644 index 000000000..09973f2d4 --- /dev/null +++ b/apps/demo-wallet/e2e/mock-dapp-tests/signMessage.spec.ts @@ -0,0 +1,57 @@ +/** + * Copyright (c) TonTech. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import { expect } from '@playwright/test'; + +import { mockDappFixture } from '../ton-connect/mockDappFixture'; + +/** + * Mock-first two-tab TON Connect — signMessage (sign-message-request modal). + * + * signMessage (the gasless path) asks the wallet to sign an internal message WITHOUT + * broadcasting it; the dApp would relay the returned `internalBoc` itself. Its payload shares + * `SendTransactionRequest`'s shape and the modal renders a transaction-style preview + * (`previewMode="sign"`), so — like the transaction spec — it emulates the message and the + * sign path fetches the wallet seqno. We enable `mockWalletApi` (generous balance) so the + * emulation + seqno mocks are installed and the preview settles. + * + * Flow: connect → `dapp.signMessage()` → `wallet.signMessage(confirm)` drives the per-type + * `sign-message-request` modal (`sign-message-approve` / `sign-message-reject`). On approve the + * dApp receives the signed internal-message BoC; on reject, a user-rejection error. + */ +const test = mockDappFixture({ mockWalletApi: { balanceNano: '100000000000' } }); + +test.describe('TON Connect mock-dApp — signMessage (two-tab)', () => { + test('Approving a signMessage request returns a signed internal BoC to the dApp', async ({ wallet, dapp }) => { + const url = await dapp.connectUrl(); + await wallet.connectBy(url, false, true); + await dapp.isConnected(); + + await dapp.signMessage(); + // Assert the redesigned sign-message-request modal's copy + buttons before approving. + await wallet.expectSignMessageModal(); + await wallet.signMessage(true); + + // Success carries the signed internal-message BoC (the wallet does NOT broadcast it). + const result = await dapp.result(); + expect(result).toContain('internalBoc'); + }); + + test('Rejecting a signMessage request returns a user-rejection error to the dApp', async ({ wallet, dapp }) => { + const url = await dapp.connectUrl(); + await wallet.connectBy(url, false, true); + await dapp.isConnected(); + + await dapp.signMessage(); + await wallet.expectSignMessageModal(); + await wallet.signMessage(false); + + const error = await dapp.error(); + expect(error.toLowerCase()).toMatch(/reject|declined|cancel/); + }); +}); diff --git a/apps/demo-wallet/e2e/mock-dapp-tests/transaction.spec.ts b/apps/demo-wallet/e2e/mock-dapp-tests/transaction.spec.ts new file mode 100644 index 000000000..d2c902406 --- /dev/null +++ b/apps/demo-wallet/e2e/mock-dapp-tests/transaction.spec.ts @@ -0,0 +1,57 @@ +/** + * Copyright (c) TonTech. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import { expect } from '@playwright/test'; + +import { mockDappFixture } from '../ton-connect/mockDappFixture'; + +/** + * Mock-first two-tab TON Connect — sendTransaction (transaction-request modal). + * + * The wallet's `onTransactionRequest` silently rejects when balance < amount, so we install + * the wallet-API mock with a generous balance (`mockWalletApi`) at the context level before + * the wallet tab opens — otherwise the redesigned `transaction-request` modal would never + * render. On-chain broadcast is suppressed by `VITE_DISABLE_NETWORK_SEND=true` (set in the + * wallet dev server), so the wallet SIGNS the tx and returns the signed BoC to the dApp over + * the bridge but spends ZERO funds. + * + * Flow: connect → `dapp.sendTransaction()` (tiny amount) → `wallet.accept(confirm)` drives the + * per-type `transaction-request` modal (`send-transaction-approve` / `send-transaction-reject`). + */ +const test = mockDappFixture({ mockWalletApi: { balanceNano: '100000000000' } }); + +test.describe('TON Connect mock-dApp — sendTransaction (two-tab)', () => { + test('Approving a transaction returns a signed BoC to the dApp (no broadcast)', async ({ wallet, dapp }) => { + const url = await dapp.connectUrl(); + await wallet.connectBy(url, false, true); + await dapp.isConnected(); + + await dapp.sendTransaction(); + // Assert the redesigned transaction-request modal's copy + buttons before approving. + await wallet.expectTransactionModal(); + await wallet.accept(true); + + // Success carries the signed tx BoC (network send is disabled → nothing broadcast). + const result = await dapp.result(); + expect(result).toContain('boc'); + }); + + test('Rejecting a transaction returns a user-rejection error to the dApp', async ({ wallet, dapp }) => { + const url = await dapp.connectUrl(); + await wallet.connectBy(url, false, true); + await dapp.isConnected(); + + await dapp.sendTransaction(); + await wallet.expectTransactionModal(); + await wallet.accept(false); + + // The dApp's sendTransaction promise rejects with a user-declined error. + const error = await dapp.error(); + expect(error.toLowerCase()).toMatch(/reject|declined|cancel/); + }); +}); diff --git a/apps/demo-wallet/e2e/mock-dapp/index.html b/apps/demo-wallet/e2e/mock-dapp/index.html new file mode 100644 index 000000000..fb3bdf258 --- /dev/null +++ b/apps/demo-wallet/e2e/mock-dapp/index.html @@ -0,0 +1,41 @@ + + + + + + + + QA Mock dApp + + + +

QA Mock dApp

+ + + + + + + + 

+        
+        

+        
+        

+        
+        

+
+        
+    
+
diff --git a/apps/demo-wallet/e2e/mock-dapp/main.ts b/apps/demo-wallet/e2e/mock-dapp/main.ts
new file mode 100644
index 000000000..edbbf09f2
--- /dev/null
+++ b/apps/demo-wallet/e2e/mock-dapp/main.ts
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { TonConnect } from '@tonconnect/sdk';
+
+/**
+ * QA Mock dApp — the raw-`@tonconnect/sdk` driver tab for the two-tab demo-wallet
+ * e2e suite. A TEST FIXTURE, not product code. It exposes the four TON Connect
+ * request kinds (connect / sendTransaction / signData / signMessage) behind buttons
+ * with stable test ids, and surfaces every result/error/connect-link into DOM
+ * elements so the Playwright MockDapp page-object reads them directly — no modal
+ * scraping, no clipboard.
+ *
+ * The connector talks to the demo-wallet over the SAME real TON Connect bridge the
+ * wallet listens on (`https://connect.ton.org/bridge`): `connect()` returns a `tc://`
+ * universal link, the test pastes it into the wallet's "Connect to dApp" flow, and
+ * the handshake + every subsequent request ride that bridge.
+ */
+
+// The demo-wallet's bridge (see apps/demo-wallet/src/App.tsx → ENV_BRIDGE_URL).
+const WALLET_BRIDGE_URL = 'https://connect.ton.org/bridge';
+
+// Manifest is served from this same dir by vite (see tonconnect-manifest.json).
+//
+// NOTE on the host: the e2e serves this dApp on `127.0.0.1:5175` (NOT `localhost:5175`).
+// WalletKit's `fetchManifest` runs `isValidHost(host)` on the manifest URL BEFORE fetching
+// and requires the host to contain a dot (see packages/walletkit/src/utils/url.ts) — that
+// guard is unconditional and is NOT bypassed by `disableManifestDomainCheck`. `localhost`
+// has no dot and fails it ("App manifest not found"); `127.0.0.1` has dots and passes.
+const MANIFEST_URL = `${window.location.origin}/tonconnect-manifest.json`;
+
+// A well-formed mainnet address (Tether USDT master) used as the tx/signMessage target.
+// We never broadcast (wallet runs with VITE_DISABLE_NETWORK_SEND=true), so any valid
+// mainnet address is fine — the point is to render the redesigned transaction modal.
+const TARGET_ADDRESS = 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs';
+
+const connector = new TonConnect({ manifestUrl: MANIFEST_URL });
+
+const $ = (id: string): HTMLElement => {
+    const el = document.getElementById(id);
+    if (!el) throw new Error(`[mock-dapp] missing element #${id}`);
+    return el;
+};
+
+const setResult = (value: unknown): void => {
+    $('dapp-result').textContent = typeof value === 'string' ? value : JSON.stringify(value);
+};
+
+const setError = (err: unknown): void => {
+    $('dapp-error').textContent = err instanceof Error ? err.message : String(err);
+};
+
+const clearOutputs = (): void => {
+    $('dapp-result').textContent = '';
+    $('dapp-error').textContent = '';
+};
+
+// Reflect connection status into #dapp-connected so the test can poll it.
+connector.onStatusChange((wallet) => {
+    $('dapp-connected').textContent = wallet ? 'true' : '';
+    // Expose the connected account for debugging / optional assertions.
+    (window as unknown as { __dappWallet?: unknown }).__dappWallet = wallet;
+});
+
+$('dapp-connect').addEventListener('click', () => {
+    clearOutputs();
+    $('dapp-connect-url').textContent = '';
+    try {
+        // External (HTTP-bridge) wallet source → connect() returns a universal link string.
+        const url = connector.connect({ bridgeUrl: WALLET_BRIDGE_URL, universalLink: 'tc://' });
+        const link = String(url);
+        $('dapp-connect-url').textContent = link;
+        (window as unknown as { __dappConnectUrl?: string }).__dappConnectUrl = link;
+    } catch (err) {
+        setError(err);
+    }
+});
+
+$('dapp-send-tx').addEventListener('click', async () => {
+    clearOutputs();
+    try {
+        const res = await connector.sendTransaction({
+            validUntil: Math.floor(Date.now() / 1000) + 600,
+            // 0.000001 TON — tiny; never broadcast (network send disabled in the wallet).
+            messages: [{ address: TARGET_ADDRESS, amount: '1000' }],
+        });
+        // Success carries the signed tx BoC.
+        setResult({ boc: res.boc });
+    } catch (err) {
+        setError(err);
+    }
+});
+
+$('dapp-sign-data').addEventListener('click', async () => {
+    clearOutputs();
+    try {
+        const res = await connector.signData({ type: 'text', text: 'QA mock dApp sign-data payload' });
+        setResult({ signature: res.signature, address: res.address });
+    } catch (err) {
+        setError(err);
+    }
+});
+
+$('dapp-sign-message').addEventListener('click', async () => {
+    clearOutputs();
+    try {
+        // signMessage shares SendTransactionRequest's shape; the wallet signs WITHOUT broadcasting.
+        const res = await connector.signMessage({
+            validUntil: Math.floor(Date.now() / 1000) + 600,
+            messages: [{ address: TARGET_ADDRESS, amount: '1000' }],
+        });
+        setResult({ internalBoc: res.internalBoc });
+    } catch (err) {
+        setError(err);
+    }
+});
diff --git a/apps/demo-wallet/e2e/mock-dapp/tonconnect-manifest.json b/apps/demo-wallet/e2e/mock-dapp/tonconnect-manifest.json
new file mode 100644
index 000000000..7c206812e
--- /dev/null
+++ b/apps/demo-wallet/e2e/mock-dapp/tonconnect-manifest.json
@@ -0,0 +1,5 @@
+{
+    "url": "http://127.0.0.1:5175",
+    "name": "QA Mock dApp",
+    "iconUrl": "http://127.0.0.1:5175/vite.svg"
+}
diff --git a/apps/demo-wallet/e2e/mock-dapp/vite.config.ts b/apps/demo-wallet/e2e/mock-dapp/vite.config.ts
new file mode 100644
index 000000000..d84a26b36
--- /dev/null
+++ b/apps/demo-wallet/e2e/mock-dapp/vite.config.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import path from 'path';
+import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+
+import { defineConfig } from 'vite';
+
+// Vite config for the QA Mock dApp test fixture. `root` is this directory so vite serves
+// index.html + bundles main.ts on the fly.
+//
+// The demo-wallet package does NOT depend on `@tonconnect/sdk` (only walletkit does,
+// transitively, so it isn't hoisted to the top-level node_modules). A bare
+// `import '@tonconnect/sdk'` is therefore unresolvable from this dir's module graph. The
+// package IS installed in the monorepo as a catalog dep used by `appkit-minter`, so we
+// resolve it against that package and alias the bare specifier to its ESM entry. Deriving
+// the ESM path from the resolved CJS entry avoids relying on a hard-coded `.pnpm` path.
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const minterRequire = createRequire(path.resolve(__dirname, '../../../appkit-minter/package.json'));
+const sdkCjs = minterRequire.resolve('@tonconnect/sdk'); // .../@tonconnect/sdk/lib/cjs/index.cjs
+const sdkEsm = path.resolve(path.dirname(sdkCjs), '../esm/index.mjs');
+
+export default defineConfig({
+    root: __dirname,
+    server: {
+        // `127.0.0.1` (not `localhost`): WalletKit's manifest `isValidHost` guard rejects
+        // dot-less hosts before fetching (see main.ts / packages/walletkit/src/utils/url.ts).
+        host: '127.0.0.1',
+        port: 5175,
+        strictPort: true,
+    },
+    resolve: {
+        alias: {
+            '@tonconnect/sdk': sdkEsm,
+        },
+    },
+});
diff --git a/apps/demo-wallet/e2e/mock-dapp/vite.svg b/apps/demo-wallet/e2e/mock-dapp/vite.svg
new file mode 100644
index 000000000..a396e268d
--- /dev/null
+++ b/apps/demo-wallet/e2e/mock-dapp/vite.svg
@@ -0,0 +1 @@
+Q
diff --git a/apps/demo-wallet/e2e/mocks/walletApi.ts b/apps/demo-wallet/e2e/mocks/walletApi.ts
new file mode 100644
index 000000000..6d90c6896
--- /dev/null
+++ b/apps/demo-wallet/e2e/mocks/walletApi.ts
@@ -0,0 +1,534 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { Page, Route } from '@playwright/test';
+
+/**
+ * Route mocks for the wallet's data backend, installed on the **demo-wallet** page.
+ *
+ * The demo-wallet's default API provider is Toncenter (see `ENV_TON_API_PROVIDER`
+ * in `src/core/lib/env.ts` — only `VITE_TON_API_PROVIDER=tonapi` switches it to
+ * TonAPI, which CI does not set). So the dashboard's balance / jettons / NFTs /
+ * history all originate from `*.toncenter.com/api/v3/*` calls made by WalletKit's
+ * `ApiClientToncenter`, plus a market-rates call to `api.dyor.io`.
+ *
+ * Mocking these lets the dashboard render deterministically WITHOUT a real funded
+ * wallet — the dashboard gates its total/asset rows on `balance !== undefined`,
+ * `lastJettonsUpdate > 0` and `ratesUpdated > 0` (see `use-asset-rows.ts` and
+ * `balance-total.tsx`), all three of which these mocks satisfy.
+ *
+ * Endpoints matched (by path regex, address-agnostic):
+ *   - GET  /api/v3/addressInformation   → native balance (account state)
+ *   - GET  /api/v3/jetton/wallets        → user jettons (USDT + one more)
+ *   - GET  /api/v3/jetton/masters        → default-token metadata (USDT/XAUT padding)
+ *   - GET  /api/v3/nft/items             → owned NFTs (with working preview images)
+ *   - GET  /api/v3/traces                → history events
+ *   - GET  api.dyor.io/v1/jettons        → market rates (GRAM + jettons), so fiat renders
+ *
+ * Mirrors the style of `apps/appkit-minter/e2e/mocks/gaslessRelayer.ts`.
+ */
+
+const ADDRESS_INFO_RE = /\/api\/v3\/addressInformation/;
+const JETTON_WALLETS_RE = /\/api\/v3\/jetton\/wallets/;
+const JETTON_MASTERS_RE = /\/api\/v3\/jetton\/masters/;
+const NFT_ITEMS_RE = /\/api\/v3\/nft\/items/;
+const TRACES_RE = /\/api\/v3\/traces/;
+const RATES_RE = /api\.dyor\.io\/v1\/jettons/;
+const EMULATE_RE = /\/api\/emulate\/v1\/emulateTrace/;
+const RUN_GET_METHOD_RE = /\/api\/v3\/runGetMethod/;
+
+/** Real mainnet USDT (Tether) master — Toncenter's `mapToResponseUserJettons` marks this verified. */
+export const USDT_MASTER_RAW = '0:B113A994B5024A16719F69139328EB759596C38A25F59028B146FECDC3621DFE';
+export const USDT_MASTER_FRIENDLY = 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs';
+/** Tether Gold (XAUT) master — the demo-wallet's second default-padding token. */
+export const XAUT_MASTER_RAW = '0:0E41DC1DC3C9067F9C7C38C49E72CA9097B543C7F7F5BA0E2D11C7B0EE04EC04';
+export const XAUT_MASTER_FRIENDLY = 'EQA1R_LuQCLHlMgOo1S4G7Y7W1cd0FrAkbA10Zq7rddKxi9k';
+/** All-zero master — the address DYOR returns TON/GRAM rates under. */
+const RAW_GRAM_ADDRESS = '0:0000000000000000000000000000000000000000000000000000000000000000';
+
+/**
+ * A 1×1 transparent PNG as a data: URI — used for jetton/NFT preview images so
+ * ``/`` load successfully under the strict offline test env
+ * (no external image hosts are reachable / mocked).
+ */
+const PLACEHOLDER_IMG =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMBAQAY3Z2VAAAAAElFTkSuQmCC';
+
+const json = (route: Route, status: number, body: unknown): Promise =>
+    route.fulfill({ status, contentType: 'application/json', body: JSON.stringify(body) });
+
+/** A jetton holding the mock wallet "owns" — raw master, raw amount, symbol/name/decimals. */
+export interface MockJetton {
+    /** Raw (`0:`-prefixed, upper-hex) jetton-master address. */
+    masterRaw: string;
+    /** Raw token amount (smallest units), as a decimal string. */
+    balance: string;
+    symbol: string;
+    name: string;
+    decimals: number;
+    /** Image URL stored in metadata; defaults to an inline placeholder so it always loads. */
+    image?: string;
+}
+
+/** A market rate keyed by raw jetton-master address (`RAW_GRAM_ADDRESS` ⇒ TON/GRAM). */
+export interface MockRate {
+    masterRaw: string;
+    /** Price in USD. */
+    priceUsd: number;
+}
+
+/** An NFT the mock wallet "owns" — raw item address, index, name + preview image. */
+export interface MockNft {
+    /** Raw (`0:`-prefixed) NFT-item address. */
+    itemRaw: string;
+    index: string;
+    name: string;
+    /** Preview image URL; defaults to an inline placeholder so it always loads. */
+    image?: string;
+}
+
+/**
+ * A single history event the mock wallet "sent" or "received".
+ *
+ * The demo-wallet's history is driven by WalletKit's `getEvents` → `/api/v3/traces`,
+ * which runs each trace through `toEvent` (packages/walletkit `AccountEvent.ts`). For a
+ * native GRAM transfer to surface as a "Sent/Received N GRAM" row, the trace's single
+ * transaction MUST have `tx.account === ` and a matching `out_msgs`
+ * (sent) / `in_msg` (received) carrying the `value`. The wallet address is generated
+ * fresh per test, so {@link tracesBody} reads it from the `account` query param that
+ * `getEvents` puts on the `/api/v3/traces` request and stamps it into the trace.
+ */
+export interface MockEvent {
+    /** Base64 trace id (becomes `eventId` via `Base64ToHex`, and the row subtitle). */
+    traceId: string;
+    /** `sent` → an outgoing `out_msgs` transfer; `received` → an incoming `in_msg` transfer. */
+    direction: 'sent' | 'received';
+    /** Transfer amount in raw nanotons (decimal string). */
+    amountNano: string;
+    /** Counterparty (recipient for `sent`, sender for `received`). Defaults to a constant peer. */
+    peerRaw?: string;
+    /** When `true`, the trace's transaction is marked aborted → the row shows a "failed" badge. */
+    failed?: boolean;
+    /** Unix seconds for the row date; defaults to a fixed timestamp so the row renders deterministically. */
+    timestamp?: number;
+}
+
+export interface MockWalletApiOpts {
+    /** Native TON/GRAM balance in raw nanotons (decimal string). Default `12_500_000_000` (12.5 GRAM). */
+    balanceNano?: string;
+    /** Jettons the wallet holds. Default: USDT + XAUT, both with a small balance. */
+    jettons?: MockJetton[];
+    /** NFTs the wallet holds. Default: 2 NFTs with placeholder previews. */
+    nfts?: MockNft[];
+    /** History events. Default: one sent + one received GRAM transfer, so ≥1 history row renders. */
+    events?: MockEvent[];
+    /** Market rates. Default: GRAM ≈ $5.20, USDT ≈ $1, XAUT ≈ $2400. */
+    rates?: MockRate[];
+}
+
+const DEFAULT_JETTONS: MockJetton[] = [
+    { masterRaw: USDT_MASTER_RAW, balance: '42500000', symbol: 'USDT', name: 'Tether USD', decimals: 6 },
+    { masterRaw: XAUT_MASTER_RAW, balance: '1500000', symbol: 'XAUT', name: 'Tether Gold', decimals: 6 },
+];
+
+const DEFAULT_NFTS: MockNft[] = [
+    { itemRaw: '0:1111111111111111111111111111111111111111111111111111111111111111', index: '1', name: 'Test NFT One' },
+    { itemRaw: '0:2222222222222222222222222222222222222222222222222222222222222222', index: '2', name: 'Test NFT Two' },
+];
+
+const DEFAULT_RATES: MockRate[] = [
+    { masterRaw: RAW_GRAM_ADDRESS, priceUsd: 5.2 },
+    { masterRaw: USDT_MASTER_RAW, priceUsd: 1.0 },
+    { masterRaw: XAUT_MASTER_RAW, priceUsd: 2400.0 },
+];
+
+/** Valid 32-byte base64 trace ids (Base64ToHex decodes these into the row eventId/subtitle). */
+const SENT_TRACE_ID = 'AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE=';
+const RECEIVED_TRACE_ID = 'AgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI=';
+
+/** Default history: one outgoing 5 GRAM transfer + one incoming 2.5 GRAM transfer. */
+const DEFAULT_EVENTS: MockEvent[] = [
+    { traceId: SENT_TRACE_ID, direction: 'sent', amountNano: '5000000000', timestamp: 1_700_000_100 },
+    { traceId: RECEIVED_TRACE_ID, direction: 'received', amountNano: '2500000000', timestamp: 1_700_000_000 },
+];
+
+/** Build the Toncenter `/api/v3/addressInformation` body for an active account. */
+function addressInformationBody(balanceNano: string): unknown {
+    return {
+        balance: balanceNano,
+        status: 'active',
+        // Toncenter's getAccountState iterates this as an array of {id, amount} — must NOT be an object.
+        extra_currencies: [],
+        code: null,
+        data: null,
+        // The all-zero hash sentinel — Toncenter's parseInternalTransactionId returns null for it
+        // (a `null` here would make Base64ToHex throw "Invalid hash: data is required").
+        last_transaction_hash: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=',
+        last_transaction_lt: '0',
+        frozen_hash: null,
+    };
+}
+
+/** Build the Toncenter `/api/v3/jetton/wallets` body (wallets + metadata) for the held jettons. */
+function jettonWalletsBody(jettons: MockJetton[]): unknown {
+    const jetton_wallets = jettons.map((j, i) => ({
+        // A synthetic but unique jetton-wallet address per holding.
+        address: `0:${(i + 3).toString().padStart(64, '0')}`,
+        balance: j.balance,
+        owner: '0:0000000000000000000000000000000000000000000000000000000000000001',
+        jetton: j.masterRaw,
+        last_transaction_lt: '0',
+        code_hash: '',
+        data_hash: '',
+    }));
+
+    const metadata: Record = {};
+    for (const j of jettons) {
+        metadata[j.masterRaw] = {
+            is_indexed: true,
+            token_info: [
+                {
+                    valid: true,
+                    type: 'jetton_masters',
+                    name: j.name,
+                    symbol: j.symbol,
+                    description: `${j.name} mock token`,
+                    image: j.image ?? PLACEHOLDER_IMG,
+                    extra: {
+                        decimals: String(j.decimals),
+                        image_data: undefined,
+                    },
+                },
+            ],
+        };
+    }
+
+    return { jetton_wallets, address_book: {}, metadata };
+}
+
+/** Build the Toncenter `/api/v3/jetton/masters` body for a default-token metadata lookup. */
+function jettonMastersBody(jettons: MockJetton[]): unknown {
+    const jetton_masters = jettons.map((j, i) => ({
+        address: j.masterRaw,
+        balance: '0',
+        owner: '0:0000000000000000000000000000000000000000000000000000000000000000',
+        jetton: j.masterRaw,
+        last_transaction_lt: String(i),
+        code_hash: '',
+        data_hash: '',
+    }));
+
+    const metadata: Record = {};
+    for (const j of jettons) {
+        metadata[j.masterRaw] = {
+            is_indexed: true,
+            token_info: [
+                {
+                    valid: true,
+                    type: 'jetton_masters',
+                    name: j.name,
+                    symbol: j.symbol,
+                    description: `${j.name} mock token`,
+                    image: j.image ?? PLACEHOLDER_IMG,
+                    extra: { decimals: String(j.decimals) },
+                },
+            ],
+        };
+    }
+
+    return { jetton_masters, address_book: {}, metadata };
+}
+
+/** Build the Toncenter `/api/v3/nft/items` body (items + per-item metadata with a preview image). */
+function nftItemsBody(nfts: MockNft[]): unknown {
+    const nft_items = nfts.map((n) => ({
+        address: n.itemRaw,
+        auction_contract_address: '',
+        collection: null,
+        collection_address: null,
+        content: { uri: '' },
+        index: n.index,
+        init: true,
+        is_sbt: false,
+        last_transaction_lt: '0',
+        on_sale: false,
+        owner_address: '0:0000000000000000000000000000000000000000000000000000000000000001',
+        real_owner: '0:0000000000000000000000000000000000000000000000000000000000000001',
+        sale_contract_address: '',
+    }));
+
+    const metadata: Record = {};
+    for (const n of nfts) {
+        metadata[n.itemRaw] = {
+            is_indexed: true,
+            token_info: [
+                {
+                    valid: true,
+                    type: 'nft_items',
+                    name: n.name,
+                    description: `${n.name} mock NFT`,
+                    image: n.image ?? PLACEHOLDER_IMG,
+                    extra: {
+                        _image_small: n.image ?? PLACEHOLDER_IMG,
+                        _image_medium: n.image ?? PLACEHOLDER_IMG,
+                        _image_big: n.image ?? PLACEHOLDER_IMG,
+                    },
+                },
+            ],
+        };
+    }
+
+    return { nft_items, address_book: {}, metadata };
+}
+
+/** A constant counterparty address used when a `MockEvent` doesn't name its own peer. */
+const PEER_RAW = '0:00000000000000000000000000000000000000000000000000000000000000AA';
+
+/**
+ * Build ONE Toncenter transaction shaped so WalletKit's `toEvent` emits a single
+ * native-GRAM transfer action for `accountRaw` (the wallet's own address). Mirrors the
+ * minimal-but-valid transaction used by WalletKit's own `makeTx` test fixture
+ * (`packages/walletkit/.../testFixtures.ts`): the `description.{aborted,compute_ph.success,
+ * action.success}` triple is what `computeStatus` reads to mark success/failure.
+ */
+function transferTransaction(accountRaw: string, e: MockEvent): unknown {
+    const failed = e.failed ?? false;
+    const peer = e.peerRaw ?? PEER_RAW;
+    const now = e.timestamp ?? 1_700_000_000;
+    const transferMsg = {
+        hash: `${e.traceId}-msg`,
+        hash_norm: `${e.traceId}-msg`,
+        source: e.direction === 'sent' ? accountRaw : peer,
+        destination: e.direction === 'sent' ? peer : accountRaw,
+        value: e.amountNano,
+        value_extra_currencies: {},
+        fwd_fee: '0',
+        ihr_fee: '0',
+        created_lt: '0',
+        created_at: String(now),
+        opcode: null,
+        ihr_disabled: null,
+        bounce: false,
+        bounced: false,
+        import_fee: null,
+        message_content: { hash: 'h', body: '', decoded: null },
+        init_state: null,
+    };
+    return {
+        account: accountRaw,
+        hash: e.traceId,
+        lt: '0',
+        now,
+        mc_block_seqno: 0,
+        trace_external_hash: 'ext',
+        prev_trans_hash: null,
+        prev_trans_lt: null,
+        orig_status: 'active',
+        end_status: 'active',
+        total_fees: '0',
+        total_fees_extra_currencies: {},
+        block_ref: { workchain: 0, shard: '0', seqno: 0 },
+        // `sent` carries the transfer on out_msgs; `received` on in_msg (credit_ph marks it succeeded).
+        in_msg:
+            e.direction === 'received'
+                ? transferMsg
+                : { ...transferMsg, value: null, source: peer, destination: accountRaw },
+        out_msgs: e.direction === 'sent' ? [transferMsg] : [],
+        account_state_before: {
+            hash: 'h',
+            balance: '0',
+            extra_currencies: null,
+            account_status: 'active',
+            frozen_hash: null,
+            data_hash: null,
+            code_hash: null,
+        },
+        account_state_after: {
+            hash: 'h',
+            balance: '0',
+            extra_currencies: null,
+            account_status: 'active',
+            frozen_hash: null,
+            data_hash: null,
+            code_hash: null,
+        },
+        emulated: false,
+        description: {
+            type: 'ord',
+            aborted: failed,
+            destroyed: false,
+            credit_first: false,
+            is_tock: false,
+            installed: false,
+            storage_ph: { storage_fees_collected: '0', status_change: 'unchanged' },
+            credit_ph: e.direction === 'received' ? { credit: e.amountNano } : undefined,
+            compute_ph: {
+                skipped: false,
+                success: !failed,
+                msg_state_used: false,
+                account_activated: false,
+                gas_fees: '0',
+                gas_used: '0',
+                gas_limit: '0',
+                mode: 0,
+                exit_code: failed ? 1 : 0,
+                vm_steps: 0,
+                vm_init_state_hash: '',
+                vm_final_state_hash: '',
+            },
+            action: {
+                success: !failed,
+                valid: true,
+                no_funds: false,
+                status_change: 'unchanged',
+                result_code: 0,
+                tot_actions: failed ? 0 : 1,
+                spec_actions: 0,
+                skipped_actions: 0,
+                msgs_created: failed ? 0 : 1,
+                action_list_hash: '',
+                tot_msg_size: { cells: '0', bits: '0' },
+            },
+        },
+    };
+}
+
+/**
+ * Build the Toncenter `/api/v3/traces` body for the history section.
+ *
+ * `accountRaw` is the wallet's own address (read from the request's `account` query
+ * param) — `toEvent` only emits transfer actions for transactions whose `account`
+ * matches the queried account, so the trace's tx must be stamped with it.
+ */
+function tracesBody(events: MockEvent[], accountRaw: string | null): unknown {
+    if (!accountRaw) {
+        // No account on the request (shouldn't happen via getEvents) — empty, no rows.
+        return { traces: [], address_book: {}, metadata: {} };
+    }
+    return {
+        traces: events.map((e) => ({
+            trace_id: e.traceId,
+            external_hash: 'ext',
+            mc_seqno_start: '0',
+            mc_seqno_end: '0',
+            start_lt: '0',
+            start_utime: e.timestamp ?? 1_700_000_000,
+            end_lt: '0',
+            end_utime: e.timestamp ?? 1_700_000_000,
+            trace_info: {
+                classification_state: 'ok',
+                messages: 1,
+                pending_messages: 0,
+                trace_state: 'complete',
+                transactions: 1,
+            },
+            is_incomplete: false,
+            trace: { tx_hash: e.traceId, in_msg_hash: null, children: [] },
+            transactions_order: [e.traceId],
+            transactions: { [e.traceId]: transferTransaction(accountRaw, e) },
+            actions: [],
+            warning: '',
+        })),
+        address_book: {},
+        metadata: {},
+    };
+}
+
+/** Build the DYOR `/v1/jettons` body — `priceUsd` as a `{value, decimals}` money object. */
+function ratesBody(rates: MockRate[]): unknown {
+    return {
+        jettons: rates.map((r) => ({
+            metadata: { address: r.masterRaw },
+            // 9-decimal money object: priceUsd = value / 10^decimals.
+            priceUsd: { value: String(Math.round(r.priceUsd * 1e9)), decimals: 9 },
+        })),
+    };
+}
+
+/**
+ * Install all wallet-API route mocks on `page`. MUST be called BEFORE the page
+ * navigates to (or reloads into) the dashboard, so the route handlers are in place
+ * before WalletKit fires its first balance/jettons/rates fetch.
+ */
+export async function mockWalletApi(page: Page, opts: MockWalletApiOpts = {}): Promise {
+    const balanceNano = opts.balanceNano ?? '12500000000';
+    const jettons = opts.jettons ?? DEFAULT_JETTONS;
+    const nfts = opts.nfts ?? DEFAULT_NFTS;
+    const events = opts.events ?? DEFAULT_EVENTS;
+    const rates = opts.rates ?? DEFAULT_RATES;
+
+    await page.route(ADDRESS_INFO_RE, (route) => json(route, 200, addressInformationBody(balanceNano)));
+    await page.route(JETTON_WALLETS_RE, (route) => json(route, 200, jettonWalletsBody(jettons)));
+    await page.route(JETTON_MASTERS_RE, (route) => json(route, 200, jettonMastersBody(jettons)));
+    await page.route(NFT_ITEMS_RE, (route) => json(route, 200, nftItemsBody(nfts)));
+    await page.route(TRACES_RE, (route) => {
+        // `getEvents` queries /api/v3/traces?account=&limit=&offset= — the trace's tx
+        // must be stamped with this account or `toEvent` emits no transfer actions (no rows).
+        const account = new URL(route.request().url()).searchParams.get('account');
+        return json(route, 200, tracesBody(events, account));
+    });
+    await page.route(RATES_RE, (route) => json(route, 200, ratesBody(rates)));
+}
+
+/** Install only the rates mock — handy when a test cares about fiat but not assets. */
+export async function mockRates(page: Page, rates: MockRate[] = DEFAULT_RATES): Promise {
+    await page.route(RATES_RE, (route) => json(route, 200, ratesBody(rates)));
+}
+
+/**
+ * A minimal, well-formed Toncenter `emulateTrace` success body.
+ *
+ * The redesigned transaction-request modal emulates the pending transfer to build its
+ * preview (WalletKit's `getTransactionPreview` → `fetchEmulation`, double-wrapped in
+ * `CallForSuccess(20×100ms)`). Against the real toncenter the synthetic test transfer 500s,
+ * so those retries storm for ~40s+ and the modal never settles → approve never completes.
+ * This body resolves the emulation on the FIRST call. `mapToncenterEmulationResponse` only
+ * dereferences `trace.tx_hash` + `rand_seed` (via `Base64ToHex`, so both must be valid
+ * base64); `transactions`/`address_book`/`code_cells`/`data_cells` default to `{}`, so no
+ * per-transaction fields are required — the preview renders with no decoded transfers, which
+ * is fine for an e2e that only asserts the modal shows and approval returns a signed BoC.
+ */
+const EMULATION_HASH_B64 = 'AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE=';
+
+function emulateTraceBody(): unknown {
+    return {
+        mc_block_seqno: 0,
+        trace: { tx_hash: EMULATION_HASH_B64, in_msg_hash: null, children: [] },
+        transactions: {},
+        actions: [],
+        rand_seed: EMULATION_HASH_B64,
+        is_incomplete: false,
+        code_cells: {},
+        data_cells: {},
+        address_book: {},
+    };
+}
+
+/**
+ * Install the emulation mock on `page` so the transaction-request preview resolves instantly
+ * instead of storming the real toncenter `emulateTrace` (which 500s on a synthetic transfer).
+ */
+export async function mockEmulation(page: Page): Promise {
+    await page.route(EMULATE_RE, (route) => json(route, 200, emulateTraceBody()));
+}
+
+/**
+ * Mock the wallet-contract `seqno` get-method (`/api/v3/runGetMethod`) so signing is
+ * deterministic and offline. Returns `exit_code: 0` with a single numeric stack entry
+ * (`seqno = 0`) — the value the wallet uses to build the transfer body. Without it, signing
+ * falls back to the real toncenter (5×1s `getSeqno` retries against an undeployed test wallet).
+ */
+export async function mockRunGetMethod(page: Page, seqno = 0): Promise {
+    await page.route(RUN_GET_METHOD_RE, (route) =>
+        json(route, 200, {
+            gas_used: 0,
+            exit_code: 0,
+            stack: [{ type: 'num', value: `0x${seqno.toString(16)}` }],
+        }),
+    );
+}
diff --git a/apps/demo-wallet/e2e/pages/AssetsPage.ts b/apps/demo-wallet/e2e/pages/AssetsPage.ts
new file mode 100644
index 000000000..997986675
--- /dev/null
+++ b/apps/demo-wallet/e2e/pages/AssetsPage.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { Page } from '@playwright/test';
+
+/**
+ * The `/wallet/assets` screen — the full token list (GRAM row first, then jettons
+ * sorted by fiat desc). Rows render without data-testids (see `asset-row.tsx`), so
+ * locators key on the visible name / symbol / role.
+ */
+export class AssetsPage {
+    constructor(private readonly page: Page) {}
+
+    /** The "Assets" screen header (ScreenHeader title). */
+    get heading() {
+        return this.page.getByRole('heading', { name: 'Assets' });
+    }
+
+    /** The native GRAM row's name cell ("Gram"). */
+    get gramName() {
+        return this.page.getByText('Gram', { exact: true }).first();
+    }
+
+    /** The GRAM row icon (`/gram.svg`). */
+    get gramIcon() {
+        return this.page.locator('img[src="/gram.svg"]').first();
+    }
+
+    /** A row located by its asset name (e.g. "Tether USD"). */
+    nameCell(name: string) {
+        return this.page.getByText(name, { exact: true }).first();
+    }
+
+    /** A FallbackImage gradient circle's two-letter text (shown when every icon URL fails). */
+    fallbackText(text: string) {
+        return this.page.getByText(text, { exact: true });
+    }
+
+    async waitForPage() {
+        await this.heading.waitFor({ state: 'visible' });
+    }
+}
diff --git a/apps/demo-wallet/e2e/pages/HistoryPage.ts b/apps/demo-wallet/e2e/pages/HistoryPage.ts
new file mode 100644
index 000000000..eb8186934
--- /dev/null
+++ b/apps/demo-wallet/e2e/pages/HistoryPage.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { Page } from '@playwright/test';
+
+/**
+ * The `/wallet/history` screen — all transactions, with a "Load more" pager
+ * (PAGE_SIZE 25). Rows render without data-testids (see `transaction-row.tsx`);
+ * a confirmed row is an `` to the explorer, a pending row is a
+ * plain `
`. Locators key on visible title / role.
+ */
+export class HistoryPage {
+    constructor(private readonly page: Page) {}
+
+    /** The "History" screen header (ScreenHeader title). */
+    get heading() {
+        return this.page.getByRole('heading', { name: 'History' });
+    }
+
+    /** The empty-state copy shown when there are no transactions. */
+    get emptyState() {
+        return this.page.getByText('No transactions yet', { exact: true });
+    }
+
+    /** The "Load more" pager button (only present when more pages remain). */
+    get loadMore() {
+        return this.page.getByRole('button', { name: 'Load more' });
+    }
+
+    /** A row located by its title text (e.g. "Sent 5 GRAM"). */
+    rowByTitle(title: string) {
+        return this.page.getByText(title, { exact: true }).first();
+    }
+
+    /** The explorer link `` wrapping a row whose title matches (confirmed rows only). */
+    explorerLinkByTitle(title: string) {
+        return this.page.locator('a[target="_blank"]', { hasText: title });
+    }
+
+    async waitForPage() {
+        await this.heading.waitFor({ state: 'visible' });
+    }
+}
diff --git a/apps/demo-wallet/e2e/pages/NftPage.ts b/apps/demo-wallet/e2e/pages/NftPage.ts
new file mode 100644
index 000000000..d3170a978
--- /dev/null
+++ b/apps/demo-wallet/e2e/pages/NftPage.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { Page } from '@playwright/test';
+
+/**
+ * The `/wallet/nft` screen — a 2-column grid of held NFTs, or a "No NFTs yet"
+ * empty state. Tiles render without data-testids (see `nft-tile.tsx`).
+ */
+export class NftPage {
+    constructor(private readonly page: Page) {}
+
+    /** The "NFTs" screen header (ScreenHeader title). */
+    get heading() {
+        return this.page.getByRole('heading', { name: 'NFTs' });
+    }
+
+    /** The empty-state copy shown when the wallet holds no NFTs. */
+    get emptyState() {
+        return this.page.getByText('No NFTs yet', { exact: true });
+    }
+
+    /** A tile located by its NFT name. */
+    tile(name: string) {
+        return this.page.getByText(name, { exact: true }).first();
+    }
+
+    async waitForPage() {
+        await this.heading.waitFor({ state: 'visible' });
+    }
+}
diff --git a/apps/demo-wallet/e2e/pages/UnlockWalletPage.ts b/apps/demo-wallet/e2e/pages/UnlockWalletPage.ts
new file mode 100644
index 000000000..187591138
--- /dev/null
+++ b/apps/demo-wallet/e2e/pages/UnlockWalletPage.ts
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { Page } from '@playwright/test';
+
+/**
+ * The `/unlock` screen — shown when a password is set and a wallet exists but the
+ * session is locked (e.g. after a reload, since `isUnlocked` is not persisted unless
+ * `persistPassword` is on). See `unlock-screen.tsx` for the exact strings/testids.
+ */
+export class UnlockWalletPage {
+    constructor(private readonly page: Page) {}
+
+    get passwordInput() {
+        return this.page.getByTestId('password');
+    }
+
+    /** The primary "Unlock" button (shares the `password-submit` testid used across auth screens). */
+    get unlockButton() {
+        return this.page.getByTestId('password-submit');
+    }
+
+    /** The "Incorrect password" error shown after a failed unlock attempt. */
+    get errorMessage() {
+        return this.page.getByText('Incorrect password');
+    }
+
+    /** The "Reset Wallet" ghost button (no testid — located by accessible name). */
+    get resetButton() {
+        return this.page.getByRole('button', { name: 'Reset Wallet' });
+    }
+
+    /** The destructive "Reset" confirm button inside the reset-confirmation modal. */
+    get confirmResetButton() {
+        return this.page.getByRole('button', { name: 'Reset', exact: true });
+    }
+
+    async waitForPage() {
+        await this.passwordInput.waitFor({ state: 'visible' });
+    }
+
+    async fillPassword(password: string) {
+        await this.passwordInput.fill(password);
+    }
+
+    /** Fill the password and click Unlock. */
+    async unlock(password: string) {
+        await this.fillPassword(password);
+        await this.unlockButton.click();
+    }
+
+    /** Open the reset-confirmation modal and confirm — resets the wallet and navigates to /welcome. */
+    async resetWallet() {
+        await this.resetButton.click();
+        await this.confirmResetButton.waitFor({ state: 'visible' });
+        await this.confirmResetButton.click();
+    }
+}
diff --git a/apps/demo-wallet/e2e/pages/index.ts b/apps/demo-wallet/e2e/pages/index.ts
index 591f702ec..2a76c369f 100644
--- a/apps/demo-wallet/e2e/pages/index.ts
+++ b/apps/demo-wallet/e2e/pages/index.ts
@@ -6,5 +6,9 @@
  *
  */
 
+export { AssetsPage } from './AssetsPage';
+export { HistoryPage } from './HistoryPage';
+export { NftPage } from './NftPage';
 export { SetupPasswordPage } from './SetupPasswordPage';
 export { SetupWalletPage } from './SetupWalletPage';
+export { UnlockWalletPage } from './UnlockWalletPage';
diff --git a/apps/demo-wallet/e2e/qa/WalletApp.ts b/apps/demo-wallet/e2e/qa/WalletApp.ts
index 472644d18..f7dacce31 100644
--- a/apps/demo-wallet/e2e/qa/WalletApp.ts
+++ b/apps/demo-wallet/e2e/qa/WalletApp.ts
@@ -42,13 +42,41 @@ export abstract class WalletApp {
     async open(): Promise {
         if (!this.current) {
             this.current = await this.context.newPage();
+            // `domcontentloaded` (not `load`): the app opens long-lived connections (HMR / the
+            // TON Connect bridge SSE) that can keep the `load` event from settling under two-tab
+            // server contention. The React mount is gated separately by `recoverIfBlank`.
             await this.current.goto(this.onboardingPage, {
-                waitUntil: 'load',
+                waitUntil: 'domcontentloaded',
             });
+            await this.recoverIfBlank(this.current);
         }
         return this.current;
     }
 
+    /**
+     * Reload once if the React app didn't mount. The Vite dev server occasionally serves an
+     * empty shell on the very first navigation of a fresh context (its dependency optimizer is
+     * still pre-bundling, especially when a sibling dev server starts at the same time), leaving
+     * `#root` childless. A single reload deterministically recovers it. Best-effort: never throws,
+     * so a non-dev (preview/extension) build that mounts immediately is unaffected.
+     */
+    private async recoverIfBlank(page: Page): Promise {
+        const hasContent = async (): Promise => {
+            try {
+                return await page.locator('#root').evaluate((el) => el.childElementCount > 0);
+            } catch {
+                return false;
+            }
+        };
+        try {
+            await page.locator('#root > *').first().waitFor({ state: 'attached', timeout: 4000 });
+        } catch {
+            if (!(await hasContent())) {
+                await page.reload({ waitUntil: 'domcontentloaded' });
+            }
+        }
+    }
+
     async close(): Promise {
         if (this.current) {
             await this.current.close();
diff --git a/apps/demo-wallet/e2e/ton-connect/MockDapp.ts b/apps/demo-wallet/e2e/ton-connect/MockDapp.ts
new file mode 100644
index 000000000..66f14a9b2
--- /dev/null
+++ b/apps/demo-wallet/e2e/ton-connect/MockDapp.ts
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { Page } from '@playwright/test';
+
+/**
+ * Page-object over the QA Mock dApp (`e2e/mock-dapp/`, served on :5175) — the raw
+ * `@tonconnect/sdk` driver tab for the two-tab demo-wallet e2e suite.
+ *
+ * Unlike {@link TonConnectWidget} (which scrapes the appkit connect modal + clipboard),
+ * the mock-dApp surfaces everything we need into stable-testid DOM elements, so this
+ * driver just clicks a button and reads text: no modal, no clipboard. Each request kind
+ * writes its outcome into `#dapp-result` (success) or `#dapp-error` (rejection/failure),
+ * which {@link result} / {@link error} poll.
+ */
+export class MockDapp {
+    constructor(readonly page: Page) {}
+
+    /** Click "Connect" and return the universal link the connector generated (`tc://…`). */
+    async connectUrl(): Promise {
+        await this.page.getByTestId('dapp-connect').click();
+        const url = this.page.getByTestId('dapp-connect-url');
+        await url.waitFor({ state: 'visible' });
+        // The link is written synchronously on click; wait until it is non-empty.
+        await this.page.waitForFunction(() => {
+            const el = document.getElementById('dapp-connect-url');
+            return !!el && el.textContent !== null && el.textContent.length > 0;
+        });
+        return (await url.textContent()) ?? '';
+    }
+
+    /** Resolves once the connector reports a connected wallet (`#dapp-connected` === 'true'). */
+    async isConnected(): Promise {
+        await this.page.waitForFunction(() => document.getElementById('dapp-connected')?.textContent === 'true');
+        return true;
+    }
+
+    /** Issue a sendTransaction request (tiny amount; the wallet never broadcasts). */
+    async sendTransaction(): Promise {
+        await this.page.getByTestId('dapp-send-tx').click();
+    }
+
+    /** Issue a signData (text) request. */
+    async signData(): Promise {
+        await this.page.getByTestId('dapp-sign-data').click();
+    }
+
+    /** Issue a signMessage request (the wallet signs the internal message without broadcasting). */
+    async signMessage(): Promise {
+        await this.page.getByTestId('dapp-sign-message').click();
+    }
+
+    /** Wait for and return the last success result text (`#dapp-result`, JSON or 'ok'). */
+    async result(): Promise {
+        await this.page.waitForFunction(() => {
+            const el = document.getElementById('dapp-result');
+            return !!el && el.textContent !== null && el.textContent.length > 0;
+        });
+        return (await this.page.getByTestId('dapp-result').textContent()) ?? '';
+    }
+
+    /** Wait for and return the last error text (`#dapp-error`). */
+    async error(): Promise {
+        await this.page.waitForFunction(() => {
+            const el = document.getElementById('dapp-error');
+            return !!el && el.textContent !== null && el.textContent.length > 0;
+        });
+        return (await this.page.getByTestId('dapp-error').textContent()) ?? '';
+    }
+}
diff --git a/apps/demo-wallet/e2e/ton-connect/connect.spec.ts b/apps/demo-wallet/e2e/ton-connect/connect.spec.ts
new file mode 100644
index 000000000..e6b47a959
--- /dev/null
+++ b/apps/demo-wallet/e2e/ton-connect/connect.spec.ts
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+
+import { twoTabFixture } from './twoTabFixture';
+
+/**
+ * Two-tab TON Connect — connect modal.
+ *
+ * Tab 1 = the in-kit appkit-minter dApp (:5174). Tab 2 = the redesigned demo-wallet (:5173).
+ * `widget.connectUrl()` opens the dApp's connect modal and copies the universal link off the
+ * clipboard; `wallet.connectBy(url, false, confirm)` pastes it into the wallet's "Connect to
+ * dApp" flow and drives the per-type `connect-request` modal (`connect-approve` /
+ * `connect-reject`). Hold-to-sign is turned OFF during import (see DemoWallet.importWallet),
+ * so the approve testids are present. The connect handshake itself rides the real bridge.
+ *
+ * FOLLOW-UP (sendTransaction / signMessage / signData), parked with a verified reason:
+ *  - sendTransaction → `transaction-request`: the minter's regular TON/jetton transfer is gated
+ *    on real wallet funds (it shows "Not enough TON" and never sends the request over the bridge
+ *    for an unfunded WALLET_MNEMONIC) — verified by probe: the wallet stays on its dashboard.
+ *  - signMessage → `sign-message-request`: the gasless path needs the connected wallet to HOLD
+ *    the fee jetton (USDT) — the minter's Jettons list has no `token-row-` for a wallet
+ *    that doesn't hold it, so `openTransfer(USDT)` can't be reached. The relayer mocks
+ *    (`mockGaslessConfig`/`mockGaslessEstimateOk`) cover the relayer but not the wallet's holdings.
+ *    → needs a funded test wallet (TON for sendTransaction, USDT for gasless) or a wallet-API mock
+ *      on the connected wallet's data backend.
+ *  - signData: the minter can't issue a signData request — needs a small local mock-dApp page.
+ * `DemoWallet` already has `accept()`/`signMessage()`/`signData()` ready to drive those modals.
+ */
+const test = twoTabFixture();
+
+test.describe('TON Connect — connect (two-tab, minter dApp)', () => {
+    test('Approving the connect request connects the wallet to the dApp', async ({ wallet, widget }) => {
+        const url = await widget.connectUrl();
+        await wallet.connectBy(url, false, true);
+
+        // After a successful connect the dApp's widget shows its connected (disconnect) control.
+        await expect(widget.connectButton).toBeVisible();
+    });
+
+    test('Rejecting the connect request leaves the dApp disconnected', async ({ wallet, widget }) => {
+        const url = await widget.connectUrl();
+        await wallet.connectBy(url, false, false);
+
+        // The dApp falls back to its pre-connect "connect" affordance.
+        await expect(widget.connectButton).toBeVisible();
+    });
+});
diff --git a/apps/demo-wallet/e2e/ton-connect/mockDappFixture.ts b/apps/demo-wallet/e2e/ton-connect/mockDappFixture.ts
new file mode 100644
index 000000000..8699bbad6
--- /dev/null
+++ b/apps/demo-wallet/e2e/ton-connect/mockDappFixture.ts
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { config } from 'dotenv';
+import type { BrowserContext, Page } from '@playwright/test';
+import { test as base } from '@playwright/test';
+import { historyId } from 'allure-js-commons';
+
+import { launchPersistentContext } from '../qa';
+import { DemoWallet } from '../demo-wallet';
+import { mockWalletApi, mockEmulation, mockRunGetMethod } from '../mocks/walletApi';
+import type { MockWalletApiOpts } from '../mocks/walletApi';
+import { MockDapp } from './MockDapp';
+
+config({ quiet: true });
+
+/**
+ * Fully mock-first two-tab TON Connect fixture for the redesigned demo-wallet.
+ *
+ * Mirrors {@link twoTabFixture} but swaps the appkit-minter dApp for a SELF-CONTAINED
+ * mock-dApp we control (`e2e/mock-dapp/`, :5175). The mock-dApp drives all four request
+ * kinds (connect / sendTransaction / signData / signMessage) over the real TON Connect
+ * bridge and surfaces results into DOM testids — no modal scraping, no clipboard.
+ *
+ *  - `context`  — one persistent BrowserContext shared by both tabs.
+ *  - `app`      — the mock-dApp Page (tab 1, :5175).
+ *  - `dapp`     — the {@link MockDapp} driver over `app`.
+ *  - `wallet`   — the {@link DemoWallet} driver (tab 2, :5173). Imports `WALLET_MNEMONIC`
+ *                 and turns hold-to-sign OFF (via importWallet), so the per-type approve
+ *                 testids are present.
+ *
+ * Balance mocking (transaction spec): the wallet's `onTransactionRequest` silently rejects
+ * when balance < amount, so the transaction modal would never render for an unfunded seed.
+ * A spec opts into a generous mocked balance by setting `cfg.mockWalletApi` — the mock is
+ * installed at the **context** level (not page level) so it survives DemoWallet's open/close
+ * page churn and is in place before WalletKit's first balance fetch. On-chain broadcast is
+ * separately suppressed by `VITE_DISABLE_NETWORK_SEND=true` (set in the wallet dev server).
+ */
+export interface MockDappFixture {
+    context: BrowserContext;
+    app: Page;
+    dapp: MockDapp;
+    wallet: DemoWallet;
+}
+
+export interface MockDappConfig {
+    appUrl?: string;
+    walletSource?: string;
+    mnemonic?: string;
+    /** When set, installs the wallet-API mock on the context before the wallet tab opens. */
+    mockWalletApi?: MockWalletApiOpts | boolean;
+}
+
+export function mockDappFixture(cfg: MockDappConfig = {}) {
+    const appUrl = cfg.appUrl ?? process.env.MOCK_DAPP_URL ?? 'http://127.0.0.1:5175/';
+    const walletSource = cfg.walletSource ?? process.env.E2E_WALLET_SOURCE ?? 'http://localhost:5173/';
+    const mnemonic = cfg.mnemonic ?? process.env.WALLET_MNEMONIC ?? '';
+
+    const extended = base.extend({
+        context: async ({ context: _ }, use) => {
+            const context = await launchPersistentContext('');
+            // Install the wallet-API mock at context level (applies to every page the
+            // wallet opens later) BEFORE any wallet page navigates, so the dashboard
+            // renders deterministically and the tx balance-guard sees the mocked balance.
+            if (cfg.mockWalletApi) {
+                const opts = typeof cfg.mockWalletApi === 'object' ? cfg.mockWalletApi : {};
+                // BrowserContext.route shares Page.route's signature; the mock helpers only use .route.
+                const ctxAsPage = context as unknown as Page;
+                await mockWalletApi(ctxAsPage, opts);
+                // The transaction-request preview emulates the transfer and signing fetches the
+                // wallet seqno; both would otherwise storm/stall the real toncenter (emulate 500s,
+                // seqno retries). Mock them so the modal settles and approval signs deterministically.
+                await mockEmulation(ctxAsPage);
+                await mockRunGetMethod(ctxAsPage);
+            }
+            await use(context);
+            await context.close();
+        },
+        app: async ({ context }, use) => {
+            const app = await context.newPage();
+            await app.goto(appUrl, { waitUntil: 'load' });
+            await use(app);
+        },
+        dapp: async ({ app }, use) => {
+            await use(new MockDapp(app));
+        },
+        // Depends on `app` so the dApp tab is opened first; then import the wallet on its own tab.
+        wallet: async ({ context, app: _app }, use) => {
+            const wallet = new DemoWallet(context, walletSource);
+            await wallet.importWallet(mnemonic);
+            await use(wallet);
+        },
+    });
+
+    // Pin a stable Allure historyId per test (same as UITestFixture) so TestOps linking is
+    // zero-manual and survives refactors. Key = the describe chain + test title
+    // (testInfo.titlePath without the leading file-path element).
+    // eslint-disable-next-line no-empty-pattern
+    extended.beforeEach(async ({}, testInfo) => {
+        const semanticKey = testInfo.titlePath.slice(1).join(' > ');
+        await historyId(semanticKey);
+    });
+
+    return extended;
+}
diff --git a/apps/demo-wallet/e2e/ton-connect/twoTabFixture.ts b/apps/demo-wallet/e2e/ton-connect/twoTabFixture.ts
new file mode 100644
index 000000000..c69b8d973
--- /dev/null
+++ b/apps/demo-wallet/e2e/ton-connect/twoTabFixture.ts
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { config } from 'dotenv';
+import type { BrowserContext, Page } from '@playwright/test';
+import { test as base } from '@playwright/test';
+
+import { launchPersistentContext, TonConnectWidget } from '../qa';
+import { DemoWallet } from '../demo-wallet';
+
+config({ quiet: true });
+
+/**
+ * Self-contained two-tab TON Connect fixture for the redesigned demo-wallet.
+ *
+ * Why its own fixture (not the shared `demoWalletFixture`): this one pairs the **in-kit
+ * appkit-minter** dApp (tab 1, :5174) — a local, CI-friendly TON Connect dApp — with the
+ * demo-wallet (tab 2, :5173), and instantiates the two pages in a deterministic order
+ * (dApp first, then import the wallet) so neither setup races the other.
+ *
+ *  - `context`  — one persistent BrowserContext shared by both tabs (matches the minter harness).
+ *  - `app`      — the minter dApp Page (tab 1).
+ *  - `widget`   — the dApp's TON Connect widget driver (copies the universal link from its modal).
+ *  - `wallet`   — the demo-wallet driver (tab 2). Imports `WALLET_MNEMONIC` and turns hold-to-sign
+ *                 OFF, so the per-type approve testids are present.
+ *
+ * The connect handshake rides the real TON Connect bridge (as the existing demo-wallet
+ * connect.spec and the minter gasless e2e both do); only the wallet's data API would be mocked.
+ */
+export interface TwoTabFixture {
+    context: BrowserContext;
+    app: Page;
+    widget: TonConnectWidget;
+    wallet: DemoWallet;
+}
+
+export interface TwoTabConfig {
+    appUrl?: string;
+    walletSource?: string;
+    mnemonic?: string;
+}
+
+export function twoTabFixture(cfg: TwoTabConfig = {}) {
+    const appUrl = cfg.appUrl ?? process.env.MINTER_URL ?? 'http://localhost:5174/';
+    const walletSource = cfg.walletSource ?? process.env.E2E_WALLET_SOURCE ?? 'http://localhost:5173/';
+    const mnemonic = cfg.mnemonic ?? process.env.WALLET_MNEMONIC ?? '';
+
+    return base.extend({
+        // eslint-disable-next-line no-empty-pattern
+        context: async ({}, use) => {
+            const context = await launchPersistentContext('');
+            await use(context);
+            await context.close();
+        },
+        app: async ({ context }, use) => {
+            const app = await context.newPage();
+            await app.goto(appUrl, { waitUntil: 'load' });
+            await use(app);
+        },
+        widget: async ({ app }, use) => {
+            await use(new TonConnectWidget(app));
+        },
+        // Depends on `app` so the dApp tab is opened first; then import the wallet on its own tab.
+        wallet: async ({ context, app: _app }, use) => {
+            const wallet = new DemoWallet(context, walletSource);
+            await wallet.importWallet(mnemonic);
+            await use(wallet);
+        },
+    });
+}
diff --git a/apps/demo-wallet/e2e/ui-tests/UITestFixture.ts b/apps/demo-wallet/e2e/ui-tests/UITestFixture.ts
index fb3f53609..76b14e0c3 100644
--- a/apps/demo-wallet/e2e/ui-tests/UITestFixture.ts
+++ b/apps/demo-wallet/e2e/ui-tests/UITestFixture.ts
@@ -11,6 +11,7 @@ import { fileURLToPath } from 'url';
 
 import type { BrowserContext, Page } from '@playwright/test';
 import { test } from '@playwright/test';
+import { historyId } from 'allure-js-commons';
 
 import { getExtensionId, launchPersistentContext, testWith } from '../qa';
 import { isExtensionWalletSource } from '../qa/WalletApp';
@@ -41,7 +42,7 @@ export function uiTestFixture(config: UITestConfig = {}, slowMo = 0) {
     const walletSource = config.walletSource ?? detectWalletSource();
     const isExtension = isExtensionWalletSource(walletSource);
 
-    return test.extend({
+    const extended = test.extend({
         webOnly: [
             // eslint-disable-next-line no-empty-pattern
             async ({}, use) => {
@@ -69,6 +70,20 @@ export function uiTestFixture(config: UITestConfig = {}, slowMo = 0) {
             await use(page);
         },
     });
+
+    // Pin a stable Allure historyId for every ui-test so TestOps linking is zero-manual
+    // and survives refactors. The key is the test's SEMANTIC identity — the describe
+    // chain plus the test title (testInfo.titlePath without the leading file-path element).
+    // This is independent of the spec file's path and of line:col, so editing a spec
+    // (line shifts) or moving/renaming the file no longer orphans the TestOps case, and
+    // new tests still auto-create a case on launch close. No manual @allureId pinning needed.
+    // eslint-disable-next-line no-empty-pattern
+    extended.beforeEach(async ({}, testInfo) => {
+        const semanticKey = testInfo.titlePath.slice(1).join(' > ');
+        await historyId(semanticKey);
+    });
+
+    return extended;
 }
 
 export function testWithUIFixture(config: UITestConfig = {}, slowMo = 0) {
diff --git a/apps/demo-wallet/e2e/ui-tests/assets.spec.ts b/apps/demo-wallet/e2e/ui-tests/assets.spec.ts
new file mode 100644
index 000000000..156f27bc8
--- /dev/null
+++ b/apps/demo-wallet/e2e/ui-tests/assets.spec.ts
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+
+import { testWithUIFixture } from './UITestFixture';
+import { createWalletOnDashboard } from './helpers';
+import { AssetsPage } from '../pages';
+import { mockWalletApi, USDT_MASTER_RAW, XAUT_MASTER_RAW } from '../mocks/walletApi';
+
+const test = testWithUIFixture();
+
+test.describe('Assets page (mocked wallet API)', () => {
+    test('Lists GRAM first, then jettons sorted by fiat desc', async ({ webOnly: _webOnly, page }) => {
+        // USDT @ $1 × 42.5 ≈ $42.50; XAUT @ $2400 × 1.5 ≈ $3600 — so by fiat desc the order is
+        // GRAM (native, always first) → XAUT → USDT. We assert all three render with their symbols.
+        await mockWalletApi(page);
+        await createWalletOnDashboard(page);
+
+        const assets = new AssetsPage(page);
+        await page.getByRole('button', { name: 'View all assets' }).click();
+        await assets.waitForPage();
+
+        await expect(assets.gramName).toBeVisible();
+        await expect(assets.gramIcon).toBeVisible();
+        await expect(assets.nameCell('Tether USD')).toBeVisible();
+        await expect(assets.nameCell('Tether Gold')).toBeVisible();
+
+        // Native GRAM row precedes both jettons; XAUT (higher fiat) precedes USDT.
+        const gramY = await assets.gramName.boundingBox();
+        const xautY = await assets.nameCell('Tether Gold').boundingBox();
+        const usdtY = await assets.nameCell('Tether USD').boundingBox();
+        expect(gramY && xautY && usdtY).toBeTruthy();
+        expect(gramY!.y).toBeLessThan(xautY!.y);
+        expect(xautY!.y).toBeLessThan(usdtY!.y);
+    });
+
+    test('Renders the fallback two-letter icon when every image URL fails', async ({ webOnly: _webOnly, page }) => {
+        // A jetton whose only icon candidate is an unreachable http URL (404/CSP under the offline
+        // test env) and has no inline base64 → FallbackImage shows the gradient with the symbol's
+        // first two letters ("BR" for "BRK"). No real image host is reachable in CI.
+        await mockWalletApi(page, {
+            jettons: [
+                {
+                    masterRaw: USDT_MASTER_RAW,
+                    balance: '1000000',
+                    symbol: 'BRK',
+                    name: 'Broken Icon Token',
+                    decimals: 6,
+                    image: 'https://invalid.example.test/missing.png',
+                },
+            ],
+        });
+        await createWalletOnDashboard(page);
+
+        const assets = new AssetsPage(page);
+        await page.getByRole('button', { name: 'View all assets' }).click();
+        await assets.waitForPage();
+
+        await expect(assets.nameCell('Broken Icon Token')).toBeVisible();
+        await expect(assets.fallbackText('BR')).toBeVisible();
+    });
+
+    test('Shows the fiat value for an asset that has a rate', async ({ webOnly: _webOnly, page }) => {
+        // The GRAM row has a rate ($5.20), so its right-hand fiat column shows a "$" amount.
+        await mockWalletApi(page, {
+            jettons: [{ masterRaw: XAUT_MASTER_RAW, balance: '0', symbol: 'XAUT', name: 'Tether Gold', decimals: 6 }],
+        });
+        await createWalletOnDashboard(page);
+
+        const assets = new AssetsPage(page);
+        await page.getByRole('button', { name: 'View all assets' }).click();
+        await assets.waitForPage();
+
+        await expect(assets.gramName).toBeVisible();
+        await expect(page.getByText('$', { exact: false }).first()).toBeVisible();
+    });
+});
diff --git a/apps/demo-wallet/e2e/ui-tests/dashboard.spec.ts b/apps/demo-wallet/e2e/ui-tests/dashboard.spec.ts
new file mode 100644
index 000000000..b8d3a5ced
--- /dev/null
+++ b/apps/demo-wallet/e2e/ui-tests/dashboard.spec.ts
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+
+import { testWithUIFixture } from './UITestFixture';
+import { createWalletOnDashboard } from './helpers';
+import { mockWalletApi } from '../mocks/walletApi';
+
+const test = testWithUIFixture();
+
+test.describe('Dashboard smoke (mocked wallet API)', () => {
+    test.beforeEach(async ({ webOnly: _webOnly, page }) => {
+        // Routes MUST be installed before the dashboard loads its data.
+        await mockWalletApi(page);
+        await createWalletOnDashboard(page);
+    });
+
+    test('Renders the fiat total once balance and rates load', async ({ page }) => {
+        // BalanceTotal shows "$." only when balance !== undefined && ratesUpdated > 0.
+        // With a 12.5 GRAM balance @ $5.20 plus jettons, the integer part is non-zero.
+        const total = page.getByText('$', { exact: false }).first();
+        await expect(total).toBeVisible();
+        // The styled total renders the dollar sign in its own span; assert the integer part shows up.
+        await expect(page.getByText(/^\d{1,3}(,\d{3})*$/).first()).toBeVisible();
+    });
+
+    test('Native row is labelled GRAM with the /gram.svg icon', async ({ page }) => {
+        // The TON/GRAM asset row renders name "Gram" + symbol "GRAM" with icon /gram.svg.
+        await expect(page.getByText('Gram', { exact: true }).first()).toBeVisible();
+        await expect(page.locator('img[src="/gram.svg"]').first()).toBeVisible();
+    });
+
+    test('Send / Swap / Stake actions are present', async ({ page }) => {
+        await expect(page.getByTestId('send-button')).toBeVisible();
+        await expect(page.getByTestId('swap-button')).toBeVisible();
+        await expect(page.getByTestId('stake-button')).toBeVisible();
+    });
+
+    test('Assets preview shows held jettons', async ({ page }) => {
+        // The "Assets" section header and the mocked USDT holding both render.
+        await expect(page.getByRole('heading', { name: 'Assets' })).toBeVisible();
+        await expect(page.getByText('Tether USD', { exact: true }).first()).toBeVisible();
+    });
+
+    test('Navigates to the Assets page', async ({ page }) => {
+        await page.getByRole('button', { name: 'View all assets' }).click();
+        await expect(page).toHaveURL(/\/wallet\/assets$/);
+    });
+
+    test('Navigates to the NFT page', async ({ page }) => {
+        // NftsCard only renders its header/link when the wallet holds NFTs (mocked: 2).
+        await page.getByRole('button', { name: 'View all NFTs' }).click();
+        await expect(page).toHaveURL(/\/wallet\/nft$/);
+        // The full NFTs screen shows the same mocked items.
+        await expect(page.getByText('Test NFT One', { exact: true }).first()).toBeVisible();
+    });
+
+    test('Navigates to the History page', async ({ page }) => {
+        // Now that the traces mock shapes real transfer rows, the dashboard History section renders
+        // its "View all transactions" link (empty-section-hides otherwise); following it lands on
+        // the full history page with the mocked rows.
+        await page.getByRole('button', { name: 'View all transactions' }).click();
+        await expect(page).toHaveURL(/\/wallet\/history$/);
+        await expect(page.getByText('Sent 5 GRAM', { exact: true }).first()).toBeVisible();
+    });
+});
diff --git a/apps/demo-wallet/e2e/ui-tests/formatting.spec.ts b/apps/demo-wallet/e2e/ui-tests/formatting.spec.ts
new file mode 100644
index 000000000..eeea43850
--- /dev/null
+++ b/apps/demo-wallet/e2e/ui-tests/formatting.spec.ts
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+
+import { testWithUIFixture } from './UITestFixture';
+import { createWalletOnDashboard } from './helpers';
+import { AssetsPage } from '../pages';
+import { mockWalletApi, USDT_MASTER_RAW } from '../mocks/walletApi';
+
+const test = testWithUIFixture();
+
+/**
+ * §13 amount formatting through the Assets list, where the native GRAM row and jetton rows
+ * render `formatLargeValue(amount, 4)`. `formatLargeValue` abbreviates ≥1M to M/B/T using the
+ * integer-digit count, ALWAYS prints 2 fractional digits in that branch (the `decimals` arg is
+ * ignored — silent precision drop ≥1M) and floors rather than rounds.
+ */
+test.describe('Amount formatting on the Assets list (§13)', () => {
+    test('Abbreviates a ≥1M GRAM balance to "M" with 2 digits, floored', async ({ webOnly: _webOnly, page }) => {
+        // 1,234,567.899... GRAM (raw nanotons) → "1.23M" (floor to .23, never .24; only 2 digits even
+        // though the row asks for 4). This is the precision-drop + floor behaviour in one assertion.
+        await mockWalletApi(page, { balanceNano: '1234567899000000' });
+        await createWalletOnDashboard(page);
+
+        const assets = new AssetsPage(page);
+        await page.getByRole('button', { name: 'View all assets' }).click();
+        await assets.waitForPage();
+
+        await expect(assets.gramName).toBeVisible();
+        await expect(page.getByText('1.23M GRAM', { exact: false }).first()).toBeVisible();
+    });
+
+    test('Accepts a 0-decimals jetton (not rejected) and lists it', async ({ webOnly: _webOnly, page }) => {
+        // A jetton advertising decimals=0 is rendered on the assets list (the b45c9401 fix changed the
+        // gate from `!decimals` to `== null`, so 0-decimals is valid).
+        await mockWalletApi(page, {
+            jettons: [{ masterRaw: USDT_MASTER_RAW, balance: '500', symbol: 'PTS', name: 'Points Token', decimals: 0 }],
+        });
+        await createWalletOnDashboard(page);
+
+        const assets = new AssetsPage(page);
+        await page.getByRole('button', { name: 'View all assets' }).click();
+        await assets.waitForPage();
+
+        await expect(assets.nameCell('Points Token')).toBeVisible();
+        // 500 base units at 0 decimals = 500 whole tokens.
+        await expect(page.getByText('500 PTS', { exact: false }).first()).toBeVisible();
+    });
+});
diff --git a/apps/demo-wallet/e2e/ui-tests/helpers.ts b/apps/demo-wallet/e2e/ui-tests/helpers.ts
new file mode 100644
index 000000000..48b30a8d5
--- /dev/null
+++ b/apps/demo-wallet/e2e/ui-tests/helpers.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+import type { Page } from '@playwright/test';
+
+import { TEST_PASSWORD } from '../constants';
+import { SetupWalletPage } from '../pages';
+
+/**
+ * Create a fresh mainnet wallet and land on the dashboard. The caller MUST install the
+ * API mocks (`mockWalletApi`) BEFORE this runs, so the route handlers are in place before
+ * WalletKit fires its first balance/jettons/rates/traces fetch (which happens as soon as
+ * the wallet address is set). Mainnet is selected by default; the explorer host and the
+ * default-token (USDT/XAUT) padding are mainnet-only.
+ */
+export async function createWalletOnDashboard(page: Page): Promise {
+    const setupWallet = new SetupWalletPage(page);
+
+    await page.getByTestId('welcome-create').click();
+    await page.getByTestId('password').fill(TEST_PASSWORD);
+    await page.getByTestId('password-confirm').fill(TEST_PASSWORD);
+    await page.getByTestId('password-submit').click();
+    await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
+
+    await page.getByTestId('reveal-mnemonic').click();
+    await setupWallet.confirmAndCreate();
+
+    await expect(page.getByTestId('wallet-menu')).toBeVisible();
+}
diff --git a/apps/demo-wallet/e2e/ui-tests/history.spec.ts b/apps/demo-wallet/e2e/ui-tests/history.spec.ts
new file mode 100644
index 000000000..c08f021cc
--- /dev/null
+++ b/apps/demo-wallet/e2e/ui-tests/history.spec.ts
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+
+import { testWithUIFixture } from './UITestFixture';
+import { createWalletOnDashboard } from './helpers';
+import { HistoryPage } from '../pages';
+import { mockWalletApi } from '../mocks/walletApi';
+import type { MockEvent } from '../mocks/walletApi';
+
+const test = testWithUIFixture();
+
+/** A valid 32-byte base64 trace id derived from an index (Base64ToHex decodes it to the row id). */
+const traceId = (i: number): string => Buffer.alloc(32, i + 1).toString('base64');
+
+test.describe('History page (mocked wallet API)', () => {
+    test('Renders sent/received GRAM rows with status', async ({ webOnly: _webOnly, page }) => {
+        // Default mock shapes one outgoing 5 GRAM + one incoming 2.5 GRAM transfer; both succeed,
+        // so each row shows its "Sent/Received N GRAM" title (see map-transaction-row.ts).
+        await mockWalletApi(page);
+        await createWalletOnDashboard(page);
+
+        const history = new HistoryPage(page);
+        await page.getByRole('button', { name: 'View all transactions' }).click();
+        await history.waitForPage();
+
+        await expect(history.rowByTitle('Sent 5 GRAM')).toBeVisible();
+        await expect(history.rowByTitle('Received 2.5 GRAM')).toBeVisible();
+    });
+
+    test('A confirmed row links to the explorer in a new tab', async ({ webOnly: _webOnly, page }) => {
+        // A confirmed row is an  to the network's tonviewer host. The wallet was
+        // created on mainnet, so the host is tonviewer.com (testnet/tetra switch the host).
+        await mockWalletApi(page);
+        await createWalletOnDashboard(page);
+
+        const history = new HistoryPage(page);
+        await page.getByRole('button', { name: 'View all transactions' }).click();
+        await history.waitForPage();
+
+        const link = history.explorerLinkByTitle('Sent 5 GRAM');
+        await expect(link).toBeVisible();
+        await expect(link).toHaveAttribute('target', '_blank');
+        const href = await link.getAttribute('href');
+        expect(href).toBeTruthy();
+        expect(new URL(href!).host).toBe('tonviewer.com');
+        expect(new URL(href!).pathname).toContain('/transaction/');
+    });
+
+    test('Shows "Load more" when more pages remain', async ({ webOnly: _webOnly, page }) => {
+        // hasNext is true when a page returns >= limit traces (PAGE_SIZE 25). Shape 25 sent rows so
+        // the first page is full and the pager appears.
+        const events: MockEvent[] = Array.from({ length: 25 }, (_value, i) => ({
+            traceId: traceId(i),
+            direction: 'sent' as const,
+            amountNano: '1000000000',
+            timestamp: 1_700_000_000 + i,
+        }));
+        await mockWalletApi(page, { events });
+        await createWalletOnDashboard(page);
+
+        const history = new HistoryPage(page);
+        await page.getByRole('button', { name: 'View all transactions' }).click();
+        await history.waitForPage();
+
+        await expect(history.loadMore).toBeVisible();
+    });
+});
diff --git a/apps/demo-wallet/e2e/ui-tests/nft.spec.ts b/apps/demo-wallet/e2e/ui-tests/nft.spec.ts
new file mode 100644
index 000000000..7d038ccba
--- /dev/null
+++ b/apps/demo-wallet/e2e/ui-tests/nft.spec.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+
+import { testWithUIFixture } from './UITestFixture';
+import { createWalletOnDashboard } from './helpers';
+import { NftPage } from '../pages';
+import { mockWalletApi } from '../mocks/walletApi';
+
+const test = testWithUIFixture();
+
+test.describe('NFT page (mocked wallet API)', () => {
+    test('Renders the grid of held NFTs', async ({ webOnly: _webOnly, page }) => {
+        // Default mock: 2 NFTs. The dashboard NftsCard renders its "View all NFTs" link only when
+        // the wallet holds NFTs; following it lands on the 2-column grid showing the same items.
+        await mockWalletApi(page);
+        await createWalletOnDashboard(page);
+
+        const nft = new NftPage(page);
+        await page.getByRole('button', { name: 'View all NFTs' }).click();
+        await nft.waitForPage();
+
+        await expect(nft.tile('Test NFT One')).toBeVisible();
+        await expect(nft.tile('Test NFT Two')).toBeVisible();
+    });
+
+    test('Hides the dashboard NFTs entry when the wallet holds no NFTs', async ({ webOnly: _webOnly, page }) => {
+        // empty-section-hides (§6.8): with 0 NFTs the NftsCard renders nothing, so there is no
+        // "View all NFTs" link — the only entry point to /wallet/nft is removed.
+        await mockWalletApi(page, { nfts: [] });
+        await createWalletOnDashboard(page);
+
+        await expect(page.getByRole('button', { name: 'View all NFTs' })).toBeHidden();
+        await expect(page.getByRole('heading', { name: 'NFTs' })).toBeHidden();
+    });
+});
diff --git a/apps/demo-wallet/e2e/ui-tests/send.spec.ts b/apps/demo-wallet/e2e/ui-tests/send.spec.ts
new file mode 100644
index 000000000..0960626ed
--- /dev/null
+++ b/apps/demo-wallet/e2e/ui-tests/send.spec.ts
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+
+import { testWithUIFixture } from './UITestFixture';
+import { createWalletOnDashboard } from './helpers';
+import { mockWalletApi } from '../mocks/walletApi';
+
+const test = testWithUIFixture();
+
+/** A syntactically valid mainnet address used as the transfer recipient. */
+const VALID_RECIPIENT = 'UQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqoY5';
+
+test.describe('Send page form (mocked wallet API, no network send)', () => {
+    test.beforeEach(async ({ webOnly: _webOnly, page }) => {
+        await mockWalletApi(page);
+        await createWalletOnDashboard(page);
+        await page.getByTestId('send-button').click();
+        await expect(page.getByRole('heading', { name: 'Send' })).toBeVisible();
+    });
+
+    test('Defaults to GRAM with a token selector and "Send GRAM" submit', async ({ page }) => {
+        // The default selected token is the native GRAM; the submit button reads "Send {symbol}".
+        await expect(page.getByTestId('token-selector')).toContainText('GRAM');
+        await expect(page.getByTestId('send-submit')).toHaveText('Send GRAM');
+    });
+
+    test('Shows the fiat sub-line for the typed amount', async ({ page }) => {
+        // The amount field renders a "≈$" fiat sub-line when the token has a rate (GRAM @ $5.20).
+        await page.getByTestId('send-amount-input').fill('2');
+        await expect(page.getByText('≈$', { exact: false }).first()).toBeVisible();
+    });
+
+    test('Amount presets fill the amount field', async ({ page }) => {
+        // The 10% / 25% / 50% / MAX presets write a computed amount into the field.
+        await page.getByRole('button', { name: '50%', exact: true }).click();
+        await expect(page.getByTestId('send-amount-input')).not.toHaveValue('');
+
+        await page.getByRole('button', { name: 'MAX', exact: true }).click();
+        await expect(page.getByTestId('send-amount-input')).not.toHaveValue('');
+    });
+
+    test('Invalid recipient shows the inline "Invalid address" caption', async ({ page }) => {
+        // A non-empty, unparseable recipient surfaces an inline validation caption (and disables submit).
+        await page.getByTestId('recipient-input').fill('not-a-real-address');
+        await expect(page.getByText('Invalid address', { exact: true })).toBeVisible();
+    });
+
+    test('Amount above balance shows "Insufficient balance" on submit', async ({ page }) => {
+        // Mock balance is 12.5 GRAM; a valid recipient + an over-balance amount reaches the submit
+        // handler, which throws "Insufficient balance".
+        await page.getByTestId('recipient-input').fill(VALID_RECIPIENT);
+        await page.getByTestId('send-amount-input').fill('999999');
+        await page.getByTestId('send-submit').click();
+        await expect(page.getByText('Insufficient balance', { exact: true })).toBeVisible();
+    });
+});
diff --git a/apps/demo-wallet/e2e/ui-tests/staking.spec.ts b/apps/demo-wallet/e2e/ui-tests/staking.spec.ts
new file mode 100644
index 000000000..9131b8aea
--- /dev/null
+++ b/apps/demo-wallet/e2e/ui-tests/staking.spec.ts
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+
+import { testWithUIFixture } from './UITestFixture';
+import { createWalletOnDashboard } from './helpers';
+import { mockWalletApi } from '../mocks/walletApi';
+
+const test = testWithUIFixture();
+
+test.describe('Staking page form (mocked wallet API, no network send)', () => {
+    test.beforeEach(async ({ webOnly: _webOnly, page }) => {
+        await mockWalletApi(page);
+        await createWalletOnDashboard(page);
+        await page.getByTestId('stake-button').click();
+        await expect(page.getByRole('heading', { name: 'Stake' })).toBeVisible();
+    });
+
+    test('Shows stake/unstake tabs and Available / Staked balances', async ({ page }) => {
+        await expect(page.getByRole('button', { name: 'stake', exact: true })).toBeVisible();
+        await expect(page.getByRole('button', { name: 'unstake', exact: true })).toBeVisible();
+        await expect(page.getByText('Available', { exact: true })).toBeVisible();
+        await expect(page.getByText('Staked', { exact: true })).toBeVisible();
+        // The pool summary defaults to the Tonstakers provider.
+        await expect(page.getByText('Tonstakers', { exact: true })).toBeVisible();
+    });
+
+    test('Max fills the stake amount keeping the gas reserve', async ({ page }) => {
+        // On the stake tab (balance 12.5 GRAM), Max fills the amount with balance minus ~1.2 GRAM.
+        await page.getByRole('button', { name: 'Max', exact: true }).click();
+        await expect(page.getByTestId('stake-amount-input')).not.toHaveValue('');
+    });
+
+    test('Guards a stake that would not keep the gas reserve', async ({ page }) => {
+        // 12.0 GRAM is below the balance (12.5) but above the keep-reserve threshold (12.5 - 1.2 = 11.3),
+        // so the reserve guard fires.
+        await page.getByTestId('stake-amount-input').fill('12');
+        await expect(page.getByText('Keep ~1.2 GRAM for network fees', { exact: true })).toBeVisible();
+    });
+
+    test('Guards a stake above the available balance', async ({ page }) => {
+        await page.getByTestId('stake-amount-input').fill('999999');
+        await expect(page.getByText('Insufficient balance', { exact: true })).toBeVisible();
+    });
+
+    test('Guards an unstake with nothing staked', async ({ page }) => {
+        // With 0 staked, any unstake amount fails the "Not enough staked" guard.
+        await page.getByRole('button', { name: 'unstake', exact: true }).click();
+        await page.getByTestId('stake-amount-input').fill('1');
+        await expect(page.getByText('Not enough staked', { exact: true })).toBeVisible();
+    });
+});
diff --git a/apps/demo-wallet/e2e/ui-tests/swap.spec.ts b/apps/demo-wallet/e2e/ui-tests/swap.spec.ts
new file mode 100644
index 000000000..56492bcdd
--- /dev/null
+++ b/apps/demo-wallet/e2e/ui-tests/swap.spec.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+
+import { testWithUIFixture } from './UITestFixture';
+import { createWalletOnDashboard } from './helpers';
+import { mockWalletApi } from '../mocks/walletApi';
+
+const test = testWithUIFixture();
+
+test.describe('Swap page form (mocked wallet API, no network send)', () => {
+    test.beforeEach(async ({ webOnly: _webOnly, page }) => {
+        await mockWalletApi(page);
+        await createWalletOnDashboard(page);
+        await page.getByTestId('swap-button').click();
+        await expect(page.getByRole('heading', { name: 'Swap' })).toBeVisible();
+    });
+
+    test('Shows From / To sides with their balances and a direction toggle', async ({ page }) => {
+        // Defaults: From = GRAM, To = USDT. Each side shows a "Balance:" line and there is a
+        // "Swap direction" button between them.
+        await expect(page.getByText('From', { exact: true })).toBeVisible();
+        await expect(page.getByText('To', { exact: true })).toBeVisible();
+        await expect(page.getByText('Balance:', { exact: false }).first()).toBeVisible();
+        await expect(page.getByRole('button', { name: 'Swap direction' })).toBeVisible();
+    });
+
+    test('Max fills the From amount keeping a gas reserve', async ({ page }) => {
+        // The From side (GRAM, balance 12.5) shows a Max button; tapping it fills the From input
+        // (balance minus the 0.1 GRAM reserve).
+        const fromInput = page.locator('input[inputmode="decimal"]').first();
+        await page.getByRole('button', { name: 'Max', exact: true }).first().click();
+        await expect(fromInput).not.toHaveValue('');
+    });
+
+    test('Primary action reads "Get Quote" before a quote exists', async ({ page }) => {
+        // With no quote yet, the primary button fetches a quote and is labelled "Get Quote".
+        await expect(page.getByRole('button', { name: 'Get Quote' })).toBeVisible();
+    });
+
+    test('Reveals the custom recipient field when enabled', async ({ page }) => {
+        // The "Send to a different address" checkbox reveals a recipient input (placeholder "Recipient address (EQ…)").
+        await page.getByText('Send to a different address', { exact: true }).click();
+        await expect(page.getByPlaceholder('Recipient address (EQ…)')).toBeVisible();
+    });
+});
diff --git a/apps/demo-wallet/e2e/ui-tests/unlock.spec.ts b/apps/demo-wallet/e2e/ui-tests/unlock.spec.ts
new file mode 100644
index 000000000..8d399bfb9
--- /dev/null
+++ b/apps/demo-wallet/e2e/ui-tests/unlock.spec.ts
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+import type { Page } from '@playwright/test';
+
+import { testWithUIFixture } from './UITestFixture';
+import { TEST_PASSWORD } from '../constants';
+import { SetupWalletPage, UnlockWalletPage } from '../pages';
+
+const test = testWithUIFixture();
+
+/**
+ * Create a fresh wallet (Welcome → Create → password → reveal → confirm), then
+ * reload to drop the in-memory unlocked session. `isUnlocked` is not persisted
+ * unless `persistPassword` is on (default off — see createWalletStore.ts `merge`),
+ * so after reload `ProtectedRoute` redirects a saved-but-locked wallet to /unlock.
+ */
+async function createWalletThenLock(page: Page): Promise {
+    const setupWallet = new SetupWalletPage(page);
+
+    await page.getByTestId('welcome-create').click();
+    await page.getByTestId('password').fill(TEST_PASSWORD);
+    await page.getByTestId('password-confirm').fill(TEST_PASSWORD);
+    await page.getByTestId('password-submit').click();
+    await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
+
+    await page.getByTestId('reveal-mnemonic').click();
+    await setupWallet.confirmAndCreate();
+
+    // Confirm we reached the dashboard before locking.
+    await expect(page.getByTestId('wallet-menu')).toBeVisible();
+
+    // Reload → locked session → ProtectedRoute sends us to /unlock.
+    await page.reload({ waitUntil: 'load' });
+}
+
+test.describe('Unlock Wallet Flow', () => {
+    test.beforeEach(async ({ webOnly: _webOnly, page }) => {
+        await createWalletThenLock(page);
+    });
+
+    test('Locked wallet shows the unlock screen after reload', async ({ page }) => {
+        const unlock = new UnlockWalletPage(page);
+        await unlock.waitForPage();
+        await expect(page).toHaveURL(/\/unlock$/);
+        await expect(page.getByTestId('subtitle')).toHaveText('Enter your password');
+    });
+
+    test('Wrong password shows "Incorrect password" and stays locked', async ({ page }) => {
+        const unlock = new UnlockWalletPage(page);
+        await unlock.waitForPage();
+
+        await unlock.unlock('wrong-password');
+
+        await expect(unlock.errorMessage).toBeVisible();
+        // Still on the unlock screen — the dashboard is not reachable.
+        await expect(page).toHaveURL(/\/unlock$/);
+        await expect(page.getByTestId('wallet-menu')).toBeHidden();
+    });
+
+    test('Correct password unlocks and lands on the dashboard', async ({ page }) => {
+        const unlock = new UnlockWalletPage(page);
+        await unlock.waitForPage();
+
+        await unlock.unlock(TEST_PASSWORD);
+
+        // The settings button only exists on the wallet dashboard.
+        await expect(page.getByTestId('wallet-menu')).toBeVisible();
+        await expect(page).toHaveURL(/\/wallet$/);
+    });
+
+    test('Reset Wallet → confirm navigates to /welcome', async ({ page }) => {
+        const unlock = new UnlockWalletPage(page);
+        await unlock.waitForPage();
+
+        await unlock.resetWallet();
+
+        await expect(page).toHaveURL(/\/welcome$/);
+        await expect(page.getByTestId('welcome-create')).toBeVisible();
+    });
+});

From 4350db47577ac4c34684e343525643cd91233506 Mon Sep 17 00:00:00 2001
From: Pavel Lesyuk 
Date: Tue, 30 Jun 2026 10:22:49 +0800
Subject: [PATCH 2/6] ci(demo-wallet): scope default e2e to ui-tests; run
 mock-dApp suite; quarantine runner specs (TON-1701)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The default e2e.config.ts swept every spec under ./e2e — including the two-tab
suites (which need extra webServer tabs) and the allure-test-runner specs (whose
backend currently returns 500). With --retries=3 that blew the 30-min CI budget
(reached 99/122 tests before cancel; 120 "case data 500" errors in the log).

- testIgnore ton-connect/** and mock-dapp-tests/** — they run via their own
  configs (e2e.tonconnect.config.ts / e2e.mockdapp.config.ts), which start the
  minter :5174 / mock-dApp :5175 tabs themselves.
- testIgnore + quarantine the runner specs (connect / signData / sendTransaction /
  localSendTransaction) until the allure-test-runner backend is restored.
- e2e_web.yml: after the ui-tests run, also run the self-contained mock-dApp suite
  (e2e.mockdapp.config.ts); aggregate exit codes so both report into allure-results.

After this the default web e2e run is the mock-first e2e/ui-tests suite (64 tests,
12 files) plus the mock-dApp TON Connect suite.
---
 .github/workflows/e2e_web.yml  |  9 ++++++++-
 apps/demo-wallet/e2e.config.ts | 18 ++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e_web.yml b/.github/workflows/e2e_web.yml
index d1fe1abba..79cdab242 100644
--- a/.github/workflows/e2e_web.yml
+++ b/.github/workflows/e2e_web.yml
@@ -87,7 +87,14 @@ jobs:
       run: |
         pnpm build
         cd apps/demo-wallet
-        xvfb-run pnpm e2e
+        # 1) Default config: mock-first ui-tests only (see e2e.config.ts testIgnore).
+        # 2) Self-contained two-tab TON Connect mock-dApp suite (starts mock-dApp :5175 +
+        #    demo-wallet :5173 with broadcast/manifest checks disabled). Aggregate exit codes
+        #    so both runs execute and both report into allure-results.
+        set +e
+        xvfb-run pnpm e2e; r1=$?
+        xvfb-run pnpm exec playwright test --config e2e.mockdapp.config.ts; r2=$?
+        exit $(( r1 || r2 ))
       env:
         WALLET_MNEMONIC: ${{ secrets.WALLET_MNEMONIC }}
         # VITE_BRIDGE_URL: 'http://localhost:8081/bridge'
diff --git a/apps/demo-wallet/e2e.config.ts b/apps/demo-wallet/e2e.config.ts
index 66e09899b..dca07819a 100644
--- a/apps/demo-wallet/e2e.config.ts
+++ b/apps/demo-wallet/e2e.config.ts
@@ -19,6 +19,24 @@ const headless =
 
 export default defineConfig({
     testDir: './e2e',
+    // Specs that need their own Playwright config (extra webServer tabs) or an external backend
+    // must NOT run under this default single-server config — otherwise they hang/fail and, with
+    // `--retries=3`, blow the 30-min CI budget. After these exclusions the default run is the
+    // mock-first `e2e/ui-tests/**` suite only.
+    testIgnore: [
+        // Two-tab TON Connect suites — run via their dedicated configs, which start the extra
+        // dApp tabs themselves: e2e.tonconnect.config.ts (minter :5174) / e2e.mockdapp.config.ts
+        // (mock-dApp :5175). See e2e_web.yml for the mock-dApp suite's CI step.
+        '**/ton-connect/**',
+        '**/mock-dapp-tests/**',
+        // QUARANTINED (temporary): these drive the external allure-test-runner backend, which is
+        // currently returning 500 on every case lookup → 3× retries × ~1 min each → CI timeout.
+        // Re-enable once the runner backend is restored.
+        '**/e2e/connect.spec.ts',
+        '**/e2e/signData.spec.ts',
+        '**/e2e/localSendTransaction.spec.ts',
+        '**/e2e/sendTransaction/**',
+    ],
     timeout: timeout,
     expect: {
         timeout: timeout,

From 57a25f81fcf0e7ec1b6e5bd7727c90fc7579c912 Mon Sep 17 00:00:00 2001
From: Pavel Lesyuk 
Date: Tue, 30 Jun 2026 13:49:27 +0800
Subject: [PATCH 3/6] =?UTF-8?q?refactor(demo-wallet=20e2e):=20address=20re?=
 =?UTF-8?q?view=20=E2=80=94=20drop=20redundant=20minter=20suite,=20harden?=
 =?UTF-8?q?=20mock-dApp,=20readable=20steps=20(TON-1701)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove the superseded minter two-tab connect suite + its config: the mock-dApp
  suite covers connect, and appkit↔wallet is covered by the minter's own gasless e2e.
- mockdapp config: reject a `localhost` MOCK_DAPP_URL override (WalletKit's manifest
  host guard rejects dot-less hosts — fail fast instead of a confusing run).
- mock-dApp connect reject: assert the rejection actually round-trips back to the
  dApp (#dapp-error via onStatusChange's error handler) instead of an empty
  #dapp-connected, which was also the initial state (false pass).
- Declare @tonconnect/sdk as a demo-wallet devDependency (catalog) and drop the
  cross-app Vite alias hack in the mock-dApp fixture — resolve it directly.
- Wrap DemoWallet / helpers flows in named allure.step() so TestOps shows readable
  steps ("Approve connect request", …) instead of raw Playwright actions.
---
 apps/demo-wallet/e2e.config.ts                |   9 +-
 apps/demo-wallet/e2e.mockdapp.config.ts       |  14 +-
 apps/demo-wallet/e2e.tonconnect.config.ts     |  79 -----
 .../demo-wallet/e2e/demo-wallet/DemoWallet.ts | 311 ++++++++++--------
 .../e2e/mock-dapp-tests/connect.spec.ts       |   9 +-
 apps/demo-wallet/e2e/mock-dapp/main.ts        |  20 +-
 apps/demo-wallet/e2e/mock-dapp/vite.config.ts |  20 +-
 .../e2e/ton-connect/connect.spec.ts           |  54 ---
 .../e2e/ton-connect/mockDappFixture.ts        |   4 +-
 .../e2e/ton-connect/twoTabFixture.ts          |  75 -----
 apps/demo-wallet/e2e/ui-tests/helpers.ts      |  21 +-
 apps/demo-wallet/package.json                 |   1 +
 pnpm-lock.yaml                                |   3 +
 13 files changed, 226 insertions(+), 394 deletions(-)
 delete mode 100644 apps/demo-wallet/e2e.tonconnect.config.ts
 delete mode 100644 apps/demo-wallet/e2e/ton-connect/connect.spec.ts
 delete mode 100644 apps/demo-wallet/e2e/ton-connect/twoTabFixture.ts

diff --git a/apps/demo-wallet/e2e.config.ts b/apps/demo-wallet/e2e.config.ts
index dca07819a..c7944e82d 100644
--- a/apps/demo-wallet/e2e.config.ts
+++ b/apps/demo-wallet/e2e.config.ts
@@ -24,10 +24,11 @@ export default defineConfig({
     // `--retries=3`, blow the 30-min CI budget. After these exclusions the default run is the
     // mock-first `e2e/ui-tests/**` suite only.
     testIgnore: [
-        // Two-tab TON Connect suites — run via their dedicated configs, which start the extra
-        // dApp tabs themselves: e2e.tonconnect.config.ts (minter :5174) / e2e.mockdapp.config.ts
-        // (mock-dApp :5175). See e2e_web.yml for the mock-dApp suite's CI step.
-        '**/ton-connect/**',
+        // The mock-first two-tab TON Connect suite runs via its dedicated config, which starts
+        // the extra dApp tab itself: e2e.mockdapp.config.ts (mock-dApp :5175). See e2e_web.yml
+        // for the mock-dApp suite's CI step. (`e2e/ton-connect/` holds only the suite's driver
+        // files — MockDapp.ts / mockDappFixture.ts — which aren't *.spec.ts, so nothing is
+        // collected from there under this default config.)
         '**/mock-dapp-tests/**',
         // QUARANTINED (temporary): these drive the external allure-test-runner backend, which is
         // currently returning 500 on every case lookup → 3× retries × ~1 min each → CI timeout.
diff --git a/apps/demo-wallet/e2e.mockdapp.config.ts b/apps/demo-wallet/e2e.mockdapp.config.ts
index 1769e8af0..fee5f05f7 100644
--- a/apps/demo-wallet/e2e.mockdapp.config.ts
+++ b/apps/demo-wallet/e2e.mockdapp.config.ts
@@ -19,7 +19,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 // (tab 2, :5173). The dApp drives connect / sendTransaction / signData / signMessage over
 // the real TON Connect bridge; the wallet runs with on-chain broadcast suppressed
 // (VITE_DISABLE_NETWORK_SEND) and the manifest domain check disabled
-// (VITE_DISABLE_MANIFEST_DOMAIN_CHECK). Mirrors `e2e.tonconnect.config.ts`.
+// (VITE_DISABLE_MANIFEST_DOMAIN_CHECK). Self-contained: it starts both tabs' servers itself.
 config({ quiet: true });
 
 const workersCount = process.env.WORKERS_COUNT ? parseInt(process.env.WORKERS_COUNT) : undefined;
@@ -31,6 +31,16 @@ const headless =
 // hosts before fetching, regardless of `disableManifestDomainCheck` — see the mock-dApp's
 // main.ts / packages/walletkit/src/utils/url.ts. `127.0.0.1` has dots and passes.
 const APP_URL = process.env.MOCK_DAPP_URL ?? 'http://127.0.0.1:5175/';
+// Guard against a dot-less host: WalletKit's manifest `isValidHost` rejects `localhost`
+// (no dot) before fetching the manifest, regardless of `disableManifestDomainCheck`, so the
+// connect handshake would fail with a confusing "App manifest not found". Use a dotted host
+// (e.g. 127.0.0.1). See e2e/mock-dapp/main.ts / packages/walletkit/src/utils/url.ts.
+if (new URL(APP_URL).hostname === 'localhost') {
+    throw new Error(
+        `MOCK_DAPP_URL must use a dotted host (e.g. http://127.0.0.1:5175/), not 'localhost': ` +
+            `WalletKit's manifest isValidHost guard rejects dot-less hosts. Got: ${APP_URL}`,
+    );
+}
 const WALLET_SOURCE = process.env.E2E_WALLET_SOURCE ?? 'http://localhost:5173/';
 
 // Absolute path to the mock-dApp vite config — robust to the cwd vite is launched from.
@@ -70,7 +80,7 @@ export default defineConfig({
     fullyParallel: false,
     forbidOnly: !!process.env.CI,
     // The handshake + requests ride the real TON Connect bridge; CI retries absorb transient
-    // bridge/timing hiccups (matches e2e.tonconnect.config.ts — that's why its gate is stable).
+    // bridge/timing hiccups (same retry policy as the appkit-minter gasless two-tab gate).
     retries: process.env.CI ? 2 : 0,
     workers: workersCount ?? 1,
     reporter: [['list'], ['allure-playwright']],
diff --git a/apps/demo-wallet/e2e.tonconnect.config.ts b/apps/demo-wallet/e2e.tonconnect.config.ts
deleted file mode 100644
index cc3d26da9..000000000
--- a/apps/demo-wallet/e2e.tonconnect.config.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Copyright (c) TonTech.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { config } from 'dotenv';
-import { defineConfig, devices } from '@playwright/test';
-
-// Two-tab TON Connect config: pairs the in-kit appkit-minter dApp (tab 1, :5174) with the
-// redesigned demo-wallet (tab 2, :5173). The demo-wallet connects to the dApp over the real
-// TON Connect bridge by pasting the universal link copied from the dApp's connect modal —
-// the same pattern the appkit-minter gasless e2e uses. Mirrors `apps/appkit-minter/e2e.config.ts`.
-config({ quiet: true });
-
-const workersCount = process.env.WORKERS_COUNT ? parseInt(process.env.WORKERS_COUNT) : undefined;
-const timeout = process.env.TIMEOUT ? parseInt(process.env.TIMEOUT) : 60_000;
-const headless =
-    process.env.ENABLE_HEADLESS === 'true' ? true : process.env.ENABLE_HEADLESS === 'false' ? false : undefined;
-
-const APP_URL = process.env.MINTER_URL ?? 'http://localhost:5174/';
-const WALLET_SOURCE = process.env.E2E_WALLET_SOURCE ?? 'http://localhost:5173/';
-
-// Start the minter (tab 1) unless an external MINTER_URL is supplied.
-const minterServer = process.env.MINTER_URL
-    ? []
-    : [
-          {
-              command: 'pnpm --filter appkit-minter dev',
-              url: 'http://localhost:5174/',
-              reuseExistingServer: !process.env.CI,
-              timeout: 120_000,
-          },
-      ];
-// Start the demo-wallet (tab 2) unless it is served elsewhere.
-const walletServer = WALLET_SOURCE.includes('localhost:5173')
-    ? [
-          {
-              command: 'pnpm --filter demo-wallet dev',
-              url: 'http://localhost:5173/',
-              reuseExistingServer: !process.env.CI,
-              timeout: 120_000,
-          },
-      ]
-    : [];
-
-export default defineConfig({
-    testDir: './e2e/ton-connect',
-    timeout,
-    expect: { timeout },
-    fullyParallel: false,
-    forbidOnly: !!process.env.CI,
-    // Two-tab connect rides the real TON Connect bridge; CI retries absorb transient bridge/timing
-    // hiccups (matches apps/appkit-minter/e2e.config.ts — that's why its two-tab gate is stable).
-    retries: process.env.CI ? 2 : 0,
-    workers: workersCount ?? 1,
-    reporter: [['list'], ['allure-playwright']],
-    use: {
-        baseURL: APP_URL,
-        screenshot: 'only-on-failure',
-        trace: 'retain-on-failure',
-        permissions: ['clipboard-read', 'clipboard-write'],
-        launchOptions: {
-            args: [
-                '--no-sandbox',
-                '--disable-setuid-sandbox',
-                '--disable-dev-shm-usage',
-                '--no-first-run',
-                '--disable-infobars',
-                '--disable-blink-features=AutomationControlled',
-            ],
-        },
-        headless,
-    },
-    projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
-    webServer: [...minterServer, ...walletServer],
-});
diff --git a/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts b/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
index c2f82c8b0..3806658b7 100644
--- a/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
+++ b/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
@@ -7,6 +7,7 @@
  */
 
 import { expect } from '@playwright/test';
+import { step } from 'allure-js-commons';
 
 import { WalletApp } from '../qa';
 
@@ -25,83 +26,91 @@ export class DemoWallet extends WalletApp {
     }
 
     async importWallet(mnemonic: string): Promise {
-        if (mnemonic === '') {
-            throw new Error('[importWallet] mnemonic is required setup WALLET_MNEMONIC');
-        }
-        const app = await this.open();
-
-        // Welcome → "Add an existing wallet" → "Recovery phrase". Wait for the welcome action to
-        // render — the app shows a loader until WalletKit initializes, so clicking immediately
-        // after navigation races that boot. Likewise wait for the picker option to mount/animate.
-        await app.getByTestId('welcome-add-existing').waitFor({ state: 'visible' });
-        await app.getByTestId('welcome-add-existing').click();
-        await app.getByTestId('add-wallet-import').waitFor({ state: 'visible' });
-        await app.getByTestId('add-wallet-import').click();
-
-        // Setup password
-        await app.getByTestId('password').fill(this.password);
-        await app.getByTestId('password-confirm').fill(this.password);
-        await app.getByTestId('password-submit').click();
-
-        // Import wallet screen: select mainnet, paste the phrase, continue
-        await app.getByTestId('network-select-mainnet').click();
-        await app.evaluate(async (m) => {
-            await navigator.clipboard.writeText(m);
-        }, mnemonic);
-        await app.getByTestId('paste-mnemonic').click();
-        await app.getByTestId('import-wallet-process').click();
-
-        // Wait for the dashboard (the settings button only exists there)
-        await app.getByTestId('wallet-menu').waitFor({ state: 'visible' });
-
-        // Disable auto-lock and hold-to-sign for e2e tests
-        await app.getByTestId('wallet-menu').click();
-        await app.getByTestId('auto-lock').waitFor({ state: 'attached' });
-        await app.getByTestId('auto-lock').click();
-        await app.getByTestId('hold-to-sign').waitFor({ state: 'attached' });
-        await app.getByTestId('hold-to-sign').click();
-        await this.close();
+        await step('Import wallet from recovery phrase', async () => {
+            if (mnemonic === '') {
+                throw new Error('[importWallet] mnemonic is required setup WALLET_MNEMONIC');
+            }
+            const app = await this.open();
+
+            // Welcome → "Add an existing wallet" → "Recovery phrase". Wait for the welcome action to
+            // render — the app shows a loader until WalletKit initializes, so clicking immediately
+            // after navigation races that boot. Likewise wait for the picker option to mount/animate.
+            await app.getByTestId('welcome-add-existing').waitFor({ state: 'visible' });
+            await app.getByTestId('welcome-add-existing').click();
+            await app.getByTestId('add-wallet-import').waitFor({ state: 'visible' });
+            await app.getByTestId('add-wallet-import').click();
+
+            // Setup password
+            await app.getByTestId('password').fill(this.password);
+            await app.getByTestId('password-confirm').fill(this.password);
+            await app.getByTestId('password-submit').click();
+
+            // Import wallet screen: select mainnet, paste the phrase, continue
+            await app.getByTestId('network-select-mainnet').click();
+            await app.evaluate(async (m) => {
+                await navigator.clipboard.writeText(m);
+            }, mnemonic);
+            await app.getByTestId('paste-mnemonic').click();
+            await app.getByTestId('import-wallet-process').click();
+
+            // Wait for the dashboard (the settings button only exists there)
+            await app.getByTestId('wallet-menu').waitFor({ state: 'visible' });
+
+            // Disable auto-lock and hold-to-sign for e2e tests
+            await app.getByTestId('wallet-menu').click();
+            await app.getByTestId('auto-lock').waitFor({ state: 'attached' });
+            await app.getByTestId('auto-lock').click();
+            await app.getByTestId('hold-to-sign').waitFor({ state: 'attached' });
+            await app.getByTestId('hold-to-sign').click();
+            await this.close();
+        });
     }
 
     async connectBy(url: string, shouldSkipConnect: boolean = false, confirm: boolean = true): Promise {
-        const app = await this.open();
-        await delay(500);
-        // Open the "Connect to dApp" modal, then paste the TON Connect link.
-        await app.getByTestId('connect-dapp-button').click();
-        await app.getByTestId('tonconnect-url').fill(url);
-        await app.getByTestId('tonconnect-process').click();
-
-        if (shouldSkipConnect) {
-            return;
-        }
-        await this.connect(confirm);
+        await step('Paste the TON Connect link into the wallet', async () => {
+            const app = await this.open();
+            await delay(500);
+            // Open the "Connect to dApp" modal, then paste the TON Connect link.
+            await app.getByTestId('connect-dapp-button').click();
+            await app.getByTestId('tonconnect-url').fill(url);
+            await app.getByTestId('tonconnect-process').click();
+
+            if (shouldSkipConnect) {
+                return;
+            }
+            await this.connect(confirm);
+        });
     }
 
     async connect(confirm: boolean = true, skipConnect: boolean = false): Promise {
-        const app = await this.open();
-        if (skipConnect) {
-            return;
-        }
-
-        const modal = app.getByTestId('connect-request');
-        await modal.waitFor({ state: 'visible' });
-        const chose = app.getByTestId(confirm ? 'connect-approve' : 'connect-reject');
-
-        await chose.waitFor({ state: 'visible' });
-        await chose.click();
-        await modal.waitFor({ state: 'detached' });
-        await this.close();
+        await step(confirm ? 'Approve connect request' : 'Reject connect request', async () => {
+            const app = await this.open();
+            if (skipConnect) {
+                return;
+            }
+
+            const modal = app.getByTestId('connect-request');
+            await modal.waitFor({ state: 'visible' });
+            const chose = app.getByTestId(confirm ? 'connect-approve' : 'connect-reject');
+
+            await chose.waitFor({ state: 'visible' });
+            await chose.click();
+            await modal.waitFor({ state: 'detached' });
+            await this.close();
+        });
     }
 
     async signData(confirm: boolean = true): Promise {
-        const app = await this.open();
-        const modal = app.getByTestId('sign-data-request');
-        await modal.waitFor({ state: 'visible' });
-        const chose = app.getByTestId(confirm ? 'sign-data-approve' : 'sign-data-reject');
-        await chose.waitFor({ state: 'visible' });
-        await chose.click();
-        await modal.waitFor({ state: 'detached' });
-        await this.close();
+        await step(confirm ? 'Approve & sign data' : 'Reject sign-data request', async () => {
+            const app = await this.open();
+            const modal = app.getByTestId('sign-data-request');
+            await modal.waitFor({ state: 'visible' });
+            const chose = app.getByTestId(confirm ? 'sign-data-approve' : 'sign-data-reject');
+            await chose.waitFor({ state: 'visible' });
+            await chose.click();
+            await modal.waitFor({ state: 'detached' });
+            await this.close();
+        });
     }
 
     /**
@@ -113,14 +122,16 @@ export class DemoWallet extends WalletApp {
      * TON-1682 D2; if kit moves to its own repo the object can't be shared).
      */
     async signMessage(confirm: boolean = true): Promise {
-        const app = await this.open();
-        const modal = app.getByTestId('sign-message-request');
-        await modal.waitFor({ state: 'visible' });
-        const chose = app.getByTestId(confirm ? 'sign-message-approve' : 'sign-message-reject');
-        await chose.waitFor({ state: 'attached' });
-        await chose.click();
-        await modal.waitFor({ state: 'detached' });
-        await this.close();
+        await step(confirm ? 'Approve & sign message' : 'Reject sign-message request', async () => {
+            const app = await this.open();
+            const modal = app.getByTestId('sign-message-request');
+            await modal.waitFor({ state: 'visible' });
+            const chose = app.getByTestId(confirm ? 'sign-message-approve' : 'sign-message-reject');
+            await chose.waitFor({ state: 'attached' });
+            await chose.click();
+            await modal.waitFor({ state: 'detached' });
+            await this.close();
+        });
     }
 
     /**
@@ -136,61 +147,69 @@ export class DemoWallet extends WalletApp {
      * Strings traced to apps/demo-wallet/src/features/ton-connect/components/* (see TON-1701).
      */
     async expectConnectModal(): Promise {
-        const app = await this.open();
-        const modal = app.getByTestId('connect-request');
-        await modal.waitFor({ state: 'visible' });
-
-        // Title verb (connect-request-modal.tsx verb="Connect to").
-        await expect(modal.getByTestId('request')).toContainText('Connect to');
-        // Disclaimer (connect-request-modal.tsx disclaimer="Only connect to trusted applications. …").
-        await expect(modal).toContainText('Only connect to trusted applications');
-        // Per-type action buttons (connect-approve / connect-reject).
-        await expect(app.getByTestId('connect-approve')).toBeVisible();
-        await expect(app.getByTestId('connect-reject')).toBeVisible();
+        await step('Assert connect-request modal', async () => {
+            const app = await this.open();
+            const modal = app.getByTestId('connect-request');
+            await modal.waitFor({ state: 'visible' });
+
+            // Title verb (connect-request-modal.tsx verb="Connect to").
+            await expect(modal.getByTestId('request')).toContainText('Connect to');
+            // Disclaimer (connect-request-modal.tsx disclaimer="Only connect to trusted applications. …").
+            await expect(modal).toContainText('Only connect to trusted applications');
+            // Per-type action buttons (connect-approve / connect-reject).
+            await expect(app.getByTestId('connect-approve')).toBeVisible();
+            await expect(app.getByTestId('connect-reject')).toBeVisible();
+        });
     }
 
     async expectTransactionModal(): Promise {
-        const app = await this.open();
-        const modal = app.getByTestId('transaction-request');
-        await modal.waitFor({ state: 'visible' });
-
-        // Title verb (transaction-request-modal.tsx verb="Confirm transaction for").
-        await expect(modal.getByTestId('request')).toContainText('Confirm transaction for');
-        // Subtitle (transaction-request-modal.tsx subtitle="A dApp wants to send a transaction from your wallet:").
-        await expect(modal).toContainText('A dApp wants to send a transaction from your wallet');
-        // "You will sign" details section (TransactionRequestDetails default title="You will sign").
-        await expect(modal).toContainText('You will sign');
-        // Per-type action buttons (send-transaction-approve / send-transaction-reject).
-        await expect(app.getByTestId('send-transaction-approve')).toBeVisible();
-        await expect(app.getByTestId('send-transaction-reject')).toBeVisible();
+        await step('Assert transaction-request modal', async () => {
+            const app = await this.open();
+            const modal = app.getByTestId('transaction-request');
+            await modal.waitFor({ state: 'visible' });
+
+            // Title verb (transaction-request-modal.tsx verb="Confirm transaction for").
+            await expect(modal.getByTestId('request')).toContainText('Confirm transaction for');
+            // Subtitle (transaction-request-modal.tsx subtitle="A dApp wants to send a transaction from your wallet:").
+            await expect(modal).toContainText('A dApp wants to send a transaction from your wallet');
+            // "You will sign" details section (TransactionRequestDetails default title="You will sign").
+            await expect(modal).toContainText('You will sign');
+            // Per-type action buttons (send-transaction-approve / send-transaction-reject).
+            await expect(app.getByTestId('send-transaction-approve')).toBeVisible();
+            await expect(app.getByTestId('send-transaction-reject')).toBeVisible();
+        });
     }
 
     async expectSignMessageModal(): Promise {
-        const app = await this.open();
-        const modal = app.getByTestId('sign-message-request');
-        await modal.waitFor({ state: 'visible' });
-
-        // Title verb (sign-message-request-modal.tsx verb="Sign message for").
-        await expect(modal.getByTestId('request')).toContainText('Sign message for');
-        // Subtitle about signing without broadcasting (sign-message-request-modal.tsx subtitle).
-        await expect(modal).toContainText('without broadcasting it');
-        // Per-type action buttons (sign-message-approve / sign-message-reject).
-        await expect(app.getByTestId('sign-message-approve')).toBeVisible();
-        await expect(app.getByTestId('sign-message-reject')).toBeVisible();
+        await step('Assert sign-message-request modal', async () => {
+            const app = await this.open();
+            const modal = app.getByTestId('sign-message-request');
+            await modal.waitFor({ state: 'visible' });
+
+            // Title verb (sign-message-request-modal.tsx verb="Sign message for").
+            await expect(modal.getByTestId('request')).toContainText('Sign message for');
+            // Subtitle about signing without broadcasting (sign-message-request-modal.tsx subtitle).
+            await expect(modal).toContainText('without broadcasting it');
+            // Per-type action buttons (sign-message-approve / sign-message-reject).
+            await expect(app.getByTestId('sign-message-approve')).toBeVisible();
+            await expect(app.getByTestId('sign-message-reject')).toBeVisible();
+        });
     }
 
     async expectSignDataModal(): Promise {
-        const app = await this.open();
-        const modal = app.getByTestId('sign-data-request');
-        await modal.waitFor({ state: 'visible' });
-
-        // Title verb (sign-data-request-modal.tsx verb="Sign data for").
-        await expect(modal.getByTestId('request')).toContainText('Sign data for');
-        // Text-payload body label (sign-data-request-modal.tsx renderDataToSign text case "Text Message").
-        await expect(modal).toContainText('Text Message');
-        // Per-type action buttons (sign-data-approve / sign-data-reject).
-        await expect(app.getByTestId('sign-data-approve')).toBeVisible();
-        await expect(app.getByTestId('sign-data-reject')).toBeVisible();
+        await step('Assert sign-data-request modal', async () => {
+            const app = await this.open();
+            const modal = app.getByTestId('sign-data-request');
+            await modal.waitFor({ state: 'visible' });
+
+            // Title verb (sign-data-request-modal.tsx verb="Sign data for").
+            await expect(modal.getByTestId('request')).toContainText('Sign data for');
+            // Text-payload body label (sign-data-request-modal.tsx renderDataToSign text case "Text Message").
+            await expect(modal).toContainText('Text Message');
+            // Per-type action buttons (sign-data-approve / sign-data-reject).
+            await expect(app.getByTestId('sign-data-approve')).toBeVisible();
+            await expect(app.getByTestId('sign-data-reject')).toBeVisible();
+        });
     }
 
     async sendTransaction(isPositiveCase: boolean, confirm: boolean, waitBeforeApprove: number = 0): Promise {
@@ -202,14 +221,16 @@ export class DemoWallet extends WalletApp {
     }
 
     async accept(confirm: boolean = true): Promise {
-        const app = await this.open();
-        const modal = app.getByTestId('transaction-request');
-        await modal.waitFor({ state: 'visible' });
-        const chose = app.getByTestId(confirm ? 'send-transaction-approve' : 'send-transaction-reject');
-        await chose.waitFor({ state: 'visible' });
-        await chose.click();
-        await modal.waitFor({ state: 'detached' });
-        await this.close();
+        await step(confirm ? 'Approve & sign transaction' : 'Reject transaction', async () => {
+            const app = await this.open();
+            const modal = app.getByTestId('transaction-request');
+            await modal.waitFor({ state: 'visible' });
+            const chose = app.getByTestId(confirm ? 'send-transaction-approve' : 'send-transaction-reject');
+            await chose.waitFor({ state: 'visible' });
+            await chose.click();
+            await modal.waitFor({ state: 'detached' });
+            await this.close();
+        });
     }
 
     /**
@@ -217,24 +238,26 @@ export class DemoWallet extends WalletApp {
      * This tests the handleNewTransaction flow with walletId
      */
     async sendTonToSelf(amount: string, confirm: boolean = true): Promise {
-        const app = await this.open();
+        await step('Send TON to own address', async () => {
+            const app = await this.open();
 
-        // Navigate to send page
-        await app.getByTestId('send-button').click();
+            // Navigate to send page
+            await app.getByTestId('send-button').click();
 
-        // Click "Use my address" button
-        await app.getByTestId('use-my-address').click();
+            // Click "Use my address" button
+            await app.getByTestId('use-my-address').click();
 
-        // Fill in amount
-        await app.getByTestId('send-amount-input').fill(amount);
+            // Fill in amount
+            await app.getByTestId('send-amount-input').fill(amount);
 
-        // Click send button
-        await app.getByTestId('send-submit').click();
+            // Click send button
+            await app.getByTestId('send-submit').click();
 
-        // Wait for the transaction request modal (anchored on its type-specific action button)
-        const chose = app.getByTestId(confirm ? 'send-transaction-approve' : 'send-transaction-reject');
-        await chose.waitFor({ state: 'visible' });
-        await chose.click();
-        await chose.waitFor({ state: 'detached' });
+            // Wait for the transaction request modal (anchored on its type-specific action button)
+            const chose = app.getByTestId(confirm ? 'send-transaction-approve' : 'send-transaction-reject');
+            await chose.waitFor({ state: 'visible' });
+            await chose.click();
+            await chose.waitFor({ state: 'detached' });
+        });
     }
 }
diff --git a/apps/demo-wallet/e2e/mock-dapp-tests/connect.spec.ts b/apps/demo-wallet/e2e/mock-dapp-tests/connect.spec.ts
index 498ba75a8..22c6140a1 100644
--- a/apps/demo-wallet/e2e/mock-dapp-tests/connect.spec.ts
+++ b/apps/demo-wallet/e2e/mock-dapp-tests/connect.spec.ts
@@ -40,7 +40,12 @@ test.describe('TON Connect mock-dApp — connect (two-tab)', () => {
         await wallet.expectConnectModal();
         await wallet.connect(false);
 
-        // After a rejection the connector never flips to connected.
-        await expect(dapp.page.getByTestId('dapp-connected')).toHaveText('');
+        // Terminal signal: the rejection round-trips over the bridge and the connector reports
+        // it via onStatusChange's error handler → #dapp-error. (Asserting only an empty
+        // #dapp-connected would be a false pass: that's also the initial pre-connect state.)
+        const err = await dapp.error();
+        expect(err.length).toBeGreaterThan(0);
+        // …and the connector never flipped to connected.
+        await expect(dapp.page.getByTestId('dapp-connected')).not.toHaveText('true');
     });
 });
diff --git a/apps/demo-wallet/e2e/mock-dapp/main.ts b/apps/demo-wallet/e2e/mock-dapp/main.ts
index edbbf09f2..c8f03b443 100644
--- a/apps/demo-wallet/e2e/mock-dapp/main.ts
+++ b/apps/demo-wallet/e2e/mock-dapp/main.ts
@@ -60,12 +60,20 @@ const clearOutputs = (): void => {
     $('dapp-error').textContent = '';
 };
 
-// Reflect connection status into #dapp-connected so the test can poll it.
-connector.onStatusChange((wallet) => {
-    $('dapp-connected').textContent = wallet ? 'true' : '';
-    // Expose the connected account for debugging / optional assertions.
-    (window as unknown as { __dappWallet?: unknown }).__dappWallet = wallet;
-});
+// Reflect connection status into #dapp-connected so the test can poll it. The 2nd arg is
+// the connect error handler: a wallet-side connect REJECTION arrives here (not via a thrown
+// promise — `connector.connect()` only returns the universal link). Surface it into
+// #dapp-error so the test has a real terminal signal that the rejection round-tripped.
+connector.onStatusChange(
+    (wallet) => {
+        $('dapp-connected').textContent = wallet ? 'true' : '';
+        // Expose the connected account for debugging / optional assertions.
+        (window as unknown as { __dappWallet?: unknown }).__dappWallet = wallet;
+    },
+    (err) => {
+        setError(err);
+    },
+);
 
 $('dapp-connect').addEventListener('click', () => {
     clearOutputs();
diff --git a/apps/demo-wallet/e2e/mock-dapp/vite.config.ts b/apps/demo-wallet/e2e/mock-dapp/vite.config.ts
index d84a26b36..dcf93b59b 100644
--- a/apps/demo-wallet/e2e/mock-dapp/vite.config.ts
+++ b/apps/demo-wallet/e2e/mock-dapp/vite.config.ts
@@ -7,24 +7,15 @@
  */
 
 import path from 'path';
-import { createRequire } from 'module';
 import { fileURLToPath } from 'url';
 
 import { defineConfig } from 'vite';
 
 // Vite config for the QA Mock dApp test fixture. `root` is this directory so vite serves
-// index.html + bundles main.ts on the fly.
-//
-// The demo-wallet package does NOT depend on `@tonconnect/sdk` (only walletkit does,
-// transitively, so it isn't hoisted to the top-level node_modules). A bare
-// `import '@tonconnect/sdk'` is therefore unresolvable from this dir's module graph. The
-// package IS installed in the monorepo as a catalog dep used by `appkit-minter`, so we
-// resolve it against that package and alias the bare specifier to its ESM entry. Deriving
-// the ESM path from the resolved CJS entry avoids relying on a hard-coded `.pnpm` path.
+// index.html + bundles main.ts on the fly. `@tonconnect/sdk` is a direct devDependency of
+// demo-wallet (catalog:), so a bare `import '@tonconnect/sdk'` resolves normally from this
+// app's own module graph — no cross-app alias needed.
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const minterRequire = createRequire(path.resolve(__dirname, '../../../appkit-minter/package.json'));
-const sdkCjs = minterRequire.resolve('@tonconnect/sdk'); // .../@tonconnect/sdk/lib/cjs/index.cjs
-const sdkEsm = path.resolve(path.dirname(sdkCjs), '../esm/index.mjs');
 
 export default defineConfig({
     root: __dirname,
@@ -35,9 +26,4 @@ export default defineConfig({
         port: 5175,
         strictPort: true,
     },
-    resolve: {
-        alias: {
-            '@tonconnect/sdk': sdkEsm,
-        },
-    },
 });
diff --git a/apps/demo-wallet/e2e/ton-connect/connect.spec.ts b/apps/demo-wallet/e2e/ton-connect/connect.spec.ts
deleted file mode 100644
index e6b47a959..000000000
--- a/apps/demo-wallet/e2e/ton-connect/connect.spec.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright (c) TonTech.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { expect } from '@playwright/test';
-
-import { twoTabFixture } from './twoTabFixture';
-
-/**
- * Two-tab TON Connect — connect modal.
- *
- * Tab 1 = the in-kit appkit-minter dApp (:5174). Tab 2 = the redesigned demo-wallet (:5173).
- * `widget.connectUrl()` opens the dApp's connect modal and copies the universal link off the
- * clipboard; `wallet.connectBy(url, false, confirm)` pastes it into the wallet's "Connect to
- * dApp" flow and drives the per-type `connect-request` modal (`connect-approve` /
- * `connect-reject`). Hold-to-sign is turned OFF during import (see DemoWallet.importWallet),
- * so the approve testids are present. The connect handshake itself rides the real bridge.
- *
- * FOLLOW-UP (sendTransaction / signMessage / signData), parked with a verified reason:
- *  - sendTransaction → `transaction-request`: the minter's regular TON/jetton transfer is gated
- *    on real wallet funds (it shows "Not enough TON" and never sends the request over the bridge
- *    for an unfunded WALLET_MNEMONIC) — verified by probe: the wallet stays on its dashboard.
- *  - signMessage → `sign-message-request`: the gasless path needs the connected wallet to HOLD
- *    the fee jetton (USDT) — the minter's Jettons list has no `token-row-` for a wallet
- *    that doesn't hold it, so `openTransfer(USDT)` can't be reached. The relayer mocks
- *    (`mockGaslessConfig`/`mockGaslessEstimateOk`) cover the relayer but not the wallet's holdings.
- *    → needs a funded test wallet (TON for sendTransaction, USDT for gasless) or a wallet-API mock
- *      on the connected wallet's data backend.
- *  - signData: the minter can't issue a signData request — needs a small local mock-dApp page.
- * `DemoWallet` already has `accept()`/`signMessage()`/`signData()` ready to drive those modals.
- */
-const test = twoTabFixture();
-
-test.describe('TON Connect — connect (two-tab, minter dApp)', () => {
-    test('Approving the connect request connects the wallet to the dApp', async ({ wallet, widget }) => {
-        const url = await widget.connectUrl();
-        await wallet.connectBy(url, false, true);
-
-        // After a successful connect the dApp's widget shows its connected (disconnect) control.
-        await expect(widget.connectButton).toBeVisible();
-    });
-
-    test('Rejecting the connect request leaves the dApp disconnected', async ({ wallet, widget }) => {
-        const url = await widget.connectUrl();
-        await wallet.connectBy(url, false, false);
-
-        // The dApp falls back to its pre-connect "connect" affordance.
-        await expect(widget.connectButton).toBeVisible();
-    });
-});
diff --git a/apps/demo-wallet/e2e/ton-connect/mockDappFixture.ts b/apps/demo-wallet/e2e/ton-connect/mockDappFixture.ts
index 8699bbad6..6c7a00dd7 100644
--- a/apps/demo-wallet/e2e/ton-connect/mockDappFixture.ts
+++ b/apps/demo-wallet/e2e/ton-connect/mockDappFixture.ts
@@ -22,8 +22,8 @@ config({ quiet: true });
 /**
  * Fully mock-first two-tab TON Connect fixture for the redesigned demo-wallet.
  *
- * Mirrors {@link twoTabFixture} but swaps the appkit-minter dApp for a SELF-CONTAINED
- * mock-dApp we control (`e2e/mock-dapp/`, :5175). The mock-dApp drives all four request
+ * Self-contained mock-first variant: drives a mock-dApp we control
+ * (`e2e/mock-dapp/`, :5175) instead of the appkit-minter. The mock-dApp drives all four request
  * kinds (connect / sendTransaction / signData / signMessage) over the real TON Connect
  * bridge and surfaces results into DOM testids — no modal scraping, no clipboard.
  *
diff --git a/apps/demo-wallet/e2e/ton-connect/twoTabFixture.ts b/apps/demo-wallet/e2e/ton-connect/twoTabFixture.ts
deleted file mode 100644
index c69b8d973..000000000
--- a/apps/demo-wallet/e2e/ton-connect/twoTabFixture.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright (c) TonTech.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { config } from 'dotenv';
-import type { BrowserContext, Page } from '@playwright/test';
-import { test as base } from '@playwright/test';
-
-import { launchPersistentContext, TonConnectWidget } from '../qa';
-import { DemoWallet } from '../demo-wallet';
-
-config({ quiet: true });
-
-/**
- * Self-contained two-tab TON Connect fixture for the redesigned demo-wallet.
- *
- * Why its own fixture (not the shared `demoWalletFixture`): this one pairs the **in-kit
- * appkit-minter** dApp (tab 1, :5174) — a local, CI-friendly TON Connect dApp — with the
- * demo-wallet (tab 2, :5173), and instantiates the two pages in a deterministic order
- * (dApp first, then import the wallet) so neither setup races the other.
- *
- *  - `context`  — one persistent BrowserContext shared by both tabs (matches the minter harness).
- *  - `app`      — the minter dApp Page (tab 1).
- *  - `widget`   — the dApp's TON Connect widget driver (copies the universal link from its modal).
- *  - `wallet`   — the demo-wallet driver (tab 2). Imports `WALLET_MNEMONIC` and turns hold-to-sign
- *                 OFF, so the per-type approve testids are present.
- *
- * The connect handshake rides the real TON Connect bridge (as the existing demo-wallet
- * connect.spec and the minter gasless e2e both do); only the wallet's data API would be mocked.
- */
-export interface TwoTabFixture {
-    context: BrowserContext;
-    app: Page;
-    widget: TonConnectWidget;
-    wallet: DemoWallet;
-}
-
-export interface TwoTabConfig {
-    appUrl?: string;
-    walletSource?: string;
-    mnemonic?: string;
-}
-
-export function twoTabFixture(cfg: TwoTabConfig = {}) {
-    const appUrl = cfg.appUrl ?? process.env.MINTER_URL ?? 'http://localhost:5174/';
-    const walletSource = cfg.walletSource ?? process.env.E2E_WALLET_SOURCE ?? 'http://localhost:5173/';
-    const mnemonic = cfg.mnemonic ?? process.env.WALLET_MNEMONIC ?? '';
-
-    return base.extend({
-        // eslint-disable-next-line no-empty-pattern
-        context: async ({}, use) => {
-            const context = await launchPersistentContext('');
-            await use(context);
-            await context.close();
-        },
-        app: async ({ context }, use) => {
-            const app = await context.newPage();
-            await app.goto(appUrl, { waitUntil: 'load' });
-            await use(app);
-        },
-        widget: async ({ app }, use) => {
-            await use(new TonConnectWidget(app));
-        },
-        // Depends on `app` so the dApp tab is opened first; then import the wallet on its own tab.
-        wallet: async ({ context, app: _app }, use) => {
-            const wallet = new DemoWallet(context, walletSource);
-            await wallet.importWallet(mnemonic);
-            await use(wallet);
-        },
-    });
-}
diff --git a/apps/demo-wallet/e2e/ui-tests/helpers.ts b/apps/demo-wallet/e2e/ui-tests/helpers.ts
index 48b30a8d5..24f315401 100644
--- a/apps/demo-wallet/e2e/ui-tests/helpers.ts
+++ b/apps/demo-wallet/e2e/ui-tests/helpers.ts
@@ -8,6 +8,7 @@
 
 import { expect } from '@playwright/test';
 import type { Page } from '@playwright/test';
+import { step } from 'allure-js-commons';
 
 import { TEST_PASSWORD } from '../constants';
 import { SetupWalletPage } from '../pages';
@@ -20,16 +21,18 @@ import { SetupWalletPage } from '../pages';
  * default-token (USDT/XAUT) padding are mainnet-only.
  */
 export async function createWalletOnDashboard(page: Page): Promise {
-    const setupWallet = new SetupWalletPage(page);
+    await step('Onboard a fresh wallet to the dashboard', async () => {
+        const setupWallet = new SetupWalletPage(page);
 
-    await page.getByTestId('welcome-create').click();
-    await page.getByTestId('password').fill(TEST_PASSWORD);
-    await page.getByTestId('password-confirm').fill(TEST_PASSWORD);
-    await page.getByTestId('password-submit').click();
-    await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
+        await page.getByTestId('welcome-create').click();
+        await page.getByTestId('password').fill(TEST_PASSWORD);
+        await page.getByTestId('password-confirm').fill(TEST_PASSWORD);
+        await page.getByTestId('password-submit').click();
+        await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
 
-    await page.getByTestId('reveal-mnemonic').click();
-    await setupWallet.confirmAndCreate();
+        await page.getByTestId('reveal-mnemonic').click();
+        await setupWallet.confirmAndCreate();
 
-    await expect(page.getByTestId('wallet-menu')).toBeVisible();
+        await expect(page.getByTestId('wallet-menu')).toBeVisible();
+    });
 }
diff --git a/apps/demo-wallet/package.json b/apps/demo-wallet/package.json
index 7bc39ebd8..f588e6b4c 100644
--- a/apps/demo-wallet/package.json
+++ b/apps/demo-wallet/package.json
@@ -64,6 +64,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@types/webextension-polyfill": "^0.12.4",
+    "@tonconnect/sdk": "catalog:",
     "@vitejs/plugin-react": "^6.0.1",
     "allure-js-commons": "^3.10.0",
     "allure-playwright": "^3.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c73c28ef1..fe6d9aacc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -322,6 +322,9 @@ importers:
       '@playwright/test':
         specifier: ^1.60.0
         version: 1.60.0
+      '@tonconnect/sdk':
+        specifier: 'catalog:'
+        version: 4.0.0
       '@types/chrome':
         specifier: ^0.1.43
         version: 0.1.43

From 7f883ea0b1f1cfca303c3f4b2dacae2e161d5fcb Mon Sep 17 00:00:00 2001
From: Pavel Lesyuk 
Date: Tue, 30 Jun 2026 13:50:30 +0800
Subject: [PATCH 4/6] docs(demo-wallet e2e): add README (structure, configs,
 mock-first, TestOps) (TON-1701)

---
 apps/demo-wallet/e2e/README.md | 76 ++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 apps/demo-wallet/e2e/README.md

diff --git a/apps/demo-wallet/e2e/README.md b/apps/demo-wallet/e2e/README.md
new file mode 100644
index 000000000..59b4fb38b
--- /dev/null
+++ b/apps/demo-wallet/e2e/README.md
@@ -0,0 +1,76 @@
+# demo-wallet E2E
+
+Playwright end-to-end tests for the demo-wallet. The suite is **mock-first**: it runs against
+mocked wallet data and never spends real funds, so it is safe to run on every push.
+
+## Layout
+
+| Path | What |
+|------|------|
+| `ui-tests/` | UI specs (onboarding, dashboard, assets, NFT, history, send, swap, staking, amount formatting). Mock-first — wallet data is stubbed via `page.route`. Web-only flows opt into the `webOnly` fixture and skip in extension mode. |
+| `mocks/walletApi.ts` | `page.route` mocks for the wallet's API (Toncenter v3 + rates), plus transfer-emulation / seqno helpers used by the TON Connect transaction flow. |
+| `mock-dapp/` | A **self-contained TON Connect dApp** test fixture (raw `@tonconnect/sdk`) served by Vite on `127.0.0.1:5175`. It exposes connect / sendTransaction / signData / signMessage behind buttons and surfaces every result into DOM test ids. Not product code. |
+| `mock-dapp-tests/` | Two-tab TON Connect specs: the mock dApp (tab 1) drives the redesigned wallet (tab 2) over the real bridge. Each asserts the modal copy + actions and the protocol response. |
+| `ton-connect/` | Drivers for the mock-dApp suite — `MockDapp.ts` (dApp page object) and `mockDappFixture.ts` (two-tab fixture). |
+| `demo-wallet/DemoWallet.ts` | The wallet page object (onboarding, the four TON Connect request modals, internal send). |
+| `pages/`, `qa/` | Wallet page objects and low-level helpers (context launch, extension id, etc.). |
+
+## Configs
+
+| Config | Runs | Servers |
+|--------|------|---------|
+| `e2e.config.ts` (default, `pnpm e2e`) | `ui-tests/**` only | demo-wallet dev server |
+| `e2e.mockdapp.config.ts` | `mock-dapp-tests/**` | mock dApp `:5175` + demo-wallet `:5173` |
+
+The default config `testIgnore`s the two-tab suite (it has its own servers) and the quarantined
+runner specs (see below), so `pnpm e2e` is just the fast mock-first UI suite.
+
+## Running locally
+
+```bash
+# Build the workspace deps the app needs (the full `pnpm build` is not required):
+pnpm --filter @ton/walletkit build && pnpm --filter @demo/wallet-core build
+
+cd apps/demo-wallet
+
+# UI suite (headless):
+ENABLE_HEADLESS=true pnpm e2e
+
+# TON Connect two-tab mock-dApp suite:
+ENABLE_HEADLESS=true npx playwright test --config e2e.mockdapp.config.ts
+```
+
+`WALLET_MNEMONIC` (a throwaway test seed) is read from `apps/demo-wallet/.env` (gitignored).
+Kill stray dev servers on `:5173` / `:5175` before re-running.
+
+## How the TON Connect suite stays fund-free
+
+`sendTransaction` / `signMessage` would normally need a funded wallet and would broadcast
+on-chain. The suite avoids both:
+
+- **Mocked balance** (`mockWalletApi`) so the wallet's balance guard lets the request through
+  and the modal renders.
+- **`VITE_DISABLE_NETWORK_SEND=true`** — the wallet signs and returns the response to the dApp
+  over the bridge but skips the on-chain broadcast. No funds move.
+
+The connect handshake and every request ride the real TON Connect bridge.
+`VITE_DISABLE_MANIFEST_DOMAIN_CHECK=true` lets the wallet accept the local mock-dApp manifest
+(served from `127.0.0.1`, which must be dotted — `localhost` is rejected by the manifest host
+guard).
+
+## Allure / TestOps
+
+- The reporter is `allure-playwright`. Cases are matched to TestOps by a **stable `historyId`**
+  (the describe chain + test title, set in a shared `beforeEach`), so there is no manual
+  `@allureId` pinning: new tests auto-create a case on launch close and survive line shifts and
+  file moves.
+- Wrap logical operations in `allure.step('…')` (see `DemoWallet.ts`) so the TestOps execution
+  reads as named steps rather than raw Playwright actions.
+- Upload runs in CI only, via secrets — no TestOps endpoint or token lives in this repo.
+
+## Quarantined specs
+
+`connect.spec.ts`, `signData.spec.ts`, `localSendTransaction.spec.ts` and `sendTransaction/**`
+drive an external test-runner backend that is currently unavailable. They are excluded via
+`testIgnore` in `e2e.config.ts` to keep CI within its time budget; re-enable them once that
+backend is restored.

From e0f07eea50a50e62622c9e6c0be485cb0276baba Mon Sep 17 00:00:00 2001
From: Pavel Lesyuk 
Date: Tue, 30 Jun 2026 14:35:15 +0800
Subject: [PATCH 5/6] =?UTF-8?q?test(demo-wallet=20e2e):=20review=20round-2?=
 =?UTF-8?q?=20fixes=20+=20=C2=A718=20paste/queue/guards=20automation=20(TO?=
 =?UTF-8?q?N-1701)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CodeRabbit round-2 (test quality):
- walletApi traces mock honors limit/offset (so pagination/"Load more" advances).
- recoverIfBlank waits for the app to actually mount (#root children) after the reload.
- assets/dashboard fiat assertions scoped to the row / total widget (not page-wide $).
- staking/swap Max assert the exact reserve-adjusted amount (reserve kept), not just non-empty.

§18 TON Connect — paste-to-connect / queue / guards (mock-first, two-tab):
- guards: request modals (connect/sign-data) are non-dismissible (Esc + backdrop ignored);
  the Connect-to-dApp paste modal IS dismissible.
- queue: two concurrent requests are shown one modal at a time (the second only after the
  first resolves) — asserts the wallet's request queue sequencing.
- paste routing: a clipboard tc:// link auto-routes to a connect request, is suppressed
  while the paste modal is open, and non-TON clipboard text is ignored.

Adds a mock-dApp "two requests" control + allure-wrapped DemoWallet/MockDapp helpers.
---
 .../demo-wallet/e2e/demo-wallet/DemoWallet.ts | 131 ++++++++++++++++++
 .../e2e/mock-dapp-tests/guards.spec.ts        |  58 ++++++++
 .../e2e/mock-dapp-tests/paste-routing.spec.ts |  64 +++++++++
 .../e2e/mock-dapp-tests/queue.spec.ts         |  78 +++++++++++
 apps/demo-wallet/e2e/mock-dapp/index.html     |   8 ++
 apps/demo-wallet/e2e/mock-dapp/main.ts        |  30 ++++
 apps/demo-wallet/e2e/mocks/walletApi.ts       |  14 +-
 apps/demo-wallet/e2e/qa/WalletApp.ts          |   9 ++
 apps/demo-wallet/e2e/ton-connect/MockDapp.ts  |  28 ++++
 apps/demo-wallet/e2e/ui-tests/assets.spec.ts  |   7 +-
 .../e2e/ui-tests/dashboard.spec.ts            |  16 ++-
 apps/demo-wallet/e2e/ui-tests/staking.spec.ts |   7 +-
 apps/demo-wallet/e2e/ui-tests/swap.spec.ts    |  13 +-
 13 files changed, 451 insertions(+), 12 deletions(-)
 create mode 100644 apps/demo-wallet/e2e/mock-dapp-tests/guards.spec.ts
 create mode 100644 apps/demo-wallet/e2e/mock-dapp-tests/paste-routing.spec.ts
 create mode 100644 apps/demo-wallet/e2e/mock-dapp-tests/queue.spec.ts

diff --git a/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts b/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
index 3806658b7..0045833d6 100644
--- a/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
+++ b/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
@@ -212,6 +212,137 @@ export class DemoWallet extends WalletApp {
         });
     }
 
+    /**
+     * Wait until exactly ONE of the given request-modal testids is visible and return it. Used by the
+     * queue test to assert one-modal-at-a-time without depending on which request the bridge delivers
+     * first. Polls until one is visible (Playwright auto-retries the OR locator via waitFor).
+     */
+    async waitForOneRequestModal(testIds: string[]): Promise {
+        return await step('Wait for a single request modal to be shown', async () => {
+            const app = await this.open();
+            // Resolve as soon as any of the candidate modals is visible.
+            await Promise.race(testIds.map((id) => app.getByTestId(id).waitFor({ state: 'visible' })));
+            const visible: string[] = [];
+            for (const id of testIds) {
+                if (await app.getByTestId(id).isVisible()) visible.push(id);
+            }
+            expect(visible.length, `exactly one request modal visible, saw: [${visible.join(', ')}]`).toBe(1);
+            return visible[0]!;
+        });
+    }
+
+    /**
+     * Assert NONE of the given request-modal testids becomes visible. Waits a short settle window
+     * first so an asynchronously-routed modal (handleTonConnectUrl is async) would have appeared —
+     * `toBeHidden()` alone passes instantly and would miss a late modal.
+     */
+    async expectNoRequestModal(testIds: string[], settleMs: number = 1000): Promise {
+        await step('Assert no request modal is shown', async () => {
+            const app = await this.open();
+            await delay(settleMs);
+            for (const id of testIds) {
+                await expect(app.getByTestId(id)).toBeHidden();
+            }
+        });
+    }
+
+    /**
+     * Approve the currently-shown request modal by its testid (one of the per-type request modals).
+     * Maps the modal testid to its `*-approve` action, clicks it, and waits for the modal to detach.
+     */
+    async approveRequestModal(testId: string): Promise {
+        const approveByModal: Record = {
+            'connect-request': 'connect-approve',
+            'transaction-request': 'send-transaction-approve',
+            'sign-message-request': 'sign-message-approve',
+            'sign-data-request': 'sign-data-approve',
+        };
+        const approveTestId = approveByModal[testId];
+        if (!approveTestId) throw new Error(`[approveRequestModal] unknown request modal testid: ${testId}`);
+        await step(`Approve ${testId}`, async () => {
+            const app = await this.open();
+            const modal = app.getByTestId(testId);
+            const approve = app.getByTestId(approveTestId);
+            await approve.waitFor({ state: 'visible' });
+            await approve.click();
+            await modal.waitFor({ state: 'detached' });
+        });
+    }
+
+    /**
+     * Assert a TON Connect REQUEST modal (`connect-request` / `transaction-request` /
+     * `sign-message-request` / `sign-data-request`) is NON-dismissible: pressing Escape AND clicking
+     * the backdrop must both leave it visible (only Approve/Reject close it). The shared
+     * DappRequestModal renders with `dismissible={false}`, which wires `onEscapeKeyDown` /
+     * `onInteractOutside` to `preventDefault` (core/components/ui/modal/modal.tsx). Leaves the modal
+     * OPEN so a follow-up approve/reject can clean it up.
+     */
+    async expectRequestModalNotDismissible(testId: string): Promise {
+        await step(`Assert ${testId} modal ignores Esc + backdrop (non-dismissible)`, async () => {
+            const app = await this.open();
+            const modal = app.getByTestId(testId);
+            await modal.waitFor({ state: 'visible' });
+
+            // Esc must NOT close it.
+            await app.keyboard.press('Escape');
+            await delay(300);
+            await expect(modal).toBeVisible();
+
+            // A backdrop click (top-left corner, well outside the centered dialog content) must NOT
+            // close it either. `force` + a corner point avoids hitting the modal content.
+            await app.mouse.click(5, 5);
+            await delay(300);
+            await expect(modal).toBeVisible();
+        });
+    }
+
+    /**
+     * Dispatch a synthetic global `paste` ClipboardEvent on `document` carrying `text`, mimicking a
+     * user pasting from the OS clipboard anywhere on the page (not into a specific field). The
+     * wallet's global `usePasteHandler` listens on `document` and auto-routes TON Connect URLs
+     * (tc:// / ton:// / http(s)://) to `handleTonConnectUrl` (use-paste-handler.ts). Used by the
+     * §18.2 / §18.4 paste-routing checks.
+     */
+    async pasteIntoDocument(text: string): Promise {
+        await step('Paste text into the wallet page (global clipboard paste)', async () => {
+            const app = await this.open();
+            await app.evaluate((value) => {
+                const dt = new DataTransfer();
+                dt.setData('text', value);
+                document.dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true }));
+            }, text);
+        });
+    }
+
+    /**
+     * Open the dismissible "Connect to dApp" PASTE modal (via `connect-dapp-button`) and assert it
+     * IS dismissible by Escape: it must close. Unlike the request modals, ConnectDappModal uses the
+     * default (`dismissible` unset → true) Modal.Container, so Radix closes it on Esc / backdrop
+     * (connect-dapp-modal.tsx). The modal has no container testid, so we anchor on its unique
+     * `tonconnect-url` textarea.
+     */
+    /** Open the Connect-to-dApp paste modal and leave it open (anchored on the `tonconnect-url` field). */
+    async openPasteModal(): Promise {
+        await step('Open the Connect-to-dApp paste modal', async () => {
+            const app = await this.open();
+            await app.getByTestId('connect-dapp-button').click();
+            await app.getByTestId('tonconnect-url').waitFor({ state: 'visible' });
+        });
+    }
+
+    async expectPasteModalDismissibleByEsc(): Promise {
+        await step('Assert the Connect-to-dApp paste modal closes on Esc (dismissible)', async () => {
+            const app = await this.open();
+            await app.getByTestId('connect-dapp-button').click();
+            const pasteField = app.getByTestId('tonconnect-url');
+            await pasteField.waitFor({ state: 'visible' });
+
+            await app.keyboard.press('Escape');
+            await pasteField.waitFor({ state: 'hidden' });
+            await expect(pasteField).toBeHidden();
+        });
+    }
+
     async sendTransaction(isPositiveCase: boolean, confirm: boolean, waitBeforeApprove: number = 0): Promise {
         await this.open();
         if (isPositiveCase || waitBeforeApprove > 0) {
diff --git a/apps/demo-wallet/e2e/mock-dapp-tests/guards.spec.ts b/apps/demo-wallet/e2e/mock-dapp-tests/guards.spec.ts
new file mode 100644
index 000000000..53d694cfe
--- /dev/null
+++ b/apps/demo-wallet/e2e/mock-dapp-tests/guards.spec.ts
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { mockDappFixture } from '../ton-connect/mockDappFixture';
+
+/**
+ * Mock-first two-tab TON Connect — modal dismissibility guards (test-plan §18.1).
+ *
+ * Two invariants of the redesigned wallet (TON-1682):
+ *   - The TON Connect REQUEST modals (`connect-request` / `transaction-request` /
+ *     `sign-message-request` / `sign-data-request`) are NON-dismissible: backdrop click / Esc must
+ *     NOT close them — only Approve/Reject. They render via the shared DappRequestModal with
+ *     `dismissible={false}` (modal.tsx wires `onEscapeKeyDown`/`onInteractOutside` → preventDefault).
+ *   - The Connect-to-dApp PASTE modal (opened by `connect-dapp-button`; textarea `tonconnect-url`,
+ *     action `tonconnect-process`) IS dismissible — Esc / backdrop close it (ConnectDappModal uses
+ *     the default `dismissible` Modal.Container).
+ *
+ * We cover one connect-path request modal (`connect-request`) and one post-connect request modal
+ * (`sign-data-request`), then the paste modal.
+ */
+const test = mockDappFixture();
+
+test.describe('TON Connect mock-dApp — modal guards (two-tab)', () => {
+    test('The connect-request modal ignores Esc and backdrop (non-dismissible)', async ({ wallet, dapp }) => {
+        const url = await dapp.connectUrl();
+        // Bring the connect-request modal up without resolving it.
+        await wallet.connectBy(url, /* shouldSkipConnect */ true);
+
+        // Esc + backdrop must leave it visible.
+        await wallet.expectRequestModalNotDismissible('connect-request');
+
+        // Clean up: reject the still-open request.
+        await wallet.connect(false);
+    });
+
+    test('The sign-data-request modal ignores Esc and backdrop (non-dismissible)', async ({ wallet, dapp }) => {
+        const url = await dapp.connectUrl();
+        await wallet.connectBy(url, false, true);
+        await dapp.isConnected();
+
+        // Raise a sign-data request, then assert its modal is non-dismissible.
+        await dapp.signData();
+        await wallet.expectRequestModalNotDismissible('sign-data-request');
+
+        // Clean up: reject the still-open request.
+        await wallet.signData(false);
+    });
+
+    test('The Connect-to-dApp paste modal IS dismissible (Esc closes it)', async ({ wallet }) => {
+        // No dApp interaction needed — just open the wallet's own paste modal and Esc it shut.
+        await wallet.expectPasteModalDismissibleByEsc();
+    });
+});
diff --git a/apps/demo-wallet/e2e/mock-dapp-tests/paste-routing.spec.ts b/apps/demo-wallet/e2e/mock-dapp-tests/paste-routing.spec.ts
new file mode 100644
index 000000000..8e71b307e
--- /dev/null
+++ b/apps/demo-wallet/e2e/mock-dapp-tests/paste-routing.spec.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+
+import { mockDappFixture } from '../ton-connect/mockDappFixture';
+
+/**
+ * Mock-first two-tab TON Connect — global clipboard paste routing (test-plan §18.2 + §18.4).
+ *
+ * The wallet's global `usePasteHandler` (use-paste-handler.ts) listens on `document` and, when a
+ * pasted string starts with `tc://` / `ton://` / `http(s)://`, routes it to `handleTonConnectUrl`
+ * (which raises the connect-request modal). It is wired with `isDisabled = isConnectOpen`
+ * (dashboard-header.tsx), so it is SUPPRESSED while the Connect-to-dApp paste modal is open — to
+ * avoid double-handling alongside that modal's own textarea.
+ *
+ * - §18.2: a real `tc://` connect link pasted globally auto-routes → connect-request modal appears;
+ *   and with the paste modal open, the same global paste is suppressed (no connect-request modal).
+ * - §18.4: non-TON garbage text pasted globally is ignored (no connect-request modal).
+ *
+ * Paste is simulated by dispatching a synthetic `ClipboardEvent('paste')` on `document` carrying the
+ * text in a `DataTransfer` — exactly the shape `usePasteHandler` reads (`clipboardData.getData`).
+ */
+const test = mockDappFixture();
+
+test.describe('TON Connect mock-dApp — global paste routing (two-tab)', () => {
+    test('§18.2 A real tc:// link pasted globally auto-routes to the connect-request modal', async ({
+        wallet,
+        dapp,
+    }) => {
+        const url = await dapp.connectUrl();
+        expect(url.startsWith('tc://')).toBe(true);
+
+        // Paste the connect link anywhere on the page (no paste modal involved).
+        await wallet.pasteIntoDocument(url);
+
+        // It routes through handleTonConnectUrl → the redesigned connect-request modal shows.
+        await wallet.expectConnectModal();
+
+        // Clean up: reject the routed connect request.
+        await wallet.connect(false);
+    });
+
+    test('§18.2 Global paste is suppressed while the Connect-to-dApp paste modal is open', async ({ wallet }) => {
+        // Open the paste modal — this sets isConnectOpen=true → the global paste handler unsubscribes.
+        await wallet.openPasteModal();
+
+        // A global paste of a tc:// link must NOT raise a (second) connect-request modal: it is
+        // suppressed while the paste modal owns the connect flow.
+        await wallet.pasteIntoDocument('tc://suppressed-while-paste-modal-open');
+        await wallet.expectNoRequestModal(['connect-request']);
+    });
+
+    test('§18.4 Non-TON clipboard text pasted globally is ignored', async ({ wallet }) => {
+        // Random garbage that matches none of the tc:// / ton:// / http(s):// prefixes.
+        await wallet.pasteIntoDocument('just some random clipboard noise — not a TON Connect link');
+        await wallet.expectNoRequestModal(['connect-request']);
+    });
+});
diff --git a/apps/demo-wallet/e2e/mock-dapp-tests/queue.spec.ts b/apps/demo-wallet/e2e/mock-dapp-tests/queue.spec.ts
new file mode 100644
index 000000000..984304e36
--- /dev/null
+++ b/apps/demo-wallet/e2e/mock-dapp-tests/queue.spec.ts
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { expect } from '@playwright/test';
+
+import { mockDappFixture } from '../ton-connect/mockDappFixture';
+
+/**
+ * Mock-first two-tab TON Connect — request queue (test-plan §18.3).
+ *
+ * The wallet processes TON Connect requests ONE AT A TIME via its request queue
+ * (`tonConnectSlice.ts`: `enqueueRequest` → `processNextRequest`, gated on `isProcessing`; the next
+ * request is processed only `MODAL_CLOSE_DELAY` ms AFTER the current one is cleared). A second
+ * incoming request must therefore WAIT until the first is resolved.
+ *
+ * Feasibility (verified in `@tonconnect/sdk` v4): `connector.signData` / `signMessage` each issue an
+ * independent bridge RPC with its own request id — there is NO client-side serialization in the SDK,
+ * so the dApp CAN have two requests in flight at once (see provider `sendRequest` →
+ * `getNextRpcRequestId`). The mock-dApp's "Two requests" button (`dapp-two-requests`) fires
+ * `signData` then `signMessage` WITHOUT awaiting the first; both reach the wallet, which must surface
+ * them one modal at a time.
+ *
+ * signMessage renders a transaction-style preview, so (like the transaction/signMessage specs) we
+ * enable `mockWalletApi` (generous balance + emulation + seqno mocks) so its modal settles.
+ *
+ * The bridge does not guarantee which of the two requests is delivered first, so the assertions are
+ * order-agnostic: exactly one of {sign-data-request, sign-message-request} is shown at a time.
+ *
+ * SCOPE NOTE — what this asserts vs. what it does NOT. The 18.3 invariant under test is the WALLET'S
+ * queue: one request modal at a time, the second shown only after the first is resolved. That is
+ * fully proven below (one modal → first settles on the dApp → second modal appears → resolved). It
+ * is verified empirically that only the FIRST request's response round-trips back to the dApp
+ * (settled count reaches 1, not 2): with two requests in flight over a single bridge session the
+ * second response is not delivered back to this raw-`@tonconnect/sdk` connector. That is a
+ * dApp/bridge-side response-correlation limitation, NOT a wallet-queue defect — the wallet still
+ * processes and signs the second request (its modal shows and is approved/detached). So this test
+ * asserts the queue sequencing + first-request round-trip, and only that the wallet COMPLETES the
+ * second (modal detaches on approve), without requiring the second response back on the dApp.
+ */
+const REQUEST_MODALS = ['sign-data-request', 'sign-message-request'];
+
+const test = mockDappFixture({ mockWalletApi: { balanceNano: '100000000000' } });
+
+test.describe('TON Connect mock-dApp — request queue (two-tab)', () => {
+    test('Two concurrent requests are shown one modal at a time', async ({ wallet, dapp }) => {
+        const url = await dapp.connectUrl();
+        await wallet.connectBy(url, false, true);
+        await dapp.isConnected();
+
+        // Fire signData + signMessage without awaiting the first.
+        await dapp.fireTwoRequests();
+
+        // The wallet shows exactly ONE request modal; the other is queued.
+        const first = await wallet.waitForOneRequestModal(REQUEST_MODALS);
+        const second = REQUEST_MODALS.find((id) => id !== first)!;
+
+        // Neither request has settled on the dApp yet (the second hasn't even been shown).
+        expect(await dapp.settledCount()).toBe(0);
+
+        // Approving the first lets the wallet advance the queue: the first request round-trips back
+        // to the dApp (settled → 1) and, after MODAL_CLOSE_DELAY, the SECOND modal appears.
+        await wallet.approveRequestModal(first);
+        await dapp.waitForSettledCount(1);
+
+        // Exactly the SECOND modal now appears (one-at-a-time held throughout) — never both at once.
+        await wallet.waitForOneRequestModal([second]);
+
+        // The wallet processes & signs the second too: approving detaches its modal (wallet-side
+        // completion). See SCOPE NOTE — the second response is not delivered back to the dApp under
+        // concurrent in-flight requests, so we don't wait for settled→2.
+        await wallet.approveRequestModal(second);
+    });
+});
diff --git a/apps/demo-wallet/e2e/mock-dapp/index.html b/apps/demo-wallet/e2e/mock-dapp/index.html
index fb3bdf258..bc007a966 100644
--- a/apps/demo-wallet/e2e/mock-dapp/index.html
+++ b/apps/demo-wallet/e2e/mock-dapp/index.html
@@ -25,6 +25,10 @@ 
QA Mock dApp

         
         
         
+        
+        
 
         
@@ -35,6 +39,10 @@ 
QA Mock dApp

         

         
         

+        
+        
0

 
         
     
diff --git a/apps/demo-wallet/e2e/mock-dapp/main.ts b/apps/demo-wallet/e2e/mock-dapp/main.ts
index c8f03b443..27e425e1c 100644
--- a/apps/demo-wallet/e2e/mock-dapp/main.ts
+++ b/apps/demo-wallet/e2e/mock-dapp/main.ts
@@ -127,3 +127,33 @@ $('dapp-sign-message').addEventListener('click', async () => {
         setError(err);
     }
 });
+
+// Fire TWO requests back-to-back WITHOUT awaiting the first (signData, then signMessage). Each
+// `connector.()` issues an independent bridge RPC with its own request id (no client-side
+// serialization in @tonconnect/sdk), so both reach the wallet, which must then surface them ONE AT
+// A TIME via its request queue. We track how many have SETTLED (resolved or rejected) into
+// #dapp-settled-count so the queue test can assert the second only settles after the first is
+// resolved in the wallet. Outputs are intentionally NOT cleared between the two (the test reads the
+// modal sequencing on the wallet side, not the dApp result text).
+$('dapp-two-requests').addEventListener('click', () => {
+    clearOutputs();
+    $('dapp-settled-count').textContent = '0';
+    let settled = 0;
+    const markSettled = (): void => {
+        settled += 1;
+        $('dapp-settled-count').textContent = String(settled);
+    };
+    // First request: signData (no balance guard, simplest modal).
+    void connector
+        .signData({ type: 'text', text: 'QA queue request #1 (signData)' })
+        .catch(() => {})
+        .finally(markSettled);
+    // Second request: signMessage. Issued synchronously right after, before #1 is resolved.
+    void connector
+        .signMessage({
+            validUntil: Math.floor(Date.now() / 1000) + 600,
+            messages: [{ address: TARGET_ADDRESS, amount: '1000' }],
+        })
+        .catch(() => {})
+        .finally(markSettled);
+});
diff --git a/apps/demo-wallet/e2e/mocks/walletApi.ts b/apps/demo-wallet/e2e/mocks/walletApi.ts
index 6d90c6896..5b8176192 100644
--- a/apps/demo-wallet/e2e/mocks/walletApi.ts
+++ b/apps/demo-wallet/e2e/mocks/walletApi.ts
@@ -469,8 +469,18 @@ export async function mockWalletApi(page: Page, opts: MockWalletApiOpts = {}): P
     await page.route(TRACES_RE, (route) => {
         // `getEvents` queries /api/v3/traces?account=&limit=&offset= — the trace's tx
         // must be stamped with this account or `toEvent` emits no transfer actions (no rows).
-        const account = new URL(route.request().url()).searchParams.get('account');
-        return json(route, 200, tracesBody(events, account));
+        // Honour the `limit`/`offset` window so a paginated "Load more" fetch advances through
+        // the events instead of re-receiving the full list every time (which would loop forever,
+        // since `hasNext` is `traces.length >= limit`). Defaults mirror ApiClientToncenter.getEvents
+        // (`limit` 20, `offset` 0).
+        const params = new URL(route.request().url()).searchParams;
+        const account = params.get('account');
+        const limit = Number.parseInt(params.get('limit') ?? '', 10);
+        const offset = Number.parseInt(params.get('offset') ?? '', 10);
+        const safeLimit = Number.isFinite(limit) && limit > 0 ? limit : 20;
+        const safeOffset = Number.isFinite(offset) && offset >= 0 ? offset : 0;
+        const page = events.slice(safeOffset, safeOffset + safeLimit);
+        return json(route, 200, tracesBody(page, account));
     });
     await page.route(RATES_RE, (route) => json(route, 200, ratesBody(rates)));
 }
diff --git a/apps/demo-wallet/e2e/qa/WalletApp.ts b/apps/demo-wallet/e2e/qa/WalletApp.ts
index f7dacce31..7ca719e8c 100644
--- a/apps/demo-wallet/e2e/qa/WalletApp.ts
+++ b/apps/demo-wallet/e2e/qa/WalletApp.ts
@@ -73,6 +73,15 @@ export abstract class WalletApp {
         } catch {
             if (!(await hasContent())) {
                 await page.reload({ waitUntil: 'domcontentloaded' });
+                // `domcontentloaded` only means the shell HTML parsed — React hasn't necessarily
+                // mounted yet. Wait for `#root` to actually have child content before returning, so
+                // callers never receive an unmounted page (mirrors the first-load mount gate above).
+                // Best-effort: swallow a timeout so a non-dev build that mounts instantly is unaffected.
+                try {
+                    await page.locator('#root > *').first().waitFor({ state: 'attached', timeout: 4000 });
+                } catch {
+                    // leave the page as-is; the caller's own first interaction will surface any failure
+                }
             }
         }
     }
diff --git a/apps/demo-wallet/e2e/ton-connect/MockDapp.ts b/apps/demo-wallet/e2e/ton-connect/MockDapp.ts
index 66f14a9b2..87100237b 100644
--- a/apps/demo-wallet/e2e/ton-connect/MockDapp.ts
+++ b/apps/demo-wallet/e2e/ton-connect/MockDapp.ts
@@ -7,6 +7,7 @@
  */
 
 import type { Page } from '@playwright/test';
+import { step } from 'allure-js-commons';
 
 /**
  * Page-object over the QA Mock dApp (`e2e/mock-dapp/`, served on :5175) — the raw
@@ -64,6 +65,33 @@ export class MockDapp {
         return (await this.page.getByTestId('dapp-result').textContent()) ?? '';
     }
 
+    /**
+     * Fire TWO requests back-to-back (signData then signMessage) WITHOUT awaiting the first, to
+     * exercise the wallet's request queue. Returns immediately after the click; the requests settle
+     * asynchronously (track via {@link settledCount}).
+     */
+    async fireTwoRequests(): Promise {
+        await step('Fire two TON Connect requests without awaiting the first', async () => {
+            await this.page.getByTestId('dapp-two-requests').click();
+        });
+    }
+
+    /** Current number of requests that have settled since `fireTwoRequests()` (`#dapp-settled-count`). */
+    async settledCount(): Promise {
+        const text = (await this.page.getByTestId('dapp-settled-count').textContent()) ?? '0';
+        return Number.parseInt(text, 10) || 0;
+    }
+
+    /** Wait until exactly `n` of the fired requests have settled. */
+    async waitForSettledCount(n: number): Promise {
+        await step(`Wait until ${n} request(s) have settled on the dApp`, async () => {
+            await this.page.waitForFunction(
+                (expected) => document.getElementById('dapp-settled-count')?.textContent === String(expected),
+                n,
+            );
+        });
+    }
+
     /** Wait for and return the last error text (`#dapp-error`). */
     async error(): Promise {
         await this.page.waitForFunction(() => {
diff --git a/apps/demo-wallet/e2e/ui-tests/assets.spec.ts b/apps/demo-wallet/e2e/ui-tests/assets.spec.ts
index 156f27bc8..ca82400c3 100644
--- a/apps/demo-wallet/e2e/ui-tests/assets.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/assets.spec.ts
@@ -78,6 +78,11 @@ test.describe('Assets page (mocked wallet API)', () => {
         await assets.waitForPage();
 
         await expect(assets.gramName).toBeVisible();
-        await expect(page.getByText('$', { exact: false }).first()).toBeVisible();
+        // Scope the fiat assertion to the GRAM row itself (the asset under test), not page-wide —
+        // a bare page `$` match would pass on any unrelated dollar amount. Within the row container
+        // (`.flex.items-center.gap-3.py-2`), the right-hand FIAT column is the `div.text-right`
+        // (`asset-row.tsx`); its inner `$` is the GRAM holding's fiat value (≈$65 here).
+        const gramRow = assets.gramName.locator('xpath=ancestor::div[contains(@class,"items-center")][1]');
+        await expect(gramRow.locator('div.text-right').getByText('$', { exact: false })).toBeVisible();
     });
 });
diff --git a/apps/demo-wallet/e2e/ui-tests/dashboard.spec.ts b/apps/demo-wallet/e2e/ui-tests/dashboard.spec.ts
index b8d3a5ced..f5ca035e1 100644
--- a/apps/demo-wallet/e2e/ui-tests/dashboard.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/dashboard.spec.ts
@@ -24,10 +24,18 @@ test.describe('Dashboard smoke (mocked wallet API)', () => {
     test('Renders the fiat total once balance and rates load', async ({ page }) => {
         // BalanceTotal shows "$." only when balance !== undefined && ratesUpdated > 0.
         // With a 12.5 GRAM balance @ $5.20 plus jettons, the integer part is non-zero.
-        const total = page.getByText('$', { exact: false }).first();
-        await expect(total).toBeVisible();
-        // The styled total renders the dollar sign in its own span; assert the integer part shows up.
-        await expect(page.getByText(/^\d{1,3}(,\d{3})*$/).first()).toBeVisible();
+        //
+        // Scope to the balance-total widget itself, not the whole page — a bare page `$` + integer
+        // regex can match unrelated copy (asset rows, swap fields, etc.). BalanceTotal renders no
+        // testid, but the styled total lives in a single `font-display` container whose first span
+        // is the `$` sign and whose `text-gray-900` span is the integer part (balance-total.tsx).
+        const totalWidget = page.locator('div.font-display').first();
+        await expect(totalWidget).toBeVisible();
+        // The widget renders "$" + integer + "." + fraction as separate spans. Assert the `$` span
+        // and the INTEGER part (the `text-gray-900` span — distinct from the gray fraction span,
+        // which a bare digit regex would also match). Integer part is non-zero (>= 1 digit group).
+        await expect(totalWidget.getByText('$', { exact: true })).toBeVisible();
+        await expect(totalWidget.locator('span.text-gray-900')).toHaveText(/^\d{1,3}(,\d{3})*$/);
     });
 
     test('Native row is labelled GRAM with the /gram.svg icon', async ({ page }) => {
diff --git a/apps/demo-wallet/e2e/ui-tests/staking.spec.ts b/apps/demo-wallet/e2e/ui-tests/staking.spec.ts
index 9131b8aea..e0d0dda5a 100644
--- a/apps/demo-wallet/e2e/ui-tests/staking.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/staking.spec.ts
@@ -32,9 +32,12 @@ test.describe('Staking page form (mocked wallet API, no network send)', () => {
     });
 
     test('Max fills the stake amount keeping the gas reserve', async ({ page }) => {
-        // On the stake tab (balance 12.5 GRAM), Max fills the amount with balance minus ~1.2 GRAM.
+        // On the stake tab, Max writes (available balance − STAKE_GAS_RESERVE). With the mocked
+        // 12.5 GRAM balance and the component's 1.2 GRAM reserve (staking-interface.tsx
+        // STAKE_GAS_RESERVE), handleMax sets `String(12.5 - 1.2)` = "11.3" exactly — assert that
+        // reserve-adjusted value, not merely that something non-empty was written.
         await page.getByRole('button', { name: 'Max', exact: true }).click();
-        await expect(page.getByTestId('stake-amount-input')).not.toHaveValue('');
+        await expect(page.getByTestId('stake-amount-input')).toHaveValue('11.3');
     });
 
     test('Guards a stake that would not keep the gas reserve', async ({ page }) => {
diff --git a/apps/demo-wallet/e2e/ui-tests/swap.spec.ts b/apps/demo-wallet/e2e/ui-tests/swap.spec.ts
index 56492bcdd..e33c74937 100644
--- a/apps/demo-wallet/e2e/ui-tests/swap.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/swap.spec.ts
@@ -32,11 +32,18 @@ test.describe('Swap page form (mocked wallet API, no network send)', () => {
     });
 
     test('Max fills the From amount keeping a gas reserve', async ({ page }) => {
-        // The From side (GRAM, balance 12.5) shows a Max button; tapping it fills the From input
-        // (balance minus the 0.1 GRAM reserve).
+        // The From side is the native GRAM (balance 12.5). Max writes (balance − TON_GAS_RESERVE):
+        // with the component's 0.1 GRAM reserve (swap-interface.tsx TON_GAS_RESERVE) handleMaxFrom
+        // sets `(12.5 - 0.1).toString()` = "12.4". The point of this test is that Max KEEPS A
+        // RESERVE, so assert the written value is strictly LESS than the full balance (12.5), not
+        // merely non-empty.
         const fromInput = page.locator('input[inputmode="decimal"]').first();
         await page.getByRole('button', { name: 'Max', exact: true }).first().click();
-        await expect(fromInput).not.toHaveValue('');
+        await expect(fromInput).toHaveValue('12.4');
+        // Guard the intent independently of the exact reserve constant: never the full balance.
+        const written = parseFloat(await fromInput.inputValue());
+        expect(written).toBeLessThan(12.5);
+        expect(written).toBeGreaterThan(0);
     });
 
     test('Primary action reads "Get Quote" before a quote exists', async ({ page }) => {

From bbaaf89d1d98d25470bbefda9d416d0ff3f1f505 Mon Sep 17 00:00:00 2001
From: Pavel Lesyuk 
Date: Tue, 30 Jun 2026 16:32:05 +0800
Subject: [PATCH 6/6] test(demo-wallet e2e): scrub internal QA refs from public
 code; wrap inline ui-test steps

- Remove internal test-plan section numbers, tracker IDs and TestOps project
  numbers from e2e comments and test/describe names (this is a public repo);
  keep behavior descriptions and repo-relative source code-refs.
- Wrap the inline import/create-wallet ui-test flows in named allure.step so the
  Allure/TestOps execution reads as logical steps, on par with the page objects.
---
 .../demo-wallet/e2e/demo-wallet/DemoWallet.ts |   8 +-
 .../e2e/mock-dapp-tests/guards.spec.ts        |   4 +-
 .../e2e/mock-dapp-tests/paste-routing.spec.ts |  15 ++-
 .../e2e/mock-dapp-tests/queue.spec.ts         |   4 +-
 .../e2e/ui-tests/formatting.spec.ts           |   4 +-
 .../e2e/ui-tests/importWallet.spec.ts         | 100 +++++++++++-------
 .../e2e/ui-tests/newWallet.spec.ts            |  89 ++++++++++------
 apps/demo-wallet/e2e/ui-tests/nft.spec.ts     |   2 +-
 8 files changed, 133 insertions(+), 93 deletions(-)

diff --git a/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts b/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
index 0045833d6..1aa60d342 100644
--- a/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
+++ b/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
@@ -118,8 +118,8 @@ export class DemoWallet extends WalletApp {
      * to sign an internal message without broadcasting it). The redesigned wallet renders
      * this as a per-type "Sign message for {dApp}" modal (`sign-message-request`; actions
      * `sign-message-approve` / `sign-message-reject`). Parity with the appkit-minter's
-     * `DemoWallet.signMessage` — the two page-objects are kept split on purpose (see
-     * TON-1682 D2; if kit moves to its own repo the object can't be shared).
+     * `DemoWallet.signMessage` — the two page-objects are kept split on purpose (if kit
+     * moves to its own repo the object can't be shared).
      */
     async signMessage(confirm: boolean = true): Promise {
         await step(confirm ? 'Approve & sign message' : 'Reject sign-message request', async () => {
@@ -144,7 +144,7 @@ export class DemoWallet extends WalletApp {
      *   - the title `
` static verb (e.g. "Connect to"),
      *   - a distinctive disclaimer/subtitle/section substring,
      *   - the per-type approve & reject buttons by testid.
-     * Strings traced to apps/demo-wallet/src/features/ton-connect/components/* (see TON-1701).
+     * Strings traced to apps/demo-wallet/src/features/ton-connect/components/*.
      */
     async expectConnectModal(): Promise {
         await step('Assert connect-request modal', async () => {
@@ -301,7 +301,7 @@ export class DemoWallet extends WalletApp {
      * user pasting from the OS clipboard anywhere on the page (not into a specific field). The
      * wallet's global `usePasteHandler` listens on `document` and auto-routes TON Connect URLs
      * (tc:// / ton:// / http(s)://) to `handleTonConnectUrl` (use-paste-handler.ts). Used by the
-     * §18.2 / §18.4 paste-routing checks.
+     * global paste-routing checks.
      */
     async pasteIntoDocument(text: string): Promise {
         await step('Paste text into the wallet page (global clipboard paste)', async () => {
diff --git a/apps/demo-wallet/e2e/mock-dapp-tests/guards.spec.ts b/apps/demo-wallet/e2e/mock-dapp-tests/guards.spec.ts
index 53d694cfe..7ac70729e 100644
--- a/apps/demo-wallet/e2e/mock-dapp-tests/guards.spec.ts
+++ b/apps/demo-wallet/e2e/mock-dapp-tests/guards.spec.ts
@@ -9,9 +9,9 @@
 import { mockDappFixture } from '../ton-connect/mockDappFixture';
 
 /**
- * Mock-first two-tab TON Connect — modal dismissibility guards (test-plan §18.1).
+ * Mock-first two-tab TON Connect — modal dismissibility guards.
  *
- * Two invariants of the redesigned wallet (TON-1682):
+ * Two invariants of the redesigned wallet:
  *   - The TON Connect REQUEST modals (`connect-request` / `transaction-request` /
  *     `sign-message-request` / `sign-data-request`) are NON-dismissible: backdrop click / Esc must
  *     NOT close them — only Approve/Reject. They render via the shared DappRequestModal with
diff --git a/apps/demo-wallet/e2e/mock-dapp-tests/paste-routing.spec.ts b/apps/demo-wallet/e2e/mock-dapp-tests/paste-routing.spec.ts
index 8e71b307e..95c2289c9 100644
--- a/apps/demo-wallet/e2e/mock-dapp-tests/paste-routing.spec.ts
+++ b/apps/demo-wallet/e2e/mock-dapp-tests/paste-routing.spec.ts
@@ -11,7 +11,7 @@ import { expect } from '@playwright/test';
 import { mockDappFixture } from '../ton-connect/mockDappFixture';
 
 /**
- * Mock-first two-tab TON Connect — global clipboard paste routing (test-plan §18.2 + §18.4).
+ * Mock-first two-tab TON Connect — global clipboard paste routing.
  *
  * The wallet's global `usePasteHandler` (use-paste-handler.ts) listens on `document` and, when a
  * pasted string starts with `tc://` / `ton://` / `http(s)://`, routes it to `handleTonConnectUrl`
@@ -19,9 +19,9 @@ import { mockDappFixture } from '../ton-connect/mockDappFixture';
  * (dashboard-header.tsx), so it is SUPPRESSED while the Connect-to-dApp paste modal is open — to
  * avoid double-handling alongside that modal's own textarea.
  *
- * - §18.2: a real `tc://` connect link pasted globally auto-routes → connect-request modal appears;
+ * - A real `tc://` connect link pasted globally auto-routes → connect-request modal appears;
  *   and with the paste modal open, the same global paste is suppressed (no connect-request modal).
- * - §18.4: non-TON garbage text pasted globally is ignored (no connect-request modal).
+ * - Non-TON garbage text pasted globally is ignored (no connect-request modal).
  *
  * Paste is simulated by dispatching a synthetic `ClipboardEvent('paste')` on `document` carrying the
  * text in a `DataTransfer` — exactly the shape `usePasteHandler` reads (`clipboardData.getData`).
@@ -29,10 +29,7 @@ import { mockDappFixture } from '../ton-connect/mockDappFixture';
 const test = mockDappFixture();
 
 test.describe('TON Connect mock-dApp — global paste routing (two-tab)', () => {
-    test('§18.2 A real tc:// link pasted globally auto-routes to the connect-request modal', async ({
-        wallet,
-        dapp,
-    }) => {
+    test('A real tc:// link pasted globally auto-routes to the connect-request modal', async ({ wallet, dapp }) => {
         const url = await dapp.connectUrl();
         expect(url.startsWith('tc://')).toBe(true);
 
@@ -46,7 +43,7 @@ test.describe('TON Connect mock-dApp — global paste routing (two-tab)', () =>
         await wallet.connect(false);
     });
 
-    test('§18.2 Global paste is suppressed while the Connect-to-dApp paste modal is open', async ({ wallet }) => {
+    test('Global paste is suppressed while the Connect-to-dApp paste modal is open', async ({ wallet }) => {
         // Open the paste modal — this sets isConnectOpen=true → the global paste handler unsubscribes.
         await wallet.openPasteModal();
 
@@ -56,7 +53,7 @@ test.describe('TON Connect mock-dApp — global paste routing (two-tab)', () =>
         await wallet.expectNoRequestModal(['connect-request']);
     });
 
-    test('§18.4 Non-TON clipboard text pasted globally is ignored', async ({ wallet }) => {
+    test('Non-TON clipboard text pasted globally is ignored', async ({ wallet }) => {
         // Random garbage that matches none of the tc:// / ton:// / http(s):// prefixes.
         await wallet.pasteIntoDocument('just some random clipboard noise — not a TON Connect link');
         await wallet.expectNoRequestModal(['connect-request']);
diff --git a/apps/demo-wallet/e2e/mock-dapp-tests/queue.spec.ts b/apps/demo-wallet/e2e/mock-dapp-tests/queue.spec.ts
index 984304e36..0c9e16c9a 100644
--- a/apps/demo-wallet/e2e/mock-dapp-tests/queue.spec.ts
+++ b/apps/demo-wallet/e2e/mock-dapp-tests/queue.spec.ts
@@ -11,7 +11,7 @@ import { expect } from '@playwright/test';
 import { mockDappFixture } from '../ton-connect/mockDappFixture';
 
 /**
- * Mock-first two-tab TON Connect — request queue (test-plan §18.3).
+ * Mock-first two-tab TON Connect — request queue.
  *
  * The wallet processes TON Connect requests ONE AT A TIME via its request queue
  * (`tonConnectSlice.ts`: `enqueueRequest` → `processNextRequest`, gated on `isProcessing`; the next
@@ -31,7 +31,7 @@ import { mockDappFixture } from '../ton-connect/mockDappFixture';
  * The bridge does not guarantee which of the two requests is delivered first, so the assertions are
  * order-agnostic: exactly one of {sign-data-request, sign-message-request} is shown at a time.
  *
- * SCOPE NOTE — what this asserts vs. what it does NOT. The 18.3 invariant under test is the WALLET'S
+ * SCOPE NOTE — what this asserts vs. what it does NOT. The invariant under test is the WALLET'S
  * queue: one request modal at a time, the second shown only after the first is resolved. That is
  * fully proven below (one modal → first settles on the dApp → second modal appears → resolved). It
  * is verified empirically that only the FIRST request's response round-trips back to the dApp
diff --git a/apps/demo-wallet/e2e/ui-tests/formatting.spec.ts b/apps/demo-wallet/e2e/ui-tests/formatting.spec.ts
index eeea43850..0fa978d7f 100644
--- a/apps/demo-wallet/e2e/ui-tests/formatting.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/formatting.spec.ts
@@ -16,12 +16,12 @@ import { mockWalletApi, USDT_MASTER_RAW } from '../mocks/walletApi';
 const test = testWithUIFixture();
 
 /**
- * §13 amount formatting through the Assets list, where the native GRAM row and jetton rows
+ * Amount formatting through the Assets list, where the native GRAM row and jetton rows
  * render `formatLargeValue(amount, 4)`. `formatLargeValue` abbreviates ≥1M to M/B/T using the
  * integer-digit count, ALWAYS prints 2 fractional digits in that branch (the `decimals` arg is
  * ignored — silent precision drop ≥1M) and floors rather than rounds.
  */
-test.describe('Amount formatting on the Assets list (§13)', () => {
+test.describe('Amount formatting on the Assets list', () => {
     test('Abbreviates a ≥1M GRAM balance to "M" with 2 digits, floored', async ({ webOnly: _webOnly, page }) => {
         // 1,234,567.899... GRAM (raw nanotons) → "1.23M" (floor to .23, never .24; only 2 digits even
         // though the row asks for 4). This is the precision-drop + floor behaviour in one assertion.
diff --git a/apps/demo-wallet/e2e/ui-tests/importWallet.spec.ts b/apps/demo-wallet/e2e/ui-tests/importWallet.spec.ts
index 2d8c03145..2d4d6eb3a 100644
--- a/apps/demo-wallet/e2e/ui-tests/importWallet.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/importWallet.spec.ts
@@ -9,6 +9,7 @@
 import { expect } from '@playwright/test';
 import type { Page } from '@playwright/test';
 import type { NetworkType } from '@demo/wallet-core';
+import { step } from 'allure-js-commons';
 
 import { testWithUIFixture } from './UITestFixture';
 import { TEST_PASSWORD } from '../constants';
@@ -42,12 +43,14 @@ const testMatrix: ImportWalletTestCase[] = [
 
 /** Welcome → "Add an existing wallet" → "Recovery phrase" → set a password → land on the import screen. */
 async function openImportScreen(page: Page): Promise {
-    await page.getByTestId('welcome-add-existing').click();
-    await page.getByTestId('add-wallet-import').click();
-    await page.getByTestId('password').fill(TEST_PASSWORD);
-    await page.getByTestId('password-confirm').fill(TEST_PASSWORD);
-    await page.getByTestId('password-submit').click();
-    await page.getByTestId('paste-mnemonic').waitFor({ state: 'visible' });
+    await step('Open the import screen', async () => {
+        await page.getByTestId('welcome-add-existing').click();
+        await page.getByTestId('add-wallet-import').click();
+        await page.getByTestId('password').fill(TEST_PASSWORD);
+        await page.getByTestId('password-confirm').fill(TEST_PASSWORD);
+        await page.getByTestId('password-submit').click();
+        await page.getByTestId('paste-mnemonic').waitFor({ state: 'visible' });
+    });
 }
 
 test.describe('Import Wallet Flow', () => {
@@ -62,25 +65,32 @@ test.describe('Import Wallet Flow', () => {
         const testName = `Import wallet - ${testCase.network} / ${testCase.version} / ${testCase.interfaceType}`;
 
         test(testName, async ({ page }) => {
-            await page.getByTestId(`network-select-${testCase.network}`).click();
-            await expect(page.getByTestId(`network-select-${testCase.network}`)).toBeEnabled();
-
-            await page.getByTestId(`version-select-${testCase.version}`).click();
-            await expect(page.getByTestId(`version-select-${testCase.version}`)).toBeEnabled();
-
-            await page.getByTestId(`interface-select-${testCase.interfaceType}`).click();
-            await expect(page.getByTestId(`interface-select-${testCase.interfaceType}`)).toBeEnabled();
-
-            // Paste the recovery phrase via the Paste button (reads the clipboard).
-            await page.evaluate(async (mnemonic) => {
-                await navigator.clipboard.writeText(mnemonic);
-            }, TEST_MNEMONIC);
-            await page.getByTestId('paste-mnemonic').click();
-
-            await page.getByTestId('import-wallet-process').click();
-
-            // The settings button only exists on the wallet dashboard.
-            await expect(page.getByTestId('wallet-menu')).toBeVisible();
+            await step(
+                `Select network/version/interface (${testCase.network} / ${testCase.version} / ${testCase.interfaceType})`,
+                async () => {
+                    await page.getByTestId(`network-select-${testCase.network}`).click();
+                    await expect(page.getByTestId(`network-select-${testCase.network}`)).toBeEnabled();
+
+                    await page.getByTestId(`version-select-${testCase.version}`).click();
+                    await expect(page.getByTestId(`version-select-${testCase.version}`)).toBeEnabled();
+
+                    await page.getByTestId(`interface-select-${testCase.interfaceType}`).click();
+                    await expect(page.getByTestId(`interface-select-${testCase.interfaceType}`)).toBeEnabled();
+                },
+            );
+
+            await step('Paste recovery phrase & import', async () => {
+                // Paste the recovery phrase via the Paste button (reads the clipboard).
+                await page.evaluate(async (mnemonic) => {
+                    await navigator.clipboard.writeText(mnemonic);
+                }, TEST_MNEMONIC);
+                await page.getByTestId('paste-mnemonic').click();
+
+                await page.getByTestId('import-wallet-process').click();
+
+                // The settings button only exists on the wallet dashboard.
+                await expect(page.getByTestId('wallet-menu')).toBeVisible();
+            });
         });
     }
 });
@@ -91,18 +101,24 @@ test.describe('Import Wallet - Validation', () => {
     });
 
     test('Import button is disabled with no mnemonic', async ({ page }) => {
-        await expect(page.getByTestId('import-wallet-process')).toBeDisabled();
+        await step('Verify the import button is disabled', async () => {
+            await expect(page.getByTestId('import-wallet-process')).toBeDisabled();
+        });
     });
 
     test('Import button is disabled with less than 12 words', async ({ page }) => {
-        const testWords = 'word1 word2 word3 word4 word5 word6 word7 word8 word9 word10';
-        await page.evaluate(async (mnemonic) => {
-            await navigator.clipboard.writeText(mnemonic);
-        }, testWords);
+        await step('Paste a recovery phrase with too few words', async () => {
+            const testWords = 'word1 word2 word3 word4 word5 word6 word7 word8 word9 word10';
+            await page.evaluate(async (mnemonic) => {
+                await navigator.clipboard.writeText(mnemonic);
+            }, testWords);
 
-        await page.getByTestId('paste-mnemonic').click();
+            await page.getByTestId('paste-mnemonic').click();
+        });
 
-        await expect(page.getByTestId('import-wallet-process')).toBeDisabled();
+        await step('Verify the import button is disabled', async () => {
+            await expect(page.getByTestId('import-wallet-process')).toBeDisabled();
+        });
     });
 
     test('Clear button clears all words', async ({ page }) => {
@@ -110,14 +126,20 @@ test.describe('Import Wallet - Validation', () => {
             test.skip(true, 'WALLET_MNEMONIC environment variable is required');
         }
 
-        await page.evaluate(async (mnemonic) => {
-            await navigator.clipboard.writeText(mnemonic);
-        }, TEST_MNEMONIC);
-        await page.getByTestId('paste-mnemonic').click();
+        await step('Paste the recovery phrase', async () => {
+            await page.evaluate(async (mnemonic) => {
+                await navigator.clipboard.writeText(mnemonic);
+            }, TEST_MNEMONIC);
+            await page.getByTestId('paste-mnemonic').click();
+        });
 
-        await page.getByTestId('clear-mnemonic').click();
+        await step('Clear the words', async () => {
+            await page.getByTestId('clear-mnemonic').click();
+        });
 
-        await expect(page.getByTestId('word-count')).toHaveText('0/24 words');
-        await expect(page.getByTestId('import-wallet-process')).toBeDisabled();
+        await step('Verify the word count resets and the import button is disabled', async () => {
+            await expect(page.getByTestId('word-count')).toHaveText('0/24 words');
+            await expect(page.getByTestId('import-wallet-process')).toBeDisabled();
+        });
     });
 });
diff --git a/apps/demo-wallet/e2e/ui-tests/newWallet.spec.ts b/apps/demo-wallet/e2e/ui-tests/newWallet.spec.ts
index 9b9ecdeef..baca1eec2 100644
--- a/apps/demo-wallet/e2e/ui-tests/newWallet.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/newWallet.spec.ts
@@ -7,6 +7,7 @@
  */
 
 import { expect } from '@playwright/test';
+import { step } from 'allure-js-commons';
 
 import { testWithUIFixture } from './UITestFixture';
 import { TEST_PASSWORD } from '../constants';
@@ -16,65 +17,85 @@ const test = testWithUIFixture();
 
 test.describe('New Wallet Flow', () => {
     test.beforeEach(async ({ page }) => {
-        // Welcome → "Create a new wallet" → set a password → land on the Recovery phrase screen.
-        await page.getByTestId('welcome-create').click();
-        await page.getByTestId('password').fill(TEST_PASSWORD);
-        await page.getByTestId('password-confirm').fill(TEST_PASSWORD);
-        await page.getByTestId('password-submit').click();
-        await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
+        await step('Open the recovery-phrase screen', async () => {
+            // Welcome → "Create a new wallet" → set a password → land on the Recovery phrase screen.
+            await page.getByTestId('welcome-create').click();
+            await page.getByTestId('password').fill(TEST_PASSWORD);
+            await page.getByTestId('password-confirm').fill(TEST_PASSWORD);
+            await page.getByTestId('password-submit').click();
+            await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
+        });
     });
 
     test('Create new wallet on Mainnet', async ({ page }) => {
         const setupWallet = new SetupWalletPage(page);
 
-        // Mainnet is selected by default.
-        await expect(page.getByTestId('network-select-mainnet')).toBeEnabled();
+        await step('Reveal the recovery phrase (Mainnet, selected by default)', async () => {
+            // Mainnet is selected by default.
+            await expect(page.getByTestId('network-select-mainnet')).toBeEnabled();
 
-        await page.getByTestId('reveal-mnemonic').click();
+            await page.getByTestId('reveal-mnemonic').click();
 
-        await expect(page.getByTestId('mnemonic-grid')).toBeVisible();
-        await expect(page.getByTestId('mnemonic-word-1')).toBeVisible();
+            await expect(page.getByTestId('mnemonic-grid')).toBeVisible();
+            await expect(page.getByTestId('mnemonic-word-1')).toBeVisible();
+        });
 
         // Continue → "Have you saved it?" modal → hold-to-continue.
         await setupWallet.confirmAndCreate();
 
-        // The settings button only exists on the wallet dashboard.
-        await expect(page.getByTestId('wallet-menu')).toBeVisible();
+        await step('Verify the wallet dashboard is shown', async () => {
+            // The settings button only exists on the wallet dashboard.
+            await expect(page.getByTestId('wallet-menu')).toBeVisible();
+        });
     });
 
     test('Create new wallet on Testnet', async ({ page }) => {
         const setupWallet = new SetupWalletPage(page);
 
-        await page.getByTestId('network-select-testnet').click();
-        await expect(page.getByTestId('network-select-testnet')).toBeEnabled();
+        await step('Select Testnet', async () => {
+            await page.getByTestId('network-select-testnet').click();
+            await expect(page.getByTestId('network-select-testnet')).toBeEnabled();
+        });
 
-        await page.getByTestId('reveal-mnemonic').click();
+        await step('Reveal the recovery phrase', async () => {
+            await page.getByTestId('reveal-mnemonic').click();
 
-        await expect(page.getByTestId('mnemonic-grid')).toBeVisible();
-        await expect(page.getByTestId('mnemonic-word-1')).toBeVisible();
+            await expect(page.getByTestId('mnemonic-grid')).toBeVisible();
+            await expect(page.getByTestId('mnemonic-word-1')).toBeVisible();
+        });
 
         await setupWallet.confirmAndCreate();
 
-        await expect(page.getByTestId('wallet-menu')).toBeVisible();
+        await step('Verify the wallet dashboard is shown', async () => {
+            await expect(page.getByTestId('wallet-menu')).toBeVisible();
+        });
     });
 
     test('Cannot proceed without saving confirmation', async ({ page }) => {
         const setupWallet = new SetupWalletPage(page);
 
-        // Continue is disabled until the recovery phrase has been revealed.
-        await expect(setupWallet.continueButton).toBeDisabled();
-
-        await page.getByTestId('reveal-mnemonic').click();
-
-        await expect(setupWallet.continueButton).toBeEnabled();
-
-        // Continue only opens the confirmation modal — it doesn't create the wallet.
-        await setupWallet.openConfirm();
-        await expect(setupWallet.holdToContinue).toBeVisible();
-
-        // A short tap is not enough; the gesture must be held to confirm.
-        await setupWallet.tapHold();
-        await expect(page.getByTestId('wallet-menu')).toBeHidden();
-        await expect(setupWallet.holdToContinue).toBeVisible();
+        await step('Verify Continue is disabled before the phrase is revealed', async () => {
+            // Continue is disabled until the recovery phrase has been revealed.
+            await expect(setupWallet.continueButton).toBeDisabled();
+        });
+
+        await step('Reveal the recovery phrase and verify Continue is enabled', async () => {
+            await page.getByTestId('reveal-mnemonic').click();
+
+            await expect(setupWallet.continueButton).toBeEnabled();
+        });
+
+        await step('Open the confirmation modal (does not create the wallet)', async () => {
+            // Continue only opens the confirmation modal — it doesn't create the wallet.
+            await setupWallet.openConfirm();
+            await expect(setupWallet.holdToContinue).toBeVisible();
+        });
+
+        await step('Verify a short tap does not confirm', async () => {
+            // A short tap is not enough; the gesture must be held to confirm.
+            await setupWallet.tapHold();
+            await expect(page.getByTestId('wallet-menu')).toBeHidden();
+            await expect(setupWallet.holdToContinue).toBeVisible();
+        });
     });
 });
diff --git a/apps/demo-wallet/e2e/ui-tests/nft.spec.ts b/apps/demo-wallet/e2e/ui-tests/nft.spec.ts
index 7d038ccba..48b9ca13b 100644
--- a/apps/demo-wallet/e2e/ui-tests/nft.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/nft.spec.ts
@@ -31,7 +31,7 @@ test.describe('NFT page (mocked wallet API)', () => {
     });
 
     test('Hides the dashboard NFTs entry when the wallet holds no NFTs', async ({ webOnly: _webOnly, page }) => {
-        // empty-section-hides (§6.8): with 0 NFTs the NftsCard renders nothing, so there is no
+        // empty-section-hides: with 0 NFTs the NftsCard renders nothing, so there is no
         // "View all NFTs" link — the only entry point to /wallet/nft is removed.
         await mockWalletApi(page, { nfts: [] });
         await createWalletOnDashboard(page);