diff --git a/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts b/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
index 48a30df62..c6e3adbbd 100644
--- a/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
+++ b/apps/demo-wallet/e2e/demo-wallet/DemoWallet.ts
@@ -27,30 +27,26 @@ export class DemoWallet extends WalletApp {
             throw new Error('[importWallet] mnemonic is required setup WALLET_MNEMONIC');
         }
         const app = await this.open();
+
+        // Welcome → "Add an existing wallet" → "Recovery phrase"
+        await app.getByTestId('welcome-add-existing').click();
+        await app.getByTestId('add-wallet-import').click();
+
         // Setup password
-        await app.getByTestId('title').filter({ hasText: 'Setup Password', visible: true });
-        await app.getByTestId('subtitle').filter({ hasText: 'Create Password', visible: true });
         await app.getByTestId('password').fill(this.password);
         await app.getByTestId('password-confirm').fill(this.password);
         await app.getByTestId('password-submit').click();
 
-        // Navigate to Import tab
-        await app.getByTestId('title').filter({ hasText: 'Setup Wallet' }).waitFor({ state: 'visible' });
-        await app.getByTestId('tab-import').click();
-        await app.getByTestId('subtitle').filter({ hasText: 'Import Wallet', visible: true });
-
-        // Select mainnet
+        // Import wallet screen: select mainnet, paste the phrase, continue
         await app.getByTestId('network-select-mainnet').click();
-
-        // Paste mnemonic using clipboard
         await app.evaluate(async (m) => {
             await navigator.clipboard.writeText(m);
         }, mnemonic);
         await app.getByTestId('paste-mnemonic').click();
-
-        // Import wallet
         await app.getByTestId('import-wallet-process').click();
-        await app.getByTestId('title').filter({ hasText: 'TON Wallet' }).waitFor({ state: 'attached' });
+
+        // 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();
@@ -64,6 +60,8 @@ export class DemoWallet extends WalletApp {
     async connectBy(url: string, shouldSkipConnect: boolean = false, confirm: boolean = true): Promise<void> {
         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();
 
@@ -79,11 +77,11 @@ export class DemoWallet extends WalletApp {
             return;
         }
 
-        const modal = app.getByTestId('request').filter({ hasText: 'Connect Request' });
+        const modal = app.getByTestId('connect-request');
         await modal.waitFor({ state: 'visible' });
         const chose = app.getByTestId(confirm ? 'connect-approve' : 'connect-reject');
 
-        await chose.waitFor({ state: 'attached' });
+        await chose.waitFor({ state: 'visible' });
         await chose.click();
         await modal.waitFor({ state: 'detached' });
         await this.close();
@@ -91,10 +89,10 @@ export class DemoWallet extends WalletApp {
 
     async signData(confirm: boolean = true): Promise<void> {
         const app = await this.open();
-        const modal = app.getByTestId('request').filter({ hasText: 'Sign Data Request' });
+        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: 'attached' });
+        await chose.waitFor({ state: 'visible' });
         await chose.click();
         await modal.waitFor({ state: 'detached' });
         await this.close();
@@ -110,10 +108,10 @@ export class DemoWallet extends WalletApp {
 
     async accept(confirm: boolean = true): Promise<void> {
         const app = await this.open();
-        const modal = app.getByTestId('request').filter({ hasText: 'Transaction Request' });
+        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: 'attached' });
+        await chose.waitFor({ state: 'visible' });
         await chose.click();
         await modal.waitFor({ state: 'detached' });
         await this.close();
@@ -133,19 +131,15 @@ export class DemoWallet extends WalletApp {
         await app.getByTestId('use-my-address').click();
 
         // Fill in amount
-        await app.getByTestId('amount-input').fill(amount);
+        await app.getByTestId('send-amount-input').fill(amount);
 
         // Click send button
         await app.getByTestId('send-submit').click();
 
-        // Wait for transaction request modal
-        const modal = app.getByTestId('request').filter({ hasText: 'Transaction Request' });
-        await modal.waitFor({ state: 'visible' });
-
-        // Approve or reject
+        // 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: 'attached' });
+        await chose.waitFor({ state: 'visible' });
         await chose.click();
-        await modal.waitFor({ state: 'detached' });
+        await chose.waitFor({ state: 'detached' });
     }
 }
diff --git a/apps/demo-wallet/e2e/localSendTransaction.spec.ts b/apps/demo-wallet/e2e/localSendTransaction.spec.ts
index 2c8c2214b..b586aa408 100644
--- a/apps/demo-wallet/e2e/localSendTransaction.spec.ts
+++ b/apps/demo-wallet/e2e/localSendTransaction.spec.ts
@@ -47,9 +47,10 @@ test.describe('Local Send Transaction', () => {
         // Send TON locally to own address and approve
         await wallet.sendTonToSelf('0.001', true);
 
-        // Verify we're back on wallet page (transaction was processed)
+        // Verify we're back on the dashboard (transaction was processed). The settings
+        // button only exists on the wallet dashboard, so it's a stable anchor.
         const app = await wallet.open();
-        await expect(app.getByTestId('title').filter({ hasText: 'TON Wallet' })).toBeVisible({ timeout: 10000 });
+        await expect(app.getByTestId('wallet-menu')).toBeVisible({ timeout: 10000 });
 
         await wallet.close();
     });
diff --git a/apps/demo-wallet/e2e/pages/SetupPasswordPage.ts b/apps/demo-wallet/e2e/pages/SetupPasswordPage.ts
index 465a9b60e..fade8e6fb 100644
--- a/apps/demo-wallet/e2e/pages/SetupPasswordPage.ts
+++ b/apps/demo-wallet/e2e/pages/SetupPasswordPage.ts
@@ -13,10 +13,6 @@ export class SetupPasswordPage {
 
     // Locators
 
-    get title() {
-        return this.page.getByTestId('title').filter({ hasText: 'Setup Password' });
-    }
-
     get subtitle() {
         return this.page.getByTestId('subtitle');
     }
@@ -34,17 +30,17 @@ export class SetupPasswordPage {
     }
 
     get helperText() {
-        return this.page.getByText('At least 4 characters');
+        return this.page.getByText('Make sure to remember', { exact: false });
     }
 
     get errorMessage() {
-        return this.page.locator('[data-testid="password-error"], .text-red-600');
+        return this.page.locator('[data-testid="password-error"], .text-red-500');
     }
 
     // Actions
 
     async waitForPage() {
-        await this.title.waitFor({ state: 'visible' });
+        await this.passwordInput.waitFor({ state: 'visible' });
     }
 
     async fillPassword(password: string) {
diff --git a/apps/demo-wallet/e2e/pages/SetupWalletPage.ts b/apps/demo-wallet/e2e/pages/SetupWalletPage.ts
index 7c3b402a2..20a69770b 100644
--- a/apps/demo-wallet/e2e/pages/SetupWalletPage.ts
+++ b/apps/demo-wallet/e2e/pages/SetupWalletPage.ts
@@ -8,14 +8,61 @@
 
 import type { Page } from '@playwright/test';
 
+/**
+ * The screen reached right after setting a password for the "create" path —
+ * the redesigned "Recovery phrase" (create-wallet) screen.
+ */
 export class SetupWalletPage {
+    /** Hold-to-continue gesture duration on the save-phrase confirmation modal (ms). */
+    private static readonly HOLD_DURATION = 1500;
+
     constructor(private readonly page: Page) {}
 
-    get title() {
-        return this.page.getByTestId('title').filter({ hasText: 'Setup Wallet' });
+    get revealButton() {
+        return this.page.getByTestId('reveal-mnemonic');
+    }
+
+    get continueButton() {
+        return this.page.getByTestId('create-wallet-confirm');
+    }
+
+    /** The "Hold to continue" button inside the save-phrase confirmation modal. */
+    get holdToContinue() {
+        return this.page.getByTestId('save-phrase-hold');
     }
 
     async waitForPage() {
-        await this.title.waitFor({ state: 'visible' });
+        await this.revealButton.waitFor({ state: 'visible' });
+    }
+
+    /** Open the save-phrase confirmation modal. */
+    async openConfirm() {
+        await this.continueButton.click();
+        await this.holdToContinue.waitFor({ state: 'visible' });
+    }
+
+    /**
+     * Press and hold the button for `ms`, then release. The gesture is wall-clock
+     * timed in the component, so the press must really last that long.
+     */
+    private async pressHold(ms: number) {
+        await this.holdToContinue.hover();
+        await this.page.mouse.down();
+        await this.page.waitForTimeout(ms);
+        await this.page.mouse.up();
+    }
+
+    /** Open the modal and complete the hold-to-continue gesture to create the wallet. */
+    async confirmAndCreate() {
+        await this.openConfirm();
+        // Hold past the gesture duration plus the completion delay so onComplete fires.
+        await this.pressHold(SetupWalletPage.HOLD_DURATION + 700);
+    }
+
+    /** A short tap on the hold button — not long enough to confirm. */
+    async tapHold() {
+        await this.holdToContinue.hover();
+        await this.page.mouse.down();
+        await this.page.mouse.up();
     }
 }
diff --git a/apps/demo-wallet/e2e/pages/UnlockWalletPage.ts b/apps/demo-wallet/e2e/pages/UnlockWalletPage.ts
deleted file mode 100644
index 4c9ee2591..000000000
--- a/apps/demo-wallet/e2e/pages/UnlockWalletPage.ts
+++ /dev/null
@@ -1,21 +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 type { Page } from '@playwright/test';
-
-export class UnlockWalletPage {
-    constructor(private readonly page: Page) {}
-
-    get title() {
-        return this.page.getByTestId('title').filter({ hasText: 'Unlock Wallet' });
-    }
-
-    async waitForPage() {
-        await this.title.waitFor({ state: 'visible' });
-    }
-}
diff --git a/apps/demo-wallet/e2e/pages/index.ts b/apps/demo-wallet/e2e/pages/index.ts
index cf0b5a03b..591f702ec 100644
--- a/apps/demo-wallet/e2e/pages/index.ts
+++ b/apps/demo-wallet/e2e/pages/index.ts
@@ -8,4 +8,3 @@
 
 export { SetupPasswordPage } from './SetupPasswordPage';
 export { SetupWalletPage } from './SetupWalletPage';
-export { UnlockWalletPage } from './UnlockWalletPage';
diff --git a/apps/demo-wallet/e2e/ui-tests/importWallet.spec.ts b/apps/demo-wallet/e2e/ui-tests/importWallet.spec.ts
index 34a7bdbc4..2d8c03145 100644
--- a/apps/demo-wallet/e2e/ui-tests/importWallet.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/importWallet.spec.ts
@@ -7,6 +7,7 @@
  */
 
 import { expect } from '@playwright/test';
+import type { Page } from '@playwright/test';
 import type { NetworkType } from '@demo/wallet-core';
 
 import { testWithUIFixture } from './UITestFixture';
@@ -39,102 +40,68 @@ const testMatrix: ImportWalletTestCase[] = [
     { network: 'testnet', version: 'v5r1', interfaceType: 'signer' },
 ];
 
+/** Welcome → "Add an existing wallet" → "Recovery phrase" → set a password → land on the import screen. */
+async function openImportScreen(page: Page): Promise<void> {
+    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', () => {
     test.beforeEach(async ({ page }) => {
         if (!TEST_MNEMONIC) {
             test.skip(true, 'WALLET_MNEMONIC environment variable is required');
         }
-
-        // Setup password first
-        await page.getByTestId('title').filter({ hasText: 'Setup Password' }).waitFor({ state: 'visible' });
-        await page.getByTestId('subtitle').filter({ hasText: 'Create Password' }).waitFor({ state: 'visible' });
-        await page.getByTestId('password').fill(TEST_PASSWORD);
-        await page.getByTestId('password-confirm').fill(TEST_PASSWORD);
-        await page.getByTestId('password-submit').click();
-
-        // Wait for setup wallet page - Layout title is "Setup Wallet"
-        await page.getByTestId('title').filter({ hasText: 'Setup Wallet' }).waitFor({ state: 'visible' });
-
-        // Click on "Import" tab
-        await page.getByTestId('tab-import').click();
-        await page.getByTestId('subtitle').filter({ hasText: 'Import Wallet' }).waitFor({ state: 'visible' });
+        await openImportScreen(page);
     });
 
     for (const testCase of testMatrix) {
         const testName = `Import wallet - ${testCase.network} / ${testCase.version} / ${testCase.interfaceType}`;
 
         test(testName, async ({ page }) => {
-            // Select network
             await page.getByTestId(`network-select-${testCase.network}`).click();
-
-            // Verify network button is enabled
             await expect(page.getByTestId(`network-select-${testCase.network}`)).toBeEnabled();
 
-            // Select wallet version
             await page.getByTestId(`version-select-${testCase.version}`).click();
-
-            // Verify version button is enabled
             await expect(page.getByTestId(`version-select-${testCase.version}`)).toBeEnabled();
 
-            // Select interface type
             await page.getByTestId(`interface-select-${testCase.interfaceType}`).click();
-
-            // Verify interface button is enabled
             await expect(page.getByTestId(`interface-select-${testCase.interfaceType}`)).toBeEnabled();
 
-            // Paste mnemonic using the Paste button
+            // Paste the recovery phrase via the Paste button (reads the clipboard).
             await page.evaluate(async (mnemonic) => {
                 await navigator.clipboard.writeText(mnemonic);
             }, TEST_MNEMONIC);
-
-            // Click the Paste button
             await page.getByTestId('paste-mnemonic').click();
 
-            // Wait for words to be filled
-            await page.waitForTimeout(500);
-
-            // Click Import Wallet button
             await page.getByTestId('import-wallet-process').click();
 
-            // Verify navigation to wallet dashboard
-            await page.getByTestId('title').filter({ hasText: 'TON Wallet' }).waitFor({ state: 'visible' });
+            // The settings button only exists on the wallet dashboard.
+            await expect(page.getByTestId('wallet-menu')).toBeVisible();
         });
     }
 });
 
 test.describe('Import Wallet - Validation', () => {
     test.beforeEach(async ({ page }) => {
-        // Setup password first
-        await page.getByTestId('title').filter({ hasText: 'Setup Password' }).waitFor({ state: 'visible' });
-        await page.getByTestId('subtitle').filter({ hasText: 'Create Password' }).waitFor({ state: 'visible' });
-        await page.getByTestId('password').fill(TEST_PASSWORD);
-        await page.getByTestId('password-confirm').fill(TEST_PASSWORD);
-        await page.getByTestId('password-submit').click();
-
-        // Wait for setup wallet page - Layout title is "Setup Wallet"
-        await page.getByTestId('title').filter({ hasText: 'Setup Wallet' }).waitFor({ state: 'visible' });
-
-        // Click on "Import" tab
-        await page.getByTestId('tab-import').click();
-        await page.getByTestId('subtitle').filter({ hasText: 'Import Wallet' }).waitFor({ state: 'visible' });
+        await openImportScreen(page);
     });
 
     test('Import button is disabled with no mnemonic', async ({ page }) => {
-        // The Import Wallet button should be disabled without mnemonic
         await expect(page.getByTestId('import-wallet-process')).toBeDisabled();
     });
 
     test('Import button is disabled with less than 12 words', async ({ page }) => {
-        // Fill only 10 words
         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.waitForTimeout(300);
 
-        // The Import Wallet button should be disabled
         await expect(page.getByTestId('import-wallet-process')).toBeDisabled();
     });
 
@@ -143,21 +110,14 @@ test.describe('Import Wallet - Validation', () => {
             test.skip(true, 'WALLET_MNEMONIC environment variable is required');
         }
 
-        // Paste mnemonic
         await page.evaluate(async (mnemonic) => {
             await navigator.clipboard.writeText(mnemonic);
         }, TEST_MNEMONIC);
-
         await page.getByTestId('paste-mnemonic').click();
-        await page.waitForTimeout(300);
 
-        // Click Clear button
         await page.getByTestId('clear-mnemonic').click();
 
-        // Verify all inputs are empty (word count should be 0)
         await expect(page.getByTestId('word-count')).toHaveText('0/24 words');
-
-        // Import button should be disabled
         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 cce119954..9b9ecdeef 100644
--- a/apps/demo-wallet/e2e/ui-tests/newWallet.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/newWallet.spec.ts
@@ -10,117 +10,71 @@ import { expect } from '@playwright/test';
 
 import { testWithUIFixture } from './UITestFixture';
 import { TEST_PASSWORD } from '../constants';
+import { SetupWalletPage } from '../pages';
 
 const test = testWithUIFixture();
 
 test.describe('New Wallet Flow', () => {
     test.beforeEach(async ({ page }) => {
-        // Setup password first - Layout title is "Setup Password"
-        await page.getByTestId('title').filter({ hasText: 'Setup Password' }).waitFor({ state: 'visible' });
-        await page.getByTestId('subtitle').filter({ hasText: 'Create Password' }).waitFor({ state: 'visible' });
+        // 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();
-
-        // Wait for setup wallet page - Layout title is "Setup Wallet"
-        await page.getByTestId('title').filter({ hasText: 'Setup Wallet' }).waitFor({ state: 'visible' });
-
-        // Click on "New" tab (should be default, but ensure it's selected)
-        await page.getByTestId('tab-create').click();
-        await page.getByTestId('subtitle').filter({ hasText: 'Create New Wallet' }).waitFor({ state: 'visible' });
+        await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
     });
 
     test('Create new wallet on Mainnet', async ({ page }) => {
-        // Mainnet should be selected by default and enabled
-        await expect(page.getByTestId('network-select-mainnet')).toBeEnabled();
+        const setupWallet = new SetupWalletPage(page);
 
-        // Wait for mnemonic to be generated
-        await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
+        // Mainnet is selected by default.
+        await expect(page.getByTestId('network-select-mainnet')).toBeEnabled();
 
-        // Click to reveal mnemonic
         await page.getByTestId('reveal-mnemonic').click();
 
-        // Verify mnemonic grid is visible (24 words)
         await expect(page.getByTestId('mnemonic-grid')).toBeVisible();
         await expect(page.getByTestId('mnemonic-word-1')).toBeVisible();
 
-        // Check the "I have saved" checkbox
-        await page.getByTestId('saved-checkbox').check();
-
-        // Click Import Wallet button
-        await page.getByTestId('create-wallet-confirm').click();
+        // Continue → "Have you saved it?" modal → hold-to-continue.
+        await setupWallet.confirmAndCreate();
 
-        // Verify navigation to wallet dashboard
-        await page.getByTestId('title').filter({ hasText: 'TON Wallet' }).waitFor({ state: 'visible' });
+        // The settings button only exists on the wallet dashboard.
+        await expect(page.getByTestId('wallet-menu')).toBeVisible();
     });
 
     test('Create new wallet on Testnet', async ({ page }) => {
-        // Switch to Testnet
-        await page.getByTestId('network-select-testnet').click();
+        const setupWallet = new SetupWalletPage(page);
 
-        // Verify testnet button is enabled
+        await page.getByTestId('network-select-testnet').click();
         await expect(page.getByTestId('network-select-testnet')).toBeEnabled();
 
-        // Wait for mnemonic to be generated
-        await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
-
-        // Click to reveal mnemonic
         await page.getByTestId('reveal-mnemonic').click();
 
-        // Verify mnemonic grid is visible
         await expect(page.getByTestId('mnemonic-grid')).toBeVisible();
         await expect(page.getByTestId('mnemonic-word-1')).toBeVisible();
 
-        // Check the "I have saved" checkbox
-        await page.getByTestId('saved-checkbox').check();
-
-        // Click Import Wallet button
-        await page.getByTestId('create-wallet-confirm').click();
-
-        // Verify navigation to wallet dashboard
-        await page.getByTestId('title').filter({ hasText: 'TON Wallet' }).waitFor({ state: 'visible' });
-    });
-
-    test('Generate new mnemonic phrase', async ({ page }) => {
-        // Wait for initial mnemonic generation
-        await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
-
-        // Reveal the mnemonic
-        await page.getByTestId('reveal-mnemonic').click();
-
-        // Get the first word of initial mnemonic
-        const initialFirstWord = await page.getByTestId('mnemonic-word-1').textContent();
-
-        // Generate new phrase
-        await page.getByTestId('generate-new-phrase').click();
+        await setupWallet.confirmAndCreate();
 
-        // Wait for new mnemonic
-        await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
-
-        // Reveal again
-        await page.getByTestId('reveal-mnemonic').click();
-
-        // Verify mnemonic changed (first word should likely be different)
-        // Note: There's a small chance they could be the same, but it's very unlikely
-        const newFirstWord = await page.getByTestId('mnemonic-word-1').textContent();
-        expect(newFirstWord).toBeDefined();
-        expect(initialFirstWord).toBeDefined();
+        await expect(page.getByTestId('wallet-menu')).toBeVisible();
     });
 
     test('Cannot proceed without saving confirmation', async ({ page }) => {
-        // Wait for mnemonic generation
-        await page.getByTestId('reveal-mnemonic').waitFor({ state: 'visible' });
+        const setupWallet = new SetupWalletPage(page);
+
+        // Continue is disabled until the recovery phrase has been revealed.
+        await expect(setupWallet.continueButton).toBeDisabled();
 
-        // Reveal mnemonic
         await page.getByTestId('reveal-mnemonic').click();
 
-        // The Import Wallet button should be disabled without checking the save checkbox
-        await expect(page.getByTestId('create-wallet-confirm')).toBeDisabled();
+        await expect(setupWallet.continueButton).toBeEnabled();
 
-        // Check the save checkbox
-        await page.getByTestId('saved-checkbox').check();
+        // Continue only opens the confirmation modal — it doesn't create the wallet.
+        await setupWallet.openConfirm();
+        await expect(setupWallet.holdToContinue).toBeVisible();
 
-        // Now the button should be enabled
-        await expect(page.getByTestId('create-wallet-confirm')).toBeEnabled();
+        // 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/setupPassword.spec.ts b/apps/demo-wallet/e2e/ui-tests/setupPassword.spec.ts
index dd14cf207..b495d857e 100644
--- a/apps/demo-wallet/e2e/ui-tests/setupPassword.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/setupPassword.spec.ts
@@ -9,14 +9,13 @@
 import { expect } from '@playwright/test';
 import { step } from 'allure-js-commons';
 
-import { SetupPasswordPage, SetupWalletPage, UnlockWalletPage } from '../pages';
+import { SetupPasswordPage, SetupWalletPage } from '../pages';
 import { testWithUIFixture } from './UITestFixture';
 import { TEST_PASSWORD, LONG_PASSWORD, XSS_PASSWORD_PAYLOAD } from '../constants';
 
 const test = testWithUIFixture().extend<{
     setupPassword: SetupPasswordPage;
     setupWallet: SetupWalletPage;
-    unlockWallet: UnlockWalletPage;
 }>({
     setupPassword: async ({ page }, use) => {
         await use(new SetupPasswordPage(page));
@@ -24,20 +23,19 @@ const test = testWithUIFixture().extend<{
     setupWallet: async ({ page }, use) => {
         await use(new SetupWalletPage(page));
     },
-    unlockWallet: async ({ page }, use) => {
-        await use(new UnlockWalletPage(page));
-    },
 });
 
 test.describe('SetupPassword', () => {
-    test.beforeEach(async ({ setupPassword }) => {
+    test.beforeEach(async ({ page, setupPassword }) => {
+        // The redesign starts on Welcome; "Create a new wallet" leads to the password screen.
+        await page.getByTestId('welcome-create').click();
         await setupPassword.waitForPage();
     });
 
     test.describe('display', () => {
         test('page renders correctly', async ({ setupPassword }) => {
-            await step('Verify subtitle contains "Create Password"', async () => {
-                await expect(setupPassword.subtitle).toHaveText('Create Password');
+            await step('Verify subtitle contains "Create a password"', async () => {
+                await expect(setupPassword.subtitle).toHaveText('Create a password');
             });
             await step('Verify password input is visible', async () => {
                 await expect(setupPassword.passwordInput).toBeVisible();
@@ -54,7 +52,7 @@ test.describe('SetupPassword', () => {
         });
 
         test('helper text is visible', async ({ setupPassword }) => {
-            await step('Verify helper text contains "At least 4 characters"', async () => {
+            await step('Verify the "remember your password" helper is visible', async () => {
                 await expect(setupPassword.helperText).toBeVisible();
             });
         });
@@ -104,17 +102,19 @@ test.describe('SetupPassword', () => {
 
     test.describe('validation errors', () => {
         test('error when password is less than 4 characters', async ({ setupPassword, page }) => {
-            await step('Submit password shorter than 4 characters', async () => {
-                await setupPassword.submit('ab');
+            // Submit stays disabled for an invalid password, so the hint shows on input (no click).
+            await step('Type a password shorter than 4 characters', async () => {
+                await setupPassword.fillPassword('ab');
             });
-            await step('Verify error contains "Password must be at least 4 characters long"', async () => {
-                await expect(page.getByText('Password must be at least 4 characters long')).toBeVisible();
+            await step('Verify error contains "Password must be at least 4 characters"', async () => {
+                await expect(page.getByText('Password must be at least 4 characters')).toBeVisible();
             });
         });
 
         test('error when passwords do not match', async ({ setupPassword, page }) => {
-            await step('Submit mismatched passwords', async () => {
-                await setupPassword.submit(TEST_PASSWORD, 'diff');
+            await step('Type mismatched passwords', async () => {
+                await setupPassword.fillPassword(TEST_PASSWORD);
+                await setupPassword.fillConfirm('diff');
             });
             await step('Verify error contains "Passwords do not match"', async () => {
                 await expect(page.getByText('Passwords do not match')).toBeVisible();
@@ -122,8 +122,9 @@ test.describe('SetupPassword', () => {
         });
 
         test('fields retain values after error', async ({ setupPassword }) => {
-            await step('Submit password shorter than 4 characters', async () => {
-                await setupPassword.submit('ab');
+            await step('Type a password shorter than 4 characters', async () => {
+                await setupPassword.fillPassword('ab');
+                await setupPassword.fillConfirm('ab');
             });
             await step('Verify password field retains its value', async () => {
                 await expect(setupPassword.passwordInput).toHaveValue('ab');
@@ -135,11 +136,11 @@ test.describe('SetupPassword', () => {
     });
 
     test.describe('positive', () => {
-        test('valid password redirects to /setup-wallet', async ({ setupPassword, setupWallet }) => {
+        test('valid password redirects to the recovery-phrase screen', async ({ setupPassword, setupWallet }) => {
             await step('Submit valid password', async () => {
                 await setupPassword.submit(TEST_PASSWORD);
             });
-            await step('Verify Setup Wallet page is displayed', async () => {
+            await step('Verify the recovery-phrase (create-wallet) screen is displayed', async () => {
                 await setupWallet.waitForPage();
             });
         });
@@ -150,7 +151,7 @@ test.describe('SetupPassword', () => {
             await step('Submit valid password', async () => {
                 await setupPassword.submit(TEST_PASSWORD);
             });
-            await step('Wait for Setup Wallet page', async () => {
+            await step('Wait for the recovery-phrase screen', async () => {
                 await setupWallet.waitForPage();
             });
 
@@ -173,7 +174,7 @@ test.describe('SetupPassword', () => {
             await step('Submit 500-character password', async () => {
                 await setupPassword.submit(LONG_PASSWORD);
             });
-            await step('Verify Setup Wallet page is displayed', async () => {
+            await step('Verify the recovery-phrase screen is displayed', async () => {
                 await setupWallet.waitForPage();
             });
         });
@@ -185,7 +186,7 @@ test.describe('SetupPassword', () => {
             await step('Paste and submit password', async () => {
                 await setupPassword.submitByPasting(TEST_PASSWORD);
             });
-            await step('Verify Setup Wallet page is displayed', async () => {
+            await step('Verify the recovery-phrase screen is displayed', async () => {
                 await setupWallet.waitForPage();
             });
         });
@@ -203,7 +204,7 @@ test.describe('SetupPassword', () => {
             await step('Submit XSS payload as password', async () => {
                 await setupPassword.submit(XSS_PASSWORD_PAYLOAD);
             });
-            await step('Verify Setup Wallet page is displayed', async () => {
+            await step('Verify the recovery-phrase screen is displayed', async () => {
                 await setupWallet.waitForPage();
             });
             await step('Verify no XSS dialog was triggered', async () => {
diff --git a/apps/demo-wallet/e2e/utils.ts b/apps/demo-wallet/e2e/utils.ts
index 53b7c81a8..11fc67435 100644
--- a/apps/demo-wallet/e2e/utils.ts
+++ b/apps/demo-wallet/e2e/utils.ts
@@ -6,7 +6,7 @@
  *
  */
 
-import { createComponentLogger } from '../src/utils/logger';
+import { createComponentLogger } from '../src/core/lib/logger';
 
 const log = createComponentLogger('Allure');
 
diff --git a/apps/demo-wallet/package.json b/apps/demo-wallet/package.json
index 9f47952c9..b90d6bf72 100644
--- a/apps/demo-wallet/package.json
+++ b/apps/demo-wallet/package.json
@@ -24,10 +24,15 @@
   "dependencies": {
     "@demo/v4ledger-adapter": "workspace:*",
     "@demo/wallet-core": "workspace:*",
+    "@fontsource-variable/inter": "^5.2.8",
     "@ledgerhq/hw-transport-webhid": "6.34.0",
     "@ledgerhq/hw-transport-webusb": "6.33.0",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-select": "2.2.6",
     "@scure/bip39": "^2.2.0",
     "@tailwindcss/vite": "^4.3.0",
+    "@telegram-apps/sdk": "^3.11.8",
     "@ton/core": "catalog:",
     "@ton/crypto": "catalog:",
     "@ton/walletkit": "workspace:*",
@@ -41,6 +46,7 @@
     "immer": "^10.2.0",
     "lucide-react": "^0.562.0",
     "next-themes": "^0.4.6",
+    "qr-code-styling": "^1.9.2",
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-router-dom": "^7.15.1",
@@ -49,6 +55,7 @@
     "tailwindcss": "^4.3.0",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
     "zustand": "^5.0.13"
   },
   "devDependencies": {
diff --git a/apps/demo-wallet/public/gram.svg b/apps/demo-wallet/public/gram.svg
new file mode 100644
index 000000000..6a79055bc
--- /dev/null
+++ b/apps/demo-wallet/public/gram.svg
@@ -0,0 +1 @@
+<svg width="100" height="100" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" rx="50" fill="#30A1F5"/><rect x=".5" y=".5" width="99" height="99" rx="49.5" stroke="#000" stroke-opacity=".06"/><path d="M60.41 26.75H39.59c-2.772 0-4.159 0-5.413.388a8.691 8.691 0 0 0-3.028 1.653c-1.005.846-1.754 2.012-3.254 4.344L21.277 43.43c-.99 1.54-1.486 2.311-1.62 3.122-.119.715-.04 1.45.228 2.123.304.764.951 1.411 2.247 2.707l24.59 24.59c1.148 1.148 1.721 1.722 2.383 1.936.582.19 1.208.19 1.79 0 .661-.214 1.235-.788 2.382-1.935l24.591-24.591c1.296-1.296 1.943-1.943 2.247-2.707a3.982 3.982 0 0 0 .228-2.123c-.134-.81-.63-1.581-1.62-3.122l-6.618-10.295c-1.5-2.332-2.25-3.498-3.254-4.344a8.692 8.692 0 0 0-3.028-1.653c-1.255-.388-2.64-.388-5.414-.388z" fill="#fff"/><path d="M56.469 34.871c.338-.914 1.631-.914 1.97 0l2.337 6.317c.14.38.44.679.819.82l6.317 2.337c.914.338.914 1.63 0 1.97l-6.317 2.337c-.38.14-.679.44-.82.818l-2.337 6.317c-.338.915-1.631.915-1.97 0l-2.337-6.317c-.14-.379-.44-.678-.819-.818l-6.316-2.338c-.915-.338-.915-1.631 0-1.97l6.316-2.337c.38-.14.679-.44.82-.819l2.337-6.317z" fill="#30A1F5"/></svg>
\ No newline at end of file
diff --git a/apps/demo-wallet/public/walletkit.svg b/apps/demo-wallet/public/walletkit.svg
new file mode 100644
index 000000000..910f552a8
--- /dev/null
+++ b/apps/demo-wallet/public/walletkit.svg
@@ -0,0 +1,8 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.0435 5.0332L11.3125 5.29825L11.863 17.201L17.5939 16.9359L17.0435 5.0332Z" fill="black"/>
+  <path d="M31.5576 9.83063L28.4626 5L18.4297 11.4281L21.5248 16.2588L31.5576 9.83063Z" fill="black"/>
+  <path d="M34.6614 24.7979L37.2974 19.7022L26.714 14.2275L24.0781 19.3232L34.6614 24.7979Z" fill="black"/>
+  <path d="M23.2536 34.9666L28.9845 34.7016L28.434 22.7988L22.7031 23.0639L23.2536 34.9666Z" fill="black"/>
+  <path d="M8.73438 30.1693L11.8294 34.9999L21.8623 28.5718L18.7673 23.7412L8.73438 30.1693Z" fill="black"/>
+  <path d="M5.63594 15.2021L3 20.2978L13.5833 25.7725L16.2192 20.6768L5.63594 15.2021Z" fill="black"/>
+</svg>
diff --git a/apps/demo-wallet/src/App.css b/apps/demo-wallet/src/App.css
index f611305f8..1d8be7bdb 100644
--- a/apps/demo-wallet/src/App.css
+++ b/apps/demo-wallet/src/App.css
@@ -5,6 +5,20 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@theme {
+  --font-sans: 'Inter Variable', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  --font-display: 'Inter Display', 'Inter Variable', system-ui, sans-serif;
+}
+
+@font-face {
+  font-family: 'Inter Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('@fontsource-variable/inter/files/inter-latin-opsz-normal.woff2') format('woff2-variations');
+  font-variation-settings: 'opsz' 32;
+}
+
 #root {
   width: 100%;
 }
@@ -159,4 +173,11 @@
   body {
     @apply bg-background text-foreground;
   }
+  button:not(:disabled),
+  [role='button'],
+  a,
+  summary,
+  label[for] {
+    cursor: pointer;
+  }
 }
diff --git a/apps/demo-wallet/src/App.tsx b/apps/demo-wallet/src/App.tsx
index c795d41ba..50319dfa9 100644
--- a/apps/demo-wallet/src/App.tsx
+++ b/apps/demo-wallet/src/App.tsx
@@ -10,9 +10,8 @@ import TransportWebHID from '@ledgerhq/hw-transport-webhid';
 import { WalletProvider } from '@demo/wallet-core';
 import type { WalletKitConfig } from '@demo/wallet-core';
 
-import { AppRouter } from './components';
-
-import { Toaster } from '@/components/ui/sonner';
+import { AppRouter } from '@/core/routing';
+import { Toaster } from '@/core/components/ui/sonner';
 import {
     DISABLE_AUTO_EMULATION,
     DISABLE_HTTP_BRIDGE,
@@ -23,9 +22,9 @@ import {
     ENV_TON_API_KEY_TESTNET,
     ENV_TON_API_KEY_TETRA,
     ENV_TON_API_PROVIDER,
-} from '@/lib/env';
-import { isExtension } from '@/utils/isExtension';
-import type { SendMessageToExtensionContent, CreateExtensionStorageAdapter } from '@/lib/extensionPopup';
+} from '@/core/lib/env';
+import { isExtension } from '@/core/lib/is-extension';
+import type { SendMessageToExtensionContent, CreateExtensionStorageAdapter } from '@/core/lib/extensionPopup';
 
 import './App.css';
 import './storePatch';
@@ -34,7 +33,7 @@ let jsBridgeTransport: typeof SendMessageToExtensionContent | undefined;
 let storage: ReturnType<typeof CreateExtensionStorageAdapter> | undefined;
 
 if (isExtension()) {
-    const { SendMessageToExtensionContent, CreateExtensionStorageAdapter } = await import('@/lib/extensionPopup');
+    const { SendMessageToExtensionContent, CreateExtensionStorageAdapter } = await import('@/core/lib/extensionPopup');
     jsBridgeTransport = SendMessageToExtensionContent;
     storage = CreateExtensionStorageAdapter();
 }
diff --git a/apps/demo-wallet/src/assets/react.svg b/apps/demo-wallet/src/assets/react.svg
deleted file mode 100644
index 6c87de9bb..000000000
--- a/apps/demo-wallet/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/apps/demo-wallet/src/components/ActionPreviewList.tsx b/apps/demo-wallet/src/components/ActionPreviewList.tsx
deleted file mode 100644
index 586d002e1..000000000
--- a/apps/demo-wallet/src/components/ActionPreviewList.tsx
+++ /dev/null
@@ -1,99 +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 React, { memo, useMemo } from 'react';
-import type { ToncenterEmulationResponse } from '@ton/walletkit';
-import { emulationEvent } from '@ton/walletkit';
-
-interface ActionPreviewListProps {
-    emulationResult: ToncenterEmulationResponse;
-    walletAddress?: string;
-    title?: string;
-    className?: string;
-}
-
-export const ActionPreviewList: React.FC<ActionPreviewListProps> = memo(
-    ({ emulationResult, walletAddress, title = 'Actions:', className }) => {
-        if (!walletAddress) {
-            return null;
-        }
-        const event = useMemo(() => emulationEvent(emulationResult, walletAddress), [emulationResult, walletAddress]);
-
-        return (
-            <div className={className ? className : ''}>
-                {title && <div className="font-semibold mb-1">{title}</div>}
-                <div className="space-y-2">
-                    {event.actions.map((a, idx) => {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const sp = (a as any).simplePreview as
-                            | {
-                                  name: string;
-                                  description: string;
-                                  value: string;
-                                  valueImage?: string;
-                                  accounts: Array<{ address: string; name?: string }>;
-                              }
-                            | undefined;
-                        if (!sp) {
-                            return (
-                                <div key={`act-${idx}`} className="text-sm text-gray-700">
-                                    {a.type}
-                                </div>
-                            );
-                        }
-                        return (
-                            <div
-                                key={`act-${idx}`}
-                                className="flex items-start gap-3 p-2 border border-gray-200 rounded-lg"
-                            >
-                                {sp.valueImage ? (
-                                    <img
-                                        alt={sp.name}
-                                        src={sp.valueImage}
-                                        className="w-8 h-8 rounded-full object-cover"
-                                    />
-                                ) : (
-                                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-xs text-gray-600">
-                                        {a.type.slice(0, 1)}
-                                    </div>
-                                )}
-                                <div className="flex-1 min-w-0">
-                                    <div className="flex items-center justify-between gap-3">
-                                        <div className="text-sm font-medium text-gray-900 truncate">{sp.name}</div>
-                                        <div className="text-sm text-gray-800">{sp.value}</div>
-                                    </div>
-                                    {sp.description && (
-                                        <div className="text-xs text-gray-500 mt-0.5">{sp.description}</div>
-                                    )}
-                                    {Array.isArray(sp.accounts) && sp.accounts.length > 0 && (
-                                        <div className="mt-1 flex flex-wrap gap-1.5">
-                                            {sp.accounts.map((acc, i) => (
-                                                <span
-                                                    key={`acc-${i}`}
-                                                    className="text-[10px] px-2 py-0.5 bg-gray-100 text-gray-700 rounded"
-                                                >
-                                                    {acc.name ?? shortenAddress(acc.address)}
-                                                </span>
-                                            ))}
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        );
-    },
-);
-
-function shortenAddress(addr?: string): string {
-    if (!addr) return '';
-    const a = String(addr);
-    return a.length <= 12 ? a : `${a.slice(0, 6)}...${a.slice(-6)}`;
-}
diff --git a/apps/demo-wallet/src/components/Button.tsx b/apps/demo-wallet/src/components/Button.tsx
deleted file mode 100644
index 98e8ffe3b..000000000
--- a/apps/demo-wallet/src/components/Button.tsx
+++ /dev/null
@@ -1,60 +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 React from 'react';
-
-import { LoaderCircle } from './LoaderCircle';
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'danger';
-    size?: 'sm' | 'md' | 'lg';
-    isLoading?: boolean;
-    children: React.ReactNode;
-}
-
-export const Button: React.FC<ButtonProps> = ({
-    variant = 'primary',
-    size = 'md',
-    isLoading = false,
-    children,
-    disabled,
-    className = '',
-    ...props
-}) => {
-    const baseClasses =
-        'font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center';
-
-    const variantClasses = {
-        primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
-        secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500',
-        danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
-    };
-
-    const sizeClasses = {
-        sm: 'px-3 py-2 text-sm',
-        md: 'px-4 py-2 text-base',
-        lg: 'px-6 py-3 text-lg',
-    };
-
-    return (
-        <button
-            className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
-            disabled={disabled || isLoading}
-            {...props}
-        >
-            {isLoading ? (
-                <>
-                    <LoaderCircle size="sm" className="-ml-1 mr-2" />
-                    Loading...
-                </>
-            ) : (
-                children
-            )}
-        </button>
-    );
-};
diff --git a/apps/demo-wallet/src/components/ConnectRequestModal.tsx b/apps/demo-wallet/src/components/ConnectRequestModal.tsx
deleted file mode 100644
index fa681efe9..000000000
--- a/apps/demo-wallet/src/components/ConnectRequestModal.tsx
+++ /dev/null
@@ -1,319 +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 React, { useState, useMemo, useEffect } from 'react';
-import type { ConnectionRequestEvent, Wallet } from '@ton/walletkit';
-import { getNetworkType, getNetworkLabel } from '@demo/wallet-core';
-import type { SavedWallet } from '@demo/wallet-core';
-import { toast } from 'sonner';
-
-import { Button } from './Button';
-import { DAppInfo } from './DAppInfo';
-import { WalletPreview } from './WalletPreview';
-import { createComponentLogger } from '../utils/logger';
-
-// Create logger for connect request modal
-const log = createComponentLogger('ConnectRequestModal');
-
-interface ConnectRequestModalProps {
-    request: ConnectionRequestEvent;
-    availableWallets: Wallet[];
-    savedWallets: SavedWallet[];
-    currentWallet?: Wallet;
-    isOpen: boolean;
-    onApprove: (selectedWallet: Wallet) => void;
-    onReject: (reason?: string) => void;
-}
-
-export const ConnectRequestModal: React.FC<ConnectRequestModalProps> = ({
-    request,
-    availableWallets,
-    savedWallets,
-    currentWallet,
-    isOpen,
-    onApprove,
-    onReject,
-}) => {
-    const [selectedWallet, setSelectedWallet] = useState<Wallet | null>(currentWallet || null);
-    const [isLoading, setIsLoading] = useState(false);
-    const [showAllWallets, setShowAllWallets] = useState(false);
-
-    // Auto-select current wallet or first available wallet if selectedWallet is null
-    useEffect(() => {
-        if (selectedWallet !== null) return;
-
-        const intervalId = setInterval(() => {
-            const walletToSelect = currentWallet || availableWallets[0];
-            if (walletToSelect) {
-                setSelectedWallet(walletToSelect);
-            }
-        }, 100);
-
-        return () => clearInterval(intervalId);
-    }, [selectedWallet, availableWallets, currentWallet]);
-
-    // Create a map of wallet IDs to SavedWallet data
-    const walletDataMap = useMemo(() => {
-        const map = new Map<string, SavedWallet>();
-        savedWallets.forEach((savedWallet) => {
-            map.set(savedWallet.id, savedWallet);
-        });
-        return map;
-    }, [savedWallets]);
-
-    const handleApprove = async () => {
-        if (!selectedWallet) return;
-
-        setIsLoading(true);
-        try {
-            await onApprove(selectedWallet);
-        } catch (error) {
-            log.error('Failed to approve connection:', error);
-            toast.error('Failed to approve connection', {
-                description: (error as Error)?.message,
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleReject = () => {
-        onReject('User rejected the connection');
-    };
-
-    const formatAddress = (address: string, length: number = 16): string => {
-        if (!address) return '';
-        let halfLength = Math.floor(length / 2);
-        if (halfLength > 24) {
-            halfLength = 24;
-        }
-        let dots = '...';
-        if (halfLength > 23) {
-            dots = '';
-        } else if (halfLength > 22) {
-            dots = '.';
-        }
-        return `${address.slice(0, halfLength)}${dots}${address.slice(-halfLength)}`;
-    };
-
-    const getWalletNetworkInfo = (wallet?: Wallet): { label: string; isTestnet: boolean } => {
-        if (!wallet) return { label: 'Unknown', isTestnet: false };
-        const networkType = getNetworkType(wallet.getNetwork());
-        return {
-            label: getNetworkLabel(networkType),
-            isTestnet: networkType !== 'mainnet',
-        };
-    };
-
-    if (!isOpen) return null;
-
-    return (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center sm:p-4 z-50">
-            <div className="bg-white w-full h-full sm:rounded-lg sm:max-w-md sm:h-auto sm:max-h-[90vh] flex flex-col overflow-hidden">
-                {/* Scrollable content */}
-                <div className="flex-1 overflow-y-auto p-6">
-                    <div className="space-y-6">
-                        {/* Header */}
-                        <div className="text-center">
-                            <h2 data-testid="request" className="text-xl font-bold text-gray-900">
-                                Connect Request
-                            </h2>
-                            <p className="text-gray-600 text-sm mt-1">A dApp wants to connect to your wallet</p>
-                            {selectedWallet && (
-                                <span
-                                    className={`inline-block mt-2 px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                                        getWalletNetworkInfo(selectedWallet).isTestnet
-                                            ? 'bg-orange-100 text-orange-800'
-                                            : 'bg-green-100 text-green-800'
-                                    }`}
-                                >
-                                    {getWalletNetworkInfo(selectedWallet).label}
-                                </span>
-                            )}
-                        </div>
-
-                        {/* dApp Information */}
-                        <DAppInfo
-                            name={request.dAppInfo?.name}
-                            description={request.dAppInfo?.description}
-                            url={request.dAppInfo?.url}
-                            iconUrl={request.dAppInfo?.iconUrl}
-                        />
-
-                        {/* Requested Permissions */}
-                        {(request.preview.permissions || []).length > 0 && (
-                            <div>
-                                <h4 className="font-medium text-gray-900 mb-3">Requested Permissions:</h4>
-                                <div className="space-y-3">
-                                    {request.preview.permissions?.map((permission, index) => (
-                                        <div key={index} className="border rounded-lg p-3 bg-gray-50">
-                                            <div className="flex items-start space-x-3">
-                                                <div className="w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div>
-                                                <div className="flex-1 min-w-0">
-                                                    <h5 className="text-sm font-medium text-gray-900 mb-1">
-                                                        {permission.title}
-                                                    </h5>
-                                                    <p className="text-xs text-gray-600 leading-relaxed">
-                                                        {permission.description}
-                                                    </p>
-                                                    {permission.name === 'ton_addr' && selectedWallet && (
-                                                        <p className="text-xs text-gray-500 mt-1 truncate">
-                                                            Your address:{' '}
-                                                            {formatAddress(selectedWallet.getAddress(), 20)}
-                                                        </p>
-                                                    )}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        )}
-
-                        {/* Wallet Selection */}
-                        {availableWallets.length > 0 && (
-                            <div>
-                                <div className="flex items-center justify-between mb-3">
-                                    <h4 className="font-medium text-gray-900">
-                                        {availableWallets.length > 1 ? 'Connecting with:' : 'Wallet:'}
-                                    </h4>
-                                    {availableWallets.length > 1 && !showAllWallets && (
-                                        <button
-                                            onClick={() => setShowAllWallets(true)}
-                                            className="text-sm text-blue-600 hover:text-blue-700 font-medium transition-colors"
-                                        >
-                                            Change wallet
-                                        </button>
-                                    )}
-                                </div>
-
-                                {showAllWallets ? (
-                                    <div className="space-y-2">
-                                        {availableWallets.map((wallet, index) => {
-                                            const walletId = wallet.getWalletId();
-                                            const savedWallet = walletDataMap.get(walletId);
-                                            const networkLabel = getNetworkType(wallet.getNetwork());
-
-                                            return (
-                                                <label key={walletId} className="block cursor-pointer">
-                                                    <input
-                                                        type="radio"
-                                                        name="wallet"
-                                                        value={walletId}
-                                                        checked={selectedWallet?.getWalletId() === wallet.getWalletId()}
-                                                        onChange={() => {
-                                                            setSelectedWallet(wallet);
-                                                            setShowAllWallets(false);
-                                                        }}
-                                                        className="sr-only"
-                                                    />
-                                                    <WalletPreview
-                                                        wallet={
-                                                            savedWallet || {
-                                                                id: walletId,
-                                                                name: `Wallet ${index + 1}`,
-                                                                address: wallet.getAddress(),
-                                                                publicKey: '',
-                                                                walletType: 'mnemonic',
-                                                                walletInterfaceType: 'mnemonic',
-                                                                network: networkLabel,
-                                                                createdAt: Date.now(),
-                                                            }
-                                                        }
-                                                        isActive={
-                                                            selectedWallet?.getWalletId() === wallet.getWalletId()
-                                                        }
-                                                        isCompact={false}
-                                                        onClick={() => {
-                                                            setSelectedWallet(wallet);
-                                                            setShowAllWallets(false);
-                                                        }}
-                                                    />
-                                                </label>
-                                            );
-                                        })}
-                                        <button
-                                            onClick={() => setShowAllWallets(false)}
-                                            className="w-full text-sm text-gray-600 hover:text-gray-700 py-2 text-center"
-                                        >
-                                            Cancel
-                                        </button>
-                                    </div>
-                                ) : (
-                                    selectedWallet && (
-                                        <div>
-                                            <WalletPreview
-                                                wallet={
-                                                    walletDataMap.get(selectedWallet.getWalletId()) || {
-                                                        id: selectedWallet.getWalletId(),
-                                                        name: 'Selected Wallet',
-                                                        address: selectedWallet.getAddress(),
-                                                        publicKey: '',
-                                                        walletType: 'mnemonic',
-                                                        walletInterfaceType: 'mnemonic',
-                                                        network: getNetworkType(selectedWallet.getNetwork()),
-                                                        createdAt: Date.now(),
-                                                    }
-                                                }
-                                                isActive={true}
-                                                isCompact={true}
-                                            />
-                                        </div>
-                                    )
-                                )}
-                            </div>
-                        )}
-
-                        {/* Warning */}
-                        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
-                            <div className="flex">
-                                <div className="flex-shrink-0">
-                                    <svg className="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
-                                        <path
-                                            fillRule="evenodd"
-                                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                                            clipRule="evenodd"
-                                        />
-                                    </svg>
-                                </div>
-                                <div className="ml-3">
-                                    <p className="text-sm text-yellow-800">
-                                        Only connect to trusted applications. This will give the dApp access to your
-                                        wallet address and allow it to request transactions.
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Action Buttons — always visible at bottom */}
-                <div className="flex space-x-3 p-4 border-t border-gray-200 bg-white">
-                    <Button
-                        data-testid="connect-reject"
-                        variant="secondary"
-                        onClick={handleReject}
-                        disabled={isLoading}
-                        className="flex-1"
-                    >
-                        Reject
-                    </Button>
-                    <Button
-                        data-testid="connect-approve"
-                        onClick={handleApprove}
-                        isLoading={isLoading}
-                        disabled={!selectedWallet || isLoading}
-                        className="flex-1"
-                    >
-                        Connect
-                    </Button>
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/components/CreateWallet.tsx b/apps/demo-wallet/src/components/CreateWallet.tsx
deleted file mode 100644
index d7381880f..000000000
--- a/apps/demo-wallet/src/components/CreateWallet.tsx
+++ /dev/null
@@ -1,132 +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 React, { useState, useCallback, useEffect } from 'react';
-import { CreateTonMnemonic } from '@ton/walletkit';
-import type { NetworkType } from '@demo/wallet-core';
-
-import { Button } from './Button';
-import { MnemonicGrid } from './MnemonicGrid';
-import { MnemonicSkeleton } from './MnemonicSkeleton';
-import { NetworkSelector } from './NetworkSelector';
-
-interface CreateWalletProps {
-    onConfirm: (mnemonic: string[], network: NetworkType) => Promise<void>;
-    isLoading: boolean;
-    error: string;
-}
-
-export const CreateWallet: React.FC<CreateWalletProps> = ({ onConfirm, isLoading, error }) => {
-    const [mnemonic, setMnemonic] = useState<string[]>([]);
-    const [showMnemonic, setShowMnemonic] = useState(false);
-    const [isSaved, setIsSaved] = useState(false);
-    const [isGenerating, setIsGenerating] = useState(false);
-    const [network, setNetwork] = useState<NetworkType>('mainnet');
-    const [generationError, setGenerationError] = useState('');
-
-    const generateMnemonic = useCallback(async () => {
-        setIsGenerating(true);
-        setGenerationError('');
-        setShowMnemonic(false);
-        setIsSaved(false);
-        try {
-            const newMnemonic = await CreateTonMnemonic();
-            setMnemonic(newMnemonic);
-        } catch (err) {
-            setGenerationError(err instanceof Error ? err.message : 'Failed to generate mnemonic');
-        } finally {
-            setIsGenerating(false);
-        }
-    }, []);
-
-    // Generate mnemonic on mount
-    useEffect(() => {
-        generateMnemonic();
-    }, [generateMnemonic]);
-
-    const handleConfirm = async () => {
-        await onConfirm(mnemonic, network);
-    };
-
-    return (
-        <div className="space-y-4">
-            <div className="text-center">
-                <h2 className="text-xl font-bold text-gray-900" data-testid="subtitle">
-                    Create New Wallet
-                </h2>
-                <p className="mt-1 text-xs text-gray-600">Write down these 24 words in order.</p>
-            </div>
-
-            <div className="bg-white rounded-lg shadow-md border border-gray-200 p-4">
-                <div className="space-y-4">
-                    <NetworkSelector value={network} onChange={setNetwork} compact />
-
-                    <div className="relative">
-                        <div className={!showMnemonic ? 'blur-sm' : ''}>
-                            {isGenerating ? (
-                                <MnemonicSkeleton />
-                            ) : mnemonic.length > 0 ? (
-                                <MnemonicGrid mnemonic={mnemonic} />
-                            ) : (
-                                <MnemonicSkeleton />
-                            )}
-                        </div>
-
-                        {!showMnemonic && !isGenerating && mnemonic.length > 0 && (
-                            <div className="absolute inset-0 flex items-center justify-center">
-                                <Button data-testid="reveal-mnemonic" onClick={() => setShowMnemonic(true)} size="sm">
-                                    Click to reveal
-                                </Button>
-                            </div>
-                        )}
-                    </div>
-
-                    {showMnemonic && mnemonic.length > 0 && (
-                        <div className="space-y-3">
-                            <label className="flex items-center space-x-2 cursor-pointer">
-                                <input
-                                    type="checkbox"
-                                    id="saved"
-                                    data-testid="saved-checkbox"
-                                    checked={isSaved}
-                                    onChange={(e) => setIsSaved(e.target.checked)}
-                                    className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-                                />
-                                <span className="text-xs text-gray-700">I have saved my recovery phrase</span>
-                            </label>
-
-                            <Button
-                                data-testid="create-wallet-confirm"
-                                onClick={handleConfirm}
-                                disabled={!isSaved || isLoading}
-                                isLoading={isLoading}
-                                className="w-full"
-                            >
-                                Import Wallet
-                            </Button>
-                        </div>
-                    )}
-
-                    <Button
-                        data-testid="generate-new-phrase"
-                        variant="secondary"
-                        onClick={generateMnemonic}
-                        disabled={isGenerating}
-                        className="w-full"
-                    >
-                        Generate New Phrase
-                    </Button>
-
-                    {(generationError || error) && (
-                        <div className="text-red-600 text-xs text-center">{generationError || error}</div>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/components/DAppInfo.tsx b/apps/demo-wallet/src/components/DAppInfo.tsx
deleted file mode 100644
index 36a8a936a..000000000
--- a/apps/demo-wallet/src/components/DAppInfo.tsx
+++ /dev/null
@@ -1,66 +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 React from 'react';
-
-interface DAppInfoProps {
-    /** dApp name */
-    name?: string;
-    /** dApp description */
-    description?: string;
-    /** dApp URL */
-    url?: string;
-    /** dApp icon URL */
-    iconUrl?: string;
-    /** Optional additional className */
-    className?: string;
-}
-
-export const DAppInfo: React.FC<DAppInfoProps> = ({ name, description, url, iconUrl, className = '' }) => {
-    let host;
-    try {
-        host = url ? new URL(url).host : undefined;
-    } catch (_error) {
-        host = url;
-    }
-
-    return (
-        <div className={`border rounded-lg p-4 bg-gray-50 ${className}`}>
-            <div className="flex items-center space-x-4">
-                {/* dApp Icon */}
-                {iconUrl ? (
-                    <img
-                        src={iconUrl}
-                        alt={name}
-                        className="w-12 h-12 rounded-lg object-cover border"
-                        onError={(e) => {
-                            // Hide image if it fails to load
-                            e.currentTarget.style.display = 'none';
-                        }}
-                    />
-                ) : (
-                    <div className="w-12 h-12 rounded-lg bg-gray-200 flex items-center justify-center">
-                        <svg className="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                            <path
-                                fillRule="evenodd"
-                                d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
-                                clipRule="evenodd"
-                            />
-                        </svg>
-                    </div>
-                )}
-
-                <div className="flex-1 min-w-0">
-                    <h3 className="font-semibold text-gray-900 truncate">{name || 'Unknown dApp'}</h3>
-                    {description && <p className="text-sm text-gray-600 mt-1 line-clamp-2">{description}</p>}
-                    {host && <p className="text-xs text-gray-500 mt-1 truncate">{host}</p>}
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/components/Input.tsx b/apps/demo-wallet/src/components/Input.tsx
deleted file mode 100644
index 1c64eae75..000000000
--- a/apps/demo-wallet/src/components/Input.tsx
+++ /dev/null
@@ -1,33 +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 React from 'react';
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    label?: string;
-    error?: string;
-    helperText?: string;
-}
-
-export const Input: React.FC<InputProps> = ({ label, error, helperText, className = '', ...props }) => {
-    const inputClasses = `
-    w-full px-3 py-2 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
-    ${error ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : 'border-gray-300'}
-    ${className}
-    text-black
-  `;
-
-    return (
-        <div className="space-y-1">
-            {label && <label className="block text-sm font-medium text-gray-700 text-left">{label}</label>}
-            <input className={inputClasses.trim()} {...props} />
-            {error && <p className="text-sm text-red-600">{error}</p>}
-            {helperText && !error && <p className="text-sm text-gray-500">{helperText}</p>}
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/components/JettonsCard.tsx b/apps/demo-wallet/src/components/JettonsCard.tsx
deleted file mode 100644
index d140d1157..000000000
--- a/apps/demo-wallet/src/components/JettonsCard.tsx
+++ /dev/null
@@ -1,94 +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 React from 'react';
-import { useJettons } from '@demo/wallet-core';
-
-import { Button } from './Button';
-import { Card } from './Card';
-import { JettonRow } from './JettonRow';
-import { createComponentLogger } from '../utils/logger';
-
-import { getJettonsName } from '@/utils/jetton';
-
-const log = createComponentLogger('JettonsCard');
-
-interface JettonsCardProps {
-    className?: string;
-    embedded?: boolean;
-}
-
-export const JettonsCard: React.FC<JettonsCardProps> = ({ className = '', embedded = false }) => {
-    const { userJettons, error, loadUserJettons } = useJettons();
-
-    const formatAddress = (address: string): string => {
-        return `${address.slice(0, 4)}...${address.slice(-4)}`;
-    };
-
-    const topJettons = userJettons.slice(0, 3);
-    const totalJettons = userJettons.length;
-
-    const errorContent = (
-        <div className="text-center py-4">
-            <div className="text-red-400 mb-2">
-                <svg className="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 20 20">
-                    <path
-                        fillRule="evenodd"
-                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                        clipRule="evenodd"
-                    />
-                </svg>
-            </div>
-            <p className="text-sm text-red-600 mb-3">Failed to load jettons</p>
-            <Button size="sm" variant="secondary" onClick={() => loadUserJettons()}>
-                Try Again
-            </Button>
-        </div>
-    );
-
-    if (error) {
-        return embedded ? (
-            <div className={className}>{errorContent}</div>
-        ) : (
-            <Card title="Jettons" className={className}>
-                {errorContent}
-            </Card>
-        );
-    }
-
-    const mainContent =
-        totalJettons === 0 ? (
-            <div className="text-center py-4">
-                <p className="text-sm text-gray-500">No jettons yet</p>
-            </div>
-        ) : (
-            <div className="space-y-2">
-                {topJettons.map((jetton) => (
-                    <JettonRow
-                        key={jetton.address}
-                        jetton={jetton}
-                        formatAddress={formatAddress}
-                        onClick={() => log.info('Jetton clicked:', getJettonsName(jetton))}
-                        inline
-                    />
-                ))}
-                {totalJettons > 3 && <p className="text-xs text-gray-500 text-center pt-1">+{totalJettons - 3} more</p>}
-            </div>
-        );
-
-    const wrapper = (children: React.ReactNode) =>
-        embedded ? (
-            <div className={`border-t border-gray-100 pt-3 mt-3 ${className}`}>{children}</div>
-        ) : (
-            <Card title="Jettons" className={className}>
-                {children}
-            </Card>
-        );
-
-    return wrapper(mainContent);
-};
diff --git a/apps/demo-wallet/src/components/JettonsList.tsx b/apps/demo-wallet/src/components/JettonsList.tsx
deleted file mode 100644
index 91de1db57..000000000
--- a/apps/demo-wallet/src/components/JettonsList.tsx
+++ /dev/null
@@ -1,361 +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 React, { useState } from 'react';
-import type { Jetton } from '@ton/walletkit';
-import { useJettons } from '@demo/wallet-core';
-
-import { createComponentLogger } from '../utils/logger';
-import { Button } from './Button';
-
-import { useFormatJetton, useFormattedJetton } from '@/hooks/useFormattedJetton';
-
-// Create logger for jettons list
-const log = createComponentLogger('JettonsList');
-
-interface JettonsListProps {
-    className?: string;
-    maxItems?: number;
-    showRefreshButton?: boolean;
-}
-
-export const JettonsList: React.FC<JettonsListProps> = ({
-    className = '',
-    maxItems = 10,
-    showRefreshButton = true,
-}) => {
-    const { userJettons, isLoadingJettons, isRefreshing, error, refreshJettons } = useJettons();
-
-    const [selectedJetton, setSelectedJetton] = useState<Jetton | null>(null);
-
-    const formatJetton = useFormatJetton();
-    const selectedJettonInfo = useFormattedJetton(selectedJetton);
-
-    const handleRefresh = async () => {
-        try {
-            await refreshJettons();
-        } catch (err) {
-            log.error('Error refreshing jettons:', err);
-        }
-    };
-
-    const formatAddress = (address: string): string => {
-        return `${address.slice(0, 6)}...${address.slice(-6)}`;
-    };
-
-    const displayedJettons = userJettons.slice(0, maxItems);
-
-    if (error) {
-        return (
-            <div className={`bg-red-50 border border-red-200 rounded-md p-4 ${className}`}>
-                <div className="flex">
-                    <div className="flex-shrink-0">
-                        <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
-                            <path
-                                fillRule="evenodd"
-                                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                                clipRule="evenodd"
-                            />
-                        </svg>
-                    </div>
-                    <div className="ml-3">
-                        <h3 className="text-sm font-medium text-red-800">Error loading jettons</h3>
-                        <p className="text-sm text-red-700 mt-1">{error}</p>
-                        <div className="mt-4">
-                            <Button variant="secondary" onClick={handleRefresh} size="sm">
-                                Try Again
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className={className}>
-            <div className="flex items-center justify-between mb-4">
-                <h3 className="text-lg font-medium text-gray-900">Your Jettons</h3>
-                {showRefreshButton && (
-                    <Button
-                        variant="secondary"
-                        size="sm"
-                        onClick={handleRefresh}
-                        isLoading={isRefreshing}
-                        disabled={isLoadingJettons}
-                    >
-                        {isRefreshing ? 'Refreshing...' : 'Refresh'}
-                    </Button>
-                )}
-            </div>
-            {userJettons.length === 0 ? (
-                <div className="flex items-center justify-center py-8">
-                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-                    <span className="ml-3 text-gray-600">Loading jettons...</span>
-                </div>
-            ) : displayedJettons.length === 0 ? (
-                <div className="text-center py-8">
-                    <div className="text-gray-400 mb-2">
-                        <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
-                            />
-                        </svg>
-                    </div>
-                    <p className="text-gray-500 text-sm">No jettons found</p>
-                    <p className="text-gray-400 text-xs mt-1">
-                        Your jetton tokens will appear here when you receive them
-                    </p>
-                </div>
-            ) : (
-                <div className="space-y-3">
-                    {displayedJettons.map((jetton) => {
-                        const jettonInfo = formatJetton(jetton);
-
-                        return (
-                            <div
-                                key={jetton.address}
-                                className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"
-                                onClick={() => setSelectedJetton(jetton)}
-                            >
-                                <div className="flex items-center space-x-3">
-                                    <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
-                                        {jettonInfo.image ? (
-                                            <img
-                                                src={jettonInfo.image}
-                                                alt={jettonInfo.name}
-                                                className="w-8 h-8 rounded-full object-cover"
-                                                onError={(e) => {
-                                                    // Fallback to initials if image fails to load
-                                                    const target = e.target as HTMLImageElement;
-                                                    target.style.display = 'none';
-                                                    const parent = target.parentElement;
-                                                    if (parent) {
-                                                        parent.innerHTML = jettonInfo.symbol?.slice(0, 2) || '';
-                                                        parent.className += ' text-xs font-bold text-gray-600';
-                                                    }
-                                                }}
-                                            />
-                                        ) : (
-                                            <span className="text-xs font-bold text-gray-600">
-                                                {jettonInfo.symbol?.slice(0, 2)}
-                                            </span>
-                                        )}
-                                    </div>
-                                    <div>
-                                        <h4 className="text-sm font-medium text-gray-900">
-                                            {jettonInfo.name || jettonInfo.symbol}
-                                        </h4>
-                                        <p className="text-xs text-gray-500">
-                                            {jettonInfo.symbol} • {formatAddress(jetton.address)}
-                                        </p>
-                                        {/*{jetton.verification?.verified && (*/}
-                                        {/*    <div className="flex items-center mt-1">*/}
-                                        {/*        <svg*/}
-                                        {/*            className="w-3 h-3 text-green-500 mr-1"*/}
-                                        {/*            fill="currentColor"*/}
-                                        {/*            viewBox="0 0 20 20"*/}
-                                        {/*        >*/}
-                                        {/*            <path*/}
-                                        {/*                fillRule="evenodd"*/}
-                                        {/*                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"*/}
-                                        {/*                clipRule="evenodd"*/}
-                                        {/*            />*/}
-                                        {/*        </svg>*/}
-                                        {/*        <span className="text-xs text-green-600">Verified</span>*/}
-                                        {/*    </div>*/}
-                                        {/*)}*/}
-                                    </div>
-                                </div>
-                                <div className="text-right">
-                                    <p className="text-sm font-medium text-gray-900">{jettonInfo.balance}</p>
-                                    <p className="text-xs text-gray-500">{jettonInfo.symbol}</p>
-                                    {/*{jetton.usdValue && <p className="text-xs text-gray-400">≈ ${jetton.usdValue}</p>}*/}
-                                </div>
-                            </div>
-                        );
-                    })}
-
-                    {userJettons.length > maxItems && (
-                        <div className="text-center py-2">
-                            <p className="text-sm text-gray-500">
-                                Showing {maxItems} of {userJettons.length} jettons
-                            </p>
-                        </div>
-                    )}
-                </div>
-            )}
-            {/* Jetton Details Modal */}
-            {selectedJettonInfo && (
-                <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-                    <div className="bg-white rounded-lg max-w-md w-full max-h-96 overflow-y-auto">
-                        <div className="p-6">
-                            <div className="flex items-center justify-between mb-4">
-                                <div className="flex items-center space-x-3">
-                                    <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
-                                        {selectedJettonInfo.image ? (
-                                            <img
-                                                src={selectedJettonInfo.image}
-                                                alt={selectedJettonInfo.name}
-                                                className="w-10 h-10 rounded-full object-cover"
-                                            />
-                                        ) : (
-                                            <span className="text-sm font-bold text-gray-600">
-                                                {selectedJettonInfo.symbol?.slice(0, 2)}
-                                            </span>
-                                        )}
-                                    </div>
-                                    <div>
-                                        <h3 className="text-lg font-medium text-gray-900">
-                                            {selectedJettonInfo.name || selectedJettonInfo.symbol}
-                                        </h3>
-                                        <p className="text-sm text-gray-500">{selectedJettonInfo.symbol}</p>
-                                    </div>
-                                </div>
-                                <button
-                                    onClick={() => setSelectedJetton(null)}
-                                    className="text-gray-400 hover:text-gray-500"
-                                >
-                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M6 18L18 6M6 6l12 12"
-                                        />
-                                    </svg>
-                                </button>
-                            </div>
-
-                            <div className="space-y-4">
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700">Balance</label>
-                                    <p className="text-2xl font-bold text-gray-900">{selectedJettonInfo.balance}</p>
-                                    {/*{selectedJetton.usdValue && (*/}
-                                    {/*    <p className="text-sm text-gray-500">≈ ${selectedJetton.usdValue} USD</p>*/}
-                                    {/*)}*/}
-                                </div>
-
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700">Contract Address</label>
-                                    <p className="text-sm font-mono text-gray-900 break-all">
-                                        {selectedJettonInfo.address}
-                                    </p>
-                                </div>
-
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700">Wallet Address</label>
-                                    <p className="text-sm font-mono text-gray-900 break-all">
-                                        {selectedJettonInfo.walletAddress}
-                                    </p>
-                                </div>
-
-                                {selectedJettonInfo.description && (
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700">Description</label>
-                                        <p className="text-sm text-gray-600">{selectedJettonInfo.description}</p>
-                                    </div>
-                                )}
-
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700">Decimals</label>
-                                        <p className="text-sm text-gray-900">{selectedJettonInfo.decimals}</p>
-                                    </div>
-                                    {/*{selectedJetton.totalSupply && (*/}
-                                    {/*    <div>*/}
-                                    {/*        <label className="block text-sm font-medium text-gray-700">*/}
-                                    {/*            Total Supply*/}
-                                    {/*        </label>*/}
-                                    {/*        <p className="text-sm text-gray-900">*/}
-                                    {/*            {formatJettonAmount(*/}
-                                    {/*                selectedJetton.totalSupply,*/}
-                                    {/*                selectedJetton.decimals,*/}
-                                    {/*            )}*/}
-                                    {/*        </p>*/}
-                                    {/*    </div>*/}
-                                    {/*)}*/}
-                                </div>
-
-                                {/*<>{selectedJetton.verification && (*/}
-                                {/*    <div>*/}
-                                {/*        <label className="block text-sm font-medium text-gray-700">Verification</label>*/}
-                                {/*        <div className="flex items-center mt-1">*/}
-                                {/*            {selectedJetton.verification.verified ? (*/}
-                                {/*                <>*/}
-                                {/*                    <svg*/}
-                                {/*                        className="w-4 h-4 text-green-500 mr-2"*/}
-                                {/*                        fill="currentColor"*/}
-                                {/*                        viewBox="0 0 20 20"*/}
-                                {/*                    >*/}
-                                {/*                        <path*/}
-                                {/*                            fillRule="evenodd"*/}
-                                {/*                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"*/}
-                                {/*                            clipRule="evenodd"*/}
-                                {/*                        />*/}
-                                {/*                    </svg>*/}
-                                {/*                    <span className="text-sm text-green-600">*/}
-                                {/*                        Verified ({selectedJetton.verification.source})*/}
-                                {/*                    </span>*/}
-                                {/*                </>*/}
-                                {/*            ) : (*/}
-                                {/*                <>*/}
-                                {/*                    <svg*/}
-                                {/*                        className="w-4 h-4 text-yellow-500 mr-2"*/}
-                                {/*                        fill="currentColor"*/}
-                                {/*                        viewBox="0 0 20 20"*/}
-                                {/*                    >*/}
-                                {/*                        <path*/}
-                                {/*                            fillRule="evenodd"*/}
-                                {/*                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"*/}
-                                {/*                            clipRule="evenodd"*/}
-                                {/*                        />*/}
-                                {/*                    </svg>*/}
-                                {/*                    <span className="text-sm text-yellow-600">Not verified</span>*/}
-                                {/*                </>*/}
-                                {/*            )}*/}
-                                {/*        </div>*/}
-                                {/*        {selectedJetton.verification.warnings &&*/}
-                                {/*            selectedJetton.verification.warnings.length > 0 && (*/}
-                                {/*                <div className="mt-2">*/}
-                                {/*                    <ul className="text-xs text-red-600 space-y-1">*/}
-                                {/*                        {selectedJetton.verification.warnings.map((warning, index) => (*/}
-                                {/*                            <li key={index}>• {warning}</li>*/}
-                                {/*                        ))}*/}
-                                {/*                    </ul>*/}
-                                {/*                </div>*/}
-                                {/*            )}*/}
-                                {/*    </div>*/}
-                                {/*)}</>*/}
-                            </div>
-
-                            <div className="flex space-x-3 mt-6">
-                                <Button
-                                    className="flex-1"
-                                    onClick={() => {
-                                        // TODO: Implement send jetton functionality
-                                        // This would navigate to send page with selected jetton
-                                        setSelectedJetton(null);
-                                    }}
-                                >
-                                    Send
-                                </Button>
-                                <Button variant="secondary" onClick={() => setSelectedJetton(null)} className="flex-1">
-                                    Close
-                                </Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/components/Layout.tsx b/apps/demo-wallet/src/components/Layout.tsx
deleted file mode 100644
index 8fc99b049..000000000
--- a/apps/demo-wallet/src/components/Layout.tsx
+++ /dev/null
@@ -1,67 +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 React from 'react';
-
-import { SettingsDropdown } from './SettingsDropdown';
-// import { StreamingStatus } from './StreamingStatus';
-
-interface LayoutProps {
-    children: React.ReactNode;
-    title?: string;
-    showLogout?: boolean;
-    headerAction?: React.ReactNode;
-    onBack?: () => void;
-}
-
-export const Layout: React.FC<LayoutProps> = ({
-    children,
-    title = 'TON Wallet',
-    showLogout = false,
-    headerAction,
-    onBack,
-}) => {
-    return (
-        <div className="min-h-screen bg-gray-100">
-            <header className="bg-white shadow-sm border-b border-gray-200">
-                <div className="sm:w-md md:w-lg mx-auto px-4 py-2 flex items-center gap-3">
-                    {onBack && (
-                        <button
-                            onClick={onBack}
-                            className="p-1 -ml-1 rounded hover:bg-gray-100 text-gray-600 hover:text-gray-900 transition-colors"
-                            aria-label="Back"
-                        >
-                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M15 19l-7-7 7-7"
-                                />
-                            </svg>
-                        </button>
-                    )}
-                    <h1 className="flex-1 text-lg font-bold text-gray-900 min-w-0 truncate" data-testid="title">
-                        {title}
-                    </h1>
-                    <div className="flex items-center gap-2 flex-shrink-0">
-                        {headerAction}
-                        {showLogout && (
-                            <>
-                                {/* <StreamingStatus /> */}
-                                <SettingsDropdown />
-                            </>
-                        )}
-                    </div>
-                </div>
-            </header>
-
-            <main className="max-w-md mx-auto px-3 py-4">{children}</main>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/components/LedgerSetup.tsx b/apps/demo-wallet/src/components/LedgerSetup.tsx
deleted file mode 100644
index a78082f7b..000000000
--- a/apps/demo-wallet/src/components/LedgerSetup.tsx
+++ /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 React, { useState } from 'react';
-import { useAuth } from '@demo/wallet-core';
-import type { NetworkType } from '@demo/wallet-core';
-
-import { Button } from './Button';
-import { NetworkSelector } from './NetworkSelector';
-
-interface LedgerSetupProps {
-    onConnect: (network: NetworkType) => Promise<void>;
-    onBack: () => void;
-    isLoading: boolean;
-    error: string;
-}
-
-export const LedgerSetup: React.FC<LedgerSetupProps> = ({ onConnect, onBack, isLoading, error }) => {
-    const [network, setNetwork] = useState<NetworkType>('mainnet');
-    const { ledgerAccountNumber, setLedgerAccountNumber } = useAuth();
-
-    const handleConnect = async () => {
-        await onConnect(network);
-    };
-
-    return (
-        <div className="space-y-4">
-            <div className="text-center">
-                <h2 className="text-xl font-bold text-gray-900">Connect Ledger</h2>
-                <p className="mt-1 text-xs text-gray-600">Connect your Ledger hardware wallet.</p>
-            </div>
-
-            <div className="bg-white rounded-lg shadow-md border border-gray-200 p-4">
-                <div className="space-y-4">
-                    <div className="space-y-2 bg-gray-50 rounded-lg p-3">
-                        <NetworkSelector value={network} onChange={setNetwork} compact />
-
-                        <div className="flex items-center justify-between">
-                            <span className="text-sm font-medium text-gray-700">Account</span>
-                            <input
-                                type="number"
-                                min="0"
-                                max="2147483647"
-                                className="w-20 px-2 py-1.5 text-xs border border-gray-200 rounded-lg text-center focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
-                                value={ledgerAccountNumber || 0}
-                                onChange={(e) => setLedgerAccountNumber(parseInt(e.target.value, 10) || 0)}
-                            />
-                        </div>
-                    </div>
-
-                    <div className="bg-yellow-50 border border-yellow-200 rounded-md p-3">
-                        <h3 className="text-xs font-medium text-yellow-800 mb-2">Before you continue:</h3>
-                        <ul className="text-xs text-yellow-700 space-y-1 list-disc pl-4">
-                            <li>Connect Ledger via USB</li>
-                            <li>Unlock with PIN</li>
-                            <li>Open TON app</li>
-                        </ul>
-                    </div>
-
-                    <div className="flex space-x-3">
-                        <Button variant="secondary" onClick={onBack} className="flex-1" disabled={isLoading}>
-                            Cancel
-                        </Button>
-                        <Button onClick={handleConnect} isLoading={isLoading} className="flex-1">
-                            Connect
-                        </Button>
-                    </div>
-
-                    {error && <div className="text-red-600 text-xs text-center">{error}</div>}
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/components/Modal.tsx b/apps/demo-wallet/src/components/Modal.tsx
deleted file mode 100644
index be51cbbd4..000000000
--- a/apps/demo-wallet/src/components/Modal.tsx
+++ /dev/null
@@ -1,106 +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 React from 'react';
-import { createPortal } from 'react-dom';
-
-interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    children: React.ReactNode;
-    className?: string;
-}
-
-export const ModalContainer: React.FC<ModalProps> = ({ isOpen, onClose, children, className = '' }) => {
-    if (!isOpen) return null;
-
-    const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-        if (e.target === e.currentTarget) {
-            onClose();
-        }
-    };
-
-    return createPortal(
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30" onClick={handleBackdropClick}>
-            <div
-                className={`bg-white rounded-lg shadow-xl max-w-md w-full mx-4 ${className}`}
-                onClick={(e) => e.stopPropagation()}
-            >
-                {children}
-            </div>
-        </div>,
-        document.body,
-    );
-};
-
-interface ModalHeaderProps {
-    children: React.ReactNode;
-    onClose?: () => void;
-    className?: string;
-}
-
-export const ModalHeader: React.FC<ModalHeaderProps> = ({ children, onClose, className = '' }) => {
-    return (
-        <div className={`px-6 py-4 ${className}`}>
-            <div className="flex items-center justify-between">
-                <div className="flex-1">{children}</div>
-                {onClose && (
-                    <button
-                        onClick={onClose}
-                        className="ml-4 text-gray-400 hover:text-gray-600 transition-colors"
-                        aria-label="Close"
-                    >
-                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M6 18L18 6M6 6l12 12"
-                            />
-                        </svg>
-                    </button>
-                )}
-            </div>
-        </div>
-    );
-};
-
-interface ModalTitleProps {
-    children: React.ReactNode;
-    className?: string;
-}
-
-export const ModalTitle: React.FC<ModalTitleProps> = ({ children, className = '' }) => {
-    return <h3 className={`text-lg font-semibold text-gray-900 ${className}`}>{children}</h3>;
-};
-
-interface ModalBodyProps {
-    children: React.ReactNode;
-    className?: string;
-}
-
-export const ModalBody: React.FC<ModalBodyProps> = ({ children, className = '' }) => {
-    return <div className={`px-6 py-4 ${className}`}>{children}</div>;
-};
-
-interface ModalFooterProps {
-    children: React.ReactNode;
-    className?: string;
-}
-
-export const ModalFooter: React.FC<ModalFooterProps> = ({ children, className = '' }) => {
-    return <div className={`px-6 py-4 ${className}`}>{children}</div>;
-};
-
-export const Modal = {
-    Container: ModalContainer,
-    Header: ModalHeader,
-    Title: ModalTitle,
-    Body: ModalBody,
-    Footer: ModalFooter,
-};
diff --git a/apps/demo-wallet/src/components/NftsCard.tsx b/apps/demo-wallet/src/components/NftsCard.tsx
deleted file mode 100644
index f3e609386..000000000
--- a/apps/demo-wallet/src/components/NftsCard.tsx
+++ /dev/null
@@ -1,335 +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 React, { useState } from 'react';
-import type { NFT } from '@ton/walletkit';
-import { useNfts } from '@demo/wallet-core';
-
-import { Button } from './Button';
-import { Card } from './Card';
-
-interface NftsCardProps {
-    className?: string;
-}
-
-export const NftsCard: React.FC<NftsCardProps> = ({ className = '' }) => {
-    const { userNfts, isLoadingNfts, error, loadUserNfts, formatNftIndex } = useNfts();
-    const [selectedNft, setSelectedNft] = useState<NFT | null>(null);
-
-    const formatAddress = (address: string): string => {
-        return `${address.slice(0, 4)}...${address.slice(-4)}`;
-    };
-
-    const getNftImage = (nft: NFT): string => {
-        if (!nft?.info?.image) {
-            return '';
-        }
-
-        return (
-            nft.info.image.url ||
-            nft.info.image.data ||
-            nft.info.image.mediumUrl ||
-            nft.info.image.largeUrl ||
-            nft.info.image.smallUrl ||
-            ''
-        );
-    };
-
-    const getNftName = (nft: NFT): string => {
-        if (nft.info?.name) {
-            return nft.info.name;
-        }
-
-        if (nft.index) {
-            return `NFT ${formatNftIndex(nft.index)}`;
-        }
-
-        return '';
-    };
-
-    const getNftDescription = (nft: NFT): string | null => {
-        if (nft.info?.description) {
-            return nft.info.description;
-        }
-        return null;
-    };
-
-    const getCollectionName = (item: NFT): string => {
-        if (item.collection && item.collection.name) {
-            return item.collection.name;
-        }
-
-        return 'Unknown Collection';
-    };
-
-    // Show top 3 NFTs
-    const topNfts = userNfts.slice(0, 3);
-    const totalNfts = userNfts.length;
-
-    if (error) {
-        return (
-            <Card title="NFTs" className={className} compact>
-                <div className="text-center py-4">
-                    <div className="text-red-400 mb-2">
-                        <svg className="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 20 20">
-                            <path
-                                fillRule="evenodd"
-                                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                                clipRule="evenodd"
-                            />
-                        </svg>
-                    </div>
-                    <p className="text-sm text-red-600 mb-3">Failed to load NFTs</p>
-                    <Button size="sm" variant="secondary" onClick={() => loadUserNfts()}>
-                        Try Again
-                    </Button>
-                </div>
-            </Card>
-        );
-    }
-
-    return (
-        <Card title="NFTs" className={className} compact>
-            {isLoadingNfts ? (
-                <div className="flex items-center justify-center py-8">
-                    <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-                    <span className="ml-3 text-sm text-gray-600">Loading NFTs...</span>
-                </div>
-            ) : totalNfts === 0 ? (
-                <div className="text-center py-6">
-                    <div className="text-gray-400 mb-2">
-                        <svg className="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                            />
-                        </svg>
-                    </div>
-                    <p className="text-sm text-gray-500">No NFTs yet</p>
-                    <p className="text-xs text-gray-400 mt-1">Your NFT collection will appear here</p>
-                </div>
-            ) : (
-                <div className="space-y-4">
-                    {/* Summary */}
-                    <div className="p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl border border-purple-100 space-y-1">
-                        <p className="text-base font-semibold text-gray-900">
-                            {totalNfts} {totalNfts === 1 ? 'NFT' : 'NFTs'}
-                        </p>
-                        <p className="text-sm text-gray-600">Digital collectibles</p>
-                    </div>
-
-                    {/* Top NFTs */}
-                    <div className="grid grid-cols-1 gap-3">
-                        {topNfts.map((nft) => (
-                            <div
-                                key={nft.address}
-                                className="flex items-center space-x-3 p-3 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"
-                                onClick={() => setSelectedNft(nft)}
-                            >
-                                <div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden">
-                                    {getNftImage(nft) ? (
-                                        <img
-                                            src={getNftImage(nft)!}
-                                            alt={getNftName(nft)}
-                                            className="w-full h-full object-cover"
-                                            onError={(e) => {
-                                                // Fallback to placeholder if image fails to load
-                                                const target = e.target as HTMLImageElement;
-                                                target.style.display = 'none';
-                                                const parent = target.parentElement;
-                                                if (parent) {
-                                                    parent.innerHTML = `
-                                                        <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
-                                                        </svg>
-                                                    `;
-                                                }
-                                            }}
-                                        />
-                                    ) : (
-                                        <svg
-                                            className="w-6 h-6 text-gray-400"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                                            />
-                                        </svg>
-                                    )}
-                                </div>
-                                <div className="flex-1 min-w-0">
-                                    <h4 className="text-sm font-medium text-gray-900 truncate">{getNftName(nft)}</h4>
-                                    <p className="text-xs text-gray-500 truncate">
-                                        {getCollectionName(nft) || formatAddress(nft.address)}
-                                    </p>
-                                    {nft.isOnSale && (
-                                        <div className="flex items-center mt-1">
-                                            <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
-                                                On Sale
-                                            </span>
-                                        </div>
-                                    )}
-                                </div>
-                                <div className="flex-shrink-0">
-                                    <svg
-                                        className="w-4 h-4 text-gray-400"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M9 5l7 7-7 7"
-                                        />
-                                    </svg>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-
-                    {totalNfts > 3 && (
-                        <div className="text-center pt-2">
-                            <p className="text-xs text-gray-500">Showing 3 of {totalNfts} NFTs</p>
-                        </div>
-                    )}
-                </div>
-            )}
-
-            {/* NFT Details Modal */}
-            {selectedNft && (
-                <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-                    <div className="bg-white rounded-lg max-w-md w-full max-h-96 overflow-y-auto">
-                        <div className="p-6">
-                            <div className="flex items-center justify-between mb-4">
-                                <h3 className="text-lg font-medium text-gray-900 truncate">
-                                    {getNftName(selectedNft)}
-                                </h3>
-                                <button
-                                    onClick={() => setSelectedNft(null)}
-                                    className="text-gray-400 hover:text-gray-500"
-                                >
-                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M6 18L18 6M6 6l12 12"
-                                        />
-                                    </svg>
-                                </button>
-                            </div>
-
-                            <div className="space-y-4">
-                                {/* NFT Image */}
-                                <div className="w-full h-48 bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden">
-                                    {getNftImage(selectedNft) ? (
-                                        <img
-                                            src={getNftImage(selectedNft)!}
-                                            alt={getNftName(selectedNft)}
-                                            className="w-full h-full object-cover"
-                                        />
-                                    ) : (
-                                        <svg
-                                            className="w-16 h-16 text-gray-400"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                                            />
-                                        </svg>
-                                    )}
-                                </div>
-
-                                {/* Description */}
-                                {getNftDescription(selectedNft) && (
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700">Description</label>
-                                        <p className="text-sm text-gray-600 mt-1">{getNftDescription(selectedNft)}</p>
-                                    </div>
-                                )}
-
-                                {/* Collection */}
-                                {selectedNft.collection && (
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700">Collection</label>
-                                        <p className="text-sm text-gray-900">{getCollectionName(selectedNft)}</p>
-                                        {getNftDescription(selectedNft) && (
-                                            <p className="text-xs text-gray-500 mt-1">
-                                                {getNftDescription(selectedNft)}
-                                            </p>
-                                        )}
-                                    </div>
-                                )}
-
-                                {/* Details */}
-                                <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700">Index</label>
-                                        <p className="text-sm text-gray-900">
-                                            {selectedNft?.index ? formatNftIndex(selectedNft?.index) : '-'}
-                                        </p>
-                                    </div>
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700">Status</label>
-                                        <p className="text-sm text-gray-900">
-                                            {selectedNft.isOnSale ? 'On Sale' : 'Not for Sale'}
-                                        </p>
-                                    </div>
-                                </div>
-
-                                <div>
-                                    <label className="block text-sm font-medium text-gray-700">Contract Address</label>
-                                    <p className="text-sm font-mono text-gray-900 break-all">{selectedNft.address}</p>
-                                </div>
-
-                                {selectedNft.ownerAddress && (
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700">Owner</label>
-                                        <p className="text-sm font-mono text-gray-900 break-all">
-                                            {selectedNft.ownerAddress}
-                                        </p>
-                                    </div>
-                                )}
-                            </div>
-
-                            <div className="flex space-x-3 mt-6">
-                                <Button
-                                    className="flex-1"
-                                    onClick={() => {
-                                        // TODO: Implement send NFT functionality
-                                        // This would navigate to send page with selected NFT
-                                        setSelectedNft(null);
-                                    }}
-                                >
-                                    Transfer
-                                </Button>
-                                <Button variant="secondary" onClick={() => setSelectedNft(null)} className="flex-1">
-                                    Close
-                                </Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </Card>
-    );
-};
diff --git a/apps/demo-wallet/src/components/RecentTransactions.tsx b/apps/demo-wallet/src/components/RecentTransactions.tsx
deleted file mode 100644
index d848260dc..000000000
--- a/apps/demo-wallet/src/components/RecentTransactions.tsx
+++ /dev/null
@@ -1,498 +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 React, { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { motion } from 'framer-motion';
-import { useShallow } from 'zustand/react/shallow';
-import { useWalletStore } from '@demo/wallet-core';
-import { Base64ToHex } from '@ton/walletkit';
-import type { Event, Action } from '@ton/walletkit';
-
-import { formatTonForDisplay, getTonviewerTxUrl, sameAddress } from '../utils';
-import { TraceRow } from './TraceRow';
-import { TransactionErrorState, TransactionLoadingState, TransactionEmptyState, ActionCard } from './transactions';
-
-interface RecentTransactionsProps {
-    embedded?: boolean;
-}
-
-/**
- * Recent Transactions component
- * Displays a list of recent blockchain transactions for the current wallet
- */
-export const RecentTransactions: React.FC<RecentTransactionsProps> = memo(({ embedded = false }) => {
-    const { events, loadEvents, address, hasNextEvents, pendingTransactions, network } = useWalletStore(
-        useShallow((state) => {
-            const activeWallet = state.walletManagement.savedWallets.find(
-                (w) => w.id === state.walletManagement.activeWalletId,
-            );
-            return {
-                events: state.walletManagement.events,
-                loadEvents: state.loadEvents,
-                address: state.walletManagement.address,
-                hasNextEvents: state.walletManagement.hasNextEvents,
-                pendingTransactions: state.walletManagement.pendingTransactions,
-                network: activeWallet?.network || 'testnet',
-            };
-        }),
-    );
-    const [isInitialLoading, setIsInitialLoading] = useState(true);
-    const [isPaginating, setIsPaginating] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [currentPage, setCurrentPage] = useState(0);
-    const [limit] = useState(10);
-    const seenKeysRef = useRef<Set<string>>(new Set());
-    const hasShownListRef = useRef(false);
-
-    useEffect(() => {
-        seenKeysRef.current = new Set();
-        hasShownListRef.current = false;
-    }, [address]);
-
-    // Load events when component mounts, address changes, or page changes
-    useEffect(() => {
-        const fetchEvents = async () => {
-            if (!address) return;
-
-            // Determine if this is initial load or pagination
-            const isInitial = currentPage === 0 && eventItems.length === 0;
-
-            if (isInitial) {
-                setIsInitialLoading(true);
-            } else {
-                setIsPaginating(true);
-            }
-
-            setError(null);
-            try {
-                const offset = currentPage * limit;
-                await loadEvents(limit, offset);
-            } catch (_err) {
-                setError('Failed to load events');
-            } finally {
-                setIsInitialLoading(false);
-                setIsPaginating(false);
-            }
-        };
-
-        fetchEvents();
-    }, [address, loadEvents, currentPage, limit]);
-
-    const handleRefresh = async () => {
-        if (!address) return;
-
-        setIsPaginating(true);
-        setError(null);
-        try {
-            const offset = currentPage * limit;
-            await loadEvents(limit, offset);
-        } catch (_err) {
-            setError('Failed to refresh events');
-        } finally {
-            setIsPaginating(false);
-        }
-    };
-
-    const handleNextPage = () => {
-        if (hasNextEvents && !isPaginating) {
-            setCurrentPage((prev) => prev + 1);
-        }
-    };
-
-    const handlePreviousPage = () => {
-        if (currentPage > 0 && !isPaginating) {
-            setCurrentPage((prev) => prev - 1);
-        }
-    };
-
-    const eventItems = useMemo(() => (events || []) as Event[], [events]);
-
-    const { confirmedTraceIds, confirmedExternalHashes } = useMemo(() => {
-        const traceIds = new Set<string>();
-        const extHashes = new Set<string>();
-        for (const ev of eventItems) {
-            if (ev.eventId) traceIds.add(ev.eventId);
-            if (ev.traceExternalHash) extHashes.add(Base64ToHex(ev.traceExternalHash));
-        }
-        return { confirmedTraceIds: traceIds, confirmedExternalHashes: extHashes };
-    }, [eventItems]);
-
-    // Merge pending + events, sort by timestamp desc. Remove pending when we have matching event (confirmed).
-    const mergedItems = useMemo(() => {
-        const filteredPending = pendingTransactions.filter((p) => {
-            if (p.traceId && confirmedTraceIds.has(p.traceId)) return false;
-            if (p.externalHash && confirmedExternalHashes.has(p.externalHash)) return false;
-            return true;
-        });
-        // Dedupe pending by trace_id
-        const seenByTraceId = new Set<string>();
-        const dedupedPending = filteredPending.filter((p) => {
-            if (seenByTraceId.has(p.traceId)) return false;
-            seenByTraceId.add(p.traceId);
-            return true;
-        });
-        const pendingAsItems = dedupedPending.map((p) => ({
-            type: 'pending' as const,
-            traceId: p.traceId,
-            externalHash: p.externalHash,
-            timestamp: p.preview?.timestamp ?? Math.floor(Date.now() / 1000),
-            data: p,
-        }));
-        const eventAsItems = eventItems.map((ev) => {
-            return {
-                type: 'event' as const,
-                traceId: ev.eventId,
-                externalHash: ev.traceExternalHash ? Base64ToHex(ev.traceExternalHash) : undefined,
-                timestamp: ev.timestamp,
-                data: ev,
-            };
-        });
-        const combined = [...pendingAsItems, ...eventAsItems];
-        combined.sort((a, b) => b.timestamp - a.timestamp);
-
-        return combined;
-    }, [pendingTransactions, eventItems, confirmedTraceIds, confirmedExternalHashes]);
-
-    // Reset seenKeys when first showing list so items animate (works with React Strict Mode double-mount)
-    if (!isInitialLoading && mergedItems.length > 0 && !hasShownListRef.current) {
-        hasShownListRef.current = true;
-        seenKeysRef.current = new Set();
-    }
-
-    const header = !embedded && (
-        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-            <h3 className="text-lg font-medium text-gray-900">Recent Transactions</h3>
-            <button
-                onClick={handleRefresh}
-                disabled={isPaginating}
-                className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50"
-                title="Refresh"
-            >
-                <svg
-                    className={`w-4 h-4 ${isPaginating ? 'animate-spin' : ''}`}
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                    />
-                </svg>
-            </button>
-        </div>
-    );
-
-    const content = (
-        <div className={`relative ${embedded ? 'py-2 border-t border-gray-100' : 'p-6'}`}>
-            {error ? (
-                <TransactionErrorState error={error} onRetry={handleRefresh} />
-            ) : isInitialLoading ? (
-                <TransactionLoadingState />
-            ) : mergedItems.length === 0 && currentPage === 0 ? (
-                <TransactionEmptyState />
-            ) : mergedItems.length === 0 && currentPage > 0 ? (
-                <div className="text-center py-8">
-                    <p className="text-gray-500">No transactions on this page</p>
-                </div>
-            ) : (
-                <>
-                    {/* Loading overlay during pagination */}
-                    {isPaginating && (
-                        <div className="absolute inset-0 bg-white bg-opacity-70 flex items-center justify-center z-10 rounded-lg">
-                            <div className="flex items-center space-x-2">
-                                <svg
-                                    className="animate-spin h-5 w-5 text-gray-600"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                >
-                                    <circle
-                                        className="opacity-25"
-                                        cx="12"
-                                        cy="12"
-                                        r="10"
-                                        stroke="currentColor"
-                                        strokeWidth="4"
-                                    />
-                                    <path
-                                        className="opacity-75"
-                                        fill="currentColor"
-                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                                    />
-                                </svg>
-                                <span className="text-sm text-gray-600">Loading...</span>
-                            </div>
-                        </div>
-                    )}
-
-                    <div
-                        className={`transition-opacity duration-200 ${embedded ? 'space-y-0' : 'space-y-3'} ${isPaginating ? 'opacity-50' : 'opacity-100'}`}
-                    >
-                        {mergedItems.map((item) => {
-                            const itemKey = item.type === 'pending' ? `pending-${item.data.traceId}` : item.traceId;
-                            const isNew = !seenKeysRef.current.has(itemKey);
-                            if (isNew) seenKeysRef.current.add(itemKey);
-
-                            const layoutTransition = { type: 'tween' as const, duration: 0.275 };
-                            const motionProps = {
-                                layout: true,
-                                initial: isNew ? { opacity: 0, y: -20 } : false,
-                                animate: { opacity: 1, y: 0 },
-                                transition: layoutTransition,
-                            };
-
-                            if (item.type === 'pending') {
-                                const p = item.data;
-                                const preview = p.preview;
-                                const isPending = p.finality !== 'confirmed' && p.finality !== 'finalized';
-
-                                const finality = p.finality ?? 'pending';
-                                const pendingExplorerHash = p.externalHash ?? p.traceId;
-                                if (p.action) {
-                                    return (
-                                        <motion.div key={itemKey} {...motionProps}>
-                                            <ActionCard
-                                                action={p.action}
-                                                myAddress={address || ''}
-                                                timestamp={preview?.timestamp ?? Math.floor(Date.now() / 1000)}
-                                                traceLink={
-                                                    isPending
-                                                        ? undefined
-                                                        : getTonviewerTxUrl(network, pendingExplorerHash)
-                                                }
-                                                isPending={isPending}
-                                                finality={finality}
-                                                debugId={`pending-${p.traceId.slice(0, 12)}`}
-                                            />
-                                        </motion.div>
-                                    );
-                                }
-
-                                const amountFormatted = preview ? formatTonForDisplay(preview.amount) : '0';
-                                const description = preview
-                                    ? preview.type === 'send'
-                                        ? `Sent ${amountFormatted} TON`
-                                        : preview.type === 'receive'
-                                          ? `Received ${amountFormatted} TON`
-                                          : `Transfer ${amountFormatted} TON`
-                                    : 'Processing';
-                                const value = preview ? `${amountFormatted} TON` : '0 TON';
-
-                                const pendingAction = {
-                                    type: 'TonTransfer',
-                                    id: p.traceId,
-                                    status: 'success' as const,
-                                    simplePreview: {
-                                        name: 'Ton Transfer',
-                                        description,
-                                        value,
-                                        accounts:
-                                            preview && address
-                                                ? preview.type === 'send'
-                                                    ? [{ address, isScam: false, isWallet: true }]
-                                                    : [{ address: preview.address, isScam: false, isWallet: false }]
-                                                : [],
-                                    },
-                                    baseTransactions: [] as string[],
-                                    TonTransfer: {
-                                        sender: {
-                                            address: preview?.type === 'send' ? address || '' : preview?.address || '',
-                                            isScam: false,
-                                            isWallet: true,
-                                        },
-                                        recipient: {
-                                            address: preview?.type === 'send' ? preview?.address || '' : address || '',
-                                            isScam: false,
-                                            isWallet: false,
-                                        },
-                                        amount: BigInt(preview?.amount || 0),
-                                    },
-                                } as Action;
-
-                                return (
-                                    <motion.div key={itemKey} {...motionProps}>
-                                        <ActionCard
-                                            action={pendingAction}
-                                            myAddress={address || ''}
-                                            timestamp={preview?.timestamp ?? Math.floor(Date.now() / 1000)}
-                                            traceLink={
-                                                isPending ? undefined : getTonviewerTxUrl(network, pendingExplorerHash)
-                                            }
-                                            isPending={isPending}
-                                            finality={finality}
-                                            debugId={`pending-${p.traceId.slice(0, 12)}`}
-                                        />
-                                    </motion.div>
-                                );
-                            }
-
-                            const ev = item.data;
-                            const traceId = item.traceId;
-                            const externalHash = item.externalHash ?? traceId;
-
-                            if (!ev.actions || ev.actions.length === 0) {
-                                const rowDebugId = `event-row-${traceId.slice(0, 12)}`;
-                                return (
-                                    <motion.div key={itemKey} {...motionProps}>
-                                        <div className="relative">
-                                            <span
-                                                className="absolute top-1 right-1 text-[9px] font-mono text-gray-300 z-10"
-                                                title={rowDebugId}
-                                            >
-                                                {rowDebugId}
-                                            </span>
-                                            <TraceRow traceId={traceId} externalHash={externalHash} />
-                                        </div>
-                                    </motion.div>
-                                );
-                            }
-
-                            const myAddr = address || '';
-                            const withMe = ev.actions.filter((a: Action) =>
-                                a.simplePreview?.accounts?.some((acc) => sameAddress(acc.address, myAddr)),
-                            );
-                            const preferSender = (a: Action) => {
-                                if (a.type === 'TonTransfer' && 'TonTransfer' in a)
-                                    return sameAddress(a.TonTransfer.sender.address, myAddr);
-                                if (a.type === 'JettonTransfer' && 'JettonTransfer' in a)
-                                    return sameAddress(a.JettonTransfer.sender.address, myAddr);
-                                if (a.type === 'NftItemTransfer' && 'NftItemTransfer' in a)
-                                    return sameAddress(a.NftItemTransfer.sender.address, myAddr);
-                                return (
-                                    a.simplePreview?.accounts?.[0] &&
-                                    sameAddress(a.simplePreview.accounts[0].address, myAddr)
-                                );
-                            };
-                            const relevantAction = withMe.find(preferSender) || withMe[0] || ev.actions[0];
-
-                            return (
-                                <motion.div key={itemKey} {...motionProps}>
-                                    <ActionCard
-                                        action={relevantAction}
-                                        myAddress={address || ''}
-                                        timestamp={ev.timestamp}
-                                        traceLink={getTonviewerTxUrl(network, externalHash)}
-                                        finality="done"
-                                        debugId={`event-${traceId.slice(0, 12)}`}
-                                    />
-                                </motion.div>
-                            );
-                        })}
-                    </div>
-                </>
-            )}
-        </div>
-    );
-
-    const pagination = !error && !isInitialLoading && (currentPage > 0 || (eventItems?.length ?? 0) > 0) && (
-        <div
-            className={`flex items-center justify-between ${embedded ? 'py-2 border-t border-gray-100' : 'px-6 py-4 border-t border-gray-200'}`}
-        >
-            {currentPage > 0 ? (
-                <button
-                    onClick={handlePreviousPage}
-                    disabled={isPaginating}
-                    className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-                >
-                    {isPaginating ? (
-                        <svg
-                            className="animate-spin h-4 w-4 mr-1"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                        >
-                            <circle
-                                className="opacity-25"
-                                cx="12"
-                                cy="12"
-                                r="10"
-                                stroke="currentColor"
-                                strokeWidth="4"
-                            />
-                            <path
-                                className="opacity-75"
-                                fill="currentColor"
-                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                            />
-                        </svg>
-                    ) : (
-                        <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-                        </svg>
-                    )}
-                    Previous
-                </button>
-            ) : (
-                <div />
-            )}
-
-            <div className="text-sm text-gray-700">Page {currentPage + 1}</div>
-
-            {hasNextEvents ? (
-                <button
-                    onClick={handleNextPage}
-                    disabled={isPaginating}
-                    className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
-                >
-                    Next
-                    {isPaginating ? (
-                        <svg
-                            className="animate-spin h-4 w-4 ml-1"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                        >
-                            <circle
-                                className="opacity-25"
-                                cx="12"
-                                cy="12"
-                                r="10"
-                                stroke="currentColor"
-                                strokeWidth="4"
-                            />
-                            <path
-                                className="opacity-75"
-                                fill="currentColor"
-                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                            />
-                        </svg>
-                    ) : (
-                        <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                        </svg>
-                    )}
-                </button>
-            ) : (
-                <div />
-            )}
-        </div>
-    );
-
-    if (embedded) {
-        return (
-            <div className="space-y-0">
-                {header}
-                {content}
-                {pagination}
-            </div>
-        );
-    }
-
-    return (
-        <div className="bg-white rounded-lg shadow-md border border-gray-200">
-            {header}
-            {content}
-            {pagination}
-        </div>
-    );
-});
-
-RecentTransactions.displayName = 'RecentTransactions';
diff --git a/apps/demo-wallet/src/components/RequestModal.tsx b/apps/demo-wallet/src/components/RequestModal.tsx
deleted file mode 100644
index 0045cccca..000000000
--- a/apps/demo-wallet/src/components/RequestModal.tsx
+++ /dev/null
@@ -1,342 +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 React, { useEffect, useMemo, useState } from 'react';
-import type { SendTransactionRequestEvent, SignMessageRequestEvent, TransactionEmulatedPreview } from '@ton/walletkit';
-import { useAuth, useWalletKit, useWalletStore } from '@demo/wallet-core';
-import type { SavedWallet } from '@demo/wallet-core';
-import { toast } from 'sonner';
-
-import { Button } from './Button';
-import { HoldToSignButton } from './HoldToSignButton';
-import { JettonFlow } from './JettonFlow';
-import { SuccessCard } from './SuccessCard';
-import { createComponentLogger } from '../utils/logger';
-
-type RequestEvent = SendTransactionRequestEvent | SignMessageRequestEvent;
-type WarningTone = 'red' | 'yellow';
-
-interface RequestModalProps {
-    request: RequestEvent;
-    savedWallets: SavedWallet[];
-    isOpen: boolean;
-    title: string;
-    subtitle: string;
-    details?: React.ReactNode;
-    warning: { tone: WarningTone; message: React.ReactNode };
-    approveLabel: string;
-    successMessage: string;
-    testIds: { request: string; approve: string; reject: string };
-    onApprove: () => Promise<void>;
-    onReject: () => void;
-    loggerName: string;
-    previewMode: 'send' | 'sign';
-}
-
-const WARNING_CLASSES: Record<WarningTone, { container: string; icon: string; text: string }> = {
-    red: {
-        container: 'bg-red-50 border-red-200',
-        icon: 'text-red-400',
-        text: 'text-red-800',
-    },
-    yellow: {
-        container: 'bg-yellow-50 border-yellow-200',
-        icon: 'text-yellow-400',
-        text: 'text-yellow-800',
-    },
-};
-
-export const RequestModal: React.FC<RequestModalProps> = ({
-    request,
-    savedWallets,
-    isOpen,
-    title,
-    subtitle,
-    details,
-    warning,
-    approveLabel,
-    successMessage,
-    testIds,
-    onApprove,
-    onReject,
-    loggerName,
-    previewMode,
-}) => {
-    const walletKit = useWalletKit();
-    const isAuthenticated = useWalletStore((state) => state.walletManagement.isAuthenticated);
-    const { holdToSign } = useAuth();
-    const [isLoading, setIsLoading] = useState(false);
-    const [showSuccess, setShowSuccess] = useState(false);
-    const [isExpired, setIsExpired] = useState(false);
-    const [localPreview, setLocalPreview] = useState<TransactionEmulatedPreview | undefined>(undefined);
-
-    const log = useMemo(() => createComponentLogger(loggerName), [loggerName]);
-
-    const currentWallet = useMemo(() => {
-        if (!request.walletAddress) return null;
-        return savedWallets.find((wallet) => wallet.kitWalletId === request.walletId) || null;
-    }, [savedWallets, request.walletAddress, request.walletId]);
-
-    useEffect(() => {
-        const checkExpiration = () => {
-            const validUntil = request.request?.validUntil;
-            if (validUntil) {
-                const now = Math.floor(Date.now() / 1000);
-                setIsExpired(validUntil < now);
-            } else {
-                setIsExpired(false);
-            }
-        };
-        checkExpiration();
-        const interval = setInterval(checkExpiration, 1000);
-        return () => clearInterval(interval);
-    }, [request.request?.validUntil]);
-
-    useEffect(() => {
-        if (!isAuthenticated) return;
-        async function updatePreview() {
-            if (request.preview.data) return;
-            await walletKit?.ensureInitialized();
-            const preview = await walletKit
-                ?.getWallet(request.walletId ?? '')
-                ?.getTransactionPreview(request.request, { mode: previewMode });
-            setLocalPreview(preview);
-        }
-        updatePreview();
-    }, [request.walletId, request.request, request.preview, walletKit, isAuthenticated, previewMode]);
-
-    const preview = useMemo(() => localPreview ?? request.preview.data, [request, localPreview]);
-
-    useEffect(() => {
-        if (!isOpen) {
-            setShowSuccess(false);
-            setIsLoading(false);
-            setIsExpired(false);
-        }
-    }, [isOpen]);
-
-    const handleApprove = async () => {
-        setIsLoading(true);
-        try {
-            await onApprove();
-            setShowSuccess(true);
-        } catch (error) {
-            log.error(`Failed to approve ${loggerName}:`, error);
-            toast.error('Failed to approve request', {
-                description: (error as Error)?.message,
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    if (!isOpen) return null;
-    if (showSuccess) return <SuccessCard message={successMessage} />;
-
-    const warningClasses = WARNING_CLASSES[warning.tone];
-
-    let dAppHost: string | undefined;
-    try {
-        dAppHost = request.dAppInfo?.url ? new URL(request.dAppInfo.url).host : undefined;
-    } catch (_e) {
-        dAppHost = request.dAppInfo?.url;
-    }
-
-    return (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center sm:p-4 z-50">
-            <div className="bg-white w-full h-full sm:rounded-lg sm:max-w-md sm:h-auto sm:max-h-[90vh] flex flex-col overflow-hidden">
-                {/* Scrollable content */}
-                <div className="flex-1 overflow-y-auto p-6">
-                    <div className="space-y-6">
-                        <div className="text-center">
-                            <h2 data-testid={testIds.request} className="text-xl font-bold text-gray-900">
-                                {title}
-                            </h2>
-                            <p className="text-gray-600 text-sm mt-1">{subtitle}</p>
-                        </div>
-
-                        {/* Combined dApp + Wallet block */}
-                        <div className="border rounded-lg bg-gray-50 overflow-hidden">
-                            {/* dApp row */}
-                            <div className="flex items-center space-x-3 p-4">
-                                {request.dAppInfo?.iconUrl ? (
-                                    <img
-                                        src={request.dAppInfo.iconUrl}
-                                        alt={request.dAppInfo.name}
-                                        className="w-10 h-10 rounded-lg object-cover flex-shrink-0"
-                                        onError={(e) => {
-                                            e.currentTarget.style.display = 'none';
-                                        }}
-                                    />
-                                ) : (
-                                    <div className="w-10 h-10 rounded-lg bg-gray-200 flex items-center justify-center flex-shrink-0">
-                                        <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                                            <path
-                                                fillRule="evenodd"
-                                                d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
-                                                clipRule="evenodd"
-                                            />
-                                        </svg>
-                                    </div>
-                                )}
-                                <div className="flex-1 min-w-0">
-                                    <p className="text-sm font-semibold text-gray-900 truncate">
-                                        {request.dAppInfo?.name || 'Unknown dApp'}
-                                    </p>
-                                    {dAppHost && <p className="text-xs text-gray-500 truncate">{dAppHost}</p>}
-                                </div>
-                            </div>
-
-                            {/* Wallet row */}
-                            {currentWallet && (
-                                <>
-                                    <div className="border-t border-gray-200" />
-                                    <div className="flex items-center space-x-3 p-4">
-                                        <div className="w-10 h-10 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center flex-shrink-0">
-                                            <svg
-                                                className="w-5 h-5"
-                                                fill="none"
-                                                stroke="currentColor"
-                                                viewBox="0 0 24 24"
-                                            >
-                                                <path
-                                                    strokeLinecap="round"
-                                                    strokeLinejoin="round"
-                                                    strokeWidth={2}
-                                                    d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
-                                                />
-                                            </svg>
-                                        </div>
-                                        <div className="flex-1 min-w-0">
-                                            <p className="text-sm font-medium text-gray-900 truncate">
-                                                {currentWallet.name}
-                                            </p>
-                                            <p className="text-xs text-gray-500 font-mono truncate">
-                                                {currentWallet.address.slice(0, 6)}...{currentWallet.address.slice(-6)}
-                                            </p>
-                                        </div>
-                                    </div>
-                                </>
-                            )}
-                        </div>
-
-                        {isExpired ? (
-                            <div className="bg-orange-50 border border-orange-200 rounded-lg p-4">
-                                <div className="flex">
-                                    <div className="flex-shrink-0">
-                                        <svg
-                                            className="h-6 w-6 text-orange-500"
-                                            viewBox="0 0 20 20"
-                                            fill="currentColor"
-                                        >
-                                            <path
-                                                fillRule="evenodd"
-                                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
-                                                clipRule="evenodd"
-                                            />
-                                        </svg>
-                                    </div>
-                                    <div className="ml-3">
-                                        <h3 className="text-sm font-medium text-orange-800">Transaction Expired</h3>
-                                        <p className="text-sm text-orange-700 mt-1">
-                                            This transaction request has expired and can no longer be signed. Please
-                                            reject it and request a new transaction from the dApp.
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        ) : (
-                            <>
-                                {details}
-
-                                {preview && preview.result === 'success' && (
-                                    <div>
-                                        <div className="space-y-3">
-                                            {preview.moneyFlow?.outputs === '0' &&
-                                            preview.moneyFlow?.inputs === '0' &&
-                                            preview.moneyFlow?.ourTransfers.length === 0 ? (
-                                                <div className="border rounded-lg p-3 bg-gray-50">
-                                                    <p className="text-sm text-gray-600 text-center">
-                                                        This transaction doesn&apos;t involve any token transfers
-                                                    </p>
-                                                </div>
-                                            ) : (
-                                                <JettonFlow transfers={preview.moneyFlow?.ourTransfers || []} />
-                                            )}
-                                        </div>
-                                    </div>
-                                )}
-
-                                {preview && (preview.result === 'failure' || preview.error) && (
-                                    <div className="bg-red-50 border border-red-200 rounded-lg p-3">
-                                        <p className="text-sm text-red-800">
-                                            <strong>Error:</strong> {preview.error?.message}
-                                        </p>
-                                    </div>
-                                )}
-
-                                <div className={`border rounded-lg p-3 ${warningClasses.container}`}>
-                                    <div className="flex">
-                                        <div className="flex-shrink-0">
-                                            <svg
-                                                className={`h-5 w-5 ${warningClasses.icon}`}
-                                                viewBox="0 0 20 20"
-                                                fill="currentColor"
-                                            >
-                                                <path
-                                                    fillRule="evenodd"
-                                                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                                                    clipRule="evenodd"
-                                                />
-                                            </svg>
-                                        </div>
-                                        <div className="ml-3">
-                                            <p className={`text-sm ${warningClasses.text}`}>{warning.message}</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </>
-                        )}
-                    </div>
-                </div>
-
-                {/* Action buttons — always visible at bottom */}
-                <div className="flex space-x-3 p-4 border-t border-gray-200 bg-white">
-                    <Button
-                        variant="secondary"
-                        onClick={onReject}
-                        disabled={isLoading}
-                        className={isExpired ? 'w-full' : 'flex-1'}
-                        data-testid={testIds.reject}
-                    >
-                        Reject
-                    </Button>
-                    {!isExpired &&
-                        (holdToSign ? (
-                            <HoldToSignButton
-                                onComplete={handleApprove}
-                                isLoading={isLoading}
-                                disabled={isLoading}
-                                holdDuration={3000}
-                            />
-                        ) : (
-                            <Button
-                                onClick={handleApprove}
-                                isLoading={isLoading}
-                                disabled={isLoading}
-                                className="flex-1"
-                                data-testid={testIds.approve}
-                            >
-                                {approveLabel}
-                            </Button>
-                        ))}
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/components/SettingsDropdown.tsx b/apps/demo-wallet/src/components/SettingsDropdown.tsx
deleted file mode 100644
index 2a806fe36..000000000
--- a/apps/demo-wallet/src/components/SettingsDropdown.tsx
+++ /dev/null
@@ -1,395 +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 React, { useState, useRef, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth, useWallet } from '@demo/wallet-core';
-
-import { MnemonicDisplay } from './MnemonicDisplay';
-import { createComponentLogger } from '../utils/logger';
-
-// Create logger for settings dropdown component
-const log = createComponentLogger('SettingsDropdown');
-
-export const SettingsDropdown: React.FC = () => {
-    const navigate = useNavigate();
-    const {
-        lock,
-        reset,
-        persistPassword,
-        setPersistPassword,
-        holdToSign,
-        setHoldToSign,
-        showFastSend,
-        setShowFastSend,
-    } = useAuth();
-    const { getDecryptedMnemonic } = useWallet();
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-    const [showMnemonicModal, setShowMnemonicModal] = useState(false);
-    const [mnemonic, setMnemonic] = useState<string[]>([]);
-    const [isLoadingMnemonic, setIsLoadingMnemonic] = useState(false);
-    const [mnemonicError, setMnemonicError] = useState('');
-    const dropdownRef = useRef<HTMLDivElement>(null);
-
-    const handleLockWallet = () => {
-        lock();
-        setIsDropdownOpen(false);
-    };
-
-    const handleDeleteWallet = () => {
-        if (window.confirm('Are you sure you want to delete your wallet? This action cannot be undone.')) {
-            reset();
-            setIsDropdownOpen(false);
-        }
-    };
-
-    const handleCreateNewWallet = () => {
-        setIsDropdownOpen(false);
-        navigate('/setup-wallet');
-    };
-
-    const handleViewRecoveryPhrase = async () => {
-        setIsDropdownOpen(false);
-        setIsLoadingMnemonic(true);
-        setMnemonicError('');
-
-        try {
-            const decryptedMnemonic = await getDecryptedMnemonic();
-            if (decryptedMnemonic) {
-                setMnemonic(decryptedMnemonic);
-                setShowMnemonicModal(true);
-            } else {
-                setMnemonicError('Unable to retrieve recovery phrase. Please ensure you are logged in.');
-            }
-        } catch (error) {
-            setMnemonicError('Failed to decrypt recovery phrase. Please try again.');
-            log.error('Error retrieving mnemonic:', error);
-        } finally {
-            setIsLoadingMnemonic(false);
-        }
-    };
-
-    const handleCloseMnemonicModal = () => {
-        setShowMnemonicModal(false);
-        setMnemonic([]);
-        setMnemonicError('');
-    };
-
-    // Close dropdown when clicking outside
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-                setIsDropdownOpen(false);
-            }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
-
-    // Close modal with Escape key
-    useEffect(() => {
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if (event.key === 'Escape' && showMnemonicModal) {
-                handleCloseMnemonicModal();
-            }
-        };
-
-        if (showMnemonicModal) {
-            document.addEventListener('keydown', handleKeyDown);
-            return () => {
-                document.removeEventListener('keydown', handleKeyDown);
-            };
-        }
-    }, [showMnemonicModal]);
-
-    return (
-        <>
-            <div className="relative" ref={dropdownRef}>
-                <button
-                    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                    className="p-1 rounded-md hover:bg-gray-100 transition-colors"
-                    aria-label="Wallet menu"
-                    data-testid="wallet-menu"
-                >
-                    <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-                        />
-                    </svg>
-                </button>
-
-                {isDropdownOpen && (
-                    <div className="absolute right-0 mt-1 w-80 bg-white rounded-md shadow-lg border border-gray-200 z-10">
-                        <div className="py-1">
-                            {/* Wallet Actions */}
-                            <div className="px-4 py-2 border-b border-gray-100">
-                                <h3 className="text-sm font-medium text-gray-700 mb-2">Wallet Actions</h3>
-                                <div className="space-y-1">
-                                    <button
-                                        onClick={handleCreateNewWallet}
-                                        className="w-full text-left px-2 py-1 text-sm text-blue-700 hover:bg-blue-50 rounded flex items-center space-x-2 font-medium"
-                                    >
-                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M12 4v16m8-8H4"
-                                            />
-                                        </svg>
-                                        <span>Create New Wallet</span>
-                                    </button>
-                                    <button
-                                        onClick={handleViewRecoveryPhrase}
-                                        disabled={isLoadingMnemonic}
-                                        className="w-full text-left px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 rounded flex items-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
-                                    >
-                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                                            />
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                                            />
-                                        </svg>
-                                        <span>{isLoadingMnemonic ? 'Loading...' : 'View Recovery Phrase'}</span>
-                                    </button>
-                                    <button
-                                        onClick={handleLockWallet}
-                                        className="w-full text-left px-2 py-1 text-sm text-gray-700 hover:bg-gray-100 rounded flex items-center space-x-2"
-                                    >
-                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-                                            />
-                                        </svg>
-                                        <span>Lock Wallet</span>
-                                    </button>
-                                    <button
-                                        onClick={handleDeleteWallet}
-                                        className="w-full text-left px-2 py-1 text-sm text-red-600 hover:bg-red-50 rounded flex items-center space-x-2"
-                                    >
-                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                                            />
-                                        </svg>
-                                        <span>Delete Wallet</span>
-                                    </button>
-                                </div>
-                            </div>
-
-                            {/* Settings Section */}
-                            <div className="px-4 py-3">
-                                <h3 className="text-sm font-medium text-gray-700 mb-3">Settings</h3>
-                                <div className="space-y-4">
-                                    {/* Auto-Lock */}
-                                    <div className="flex items-center justify-between">
-                                        <div>
-                                            <label className="text-sm font-medium text-gray-700">Auto-Lock</label>
-                                            <p className="text-xs text-gray-500 mt-1">
-                                                Lock wallet on app reload (more secure)
-                                            </p>
-                                        </div>
-                                        <label
-                                            data-testid="auto-lock"
-                                            className="relative inline-flex items-center cursor-pointer"
-                                        >
-                                            <input
-                                                type="checkbox"
-                                                className="sr-only peer"
-                                                checked={!persistPassword}
-                                                onChange={(e) => setPersistPassword(!e.target.checked)}
-                                            />
-                                            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                                        </label>
-                                    </div>
-
-                                    {persistPassword && (
-                                        <div className="bg-yellow-50 border border-yellow-200 rounded-md p-3">
-                                            <div className="flex">
-                                                <div className="flex-shrink-0">
-                                                    <svg
-                                                        className="h-5 w-5 text-yellow-400"
-                                                        viewBox="0 0 20 20"
-                                                        fill="currentColor"
-                                                    >
-                                                        <path
-                                                            fillRule="evenodd"
-                                                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                                                            clipRule="evenodd"
-                                                        />
-                                                    </svg>
-                                                </div>
-                                                <div className="ml-3">
-                                                    <p className="text-sm text-yellow-800">
-                                                        <strong>Security Notice:</strong> Auto-lock is disabled. Your
-                                                        password is stored locally and the wallet stays unlocked. Only
-                                                        use for development.
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    )}
-
-                                    {/* Hold to Sign */}
-                                    <div className="flex items-center justify-between">
-                                        <div>
-                                            <label className="text-sm font-medium text-gray-700">Hold to Sign</label>
-                                            <p className="text-xs text-gray-500 mt-1">
-                                                Require holding button for 3 seconds to approve transactions
-                                            </p>
-                                        </div>
-                                        <label
-                                            data-testid="hold-to-sign"
-                                            className="relative inline-flex items-center cursor-pointer"
-                                        >
-                                            <input
-                                                type="checkbox"
-                                                className="sr-only peer"
-                                                checked={holdToSign ?? true}
-                                                onChange={(e) => setHoldToSign(e.target.checked)}
-                                            />
-                                            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                                        </label>
-                                    </div>
-
-                                    {/* Show fast send */}
-                                    <div className="flex items-center justify-between">
-                                        <div>
-                                            <label className="text-sm font-medium text-gray-700">Show fast send</label>
-                                            <p className="text-xs text-gray-500 mt-1">
-                                                Show &quot;Send Fast&quot; button on send screen (1 nano, no
-                                                confirmation)
-                                            </p>
-                                        </div>
-                                        <label
-                                            data-testid="show-fast-send"
-                                            className="relative inline-flex items-center cursor-pointer"
-                                        >
-                                            <input
-                                                type="checkbox"
-                                                className="sr-only peer"
-                                                checked={showFastSend ?? false}
-                                                onChange={(e) => setShowFastSend(e.target.checked)}
-                                            />
-                                            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                                        </label>
-                                    </div>
-
-                                    {!holdToSign && (
-                                        <div className="bg-yellow-50 border border-yellow-200 rounded-md p-3">
-                                            <div className="flex">
-                                                <div className="flex-shrink-0">
-                                                    <svg
-                                                        className="h-5 w-5 text-yellow-400"
-                                                        viewBox="0 0 20 20"
-                                                        fill="currentColor"
-                                                    >
-                                                        <path
-                                                            fillRule="evenodd"
-                                                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                                                            clipRule="evenodd"
-                                                        />
-                                                    </svg>
-                                                </div>
-                                                <div className="ml-3">
-                                                    <p className="text-sm text-yellow-800">
-                                                        <strong>Security Notice:</strong> Disabling hold-to-sign makes
-                                                        it easier to accidentally approve transactions. Only use for
-                                                        testing.
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            {/* Recovery Phrase Modal */}
-            {showMnemonicModal && (
-                <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-                    <div className="bg-white rounded-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
-                        <div className="p-6">
-                            <div className="flex items-center justify-between mb-4">
-                                <h2 data-testid="request" className="text-xl font-bold text-gray-900">
-                                    Your Recovery Phrase
-                                </h2>
-                                <button
-                                    onClick={handleCloseMnemonicModal}
-                                    className="text-gray-400 hover:text-gray-600"
-                                    aria-label="Close"
-                                >
-                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M6 18L18 6M6 6l12 12"
-                                        />
-                                    </svg>
-                                </button>
-                            </div>
-
-                            <div className="space-y-4">
-                                {/* Mnemonic Display */}
-                                {mnemonic.length > 0 && (
-                                    <MnemonicDisplay
-                                        mnemonic={mnemonic}
-                                        showWarning={true}
-                                        warningType="red"
-                                        warningText="Never share your recovery phrase with anyone. Anyone with access to these words can control your wallet."
-                                    />
-                                )}
-
-                                {/* Error Display */}
-                                {mnemonicError && (
-                                    <div className="text-red-600 text-sm text-center bg-red-50 p-3 rounded-md">
-                                        {mnemonicError}
-                                    </div>
-                                )}
-
-                                {/* Close Button */}
-                                <div className="pt-4">
-                                    <button
-                                        onClick={handleCloseMnemonicModal}
-                                        className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-                                    >
-                                        Close
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </>
-    );
-};
diff --git a/apps/demo-wallet/src/components/SignDataRequestModal.tsx b/apps/demo-wallet/src/components/SignDataRequestModal.tsx
deleted file mode 100644
index 4326da165..000000000
--- a/apps/demo-wallet/src/components/SignDataRequestModal.tsx
+++ /dev/null
@@ -1,286 +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 React, { useMemo, useState, useEffect } from 'react';
-import type { SignDataRequestEvent } from '@ton/walletkit';
-import type { SavedWallet } from '@demo/wallet-core';
-import { useAuth } from '@demo/wallet-core';
-
-import { Button } from './Button';
-import { Card } from './Card';
-import { DAppInfo } from './DAppInfo';
-import { WalletPreview } from './WalletPreview';
-import { HoldToSignButton } from './HoldToSignButton';
-import { createComponentLogger } from '../utils/logger';
-
-// Create logger for sign data request modal
-const log = createComponentLogger('SignDataRequestModal');
-
-interface SignDataRequestModalProps {
-    request: SignDataRequestEvent;
-    savedWallets: SavedWallet[];
-    isOpen: boolean;
-    onApprove: () => void;
-    onReject: (reason?: string) => void;
-}
-
-export const SignDataRequestModal: React.FC<SignDataRequestModalProps> = ({
-    request,
-    savedWallets,
-    isOpen,
-    onApprove,
-    onReject,
-}) => {
-    const [isLoading, setIsLoading] = useState(false);
-    const [showSuccess, setShowSuccess] = useState(false);
-    const { holdToSign } = useAuth();
-
-    // Find the wallet being used for this sign data request
-    const currentWallet = useMemo(() => {
-        if (!request.walletAddress) return null;
-        return savedWallets.find((wallet) => wallet.kitWalletId === request.walletId) || null;
-    }, [savedWallets, request.walletAddress]);
-
-    // Reset success state when modal closes/opens
-    useEffect(() => {
-        if (!isOpen) {
-            setShowSuccess(false);
-            setIsLoading(false);
-        }
-    }, [isOpen]);
-
-    const handleApprove = async () => {
-        setIsLoading(true);
-        try {
-            // First, perform the actual signing operation
-            await onApprove();
-
-            // If successful, show success animation
-            setIsLoading(false);
-            setShowSuccess(true);
-
-            // The parent will handle closing the modal after it sees the request is completed
-            // But we keep showing the success state for visual feedback
-        } catch (error) {
-            log.error('Failed to approve sign data request:', error);
-            setIsLoading(false);
-        }
-    };
-
-    const handleReject = () => {
-        onReject('User rejected the sign data request');
-    };
-
-    const renderDataPreview = () => {
-        const { preview } = request;
-
-        switch (preview.data.type) {
-            case 'text':
-                return (
-                    <div className="border rounded-lg p-3 bg-blue-50">
-                        <h4 className="font-medium text-blue-900 mb-2">Text Message</h4>
-                        <p className="text-sm text-blue-800 break-words">{preview.data.value.content}</p>
-                    </div>
-                );
-            case 'binary':
-                return (
-                    <div className="border rounded-lg p-3 bg-green-50">
-                        <h4 className="font-medium text-green-900 mb-2">Binary Data</h4>
-                        <div className="space-y-2">
-                            <p className="text-sm text-green-800">Content: {preview.data.value.content}</p>
-                        </div>
-                    </div>
-                );
-            case 'cell':
-                return (
-                    <div className="">
-                        {/* <h4 className="font-medium mb-2">TON Cell Data</h4> */}
-                        <div className="space-y-2">
-                            <div>
-                                <p className="font-medium">Content</p>
-                                <p className="text-gray-600 text-sm overflow-x-auto whitespace-pre-wrap">
-                                    {preview.data.value.content}
-                                </p>
-                            </div>
-                            {preview.data.value.schema && (
-                                <div>
-                                    <p className="font-medium">Schema</p>
-                                    <p className="text-gray-600 text-sm overflow-x-auto whitespace-pre-wrap">
-                                        {preview.data.value.schema}
-                                    </p>
-                                </div>
-                            )}
-                            {/* <p className="text-sm overflow-x-auto whitespace-pre-wrap">Content: {preview.content}</p> */}
-                            {/* {preview.schema && <p className="text-sm">Schema: {preview.schema}</p>} */}
-                            {preview.data.value.parsed && (
-                                <div>
-                                    <p className="font-medium mb-1">Parsed Data:</p>
-                                    <pre className="text-xs overflow-x-auto whitespace-pre-wrap bg-gray-100 p-2 rounded-lg">
-                                        {JSON.stringify(preview.data.value.parsed, null, 2)}
-                                    </pre>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                );
-            default:
-                return (
-                    <div className="border rounded-lg p-3 bg-gray-50">
-                        {/* <h4 className="font-medium text-gray-900 mb-2">Data to Sign</h4> */}
-                        <p className="text-sm text-gray-600">Unknown data format</p>
-                    </div>
-                );
-        }
-    };
-
-    if (!isOpen) return null;
-
-    // Success state view
-    if (showSuccess) {
-        return (
-            <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-                <style>{`
-                    @keyframes scale-in {
-                        from {
-                            transform: scale(0.8);
-                            opacity: 0;
-                        }
-                        to {
-                            transform: scale(1);
-                            opacity: 1;
-                        }
-                    }
-                    .success-card {
-                        animation: scale-in 0.3s ease-out;
-                    }
-                `}</style>
-                <div className="bg-gradient-to-br from-green-400 to-green-600 rounded-lg max-w-md w-full p-8 relative overflow-hidden success-card">
-                    {/* Success Content */}
-                    <div className="relative z-10 text-center text-white space-y-6">
-                        {/* Success Icon */}
-                        <div className="flex justify-center">
-                            <div className="bg-white rounded-full p-4">
-                                <svg
-                                    className="w-16 h-16 text-green-500"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={3}
-                                        d="M5 13l4 4L19 7"
-                                    />
-                                </svg>
-                            </div>
-                        </div>
-
-                        {/* Success Message */}
-                        <div>
-                            <h2 className="text-3xl font-bold mb-2">Success!</h2>
-                            <p className="text-green-50 text-lg">Data signed successfully</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    // Normal request view
-    return (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-            <div className="bg-white rounded-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
-                <Card>
-                    <div className="space-y-6">
-                        {/* Header */}
-                        <div className="text-center">
-                            <h2 data-testid="request" className="text-xl font-bold text-gray-900">
-                                Sign Data Request
-                            </h2>
-                            <p className="text-gray-600 text-sm mt-1">A dApp wants you to sign data with your wallet</p>
-                        </div>
-
-                        {/* dApp Information */}
-                        <DAppInfo
-                            iconUrl={request.dAppInfo?.iconUrl}
-                            name={request.dAppInfo?.name}
-                            url={request.dAppInfo?.url}
-                            description={request.dAppInfo?.description}
-                        />
-
-                        {/* Wallet Information */}
-                        {currentWallet && (
-                            <div>
-                                <WalletPreview wallet={currentWallet} isActive={true} isCompact={true} />
-                            </div>
-                        )}
-
-                        {/* Data Preview */}
-                        <div>
-                            <h4 className="font-medium text-gray-900 mb-3">Data to Sign</h4>
-                            {renderDataPreview()}
-                        </div>
-
-                        {/* Warning */}
-                        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
-                            <div className="flex">
-                                <div className="flex-shrink-0">
-                                    <svg className="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
-                                        <path
-                                            fillRule="evenodd"
-                                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                                            clipRule="evenodd"
-                                        />
-                                    </svg>
-                                </div>
-                                <div className="ml-3">
-                                    <p className="text-sm text-yellow-800">
-                                        <strong>Warning:</strong> Only sign data if you trust the requesting dApp and
-                                        understand what you're signing. Signing data can have security implications.
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-
-                        {/* Action Buttons */}
-                        <div className="flex space-x-3">
-                            <Button
-                                data-testid="sign-data-reject"
-                                variant="secondary"
-                                onClick={handleReject}
-                                disabled={isLoading}
-                                className="flex-1"
-                            >
-                                Reject
-                            </Button>
-                            {holdToSign ? (
-                                <HoldToSignButton
-                                    onComplete={handleApprove}
-                                    isLoading={isLoading}
-                                    disabled={isLoading}
-                                    holdDuration={3000}
-                                />
-                            ) : (
-                                <Button
-                                    data-testid="sign-data-approve"
-                                    onClick={handleApprove}
-                                    isLoading={isLoading}
-                                    disabled={isLoading}
-                                    className="flex-1"
-                                >
-                                    Sign Data ('regular')
-                                </Button>
-                            )}
-                        </div>
-                    </div>
-                </Card>
-            </div>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/components/TraceRow.tsx b/apps/demo-wallet/src/components/TraceRow.tsx
deleted file mode 100644
index f1050210d..000000000
--- a/apps/demo-wallet/src/components/TraceRow.tsx
+++ /dev/null
@@ -1,585 +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 React, { memo, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { useShallow } from 'zustand/react/shallow';
-import type { ToncenterTraceItem } from '@ton/walletkit';
-import { useWalletKit, useWalletStore, getChainNetwork } from '@demo/wallet-core';
-
-import { getTonviewerTxUrl } from '@/utils';
-import { log } from '@/utils/logger';
-
-// Local type definitions for transaction data
-interface TransactionMessage {
-    hash: string;
-    source?: string | null;
-    destination: string;
-    value?: string | null;
-    opcode?: string | null;
-}
-
-interface TransactionData {
-    hash: string;
-    account: string;
-    total_fees?: string;
-    in_msg?: TransactionMessage | null;
-    out_msgs: TransactionMessage[];
-    description: {
-        aborted?: boolean;
-        compute_ph?: {
-            success?: boolean;
-        };
-    };
-    emulated?: boolean;
-}
-
-interface PendingPreview {
-    type: 'send' | 'receive' | 'contract';
-    amount: string;
-    address: string;
-    timestamp: number;
-}
-
-interface TraceRowProps {
-    traceId: string;
-    externalHash?: string;
-    isPending?: boolean;
-    pendingPreview?: PendingPreview;
-}
-
-export const TraceRow: React.FC<TraceRowProps> = memo(
-    ({ traceId, externalHash, isPending = false, pendingPreview }) => {
-        const walletKit = useWalletKit();
-        const { savedWallets, activeWalletId } = useWalletStore(
-            useShallow((state) => ({
-                savedWallets: state.walletManagement.savedWallets,
-                activeWalletId: state.walletManagement.activeWalletId,
-            })),
-        );
-        const [trace, setTrace] = useState<ToncenterTraceItem | null>(null);
-        const [isLoading, setIsLoading] = useState(true);
-        const [error, setError] = useState<string | null>(null);
-        const [isExpanded, setIsExpanded] = useState(false);
-
-        // Get the active wallet's network
-        const activeWallet = savedWallets.find((w) => w.id === activeWalletId);
-        const walletNetwork = activeWallet?.network || 'testnet';
-        const chainNetwork = getChainNetwork(walletNetwork);
-
-        const formatTonAmount = (amount: string): string => {
-            const tonAmount = parseFloat(amount || '0') / 1000000000; // Convert nanoTON to TON
-            return tonAmount.toFixed(4);
-        };
-
-        const formatAddress = (addr: string): string => {
-            if (!addr) return '';
-            return `${addr.slice(0, 6)}...${addr.slice(-6)}`;
-        };
-
-        const formatTimestamp = (timestamp: number): string => {
-            return new Date(timestamp * 1000).toLocaleString();
-        };
-
-        const formatMessageType = (msg: TransactionMessage | null): string => {
-            if (!msg) return 'Internal';
-            if (!msg.opcode || msg.opcode === '0x00000000') return 'Transfer';
-            return `Op: ${msg.opcode.slice(0, 8)}`;
-        };
-
-        const renderTransactionPreview = (tx: TransactionData, index: number) => {
-            const hasIncoming = tx.in_msg && tx.in_msg.value && parseFloat(tx.in_msg.value) > 0;
-            const hasOutgoing = tx.out_msgs && tx.out_msgs.length > 0;
-
-            return (
-                <div key={tx.hash} className="border-l-2 border-gray-200 pl-4 py-2 ml-4">
-                    <div className="flex items-center justify-between text-sm">
-                        <div className="flex items-center space-x-2">
-                            <span className="text-gray-500 text-xs">#{index + 1}</span>
-                            <span className="font-mono text-xs text-gray-600">
-                                {tx.hash.slice(0, 8)}...{tx.hash.slice(-4)}
-                            </span>
-                            <span className="text-xs text-gray-500">{formatAddress(tx.account)}</span>
-                        </div>
-                        <div className="text-xs text-gray-500">Fee: {formatTonAmount(tx.total_fees || '0')} TON</div>
-                    </div>
-
-                    {/* Incoming message */}
-                    {hasIncoming && (
-                        <div className="mt-1 text-xs">
-                            <div className="flex items-center space-x-2 text-green-600">
-                                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M17 13l-5 5m0 0l-5-5m5 5V6"
-                                    />
-                                </svg>
-                                <span>In: +{formatTonAmount(tx.in_msg!.value!)} TON</span>
-                                <span className="text-gray-500">from {formatAddress(tx.in_msg!.source || '')}</span>
-                                <span className="text-gray-400">({formatMessageType(tx.in_msg || null)})</span>
-                            </div>
-                        </div>
-                    )}
-
-                    {/* Outgoing messages */}
-                    {hasOutgoing && (
-                        <div className="mt-1 space-y-1">
-                            {tx.out_msgs.slice(0, 3).map((msg: TransactionMessage, msgIndex: number) => (
-                                <div key={msgIndex} className="flex items-center space-x-2 text-red-600 text-xs">
-                                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M7 11l5-5m0 0l5 5m-5-5v12"
-                                        />
-                                    </svg>
-                                    <span>Out: -{formatTonAmount(msg.value || '0')} TON</span>
-                                    <span className="text-gray-500">to {formatAddress(msg.destination)}</span>
-                                    <span className="text-gray-400">({formatMessageType(msg)})</span>
-                                </div>
-                            ))}
-                            {tx.out_msgs.length > 3 && (
-                                <div className="text-xs text-gray-400 ml-5">
-                                    +{tx.out_msgs.length - 3} more messages
-                                </div>
-                            )}
-                        </div>
-                    )}
-
-                    {/* Status indicator */}
-                    <div className="mt-1 flex items-center space-x-2 text-xs">
-                        <span
-                            className={`px-2 py-0.5 rounded-full text-xs ${
-                                tx.description.aborted || !tx.description.compute_ph?.success
-                                    ? 'bg-red-100 text-red-700'
-                                    : 'bg-green-100 text-green-700'
-                            }`}
-                        >
-                            {tx.description.aborted || !tx.description.compute_ph?.success ? 'Failed' : 'Success'}
-                        </span>
-                        {tx.emulated && (
-                            <span className="px-2 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs">Emulated</span>
-                        )}
-                    </div>
-                </div>
-            );
-        };
-
-        // Analyze trace to determine transaction type and amount
-        const analyzeTrace = (traceData: ToncenterTraceItem) => {
-            if (!traceData.transactions || Object.keys(traceData.transactions).length === 0) {
-                return {
-                    type: 'unknown' as const,
-                    amount: '0',
-                    address: '',
-                    timestamp: traceData.start_utime,
-                    status: 'failed' as const,
-                };
-            }
-
-            // Get all transactions in the trace
-            const transactions = Object.values(traceData.transactions);
-            const mainTransaction = transactions[0]; // Usually the first transaction is the main one
-
-            let type: 'send' | 'receive' | 'contract' = 'receive';
-            let amount = '0';
-            let address = '';
-            let status: 'confirmed' | 'failed' = 'confirmed';
-
-            // Check if any transaction failed
-            const hasFailedTx = transactions.some(
-                (tx) => tx.description.aborted || !tx.description.compute_ph?.success,
-            );
-
-            if (hasFailedTx) {
-                status = 'failed';
-            }
-
-            // Analyze the main transaction
-            if (mainTransaction) {
-                // Check incoming message
-                if (mainTransaction.in_msg && mainTransaction.in_msg.value) {
-                    amount = mainTransaction.in_msg.value;
-                    address = mainTransaction.in_msg.source || '';
-                    type = 'receive';
-                }
-
-                // Check outgoing messages - if there are any, it's likely a send transaction
-                if (mainTransaction.out_msgs && mainTransaction.out_msgs.length > 0) {
-                    const mainOutMsg = mainTransaction.out_msgs[0];
-                    if (mainOutMsg.value) {
-                        amount = mainOutMsg.value;
-                        address = mainOutMsg.destination;
-                        type = 'send';
-                    }
-                }
-
-                // If there are multiple transactions or complex interactions, mark as contract
-                if (transactions.length > 1 || (traceData?.actions?.length ?? 0) > 0) {
-                    type = 'contract';
-                }
-            }
-
-            return {
-                type,
-                amount,
-                address,
-                timestamp: traceData.start_utime,
-                status,
-            };
-        };
-
-        useEffect(() => {
-            const fetchTrace = async () => {
-                if (isPending) {
-                    setIsLoading(false);
-                    return;
-                }
-
-                try {
-                    setIsLoading(true);
-                    setError(null);
-
-                    if (!walletKit) {
-                        setIsLoading(false);
-                        return;
-                    }
-
-                    while (!walletKit?.isReady()) {
-                        await new Promise((resolve) => setTimeout(resolve, 100));
-                    }
-
-                    const apiClient = walletKit.getApiClient(chainNetwork);
-                    let response;
-
-                    try {
-                        if (traceId && !response) {
-                            // Fetch by trace ID for completed traces
-                            response = await apiClient.getTrace({
-                                traceId: [traceId],
-                            });
-                        }
-
-                        if (externalHash && !response) {
-                            // Fetch by external message hash for pending traces
-                            response = await apiClient.getPendingTrace({
-                                externalMessageHash: [externalHash],
-                            });
-                        }
-
-                        if (externalHash && !response) {
-                            // Fetch by trace ID for completed traces
-                            response = await apiClient.getTrace({
-                                traceId: [externalHash],
-                            });
-                        }
-                    } catch (error) {
-                        log.error('Error fetching trace', { error });
-                    }
-
-                    if (!response) {
-                        setError('Trace not found');
-                        return;
-                    }
-
-                    if (response.traces && response.traces.length > 0) {
-                        setTrace(response.traces[0]);
-                    } else {
-                        setError('Trace not found');
-                    }
-                } catch (_err) {
-                    // Failed to fetch trace
-                    log.error('trace fetch error', _err);
-                    setError('Failed to load trace data');
-                } finally {
-                    setIsLoading(false);
-                }
-            };
-
-            if (!walletKit) {
-                return;
-            }
-
-            void fetchTrace();
-        }, [traceId, externalHash, isPending, walletKit]);
-
-        if (isPending && pendingPreview) {
-            const { type, amount, address, timestamp } = pendingPreview;
-            const label = type === 'send' ? 'Sent' : type === 'receive' ? 'Received' : 'Contract Interaction';
-            const amountStr = amount !== '0' ? `${formatTonAmount(amount)} TON` : 'Contract';
-            const sign = type === 'send' ? '-' : type === 'receive' ? '+' : '';
-            const amountColor =
-                type === 'send' ? 'text-red-600' : type === 'receive' ? 'text-green-600' : 'text-blue-600';
-
-            return (
-                <div className="bg-gray-50 rounded-lg overflow-hidden">
-                    <Link
-                        to={`/wallet/trace/${traceId}`}
-                        className="flex items-center justify-between p-3 hover:bg-gray-100 transition-colors block no-underline"
-                    >
-                        <div className="flex items-center space-x-3">
-                            <div className="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center">
-                                <div className="w-4 h-4 border-2 border-yellow-600 border-t-transparent rounded-full animate-spin"></div>
-                            </div>
-                            <div>
-                                <p className="text-sm font-medium text-gray-900">{label}</p>
-                                <p className="text-xs text-gray-500">
-                                    {address ? formatAddress(address) : 'Multiple addresses'}
-                                </p>
-                                <p className="text-xs text-gray-400">{formatTimestamp(timestamp)}</p>
-                            </div>
-                        </div>
-                        <div className="text-right">
-                            <p className={`text-sm font-medium ${amountColor}`}>
-                                {sign}
-                                {amountStr}
-                            </p>
-                            <p className="text-xs text-yellow-600">Pending</p>
-                        </div>
-                    </Link>
-                </div>
-            );
-        }
-
-        if (isPending) {
-            return (
-                <div className="bg-gray-50 rounded-lg overflow-hidden">
-                    <div className="flex items-center justify-between p-3">
-                        <div className="flex items-center space-x-3">
-                            <div className="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center">
-                                <div className="w-4 h-4 border-2 border-yellow-600 border-t-transparent rounded-full animate-spin"></div>
-                            </div>
-                            <div>
-                                <p className="text-sm font-medium text-gray-900">Processing</p>
-                                <p className="text-xs text-gray-500">Pending confirmation</p>
-                            </div>
-                        </div>
-                        <p className="text-xs text-yellow-600">Pending</p>
-                    </div>
-                </div>
-            );
-        }
-
-        if (isLoading) {
-            return (
-                <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg animate-pulse">
-                    <div className="flex items-center space-x-3">
-                        <div className="w-8 h-8 rounded-full bg-gray-200"></div>
-                        <div>
-                            <div className="h-4 bg-gray-200 rounded w-24 mb-1"></div>
-                            <div className="h-3 bg-gray-200 rounded w-32"></div>
-                        </div>
-                    </div>
-                    <div className="text-right">
-                        <div className="h-4 bg-gray-200 rounded w-16 mb-1"></div>
-                        <div className="h-3 bg-gray-200 rounded w-12"></div>
-                    </div>
-                </div>
-            );
-        }
-
-        if (error || !trace) {
-            return (
-                <a
-                    href={getTonviewerTxUrl(walletNetwork, externalHash ?? traceId)}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center justify-between p-3 bg-red-50 border border-red-200 rounded-lg"
-                >
-                    <div className="flex items-center space-x-3">
-                        <div className="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
-                            <svg className="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                                />
-                            </svg>
-                        </div>
-                        <div>
-                            <p className="text-sm font-medium text-red-900">Error Loading Trace</p>
-                            <p className="text-xs text-red-700">{error}</p>
-                        </div>
-                    </div>
-                </a>
-            );
-        }
-
-        const traceInfo = analyzeTrace(trace);
-        const transactionCount = Object.keys(trace.transactions).length;
-        const actionCount = trace.actions?.length ?? 0;
-
-        const linkTo = getTonviewerTxUrl(walletNetwork, externalHash ?? traceId);
-
-        const orderedTransactions = trace.transactions_order
-            ? trace.transactions_order.map((hash) => trace.transactions[hash] as TransactionData)
-            : (Object.values(trace.transactions) as TransactionData[]);
-
-        return (
-            <div className="bg-gray-50 rounded-lg overflow-hidden">
-                {/* Main trace header - clickable for navigation */}
-                <a
-                    href={linkTo}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center justify-between p-3 hover:bg-gray-100 transition-colors block no-underline"
-                >
-                    <div className="flex items-center space-x-3">
-                        <div
-                            className={`w-8 h-8 rounded-full flex items-center justify-center ${
-                                traceInfo.status === 'failed'
-                                    ? 'bg-red-100'
-                                    : traceInfo.type === 'send'
-                                      ? 'bg-red-100'
-                                      : traceInfo.type === 'receive'
-                                        ? 'bg-green-100'
-                                        : 'bg-blue-100'
-                            }`}
-                        >
-                            {traceInfo.status === 'failed' ? (
-                                <svg
-                                    className="w-4 h-4 text-red-600"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M6 18L18 6M6 6l12 12"
-                                    />
-                                </svg>
-                            ) : traceInfo.type === 'send' ? (
-                                <svg
-                                    className="w-4 h-4 text-red-600"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M7 11l5-5m0 0l5 5m-5-5v12"
-                                    />
-                                </svg>
-                            ) : traceInfo.type === 'receive' ? (
-                                <svg
-                                    className="w-4 h-4 text-green-600"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M17 13l-5 5m0 0l-5-5m5 5V6"
-                                    />
-                                </svg>
-                            ) : (
-                                <svg
-                                    className="w-4 h-4 text-blue-600"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                                    />
-                                </svg>
-                            )}
-                        </div>
-                        <div>
-                            <p className="text-sm font-medium text-gray-900">
-                                {traceInfo.status === 'failed'
-                                    ? 'Failed Transaction'
-                                    : traceInfo.type === 'send'
-                                      ? 'Sent'
-                                      : traceInfo.type === 'receive'
-                                        ? 'Received'
-                                        : 'Contract Interaction'}
-                                {transactionCount > 1 && ` (${transactionCount} txs)`}
-                                {actionCount > 0 && ` • ${actionCount} actions`}
-                            </p>
-                            <p className="text-xs text-gray-500">
-                                {traceInfo.address ? formatAddress(traceInfo.address) : 'Multiple addresses'}
-                            </p>
-                            <p className="text-xs text-gray-400">{formatTimestamp(traceInfo.timestamp)}</p>
-                        </div>
-                    </div>
-                    <div className="flex items-center space-x-3">
-                        <div className="text-right">
-                            <p
-                                className={`text-sm font-medium ${
-                                    traceInfo.status === 'failed'
-                                        ? 'text-red-600'
-                                        : traceInfo.type === 'send'
-                                          ? 'text-red-600'
-                                          : traceInfo.type === 'receive'
-                                            ? 'text-green-600'
-                                            : 'text-blue-600'
-                                }`}
-                            >
-                                {traceInfo.type === 'send' ? '-' : traceInfo.type === 'receive' ? '+' : ''}
-                                {traceInfo.amount !== '0' ? `${formatTonAmount(traceInfo.amount)} TON` : 'Contract'}
-                            </p>
-                            <p
-                                className={`text-xs ${traceInfo.status === 'confirmed' ? 'text-green-500' : 'text-red-500'}`}
-                            >
-                                {traceInfo.status}
-                            </p>
-                        </div>
-                    </div>
-                </a>
-
-                {/* Expand/Collapse button for transaction previews */}
-                {transactionCount > 1 && (
-                    <div className="border-t border-gray-200">
-                        <button
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                setIsExpanded(!isExpanded);
-                            }}
-                            className="w-full px-3 py-2 text-xs text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors flex items-center justify-center space-x-1"
-                        >
-                            <span>
-                                {isExpanded ? 'Hide' : 'Show'} {transactionCount} transactions
-                            </span>
-                            <svg
-                                className={`w-3 h-3 transform transition-transform ${isExpanded ? 'rotate-180' : ''}`}
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                            </svg>
-                        </button>
-                    </div>
-                )}
-
-                {/* Transaction previews */}
-                {isExpanded && transactionCount > 1 && (
-                    <div className="border-t border-gray-200 bg-gray-25 p-3 space-y-3">
-                        <div className="text-xs text-gray-500 font-medium mb-2">Transaction Details:</div>
-                        {orderedTransactions.map((tx, index) => renderTransactionPreview(tx, index))}
-                    </div>
-                )}
-            </div>
-        );
-    },
-);
diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
deleted file mode 100644
index 757c26d4f..000000000
--- a/apps/demo-wallet/src/components/index.ts
+++ /dev/null
@@ -1,40 +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.
- *
- */
-
-export { AnimatedBalance } from './AnimatedBalance';
-export { AppRouter } from './AppRouter';
-export { Button } from './Button';
-export { Card } from './Card';
-export { ConnectRequestModal } from './ConnectRequestModal';
-export { CreateWallet } from './CreateWallet';
-export { DAppInfo } from './DAppInfo';
-export { DisconnectNotifications } from './DisconnectNotifications';
-export { ImportWallet } from './ImportWallet';
-export { Input } from './Input';
-export { LedgerSetup } from './LedgerSetup';
-export { JettonsCard } from './JettonsCard';
-export { JettonRow } from './JettonRow';
-export { JettonsList } from './JettonsList';
-export { Modal } from './Modal';
-export { NftsCard } from './NftsCard';
-export { Layout } from './Layout';
-export { MnemonicDisplay } from './MnemonicDisplay';
-export { NetworkSelector } from './NetworkSelector';
-export { SettingsDropdown } from './SettingsDropdown';
-export { StreamingStatus } from './StreamingStatus';
-export { ProtectedRoute } from './ProtectedRoute';
-export { RecentTransactions } from './RecentTransactions';
-export { SignDataRequestModal } from './SignDataRequestModal';
-export { SignMessageRequestModal } from './SignMessageRequestModal';
-export { TraceRow } from './TraceRow';
-export { TransactionRequestModal } from './TransactionRequestModal';
-export { WalletPreview } from './WalletPreview';
-export { WalletSwitcher } from './WalletSwitcher';
-
-// Transaction components
-export * from './transactions';
diff --git a/apps/demo-wallet/src/components/staking/StakingInfo.tsx b/apps/demo-wallet/src/components/staking/StakingInfo.tsx
deleted file mode 100644
index 614e05557..000000000
--- a/apps/demo-wallet/src/components/staking/StakingInfo.tsx
+++ /dev/null
@@ -1,55 +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 type { FC } from 'react';
-import { useStaking } from '@demo/wallet-core';
-
-import { Card } from '../Card';
-
-export const StakingInfo: FC = () => {
-    const { stakedBalance, providerInfo } = useStaking();
-
-    return (
-        <div className="space-y-6">
-            <Card title="Your Stake">
-                <div className="space-y-4">
-                    <div>
-                        <p className="text-sm text-gray-500 mb-1">Balance</p>
-                        <p className="text-2xl font-bold text-gray-900">
-                            {stakedBalance?.stakedBalance ? stakedBalance?.stakedBalance : '0.00'} tsTON
-                        </p>
-                    </div>
-                </div>
-            </Card>
-
-            <Card title="Pool Info">
-                <div className="space-y-4">
-                    <div className="flex justify-between items-center">
-                        <span className="text-sm text-gray-500">Provider</span>
-                        <span className="text-sm font-medium">Tonstakers</span>
-                    </div>
-                    <div className="flex justify-between items-center">
-                        <span className="text-sm text-gray-500">APY</span>
-                        <span className="text-sm font-bold text-green-600">
-                            {providerInfo?.apy ? `${providerInfo.apy.toFixed(2)}%` : '--'}
-                        </span>
-                    </div>
-                    <div className="flex justify-between items-center">
-                        <span className="text-sm text-gray-500">Instant Unstake Available</span>
-                        <span className="text-sm font-medium">
-                            {providerInfo?.instantUnstakeAvailable
-                                ? Number(providerInfo?.instantUnstakeAvailable).toFixed(4)
-                                : '0.00'}{' '}
-                            TON
-                        </span>
-                    </div>
-                </div>
-            </Card>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/components/staking/StakingInterface.tsx b/apps/demo-wallet/src/components/staking/StakingInterface.tsx
deleted file mode 100644
index 1a215b44c..000000000
--- a/apps/demo-wallet/src/components/staking/StakingInterface.tsx
+++ /dev/null
@@ -1,196 +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 type { FC, ChangeEvent } from 'react';
-import { useState } from 'react';
-import { useStaking } from '@demo/wallet-core';
-import { useNavigate } from 'react-router-dom';
-import { UnstakeMode } from '@ton/walletkit';
-
-import { Card } from '../Card';
-import { Button } from '../Button';
-
-import { cn } from '@/lib/utils';
-
-export const StakingInterface: FC = () => {
-    const {
-        amount,
-        currentQuote,
-        isLoadingQuote,
-        isStaking,
-        isUnstaking,
-        error,
-        unstakeMode,
-        setStakingAmount: setAmount,
-        setUnstakeMode,
-        getStakingQuote: getQuote,
-        stake,
-        unstake,
-        validateStakingInputs,
-    } = useStaking();
-
-    const [tab, setTab] = useState<'stake' | 'unstake'>('stake');
-
-    const navigate = useNavigate();
-
-    const handleAmountChange = (e: ChangeEvent<HTMLInputElement>) => {
-        setAmount(e.target.value);
-    };
-
-    const handleGetQuote = async () => {
-        await getQuote({
-            amount,
-            direction: tab === 'stake' ? 'stake' : 'unstake',
-        });
-    };
-
-    const handleAction = async () => {
-        if (!currentQuote) return;
-
-        if (tab === 'stake') {
-            await stake({ quote: currentQuote });
-        } else {
-            await unstake({ quote: currentQuote });
-        }
-
-        navigate('/wallet', {
-            state: { message: `${tab === 'stake' ? 'Staked' : 'Unstaked'} successfully!` },
-        });
-    };
-
-    const validationError = validateStakingInputs();
-    const canGetQuote = !validationError && amount && parseFloat(amount) > 0;
-
-    return (
-        <Card className="w-full">
-            <div className="flex border-b border-gray-100 mb-6">
-                <button
-                    className={cn(
-                        'flex-1 pb-3 text-sm font-medium transition-colors border-b-2',
-                        tab === 'stake'
-                            ? 'border-blue-500 text-blue-600'
-                            : 'border-transparent text-gray-500 hover:text-gray-700',
-                    )}
-                    onClick={() => {
-                        setTab('stake');
-                        setAmount('');
-                    }}
-                >
-                    Stake
-                </button>
-                <button
-                    className={cn(
-                        'flex-1 pb-3 text-sm font-medium transition-colors border-b-2',
-                        tab === 'unstake'
-                            ? 'border-blue-500 text-blue-600'
-                            : 'border-transparent text-gray-500 hover:text-gray-700',
-                    )}
-                    onClick={() => {
-                        setTab('unstake');
-                        setAmount('');
-                    }}
-                >
-                    Unstake
-                </button>
-            </div>
-
-            <div className="space-y-6">
-                <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-2">
-                        Amount to {tab === 'stake' ? 'Stake' : 'Unstake'}
-                    </label>
-                    <div className="relative">
-                        <input
-                            type="text"
-                            value={amount}
-                            onChange={handleAmountChange}
-                            placeholder="0.0"
-                            className="block w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all outline-none text-lg font-medium"
-                        />
-                        <div className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center space-x-2">
-                            <span className="text-sm font-bold text-gray-500">{tab === 'stake' ? 'TON' : 'tsTON'}</span>
-                        </div>
-                    </div>
-                    {validationError && amount !== '' && <p className="mt-2 text-sm text-red-500">{validationError}</p>}
-                </div>
-
-                {tab === 'unstake' && (
-                    <div className="space-y-2">
-                        <label className="block text-sm font-medium text-gray-700">Unstake Method</label>
-                        <div className="grid grid-cols-3 gap-2">
-                            {[UnstakeMode.INSTANT, UnstakeMode.WHEN_AVAILABLE, UnstakeMode.ROUND_END].map((mode) => (
-                                <button
-                                    key={mode}
-                                    type="button"
-                                    onClick={() => setUnstakeMode(mode)}
-                                    className={cn(
-                                        'px-3 py-2 text-xs font-medium rounded-lg border transition-all',
-                                        unstakeMode === mode
-                                            ? 'bg-blue-600 border-blue-600 text-white shadow-sm'
-                                            : 'bg-white border-gray-200 text-gray-600 hover:border-blue-300 hover:text-blue-600',
-                                    )}
-                                >
-                                    {mode === UnstakeMode.INSTANT && 'Instant'}
-                                    {mode === UnstakeMode.WHEN_AVAILABLE && 'When available'}
-                                    {mode === UnstakeMode.ROUND_END && 'Round end'}
-                                </button>
-                            ))}
-                        </div>
-                        <p className="text-[10px] text-gray-500 italic">
-                            {unstakeMode === UnstakeMode.INSTANT && 'Receive TON immediately'}
-                            {unstakeMode === UnstakeMode.WHEN_AVAILABLE && 'Immediate if liquid, or up to ~18h queue'}
-                            {unstakeMode === UnstakeMode.ROUND_END && 'Wait for cycle end (~18h) for best rate'}
-                        </p>
-                    </div>
-                )}
-
-                {currentQuote && (
-                    <div className="bg-blue-50 rounded-xl p-4 space-y-2">
-                        <div className="flex justify-between text-sm">
-                            <span className="text-blue-600">You will receive</span>
-                            <span className="font-bold text-blue-900">
-                                {currentQuote.amountOut} {tab === 'stake' ? 'tsTON' : 'TON'}
-                            </span>
-                        </div>
-                    </div>
-                )}
-
-                {error && (
-                    <div className="bg-red-50 border border-red-100 rounded-xl p-4">
-                        <p className="text-sm text-red-600">{error}</p>
-                    </div>
-                )}
-
-                {!currentQuote ? (
-                    <Button
-                        className="w-full py-4 text-lg font-bold"
-                        onClick={handleGetQuote}
-                        disabled={!canGetQuote || isLoadingQuote}
-                        isLoading={isLoadingQuote}
-                    >
-                        Preview {tab === 'stake' ? 'Stake' : 'Unstake'}
-                    </Button>
-                ) : (
-                    <div className="grid grid-cols-2 gap-4">
-                        <Button
-                            variant="secondary"
-                            className="py-4 font-bold"
-                            onClick={() => setAmount('')}
-                            disabled={isStaking || isUnstaking}
-                        >
-                            Cancel
-                        </Button>
-                        <Button className="py-4 font-bold" onClick={handleAction} isLoading={isStaking || isUnstaking}>
-                            Confirm {tab === 'stake' ? 'Stake' : 'Unstake'}
-                        </Button>
-                    </div>
-                )}
-            </div>
-        </Card>
-    );
-};
diff --git a/apps/demo-wallet/src/components/swap/SwapInterface.tsx b/apps/demo-wallet/src/components/swap/SwapInterface.tsx
deleted file mode 100644
index 7840223f9..000000000
--- a/apps/demo-wallet/src/components/swap/SwapInterface.tsx
+++ /dev/null
@@ -1,262 +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 type { FC } from 'react';
-import { useState } from 'react';
-import { useSwap } from '@demo/wallet-core';
-import { useNavigate } from 'react-router-dom';
-import type { SwapToken } from '@ton/walletkit';
-
-import { SwapSettings } from './SwapSettings';
-import { TokenInput } from './TokenInput';
-import { QuoteTimer } from './QuoteTimer';
-import { Button } from '../Button';
-import { Card } from '../Card';
-
-import { cn } from '@/lib/utils';
-
-function getPriceImpactColor(priceImpact: number): string {
-    if (priceImpact > 500) return 'text-destructive';
-    if (priceImpact > 200) return 'text-yellow-600';
-    return 'text-green-600';
-}
-
-interface SwapInterfaceProps {
-    className?: string;
-}
-
-export const SwapInterface: FC<SwapInterfaceProps> = ({ className }) => {
-    const {
-        fromToken,
-        toToken,
-        amount,
-        isReverseSwap,
-        destinationAddress,
-        currentQuote,
-        isLoadingQuote,
-        isSwapping,
-        error,
-        slippageBps,
-        setFromToken,
-        setToToken,
-        setSwapAmount: setAmount,
-        setIsReverseSwap,
-        setDestinationAddress,
-        setSlippageBps,
-        swapTokens,
-        getSwapQuote: getQuote,
-        executeSwap,
-    } = useSwap();
-
-    const navigate = useNavigate();
-
-    const [showSlippageSettings, setShowSlippageSettings] = useState(false);
-    const [useCustomDestination, setUseCustomDestination] = useState(false);
-
-    const getTokenSymbol = (token: SwapToken): string => {
-        if (token.symbol) return token.symbol;
-        if (token.address === 'ton') return 'TON';
-        return 'Unknown';
-    };
-
-    const fromSymbol = getTokenSymbol(fromToken);
-    const toSymbol = getTokenSymbol(toToken);
-
-    const handleGetQuote = async () => {
-        await getQuote();
-    };
-
-    const handleExecuteSwap = async () => {
-        await executeSwap();
-
-        navigate('/wallet', {
-            state: { message: `${fromSymbol} sent successfully!` },
-        });
-    };
-
-    const handleFromAmountChange = (val: string) => {
-        setAmount(val);
-        setIsReverseSwap(false);
-    };
-
-    const handleToAmountChange = (val: string) => {
-        setAmount(val);
-        setIsReverseSwap(true);
-    };
-
-    const fromAmount = !isReverseSwap ? amount : currentQuote ? currentQuote.fromAmount : '';
-
-    const toAmount = isReverseSwap ? amount : currentQuote ? currentQuote.toAmount : '';
-
-    const getSwapButtonText = () => {
-        if (!fromToken || !toToken) return 'Select tokens';
-        const hasFromAmount = fromAmount && parseFloat(fromAmount) > 0;
-        const hasToAmount = toAmount && parseFloat(toAmount) > 0;
-        if (!hasFromAmount && !hasToAmount) return 'Enter amount';
-        if (isLoadingQuote) return 'Getting quote...';
-        if (error) return 'Error';
-        if (!currentQuote) return 'Get Quote';
-        return `Swap ${fromSymbol} for ${toSymbol}`;
-    };
-
-    const isSwapDisabled = !!error || isLoadingQuote || isSwapping;
-
-    return (
-        <Card className={cn('mx-auto w-full max-w-md', className)}>
-            <div className="flex items-center justify-between mb-6">
-                <h2 className="text-xl font-bold text-gray-900">Swap</h2>
-                <SwapSettings
-                    slippageBps={slippageBps}
-                    setSlippageBps={setSlippageBps}
-                    showSettings={showSlippageSettings}
-                    setShowSettings={setShowSlippageSettings}
-                />
-            </div>
-
-            <div className="space-y-4">
-                <TokenInput
-                    amount={fromAmount}
-                    excludeToken={toToken}
-                    label="From"
-                    onAmountChange={handleFromAmountChange}
-                    onTokenSelect={setFromToken}
-                    token={fromToken}
-                />
-
-                <div className="w-full h-1 relative -mt-2">
-                    <button
-                        onClick={swapTokens}
-                        className="p-1 bg-blue-500 hover:bg-blue-600 border-4 border-white rounded-full shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-                    >
-                        <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
-                            />
-                        </svg>
-                    </button>
-                </div>
-
-                <TokenInput
-                    amount={toAmount}
-                    excludeToken={fromToken}
-                    label="To"
-                    onAmountChange={handleToAmountChange}
-                    onTokenSelect={setToToken}
-                    token={toToken}
-                    className="-mt-2"
-                />
-
-                {/* Destination Address */}
-                <div className="space-y-2">
-                    <label className="flex items-center space-x-2 cursor-pointer">
-                        <input
-                            type="checkbox"
-                            checked={useCustomDestination}
-                            onChange={(e) => {
-                                setUseCustomDestination(e.target.checked);
-                                if (!e.target.checked) {
-                                    setDestinationAddress('');
-                                }
-                            }}
-                            className="w-4 h-4 text-blue-600 border-gray-300 bg-white rounded focus:ring-blue-500"
-                        />
-                        <span className="text-sm text-gray-700">Use different recipient address</span>
-                    </label>
-
-                    {useCustomDestination && (
-                        <div className="space-y-1">
-                            <input
-                                type="text"
-                                value={destinationAddress}
-                                onChange={(e) => setDestinationAddress(e.target.value)}
-                                placeholder="Enter recipient address (EQ...)"
-                                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
-                            />
-                            <p className="text-xs text-gray-500">
-                                Swapped tokens will be sent to this address instead of your wallet
-                            </p>
-                        </div>
-                    )}
-                </div>
-
-                {currentQuote && (
-                    <>
-                        <QuoteTimer
-                            expiresAt={currentQuote.expiresAt}
-                            onRefresh={handleGetQuote}
-                            isLoading={isLoadingQuote}
-                        />
-
-                        <div className="border-t border-gray-200 my-6" />
-
-                        <div className="space-y-2 text-sm">
-                            <div className="flex justify-between">
-                                <span className="text-muted-foreground">Provider</span>
-                                <span className="font-medium capitalize">{currentQuote.providerId}</span>
-                            </div>
-
-                            <div className="flex justify-between">
-                                <span className="text-muted-foreground">Minimum Received</span>
-                                <span className="font-medium">
-                                    {Number(currentQuote.minReceived).toFixed(6)} {toSymbol}
-                                </span>
-                            </div>
-
-                            {currentQuote.priceImpact && (
-                                <div className="flex justify-between">
-                                    <span className="text-gray-500">Price Impact</span>
-                                    <span className={cn(getPriceImpactColor(currentQuote.priceImpact))}>
-                                        {(currentQuote.priceImpact / 100).toFixed(2)}%
-                                    </span>
-                                </div>
-                            )}
-
-                            <div className="flex justify-between">
-                                <span className="text-muted-foreground">Slippage</span>
-                                <span className="font-medium">{slippageBps / 100}%</span>
-                            </div>
-                        </div>
-                    </>
-                )}
-
-                {error && (
-                    <div className="rounded-lg bg-red-50 border border-red-200 p-3 text-center text-red-600 text-sm">
-                        {error}
-                    </div>
-                )}
-            </div>
-
-            <div className="flex flex-col gap-3 mt-6">
-                {!currentQuote && (
-                    <Button
-                        disabled={isSwapDisabled}
-                        onClick={handleGetQuote}
-                        isLoading={isLoadingQuote}
-                        className="w-full"
-                    >
-                        {isLoadingQuote ? 'Getting Quote...' : 'Get Quote'}
-                    </Button>
-                )}
-
-                {currentQuote && (
-                    <Button
-                        disabled={!currentQuote || isSwapping}
-                        onClick={handleExecuteSwap}
-                        isLoading={isSwapping}
-                        className="w-full"
-                    >
-                        {isSwapping ? 'Swapping...' : getSwapButtonText()}
-                    </Button>
-                )}
-            </div>
-        </Card>
-    );
-};
diff --git a/apps/demo-wallet/src/components/swap/SwapSettings.tsx b/apps/demo-wallet/src/components/swap/SwapSettings.tsx
deleted file mode 100644
index 442d618ee..000000000
--- a/apps/demo-wallet/src/components/swap/SwapSettings.tsx
+++ /dev/null
@@ -1,107 +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 type { FC } from 'react';
-import { useState, useEffect } from 'react';
-
-import { Button } from '../Button';
-import { Modal } from '../Modal';
-
-interface SwapSettingsProps {
-    slippageBps: number;
-    setSlippageBps: (slippage: number) => void;
-    showSettings: boolean;
-    setShowSettings: (show: boolean) => void;
-}
-
-export const SwapSettings: FC<SwapSettingsProps> = ({ slippageBps, setSlippageBps }) => {
-    const [open, setOpen] = useState(false);
-    const [tempSlippageBps, setTempSlippageBps] = useState(slippageBps);
-
-    const presetSlippages = [50, 100, 300, 500];
-
-    useEffect(() => {
-        setTempSlippageBps(slippageBps);
-    }, [slippageBps]);
-
-    const handleSave = () => {
-        if (tempSlippageBps >= 10 && tempSlippageBps <= 5000) {
-            setSlippageBps(tempSlippageBps);
-        }
-        setOpen(false);
-    };
-
-    const handleCancel = () => {
-        setTempSlippageBps(slippageBps);
-        setOpen(false);
-    };
-
-    return (
-        <>
-            <button
-                className="w-8 h-8 p-0 flex items-center justify-center hover:bg-gray-100 rounded-md"
-                onClick={() => setOpen(true)}
-            >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-                    />
-                    <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                </svg>
-            </button>
-
-            <Modal.Container isOpen={open} onClose={handleCancel}>
-                <Modal.Header onClose={handleCancel}>
-                    <Modal.Title>Swap Settings</Modal.Title>
-                </Modal.Header>
-                <Modal.Body className="space-y-6">
-                    <div className="space-y-3">
-                        <label className="block text-sm font-medium text-gray-700">Slippage Tolerance</label>
-                        <div className="grid grid-cols-4 gap-2">
-                            {presetSlippages.map((preset) => (
-                                <button
-                                    className={`flex-1 px-3 py-2 text-sm rounded-lg border ${
-                                        tempSlippageBps === preset
-                                            ? 'bg-blue-600 border-blue-600 text-white'
-                                            : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
-                                    }`}
-                                    key={preset}
-                                    onClick={() => setTempSlippageBps(preset)}
-                                >
-                                    {preset / 100}%
-                                </button>
-                            ))}
-                        </div>
-                        <p className="text-gray-500 text-xs">
-                            Your transaction will revert if the price changes unfavorably by more than this percentage.
-                        </p>
-                    </div>
-                </Modal.Body>
-
-                <Modal.Footer>
-                    <div className="flex gap-2">
-                        <Button className="flex-1" onClick={handleCancel} variant="secondary">
-                            Cancel
-                        </Button>
-                        <Button className="flex-1" onClick={handleSave}>
-                            Save
-                        </Button>
-                    </div>
-                </Modal.Footer>
-            </Modal.Container>
-        </>
-    );
-};
diff --git a/apps/demo-wallet/src/components/swap/TokenInput.tsx b/apps/demo-wallet/src/components/swap/TokenInput.tsx
deleted file mode 100644
index 84f9dfff9..000000000
--- a/apps/demo-wallet/src/components/swap/TokenInput.tsx
+++ /dev/null
@@ -1,112 +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 type { FC } from 'react';
-import { useJettons, useWallet, formatUnits } from '@demo/wallet-core';
-import type { SwapToken } from '@ton/walletkit';
-
-import { TokenSelector } from './TokenSelector';
-import { Button } from '../Button';
-
-import { cn } from '@/lib/utils';
-
-interface Props {
-    label: string;
-    token: SwapToken;
-    amount: string;
-    onTokenSelect: (token: SwapToken) => void;
-    onAmountChange: (amount: string) => void;
-    excludeToken?: SwapToken;
-    isOutput?: boolean;
-    className?: string;
-}
-
-export const TokenInput: FC<Props> = ({
-    label,
-    token,
-    amount,
-    onTokenSelect,
-    onAmountChange,
-    excludeToken,
-    isOutput = false,
-    className,
-}) => {
-    const { balance } = useWallet();
-    const { userJettons } = useJettons();
-
-    const getTokenBalance = (token: SwapToken): string => {
-        if (token.address === 'ton') {
-            return formatUnits(balance || '0', token.decimals);
-        }
-
-        const jetton = userJettons.find((j) => j.address === token.address);
-        if (jetton && jetton.balance) {
-            return formatUnits(jetton.balance, token.decimals);
-        }
-
-        return '0';
-    };
-
-    const handleMaxClick = () => {
-        if (isOutput) return;
-
-        if (token.address === 'ton') {
-            const currentBalance = parseFloat(formatUnits(balance || '0', token.decimals));
-            const maxAmount = currentBalance - 0.1;
-            if (maxAmount > 0) {
-                onAmountChange(maxAmount.toString());
-            }
-        } else {
-            const jetton = userJettons.find((j) => j.address === token.address);
-            if (jetton && jetton.balance) {
-                const balanceInUnits = formatUnits(jetton.balance, token.decimals);
-                onAmountChange(balanceInUnits);
-            }
-        }
-    };
-
-    const tokenBalance = getTokenBalance(token);
-
-    return (
-        <div className={cn('space-y-3 overflow-hidden rounded-lg bg-secondary px-4 py-5.5', className)}>
-            <div className="flex items-center justify-between">
-                <span className="font-medium text-muted-foreground text-sm">{label}</span>
-
-                {token && (
-                    <div className="flex items-center text-muted-foreground text-xs">
-                        <p>Balance: </p>
-                        <span className="ml-1 text-muted-foreground text-xs">
-                            {parseFloat(tokenBalance).toFixed(6)}
-                        </span>
-                        {!isOutput && parseFloat(tokenBalance) > 0 && (
-                            <Button className="h-5 px-2! ml-2 text-xs" onClick={handleMaxClick} size="sm">
-                                Max
-                            </Button>
-                        )}
-                    </div>
-                )}
-            </div>
-
-            <div className="flex max-w-full items-center gap-2 overflow-hidden">
-                <div className="flex-1">
-                    <input
-                        className="w-full font-semibold text-3xl outline-none [-moz-appearance:textfield] focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                        disabled={isOutput}
-                        id={`amount-${label}`}
-                        onChange={(e) => onAmountChange(e.target.value)}
-                        placeholder="0"
-                        type="text"
-                        value={amount}
-                    />
-                </div>
-
-                <TokenSelector excludeToken={excludeToken} onTokenSelect={onTokenSelect} selectedToken={token} />
-            </div>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/components/swap/TokenSelector.tsx b/apps/demo-wallet/src/components/swap/TokenSelector.tsx
deleted file mode 100644
index 6a2ae5b7e..000000000
--- a/apps/demo-wallet/src/components/swap/TokenSelector.tsx
+++ /dev/null
@@ -1,129 +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 { useMemo } from 'react';
-import type { FC } from 'react';
-import { useJettons } from '@demo/wallet-core';
-import type { Jetton } from '@ton/walletkit';
-import type { SwapToken } from '@ton/walletkit';
-
-import { cn } from '@/lib/utils';
-import { USDT_ADDRESS } from '@/constants/swap';
-import { getJettonsImage, getJettonsSymbol } from '@/utils/jetton';
-import { CircleLogo } from '@/components/CircleLogo';
-
-interface TokenSelectorProps {
-    selectedToken: SwapToken;
-    onTokenSelect: (token: SwapToken) => void;
-    excludeToken?: SwapToken;
-    placeholder?: string;
-    className?: string;
-}
-
-const getTokenSymbol = (token: SwapToken, jetton?: Jetton): string => {
-    if (token.symbol) return token.symbol;
-    if (token.address === 'ton') return 'TON';
-    if (token.address === USDT_ADDRESS) return 'USDT';
-
-    if (jetton) {
-        const symbol = getJettonsSymbol(jetton);
-        return symbol || 'Unknown';
-    }
-
-    return 'Unknown';
-};
-
-export const TokenSelector: FC<TokenSelectorProps> = ({
-    selectedToken,
-    // onTokenSelect,
-    // excludeToken,
-    placeholder = 'Select token',
-    className,
-}) => {
-    const { userJettons } = useJettons();
-
-    // const [open, setOpen] = useState(false);
-
-    // const handleTokenSelect = (tokenAddress: string) => {
-    //     onTokenSelect(tokenAddress);
-    //     setOpen(false);
-    // };
-
-    const selectedTokenInfo = useMemo(() => {
-        const symbol = getTokenSymbol(selectedToken);
-
-        if (selectedToken.address !== 'ton') {
-            const jetton = userJettons.find((j) => j.address === selectedToken.address);
-            const icon = selectedToken.image ?? (jetton ? getJettonsImage(jetton) : undefined);
-
-            return { symbol, icon };
-        }
-
-        return {
-            symbol,
-            icon: '/ton.png',
-        };
-    }, [selectedToken, userJettons]);
-
-    return (
-        <>
-            <button
-                className={cn(
-                    'flex h-9 items-center justify-between px-3 py-2 bg-white border border-gray-300 rounded-md',
-                    // 'hover:bg-gray-50',
-                    !!selectedToken && 'px-2',
-                    className,
-                )}
-                // onClick={() => setOpen(true)}
-                disabled
-            >
-                {selectedTokenInfo ? (
-                    <div className="flex items-center gap-2">
-                        <CircleLogo.Container className="size-6">
-                            <CircleLogo.Image src={selectedTokenInfo.icon} />
-                            <CircleLogo.Fallback>{selectedTokenInfo.symbol[0]}</CircleLogo.Fallback>
-                        </CircleLogo.Container>
-
-                        <div className="text-left">
-                            <p className="font-semibold text-sm">{selectedTokenInfo.symbol}</p>
-                        </div>
-                    </div>
-                ) : (
-                    <span className="text-gray-500 text-sm">{placeholder}</span>
-                )}
-                {/*<svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">*/}
-                {/*    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />*/}
-                {/*</svg>*/}
-            </button>
-
-            {/*<Modal.Container isOpen={open} onClose={() => setOpen(false)}>*/}
-            {/*    <Modal.Header onClose={() => setOpen(false)}>*/}
-            {/*        <Modal.Title>Select a token</Modal.Title>*/}
-            {/*    </Modal.Header>*/}
-
-            {/*    <Modal.Body className="space-y-2">*/}
-            {/*        {availableTokens.map((token) => (*/}
-            {/*            <button*/}
-            {/*                className="flex w-full items-center gap-3 rounded-lg px-3 py-3 hover:bg-gray-100"*/}
-            {/*                key={token.address}*/}
-            {/*                onClick={() => handleTokenSelect(token.address)}*/}
-            {/*            >*/}
-            {/*                <div className="flex w-10 h-10 items-center justify-center rounded-full bg-blue-100">*/}
-            {/*                    <span className="text-lg">{token.icon}</span>*/}
-            {/*                </div>*/}
-            {/*                <div className="flex-1 text-left">*/}
-            {/*                    <p className="font-semibold text-sm">{token.symbol}</p>*/}
-            {/*                    <p className="text-gray-500 text-xs">{token.name}</p>*/}
-            {/*                </div>*/}
-            {/*            </button>*/}
-            {/*        ))}*/}
-            {/*    </Modal.Body>*/}
-            {/*</Modal.Container>*/}
-        </>
-    );
-};
diff --git a/apps/demo-wallet/src/components/transactions/ActionCard.tsx b/apps/demo-wallet/src/components/transactions/ActionCard.tsx
deleted file mode 100644
index 6a31e2e75..000000000
--- a/apps/demo-wallet/src/components/transactions/ActionCard.tsx
+++ /dev/null
@@ -1,99 +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 React, { memo, useMemo } from 'react';
-import type { Action } from '@ton/walletkit';
-
-import { formatTonForDisplay, sameAddress } from '../../utils';
-import { TransactionCard } from './TransactionCard';
-import type { TxFinality } from './TransactionCard';
-
-interface ActionCardProps {
-    action: Action;
-    myAddress: string;
-    timestamp: number;
-    traceLink?: string;
-    /** When true, renders as pending (spinner icon, "Pending" status) */
-    isPending?: boolean;
-    /** Finality: pending, confirmed, finalized, or done (default from isPending) */
-    finality?: TxFinality;
-    /** Debug ID for DOM inspection (data-debug-id) */
-    debugId?: string;
-}
-
-/**
- * Wrapper that extracts Action data and renders TransactionCard
- */
-const TON_TRANSFER_DESC = /^Transferring (.+) TON$/;
-const TON_VALUE = /^(.+) TON$/;
-const JETTON_TRANSFER_DESC = /^Transferring (.+)$/;
-
-function isOutgoingFromAction(action: Action, myAddress: string): boolean {
-    if (action.type === 'TonTransfer' && 'TonTransfer' in action) {
-        return sameAddress(action.TonTransfer?.sender?.address, myAddress);
-    }
-    if (action.type === 'JettonTransfer' && 'JettonTransfer' in action) {
-        return sameAddress(action.JettonTransfer?.sender?.address, myAddress);
-    }
-    if (action.type === 'NftItemTransfer' && 'NftItemTransfer' in action) {
-        return sameAddress(action.NftItemTransfer?.sender?.address, myAddress);
-    }
-    const accounts = action.simplePreview?.accounts;
-    return accounts != null && accounts.length > 0 && sameAddress(accounts[0].address, myAddress);
-}
-
-export const ActionCard: React.FC<ActionCardProps> = memo(
-    ({ action, myAddress, timestamp, traceLink, isPending = false, finality: finalityProp, debugId }) => {
-        const { simplePreview, status } = action;
-        const { description, value, valueImage } = simplePreview;
-
-        const isOutgoing = isOutgoingFromAction(action, myAddress);
-        const txStatus = isPending ? 'pending' : status === 'failure' ? 'failure' : 'success';
-        const finality: TxFinality = finalityProp ?? (isPending ? 'pending' : status === 'failure' ? 'done' : 'done');
-
-        const { description: displayDesc, value: displayValue } = useMemo(() => {
-            const descMatch = description?.match(TON_TRANSFER_DESC);
-            const valueMatch = value?.match(TON_VALUE);
-            if (descMatch && valueMatch && action.type === 'TonTransfer') {
-                const amount = formatTonForDisplay(valueMatch[1]);
-                const label = isOutgoing ? 'Sent' : 'Received';
-                return {
-                    description: `${label} ${amount} TON`,
-                    value: `${amount} TON`,
-                };
-            }
-            if (valueMatch && action.type === 'TonTransfer') {
-                const amount = formatTonForDisplay(valueMatch[1]);
-                return { description, value: `${amount} TON` };
-            }
-            const jettonMatch = description?.match(JETTON_TRANSFER_DESC);
-            if (jettonMatch && action.type === 'JettonTransfer') {
-                const label = isOutgoing ? 'Sent' : 'Received';
-                return {
-                    description: `${label} ${jettonMatch[1]}`,
-                    value: value ?? '',
-                };
-            }
-            return { description, value };
-        }, [description, value, action.type, isOutgoing]);
-
-        return (
-            <TransactionCard
-                description={displayDesc}
-                value={displayValue}
-                valueImage={valueImage}
-                timestamp={timestamp}
-                traceLink={traceLink}
-                status={txStatus}
-                finality={finality}
-                isOutgoing={isOutgoing}
-                debugId={debugId}
-            />
-        );
-    },
-);
diff --git a/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx b/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx
deleted file mode 100644
index c07a6d049..000000000
--- a/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx
+++ /dev/null
@@ -1,86 +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 React, { memo } from 'react';
-import { Link } from 'react-router-dom';
-import type { TonTransferAction } from '@ton/walletkit';
-
-import { formatAddress, formatTimestamp } from '../../utils';
-import { formatTon } from '../../utils/units';
-
-interface TonTransferCardProps {
-    action: TonTransferAction;
-    myAddress: string;
-    eventId: string;
-    timestamp: number;
-    traceLink: string;
-}
-
-/**
- * Component for displaying a single TON transfer transaction
- */
-export const TonTransferCard: React.FC<TonTransferCardProps> = memo(
-    ({ action, myAddress, eventId, timestamp, traceLink }) => {
-        const isOutgoing = action.TonTransfer.sender.address === myAddress;
-        const amount = formatTon(action.TonTransfer.amount);
-        const otherAddress = isOutgoing ? action.TonTransfer.recipient.address : action.TonTransfer.sender.address;
-
-        return (
-            <Link
-                key={eventId}
-                to={traceLink}
-                className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg border border-gray-100"
-            >
-                <div className="flex items-center space-x-3">
-                    <div
-                        className={`w-8 h-8 rounded-full flex items-center justify-center ${isOutgoing ? 'bg-red-100' : 'bg-green-100'}`}
-                    >
-                        {isOutgoing ? (
-                            <svg className="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M7 11l5-5m0 0l5 5m-5-5v12"
-                                />
-                            </svg>
-                        ) : (
-                            <svg
-                                className="w-4 h-4 text-green-600"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M17 13l-5 5m0 0l-5-5m5 5V6"
-                                />
-                            </svg>
-                        )}
-                    </div>
-                    <div>
-                        <p className="text-sm font-medium text-gray-900">{isOutgoing ? 'Sent TON' : 'Received TON'}</p>
-                        <p className="text-xs text-gray-500">{formatAddress(otherAddress)}</p>
-                        {action.TonTransfer.comment && (
-                            <p className="mt-1 text-xs text-gray-600 break-all">{action.TonTransfer.comment}</p>
-                        )}
-                    </div>
-                </div>
-                <div className="text-right">
-                    <p className={`text-sm font-medium ${isOutgoing ? 'text-red-600' : 'text-green-600'}`}>
-                        {isOutgoing ? '-' : '+'}
-                        {amount} TON
-                    </p>
-                    <p className="text-xs text-gray-400">{formatTimestamp(timestamp)}</p>
-                </div>
-            </Link>
-        );
-    },
-);
diff --git a/apps/demo-wallet/src/components/transactions/TransactionCard.tsx b/apps/demo-wallet/src/components/transactions/TransactionCard.tsx
deleted file mode 100644
index 6b877dd08..000000000
--- a/apps/demo-wallet/src/components/transactions/TransactionCard.tsx
+++ /dev/null
@@ -1,238 +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 React, { memo } from 'react';
-import { Link } from 'react-router-dom';
-
-import { formatTimestamp } from '../../utils';
-
-export type TxFinality = 'pending' | 'confirmed' | 'finalized' | 'invalidated' | 'done';
-
-export interface TransactionCardProps {
-    description: string;
-    value: string;
-    valueImage?: string;
-    timestamp: number;
-    traceLink?: string;
-    status: 'pending' | 'success' | 'failure';
-    /** Finality for status badge: pending, confirmed, finalized, or done (default: pending when status=pending, else done) */
-    finality?: TxFinality;
-    isOutgoing?: boolean;
-    /** Debug ID for DOM inspection (data-debug-id) */
-    debugId?: string;
-}
-
-const StatusBadge: React.FC<{ finality: TxFinality; isFailed?: boolean }> = ({ finality, isFailed }) => {
-    const base =
-        'absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full flex items-center justify-center ring-1 ring-white';
-    if (isFailed) {
-        return (
-            <div className={`${base} bg-red-500`} title="Failed">
-                <svg className="w-1.5 h-1.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-            </div>
-        );
-    }
-    if (finality === 'pending') {
-        return (
-            <div className={`${base} bg-yellow-400`}>
-                <div className="w-1.5 h-1.5 border border-yellow-700 border-t-transparent rounded-full animate-spin" />
-            </div>
-        );
-    }
-    if (finality === 'confirmed') {
-        return (
-            <div className={`${base} bg-blue-400`} title="Confirmed">
-                <svg className="w-1.5 h-1.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <circle cx="12" cy="12" r="8" strokeWidth="2" />
-                    <circle cx="12" cy="12" r="3" fill="currentColor" />
-                </svg>
-            </div>
-        );
-    }
-    if (finality === 'finalized') {
-        return (
-            <div className={`${base} bg-indigo-500`} title="Finalized">
-                <svg className="w-1.5 h-1.5 text-white" fill="currentColor" viewBox="0 0 20 20">
-                    <path
-                        fillRule="evenodd"
-                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                        clipRule="evenodd"
-                    />
-                </svg>
-            </div>
-        );
-    }
-    if (finality === 'invalidated') {
-        return (
-            <div className={`${base} bg-red-400`} title="Invalidated">
-                <svg className="w-1.5 h-1.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-            </div>
-        );
-    }
-    // done - no badge
-    return null;
-};
-
-/**
- * Unified card for pending and confirmed transactions.
- * Main icon: always send/receive. Status badge: small icon in corner.
- */
-export const TransactionCard: React.FC<TransactionCardProps> = memo(
-    ({
-        description,
-        value,
-        valueImage,
-        timestamp,
-        traceLink,
-        status,
-        finality: finalityProp,
-        isOutgoing = false,
-        debugId,
-    }) => {
-        const isFailed = status === 'failure';
-        const isPending = status === 'pending';
-
-        const finality: TxFinality = finalityProp ?? (isPending ? 'pending' : isFailed ? 'done' : 'done');
-
-        // Main icon: always send (up) or receive (down) based on direction
-        const mainIcon = (() => {
-            if (isFailed) {
-                return (
-                    <svg className="w-2.5 h-2.5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                );
-            }
-            if (isOutgoing) {
-                return (
-                    <svg className="w-2.5 h-2.5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M7 11l5-5m0 0l5 5m-5-5v12"
-                        />
-                    </svg>
-                );
-            }
-            return (
-                <svg className="w-2.5 h-2.5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 13l-5 5m0 0l-5-5m5 5V6" />
-                </svg>
-            );
-        })();
-
-        const bgColor = isFailed ? 'bg-red-100' : isOutgoing ? 'bg-red-100' : 'bg-green-100';
-        const valueColor = isFailed ? 'text-red-600' : isOutgoing ? 'text-red-600' : 'text-green-600';
-        const valueWithSign = isFailed ? value : isOutgoing ? `-${value}` : `+${value}`;
-
-        const statusText =
-            finality === 'pending'
-                ? 'Pending'
-                : finality === 'confirmed'
-                  ? 'Confirmed'
-                  : finality === 'finalized'
-                    ? 'Finalized'
-                    : finality === 'invalidated'
-                      ? 'Invalidated'
-                      : isFailed
-                        ? 'Failed'
-                        : formatTimestamp(timestamp);
-
-        const statusColor =
-            finality === 'pending'
-                ? 'text-yellow-600'
-                : finality === 'confirmed'
-                  ? 'text-blue-600'
-                  : finality === 'finalized'
-                    ? 'text-indigo-600'
-                    : finality === 'invalidated'
-                      ? 'text-red-600'
-                      : isFailed
-                        ? 'text-red-500'
-                        : 'text-gray-400';
-
-        const inner = (
-            <>
-                {/* Row 1: description + value */}
-                <div className="flex items-center justify-between gap-2 min-w-0">
-                    <div className="flex items-center gap-2 min-w-0 flex-1">
-                        <div
-                            className={`relative w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 ${bgColor}`}
-                        >
-                            {mainIcon}
-                            {(finality !== 'done' || isFailed) && (
-                                <StatusBadge finality={finality} isFailed={isFailed} />
-                            )}
-                        </div>
-                        <p className="text-xs font-medium text-gray-900 truncate">{description}</p>
-                    </div>
-                    <div className="flex items-center gap-1 flex-shrink-0">
-                        {valueImage && (
-                            <img
-                                src={valueImage}
-                                alt=""
-                                className="w-3 h-3 rounded-full"
-                                onError={(e) => {
-                                    e.currentTarget.style.display = 'none';
-                                }}
-                            />
-                        )}
-                        <p className={`text-xs font-medium ${valueColor}`}>{valueWithSign}</p>
-                    </div>
-                </div>
-                {/* Row 2: timestamp */}
-                <div className="flex flex-col gap-0.5 items-end">
-                    <p className={`text-[10px] ${statusColor}`}>{statusText}</p>
-                    {debugId && (
-                        <span className="text-[9px] font-mono text-gray-300" title={debugId}>
-                            {debugId}
-                        </span>
-                    )}
-                </div>
-            </>
-        );
-
-        if (!traceLink) {
-            return (
-                <div className="block py-2 -mx-1 px-1 rounded" {...(debugId && { 'data-debug-id': debugId })}>
-                    {inner}
-                </div>
-            );
-        }
-
-        const isExternal = /^https?:\/\//.test(traceLink);
-        const className = 'block py-2 hover:bg-gray-50/50 -mx-1 px-1 rounded transition-colors';
-
-        if (isExternal) {
-            return (
-                <a
-                    href={traceLink}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={className}
-                    {...(debugId && { 'data-debug-id': debugId })}
-                >
-                    {inner}
-                </a>
-            );
-        }
-
-        return (
-            <Link to={traceLink} className={className} {...(debugId && { 'data-debug-id': debugId })}>
-                {inner}
-            </Link>
-        );
-    },
-);
-
-TransactionCard.displayName = 'TransactionCard';
diff --git a/apps/demo-wallet/src/components/transactions/TransactionStates.tsx b/apps/demo-wallet/src/components/transactions/TransactionStates.tsx
deleted file mode 100644
index 3800b6a54..000000000
--- a/apps/demo-wallet/src/components/transactions/TransactionStates.tsx
+++ /dev/null
@@ -1,66 +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 React from 'react';
-
-interface TransactionErrorStateProps {
-    error: string;
-    onRetry: () => void;
-}
-
-/**
- * Error state component for transaction list
- */
-export const TransactionErrorState: React.FC<TransactionErrorStateProps> = ({ error, onRetry }) => (
-    <div className="text-center py-8">
-        <div className="text-red-400 mb-2">
-            <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-            </svg>
-        </div>
-        <p className="text-red-500 text-sm">{error}</p>
-        <button onClick={onRetry} className="mt-2 text-blue-500 text-sm hover:text-blue-600">
-            Try again
-        </button>
-    </div>
-);
-
-/**
- * Loading state component for transaction list
- */
-export const TransactionLoadingState: React.FC = () => (
-    <div className="text-center py-8">
-        <div className="animate-spin w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mx-auto mb-2"></div>
-        <p className="text-gray-500 text-sm">Loading transactions...</p>
-    </div>
-);
-
-/**
- * Empty state component for transaction list
- */
-export const TransactionEmptyState: React.FC = () => (
-    <div className="text-center py-8">
-        <div className="text-gray-400 mb-2">
-            <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
-                />
-            </svg>
-        </div>
-        <p className="text-gray-500 text-sm">No activity yet</p>
-        <p className="text-gray-400 text-xs mt-1">Your history will appear here</p>
-    </div>
-);
diff --git a/apps/demo-wallet/src/core/components/shared/amount-presets/amount-presets.tsx b/apps/demo-wallet/src/core/components/shared/amount-presets/amount-presets.tsx
new file mode 100644
index 000000000..30197b12b
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/amount-presets/amount-presets.tsx
@@ -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 { ComponentProps, FC } from 'react';
+
+import { Button } from '@/core/components/ui/button';
+import { cn } from '@/core/lib/utils';
+
+export interface AmountPreset {
+    label: string;
+    amount: string;
+    onSelect?: () => void;
+}
+
+export interface AmountPresetsProps extends ComponentProps<'div'> {
+    presets: AmountPreset[];
+    currencySymbol?: string;
+    onPresetSelect: (value: string) => void;
+}
+
+/** Row of quick-amount buttons (e.g. 10% / 25% / 50% / MAX). Ported from appkit-react. */
+export const AmountPresets: FC<AmountPresetsProps> = ({
+    presets,
+    currencySymbol,
+    onPresetSelect,
+    className,
+    ...props
+}) => (
+    <div className={cn('mx-auto grid w-full grid-cols-4 gap-2', className)} {...props}>
+        {presets.map((preset) => (
+            <Button
+                key={preset.label}
+                size="sm"
+                variant="secondary"
+                className="w-full whitespace-nowrap"
+                onClick={() => (preset.onSelect ? preset.onSelect() : onPresetSelect(preset.amount))}
+            >
+                {currencySymbol}
+                {preset.label}
+            </Button>
+        ))}
+    </div>
+);
diff --git a/apps/demo-wallet/src/components/transactions/index.ts b/apps/demo-wallet/src/core/components/shared/amount-presets/index.ts
similarity index 54%
rename from apps/demo-wallet/src/components/transactions/index.ts
rename to apps/demo-wallet/src/core/components/shared/amount-presets/index.ts
index 50757e4e4..0f9c1611d 100644
--- a/apps/demo-wallet/src/components/transactions/index.ts
+++ b/apps/demo-wallet/src/core/components/shared/amount-presets/index.ts
@@ -6,7 +6,4 @@
  *
  */
 
-export * from './TransactionStates';
-export * from './TonTransferCard';
-export * from './TransactionCard';
-export * from './ActionCard';
+export * from './amount-presets';
diff --git a/apps/demo-wallet/src/core/components/shared/centered-screen/centered-screen.tsx b/apps/demo-wallet/src/core/components/shared/centered-screen/centered-screen.tsx
new file mode 100644
index 000000000..9bd097bd7
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/centered-screen/centered-screen.tsx
@@ -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 React from 'react';
+import { ChevronLeft } from 'lucide-react';
+
+interface CenteredScreenProps {
+    /** Optional back button, pinned at the top. */
+    onBack?: () => void;
+    /** Optional action area, pinned at the bottom. */
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+}
+
+/**
+ * Full-screen onboarding layout: back button pinned top, actions pinned bottom,
+ * content vertically centered in between and scrollable when it doesn't fit.
+ */
+export const CenteredScreen: React.FC<CenteredScreenProps> = ({ onBack, footer, children }) => (
+    <div className="h-dvh bg-white select-none flex flex-col">
+        <div className="w-full max-w-md mx-auto flex flex-col flex-1 min-h-0">
+            {onBack && (
+                <div className="flex-shrink-0 px-4 pt-3">
+                    <button
+                        type="button"
+                        onClick={onBack}
+                        aria-label="Back"
+                        className="w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-gray-200 transition-colors"
+                    >
+                        <ChevronLeft className="w-5 h-5" />
+                    </button>
+                </div>
+            )}
+
+            <div className="flex-1 min-h-0 overflow-y-auto">
+                <div className="min-h-full flex flex-col justify-center py-6">{children}</div>
+            </div>
+
+            {footer && <div className="flex-shrink-0 px-4 pb-6 pt-2">{footer}</div>}
+        </div>
+    </div>
+);
diff --git a/apps/demo-wallet/src/core/components/shared/centered-screen/index.ts b/apps/demo-wallet/src/core/components/shared/centered-screen/index.ts
new file mode 100644
index 000000000..2219776c0
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/centered-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export { CenteredScreen } from './centered-screen';
diff --git a/apps/demo-wallet/src/core/components/shared/confirm-modal/confirm-modal.tsx b/apps/demo-wallet/src/core/components/shared/confirm-modal/confirm-modal.tsx
new file mode 100644
index 000000000..178b66864
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/confirm-modal/confirm-modal.tsx
@@ -0,0 +1,66 @@
+/**
+ * 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 React from 'react';
+
+import { Modal } from '@/core/components/ui/modal';
+
+interface ConfirmModalProps {
+    isOpen: boolean;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Style the confirm action as destructive (red). */
+    danger?: boolean;
+    onConfirm: () => void;
+    onClose: () => void;
+}
+
+/** Generic confirm/cancel modal (drawer on mobile, dialog on desktop). */
+export const ConfirmModal: React.FC<ConfirmModalProps> = ({
+    isOpen,
+    title,
+    description,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    danger = false,
+    onConfirm,
+    onClose,
+}) => (
+    <Modal.Container isOpened={isOpen} onOpenChange={(open) => !open && onClose()} className="px-2">
+        <Modal.Header onClose={onClose}>
+            <Modal.Title>{title}</Modal.Title>
+        </Modal.Header>
+
+        {description && (
+            <Modal.Body>
+                <p className="text-base text-gray-500">{description}</p>
+            </Modal.Body>
+        )}
+
+        <Modal.Footer>
+            <button
+                type="button"
+                onClick={onConfirm}
+                className={`w-full py-4 rounded-2xl text-base font-bold text-white transition-colors ${
+                    danger ? 'bg-red-500 hover:bg-red-600' : 'bg-blue-600 hover:bg-blue-700'
+                }`}
+            >
+                {confirmLabel}
+            </button>
+            <button
+                type="button"
+                onClick={onClose}
+                className="w-full py-4 rounded-2xl bg-gray-100 text-gray-900 text-base font-bold hover:bg-gray-200 transition-colors"
+            >
+                {cancelLabel}
+            </button>
+        </Modal.Footer>
+    </Modal.Container>
+);
diff --git a/apps/demo-wallet/src/core/components/shared/confirm-modal/index.ts b/apps/demo-wallet/src/core/components/shared/confirm-modal/index.ts
new file mode 100644
index 000000000..139166f3a
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/confirm-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export { ConfirmModal } from './confirm-modal';
diff --git a/apps/demo-wallet/src/core/components/shared/new-layout/index.ts b/apps/demo-wallet/src/core/components/shared/new-layout/index.ts
new file mode 100644
index 000000000..0468c2cc9
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/new-layout/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './new-layout';
diff --git a/apps/demo-wallet/src/core/components/shared/new-layout/new-layout.tsx b/apps/demo-wallet/src/core/components/shared/new-layout/new-layout.tsx
new file mode 100644
index 000000000..e14762828
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/new-layout/new-layout.tsx
@@ -0,0 +1,23 @@
+/**
+ * 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 React from 'react';
+
+interface NewLayoutProps {
+    header?: React.ReactNode;
+    children: React.ReactNode;
+}
+
+export const NewLayout: React.FC<NewLayoutProps> = ({ header, children }) => (
+    <div className="min-h-screen bg-white select-none">
+        <div className="max-w-md mx-auto">
+            {header}
+            <main className="px-4 pb-6">{children}</main>
+        </div>
+    </div>
+);
diff --git a/apps/demo-wallet/src/core/components/shared/screen-header/index.ts b/apps/demo-wallet/src/core/components/shared/screen-header/index.ts
new file mode 100644
index 000000000..7dddcbda7
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/screen-header/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './screen-header';
diff --git a/apps/demo-wallet/src/core/components/shared/screen-header/screen-header.tsx b/apps/demo-wallet/src/core/components/shared/screen-header/screen-header.tsx
new file mode 100644
index 000000000..c118df0b3
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/screen-header/screen-header.tsx
@@ -0,0 +1,33 @@
+/**
+ * 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 React from 'react';
+import { ChevronLeft } from 'lucide-react';
+
+interface ScreenHeaderProps {
+    title: string;
+    /** Back action; the back button is hidden when omitted. */
+    onBack?: () => void;
+}
+
+/** Page header for NewLayout: a round back button (same style as the modal close button) plus a title. */
+export const ScreenHeader: React.FC<ScreenHeaderProps> = ({ title, onBack }) => (
+    <header className="flex items-center gap-3 px-4 py-5">
+        {onBack && (
+            <button
+                type="button"
+                onClick={onBack}
+                className="w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors flex-shrink-0"
+                aria-label="Back"
+            >
+                <ChevronLeft className="w-4 h-4" strokeWidth={2.5} />
+            </button>
+        )}
+        <h1 className="text-xl font-bold text-gray-900 truncate">{title}</h1>
+    </header>
+);
diff --git a/apps/demo-wallet/src/core/components/shared/settings-button/index.ts b/apps/demo-wallet/src/core/components/shared/settings-button/index.ts
new file mode 100644
index 000000000..c3ddee4b5
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/settings-button/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './settings-button';
diff --git a/apps/demo-wallet/src/core/components/shared/settings-button/settings-button.tsx b/apps/demo-wallet/src/core/components/shared/settings-button/settings-button.tsx
new file mode 100644
index 000000000..735a07c21
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/settings-button/settings-button.tsx
@@ -0,0 +1,37 @@
+/**
+ * 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 React from 'react';
+import { Settings2 } from 'lucide-react';
+
+import { cn } from '@/core/lib/utils';
+
+interface SettingsButtonProps {
+    onClick: () => void;
+    className?: string;
+    'aria-label'?: string;
+}
+
+/** Square gear button sized to sit next to a full-width `lg` action button (Swap / Staking). */
+export const SettingsButton: React.FC<SettingsButtonProps> = ({
+    onClick,
+    className,
+    'aria-label': ariaLabel = 'Settings',
+}) => (
+    <button
+        type="button"
+        onClick={onClick}
+        aria-label={ariaLabel}
+        className={cn(
+            'flex size-13 shrink-0 items-center justify-center rounded-2xl bg-gray-100 text-gray-600 transition-colors hover:bg-gray-200',
+            className,
+        )}
+    >
+        <Settings2 className="h-5 w-5" />
+    </button>
+);
diff --git a/apps/demo-wallet/src/core/components/ui/amount-reversed/amount-reversed.tsx b/apps/demo-wallet/src/core/components/ui/amount-reversed/amount-reversed.tsx
new file mode 100644
index 000000000..e549c1a08
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/amount-reversed/amount-reversed.tsx
@@ -0,0 +1,60 @@
+/**
+ * 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 { ComponentProps, FC } from 'react';
+
+import { cn } from '@/core/lib/utils';
+import { formatLargeValue } from '@/core/utils';
+
+export interface AmountReversedProps extends ComponentProps<'div'> {
+    value: string;
+    ticker?: string;
+    symbol?: string;
+    decimals?: number;
+    errorMessage?: string;
+    isLoading?: boolean;
+}
+
+/** Read-only secondary amount shown under the centered input (e.g. the fiat equivalent). */
+export const AmountReversed: FC<AmountReversedProps> = ({
+    value,
+    ticker,
+    symbol,
+    decimals,
+    errorMessage,
+    isLoading,
+    className,
+    ...props
+}) => {
+    const containerClass = cn(
+        'flex w-full items-center justify-center gap-2 text-base font-semibold text-gray-500',
+        className,
+    );
+
+    if (errorMessage) {
+        return (
+            <div className={containerClass} {...props}>
+                {errorMessage}
+            </div>
+        );
+    }
+
+    return (
+        <div className={containerClass} {...props}>
+            {isLoading ? (
+                <span className="h-5 w-[70px] animate-pulse rounded bg-gray-200" />
+            ) : (
+                <span>
+                    {symbol}
+                    {value ? formatLargeValue(value, decimals) : '0'}
+                    {ticker ? ` ${ticker}` : ''}
+                </span>
+            )}
+        </div>
+    );
+};
diff --git a/apps/demo-wallet/src/core/components/ui/amount-reversed/index.ts b/apps/demo-wallet/src/core/components/ui/amount-reversed/index.ts
new file mode 100644
index 000000000..56736debd
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/amount-reversed/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './amount-reversed';
diff --git a/apps/demo-wallet/src/core/components/ui/button/button.tsx b/apps/demo-wallet/src/core/components/ui/button/button.tsx
new file mode 100644
index 000000000..5a1abe919
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/button/button.tsx
@@ -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 { forwardRef } from 'react';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { Loader2 } from 'lucide-react';
+
+import { cn } from '@/core/lib/utils';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'gray' | 'danger' | 'ghost';
+export type ButtonSize = 'lg' | 'md' | 'sm' | 'icon';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    loading?: boolean;
+    /** Optional leading icon rendered before children. */
+    icon?: ReactNode;
+}
+
+const VARIANT_CLASS: Record<ButtonVariant, string> = {
+    primary: 'bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-100 disabled:text-gray-400',
+    secondary: 'bg-blue-50 text-blue-600 hover:bg-blue-100 disabled:opacity-60',
+    gray: 'bg-gray-100 text-gray-900 hover:bg-gray-200 disabled:opacity-50',
+    danger: 'bg-red-500 text-white hover:bg-red-600 disabled:opacity-60',
+    ghost: 'bg-transparent text-gray-400 hover:text-gray-600 disabled:opacity-50',
+};
+
+const SIZE_CLASS: Record<ButtonSize, string> = {
+    lg: 'px-5 py-3.5 text-base font-bold rounded-2xl',
+    md: 'px-4 py-2.5 text-sm font-semibold rounded-xl',
+    sm: 'px-4 py-2 text-sm font-semibold rounded-full',
+    icon: 'h-9 w-9 rounded-full',
+};
+
+/**
+ * Variant-based action button. Visual language is driven by `variant` + `size`;
+ * disabled/loading plumbing and icon rendering are handled here.
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    (
+        {
+            className,
+            variant = 'primary',
+            size = 'lg',
+            fullWidth = false,
+            loading = false,
+            disabled,
+            icon,
+            children,
+            type,
+            ...props
+        },
+        ref,
+    ) => (
+        <button
+            ref={ref}
+            type={type ?? 'button'}
+            disabled={disabled || loading}
+            className={cn(
+                'inline-flex items-center justify-center gap-2 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed',
+                VARIANT_CLASS[variant],
+                SIZE_CLASS[size],
+                fullWidth && 'w-full',
+                className,
+            )}
+            {...props}
+        >
+            {loading ? (
+                <Loader2 className="h-5 w-5 animate-spin" />
+            ) : (
+                <>
+                    {icon}
+                    {children}
+                </>
+            )}
+        </button>
+    ),
+);
+
+Button.displayName = 'Button';
diff --git a/apps/demo-wallet/src/core/components/ui/button/index.ts b/apps/demo-wallet/src/core/components/ui/button/index.ts
new file mode 100644
index 000000000..af3535fe0
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/button/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { Button } from './button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './button';
diff --git a/apps/demo-wallet/src/components/Card.tsx b/apps/demo-wallet/src/core/components/ui/card/card.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/Card.tsx
rename to apps/demo-wallet/src/core/components/ui/card/card.tsx
diff --git a/apps/demo-wallet/src/core/components/ui/card/index.ts b/apps/demo-wallet/src/core/components/ui/card/index.ts
new file mode 100644
index 000000000..8bb13d3d8
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/card/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './card';
diff --git a/apps/demo-wallet/src/core/components/ui/centered-amount-input/centered-amount-input.tsx b/apps/demo-wallet/src/core/components/ui/centered-amount-input/centered-amount-input.tsx
new file mode 100644
index 000000000..29f6f96bd
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/centered-amount-input/centered-amount-input.tsx
@@ -0,0 +1,143 @@
+/**
+ * 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 { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import type { FC, ComponentProps } from 'react';
+
+import { cn } from '@/core/lib/utils';
+
+const MIN_FONT_SCALE = 0.5;
+// Mirrors appkit-react's --ta-input-xl* tokens (amount 60px / ticker 40px, weight 700).
+const INPUT_FONT = '60px';
+const INPUT_LINE_HEIGHT = '68px';
+const TICKER_FONT = '40px';
+
+export interface CenteredAmountInputProps extends ComponentProps<'div'> {
+    value: string;
+    onValueChange: (value: string) => void;
+    ticker?: string;
+    symbol?: string;
+    placeholder?: string;
+    /** Base test id; the inner <input> gets `${baseTestId}-input` (e.g. "send-amount" → "send-amount-input"). */
+    baseTestId?: string;
+}
+
+/** Big centered amount input whose font shrinks to fit the available width (ported from appkit-react). */
+export const CenteredAmountInput: FC<CenteredAmountInputProps> = ({
+    value,
+    onValueChange,
+    ticker,
+    symbol,
+    placeholder = '0',
+    className,
+    baseTestId,
+    ...props
+}) => {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const measureRowRef = useRef<HTMLDivElement>(null);
+    const mirrorRef = useRef<HTMLSpanElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [inputWidth, setInputWidth] = useState<number | undefined>(undefined);
+    const [fontScale, setFontScale] = useState(1);
+
+    const adjustSize = useCallback(() => {
+        const wrapper = wrapperRef.current;
+        const measureRow = measureRowRef.current;
+        const mirror = mirrorRef.current;
+        if (!wrapper || !measureRow || !mirror) return;
+
+        const contentWidth = measureRow.offsetWidth;
+        const availableWidth = wrapper.clientWidth - 4;
+
+        let scale = 1;
+        if (contentWidth > 0 && contentWidth > availableWidth) {
+            scale = Math.max(MIN_FONT_SCALE, availableWidth / contentWidth);
+        }
+
+        setFontScale(scale);
+        setInputWidth(mirror.offsetWidth * scale + 4);
+    }, []);
+
+    useLayoutEffect(adjustSize, [value, placeholder, symbol, ticker, adjustSize]);
+
+    useLayoutEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper) return;
+        const observer = new ResizeObserver(adjustSize);
+        observer.observe(wrapper);
+        return () => observer.disconnect();
+    }, [adjustSize]);
+
+    const inputFontSize = fontScale < 1 ? `calc(${INPUT_FONT} * ${fontScale})` : INPUT_FONT;
+    const tickerFontSize = fontScale < 1 ? `calc(${TICKER_FONT} * ${fontScale})` : TICKER_FONT;
+
+    return (
+        <div
+            ref={wrapperRef}
+            className={cn('relative flex w-full cursor-text flex-col items-center overflow-hidden', className)}
+            onClick={() => inputRef.current?.focus()}
+            {...props}
+        >
+            {/* Hidden row that measures the full content width at the base font. */}
+            <div
+                ref={measureRowRef}
+                className="pointer-events-none invisible absolute flex items-baseline whitespace-nowrap font-bold"
+                aria-hidden="true"
+            >
+                {symbol && <span style={{ fontSize: INPUT_FONT }}>{symbol}</span>}
+                <span style={{ fontSize: INPUT_FONT }}>{value || placeholder}</span>
+                {ticker && <span style={{ fontSize: TICKER_FONT }}>{ticker}</span>}
+            </div>
+
+            <div className="flex max-w-full items-baseline font-bold">
+                {symbol && (
+                    <span
+                        className="select-none whitespace-nowrap text-gray-400"
+                        style={{ fontSize: inputFontSize, lineHeight: INPUT_LINE_HEIGHT }}
+                    >
+                        {symbol}
+                    </span>
+                )}
+                <input
+                    ref={inputRef}
+                    data-testid={baseTestId ? `${baseTestId}-input` : undefined}
+                    className="min-w-[24px] max-w-full border-0 bg-transparent p-0 text-right text-gray-900 outline-none placeholder:text-gray-400"
+                    type="text"
+                    inputMode="decimal"
+                    placeholder={placeholder}
+                    value={value}
+                    onChange={(e) => onValueChange(e.target.value)}
+                    style={{
+                        width: inputWidth ? `${inputWidth}px` : undefined,
+                        fontSize: inputFontSize,
+                        lineHeight: INPUT_LINE_HEIGHT,
+                        boxSizing: 'content-box',
+                    }}
+                />
+                {ticker && (
+                    <span
+                        className="ml-[0.2em] select-none whitespace-nowrap text-gray-400"
+                        style={{ fontSize: tickerFontSize, lineHeight: 1 }}
+                    >
+                        {ticker}
+                    </span>
+                )}
+            </div>
+
+            {/* Hidden mirror that measures the input text width at the base font. */}
+            <span
+                ref={mirrorRef}
+                className="pointer-events-none invisible absolute whitespace-nowrap font-bold"
+                style={{ fontSize: INPUT_FONT }}
+                aria-hidden="true"
+            >
+                {value || placeholder}
+            </span>
+        </div>
+    );
+};
diff --git a/apps/demo-wallet/src/core/components/ui/centered-amount-input/index.ts b/apps/demo-wallet/src/core/components/ui/centered-amount-input/index.ts
new file mode 100644
index 000000000..f155b4018
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/centered-amount-input/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './centered-amount-input';
diff --git a/apps/demo-wallet/src/components/CircleLogo.tsx b/apps/demo-wallet/src/core/components/ui/circle-logo/circle-logo.tsx
similarity index 97%
rename from apps/demo-wallet/src/components/CircleLogo.tsx
rename to apps/demo-wallet/src/core/components/ui/circle-logo/circle-logo.tsx
index fb8c8c7ec..e6984f7f0 100644
--- a/apps/demo-wallet/src/components/CircleLogo.tsx
+++ b/apps/demo-wallet/src/core/components/ui/circle-logo/circle-logo.tsx
@@ -9,7 +9,7 @@
 import type { ComponentProps } from 'react';
 import { useState } from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 function CircleLogoContainer({ className, ...props }: ComponentProps<'div'>) {
     return (
diff --git a/apps/demo-wallet/src/core/components/ui/circle-logo/index.ts b/apps/demo-wallet/src/core/components/ui/circle-logo/index.ts
new file mode 100644
index 000000000..f0cc01254
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/circle-logo/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './circle-logo';
diff --git a/apps/demo-wallet/src/core/components/ui/dialog/dialog.tsx b/apps/demo-wallet/src/core/components/ui/dialog/dialog.tsx
new file mode 100644
index 000000000..6a608a9a2
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/dialog/dialog.tsx
@@ -0,0 +1,98 @@
+/**
+ * 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 * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+import { cn } from '@/core/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            className,
+        )}
+        {...props}
+    />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </DialogPrimitive.Content>
+    </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+        {...props}
+    />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogTrigger,
+    DialogClose,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+};
diff --git a/apps/demo-wallet/src/core/components/ui/dialog/index.ts b/apps/demo-wallet/src/core/components/ui/dialog/index.ts
new file mode 100644
index 000000000..5be87f197
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/dialog/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './dialog';
diff --git a/apps/demo-wallet/src/core/components/ui/drawer/drawer.tsx b/apps/demo-wallet/src/core/components/ui/drawer/drawer.tsx
new file mode 100644
index 000000000..5e97f27ea
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/drawer/drawer.tsx
@@ -0,0 +1,94 @@
+/**
+ * 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 * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '@/core/lib/utils';
+
+const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+    <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DrawerPrimitive.Overlay ref={ref} className={cn('fixed inset-0 z-50 bg-black/80', className)} {...props} />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DrawerPortal>
+        <DrawerOverlay />
+        <DrawerPrimitive.Content
+            ref={ref}
+            className={cn(
+                'fixed inset-x-0 bottom-0 z-50 mt-24 pt-4 flex h-auto flex-col rounded-t-[10px] border bg-background',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </DrawerPrimitive.Content>
+    </DrawerPortal>
+));
+DrawerContent.displayName = 'DrawerContent';
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+const DrawerTitle = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DrawerPrimitive.Title
+        ref={ref}
+        className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+        {...props}
+    />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+    React.ElementRef<typeof DrawerPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DrawerPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+    Drawer,
+    DrawerPortal,
+    DrawerOverlay,
+    DrawerTrigger,
+    DrawerClose,
+    DrawerContent,
+    DrawerHeader,
+    DrawerFooter,
+    DrawerTitle,
+    DrawerDescription,
+};
diff --git a/apps/demo-wallet/src/core/components/ui/drawer/index.ts b/apps/demo-wallet/src/core/components/ui/drawer/index.ts
new file mode 100644
index 000000000..34faa783e
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/drawer/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './drawer';
diff --git a/apps/demo-wallet/src/core/components/ui/fallback-image/fallback-image.tsx b/apps/demo-wallet/src/core/components/ui/fallback-image/fallback-image.tsx
new file mode 100644
index 000000000..2894f11e7
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/fallback-image/fallback-image.tsx
@@ -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 React, { useLayoutEffect, useRef, useState } from 'react';
+
+type ImageStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
+const toList = (src: string | string[] | undefined): string[] =>
+    (Array.isArray(src) ? src : src ? [src] : []).filter((url): url is string => Boolean(url));
+
+const useImageStatus = (src: string | undefined): ImageStatus => {
+    const imageRef = useRef<HTMLImageElement | null>(null);
+
+    const getImage = (): HTMLImageElement | null => {
+        if (typeof window === 'undefined') return null;
+        if (!imageRef.current) imageRef.current = new window.Image();
+        return imageRef.current;
+    };
+
+    const resolve = (): ImageStatus => {
+        const image = getImage();
+        if (!image || !src) return 'idle';
+        if (image.src !== src) image.src = src;
+        return image.complete && image.naturalWidth > 0 ? 'loaded' : 'loading';
+    };
+
+    const [status, setStatus] = useState<ImageStatus>(resolve);
+
+    useLayoutEffect(() => {
+        setStatus(resolve());
+        const image = getImage();
+        if (!image) return;
+        const onLoad = () => setStatus('loaded');
+        const onError = () => setStatus('error');
+        image.addEventListener('load', onLoad);
+        image.addEventListener('error', onError);
+        return () => {
+            image.removeEventListener('load', onLoad);
+            image.removeEventListener('error', onError);
+        };
+    }, [src]);
+
+    return status;
+};
+
+interface FallbackImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+    /** One or more candidate URLs, tried in order until one loads. */
+    src: string | string[] | undefined;
+    /** Rendered while loading or when every candidate fails to load. */
+    fallback?: React.ReactNode;
+}
+
+/**
+ * `<img>` that walks a list of candidate URLs, showing the first that loads and
+ * falling back to the next on error (404 / 403 / CSP / network). Renders
+ * `fallback` until one succeeds.
+ */
+export const FallbackImage: React.FC<FallbackImageProps> = ({ src, fallback = null, alt = '', ...props }) => {
+    const sources = toList(src);
+    const key = sources.join(' ');
+
+    const [index, setIndex] = useState(0);
+    useLayoutEffect(() => setIndex(0), [key]);
+
+    const current = sources[index];
+    const status = useImageStatus(current);
+
+    useLayoutEffect(() => {
+        if (status === 'error' && index < sources.length - 1) {
+            setIndex((value) => value + 1);
+        }
+    }, [status, index, sources.length]);
+
+    if (status === 'loaded' && current) {
+        return <img src={current} alt={alt} {...props} />;
+    }
+    return <>{fallback}</>;
+};
diff --git a/apps/demo-wallet/src/core/components/ui/fallback-image/index.ts b/apps/demo-wallet/src/core/components/ui/fallback-image/index.ts
new file mode 100644
index 000000000..3a1514afe
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/fallback-image/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './fallback-image';
diff --git a/apps/demo-wallet/src/components/HoldToSignButton.tsx b/apps/demo-wallet/src/core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx
similarity index 92%
rename from apps/demo-wallet/src/components/HoldToSignButton.tsx
rename to apps/demo-wallet/src/core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx
index 85bb3149d..8bfa2c75e 100644
--- a/apps/demo-wallet/src/components/HoldToSignButton.tsx
+++ b/apps/demo-wallet/src/core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx
@@ -11,17 +11,25 @@ import React, { useRef, useState, useCallback, useEffect } from 'react';
 interface HoldToSignButtonProps {
     onComplete: () => void;
     disabled?: boolean;
-    isLoading?: boolean;
+    loading?: boolean;
     holdDuration?: number; // Duration in milliseconds
     className?: string;
+    /** Label shown in the idle state (before holding). */
+    idleLabel?: string;
+    /** Label shown once the hold completes. */
+    completeLabel?: string;
+    testId?: string;
 }
 
 export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
     onComplete,
     disabled = false,
-    isLoading = false,
+    loading = false,
     holdDuration = 3000,
     className = '',
+    idleLabel = 'Hold to Sign',
+    completeLabel = 'Signed!',
+    testId,
 }) => {
     const [isHolding, setIsHolding] = useState(false);
     const [progress, setProgress] = useState(0);
@@ -43,7 +51,7 @@ export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
     }, []);
 
     const handleHoldStart = useCallback(() => {
-        if (disabled || isLoading || isComplete) return;
+        if (disabled || loading || isComplete) return;
 
         setIsHolding(true);
         setShowRipples(true);
@@ -74,7 +82,7 @@ export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
                 setProgress(0);
             }, 1000);
         }, holdDuration);
-    }, [disabled, isLoading, isComplete, holdDuration, onComplete, clearTimers]);
+    }, [disabled, loading, isComplete, holdDuration, onComplete, clearTimers]);
 
     const handleHoldEnd = useCallback(() => {
         if (isComplete) return;
@@ -110,7 +118,7 @@ export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
     const buttonClasses = `
         relative flex-1 px-4 py-3 rounded-lg font-medium text-white
         overflow-hidden transition-all duration-300 select-none
-        ${disabled || isLoading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+        ${disabled || loading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
         ${isComplete ? 'bg-green-600' : isHolding ? 'bg-blue-700 scale-[0.98]' : 'bg-blue-600 hover:bg-blue-700'}
         ${className}
     `;
@@ -118,13 +126,14 @@ export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
     return (
         <button
             className={buttonClasses}
+            data-testid={testId}
             onMouseDown={handleHoldStart}
             onMouseUp={handleHoldEnd}
             onMouseLeave={handleHoldEnd}
             onTouchStart={handleHoldStart}
             onTouchEnd={handleHoldEnd}
             onTouchCancel={handleHoldEnd}
-            disabled={disabled || isLoading}
+            disabled={disabled || loading}
         >
             {/* Ripple effects */}
             {showRipples && !isComplete && (
@@ -176,7 +185,7 @@ export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
 
             {/* Button content */}
             <div className="relative z-10 flex items-center justify-center space-x-2">
-                {isLoading ? (
+                {loading ? (
                     <>
                         <svg className="animate-spin h-5 w-5 flex-shrink-0" viewBox="0 0 24 24">
                             <circle
@@ -201,7 +210,7 @@ export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
                         <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                         </svg>
-                        <span className="inline-block min-w-[110px] text-center">Signed!</span>
+                        <span className="inline-block min-w-[110px] text-center">{completeLabel}</span>
                     </>
                 ) : (
                     <>
@@ -221,7 +230,7 @@ export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
                         <span className="font-semibold inline-block min-w-[110px] text-center">
                             {isHolding
                                 ? `Hold (${Math.ceil((holdDuration - (progress * holdDuration) / 100) / 1000)}s)`
-                                : 'Hold to Sign'}
+                                : idleLabel}
                         </span>
                     </>
                 )}
diff --git a/apps/demo-wallet/src/core/components/ui/hold-to-sign-button/index.ts b/apps/demo-wallet/src/core/components/ui/hold-to-sign-button/index.ts
new file mode 100644
index 000000000..968970a56
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/hold-to-sign-button/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './hold-to-sign-button';
diff --git a/apps/demo-wallet/src/core/components/ui/icons/icons.tsx b/apps/demo-wallet/src/core/components/ui/icons/icons.tsx
new file mode 100644
index 000000000..172002f38
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/icons/icons.tsx
@@ -0,0 +1,90 @@
+/**
+ * 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 React from 'react';
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+export const ScanIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M8 2H6C3.79086 2 2 3.79086 2 6V8M16 2H18C20.2091 2 22 3.79086 22 6V8M2 16V18C2 20.2091 3.79086 22 6 22H8M16 22H18C20.2091 22 22 20.2091 22 18V16"
+            stroke="#14181F"
+            strokeWidth={2}
+            strokeLinecap="round"
+        />
+    </svg>
+);
+
+export const SettingsIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M20.5566 9.5C21.4498 11.047 21.4498 12.953 20.5566 14.5L18.4434 18.1603C17.5502 19.7073 15.8996 20.6603 14.1132 20.6603L9.88675 20.6603C8.10042 20.6603 6.44979 19.7073 5.55662 18.1603L3.44337 14.5C2.55021 12.953 2.55021 11.047 3.44338 9.5L5.55662 5.83974C6.44979 4.29274 8.10042 3.33974 9.88675 3.33974L14.1132 3.33975C15.8996 3.33975 17.5502 4.29274 18.4434 5.83975L20.5566 9.5Z"
+            stroke="currentColor"
+            strokeWidth={2}
+        />
+        <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth={2} />
+    </svg>
+);
+
+export const SwapIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M7 19V4M10.5 7.5L7 4L3.5 7.5"
+            stroke="#007AFF"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M17 5V20M20.5 16.5L17 20L13.5 16.5"
+            stroke="#007AFF"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
+
+export const SendIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M7 12L4.76346 18.1505C4.1393 19.8669 5.95318 21.4531 7.57106 20.6056L18.9266 14.6575C21.0706 13.5345 21.0706 10.4655 18.9266 9.34251L7.57106 3.39437C5.95318 2.5469 4.1393 4.13307 4.76346 5.84951L7 12ZM7 12L12 12"
+            stroke="#007AFF"
+            strokeWidth={2}
+            strokeLinecap="round"
+        />
+    </svg>
+);
+
+export const ReceiveIcon: React.FC<IconProps> = (props) => (
+    <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="#007AFF"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 8v8" />
+        <path d="m8 12 4 4 4-4" />
+    </svg>
+);
+
+export const StakeIcon: React.FC<IconProps> = (props) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <circle cx="12" cy="12" r="10" stroke="#007AFF" stroke-width="2" />
+        <path
+            d="M12.0694 19C11.8133 19 11.6015 18.9113 11.4341 18.734C11.2666 18.5665 11.1829 18.3597 11.1829 18.1134V16.9017L11.5818 17.2564C10.9021 17.2366 10.311 17.1529 9.80864 17.0052C9.30624 16.8574 8.88757 16.6948 8.55264 16.5175C8.33592 16.4092 8.18323 16.2614 8.09457 16.0742C8.01576 15.8871 7.98621 15.695 8.00591 15.498C8.02561 15.2911 8.09457 15.1138 8.21278 14.966C8.33099 14.8084 8.48368 14.7049 8.67085 14.6557C8.86787 14.6064 9.08952 14.6458 9.33579 14.7739C9.57222 14.902 9.90222 15.035 10.3258 15.1729C10.7494 15.3009 11.2666 15.365 11.8773 15.365C12.3305 15.365 12.695 15.3157 12.9708 15.2172C13.2466 15.1088 13.4437 14.9709 13.5619 14.8035C13.6899 14.636 13.754 14.4439 13.754 14.2272C13.754 14.0499 13.7096 13.8922 13.621 13.7543C13.5422 13.6164 13.3993 13.4982 13.1925 13.3997C12.9954 13.2913 12.7295 13.2027 12.3945 13.1337L10.7691 12.7791C9.86282 12.5821 9.18803 12.2471 8.74473 11.7743C8.30144 11.2916 8.07979 10.671 8.07979 9.91245C8.07979 9.32139 8.22263 8.79436 8.50831 8.33136C8.80384 7.86837 9.20773 7.49403 9.71998 7.20835C10.2421 6.92267 10.8528 6.75028 11.5523 6.69118L11.1829 6.9276V5.80459C11.1829 5.55831 11.2666 5.35144 11.4341 5.18398C11.6015 5.00666 11.8133 4.918 12.0694 4.918C12.3157 4.918 12.5226 5.00666 12.6901 5.18398C12.8575 5.35144 12.9413 5.55831 12.9413 5.80459V6.9276L12.5718 6.66162C12.9757 6.68132 13.4092 6.76013 13.8722 6.89805C14.345 7.02611 14.7538 7.21328 15.0986 7.45955C15.2858 7.57776 15.4138 7.72553 15.4828 7.90285C15.5616 8.08016 15.5813 8.25748 15.5419 8.4348C15.5124 8.61212 15.4385 8.76973 15.3203 8.90765C15.2021 9.03571 15.0444 9.11944 14.8474 9.15885C14.6602 9.1884 14.4386 9.13914 14.1825 9.01108C13.9165 8.88302 13.6259 8.77466 13.3107 8.686C12.9954 8.59734 12.6063 8.55301 12.1433 8.55301C11.5621 8.55301 11.109 8.67122 10.7839 8.90765C10.4687 9.14407 10.311 9.44945 10.311 9.82379C10.311 10.0996 10.4046 10.3213 10.5918 10.4887C10.7888 10.6562 11.1287 10.7941 11.6114 10.9025L13.2516 11.2571C14.1874 11.464 14.877 11.7989 15.3203 12.2619C15.7734 12.7249 16 13.3258 16 14.0646C16 14.6458 15.8571 15.163 15.5715 15.6162C15.2858 16.0595 14.8917 16.419 14.3893 16.6948C13.8869 16.9707 13.3008 17.148 12.6309 17.2268L12.9413 16.8869V18.1134C12.9413 18.3597 12.8575 18.5665 12.6901 18.734C12.5324 18.9113 12.3256 19 12.0694 19Z"
+            fill="#007AFF"
+        />
+    </svg>
+);
diff --git a/apps/demo-wallet/src/core/components/ui/icons/index.ts b/apps/demo-wallet/src/core/components/ui/icons/index.ts
new file mode 100644
index 000000000..fe902a01e
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/icons/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './icons';
diff --git a/apps/demo-wallet/src/core/components/ui/input/index.ts b/apps/demo-wallet/src/core/components/ui/input/index.ts
new file mode 100644
index 000000000..240caccc5
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/input/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './input';
diff --git a/apps/demo-wallet/src/core/components/ui/input/input.tsx b/apps/demo-wallet/src/core/components/ui/input/input.tsx
new file mode 100644
index 000000000..243c4f85c
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/input/input.tsx
@@ -0,0 +1,198 @@
+/**
+ * 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 { createContext, useContext, useMemo } from 'react';
+import type { FC, ReactNode, ComponentProps, ChangeEvent } from 'react';
+
+import { useInputResize } from './use-input-resize';
+import type { InputSize } from './use-input-resize';
+
+import { cn } from '@/core/lib/utils';
+
+type InputVariant = 'default' | 'unstyled';
+
+const SIZE_FONT: Record<InputSize, string> = {
+    s: 'text-sm',
+    m: 'text-base',
+    l: 'text-xl',
+};
+
+interface InputContextProps {
+    size: InputSize;
+    variant: InputVariant;
+    disabled?: boolean;
+    error?: boolean;
+    loading?: boolean;
+    resizable?: boolean;
+}
+
+const InputContext = createContext<InputContextProps | undefined>(undefined);
+
+const useInputContext = (): InputContextProps => {
+    const context = useContext(InputContext);
+    if (!context) {
+        throw new Error('Input components must be used within an Input.Container');
+    }
+    return context;
+};
+
+export interface InputContainerProps extends ComponentProps<'div'> {
+    size?: InputSize;
+    variant?: InputVariant;
+    disabled?: boolean;
+    error?: boolean;
+    loading?: boolean;
+    resizable?: boolean;
+    children: ReactNode;
+}
+
+const Container: FC<InputContainerProps> = ({
+    size = 'm',
+    variant = 'default',
+    disabled,
+    error,
+    loading,
+    resizable,
+    className,
+    children,
+    ...props
+}) => {
+    const contextValue = useMemo(
+        () => ({ size, variant, disabled, error, loading, resizable }),
+        [size, variant, disabled, error, loading, resizable],
+    );
+
+    return (
+        <InputContext.Provider value={contextValue}>
+            <div
+                className={cn('flex w-full flex-col gap-1', disabled && 'pointer-events-none opacity-50', className)}
+                {...props}
+            >
+                {children}
+            </div>
+        </InputContext.Provider>
+    );
+};
+
+const Header: FC<ComponentProps<'div'>> = ({ className, children, ...props }) => (
+    <div className={cn('flex items-center justify-between px-1', className)} {...props}>
+        {children}
+    </div>
+);
+
+const Title: FC<ComponentProps<'span'>> = ({ className, children, ...props }) => (
+    <span className={cn('text-sm font-medium text-gray-500', className)} {...props}>
+        {children}
+    </span>
+);
+
+const Field: FC<ComponentProps<'div'>> = ({ className, children, ...props }) => {
+    const { variant, error } = useInputContext();
+    return (
+        <div
+            className={cn(
+                'relative flex items-center gap-2 overflow-hidden transition-colors',
+                variant === 'default' &&
+                    'rounded-2xl border-2 border-transparent bg-gray-100 p-3.5 focus-within:border-blue-500',
+                variant === 'default' && error && 'border-red-500',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+export interface InputSlotProps extends ComponentProps<'div'> {
+    side?: 'left' | 'right';
+}
+
+const Slot: FC<InputSlotProps> = ({ className, children, ...props }) => (
+    <div className={cn('flex flex-shrink-0 items-center justify-center', className)} {...props}>
+        {children}
+    </div>
+);
+
+const InputControl: FC<ComponentProps<'input'>> = ({ className, disabled: propsDisabled, onChange, ...props }) => {
+    const { size, disabled: contextDisabled, loading, resizable } = useInputContext();
+    const disabled = propsDisabled || contextDisabled;
+
+    const { inputRef, measureMaxRef, measureMinRef, resizeStyle, adjustSize } = useInputResize({
+        resizable,
+        contextSize: size,
+        value: props.value,
+    });
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        onChange?.(e);
+        adjustSize();
+    };
+
+    const text = String(props.value ?? props.defaultValue ?? '');
+
+    if (loading) {
+        return (
+            <div className={cn('flex-1', SIZE_FONT[size])}>
+                <div className="h-[1em] w-16 animate-pulse rounded bg-gray-200" />
+            </div>
+        );
+    }
+
+    return (
+        <>
+            {resizable && (
+                <>
+                    <span
+                        ref={measureMaxRef}
+                        className={cn('invisible absolute whitespace-pre', SIZE_FONT[size])}
+                        aria-hidden
+                    >
+                        {text}
+                    </span>
+                    <span
+                        ref={measureMinRef}
+                        className={cn('invisible absolute whitespace-pre', SIZE_FONT.s)}
+                        aria-hidden
+                    />
+                </>
+            )}
+            <input
+                className={cn(
+                    'w-full min-w-0 flex-1 border-0 bg-transparent p-0 text-gray-900 outline-none placeholder:text-gray-400',
+                    SIZE_FONT[size],
+                    className,
+                )}
+                style={resizeStyle}
+                disabled={disabled}
+                {...props}
+                ref={inputRef}
+                onChange={handleChange}
+            />
+        </>
+    );
+};
+
+const Caption: FC<ComponentProps<'span'>> = ({ className, children, ...props }) => {
+    const { error } = useInputContext();
+    return (
+        <span className={cn('px-1 text-xs', error ? 'text-red-500' : 'text-gray-500', className)} {...props}>
+            {children}
+        </span>
+    );
+};
+
+export const Input = Object.assign(Container, {
+    Container,
+    Header,
+    Title,
+    Field,
+    Slot,
+    Input: InputControl,
+    Caption,
+});
diff --git a/apps/demo-wallet/src/core/components/ui/input/use-input-resize.ts b/apps/demo-wallet/src/core/components/ui/input/use-input-resize.ts
new file mode 100644
index 000000000..7490c6b60
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/input/use-input-resize.ts
@@ -0,0 +1,101 @@
+/**
+ * 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 { useRef, useState, useLayoutEffect } from 'react';
+import type { CSSProperties, RefObject } from 'react';
+
+export type InputSize = 's' | 'm' | 'l';
+
+interface ResizeMetrics {
+    maxFontSize: number;
+    minFontSize: number;
+    lineHeightRatio: number;
+    parentFontSize: number;
+}
+
+const readResizeMetrics = (
+    maxSpan: HTMLSpanElement,
+    minSpan: HTMLSpanElement,
+    input: HTMLInputElement,
+): ResizeMetrics => {
+    const maxStyle = getComputedStyle(maxSpan);
+    const maxFontSize = parseFloat(maxStyle.fontSize);
+    const lineHeightRatio = parseFloat(maxStyle.lineHeight) / maxFontSize;
+
+    return {
+        maxFontSize,
+        minFontSize: parseFloat(getComputedStyle(minSpan).fontSize),
+        lineHeightRatio,
+        parentFontSize: parseFloat(getComputedStyle(input.parentElement!).fontSize),
+    };
+};
+
+interface UseInputResizeOptions {
+    resizable?: boolean;
+    contextSize: InputSize;
+    value?: string | number | readonly string[];
+}
+
+interface UseInputResizeResult {
+    inputRef: RefObject<HTMLInputElement | null>;
+    measureMaxRef: RefObject<HTMLSpanElement | null>;
+    measureMinRef: RefObject<HTMLSpanElement | null>;
+    resizeStyle: CSSProperties | undefined;
+    adjustSize: () => void;
+}
+
+/**
+ * Scales an input's font size down to fit its width (down to the `s`-size font),
+ * mirroring the appkit-react input. Measures the text at the max font via a hidden
+ * span and applies the resulting font-size inline.
+ */
+export const useInputResize = ({ resizable, contextSize, value }: UseInputResizeOptions): UseInputResizeResult => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const measureMaxRef = useRef<HTMLSpanElement>(null);
+    const measureMinRef = useRef<HTMLSpanElement>(null);
+    const [fontSizeEm, setFontSizeEm] = useState<number | undefined>(undefined);
+    const lineHeightRatioRef = useRef<number>(1.25);
+
+    const adjustSize = () => {
+        if (!resizable || !inputRef.current || !measureMaxRef.current || !measureMinRef.current) return;
+        const availableWidth = inputRef.current.clientWidth;
+        if (availableWidth === 0) return;
+
+        const textWidth = measureMaxRef.current.offsetWidth;
+        const { maxFontSize, minFontSize, lineHeightRatio, parentFontSize } = readResizeMetrics(
+            measureMaxRef.current,
+            measureMinRef.current,
+            inputRef.current,
+        );
+
+        const ratio = textWidth > 0 ? availableWidth / textWidth : 1;
+        const scaledPx = Math.min(maxFontSize, Math.max(minFontSize, maxFontSize * ratio));
+        setFontSizeEm(scaledPx / parentFontSize);
+        lineHeightRatioRef.current = lineHeightRatio;
+    };
+
+    // Re-measure when the controlled value or context size changes.
+    useLayoutEffect(adjustSize, [resizable, contextSize, value]);
+
+    // Re-measure on container resize (observe the parent, not the input itself,
+    // to avoid a feedback loop when the font-size change triggers the observer).
+    useLayoutEffect(() => {
+        const parent = inputRef.current?.parentElement;
+        if (!resizable || !parent) return;
+        const observer = new ResizeObserver(adjustSize);
+        observer.observe(parent);
+        return () => observer.disconnect();
+    }, [resizable, contextSize]);
+
+    const resizeStyle: CSSProperties | undefined =
+        resizable && fontSizeEm !== undefined
+            ? { fontSize: `${fontSizeEm}em`, lineHeight: lineHeightRatioRef.current }
+            : undefined;
+
+    return { inputRef, measureMaxRef, measureMinRef, resizeStyle, adjustSize };
+};
diff --git a/apps/demo-wallet/src/core/components/ui/loader-circle/index.ts b/apps/demo-wallet/src/core/components/ui/loader-circle/index.ts
new file mode 100644
index 000000000..1e75a4d69
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/loader-circle/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './loader-circle';
diff --git a/apps/demo-wallet/src/components/LoaderCircle.tsx b/apps/demo-wallet/src/core/components/ui/loader-circle/loader-circle.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/LoaderCircle.tsx
rename to apps/demo-wallet/src/core/components/ui/loader-circle/loader-circle.tsx
diff --git a/apps/demo-wallet/src/core/components/ui/modal/index.ts b/apps/demo-wallet/src/core/components/ui/modal/index.ts
new file mode 100644
index 000000000..dfee28f4f
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/modal/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { Modal, ModalContainer, ModalHeader, ModalTitle, ModalBody, ModalFooter } from './modal';
+export type { ModalContainerProps } from './modal';
diff --git a/apps/demo-wallet/src/core/components/ui/modal/modal.tsx b/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
new file mode 100644
index 000000000..3a791db62
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
@@ -0,0 +1,119 @@
+/**
+ * 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 React from 'react';
+import type { ComponentProps } from 'react';
+import { ChevronLeft, X } from 'lucide-react';
+
+import { Dialog, DialogContent, DialogTitle } from '../dialog';
+import { Drawer, DrawerContent, DrawerTitle } from '../drawer';
+
+import { cn } from '@/core/lib/utils';
+import { useIsMobile } from '@/core/hooks/use-media-query';
+
+export interface ModalContainerProps extends ComponentProps<'div'> {
+    isOpened: boolean;
+    onOpenChange: (value: boolean) => void;
+    /** When false, the modal can't be dismissed by backdrop / Esc / swipe — only via its own actions. */
+    dismissible?: boolean;
+}
+
+export const ModalContainer: React.FC<ModalContainerProps> = ({
+    isOpened,
+    onOpenChange,
+    dismissible = true,
+    children,
+    className,
+    ...props
+}) => {
+    const isMobile = useIsMobile();
+
+    if (isMobile) {
+        return (
+            <Drawer open={isOpened} onOpenChange={onOpenChange} dismissible={dismissible}>
+                <DrawerContent className={cn('max-w-md mx-auto', className)} aria-describedby={undefined} {...props}>
+                    {children}
+                </DrawerContent>
+            </Drawer>
+        );
+    }
+
+    return (
+        <Dialog open={isOpened} onOpenChange={onOpenChange}>
+            <DialogContent
+                className={cn('max-w-md rounded-2xl p-0 gap-0', className)}
+                aria-describedby={undefined}
+                onInteractOutside={dismissible ? undefined : (e) => e.preventDefault()}
+                onEscapeKeyDown={dismissible ? undefined : (e) => e.preventDefault()}
+                {...props}
+            >
+                {children}
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+interface ModalHeaderProps extends ComponentProps<'div'> {
+    onClose?: () => void;
+    /** Renders a round back button (same style as nft/assets ScreenHeader) before the title. */
+    onBack?: () => void;
+}
+
+export const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, onBack, children, className, ...props }) => (
+    <div className={cn('flex items-center justify-between px-4 pt-3 pb-5 md:pt-5', className)} {...props}>
+        <div className="flex items-center gap-2 min-w-0">
+            {onBack && (
+                <button
+                    type="button"
+                    onClick={onBack}
+                    className="w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors flex-shrink-0"
+                    aria-label="Back"
+                >
+                    <ChevronLeft className="w-4 h-4" strokeWidth={2.5} />
+                </button>
+            )}
+            {children}
+        </div>
+        {onClose && (
+            <button
+                type="button"
+                onClick={onClose}
+                className="w-9 h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors flex-shrink-0"
+                aria-label="Close"
+            >
+                <X className="w-4 h-4" strokeWidth={2.5} />
+            </button>
+        )}
+    </div>
+);
+
+export const ModalTitle: React.FC<ComponentProps<'h2'>> = ({ className, ...props }) => {
+    const isMobile = useIsMobile();
+    const Wrapper = isMobile ? DrawerTitle : DialogTitle;
+    return <Wrapper className={cn('text-xl font-bold text-gray-900 truncate', className)} {...props} />;
+};
+
+export const ModalBody: React.FC<ComponentProps<'div'>> = ({ children, className, ...props }) => (
+    <div className={cn('flex flex-col px-4 pb-6', className)} {...props}>
+        {children}
+    </div>
+);
+
+export const ModalFooter: React.FC<ComponentProps<'div'>> = ({ children, className, ...props }) => (
+    <div className={cn('flex flex-col gap-2 px-4 pb-6', className)} {...props}>
+        {children}
+    </div>
+);
+
+export const Modal = {
+    Container: ModalContainer,
+    Header: ModalHeader,
+    Title: ModalTitle,
+    Body: ModalBody,
+    Footer: ModalFooter,
+};
diff --git a/apps/demo-wallet/src/core/components/ui/option-row/index.ts b/apps/demo-wallet/src/core/components/ui/option-row/index.ts
new file mode 100644
index 000000000..691e920f0
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/option-row/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { OptionRow } from './option-row';
+export type { OptionRowProps } from './option-row';
diff --git a/apps/demo-wallet/src/core/components/ui/option-row/option-row.tsx b/apps/demo-wallet/src/core/components/ui/option-row/option-row.tsx
new file mode 100644
index 000000000..7edbe5f72
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/option-row/option-row.tsx
@@ -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 React from 'react';
+import { ChevronRight, Loader2 } from 'lucide-react';
+
+export interface OptionRowProps {
+    icon: React.ReactNode;
+    title: string;
+    subtitle: string;
+    loading?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    testId?: string;
+}
+
+/** Selectable list row: leading icon, title/subtitle, trailing chevron (or spinner). */
+export const OptionRow: React.FC<OptionRowProps> = ({
+    icon,
+    title,
+    subtitle,
+    loading = false,
+    disabled = false,
+    onClick,
+    testId,
+}) => (
+    <button
+        type="button"
+        data-testid={testId}
+        onClick={onClick}
+        disabled={disabled}
+        className="w-full flex items-center gap-3 bg-[#F7F8FA] rounded-2xl px-4 py-4 text-left transition-transform hover:scale-[1.01] active:scale-[0.99] disabled:opacity-60 disabled:hover:scale-100 disabled:active:scale-100"
+    >
+        <span className="flex-shrink-0 flex items-center justify-center text-gray-900">{icon}</span>
+        <div className="flex-1 min-w-0">
+            <div className="text-base font-bold text-gray-900 truncate">{title}</div>
+            <div className="text-sm text-gray-400 truncate">{subtitle}</div>
+        </div>
+        {loading ? (
+            <Loader2 className="w-5 h-5 text-gray-400 flex-shrink-0 animate-spin" />
+        ) : (
+            <ChevronRight className="w-5 h-5 text-gray-400 flex-shrink-0" />
+        )}
+    </button>
+);
diff --git a/apps/demo-wallet/src/core/components/ui/popover/index.ts b/apps/demo-wallet/src/core/components/ui/popover/index.ts
new file mode 100644
index 000000000..a93388445
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/popover/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './popover';
diff --git a/apps/demo-wallet/src/core/components/ui/popover/popover.tsx b/apps/demo-wallet/src/core/components/ui/popover/popover.tsx
new file mode 100644
index 000000000..f1680f421
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/popover/popover.tsx
@@ -0,0 +1,39 @@
+/**
+ * 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 * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/core/lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+    React.ElementRef<typeof PopoverPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+    <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+            ref={ref}
+            align={align}
+            sideOffset={sideOffset}
+            className={cn(
+                'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]',
+                className,
+            )}
+            {...props}
+        />
+    </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/apps/demo-wallet/src/core/components/ui/segmented/index.ts b/apps/demo-wallet/src/core/components/ui/segmented/index.ts
new file mode 100644
index 000000000..9fc13cf7d
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/segmented/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { Segmented } from './segmented';
+export type { SegmentedOption, SegmentedProps } from './segmented';
diff --git a/apps/demo-wallet/src/core/components/ui/segmented/segmented.tsx b/apps/demo-wallet/src/core/components/ui/segmented/segmented.tsx
new file mode 100644
index 000000000..36d4a2eb8
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/segmented/segmented.tsx
@@ -0,0 +1,45 @@
+/**
+ * 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 { cn } from '@/core/lib/utils';
+
+export interface SegmentedOption<T extends string> {
+    value: T;
+    label: string;
+    testId?: string;
+}
+
+export interface SegmentedProps<T extends string> {
+    value: T;
+    onChange: (value: T) => void;
+    options: SegmentedOption<T>[];
+    className?: string;
+}
+
+/** Compact single-select segmented control (e.g. network / wallet version pickers). */
+export function Segmented<T extends string>({ value, onChange, options, className }: SegmentedProps<T>) {
+    return (
+        <div className={cn('flex rounded-lg border border-gray-200 overflow-hidden', className)}>
+            {options.map((option, index) => (
+                <button
+                    key={option.value}
+                    type="button"
+                    data-testid={option.testId}
+                    onClick={() => onChange(option.value)}
+                    className={cn(
+                        'px-3 py-1.5 text-xs font-medium transition-colors',
+                        index > 0 && 'border-l border-gray-200',
+                        value === option.value ? 'bg-blue-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50',
+                    )}
+                >
+                    {option.label}
+                </button>
+            ))}
+        </div>
+    );
+}
diff --git a/apps/demo-wallet/src/core/components/ui/select/index.ts b/apps/demo-wallet/src/core/components/ui/select/index.ts
new file mode 100644
index 000000000..184b41312
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/select/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './select';
diff --git a/apps/demo-wallet/src/core/components/ui/select/select.tsx b/apps/demo-wallet/src/core/components/ui/select/select.tsx
new file mode 100644
index 000000000..1f5905646
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/select/select.tsx
@@ -0,0 +1,149 @@
+/**
+ * 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 * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '@/core/lib/utils';
+
+function Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {
+    return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {
+    return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {
+    return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+    return (
+        <SelectPrimitive.Trigger
+            data-slot="select-trigger"
+            className={cn(
+                'flex w-fit items-center justify-between gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-900 whitespace-nowrap transition-colors outline-none select-none hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-gray-400 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <SelectPrimitive.Icon asChild>
+                <ChevronDown className="h-3.5 w-3.5 text-gray-400" />
+            </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+    );
+}
+
+function SelectContent({
+    className,
+    children,
+    position = 'popper',
+    sideOffset = 4,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+    return (
+        <SelectPrimitive.Portal>
+            <SelectPrimitive.Content
+                data-slot="select-content"
+                position={position}
+                sideOffset={sideOffset}
+                className={cn(
+                    'relative z-50 max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-x-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white text-gray-900 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95',
+                    position === 'popper' &&
+                        'data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1',
+                    className,
+                )}
+                {...props}
+            >
+                <SelectScrollUpButton />
+                <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
+                <SelectScrollDownButton />
+            </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+    );
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+    return (
+        <SelectPrimitive.Label
+            data-slot="select-label"
+            className={cn('px-2 py-1 text-[11px] font-medium text-gray-400', className)}
+            {...props}
+        />
+    );
+}
+
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+    return (
+        <SelectPrimitive.Item
+            data-slot="select-item"
+            className={cn(
+                'relative flex w-full cursor-pointer items-center gap-1.5 rounded-md py-1.5 pr-8 pl-2 text-xs text-gray-900 outline-none select-none focus:bg-gray-100 data-[highlighted]:bg-gray-100 data-[state=checked]:font-semibold data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                className,
+            )}
+            {...props}
+        >
+            <span className="pointer-events-none absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+                <SelectPrimitive.ItemIndicator>
+                    <Check className="h-3.5 w-3.5 text-blue-500" />
+                </SelectPrimitive.ItemIndicator>
+            </span>
+            <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        </SelectPrimitive.Item>
+    );
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+    return (
+        <SelectPrimitive.Separator
+            data-slot="select-separator"
+            className={cn('pointer-events-none -mx-1 my-1 h-px bg-gray-200', className)}
+            {...props}
+        />
+    );
+}
+
+function SelectScrollUpButton(props: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+    return (
+        <SelectPrimitive.ScrollUpButton
+            data-slot="select-scroll-up-button"
+            className="flex cursor-default items-center justify-center bg-white py-1 text-gray-400"
+            {...props}
+        >
+            <ChevronUp className="h-3.5 w-3.5" />
+        </SelectPrimitive.ScrollUpButton>
+    );
+}
+
+function SelectScrollDownButton(props: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+    return (
+        <SelectPrimitive.ScrollDownButton
+            data-slot="select-scroll-down-button"
+            className="flex cursor-default items-center justify-center bg-white py-1 text-gray-400"
+            {...props}
+        >
+            <ChevronDown className="h-3.5 w-3.5" />
+        </SelectPrimitive.ScrollDownButton>
+    );
+}
+
+export {
+    Select,
+    SelectGroup,
+    SelectValue,
+    SelectTrigger,
+    SelectContent,
+    SelectLabel,
+    SelectItem,
+    SelectSeparator,
+    SelectScrollUpButton,
+    SelectScrollDownButton,
+};
diff --git a/apps/demo-wallet/src/core/components/ui/sonner/index.ts b/apps/demo-wallet/src/core/components/ui/sonner/index.ts
new file mode 100644
index 000000000..476d9ba73
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/sonner/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './sonner';
diff --git a/apps/demo-wallet/src/components/ui/sonner.tsx b/apps/demo-wallet/src/core/components/ui/sonner/sonner.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/ui/sonner.tsx
rename to apps/demo-wallet/src/core/components/ui/sonner/sonner.tsx
diff --git a/apps/demo-wallet/src/core/components/ui/success-card/index.ts b/apps/demo-wallet/src/core/components/ui/success-card/index.ts
new file mode 100644
index 000000000..118786ee6
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/success-card/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './success-card';
diff --git a/apps/demo-wallet/src/components/SuccessCard.tsx b/apps/demo-wallet/src/core/components/ui/success-card/success-card.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/SuccessCard.tsx
rename to apps/demo-wallet/src/core/components/ui/success-card/success-card.tsx
diff --git a/apps/demo-wallet/src/core/hooks/index.ts b/apps/demo-wallet/src/core/hooks/index.ts
new file mode 100644
index 000000000..5cef44e31
--- /dev/null
+++ b/apps/demo-wallet/src/core/hooks/index.ts
@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './use-count-up';
+export * from './use-media-query';
+export * from './use-paste-handler';
+export * from './use-ton-wallet';
+export * from './use-wallet-data-updater';
diff --git a/apps/demo-wallet/src/core/hooks/use-count-up.ts b/apps/demo-wallet/src/core/hooks/use-count-up.ts
new file mode 100644
index 000000000..e1a0206b3
--- /dev/null
+++ b/apps/demo-wallet/src/core/hooks/use-count-up.ts
@@ -0,0 +1,56 @@
+/**
+ * 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 { useEffect, useRef, useState } from 'react';
+
+/** Ease-out cubic for smooth deceleration at the end. */
+const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3);
+
+/**
+ * Animate a number from its previous value to `target` (count-up / odometer
+ * roll). Returns the current animated value, updated each frame.
+ */
+export const useCountUp = (target: number, durationMs = 600): number => {
+    const [value, setValue] = useState(target);
+    const fromRef = useRef(target);
+    const rafRef = useRef<number | null>(null);
+
+    useEffect(() => {
+        const start = fromRef.current;
+        const end = target;
+
+        if (Math.abs(start - end) < 1e-9) {
+            fromRef.current = end;
+            setValue(end);
+            return;
+        }
+
+        const startTime = performance.now();
+        const tick = (now: number) => {
+            const progress = Math.min((now - startTime) / durationMs, 1);
+            const current = start + (end - start) * easeOutCubic(progress);
+            fromRef.current = current;
+            setValue(current);
+            if (progress < 1) {
+                rafRef.current = requestAnimationFrame(tick);
+            } else {
+                fromRef.current = end;
+                setValue(end);
+            }
+        };
+
+        if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(tick);
+
+        return () => {
+            if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+        };
+    }, [target, durationMs]);
+
+    return value;
+};
diff --git a/apps/demo-wallet/src/core/hooks/use-media-query.ts b/apps/demo-wallet/src/core/hooks/use-media-query.ts
new file mode 100644
index 000000000..c4a03f489
--- /dev/null
+++ b/apps/demo-wallet/src/core/hooks/use-media-query.ts
@@ -0,0 +1,31 @@
+/**
+ * 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 { useEffect, useState } from 'react';
+
+export const useMediaQuery = (query: string): boolean => {
+    const [matches, setMatches] = useState<boolean>(() => {
+        if (typeof window === 'undefined') return false;
+        return window.matchMedia(query).matches;
+    });
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+        const mql = window.matchMedia(query);
+        const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
+        setMatches(mql.matches);
+        mql.addEventListener('change', handler);
+        return () => mql.removeEventListener('change', handler);
+    }, [query]);
+
+    return matches;
+};
+
+export const useIsDesktop = (): boolean => useMediaQuery('(min-width: 768px)');
+
+export const useIsMobile = (): boolean => useMediaQuery('(max-width: 767px)');
diff --git a/apps/demo-wallet/src/hooks/usePasteHandler.ts b/apps/demo-wallet/src/core/hooks/use-paste-handler.ts
similarity index 89%
rename from apps/demo-wallet/src/hooks/usePasteHandler.ts
rename to apps/demo-wallet/src/core/hooks/use-paste-handler.ts
index 32fb23445..208e3f879 100644
--- a/apps/demo-wallet/src/hooks/usePasteHandler.ts
+++ b/apps/demo-wallet/src/core/hooks/use-paste-handler.ts
@@ -8,11 +8,13 @@
 
 import { useEffect } from 'react';
 
-import { log } from '../utils/logger';
+import { log } from '@/core/lib/logger';
 
 // Hook to listen for paste events and handle TON Connect URLs
-export function usePasteHandler(handleTonConnectUrl: (url: string) => Promise<void>) {
+export function usePasteHandler(handleTonConnectUrl: (url: string) => Promise<void>, isDisabled: boolean) {
     useEffect(() => {
+        if (isDisabled) return;
+
         const handlePaste = async (event: ClipboardEvent) => {
             try {
                 const pastedText = event.clipboardData?.getData('text');
@@ -36,5 +38,5 @@ export function usePasteHandler(handleTonConnectUrl: (url: string) => Promise<vo
 
         document.addEventListener('paste', handlePaste);
         return () => document.removeEventListener('paste', handlePaste);
-    }, [handleTonConnectUrl]);
+    }, [handleTonConnectUrl, isDisabled]);
 }
diff --git a/apps/demo-wallet/src/hooks/useTonWallet.ts b/apps/demo-wallet/src/core/hooks/use-ton-wallet.ts
similarity index 98%
rename from apps/demo-wallet/src/hooks/useTonWallet.ts
rename to apps/demo-wallet/src/core/hooks/use-ton-wallet.ts
index e3b625138..086c9a019 100644
--- a/apps/demo-wallet/src/hooks/useTonWallet.ts
+++ b/apps/demo-wallet/src/core/hooks/use-ton-wallet.ts
@@ -11,7 +11,7 @@ import { CreateTonMnemonic } from '@ton/walletkit';
 import { useWallet, useAuth } from '@demo/wallet-core';
 import type { NetworkType } from '@demo/wallet-core';
 
-import { createComponentLogger } from '../utils/logger';
+import { createComponentLogger } from '@/core/lib/logger';
 
 // Create logger for TON wallet hook
 const log = createComponentLogger('useTonWallet');
diff --git a/apps/demo-wallet/src/hooks/useWalletDataUpdater.ts b/apps/demo-wallet/src/core/hooks/use-wallet-data-updater.ts
similarity index 64%
rename from apps/demo-wallet/src/hooks/useWalletDataUpdater.ts
rename to apps/demo-wallet/src/core/hooks/use-wallet-data-updater.ts
index 8ffcd770b..52b2b03a6 100644
--- a/apps/demo-wallet/src/hooks/useWalletDataUpdater.ts
+++ b/apps/demo-wallet/src/core/hooks/use-wallet-data-updater.ts
@@ -7,13 +7,14 @@
  */
 
 import { useEffect } from 'react';
-import { useAuth, useJettons, useNfts, useWallet } from '@demo/wallet-core';
+import { useAuth, useJettons, useNfts, useRates, useWallet } from '@demo/wallet-core';
 
 export const useWalletDataUpdater = () => {
     const { address, updateBalance, hasWallet, currentWallet, loadAllWallets } = useWallet();
     const { isUnlocked } = useAuth();
     const { loadUserJettons, clearJettons } = useJettons();
     const { loadUserNfts, clearNfts, refreshNfts } = useNfts();
+    const { loadRates, clearRates } = useRates();
 
     // Load wallets when hasWallet but currentWallet missing (e.g. refresh on /send before rehydration)
     useEffect(() => {
@@ -28,22 +29,31 @@ export const useWalletDataUpdater = () => {
 
         clearNfts();
         clearJettons();
-        void Promise.allSettled([updateBalance(), loadUserJettons(), loadUserNfts()]);
-    }, [address, updateBalance, loadUserJettons, loadUserNfts, clearNfts, clearJettons]);
+        clearRates();
 
-    // Periodic refresh: balances, jettons and NFTs sequentially to avoid overloading the backend
+        void (async () => {
+            await Promise.allSettled([updateBalance(), loadUserJettons(), loadUserNfts()]);
+            await loadRates();
+        })();
+    }, [address, updateBalance, loadUserJettons, loadUserNfts, loadRates, clearNfts, clearJettons, clearRates]);
+
+    // Periodic refresh — sequential to avoid overloading the backend (ported from main):
+    // balance → jettons → rates → NFTs, chained via setTimeout, every 20s. Rates self-throttle
+    // to 60s (see loadRates), so re-requesting on each tick is cheap.
     useEffect(() => {
         if (!address) return;
 
         let cancelled = false;
         let timeout: ReturnType<typeof setTimeout>;
-        const refreshInterval = 20_000;
+        const refreshInterval = 30_000;
 
         const tick = async () => {
             await updateBalance().catch(() => {});
             if (cancelled) return;
             await loadUserJettons().catch(() => {});
             if (cancelled) return;
+            await loadRates().catch(() => {});
+            if (cancelled) return;
             await refreshNfts().catch(() => {});
             if (cancelled) return;
             timeout = setTimeout(() => void tick(), refreshInterval);
@@ -55,5 +65,5 @@ export const useWalletDataUpdater = () => {
             cancelled = true;
             clearTimeout(timeout);
         };
-    }, [address, updateBalance, loadUserJettons, refreshNfts]);
+    }, [address, updateBalance, loadUserJettons, loadRates, refreshNfts]);
 };
diff --git a/apps/demo-wallet/src/lib/constants.ts b/apps/demo-wallet/src/core/lib/constants.ts
similarity index 100%
rename from apps/demo-wallet/src/lib/constants.ts
rename to apps/demo-wallet/src/core/lib/constants.ts
diff --git a/apps/demo-wallet/src/lib/env.ts b/apps/demo-wallet/src/core/lib/env.ts
similarity index 100%
rename from apps/demo-wallet/src/lib/env.ts
rename to apps/demo-wallet/src/core/lib/env.ts
diff --git a/apps/demo-wallet/src/lib/extension.ts b/apps/demo-wallet/src/core/lib/extension.ts
similarity index 94%
rename from apps/demo-wallet/src/lib/extension.ts
rename to apps/demo-wallet/src/core/lib/extension.ts
index 515d06ebf..b85b9aefd 100644
--- a/apps/demo-wallet/src/lib/extension.ts
+++ b/apps/demo-wallet/src/core/lib/extension.ts
@@ -10,7 +10,7 @@ import type { sendMessage } from '@truecarry/webext-bridge/background';
 
 import { JS_BRIDGE_MESSAGE_TO_CONTENT } from './constants';
 
-import { createComponentLogger } from '@/utils/logger';
+import { createComponentLogger } from '@/core/lib/logger';
 
 const log = createComponentLogger('Extension');
 
diff --git a/apps/demo-wallet/src/lib/extensionBackground.ts b/apps/demo-wallet/src/core/lib/extensionBackground.ts
similarity index 100%
rename from apps/demo-wallet/src/lib/extensionBackground.ts
rename to apps/demo-wallet/src/core/lib/extensionBackground.ts
diff --git a/apps/demo-wallet/src/lib/extensionPopup.ts b/apps/demo-wallet/src/core/lib/extensionPopup.ts
similarity index 100%
rename from apps/demo-wallet/src/lib/extensionPopup.ts
rename to apps/demo-wallet/src/core/lib/extensionPopup.ts
diff --git a/apps/demo-wallet/src/utils/isExtension.ts b/apps/demo-wallet/src/core/lib/is-extension.ts
similarity index 100%
rename from apps/demo-wallet/src/utils/isExtension.ts
rename to apps/demo-wallet/src/core/lib/is-extension.ts
diff --git a/apps/demo-wallet/src/utils/logger.ts b/apps/demo-wallet/src/core/lib/logger.ts
similarity index 97%
rename from apps/demo-wallet/src/utils/logger.ts
rename to apps/demo-wallet/src/core/lib/logger.ts
index 972b47b03..0aea68ba1 100644
--- a/apps/demo-wallet/src/utils/logger.ts
+++ b/apps/demo-wallet/src/core/lib/logger.ts
@@ -148,17 +148,17 @@ export default log;
 Usage examples:
 
 // Basic logging
-import log from './utils/logger';
+import log from '@/core/lib/logger';
 log.info('User connected wallet');
 log.error('Transaction failed', error);
 
 // Component-specific logging
-import { createComponentLogger } from './utils/logger';
+import { createComponentLogger } from '@/core/lib/logger';
 const componentLog = createComponentLogger('WalletDashboard');
 componentLog.debug('Component mounted');
 
 // Runtime log level control (useful for debugging)
-import { setLogLevel, getLogLevel } from './utils/logger';
+import { setLogLevel, getLogLevel } from '@/core/lib/logger';
 setLogLevel(5); // Enable debug logging
 
 // Log levels:
diff --git a/apps/demo-wallet/src/lib/utils.ts b/apps/demo-wallet/src/core/lib/utils.ts
similarity index 100%
rename from apps/demo-wallet/src/lib/utils.ts
rename to apps/demo-wallet/src/core/lib/utils.ts
diff --git a/apps/demo-wallet/src/utils/walletManifest.ts b/apps/demo-wallet/src/core/lib/wallet-manifest.ts
similarity index 97%
rename from apps/demo-wallet/src/utils/walletManifest.ts
rename to apps/demo-wallet/src/core/lib/wallet-manifest.ts
index 30bf1948d..00850b812 100644
--- a/apps/demo-wallet/src/utils/walletManifest.ts
+++ b/apps/demo-wallet/src/core/lib/wallet-manifest.ts
@@ -8,7 +8,7 @@
 
 import type { DeviceInfo, Feature, WalletInfo } from '@ton/walletkit';
 
-import { isExtension } from './isExtension';
+import { isExtension } from '@/core/lib/is-extension';
 
 export function getTonConnectWalletManifest(): WalletInfo {
     return {
diff --git a/apps/demo-wallet/src/components/AppRouter.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
similarity index 68%
rename from apps/demo-wallet/src/components/AppRouter.tsx
rename to apps/demo-wallet/src/core/routing/app-router.tsx
index 57020400a..61b4c905c 100644
--- a/apps/demo-wallet/src/components/AppRouter.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -10,23 +10,23 @@ import React from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { useWalletStore, useWallet } from '@demo/wallet-core';
 
-import { ProtectedRoute } from './ProtectedRoute';
-import { LoaderCircle } from './LoaderCircle';
-import {
-    SetupPassword,
-    UnlockWallet,
-    SetupWallet,
-    WalletDashboard,
-    SendTransaction,
-    TracePage,
-    TransactionDetail,
-    Swap,
-    Staking,
-    TonConnectRoute,
-} from '../pages';
+import { ProtectedRoute } from './protected-route';
 
-import { useWalletDataUpdater } from '@/hooks/useWalletDataUpdater';
-import { Button } from '@/components/Button';
+import { LoaderCircle } from '@/core/components/ui/loader-circle';
+import { WalletDashboard } from '@/features/dashboard';
+import { AssetsScreen } from '@/features/assets';
+import { NftsScreen } from '@/features/nft';
+import { TonConnectRoute } from '@/features/ton-connect';
+import { HistoryScreen } from '@/features/transactions';
+import { Staking } from '@/features/staking';
+import { Swap } from '@/features/swap';
+import { SendTransaction } from '@/features/send';
+import { SetupPasswordScreen, UnlockScreen } from '@/features/auth';
+import { LedgerScreen } from '@/features/ledger';
+import { WelcomeScreen, CreateWalletScreen, ImportWalletScreen } from '@/features/wallet-setup';
+import { useWalletDataUpdater } from '@/core/hooks/use-wallet-data-updater';
+import { useReceivedToasts } from '@/features/notifications';
+import { Button } from '@/core/components/ui/button';
 
 export const AppRouter: React.FC = () => {
     const isPasswordSet = useWalletStore((state) => state.auth.isPasswordSet);
@@ -36,11 +36,12 @@ export const AppRouter: React.FC = () => {
     const { hasWallet } = useWallet();
 
     useWalletDataUpdater();
+    useReceivedToasts();
 
     const getInitialRoute = () => {
-        if (!isPasswordSet) return '/setup-password';
+        if (!isPasswordSet) return '/welcome';
         if (!isUnlocked) return '/unlock';
-        if (!hasWallet) return '/setup-wallet';
+        if (!hasWallet) return '/welcome';
         return '/wallet';
     };
 
@@ -83,15 +84,32 @@ export const AppRouter: React.FC = () => {
         <BrowserRouter>
             <Routes>
                 {/* Public routes */}
-                <Route path="/setup-password" element={<SetupPassword />} />
-                <Route path="/unlock" element={<UnlockWallet />} />
+                <Route path="/welcome" element={<WelcomeScreen />} />
+                <Route path="/setup-password" element={<SetupPasswordScreen />} />
+                <Route path="/unlock" element={<UnlockScreen />} />
 
                 {/* Protected routes - require authentication */}
                 <Route
-                    path="/setup-wallet"
+                    path="/create-wallet"
                     element={
                         <ProtectedRoute>
-                            <SetupWallet />
+                            <CreateWalletScreen />
+                        </ProtectedRoute>
+                    }
+                />
+                <Route
+                    path="/import-wallet"
+                    element={
+                        <ProtectedRoute>
+                            <ImportWalletScreen />
+                        </ProtectedRoute>
+                    }
+                />
+                <Route
+                    path="/ledger"
+                    element={
+                        <ProtectedRoute>
+                            <LedgerScreen />
                         </ProtectedRoute>
                     }
                 />
@@ -106,42 +124,50 @@ export const AppRouter: React.FC = () => {
                     }
                 />
                 <Route
-                    path="/send"
+                    path="/wallet/assets"
                     element={
                         <ProtectedRoute requiresWallet>
-                            <SendTransaction />
+                            <AssetsScreen />
                         </ProtectedRoute>
                     }
                 />
                 <Route
-                    path="/swap"
+                    path="/wallet/nft"
                     element={
                         <ProtectedRoute requiresWallet>
-                            <Swap />
+                            <NftsScreen />
                         </ProtectedRoute>
                     }
                 />
                 <Route
-                    path="/staking"
+                    path="/wallet/history"
                     element={
                         <ProtectedRoute requiresWallet>
-                            <Staking />
+                            <HistoryScreen />
                         </ProtectedRoute>
                     }
                 />
                 <Route
-                    path="/wallet/transactions/:hash"
+                    path="/send"
                     element={
                         <ProtectedRoute requiresWallet>
-                            <TransactionDetail />
+                            <SendTransaction />
                         </ProtectedRoute>
                     }
                 />
                 <Route
-                    path="/wallet/trace/:traceId"
+                    path="/swap"
                     element={
                         <ProtectedRoute requiresWallet>
-                            <TracePage />
+                            <Swap />
+                        </ProtectedRoute>
+                    }
+                />
+                <Route
+                    path="/staking"
+                    element={
+                        <ProtectedRoute requiresWallet>
+                            <Staking />
                         </ProtectedRoute>
                     }
                 />
diff --git a/apps/demo-wallet/src/core/routing/index.ts b/apps/demo-wallet/src/core/routing/index.ts
new file mode 100644
index 000000000..e88f26813
--- /dev/null
+++ b/apps/demo-wallet/src/core/routing/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './app-router';
+export * from './protected-route';
diff --git a/apps/demo-wallet/src/components/ProtectedRoute.tsx b/apps/demo-wallet/src/core/routing/protected-route.tsx
similarity index 75%
rename from apps/demo-wallet/src/components/ProtectedRoute.tsx
rename to apps/demo-wallet/src/core/routing/protected-route.tsx
index 2c04508eb..97684432a 100644
--- a/apps/demo-wallet/src/components/ProtectedRoute.tsx
+++ b/apps/demo-wallet/src/core/routing/protected-route.tsx
@@ -19,9 +19,9 @@ export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, requir
     const { isPasswordSet, isUnlocked } = useAuth();
     const { hasWallet } = useWallet();
 
-    // If no password is set, redirect to password setup
+    // If no password is set (brand new or after a reset), start from the welcome screen
     if (!isPasswordSet) {
-        return <Navigate to="/setup-password" replace />;
+        return <Navigate to="/welcome" replace />;
     }
 
     // If password is set but wallet is locked, redirect to unlock
@@ -29,9 +29,9 @@ export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, requir
         return <Navigate to="/unlock" replace />;
     }
 
-    // If wallet is required but doesn't exist, redirect to wallet setup
+    // If wallet is required but doesn't exist, send the user to the welcome screen
     if (requiresWallet && !hasWallet) {
-        return <Navigate to="/setup-wallet" replace />;
+        return <Navigate to="/welcome" replace />;
     }
 
     return <>{children}</>;
diff --git a/apps/demo-wallet/src/core/utils/format.ts b/apps/demo-wallet/src/core/utils/format.ts
new file mode 100644
index 000000000..0a91946f9
--- /dev/null
+++ b/apps/demo-wallet/src/core/utils/format.ts
@@ -0,0 +1,25 @@
+/**
+ * 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 { formatUnits } from '@ton/walletkit';
+
+const usd = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+const usdSmall = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 8 });
+
+/** Raw token units (nanotons / jetton base units) → a JS number in whole tokens. */
+export const toDecimal = (raw: bigint | string | undefined, decimals: number): number => {
+    if (raw === undefined || raw === '') return 0;
+    try {
+        return Number(formatUnits(raw, decimals));
+    } catch {
+        return 0;
+    }
+};
+
+/** Per-unit price → `$`, with extra precision for sub-cent values. */
+export const formatRate = (value: number): string => `$${(value >= 0.01 ? usd : usdSmall).format(value)}`;
diff --git a/apps/demo-wallet/src/utils/formatters.ts b/apps/demo-wallet/src/core/utils/formatters.ts
similarity index 53%
rename from apps/demo-wallet/src/utils/formatters.ts
rename to apps/demo-wallet/src/core/utils/formatters.ts
index 84585d826..30793b6a7 100644
--- a/apps/demo-wallet/src/utils/formatters.ts
+++ b/apps/demo-wallet/src/core/utils/formatters.ts
@@ -9,17 +9,17 @@
 import { Address } from '@ton/core';
 import { Base64ToHex } from '@ton/walletkit';
 
-export function normalizeAddress(address: string): string | null {
+export function normalizeAddress(address: string, bounceable = false): string | null {
     try {
-        return Address.parse(address).toString();
+        return Address.parse(address).toString({ bounceable });
     } catch {
         return null;
     }
 }
 
-export function shortenAddress(addr?: string, count = 6): string {
+export function shortenAddress(addr?: string, count = 4, bounceable = false): string {
     if (!addr) return '';
-    const normalized = normalizeAddress(addr) ?? addr;
+    const normalized = normalizeAddress(addr, bounceable) ?? addr;
     return normalized.length <= count * 2 ? normalized : `${normalized.slice(0, count)}...${normalized.slice(-count)}`;
 }
 
@@ -44,32 +44,6 @@ export const formatTimestamp = (timestampSeconds: number): string => {
     return new Date(timestampSeconds * 1000).toLocaleString();
 };
 
-/**
- * Formats TON amount for consistent display (4 decimals).
- * Accepts amount in nanoton (string) or formatted value like "0.001 TON".
- * TODO - make better function for formatting amounts
- */
-export const formatTonForDisplay = (amountOrValue: string): string => {
-    const num =
-        amountOrValue.includes('TON') || amountOrValue.includes('.')
-            ? parseFloat(
-                  String(amountOrValue)
-                      .replace(/\s*TON\s*$/i, '')
-                      .trim(),
-              ) || 0
-            : parseFloat(amountOrValue || '0') / 1e9;
-    return num.toFixed(4);
-};
-
-/**
- * Formats a blockchain address to a shortened form (first 6 and last 6 characters)
- * @param addr - Full blockchain address
- * @returns Shortened address (e.g., "EQAbc...xyz123")
- */
-export const formatAddress = (addr: string): string => {
-    return shortenAddress(addr);
-};
-
 type ExplorerNetwork = 'mainnet' | 'testnet' | 'tetra';
 
 function getTonviewerHost(network: ExplorerNetwork): string {
@@ -93,3 +67,37 @@ function toHexHash(hash: string): string {
 export function getTonviewerTxUrl(network: ExplorerNetwork, hash: string): string {
     return `https://${getTonviewerHost(network)}/transaction/${toHexHash(hash)}`;
 }
+
+/**
+ * Formats a human-readable amount for compact display, mirroring the appkit-react
+ * widget formatter (`formatLargeValue` from `@ton/appkit`): abbreviates large values
+ * (M/B/T) and otherwise truncates to `decimals` fractional digits with locale
+ * thousands separators. Expects a decimal amount, not nanoton.
+ */
+export const formatLargeValue = (amount: string, decimals: number = 2, minimumFractionDigits: number = 0): string => {
+    const cleanAmount = amount.toString().replace(/\s/g, '');
+    const intPart = cleanAmount.split('.')[0] || '0';
+
+    // > 100 000 000 000 000 => 100T
+    if (intPart.length > 12) {
+        return `${(Number(intPart.slice(0, -10)) / 100).toLocaleString('en-US')}T`;
+    }
+    // > 100 000 000 000 => 100B
+    if (intPart.length > 9) {
+        return `${(Number(intPart.slice(0, -7)) / 100).toLocaleString('en-US')}B`;
+    }
+    // > 10 000 000 => 10M
+    if (intPart.length > 6) {
+        return `${(Number(intPart.slice(0, -4)) / 100).toLocaleString('en-US')}M`;
+    }
+
+    const value = parseFloat(cleanAmount);
+    if (isNaN(value)) {
+        return '0';
+    }
+
+    const factor = Math.pow(10, decimals);
+    const truncated = Math.floor(value * factor) / factor;
+
+    return truncated.toLocaleString('en-US', { minimumFractionDigits, maximumFractionDigits: decimals });
+};
diff --git a/apps/demo-wallet/src/utils/index.ts b/apps/demo-wallet/src/core/utils/index.ts
similarity index 69%
rename from apps/demo-wallet/src/utils/index.ts
rename to apps/demo-wallet/src/core/utils/index.ts
index 664a2a940..cdf5226cb 100644
--- a/apps/demo-wallet/src/utils/index.ts
+++ b/apps/demo-wallet/src/core/utils/index.ts
@@ -6,6 +6,10 @@
  *
  */
 
+export * from './format';
 export * from './formatters';
 export * from './payload';
+export * from './rates';
+export * from './telegram';
+export * from './token-image';
 export * from './units';
diff --git a/apps/demo-wallet/src/utils/payload.ts b/apps/demo-wallet/src/core/utils/payload.ts
similarity index 100%
rename from apps/demo-wallet/src/utils/payload.ts
rename to apps/demo-wallet/src/core/utils/payload.ts
diff --git a/apps/demo-wallet/src/core/utils/rates.ts b/apps/demo-wallet/src/core/utils/rates.ts
new file mode 100644
index 000000000..930c39eda
--- /dev/null
+++ b/apps/demo-wallet/src/core/utils/rates.ts
@@ -0,0 +1,24 @@
+/**
+ * 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 { compareAddress } from '@ton/walletkit';
+import type { RateEntry } from '@demo/wallet-core';
+
+/**
+ * Look up a rate by address, tolerant of address format (EQ/UQ/raw).
+ * Tries a direct key hit first, then falls back to address-equality comparison.
+ */
+export function findRate(rates: Record<string, RateEntry>, address: string): RateEntry | undefined {
+    const direct = rates[address];
+    if (direct) return direct;
+
+    for (const [key, entry] of Object.entries(rates)) {
+        if (compareAddress(key, address)) return entry;
+    }
+    return undefined;
+}
diff --git a/apps/demo-wallet/src/core/utils/telegram.ts b/apps/demo-wallet/src/core/utils/telegram.ts
new file mode 100644
index 000000000..a5e3b8ec4
--- /dev/null
+++ b/apps/demo-wallet/src/core/utils/telegram.ts
@@ -0,0 +1,34 @@
+/**
+ * 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 { init, openTelegramLink as openTgLink, retrieveLaunchParams } from '@telegram-apps/sdk';
+
+// Initialize the SDK so its helpers can reach the native Telegram client.
+try {
+    init();
+} catch {
+    /* not inside a Telegram Mini App */
+}
+
+/** Telegram user id from the Mini App launch params, or undefined outside Telegram. */
+export function getTelegramId(): number | undefined {
+    try {
+        return retrieveLaunchParams(true).tgWebAppData?.user?.id;
+    } catch {
+        return undefined;
+    }
+}
+
+/** Open a t.me link inside Telegram, falling back to a new browser tab. */
+export function openTelegramLink(url: string): void {
+    if (openTgLink.isAvailable()) {
+        openTgLink(url);
+        return;
+    }
+    window.open(url, '_blank', 'noopener,noreferrer');
+}
diff --git a/apps/demo-wallet/src/core/utils/token-image.ts b/apps/demo-wallet/src/core/utils/token-image.ts
new file mode 100644
index 000000000..837ca5d15
--- /dev/null
+++ b/apps/demo-wallet/src/core/utils/token-image.ts
@@ -0,0 +1,19 @@
+/**
+ * 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 { TokenImage } from '@ton/walletkit';
+
+/**
+ * Flatten a wallet-kit {@link TokenImage} into candidate image URLs, best-first.
+ * The kit exposes discrete size fields; the UI consumes an ordered list and
+ * picks the first usable one.
+ */
+export const tokenImageUrls = (image: TokenImage | undefined): string[] =>
+    image
+        ? [image.url, image.largeUrl, image.mediumUrl, image.smallUrl].filter((url): url is string => Boolean(url))
+        : [];
diff --git a/apps/demo-wallet/src/utils/units.ts b/apps/demo-wallet/src/core/utils/units.ts
similarity index 98%
rename from apps/demo-wallet/src/utils/units.ts
rename to apps/demo-wallet/src/core/utils/units.ts
index 4a589e88a..f057bb393 100644
--- a/apps/demo-wallet/src/utils/units.ts
+++ b/apps/demo-wallet/src/core/utils/units.ts
@@ -89,7 +89,7 @@ export function formatTon(value: bigint | string) {
 
 export function formatNanoTonAmount(value?: bigint | string) {
     try {
-        return `${formatTon(value ?? '0')} TON`;
+        return `${formatTon(value ?? '0')} GRAM`;
     } catch {
         return `${value ?? '0'} nanotons`;
     }
diff --git a/apps/demo-wallet/src/extension.css b/apps/demo-wallet/src/extension.css
index 555d87663..eb7e1f06e 100644
--- a/apps/demo-wallet/src/extension.css
+++ b/apps/demo-wallet/src/extension.css
@@ -1,7 +1,13 @@
-#root {
+html,
+body {
+  margin: 0;
   padding: 0;
-  min-width: 400px;
-  max-width: 400px;
-  border-radius: 32px;
-  overflow: hidden;
+  width: 400px;
+  height: 600px;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
 }
diff --git a/apps/demo-wallet/src/extension/background_main.ts b/apps/demo-wallet/src/extension/background_main.ts
index 70bbbeff8..6e45c0f54 100644
--- a/apps/demo-wallet/src/extension/background_main.ts
+++ b/apps/demo-wallet/src/extension/background_main.ts
@@ -17,11 +17,15 @@ import browser from 'webextension-polyfill';
 import { onMessage } from '@truecarry/webext-bridge/background';
 import { INJECT_CONTENT_SCRIPT, TONCONNECT_BRIDGE_REQUEST } from '@ton/walletkit/bridge';
 
-import { getTonConnectDeviceInfo, getTonConnectWalletManifest } from '../utils/walletManifest';
-
-import { JS_BRIDGE_MESSAGE_TO_BACKGROUND } from '@/lib/constants';
-import { SendMessageToExtensionContentFromBackground } from '@/lib/extensionBackground';
-import { DISABLE_AUTO_POPUP, ENV_TON_API_KEY_MAINNET, ENV_TON_API_KEY_TESTNET, ENV_TON_API_KEY_TETRA } from '@/lib/env';
+import { getTonConnectDeviceInfo, getTonConnectWalletManifest } from '@/core/lib/wallet-manifest';
+import { JS_BRIDGE_MESSAGE_TO_BACKGROUND } from '@/core/lib/constants';
+import { SendMessageToExtensionContentFromBackground } from '@/core/lib/extensionBackground';
+import {
+    DISABLE_AUTO_POPUP,
+    ENV_TON_API_KEY_MAINNET,
+    ENV_TON_API_KEY_TESTNET,
+    ENV_TON_API_KEY_TETRA,
+} from '@/core/lib/env';
 
 // Initialize WalletKit and JSBridge
 let walletKit: TonWalletKit | null = null;
diff --git a/apps/demo-wallet/src/extension/content.ts b/apps/demo-wallet/src/extension/content.ts
index 22243ff89..31bd9da00 100644
--- a/apps/demo-wallet/src/extension/content.ts
+++ b/apps/demo-wallet/src/extension/content.ts
@@ -17,9 +17,12 @@ import { ExtensionTransport, injectBridgeCode } from '@ton/walletkit/bridge';
 import type { MessageSender, MessageListener } from '@ton/walletkit/bridge';
 import { onMessage, sendMessage, setNamespace } from '@truecarry/webext-bridge/window';
 
-import { getTonConnectDeviceInfo, getTonConnectWalletManifest } from '../utils/walletManifest';
-
-import { JS_BRIDGE_MESSAGE_TO_BACKGROUND, JS_BRIDGE_MESSAGE_TO_CONTENT, JS_BRIDGE_NAMESPACE } from '@/lib/constants';
+import { getTonConnectDeviceInfo, getTonConnectWalletManifest } from '@/core/lib/wallet-manifest';
+import {
+    JS_BRIDGE_MESSAGE_TO_BACKGROUND,
+    JS_BRIDGE_MESSAGE_TO_CONTENT,
+    JS_BRIDGE_NAMESPACE,
+} from '@/core/lib/constants';
 
 try {
     setNamespace(JS_BRIDGE_NAMESPACE);
diff --git a/apps/demo-wallet/src/extension/content_script.ts b/apps/demo-wallet/src/extension/content_script.ts
index ecbfe754e..d2faf135c 100644
--- a/apps/demo-wallet/src/extension/content_script.ts
+++ b/apps/demo-wallet/src/extension/content_script.ts
@@ -8,7 +8,7 @@
 
 import { allowWindowMessaging } from '@truecarry/webext-bridge/content-script';
 
-import { JS_BRIDGE_NAMESPACE } from '@/lib/constants';
+import { JS_BRIDGE_NAMESPACE } from '@/core/lib/constants';
 
 async function startContentScript() {
     allowWindowMessaging(JS_BRIDGE_NAMESPACE);
diff --git a/apps/demo-wallet/src/features/assets/components/asset-row/asset-row.tsx b/apps/demo-wallet/src/features/assets/components/asset-row/asset-row.tsx
new file mode 100644
index 000000000..a6877f0f5
--- /dev/null
+++ b/apps/demo-wallet/src/features/assets/components/asset-row/asset-row.tsx
@@ -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 React from 'react';
+
+import { FallbackImage } from '@/core/components/ui/fallback-image';
+import { useCountUp } from '@/core/hooks/use-count-up';
+import { formatLargeValue } from '@/core/utils';
+
+/** View-model for a single balance row (TON or a jetton). */
+export interface AssetRowData {
+    id: string;
+    /** One or more candidate icon URLs, tried in order until one loads. */
+    icon?: string | string[];
+    fallbackText: string;
+    name: string;
+    symbol: string;
+    amount: number;
+    rateLabel?: string;
+    /** Fiat value to display on the right; omit to hide (asset has no rate). */
+    fiat?: number;
+}
+
+export const AssetRow: React.FC<AssetRowData> = ({ icon, fallbackText, name, symbol, amount, rateLabel, fiat }) => {
+    const animatedAmount = useCountUp(amount);
+    const animatedFiat = useCountUp(fiat ?? 0);
+    const hasFiat = fiat !== undefined;
+
+    return (
+        <div className="flex items-center gap-3 py-2">
+            <span className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0 bg-gray-100 flex items-center justify-center">
+                <FallbackImage
+                    src={icon}
+                    alt=""
+                    className="w-full h-full object-cover"
+                    fallback={
+                        <span className="w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xs font-bold flex items-center justify-center">
+                            {fallbackText}
+                        </span>
+                    }
+                />
+            </span>
+            <div className="flex-1 min-w-0">
+                <div className="text-sm font-semibold text-gray-900 truncate">{name}</div>
+                <div className="text-xs text-gray-500 truncate tabular-nums">
+                    {formatLargeValue(String(animatedAmount), 4)} {symbol}
+                    {rateLabel && ` · ${rateLabel}`}
+                </div>
+            </div>
+            {hasFiat && (
+                <div className="text-right flex-shrink-0 tabular-nums">
+                    <div className="text-sm font-semibold text-gray-900">
+                        ${formatLargeValue(String(animatedFiat), 2, 2)}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export const AssetRowSkeleton: React.FC = () => (
+    <div className="flex items-center gap-3 py-2">
+        <span className="w-10 h-10 rounded-full bg-gray-100 animate-pulse flex-shrink-0" />
+        <div className="flex-1 min-w-0 space-y-1.5">
+            <div className="h-4 w-24 rounded bg-gray-100 animate-pulse" />
+            <div className="h-3 w-32 rounded bg-gray-100 animate-pulse" />
+        </div>
+        <div className="text-right space-y-1.5">
+            <div className="h-4 w-16 rounded bg-gray-100 animate-pulse ml-auto" />
+            <div className="h-3 w-12 rounded bg-gray-100 animate-pulse ml-auto" />
+        </div>
+    </div>
+);
diff --git a/apps/demo-wallet/src/features/assets/components/asset-row/index.ts b/apps/demo-wallet/src/features/assets/components/asset-row/index.ts
new file mode 100644
index 000000000..eeae9c0ca
--- /dev/null
+++ b/apps/demo-wallet/src/features/assets/components/asset-row/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './asset-row';
diff --git a/apps/demo-wallet/src/features/assets/components/assets-screen/assets-screen.tsx b/apps/demo-wallet/src/features/assets/components/assets-screen/assets-screen.tsx
new file mode 100644
index 000000000..339b04fa2
--- /dev/null
+++ b/apps/demo-wallet/src/features/assets/components/assets-screen/assets-screen.tsx
@@ -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 type { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { AssetRow, AssetRowSkeleton } from '../asset-row';
+import { useAssetRows } from '../../hooks/use-asset-rows';
+
+import { NewLayout } from '@/core/components/shared/new-layout';
+import { ScreenHeader } from '@/core/components/shared/screen-header';
+
+/** Full assets page: every token on the active wallet's balance (TON + all jettons). */
+export const AssetsScreen: FC = () => {
+    const navigate = useNavigate();
+    const { tonRow, jettonRows, assetsReady } = useAssetRows();
+
+    return (
+        <NewLayout header={<ScreenHeader title="Assets" onBack={() => navigate('/wallet')} />}>
+            <div className="space-y-1">
+                {assetsReady && tonRow ? (
+                    <>
+                        <AssetRow {...tonRow} />
+                        {jettonRows.map((row) => (
+                            <AssetRow key={row.id} {...row} />
+                        ))}
+                    </>
+                ) : (
+                    <>
+                        <AssetRowSkeleton />
+                        <AssetRowSkeleton />
+                        <AssetRowSkeleton />
+                    </>
+                )}
+            </div>
+        </NewLayout>
+    );
+};
diff --git a/apps/demo-wallet/src/features/assets/components/assets-screen/index.ts b/apps/demo-wallet/src/features/assets/components/assets-screen/index.ts
new file mode 100644
index 000000000..e8ccf6c69
--- /dev/null
+++ b/apps/demo-wallet/src/features/assets/components/assets-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './assets-screen';
diff --git a/apps/demo-wallet/src/features/assets/hooks/use-asset-rows.ts b/apps/demo-wallet/src/features/assets/hooks/use-asset-rows.ts
new file mode 100644
index 000000000..afb9a461a
--- /dev/null
+++ b/apps/demo-wallet/src/features/assets/hooks/use-asset-rows.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 { useMemo } from 'react';
+import { useJettons, useRates, useWallet } from '@demo/wallet-core';
+
+import type { AssetRowData } from '../components/asset-row';
+
+import { getJettonsName, getJettonsSymbol } from '@/features/jettons';
+import { findRate, formatRate, toDecimal, tokenImageUrls } from '@/core/utils';
+
+const GRAM_DECIMALS = 9;
+
+/** Candidate icon URLs (best-first), appending the inline base64 image as a last resort. */
+export const imageSources = (urls: string[] | undefined, dataBase64?: string): string[] => [
+    ...(urls ?? []),
+    ...(dataBase64 ? [`data:image/png;base64,${dataBase64}`] : []),
+];
+
+interface AssetRows {
+    tonRow: AssetRowData | null;
+    /** All held jettons as rows, sorted by fiat value desc (verified first as a tiebreaker). */
+    jettonRows: AssetRowData[];
+    assetsReady: boolean;
+}
+
+/** Builds the TON row + a row per held jetton. Shared by the dashboard preview and the full assets page. */
+export const useAssetRows = (): AssetRows => {
+    const { balance } = useWallet();
+    const { userJettons, lastJettonsUpdate } = useJettons();
+    const { entries: rates, lastUpdated: ratesUpdated } = useRates();
+
+    const assetsReady = balance !== undefined && lastJettonsUpdate > 0 && ratesUpdated > 0;
+
+    const tonRow = useMemo<AssetRowData | null>(() => {
+        if (!assetsReady) return null;
+        const rateEntry = rates['GRAM'];
+        const amount = toDecimal(balance, GRAM_DECIMALS);
+        return {
+            id: 'TON',
+            icon: '/gram.svg',
+            fallbackText: 'GR',
+            name: 'Gram',
+            symbol: 'GRAM',
+            amount,
+            rateLabel: rateEntry ? formatRate(rateEntry.rate) : undefined,
+            fiat: rateEntry ? amount * rateEntry.rate : undefined,
+        };
+    }, [assetsReady, balance, rates]);
+
+    const jettonRows = useMemo<AssetRowData[]>(() => {
+        if (!assetsReady) return [];
+        return userJettons
+            .map((jetton) => {
+                const rateEntry = findRate(rates, jetton.address);
+                const decimals = jetton.decimalsNumber ?? 9;
+                const amount = toDecimal(jetton.balance, decimals);
+                const symbol = getJettonsSymbol(jetton) ?? '';
+                return {
+                    row: {
+                        id: jetton.address,
+                        icon: imageSources(tokenImageUrls(jetton.info?.image), jetton.info?.image?.data),
+                        fallbackText: symbol.slice(0, 2).toUpperCase() || '??',
+                        name: getJettonsName(jetton) ?? symbol,
+                        symbol,
+                        amount,
+                        rateLabel: rateEntry ? formatRate(rateEntry.rate) : undefined,
+                        fiat: rateEntry ? amount * rateEntry.rate : undefined,
+                    } satisfies AssetRowData,
+                    isVerified: jetton.isVerified,
+                };
+            })
+            .sort((a, b) => (b.row.fiat ?? 0) - (a.row.fiat ?? 0) || Number(b.isVerified) - Number(a.isVerified))
+            .map((entry) => entry.row);
+    }, [assetsReady, userJettons, rates]);
+
+    return { tonRow, jettonRows, assetsReady };
+};
diff --git a/apps/demo-wallet/src/features/assets/index.ts b/apps/demo-wallet/src/features/assets/index.ts
new file mode 100644
index 000000000..634854f63
--- /dev/null
+++ b/apps/demo-wallet/src/features/assets/index.ts
@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/asset-row';
+export * from './components/assets-screen';
+export * from './hooks/use-asset-rows';
diff --git a/apps/demo-wallet/src/features/auth/components/setup-password-screen/index.ts b/apps/demo-wallet/src/features/auth/components/setup-password-screen/index.ts
new file mode 100644
index 000000000..2224ea840
--- /dev/null
+++ b/apps/demo-wallet/src/features/auth/components/setup-password-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export { SetupPasswordScreen } from './setup-password-screen';
diff --git a/apps/demo-wallet/src/features/auth/components/setup-password-screen/setup-password-screen.tsx b/apps/demo-wallet/src/features/auth/components/setup-password-screen/setup-password-screen.tsx
new file mode 100644
index 000000000..830641048
--- /dev/null
+++ b/apps/demo-wallet/src/features/auth/components/setup-password-screen/setup-password-screen.tsx
@@ -0,0 +1,129 @@
+/**
+ * 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 React, { useEffect, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useAuth } from '@demo/wallet-core';
+
+import { CenteredScreen } from '@/core/components/shared/centered-screen';
+import { Button } from '@/core/components/ui/button';
+import { WALLET_SETUP_ROUTE } from '@/features/wallet-setup';
+import type { WalletSetupMode } from '@/features/wallet-setup';
+
+const MIN_LENGTH = 4;
+
+const INPUT_CLASS =
+    'w-full rounded-xl border border-gray-200 bg-white px-4 py-3 text-base text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
+
+export const SetupPasswordScreen: React.FC = () => {
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+
+    const navigate = useNavigate();
+    const location = useLocation();
+    const { setPassword: setStorePassword } = useAuth();
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+
+    const tooShort = password.length > 0 && password.length < MIN_LENGTH;
+    const mismatch = confirmPassword.length > 0 && confirmPassword !== password;
+    const canSubmit = password.length >= MIN_LENGTH && password === confirmPassword && !isLoading;
+
+    const handleSubmit = async () => {
+        if (!canSubmit) return;
+        setError('');
+        setIsLoading(true);
+        try {
+            await setStorePassword(password);
+            // Route by the chosen path — each has its own dedicated screen.
+            const tab = (location.state as { tab?: WalletSetupMode } | null)?.tab;
+            navigate(WALLET_SETUP_ROUTE[tab ?? 'create']);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const footer = (
+        <Button
+            data-testid="password-submit"
+            fullWidth
+            loading={isLoading}
+            onClick={handleSubmit}
+            disabled={!canSubmit}
+        >
+            Continue
+        </Button>
+    );
+
+    return (
+        <CenteredScreen onBack={() => navigate(-1)} footer={footer}>
+            <div className="flex flex-col items-center text-center px-6">
+                <h1 className="text-2xl font-bold text-gray-900" data-testid="subtitle">
+                    Create a password
+                </h1>
+                <p className="mt-2 text-base text-gray-500">Create a password to protect your wallet.</p>
+
+                <div className="mt-8 w-full space-y-3 text-left">
+                    <input
+                        ref={inputRef}
+                        type="password"
+                        data-testid="password"
+                        value={password}
+                        onChange={(e) => {
+                            setPassword(e.target.value);
+                            setError('');
+                        }}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') void handleSubmit();
+                        }}
+                        placeholder="Password"
+                        autoComplete="new-password"
+                        aria-label="Password"
+                        className={INPUT_CLASS}
+                    />
+                    <input
+                        type="password"
+                        data-testid="password-confirm"
+                        value={confirmPassword}
+                        onChange={(e) => {
+                            setConfirmPassword(e.target.value);
+                            setError('');
+                        }}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') void handleSubmit();
+                        }}
+                        placeholder="Confirm password"
+                        autoComplete="new-password"
+                        aria-label="Confirm password"
+                        className={INPUT_CLASS}
+                    />
+                </div>
+
+                {(error || tooShort || mismatch) && (
+                    <p className="mt-4 text-sm text-red-500">
+                        {error ||
+                            (tooShort
+                                ? `Password must be at least ${MIN_LENGTH} characters`
+                                : 'Passwords do not match')}
+                    </p>
+                )}
+
+                <p className="mt-6 text-xs text-gray-400">
+                    Make sure to remember your password — it can’t be recovered if forgotten.
+                </p>
+            </div>
+        </CenteredScreen>
+    );
+};
diff --git a/apps/demo-wallet/src/features/auth/components/unlock-screen/index.ts b/apps/demo-wallet/src/features/auth/components/unlock-screen/index.ts
new file mode 100644
index 000000000..8c1ad4dba
--- /dev/null
+++ b/apps/demo-wallet/src/features/auth/components/unlock-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export { UnlockScreen } from './unlock-screen';
diff --git a/apps/demo-wallet/src/features/auth/components/unlock-screen/unlock-screen.tsx b/apps/demo-wallet/src/features/auth/components/unlock-screen/unlock-screen.tsx
new file mode 100644
index 000000000..3ad355d73
--- /dev/null
+++ b/apps/demo-wallet/src/features/auth/components/unlock-screen/unlock-screen.tsx
@@ -0,0 +1,119 @@
+/**
+ * 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 React, { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth, useWallet } from '@demo/wallet-core';
+
+import { CenteredScreen } from '@/core/components/shared/centered-screen';
+import { ConfirmModal } from '@/core/components/shared/confirm-modal';
+import { Button } from '@/core/components/ui/button';
+
+const INPUT_CLASS =
+    'w-full rounded-xl border border-gray-200 bg-white px-4 py-3 text-base text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
+
+export const UnlockScreen: React.FC = () => {
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [isResetOpen, setIsResetOpen] = useState(false);
+
+    const navigate = useNavigate();
+    const { unlock, reset } = useAuth();
+    const { loadAllWallets } = useWallet();
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+
+    const handleSubmit = async () => {
+        if (!password || isLoading) return;
+        setError('');
+        setIsLoading(true);
+        try {
+            const success = await unlock(password);
+            if (!success) {
+                throw new Error('Incorrect password');
+            }
+            await loadAllWallets();
+            navigate('/wallet');
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to unlock wallet');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleReset = () => {
+        setIsResetOpen(false);
+        reset();
+        navigate('/welcome');
+    };
+
+    const footer = (
+        <div className="space-y-3">
+            <Button
+                data-testid="password-submit"
+                fullWidth
+                loading={isLoading}
+                onClick={handleSubmit}
+                disabled={!password || isLoading}
+            >
+                Unlock
+            </Button>
+            <Button variant="ghost" size="sm" fullWidth onClick={() => setIsResetOpen(true)}>
+                Reset Wallet
+            </Button>
+        </div>
+    );
+
+    return (
+        <CenteredScreen footer={footer}>
+            <div className="flex flex-col items-center text-center px-6">
+                <h1 className="text-2xl font-bold text-gray-900" data-testid="subtitle">
+                    Enter your password
+                </h1>
+                <p className="mt-2 text-base text-gray-500">Enter your password to unlock your wallet.</p>
+
+                <div className="mt-8 w-full text-left">
+                    <input
+                        ref={inputRef}
+                        type="password"
+                        data-testid="password"
+                        value={password}
+                        onChange={(e) => {
+                            setPassword(e.target.value);
+                            setError('');
+                        }}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') void handleSubmit();
+                        }}
+                        placeholder="Password"
+                        autoComplete="current-password"
+                        aria-label="Password"
+                        className={INPUT_CLASS}
+                    />
+                </div>
+
+                {error && <p className="mt-4 text-sm text-red-500">{error}</p>}
+            </div>
+
+            <ConfirmModal
+                isOpen={isResetOpen}
+                title="Reset wallet"
+                description="This will permanently delete all wallet data on this device. Make sure you have your recovery phrase."
+                confirmLabel="Reset"
+                cancelLabel="Cancel"
+                danger
+                onConfirm={handleReset}
+                onClose={() => setIsResetOpen(false)}
+            />
+        </CenteredScreen>
+    );
+};
diff --git a/apps/demo-wallet/src/features/auth/index.ts b/apps/demo-wallet/src/features/auth/index.ts
new file mode 100644
index 000000000..cae3d28b4
--- /dev/null
+++ b/apps/demo-wallet/src/features/auth/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/setup-password-screen';
+export * from './components/unlock-screen';
diff --git a/apps/demo-wallet/src/components/AnimatedBalance.tsx b/apps/demo-wallet/src/features/dashboard/components/animated-balance/animated-balance.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/AnimatedBalance.tsx
rename to apps/demo-wallet/src/features/dashboard/components/animated-balance/animated-balance.tsx
index a95c13843..80fd84cf4 100644
--- a/apps/demo-wallet/src/components/AnimatedBalance.tsx
+++ b/apps/demo-wallet/src/features/dashboard/components/animated-balance/animated-balance.tsx
@@ -28,7 +28,7 @@ interface AnimatedBalanceProps {
     className?: string;
 }
 
-export const AnimatedBalance: React.FC<AnimatedBalanceProps> = ({ balance, suffix = ' TON', className }) => {
+export const AnimatedBalance: React.FC<AnimatedBalanceProps> = ({ balance, suffix = ' GRAM', className }) => {
     const targetValue = parseFloat(formatUnits(balance || '0', 9));
     const [displayValue, setDisplayValue] = useState(() => balanceFormatter.format(targetValue));
     const displayRef = useRef(targetValue);
diff --git a/apps/demo-wallet/src/features/dashboard/components/animated-balance/index.ts b/apps/demo-wallet/src/features/dashboard/components/animated-balance/index.ts
new file mode 100644
index 000000000..1e8c92f3e
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/animated-balance/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './animated-balance';
diff --git a/apps/demo-wallet/src/features/dashboard/components/balance-total/balance-total.tsx b/apps/demo-wallet/src/features/dashboard/components/balance-total/balance-total.tsx
new file mode 100644
index 000000000..8c6a147ad
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/balance-total/balance-total.tsx
@@ -0,0 +1,95 @@
+/**
+ * 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 React, { useCallback, useMemo } from 'react';
+import { Copy } from 'lucide-react';
+import { toast } from 'sonner';
+import { useWallet, useJettons, useRates } from '@demo/wallet-core';
+
+import { useCountUp } from '@/core/hooks/use-count-up';
+import { findRate, shortenAddress, toDecimal } from '@/core/utils';
+
+const usdFormat = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+/** USD value split into integer and fraction parts (no `$`), for the styled total. */
+const formatUsdParts = (value: number): { intPart: string; fracPart: string } => {
+    const [intPart, fracPart = '00'] = usdFormat.format(value).split('.');
+    return { intPart, fracPart };
+};
+
+const GRAM_DECIMALS = 9;
+
+export const BalanceTotal: React.FC = () => {
+    const { address, balance } = useWallet();
+    const { userJettons } = useJettons();
+    const { entries: rates, lastUpdated: ratesUpdated } = useRates();
+
+    // Wait for both balance and real rates (not the bootstrap TON rate) before showing the total.
+    const ready = balance !== undefined && ratesUpdated > 0;
+
+    const totalUsd = useMemo(() => {
+        if (!ready) return 0;
+
+        let total = 0;
+        const tonRate = rates['GRAM']?.rate;
+        if (tonRate) {
+            total += toDecimal(balance, GRAM_DECIMALS) * tonRate;
+        }
+        for (const jetton of userJettons) {
+            const rate = findRate(rates, jetton.address)?.rate;
+            if (!rate) continue;
+            total += toDecimal(jetton.balance, jetton.decimalsNumber ?? 9) * rate;
+        }
+        return total;
+    }, [ready, rates, balance, userJettons]);
+
+    const handleCopy = useCallback(async () => {
+        if (!address) return;
+        try {
+            await navigator.clipboard.writeText(address);
+            toast.success('Address copied');
+        } catch {
+            toast.error('Failed to copy address');
+        }
+    }, [address]);
+
+    const animatedTotal = useCountUp(totalUsd);
+    const { intPart, fracPart } = formatUsdParts(animatedTotal);
+
+    return (
+        <section className="flex flex-col items-center pt-6 pb-6">
+            {ready ? (
+                <div className="font-display font-bold tabular-nums leading-none tracking-[-2%]">
+                    <span className="text-5xl text-gray-400 mr-0.5">$</span>
+                    <span className="text-5xl text-gray-900">{intPart}</span>
+                    <span className="text-5xl text-gray-400">.</span>
+                    <span className="text-3xl text-gray-400">{fracPart}</span>
+                </div>
+            ) : (
+                <div className="h-12 w-56 rounded-lg bg-gray-100 animate-pulse" />
+            )}
+
+            {address ? (
+                <button
+                    type="button"
+                    onClick={handleCopy}
+                    className="mt-3 flex items-center gap-1.5 rounded-full hover:opacity-70 transition-opacity"
+                    aria-label="Copy address"
+                >
+                    <span className="w-4 h-4 rounded-full overflow-hidden inline-block flex-shrink-0">
+                        <img src="/ton.svg" alt="" className="w-full h-full" />
+                    </span>
+                    <span className="text-xs font-medium text-gray-500">{shortenAddress(address, 4)}</span>
+                    <Copy className="w-3.5 h-3.5 text-gray-400" />
+                </button>
+            ) : (
+                <div className="mt-3 h-4 w-32 rounded-full bg-gray-100 animate-pulse" />
+            )}
+        </section>
+    );
+};
diff --git a/apps/demo-wallet/src/features/dashboard/components/balance-total/index.ts b/apps/demo-wallet/src/features/dashboard/components/balance-total/index.ts
new file mode 100644
index 000000000..f9061d039
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/balance-total/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './balance-total';
diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-action-button/dashboard-action-button.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-action-button/dashboard-action-button.tsx
new file mode 100644
index 000000000..a38f99677
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-action-button/dashboard-action-button.tsx
@@ -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 React from 'react';
+
+interface DashboardActionButtonProps {
+    icon: React.ReactNode;
+    label: string;
+    onClick?: () => void;
+    'aria-label'?: string;
+    testId?: string;
+}
+
+export const DashboardActionButton: React.FC<DashboardActionButtonProps> = ({
+    icon,
+    label,
+    onClick,
+    'aria-label': ariaLabel,
+    testId,
+}) => (
+    <button
+        type="button"
+        onClick={onClick}
+        data-testid={testId}
+        aria-label={ariaLabel ?? label}
+        className="flex-1 flex flex-col items-center justify-center gap-1 py-3 rounded-2xl bg-[#F7F8FA] text-gray-900 text-sm font-medium hover:scale-[1.03] active:scale-[0.97] transition-transform"
+    >
+        {icon}
+        <span>{label}</span>
+    </button>
+);
diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-action-button/index.ts b/apps/demo-wallet/src/features/dashboard/components/dashboard-action-button/index.ts
new file mode 100644
index 000000000..378befbed
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-action-button/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './dashboard-action-button';
diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-actions/dashboard-actions.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-actions/dashboard-actions.tsx
new file mode 100644
index 000000000..be697eadd
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-actions/dashboard-actions.tsx
@@ -0,0 +1,41 @@
+/**
+ * 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 React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { DashboardActionButton } from '../dashboard-action-button';
+
+import { SwapIcon, SendIcon, StakeIcon } from '@/core/components/ui/icons';
+
+export const DashboardActions: React.FC = () => {
+    const navigate = useNavigate();
+
+    return (
+        <div className="flex items-stretch gap-2">
+            <DashboardActionButton
+                icon={<SendIcon className="w-6 h-6" />}
+                label="Send"
+                onClick={() => navigate('/send')}
+                testId="send-button"
+            />
+            <DashboardActionButton
+                icon={<SwapIcon className="w-6 h-6" />}
+                label="Swap"
+                onClick={() => navigate('/swap')}
+                testId="swap-button"
+            />
+            <DashboardActionButton
+                icon={<StakeIcon className="w-6 h-6" />}
+                label="Stake"
+                onClick={() => navigate('/staking')}
+                testId="stake-button"
+            />
+        </div>
+    );
+};
diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-actions/index.ts b/apps/demo-wallet/src/features/dashboard/components/dashboard-actions/index.ts
new file mode 100644
index 000000000..5e0fc0f31
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-actions/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './dashboard-actions';
diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-assets/dashboard-assets.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-assets/dashboard-assets.tsx
new file mode 100644
index 000000000..c004f49da
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-assets/dashboard-assets.tsx
@@ -0,0 +1,119 @@
+/**
+ * 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 React, { useEffect, useMemo, useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { useJettons, useRates, useWallet, useWalletKit } from '@demo/wallet-core';
+import type { JettonInfo } from '@ton/walletkit';
+
+import { AssetRow, AssetRowSkeleton, imageSources, useAssetRows } from '@/features/assets';
+import type { AssetRowData } from '@/features/assets';
+import { getJettonsName, getJettonsSymbol } from '@/features/jettons';
+import { findRate, formatRate, toDecimal, tokenImageUrls } from '@/core/utils';
+
+const JETTON_SLOTS = 2;
+
+// Always-shown fallback jettons (used to pad the preview to 3 assets when the user
+// holds fewer). Metadata is used only when the token isn't in the wallet.
+const DEFAULT_JETTONS: { address: string; symbol: string; name: string }[] = [
+    { address: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs', symbol: 'USDT', name: 'Tether USD' },
+    { address: 'EQA1R_LuQCLHlMgOo1S4G7Y7W1cd0FrAkbA10Zq7rddKxi9k', symbol: 'XAUT', name: 'Tether Gold' },
+];
+
+export const DashboardAssets: React.FC = () => {
+    const navigate = useNavigate();
+    const { currentWallet, getActiveWallet } = useWallet();
+    const { userJettons } = useJettons();
+    const { entries: rates } = useRates();
+    const walletKit = useWalletKit();
+    const { tonRow, jettonRows, assetsReady } = useAssetRows();
+
+    const isMainnet = getActiveWallet()?.network === 'mainnet';
+
+    // Fetch metadata (name/icon) for the default tokens from the API — mainnet only.
+    const [defaultInfos, setDefaultInfos] = useState<Record<string, JettonInfo>>({});
+    useEffect(() => {
+        if (!isMainnet || !walletKit || !currentWallet) return;
+        const network = currentWallet.getNetwork();
+        let cancelled = false;
+        void Promise.all(
+            DEFAULT_JETTONS.map((def) => walletKit.jettons.getJettonInfo(def.address, network).catch(() => null)),
+        ).then((infos) => {
+            if (cancelled) return;
+            const next: Record<string, JettonInfo> = {};
+            infos.forEach((info, i) => {
+                if (info) next[DEFAULT_JETTONS[i].address] = info;
+            });
+            setDefaultInfos(next);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [isMainnet, walletKit, currentWallet]);
+
+    // Preview: top JETTON_SLOTS held jettons, padded with default tokens (USDT/XAUT) on mainnet.
+    const selected = useMemo<AssetRowData[]>(() => {
+        const base = jettonRows.slice(0, JETTON_SLOTS);
+        if (!isMainnet || base.length >= JETTON_SLOTS) return base;
+
+        const heldByAddress = new Map(userJettons.map((jetton) => [jetton.address, jetton]));
+        const present = new Set(base.map((row) => row.id));
+        const padded = [...base];
+
+        for (const def of DEFAULT_JETTONS) {
+            if (padded.length >= JETTON_SLOTS) break;
+            if (present.has(def.address)) continue;
+
+            const held = heldByAddress.get(def.address);
+            const info = defaultInfos[def.address];
+            const decimals = held?.decimalsNumber ?? info?.decimals ?? 9;
+            const amount = held ? toDecimal(held.balance, decimals) : 0;
+            const rateEntry = findRate(rates, def.address);
+            padded.push({
+                id: def.address,
+                icon: held
+                    ? imageSources(tokenImageUrls(held.info?.image), held.info?.image?.data)
+                    : imageSources(info?.image ? [info.image] : undefined, info?.image_data),
+                fallbackText: def.symbol.slice(0, 2).toUpperCase(),
+                name: (held && getJettonsName(held)) || info?.name || def.name,
+                symbol: (held && getJettonsSymbol(held)) || info?.symbol || def.symbol,
+                amount,
+                rateLabel: rateEntry ? formatRate(rateEntry.rate) : undefined,
+                fiat: rateEntry ? amount * rateEntry.rate : undefined,
+            });
+        }
+        return padded;
+    }, [jettonRows, isMainnet, userJettons, rates, defaultInfos]);
+
+    return (
+        <section>
+            <button
+                type="button"
+                onClick={() => navigate('/wallet/assets')}
+                className="flex items-center gap-1 mb-2"
+                aria-label="View all assets"
+            >
+                <h2 className="text-base font-semibold text-gray-900">Assets</h2>
+                <ChevronRight className="w-4 h-4 text-gray-400" />
+            </button>
+
+            <div className="space-y-1">
+                {tonRow ? <AssetRow {...tonRow} /> : <AssetRowSkeleton />}
+                {assetsReady ? (
+                    selected.map((row) => <AssetRow key={row.id} {...row} />)
+                ) : (
+                    <>
+                        <AssetRowSkeleton />
+                        <AssetRowSkeleton />
+                    </>
+                )}
+            </div>
+        </section>
+    );
+};
diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-assets/index.ts b/apps/demo-wallet/src/features/dashboard/components/dashboard-assets/index.ts
new file mode 100644
index 000000000..bc39b3435
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-assets/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './dashboard-assets';
diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-header/dashboard-header.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-header/dashboard-header.tsx
new file mode 100644
index 000000000..3293f346c
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-header/dashboard-header.tsx
@@ -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 React, { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { useTonConnect, useWallet } from '@demo/wallet-core';
+
+import { WalletSelectorModal } from '@/features/wallets';
+import { SettingsDropdown } from '@/features/settings';
+import { ConnectDappModal } from '@/features/ton-connect';
+import { ScanIcon } from '@/core/components/ui/icons';
+import { usePasteHandler } from '@/core/hooks';
+
+export const DashboardHeader: React.FC = () => {
+    const [isWalletSelectorOpen, setIsWalletSelectorOpen] = useState(false);
+    const [isConnectOpen, setIsConnectOpen] = useState(false);
+
+    const { handleTonConnectUrl } = useTonConnect();
+    const { savedWallets, activeWalletId } = useWallet();
+    const activeWallet = savedWallets.find((w) => w.id === activeWalletId);
+
+    usePasteHandler(handleTonConnectUrl, isConnectOpen);
+
+    return (
+        <header className="flex items-center justify-between px-4 py-3">
+            <button
+                type="button"
+                onClick={() => setIsConnectOpen(true)}
+                className="p-1.5 -ml-1.5 rounded-md hover:bg-gray-100 transition-colors"
+                aria-label="Scan"
+                data-testid="connect-dapp-button"
+            >
+                <ScanIcon className="w-5 h-5" />
+            </button>
+
+            <button
+                type="button"
+                onClick={() => setIsWalletSelectorOpen(true)}
+                className="flex items-center gap-1 px-3 py-1.5 rounded-full bg-gray-100 cursor-pointer hover:bg-gray-200 transition-colors"
+                aria-label="Select wallet"
+            >
+                <span className="text-sm font-semibold text-gray-900">{activeWallet?.name || 'No wallet'}</span>
+                <ChevronDown className="w-4 h-4 text-gray-500" />
+            </button>
+
+            <SettingsDropdown />
+
+            <WalletSelectorModal isOpen={isWalletSelectorOpen} onClose={() => setIsWalletSelectorOpen(false)} />
+            <ConnectDappModal isOpen={isConnectOpen} onClose={() => setIsConnectOpen(false)} />
+        </header>
+    );
+};
diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-header/index.ts b/apps/demo-wallet/src/features/dashboard/components/dashboard-header/index.ts
new file mode 100644
index 000000000..93603facf
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-header/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './dashboard-header';
diff --git a/apps/demo-wallet/src/features/dashboard/components/wallet-dashboard/index.ts b/apps/demo-wallet/src/features/dashboard/components/wallet-dashboard/index.ts
new file mode 100644
index 000000000..c7a0e5696
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/wallet-dashboard/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './wallet-dashboard';
diff --git a/apps/demo-wallet/src/features/dashboard/components/wallet-dashboard/wallet-dashboard.tsx b/apps/demo-wallet/src/features/dashboard/components/wallet-dashboard/wallet-dashboard.tsx
new file mode 100644
index 000000000..0afbda0eb
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/wallet-dashboard/wallet-dashboard.tsx
@@ -0,0 +1,98 @@
+/**
+ * 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 React from 'react';
+import {
+    useWallet,
+    useTonConnect,
+    useTransactionRequests,
+    useSignDataRequests,
+    useSignMessageRequests,
+} from '@demo/wallet-core';
+
+import { DashboardHeader } from '../dashboard-header';
+import { BalanceTotal } from '../balance-total';
+import { DashboardActions } from '../dashboard-actions';
+import { DashboardAssets } from '../dashboard-assets';
+
+import {
+    ConnectRequestModal,
+    TransactionRequestModal,
+    SignDataRequestModal,
+    SignMessageRequestModal,
+} from '@/features/ton-connect';
+import { NewLayout } from '@/core/components/shared/new-layout';
+import { NftsCard } from '@/features/nft';
+import { TransactionHistory } from '@/features/transactions';
+import { useTonWallet } from '@/core/hooks';
+
+export const WalletDashboard: React.FC = () => {
+    // Re-initialize the wallet when the dashboard mounts (gated behind the unlocked route), so
+    // WalletKit + currentWallet are restored when booting straight onto it — e.g. an extension
+    // popup reopen. Must NOT move to AppRouter: useTonWallet inits once and at the root it fires
+    // before the store rehydrates (isUnlocked=false), skipping loadAllWallets with no retry.
+    useTonWallet();
+
+    const { getAvailableWallets, savedWallets, getActiveWallet } = useWallet();
+    const activeWallet = getActiveWallet();
+    const { pendingConnectRequest, isConnectModalOpen, approveConnectRequest, rejectConnectRequest } = useTonConnect();
+    const { pendingTransactionRequest, isTransactionModalOpen } = useTransactionRequests();
+    const { pendingSignDataRequest, isSignDataModalOpen, approveSignDataRequest, rejectSignDataRequest } =
+        useSignDataRequests();
+    const { pendingSignMessageRequest, isSignMessageModalOpen } = useSignMessageRequests();
+
+    return (
+        <NewLayout header={<DashboardHeader />}>
+            <div className="space-y-4">
+                <BalanceTotal />
+                <DashboardActions />
+                <DashboardAssets />
+                <NftsCard />
+                <TransactionHistory />
+            </div>
+
+            {pendingConnectRequest && (
+                <ConnectRequestModal
+                    request={pendingConnectRequest}
+                    availableWallets={getAvailableWallets()}
+                    savedWallets={savedWallets}
+                    currentWallet={getAvailableWallets().find((w) => w.getWalletId() === activeWallet?.kitWalletId)}
+                    isOpen={isConnectModalOpen}
+                    onApprove={approveConnectRequest}
+                    onReject={rejectConnectRequest}
+                />
+            )}
+
+            {pendingTransactionRequest && (
+                <TransactionRequestModal
+                    request={pendingTransactionRequest}
+                    savedWallets={savedWallets}
+                    isOpen={isTransactionModalOpen}
+                />
+            )}
+
+            {pendingSignDataRequest && (
+                <SignDataRequestModal
+                    request={pendingSignDataRequest}
+                    savedWallets={savedWallets}
+                    isOpen={isSignDataModalOpen}
+                    onApprove={approveSignDataRequest}
+                    onReject={rejectSignDataRequest}
+                />
+            )}
+
+            {pendingSignMessageRequest && (
+                <SignMessageRequestModal
+                    request={pendingSignMessageRequest}
+                    savedWallets={savedWallets}
+                    isOpen={isSignMessageModalOpen}
+                />
+            )}
+        </NewLayout>
+    );
+};
diff --git a/apps/demo-wallet/src/features/dashboard/index.ts b/apps/demo-wallet/src/features/dashboard/index.ts
new file mode 100644
index 000000000..e3c0b0de1
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/wallet-dashboard';
+export * from './components/animated-balance';
+export * from './components/balance-total';
+export * from './components/dashboard-action-button';
+export * from './components/dashboard-actions';
+export * from './components/dashboard-assets';
+export * from './components/dashboard-header';
diff --git a/apps/demo-wallet/src/features/jettons/components/jetton-flow/index.ts b/apps/demo-wallet/src/features/jettons/components/jetton-flow/index.ts
new file mode 100644
index 000000000..4c6b99fa0
--- /dev/null
+++ b/apps/demo-wallet/src/features/jettons/components/jetton-flow/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './jetton-flow';
diff --git a/apps/demo-wallet/src/components/JettonFlow.tsx b/apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx
similarity index 83%
rename from apps/demo-wallet/src/components/JettonFlow.tsx
rename to apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx
index b16a7785d..8675e3e69 100644
--- a/apps/demo-wallet/src/components/JettonFlow.tsx
+++ b/apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx
@@ -10,8 +10,9 @@ import { memo } from 'react';
 import type { Address } from '@ton/core';
 import type { TransactionTraceMoneyFlowItem } from '@ton/walletkit';
 
-import { resolveTokenAddress, TON_INFO, useJettonInfo } from '../hooks/useJettonInfo';
-import { formatUnits } from '../utils/units';
+import { resolveTokenAddress, GRAM_INFO, useJettonInfo } from '../../hooks/use-jetton-info';
+
+import { formatUnits } from '@/core/utils/units';
 
 export const JettonNameDisplay = memo(function JettonNameDisplay({
     jettonAddress,
@@ -46,10 +47,10 @@ export const JettonImage = memo(function JettonImage({
     jettonAddress: Address | string | undefined;
 }) {
     const jettonInfo = useJettonInfo(resolveTokenAddress(jettonAddress));
-    if (!jettonInfo?.image) {
-        return <img src={TON_INFO.image} alt={TON_INFO.name} className="w-8 h-8 rounded-full" />;
+    if (!jettonInfo?.images?.[0]) {
+        return <img src={GRAM_INFO.images?.[0]} alt={GRAM_INFO.name} className="w-8 h-8 rounded-full" />;
     }
-    return <img src={jettonInfo.image} alt={jettonInfo.name} className="w-8 h-8 rounded-full" />;
+    return <img src={jettonInfo.images[0]} alt={jettonInfo.name} className="w-8 h-8 rounded-full" />;
 });
 
 const JettonFlowItem = memo(function JettonFlowItem({
@@ -75,9 +76,9 @@ const JettonFlowItem = memo(function JettonFlowItem({
 
 export const JettonFlow = memo(function JettonFlow({ transfers }: { transfers: TransactionTraceMoneyFlowItem[] }) {
     return (
-        <div className="mt-2">
-            <div className="font-semibold mb-1">Money Flow:</div>
-            <div className="flex flex-col gap-2">
+        <div className="rounded-2xl bg-gray-100 p-4">
+            <p className="text-xs font-medium uppercase tracking-wide text-gray-400">Money flow</p>
+            <div className="mt-3 flex flex-col gap-3">
                 {transfers?.length > 0
                     ? transfers.map((transfer) =>
                           transfer.assetType === 'jetton' ? (
diff --git a/apps/demo-wallet/src/features/jettons/components/jetton-row/index.ts b/apps/demo-wallet/src/features/jettons/components/jetton-row/index.ts
new file mode 100644
index 000000000..bf18bdeb8
--- /dev/null
+++ b/apps/demo-wallet/src/features/jettons/components/jetton-row/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './jetton-row';
diff --git a/apps/demo-wallet/src/components/JettonRow.tsx b/apps/demo-wallet/src/features/jettons/components/jetton-row/jetton-row.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/JettonRow.tsx
rename to apps/demo-wallet/src/features/jettons/components/jetton-row/jetton-row.tsx
index 1512aac33..344b1e10c 100644
--- a/apps/demo-wallet/src/components/JettonRow.tsx
+++ b/apps/demo-wallet/src/features/jettons/components/jetton-row/jetton-row.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import type { Jetton } from '@ton/walletkit';
 
-import { useFormattedJetton } from '@/hooks/useFormattedJetton';
+import { useFormattedJetton } from '@/features/jettons';
 
 interface JettonRowProps {
     jetton: Jetton;
diff --git a/apps/demo-wallet/src/hooks/useFormattedJetton.ts b/apps/demo-wallet/src/features/jettons/hooks/use-formatted-jetton.ts
similarity index 93%
rename from apps/demo-wallet/src/hooks/useFormattedJetton.ts
rename to apps/demo-wallet/src/features/jettons/hooks/use-formatted-jetton.ts
index 42c3f01d7..b485a8628 100644
--- a/apps/demo-wallet/src/hooks/useFormattedJetton.ts
+++ b/apps/demo-wallet/src/features/jettons/hooks/use-formatted-jetton.ts
@@ -10,7 +10,7 @@ import { useCallback, useMemo } from 'react';
 import type { Jetton } from '@ton/walletkit';
 import { useJettons } from '@demo/wallet-core';
 
-import { getFormattedJettonInfo } from '@/utils/jetton';
+import { getFormattedJettonInfo } from '../utils/jetton';
 
 export const useFormatJetton = () => {
     const { formatJettonAmount } = useJettons();
diff --git a/apps/demo-wallet/src/hooks/useJettonInfo.ts b/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
similarity index 75%
rename from apps/demo-wallet/src/hooks/useJettonInfo.ts
rename to apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
index e2e8c284d..c6a8777ed 100644
--- a/apps/demo-wallet/src/hooks/useJettonInfo.ts
+++ b/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
@@ -12,17 +12,19 @@ import type { JettonInfo } from '@ton/walletkit';
 import { getChainNetwork, useWalletKit, useWalletStore } from '@demo/wallet-core';
 import type { NetworkType } from '@demo/wallet-core';
 
-import { normalizeAddress } from '../utils/formatters';
+import { normalizeAddress } from '@/core/utils/formatters';
 
-export type TokenInfo = Partial<Omit<JettonInfo, 'decimals'>> & {
+export type TokenInfo = Partial<Omit<JettonInfo, 'decimals' | 'image'>> & {
     decimals?: number;
+    /** Candidate icon URLs, best-first. Derived from the kit's single `image`. */
+    images?: string[];
 };
 
-export const TON_INFO: TokenInfo = {
-    name: 'TON',
-    symbol: 'TON',
+export const GRAM_INFO: TokenInfo = {
+    name: 'Gram',
+    symbol: 'GRAM',
     decimals: 9,
-    image: '/ton.png',
+    images: ['/gram.svg'],
 };
 
 export function useActiveWalletNetwork(): NetworkType {
@@ -52,10 +54,15 @@ export function useJettonInfo(tokenAddress: Address | string | null | undefined)
             return;
         }
 
+        if (typeof tokenAddress === 'string' && tokenAddress.toUpperCase() === 'TON') {
+            setTokenInfo(GRAM_INFO);
+            return;
+        }
+
         async function updateTokenInfo() {
             if (!tokenAddress) return;
             const info = await walletKit?.jettons?.getJettonInfo(tokenAddress.toString(), chainNetwork);
-            setTokenInfo(info ?? null);
+            setTokenInfo(info ? { ...info, images: info.image ? [info.image] : undefined } : null);
         }
 
         updateTokenInfo();
diff --git a/apps/demo-wallet/src/features/jettons/index.ts b/apps/demo-wallet/src/features/jettons/index.ts
new file mode 100644
index 000000000..407b6aae6
--- /dev/null
+++ b/apps/demo-wallet/src/features/jettons/index.ts
@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/jetton-row';
+export * from './components/jetton-flow';
+export * from './hooks/use-jetton-info';
+export * from './hooks/use-formatted-jetton';
+export * from './utils/jetton';
diff --git a/apps/demo-wallet/src/utils/jetton.ts b/apps/demo-wallet/src/features/jettons/utils/jetton.ts
similarity index 89%
rename from apps/demo-wallet/src/utils/jetton.ts
rename to apps/demo-wallet/src/features/jettons/utils/jetton.ts
index 6f4f89a41..4e63287be 100644
--- a/apps/demo-wallet/src/utils/jetton.ts
+++ b/apps/demo-wallet/src/features/jettons/utils/jetton.ts
@@ -8,6 +8,8 @@
 
 import type { Jetton } from '@ton/walletkit';
 
+import { tokenImageUrls } from '@/core/utils';
+
 export const getJettonsSymbol = (jetton: Jetton): string | undefined => {
     if (!jetton?.info?.symbol) {
         return;
@@ -30,14 +32,7 @@ export const getJettonsImage = (jetton: Jetton): string | undefined => {
     }
 
     const img = jetton.info.image;
-    return (
-        img.url ||
-        (img.data ? `data:image/png;base64,${img.data}` : undefined) ||
-        img.mediumUrl ||
-        img.largeUrl ||
-        img.smallUrl ||
-        ''
-    );
+    return tokenImageUrls(img)[0] || (img.data ? `data:image/png;base64,${img.data}` : undefined) || '';
 };
 
 export const getFormattedJettonInfo =
diff --git a/apps/demo-wallet/src/features/ledger/components/ledger-screen/index.ts b/apps/demo-wallet/src/features/ledger/components/ledger-screen/index.ts
new file mode 100644
index 000000000..73092c9c7
--- /dev/null
+++ b/apps/demo-wallet/src/features/ledger/components/ledger-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export { LedgerScreen } from './ledger-screen';
diff --git a/apps/demo-wallet/src/features/ledger/components/ledger-screen/ledger-screen.tsx b/apps/demo-wallet/src/features/ledger/components/ledger-screen/ledger-screen.tsx
new file mode 100644
index 000000000..09456eb98
--- /dev/null
+++ b/apps/demo-wallet/src/features/ledger/components/ledger-screen/ledger-screen.tsx
@@ -0,0 +1,100 @@
+/**
+ * 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 React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Minus, Plus } from 'lucide-react';
+import { useAuth } from '@demo/wallet-core';
+import type { NetworkType } from '@demo/wallet-core';
+
+import { CenteredScreen } from '@/core/components/shared/centered-screen';
+import { Button } from '@/core/components/ui/button';
+import { NetworkSelector } from '@/features/wallets';
+import { useTonWallet } from '@/core/hooks';
+
+/** Dedicated screen for connecting a Ledger hardware wallet. */
+export const LedgerScreen: React.FC = () => {
+    const navigate = useNavigate();
+    const { createLedgerWallet } = useTonWallet();
+    const { ledgerAccountNumber, setLedgerAccountNumber, setUseWalletInterfaceType } = useAuth();
+
+    const [network, setNetwork] = useState<NetworkType>('mainnet');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    const handleConnect = async () => {
+        setError('');
+        setIsLoading(true);
+        try {
+            setUseWalletInterfaceType('ledger');
+            await createLedgerWallet(network);
+            navigate('/wallet');
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to connect Ledger');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const footer = (
+        <Button fullWidth onClick={handleConnect} disabled={isLoading}>
+            {isLoading ? 'Connecting…' : 'Connect'}
+        </Button>
+    );
+
+    return (
+        <CenteredScreen onBack={() => navigate(-1)} footer={footer}>
+            <div className="px-6">
+                <div className="text-center">
+                    <h1 className="text-2xl font-bold text-gray-900">Connect Ledger</h1>
+                    <p className="mt-2 text-base text-gray-500">Connect your Ledger hardware wallet to continue.</p>
+                </div>
+
+                <div className="mt-6 space-y-2">
+                    <NetworkSelector value={network} onChange={setNetwork} compact />
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium text-gray-700">Account</span>
+                        <div className="flex items-center gap-3">
+                            <button
+                                type="button"
+                                onClick={() => setLedgerAccountNumber(Math.max(0, (ledgerAccountNumber || 0) - 1))}
+                                disabled={(ledgerAccountNumber || 0) === 0}
+                                aria-label="Decrease account"
+                                className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-gray-200 disabled:opacity-40 transition-colors"
+                            >
+                                <Minus className="w-4 h-4" />
+                            </button>
+                            <span className="w-6 text-center text-base font-semibold tabular-nums">
+                                {ledgerAccountNumber || 0}
+                            </span>
+                            <button
+                                type="button"
+                                onClick={() => setLedgerAccountNumber((ledgerAccountNumber || 0) + 1)}
+                                aria-label="Increase account"
+                                className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-gray-200 transition-colors"
+                            >
+                                <Plus className="w-4 h-4" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-2xl p-4">
+                    <h3 className="text-sm font-semibold text-yellow-800 mb-2">Before you continue:</h3>
+                    <ul className="text-sm text-yellow-700 space-y-1 list-disc pl-5">
+                        <li>Connect Ledger via USB</li>
+                        <li>Unlock it with your PIN</li>
+                        <li>Open the TON app</li>
+                    </ul>
+                </div>
+
+                {error && <p className="mt-4 text-center text-sm text-red-500">{error}</p>}
+            </div>
+        </CenteredScreen>
+    );
+};
diff --git a/apps/demo-wallet/src/features/ledger/index.ts b/apps/demo-wallet/src/features/ledger/index.ts
new file mode 100644
index 000000000..1b1afec1b
--- /dev/null
+++ b/apps/demo-wallet/src/features/ledger/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/ledger-screen';
diff --git a/apps/demo-wallet/src/features/nft/components/nft-screen/index.ts b/apps/demo-wallet/src/features/nft/components/nft-screen/index.ts
new file mode 100644
index 000000000..f5ed64dc3
--- /dev/null
+++ b/apps/demo-wallet/src/features/nft/components/nft-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './nft-screen';
diff --git a/apps/demo-wallet/src/features/nft/components/nft-screen/nft-screen.tsx b/apps/demo-wallet/src/features/nft/components/nft-screen/nft-screen.tsx
new file mode 100644
index 000000000..eb18bed9c
--- /dev/null
+++ b/apps/demo-wallet/src/features/nft/components/nft-screen/nft-screen.tsx
@@ -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 { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useNfts } from '@demo/wallet-core';
+
+import { NftTile } from '../nft-tile';
+
+import { NewLayout } from '@/core/components/shared/new-layout';
+import { ScreenHeader } from '@/core/components/shared/screen-header';
+
+/** Full NFTs page: every NFT held by the active wallet, as a grid. */
+export const NftsScreen: FC = () => {
+    const navigate = useNavigate();
+    const { userNfts, formatNftIndex } = useNfts();
+
+    return (
+        <NewLayout header={<ScreenHeader title="NFTs" onBack={() => navigate('/wallet')} />}>
+            {userNfts.length === 0 ? (
+                <p className="py-12 text-center text-sm text-gray-400">No NFTs yet</p>
+            ) : (
+                <div className="grid grid-cols-2 gap-3">
+                    {userNfts.map((nft) => (
+                        <NftTile key={nft.address} nft={nft} formatNftIndex={formatNftIndex} />
+                    ))}
+                </div>
+            )}
+        </NewLayout>
+    );
+};
diff --git a/apps/demo-wallet/src/features/nft/components/nft-tile/index.ts b/apps/demo-wallet/src/features/nft/components/nft-tile/index.ts
new file mode 100644
index 000000000..cdbc48053
--- /dev/null
+++ b/apps/demo-wallet/src/features/nft/components/nft-tile/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './nft-tile';
diff --git a/apps/demo-wallet/src/features/nft/components/nft-tile/nft-tile.tsx b/apps/demo-wallet/src/features/nft/components/nft-tile/nft-tile.tsx
new file mode 100644
index 000000000..fc16749e6
--- /dev/null
+++ b/apps/demo-wallet/src/features/nft/components/nft-tile/nft-tile.tsx
@@ -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 React from 'react';
+import type { NFT } from '@ton/walletkit';
+
+import { FallbackImage } from '@/core/components/ui/fallback-image';
+import { tokenImageUrls } from '@/core/utils';
+
+const getNftImageSources = (nft: NFT): string[] => {
+    const img = nft.info?.image;
+    if (!img) return [];
+    return [...tokenImageUrls(img), ...(img.data ? [`data:image/png;base64,${img.data}`] : [])];
+};
+
+const getNftName = (nft: NFT, formatNftIndex: (index: string) => string): string => {
+    if (nft.info?.name) return nft.info.name;
+    if (nft.index) return `NFT ${formatNftIndex(nft.index)}`;
+    return 'NFT';
+};
+
+interface NftTileProps {
+    nft: NFT;
+    formatNftIndex: (index: string) => string;
+}
+
+/**
+ * NFT card (image + name + index). Width follows the container — wrapped for the
+ * horizontal-scroll preview on the dashboard, gridded on the full NFTs page.
+ */
+export const NftTile: React.FC<NftTileProps> = ({ nft, formatNftIndex }) => {
+    const name = getNftName(nft, formatNftIndex);
+    const indexLabel = nft.index ? formatNftIndex(nft.index) : null;
+
+    return (
+        <article className="bg-gray-100 rounded-2xl overflow-hidden">
+            <div className="aspect-square w-full overflow-hidden bg-gray-300">
+                <FallbackImage src={getNftImageSources(nft)} alt={name} className="w-full h-full object-cover" />
+            </div>
+            <div className="p-2">
+                <div className="text-sm font-semibold text-gray-900 truncate">{name}</div>
+                {indexLabel && (
+                    <div className="text-xs text-gray-500">
+                        {indexLabel.length > 10 ? `${indexLabel.slice(0, 6)}…` : indexLabel}
+                    </div>
+                )}
+            </div>
+        </article>
+    );
+};
diff --git a/apps/demo-wallet/src/features/nft/components/nfts-card/index.ts b/apps/demo-wallet/src/features/nft/components/nfts-card/index.ts
new file mode 100644
index 000000000..1708339a7
--- /dev/null
+++ b/apps/demo-wallet/src/features/nft/components/nfts-card/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './nfts-card';
diff --git a/apps/demo-wallet/src/features/nft/components/nfts-card/nfts-card.tsx b/apps/demo-wallet/src/features/nft/components/nfts-card/nfts-card.tsx
new file mode 100644
index 000000000..18fb21fef
--- /dev/null
+++ b/apps/demo-wallet/src/features/nft/components/nfts-card/nfts-card.tsx
@@ -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 React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { useNfts } from '@demo/wallet-core';
+
+import { NftTile } from '../nft-tile';
+
+/** Dashboard NFTs preview: a horizontal-scroll strip; renders nothing when the wallet has no NFTs. */
+export const NftsCard: React.FC = () => {
+    const navigate = useNavigate();
+    const { userNfts, formatNftIndex } = useNfts();
+
+    if (userNfts.length === 0) {
+        return null;
+    }
+
+    return (
+        <section>
+            <button
+                type="button"
+                onClick={() => navigate('/wallet/nft')}
+                className="flex items-center gap-1 mb-2"
+                aria-label="View all NFTs"
+            >
+                <h2 className="text-base font-semibold text-gray-900">NFTs</h2>
+                <ChevronRight className="w-4 h-4 text-gray-400" />
+            </button>
+
+            <div className="flex gap-3 overflow-x-auto -mx-4 px-4 pb-1 [&::-webkit-scrollbar]:hidden [scrollbar-width:none]">
+                {userNfts.map((nft) => (
+                    <div key={nft.address} className="w-36 flex-shrink-0">
+                        <NftTile nft={nft} formatNftIndex={formatNftIndex} />
+                    </div>
+                ))}
+            </div>
+        </section>
+    );
+};
diff --git a/apps/demo-wallet/src/features/nft/index.ts b/apps/demo-wallet/src/features/nft/index.ts
new file mode 100644
index 000000000..bb51a9e3b
--- /dev/null
+++ b/apps/demo-wallet/src/features/nft/index.ts
@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/nfts-card';
+export * from './components/nft-tile';
+export * from './components/nft-screen';
diff --git a/apps/demo-wallet/src/components/DisconnectNotifications.tsx b/apps/demo-wallet/src/features/notifications/components/disconnect-notifications/disconnect-notifications.tsx
similarity index 97%
rename from apps/demo-wallet/src/components/DisconnectNotifications.tsx
rename to apps/demo-wallet/src/features/notifications/components/disconnect-notifications/disconnect-notifications.tsx
index 6caa17241..5ed4d0c9d 100644
--- a/apps/demo-wallet/src/components/DisconnectNotifications.tsx
+++ b/apps/demo-wallet/src/features/notifications/components/disconnect-notifications/disconnect-notifications.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { useDisconnectEvents } from '@demo/wallet-core';
 
-import { Button } from './Button';
+import { Button } from '@/core/components/ui/button';
 
 interface DisconnectNotificationsProps {
     className?: string;
diff --git a/apps/demo-wallet/src/features/notifications/components/disconnect-notifications/index.ts b/apps/demo-wallet/src/features/notifications/components/disconnect-notifications/index.ts
new file mode 100644
index 000000000..6ad51bd0f
--- /dev/null
+++ b/apps/demo-wallet/src/features/notifications/components/disconnect-notifications/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './disconnect-notifications';
diff --git a/apps/demo-wallet/src/features/notifications/components/streaming-status/index.ts b/apps/demo-wallet/src/features/notifications/components/streaming-status/index.ts
new file mode 100644
index 000000000..6e6ceab14
--- /dev/null
+++ b/apps/demo-wallet/src/features/notifications/components/streaming-status/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './streaming-status';
diff --git a/apps/demo-wallet/src/components/StreamingStatus.tsx b/apps/demo-wallet/src/features/notifications/components/streaming-status/streaming-status.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/StreamingStatus.tsx
rename to apps/demo-wallet/src/features/notifications/components/streaming-status/streaming-status.tsx
diff --git a/apps/demo-wallet/src/features/notifications/hooks/use-received-toasts.tsx b/apps/demo-wallet/src/features/notifications/hooks/use-received-toasts.tsx
new file mode 100644
index 000000000..22ffb7ce8
--- /dev/null
+++ b/apps/demo-wallet/src/features/notifications/hooks/use-received-toasts.tsx
@@ -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 { useEffect, useRef } from 'react';
+import { ArrowDownLeft } from 'lucide-react';
+import { toast } from 'sonner';
+import { useJettons, useRates, useWallet } from '@demo/wallet-core';
+import type { RateEntry } from '@demo/wallet-core';
+
+import { getJettonsSymbol } from '@/features/jettons';
+import { formatLargeValue, toDecimal } from '@/core/utils';
+
+const GRAM_KEY = 'GRAM';
+const GRAM_DECIMALS = 9;
+
+const safeBigInt = (value: string | undefined): bigint | null => {
+    if (!value) return null;
+    try {
+        return BigInt(value);
+    } catch {
+        return null;
+    }
+};
+
+const ReceivedIcon = (
+    <span className="flex items-center justify-center w-5 h-5 rounded-full bg-green-100">
+        <ArrowDownLeft className="w-3.5 h-3.5 text-green-600" strokeWidth={2.5} />
+    </span>
+);
+
+const toastReceived = (amount: number, symbol: string, rate?: number): void => {
+    const fiat = rate ? ` ($${formatLargeValue(String(amount * rate), 2, 2)})` : '';
+    toast(`You received ${formatLargeValue(String(amount), 4)} ${symbol}${fiat}`.trim(), { icon: ReceivedIcon });
+};
+
+/**
+ * Shows a "You received …" toast whenever an asset balance grows. Tracks the
+ * previous raw balance per asset; the first observation after a load (or wallet
+ * switch) just seeds the baseline without toasting. Sends/decreases are ignored.
+ */
+export const useReceivedToasts = (): void => {
+    const { address, balance } = useWallet();
+    const { userJettons, lastJettonsUpdate } = useJettons();
+    const { entries: rates } = useRates();
+
+    const balancesRef = useRef<Map<string, bigint>>(new Map());
+    const tonSeededRef = useRef(false);
+    const jettonsSeededRef = useRef(false);
+
+    // Always read the latest rates without making them an effect dependency.
+    const ratesRef = useRef<Record<string, RateEntry>>(rates);
+    ratesRef.current = rates;
+
+    // New wallet → reset the baseline so cross-wallet diffs never toast.
+    useEffect(() => {
+        balancesRef.current.clear();
+        tonSeededRef.current = false;
+        jettonsSeededRef.current = false;
+    }, [address]);
+
+    // TON balance.
+    useEffect(() => {
+        const next = safeBigInt(balance);
+        if (next === null) return;
+
+        const prev = balancesRef.current.get(GRAM_KEY);
+        balancesRef.current.set(GRAM_KEY, next);
+
+        if (!tonSeededRef.current) {
+            tonSeededRef.current = true;
+            return;
+        }
+        if (prev !== undefined && next > prev) {
+            toastReceived(toDecimal(next - prev, GRAM_DECIMALS), 'GRAM', ratesRef.current[GRAM_KEY]?.rate);
+        }
+    }, [balance]);
+
+    // Jettons.
+    useEffect(() => {
+        if (lastJettonsUpdate === 0) return; // not loaded yet — avoid false baseline
+
+        if (!jettonsSeededRef.current) {
+            for (const jetton of userJettons) {
+                const value = safeBigInt(jetton.balance);
+                if (value !== null) balancesRef.current.set(jetton.address, value);
+            }
+            jettonsSeededRef.current = true;
+            return;
+        }
+
+        for (const jetton of userJettons) {
+            const next = safeBigInt(jetton.balance);
+            if (next === null) continue;
+
+            const prev = balancesRef.current.get(jetton.address) ?? 0n;
+            balancesRef.current.set(jetton.address, next);
+
+            if (next > prev) {
+                const decimals = jetton.decimalsNumber ?? 9;
+                const symbol = getJettonsSymbol(jetton) ?? '';
+                toastReceived(toDecimal(next - prev, decimals), symbol, ratesRef.current[jetton.address]?.rate);
+            }
+        }
+    }, [userJettons, lastJettonsUpdate]);
+};
diff --git a/apps/demo-wallet/src/features/notifications/index.ts b/apps/demo-wallet/src/features/notifications/index.ts
new file mode 100644
index 000000000..735d6221c
--- /dev/null
+++ b/apps/demo-wallet/src/features/notifications/index.ts
@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/streaming-status';
+export * from './components/disconnect-notifications';
+export * from './hooks/use-received-toasts';
diff --git a/apps/demo-wallet/src/features/send/components/amount-field/amount-field.tsx b/apps/demo-wallet/src/features/send/components/amount-field/amount-field.tsx
new file mode 100644
index 000000000..f36cafd4c
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/amount-field/amount-field.tsx
@@ -0,0 +1,60 @@
+/**
+ * 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 React from 'react';
+
+import type { TokenOption } from '../../types';
+
+import { CenteredAmountInput } from '@/core/components/ui/centered-amount-input';
+import { AmountReversed } from '@/core/components/ui/amount-reversed';
+import { AmountPresets } from '@/core/components/shared/amount-presets';
+
+/** Clamp a numeric amount to a clean decimal string (no trailing zeros, no exponent). */
+const toAmountString = (value: number, decimals: number): string => {
+    if (!Number.isFinite(value) || value <= 0) return '0';
+    const fixed = value.toFixed(Math.min(decimals, 9));
+    return fixed.includes('.') ? fixed.replace(/\.?0+$/, '') : fixed;
+};
+
+interface AmountFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+    token: TokenOption;
+}
+
+/** Centered amount input with a fiat sub-line and percentage presets. */
+export const AmountField: React.FC<AmountFieldProps> = ({ value, onChange, token }) => {
+    const amountNumber = parseFloat(value) || 0;
+    const fiatValue = token.rate !== undefined ? String(amountNumber * token.rate) : undefined;
+    const presets = [
+        { label: '10%', amount: toAmountString(token.balance * 0.1, token.decimals) },
+        { label: '25%', amount: toAmountString(token.balance * 0.25, token.decimals) },
+        { label: '50%', amount: toAmountString(token.balance * 0.5, token.decimals) },
+        { label: 'MAX', amount: toAmountString(token.maxSendable, token.decimals) },
+    ];
+
+    const handleAmountChange = (raw: string) => {
+        // Keep digits and a single decimal separator (the input is free-form text).
+        onChange(raw.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1'));
+    };
+
+    return (
+        <div className="space-y-4">
+            <div className="space-y-2 py-2">
+                <CenteredAmountInput
+                    value={value}
+                    onValueChange={handleAmountChange}
+                    ticker={token.symbol}
+                    baseTestId="send-amount"
+                />
+                {fiatValue !== undefined && <AmountReversed value={fiatValue} symbol="≈$" decimals={2} />}
+            </div>
+            <AmountPresets presets={presets} onPresetSelect={onChange} />
+        </div>
+    );
+};
diff --git a/apps/demo-wallet/src/features/send/components/amount-field/index.ts b/apps/demo-wallet/src/features/send/components/amount-field/index.ts
new file mode 100644
index 000000000..1dca13fbd
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/amount-field/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './amount-field';
diff --git a/apps/demo-wallet/src/features/send/components/gasless-options/gasless-options.tsx b/apps/demo-wallet/src/features/send/components/gasless-options/gasless-options.tsx
new file mode 100644
index 000000000..79854be0e
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/gasless-options/gasless-options.tsx
@@ -0,0 +1,91 @@
+/**
+ * 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 React from 'react';
+
+import type { UseGaslessJettonSendResult } from '../../hooks/use-gasless-jetton-send';
+
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/core/components/ui/select';
+import { useJettonInfo } from '@/features/jettons';
+
+/** Resolves a fee-asset's ticker, falling back to a short address. */
+const useFeeAssetLabel = (address: string): string => {
+    const info = useJettonInfo(address);
+    return info?.symbol || `${address.slice(0, 4)}…${address.slice(-4)}`;
+};
+
+const FeeAssetLabel: React.FC<{ address: string }> = ({ address }) => <>{useFeeAssetLabel(address)}</>;
+
+const FeeAssetOption: React.FC<{ address: string }> = ({ address }) => (
+    <SelectItem value={address} className="text-sm">
+        {useFeeAssetLabel(address)}
+    </SelectItem>
+);
+
+interface GaslessOptionsProps {
+    gasless: UseGaslessJettonSendResult;
+}
+
+/** Optional gasless block: the toggle, a fee-asset picker, and the resolved gas fee. */
+export const GaslessOptions: React.FC<GaslessOptionsProps> = ({ gasless }) => {
+    if (!gasless.canUse) return null;
+
+    return (
+        <div className="space-y-3">
+            <label className="flex items-center gap-2 text-sm font-medium text-gray-700">
+                <input
+                    type="checkbox"
+                    checked={gasless.enabled}
+                    onChange={(e) => gasless.setEnabled(e.target.checked)}
+                    data-testid="gasless-toggle"
+                />
+                <span>Gasless — pay the fee in a jetton</span>
+            </label>
+
+            {gasless.effective && (
+                <>
+                    <div className="space-y-1">
+                        <span className="block px-1 text-xs text-gray-500">Fee asset</span>
+                        <Select
+                            value={gasless.feeAsset ?? ''}
+                            onValueChange={gasless.setFeeAsset}
+                            disabled={gasless.supportedAssets.length === 0}
+                        >
+                            <SelectTrigger
+                                className="w-full rounded-2xl border-2 border-transparent bg-gray-100 p-3.5 text-base font-medium text-gray-900 hover:bg-gray-100 focus-visible:border-blue-500 focus-visible:ring-0 data-[state=open]:border-blue-500"
+                                data-testid="gasless-fee-asset"
+                            >
+                                {gasless.feeAsset ? (
+                                    <FeeAssetLabel address={gasless.feeAsset} />
+                                ) : (
+                                    <span className="text-gray-400">Select</span>
+                                )}
+                            </SelectTrigger>
+                            <SelectContent className="rounded-xl">
+                                {gasless.supportedAssets.map((asset) => (
+                                    <FeeAssetOption key={asset.address} address={asset.address} />
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <div className="flex justify-between text-sm">
+                        <span className="text-gray-500">Gas fee</span>
+                        <span className="font-medium text-gray-900">
+                            {gasless.error ? '—' : gasless.isQuoting ? 'Calculating…' : (gasless.feeFormatted ?? '—')}
+                        </span>
+                    </div>
+                    {gasless.error && (
+                        <p className="text-xs text-red-500" data-testid="gasless-error">
+                            {gasless.error}
+                        </p>
+                    )}
+                </>
+            )}
+        </div>
+    );
+};
diff --git a/apps/demo-wallet/src/features/send/components/gasless-options/index.ts b/apps/demo-wallet/src/features/send/components/gasless-options/index.ts
new file mode 100644
index 000000000..b9c408bf2
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/gasless-options/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './gasless-options';
diff --git a/apps/demo-wallet/src/features/send/components/recipient-field/index.ts b/apps/demo-wallet/src/features/send/components/recipient-field/index.ts
new file mode 100644
index 000000000..de9b27f8b
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/recipient-field/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './recipient-field';
diff --git a/apps/demo-wallet/src/features/send/components/recipient-field/recipient-field.tsx b/apps/demo-wallet/src/features/send/components/recipient-field/recipient-field.tsx
new file mode 100644
index 000000000..5f2e32675
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/recipient-field/recipient-field.tsx
@@ -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 React from 'react';
+
+import { Input } from '@/core/components/ui/input';
+
+interface RecipientFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+    error?: string;
+    /** When provided, renders a "Use my address" shortcut in the header. */
+    onUseMyAddress?: () => void;
+}
+
+/** Recipient address field with an optional "Use my address" shortcut and inline validation. */
+export const RecipientField: React.FC<RecipientFieldProps> = ({ value, onChange, error, onUseMyAddress }) => (
+    <Input.Container error={Boolean(error)}>
+        <Input.Header>
+            <Input.Title>Recipient</Input.Title>
+            {onUseMyAddress && (
+                <button
+                    type="button"
+                    onClick={onUseMyAddress}
+                    className="text-xs font-semibold text-blue-600 hover:text-blue-700"
+                    data-testid="use-my-address"
+                >
+                    Use my address
+                </button>
+            )}
+        </Input.Header>
+        <Input.Field>
+            <Input.Input
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder="EQ…"
+                data-testid="recipient-input"
+            />
+        </Input.Field>
+        {error && <Input.Caption>{error}</Input.Caption>}
+    </Input.Container>
+);
diff --git a/apps/demo-wallet/src/features/send/components/send-transaction/index.ts b/apps/demo-wallet/src/features/send/components/send-transaction/index.ts
new file mode 100644
index 000000000..bc4df5554
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/send-transaction/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './send-transaction';
diff --git a/apps/demo-wallet/src/features/send/components/send-transaction/send-transaction.tsx b/apps/demo-wallet/src/features/send/components/send-transaction/send-transaction.tsx
new file mode 100644
index 000000000..122141ad3
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/send-transaction/send-transaction.tsx
@@ -0,0 +1,239 @@
+/**
+ * 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 React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { isValidAddress } from '@ton/walletkit';
+import type { TONTransferRequest } from '@ton/walletkit';
+import { useAuth, useJettons, useWallet, useWalletKit, getTransactionExplorerUrls } from '@demo/wallet-core';
+import { toast } from 'sonner';
+
+import { useSendToken } from '../../hooks/use-send-token';
+import { useSendTokens } from '../../hooks/use-send-tokens';
+import { TokenSelectButton } from '../token-select-button';
+import { TokenSelectModal } from '../token-select-modal';
+import { AmountField } from '../amount-field';
+import { RecipientField } from '../recipient-field';
+import { GaslessOptions } from '../gasless-options';
+import type { TokenOption } from '../../types';
+
+import { Button } from '@/core/components/ui/button';
+import { NewLayout } from '@/core/components/shared/new-layout';
+import { ScreenHeader } from '@/core/components/shared/screen-header';
+import { createComponentLogger } from '@/core/lib/logger';
+
+const log = createComponentLogger('SendTransaction');
+
+export const SendTransaction: React.FC = () => {
+    const navigate = useNavigate();
+    const walletKit = useWalletKit();
+    const { currentWallet, address, savedWallets, activeWalletId } = useWallet();
+    const { showFastSend } = useAuth();
+    const { loadUserJettons } = useJettons();
+    const network = savedWallets.find((w) => w.id === activeWalletId)?.network ?? 'testnet';
+
+    const [selectedId, setSelectedId] = useState('TON');
+    const [recipient, setRecipient] = useState('');
+    const [amount, setAmount] = useState('');
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [showTokenModal, setShowTokenModal] = useState(false);
+
+    const options = useSendTokens();
+    const selected = options.find((option) => option.id === selectedId) ?? options[0];
+
+    const sender = useSendToken({
+        wallet: currentWallet,
+        walletKit,
+        tokenType: selected.token.type,
+        jetton: selected.token.data,
+        recipient,
+        amount,
+    });
+    const gasless = sender.gasless;
+    const effectiveGasless = gasless.effective;
+
+    useEffect(() => {
+        loadUserJettons();
+    }, [loadUserJettons]);
+
+    // Success toast with explorer links — for flows that return a broadcast hash
+    // immediately (gasless send, fast send).
+    const notifySent = (normalizedHash: string) => {
+        const { tonScan, tonViewer } = getTransactionExplorerUrls(normalizedHash, network);
+        toast.success('Transaction is sent to the network', {
+            description: (
+                <span className="flex gap-3 mt-1">
+                    <a href={tonScan} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline">
+                        TonScan
+                    </a>
+                    <a href={tonViewer} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline">
+                        TonViewer
+                    </a>
+                </span>
+            ),
+        });
+    };
+
+    const handleSelectToken = (option: TokenOption) => {
+        setSelectedId(option.id);
+        setAmount('');
+        setError('');
+        setShowTokenModal(false);
+    };
+
+    const handleSendToSelf = () => {
+        if (address) setRecipient(address);
+    };
+
+    const handleSend = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+        setIsLoading(true);
+
+        try {
+            if (!isValidAddress(recipient)) {
+                throw new Error('Invalid recipient address');
+            }
+
+            const inputAmount = parseFloat(amount);
+            if (!(inputAmount > 0)) {
+                throw new Error('Amount must be greater than 0');
+            }
+            if (inputAmount > selected.balance) {
+                throw new Error('Insufficient balance');
+            }
+
+            // Build + submit, dispatching gasless vs regular inside the hook. Gasless
+            // relays immediately and returns a hash → toast; the regular flow goes
+            // through the preview queue.
+            const result = await sender.send();
+            if (result?.normalizedHash) {
+                notifySent(result.normalizedHash);
+                navigate('/wallet');
+            } else {
+                navigate('/wallet', { state: { message: `${selected.symbol} sent successfully!` } });
+            }
+        } catch (err) {
+            log.error('Send transaction error:', err);
+            setError(err instanceof Error ? err.message : 'Failed to send transaction');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleFastSend = async () => {
+        if (!currentWallet) return;
+        const recipientAddress = recipient.trim() || address;
+        if (!recipientAddress) return;
+        if (!isValidAddress(recipientAddress)) {
+            setError('Invalid recipient address');
+            return;
+        }
+        setError('');
+        setIsLoading(true);
+        try {
+            let result;
+            if (selected.token.type === 'TON') {
+                const params: TONTransferRequest = { recipientAddress, transferAmount: '1000000' };
+                const tx = await currentWallet.createTransferTonTransaction(params);
+                result = await currentWallet.sendTransaction(tx);
+            } else if (selected.token.data) {
+                const tx = await currentWallet.createTransferJettonTransaction({
+                    recipientAddress,
+                    jettonAddress: selected.token.data.address,
+                    transferAmount: '1',
+                });
+                result = await currentWallet.sendTransaction(tx);
+            }
+            if (result?.normalizedHash) {
+                notifySent(result.normalizedHash);
+            }
+        } catch (err) {
+            log.error('Fast send error:', err);
+            setError(err instanceof Error ? err.message : 'Failed to send');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const recipientError = recipient.length > 0 && !isValidAddress(recipient) ? 'Invalid address' : '';
+    const isSendDisabled = sender.isDisabled || Boolean(recipientError);
+    const isSendFastDisabled = !currentWallet || !address;
+
+    return (
+        <NewLayout header={<ScreenHeader title="Send" onBack={() => navigate('/wallet')} />}>
+            {!currentWallet ? (
+                <div className="py-10 text-center">
+                    <p className="mb-3 text-sm text-gray-500">Loading wallet…</p>
+                    <Button variant="secondary" size="sm" onClick={() => navigate('/wallet')}>
+                        Back to dashboard
+                    </Button>
+                </div>
+            ) : (
+                <form onSubmit={handleSend} className="space-y-6">
+                    <TokenSelectButton token={selected} onClick={() => setShowTokenModal(true)} />
+
+                    <AmountField value={amount} onChange={setAmount} token={selected} />
+
+                    <RecipientField
+                        value={recipient}
+                        onChange={setRecipient}
+                        error={recipientError}
+                        onUseMyAddress={address ? handleSendToSelf : undefined}
+                    />
+
+                    <GaslessOptions gasless={gasless} />
+
+                    {error && <p className="text-center text-sm text-red-500">{error}</p>}
+
+                    <div className="space-y-2">
+                        <Button
+                            type="submit"
+                            fullWidth
+                            loading={isLoading || gasless.isSending}
+                            disabled={isSendDisabled}
+                            data-testid="send-submit"
+                        >
+                            {effectiveGasless
+                                ? gasless.isSending
+                                    ? 'Sending…'
+                                    : gasless.isQuoting
+                                      ? 'Quoting…'
+                                      : 'Send Gasless'
+                                : isLoading
+                                  ? 'Sending…'
+                                  : `Send ${selected.symbol}`}
+                        </Button>
+                        {showFastSend && !effectiveGasless && (
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                fullWidth
+                                onClick={handleFastSend}
+                                loading={isLoading}
+                                disabled={isSendFastDisabled}
+                                data-testid="send-fast"
+                            >
+                                Send Fast
+                            </Button>
+                        )}
+                    </div>
+                </form>
+            )}
+
+            <TokenSelectModal
+                isOpened={showTokenModal}
+                onOpenChange={setShowTokenModal}
+                options={options}
+                selectedId={selectedId}
+                onSelect={handleSelectToken}
+            />
+        </NewLayout>
+    );
+};
diff --git a/apps/demo-wallet/src/features/send/components/token-select-button/index.ts b/apps/demo-wallet/src/features/send/components/token-select-button/index.ts
new file mode 100644
index 000000000..282ebce05
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/token-select-button/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './token-select-button';
diff --git a/apps/demo-wallet/src/features/send/components/token-select-button/token-select-button.tsx b/apps/demo-wallet/src/features/send/components/token-select-button/token-select-button.tsx
new file mode 100644
index 000000000..1a0921eee
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/token-select-button/token-select-button.tsx
@@ -0,0 +1,53 @@
+/**
+ * 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 React from 'react';
+import { ChevronDown } from 'lucide-react';
+
+import type { TokenOption } from '../../types';
+
+import { FallbackImage } from '@/core/components/ui/fallback-image';
+import { formatLargeValue } from '@/core/utils';
+
+interface TokenSelectButtonProps {
+    token: TokenOption;
+    onClick: () => void;
+}
+
+/** Send token row: icon + symbol + chevron on the left, balance on the right. Opens the picker. */
+export const TokenSelectButton: React.FC<TokenSelectButtonProps> = ({ token, onClick }) => (
+    <button
+        type="button"
+        onClick={onClick}
+        className="flex w-full items-center justify-between gap-3 rounded-2xl border border-gray-200 bg-transparent p-3.5 transition-colors hover:border-blue-300 focus:border-blue-500 focus:outline-none"
+        data-testid="token-selector"
+    >
+        <span className="flex min-w-0 items-center gap-2">
+            <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-full bg-gray-100">
+                <FallbackImage
+                    src={token.icon}
+                    alt=""
+                    className="h-full w-full object-cover"
+                    fallback={
+                        <span className="flex h-full w-full items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 text-xs font-bold text-white">
+                            {token.fallbackText}
+                        </span>
+                    }
+                />
+            </span>
+            <span className="truncate text-base font-semibold text-gray-900">{token.symbol}</span>
+            <ChevronDown className="h-4 w-4 flex-shrink-0 text-gray-400" />
+        </span>
+        <span className="flex-shrink-0 text-right">
+            <span className="block text-xs text-gray-500">Balance</span>
+            <span className="block text-sm font-semibold text-gray-900 tabular-nums">
+                {formatLargeValue(String(token.balance), 4)} {token.symbol}
+            </span>
+        </span>
+    </button>
+);
diff --git a/apps/demo-wallet/src/features/send/components/token-select-modal/index.ts b/apps/demo-wallet/src/features/send/components/token-select-modal/index.ts
new file mode 100644
index 000000000..c2e4c614e
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/token-select-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './token-select-modal';
diff --git a/apps/demo-wallet/src/features/send/components/token-select-modal/token-select-modal.tsx b/apps/demo-wallet/src/features/send/components/token-select-modal/token-select-modal.tsx
new file mode 100644
index 000000000..23a971384
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/token-select-modal/token-select-modal.tsx
@@ -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 React from 'react';
+
+import type { TokenOption } from '../../types';
+
+import { Modal } from '@/core/components/ui/modal';
+import { AssetRow } from '@/features/assets';
+import { cn } from '@/core/lib/utils';
+import { formatRate } from '@/core/utils';
+
+interface TokenSelectModalProps {
+    isOpened: boolean;
+    onOpenChange: (value: boolean) => void;
+    options: TokenOption[];
+    selectedId: string;
+    onSelect: (option: TokenOption) => void;
+}
+
+/** Drawer/dialog token picker, reusing the assets-page row for visual parity. */
+export const TokenSelectModal: React.FC<TokenSelectModalProps> = ({
+    isOpened,
+    onOpenChange,
+    options,
+    selectedId,
+    onSelect,
+}) => (
+    <Modal.Container isOpened={isOpened} onOpenChange={onOpenChange}>
+        <Modal.Header onClose={() => onOpenChange(false)}>
+            <Modal.Title>Select token</Modal.Title>
+        </Modal.Header>
+        <Modal.Body className="max-h-[60vh] gap-1 overflow-y-auto">
+            {options.map((option) => (
+                <button
+                    key={option.id}
+                    type="button"
+                    onClick={() => onSelect(option)}
+                    className={cn(
+                        'w-full rounded-2xl px-2 text-left transition-colors',
+                        option.id === selectedId ? 'bg-blue-50' : 'hover:bg-gray-50',
+                    )}
+                >
+                    <AssetRow
+                        id={option.id}
+                        icon={option.icon}
+                        fallbackText={option.fallbackText}
+                        name={option.name}
+                        symbol={option.symbol}
+                        amount={option.balance}
+                        rateLabel={option.rate !== undefined ? formatRate(option.rate) : undefined}
+                        fiat={option.rate !== undefined ? option.balance * option.rate : undefined}
+                    />
+                </button>
+            ))}
+        </Modal.Body>
+    </Modal.Container>
+);
diff --git a/apps/demo-wallet/src/hooks/useGaslessJettonSend.ts b/apps/demo-wallet/src/features/send/hooks/use-gasless-jetton-send.ts
similarity index 84%
rename from apps/demo-wallet/src/hooks/useGaslessJettonSend.ts
rename to apps/demo-wallet/src/features/send/hooks/use-gasless-jetton-send.ts
index baa891b08..22e017804 100644
--- a/apps/demo-wallet/src/hooks/useGaslessJettonSend.ts
+++ b/apps/demo-wallet/src/features/send/hooks/use-gasless-jetton-send.ts
@@ -11,8 +11,8 @@ import { isValidAddress, hasSignMessageSupport } from '@ton/walletkit';
 import type { Jetton, Wallet, GaslessSupportedAsset, SendTransactionResponse } from '@ton/walletkit';
 import { useGasless } from '@demo/wallet-core';
 
-import { useJettonInfo } from '@/hooks/useJettonInfo';
-import { formatUnits, parseUnits } from '@/utils/units';
+import { useJettonInfo } from '@/features/jettons';
+import { formatUnits, parseUnits } from '@/core/utils/units';
 
 const QUOTE_DEBOUNCE_MS = 400;
 
@@ -82,33 +82,44 @@ export const useGaslessJettonSend = ({
         return () => gasless.clearGasless();
     }, [gasless.clearGasless]);
 
+    const jettonAddress = jetton?.address;
+    const jettonDecimals = jetton?.decimalsNumber;
+
     // Re-quote (debounced) as the inputs change. The prior quote is invalidated
     // synchronously first, so a stale quote can't be sent during the debounce
-    // window (the Send button gates on `hasQuote`).
+    // window (the Send button gates on `hasQuote`). The store sequences the actual
+    // requests, so a slow earlier response can't overwrite a newer quote.
     useEffect(() => {
         if (!effective) return;
         gasless.clearGaslessQuote();
 
         const inputAmount = parseFloat(amount);
-        const decimals = jetton?.decimalsNumber;
         if (
-            !jetton ||
+            !jettonAddress ||
             !recipient ||
             !isValidAddress(recipient) ||
             !(inputAmount > 0) ||
             !gasless.feeAsset ||
-            !decimals
+            jettonDecimals == null
         ) {
             return;
         }
 
-        const transferAmount = parseUnits(amount, decimals).toString();
-        const jettonAddress = jetton.address;
+        const transferAmount = parseUnits(amount, jettonDecimals).toString();
         const id = setTimeout(() => {
             gasless.getGaslessQuote({ recipientAddress: recipient, jettonAddress, transferAmount });
         }, QUOTE_DEBOUNCE_MS);
         return () => clearTimeout(id);
-    }, [effective, recipient, amount, gasless.feeAsset, jetton, gasless.clearGaslessQuote, gasless.getGaslessQuote]);
+    }, [
+        effective,
+        recipient,
+        amount,
+        gasless.feeAsset,
+        jettonAddress,
+        jettonDecimals,
+        gasless.clearGaslessQuote,
+        gasless.getGaslessQuote,
+    ]);
 
     return {
         canUse,
diff --git a/apps/demo-wallet/src/hooks/useSendToken.ts b/apps/demo-wallet/src/features/send/hooks/use-send-token.ts
similarity index 90%
rename from apps/demo-wallet/src/hooks/useSendToken.ts
rename to apps/demo-wallet/src/features/send/hooks/use-send-token.ts
index d7a71144a..ee9d55dfc 100644
--- a/apps/demo-wallet/src/hooks/useSendToken.ts
+++ b/apps/demo-wallet/src/features/send/hooks/use-send-token.ts
@@ -10,11 +10,12 @@ import { useCallback } from 'react';
 import { toast } from 'sonner';
 import type { ITonWalletKit, Jetton, SendTransactionResponse, Wallet } from '@ton/walletkit';
 
-import { parseUnits } from '@/utils/units';
-import { useGaslessJettonSend } from '@/hooks/useGaslessJettonSend';
-import type { UseGaslessJettonSendResult } from '@/hooks/useGaslessJettonSend';
+import { useGaslessJettonSend } from './use-gasless-jetton-send';
+import type { UseGaslessJettonSendResult } from './use-gasless-jetton-send';
 
-const TON_DECIMALS = 9;
+import { parseUnits } from '@/core/utils/units';
+
+const GRAM_DECIMALS = 9;
 
 interface UseSendTokenParams {
     wallet: Wallet | null | undefined;
@@ -79,7 +80,7 @@ export const useSendToken = ({
         if (tokenType === 'TON') {
             const tx = await wallet.createTransferTonTransaction({
                 recipientAddress: recipient,
-                transferAmount: parseUnits(amount, TON_DECIMALS).toString(),
+                transferAmount: parseUnits(amount, GRAM_DECIMALS).toString(),
             });
             await walletKit.handleNewTransaction(wallet, tx);
             return undefined;
@@ -87,7 +88,7 @@ export const useSendToken = ({
 
         if (jetton) {
             const decimals = jetton.decimalsNumber;
-            if (!decimals) throw new Error('Jetton decimals not found');
+            if (decimals == null) throw new Error('Jetton decimals not found');
 
             const tx = await wallet.createTransferJettonTransaction({
                 recipientAddress: recipient,
diff --git a/apps/demo-wallet/src/features/send/hooks/use-send-tokens.ts b/apps/demo-wallet/src/features/send/hooks/use-send-tokens.ts
new file mode 100644
index 000000000..9dc6d69b1
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/hooks/use-send-tokens.ts
@@ -0,0 +1,62 @@
+/**
+ * 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 { useMemo } from 'react';
+import { useJettons, useRates, useWallet } from '@demo/wallet-core';
+
+import type { TokenOption } from '../types';
+
+import { getJettonsImage, getJettonsName, getJettonsSymbol } from '@/features/jettons';
+import { findRate, toDecimal } from '@/core/utils';
+
+const GRAM_DECIMALS = 9;
+/** Kept aside on a MAX TON send so the transfer still has gas to pay for itself. */
+const TON_GAS_RESERVE = 0.01;
+
+/** Builds the selectable send assets: TON first, then every held jetton. */
+export const useSendTokens = (): TokenOption[] => {
+    const { balance } = useWallet();
+    const { userJettons } = useJettons();
+    const { entries: rates } = useRates();
+
+    return useMemo<TokenOption[]>(() => {
+        const tonAmount = toDecimal(balance, GRAM_DECIMALS);
+        const tonOption: TokenOption = {
+            token: { type: 'TON' },
+            id: 'TON',
+            icon: '/gram.svg',
+            fallbackText: 'GR',
+            name: 'Gram',
+            symbol: 'GRAM',
+            decimals: GRAM_DECIMALS,
+            balance: tonAmount,
+            maxSendable: Math.max(0, tonAmount - TON_GAS_RESERVE),
+            rate: rates['GRAM']?.rate,
+        };
+
+        const jettonOptions = userJettons.map((jetton): TokenOption => {
+            const decimals = jetton.decimalsNumber ?? GRAM_DECIMALS;
+            const amount = toDecimal(jetton.balance, decimals);
+            const symbol = getJettonsSymbol(jetton) ?? '';
+            return {
+                token: { type: 'JETTON', data: jetton },
+                id: jetton.address,
+                icon: getJettonsImage(jetton),
+                fallbackText: symbol.slice(0, 2).toUpperCase() || '??',
+                name: getJettonsName(jetton) ?? symbol,
+                symbol,
+                decimals,
+                balance: amount,
+                maxSendable: amount,
+                rate: findRate(rates, jetton.address)?.rate,
+            };
+        });
+
+        return [tonOption, ...jettonOptions];
+    }, [balance, userJettons, rates]);
+};
diff --git a/apps/demo-wallet/src/features/send/index.ts b/apps/demo-wallet/src/features/send/index.ts
new file mode 100644
index 000000000..a1dc1adb5
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/index.ts
@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/send-transaction';
+export * from './components/token-select-button';
+export * from './components/amount-field';
+export * from './components/recipient-field';
+export * from './components/gasless-options';
+export * from './components/token-select-modal';
+export * from './hooks/use-send-token';
+export * from './hooks/use-send-tokens';
+export * from './hooks/use-gasless-jetton-send';
+export * from './types';
diff --git a/apps/demo-wallet/src/features/send/types.ts b/apps/demo-wallet/src/features/send/types.ts
new file mode 100644
index 000000000..984f5add0
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/types.ts
@@ -0,0 +1,33 @@
+/**
+ * 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 { Jetton } from '@ton/walletkit';
+
+/** The asset the user is sending — TON, or a specific jetton. */
+export interface SelectedToken {
+    type: 'TON' | 'JETTON';
+    data?: Jetton;
+}
+
+/** View-model for one selectable send asset (TON or a held jetton). */
+export interface TokenOption {
+    token: SelectedToken;
+    /** `'TON'` or the jetton address — also the selection key. */
+    id: string;
+    icon?: string;
+    fallbackText: string;
+    name: string;
+    symbol: string;
+    decimals: number;
+    /** Held balance in whole tokens. */
+    balance: number;
+    /** Largest sendable amount (balance minus the gas reserve for TON). */
+    maxSendable: number;
+    /** USD price per token; omitted when there's no rate. */
+    rate?: number;
+}
diff --git a/apps/demo-wallet/src/features/settings/components/settings-dropdown/index.ts b/apps/demo-wallet/src/features/settings/components/settings-dropdown/index.ts
new file mode 100644
index 000000000..41d03d226
--- /dev/null
+++ b/apps/demo-wallet/src/features/settings/components/settings-dropdown/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './settings-dropdown';
diff --git a/apps/demo-wallet/src/features/settings/components/settings-dropdown/settings-dropdown.tsx b/apps/demo-wallet/src/features/settings/components/settings-dropdown/settings-dropdown.tsx
new file mode 100644
index 000000000..bdf059974
--- /dev/null
+++ b/apps/demo-wallet/src/features/settings/components/settings-dropdown/settings-dropdown.tsx
@@ -0,0 +1,223 @@
+/**
+ * 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 React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ChevronRight, KeyRound, Lock, Plus, Trash2 } from 'lucide-react';
+import { useAuth, useWallet } from '@demo/wallet-core';
+
+import { ToggleRow } from '../toggle-row';
+
+import { MnemonicDisplay } from '@/features/wallets';
+import { createComponentLogger } from '@/core/lib/logger';
+import { Modal } from '@/core/components/ui/modal';
+import { SettingsIcon } from '@/core/components/ui/icons';
+import { CreateWalletModal, WALLET_SETUP_ROUTE } from '@/features/wallet-setup';
+import type { CreateWalletMode } from '@/features/wallet-setup';
+
+const log = createComponentLogger('SettingsDropdown');
+
+interface ActionRowProps {
+    icon: React.ReactNode;
+    label: string;
+    onClick: () => void;
+    danger?: boolean;
+    disabled?: boolean;
+}
+
+const ActionRow: React.FC<ActionRowProps> = ({ icon, label, onClick, danger = false, disabled = false }) => (
+    <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={`w-full flex items-center gap-3 px-4 py-3.5 text-left transition-colors disabled:opacity-50 ${
+            danger ? 'text-red-600 hover:bg-red-50' : 'text-gray-900 hover:bg-gray-100/60'
+        }`}
+    >
+        <span className="flex-shrink-0">{icon}</span>
+        <span className="flex-1 text-sm font-semibold">{label}</span>
+        <ChevronRight className={`w-4 h-4 flex-shrink-0 ${danger ? 'text-red-400' : 'text-gray-400'}`} />
+    </button>
+);
+
+export const SettingsDropdown: React.FC = () => {
+    const navigate = useNavigate();
+    const {
+        lock,
+        reset,
+        persistPassword,
+        setPersistPassword,
+        holdToSign,
+        setHoldToSign,
+        showFastSend,
+        setShowFastSend,
+    } = useAuth();
+    const { getDecryptedMnemonic } = useWallet();
+
+    const [panel, setPanel] = useState<'menu' | 'create' | 'mnemonic' | null>(null);
+    const [mnemonic, setMnemonic] = useState<string[]>([]);
+    const [isLoadingMnemonic, setIsLoadingMnemonic] = useState(false);
+    const [mnemonicError, setMnemonicError] = useState('');
+
+    const handleLockWallet = () => {
+        setPanel(null);
+        lock();
+    };
+
+    const handleDeleteWallet = () => {
+        if (window.confirm('Are you sure you want to delete your wallet? This action cannot be undone.')) {
+            setPanel(null);
+            reset();
+        }
+    };
+
+    const handleCreateNewWallet = () => setPanel('create');
+
+    const handleSelectCreateMode = (mode: CreateWalletMode) => {
+        setPanel(null);
+        navigate(WALLET_SETUP_ROUTE[mode]);
+    };
+
+    const handleViewRecoveryPhrase = async () => {
+        setIsLoadingMnemonic(true);
+        setMnemonicError('');
+
+        try {
+            const decryptedMnemonic = await getDecryptedMnemonic();
+            if (decryptedMnemonic) {
+                setMnemonic(decryptedMnemonic);
+                setPanel('mnemonic');
+            } else {
+                setMnemonicError('Unable to retrieve recovery phrase. Please ensure you are logged in.');
+            }
+        } catch (error) {
+            setMnemonicError('Failed to decrypt recovery phrase. Please try again.');
+            log.error('Error retrieving mnemonic:', error);
+        } finally {
+            setIsLoadingMnemonic(false);
+        }
+    };
+
+    const handleCloseMnemonicModal = () => {
+        setPanel(null);
+        setMnemonic([]);
+        setMnemonicError('');
+    };
+
+    return (
+        <>
+            <button
+                onClick={() => setPanel('menu')}
+                className="p-1.5 -mr-1.5 rounded-md hover:bg-gray-100 transition-colors"
+                aria-label="Settings"
+                data-testid="wallet-menu"
+            >
+                <SettingsIcon className="w-6 h-6 text-[#14181F]" />
+            </button>
+
+            <Modal.Container
+                isOpened={panel === 'menu'}
+                onOpenChange={(open) => !open && setPanel(null)}
+                className="px-2"
+            >
+                <Modal.Header onClose={() => setPanel(null)}>
+                    <Modal.Title>Settings</Modal.Title>
+                </Modal.Header>
+
+                <Modal.Body className="gap-3">
+                    <div className="rounded-2xl bg-[#F7F8FA] divide-y divide-gray-200/70 overflow-hidden">
+                        <ToggleRow
+                            testId="auto-lock"
+                            label="Auto-Lock"
+                            description="Lock wallet on app reload (more secure)"
+                            checked={!persistPassword}
+                            onChange={(checked) => setPersistPassword(!checked)}
+                            info={
+                                <>
+                                    <strong>Security notice:</strong> when auto-lock is off, your password is stored
+                                    locally and the wallet stays unlocked. Only use for development.
+                                </>
+                            }
+                        />
+                        <ToggleRow
+                            testId="hold-to-sign"
+                            label="Hold to Sign"
+                            description="Hold the button for 3 seconds to approve transactions"
+                            checked={holdToSign ?? true}
+                            onChange={setHoldToSign}
+                            info={
+                                <>
+                                    <strong>Security notice:</strong> disabling hold-to-sign makes it easier to
+                                    accidentally approve transactions. Only use for testing.
+                                </>
+                            }
+                        />
+                        <ToggleRow
+                            testId="show-fast-send"
+                            label="Show fast send"
+                            description="Show “Send Fast” button (1 nano, no confirmation)"
+                            checked={showFastSend ?? false}
+                            onChange={setShowFastSend}
+                        />
+                    </div>
+
+                    <div className="rounded-2xl bg-[#F7F8FA] divide-y divide-gray-200/70 overflow-hidden">
+                        <ActionRow
+                            icon={<Plus className="w-5 h-5" />}
+                            label="Create New Wallet"
+                            onClick={handleCreateNewWallet}
+                        />
+                        <ActionRow
+                            icon={<KeyRound className="w-5 h-5" />}
+                            label={isLoadingMnemonic ? 'Loading…' : 'View Recovery Phrase'}
+                            onClick={handleViewRecoveryPhrase}
+                            disabled={isLoadingMnemonic}
+                        />
+                        <ActionRow icon={<Lock className="w-5 h-5" />} label="Lock Wallet" onClick={handleLockWallet} />
+                        <ActionRow
+                            icon={<Trash2 className="w-5 h-5" />}
+                            label="Delete Wallet"
+                            onClick={handleDeleteWallet}
+                            danger
+                        />
+                    </div>
+
+                    {mnemonicError && (
+                        <p className="text-red-600 text-sm text-center bg-red-50 p-3 rounded-xl">{mnemonicError}</p>
+                    )}
+                </Modal.Body>
+            </Modal.Container>
+
+            <CreateWalletModal
+                isOpen={panel === 'create'}
+                onClose={() => setPanel(null)}
+                onSelect={handleSelectCreateMode}
+            />
+
+            <Modal.Container
+                isOpened={panel === 'mnemonic'}
+                onOpenChange={(open) => !open && handleCloseMnemonicModal()}
+                className="px-2"
+            >
+                <Modal.Header onClose={handleCloseMnemonicModal}>
+                    <Modal.Title>Recovery Phrase</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    {mnemonic.length > 0 && (
+                        <MnemonicDisplay
+                            mnemonic={mnemonic}
+                            showWarning
+                            warningType="red"
+                            warningText="Never share your recovery phrase with anyone. Anyone with access to these words can control your wallet."
+                        />
+                    )}
+                </Modal.Body>
+            </Modal.Container>
+        </>
+    );
+};
diff --git a/apps/demo-wallet/src/features/settings/components/toggle-row/index.ts b/apps/demo-wallet/src/features/settings/components/toggle-row/index.ts
new file mode 100644
index 000000000..ec1e962be
--- /dev/null
+++ b/apps/demo-wallet/src/features/settings/components/toggle-row/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './toggle-row';
diff --git a/apps/demo-wallet/src/features/settings/components/toggle-row/toggle-row.tsx b/apps/demo-wallet/src/features/settings/components/toggle-row/toggle-row.tsx
new file mode 100644
index 000000000..3f150da90
--- /dev/null
+++ b/apps/demo-wallet/src/features/settings/components/toggle-row/toggle-row.tsx
@@ -0,0 +1,60 @@
+/**
+ * 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 React from 'react';
+import { Info } from 'lucide-react';
+
+import { Popover, PopoverContent, PopoverTrigger } from '@/core/components/ui/popover';
+
+const InfoPopover: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => (
+    <Popover>
+        <PopoverTrigger asChild>
+            <button
+                type="button"
+                onClick={(e) => e.stopPropagation()}
+                className="text-gray-400 hover:text-gray-600 transition-colors flex-shrink-0"
+                aria-label={`${label} info`}
+            >
+                <Info className="w-4 h-4" />
+            </button>
+        </PopoverTrigger>
+        <PopoverContent side="top" align="start" className="w-64 text-xs text-gray-600 leading-relaxed">
+            {children}
+        </PopoverContent>
+    </Popover>
+);
+
+interface ToggleRowProps {
+    testId: string;
+    label: string;
+    description: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    info?: React.ReactNode;
+}
+
+export const ToggleRow: React.FC<ToggleRowProps> = ({ testId, label, description, checked, onChange, info }) => (
+    <div className="flex items-center justify-between gap-3 px-4 py-3">
+        <div className="min-w-0">
+            <div className="flex items-center gap-1.5">
+                <span className="text-sm font-semibold text-gray-900">{label}</span>
+                {info && <InfoPopover label={label}>{info}</InfoPopover>}
+            </div>
+            <p className="text-xs text-gray-400 mt-0.5">{description}</p>
+        </div>
+        <label data-testid={testId} className="relative inline-flex items-center cursor-pointer flex-shrink-0">
+            <input
+                type="checkbox"
+                className="sr-only peer"
+                checked={checked}
+                onChange={(e) => onChange(e.target.checked)}
+            />
+            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
+        </label>
+    </div>
+);
diff --git a/apps/demo-wallet/src/features/settings/index.ts b/apps/demo-wallet/src/features/settings/index.ts
new file mode 100644
index 000000000..cfaf8da61
--- /dev/null
+++ b/apps/demo-wallet/src/features/settings/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/settings-dropdown';
+export * from './components/toggle-row';
diff --git a/apps/demo-wallet/src/features/staking/components/staking-info/index.ts b/apps/demo-wallet/src/features/staking/components/staking-info/index.ts
new file mode 100644
index 000000000..b71974a6c
--- /dev/null
+++ b/apps/demo-wallet/src/features/staking/components/staking-info/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './staking-info';
diff --git a/apps/demo-wallet/src/features/staking/components/staking-info/staking-info.tsx b/apps/demo-wallet/src/features/staking/components/staking-info/staking-info.tsx
new file mode 100644
index 000000000..2de312165
--- /dev/null
+++ b/apps/demo-wallet/src/features/staking/components/staking-info/staking-info.tsx
@@ -0,0 +1,59 @@
+/**
+ * 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 { FC } from 'react';
+import { useStaking } from '@demo/wallet-core';
+
+import { useStakingProviders } from '../../hooks/use-staking-providers';
+
+import { formatLargeValue } from '@/core/utils';
+
+interface StakingInfoProps {
+    /** Ticker received from the current quote (stake → tsTON, unstake → GRAM). */
+    receiveTicker?: string;
+}
+
+/** Read-only pool summary: APY, provider, instant-unstake liquidity and the quoted output. */
+export const StakingInfo: FC<StakingInfoProps> = ({ receiveTicker }) => {
+    const { providerInfo, providerId, currentQuote } = useStaking();
+    const providers = useStakingProviders();
+    const providerName = providers.find((provider) => provider.id === providerId)?.name ?? 'Tonstakers';
+
+    return (
+        <div className="space-y-2 rounded-2xl bg-gray-100 p-4 text-sm">
+            <div className="flex items-center justify-between">
+                <span className="text-gray-500">APY</span>
+                <span className="font-semibold text-green-600">
+                    {providerInfo?.apy ? `${providerInfo.apy.toFixed(2)}%` : '—'}
+                </span>
+            </div>
+            <div className="flex items-center justify-between">
+                <span className="text-gray-500">Provider</span>
+                <span className="font-medium capitalize text-gray-900">{providerName}</span>
+            </div>
+            <div className="flex items-center justify-between">
+                <span className="text-gray-500">Instant unstake available</span>
+                <span className="font-medium text-gray-900 tabular-nums">
+                    {providerInfo?.instantUnstakeAvailable
+                        ? formatLargeValue(String(providerInfo.instantUnstakeAvailable), 4)
+                        : '0'}{' '}
+                    GRAM
+                </span>
+            </div>
+            {currentQuote && (
+                <div className="flex items-center justify-between">
+                    <span className="text-gray-500">You will receive</span>
+                    <span className="font-semibold text-gray-900 tabular-nums">
+                        {formatLargeValue(String(currentQuote.amountOut), 4)}
+                        {receiveTicker ? ` ${receiveTicker}` : ''}
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/apps/demo-wallet/src/features/staking/components/staking-interface/index.ts b/apps/demo-wallet/src/features/staking/components/staking-interface/index.ts
new file mode 100644
index 000000000..bbf1fff19
--- /dev/null
+++ b/apps/demo-wallet/src/features/staking/components/staking-interface/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './staking-interface';
diff --git a/apps/demo-wallet/src/features/staking/components/staking-interface/staking-interface.tsx b/apps/demo-wallet/src/features/staking/components/staking-interface/staking-interface.tsx
new file mode 100644
index 000000000..a64121bbb
--- /dev/null
+++ b/apps/demo-wallet/src/features/staking/components/staking-interface/staking-interface.tsx
@@ -0,0 +1,250 @@
+/**
+ * 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 { useState } from 'react';
+import type { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useStaking, useWallet } from '@demo/wallet-core';
+import { UnstakeMode } from '@ton/walletkit';
+
+import { StakingSettings } from '../staking-settings';
+import { StakingInfo } from '../staking-info';
+
+import { Button } from '@/core/components/ui/button';
+import { CenteredAmountInput } from '@/core/components/ui/centered-amount-input';
+import { cn } from '@/core/lib/utils';
+import { formatLargeValue } from '@/core/utils';
+import { formatUnits } from '@/core/utils/units';
+
+const GRAM_DECIMALS = 9;
+/**
+ * GRAM kept aside on a stake so the transaction still has gas (and the account stays
+ * funded). Mirrors the staking widget's 1.2 TON `feeReserveNanos` in appkit-react.
+ */
+const STAKE_GAS_RESERVE = 1.2;
+const STAKE_TICKER = 'GRAM';
+const STAKED_TICKER = 'tsTON';
+
+const UNSTAKE_MODES = [
+    { mode: UnstakeMode.INSTANT, label: 'Instant', hint: 'Receive GRAM immediately' },
+    { mode: UnstakeMode.WHEN_AVAILABLE, label: 'When available', hint: 'Immediate if liquid, or up to ~18h queue' },
+    { mode: UnstakeMode.ROUND_END, label: 'Round end', hint: 'Wait for cycle end (~18h) for best rate' },
+];
+
+export const StakingInterface: FC = () => {
+    const navigate = useNavigate();
+    const { balance } = useWallet();
+    const {
+        amount,
+        currentQuote,
+        isLoadingQuote,
+        isStaking,
+        isUnstaking,
+        error,
+        unstakeMode,
+        stakedBalance,
+        providerId,
+        setStakingAmount: setAmount,
+        setUnstakeMode,
+        setStakingProviderId,
+        getStakingQuote: getQuote,
+        stake,
+        unstake,
+        validateStakingInputs,
+    } = useStaking();
+
+    const [tab, setTab] = useState<'stake' | 'unstake'>('stake');
+    const isStake = tab === 'stake';
+
+    const availableGram = formatUnits(balance || '0', GRAM_DECIMALS);
+    const stakedTs = stakedBalance?.stakedBalance ?? '0';
+
+    const handleTab = (next: 'stake' | 'unstake') => {
+        setTab(next);
+        setAmount('');
+    };
+
+    const handleAmountChange = (raw: string) => {
+        // Keep digits and a single decimal separator (the input is free-form text).
+        setAmount(raw.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1'));
+    };
+
+    const handleMax = () => {
+        if (isStake) {
+            const max = parseFloat(availableGram) - STAKE_GAS_RESERVE;
+            if (max > 0) setAmount(String(max));
+        } else if (parseFloat(stakedTs) > 0) {
+            setAmount(stakedTs);
+        }
+    };
+
+    const handlePreview = async () => {
+        await getQuote({ amount, direction: isStake ? 'stake' : 'unstake' });
+    };
+
+    const handleAction = async () => {
+        if (!currentQuote) return;
+        const ok = isStake ? await stake({ quote: currentQuote }) : await unstake({ quote: currentQuote });
+        if (ok) navigate('/wallet', { state: { message: `${isStake ? 'Staked' : 'Unstaked'} successfully!` } });
+    };
+
+    const amountNumber = parseFloat(amount) || 0;
+    // Max GRAM that can be staked while keeping the gas reserve (the threshold).
+    const stakeMax = Math.max(0, parseFloat(availableGram) - STAKE_GAS_RESERVE);
+    // Direction-aware balance guard: a stake spends GRAM (and must leave gas), an unstake
+    // spends staked tsTON.
+    let balanceError = '';
+    if (amountNumber > 0) {
+        if (isStake) {
+            if (amountNumber > parseFloat(availableGram)) {
+                balanceError = 'Insufficient balance';
+            } else if (amountNumber > stakeMax) {
+                balanceError = `Keep ~${STAKE_GAS_RESERVE} GRAM for network fees`;
+            }
+        } else if (amountNumber > parseFloat(stakedTs)) {
+            balanceError = 'Not enough staked';
+        }
+    }
+    const validationError = validateStakingInputs();
+    const canPreview = Boolean(!validationError && !balanceError && amountNumber > 0);
+    const isSending = isStaking || isUnstaking;
+    // Receive side (shown once a quote exists): stake → tsTON, unstake → GRAM.
+    const receiveTicker = isStake ? STAKED_TICKER : STAKE_TICKER;
+    const activeHint = UNSTAKE_MODES.find((m) => m.mode === unstakeMode)?.hint;
+
+    return (
+        <div className="space-y-5">
+            {/* Stake / Unstake tabs */}
+            <div className="flex rounded-2xl bg-gray-100 p-1">
+                {(['stake', 'unstake'] as const).map((value) => (
+                    <button
+                        key={value}
+                        type="button"
+                        onClick={() => handleTab(value)}
+                        className={cn(
+                            'flex-1 rounded-xl py-2.5 text-sm font-semibold capitalize transition-colors',
+                            tab === value ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700',
+                        )}
+                    >
+                        {value}
+                    </button>
+                ))}
+            </div>
+
+            {/* Amount */}
+            <div className="py-2">
+                <CenteredAmountInput
+                    value={amount}
+                    onValueChange={handleAmountChange}
+                    ticker={isStake ? STAKE_TICKER : STAKED_TICKER}
+                    baseTestId="stake-amount"
+                />
+            </div>
+
+            {/* Balances + Max */}
+            <div className="space-y-2 rounded-2xl bg-gray-100 p-4 text-sm">
+                <div className="flex items-center justify-between">
+                    <span className="text-gray-500">Available</span>
+                    <span className="flex items-center gap-2">
+                        <span className="font-semibold text-gray-900 tabular-nums">
+                            {formatLargeValue(availableGram, 4)} GRAM
+                        </span>
+                        {isStake && parseFloat(availableGram) > 0 && (
+                            <button
+                                type="button"
+                                onClick={handleMax}
+                                className="font-semibold text-blue-600 hover:text-blue-700"
+                            >
+                                Max
+                            </button>
+                        )}
+                    </span>
+                </div>
+                <div className="flex items-center justify-between">
+                    <span className="text-gray-500">Staked</span>
+                    <span className="flex items-center gap-2">
+                        <span className="font-semibold text-gray-900 tabular-nums">
+                            {formatLargeValue(stakedTs, 4)} tsTON
+                        </span>
+                        {!isStake && parseFloat(stakedTs) > 0 && (
+                            <button
+                                type="button"
+                                onClick={handleMax}
+                                className="font-semibold text-blue-600 hover:text-blue-700"
+                            >
+                                Max
+                            </button>
+                        )}
+                    </span>
+                </div>
+            </div>
+
+            {/* Unstake method */}
+            {!isStake && (
+                <div className="space-y-2">
+                    <span className="block text-sm font-medium text-gray-700">Unstake method</span>
+                    <div className="grid grid-cols-3 gap-2">
+                        {UNSTAKE_MODES.map(({ mode, label }) => (
+                            <button
+                                key={mode}
+                                type="button"
+                                onClick={() => setUnstakeMode(mode)}
+                                className={cn(
+                                    'rounded-xl border-2 py-2 text-xs font-semibold transition-colors',
+                                    unstakeMode === mode
+                                        ? 'border-blue-500 bg-blue-50 text-blue-600'
+                                        : 'border-transparent bg-gray-100 text-gray-700 hover:bg-gray-200',
+                                )}
+                            >
+                                {label}
+                            </button>
+                        ))}
+                    </div>
+                    {activeHint && <p className="text-xs text-gray-500">{activeHint}</p>}
+                </div>
+            )}
+
+            {(balanceError || error) && (
+                <p className="rounded-2xl bg-red-50 p-3 text-center text-sm text-red-500">{balanceError || error}</p>
+            )}
+
+            {/* Actions */}
+            <div className="flex items-center gap-2">
+                {!currentQuote ? (
+                    <Button
+                        type="button"
+                        fullWidth
+                        onClick={handlePreview}
+                        loading={isLoadingQuote}
+                        disabled={!canPreview || isLoadingQuote}
+                    >
+                        {isStake ? 'Preview Stake' : 'Preview Unstake'}
+                    </Button>
+                ) : (
+                    <>
+                        <Button
+                            type="button"
+                            variant="secondary"
+                            fullWidth
+                            onClick={() => setAmount('')}
+                            disabled={isSending}
+                        >
+                            Cancel
+                        </Button>
+                        <Button type="button" fullWidth onClick={handleAction} loading={isSending} disabled={isSending}>
+                            {isStake ? 'Stake' : 'Unstake'}
+                        </Button>
+                    </>
+                )}
+                <StakingSettings providerId={providerId} setProviderId={setStakingProviderId} />
+            </div>
+
+            <StakingInfo receiveTicker={receiveTicker} />
+        </div>
+    );
+};
diff --git a/apps/demo-wallet/src/features/staking/components/staking-screen/index.ts b/apps/demo-wallet/src/features/staking/components/staking-screen/index.ts
new file mode 100644
index 000000000..529082a48
--- /dev/null
+++ b/apps/demo-wallet/src/features/staking/components/staking-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './staking-screen';
diff --git a/apps/demo-wallet/src/features/staking/components/staking-screen/staking-screen.tsx b/apps/demo-wallet/src/features/staking/components/staking-screen/staking-screen.tsx
new file mode 100644
index 000000000..7de54bda0
--- /dev/null
+++ b/apps/demo-wallet/src/features/staking/components/staking-screen/staking-screen.tsx
@@ -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 { FC } from 'react';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useStaking, useWallet } from '@demo/wallet-core';
+
+import { StakingInterface } from '../staking-interface';
+
+import { NewLayout } from '@/core/components/shared/new-layout';
+import { ScreenHeader } from '@/core/components/shared/screen-header';
+
+export const Staking: FC = () => {
+    const navigate = useNavigate();
+    const { address } = useWallet();
+    const { clearStaking, loadStakingData } = useStaking();
+
+    useEffect(() => {
+        if (address) {
+            loadStakingData(address);
+        }
+        return () => clearStaking();
+    }, [address, loadStakingData, clearStaking]);
+
+    return (
+        <NewLayout header={<ScreenHeader title="Stake" onBack={() => navigate('/wallet')} />}>
+            <StakingInterface />
+        </NewLayout>
+    );
+};
diff --git a/apps/demo-wallet/src/features/staking/components/staking-settings/index.ts b/apps/demo-wallet/src/features/staking/components/staking-settings/index.ts
new file mode 100644
index 000000000..de30eb59c
--- /dev/null
+++ b/apps/demo-wallet/src/features/staking/components/staking-settings/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './staking-settings';
diff --git a/apps/demo-wallet/src/features/staking/components/staking-settings/staking-settings.tsx b/apps/demo-wallet/src/features/staking/components/staking-settings/staking-settings.tsx
new file mode 100644
index 000000000..af7021b21
--- /dev/null
+++ b/apps/demo-wallet/src/features/staking/components/staking-settings/staking-settings.tsx
@@ -0,0 +1,81 @@
+/**
+ * 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 React, { useEffect, useState } from 'react';
+
+import { useStakingProviders } from '../../hooks/use-staking-providers';
+
+import { Button } from '@/core/components/ui/button';
+import { Modal } from '@/core/components/ui/modal';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/core/components/ui/select';
+import { SettingsButton } from '@/core/components/shared/settings-button';
+
+interface StakingSettingsProps {
+    providerId: string;
+    setProviderId: (providerId: string) => void;
+}
+
+/** Gear button that opens a modal to choose the staking provider. */
+export const StakingSettings: React.FC<StakingSettingsProps> = ({ providerId, setProviderId }) => {
+    const providers = useStakingProviders();
+
+    const [open, setOpen] = useState(false);
+    const [tempProviderId, setTempProviderId] = useState(providerId);
+
+    useEffect(() => {
+        if (open) setTempProviderId(providerId);
+    }, [open, providerId]);
+
+    const handleSave = () => {
+        if (tempProviderId !== providerId) {
+            setProviderId(tempProviderId);
+        }
+        setOpen(false);
+    };
+
+    const selectedProviderName = providers.find((provider) => provider.id === tempProviderId)?.name;
+
+    return (
+        <>
+            <SettingsButton onClick={() => setOpen(true)} aria-label="Staking settings" />
+
+            <Modal.Container isOpened={open} onOpenChange={setOpen}>
+                <Modal.Header onClose={() => setOpen(false)}>
+                    <Modal.Title>Staking settings</Modal.Title>
+                </Modal.Header>
+                <Modal.Body className="gap-6">
+                    <div className="space-y-2">
+                        <span className="block text-sm font-medium text-gray-700">Provider</span>
+                        <Select value={tempProviderId} onValueChange={setTempProviderId}>
+                            <SelectTrigger className="w-full rounded-2xl border-2 border-transparent bg-gray-100 p-3.5 text-base font-medium capitalize text-gray-900 hover:bg-gray-100 focus-visible:border-blue-500 focus-visible:ring-0 data-[state=open]:border-blue-500">
+                                {selectedProviderName ? (
+                                    <span className="capitalize">{selectedProviderName}</span>
+                                ) : (
+                                    <span className="text-gray-400">Select provider</span>
+                                )}
+                            </SelectTrigger>
+                            <SelectContent className="rounded-xl">
+                                {providers.map((provider) => (
+                                    <SelectItem key={provider.id} value={provider.id} className="text-sm capitalize">
+                                        {provider.name}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </Modal.Body>
+
+                <Modal.Footer>
+                    <Button fullWidth onClick={handleSave}>
+                        Save
+                    </Button>
+                </Modal.Footer>
+            </Modal.Container>
+        </>
+    );
+};
diff --git a/apps/demo-wallet/src/features/staking/hooks/use-staking-providers.ts b/apps/demo-wallet/src/features/staking/hooks/use-staking-providers.ts
new file mode 100644
index 000000000..0746eb702
--- /dev/null
+++ b/apps/demo-wallet/src/features/staking/hooks/use-staking-providers.ts
@@ -0,0 +1,28 @@
+/**
+ * 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 { useMemo } from 'react';
+import { useWalletKit } from '@demo/wallet-core';
+
+export interface StakingProviderOption {
+    id: string;
+    name: string;
+}
+
+/** Registered staking providers (id + display name) read from the kit. */
+export const useStakingProviders = (): StakingProviderOption[] => {
+    const walletKit = useWalletKit();
+
+    return useMemo(() => {
+        if (!walletKit) return [];
+        return walletKit.staking.getProviders().map((provider) => ({
+            id: provider.providerId,
+            name: provider.getStakingProviderMetadata().name,
+        }));
+    }, [walletKit]);
+};
diff --git a/apps/demo-wallet/src/features/staking/index.ts b/apps/demo-wallet/src/features/staking/index.ts
new file mode 100644
index 000000000..892b92221
--- /dev/null
+++ b/apps/demo-wallet/src/features/staking/index.ts
@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/staking-screen';
+export * from './components/staking-info';
+export * from './components/staking-interface';
+export * from './components/staking-settings';
+export * from './hooks/use-staking-providers';
diff --git a/apps/demo-wallet/src/features/swap/components/quote-timer/index.ts b/apps/demo-wallet/src/features/swap/components/quote-timer/index.ts
new file mode 100644
index 000000000..5f3b1905b
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/quote-timer/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './quote-timer';
diff --git a/apps/demo-wallet/src/components/swap/QuoteTimer.tsx b/apps/demo-wallet/src/features/swap/components/quote-timer/quote-timer.tsx
similarity index 74%
rename from apps/demo-wallet/src/components/swap/QuoteTimer.tsx
rename to apps/demo-wallet/src/features/swap/components/quote-timer/quote-timer.tsx
index b7c764cfe..7389479b2 100644
--- a/apps/demo-wallet/src/components/swap/QuoteTimer.tsx
+++ b/apps/demo-wallet/src/features/swap/components/quote-timer/quote-timer.tsx
@@ -9,15 +9,15 @@
 import type { FC } from 'react';
 import { useEffect, useState } from 'react';
 
-import { Button } from '../Button';
+import { Button } from '@/core/components/ui/button';
 
 interface QuoteTimerProps {
     expiresAt?: number; // Unix timestamp in seconds
     onRefresh: () => void;
-    isLoading?: boolean;
+    loading?: boolean;
 }
 
-export const QuoteTimer: FC<QuoteTimerProps> = ({ expiresAt, onRefresh, isLoading = false }) => {
+export const QuoteTimer: FC<QuoteTimerProps> = ({ expiresAt, onRefresh, loading = false }) => {
     const [timeLeft, setTimeLeft] = useState(0);
 
     useEffect(() => {
@@ -43,17 +43,15 @@ export const QuoteTimer: FC<QuoteTimerProps> = ({ expiresAt, onRefresh, isLoadin
     const seconds = totalSeconds % 60;
     const isExpired = !expiresAt || timeLeft === 0;
 
+    if (!expiresAt) {
+        return null;
+    }
+
     if (isExpired) {
         return (
-            <div className="flex items-center justify-between rounded-lg bg-yellow-50 border border-yellow-200 px-3 py-2">
-                <span className="text-yellow-800 text-sm font-medium">Quote expired</span>
-                <Button
-                    onClick={onRefresh}
-                    disabled={isLoading}
-                    isLoading={isLoading}
-                    size="sm"
-                    className="h-7 px-3 text-xs"
-                >
+            <div className="flex items-center justify-between rounded-2xl bg-yellow-50 px-4 py-3">
+                <span className="text-sm font-medium text-yellow-800">Quote expired</span>
+                <Button onClick={onRefresh} disabled={loading} loading={loading} variant="secondary" size="sm">
                     Refresh
                 </Button>
             </div>
@@ -61,8 +59,8 @@ export const QuoteTimer: FC<QuoteTimerProps> = ({ expiresAt, onRefresh, isLoadin
     }
 
     return (
-        <div className="flex items-center justify-between rounded-lg bg-blue-50 border border-blue-200 px-3 py-2">
-            <span className="text-blue-800 text-sm">
+        <div className="flex items-center justify-between rounded-2xl bg-blue-50 px-4 py-3">
+            <span className="text-sm text-blue-800">
                 Quote valid for{' '}
                 <span className="font-semibold">
                     {minutes > 0 && `${minutes}m `}
diff --git a/apps/demo-wallet/src/features/swap/components/swap-field/index.ts b/apps/demo-wallet/src/features/swap/components/swap-field/index.ts
new file mode 100644
index 000000000..cd1af50f3
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/swap-field/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './swap-field';
diff --git a/apps/demo-wallet/src/features/swap/components/swap-field/swap-field.tsx b/apps/demo-wallet/src/features/swap/components/swap-field/swap-field.tsx
new file mode 100644
index 000000000..1de30d3c8
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/swap-field/swap-field.tsx
@@ -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 React from 'react';
+
+import { FallbackImage } from '@/core/components/ui/fallback-image';
+import { formatLargeValue } from '@/core/utils';
+
+interface SwapFieldProps {
+    label: string;
+    symbol: string;
+    icon?: string;
+    amount: string;
+    /** Held balance as a human-readable decimal string. */
+    balance: string;
+    onAmountChange: (value: string) => void;
+    onMax?: () => void;
+}
+
+/** One side of the swap (From / To): amount on the left, a token pill on the right. */
+export const SwapField: React.FC<SwapFieldProps> = ({
+    label,
+    symbol,
+    icon,
+    amount,
+    balance,
+    onAmountChange,
+    onMax,
+}) => (
+    <div className="space-y-2 rounded-2xl bg-gray-100 p-4">
+        <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-gray-500">{label}</span>
+            <span className="flex items-center gap-2 text-xs text-gray-500">
+                <span className="tabular-nums">Balance: {formatLargeValue(balance, 4)}</span>
+                {onMax && parseFloat(balance) > 0 && (
+                    <button type="button" onClick={onMax} className="font-semibold text-blue-600 hover:text-blue-700">
+                        Max
+                    </button>
+                )}
+            </span>
+        </div>
+
+        <div className="flex items-center gap-3">
+            <input
+                className="min-w-0 flex-1 border-0 bg-transparent p-0 text-3xl font-semibold text-gray-900 outline-none placeholder:text-gray-300 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                inputMode="decimal"
+                placeholder="0"
+                value={amount}
+                onChange={(e) => onAmountChange(e.target.value)}
+            />
+
+            <span className="flex flex-shrink-0 items-center gap-2 rounded-full bg-white px-3 py-2 shadow-sm">
+                <span className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-gray-100">
+                    <FallbackImage
+                        src={icon}
+                        alt=""
+                        className="h-full w-full object-cover"
+                        fallback={
+                            <span className="flex h-full w-full items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 text-[10px] font-bold text-white">
+                                {symbol.slice(0, 2).toUpperCase()}
+                            </span>
+                        }
+                    />
+                </span>
+                <span className="text-sm font-semibold text-gray-900">{symbol}</span>
+            </span>
+        </div>
+    </div>
+);
diff --git a/apps/demo-wallet/src/features/swap/components/swap-info/index.ts b/apps/demo-wallet/src/features/swap/components/swap-info/index.ts
new file mode 100644
index 000000000..706f1854b
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/swap-info/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './swap-info';
diff --git a/apps/demo-wallet/src/features/swap/components/swap-info/swap-info.tsx b/apps/demo-wallet/src/features/swap/components/swap-info/swap-info.tsx
new file mode 100644
index 000000000..bd9751a8a
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/swap-info/swap-info.tsx
@@ -0,0 +1,62 @@
+/**
+ * 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 React from 'react';
+import type { SwapQuote } from '@ton/walletkit';
+
+import { useSwapProviders } from '../../hooks/use-swap-providers';
+
+import { cn } from '@/core/lib/utils';
+
+function priceImpactColor(priceImpact: number): string {
+    if (priceImpact > 500) return 'text-red-500';
+    if (priceImpact > 200) return 'text-yellow-600';
+    return 'text-green-600';
+}
+
+const InfoRow: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => (
+    <div className="flex items-center justify-between">
+        <span className="text-gray-500">{label}</span>
+        {children}
+    </div>
+);
+
+interface SwapInfoProps {
+    quote: SwapQuote;
+    toSymbol: string;
+    slippageBps: number;
+}
+
+/** Read-only summary of the current quote (provider, minimum received, price impact, slippage). */
+export const SwapInfo: React.FC<SwapInfoProps> = ({ quote, toSymbol, slippageBps }) => {
+    const providers = useSwapProviders();
+    const providerName = providers.find((provider) => provider.id === quote.providerId)?.name ?? quote.providerId;
+
+    return (
+        <div className="space-y-2 rounded-2xl bg-gray-100 p-4 text-sm">
+            <InfoRow label="Provider">
+                <span className="font-medium capitalize text-gray-900">{providerName}</span>
+            </InfoRow>
+            <InfoRow label="Minimum received">
+                <span className="font-medium text-gray-900">
+                    {Number(quote.minReceived).toFixed(6)} {toSymbol}
+                </span>
+            </InfoRow>
+            {quote.priceImpact ? (
+                <InfoRow label="Price impact">
+                    <span className={cn('font-medium', priceImpactColor(quote.priceImpact))}>
+                        {(quote.priceImpact / 100).toFixed(2)}%
+                    </span>
+                </InfoRow>
+            ) : null}
+            <InfoRow label="Slippage">
+                <span className="font-medium text-gray-900">{slippageBps / 100}%</span>
+            </InfoRow>
+        </div>
+    );
+};
diff --git a/apps/demo-wallet/src/features/swap/components/swap-interface/index.ts b/apps/demo-wallet/src/features/swap/components/swap-interface/index.ts
new file mode 100644
index 000000000..5168317bd
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/swap-interface/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './swap-interface';
diff --git a/apps/demo-wallet/src/features/swap/components/swap-interface/swap-interface.tsx b/apps/demo-wallet/src/features/swap/components/swap-interface/swap-interface.tsx
new file mode 100644
index 000000000..8fc62c2f9
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/swap-interface/swap-interface.tsx
@@ -0,0 +1,227 @@
+/**
+ * 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 { useState } from 'react';
+import type { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowDownUp } from 'lucide-react';
+import { useJettons, useSwap, useWallet } from '@demo/wallet-core';
+import type { SwapToken } from '@ton/walletkit';
+
+import { SwapField } from '../swap-field';
+import { SwapInfo } from '../swap-info';
+import { SwapSettings } from '../swap-settings';
+import { QuoteTimer } from '../quote-timer';
+
+import { Button } from '@/core/components/ui/button';
+import { Input } from '@/core/components/ui/input';
+import { getJettonsImage, getJettonsSymbol } from '@/features/jettons';
+import { cn } from '@/core/lib/utils';
+import { formatUnits } from '@/core/utils/units';
+
+/** Reserved on a MAX TON swap, so the transaction still has gas to pay for itself. */
+const TON_GAS_RESERVE = 0.1;
+
+interface TokenView {
+    symbol: string;
+    icon?: string;
+    balance: string;
+}
+
+interface SwapInterfaceProps {
+    className?: string;
+}
+
+export const SwapInterface: FC<SwapInterfaceProps> = ({ className }) => {
+    const navigate = useNavigate();
+    const { balance } = useWallet();
+    const { userJettons } = useJettons();
+    const {
+        fromToken,
+        toToken,
+        amount,
+        isReverseSwap,
+        destinationAddress,
+        currentQuote,
+        isLoadingQuote,
+        isSwapping,
+        error,
+        slippageBps,
+        providerId,
+        setSwapAmount: setAmount,
+        setIsReverseSwap,
+        setDestinationAddress,
+        setSlippageBps,
+        setSwapProviderId,
+        swapTokens,
+        getSwapQuote,
+        executeSwap,
+    } = useSwap();
+
+    const [useCustomDestination, setUseCustomDestination] = useState(false);
+
+    const getTokenView = (token: SwapToken): TokenView => {
+        if (token.address === 'ton') {
+            return {
+                symbol: token.symbol || 'GRAM',
+                icon: '/gram.svg',
+                balance: formatUnits(balance || '0', token.decimals),
+            };
+        }
+        const jetton = userJettons.find((j) => j.address === token.address);
+        return {
+            symbol: token.symbol || (jetton ? getJettonsSymbol(jetton) : undefined) || 'Token',
+            icon: token.image ?? (jetton ? getJettonsImage(jetton) : undefined),
+            balance: jetton?.balance ? formatUnits(jetton.balance, token.decimals) : '0',
+        };
+    };
+
+    const fromView = getTokenView(fromToken);
+    const toView = getTokenView(toToken);
+
+    const fromAmount = !isReverseSwap ? amount : currentQuote ? currentQuote.fromAmount : '';
+    const toAmount = isReverseSwap ? amount : currentQuote ? currentQuote.toAmount : '';
+
+    const handleFromAmountChange = (value: string) => {
+        setAmount(value);
+        setIsReverseSwap(false);
+    };
+
+    const handleToAmountChange = (value: string) => {
+        setAmount(value);
+        setIsReverseSwap(true);
+    };
+
+    const handleMaxFrom = () => {
+        const currentBalance = parseFloat(fromView.balance);
+        if (!(currentBalance > 0)) return;
+        if (fromToken.address === 'ton') {
+            const maxAmount = currentBalance - TON_GAS_RESERVE;
+            if (maxAmount > 0) handleFromAmountChange(maxAmount.toString());
+        } else {
+            handleFromAmountChange(fromView.balance);
+        }
+    };
+
+    const handleExecuteSwap = async () => {
+        const ok = await executeSwap();
+        if (ok) navigate('/wallet', { state: { message: `${fromView.symbol} sent successfully!` } });
+    };
+
+    const getSwapButtonText = (): string => {
+        const hasFromAmount = fromAmount && parseFloat(fromAmount) > 0;
+        const hasToAmount = toAmount && parseFloat(toAmount) > 0;
+        if (!hasFromAmount && !hasToAmount) return 'Enter amount';
+        if (error) return 'Error';
+        return `Swap ${fromView.symbol} for ${toView.symbol}`;
+    };
+
+    const isSwapDisabled = Boolean(error) || isLoadingQuote || isSwapping;
+
+    return (
+        <div className={cn('space-y-5', className)}>
+            <div className="relative">
+                <div className="space-y-1">
+                    <SwapField
+                        label="From"
+                        symbol={fromView.symbol}
+                        icon={fromView.icon}
+                        amount={fromAmount}
+                        balance={fromView.balance}
+                        onAmountChange={handleFromAmountChange}
+                        onMax={handleMaxFrom}
+                    />
+                    <SwapField
+                        label="To"
+                        symbol={toView.symbol}
+                        icon={toView.icon}
+                        amount={toAmount}
+                        balance={toView.balance}
+                        onAmountChange={handleToAmountChange}
+                    />
+                </div>
+
+                <button
+                    type="button"
+                    onClick={swapTokens}
+                    className="absolute left-1/2 top-1/2 z-10 flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-4 border-white bg-blue-600 text-white shadow-md transition-colors hover:bg-blue-700"
+                    aria-label="Swap direction"
+                >
+                    <ArrowDownUp className="h-4 w-4" />
+                </button>
+            </div>
+
+            {/* Optional custom recipient */}
+            <div className="space-y-2">
+                <label className="flex cursor-pointer items-center gap-2 text-sm text-gray-700">
+                    <input
+                        type="checkbox"
+                        checked={useCustomDestination}
+                        onChange={(e) => {
+                            setUseCustomDestination(e.target.checked);
+                            if (!e.target.checked) setDestinationAddress('');
+                        }}
+                    />
+                    <span>Send to a different address</span>
+                </label>
+
+                {useCustomDestination && (
+                    <Input.Container>
+                        <Input.Field>
+                            <Input.Input
+                                value={destinationAddress}
+                                onChange={(e) => setDestinationAddress(e.target.value)}
+                                placeholder="Recipient address (EQ…)"
+                            />
+                        </Input.Field>
+                        <Input.Caption>Swapped tokens will be sent here instead of your wallet.</Input.Caption>
+                    </Input.Container>
+                )}
+            </div>
+
+            {currentQuote && (
+                <>
+                    <QuoteTimer expiresAt={currentQuote.expiresAt} onRefresh={getSwapQuote} loading={isLoadingQuote} />
+                    <SwapInfo quote={currentQuote} toSymbol={toView.symbol} slippageBps={slippageBps} />
+                </>
+            )}
+
+            {error && <p className="rounded-2xl bg-red-50 p-3 text-center text-sm text-red-500">{error}</p>}
+
+            <div className="flex items-center gap-2">
+                {!currentQuote ? (
+                    <Button
+                        type="button"
+                        fullWidth
+                        onClick={getSwapQuote}
+                        loading={isLoadingQuote}
+                        disabled={isSwapDisabled}
+                    >
+                        {isLoadingQuote ? 'Getting quote…' : 'Get Quote'}
+                    </Button>
+                ) : (
+                    <Button
+                        type="button"
+                        fullWidth
+                        onClick={handleExecuteSwap}
+                        loading={isSwapping}
+                        disabled={isSwapping}
+                    >
+                        {isSwapping ? 'Swapping…' : getSwapButtonText()}
+                    </Button>
+                )}
+                <SwapSettings
+                    slippageBps={slippageBps}
+                    setSlippageBps={setSlippageBps}
+                    providerId={providerId}
+                    setProviderId={setSwapProviderId}
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/apps/demo-wallet/src/features/swap/components/swap-screen/index.ts b/apps/demo-wallet/src/features/swap/components/swap-screen/index.ts
new file mode 100644
index 000000000..6f9491a5a
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/swap-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './swap-screen';
diff --git a/apps/demo-wallet/src/features/swap/components/swap-screen/swap-screen.tsx b/apps/demo-wallet/src/features/swap/components/swap-screen/swap-screen.tsx
new file mode 100644
index 000000000..56362d244
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/swap-screen/swap-screen.tsx
@@ -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 { FC } from 'react';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useSwap } from '@demo/wallet-core';
+
+import { SwapInterface } from '../swap-interface';
+import { USDT_ADDRESS } from '../../constants/swap';
+
+import { NewLayout } from '@/core/components/shared/new-layout';
+import { ScreenHeader } from '@/core/components/shared/screen-header';
+
+export const Swap: FC = () => {
+    const navigate = useNavigate();
+    const { setFromToken, setToToken, clearSwap } = useSwap();
+
+    useEffect(() => {
+        setFromToken({ address: 'ton', decimals: 9, symbol: 'GRAM' });
+        setToToken({ address: USDT_ADDRESS, decimals: 6, symbol: 'USDT' });
+
+        return () => clearSwap();
+    }, []);
+
+    return (
+        <NewLayout header={<ScreenHeader title="Swap" onBack={() => navigate('/wallet')} />}>
+            <SwapInterface />
+        </NewLayout>
+    );
+};
diff --git a/apps/demo-wallet/src/features/swap/components/swap-settings/index.ts b/apps/demo-wallet/src/features/swap/components/swap-settings/index.ts
new file mode 100644
index 000000000..1c008cbf0
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/swap-settings/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './swap-settings';
diff --git a/apps/demo-wallet/src/features/swap/components/swap-settings/swap-settings.tsx b/apps/demo-wallet/src/features/swap/components/swap-settings/swap-settings.tsx
new file mode 100644
index 000000000..878797af2
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/swap-settings/swap-settings.tsx
@@ -0,0 +1,128 @@
+/**
+ * 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 React, { useEffect, useState } from 'react';
+
+import { useSwapProviders } from '../../hooks/use-swap-providers';
+
+import { Button } from '@/core/components/ui/button';
+import { Modal } from '@/core/components/ui/modal';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/core/components/ui/select';
+import { SettingsButton } from '@/core/components/shared/settings-button';
+import { cn } from '@/core/lib/utils';
+
+const PRESET_SLIPPAGES = [50, 100, 300, 500];
+
+interface SwapSettingsProps {
+    slippageBps: number;
+    setSlippageBps: (slippage: number) => void;
+    providerId: string;
+    setProviderId: (providerId: string) => void;
+}
+
+/** Gear button that opens a modal to choose the slippage tolerance and swap provider. */
+export const SwapSettings: React.FC<SwapSettingsProps> = ({
+    slippageBps,
+    setSlippageBps,
+    providerId,
+    setProviderId,
+}) => {
+    const providers = useSwapProviders();
+
+    const [open, setOpen] = useState(false);
+    const [tempSlippageBps, setTempSlippageBps] = useState(slippageBps);
+    const [tempProviderId, setTempProviderId] = useState(providerId);
+
+    useEffect(() => {
+        if (open) {
+            setTempSlippageBps(slippageBps);
+            setTempProviderId(providerId);
+        }
+    }, [open, slippageBps, providerId]);
+
+    const handleSave = () => {
+        if (tempSlippageBps >= 10 && tempSlippageBps <= 5000) {
+            setSlippageBps(tempSlippageBps);
+        }
+        if (tempProviderId !== providerId) {
+            setProviderId(tempProviderId);
+        }
+        setOpen(false);
+    };
+
+    const selectedProviderName = providers.find((provider) => provider.id === tempProviderId)?.name;
+
+    return (
+        <>
+            <SettingsButton onClick={() => setOpen(true)} aria-label="Swap settings" />
+
+            <Modal.Container isOpened={open} onOpenChange={setOpen}>
+                <Modal.Header onClose={() => setOpen(false)}>
+                    <Modal.Title>Swap settings</Modal.Title>
+                </Modal.Header>
+                <Modal.Body className="gap-6">
+                    <div className="space-y-3">
+                        <span className="block text-sm font-medium text-gray-700">Slippage tolerance</span>
+                        <div className="grid grid-cols-4 gap-2">
+                            {PRESET_SLIPPAGES.map((preset) => (
+                                <button
+                                    key={preset}
+                                    type="button"
+                                    onClick={() => setTempSlippageBps(preset)}
+                                    className={cn(
+                                        'rounded-xl border-2 py-2 text-sm font-semibold transition-colors',
+                                        tempSlippageBps === preset
+                                            ? 'border-blue-500 bg-blue-50 text-blue-600'
+                                            : 'border-transparent bg-gray-100 text-gray-700 hover:bg-gray-200',
+                                    )}
+                                >
+                                    {preset / 100}%
+                                </button>
+                            ))}
+                        </div>
+                        <p className="text-xs text-gray-500">
+                            Your transaction will revert if the price changes unfavorably by more than this percentage.
+                        </p>
+                    </div>
+
+                    {providers.length > 0 && (
+                        <div className="space-y-2">
+                            <span className="block text-sm font-medium text-gray-700">Provider</span>
+                            <Select value={tempProviderId} onValueChange={setTempProviderId}>
+                                <SelectTrigger className="w-full rounded-2xl border-2 border-transparent bg-gray-100 p-3.5 text-base font-medium capitalize text-gray-900 hover:bg-gray-100 focus-visible:border-blue-500 focus-visible:ring-0 data-[state=open]:border-blue-500">
+                                    {selectedProviderName ? (
+                                        <span className="capitalize">{selectedProviderName}</span>
+                                    ) : (
+                                        <span className="text-gray-400">Select provider</span>
+                                    )}
+                                </SelectTrigger>
+                                <SelectContent className="rounded-xl">
+                                    {providers.map((provider) => (
+                                        <SelectItem
+                                            key={provider.id}
+                                            value={provider.id}
+                                            className="text-sm capitalize"
+                                        >
+                                            {provider.name}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    )}
+                </Modal.Body>
+
+                <Modal.Footer>
+                    <Button fullWidth onClick={handleSave}>
+                        Save
+                    </Button>
+                </Modal.Footer>
+            </Modal.Container>
+        </>
+    );
+};
diff --git a/apps/demo-wallet/src/constants/swap.ts b/apps/demo-wallet/src/features/swap/constants/swap.ts
similarity index 100%
rename from apps/demo-wallet/src/constants/swap.ts
rename to apps/demo-wallet/src/features/swap/constants/swap.ts
diff --git a/apps/demo-wallet/src/features/swap/hooks/use-swap-providers.ts b/apps/demo-wallet/src/features/swap/hooks/use-swap-providers.ts
new file mode 100644
index 000000000..b2eecd64a
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/hooks/use-swap-providers.ts
@@ -0,0 +1,30 @@
+/**
+ * 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 { useMemo } from 'react';
+import { useWalletKit } from '@demo/wallet-core';
+
+export interface SwapProviderOption {
+    id: string;
+    name: string;
+    logo?: string;
+    url?: string;
+}
+
+/** Registered swap providers (id + display metadata) read from the kit. */
+export const useSwapProviders = (): SwapProviderOption[] => {
+    const walletKit = useWalletKit();
+
+    return useMemo(() => {
+        if (!walletKit) return [];
+        return walletKit.swap.getProviders().map((provider) => ({
+            id: provider.providerId,
+            ...provider.getMetadata(),
+        }));
+    }, [walletKit]);
+};
diff --git a/apps/demo-wallet/src/features/swap/index.ts b/apps/demo-wallet/src/features/swap/index.ts
new file mode 100644
index 000000000..0044e3193
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/swap-screen';
+export * from './components/swap-interface';
+export * from './components/swap-settings';
+export * from './components/swap-field';
+export * from './components/swap-info';
+export * from './components/quote-timer';
+export * from './hooks/use-swap-providers';
diff --git a/apps/demo-wallet/src/features/ton-connect/components/connect-dapp-modal/connect-dapp-modal.tsx b/apps/demo-wallet/src/features/ton-connect/components/connect-dapp-modal/connect-dapp-modal.tsx
new file mode 100644
index 000000000..2b354975c
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/connect-dapp-modal/connect-dapp-modal.tsx
@@ -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 React, { useCallback, useState } from 'react';
+import { useTonConnect } from '@demo/wallet-core';
+
+import { Button } from '@/core/components/ui/button';
+import { Modal } from '@/core/components/ui/modal';
+
+interface ConnectDappModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const ConnectDappModal: React.FC<ConnectDappModalProps> = ({ isOpen, onClose }) => {
+    const { handleTonConnectUrl } = useTonConnect();
+    const [url, setUrl] = useState('');
+    const [isConnecting, setIsConnecting] = useState(false);
+
+    const handleConnect = useCallback(async () => {
+        const trimmed = url.trim();
+        if (!trimmed) return;
+
+        setIsConnecting(true);
+        try {
+            await handleTonConnectUrl(trimmed);
+            setUrl('');
+            onClose();
+        } catch {
+            // connect modal / error state handled by the store
+        } finally {
+            setIsConnecting(false);
+        }
+    }, [url, handleTonConnectUrl, onClose]);
+
+    return (
+        <Modal.Container isOpened={isOpen} onOpenChange={(open) => !open && onClose()} className="px-2">
+            <Modal.Header onClose={onClose}>
+                <Modal.Title>Connect to dApp</Modal.Title>
+            </Modal.Header>
+
+            <Modal.Body className="gap-4">
+                <label htmlFor="tonconnect-url" className="block text-sm font-medium text-gray-700">
+                    Paste TON Connect link
+                </label>
+                <textarea
+                    id="tonconnect-url"
+                    data-testid="tonconnect-url"
+                    rows={3}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-xl resize-none text-black focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    placeholder="tc://… or ton://… or https://…"
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                />
+                <Button
+                    data-testid="tonconnect-process"
+                    onClick={handleConnect}
+                    loading={isConnecting}
+                    disabled={!url.trim() || isConnecting}
+                    className="w-full"
+                >
+                    Connect
+                </Button>
+            </Modal.Body>
+        </Modal.Container>
+    );
+};
diff --git a/apps/demo-wallet/src/features/ton-connect/components/connect-dapp-modal/index.ts b/apps/demo-wallet/src/features/ton-connect/components/connect-dapp-modal/index.ts
new file mode 100644
index 000000000..3f20418f3
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/connect-dapp-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './connect-dapp-modal';
diff --git a/apps/demo-wallet/src/features/ton-connect/components/connect-request-modal/connect-request-modal.tsx b/apps/demo-wallet/src/features/ton-connect/components/connect-request-modal/connect-request-modal.tsx
new file mode 100644
index 000000000..76a91269c
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/connect-request-modal/connect-request-modal.tsx
@@ -0,0 +1,156 @@
+/**
+ * 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 React, { useEffect, useMemo, useState } from 'react';
+import type { ConnectionRequestEvent, Wallet } from '@ton/walletkit';
+import type { SavedWallet } from '@demo/wallet-core';
+import { toast } from 'sonner';
+
+import { DappRequestModal } from '../dapp-request-modal';
+import { WalletPlate } from '../wallet-plate';
+
+import { Button } from '@/core/components/ui/button';
+import { createComponentLogger } from '@/core/lib/logger';
+import { WalletPickerView } from '@/features/wallets';
+
+const log = createComponentLogger('ConnectRequestModal');
+
+interface ConnectRequestModalProps {
+    request: ConnectionRequestEvent;
+    availableWallets: Wallet[];
+    savedWallets: SavedWallet[];
+    currentWallet?: Wallet;
+    isOpen: boolean;
+    onApprove: (selectedWallet: Wallet) => void;
+    onReject: (reason?: string) => void;
+}
+
+export const ConnectRequestModal: React.FC<ConnectRequestModalProps> = ({
+    request,
+    availableWallets,
+    savedWallets,
+    currentWallet,
+    isOpen,
+    onApprove,
+    onReject,
+}) => {
+    const [selectedWallet, setSelectedWallet] = useState<Wallet | null>(currentWallet ?? null);
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Fall back to the active or first available wallet until one is picked.
+    useEffect(() => {
+        if (selectedWallet === null) setSelectedWallet(currentWallet ?? availableWallets[0] ?? null);
+    }, [selectedWallet, currentWallet, availableWallets]);
+
+    // SavedWallet records keyed by the WalletKit id (savedWallet.id is a separate store id).
+    const savedByKitId = useMemo(() => {
+        const map = new Map<string, SavedWallet>();
+        for (const w of savedWallets) {
+            if (w.kitWalletId) map.set(w.kitWalletId, w);
+        }
+        return map;
+    }, [savedWallets]);
+
+    const walletName = (kitId: string): string => savedByKitId.get(kitId)?.name ?? 'Wallet';
+
+    // Saved-wallet records for the connectable wallets, in availableWallets order.
+    const pickerWallets = useMemo(
+        () =>
+            availableWallets.map((w) => savedByKitId.get(w.getWalletId())).filter((w): w is SavedWallet => Boolean(w)),
+        [availableWallets, savedByKitId],
+    );
+
+    const dApp = request.dAppInfo ?? request.preview.dAppInfo;
+    const permissions = request.preview.permissions ?? [];
+    const canSelect = availableWallets.length > 1;
+    const selectedSavedId = selectedWallet ? savedByKitId.get(selectedWallet.getWalletId())?.id : undefined;
+
+    const handleApprove = async () => {
+        if (!selectedWallet) return;
+        setIsLoading(true);
+        try {
+            await onApprove(selectedWallet);
+        } catch (error) {
+            log.error('Failed to approve connection:', error);
+            toast.error('Failed to approve connection', { description: (error as Error)?.message });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    // The picker reports a SavedWallet store id — resolve it to its loaded WalletKit wallet.
+    const handlePick = (savedId: string) => {
+        const kitId = savedWallets.find((w) => w.id === savedId)?.kitWalletId;
+        const wallet = kitId ? availableWallets.find((w) => w.getWalletId() === kitId) : undefined;
+        if (wallet) setSelectedWallet(wallet);
+        setPickerOpen(false);
+    };
+
+    const walletSlot = (
+        <WalletPlate
+            name={selectedWallet ? walletName(selectedWallet.getWalletId()) : 'Wallet'}
+            address={selectedWallet?.getAddress() ?? ''}
+            selectable={canSelect}
+            onClick={canSelect ? () => setPickerOpen(true) : undefined}
+        />
+    );
+
+    return (
+        <DappRequestModal
+            isOpen={isOpen}
+            testId="connect-request"
+            dAppInfo={dApp}
+            domain={request.domain}
+            verb="Connect to"
+            subtitle={`${dApp?.name ?? 'This dApp'} is requesting access to your wallet address:`}
+            walletSlot={walletSlot}
+            altView={
+                pickerOpen ? (
+                    <WalletPickerView
+                        onBack={() => setPickerOpen(false)}
+                        wallets={pickerWallets}
+                        selectedId={selectedSavedId}
+                        onSelect={handlePick}
+                    />
+                ) : undefined
+            }
+            primary={
+                <Button
+                    fullWidth
+                    onClick={handleApprove}
+                    loading={isLoading}
+                    disabled={!selectedWallet || isLoading}
+                    data-testid="connect-approve"
+                >
+                    Connect wallet
+                </Button>
+            }
+            onReject={() => onReject('User rejected the connection')}
+            rejectDisabled={isLoading}
+            rejectTestId="connect-reject"
+            disclaimer="Only connect to trusted applications. This will give the dApp access to your wallet address and allow it to request transactions."
+        >
+            {permissions.length > 0 && (
+                <div className="rounded-2xl bg-gray-100 p-4">
+                    <p className="text-xs font-medium uppercase tracking-wide text-gray-400">Requested permissions</p>
+                    <div className="mt-3 space-y-3">
+                        {permissions.map((permission, index) => (
+                            <div key={index}>
+                                <p className="font-bold text-gray-900">{permission.title}</p>
+                                {permission.description && (
+                                    <p className="text-sm text-gray-500">{permission.description}</p>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </DappRequestModal>
+    );
+};
diff --git a/apps/demo-wallet/src/features/ton-connect/components/connect-request-modal/index.ts b/apps/demo-wallet/src/features/ton-connect/components/connect-request-modal/index.ts
new file mode 100644
index 000000000..e28048908
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/connect-request-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './connect-request-modal';
diff --git a/apps/demo-wallet/src/features/ton-connect/components/dapp-request-header/dapp-request-header.tsx b/apps/demo-wallet/src/features/ton-connect/components/dapp-request-header/dapp-request-header.tsx
new file mode 100644
index 000000000..4d01e5e94
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/dapp-request-header/dapp-request-header.tsx
@@ -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 React from 'react';
+
+import { FallbackImage } from '@/core/components/ui/fallback-image';
+
+interface DappRequestHeaderProps {
+    /** Verb line, e.g. "Connect to" / "Sign data for". */
+    verb: string;
+    /** dApp host/name shown in blue (the "{dApp}?" part). */
+    label: string;
+    subtitle: string;
+    dAppIconUrl?: string;
+}
+
+/** Wallet ↔ dApp icon pair + "{verb} {dApp}?" title + subtitle, shared by all dApp request modals. */
+export const DappRequestHeader: React.FC<DappRequestHeaderProps> = ({ verb, label, subtitle, dAppIconUrl }) => (
+    <div className="flex flex-col items-center text-center">
+        <div className="flex items-center gap-3">
+            <span className="flex h-20 w-20 items-center justify-center rounded-3xl bg-gray-100">
+                <img src="/walletkit.svg" alt="" className="h-12 w-12" />
+            </span>
+            <span className="flex h-20 w-20 items-center justify-center overflow-hidden rounded-3xl bg-gray-100">
+                <FallbackImage
+                    src={dAppIconUrl}
+                    alt=""
+                    className="h-full w-full object-cover"
+                    fallback={
+                        <span className="flex h-full w-full items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 text-2xl font-bold text-white">
+                            {label.slice(0, 1).toUpperCase()}
+                        </span>
+                    }
+                />
+            </span>
+        </div>
+
+        <h2 data-testid="request" className="mt-6 text-2xl font-bold leading-tight text-gray-900">
+            {verb}
+            <br />
+            <span className="text-blue-600">{label}</span>?
+        </h2>
+        <p className="mt-2 text-base text-gray-500">{subtitle}</p>
+    </div>
+);
diff --git a/apps/demo-wallet/src/features/ton-connect/components/dapp-request-header/index.ts b/apps/demo-wallet/src/features/ton-connect/components/dapp-request-header/index.ts
new file mode 100644
index 000000000..78fa29891
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/dapp-request-header/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './dapp-request-header';
diff --git a/apps/demo-wallet/src/features/ton-connect/components/dapp-request-modal/dapp-request-modal.tsx b/apps/demo-wallet/src/features/ton-connect/components/dapp-request-modal/dapp-request-modal.tsx
new file mode 100644
index 000000000..701b64be3
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/dapp-request-modal/dapp-request-modal.tsx
@@ -0,0 +1,112 @@
+/**
+ * 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 React from 'react';
+import type { DAppInfo } from '@ton/walletkit';
+
+import { DappRequestHeader } from '../dapp-request-header';
+
+import { Button } from '@/core/components/ui/button';
+import { Modal } from '@/core/components/ui/modal';
+
+/** Resolve the blue "{dApp}?" label: domain → URL host → name → fallback. */
+const dappLabel = (dAppInfo?: DAppInfo, domain?: string): string => {
+    if (domain) return domain;
+    if (dAppInfo?.url) {
+        try {
+            return new URL(dAppInfo.url).host;
+        } catch {
+            return dAppInfo.url;
+        }
+    }
+    return dAppInfo?.name ?? 'this dApp';
+};
+
+interface DappRequestModalProps {
+    isOpen: boolean;
+    dAppInfo?: DAppInfo;
+    domain?: string;
+    verb: string;
+    subtitle: string;
+    /** The wallet plate (and, for connect, its inline picker). */
+    walletSlot: React.ReactNode;
+    /** Request-specific content (permissions / data-to-sign / tx details). */
+    children: React.ReactNode;
+    /** Primary action node (a Button or HoldToSignButton). */
+    primary: React.ReactNode;
+    onReject: () => void;
+    rejectDisabled?: boolean;
+    rejectTestId?: string;
+    disclaimer: React.ReactNode;
+    /** Distinguishes the request type for tests (e.g. "connect-request"). */
+    testId?: string;
+    /** When set, replaces the request content with this in-modal view (e.g. the wallet picker),
+     *  reusing the same overlay so switching doesn't flicker. */
+    altView?: React.ReactNode;
+}
+
+/**
+ * Shared shell for every TON Connect request (connect / sign-data / transaction / sign-message):
+ * a non-dismissible modal with a scrollable body and a pinned footer (primary + reject + disclaimer).
+ */
+export const DappRequestModal: React.FC<DappRequestModalProps> = ({
+    isOpen,
+    dAppInfo,
+    domain,
+    verb,
+    subtitle,
+    walletSlot,
+    children,
+    primary,
+    onReject,
+    rejectDisabled,
+    rejectTestId,
+    disclaimer,
+    testId,
+    altView,
+}) => (
+    <Modal.Container
+        isOpened={isOpen}
+        onOpenChange={() => {}}
+        dismissible={false}
+        className="flex max-h-[88vh] flex-col overflow-hidden"
+        data-testid={testId}
+    >
+        {altView ?? (
+            <>
+                <div className="flex-1 overflow-y-auto px-5 pt-6">
+                    <DappRequestHeader
+                        verb={verb}
+                        label={dappLabel(dAppInfo, domain)}
+                        subtitle={subtitle}
+                        dAppIconUrl={dAppInfo?.iconUrl}
+                    />
+
+                    <div className="mt-6 space-y-3 pb-2">
+                        {walletSlot}
+                        {children}
+                        <p className="px-2 pt-1 text-center text-xs text-gray-500">{disclaimer}</p>
+                    </div>
+                </div>
+
+                <div className="shrink-0 space-y-2 px-5 pb-6 pt-3">
+                    {primary}
+                    <Button
+                        variant="secondary"
+                        fullWidth
+                        onClick={onReject}
+                        disabled={rejectDisabled}
+                        data-testid={rejectTestId}
+                    >
+                        Reject
+                    </Button>
+                </div>
+            </>
+        )}
+    </Modal.Container>
+);
diff --git a/apps/demo-wallet/src/features/ton-connect/components/dapp-request-modal/index.ts b/apps/demo-wallet/src/features/ton-connect/components/dapp-request-modal/index.ts
new file mode 100644
index 000000000..3a5f35f3f
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/dapp-request-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './dapp-request-modal';
diff --git a/apps/demo-wallet/src/features/ton-connect/components/request-modal/index.ts b/apps/demo-wallet/src/features/ton-connect/components/request-modal/index.ts
new file mode 100644
index 000000000..330b6ef2a
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/request-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './request-modal';
diff --git a/apps/demo-wallet/src/features/ton-connect/components/request-modal/request-modal.tsx b/apps/demo-wallet/src/features/ton-connect/components/request-modal/request-modal.tsx
new file mode 100644
index 000000000..49a0cd736
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/request-modal/request-modal.tsx
@@ -0,0 +1,179 @@
+/**
+ * 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 React, { useEffect, useMemo, useState } from 'react';
+import type { SendTransactionRequestEvent, SignMessageRequestEvent, TransactionEmulatedPreview } from '@ton/walletkit';
+import { useAuth, useWalletKit, useWalletStore } from '@demo/wallet-core';
+import type { SavedWallet } from '@demo/wallet-core';
+import { toast } from 'sonner';
+
+import { DappRequestModal } from '../dapp-request-modal';
+import { WalletPlate } from '../wallet-plate';
+
+import { Button } from '@/core/components/ui/button';
+import { HoldToSignButton } from '@/core/components/ui/hold-to-sign-button';
+import { JettonFlow } from '@/features/jettons';
+import { createComponentLogger } from '@/core/lib/logger';
+
+type RequestEvent = SendTransactionRequestEvent | SignMessageRequestEvent;
+
+interface RequestModalProps {
+    request: RequestEvent;
+    savedWallets: SavedWallet[];
+    isOpen: boolean;
+    verb: string;
+    subtitle: string;
+    details?: React.ReactNode;
+    approveLabel: string;
+    disclaimer: React.ReactNode;
+    testIds: { approve: string; reject: string };
+    /** Distinguishes the request type for tests (e.g. "transaction-request"). */
+    modalTestId: string;
+    onApprove: () => Promise<void>;
+    onReject: () => void;
+    loggerName: string;
+    previewMode: 'send' | 'sign';
+}
+
+/** Shared shell for transaction / sign-message requests, built on {@link DappRequestModal}. */
+export const RequestModal: React.FC<RequestModalProps> = ({
+    request,
+    savedWallets,
+    isOpen,
+    verb,
+    subtitle,
+    details,
+    approveLabel,
+    disclaimer,
+    testIds,
+    modalTestId,
+    onApprove,
+    onReject,
+    loggerName,
+    previewMode,
+}) => {
+    const walletKit = useWalletKit();
+    const isAuthenticated = useWalletStore((state) => state.walletManagement.isAuthenticated);
+    const { holdToSign } = useAuth();
+    const [isLoading, setIsLoading] = useState(false);
+    const [isExpired, setIsExpired] = useState(false);
+    const [localPreview, setLocalPreview] = useState<TransactionEmulatedPreview | undefined>(undefined);
+
+    const log = useMemo(() => createComponentLogger(loggerName), [loggerName]);
+
+    const currentWallet = useMemo(
+        () => (request.walletAddress ? (savedWallets.find((w) => w.kitWalletId === request.walletId) ?? null) : null),
+        [savedWallets, request.walletAddress, request.walletId],
+    );
+
+    useEffect(() => {
+        const check = () => {
+            const validUntil = request.request?.validUntil;
+            setIsExpired(validUntil ? validUntil < Math.floor(Date.now() / 1000) : false);
+        };
+        check();
+        const interval = setInterval(check, 1000);
+        return () => clearInterval(interval);
+    }, [request.request?.validUntil]);
+
+    useEffect(() => {
+        if (!isAuthenticated) return;
+        async function updatePreview() {
+            if (request.preview.data) return;
+            await walletKit?.ensureInitialized();
+            const preview = await walletKit
+                ?.getWallet(request.walletId ?? '')
+                ?.getTransactionPreview(request.request, { mode: previewMode });
+            setLocalPreview(preview);
+        }
+        updatePreview();
+    }, [request.walletId, request.request, request.preview, walletKit, isAuthenticated, previewMode]);
+
+    const preview = useMemo(() => localPreview ?? request.preview.data, [request, localPreview]);
+
+    useEffect(() => {
+        if (!isOpen) {
+            setIsLoading(false);
+            setIsExpired(false);
+        }
+    }, [isOpen]);
+
+    const handleApprove = async () => {
+        setIsLoading(true);
+        try {
+            await onApprove();
+        } catch (error) {
+            log.error(`Failed to approve ${loggerName}:`, error);
+            toast.error('Failed to approve request', { description: (error as Error)?.message });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const hasNoTransfers =
+        preview?.moneyFlow?.outputs === '0' &&
+        preview?.moneyFlow?.inputs === '0' &&
+        preview?.moneyFlow?.ourTransfers.length === 0;
+
+    const primary = isExpired ? (
+        <Button fullWidth disabled data-testid={testIds.approve}>
+            Expired
+        </Button>
+    ) : holdToSign ? (
+        <HoldToSignButton onComplete={handleApprove} loading={isLoading} disabled={isLoading} holdDuration={3000} />
+    ) : (
+        <Button
+            fullWidth
+            onClick={handleApprove}
+            loading={isLoading}
+            disabled={isLoading}
+            data-testid={testIds.approve}
+        >
+            {approveLabel}
+        </Button>
+    );
+
+    return (
+        <DappRequestModal
+            isOpen={isOpen}
+            testId={modalTestId}
+            dAppInfo={request.dAppInfo}
+            domain={request.domain}
+            verb={verb}
+            subtitle={subtitle}
+            walletSlot={
+                currentWallet ? (
+                    <WalletPlate name={currentWallet.name} address={request.walletAddress ?? currentWallet.address} />
+                ) : null
+            }
+            primary={primary}
+            onReject={onReject}
+            rejectDisabled={isLoading}
+            rejectTestId={testIds.reject}
+            disclaimer={disclaimer}
+        >
+            {isExpired ? (
+                <div className="rounded-2xl bg-orange-50 p-4 text-sm text-orange-800">
+                    This request has expired and can no longer be signed. Reject it and request a new one from the dApp.
+                </div>
+            ) : (
+                <>
+                    {details}
+                    {preview?.result === 'success' && !hasNoTransfers && (
+                        <JettonFlow transfers={preview.moneyFlow?.ourTransfers ?? []} />
+                    )}
+                    {preview && (preview.result === 'failure' || preview.error) && (
+                        <div className="rounded-2xl bg-red-50 p-3 text-sm text-red-800">
+                            <strong>Error:</strong> {preview.error?.message}
+                        </div>
+                    )}
+                </>
+            )}
+        </DappRequestModal>
+    );
+};
diff --git a/apps/demo-wallet/src/features/ton-connect/components/sign-data-request-modal/index.ts b/apps/demo-wallet/src/features/ton-connect/components/sign-data-request-modal/index.ts
new file mode 100644
index 000000000..985e3bef6
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/sign-data-request-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './sign-data-request-modal';
diff --git a/apps/demo-wallet/src/features/ton-connect/components/sign-data-request-modal/sign-data-request-modal.tsx b/apps/demo-wallet/src/features/ton-connect/components/sign-data-request-modal/sign-data-request-modal.tsx
new file mode 100644
index 000000000..d1d99a82d
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/sign-data-request-modal/sign-data-request-modal.tsx
@@ -0,0 +1,143 @@
+/**
+ * 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 React, { useMemo, useState } from 'react';
+import type { SignDataRequestEvent } from '@ton/walletkit';
+import type { SavedWallet } from '@demo/wallet-core';
+import { useAuth } from '@demo/wallet-core';
+import { toast } from 'sonner';
+
+import { DappRequestModal } from '../dapp-request-modal';
+import { WalletPlate } from '../wallet-plate';
+
+import { Button } from '@/core/components/ui/button';
+import { HoldToSignButton } from '@/core/components/ui/hold-to-sign-button';
+import { createComponentLogger } from '@/core/lib/logger';
+
+const log = createComponentLogger('SignDataRequestModal');
+
+interface SignDataRequestModalProps {
+    request: SignDataRequestEvent;
+    savedWallets: SavedWallet[];
+    isOpen: boolean;
+    onApprove: () => void;
+    onReject: (reason?: string) => void;
+}
+
+const renderDataToSign = (data: SignDataRequestEvent['preview']['data']): React.ReactNode => {
+    switch (data.type) {
+        case 'text':
+            return (
+                <div className="rounded-2xl bg-gray-100 p-4">
+                    <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">Data to sign</p>
+                    <p className="mt-2 font-semibold text-gray-900">Text Message</p>
+                    <p className="break-words text-sm text-gray-500">{data.value.content}</p>
+                </div>
+            );
+        case 'binary':
+            return (
+                <div className="rounded-2xl bg-gray-100 p-4">
+                    <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">Data to sign</p>
+                    <p className="mt-2 font-semibold text-gray-900">Binary Data</p>
+                    <p className="break-all text-sm text-gray-500">Content: {data.value.content}</p>
+                </div>
+            );
+        case 'cell':
+            return (
+                <div className="space-y-3 rounded-2xl bg-gray-100 p-4">
+                    <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">Data to sign</p>
+                    <div>
+                        <p className="font-semibold text-gray-900">Content</p>
+                        <p className="break-all text-sm text-gray-500">{data.value.content}</p>
+                    </div>
+                    {data.value.schema && (
+                        <div>
+                            <p className="font-semibold text-gray-900">Schema</p>
+                            <p className="break-all text-sm text-gray-500">{data.value.schema}</p>
+                        </div>
+                    )}
+                </div>
+            );
+        default:
+            return <div className="rounded-2xl bg-gray-100 p-4 text-sm text-gray-500">Unknown data format</div>;
+    }
+};
+
+export const SignDataRequestModal: React.FC<SignDataRequestModalProps> = ({
+    request,
+    savedWallets,
+    isOpen,
+    onApprove,
+    onReject,
+}) => {
+    const { holdToSign } = useAuth();
+    const [isLoading, setIsLoading] = useState(false);
+
+    const currentWallet = useMemo(
+        () => savedWallets.find((wallet) => wallet.kitWalletId === request.walletId) ?? null,
+        [savedWallets, request.walletId],
+    );
+
+    const dApp = request.dAppInfo ?? request.preview.dAppInfo;
+
+    const handleApprove = async () => {
+        setIsLoading(true);
+        try {
+            await onApprove();
+            toast.success('Data signed');
+        } catch (error) {
+            log.error('Failed to sign data:', error);
+            toast.error('Failed to sign data', { description: (error as Error)?.message });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <DappRequestModal
+            isOpen={isOpen}
+            testId="sign-data-request"
+            dAppInfo={dApp}
+            domain={request.domain}
+            verb="Sign data for"
+            subtitle="dApp wants you to sign data with your wallet:"
+            walletSlot={
+                <WalletPlate
+                    name={currentWallet?.name ?? 'Wallet'}
+                    address={request.walletAddress ?? currentWallet?.address ?? ''}
+                />
+            }
+            primary={
+                holdToSign ? (
+                    <HoldToSignButton
+                        onComplete={handleApprove}
+                        loading={isLoading}
+                        disabled={isLoading}
+                        holdDuration={3000}
+                    />
+                ) : (
+                    <Button
+                        fullWidth
+                        onClick={handleApprove}
+                        loading={isLoading}
+                        disabled={isLoading}
+                        data-testid="sign-data-approve"
+                    >
+                        Sign data
+                    </Button>
+                )
+            }
+            onReject={() => onReject('User rejected the sign data request')}
+            rejectDisabled={isLoading}
+            rejectTestId="sign-data-reject"
+            disclaimer="Only sign data if you trust the requesting dApp and understand what you're signing. Signing data can have security implications."
+        >
+            {renderDataToSign(request.preview.data)}
+        </DappRequestModal>
+    );
+};
diff --git a/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/index.ts b/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/index.ts
new file mode 100644
index 000000000..40a4d3805
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './sign-message-request-modal';
diff --git a/apps/demo-wallet/src/components/SignMessageRequestModal.tsx b/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/sign-message-request-modal.tsx
similarity index 62%
rename from apps/demo-wallet/src/components/SignMessageRequestModal.tsx
rename to apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/sign-message-request-modal.tsx
index 65826a1bc..144241df3 100644
--- a/apps/demo-wallet/src/components/SignMessageRequestModal.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/sign-message-request-modal.tsx
@@ -11,8 +11,8 @@ import type { SignMessageRequestEvent } from '@ton/walletkit';
 import type { SavedWallet } from '@demo/wallet-core';
 import { useSignMessageRequests } from '@demo/wallet-core';
 
-import { RequestModal } from './RequestModal';
-import { TransactionRequestDetails } from './TransactionRequestDetails';
+import { RequestModal } from '../request-modal';
+import { TransactionRequestDetails } from '../transaction-request-details';
 
 interface SignMessageRequestModalProps {
     request: SignMessageRequestEvent;
@@ -36,25 +36,13 @@ export const SignMessageRequestModal: React.FC<SignMessageRequestModalProps> = (
             request={request}
             savedWallets={savedWallets}
             isOpen={isOpen}
-            title="Sign Message Request"
-            subtitle="A dApp wants you to sign a transaction without broadcasting it"
-            details={<TransactionRequestDetails request={request.request} title="The dApp can submit:" />}
-            warning={{
-                tone: 'yellow',
-                message: (
-                    <>
-                        <strong>Warning:</strong> This will sign a transaction that the dApp can submit later. Only
-                        approve if you trust the requesting dApp.
-                    </>
-                ),
-            }}
-            approveLabel="Sign Message"
-            successMessage="Message signed successfully"
-            testIds={{
-                request: 'request',
-                approve: 'sign-message-approve',
-                reject: 'sign-message-reject',
-            }}
+            verb="Sign message for"
+            subtitle="A dApp wants you to sign a transaction without broadcasting it:"
+            details={<TransactionRequestDetails request={request.request} title="The dApp can submit" />}
+            approveLabel="Sign message"
+            disclaimer="Only sign if you trust the requesting dApp — it can submit this transaction later."
+            testIds={{ approve: 'sign-message-approve', reject: 'sign-message-reject' }}
+            modalTestId="sign-message-request"
             onApprove={handleApprove}
             onReject={handleReject}
             loggerName="SignMessageRequestModal"
diff --git a/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/index.ts b/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/index.ts
new file mode 100644
index 000000000..9bd7931ac
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './ton-connect-screen';
diff --git a/apps/demo-wallet/src/pages/TonConnectRoute.tsx b/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx
similarity index 66%
rename from apps/demo-wallet/src/pages/TonConnectRoute.tsx
rename to apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx
index b77f15dc5..a31bc82ee 100644
--- a/apps/demo-wallet/src/pages/TonConnectRoute.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx
@@ -10,9 +10,9 @@ import React, { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTonConnect } from '@demo/wallet-core';
 
-import { Layout } from '../components';
-import { LoaderCircle } from '../components/LoaderCircle';
-import { createComponentLogger } from '../utils/logger';
+import { LoaderCircle } from '@/core/components/ui/loader-circle';
+import { createComponentLogger } from '@/core/lib/logger';
+import { CenteredScreen } from '@/core/components/shared/centered-screen';
 
 const log = createComponentLogger('TonConnectRoute');
 
@@ -32,10 +32,11 @@ export const TonConnectRoute: React.FC = () => {
     }, [handleTonConnectUrl, navigate]);
 
     return (
-        <Layout title="Connecting to dApp">
-            <div className="py-10">
-                <LoaderCircle size="lg" />
+        <CenteredScreen>
+            <div className="flex flex-col items-center gap-4 px-4 text-center">
+                <LoaderCircle size="lg" className="text-blue-500" />
+                <p className="text-base font-medium text-gray-500">Connecting…</p>
             </div>
-        </Layout>
+        </CenteredScreen>
     );
 };
diff --git a/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/index.ts b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/index.ts
new file mode 100644
index 000000000..c62393fbd
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './transaction-request-details';
diff --git a/apps/demo-wallet/src/components/TransactionRequestDetails.tsx b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/transaction-request-details.tsx
similarity index 87%
rename from apps/demo-wallet/src/components/TransactionRequestDetails.tsx
rename to apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/transaction-request-details.tsx
index 98b4d416e..5ec53974a 100644
--- a/apps/demo-wallet/src/components/TransactionRequestDetails.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/transaction-request-details.tsx
@@ -10,10 +10,10 @@ import React from 'react';
 import type { StructuredItem, TransactionRequest, TransactionRequestMessage } from '@ton/walletkit';
 import { getAddressExplorerUrls } from '@demo/wallet-core';
 
-import { useActiveWalletNetwork, useJettonInfo } from '../hooks/useJettonInfo';
-import { normalizeAddress, shortenAddress } from '../utils/formatters';
-import { decodeTextCommentPayload } from '../utils/payload';
-import { formatNanoTonAmount, formatTokenAmount } from '../utils/units';
+import { useActiveWalletNetwork, useJettonInfo } from '@/features/jettons';
+import { normalizeAddress, shortenAddress } from '@/core/utils/formatters';
+import { decodeTextCommentPayload } from '@/core/utils/payload';
+import { formatNanoTonAmount, formatTokenAmount } from '@/core/utils/units';
 
 interface TransactionRequestDetailsProps {
     request: TransactionRequest;
@@ -40,7 +40,7 @@ function AddressLink({ address, label }: { address?: string; label?: string }) {
 }
 
 function DetailPill({ children }: { children: React.ReactNode }) {
-    return <span className="text-[10px] px-2 py-0.5 bg-gray-100 text-gray-700 rounded">{children}</span>;
+    return <span className="text-[10px] px-2 py-0.5 bg-white text-gray-600 rounded">{children}</span>;
 }
 
 function PayloadDetails({ label, payload }: { label: string; payload?: string }) {
@@ -74,7 +74,7 @@ function renderDetails(details: Array<string | undefined>) {
 
 function RawMessageAction({ message, index }: { message: TransactionRequestMessage; index: number }) {
     return (
-        <div className="p-3 border border-gray-200 rounded-lg space-y-2">
+        <div className="space-y-2 py-3 first:pt-0 last:pb-0">
             <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0">
                     <div className="text-sm font-medium text-gray-900">Message #{index + 1}</div>
@@ -98,10 +98,10 @@ function RawMessageAction({ message, index }: { message: TransactionRequestMessa
 
 function TonItemAction({ item, index }: { item: Extract<StructuredItem, { type: 'ton' }>; index: number }) {
     return (
-        <div className="p-3 border border-gray-200 rounded-lg space-y-2">
+        <div className="space-y-2 py-3 first:pt-0 last:pb-0">
             <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0">
-                    <div className="text-sm font-medium text-gray-900">Send TON #{index + 1}</div>
+                    <div className="text-sm font-medium text-gray-900">Send GRAM #{index + 1}</div>
                     <div className="text-xs text-gray-500 truncate">
                         To <AddressLink address={item.address} />
                     </div>
@@ -123,7 +123,7 @@ function JettonItemAction({ item, index }: { item: Extract<StructuredItem, { typ
     const jettonInfo = useJettonInfo(item.master);
 
     return (
-        <div className="p-3 border border-gray-200 rounded-lg space-y-2">
+        <div className="space-y-2 py-3 first:pt-0 last:pb-0">
             <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0">
                     <div className="text-sm font-medium text-gray-900">Send jetton #{index + 1}</div>
@@ -131,7 +131,9 @@ function JettonItemAction({ item, index }: { item: Extract<StructuredItem, { typ
                         To <AddressLink address={item.destination} />
                     </div>
                     <div className="text-xs text-gray-500 truncate flex items-center gap-1">
-                        {jettonInfo?.image && <img src={jettonInfo.image} alt="" className="w-4 h-4 rounded-full" />}
+                        {jettonInfo?.images?.[0] && (
+                            <img src={jettonInfo.images[0]} alt="" className="w-4 h-4 rounded-full" />
+                        )}
                         <span>{jettonInfo?.name ?? 'Jetton'}</span>
                         <AddressLink
                             address={item.master}
@@ -156,7 +158,7 @@ function JettonItemAction({ item, index }: { item: Extract<StructuredItem, { typ
 
 function NftItemAction({ item, index }: { item: Extract<StructuredItem, { type: 'nft' }>; index: number }) {
     return (
-        <div className="p-3 border border-gray-200 rounded-lg space-y-2">
+        <div className="space-y-2 py-3 first:pt-0 last:pb-0">
             <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0">
                     <div className="text-sm font-medium text-gray-900">Transfer NFT #{index + 1}</div>
@@ -185,20 +187,18 @@ function StructuredItemAction({ item, index }: { item: StructuredItem; index: nu
     return <NftItemAction item={item} index={index} />;
 }
 
-export function TransactionRequestDetails({ request, title = 'You will sign:' }: TransactionRequestDetailsProps) {
+export function TransactionRequestDetails({ request, title = 'You will sign' }: TransactionRequestDetailsProps) {
     const items = request.items ?? [];
     const messages = request.messages ?? [];
     const hasItems = items.length > 0;
     const count = hasItems ? items.length : messages.length;
 
     return (
-        <div>
-            <div className="font-semibold mb-1">{title}</div>
-            <div className="space-y-2">
+        <div className="rounded-2xl bg-gray-100 p-4">
+            <p className="text-xs font-medium uppercase tracking-wide text-gray-400">{title}</p>
+            <div className="mt-3 divide-y divide-gray-200">
                 {count === 0 ? (
-                    <div className="border rounded-lg p-3 bg-gray-50">
-                        <p className="text-sm text-gray-600 text-center">No outgoing messages in this request</p>
-                    </div>
+                    <p className="text-sm text-gray-500">No outgoing messages in this request</p>
                 ) : hasItems ? (
                     items.map((item, index) => (
                         <StructuredItemAction key={`${item.type}-${index}`} item={item} index={index} />
diff --git a/apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/index.ts b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/index.ts
new file mode 100644
index 000000000..8e32b272a
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './transaction-request-modal';
diff --git a/apps/demo-wallet/src/components/TransactionRequestModal.tsx b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/transaction-request-modal.tsx
similarity index 75%
rename from apps/demo-wallet/src/components/TransactionRequestModal.tsx
rename to apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/transaction-request-modal.tsx
index e5144529c..40720f07d 100644
--- a/apps/demo-wallet/src/components/TransactionRequestModal.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/transaction-request-modal.tsx
@@ -13,9 +13,10 @@ import { getTransactionExplorerUrls, useTransactionRequests } from '@demo/wallet
 import type { SavedWallet } from '@demo/wallet-core';
 import { toast } from 'sonner';
 
-import { RequestModal } from './RequestModal';
-import { TransactionRequestDetails } from './TransactionRequestDetails';
-import { useActiveWalletNetwork } from '../hooks/useJettonInfo';
+import { RequestModal } from '../request-modal';
+import { TransactionRequestDetails } from '../transaction-request-details';
+
+import { useActiveWalletNetwork } from '@/features/jettons';
 
 interface TransactionRequestModalProps {
     request: SendTransactionRequestEvent;
@@ -61,25 +62,13 @@ export const TransactionRequestModal: React.FC<TransactionRequestModalProps> = (
             request={request}
             savedWallets={savedWallets}
             isOpen={isOpen}
-            title="Transaction Request"
-            subtitle="A dApp wants to send a transaction from your wallet"
+            verb="Confirm transaction for"
+            subtitle="A dApp wants to send a transaction from your wallet:"
             details={<TransactionRequestDetails request={request.request} />}
-            warning={{
-                tone: 'red',
-                message: (
-                    <>
-                        <strong>Warning:</strong> This transaction will be irreversible. Only approve if you trust the
-                        requesting dApp and understand the transaction details.
-                    </>
-                ),
-            }}
             approveLabel="Approve & Sign"
-            successMessage="Transaction signed successfully"
-            testIds={{
-                request: 'request',
-                approve: 'send-transaction-approve',
-                reject: 'send-transaction-reject',
-            }}
+            disclaimer="Only approve transactions from dApps you trust. Blockchain transactions are irreversible."
+            testIds={{ approve: 'send-transaction-approve', reject: 'send-transaction-reject' }}
+            modalTestId="transaction-request"
             onApprove={handleApprove}
             onReject={handleReject}
             loggerName="TransactionRequestModal"
diff --git a/apps/demo-wallet/src/features/ton-connect/components/wallet-plate/index.ts b/apps/demo-wallet/src/features/ton-connect/components/wallet-plate/index.ts
new file mode 100644
index 000000000..fe27067d5
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/wallet-plate/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './wallet-plate';
diff --git a/apps/demo-wallet/src/features/ton-connect/components/wallet-plate/wallet-plate.tsx b/apps/demo-wallet/src/features/ton-connect/components/wallet-plate/wallet-plate.tsx
new file mode 100644
index 000000000..740e462ae
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/wallet-plate/wallet-plate.tsx
@@ -0,0 +1,53 @@
+/**
+ * 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 React from 'react';
+import { ChevronsUpDown, Wallet } from 'lucide-react';
+
+import { cn } from '@/core/lib/utils';
+
+const shorten = (address: string): string =>
+    address.length > 16 ? `${address.slice(0, 6)}...${address.slice(-6)}` : address;
+
+interface WalletPlateProps {
+    name: string;
+    address: string;
+    /** Shows the selector chevron and turns the plate into a button (connect modal only). */
+    selectable?: boolean;
+    onClick?: () => void;
+}
+
+/** The "Wallet" row in a dApp request: icon + name + truncated address, with an optional selector. */
+export const WalletPlate: React.FC<WalletPlateProps> = ({ name, address, selectable, onClick }) => {
+    const className = 'flex w-full items-center gap-3 rounded-2xl border border-gray-200 p-3.5 text-left';
+    const content = (
+        <>
+            <span className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-500">
+                <Wallet className="h-5 w-5" />
+            </span>
+            <span className="min-w-0 flex-1">
+                <span className="block truncate font-bold text-gray-900">{name}</span>
+                <span className="block truncate text-sm text-gray-500">{shorten(address)}</span>
+            </span>
+            {selectable && <ChevronsUpDown className="h-5 w-5 flex-shrink-0 text-gray-500" />}
+        </>
+    );
+
+    if (selectable && onClick) {
+        return (
+            <button
+                type="button"
+                onClick={onClick}
+                className={cn(className, 'transition-colors hover:border-gray-300')}
+            >
+                {content}
+            </button>
+        );
+    }
+    return <div className={className}>{content}</div>;
+};
diff --git a/apps/demo-wallet/src/features/ton-connect/index.ts b/apps/demo-wallet/src/features/ton-connect/index.ts
new file mode 100644
index 000000000..845634798
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/index.ts
@@ -0,0 +1,19 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/ton-connect-screen';
+export * from './components/connect-dapp-modal';
+export * from './components/connect-request-modal';
+export * from './components/dapp-request-modal';
+export * from './components/dapp-request-header';
+export * from './components/wallet-plate';
+export * from './components/request-modal';
+export * from './components/sign-data-request-modal';
+export * from './components/sign-message-request-modal';
+export * from './components/transaction-request-modal';
+export * from './components/transaction-request-details';
diff --git a/apps/demo-wallet/src/features/transactions/components/history-screen/history-screen.tsx b/apps/demo-wallet/src/features/transactions/components/history-screen/history-screen.tsx
new file mode 100644
index 000000000..c96c4c24a
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/history-screen/history-screen.tsx
@@ -0,0 +1,49 @@
+/**
+ * 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 { useState } from 'react';
+import type { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { TransactionRow } from '../transaction-row';
+import { useTransactionRows } from '../../hooks/use-transaction-rows';
+
+import { Button } from '@/core/components/ui/button';
+import { NewLayout } from '@/core/components/shared/new-layout';
+import { ScreenHeader } from '@/core/components/shared/screen-header';
+
+const PAGE_SIZE = 25;
+
+/** Full transaction history page: all transactions with "load more" pagination. */
+export const HistoryScreen: FC = () => {
+    const navigate = useNavigate();
+    const [limit, setLimit] = useState(PAGE_SIZE);
+    const { rows, hasMore } = useTransactionRows(limit);
+
+    return (
+        <NewLayout header={<ScreenHeader title="History" onBack={() => navigate('/wallet')} />}>
+            {rows.length === 0 ? (
+                <p className="py-12 text-center text-sm text-gray-400">No transactions yet</p>
+            ) : (
+                <div className="space-y-1">
+                    {rows.map((row) => (
+                        <TransactionRow key={row.id} {...row} />
+                    ))}
+                </div>
+            )}
+
+            {hasMore && (
+                <div className="mt-4 flex justify-center">
+                    <Button variant="secondary" size="sm" onClick={() => setLimit((current) => current + PAGE_SIZE)}>
+                        Load more
+                    </Button>
+                </div>
+            )}
+        </NewLayout>
+    );
+};
diff --git a/apps/demo-wallet/src/features/transactions/components/history-screen/index.ts b/apps/demo-wallet/src/features/transactions/components/history-screen/index.ts
new file mode 100644
index 000000000..399c12bfd
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/history-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './history-screen';
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-history/index.ts b/apps/demo-wallet/src/features/transactions/components/transaction-history/index.ts
new file mode 100644
index 000000000..a3bf8856c
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-history/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './transaction-history';
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-history/transaction-history.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-history/transaction-history.tsx
new file mode 100644
index 000000000..dbbdd3679
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-history/transaction-history.tsx
@@ -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 React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+import { TransactionRow } from '../transaction-row';
+import { useTransactionRows } from '../../hooks/use-transaction-rows';
+
+const PREVIEW_COUNT = 6;
+// Load a few extra so the preview still fills 6 rows after action-less events are skipped.
+const PREVIEW_LOAD = 10;
+
+/**
+ * Dashboard "History" block: the latest transactions. Like NftsCard, renders nothing
+ * while loading or when empty; the header navigates to the full history page.
+ */
+export const TransactionHistory: React.FC = () => {
+    const navigate = useNavigate();
+    const { rows } = useTransactionRows(PREVIEW_LOAD);
+    const preview = rows.slice(0, PREVIEW_COUNT);
+
+    if (preview.length === 0) {
+        return null;
+    }
+
+    return (
+        <section>
+            <button
+                type="button"
+                onClick={() => navigate('/wallet/history')}
+                className="mb-2 flex items-center gap-1"
+                aria-label="View all transactions"
+            >
+                <h2 className="text-base font-semibold text-gray-900">History</h2>
+                <ChevronRight className="h-4 w-4 text-gray-400" />
+            </button>
+
+            <div className="space-y-1">
+                {preview.map((row) => (
+                    <TransactionRow key={row.id} {...row} />
+                ))}
+            </div>
+        </section>
+    );
+};
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-row/index.ts b/apps/demo-wallet/src/features/transactions/components/transaction-row/index.ts
new file mode 100644
index 000000000..153caf053
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-row/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './transaction-row';
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-row/transaction-row.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-row/transaction-row.tsx
new file mode 100644
index 000000000..c0304cdd0
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-row/transaction-row.tsx
@@ -0,0 +1,90 @@
+/**
+ * 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 React from 'react';
+import { Check, MinusCircle, PlusCircle, X } from 'lucide-react';
+
+import type { TransactionRowModel, TransactionRowStatus } from '../../utils/map-transaction-row';
+
+const StatusBadge: React.FC<{ status: TransactionRowStatus }> = ({ status }) => {
+    const base =
+        'absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-full flex items-center justify-center ring-2 ring-white';
+
+    if (status === 'success') {
+        return (
+            <span className={`${base} bg-green-500`}>
+                <Check className="w-2.5 h-2.5 text-white" strokeWidth={3} />
+            </span>
+        );
+    }
+    if (status === 'failed') {
+        return (
+            <span className={`${base} bg-red-500`}>
+                <X className="w-2.5 h-2.5 text-white" strokeWidth={3} />
+            </span>
+        );
+    }
+    return (
+        <span className={`${base} bg-white`} title="Pending">
+            <span className="w-3 h-3 rounded-full border-2 border-gray-300 border-t-gray-500 animate-spin" />
+        </span>
+    );
+};
+
+/** Single transaction list item. Reused by the dashboard preview and the full history page. */
+export const TransactionRow: React.FC<TransactionRowModel> = ({
+    explorerUrl,
+    title,
+    subtitleId,
+    amount,
+    isOutgoing,
+    status,
+    date,
+}) => {
+    const content = (
+        <>
+            <span className="relative w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                {isOutgoing ? (
+                    <MinusCircle className="w-6 h-6 text-gray-400" strokeWidth={2} />
+                ) : (
+                    <PlusCircle className="w-6 h-6 text-gray-400" strokeWidth={2} />
+                )}
+                <StatusBadge status={status} />
+            </span>
+
+            <div className="flex-1 min-w-0">
+                <div className="text-sm font-semibold text-gray-900 truncate">{title}</div>
+                <div className="text-xs text-gray-500 truncate">{subtitleId}</div>
+            </div>
+
+            <div className="text-right flex-shrink-0">
+                <div className={`text-sm font-semibold ${isOutgoing ? 'text-red-500' : 'text-green-500'}`}>
+                    {amount}
+                </div>
+                <div className="text-xs text-gray-400">{date}</div>
+            </div>
+        </>
+    );
+
+    const rowClassName = 'flex items-center gap-3 py-2 -mx-1 px-1 rounded-xl';
+
+    if (!explorerUrl) {
+        return <div className={rowClassName}>{content}</div>;
+    }
+
+    return (
+        <a
+            href={explorerUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`${rowClassName} hover:bg-gray-50 transition-colors`}
+        >
+            {content}
+        </a>
+    );
+};
diff --git a/apps/demo-wallet/src/features/transactions/hooks/use-transaction-rows.ts b/apps/demo-wallet/src/features/transactions/hooks/use-transaction-rows.ts
new file mode 100644
index 000000000..e41e13a65
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/hooks/use-transaction-rows.ts
@@ -0,0 +1,85 @@
+/**
+ * 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 { useEffect, useMemo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { useWalletStore } from '@demo/wallet-core';
+import { Base64ToHex } from '@ton/walletkit';
+import type { Event } from '@ton/walletkit';
+
+import { mapEventToRow, mapPendingToRow } from '../utils/map-transaction-row';
+import type { TransactionRowModel } from '../utils/map-transaction-row';
+
+const nowSeconds = (): number => Math.floor(Date.now() / 1000);
+
+interface TransactionRows {
+    rows: TransactionRowModel[];
+    hasMore: boolean;
+}
+
+/**
+ * Loads the latest events (first `limit`, newest first), merges pending transactions
+ * and maps everything to rows. Shared by the dashboard preview and the full history page.
+ */
+export const useTransactionRows = (limit: number): TransactionRows => {
+    const { events, loadEvents, address, pendingTransactions, network, hasMore } = useWalletStore(
+        useShallow((state) => {
+            const activeWallet = state.walletManagement.savedWallets.find(
+                (w) => w.id === state.walletManagement.activeWalletId,
+            );
+            return {
+                events: state.walletManagement.events,
+                loadEvents: state.loadEvents,
+                address: state.walletManagement.address,
+                pendingTransactions: state.walletManagement.pendingTransactions,
+                network: activeWallet?.network ?? 'testnet',
+                hasMore: state.walletManagement.hasNextEvents,
+            };
+        }),
+    );
+
+    useEffect(() => {
+        if (!address) return;
+        void loadEvents(limit, 0);
+    }, [address, loadEvents, limit]);
+
+    const rows = useMemo<TransactionRowModel[]>(() => {
+        const eventItems = (events ?? []) as Event[];
+        const myAddress = address ?? '';
+
+        // Drop pending entries already confirmed by a loaded event.
+        const confirmedTraceIds = new Set<string>();
+        const confirmedExternalHashes = new Set<string>();
+        for (const ev of eventItems) {
+            if (ev.eventId) confirmedTraceIds.add(String(ev.eventId));
+            if (ev.traceExternalHash) confirmedExternalHashes.add(Base64ToHex(ev.traceExternalHash));
+        }
+
+        const seen = new Set<string>();
+        const pendingRows = pendingTransactions
+            .filter((p) => {
+                if (p.traceId && confirmedTraceIds.has(p.traceId)) return false;
+                if (p.externalHash && confirmedExternalHashes.has(p.externalHash)) return false;
+                if (seen.has(p.traceId)) return false;
+                seen.add(p.traceId);
+                return true;
+            })
+            .map((p) => {
+                const timestamp = p.preview?.timestamp ?? nowSeconds();
+                return { timestamp, row: mapPendingToRow(p, myAddress, timestamp, network) };
+            });
+
+        const eventRows = eventItems
+            .map((ev) => ({ timestamp: ev.timestamp, row: mapEventToRow(ev, myAddress, network) }))
+            .filter((item): item is { timestamp: number; row: TransactionRowModel } => item.row !== null);
+
+        return [...pendingRows, ...eventRows].sort((a, b) => b.timestamp - a.timestamp).map((item) => item.row);
+    }, [events, pendingTransactions, address, network]);
+
+    return { rows, hasMore };
+};
diff --git a/apps/demo-wallet/src/features/transactions/index.ts b/apps/demo-wallet/src/features/transactions/index.ts
new file mode 100644
index 000000000..5c1d3ab79
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/index.ts
@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/transaction-row';
+export * from './components/transaction-history';
+export * from './utils/map-transaction-row';
+export * from './components/history-screen';
+export * from './hooks/use-transaction-rows';
diff --git a/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts b/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts
new file mode 100644
index 000000000..adfccc36e
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts
@@ -0,0 +1,172 @@
+/**
+ * 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 { Base64ToHex } from '@ton/walletkit';
+import type { Action, Event } from '@ton/walletkit';
+
+import { formatLargeValue, formatUnits, getTonviewerTxUrl, sameAddress } from '@/core/utils';
+
+/** Network accepted by the explorer-url builder (mainnet/testnet/tetra). */
+type ExplorerNetwork = Parameters<typeof getTonviewerTxUrl>[0];
+
+/** Status badge shown on the transaction icon. */
+export type TransactionRowStatus = 'success' | 'loading' | 'failed';
+
+/** Normalized view-model consumed by {@link TransactionRow}. */
+export interface TransactionRowModel {
+    /** Unique React key. */
+    id: string;
+    /** Tonviewer transaction URL. Undefined for not-yet-on-chain pending transactions (row is not clickable). */
+    explorerUrl?: string;
+    /** Primary label, e.g. "Sent 5 GRAM" / "Received 1 USDT". */
+    title: string;
+    /** Truncated trace id shown as the subtitle. */
+    subtitleId: string;
+    /** Signed crypto amount, e.g. "+5 GRAM" / "-1 USDT". */
+    amount: string;
+    /** Outgoing transfers are red, incoming are green. */
+    isOutgoing: boolean;
+    status: TransactionRowStatus;
+    /** Formatted date+time, e.g. "Sep 10, 14:30". */
+    date: string;
+}
+
+/** Minimal shape of a streaming pending transaction (structural — avoids a cross-package type import). */
+interface PendingLike {
+    traceId: string;
+    externalHash?: string;
+    finality?: 'pending' | 'confirmed' | 'finalized' | 'invalidated';
+    action?: Action;
+    preview?: { type: 'send' | 'receive' | 'contract'; amount: string };
+}
+
+const GRAM_DECIMALS = 9;
+/** Cap on fractional digits shown for amounts (matches the appkit widget formatter). */
+const AMOUNT_DECIMALS = 4;
+
+/** Raw amount (nanoton / jetton base units) -> compact human string, e.g. "1M" / "1,234.5". */
+const formatAmount = (raw: bigint | string, decimals: number): string =>
+    formatLargeValue(formatUnits(raw, decimals), AMOUNT_DECIMALS);
+
+const truncateMiddle = (value: string): string => {
+    const v = String(value);
+    return v.length > 12 ? `${v.slice(0, 6)}…${v.slice(-4)}` : v;
+};
+
+const formatTxDate = (timestampSeconds: number): string =>
+    new Date(timestampSeconds * 1000).toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+    });
+
+const isOutgoingFromAction = (action: Action, myAddress: string): boolean => {
+    if (action.type === 'TonTransfer' && 'TonTransfer' in action) {
+        return sameAddress(action.TonTransfer?.sender?.address, myAddress);
+    }
+    if (action.type === 'JettonTransfer' && 'JettonTransfer' in action) {
+        return sameAddress(action.JettonTransfer?.sender?.address, myAddress);
+    }
+    if (action.type === 'NftItemTransfer' && 'NftItemTransfer' in action) {
+        return sameAddress(action.NftItemTransfer?.sender?.address, myAddress);
+    }
+    const accounts = action.simplePreview?.accounts;
+    return accounts != null && accounts.length > 0 && sameAddress(accounts[0].address, myAddress);
+};
+
+/** Title + bare value (no sign) for an action, derived from the typed amount fields. */
+const describeAction = (action: Action, isOutgoing: boolean): { title: string; value: string } => {
+    const label = isOutgoing ? 'Sent' : 'Received';
+
+    if (action.type === 'TonTransfer' && 'TonTransfer' in action) {
+        const value = `${formatAmount(action.TonTransfer.amount, GRAM_DECIMALS)} GRAM`;
+        return { title: `${label} ${value}`, value };
+    }
+    if (action.type === 'JettonTransfer' && 'JettonTransfer' in action) {
+        const { amount, jetton } = action.JettonTransfer;
+        const value = `${formatAmount(amount, jetton.decimals)} ${jetton.symbol}`.trim();
+        return { title: `${label} ${value}`, value };
+    }
+    // Other action types (swap, nft, contract): fall back to the API preview text.
+    return { title: action.simplePreview.description, value: action.simplePreview.value };
+};
+
+/** Picks the action that involves the current wallet, preferring the one where we are the sender. */
+const selectRelevantAction = (actions: Action[], myAddress: string): Action => {
+    const withMe = actions.filter((a) => a.simplePreview?.accounts?.some((acc) => sameAddress(acc.address, myAddress)));
+    const isSender = (a: Action): boolean => isOutgoingFromAction(a, myAddress);
+    return withMe.find(isSender) ?? withMe[0] ?? actions[0];
+};
+
+const signedAmount = (value: string, isOutgoing: boolean): string => (value ? `${isOutgoing ? '-' : '+'}${value}` : '');
+
+/**
+ * Maps a historical event to a row. Returns null for events without actions
+ * (rendered elsewhere via the trace fetch — skipped in the dashboard preview).
+ */
+export const mapEventToRow = (
+    event: Event,
+    myAddress: string,
+    network: ExplorerNetwork,
+): TransactionRowModel | null => {
+    if (!event.actions || event.actions.length === 0) return null;
+    const action = selectRelevantAction(event.actions, myAddress);
+    const isOutgoing = isOutgoingFromAction(action, myAddress);
+    const { title, value } = describeAction(action, isOutgoing);
+    const eventId = String(event.eventId);
+    const hash = event.traceExternalHash ? Base64ToHex(event.traceExternalHash) : eventId;
+    return {
+        id: eventId,
+        explorerUrl: getTonviewerTxUrl(network, hash),
+        title,
+        subtitleId: truncateMiddle(eventId),
+        amount: signedAmount(value, isOutgoing),
+        isOutgoing,
+        status: action.status === 'failure' ? 'failed' : 'success',
+        date: formatTxDate(event.timestamp),
+    };
+};
+
+const pendingStatus = (pending: PendingLike): TransactionRowStatus => {
+    if (pending.action?.status === 'failure' || pending.finality === 'invalidated') return 'failed';
+    if (pending.finality === 'finalized') return 'success';
+    return 'loading';
+};
+
+/** Maps a streaming pending transaction to a row (via its parsed action, falling back to the preview). */
+export const mapPendingToRow = (
+    pending: PendingLike,
+    myAddress: string,
+    timestamp: number,
+    network: ExplorerNetwork,
+): TransactionRowModel => {
+    const status = pendingStatus(pending);
+    // Not-yet-on-chain (still loading) transactions have no explorer page yet.
+    const explorerUrl =
+        status === 'loading' ? undefined : getTonviewerTxUrl(network, pending.externalHash ?? pending.traceId);
+    const base = {
+        id: `pending-${pending.traceId}`,
+        explorerUrl,
+        subtitleId: truncateMiddle(pending.traceId),
+        status,
+        date: formatTxDate(timestamp),
+    };
+
+    if (pending.action) {
+        const isOutgoing = isOutgoingFromAction(pending.action, myAddress);
+        const { title, value } = describeAction(pending.action, isOutgoing);
+        return { ...base, title, amount: signedAmount(value, isOutgoing), isOutgoing };
+    }
+
+    const isOutgoing = pending.preview?.type === 'send';
+    const value = pending.preview ? `${formatAmount(pending.preview.amount, GRAM_DECIMALS)} GRAM` : '';
+    const title = pending.preview ? `${isOutgoing ? 'Sent' : 'Received'} ${value}` : 'Processing';
+    return { ...base, title, amount: signedAmount(value, isOutgoing), isOutgoing };
+};
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/add-wallet-modal/add-wallet-modal.tsx b/apps/demo-wallet/src/features/wallet-setup/components/add-wallet-modal/add-wallet-modal.tsx
new file mode 100644
index 000000000..db75eb514
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/add-wallet-modal/add-wallet-modal.tsx
@@ -0,0 +1,49 @@
+/**
+ * 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 React from 'react';
+import { KeyRound, Usb } from 'lucide-react';
+
+import { Modal } from '@/core/components/ui/modal';
+import { OptionRow } from '@/core/components/ui/option-row';
+
+export type AddWalletMode = 'import' | 'ledger';
+
+const OPTIONS: { mode: AddWalletMode; title: string; subtitle: string; Icon: typeof KeyRound }[] = [
+    { mode: 'import', title: 'Recovery phrase', subtitle: 'Import with 12 or 24 words', Icon: KeyRound },
+    { mode: 'ledger', title: 'Ledger', subtitle: 'Connect a hardware wallet', Icon: Usb },
+];
+
+interface AddWalletModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Chosen way to add an existing wallet. */
+    onSelect: (mode: AddWalletMode) => void;
+}
+
+/** "Add an existing wallet" picker: import via recovery phrase or connect a Ledger. */
+export const AddWalletModal: React.FC<AddWalletModalProps> = ({ isOpen, onClose, onSelect }) => (
+    <Modal.Container isOpened={isOpen} onOpenChange={(open) => !open && onClose()} className="px-2">
+        <Modal.Header onClose={onClose}>
+            <Modal.Title>Add an existing wallet</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body className="px-3 gap-2">
+            {OPTIONS.map(({ mode, title, subtitle, Icon }) => (
+                <OptionRow
+                    key={mode}
+                    testId={`add-wallet-${mode}`}
+                    icon={<Icon className="w-7 h-7" strokeWidth={1.8} />}
+                    title={title}
+                    subtitle={subtitle}
+                    onClick={() => onSelect(mode)}
+                />
+            ))}
+        </Modal.Body>
+    </Modal.Container>
+);
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/add-wallet-modal/index.ts b/apps/demo-wallet/src/features/wallet-setup/components/add-wallet-modal/index.ts
new file mode 100644
index 000000000..495a19ea2
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/add-wallet-modal/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { AddWalletModal } from './add-wallet-modal';
+export type { AddWalletMode } from './add-wallet-modal';
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-modal/create-wallet-modal.tsx b/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-modal/create-wallet-modal.tsx
new file mode 100644
index 000000000..c2e18bf43
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-modal/create-wallet-modal.tsx
@@ -0,0 +1,49 @@
+/**
+ * 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 React from 'react';
+import { KeyRound, Plus, Usb } from 'lucide-react';
+
+import { Modal } from '@/core/components/ui/modal';
+import { OptionRow } from '@/core/components/ui/option-row';
+
+export type CreateWalletMode = 'create' | 'import' | 'ledger';
+
+const OPTIONS: { mode: CreateWalletMode; title: string; subtitle: string; Icon: typeof KeyRound }[] = [
+    { mode: 'create', title: 'New wallet', subtitle: 'Generate a new recovery phrase', Icon: Plus },
+    { mode: 'import', title: 'Recovery phrase', subtitle: 'Import with 12 or 24 words', Icon: KeyRound },
+    { mode: 'ledger', title: 'Ledger', subtitle: 'Connect a hardware wallet', Icon: Usb },
+];
+
+interface CreateWalletModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Chosen way to add a wallet. */
+    onSelect: (mode: CreateWalletMode) => void;
+}
+
+/** Wallet picker: create a fresh wallet, import a recovery phrase, or connect a Ledger. */
+export const CreateWalletModal: React.FC<CreateWalletModalProps> = ({ isOpen, onClose, onSelect }) => (
+    <Modal.Container isOpened={isOpen} onOpenChange={(open) => !open && onClose()} className="px-2">
+        <Modal.Header onClose={onClose}>
+            <Modal.Title>Add wallet</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body className="px-3 gap-2">
+            {OPTIONS.map(({ mode, title, subtitle, Icon }) => (
+                <OptionRow
+                    key={mode}
+                    icon={<Icon className="w-7 h-7" strokeWidth={1.8} />}
+                    title={title}
+                    subtitle={subtitle}
+                    onClick={() => onSelect(mode)}
+                />
+            ))}
+        </Modal.Body>
+    </Modal.Container>
+);
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-modal/index.ts b/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-modal/index.ts
new file mode 100644
index 000000000..fe0c0ed9f
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-modal/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { CreateWalletModal } from './create-wallet-modal';
+export type { CreateWalletMode } from './create-wallet-modal';
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-screen/create-wallet-screen.tsx b/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-screen/create-wallet-screen.tsx
new file mode 100644
index 000000000..c4ced1bf3
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-screen/create-wallet-screen.tsx
@@ -0,0 +1,156 @@
+/**
+ * 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 React, { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { CreateTonMnemonic } from '@ton/walletkit';
+import { useAuth } from '@demo/wallet-core';
+import type { NetworkType } from '@demo/wallet-core';
+import { toast } from 'sonner';
+
+import { SavePhraseConfirmModal } from '../save-phrase-confirm-modal';
+
+import { CenteredScreen } from '@/core/components/shared/centered-screen';
+import { Button } from '@/core/components/ui/button';
+import { NetworkSelector } from '@/features/wallets';
+import { useTonWallet } from '@/core/hooks';
+
+/** Dedicated "Recovery phrase" screen for creating a new wallet. */
+export const CreateWalletScreen: React.FC = () => {
+    const navigate = useNavigate();
+    const { importWallet } = useTonWallet();
+    const { setUseWalletInterfaceType } = useAuth();
+
+    const [mnemonic, setMnemonic] = useState<string[]>([]);
+    const [network, setNetwork] = useState<NetworkType>('mainnet');
+    const [revealed, setRevealed] = useState(false);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        void (async () => {
+            try {
+                setMnemonic(await CreateTonMnemonic());
+            } catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to generate recovery phrase');
+            }
+        })();
+    }, []);
+
+    const handleCopy = useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(mnemonic.join(' '));
+            toast.success('Recovery phrase copied');
+        } catch {
+            toast.error('Failed to copy');
+        }
+    }, [mnemonic]);
+
+    const handleContinue = async () => {
+        setError('');
+        setIsLoading(true);
+        try {
+            setUseWalletInterfaceType('mnemonic');
+            await importWallet(mnemonic, 'v5r1', network);
+            navigate('/wallet');
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to create wallet');
+            setConfirmOpen(false);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const ready = mnemonic.length > 0;
+    const columns = [0, 12];
+
+    const footer = (
+        <Button
+            fullWidth
+            onClick={() => setConfirmOpen(true)}
+            disabled={!revealed || isLoading}
+            data-testid="create-wallet-confirm"
+        >
+            Continue
+        </Button>
+    );
+
+    return (
+        <CenteredScreen onBack={() => navigate(-1)} footer={footer}>
+            <div className="px-6">
+                <div className="text-center">
+                    <h1 className="text-2xl font-bold text-gray-900">Recovery phrase</h1>
+                    <p className="mt-2 text-base text-gray-500">
+                        This is the only way you will be able to recover your account. Please store it somewhere safe!
+                    </p>
+                </div>
+
+                <div className="mt-4">
+                    <NetworkSelector value={network} onChange={setNetwork} compact />
+                </div>
+
+                <div className="relative mt-6">
+                    <div className={revealed ? 'select-text' : 'blur-sm'}>
+                        <div className="flex gap-6" data-testid="mnemonic-grid">
+                            {columns.map((offset) => (
+                                <div key={offset} className="flex-1 space-y-4">
+                                    {(ready ? mnemonic : Array.from({ length: 24 }).map(() => ''))
+                                        .slice(offset, offset + 12)
+                                        .map((word, idx) => {
+                                            const n = offset + idx + 1;
+                                            return (
+                                                <div key={n} className="flex items-baseline gap-3">
+                                                    <span className="w-6 text-gray-400 tabular-nums">{n}</span>
+                                                    <span
+                                                        className="font-bold text-gray-900"
+                                                        data-testid={`mnemonic-word-${n}`}
+                                                    >
+                                                        {word || '—'}
+                                                    </span>
+                                                </div>
+                                            );
+                                        })}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    {!revealed && (
+                        <div className="absolute inset-0 flex items-center justify-center">
+                            <Button
+                                variant="primary"
+                                size="sm"
+                                onClick={() => setRevealed(true)}
+                                disabled={!ready}
+                                data-testid="reveal-mnemonic"
+                            >
+                                Click to reveal
+                            </Button>
+                        </div>
+                    )}
+                </div>
+
+                <div className="mt-6 flex justify-center">
+                    <Button variant="gray" size="sm" onClick={handleCopy} disabled={!revealed}>
+                        Copy phrase
+                    </Button>
+                </div>
+
+                {error && <p className="mt-4 text-center text-sm text-red-500">{error}</p>}
+            </div>
+
+            <SavePhraseConfirmModal
+                isOpen={confirmOpen}
+                loading={isLoading}
+                onClose={() => setConfirmOpen(false)}
+                onConfirm={handleContinue}
+            />
+        </CenteredScreen>
+    );
+};
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-screen/index.ts b/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-screen/index.ts
new file mode 100644
index 000000000..be0e06d19
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export { CreateWalletScreen } from './create-wallet-screen';
diff --git a/apps/demo-wallet/src/components/ImportWallet.tsx b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
similarity index 50%
rename from apps/demo-wallet/src/components/ImportWallet.tsx
rename to apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
index 2590ae4eb..34db4af02 100644
--- a/apps/demo-wallet/src/components/ImportWallet.tsx
+++ b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
@@ -6,103 +6,53 @@
  *
  */
 
-import React, { useState, useRef, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@demo/wallet-core';
 import type { NetworkType } from '@demo/wallet-core';
 
+import { CenteredScreen } from '@/core/components/shared/centered-screen';
+import { Button } from '@/core/components/ui/button';
+import { Segmented } from '@/core/components/ui/segmented';
+import type { SegmentedOption } from '@/core/components/ui/segmented';
+import { NetworkSelector } from '@/features/wallets';
+import { useTonWallet } from '@/core/hooks';
 import {
     applyMnemonicPaste,
     evaluateBip39Slots,
     extractMnemonicWordsFromPaste,
     isImportableBip39,
-} from '../utils/bip39English';
-import type { Bip39SlotValidation } from '../utils/bip39English';
-import { Button } from './Button';
-import { NetworkSelector } from './NetworkSelector';
+} from '@/features/wallets';
 
-const TOTAL_WORDS = 24;
-
-type SegmentOption<T extends string> = { value: T; label: string; testId: string };
-
-function Segmented<T extends string>({
-    label,
-    value,
-    options,
-    onChange,
-}: {
-    label: string;
-    value: T;
-    options: readonly SegmentOption<T>[];
-    onChange: (value: T) => void;
-}) {
-    return (
-        <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-gray-700">{label}</span>
-            <div className="flex rounded-lg border border-gray-200 overflow-hidden">
-                {options.map((opt, i) => {
-                    const selected = value === opt.value;
-                    const stateClass = selected ? 'bg-blue-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50';
-                    const dividerClass = i > 0 ? 'border-l border-gray-200' : '';
-                    return (
-                        <button
-                            key={opt.value}
-                            type="button"
-                            data-testid={opt.testId}
-                            onClick={() => onChange(opt.value)}
-                            className={`px-3 py-1.5 text-xs font-medium transition-all ${dividerClass} ${stateClass}`}
-                        >
-                            {opt.label}
-                        </button>
-                    );
-                })}
-            </div>
-        </div>
-    );
-}
+type WalletVersion = 'v5r1' | 'v4r2';
+type WalletInterface = 'mnemonic' | 'signer';
 
-type HintTone = 'amber' | 'gray';
-type Hint = { tone: HintTone; text: string };
-
-const HINT_CLASS: Record<HintTone, string> = {
-    amber: 'text-amber-800 bg-amber-50',
-    gray: 'text-gray-700 bg-gray-50',
-};
-
-function deriveHint(validation: Bip39SlotValidation): Hint | null {
-    const { nonEmptyWords, invalidIndices } = validation;
-    const filled = nonEmptyWords.length;
-
-    if (filled === 24) return null;
-    if (invalidIndices.length > 0) {
-        return { tone: 'amber', text: 'Some entries are not in the BIP39 English word list.' };
-    }
-    if (filled > 12) {
-        return { tone: 'gray', text: 'Exactly 12 or 24 words are required.' };
-    }
-    return null;
-}
-
-interface ImportWalletProps {
-    onImport: (
-        mnemonic: string[],
-        interfaceType: 'signer' | 'mnemonic',
-        version?: 'v5r1' | 'v4r2',
-        network?: NetworkType,
-    ) => Promise<void>;
-    onBack: () => void;
-    isLoading: boolean;
-    error: string;
-}
+const TOTAL_WORDS = 24;
+const VERSIONS: SegmentedOption<WalletVersion>[] = [
+    { value: 'v5r1', label: 'V5R1', testId: 'version-select-v5r1' },
+    { value: 'v4r2', label: 'V4R2', testId: 'version-select-v4r2' },
+];
+const INTERFACES: SegmentedOption<WalletInterface>[] = [
+    { value: 'mnemonic', label: 'Mnemonic', testId: 'interface-select-mnemonic' },
+    { value: 'signer', label: 'Signer', testId: 'interface-select-signer' },
+];
+
+/** Dedicated "Recovery phrase" screen for importing an existing wallet via mnemonic. */
+export const ImportWalletScreen: React.FC = () => {
+    const navigate = useNavigate();
+    const { importWallet } = useTonWallet();
+    const { setUseWalletInterfaceType } = useAuth();
 
-export const ImportWallet: React.FC<ImportWalletProps> = ({ onImport, onBack, isLoading, error }) => {
     const [words, setWords] = useState<string[]>(Array(TOTAL_WORDS).fill(''));
     const [activeInput, setActiveInput] = useState(0);
-    const [interfaceType, setInterfaceType] = useState<'signer' | 'mnemonic'>('mnemonic');
-    const [walletVersion, setWalletVersion] = useState<'v5r1' | 'v4r2'>('v5r1');
+    const [version, setVersion] = useState<WalletVersion>('v5r1');
+    const [interfaceType, setInterfaceType] = useState<WalletInterface>('mnemonic');
     const [network, setNetwork] = useState<NetworkType>('mainnet');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
     const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
 
     useEffect(() => {
-        inputRefs.current = inputRefs.current.slice(0, TOTAL_WORDS);
         inputRefs.current[0]?.focus();
     }, []);
 
@@ -119,16 +69,27 @@ export const ImportWallet: React.FC<ImportWalletProps> = ({ onImport, onBack, is
         });
     };
 
-    const handleSubmit = () => {
-        const v = evaluateBip39Slots(words);
-        if (!isImportableBip39(v)) return;
-        onImport(v.nonEmptyWords, interfaceType, walletVersion, network);
+    const validation = useMemo(() => evaluateBip39Slots(words), [words]);
+    const isValid = isImportableBip39(validation);
+
+    const handleSubmit = async () => {
+        if (!isValid) return;
+        setError('');
+        setIsLoading(true);
+        try {
+            setUseWalletInterfaceType(interfaceType);
+            await importWallet(validation.nonEmptyWords, version, network);
+            navigate('/wallet');
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to import wallet');
+        } finally {
+            setIsLoading(false);
+        }
     };
 
     const handleKeyDown = (index: number, event: React.KeyboardEvent) => {
         const isFirst = index === 0;
         const isLast = index === TOTAL_WORDS - 1;
-        // Read live DOM value: during held-key repeats React's closure may lag.
         const value = inputRefs.current[index]?.value ?? '';
 
         switch (event.key) {
@@ -144,7 +105,7 @@ export const ImportWallet: React.FC<ImportWalletProps> = ({ onImport, onBack, is
                 return;
             case 'Enter':
                 event.preventDefault();
-                if (isLast) handleSubmit();
+                if (isLast) void handleSubmit();
                 else inputRefs.current[index + 1]?.focus();
                 return;
             case 'ArrowLeft':
@@ -200,77 +161,64 @@ export const ImportWallet: React.FC<ImportWalletProps> = ({ onImport, onBack, is
         inputRefs.current[0]?.focus();
     };
 
-    const validation = useMemo(() => evaluateBip39Slots(words), [words]);
-    const isValid = isImportableBip39(validation);
-    const hint = deriveHint(validation);
-    const filledCount = validation.nonEmptyWords.length;
-
     const cellClassName = (index: number) => {
-        if (validation.invalidIndices.includes(index)) {
-            return 'border-red-400 bg-red-50 text-red-900';
-        }
+        if (validation.invalidIndices.includes(index)) return 'border-red-400 bg-red-50 text-red-900';
         if (words[index]) return 'border-green-300 bg-green-50 text-green-800';
         if (activeInput === index) return 'border-blue-300 bg-blue-50';
         return 'border-gray-300 bg-white';
     };
 
+    const footer = (
+        <Button fullWidth onClick={handleSubmit} disabled={!isValid || isLoading} data-testid="import-wallet-process">
+            Continue
+        </Button>
+    );
+
     return (
-        <div className="space-y-4">
-            <div className="text-center">
-                <h2 className="text-2xl font-bold text-gray-900" data-testid="subtitle">
-                    Import Wallet
-                </h2>
-                <p className="mt-1 text-sm text-gray-600">Enter your recovery phrase to restore your wallet.</p>
-            </div>
+        <CenteredScreen onBack={() => navigate(-1)} footer={footer}>
+            <div className="px-6">
+                <div className="text-center">
+                    <h1 className="text-2xl font-bold text-gray-900">Recovery phrase</h1>
+                    <p className="mt-2 text-base text-gray-500">Enter the 12 or 24 words of your recovery phrase.</p>
+                </div>
 
-            <div className="bg-white rounded-lg shadow-md border border-gray-200 p-4">
-                <div className="space-y-2 bg-gray-50 rounded-lg p-3 mb-4">
-                    <Segmented
-                        label="Version"
-                        value={walletVersion}
-                        onChange={setWalletVersion}
-                        options={[
-                            { value: 'v5r1', label: 'V5R1', testId: 'version-select-v5r1' },
-                            { value: 'v4r2', label: 'V4R2', testId: 'version-select-v4r2' },
-                        ]}
-                    />
+                <div className="mt-4 space-y-2">
                     <NetworkSelector value={network} onChange={setNetwork} compact />
-                    <Segmented
-                        label="Interface"
-                        value={interfaceType}
-                        onChange={setInterfaceType}
-                        options={[
-                            { value: 'mnemonic', label: 'Mnemonic', testId: 'interface-select-mnemonic' },
-                            { value: 'signer', label: 'Signer', testId: 'interface-select-signer' },
-                        ]}
-                    />
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium text-gray-700">Version</span>
+                        <Segmented value={version} onChange={setVersion} options={VERSIONS} />
+                    </div>
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium text-gray-700">Interface</span>
+                        <Segmented value={interfaceType} onChange={setInterfaceType} options={INTERFACES} />
+                    </div>
                 </div>
 
-                <div className="flex items-center justify-between mb-3">
+                <div className="mt-4 flex items-center justify-between">
                     <span className="text-sm text-gray-500" data-testid="word-count">
-                        {filledCount}/{TOTAL_WORDS} words
+                        {validation.nonEmptyWords.length}/24 words
                     </span>
-                    <div className="flex space-x-3">
+                    <div className="flex gap-3">
                         <button
+                            type="button"
                             onClick={clearAll}
+                            className="text-xs text-gray-500 hover:text-gray-700"
                             data-testid="clear-mnemonic"
-                            className="text-xs text-gray-500 hover:text-gray-700 underline"
-                            type="button"
                         >
                             Clear
                         </button>
                         <button
+                            type="button"
                             onClick={handleClickPaste}
+                            className="text-xs text-blue-600 hover:text-blue-800"
                             data-testid="paste-mnemonic"
-                            className="text-xs text-blue-600 hover:text-blue-800 underline"
-                            type="button"
                         >
                             Paste
                         </button>
                     </div>
                 </div>
 
-                <div className="grid grid-cols-4 gap-1.5 mb-3" data-testid="mnemonic-input-grid">
+                <div className="mt-3 grid grid-cols-4 gap-1.5">
                     {words.map((word, index) => (
                         <div key={index} className="relative">
                             <input
@@ -278,13 +226,13 @@ export const ImportWallet: React.FC<ImportWalletProps> = ({ onImport, onBack, is
                                     inputRefs.current[index] = el;
                                 }}
                                 type="text"
+                                data-testid={`mnemonic-input-${index}`}
                                 value={word}
                                 onChange={(e) => handleWordChange(index, e.target.value)}
                                 onKeyDown={(e) => handleKeyDown(index, e)}
                                 onPaste={(e) => handlePaste(index, e)}
                                 onFocus={() => setActiveInput(index)}
                                 placeholder={`${index + 1}`}
-                                data-testid={`mnemonic-input-${index + 1}`}
                                 className={`w-full px-1.5 py-1.5 text-xs border rounded text-center font-mono transition-colors ${cellClassName(index)} focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500`}
                                 autoComplete="off"
                                 spellCheck={false}
@@ -296,37 +244,8 @@ export const ImportWallet: React.FC<ImportWalletProps> = ({ onImport, onBack, is
                     ))}
                 </div>
 
-                {hint && (
-                    <p
-                        className={`text-center text-xs rounded-md py-2 px-2 mb-2 ${HINT_CLASS[hint.tone]}`}
-                        role={hint.tone === 'gray' ? undefined : 'alert'}
-                    >
-                        {hint.text}
-                    </p>
-                )}
-
-                <p className="text-center text-xs text-gray-500 mb-4">
-                    Uses the standard English BIP39 word list. Paste or type each word; press Enter or Space to go to
-                    the next field.
-                </p>
-
-                {error && <div className="text-red-600 text-sm text-center bg-red-50 p-2 rounded-md mb-4">{error}</div>}
-
-                <div className="flex space-x-3 pt-3 border-t border-gray-200">
-                    <Button variant="secondary" onClick={onBack} className="flex-1">
-                        Cancel
-                    </Button>
-                    <Button
-                        data-testid="import-wallet-process"
-                        onClick={handleSubmit}
-                        isLoading={isLoading}
-                        disabled={!isValid || isLoading}
-                        className="flex-1"
-                    >
-                        Import Wallet
-                    </Button>
-                </div>
+                {error && <p className="mt-4 text-center text-sm text-red-500">{error}</p>}
             </div>
-        </div>
+        </CenteredScreen>
     );
 };
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/index.ts b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/index.ts
new file mode 100644
index 000000000..1f45b7208
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export { ImportWalletScreen } from './import-wallet-screen';
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/save-phrase-confirm-modal/index.ts b/apps/demo-wallet/src/features/wallet-setup/components/save-phrase-confirm-modal/index.ts
new file mode 100644
index 000000000..efaa3a962
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/save-phrase-confirm-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './save-phrase-confirm-modal';
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/save-phrase-confirm-modal/save-phrase-confirm-modal.tsx b/apps/demo-wallet/src/features/wallet-setup/components/save-phrase-confirm-modal/save-phrase-confirm-modal.tsx
new file mode 100644
index 000000000..fefe7fff5
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/save-phrase-confirm-modal/save-phrase-confirm-modal.tsx
@@ -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 React from 'react';
+
+import { Modal } from '@/core/components/ui/modal';
+import { HoldToSignButton } from '@/core/components/ui/hold-to-sign-button';
+
+interface SavePhraseConfirmModalProps {
+    isOpen: boolean;
+    /** Disables the gesture and shows a spinner while the wallet is being created. */
+    loading?: boolean;
+    onClose: () => void;
+    /** Fires once the user finishes the hold-to-continue gesture. */
+    onConfirm: () => void;
+}
+
+/**
+ * Final guard before creating the wallet: the user must confirm they really
+ * stored the recovery phrase, gated behind a deliberate hold-to-continue gesture
+ * instead of a one-tap checkbox.
+ */
+export const SavePhraseConfirmModal: React.FC<SavePhraseConfirmModalProps> = ({
+    isOpen,
+    loading = false,
+    onClose,
+    onConfirm,
+}) => (
+    <Modal.Container isOpened={isOpen} onOpenChange={(open) => !open && onClose()} className="px-2">
+        <Modal.Header onClose={onClose}>
+            <Modal.Title>Have you saved it?</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>
+            <p className="text-base text-gray-500">
+                Make sure you’ve written down all 24 words and stored them somewhere safe. Without your recovery phrase
+                you won’t be able to restore this wallet.
+            </p>
+        </Modal.Body>
+
+        <Modal.Footer>
+            <HoldToSignButton
+                onComplete={onConfirm}
+                loading={loading}
+                holdDuration={1500}
+                idleLabel="Hold to continue"
+                completeLabel="Done!"
+                testId="save-phrase-hold"
+            />
+        </Modal.Footer>
+    </Modal.Container>
+);
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/welcome-screen/index.ts b/apps/demo-wallet/src/features/wallet-setup/components/welcome-screen/index.ts
new file mode 100644
index 000000000..71409ca26
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/welcome-screen/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export { WelcomeScreen } from './welcome-screen';
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/welcome-screen/welcome-screen.tsx b/apps/demo-wallet/src/features/wallet-setup/components/welcome-screen/welcome-screen.tsx
new file mode 100644
index 000000000..2a2dd4d7c
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/welcome-screen/welcome-screen.tsx
@@ -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 React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@demo/wallet-core';
+
+import { AddWalletModal } from '../add-wallet-modal';
+import type { AddWalletMode } from '../add-wallet-modal';
+import { WALLET_SETUP_ROUTE } from '../../routes';
+import type { WalletSetupMode } from '../../routes';
+
+import { CenteredScreen } from '@/core/components/shared/centered-screen';
+import { Button } from '@/core/components/ui/button';
+
+/** First screen for a brand-new user: intro + entry into wallet setup. */
+export const WelcomeScreen: React.FC = () => {
+    const navigate = useNavigate();
+    const { isPasswordSet } = useAuth();
+    const [isAddOpen, setIsAddOpen] = useState(false);
+
+    // Brand-new users set a PIN first; an already-authenticated user (no wallet) goes straight in.
+    const start = (tab: WalletSetupMode) => {
+        if (isPasswordSet) navigate(WALLET_SETUP_ROUTE[tab]);
+        else navigate('/setup-password', { state: { tab } });
+    };
+
+    const handleAddExisting = (mode: AddWalletMode) => {
+        setIsAddOpen(false);
+        start(mode);
+    };
+
+    const footer = (
+        <div className="space-y-2">
+            <Button fullWidth onClick={() => start('create')} data-testid="welcome-create">
+                Create a new wallet
+            </Button>
+            <Button variant="secondary" fullWidth onClick={() => setIsAddOpen(true)} data-testid="welcome-add-existing">
+                Add an existing wallet
+            </Button>
+            <p className="pt-1 text-center text-xs text-gray-400">
+                By continuing, you agree to the{' '}
+                <a href="#" className="text-blue-500">
+                    Terms
+                </a>{' '}
+                and{' '}
+                <a href="#" className="text-blue-500">
+                    Privacy Policy
+                </a>
+            </p>
+        </div>
+    );
+
+    return (
+        <CenteredScreen footer={footer}>
+            <div className="flex flex-col items-center text-center px-6">
+                <img src="/favicon.svg" alt="WalletKit" className="w-40 h-40 object-contain" />
+                <h1 className="mt-6 text-2xl font-bold text-gray-900">Your TON wallet</h1>
+                <p className="mt-2 text-base text-gray-500">
+                    Create a new wallet or add an existing one to start sending and receiving GRAM.
+                </p>
+            </div>
+
+            <AddWalletModal isOpen={isAddOpen} onClose={() => setIsAddOpen(false)} onSelect={handleAddExisting} />
+        </CenteredScreen>
+    );
+};
diff --git a/apps/demo-wallet/src/features/wallet-setup/index.ts b/apps/demo-wallet/src/features/wallet-setup/index.ts
new file mode 100644
index 000000000..eda2272d1
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/index.ts
@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './routes';
+export * from './components/welcome-screen';
+export * from './components/create-wallet-screen';
+export * from './components/import-wallet-screen';
+export * from './components/add-wallet-modal';
+export * from './components/create-wallet-modal';
diff --git a/apps/demo-wallet/src/features/wallet-setup/routes.ts b/apps/demo-wallet/src/features/wallet-setup/routes.ts
new file mode 100644
index 000000000..2e15ec5c4
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/routes.ts
@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ */
+
+/** Ways to add a wallet, shared across the wallet-setup entry points. */
+export type WalletSetupMode = 'create' | 'import' | 'ledger';
+
+/** Single source of truth mapping a setup mode to its dedicated route. */
+export const WALLET_SETUP_ROUTE: Record<WalletSetupMode, string> = {
+    create: '/create-wallet',
+    import: '/import-wallet',
+    ledger: '/ledger',
+};
diff --git a/apps/demo-wallet/src/features/wallets/components/mnemonic-display/index.ts b/apps/demo-wallet/src/features/wallets/components/mnemonic-display/index.ts
new file mode 100644
index 000000000..547bc7834
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/mnemonic-display/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './mnemonic-display';
diff --git a/apps/demo-wallet/src/components/MnemonicDisplay.tsx b/apps/demo-wallet/src/features/wallets/components/mnemonic-display/mnemonic-display.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/MnemonicDisplay.tsx
rename to apps/demo-wallet/src/features/wallets/components/mnemonic-display/mnemonic-display.tsx
diff --git a/apps/demo-wallet/src/features/wallets/components/mnemonic-grid/index.ts b/apps/demo-wallet/src/features/wallets/components/mnemonic-grid/index.ts
new file mode 100644
index 000000000..dd71b7eee
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/mnemonic-grid/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './mnemonic-grid';
diff --git a/apps/demo-wallet/src/components/MnemonicGrid.tsx b/apps/demo-wallet/src/features/wallets/components/mnemonic-grid/mnemonic-grid.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/MnemonicGrid.tsx
rename to apps/demo-wallet/src/features/wallets/components/mnemonic-grid/mnemonic-grid.tsx
diff --git a/apps/demo-wallet/src/features/wallets/components/mnemonic-skeleton/index.ts b/apps/demo-wallet/src/features/wallets/components/mnemonic-skeleton/index.ts
new file mode 100644
index 000000000..29008d2bd
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/mnemonic-skeleton/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './mnemonic-skeleton';
diff --git a/apps/demo-wallet/src/components/MnemonicSkeleton.tsx b/apps/demo-wallet/src/features/wallets/components/mnemonic-skeleton/mnemonic-skeleton.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/MnemonicSkeleton.tsx
rename to apps/demo-wallet/src/features/wallets/components/mnemonic-skeleton/mnemonic-skeleton.tsx
diff --git a/apps/demo-wallet/src/features/wallets/components/network-selector/index.ts b/apps/demo-wallet/src/features/wallets/components/network-selector/index.ts
new file mode 100644
index 000000000..ef5f73ddd
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/network-selector/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './network-selector';
diff --git a/apps/demo-wallet/src/components/NetworkSelector.tsx b/apps/demo-wallet/src/features/wallets/components/network-selector/network-selector.tsx
similarity index 69%
rename from apps/demo-wallet/src/components/NetworkSelector.tsx
rename to apps/demo-wallet/src/features/wallets/components/network-selector/network-selector.tsx
index f6d6c739e..dcad924a8 100644
--- a/apps/demo-wallet/src/components/NetworkSelector.tsx
+++ b/apps/demo-wallet/src/features/wallets/components/network-selector/network-selector.tsx
@@ -9,6 +9,9 @@
 import React from 'react';
 import type { NetworkType } from '@demo/wallet-core';
 
+import { Segmented } from '@/core/components/ui/segmented';
+import type { SegmentedOption } from '@/core/components/ui/segmented';
+
 interface NetworkSelectorProps {
     value: NetworkType;
     onChange: (network: NetworkType) => void;
@@ -16,6 +19,12 @@ interface NetworkSelectorProps {
     compact?: boolean;
 }
 
+const COMPACT_OPTIONS: SegmentedOption<NetworkType>[] = [
+    { value: 'mainnet', label: 'Mainnet', testId: 'network-select-mainnet' },
+    { value: 'testnet', label: 'Testnet', testId: 'network-select-testnet' },
+    { value: 'tetra', label: 'Tetra', testId: 'network-select-tetra' },
+];
+
 export const NetworkSelector: React.FC<NetworkSelectorProps> = ({
     value,
     onChange,
@@ -26,38 +35,7 @@ export const NetworkSelector: React.FC<NetworkSelectorProps> = ({
         return (
             <div className="flex items-center justify-between">
                 <span className="text-sm font-medium text-gray-700">{label}</span>
-                <div className="flex rounded-lg border border-gray-200 overflow-hidden">
-                    <button
-                        type="button"
-                        data-testid="network-select-mainnet"
-                        onClick={() => onChange('mainnet')}
-                        className={`px-3 py-1.5 text-xs font-medium transition-all ${
-                            value === 'mainnet' ? 'bg-blue-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'
-                        }`}
-                    >
-                        Mainnet
-                    </button>
-                    <button
-                        type="button"
-                        data-testid="network-select-testnet"
-                        onClick={() => onChange('testnet')}
-                        className={`px-3 py-1.5 text-xs font-medium transition-all border-l border-gray-200 ${
-                            value === 'testnet' ? 'bg-blue-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'
-                        }`}
-                    >
-                        Testnet
-                    </button>
-                    <button
-                        type="button"
-                        data-testid="network-select-tetra"
-                        onClick={() => onChange('tetra')}
-                        className={`px-3 py-1.5 text-xs font-medium transition-all border-l border-gray-200 ${
-                            value === 'tetra' ? 'bg-blue-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'
-                        }`}
-                    >
-                        Tetra
-                    </button>
-                </div>
+                <Segmented value={value} onChange={onChange} options={COMPACT_OPTIONS} />
             </div>
         );
     }
diff --git a/apps/demo-wallet/src/features/wallets/components/receive-modal/index.ts b/apps/demo-wallet/src/features/wallets/components/receive-modal/index.ts
new file mode 100644
index 000000000..4c6822d09
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/receive-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './receive-modal';
diff --git a/apps/demo-wallet/src/features/wallets/components/receive-modal/receive-modal.tsx b/apps/demo-wallet/src/features/wallets/components/receive-modal/receive-modal.tsx
new file mode 100644
index 000000000..4dfd8757f
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/receive-modal/receive-modal.tsx
@@ -0,0 +1,139 @@
+/**
+ * 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 React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Address } from '@ton/core';
+import { Copy } from 'lucide-react';
+import { toast } from 'sonner';
+import { useWallet } from '@demo/wallet-core';
+import QRCodeStyling from 'qr-code-styling';
+import type { Options as QrOptions } from 'qr-code-styling';
+
+import { Modal } from '@/core/components/ui/modal';
+
+const QR_COLOR = '#14181F';
+
+const QR_OPTIONS: Partial<QrOptions> = {
+    type: 'svg',
+    margin: 0,
+    image: '/favicon.svg',
+    dotsOptions: { color: QR_COLOR, type: 'rounded' },
+    cornersSquareOptions: { color: QR_COLOR, type: 'extra-rounded' },
+    cornersDotOptions: { color: QR_COLOR, type: 'dot' },
+    backgroundOptions: { color: '#ffffff' },
+    imageOptions: { crossOrigin: 'anonymous', margin: 4, imageSize: 0.32, hideBackgroundDots: true },
+    qrOptions: { errorCorrectionLevel: 'H' },
+};
+
+const StyledQrCode: React.FC<{ value: string; size?: number }> = ({ value, size = 220 }) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const qrRef = useRef<QRCodeStyling | null>(null);
+
+    // Create the QR instance once and append it to the container.
+    useEffect(() => {
+        if (!containerRef.current) return;
+        qrRef.current = new QRCodeStyling({ ...QR_OPTIONS, width: size, height: size, data: value });
+        containerRef.current.replaceChildren();
+        qrRef.current.append(containerRef.current);
+    }, []);
+
+    useEffect(() => {
+        qrRef.current?.update({ data: value });
+    }, [value]);
+
+    return <div ref={containerRef} style={{ width: size, height: size }} />;
+};
+
+interface ReceiveModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+type AddressFormat = 'uq' | 'eq' | 'raw';
+
+const FORMATS: { id: AddressFormat; label: string }[] = [
+    { id: 'uq', label: 'Non-bounceable' },
+    { id: 'eq', label: 'Bounceable' },
+    { id: 'raw', label: 'Raw' },
+];
+
+export const ReceiveModal: React.FC<ReceiveModalProps> = ({ isOpen, onClose }) => {
+    const { address, getActiveWallet } = useWallet();
+    const network = getActiveWallet()?.network ?? 'mainnet';
+    const [format, setFormat] = useState<AddressFormat>('uq');
+
+    const parsed = useMemo(() => {
+        if (!address) return null;
+        try {
+            return Address.parse(address);
+        } catch {
+            return null;
+        }
+    }, [address]);
+
+    const formattedAddress = useMemo(() => {
+        if (!parsed) return address ?? '';
+        if (format === 'raw') return parsed.toRawString();
+        return parsed.toString({ urlSafe: true, bounceable: format === 'eq', testOnly: network === 'testnet' });
+    }, [parsed, format, network, address]);
+
+    const handleCopy = async () => {
+        if (!formattedAddress) return;
+        try {
+            await navigator.clipboard.writeText(formattedAddress);
+            toast.success('Address copied');
+        } catch {
+            toast.error('Failed to copy address');
+        }
+    };
+
+    return (
+        <Modal.Container isOpened={isOpen} onOpenChange={(open) => !open && onClose()} className="px-2">
+            <Modal.Header onClose={onClose}>
+                <Modal.Title>Receive</Modal.Title>
+            </Modal.Header>
+
+            <Modal.Body className="items-center gap-5">
+                <div className="rounded-2xl border border-gray-100 p-4 bg-white">
+                    {formattedAddress ? (
+                        <StyledQrCode value={formattedAddress} />
+                    ) : (
+                        <div className="w-[220px] h-[220px] rounded-lg bg-gray-100 animate-pulse" />
+                    )}
+                </div>
+
+                <div className="grid grid-cols-3 gap-1 w-full bg-[#F7F8FA] rounded-full p-1">
+                    {FORMATS.map((f) => (
+                        <button
+                            key={f.id}
+                            type="button"
+                            onClick={() => setFormat(f.id)}
+                            className={`py-1.5 rounded-full text-xs font-semibold transition-colors ${
+                                format === f.id
+                                    ? 'bg-white text-gray-900 shadow-sm'
+                                    : 'text-gray-500 hover:text-gray-700'
+                            }`}
+                        >
+                            {f.label}
+                        </button>
+                    ))}
+                </div>
+
+                <button
+                    type="button"
+                    onClick={handleCopy}
+                    className="w-full flex items-center gap-2 bg-[#F7F8FA] rounded-2xl px-4 py-3 text-left hover:bg-gray-100 transition-colors"
+                    aria-label="Copy address"
+                >
+                    <span className="flex-1 min-w-0 text-sm font-mono text-gray-700 break-all">{formattedAddress}</span>
+                    <Copy className="w-4 h-4 text-gray-400 flex-shrink-0" />
+                </button>
+            </Modal.Body>
+        </Modal.Container>
+    );
+};
diff --git a/apps/demo-wallet/src/features/wallets/components/wallet-picker-view/index.ts b/apps/demo-wallet/src/features/wallets/components/wallet-picker-view/index.ts
new file mode 100644
index 000000000..8d34662e1
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/wallet-picker-view/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './wallet-picker-view';
diff --git a/apps/demo-wallet/src/features/wallets/components/wallet-picker-view/wallet-picker-view.tsx b/apps/demo-wallet/src/features/wallets/components/wallet-picker-view/wallet-picker-view.tsx
new file mode 100644
index 000000000..37e6599c0
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/wallet-picker-view/wallet-picker-view.tsx
@@ -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 React from 'react';
+import type { SavedWallet } from '@demo/wallet-core';
+
+import { WalletRow } from '../wallet-row';
+
+import { Modal } from '@/core/components/ui/modal';
+
+interface WalletPickerViewProps {
+    onBack: () => void;
+    wallets: SavedWallet[];
+    selectedId?: string;
+    onSelect: (walletId: string) => void;
+    title?: string;
+}
+
+/**
+ * Content-only wallet chooser (back header + list) meant to be embedded as an in-modal view, so it
+ * shares the host modal's overlay — switching to it doesn't flicker like a separate stacked modal would.
+ * Unlike {@link WalletSelectorModal} it never switches the active wallet and offers no rename/remove/add;
+ * it just reports the picked id via {@link onSelect} (used to choose which wallet to connect to a dApp).
+ */
+export const WalletPickerView: React.FC<WalletPickerViewProps> = ({
+    onBack,
+    wallets,
+    selectedId,
+    onSelect,
+    title = 'Select wallet',
+}) => (
+    <>
+        <Modal.Header onBack={onBack}>
+            <Modal.Title>{title}</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body className="flex-1 overflow-y-auto px-2 pb-4">
+            {wallets.length === 0 ? (
+                <p className="text-sm text-gray-500 text-center py-4">No wallets available</p>
+            ) : (
+                wallets.map((wallet) => (
+                    <WalletRow
+                        key={wallet.id}
+                        wallet={wallet}
+                        isActive={wallet.id === selectedId}
+                        onSelect={() => onSelect(wallet.id)}
+                    />
+                ))
+            )}
+        </Modal.Body>
+    </>
+);
diff --git a/apps/demo-wallet/src/features/wallets/components/wallet-preview/index.ts b/apps/demo-wallet/src/features/wallets/components/wallet-preview/index.ts
new file mode 100644
index 000000000..b228335f6
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/wallet-preview/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './wallet-preview';
diff --git a/apps/demo-wallet/src/components/WalletPreview.tsx b/apps/demo-wallet/src/features/wallets/components/wallet-preview/wallet-preview.tsx
similarity index 97%
rename from apps/demo-wallet/src/components/WalletPreview.tsx
rename to apps/demo-wallet/src/features/wallets/components/wallet-preview/wallet-preview.tsx
index 0bcd337b1..d130ef23b 100644
--- a/apps/demo-wallet/src/components/WalletPreview.tsx
+++ b/apps/demo-wallet/src/features/wallets/components/wallet-preview/wallet-preview.tsx
@@ -68,7 +68,7 @@ export const WalletPreview: React.FC<WalletPreviewProps> = ({
     };
 
     const formatBalance = (balanceStr?: string | null): string => {
-        if (!balanceStr || balanceStr === '0') return '0 TON';
+        if (!balanceStr || balanceStr === '0') return '0 GRAM';
 
         try {
             // Balance is in nanotons, convert to TON (1 TON = 1e9 nanotons)
@@ -77,15 +77,15 @@ export const WalletPreview: React.FC<WalletPreviewProps> = ({
 
             // Format with appropriate decimal places
             if (ton >= 1000) {
-                return `${ton.toFixed(2)} TON`;
+                return `${ton.toFixed(2)} GRAM`;
             } else if (ton >= 1) {
-                return `${ton.toFixed(4)} TON`;
+                return `${ton.toFixed(4)} GRAM`;
             } else if (ton > 0) {
-                return `${ton.toFixed(6)} TON`;
+                return `${ton.toFixed(6)} GRAM`;
             }
-            return '0 TON';
+            return '0 GRAM';
         } catch (_error) {
-            return '- TON';
+            return '- GRAM';
         }
     };
 
diff --git a/apps/demo-wallet/src/features/wallets/components/wallet-row/index.ts b/apps/demo-wallet/src/features/wallets/components/wallet-row/index.ts
new file mode 100644
index 000000000..a4695b819
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/wallet-row/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './wallet-row';
diff --git a/apps/demo-wallet/src/features/wallets/components/wallet-row/wallet-row.tsx b/apps/demo-wallet/src/features/wallets/components/wallet-row/wallet-row.tsx
new file mode 100644
index 000000000..1b97dcd27
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/wallet-row/wallet-row.tsx
@@ -0,0 +1,208 @@
+/**
+ * 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 React, { useState } from 'react';
+import { Check, Copy, MoreHorizontal, Pencil, Trash2, Wallet, X } from 'lucide-react';
+import { toast } from 'sonner';
+import { getNetworkLabel } from '@demo/wallet-core';
+import type { SavedWallet } from '@demo/wallet-core';
+
+import { Popover, PopoverContent, PopoverTrigger } from '@/core/components/ui/popover';
+import { shortenAddress } from '@/core/utils';
+
+const networkBadgeClass = (network: SavedWallet['network']): string => {
+    if (network === 'mainnet') return 'bg-green-100 text-green-800';
+    if (network === 'tetra') return 'bg-purple-100 text-purple-800';
+    return 'bg-blue-100 text-blue-800';
+};
+
+const handleCopy = async (address: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    try {
+        await navigator.clipboard.writeText(address);
+        toast.success('Address copied');
+    } catch {
+        toast.error('Failed to copy address');
+    }
+};
+
+interface WalletRowProps {
+    wallet: SavedWallet;
+    isActive: boolean;
+    onSelect: () => void;
+    /** Omit both to render a select-only row (no "⋯" management menu). */
+    onRename?: (id: string, name: string) => void;
+    onRemove?: (id: string) => void;
+}
+
+export const WalletRow: React.FC<WalletRowProps> = ({ wallet, isActive, onSelect, onRename, onRemove }) => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [isEditing, setIsEditing] = useState(false);
+    const [draftName, setDraftName] = useState(wallet.name);
+
+    const hasActions = Boolean(onRename || onRemove);
+
+    const startRename = () => {
+        setDraftName(wallet.name);
+        setIsEditing(true);
+        setMenuOpen(false);
+    };
+
+    const saveRename = () => {
+        const next = draftName.trim();
+        if (next && next !== wallet.name) onRename?.(wallet.id, next);
+        setIsEditing(false);
+    };
+
+    if (isEditing) {
+        return (
+            <div className="flex items-center gap-3 px-2 py-3">
+                <div className="w-11 h-11 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                    <Wallet className="w-5 h-5 text-gray-500" strokeWidth={1.8} />
+                </div>
+                <input
+                    autoFocus
+                    value={draftName}
+                    onChange={(e) => setDraftName(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') saveRename();
+                        if (e.key === 'Escape') setIsEditing(false);
+                    }}
+                    className="flex-1 min-w-0 text-base font-bold text-gray-900 bg-gray-50 rounded-lg px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500"
+                />
+                <button
+                    type="button"
+                    onClick={saveRename}
+                    className="w-8 h-8 rounded-full flex items-center justify-center text-green-600 hover:bg-green-50 flex-shrink-0"
+                    aria-label="Save name"
+                >
+                    <Check className="w-5 h-5" />
+                </button>
+                <button
+                    type="button"
+                    onClick={() => setIsEditing(false)}
+                    className="w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 flex-shrink-0"
+                    aria-label="Cancel"
+                >
+                    <X className="w-5 h-5" />
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            role="button"
+            tabIndex={0}
+            onClick={onSelect}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onSelect();
+                }
+            }}
+            className={`flex items-center gap-3 px-2 py-3 rounded-2xl cursor-pointer transition-colors ${
+                isActive ? 'bg-gray-50' : 'hover:bg-gray-50'
+            }`}
+        >
+            <div className="w-11 h-11 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                <Wallet className="w-5 h-5 text-gray-500" strokeWidth={1.8} />
+            </div>
+            <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 min-w-0">
+                    <span className="text-base font-bold text-gray-900 truncate">{wallet.name}</span>
+                    <span
+                        className={`px-1.5 py-0.5 text-[10px] font-medium rounded flex-shrink-0 ${networkBadgeClass(wallet.network)}`}
+                    >
+                        {getNetworkLabel(wallet.network)}
+                    </span>
+                </div>
+                <button
+                    type="button"
+                    onClick={(e) => handleCopy(wallet.address, e)}
+                    className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-600 transition-colors max-w-full"
+                    aria-label="Copy address"
+                >
+                    <span className="font-mono truncate">{shortenAddress(wallet.address, 6)}</span>
+                    <Copy className="w-3.5 h-3.5 flex-shrink-0" strokeWidth={2} />
+                </button>
+            </div>
+
+            {hasActions && (
+                <Popover
+                    open={menuOpen}
+                    onOpenChange={(open) => {
+                        setMenuOpen(open);
+                        if (!open) setConfirmingDelete(false);
+                    }}
+                >
+                    <PopoverTrigger asChild>
+                        <button
+                            type="button"
+                            onClick={(e) => e.stopPropagation()}
+                            className="w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 transition-colors flex-shrink-0"
+                            aria-label="More actions"
+                        >
+                            <MoreHorizontal className="w-5 h-5" />
+                        </button>
+                    </PopoverTrigger>
+                    <PopoverContent align="end" side="bottom" className="w-44 p-1" onClick={(e) => e.stopPropagation()}>
+                        {confirmingDelete ? (
+                            <div className="p-2">
+                                <p className="text-xs text-gray-500 mb-2">Delete this wallet? This can’t be undone.</p>
+                                <div className="flex gap-2">
+                                    <button
+                                        type="button"
+                                        onClick={() => setConfirmingDelete(false)}
+                                        className="flex-1 text-sm font-medium text-gray-700 rounded-lg py-1.5 hover:bg-gray-100"
+                                    >
+                                        Cancel
+                                    </button>
+                                    <button
+                                        type="button"
+                                        onClick={() => {
+                                            setMenuOpen(false);
+                                            onRemove?.(wallet.id);
+                                        }}
+                                        className="flex-1 text-sm font-semibold text-white bg-red-500 rounded-lg py-1.5 hover:bg-red-600"
+                                    >
+                                        Delete
+                                    </button>
+                                </div>
+                            </div>
+                        ) : (
+                            <>
+                                {onRename && (
+                                    <button
+                                        type="button"
+                                        onClick={startRename}
+                                        className="w-full flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-900 rounded-lg hover:bg-gray-100"
+                                    >
+                                        <Pencil className="w-4 h-4 text-gray-500" />
+                                        Rename
+                                    </button>
+                                )}
+                                {onRemove && (
+                                    <button
+                                        type="button"
+                                        onClick={() => setConfirmingDelete(true)}
+                                        className="w-full flex items-center gap-2 px-3 py-2 text-sm font-medium text-red-600 rounded-lg hover:bg-red-50"
+                                    >
+                                        <Trash2 className="w-4 h-4" />
+                                        Delete
+                                    </button>
+                                )}
+                            </>
+                        )}
+                    </PopoverContent>
+                </Popover>
+            )}
+        </div>
+    );
+};
diff --git a/apps/demo-wallet/src/features/wallets/components/wallet-selector-modal/index.ts b/apps/demo-wallet/src/features/wallets/components/wallet-selector-modal/index.ts
new file mode 100644
index 000000000..0a402f221
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/wallet-selector-modal/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './wallet-selector-modal';
diff --git a/apps/demo-wallet/src/features/wallets/components/wallet-selector-modal/wallet-selector-modal.tsx b/apps/demo-wallet/src/features/wallets/components/wallet-selector-modal/wallet-selector-modal.tsx
new file mode 100644
index 000000000..4ca9a53ff
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/wallet-selector-modal/wallet-selector-modal.tsx
@@ -0,0 +1,91 @@
+/**
+ * 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 React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus } from 'lucide-react';
+import { useWallet } from '@demo/wallet-core';
+
+import { WalletRow } from '../wallet-row';
+
+import { Modal } from '@/core/components/ui/modal';
+import { AddWalletModal, WALLET_SETUP_ROUTE } from '@/features/wallet-setup';
+import type { AddWalletMode } from '@/features/wallet-setup';
+
+interface WalletSelectorModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const WalletSelectorModal: React.FC<WalletSelectorModalProps> = ({ isOpen, onClose }) => {
+    const { savedWallets, activeWalletId, switchWallet, renameWallet, removeWallet } = useWallet();
+    const navigate = useNavigate();
+    const [isAddOpen, setIsAddOpen] = useState(false);
+
+    const handleSelect = async (walletId: string) => {
+        if (walletId !== activeWalletId) {
+            try {
+                await switchWallet(walletId);
+            } catch {
+                // ignore — store surfaces errors via its own state
+            }
+        }
+        onClose();
+    };
+
+    // Already authenticated here — go straight to the chosen setup screen, no password step.
+    const handleAddSelect = (mode: AddWalletMode) => {
+        setIsAddOpen(false);
+        onClose();
+        navigate(WALLET_SETUP_ROUTE[mode]);
+    };
+
+    return (
+        <>
+            <Modal.Container
+                isOpened={isOpen && !isAddOpen}
+                onOpenChange={(open) => !open && onClose()}
+                className="px-2"
+            >
+                <Modal.Header onClose={onClose}>
+                    <Modal.Title>Wallets</Modal.Title>
+                </Modal.Header>
+
+                <Modal.Body className="px-2 pb-2">
+                    {savedWallets.length === 0 ? (
+                        <p className="text-sm text-gray-500 text-center py-4">No wallets yet</p>
+                    ) : (
+                        savedWallets.map((wallet) => (
+                            <WalletRow
+                                key={wallet.id}
+                                wallet={wallet}
+                                isActive={wallet.id === activeWalletId}
+                                onSelect={() => handleSelect(wallet.id)}
+                                onRename={renameWallet}
+                                onRemove={removeWallet}
+                            />
+                        ))
+                    )}
+                </Modal.Body>
+
+                <Modal.Footer className="items-center">
+                    <button
+                        type="button"
+                        onClick={() => setIsAddOpen(true)}
+                        className="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white text-base font-semibold px-4 py-2 rounded-full hover:scale-[1.03] active:scale-[0.97] transition-transform"
+                    >
+                        <Plus className="w-5 h-5" strokeWidth={2.5} />
+                        Add wallet
+                    </button>
+                </Modal.Footer>
+            </Modal.Container>
+
+            <AddWalletModal isOpen={isAddOpen} onClose={() => setIsAddOpen(false)} onSelect={handleAddSelect} />
+        </>
+    );
+};
diff --git a/apps/demo-wallet/src/features/wallets/components/wallet-switcher/index.ts b/apps/demo-wallet/src/features/wallets/components/wallet-switcher/index.ts
new file mode 100644
index 000000000..6f4014d83
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/components/wallet-switcher/index.ts
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './wallet-switcher';
diff --git a/apps/demo-wallet/src/components/WalletSwitcher.tsx b/apps/demo-wallet/src/features/wallets/components/wallet-switcher/wallet-switcher.tsx
similarity index 99%
rename from apps/demo-wallet/src/components/WalletSwitcher.tsx
rename to apps/demo-wallet/src/features/wallets/components/wallet-switcher/wallet-switcher.tsx
index bb7523d0b..379f22490 100644
--- a/apps/demo-wallet/src/components/WalletSwitcher.tsx
+++ b/apps/demo-wallet/src/features/wallets/components/wallet-switcher/wallet-switcher.tsx
@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import { getNetworkLabel } from '@demo/wallet-core';
 import type { SavedWallet } from '@demo/wallet-core';
 
-import { createComponentLogger } from '../utils/logger';
+import { createComponentLogger } from '@/core/lib/logger';
 
 const log = createComponentLogger('WalletSwitcher');
 
diff --git a/apps/demo-wallet/src/features/wallets/index.ts b/apps/demo-wallet/src/features/wallets/index.ts
new file mode 100644
index 000000000..9fd037f1a
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/index.ts
@@ -0,0 +1,19 @@
+/**
+ * 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.
+ *
+ */
+
+export * from './components/wallet-switcher';
+export * from './components/wallet-selector-modal';
+export * from './components/wallet-picker-view';
+export * from './components/wallet-row';
+export * from './components/wallet-preview';
+export * from './components/mnemonic-display';
+export * from './components/mnemonic-grid';
+export * from './components/mnemonic-skeleton';
+export * from './components/receive-modal';
+export * from './components/network-selector';
+export * from './utils/bip39-english';
diff --git a/apps/demo-wallet/src/utils/bip39English.ts b/apps/demo-wallet/src/features/wallets/utils/bip39-english.ts
similarity index 100%
rename from apps/demo-wallet/src/utils/bip39English.ts
rename to apps/demo-wallet/src/features/wallets/utils/bip39-english.ts
diff --git a/apps/demo-wallet/src/hooks/index.ts b/apps/demo-wallet/src/hooks/index.ts
deleted file mode 100644
index eacc34b80..000000000
--- a/apps/demo-wallet/src/hooks/index.ts
+++ /dev/null
@@ -1,13 +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.
- *
- */
-
-export * from './useFormattedJetton';
-export * from './useJettonInfo';
-export * from './usePasteHandler';
-export * from './useTonWallet';
-export * from './useWalletDataUpdater';
diff --git a/apps/demo-wallet/src/index.css b/apps/demo-wallet/src/index.css
index 72125f2ca..9c7dd3247 100644
--- a/apps/demo-wallet/src/index.css
+++ b/apps/demo-wallet/src/index.css
@@ -1,8 +1,12 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Inter Variable', system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
+  /* Always reserve the vertical scrollbar so layout doesn't jump when content
+     grows past the viewport (noticeable inside Telegram). */
+  overflow-y: scroll;
+
   color-scheme: light dark;
   /* color: rgba(255, 255, 255, 0.87); */
   color: black;
diff --git a/apps/demo-wallet/src/index.ts b/apps/demo-wallet/src/index.ts
index 785257a71..7474dffd9 100644
--- a/apps/demo-wallet/src/index.ts
+++ b/apps/demo-wallet/src/index.ts
@@ -6,11 +6,8 @@
  *
  */
 
-// Re-export main app components and utilities
-export * from './components';
-export * from './pages';
-export * from './hooks';
-export * from './utils';
+// Re-export shared utilities
+export * from '@/core/utils';
 
 // For convenience, also export the main App component
 export { default as App } from './App';
diff --git a/apps/demo-wallet/src/main.extension.tsx b/apps/demo-wallet/src/main.extension.tsx
index dfe19414b..2bcf5ce5c 100644
--- a/apps/demo-wallet/src/main.extension.tsx
+++ b/apps/demo-wallet/src/main.extension.tsx
@@ -9,6 +9,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import '@fontsource-variable/inter';
 import './extension.css';
 import App from './App.tsx';
 
diff --git a/apps/demo-wallet/src/main.tsx b/apps/demo-wallet/src/main.tsx
index 56f4dfd57..fd422862c 100644
--- a/apps/demo-wallet/src/main.tsx
+++ b/apps/demo-wallet/src/main.tsx
@@ -9,6 +9,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import '@fontsource-variable/inter';
 import './index.css';
 import App from './App.tsx';
 
diff --git a/apps/demo-wallet/src/pages/SendTransaction.tsx b/apps/demo-wallet/src/pages/SendTransaction.tsx
deleted file mode 100644
index 933a27b74..000000000
--- a/apps/demo-wallet/src/pages/SendTransaction.tsx
+++ /dev/null
@@ -1,629 +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 React, { useState, useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { isValidAddress } from '@ton/walletkit';
-import type { Jetton, TONTransferRequest } from '@ton/walletkit';
-import { useWallet, useJettons, useWalletKit, useAuth, getTransactionExplorerUrls } from '@demo/wallet-core';
-import { toast } from 'sonner';
-
-import { Layout, Button, Input, Card, AnimatedBalance, WalletSwitcher } from '../components';
-import { createComponentLogger } from '../utils/logger';
-
-import { getFormattedJettonInfo } from '@/utils/jetton';
-import { useFormattedJetton } from '@/hooks/useFormattedJetton';
-import { useJettonInfo } from '@/hooks/useJettonInfo';
-import { useSendToken } from '@/hooks/useSendToken';
-
-// Create logger for send transaction
-const log = createComponentLogger('SendTransaction');
-
-interface SelectedToken {
-    type: 'TON' | 'JETTON';
-    data?: Jetton;
-}
-
-/** One fee-asset option — resolves the jetton ticker (falls back to a short address). */
-const FeeAssetOption: React.FC<{ address: string }> = ({ address }) => {
-    const info = useJettonInfo(address);
-    const label = info?.symbol || `${address.slice(0, 4)}…${address.slice(-4)}`;
-    return <option value={address}>{label}</option>;
-};
-
-export const SendTransaction: React.FC = () => {
-    const walletKit = useWalletKit();
-    const [recipient, setRecipient] = useState('');
-    const [amount, setAmount] = useState('');
-    const [error, setError] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-    const [selectedToken, setSelectedToken] = useState<SelectedToken>({ type: 'TON' });
-    const [showTokenSelector, setShowTokenSelector] = useState(false);
-    const tokenSelectorRef = useRef<HTMLDivElement>(null);
-
-    const navigate = useNavigate();
-    const { balance, currentWallet, address, savedWallets, activeWalletId, switchWallet, removeWallet, renameWallet } =
-        useWallet();
-    const { showFastSend } = useAuth();
-    const network = savedWallets.find((w) => w.id === activeWalletId)?.network ?? 'testnet';
-    const { userJettons, isLoadingJettons, loadUserJettons, formatJettonAmount } = useJettons();
-
-    const selectedJettonInfo = useFormattedJetton(selectedToken?.data);
-    const getJettonInfo = (jetton: Jetton) => getFormattedJettonInfo(formatJettonAmount)(jetton);
-
-    // Single send entry point — dispatches gasless vs regular (TON/jetton).
-    // Gasless is offered only for jettons on a SignMessage-capable wallet.
-    const sender = useSendToken({
-        wallet: currentWallet,
-        walletKit,
-        tokenType: selectedToken.type,
-        jetton: selectedToken.data,
-        recipient,
-        amount,
-    });
-    const gasless = sender.gasless;
-    const canUseGasless = gasless.canUse;
-    const effectiveGasless = gasless.effective;
-    const gaslessFeeFormatted = gasless.feeFormatted;
-
-    useEffect(() => {
-        loadUserJettons();
-    }, [loadUserJettons]);
-
-    useEffect(() => {
-        const handleClickOutside = (e: MouseEvent) => {
-            if (showTokenSelector && tokenSelectorRef.current && !tokenSelectorRef.current.contains(e.target as Node)) {
-                setShowTokenSelector(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, [showTokenSelector]);
-
-    const formatTonAmount = (amountStr: string): string => {
-        const tonAmount = parseFloat(amountStr || '0') / 1000000000;
-        return tonAmount.toFixed(4);
-    };
-
-    const getCurrentTokenBalance = (): string => {
-        if (selectedToken.type === 'TON') {
-            return formatTonAmount(balance || '0');
-        }
-        return selectedJettonInfo?.balance || '0';
-    };
-
-    const getCurrentTokenSymbol = (): string => {
-        if (selectedToken.type === 'TON') return 'TON';
-        return selectedJettonInfo?.symbol || '';
-    };
-
-    // Success toast with explorer links — for flows that return a broadcast hash
-    // immediately (gasless send, fast send).
-    const notifySent = (normalizedHash: string) => {
-        const { tonScan, tonViewer } = getTransactionExplorerUrls(normalizedHash, network);
-        toast.success('Transaction is sent to the network', {
-            description: (
-                <span className="flex gap-3 mt-1">
-                    <a href={tonScan} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline">
-                        TonScan
-                    </a>
-                    <a href={tonViewer} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline">
-                        TonViewer
-                    </a>
-                </span>
-            ),
-        });
-    };
-
-    const handleSend = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setError('');
-        setIsLoading(true);
-
-        try {
-            if (!isValidAddress(recipient)) {
-                throw new Error('Invalid recipient address');
-            }
-
-            const inputAmount = parseFloat(amount);
-            if (inputAmount <= 0) {
-                throw new Error('Amount must be greater than 0');
-            }
-
-            const currentBalance = parseFloat(getCurrentTokenBalance());
-            if (inputAmount > currentBalance) {
-                throw new Error('Insufficient balance');
-            }
-
-            // Build + submit, dispatching gasless vs regular inside the hook.
-            const result = await sender.send();
-
-            // Gasless relays immediately and returns a hash → toast with explorer
-            // links; the regular flow goes through the preview queue.
-            if (result?.normalizedHash) {
-                notifySent(result.normalizedHash);
-                navigate('/wallet');
-            } else {
-                navigate('/wallet', {
-                    state: { message: `${getCurrentTokenSymbol()} sent successfully!` },
-                });
-            }
-        } catch (err) {
-            log.error('Send transaction error:', err);
-            setError(err instanceof Error ? err.message : 'Failed to send transaction');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleMaxAmount = () => {
-        const currentBalance = parseFloat(getCurrentTokenBalance());
-        if (selectedToken.type === 'TON') {
-            const maxAmount = currentBalance - 0.01;
-            if (maxAmount > 0) setAmount(maxAmount.toString());
-        } else if (currentBalance > 0) {
-            setAmount(currentBalance.toString());
-        }
-    };
-
-    const handleSendToSelf = () => {
-        if (address) setRecipient(address);
-    };
-
-    const handleFastSend = async () => {
-        if (!currentWallet) return;
-        const recipientAddress = recipient.trim() || address;
-        if (!recipientAddress) return;
-        if (!isValidAddress(recipientAddress)) {
-            setError('Invalid recipient address');
-            return;
-        }
-        setError('');
-        setIsLoading(true);
-        try {
-            let result;
-            if (selectedToken.type === 'TON') {
-                const tonTransferParams: TONTransferRequest = {
-                    recipientAddress: recipientAddress,
-                    transferAmount: '1000000',
-                };
-                const tx = await currentWallet.createTransferTonTransaction(tonTransferParams);
-                result = await currentWallet.sendTransaction(tx);
-            } else if (selectedToken.data) {
-                const jettonTransaction = await currentWallet.createTransferJettonTransaction({
-                    recipientAddress: recipientAddress,
-                    jettonAddress: selectedToken.data.address,
-                    transferAmount: '1',
-                });
-                result = await currentWallet.sendTransaction(jettonTransaction);
-            }
-            if (result?.normalizedHash) {
-                notifySent(result.normalizedHash);
-            }
-        } catch (err) {
-            log.error('Fast send error:', err);
-            setError(err instanceof Error ? err.message : 'Failed to send');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleSwitchWallet = async (walletId: string) => {
-        try {
-            await switchWallet(walletId);
-        } catch (err) {
-            log.error('Failed to switch wallet:', err);
-        }
-    };
-
-    const handleRemoveWallet = (walletId: string) => {
-        try {
-            removeWallet(walletId);
-        } catch (err) {
-            log.error('Failed to remove wallet:', err);
-        }
-    };
-
-    const handleRenameWallet = (walletId: string, newName: string) => {
-        try {
-            renameWallet(walletId, newName);
-        } catch (err) {
-            log.error('Failed to rename wallet:', err);
-        }
-    };
-
-    const balanceForAnimated = selectedToken.type === 'TON' ? balance : undefined;
-    const isSendDisabled = sender.isDisabled;
-    const isSendFastDisabled = !currentWallet || !address;
-
-    return (
-        <Layout title={`Send ${getCurrentTokenSymbol()}`} showLogout onBack={() => navigate('/wallet')}>
-            <div className="space-y-4">
-                <Card compact>
-                    <div className="space-y-3">
-                        {/* Row 1: Wallet selector */}
-                        <WalletSwitcher
-                            savedWallets={savedWallets}
-                            activeWalletId={activeWalletId}
-                            onSwitchWallet={handleSwitchWallet}
-                            onRemoveWallet={handleRemoveWallet}
-                            onRenameWallet={handleRenameWallet}
-                            compact
-                        />
-
-                        {!currentWallet ? (
-                            <div className="py-4 text-center">
-                                <p className="text-sm text-gray-600 mb-2">Loading wallet...</p>
-                                <Button variant="secondary" size="sm" onClick={() => navigate('/wallet')}>
-                                    Back to wallet
-                                </Button>
-                            </div>
-                        ) : (
-                            <>
-                                {/* Row 2: Token selector + balance */}
-                                <div ref={tokenSelectorRef} className="relative">
-                                    <div className="flex items-center justify-between gap-2">
-                                        <button
-                                            type="button"
-                                            onClick={() => setShowTokenSelector(!showTokenSelector)}
-                                            className="flex items-center gap-2 min-w-0 flex-1 py-1 rounded hover:bg-gray-50 transition-colors"
-                                        >
-                                            <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 overflow-hidden bg-blue-100">
-                                                {selectedToken.type === 'TON' ? (
-                                                    <span className="text-sm font-bold text-blue-600">T</span>
-                                                ) : selectedJettonInfo ? (
-                                                    selectedJettonInfo.image ? (
-                                                        <img
-                                                            src={selectedJettonInfo.image}
-                                                            alt=""
-                                                            className="w-6 h-6 rounded-full object-cover"
-                                                            onError={(e) => {
-                                                                const target = e.target as HTMLImageElement;
-                                                                target.style.display = 'none';
-                                                                const parent = target.parentElement;
-                                                                if (parent) {
-                                                                    parent.innerHTML =
-                                                                        selectedJettonInfo?.symbol
-                                                                            ?.slice(0, 2)
-                                                                            ?.toUpperCase() || '?';
-                                                                    parent.className =
-                                                                        'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 overflow-hidden bg-gradient-to-br from-blue-500 to-purple-600 text-xs font-bold text-white';
-                                                                }
-                                                            }}
-                                                        />
-                                                    ) : (
-                                                        <span className="text-xs font-bold text-white bg-gradient-to-br from-blue-500 to-purple-600 rounded-full w-6 h-6 flex items-center justify-center">
-                                                            {selectedJettonInfo.symbol?.slice(0, 2).toUpperCase() ||
-                                                                '?'}
-                                                        </span>
-                                                    )
-                                                ) : (
-                                                    <span className="text-xs font-bold text-gray-600">?</span>
-                                                )}
-                                            </div>
-                                            <span className="text-sm font-medium text-gray-900 truncate">
-                                                {selectedToken.type === 'TON'
-                                                    ? 'TON'
-                                                    : selectedJettonInfo
-                                                      ? selectedJettonInfo.name || selectedJettonInfo.symbol
-                                                      : '?'}
-                                            </span>
-                                            <svg
-                                                className={`w-4 h-4 text-gray-400 flex-shrink-0 transition-transform ${
-                                                    showTokenSelector ? 'rotate-180' : ''
-                                                }`}
-                                                fill="none"
-                                                stroke="currentColor"
-                                                viewBox="0 0 24 24"
-                                            >
-                                                <path
-                                                    strokeLinecap="round"
-                                                    strokeLinejoin="round"
-                                                    strokeWidth={2}
-                                                    d="M19 9l-7 7-7-7"
-                                                />
-                                            </svg>
-                                        </button>
-                                        <p className="text-xl font-bold text-gray-900 truncate">
-                                            {selectedToken.type === 'TON' ? (
-                                                <AnimatedBalance balance={balanceForAnimated} />
-                                            ) : (
-                                                <>
-                                                    {getCurrentTokenBalance()} {getCurrentTokenSymbol()}
-                                                </>
-                                            )}
-                                        </p>
-                                    </div>
-
-                                    {/* Absolute dropdown - does not affect layout */}
-                                    {showTokenSelector && (
-                                        <div className="absolute left-0 right-0 top-full mt-1 z-20 bg-white border border-gray-200 rounded-lg shadow-lg max-h-64 overflow-y-auto">
-                                            <button
-                                                type="button"
-                                                onClick={() => {
-                                                    setSelectedToken({ type: 'TON' });
-                                                    setShowTokenSelector(false);
-                                                    setAmount('');
-                                                }}
-                                                className={`w-full flex items-center gap-3 px-3 py-2.5 text-left ${
-                                                    selectedToken.type === 'TON' ? 'bg-blue-50' : 'hover:bg-gray-50'
-                                                }`}
-                                            >
-                                                <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
-                                                    <span className="text-sm font-bold text-blue-600">T</span>
-                                                </div>
-                                                <div className="text-left min-w-0">
-                                                    <p className="text-sm font-medium text-gray-900">TON</p>
-                                                    <p className="text-xs text-gray-500">
-                                                        {formatTonAmount(balance || '0')} TON
-                                                    </p>
-                                                </div>
-                                            </button>
-                                            {userJettons.map((jetton) => {
-                                                const jettonInfo = getJettonInfo(jetton);
-                                                const isSelected =
-                                                    selectedToken.type === 'JETTON' &&
-                                                    selectedToken.data?.address === jetton.address;
-                                                return (
-                                                    <button
-                                                        key={jetton.address}
-                                                        type="button"
-                                                        onClick={() => {
-                                                            setSelectedToken({ type: 'JETTON', data: jetton });
-                                                            setShowTokenSelector(false);
-                                                            setAmount('');
-                                                        }}
-                                                        className={`w-full flex items-center gap-3 px-3 py-2.5 text-left ${
-                                                            isSelected ? 'bg-blue-50' : 'hover:bg-gray-50'
-                                                        }`}
-                                                    >
-                                                        <div className="w-8 h-8 rounded-full flex items-center justify-center overflow-hidden flex-shrink-0 bg-gray-100">
-                                                            {jettonInfo.image ? (
-                                                                <img
-                                                                    src={jettonInfo.image}
-                                                                    alt=""
-                                                                    className="w-6 h-6 rounded-full object-cover"
-                                                                    onError={(e) => {
-                                                                        const target = e.target as HTMLImageElement;
-                                                                        target.style.display = 'none';
-                                                                        const parent = target.parentElement;
-                                                                        if (parent) {
-                                                                            parent.innerHTML =
-                                                                                jettonInfo.symbol
-                                                                                    ?.slice(0, 2)
-                                                                                    ?.toUpperCase() || '?';
-                                                                            parent.className =
-                                                                                'w-8 h-8 rounded-full flex items-center justify-center overflow-hidden flex-shrink-0 bg-gradient-to-br from-blue-500 to-purple-600 text-xs font-bold text-white';
-                                                                        }
-                                                                    }}
-                                                                />
-                                                            ) : (
-                                                                <span className="text-xs font-bold text-white bg-gradient-to-br from-blue-500 to-purple-600 rounded-full w-6 h-6 flex items-center justify-center">
-                                                                    {jettonInfo.symbol?.slice(0, 2).toUpperCase() ||
-                                                                        '?'}
-                                                                </span>
-                                                            )}
-                                                        </div>
-                                                        <div className="text-left min-w-0 flex-1">
-                                                            <p className="text-sm font-medium text-gray-900 truncate">
-                                                                {jettonInfo.name || jettonInfo.symbol}
-                                                            </p>
-                                                            <p className="text-xs text-gray-500">
-                                                                {jettonInfo.balance} {jettonInfo.symbol}
-                                                            </p>
-                                                        </div>
-                                                    </button>
-                                                );
-                                            })}
-                                            {userJettons.length === 0 && !isLoadingJettons && (
-                                                <div className="py-4 text-center text-gray-500 text-sm">
-                                                    No jettons found
-                                                </div>
-                                            )}
-                                            {isLoadingJettons && (
-                                                <div className="py-4 text-center text-gray-500 text-sm">
-                                                    Loading tokens...
-                                                </div>
-                                            )}
-                                        </div>
-                                    )}
-                                </div>
-
-                                <form onSubmit={handleSend} className="space-y-3">
-                                    {/* Row 3: Recipient */}
-                                    <div>
-                                        <div className="flex items-center justify-between mb-1">
-                                            <label className="block text-sm font-medium text-gray-700">
-                                                Recipient Address
-                                            </label>
-                                            {address && (
-                                                <button
-                                                    type="button"
-                                                    onClick={handleSendToSelf}
-                                                    className="text-xs text-blue-600 hover:text-blue-800 underline"
-                                                    data-testid="use-my-address"
-                                                >
-                                                    Use my address
-                                                </button>
-                                            )}
-                                        </div>
-                                        <Input
-                                            value={recipient}
-                                            onChange={(e) => setRecipient(e.target.value)}
-                                            placeholder="EQxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-                                            required
-                                            data-testid="recipient-input"
-                                        />
-                                    </div>
-
-                                    {/* Row 4: Amount + Max */}
-                                    <div>
-                                        <div className="flex items-center justify-between mb-1">
-                                            <label className="block text-sm font-medium text-gray-700">
-                                                Amount ({getCurrentTokenSymbol()})
-                                            </label>
-                                            <Button
-                                                type="button"
-                                                variant="secondary"
-                                                size="sm"
-                                                onClick={handleMaxAmount}
-                                            >
-                                                Max
-                                            </Button>
-                                        </div>
-                                        <Input
-                                            type="number"
-                                            step={selectedToken.type === 'TON' ? '0.000000001' : '0.000000001'}
-                                            min="0"
-                                            value={amount}
-                                            onChange={(e) => setAmount(e.target.value)}
-                                            placeholder="0.0000"
-                                            required
-                                            data-testid="amount-input"
-                                        />
-                                    </div>
-
-                                    {/* Transaction summary */}
-                                    {recipient && amount && parseFloat(amount) > 0 && (
-                                        <div className="bg-gray-50 rounded-md p-3 space-y-1 text-sm">
-                                            <div className="flex justify-between">
-                                                <span className="text-gray-500">To:</span>
-                                                <span className="font-mono">
-                                                    {recipient.slice(0, 6)}...{recipient.slice(-6)}
-                                                </span>
-                                            </div>
-                                            <div className="flex justify-between">
-                                                <span className="text-gray-500">Amount:</span>
-                                                <span>
-                                                    {amount} {getCurrentTokenSymbol()}
-                                                </span>
-                                            </div>
-                                            <div className="flex justify-between font-medium pt-1">
-                                                <span>You'll send:</span>
-                                                <span>
-                                                    {amount} {getCurrentTokenSymbol()}
-                                                </span>
-                                            </div>
-                                            {selectedToken.type === 'JETTON' && !effectiveGasless && (
-                                                <p className="text-xs text-blue-700 pt-1">
-                                                    TON fees will be deducted separately.
-                                                </p>
-                                            )}
-                                        </div>
-                                    )}
-
-                                    {/* Gasless: pay the fee in a jetton (jettons only, SignMessage wallets) */}
-                                    {canUseGasless && (
-                                        <div className="space-y-2 rounded-md border border-gray-200 p-3">
-                                            <label className="flex items-center gap-2 text-sm text-gray-700">
-                                                <input
-                                                    type="checkbox"
-                                                    checked={gasless.enabled}
-                                                    onChange={(e) => gasless.setEnabled(e.target.checked)}
-                                                    data-testid="gasless-toggle"
-                                                />
-                                                <span>Gasless — pay the fee in a jetton</span>
-                                            </label>
-
-                                            {effectiveGasless && (
-                                                <>
-                                                    <div>
-                                                        <label className="block text-xs text-gray-500 mb-1">
-                                                            Fee asset
-                                                        </label>
-                                                        <select
-                                                            value={gasless.feeAsset ?? ''}
-                                                            onChange={(e) => gasless.setFeeAsset(e.target.value)}
-                                                            disabled={gasless.supportedAssets.length === 0}
-                                                            className="w-full border border-gray-200 rounded-md px-2 py-1.5 text-sm"
-                                                            data-testid="gasless-fee-asset"
-                                                        >
-                                                            {!gasless.feeAsset && (
-                                                                <option value="" disabled>
-                                                                    Select
-                                                                </option>
-                                                            )}
-                                                            {gasless.supportedAssets.map((asset) => (
-                                                                <FeeAssetOption
-                                                                    key={asset.address}
-                                                                    address={asset.address}
-                                                                />
-                                                            ))}
-                                                        </select>
-                                                    </div>
-                                                    <div className="flex justify-between text-sm">
-                                                        <span className="text-gray-500">Gas fee:</span>
-                                                        <span>
-                                                            {gasless.error
-                                                                ? '—'
-                                                                : gasless.isQuoting
-                                                                  ? 'Calculating…'
-                                                                  : (gaslessFeeFormatted ?? '—')}
-                                                        </span>
-                                                    </div>
-                                                    {gasless.error && (
-                                                        <p className="text-xs text-red-600" data-testid="gasless-error">
-                                                            {gasless.error}
-                                                        </p>
-                                                    )}
-                                                </>
-                                            )}
-                                        </div>
-                                    )}
-
-                                    {error && <div className="text-red-600 text-sm text-center">{error}</div>}
-
-                                    {/* Send buttons */}
-                                    <div className="flex gap-2">
-                                        {showFastSend && !effectiveGasless && (
-                                            <Button
-                                                type="button"
-                                                variant="secondary"
-                                                onClick={handleFastSend}
-                                                isLoading={isLoading}
-                                                disabled={isSendFastDisabled}
-                                                className="flex-1"
-                                                data-testid="send-fast"
-                                            >
-                                                Send Fast
-                                            </Button>
-                                        )}
-                                        <Button
-                                            type="submit"
-                                            isLoading={isLoading || gasless.isSending}
-                                            disabled={isSendDisabled}
-                                            className="flex-1"
-                                            data-testid="send-submit"
-                                        >
-                                            {effectiveGasless
-                                                ? gasless.isSending
-                                                    ? 'Sending…'
-                                                    : gasless.isQuoting
-                                                      ? 'Quoting…'
-                                                      : 'Send Gasless'
-                                                : isLoading
-                                                  ? `Sending...`
-                                                  : `Send ${getCurrentTokenSymbol()}`}
-                                        </Button>
-                                    </div>
-                                </form>
-                            </>
-                        )}
-                    </div>
-                </Card>
-
-                {/* Warning - compact */}
-                <div className="bg-yellow-50 border border-yellow-200 rounded-md p-3">
-                    <p className="text-sm text-yellow-800">
-                        Double-check the recipient address. Blockchain transactions are irreversible.
-                    </p>
-                </div>
-            </div>
-        </Layout>
-    );
-};
diff --git a/apps/demo-wallet/src/pages/SetupPassword.tsx b/apps/demo-wallet/src/pages/SetupPassword.tsx
deleted file mode 100644
index 2dea693ce..000000000
--- a/apps/demo-wallet/src/pages/SetupPassword.tsx
+++ /dev/null
@@ -1,114 +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 React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from '@demo/wallet-core';
-
-import { Layout, Button, Input, Card } from '../components';
-
-export const SetupPassword: React.FC = () => {
-    const [password, setPassword] = useState('');
-    const [confirmPassword, setConfirmPassword] = useState('');
-    const [error, setError] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-
-    const navigate = useNavigate();
-    const { setPassword: setStorePassword } = useAuth();
-
-    const validatePassword = (pwd: string): string[] => {
-        const errors = [];
-        if (pwd.length < 4) errors.push('Password must be at least 4 characters long');
-        return errors;
-    };
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setError('');
-        setIsLoading(true);
-
-        try {
-            // Validate password
-            const validationErrors = validatePassword(password);
-            if (validationErrors.length > 0) {
-                throw new Error(validationErrors[0]);
-            }
-
-            if (password !== confirmPassword) {
-                throw new Error('Passwords do not match');
-            }
-
-            // Set password in store
-            await setStorePassword(password);
-
-            // Navigate to mnemonic setup
-            navigate('/setup-wallet');
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'An error occurred');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    return (
-        <Layout title="Setup Password">
-            <div className="space-y-6">
-                <div className="text-center">
-                    <h2 className="text-2xl font-bold text-gray-900" data-testid="subtitle">
-                        Create Password
-                    </h2>
-                    <p className="mt-2 text-sm text-gray-600">
-                        Your password will be used to encrypt your wallet data locally.
-                    </p>
-                </div>
-
-                <Card>
-                    <form onSubmit={handleSubmit} className="space-y-4">
-                        <Input
-                            data-testid="password"
-                            type="password"
-                            label="Password"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            placeholder="Enter a strong password"
-                            required
-                            helperText="At least 4 characters"
-                        />
-
-                        <Input
-                            data-testid="password-confirm"
-                            type="password"
-                            label="Confirm Password"
-                            value={confirmPassword}
-                            onChange={(e) => setConfirmPassword(e.target.value)}
-                            placeholder="Confirm your password"
-                            required
-                        />
-
-                        {error && <div className="text-red-600 text-sm text-center">{error}</div>}
-
-                        <Button
-                            data-testid="password-submit"
-                            type="submit"
-                            isLoading={isLoading}
-                            disabled={!password || !confirmPassword}
-                            className="w-full"
-                        >
-                            Continue
-                        </Button>
-                    </form>
-                </Card>
-
-                <div className="text-center text-sm text-gray-500">
-                    <p>⚠️ Make sure to remember your password.</p>
-                    <p>It cannot be recovered if forgotten.</p>
-                </div>
-            </div>
-        </Layout>
-    );
-};
diff --git a/apps/demo-wallet/src/pages/SetupWallet.tsx b/apps/demo-wallet/src/pages/SetupWallet.tsx
deleted file mode 100644
index d9abe5329..000000000
--- a/apps/demo-wallet/src/pages/SetupWallet.tsx
+++ /dev/null
@@ -1,146 +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 React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth, useWallet } from '@demo/wallet-core';
-import type { NetworkType } from '@demo/wallet-core';
-
-import { Layout, Button, ImportWallet, CreateWallet, LedgerSetup } from '../components';
-import { useTonWallet } from '../hooks';
-
-type SetupTab = 'create' | 'import' | 'ledger';
-
-export const SetupWallet: React.FC = () => {
-    const [activeTab, setActiveTab] = useState<SetupTab>('create');
-    const [error, setError] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-
-    const navigate = useNavigate();
-    const { createLedgerWallet, importWallet } = useTonWallet();
-    const { setUseWalletInterfaceType } = useAuth();
-    const { hasWallet } = useWallet();
-
-    const handleCreateWallet = async (mnemonic: string[], network: NetworkType) => {
-        setError('');
-        setIsLoading(true);
-
-        try {
-            setUseWalletInterfaceType('mnemonic');
-            await importWallet(mnemonic, 'v5r1', network);
-            navigate('/wallet');
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to create wallet');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleImportWallet = async (
-        mnemonicArray: string[],
-        interfaceType: 'signer' | 'mnemonic',
-        version?: 'v5r1' | 'v4r2',
-        network?: NetworkType,
-    ) => {
-        setError('');
-        setIsLoading(true);
-
-        try {
-            if (mnemonicArray.length !== 12 && mnemonicArray.length !== 24) {
-                throw new Error('Mnemonic must be 12 or 24 words');
-            }
-
-            setUseWalletInterfaceType(interfaceType);
-            await importWallet(mnemonicArray, version, network);
-            navigate('/wallet');
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to import wallet');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleCreateLedgerWallet = async (network: NetworkType) => {
-        setError('');
-        setIsLoading(true);
-
-        try {
-            setUseWalletInterfaceType('ledger');
-            await createLedgerWallet(network);
-            navigate('/wallet');
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to create Ledger wallet');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const tabs: { id: SetupTab; label: string }[] = [
-        { id: 'create', label: 'New' },
-        { id: 'import', label: 'Import' },
-        { id: 'ledger', label: 'Ledger' },
-    ];
-
-    const headerAction = hasWallet ? (
-        <Button data-testid="go-to-dashboard" onClick={() => navigate('/wallet')} size="sm" variant="secondary">
-            Dashboard
-        </Button>
-    ) : undefined;
-
-    return (
-        <Layout title="Setup Wallet" headerAction={headerAction}>
-            <div className="space-y-4">
-                {/* Tab Navigation */}
-                <div className="flex bg-gray-200 rounded-lg p-1">
-                    {tabs.map((tab) => (
-                        <button
-                            key={tab.id}
-                            onClick={() => {
-                                setActiveTab(tab.id);
-                                setError('');
-                            }}
-                            className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all ${
-                                activeTab === tab.id
-                                    ? 'bg-white text-gray-900 shadow-sm'
-                                    : 'text-gray-600 hover:text-gray-900'
-                            }`}
-                            data-testid={`tab-${tab.id}`}
-                        >
-                            {tab.label}
-                        </button>
-                    ))}
-                </div>
-
-                {/* Tab Content */}
-                <div>
-                    {activeTab === 'create' && (
-                        <CreateWallet onConfirm={handleCreateWallet} isLoading={isLoading} error={error} />
-                    )}
-
-                    {activeTab === 'import' && (
-                        <ImportWallet
-                            onImport={handleImportWallet}
-                            onBack={() => navigate('/')}
-                            isLoading={isLoading}
-                            error={error}
-                        />
-                    )}
-
-                    {activeTab === 'ledger' && (
-                        <LedgerSetup
-                            onConnect={handleCreateLedgerWallet}
-                            onBack={() => navigate('/')}
-                            isLoading={isLoading}
-                            error={error}
-                        />
-                    )}
-                </div>
-            </div>
-        </Layout>
-    );
-};
diff --git a/apps/demo-wallet/src/pages/Staking.tsx b/apps/demo-wallet/src/pages/Staking.tsx
deleted file mode 100644
index a2f157502..000000000
--- a/apps/demo-wallet/src/pages/Staking.tsx
+++ /dev/null
@@ -1,65 +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 type { FC } from 'react';
-import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useStaking, useWallet } from '@demo/wallet-core';
-
-import { Layout, Button } from '../components';
-import { StakingInterface } from '../components/staking/StakingInterface';
-import { StakingInfo } from '../components/staking/StakingInfo';
-
-export const Staking: FC = () => {
-    const navigate = useNavigate();
-    const { address } = useWallet();
-    const { clearStaking, loadStakingData } = useStaking();
-
-    useEffect(() => {
-        if (address) {
-            loadStakingData(address);
-        }
-        return () => clearStaking();
-    }, [address, loadStakingData, clearStaking]);
-
-    return (
-        <Layout title="Staking">
-            <div className="flex items-center space-x-4 mb-6">
-                <Button variant="secondary" size="sm" onClick={() => navigate('/wallet')}>
-                    ← Back
-                </Button>
-            </div>
-
-            <div className="flex flex-col gap-6">
-                <StakingInterface />
-                <StakingInfo />
-            </div>
-
-            {/* Warning */}
-            <div className="bg-blue-50 border border-blue-200 rounded-md p-4 mt-8">
-                <div className="flex">
-                    <div className="flex-shrink-0">
-                        <svg className="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
-                            <path
-                                fillRule="evenodd"
-                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                                clipRule="evenodd"
-                            />
-                        </svg>
-                    </div>
-                    <div className="ml-3">
-                        <p className="text-sm text-blue-800">
-                            Staking involves locking your TON to earn rewards. Please note that unstaking may take some
-                            time depending on the pool cycle.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </Layout>
-    );
-};
diff --git a/apps/demo-wallet/src/pages/Swap.tsx b/apps/demo-wallet/src/pages/Swap.tsx
deleted file mode 100644
index a7e5223e0..000000000
--- a/apps/demo-wallet/src/pages/Swap.tsx
+++ /dev/null
@@ -1,55 +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 type { FC } from 'react';
-import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useSwap } from '@demo/wallet-core';
-
-import { Layout } from '../components';
-import { SwapInterface } from '../components/swap/SwapInterface';
-
-import { USDT_ADDRESS } from '@/constants/swap';
-
-export const Swap: FC = () => {
-    const navigate = useNavigate();
-    const { setFromToken, setToToken, clearSwap } = useSwap();
-
-    useEffect(() => {
-        setFromToken({ address: 'ton', decimals: 9 });
-        setToToken({ address: USDT_ADDRESS, decimals: 6 });
-
-        return () => clearSwap();
-    }, []);
-
-    return (
-        <Layout title="Swap TON ↔ USDT" onBack={() => navigate('/wallet')}>
-            <SwapInterface />
-
-            {/* Warning */}
-            <div className="bg-yellow-50 border border-yellow-200 rounded-md p-4 mt-6">
-                <div className="flex">
-                    <div className="flex-shrink-0">
-                        <svg className="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
-                            <path
-                                fillRule="evenodd"
-                                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                                clipRule="evenodd"
-                            />
-                        </svg>
-                    </div>
-                    <div className="ml-3">
-                        <p className="text-sm text-yellow-800">
-                            Always verify the swap details before executing. Quotes may expire and need to be refreshed.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </Layout>
-    );
-};
diff --git a/apps/demo-wallet/src/pages/TracePage.tsx b/apps/demo-wallet/src/pages/TracePage.tsx
deleted file mode 100644
index 3ef5a58dc..000000000
--- a/apps/demo-wallet/src/pages/TracePage.tsx
+++ /dev/null
@@ -1,110 +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 React from 'react';
-import { useParams, Link } from 'react-router-dom';
-
-import { TraceRow } from '../components/TraceRow';
-
-export const TracePage: React.FC = () => {
-    const { traceId: fullTraceId } = useParams<{ traceId: string }>();
-    const traceId = fullTraceId?.split(':')?.[0];
-    const extHash = fullTraceId?.split(':')?.[1] ?? traceId;
-
-    if (!traceId) {
-        return (
-            <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-                <div className="text-center">
-                    <div className="text-red-400 mb-4">
-                        <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                            />
-                        </svg>
-                    </div>
-                    <h2 className="text-2xl font-bold text-gray-900 mb-2">Invalid Trace</h2>
-                    <p className="text-gray-600 mb-4">No trace ID provided</p>
-                    <Link
-                        to="/wallet"
-                        className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-                    >
-                        <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M10 19l-7-7m0 0l7-7m-7 7h18"
-                            />
-                        </svg>
-                        Back to Wallet
-                    </Link>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="min-h-screen bg-gray-50">
-            <div className="max-w-4xl mx-auto py-8 px-4">
-                {/* Header */}
-                <div className="mb-6">
-                    <div className="flex items-center space-x-4 mb-4">
-                        <Link
-                            to="/wallet"
-                            className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
-                            title="Back to wallet"
-                        >
-                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M10 19l-7-7m0 0l7-7m-7 7h18"
-                                />
-                            </svg>
-                        </Link>
-                        <div>
-                            <h1 className="text-2xl font-bold text-gray-900">Trace Details</h1>
-                            <p className="text-sm text-gray-500 font-mono">ID: {traceId}</p>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Trace Content */}
-                <div className="bg-white rounded-lg shadow-md border border-gray-200">
-                    <div className="px-6 py-4 border-b border-gray-200">
-                        <h2 className="text-lg font-medium text-gray-900">Transaction Trace</h2>
-                        <p className="text-sm text-gray-600 mt-1">
-                            Complete trace information for all transactions in this group
-                        </p>
-                    </div>
-                    <div className="p-6">
-                        <TraceRow externalHash={extHash} traceId={traceId} isPending={false} />
-
-                        {/* Additional trace information could be added here in the future */}
-                        <div className="mt-6 p-4 bg-gray-50 rounded-lg">
-                            <p className="text-sm text-gray-600">
-                                This page will be expanded to show detailed trace information including:
-                            </p>
-                            <ul className="mt-2 text-sm text-gray-500 list-disc list-inside space-y-1">
-                                <li>Individual transaction details</li>
-                                <li>Message flow visualization</li>
-                                <li>Action breakdown</li>
-                                <li>Fee analysis</li>
-                                <li>Smart contract interactions</li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/pages/TransactionDetail.tsx b/apps/demo-wallet/src/pages/TransactionDetail.tsx
deleted file mode 100644
index ba4066fa9..000000000
--- a/apps/demo-wallet/src/pages/TransactionDetail.tsx
+++ /dev/null
@@ -1,444 +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 React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { Base64Normalize } from '@ton/walletkit';
-import type { TransactionMessage } from '@ton/walletkit';
-import { useWalletKit, useWalletStore, getChainNetwork } from '@demo/wallet-core';
-
-interface TransactionDetailData {
-    hash: string;
-    timestamp: number;
-    type: 'send' | 'receive';
-    amount: string;
-    address: string;
-    status: 'pending' | 'confirmed' | 'failed';
-    totalFees: string;
-    logicalTime: string;
-    account: string;
-    description: unknown;
-    inMessage?: TransactionMessage;
-    outMessages?: TransactionMessage[];
-}
-
-export const TransactionDetail: React.FC = () => {
-    const walletKit = useWalletKit();
-    const savedWallets = useWalletStore((state) => state.walletManagement.savedWallets);
-    const activeWalletId = useWalletStore((state) => state.walletManagement.activeWalletId);
-    const { hash } = useParams<{ hash: string }>();
-    const navigate = useNavigate();
-    const [transaction, setTransaction] = useState<TransactionDetailData | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    // Get the active wallet's network
-    const activeWallet = savedWallets.find((w) => w.id === activeWalletId);
-    const walletNetwork = activeWallet?.network || 'testnet';
-    const chainNetwork = getChainNetwork(walletNetwork);
-
-    const formatTonAmount = (amount: string): string => {
-        const tonAmount = parseFloat(amount || '0') / 1000000000;
-        return tonAmount.toFixed(9);
-    };
-
-    const formatAddress = (addr: string): string => {
-        if (!addr) return '';
-        return `${addr.slice(0, 8)}...${addr.slice(-8)}`;
-    };
-
-    const formatTimestamp = (timestamp: number): string => {
-        return new Date(timestamp * 1000).toLocaleString();
-    };
-
-    const copyToClipboard = async (text: string) => {
-        try {
-            await navigator.clipboard.writeText(text);
-        } catch (_err) {
-            // Silently fail - clipboard functionality is optional
-        }
-    };
-
-    useEffect(() => {
-        const fetchTransactionDetail = async () => {
-            if (!hash) {
-                setError('Transaction hash not provided');
-                setIsLoading(false);
-                return;
-            }
-
-            try {
-                setIsLoading(true);
-                setError(null);
-
-                if (!walletKit) {
-                    setError('WalletKit not initialized');
-                    setIsLoading(false);
-                    return;
-                }
-
-                // Use the walletKit's API client to get transaction by hash
-                const apiClient = walletKit.getApiClient(chainNetwork);
-                const base64Hash = Base64Normalize(hash);
-                const response = await apiClient.getTransactionsByHash({ msgHash: base64Hash });
-
-                if (!response.transactions || response.transactions.length === 0) {
-                    setError('Transaction not found');
-                    setIsLoading(false);
-                    return;
-                }
-
-                const tx = response.transactions[0];
-
-                // Transform the transaction data
-                let type: 'send' | 'receive' = 'receive';
-                let amount = '0';
-                let address = '';
-
-                // Check incoming message
-                if (tx.inMessage && tx.inMessage.value) {
-                    amount = tx.inMessage.value;
-                    address = tx.inMessage.source || '';
-                    type = 'receive';
-                }
-
-                // Check outgoing messages - if there are any, it's likely a send transaction
-                if (tx.outMessages && tx.outMessages.length > 0) {
-                    const mainOutMsg = tx.outMessages[0];
-                    if (mainOutMsg.value) {
-                        amount = mainOutMsg.value;
-                        address = mainOutMsg.destination || '';
-                        type = 'send';
-                    }
-                }
-
-                // Determine status
-                let status: 'pending' | 'confirmed' | 'failed' = 'confirmed';
-                if (tx.description?.isAborted) {
-                    status = 'failed';
-                } else if (!tx.description?.computePhase?.isSuccess) {
-                    status = 'failed';
-                }
-
-                const detailData: TransactionDetailData = {
-                    hash: tx.hash,
-                    timestamp: tx.now,
-                    type,
-                    amount,
-                    address,
-                    status,
-                    totalFees: tx.totalFees || '0',
-                    logicalTime: tx.logicalTime,
-                    account: tx.account,
-                    description: tx.description,
-                    inMessage: tx.inMessage,
-                    outMessages: tx.outMessages,
-                };
-
-                setTransaction(detailData);
-            } catch (_err) {
-                setError('Failed to load transaction details');
-            } finally {
-                setIsLoading(false);
-            }
-        };
-
-        void fetchTransactionDetail();
-    }, [hash, chainNetwork]);
-
-    if (isLoading) {
-        return (
-            <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-                <div className="text-center">
-                    <div className="animate-spin w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
-                    <p className="text-gray-600">Loading transaction details...</p>
-                </div>
-            </div>
-        );
-    }
-
-    if (error || !transaction) {
-        return (
-            <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-                <div className="text-center">
-                    <div className="text-red-400 mb-4">
-                        <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                            />
-                        </svg>
-                    </div>
-                    <p className="text-red-600 mb-4">{error || 'Transaction not found'}</p>
-                    <button
-                        onClick={() => navigate('/wallet')}
-                        className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
-                    >
-                        Back to Wallet
-                    </button>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="min-h-screen bg-gray-50">
-            <div className="max-w-4xl mx-auto p-6">
-                {/* Header */}
-                <div className="mb-6">
-                    <button
-                        onClick={() => navigate('/wallet')}
-                        className="flex items-center text-blue-500 hover:text-blue-600 mb-4"
-                    >
-                        <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-                        </svg>
-                        Back to Wallet
-                    </button>
-                    <h1 className="text-2xl font-bold text-gray-900">Transaction Details</h1>
-                </div>
-
-                {/* Transaction Overview */}
-                <div className="bg-white rounded-lg shadow-md border border-gray-200 mb-6">
-                    <div className="p-6">
-                        <div className="flex items-center justify-between mb-4">
-                            <div className="flex items-center space-x-3">
-                                <div
-                                    className={`w-12 h-12 rounded-full flex items-center justify-center ${
-                                        transaction.type === 'send' ? 'bg-red-100' : 'bg-green-100'
-                                    }`}
-                                >
-                                    {transaction.type === 'send' ? (
-                                        <svg
-                                            className="w-6 h-6 text-red-600"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M7 11l5-5m0 0l5 5m-5-5v12"
-                                            />
-                                        </svg>
-                                    ) : (
-                                        <svg
-                                            className="w-6 h-6 text-green-600"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M17 13l-5 5m0 0l-5-5m5 5V6"
-                                            />
-                                        </svg>
-                                    )}
-                                </div>
-                                <div>
-                                    <h2 className="text-xl font-semibold text-gray-900">
-                                        {transaction.type === 'send' ? 'Sent' : 'Received'}
-                                    </h2>
-                                    <p className="text-gray-500">{formatTimestamp(transaction.timestamp)}</p>
-                                </div>
-                            </div>
-                            <div className="text-right">
-                                <p
-                                    className={`text-2xl font-bold ${
-                                        transaction.type === 'send' ? 'text-red-600' : 'text-green-600'
-                                    }`}
-                                >
-                                    {transaction.type === 'send' ? '-' : '+'}
-                                    {formatTonAmount(transaction.amount)} TON
-                                </p>
-                                <p
-                                    className={`text-sm font-medium ${
-                                        transaction.status === 'confirmed'
-                                            ? 'text-green-500'
-                                            : transaction.status === 'failed'
-                                              ? 'text-red-500'
-                                              : 'text-yellow-500'
-                                    }`}
-                                >
-                                    {transaction.status.toUpperCase()}
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Transaction Details */}
-                <div className="bg-white rounded-lg shadow-md border border-gray-200 mb-6">
-                    <div className="px-6 py-4 border-b border-gray-200">
-                        <h3 className="text-lg font-medium text-gray-900">Transaction Information</h3>
-                    </div>
-                    <div className="p-6 space-y-4">
-                        {/* Hash */}
-                        <div className="flex items-center justify-between">
-                            <span className="text-sm font-medium text-gray-500">Transaction Hash</span>
-                            <div className="flex items-center space-x-2">
-                                <span className="text-sm text-gray-900 font-mono">
-                                    {formatAddress(transaction.hash)}
-                                </span>
-                                <button
-                                    onClick={() => copyToClipboard(transaction.hash)}
-                                    className="p-1 text-gray-400 hover:text-gray-600"
-                                    title="Copy hash"
-                                >
-                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                                        />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-
-                        {/* Address */}
-                        <div className="flex items-center justify-between">
-                            <span className="text-sm font-medium text-gray-500">
-                                {transaction.type === 'send' ? 'To' : 'From'}
-                            </span>
-                            <div className="flex items-center space-x-2">
-                                <span className="text-sm text-gray-900 font-mono">
-                                    {formatAddress(transaction.address)}
-                                </span>
-                                <button
-                                    onClick={() => copyToClipboard(transaction.address)}
-                                    className="p-1 text-gray-400 hover:text-gray-600"
-                                    title="Copy address"
-                                >
-                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                                        />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-
-                        {/* Fees */}
-                        <div className="flex items-center justify-between">
-                            <span className="text-sm font-medium text-gray-500">Transaction Fees</span>
-                            <span className="text-sm text-gray-900">{formatTonAmount(transaction.totalFees)} TON</span>
-                        </div>
-
-                        {/* Logical Time */}
-                        <div className="flex items-center justify-between">
-                            <span className="text-sm font-medium text-gray-500">Logical Time</span>
-                            <span className="text-sm text-gray-900 font-mono">{transaction.logicalTime}</span>
-                        </div>
-
-                        {/* Account */}
-                        <div className="flex items-center justify-between">
-                            <span className="text-sm font-medium text-gray-500">Account</span>
-                            <div className="flex items-center space-x-2">
-                                <span className="text-sm text-gray-900 font-mono">
-                                    {formatAddress(transaction.account)}
-                                </span>
-                                <button
-                                    onClick={() => copyToClipboard(transaction.account)}
-                                    className="p-1 text-gray-400 hover:text-gray-600"
-                                    title="Copy account"
-                                >
-                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                                        />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Messages */}
-                {(transaction.inMessage || (transaction.outMessages && transaction.outMessages.length > 0)) && (
-                    <div className="bg-white rounded-lg shadow-md border border-gray-200">
-                        <div className="px-6 py-4 border-b border-gray-200">
-                            <h3 className="text-lg font-medium text-gray-900">Messages</h3>
-                        </div>
-                        <div className="p-6">
-                            {/* Incoming Message */}
-                            {transaction.inMessage && (
-                                <div className="mb-4">
-                                    <h4 className="text-sm font-medium text-gray-700 mb-2">Incoming Message</h4>
-                                    <div className="bg-gray-50 rounded-lg p-4 space-y-2">
-                                        <div className="flex justify-between">
-                                            <span className="text-sm text-gray-500">From:</span>
-                                            <span className="text-sm font-mono">
-                                                {formatAddress(transaction.inMessage.source || '')}
-                                            </span>
-                                        </div>
-                                        <div className="flex justify-between">
-                                            <span className="text-sm text-gray-500">To:</span>
-                                            <span className="text-sm font-mono">
-                                                {formatAddress(transaction.inMessage.destination || '')}
-                                            </span>
-                                        </div>
-                                        <div className="flex justify-between">
-                                            <span className="text-sm text-gray-500">Value:</span>
-                                            <span className="text-sm">
-                                                {formatTonAmount(transaction.inMessage.value || '0')} TON
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-
-                            {/* Outgoing Messages */}
-                            {transaction.outMessages && transaction.outMessages.length > 0 && (
-                                <div>
-                                    <h4 className="text-sm font-medium text-gray-700 mb-2">Outgoing Messages</h4>
-                                    <div className="space-y-3">
-                                        {transaction.outMessages.map((msg, index) => (
-                                            <div key={index} className="bg-gray-50 rounded-lg p-4 space-y-2">
-                                                <div className="flex justify-between">
-                                                    <span className="text-sm text-gray-500">From:</span>
-                                                    <span className="text-sm font-mono">
-                                                        {formatAddress(msg.source || '')}
-                                                    </span>
-                                                </div>
-                                                <div className="flex justify-between">
-                                                    <span className="text-sm text-gray-500">To:</span>
-                                                    <span className="text-sm font-mono">
-                                                        {formatAddress(msg.destination || '')}
-                                                    </span>
-                                                </div>
-                                                <div className="flex justify-between">
-                                                    <span className="text-sm text-gray-500">Value:</span>
-                                                    <span className="text-sm">
-                                                        {formatTonAmount(msg.value || '0')} TON
-                                                    </span>
-                                                </div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/pages/UnlockWallet.tsx b/apps/demo-wallet/src/pages/UnlockWallet.tsx
deleted file mode 100644
index 07487972f..000000000
--- a/apps/demo-wallet/src/pages/UnlockWallet.tsx
+++ /dev/null
@@ -1,95 +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 React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth, useWallet } from '@demo/wallet-core';
-
-import { Layout, Button, Input, Card } from '../components';
-
-export const UnlockWallet: React.FC = () => {
-    const [password, setPassword] = useState('');
-    const [error, setError] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-
-    const navigate = useNavigate();
-    const { unlock, reset } = useAuth();
-    const { loadAllWallets } = useWallet();
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setError('');
-        setIsLoading(true);
-
-        try {
-            const success = await unlock(password);
-            if (!success) {
-                throw new Error('Invalid password');
-            }
-
-            // Load wallet data after successful unlock
-            await loadAllWallets();
-
-            // Navigate to wallet
-            navigate('/wallet');
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to unlock wallet');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleReset = () => {
-        if (
-            window.confirm('Are you sure you want to reset your wallet? This will delete all wallet data permanently.')
-        ) {
-            reset();
-            navigate('/setup-password');
-        }
-    };
-
-    return (
-        <Layout title="Unlock Wallet">
-            <div className="space-y-6">
-                <div className="text-center">
-                    <h2 className="text-2xl font-bold text-gray-900" data-testid="subtitle">
-                        Welcome Back
-                    </h2>
-                    <p className="mt-2 text-sm text-gray-600">Enter your password to unlock your wallet.</p>
-                </div>
-
-                <Card>
-                    <form onSubmit={handleSubmit} className="space-y-4">
-                        <Input
-                            type="password"
-                            label="Password"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            placeholder="Enter your password"
-                            required
-                            autoFocus
-                        />
-
-                        {error && <div className="text-red-600 text-sm text-center">{error}</div>}
-
-                        <Button type="submit" isLoading={isLoading} disabled={!password} className="w-full">
-                            Unlock Wallet
-                        </Button>
-                    </form>
-                </Card>
-
-                <div className="text-center flex flex-col items-center">
-                    <Button variant="secondary" onClick={handleReset} className="text-sm">
-                        Reset Wallet
-                    </Button>
-                    <p className="mt-2 text-xs text-gray-500">This will permanently delete your wallet data</p>
-                </div>
-            </div>
-        </Layout>
-    );
-};
diff --git a/apps/demo-wallet/src/pages/WalletDashboard.tsx b/apps/demo-wallet/src/pages/WalletDashboard.tsx
deleted file mode 100644
index aa70f5f1a..000000000
--- a/apps/demo-wallet/src/pages/WalletDashboard.tsx
+++ /dev/null
@@ -1,403 +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 React, { useState, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
-    useWallet,
-    useWalletKit,
-    useTonConnect,
-    useTransactionRequests,
-    useSignDataRequests,
-    useSignMessageRequests,
-} from '@demo/wallet-core';
-
-import {
-    AnimatedBalance,
-    Layout,
-    Button,
-    Card,
-    ConnectRequestModal,
-    TransactionRequestModal,
-    SignDataRequestModal,
-    SignMessageRequestModal,
-    DisconnectNotifications,
-    NftsCard,
-    RecentTransactions,
-    JettonsCard,
-    WalletSwitcher,
-} from '../components';
-import { useTonWallet } from '../hooks';
-import { createComponentLogger } from '../utils/logger';
-import { usePasteHandler } from '../hooks/usePasteHandler';
-
-// Create logger for wallet dashboard
-const log = createComponentLogger('WalletDashboard');
-
-export const WalletDashboard: React.FC = () => {
-    const walletKit = useWalletKit();
-    const [isRefreshing, setIsRefreshing] = useState(false);
-    const [isCopied, setIsCopied] = useState(false);
-    const [tonConnectUrl, setTonConnectUrl] = useState('');
-    const [isConnecting, setIsConnecting] = useState(false);
-    const navigate = useNavigate();
-
-    const {
-        balance,
-        address,
-        getAvailableWallets,
-        updateBalance,
-        loadEvents,
-        savedWallets,
-        activeWalletId,
-        switchWallet,
-        removeWallet,
-        renameWallet,
-        getActiveWallet,
-    } = useWallet();
-    const activeWallet = getActiveWallet();
-    const network = activeWallet?.network || 'testnet';
-    const {
-        handleTonConnectUrl,
-        pendingConnectRequest,
-        isConnectModalOpen,
-        approveConnectRequest,
-        rejectConnectRequest,
-    } = useTonConnect();
-    const { pendingTransactionRequest, isTransactionModalOpen } = useTransactionRequests();
-    const { pendingSignDataRequest, isSignDataModalOpen, approveSignDataRequest, rejectSignDataRequest } =
-        useSignDataRequests();
-    const { pendingSignMessageRequest, isSignMessageModalOpen } = useSignMessageRequests();
-    const { error } = useTonWallet();
-
-    // Use the paste handler hook
-    usePasteHandler(handleTonConnectUrl);
-
-    const handleRefreshBalance = useCallback(async () => {
-        setIsRefreshing(true);
-        try {
-            await Promise.all([updateBalance(), loadEvents(10, 0)]);
-        } catch (err) {
-            log.error('Error refreshing balance:', err);
-        } finally {
-            setIsRefreshing(false);
-        }
-    }, [updateBalance, loadEvents]);
-
-    const handleCopyAddress = useCallback(async () => {
-        if (!address) return;
-
-        try {
-            await navigator.clipboard.writeText(address);
-            setIsCopied(true);
-            setTimeout(() => setIsCopied(false), 2000);
-        } catch (err) {
-            log.error('Failed to copy address:', err);
-        }
-    }, [address]);
-
-    const handleConnectDApp = useCallback(async () => {
-        if (!tonConnectUrl.trim()) return;
-
-        setIsConnecting(true);
-        try {
-            await handleTonConnectUrl(tonConnectUrl.trim());
-            setTonConnectUrl('');
-        } catch (err) {
-            log.error('Failed to connect to dApp:', err);
-            // TODO: Show error message to user
-        } finally {
-            setIsConnecting(false);
-        }
-    }, [tonConnectUrl, handleTonConnectUrl]);
-
-    const handleTestDisconnectAll = useCallback(async () => {
-        if (!walletKit) return;
-        try {
-            await walletKit.disconnect(); // Disconnect all sessions
-            log.info('All sessions disconnected');
-        } catch (err) {
-            log.error('Failed to disconnect sessions:', err);
-        }
-    }, [walletKit]);
-
-    const handleSwitchWallet = async (walletId: string) => {
-        try {
-            await switchWallet(walletId);
-        } catch (err) {
-            log.error('Failed to switch wallet:', err);
-        }
-    };
-
-    const handleRemoveWallet = (walletId: string) => {
-        try {
-            removeWallet(walletId);
-        } catch (err) {
-            log.error('Failed to remove wallet:', err);
-        }
-    };
-
-    const handleRenameWallet = (walletId: string, newName: string) => {
-        try {
-            renameWallet(walletId, newName);
-        } catch (err) {
-            log.error('Failed to rename wallet:', err);
-        }
-    };
-
-    return (
-        <Layout title="TON Wallet" showLogout>
-            <div className="space-y-4">
-                {/* Wallet Card: selector + balance + address + send/swap/stake + jettons + history */}
-                <Card compact>
-                    <div className="space-y-3">
-                        {/* Row 1: Wallet selector */}
-                        <WalletSwitcher
-                            savedWallets={savedWallets}
-                            activeWalletId={activeWalletId}
-                            onSwitchWallet={handleSwitchWallet}
-                            onRemoveWallet={handleRemoveWallet}
-                            onRenameWallet={handleRenameWallet}
-                            compact
-                        />
-
-                        {/* Row 2: Balance */}
-                        <p className="text-xl font-bold text-gray-900 truncate">
-                            <AnimatedBalance balance={balance} />
-                        </p>
-
-                        {/* Row 3: Address with copy, refresh, TONScan, TONViewer */}
-                        {address && (
-                            <div className="flex items-center gap-1.5 min-w-0">
-                                <span className="text-xs font-mono text-gray-600 truncate flex-1 min-w-0">
-                                    {address.slice(0, 6)}...{address.slice(-4)}
-                                </span>
-                                <button
-                                    onClick={handleCopyAddress}
-                                    className="p-1 rounded hover:bg-gray-100 transition-colors flex-shrink-0"
-                                    title="Copy address"
-                                >
-                                    {isCopied ? (
-                                        <svg
-                                            className="w-3.5 h-3.5 text-green-600"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M5 13l4 4L19 7"
-                                            />
-                                        </svg>
-                                    ) : (
-                                        <svg
-                                            className="w-3.5 h-3.5 text-gray-500"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <path
-                                                strokeLinecap="round"
-                                                strokeLinejoin="round"
-                                                strokeWidth={2}
-                                                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                                            />
-                                        </svg>
-                                    )}
-                                </button>
-                                <button
-                                    onClick={handleRefreshBalance}
-                                    disabled={isRefreshing}
-                                    className="p-1 rounded hover:bg-gray-100 transition-colors disabled:opacity-50 flex-shrink-0"
-                                    title="Refresh balance"
-                                    aria-label="Refresh balance"
-                                >
-                                    <svg
-                                        className={`w-3.5 h-3.5 text-gray-500 ${isRefreshing ? 'animate-spin' : ''}`}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        strokeWidth="2"
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                    >
-                                        <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
-                                        <path d="M21 3v5h-5" />
-                                    </svg>
-                                </button>
-                                <a
-                                    href={`https://${network === 'testnet' ? 'testnet.' : network === 'tetra' ? 'tetra.' : ''}tonscan.org/address/${address}`}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="p-1 rounded hover:bg-gray-100 flex-shrink-0"
-                                    title="TONScan"
-                                >
-                                    <img src="https://tonscan.org/favicon.ico" alt="" className="w-4 h-4" />
-                                </a>
-                                <a
-                                    href={`https://${network === 'testnet' ? 'testnet.' : network === 'tetra' ? 'tetra.' : ''}tonviewer.com/${address}`}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="p-1 rounded hover:bg-gray-100 flex-shrink-0"
-                                    title="TONViewer"
-                                >
-                                    <img
-                                        src="https://tonviewer.com/android-chrome-192x192.png"
-                                        alt=""
-                                        className="w-4 h-4"
-                                    />
-                                </a>
-                            </div>
-                        )}
-
-                        {/* Row 4: Send, Swap, Stake */}
-                        <div className="flex gap-2">
-                            <Button
-                                onClick={() => navigate('/send')}
-                                className="flex-1 py-2 text-sm"
-                                data-testid="send-button"
-                            >
-                                Send
-                            </Button>
-                            <Button
-                                variant="secondary"
-                                onClick={() => navigate('/swap')}
-                                className="flex-1 py-2 text-sm"
-                            >
-                                Swap
-                            </Button>
-
-                            <Button
-                                variant="secondary"
-                                onClick={() => navigate('/staking')}
-                                className="flex-1 py-2 text-sm"
-                            >
-                                Stake
-                            </Button>
-                        </div>
-
-                        {/* Jettons (embedded in wallet card) */}
-                        <JettonsCard embedded />
-
-                        {/* History (embedded in wallet card) */}
-                        <RecentTransactions embedded />
-                    </div>
-                </Card>
-
-                {/* NFTs */}
-                <NftsCard />
-
-                {/* Connect to dApp */}
-                <Card title="Connect to dApp" compact>
-                    <div className="space-y-3">
-                        <div>
-                            <label htmlFor="tonconnect-url" className="block text-sm font-medium text-gray-700 mb-2">
-                                Paste TON Connect Link
-                            </label>
-                            <textarea
-                                data-testid="tonconnect-url"
-                                id="tonconnect-url"
-                                rows={2}
-                                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 resize-none text-black"
-                                placeholder="tc://... or ton://... or https://..."
-                                value={tonConnectUrl}
-                                onChange={(e) => setTonConnectUrl(e.target.value)}
-                            />
-                        </div>
-                        <Button
-                            data-testid="tonconnect-process"
-                            onClick={handleConnectDApp}
-                            isLoading={isConnecting}
-                            disabled={!tonConnectUrl.trim() || isConnecting}
-                            className="w-full"
-                        >
-                            Connect to dApp
-                        </Button>
-                    </div>
-                </Card>
-
-                {error && (
-                    <div className="bg-red-50 border border-red-200 rounded-md p-4">
-                        <div className="flex">
-                            <div className="flex-shrink-0">
-                                <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
-                                    <path
-                                        fillRule="evenodd"
-                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                                        clipRule="evenodd"
-                                    />
-                                </svg>
-                            </div>
-                            <div className="ml-3">
-                                <p className="text-sm text-red-800">{error}</p>
-                            </div>
-                        </div>
-                    </div>
-                )}
-
-                {/* Disconnect Notifications */}
-                <DisconnectNotifications />
-
-                {/* Development Test Section */}
-                <Card title="Development Tools" compact>
-                    <div className="space-y-4">
-                        <p className="text-sm text-gray-600">Test disconnect event functionality</p>
-                        <Button variant="secondary" onClick={handleTestDisconnectAll} className="w-full">
-                            Test: Disconnect All Sessions
-                        </Button>
-                    </div>
-                </Card>
-            </div>
-
-            {/* Connect Request Modal */}
-            {pendingConnectRequest && (
-                <ConnectRequestModal
-                    request={pendingConnectRequest}
-                    availableWallets={getAvailableWallets()}
-                    savedWallets={savedWallets}
-                    currentWallet={getAvailableWallets().find((w) => w.getWalletId() === activeWallet?.kitWalletId)}
-                    isOpen={isConnectModalOpen}
-                    onApprove={approveConnectRequest}
-                    onReject={rejectConnectRequest}
-                />
-            )}
-
-            {/* Transaction Request Modal */}
-            {pendingTransactionRequest && (
-                <TransactionRequestModal
-                    request={pendingTransactionRequest}
-                    savedWallets={savedWallets}
-                    isOpen={isTransactionModalOpen}
-                />
-            )}
-
-            {/* Sign Data Request Modal */}
-            {pendingSignDataRequest && (
-                <SignDataRequestModal
-                    request={pendingSignDataRequest}
-                    savedWallets={savedWallets}
-                    isOpen={isSignDataModalOpen}
-                    onApprove={approveSignDataRequest}
-                    onReject={rejectSignDataRequest}
-                />
-            )}
-
-            {/* Sign Message Request Modal */}
-            {pendingSignMessageRequest && (
-                <SignMessageRequestModal
-                    request={pendingSignMessageRequest}
-                    savedWallets={savedWallets}
-                    isOpen={isSignMessageModalOpen}
-                />
-            )}
-        </Layout>
-    );
-};
diff --git a/apps/demo-wallet/src/pages/index.ts b/apps/demo-wallet/src/pages/index.ts
deleted file mode 100644
index 125c5f0e6..000000000
--- a/apps/demo-wallet/src/pages/index.ts
+++ /dev/null
@@ -1,18 +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.
- *
- */
-
-export * from './SetupPassword';
-export * from './UnlockWallet';
-export * from './SetupWallet';
-export * from './WalletDashboard';
-export * from './SendTransaction';
-export * from './TracePage';
-export * from './TransactionDetail';
-export * from './Swap';
-export * from './Staking';
-export * from './TonConnectRoute';
diff --git a/apps/demo-wallet/src/vite-env.d.ts b/apps/demo-wallet/src/vite-env.d.ts
index d6a0cb749..7cdd7b141 100644
--- a/apps/demo-wallet/src/vite-env.d.ts
+++ b/apps/demo-wallet/src/vite-env.d.ts
@@ -16,3 +16,5 @@ interface ImportMetaEnv {
 interface ImportMeta {
     readonly env: ImportMetaEnv;
 }
+
+declare module '@fontsource-variable/inter';
diff --git a/demo/wallet-core/src/hooks/useWalletStore.ts b/demo/wallet-core/src/hooks/useWalletStore.ts
index c8bc5c3f1..70b947e52 100644
--- a/demo/wallet-core/src/hooks/useWalletStore.ts
+++ b/demo/wallet-core/src/hooks/useWalletStore.ts
@@ -219,6 +219,23 @@ export const useJettons = () => {
     );
 };
 
+/**
+ * Hook for Rates (USD prices and 24h change per asset key)
+ */
+export const useRates = () => {
+    return useWalletStore(
+        useShallow((state) => ({
+            entries: state.rates.entries,
+            isLoading: state.rates.isLoading,
+            error: state.rates.error,
+            lastUpdated: state.rates.lastUpdated,
+            loadRates: state.loadRates,
+            clearRates: state.clearRates,
+            getRate: state.getRate,
+        })),
+    );
+};
+
 /**
  * Hook for Swap
  */
@@ -235,11 +252,13 @@ export const useSwap = () => {
             error: state.swap.error,
             slippageBps: state.swap.slippageBps,
             isReverseSwap: state.swap.isReverseSwap,
+            providerId: state.swap.providerId,
             setFromToken: state.setFromToken,
             setToToken: state.setToToken,
             setSwapAmount: state.setSwapAmount,
             setDestinationAddress: state.setDestinationAddress,
             setSlippageBps: state.setSlippageBps,
+            setSwapProviderId: state.setSwapProviderId,
             setIsReverseSwap: state.setIsReverseSwap,
             swapTokens: state.swapTokens,
             getSwapQuote: state.getSwapQuote,
diff --git a/demo/wallet-core/src/index.ts b/demo/wallet-core/src/index.ts
index ebf6d58b0..2dd7146b4 100644
--- a/demo/wallet-core/src/index.ts
+++ b/demo/wallet-core/src/index.ts
@@ -30,6 +30,7 @@ export {
     useDisconnectEvents,
     useNfts,
     useJettons,
+    useRates,
     useSwap,
     useStaking,
     useGasless,
@@ -47,6 +48,8 @@ export type {
     TonConnectSlice,
     JettonsSlice,
     NftsSlice,
+    RatesSlice,
+    RateEntry,
     SwapSlice,
     StakingSlice,
     GaslessSlice,
diff --git a/demo/wallet-core/src/store/createWalletStore.ts b/demo/wallet-core/src/store/createWalletStore.ts
index fec4f4aa1..c67e7160c 100644
--- a/demo/wallet-core/src/store/createWalletStore.ts
+++ b/demo/wallet-core/src/store/createWalletStore.ts
@@ -16,6 +16,7 @@ import { createWalletManagementSlice } from './slices/walletManagementSlice';
 import { createTonConnectSlice } from './slices/tonConnectSlice';
 import { createJettonsSlice } from './slices/jettonsSlice';
 import { createNftsSlice } from './slices/nftsSlice';
+import { createRatesSlice } from './slices/ratesSlice';
 import { createSwapSlice } from './slices/swapSlice';
 import { createStakingSlice } from './slices/stakingSlice';
 import { createGaslessSlice } from './slices/gaslessSlice';
@@ -142,6 +143,9 @@ export function createWalletStore(options: CreateWalletStoreOptions = {}) {
                         ...createNftsSlice(...a),
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-ignore
+                        ...createRatesSlice(...a),
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
                         ...createSwapSlice(...a),
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-ignore
diff --git a/demo/wallet-core/src/store/slices/gaslessSlice.ts b/demo/wallet-core/src/store/slices/gaslessSlice.ts
index 16ca30464..8d0da9d15 100644
--- a/demo/wallet-core/src/store/slices/gaslessSlice.ts
+++ b/demo/wallet-core/src/store/slices/gaslessSlice.ts
@@ -30,204 +30,230 @@ const pickDefaultFeeAsset = (supportedAssets: { address: string }[]): string | n
     return usdt?.address ?? supportedAssets[0].address;
 };
 
-export const createGaslessSlice: GaslessSliceCreator = (set: SetState, get) => ({
-    gasless: {
-        enabled: false,
-        feeAsset: null,
-        supportedAssets: [],
-        relayAddress: null,
-        currentQuote: null,
-        isLoadingConfig: false,
-        isLoadingQuote: false,
-        isSending: false,
-        error: null,
-    },
-
-    setGaslessEnabled: (enabled: boolean) => {
-        set((state) => {
-            state.gasless.enabled = enabled;
-            // Drop any stale error on each toggle; clear the quote when turning off.
-            state.gasless.error = null;
-            if (!enabled) state.gasless.currentQuote = null;
-        });
-    },
-
-    setGaslessFeeAsset: (address: string) => {
-        set((state) => {
-            state.gasless.feeAsset = address;
-            // Fee asset changed — the existing quote no longer reflects it.
-            state.gasless.currentQuote = null;
-        });
-    },
-
-    clearGaslessQuote: () => {
-        set((state) => {
-            state.gasless.currentQuote = null;
-            state.gasless.error = null;
-        });
-    },
-
-    loadGaslessConfig: async () => {
-        const state = get();
-        const kit = state.walletCore.walletKit;
-        const network = state.walletManagement.currentWallet?.getNetwork();
-
-        if (!kit || !network) return;
-
-        set((state) => {
-            state.gasless.isLoadingConfig = true;
-        });
-
-        try {
-            const config = await kit.gasless.getConfig(network);
-
+export const createGaslessSlice: GaslessSliceCreator = (set: SetState, get) => {
+    // Monotonic id for quote requests. A slower, superseded response (older request
+    // resolving after a newer one, or after the quote was cleared) is dropped so it
+    // can't overwrite a fresher quote or leave a stale spinner. Anything that
+    // invalidates an in-flight quote bumps this; the response checks it on resolve.
+    let latestQuoteId = 0;
+    const cancelInFlightQuote = (): number => (latestQuoteId += 1);
+
+    return {
+        gasless: {
+            enabled: false,
+            feeAsset: null,
+            supportedAssets: [],
+            relayAddress: null,
+            currentQuote: null,
+            isLoadingConfig: false,
+            isLoadingQuote: false,
+            isSending: false,
+            error: null,
+        },
+
+        setGaslessEnabled: (enabled: boolean) => {
+            cancelInFlightQuote();
             set((state) => {
-                state.gasless.supportedAssets = config.supportedAssets;
-                state.gasless.relayAddress = config.relayAddress;
-                state.gasless.isLoadingConfig = false;
-                // Seed the fee asset on first load (USDT preferred), keep an existing pick.
-                if (!state.gasless.feeAsset) {
-                    state.gasless.feeAsset = pickDefaultFeeAsset(config.supportedAssets);
+                state.gasless.enabled = enabled;
+                // Drop any stale error on each toggle; clear the quote when turning off.
+                state.gasless.error = null;
+                if (!enabled) {
+                    state.gasless.currentQuote = null;
+                    state.gasless.isLoadingQuote = false;
                 }
             });
-        } catch (error) {
-            log.error('Failed to load gasless config:', error);
-            set((state) => {
-                state.gasless.isLoadingConfig = false;
-                state.gasless.error = error instanceof Error ? error.message : 'Failed to load gasless config';
-            });
-        }
-    },
+        },
 
-    getGaslessQuote: async ({ recipientAddress, jettonAddress, transferAmount, comment }) => {
-        const state = get();
-        const wallet = state.walletManagement.currentWallet;
-        const kit = state.walletCore.walletKit;
-
-        if (!wallet || !kit) {
+        setGaslessFeeAsset: (address: string) => {
+            cancelInFlightQuote();
             set((state) => {
-                state.gasless.error = 'WalletKit not initialized';
+                state.gasless.feeAsset = address;
+                // Fee asset changed — the existing/in-flight quote no longer reflects it.
+                state.gasless.currentQuote = null;
+                state.gasless.isLoadingQuote = false;
             });
-            return;
-        }
+        },
 
-        // The relayer config (relay address + fee asset) is loaded once via
-        // `loadGaslessConfig` when gasless is enabled — see `useGaslessJettonSend`.
-        const { feeAsset, relayAddress } = get().gasless;
-        if (!feeAsset || !relayAddress) {
+        clearGaslessQuote: () => {
+            cancelInFlightQuote();
             set((state) => {
-                state.gasless.error = 'Gasless is not available on this network';
-            });
-            return;
-        }
-
-        set((state) => {
-            state.gasless.isLoadingQuote = true;
-            state.gasless.error = null;
-        });
-
-        try {
-            const network = wallet.getNetwork();
-            const jettonWalletAddress = await wallet.getJettonWalletAddress(asAddressFriendly(jettonAddress));
-
-            // `responseDestination = relayer`: the relayer fronts the message's TON
-            // budget, so its unspent remainder returns to it rather than the user —
-            // otherwise the relayer pads the commission to cover the loss.
-            const payload = createJettonTransferPayload({
-                amount: BigInt(transferAmount),
-                destination: asAddressFriendly(recipientAddress),
-                responseDestination: asAddressFriendly(relayAddress),
-                comment,
+                state.gasless.currentQuote = null;
+                state.gasless.isLoadingQuote = false;
+                state.gasless.error = null;
             });
+        },
 
-            const tx = createTransferTransaction({
-                targetAddress: jettonWalletAddress,
-                amount: DEFAULT_JETTON_GAS_FEE,
-                payload,
-                fromAddress: wallet.getAddress(),
-            });
+        loadGaslessConfig: async () => {
+            const state = get();
+            const kit = state.walletCore.walletKit;
+            const network = state.walletManagement.currentWallet?.getNetwork();
 
-            const quote = await kit.gasless.getQuote({
-                network,
-                feeAsset: asAddressFriendly(feeAsset),
-                walletAddress: wallet.getAddress(),
-                walletPublicKey: wallet.getPublicKey(),
-                messages: tx.messages,
-            });
+            if (!kit || !network) return;
 
             set((state) => {
-                state.gasless.currentQuote = quote;
-                state.gasless.isLoadingQuote = false;
+                state.gasless.isLoadingConfig = true;
             });
-        } catch (error) {
-            log.error('Failed to get gasless quote:', error);
+
+            try {
+                const config = await kit.gasless.getConfig(network);
+
+                set((state) => {
+                    state.gasless.supportedAssets = config.supportedAssets;
+                    state.gasless.relayAddress = config.relayAddress;
+                    state.gasless.isLoadingConfig = false;
+                    // Seed the fee asset on first load (USDT preferred), keep an existing pick.
+                    if (!state.gasless.feeAsset) {
+                        state.gasless.feeAsset = pickDefaultFeeAsset(config.supportedAssets);
+                    }
+                });
+            } catch (error) {
+                log.error('Failed to load gasless config:', error);
+                set((state) => {
+                    state.gasless.isLoadingConfig = false;
+                    state.gasless.error = error instanceof Error ? error.message : 'Failed to load gasless config';
+                });
+            }
+        },
+
+        getGaslessQuote: async ({ recipientAddress, jettonAddress, transferAmount, comment }) => {
+            const state = get();
+            const wallet = state.walletManagement.currentWallet;
+            const kit = state.walletCore.walletKit;
+
+            if (!wallet || !kit) {
+                set((state) => {
+                    state.gasless.error = 'WalletKit not initialized';
+                });
+                return;
+            }
+
+            // The relayer config (relay address + fee asset) is loaded once via
+            // `loadGaslessConfig` when gasless is enabled — see `useGaslessJettonSend`.
+            const { feeAsset, relayAddress } = get().gasless;
+            if (!feeAsset || !relayAddress) {
+                set((state) => {
+                    state.gasless.error = 'Gasless is not available on this network';
+                });
+                return;
+            }
+
+            // Claim this request's id; only the latest request may write the result.
+            const requestId = cancelInFlightQuote();
             set((state) => {
-                state.gasless.isLoadingQuote = false;
-                state.gasless.currentQuote = null;
-                state.gasless.error = error instanceof Error ? error.message : 'Failed to get gasless quote';
-            });
-        }
-    },
-
-    sendGasless: async (): Promise<SendTransactionResponse> => {
-        const state = get();
-        const { currentQuote } = state.gasless;
-        const wallet = state.walletManagement.currentWallet;
-        const kit = state.walletCore.walletKit;
-
-        if (!currentQuote || !wallet || !kit) {
-            throw new Error('Gasless quote not ready');
-        }
-
-        set((state) => {
-            state.gasless.isSending = true;
-            state.gasless.error = null;
-        });
-
-        try {
-            const network = wallet.getNetwork();
-
-            // Sign the relayer-wrapped messages locally → internal-message BoC the
-            // relayer broadcasts (paying the gas). No approval modal: the wallet
-            // holds the key and signs directly.
-            const internalBoc = await wallet.getSignedSignMessage({
-                messages: currentQuote.messages,
-                validUntil: currentQuote.validUntil,
-                network,
-                fromAddress: wallet.getAddress(),
+                state.gasless.isLoadingQuote = true;
+                state.gasless.error = null;
             });
 
-            const result = await kit.gasless.sendTransaction({
-                network,
-                walletPublicKey: wallet.getPublicKey(),
-                internalBoc,
-            });
+            try {
+                const network = wallet.getNetwork();
+                const jettonWalletAddress = await wallet.getJettonWalletAddress(asAddressFriendly(jettonAddress));
+
+                // `responseDestination = relayer`: the relayer fronts the message's TON
+                // budget, so its unspent remainder returns to it rather than the user —
+                // otherwise the relayer pads the commission to cover the loss.
+                const payload = createJettonTransferPayload({
+                    amount: BigInt(transferAmount),
+                    destination: asAddressFriendly(recipientAddress),
+                    responseDestination: asAddressFriendly(relayAddress),
+                    comment,
+                });
+
+                const tx = createTransferTransaction({
+                    targetAddress: jettonWalletAddress,
+                    amount: DEFAULT_JETTON_GAS_FEE,
+                    payload,
+                    fromAddress: wallet.getAddress(),
+                });
+
+                const quote = await kit.gasless.getQuote({
+                    network,
+                    feeAsset: asAddressFriendly(feeAsset),
+                    walletAddress: wallet.getAddress(),
+                    walletPublicKey: wallet.getPublicKey(),
+                    messages: tx.messages,
+                });
+
+                // Superseded while awaiting (newer request, fee-asset change, clear) —
+                // discard so we don't overwrite the fresher state with a stale quote.
+                if (requestId !== latestQuoteId) return;
+
+                set((state) => {
+                    state.gasless.currentQuote = quote;
+                    state.gasless.isLoadingQuote = false;
+                });
+            } catch (error) {
+                if (requestId !== latestQuoteId) return;
+
+                log.error('Failed to get gasless quote:', error);
+                set((state) => {
+                    state.gasless.isLoadingQuote = false;
+                    state.gasless.currentQuote = null;
+                    state.gasless.error = error instanceof Error ? error.message : 'Failed to get gasless quote';
+                });
+            }
+        },
+
+        sendGasless: async (): Promise<SendTransactionResponse> => {
+            const state = get();
+            const { currentQuote } = state.gasless;
+            const wallet = state.walletManagement.currentWallet;
+            const kit = state.walletCore.walletKit;
+
+            if (!currentQuote || !wallet || !kit) {
+                throw new Error('Gasless quote not ready');
+            }
 
             set((state) => {
-                state.gasless.isSending = false;
-                state.gasless.currentQuote = null;
+                state.gasless.isSending = true;
+                state.gasless.error = null;
             });
 
-            return result;
-        } catch (error) {
-            log.error('Failed to send gasless transaction:', error);
-            // Don't write to `gasless.error` here — the send error is surfaced by
-            // the caller (it rethrows). `gasless.error` stays reserved for quote /
-            // config failures shown inline, so the message isn't duplicated.
+            try {
+                const network = wallet.getNetwork();
+
+                // Sign the relayer-wrapped messages locally → internal-message BoC the
+                // relayer broadcasts (paying the gas). No approval modal: the wallet
+                // holds the key and signs directly.
+                const internalBoc = await wallet.getSignedSignMessage({
+                    messages: currentQuote.messages,
+                    validUntil: currentQuote.validUntil,
+                    network,
+                    fromAddress: wallet.getAddress(),
+                });
+
+                const result = await kit.gasless.sendTransaction({
+                    network,
+                    walletPublicKey: wallet.getPublicKey(),
+                    internalBoc,
+                });
+
+                set((state) => {
+                    state.gasless.isSending = false;
+                    state.gasless.currentQuote = null;
+                });
+
+                return result;
+            } catch (error) {
+                log.error('Failed to send gasless transaction:', error);
+                // Don't write to `gasless.error` here — the send error is surfaced by
+                // the caller (it rethrows). `gasless.error` stays reserved for quote /
+                // config failures shown inline, so the message isn't duplicated.
+                set((state) => {
+                    state.gasless.isSending = false;
+                });
+                throw error;
+            }
+        },
+
+        clearGasless: () => {
+            cancelInFlightQuote();
             set((state) => {
+                state.gasless.enabled = false;
+                state.gasless.currentQuote = null;
+                state.gasless.isLoadingQuote = false;
                 state.gasless.isSending = false;
+                state.gasless.error = null;
             });
-            throw error;
-        }
-    },
-
-    clearGasless: () => {
-        set((state) => {
-            state.gasless.enabled = false;
-            state.gasless.currentQuote = null;
-            state.gasless.isLoadingQuote = false;
-            state.gasless.isSending = false;
-            state.gasless.error = null;
-        });
-    },
-});
+        },
+    };
+};
diff --git a/demo/wallet-core/src/store/slices/ratesSlice.ts b/demo/wallet-core/src/store/slices/ratesSlice.ts
new file mode 100644
index 000000000..488503f7c
--- /dev/null
+++ b/demo/wallet-core/src/store/slices/ratesSlice.ts
@@ -0,0 +1,149 @@
+/**
+ * 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 { Address } from '@ton/core';
+
+import { createComponentLogger } from '../../utils/logger';
+import type { SetState, RateEntry, RatesSliceCreator } from '../../types/store';
+
+const log = createComponentLogger('RatesSlice');
+
+// DYOR public markets API. `order=desc` returns the most liquid jettons first
+// (asc returns zero-liquidity tokens with no price). TON itself is included
+// under the all-zero master address. This endpoint does not expose a 24h change.
+const RATES_ENDPOINT = 'https://api.dyor.io/v1/jettons?sort=liquidityUsd&order=desc&currency=ton&limit=100';
+const RAW_GRAM_ADDRESS = '0:0000000000000000000000000000000000000000000000000000000000000000';
+
+// Skip a refresh if rates were updated within this window (clearRates resets the timer).
+const RATES_TTL_MS = 60_000;
+
+// DYOR occasionally rate-limits (HTTP 429). Retry once after a short delay.
+const RETRY_DELAY_MS = 2000;
+
+const sleep = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));
+
+/** Fetch rates, retrying once after a 2s delay if DYOR responds with 429. */
+const fetchRates = async (): Promise<Response> => {
+    const response = await fetch(RATES_ENDPOINT, { headers: { accept: 'application/json' } });
+
+    if (response.status === 429) {
+        log.warn('Rates rate-limited (429), retrying in 2s');
+        await sleep(RETRY_DELAY_MS);
+        return fetch(RATES_ENDPOINT, { headers: { accept: 'application/json' } });
+    }
+
+    return response;
+};
+
+interface DyorMoney {
+    value: string;
+    decimals: number;
+}
+
+interface DyorJetton {
+    metadata: { address: string };
+    priceUsd?: DyorMoney;
+}
+
+interface DyorResponse {
+    jettons: DyorJetton[];
+}
+
+const moneyToNumber = (money?: DyorMoney): number => {
+    if (!money) return 0;
+    const value = Number(money.value);
+    if (!Number.isFinite(value)) return 0;
+    return value / 10 ** money.decimals;
+};
+
+// Start empty — rates (including TON) come from the API; no hardcoded fallback.
+const initialEntries = (): Record<string, RateEntry> => ({});
+
+export const createRatesSlice: RatesSliceCreator = (set: SetState, get) => ({
+    rates: {
+        entries: initialEntries(),
+        isLoading: false,
+        error: null,
+        lastUpdated: 0,
+    },
+
+    loadRates: async () => {
+        const { isLoading, lastUpdated, error } = get().rates;
+        // Avoid overlapping fetches. Throttle only successful loads within the TTL window;
+        // after a failure (error set) keep retrying so a failed cold start recovers quickly.
+        if (isLoading) return;
+        if (!error && lastUpdated > 0 && Date.now() - lastUpdated < RATES_TTL_MS) return;
+
+        set((state) => {
+            state.rates.isLoading = true;
+            state.rates.error = null;
+        });
+
+        try {
+            const response = await fetchRates();
+            if (!response.ok) {
+                throw new Error(`Rates request failed: ${response.status}`);
+            }
+
+            const data: DyorResponse = await response.json();
+            const entries: Record<string, RateEntry> = initialEntries();
+
+            for (const jetton of data.jettons ?? []) {
+                const rate = moneyToNumber(jetton.priceUsd);
+                if (rate <= 0) continue;
+
+                const rawAddress = jetton.metadata.address;
+                if (rawAddress === RAW_GRAM_ADDRESS) {
+                    entries.GRAM = { rate, currency: 'USD' };
+                    continue;
+                }
+
+                // Derive the friendly (bounceable) address ourselves so we keep every
+                // jetton's rate, not only those present in the response's address book.
+                let key: string;
+                try {
+                    key = Address.parse(rawAddress).toString();
+                } catch {
+                    continue;
+                }
+                entries[key] = { rate, currency: 'USD' };
+            }
+
+            set((state) => {
+                state.rates.entries = entries;
+                state.rates.lastUpdated = Date.now();
+                state.rates.isLoading = false;
+                state.rates.error = null;
+            });
+
+            log.info('Rates loaded', { count: Object.keys(entries).length });
+        } catch (error) {
+            log.error('Failed to load rates:', error);
+            const message = error instanceof Error ? error.message : 'Failed to load rates';
+            set((state) => {
+                state.rates.isLoading = false;
+                state.rates.error = message;
+                // Do not touch lastUpdated on failure: skeletons stay until the first real rate
+                // loads, and the !error throttle bypass keeps retrying on the next tick.
+            });
+        }
+    },
+
+    clearRates: () => {
+        set((state) => {
+            state.rates.entries = initialEntries();
+            state.rates.isLoading = false;
+            state.rates.error = null;
+            state.rates.lastUpdated = 0;
+        });
+    },
+
+    getRate: (key: string): RateEntry | undefined => {
+        return get().rates.entries[key];
+    },
+});
diff --git a/demo/wallet-core/src/store/slices/stakingSlice.ts b/demo/wallet-core/src/store/slices/stakingSlice.ts
index de82a5028..5afcb9288 100644
--- a/demo/wallet-core/src/store/slices/stakingSlice.ts
+++ b/demo/wallet-core/src/store/slices/stakingSlice.ts
@@ -135,7 +135,7 @@ export const createStakingSlice: StakingSliceCreator = (set: SetState, get) => (
             set((state) => {
                 state.staking.error = 'Wallet not ready';
             });
-            return;
+            return false;
         }
 
         set((state) => {
@@ -159,6 +159,7 @@ export const createStakingSlice: StakingSliceCreator = (set: SetState, get) => (
                 state.staking.amount = '';
                 state.staking.currentQuote = null;
             });
+            return true;
         } catch (error) {
             log.error('Failed to stake:', error);
             const errorMessage = error instanceof Error ? error.message : 'Failed to stake';
@@ -166,6 +167,7 @@ export const createStakingSlice: StakingSliceCreator = (set: SetState, get) => (
                 state.staking.isStaking = false;
                 state.staking.error = errorMessage;
             });
+            return false;
         }
     },
 
@@ -178,7 +180,7 @@ export const createStakingSlice: StakingSliceCreator = (set: SetState, get) => (
             set((state) => {
                 state.staking.error = 'Wallet not ready';
             });
-            return;
+            return false;
         }
 
         set((state) => {
@@ -202,6 +204,7 @@ export const createStakingSlice: StakingSliceCreator = (set: SetState, get) => (
                 state.staking.amount = '';
                 state.staking.currentQuote = null;
             });
+            return true;
         } catch (error) {
             log.error('Failed to unstake:', error);
             const errorMessage = error instanceof Error ? error.message : 'Failed to unstake';
@@ -209,6 +212,7 @@ export const createStakingSlice: StakingSliceCreator = (set: SetState, get) => (
                 state.staking.isUnstaking = false;
                 state.staking.error = errorMessage;
             });
+            return false;
         }
     },
 
diff --git a/demo/wallet-core/src/store/slices/swapSlice.ts b/demo/wallet-core/src/store/slices/swapSlice.ts
index 64c7f86a5..2067a80a3 100644
--- a/demo/wallet-core/src/store/slices/swapSlice.ts
+++ b/demo/wallet-core/src/store/slices/swapSlice.ts
@@ -15,9 +15,12 @@ import type { SetState, SwapSliceCreator } from '../../types/store';
 
 const log = createComponentLogger('SwapSlice');
 
+/** GRAM kept aside on a native-coin swap so the transaction still has gas to pay for itself (matches the Max button). */
+const NATIVE_GAS_RESERVE = '0.1';
+
 export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
     swap: {
-        fromToken: { address: 'ton', decimals: 9, symbol: 'TON' },
+        fromToken: { address: 'ton', decimals: 9, symbol: 'GRAM' },
         toToken: { address: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs', decimals: 6, symbol: 'USDT' },
         amount: '',
         destinationAddress: '',
@@ -27,6 +30,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
         error: null,
         slippageBps: 100,
         isReverseSwap: false,
+        providerId: 'omniston',
     },
 
     setFromToken: (token: SwapToken) => {
@@ -74,6 +78,16 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
         });
     },
 
+    setSwapProviderId: (providerId: string) => {
+        set((state) => {
+            state.swap.providerId = providerId;
+            // The existing quote came from the previous provider — drop it so the
+            // next quote is fetched from the newly selected one.
+            state.swap.currentQuote = null;
+            state.swap.error = null;
+        });
+    },
+
     swapTokens: () => {
         set((state) => {
             const tempToken = state.swap.fromToken;
@@ -136,6 +150,9 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
             if (amountBigInt > tonBalance) {
                 return 'Insufficient balance';
             }
+            if (amountBigInt > tonBalance - parseUnits(NATIVE_GAS_RESERVE, fromToken.decimals)) {
+                return `Keep ~${NATIVE_GAS_RESERVE} GRAM for network fees`;
+            }
         } else {
             // Check jetton balance
             const jetton = state.jettons.userJettons.find((j) => j.address === fromToken.address);
@@ -157,7 +174,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
 
     getSwapQuote: async () => {
         const state = get();
-        const { fromToken, toToken, amount, isReverseSwap, slippageBps } = state.swap;
+        const { fromToken, toToken, amount, isReverseSwap, slippageBps, providerId } = state.swap;
 
         // Validate inputs
         const validationError = get().validateSwapInputs();
@@ -227,7 +244,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
                 };
             }
 
-            const quote = await state.walletCore.walletKit.swap.getQuote(quoteParams, 'omniston');
+            const quote = await state.walletCore.walletKit.swap.getQuote(quoteParams, providerId);
 
             // Update the opposite amount based on which one was specified
             set((state) => {
@@ -262,7 +279,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
             set((state) => {
                 state.swap.error = validationError;
             });
-            return;
+            return false;
         }
 
         if (!currentQuote) {
@@ -270,7 +287,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
             set((state) => {
                 state.swap.error = 'No quote available. Please get a quote first.';
             });
-            return;
+            return false;
         }
 
         if (!state.walletCore.walletKit) {
@@ -278,7 +295,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
             set((state) => {
                 state.swap.error = 'WalletKit not initialized';
             });
-            return;
+            return false;
         }
 
         if (!state.walletManagement.currentWallet) {
@@ -286,7 +303,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
             set((state) => {
                 state.swap.error = 'No active wallet';
             });
-            return;
+            return false;
         }
 
         if (!state.walletManagement.address) {
@@ -294,7 +311,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
             set((state) => {
                 state.swap.error = 'No wallet address';
             });
-            return;
+            return false;
         }
 
         set((state) => {
@@ -326,6 +343,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
             });
 
             log.info('Swap executed successfully');
+            return true;
         } catch (error) {
             log.error('Failed to execute swap:', error);
 
@@ -335,12 +353,13 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
                 state.swap.isSwapping = false;
                 state.swap.error = errorMessage;
             });
+            return false;
         }
     },
 
     clearSwap: () => {
         set((state) => {
-            state.swap.fromToken = { address: 'ton', decimals: 9, symbol: 'TON' };
+            state.swap.fromToken = { address: 'ton', decimals: 9, symbol: 'GRAM' };
             state.swap.toToken = {
                 address: 'EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs',
                 decimals: 6,
@@ -353,6 +372,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
             state.swap.error = null;
             state.swap.slippageBps = 100;
             state.swap.isReverseSwap = false;
+            state.swap.providerId = 'omniston';
         });
     },
 });
diff --git a/demo/wallet-core/src/store/slices/tonConnectSlice.ts b/demo/wallet-core/src/store/slices/tonConnectSlice.ts
index 1cd7a1f75..d921a9852 100644
--- a/demo/wallet-core/src/store/slices/tonConnectSlice.ts
+++ b/demo/wallet-core/src/store/slices/tonConnectSlice.ts
@@ -187,14 +187,13 @@ export const createTonConnectSlice: TonConnectSliceCreator = (set: SetState, get
             const result = await state.walletCore.walletKit.approveTransactionRequest(
                 state.tonConnect.pendingTransactionRequestEvent,
             );
-            setTimeout(() => {
-                set((state) => {
-                    state.tonConnect.pendingTransactionRequestEvent = undefined;
-                    state.tonConnect.isTransactionModalOpen = false;
-                });
 
-                state.clearCurrentRequestFromQueue();
-            }, 3000);
+            set((state) => {
+                state.tonConnect.pendingTransactionRequestEvent = undefined;
+                state.tonConnect.isTransactionModalOpen = false;
+            });
+
+            state.clearCurrentRequestFromQueue();
             return result;
         } catch (error) {
             log.error('Failed to approve transaction request:', error);
@@ -267,14 +266,12 @@ export const createTonConnectSlice: TonConnectSliceCreator = (set: SetState, get
         try {
             await state.walletCore.walletKit.approveSignDataRequest(state.tonConnect.pendingSignDataRequestEvent);
 
-            setTimeout(() => {
-                set((state) => {
-                    state.tonConnect.pendingSignDataRequestEvent = undefined;
-                    state.tonConnect.isSignDataModalOpen = false;
-                });
+            set((state) => {
+                state.tonConnect.pendingSignDataRequestEvent = undefined;
+                state.tonConnect.isSignDataModalOpen = false;
+            });
 
-                state.clearCurrentRequestFromQueue();
-            }, 3000);
+            state.clearCurrentRequestFromQueue();
         } catch (error) {
             log.error('Failed to approve sign data request:', error);
             state.clearCurrentRequestFromQueue();
@@ -343,13 +340,13 @@ export const createTonConnectSlice: TonConnectSliceCreator = (set: SetState, get
         }
         try {
             await state.walletCore.walletKit.approveSignMessageRequest(state.tonConnect.pendingSignMessageRequestEvent);
-            setTimeout(() => {
-                set((state) => {
-                    state.tonConnect.pendingSignMessageRequestEvent = undefined;
-                    state.tonConnect.isSignMessageModalOpen = false;
-                });
-                state.clearCurrentRequestFromQueue();
-            }, 3000);
+
+            set((state) => {
+                state.tonConnect.pendingSignMessageRequestEvent = undefined;
+                state.tonConnect.isSignMessageModalOpen = false;
+            });
+
+            state.clearCurrentRequestFromQueue();
         } catch (error) {
             log.error('Failed to approve sign message request:', error);
             state.clearCurrentRequestFromQueue();
diff --git a/demo/wallet-core/src/store/slices/walletCoreSlice.ts b/demo/wallet-core/src/store/slices/walletCoreSlice.ts
index 987ffb629..0a766f562 100644
--- a/demo/wallet-core/src/store/slices/walletCoreSlice.ts
+++ b/demo/wallet-core/src/store/slices/walletCoreSlice.ts
@@ -19,6 +19,7 @@ import {
 } from '@ton/walletkit';
 import type { ITonWalletKit } from '@ton/walletkit';
 import { createOmnistonProvider } from '@ton/walletkit/swap/omniston';
+import { createDeDustProvider } from '@ton/walletkit/swap/dedust';
 import { createTonstakersProvider } from '@ton/walletkit/staking/tonstakers';
 import { createTonApiGaslessProvider } from '@ton/walletkit/gasless/tonapi';
 
@@ -109,6 +110,7 @@ function createWalletKitInstance(walletKitConfig?: WalletKitConfig): ITonWalletK
     }) as ITonWalletKit;
 
     walletKit.swap.registerProvider(createOmnistonProvider());
+    walletKit.swap.registerProvider(createDeDustProvider());
 
     const streamingProvider =
         walletKitConfig?.tonApiProvider === 'tonapi' ? createTonApiStreamingProvider : createTonCenterStreamingProvider;
diff --git a/demo/wallet-core/src/store/slices/walletManagementSlice.ts b/demo/wallet-core/src/store/slices/walletManagementSlice.ts
index f0b88f982..2270fc6ac 100644
--- a/demo/wallet-core/src/store/slices/walletManagementSlice.ts
+++ b/demo/wallet-core/src/store/slices/walletManagementSlice.ts
@@ -148,7 +148,9 @@ export const createWalletManagementSlice =
                     state.walletManagement.activeWalletId = walletId;
                     state.walletManagement.address = address;
                     state.walletManagement.publicKey = publicKey;
-                    state.walletManagement.balance = '0';
+                    // Leave balance undefined (shows skeleton) until the real balance loads,
+                    // so the received-toast hook seeds the actual balance instead of diffing from 0.
+                    state.walletManagement.balance = undefined;
                     state.walletManagement.currentWallet = wallet;
                 });
 
@@ -366,28 +368,30 @@ export const createWalletManagementSlice =
 
             const isRemovingActiveWallet = state.walletManagement.activeWalletId === walletId;
             const isLastWallet = state.walletManagement.savedWallets.length === 1;
+            // Pick the next wallet to switch to BEFORE removing. Don't touch activeWalletId here —
+            // switchWallet must see it still pointing at the removed wallet, otherwise it treats the
+            // target as "already active" and early-returns without loading address/currentWallet.
+            const nextActiveId =
+                isRemovingActiveWallet && !isLastWallet
+                    ? state.walletManagement.savedWallets.find((w) => w.id !== walletId)?.id
+                    : undefined;
 
             set((state) => {
                 state.walletManagement.savedWallets.splice(walletIndex, 1);
 
-                if (isRemovingActiveWallet) {
-                    if (state.walletManagement.savedWallets.length > 0) {
-                        const newActiveId = state.walletManagement.savedWallets[0].id;
-                        state.walletManagement.activeWalletId = newActiveId;
-                    } else {
-                        state.walletManagement.hasWallet = false;
-                        state.walletManagement.isAuthenticated = false;
-                        state.walletManagement.activeWalletId = undefined;
-                        state.walletManagement.address = undefined;
-                        state.walletManagement.publicKey = undefined;
-                        state.walletManagement.balance = undefined;
-                        state.walletManagement.currentWallet = undefined;
-                        state.walletManagement.events = [];
-                        state.walletManagement.pendingTransactions = [];
-                        state.walletManagement.confirmedTraceIds = [];
-                        state.walletManagement.confirmedExternalHashes = [];
-                        state.walletManagement.isStreamingConnected = false;
-                    }
+                if (isRemovingActiveWallet && isLastWallet) {
+                    state.walletManagement.hasWallet = false;
+                    state.walletManagement.isAuthenticated = false;
+                    state.walletManagement.activeWalletId = undefined;
+                    state.walletManagement.address = undefined;
+                    state.walletManagement.publicKey = undefined;
+                    state.walletManagement.balance = undefined;
+                    state.walletManagement.currentWallet = undefined;
+                    state.walletManagement.events = [];
+                    state.walletManagement.pendingTransactions = [];
+                    state.walletManagement.confirmedTraceIds = [];
+                    state.walletManagement.confirmedExternalHashes = [];
+                    state.walletManagement.isStreamingConnected = false;
                 }
             });
 
@@ -397,9 +401,10 @@ export const createWalletManagementSlice =
 
             log.info(`Removed wallet ${walletId}`);
 
-            const newState = get();
-            if (newState.walletManagement.activeWalletId && newState.walletManagement.activeWalletId !== walletId) {
-                get().switchWallet(newState.walletManagement.activeWalletId);
+            if (nextActiveId) {
+                void get()
+                    .switchWallet(nextActiveId)
+                    .catch((err) => log.error('Error switching wallet after removal:', err));
             }
         },
 
diff --git a/demo/wallet-core/src/types/store.ts b/demo/wallet-core/src/types/store.ts
index 589e85303..33ad4e8d3 100644
--- a/demo/wallet-core/src/types/store.ts
+++ b/demo/wallet-core/src/types/store.ts
@@ -246,6 +246,26 @@ export interface NftsSlice {
     formatNftIndex: (index: string) => string;
 }
 
+// Rates slice interface
+export interface RateEntry {
+    rate: number;
+    change24h?: number;
+    currency: 'USD';
+}
+
+export interface RatesSlice {
+    rates: {
+        entries: Record<string, RateEntry>;
+        isLoading: boolean;
+        error: string | null;
+        lastUpdated: number;
+    };
+
+    loadRates: () => Promise<void>;
+    clearRates: () => void;
+    getRate: (key: string) => RateEntry | undefined;
+}
+
 // Swap slice interface
 export interface SwapState {
     fromToken: SwapToken;
@@ -258,6 +278,8 @@ export interface SwapState {
     error: string | null;
     slippageBps: number;
     isReverseSwap: boolean;
+    /** Selected swap provider id (e.g. 'omniston', 'dedust'); quotes are fetched from it. */
+    providerId: string;
 }
 
 // Staking slice interface
@@ -281,8 +303,8 @@ export interface StakingSlice {
     setStakingProviderId: (providerId: string) => void;
     setUnstakeMode: (mode: UnstakeModes) => void;
     getStakingQuote: (params: Omit<StakingQuoteParams, 'network'>) => Promise<void>;
-    stake: (params: Omit<StakeParams, 'userAddress'>) => Promise<void>;
-    unstake: (params: Omit<StakeParams, 'userAddress'>) => Promise<void>;
+    stake: (params: Omit<StakeParams, 'userAddress'>) => Promise<boolean>;
+    unstake: (params: Omit<StakeParams, 'userAddress'>) => Promise<boolean>;
     loadStakingData: (userAddress: string) => Promise<void>;
     clearStaking: () => void;
     validateStakingInputs: () => string | null;
@@ -329,9 +351,10 @@ export interface SwapSlice {
     setDestinationAddress: (address: string) => void;
     setIsReverseSwap: (isReverseSwap: boolean) => void;
     setSlippageBps: (slippage: number) => void;
+    setSwapProviderId: (providerId: string) => void;
     swapTokens: () => void;
     getSwapQuote: () => Promise<void>;
-    executeSwap: () => Promise<void>;
+    executeSwap: () => Promise<boolean>;
     clearSwap: () => void;
     validateSwapInputs: () => string | null;
 }
@@ -345,6 +368,7 @@ export interface AppState
         TonConnectSlice,
         JettonsSlice,
         NftsSlice,
+        RatesSlice,
         SwapSlice,
         StakingSlice,
         GaslessSlice {
@@ -369,6 +393,8 @@ export type JettonsSliceCreator = StateCreator<AppState, [], [], JettonsSlice>;
 
 export type NftsSliceCreator = StateCreator<AppState, [], [], NftsSlice>;
 
+export type RatesSliceCreator = StateCreator<AppState, [], [], RatesSlice>;
+
 export type SwapSliceCreator = StateCreator<AppState, [['zustand/immer', never]], [], SwapSlice>;
 
 export type StakingSliceCreator = StateCreator<AppState, [['zustand/immer', never]], [], StakingSlice>;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c00103fa..ff108f9b3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -222,18 +222,33 @@ importers:
       '@demo/wallet-core':
         specifier: workspace:*
         version: link:../../demo/wallet-core
+      '@fontsource-variable/inter':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@ledgerhq/hw-transport-webhid':
         specifier: 6.34.0
         version: 6.34.0
       '@ledgerhq/hw-transport-webusb':
         specifier: 6.33.0
         version: 6.33.0
+      '@radix-ui/react-dialog':
+        specifier: 1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-popover':
+        specifier: 1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-select':
+        specifier: 2.2.6
+        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@scure/bip39':
         specifier: ^2.2.0
         version: 2.2.0
       '@tailwindcss/vite':
         specifier: ^4.3.0
         version: 4.3.0(vite@8.0.14(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.3)(yaml@2.9.0))
+      '@telegram-apps/sdk':
+        specifier: ^3.11.8
+        version: 3.11.8(typescript@5.9.3)
       '@ton/core':
         specifier: 'catalog:'
         version: 0.63.1(@ton/crypto@3.3.0)
@@ -273,6 +288,9 @@ importers:
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      qr-code-styling:
+        specifier: ^1.9.2
+        version: 1.9.2
       react:
         specifier: 'catalog:'
         version: 19.2.3
@@ -297,6 +315,9 @@ importers:
       tw-animate-css:
         specifier: ^1.4.0
         version: 1.4.0
+      vaul:
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       zustand:
         specifier: ^5.0.13
         version: 5.0.13(@types/react@19.2.3)(immer@10.2.0)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
@@ -1532,6 +1553,9 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
   '@hono/node-server@1.19.14':
     resolution: {integrity: sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw==}
     engines: {node: '>=18.14.1'}
@@ -3390,6 +3414,30 @@ packages:
     peerDependencies:
       react: ^18 || ^19
 
+  '@telegram-apps/bridge@2.11.0':
+    resolution: {integrity: sha512-kBZjWRRp/lxKeQ8r8cDWUY9EjxUtyeh/9xTQjsjuGRsCR5XTO1cyVbvcvqzHn53csGx3aBs+fOR3Pk3b6w2JHg==}
+    deprecated: This package is not supported anymore. Use @tma.js/bridge instead
+
+  '@telegram-apps/navigation@1.0.14':
+    resolution: {integrity: sha512-bqNgF/J8Po7ZtsELm3E1a6aPr7awwxO3sIqD8J6u12urOlGoW5+1KxKKbkPa58mgXuQdsltd8apI+OVy0IYiUA==}
+
+  '@telegram-apps/sdk@3.11.8':
+    resolution: {integrity: sha512-vlpkYzMJCV9Cadsn9Q+/hbHNR39j5o96N9z4CjZ6AFHkkxOeOqVRrq9zRBw0gmffROkF2bU0WQxhRj8KZ/bPhw==}
+
+  '@telegram-apps/signals@1.1.2':
+    resolution: {integrity: sha512-1P1kdCLX7MfETGPxH7f3UZKIsdE7Tz5S7QmN4Km1sbYQMakD5Bi1NecSMR7/wnHp50gWMI1JzENcMtCEmouhSg==}
+
+  '@telegram-apps/toolkit@2.1.3':
+    resolution: {integrity: sha512-LPUBL7hxQTOr+Dowyk9a1O82nQS4ja4+OYiYWtvqq5nNUHC6Gbbus0zGWCbFcj9CLnIzaeb5HWOg5iSnhoRcyg==}
+
+  '@telegram-apps/transformers@2.2.6':
+    resolution: {integrity: sha512-MMBRs3demeBT9Cd614KKZmak7eEyNdEbfu99a0SwEEJe2oIODjJLrUxrhUcAOc5wvTRfrKka27VXVgruauLhdg==}
+    deprecated: This package is not supported anymore. Use @tma.js/transfomers instead
+
+  '@telegram-apps/types@2.0.3':
+    resolution: {integrity: sha512-pXh9BdnLZF3e2BGc4WL+RTRMAUpqKpaSP3Rs8rB4WyRwIoRSGWFKE4gtT/9m42LGixB8YVwdo/pJ+9XO765XEA==}
+    deprecated: This package is not supported anymore. Use @tma.js/types instead
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -4157,6 +4205,9 @@ packages:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
 
+  better-promises@0.4.1:
+    resolution: {integrity: sha512-cDW7eMvhvCoWzSih5o/OxsAgTUfP05yGMq77xNZUTmcZoNU9vEeFZJ+yJJi4lnocvxFrVFKsG0Yxt7ZnuYJEig==}
+
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
@@ -4693,6 +4744,9 @@ packages:
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
+  error-kid@0.0.7:
+    resolution: {integrity: sha512-8mFs7ZaDWlBFgjOy4lHLMCe2+KZfZXGx5GOgh2VQ/M1CCIvSWzbl2OMl+5fdZgrgoUfhTeF+NPhmqfEvUhN8yw==}
+
   es-abstract@1.24.2:
     resolution: {integrity: sha512-2FpH9Q5i2RRwyEP1AylXe6nYLR5OhaJTZwmlcP0dL/+JCbgg7yyEo/sEK6HeGZRf3dFpWwThaRHVApXSkW3xeg==}
     engines: {node: '>= 0.4'}
@@ -6064,6 +6118,9 @@ packages:
     resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
 
@@ -6561,6 +6618,13 @@ packages:
   pure-rand@7.0.1:
     resolution: {integrity: sha512-oTUZM/NAZS8p7ANR3SHh30kXB+zK2r2BPcEn/awJIbOvq82WoMN4p62AWWp3Hhw50G0xMsw1mhIBLqHw64EcNQ==}
 
+  qr-code-styling@1.9.2:
+    resolution: {integrity: sha512-RgJaZJ1/RrXJ6N0j7a+pdw3zMBmzZU4VN2dtAZf8ZggCfRB5stEQ3IoDNGaNhYY3nnZKYlYSLl5YkfWN5dPutg==}
+    engines: {node: '>=18.18.0'}
+
+  qrcode-generator@1.5.2:
+    resolution: {integrity: sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw==}
+
   qs@6.15.1:
     resolution: {integrity: sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==}
     engines: {node: '>=0.6'}
@@ -7555,10 +7619,32 @@ packages:
     resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
     engines: {node: '>=10.12.0'}
 
+  valibot@1.0.0:
+    resolution: {integrity: sha512-1Hc0ihzWxBar6NGeZv7fPLY0QuxFMyxwYR2sF1Blu7Wq7EnremwY2W02tit2ij2VJT8HcSkHAQqmFfl77f73Yw==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  valibot@1.0.0-beta.14:
+    resolution: {integrity: sha512-tLyV2rE5QL6U29MFy3xt4AqMrn+/HErcp2ZThASnQvPMwfSozjV1uBGKIGiegtZIGjinJqn0SlBdannf18wENA==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
   vite-bundle-analyzer@1.3.8:
     resolution: {integrity: sha512-IIk7WPhoYs7pyo75jwI+dFt7yykgjK7NY+dqnJtiZnyqP2k6NgPb3TY80FLFjtgnfk/o+OjI18+anKyeviCbRA==}
     hasBin: true
@@ -8679,6 +8765,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
+  '@fontsource-variable/inter@5.2.8': {}
+
   '@hono/node-server@1.19.14(hono@4.12.22)':
     dependencies:
       hono: 4.12.22
@@ -10558,6 +10646,49 @@ snapshots:
       '@tanstack/query-core': 5.100.14
       react: 19.2.3
 
+  '@telegram-apps/bridge@2.11.0(typescript@5.9.3)':
+    dependencies:
+      '@telegram-apps/signals': 1.1.2
+      '@telegram-apps/toolkit': 2.1.3
+      '@telegram-apps/transformers': 2.2.6(typescript@5.9.3)
+      '@telegram-apps/types': 2.0.3
+      better-promises: 0.4.1
+      error-kid: 0.0.7
+      mitt: 3.0.1
+      valibot: 1.0.0(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@telegram-apps/navigation@1.0.14': {}
+
+  '@telegram-apps/sdk@3.11.8(typescript@5.9.3)':
+    dependencies:
+      '@telegram-apps/bridge': 2.11.0(typescript@5.9.3)
+      '@telegram-apps/navigation': 1.0.14
+      '@telegram-apps/signals': 1.1.2
+      '@telegram-apps/toolkit': 2.1.3
+      '@telegram-apps/transformers': 2.2.6(typescript@5.9.3)
+      '@telegram-apps/types': 2.0.3
+      better-promises: 0.4.1
+      error-kid: 0.0.7
+      valibot: 1.0.0(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@telegram-apps/signals@1.1.2': {}
+
+  '@telegram-apps/toolkit@2.1.3': {}
+
+  '@telegram-apps/transformers@2.2.6(typescript@5.9.3)':
+    dependencies:
+      '@telegram-apps/toolkit': 2.1.3
+      '@telegram-apps/types': 2.0.3
+      valibot: 1.0.0-beta.14(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@telegram-apps/types@2.0.3': {}
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -11446,6 +11577,10 @@ snapshots:
     dependencies:
       is-windows: 1.0.2
 
+  better-promises@0.4.1:
+    dependencies:
+      error-kid: 0.0.7
+
   bindings@1.5.0:
     dependencies:
       file-uri-to-path: 1.0.0
@@ -11950,6 +12085,8 @@ snapshots:
     dependencies:
       is-arrayish: 0.2.1
 
+  error-kid@0.0.7: {}
+
   es-abstract@1.24.2:
     dependencies:
       array-buffer-byte-length: 1.0.2
@@ -13575,6 +13712,8 @@ snapshots:
 
   minipass@7.1.3: {}
 
+  mitt@3.0.1: {}
+
   mkdirp-classic@0.5.3: {}
 
   mkdirp@1.0.4: {}
@@ -14104,6 +14243,12 @@ snapshots:
 
   pure-rand@7.0.1: {}
 
+  qr-code-styling@1.9.2:
+    dependencies:
+      qrcode-generator: 1.5.2
+
+  qrcode-generator@1.5.2: {}
+
   qs@6.15.1:
     dependencies:
       side-channel: 1.1.0
@@ -15291,8 +15436,25 @@ snapshots:
       '@types/istanbul-lib-coverage': 2.0.6
       convert-source-map: 2.0.0
 
+  valibot@1.0.0(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
+  valibot@1.0.0-beta.14(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
   vary@1.1.2: {}
 
+  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   vite-bundle-analyzer@1.3.8: {}
 
   vite@7.3.3(@types/node@25.9.1)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.3)(yaml@2.9.0):