From 6925acedd4d5b2a4d905e22e17dc0342db83f130 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 07:30:16 +0400
Subject: [PATCH 01/49] feat(demo-wallet): wallet UI redesign (TON-1682)

Redesign of the demo wallet on top of current main:
- New dashboard: balance total, assets list, header, and Swap / Send /
  Receive action row.
- Reworked auth flow (password setup/unlock), wallet management and
  wallet-selector, receive flow, and connect-to-dApp modal.
- New shared UI primitives (button, dialog, drawer, modal, select,
  popover, segmented, icons) and fallback-image handling.
- Fiat balance via rates, jetton/NFT image arrays, and the toncenter
  jetton-master / address-book mappers.
---
 apps/demo-wallet/package.json                 |   7 +
 apps/demo-wallet/src/App.css                  |  21 +
 apps/demo-wallet/src/App.tsx                  |   2 +-
 .../src/components/ActionPreviewList.tsx      |  10 +-
 apps/demo-wallet/src/components/AppRouter.tsx |  37 +-
 .../src/components/BalanceTotal.tsx           |  87 ++++
 apps/demo-wallet/src/components/Button.tsx    |   2 +-
 .../src/components/ConnectDappModal.tsx       |  73 +++
 .../src/components/DashboardActionButton.tsx  |  33 ++
 .../src/components/DashboardActions.tsx       |  44 ++
 .../src/components/DashboardAssetRow.tsx      |  94 ++++
 .../src/components/DashboardAssets.tsx        | 195 ++++++++
 .../src/components/DashboardHeader.tsx        |  52 ++
 .../src/components/FallbackImage.tsx          |  83 ++++
 .../demo-wallet/src/components/JettonFlow.tsx |   6 +-
 apps/demo-wallet/src/components/Modal.tsx     | 106 ----
 .../src/components/NetworkSelector.tsx        |  42 +-
 apps/demo-wallet/src/components/NewLayout.tsx |  23 +
 apps/demo-wallet/src/components/NftsCard.tsx  | 360 ++------------
 .../src/components/ProtectedRoute.tsx         |   8 +-
 .../src/components/ReceiveModal.tsx           | 139 ++++++
 .../src/components/SettingsDropdown.tsx       | 462 ++++++------------
 apps/demo-wallet/src/components/ToggleRow.tsx |  60 +++
 .../components/TransactionRequestDetails.tsx  |   4 +-
 apps/demo-wallet/src/components/WalletRow.tsx | 199 ++++++++
 .../src/components/WalletSelectorModal.tsx    |  91 ++++
 apps/demo-wallet/src/components/index.ts      |  15 +-
 .../src/components/swap/SwapSettings.tsx      |   7 +-
 .../transactions/TonTransferCard.tsx          |   4 +-
 .../centered-screen/centered-screen.tsx       |  47 ++
 .../shared/centered-screen/index.ts           |   9 +
 .../shared/confirm-modal/confirm-modal.tsx    |  66 +++
 .../components/shared/confirm-modal/index.ts  |   9 +
 .../src/core/components/ui/button/button.tsx  |  87 ++++
 .../src/core/components/ui/button/index.ts    |  10 +
 .../src/core/components/ui/dialog/dialog.tsx  |  98 ++++
 .../src/core/components/ui/dialog/index.ts    |   9 +
 .../src/core/components/ui/drawer/drawer.tsx  |  95 ++++
 .../src/core/components/ui/drawer/index.ts    |   9 +
 .../src/core/components/ui/icons/icons.tsx    |  80 +++
 .../src/core/components/ui/icons/index.ts     |   9 +
 .../src/core/components/ui/modal/index.ts     |  10 +
 .../src/core/components/ui/modal/modal.tsx    | 109 +++++
 .../core/components/ui/option-row/index.ts    |  10 +
 .../components/ui/option-row/option-row.tsx   |  47 ++
 .../src/core/components/ui/popover/index.ts   |   9 +
 .../core/components/ui/popover/popover.tsx    |  39 ++
 .../src/core/components/ui/segmented/index.ts |  10 +
 .../components/ui/segmented/segmented.tsx     |  45 ++
 .../src/core/components/ui/select/index.ts    |   9 +
 .../src/core/components/ui/select/select.tsx  | 149 ++++++
 .../src/core/components/ui/sonner/index.ts    |   9 +
 .../components/ui/sonner}/sonner.tsx          |   0
 .../components/setup-password-screen/index.ts |   9 +
 .../setup-password-screen.tsx                 | 129 +++++
 .../auth/components/unlock-screen/index.ts    |   9 +
 .../unlock-screen/unlock-screen.tsx           | 119 +++++
 apps/demo-wallet/src/features/auth/index.ts   |  10 +
 .../ledger/components/ledger-screen/index.ts  |   9 +
 .../ledger-screen/ledger-screen.tsx           | 100 ++++
 apps/demo-wallet/src/features/ledger/index.ts |   9 +
 .../add-wallet-modal/add-wallet-modal.tsx     |  48 ++
 .../components/add-wallet-modal/index.ts      |  10 +
 .../create-wallet-modal.tsx                   |  49 ++
 .../components/create-wallet-modal/index.ts   |  10 +
 .../create-wallet-screen.tsx                  | 129 +++++
 .../components/create-wallet-screen/index.ts  |   9 +
 .../import-wallet-screen.tsx                  | 242 +++++++++
 .../components/import-wallet-screen/index.ts  |   9 +
 .../components/welcome-screen/index.ts        |   9 +
 .../welcome-screen/welcome-screen.tsx         |  72 +++
 .../src/features/wallet-setup/index.ts        |  14 +
 .../src/features/wallet-setup/routes.ts       |  17 +
 apps/demo-wallet/src/hooks/index.ts           |   3 +
 apps/demo-wallet/src/hooks/useCountUp.ts      |  56 +++
 apps/demo-wallet/src/hooks/useJettonInfo.ts   |   2 +-
 apps/demo-wallet/src/hooks/useMediaQuery.ts   |  31 ++
 .../src/hooks/useReceivedToasts.tsx           | 110 +++++
 .../src/hooks/useWalletDataUpdater.ts         |  37 +-
 apps/demo-wallet/src/index.css                |   6 +-
 apps/demo-wallet/src/main.extension.tsx       |   1 +
 apps/demo-wallet/src/main.tsx                 |   1 +
 .../demo-wallet/src/pages/SendTransaction.tsx |   5 +-
 apps/demo-wallet/src/pages/SetupPassword.tsx  | 114 -----
 apps/demo-wallet/src/pages/SetupWallet.tsx    | 146 ------
 apps/demo-wallet/src/pages/UnlockWallet.tsx   |  95 ----
 .../demo-wallet/src/pages/WalletDashboard.tsx | 331 +------------
 apps/demo-wallet/src/pages/index.ts           |   3 -
 apps/demo-wallet/src/utils/format.ts          |  41 ++
 apps/demo-wallet/src/utils/formatters.ts      |  17 +-
 apps/demo-wallet/src/utils/index.ts           |   3 +
 apps/demo-wallet/src/utils/jetton.ts          |   9 +-
 apps/demo-wallet/src/utils/rates.ts           |  24 +
 apps/demo-wallet/src/utils/telegram.ts        |  34 ++
 apps/demo-wallet/src/vite-env.d.ts            |   2 +
 .../appkit/actions/gasless/gasless.test.ts    |  19 +-
 .../appkit/actions/jettons/jettons.test.ts    |  50 +-
 demo/wallet-core/src/hooks/useWalletStore.ts  |  17 +
 demo/wallet-core/src/index.ts                 |   3 +
 .../src/store/createWalletStore.ts            |   4 +
 .../src/store/slices/ratesSlice.ts            | 149 ++++++
 .../src/store/slices/walletManagementSlice.ts |  49 +-
 demo/wallet-core/src/types/store.ts           |  23 +
 .../ui/fallback-image/fallback-image.tsx      |  36 ++
 .../src/components/ui/fallback-image/index.ts |  10 +
 .../fallback-image/use-resolved-image-src.ts  | Bin 0 -> 1728 bytes
 .../staking-balance-block.tsx                 |   2 +-
 .../staking-confirm-modal.tsx                 |   2 +-
 packages/appkit-react/src/index.ts            |   1 +
 .../src/actions/jettons/get-jetton-info.ts    |  38 +-
 .../appkit/src/utils/jetton/jetton-info.ts    |  10 +-
 packages/appkit/src/utils/nft/nft-info.ts     |   7 +-
 packages/mcp/src/services/McpWalletService.ts |  45 +-
 .../walletkit/src/api/interfaces/ApiClient.ts |   5 +-
 .../src/api/models/core/TokenImage.ts         |  24 +-
 .../src/clients/tonapi/ApiClientTonApi.ts     |   4 +-
 .../tonapi/mappers/map-jetton-masters.ts      |  64 +--
 .../clients/tonapi/mappers/map-nft-items.ts   |  26 +-
 .../tonapi/mappers/map-user-jettons.ts        |   2 +-
 .../clients/toncenter/ApiClientToncenter.ts   |  13 +-
 .../toncenter/mappers/map-address-book.ts     |  29 ++
 .../toncenter/mappers/map-emulation.ts        |  13 +-
 .../toncenter/mappers/map-jetton-masters.ts   |  47 ++
 .../src/clients/toncenter/types/metadata.ts   |   1 +
 .../src/clients/toncenter/types/nfts.ts       |  14 +-
 .../toncenter/types/v3/NFTCollectionV3.ts     |  11 +-
 .../src/contracts/w5/WalletV5R1.fixture.ts    |   6 +-
 packages/walletkit/src/core/JettonsManager.ts |  40 +-
 packages/walletkit/src/types/index.ts         |   1 +
 packages/walletkit/src/types/jettons.ts       |  13 +-
 pnpm-lock.yaml                                | 162 ++++++
 131 files changed, 4484 insertions(+), 1779 deletions(-)
 create mode 100644 apps/demo-wallet/src/components/BalanceTotal.tsx
 create mode 100644 apps/demo-wallet/src/components/ConnectDappModal.tsx
 create mode 100644 apps/demo-wallet/src/components/DashboardActionButton.tsx
 create mode 100644 apps/demo-wallet/src/components/DashboardActions.tsx
 create mode 100644 apps/demo-wallet/src/components/DashboardAssetRow.tsx
 create mode 100644 apps/demo-wallet/src/components/DashboardAssets.tsx
 create mode 100644 apps/demo-wallet/src/components/DashboardHeader.tsx
 create mode 100644 apps/demo-wallet/src/components/FallbackImage.tsx
 delete mode 100644 apps/demo-wallet/src/components/Modal.tsx
 create mode 100644 apps/demo-wallet/src/components/NewLayout.tsx
 create mode 100644 apps/demo-wallet/src/components/ReceiveModal.tsx
 create mode 100644 apps/demo-wallet/src/components/ToggleRow.tsx
 create mode 100644 apps/demo-wallet/src/components/WalletRow.tsx
 create mode 100644 apps/demo-wallet/src/components/WalletSelectorModal.tsx
 create mode 100644 apps/demo-wallet/src/core/components/shared/centered-screen/centered-screen.tsx
 create mode 100644 apps/demo-wallet/src/core/components/shared/centered-screen/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/shared/confirm-modal/confirm-modal.tsx
 create mode 100644 apps/demo-wallet/src/core/components/shared/confirm-modal/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/button/button.tsx
 create mode 100644 apps/demo-wallet/src/core/components/ui/button/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/dialog/dialog.tsx
 create mode 100644 apps/demo-wallet/src/core/components/ui/dialog/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/drawer/drawer.tsx
 create mode 100644 apps/demo-wallet/src/core/components/ui/drawer/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/icons/icons.tsx
 create mode 100644 apps/demo-wallet/src/core/components/ui/icons/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/modal/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/modal/modal.tsx
 create mode 100644 apps/demo-wallet/src/core/components/ui/option-row/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/option-row/option-row.tsx
 create mode 100644 apps/demo-wallet/src/core/components/ui/popover/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/popover/popover.tsx
 create mode 100644 apps/demo-wallet/src/core/components/ui/segmented/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/segmented/segmented.tsx
 create mode 100644 apps/demo-wallet/src/core/components/ui/select/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/select/select.tsx
 create mode 100644 apps/demo-wallet/src/core/components/ui/sonner/index.ts
 rename apps/demo-wallet/src/{components/ui => core/components/ui/sonner}/sonner.tsx (100%)
 create mode 100644 apps/demo-wallet/src/features/auth/components/setup-password-screen/index.ts
 create mode 100644 apps/demo-wallet/src/features/auth/components/setup-password-screen/setup-password-screen.tsx
 create mode 100644 apps/demo-wallet/src/features/auth/components/unlock-screen/index.ts
 create mode 100644 apps/demo-wallet/src/features/auth/components/unlock-screen/unlock-screen.tsx
 create mode 100644 apps/demo-wallet/src/features/auth/index.ts
 create mode 100644 apps/demo-wallet/src/features/ledger/components/ledger-screen/index.ts
 create mode 100644 apps/demo-wallet/src/features/ledger/components/ledger-screen/ledger-screen.tsx
 create mode 100644 apps/demo-wallet/src/features/ledger/index.ts
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/add-wallet-modal/add-wallet-modal.tsx
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/add-wallet-modal/index.ts
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/create-wallet-modal/create-wallet-modal.tsx
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/create-wallet-modal/index.ts
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/create-wallet-screen/create-wallet-screen.tsx
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/create-wallet-screen/index.ts
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/index.ts
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/welcome-screen/index.ts
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/welcome-screen/welcome-screen.tsx
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/index.ts
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/routes.ts
 create mode 100644 apps/demo-wallet/src/hooks/useCountUp.ts
 create mode 100644 apps/demo-wallet/src/hooks/useMediaQuery.ts
 create mode 100644 apps/demo-wallet/src/hooks/useReceivedToasts.tsx
 delete mode 100644 apps/demo-wallet/src/pages/SetupPassword.tsx
 delete mode 100644 apps/demo-wallet/src/pages/SetupWallet.tsx
 delete mode 100644 apps/demo-wallet/src/pages/UnlockWallet.tsx
 create mode 100644 apps/demo-wallet/src/utils/format.ts
 create mode 100644 apps/demo-wallet/src/utils/rates.ts
 create mode 100644 apps/demo-wallet/src/utils/telegram.ts
 create mode 100644 demo/wallet-core/src/store/slices/ratesSlice.ts
 create mode 100644 packages/appkit-react/src/components/ui/fallback-image/fallback-image.tsx
 create mode 100644 packages/appkit-react/src/components/ui/fallback-image/index.ts
 create mode 100644 packages/appkit-react/src/components/ui/fallback-image/use-resolved-image-src.ts
 create mode 100644 packages/walletkit/src/clients/toncenter/mappers/map-address-book.ts
 create mode 100644 packages/walletkit/src/clients/toncenter/mappers/map-jetton-masters.ts

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/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..da4cde225 100644
--- a/apps/demo-wallet/src/App.tsx
+++ b/apps/demo-wallet/src/App.tsx
@@ -12,7 +12,7 @@ import type { WalletKitConfig } from '@demo/wallet-core';
 
 import { AppRouter } from './components';
 
-import { Toaster } from '@/components/ui/sonner';
+import { Toaster } from '@/core/components/ui/sonner';
 import {
     DISABLE_AUTO_EMULATION,
     DISABLE_HTTP_BRIDGE,
diff --git a/apps/demo-wallet/src/components/ActionPreviewList.tsx b/apps/demo-wallet/src/components/ActionPreviewList.tsx
index 586d002e1..467dc7ad5 100644
--- a/apps/demo-wallet/src/components/ActionPreviewList.tsx
+++ b/apps/demo-wallet/src/components/ActionPreviewList.tsx
@@ -10,6 +10,8 @@ import React, { memo, useMemo } from 'react';
 import type { ToncenterEmulationResponse } from '@ton/walletkit';
 import { emulationEvent } from '@ton/walletkit';
 
+import { shortenAddress } from '@/utils';
+
 interface ActionPreviewListProps {
     emulationResult: ToncenterEmulationResponse;
     walletAddress?: string;
@@ -77,7 +79,7 @@ export const ActionPreviewList: React.FC<ActionPreviewListProps> = memo(
                                                     key={`acc-${i}`}
                                                     className="text-[10px] px-2 py-0.5 bg-gray-100 text-gray-700 rounded"
                                                 >
-                                                    {acc.name ?? shortenAddress(acc.address)}
+                                                    {acc.name ?? shortenAddress(acc.address, 6)}
                                                 </span>
                                             ))}
                                         </div>
@@ -91,9 +93,3 @@ export const ActionPreviewList: React.FC<ActionPreviewListProps> = memo(
         );
     },
 );
-
-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/AppRouter.tsx b/apps/demo-wallet/src/components/AppRouter.tsx
index 57020400a..2ac15555c 100644
--- a/apps/demo-wallet/src/components/AppRouter.tsx
+++ b/apps/demo-wallet/src/components/AppRouter.tsx
@@ -13,9 +13,6 @@ import { useWalletStore, useWallet } from '@demo/wallet-core';
 import { ProtectedRoute } from './ProtectedRoute';
 import { LoaderCircle } from './LoaderCircle';
 import {
-    SetupPassword,
-    UnlockWallet,
-    SetupWallet,
     WalletDashboard,
     SendTransaction,
     TracePage,
@@ -25,7 +22,11 @@ import {
     TonConnectRoute,
 } from '../pages';
 
+import { SetupPasswordScreen, UnlockScreen } from '@/features/auth';
+import { LedgerScreen } from '@/features/ledger';
+import { WelcomeScreen, CreateWalletScreen, ImportWalletScreen } from '@/features/wallet-setup';
 import { useWalletDataUpdater } from '@/hooks/useWalletDataUpdater';
+import { useReceivedToasts } from '@/hooks/useReceivedToasts';
 import { Button } from '@/components/Button';
 
 export const AppRouter: React.FC = () => {
@@ -36,11 +37,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 +85,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>
                     }
                 />
diff --git a/apps/demo-wallet/src/components/BalanceTotal.tsx b/apps/demo-wallet/src/components/BalanceTotal.tsx
new file mode 100644
index 000000000..8708f8ea8
--- /dev/null
+++ b/apps/demo-wallet/src/components/BalanceTotal.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 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 '@/hooks/useCountUp';
+import { findRate, formatUsdParts, shortenAddress, toDecimal } from '@/utils';
+
+const TON_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['TON']?.rate;
+        if (tonRate) {
+            total += toDecimal(balance, TON_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/components/Button.tsx b/apps/demo-wallet/src/components/Button.tsx
index 98e8ffe3b..3b9ac21c8 100644
--- a/apps/demo-wallet/src/components/Button.tsx
+++ b/apps/demo-wallet/src/components/Button.tsx
@@ -27,7 +27,7 @@ export const Button: React.FC<ButtonProps> = ({
     ...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';
+        'font-medium rounded-lg transition-[transform,background-color,color] hover:scale-[1.03] active:scale-[0.97] disabled:hover:scale-100 disabled:active:scale-100 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',
diff --git a/apps/demo-wallet/src/components/ConnectDappModal.tsx b/apps/demo-wallet/src/components/ConnectDappModal.tsx
new file mode 100644
index 000000000..878b07f68
--- /dev/null
+++ b/apps/demo-wallet/src/components/ConnectDappModal.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (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 './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}
+                    isLoading={isConnecting}
+                    disabled={!url.trim() || isConnecting}
+                    className="w-full"
+                >
+                    Connect
+                </Button>
+            </Modal.Body>
+        </Modal.Container>
+    );
+};
diff --git a/apps/demo-wallet/src/components/DashboardActionButton.tsx b/apps/demo-wallet/src/components/DashboardActionButton.tsx
new file mode 100644
index 000000000..e7c1fad66
--- /dev/null
+++ b/apps/demo-wallet/src/components/DashboardActionButton.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';
+
+interface DashboardActionButtonProps {
+    icon: React.ReactNode;
+    label: string;
+    onClick?: () => void;
+    'aria-label'?: string;
+}
+
+export const DashboardActionButton: React.FC<DashboardActionButtonProps> = ({
+    icon,
+    label,
+    onClick,
+    'aria-label': ariaLabel,
+}) => (
+    <button
+        type="button"
+        onClick={onClick}
+        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/components/DashboardActions.tsx b/apps/demo-wallet/src/components/DashboardActions.tsx
new file mode 100644
index 000000000..bdacb1c15
--- /dev/null
+++ b/apps/demo-wallet/src/components/DashboardActions.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (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 { DashboardActionButton } from './DashboardActionButton';
+import { ReceiveModal } from './ReceiveModal';
+
+import { SwapIcon, ReceiveIcon, SendIcon } from '@/core/components/ui/icons';
+
+export const DashboardActions: React.FC = () => {
+    const navigate = useNavigate();
+    const [isReceiveOpen, setIsReceiveOpen] = useState(false);
+
+    return (
+        <>
+            <div className="flex items-stretch gap-2">
+                <DashboardActionButton
+                    icon={<SwapIcon className="w-6 h-6" />}
+                    label="Swap"
+                    onClick={() => navigate('/swap')}
+                />
+                <DashboardActionButton
+                    icon={<SendIcon className="w-6 h-6" />}
+                    label="Send"
+                    onClick={() => navigate('/send')}
+                />
+                <DashboardActionButton
+                    icon={<ReceiveIcon className="w-6 h-6" />}
+                    label="Receive"
+                    onClick={() => setIsReceiveOpen(true)}
+                />
+            </div>
+
+            <ReceiveModal isOpen={isReceiveOpen} onClose={() => setIsReceiveOpen(false)} />
+        </>
+    );
+};
diff --git a/apps/demo-wallet/src/components/DashboardAssetRow.tsx b/apps/demo-wallet/src/components/DashboardAssetRow.tsx
new file mode 100644
index 000000000..95bd35ae4
--- /dev/null
+++ b/apps/demo-wallet/src/components/DashboardAssetRow.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 React from 'react';
+
+import { FallbackImage } from './FallbackImage';
+
+import { useCountUp } from '@/hooks/useCountUp';
+import { formatAmount, formatPercent, formatUsd } from '@/utils';
+
+interface DashboardAssetRowProps {
+    /** 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;
+    change24h?: number;
+}
+
+const changeColor = (value: number): string => {
+    if (value > 0) return 'text-green-500';
+    if (value < 0) return 'text-red-500';
+    return 'text-gray-400';
+};
+
+export const DashboardAssetRow: React.FC<DashboardAssetRowProps> = ({
+    icon,
+    fallbackText,
+    name,
+    symbol,
+    amount,
+    rateLabel,
+    fiat,
+    change24h,
+}) => {
+    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">
+                    {formatAmount(animatedAmount)} {symbol}
+                    {rateLabel && ` · ${rateLabel}`}
+                </div>
+            </div>
+            {(hasFiat || change24h !== undefined) && (
+                <div className="text-right flex-shrink-0 tabular-nums">
+                    {hasFiat && <div className="text-sm font-semibold text-gray-900">{formatUsd(animatedFiat)}</div>}
+                    {change24h !== undefined && (
+                        <div className={`text-xs ${changeColor(change24h)}`}>{formatPercent(change24h)}</div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export const DashboardAssetRowSkeleton: 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/components/DashboardAssets.tsx b/apps/demo-wallet/src/components/DashboardAssets.tsx
new file mode 100644
index 000000000..0acad9fb3
--- /dev/null
+++ b/apps/demo-wallet/src/components/DashboardAssets.tsx
@@ -0,0 +1,195 @@
+/**
+ * Copyright (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 { useJettons, useRates, useWallet, useWalletKit } from '@demo/wallet-core';
+import type { JettonInfo } from '@ton/walletkit';
+
+import { DashboardAssetRow, DashboardAssetRowSkeleton } from './DashboardAssetRow';
+
+import { getJettonsName, getJettonsSymbol } from '@/utils/jetton';
+import { findRate, formatRate, toDecimal } from '@/utils';
+
+const TON_DECIMALS = 9;
+const JETTON_SLOTS = 2;
+
+// Always-shown fallback jettons (used to pad the list 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' },
+];
+
+// Candidate icon URLs (best-first), appending the inline base64 image as a last resort.
+const imageSources = (urls: string[] | undefined, dataBase64?: string): string[] => [
+    ...(urls ?? []),
+    ...(dataBase64 ? [`data:image/png;base64,${dataBase64}`] : []),
+];
+
+interface AssetRowData {
+    id: string;
+    icon?: string | string[];
+    fallbackText: string;
+    name: string;
+    symbol: string;
+    amount: number;
+    rateLabel?: string;
+    fiat?: number;
+    change24h?: number;
+}
+
+export const DashboardAssets: React.FC = () => {
+    const { balance, currentWallet, getActiveWallet } = useWallet();
+    const { userJettons, lastJettonsUpdate } = useJettons();
+    const { entries: rates, lastUpdated: ratesUpdated } = useRates();
+    const walletKit = useWalletKit();
+
+    const ratesLoaded = ratesUpdated > 0;
+    const hasJettonsLoaded = lastJettonsUpdate > 0;
+    const hasBalance = balance !== undefined;
+    // Show TON and jettons strictly together: all skeletons until balances AND rates are loaded.
+    const assetsReady = hasBalance && hasJettonsLoaded && ratesLoaded;
+    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]);
+
+    const tonRow = useMemo<AssetRowData | null>(() => {
+        if (!assetsReady) return null;
+        const rateEntry = rates['TON'];
+        const amount = toDecimal(balance, TON_DECIMALS);
+        return {
+            id: 'TON',
+            icon: '/ton.svg',
+            fallbackText: 'TN',
+            name: 'Toncoin',
+            symbol: 'TON',
+            amount,
+            rateLabel: rateEntry ? formatRate(rateEntry.rate) : undefined,
+            fiat: rateEntry ? amount * rateEntry.rate : undefined,
+            change24h: rateEntry?.change24h,
+        };
+    }, [assetsReady, balance, rates]);
+
+    const jettonRows = useMemo<AssetRowData[]>(() => {
+        if (!assetsReady) return [];
+
+        const entries = userJettons.map((jetton) => {
+            const rateEntry = findRate(rates, jetton.address);
+            const decimals = jetton.decimalsNumber ?? 9;
+            const amount = toDecimal(jetton.balance, decimals);
+            const fiat = rateEntry ? amount * rateEntry.rate : undefined;
+            const symbol = getJettonsSymbol(jetton) ?? '';
+            return {
+                row: {
+                    id: jetton.address,
+                    icon: imageSources(jetton.info?.image?.urls, jetton.info?.image?.data),
+                    fallbackText: symbol.slice(0, 2).toUpperCase() || '??',
+                    name: getJettonsName(jetton) ?? symbol,
+                    symbol,
+                    amount,
+                    rateLabel: rateEntry ? formatRate(rateEntry.rate) : undefined,
+                    fiat,
+                    change24h: rateEntry?.change24h,
+                } satisfies AssetRowData,
+                isVerified: jetton.isVerified,
+                hasRate: Boolean(rateEntry),
+            };
+        });
+
+        // Pick the user's own jettons first: by fiat if any have value, else by verified status.
+        const withPositiveFiat = entries.filter((entry) => (entry.row.fiat ?? 0) > 0);
+        let selected: AssetRowData[];
+        if (withPositiveFiat.length > 0) {
+            selected = withPositiveFiat
+                .sort((a, b) => (b.row.fiat ?? 0) - (a.row.fiat ?? 0))
+                .slice(0, JETTON_SLOTS)
+                .map((entry) => entry.row);
+        } else {
+            const withRate = entries.filter((entry) => entry.hasRate);
+            const base = withRate.length > 0 ? withRate : entries;
+            selected = base
+                .sort((a, b) => Number(b.isVerified) - Number(a.isVerified))
+                .slice(0, JETTON_SLOTS)
+                .map((entry) => entry.row);
+        }
+
+        // On mainnet always show JETTON_SLOTS rows — pad with default tokens
+        // (USDT/XAUT) the user doesn't already have shown.
+        if (isMainnet && selected.length < JETTON_SLOTS) {
+            const heldByAddress = new Map(userJettons.map((jetton) => [jetton.address, jetton]));
+            const present = new Set(selected.map((row) => row.id));
+
+            for (const def of DEFAULT_JETTONS) {
+                if (selected.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);
+                selected.push({
+                    id: def.address,
+                    icon: held
+                        ? imageSources(held.info?.image?.urls, held.info?.image?.data)
+                        : imageSources(info?.images, 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,
+                    change24h: rateEntry?.change24h,
+                });
+            }
+        }
+
+        return selected;
+    }, [assetsReady, isMainnet, userJettons, rates, defaultInfos]);
+
+    return (
+        <section>
+            <header className="flex items-center gap-1 mb-2">
+                <h2 className="text-base font-semibold text-gray-900">Assets</h2>
+                <ChevronRight className="w-4 h-4 text-gray-400" />
+            </header>
+
+            <div className="space-y-1">
+                {tonRow ? <DashboardAssetRow {...tonRow} /> : <DashboardAssetRowSkeleton />}
+                {assetsReady ? (
+                    jettonRows.map((row) => <DashboardAssetRow key={row.id} {...row} />)
+                ) : (
+                    <>
+                        <DashboardAssetRowSkeleton />
+                        <DashboardAssetRowSkeleton />
+                    </>
+                )}
+            </div>
+        </section>
+    );
+};
diff --git a/apps/demo-wallet/src/components/DashboardHeader.tsx b/apps/demo-wallet/src/components/DashboardHeader.tsx
new file mode 100644
index 000000000..a5e3639be
--- /dev/null
+++ b/apps/demo-wallet/src/components/DashboardHeader.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, { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { useWallet } from '@demo/wallet-core';
+
+import { SettingsDropdown } from './SettingsDropdown';
+import { WalletSelectorModal } from './WalletSelectorModal';
+import { ConnectDappModal } from './ConnectDappModal';
+
+import { ScanIcon } from '@/core/components/ui/icons';
+
+export const DashboardHeader: React.FC = () => {
+    const { savedWallets, activeWalletId } = useWallet();
+    const activeWallet = savedWallets.find((w) => w.id === activeWalletId);
+    const [isWalletSelectorOpen, setIsWalletSelectorOpen] = useState(false);
+    const [isConnectOpen, setIsConnectOpen] = useState(false);
+
+    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"
+            >
+                <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/components/FallbackImage.tsx b/apps/demo-wallet/src/components/FallbackImage.tsx
new file mode 100644
index 000000000..2894f11e7
--- /dev/null
+++ b/apps/demo-wallet/src/components/FallbackImage.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/components/JettonFlow.tsx b/apps/demo-wallet/src/components/JettonFlow.tsx
index b16a7785d..814cf9ce1 100644
--- a/apps/demo-wallet/src/components/JettonFlow.tsx
+++ b/apps/demo-wallet/src/components/JettonFlow.tsx
@@ -46,10 +46,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={TON_INFO.images?.[0]} alt={TON_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({
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/NetworkSelector.tsx b/apps/demo-wallet/src/components/NetworkSelector.tsx
index f6d6c739e..dcad924a8 100644
--- a/apps/demo-wallet/src/components/NetworkSelector.tsx
+++ b/apps/demo-wallet/src/components/NetworkSelector.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/components/NewLayout.tsx b/apps/demo-wallet/src/components/NewLayout.tsx
new file mode 100644
index 000000000..e14762828
--- /dev/null
+++ b/apps/demo-wallet/src/components/NewLayout.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/components/NftsCard.tsx b/apps/demo-wallet/src/components/NftsCard.tsx
index f3e609386..bf7072790 100644
--- a/apps/demo-wallet/src/components/NftsCard.tsx
+++ b/apps/demo-wallet/src/components/NftsCard.tsx
@@ -6,330 +6,66 @@
  *
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import type { NFT } from '@ton/walletkit';
+import { ChevronRight } from 'lucide-react';
 import { useNfts } from '@demo/wallet-core';
 
-import { Button } from './Button';
-import { Card } from './Card';
+import { FallbackImage } from './FallbackImage';
 
-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 '';
-        }
+const getNftImageSources = (nft: NFT): string[] => {
+    const img = nft.info?.image;
+    if (!img) return [];
+    return [...img.urls, ...(img.data ? [`data:image/png;base64,${img.data}`] : [])];
+};
 
-        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, formatNftIndex: (index: string) => string): string => {
+    if (nft.info?.name) return nft.info.name;
+    if (nft.index) return `NFT ${formatNftIndex(nft.index)}`;
+    return 'NFT';
+};
 
-    const getNftName = (nft: NFT): string => {
-        if (nft.info?.name) {
-            return nft.info.name;
-        }
+const NftTile: React.FC<{ nft: NFT; formatNftIndex: (index: string) => string }> = ({ nft, formatNftIndex }) => {
+    const name = getNftName(nft, formatNftIndex);
+    const indexLabel = nft.index ? formatNftIndex(nft.index) : null;
 
-        if (nft.index) {
-            return `NFT ${formatNftIndex(nft.index)}`;
-        }
+    return (
+        <article className="flex-shrink-0 w-36 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>
+    );
+};
 
-        return '';
-    };
+export const NftsCard: React.FC = () => {
+    const { userNfts, formatNftIndex } = useNfts();
 
-    const getNftDescription = (nft: NFT): string | null => {
-        if (nft.info?.description) {
-            return nft.info.description;
-        }
+    // Only render when there are NFTs to show — no skeletons, no empty block.
+    if (userNfts.length === 0) {
         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>
+        <section>
+            <header className="flex items-center gap-1 mb-2">
+                <h2 className="text-base font-semibold text-gray-900">NFTs</h2>
+                <ChevronRight className="w-4 h-4 text-gray-400" />
+            </header>
+
+            <div className="flex gap-3 overflow-x-auto -mx-4 px-4 pb-1 [&::-webkit-scrollbar]:hidden [scrollbar-width:none]">
+                {userNfts.map((nft) => (
+                    <NftTile key={nft.address} nft={nft} formatNftIndex={formatNftIndex} />
+                ))}
+            </div>
+        </section>
     );
 };
diff --git a/apps/demo-wallet/src/components/ProtectedRoute.tsx b/apps/demo-wallet/src/components/ProtectedRoute.tsx
index 2c04508eb..97684432a 100644
--- a/apps/demo-wallet/src/components/ProtectedRoute.tsx
+++ b/apps/demo-wallet/src/components/ProtectedRoute.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/components/ReceiveModal.tsx b/apps/demo-wallet/src/components/ReceiveModal.tsx
new file mode 100644
index 000000000..4dfd8757f
--- /dev/null
+++ b/apps/demo-wallet/src/components/ReceiveModal.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/components/SettingsDropdown.tsx b/apps/demo-wallet/src/components/SettingsDropdown.tsx
index 2a806fe36..36f2c0329 100644
--- a/apps/demo-wallet/src/components/SettingsDropdown.tsx
+++ b/apps/demo-wallet/src/components/SettingsDropdown.tsx
@@ -6,16 +6,45 @@
  *
  */
 
-import React, { useState, useRef, useEffect } from 'react';
+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 { MnemonicDisplay } from './MnemonicDisplay';
+import { ToggleRow } from './ToggleRow';
 import { createComponentLogger } from '../utils/logger';
 
-// Create logger for settings dropdown component
+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 {
@@ -29,32 +58,32 @@ export const SettingsDropdown: React.FC = () => {
         setShowFastSend,
     } = useAuth();
     const { getDecryptedMnemonic } = useWallet();
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-    const [showMnemonicModal, setShowMnemonicModal] = useState(false);
+
+    const [panel, setPanel] = useState<'menu' | 'create' | 'mnemonic' | null>(null);
     const [mnemonic, setMnemonic] = useState<string[]>([]);
     const [isLoadingMnemonic, setIsLoadingMnemonic] = useState(false);
     const [mnemonicError, setMnemonicError] = useState('');
-    const dropdownRef = useRef<HTMLDivElement>(null);
 
     const handleLockWallet = () => {
+        setPanel(null);
         lock();
-        setIsDropdownOpen(false);
     };
 
     const handleDeleteWallet = () => {
         if (window.confirm('Are you sure you want to delete your wallet? This action cannot be undone.')) {
+            setPanel(null);
             reset();
-            setIsDropdownOpen(false);
         }
     };
 
-    const handleCreateNewWallet = () => {
-        setIsDropdownOpen(false);
-        navigate('/setup-wallet');
+    const handleCreateNewWallet = () => setPanel('create');
+
+    const handleSelectCreateMode = (mode: CreateWalletMode) => {
+        setPanel(null);
+        navigate(WALLET_SETUP_ROUTE[mode]);
     };
 
     const handleViewRecoveryPhrase = async () => {
-        setIsDropdownOpen(false);
         setIsLoadingMnemonic(true);
         setMnemonicError('');
 
@@ -62,7 +91,7 @@ export const SettingsDropdown: React.FC = () => {
             const decryptedMnemonic = await getDecryptedMnemonic();
             if (decryptedMnemonic) {
                 setMnemonic(decryptedMnemonic);
-                setShowMnemonicModal(true);
+                setPanel('mnemonic');
             } else {
                 setMnemonicError('Unable to retrieve recovery phrase. Please ensure you are logged in.');
             }
@@ -75,321 +104,120 @@ export const SettingsDropdown: React.FC = () => {
     };
 
     const handleCloseMnemonicModal = () => {
-        setShowMnemonicModal(false);
+        setPanel(null);
         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"
+            <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}
                         />
-                    </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 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>
-                </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/components/ToggleRow.tsx b/apps/demo-wallet/src/components/ToggleRow.tsx
new file mode 100644
index 000000000..3f150da90
--- /dev/null
+++ b/apps/demo-wallet/src/components/ToggleRow.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/components/TransactionRequestDetails.tsx b/apps/demo-wallet/src/components/TransactionRequestDetails.tsx
index 98b4d416e..310c5b405 100644
--- a/apps/demo-wallet/src/components/TransactionRequestDetails.tsx
+++ b/apps/demo-wallet/src/components/TransactionRequestDetails.tsx
@@ -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}
diff --git a/apps/demo-wallet/src/components/WalletRow.tsx b/apps/demo-wallet/src/components/WalletRow.tsx
new file mode 100644
index 000000000..8fee52467
--- /dev/null
+++ b/apps/demo-wallet/src/components/WalletRow.tsx
@@ -0,0 +1,199 @@
+/**
+ * Copyright (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 '@/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;
+    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 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>
+
+            <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>
+                    ) : (
+                        <>
+                            <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>
+                            <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/components/WalletSelectorModal.tsx b/apps/demo-wallet/src/components/WalletSelectorModal.tsx
new file mode 100644
index 000000000..21a42de56
--- /dev/null
+++ b/apps/demo-wallet/src/components/WalletSelectorModal.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 './WalletRow';
+
+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/components/index.ts b/apps/demo-wallet/src/components/index.ts
index 757c26d4f..777dbe4e5 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -20,9 +20,22 @@ export { LedgerSetup } from './LedgerSetup';
 export { JettonsCard } from './JettonsCard';
 export { JettonRow } from './JettonRow';
 export { JettonsList } from './JettonsList';
-export { Modal } from './Modal';
+export { Modal } from '@/core/components/ui/modal';
 export { NftsCard } from './NftsCard';
 export { Layout } from './Layout';
+export { NewLayout } from './NewLayout';
+export { DashboardHeader } from './DashboardHeader';
+export { BalanceTotal } from './BalanceTotal';
+export { FallbackImage } from './FallbackImage';
+export { DashboardActionButton } from './DashboardActionButton';
+export { DashboardActions } from './DashboardActions';
+export { DashboardAssetRow, DashboardAssetRowSkeleton } from './DashboardAssetRow';
+export { DashboardAssets } from './DashboardAssets';
+export { WalletSelectorModal } from './WalletSelectorModal';
+export { WalletRow } from './WalletRow';
+export { ToggleRow } from './ToggleRow';
+export { ConnectDappModal } from './ConnectDappModal';
+export { ReceiveModal } from './ReceiveModal';
 export { MnemonicDisplay } from './MnemonicDisplay';
 export { NetworkSelector } from './NetworkSelector';
 export { SettingsDropdown } from './SettingsDropdown';
diff --git a/apps/demo-wallet/src/components/swap/SwapSettings.tsx b/apps/demo-wallet/src/components/swap/SwapSettings.tsx
index 442d618ee..3ea3fa53d 100644
--- a/apps/demo-wallet/src/components/swap/SwapSettings.tsx
+++ b/apps/demo-wallet/src/components/swap/SwapSettings.tsx
@@ -10,7 +10,8 @@ import type { FC } from 'react';
 import { useState, useEffect } from 'react';
 
 import { Button } from '../Button';
-import { Modal } from '../Modal';
+
+import { Modal } from '@/core/components/ui/modal';
 
 interface SwapSettingsProps {
     slippageBps: number;
@@ -63,11 +64,11 @@ export const SwapSettings: FC<SwapSettingsProps> = ({ slippageBps, setSlippageBp
                 </svg>
             </button>
 
-            <Modal.Container isOpen={open} onClose={handleCancel}>
+            <Modal.Container isOpened={open} onOpenChange={(value) => !value && handleCancel()}>
                 <Modal.Header onClose={handleCancel}>
                     <Modal.Title>Swap Settings</Modal.Title>
                 </Modal.Header>
-                <Modal.Body className="space-y-6">
+                <Modal.Body className="gap-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">
diff --git a/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx b/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx
index c07a6d049..30d84ad12 100644
--- a/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx
+++ b/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx
@@ -10,7 +10,7 @@ import React, { memo } from 'react';
 import { Link } from 'react-router-dom';
 import type { TonTransferAction } from '@ton/walletkit';
 
-import { formatAddress, formatTimestamp } from '../../utils';
+import { shortenAddress, formatTimestamp } from '../../utils';
 import { formatTon } from '../../utils/units';
 
 interface TonTransferCardProps {
@@ -67,7 +67,7 @@ export const TonTransferCard: React.FC<TonTransferCardProps> = memo(
                     </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>
+                        <p className="text-xs text-gray-500">{shortenAddress(otherAddress)}</p>
                         {action.TonTransfer.comment && (
                             <p className="mt-1 text-xs text-gray-600 break-all">{action.TonTransfer.comment}</p>
                         )}
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/ui/button/button.tsx b/apps/demo-wallet/src/core/components/ui/button/button.tsx
new file mode 100644
index 000000000..bfdbff9f7
--- /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 '@/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-4 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/core/components/ui/dialog/dialog.tsx b/apps/demo-wallet/src/core/components/ui/dialog/dialog.tsx
new file mode 100644
index 000000000..2eafa30ee
--- /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 '@/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..997a845d7
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/drawer/drawer.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 * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '@/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 flex h-auto flex-col rounded-t-[10px] border bg-background',
+                className,
+            )}
+            {...props}
+        >
+            <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+            {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/icons/icons.tsx b/apps/demo-wallet/src/core/components/ui/icons/icons.tsx
new file mode 100644
index 000000000..bc30830fe
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/icons/icons.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright (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>
+);
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/modal/index.ts b/apps/demo-wallet/src/core/components/ui/modal/index.ts
new file mode 100644
index 000000000..6ddbe7a1d
--- /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, ModalBackButton } 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..184867500
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
@@ -0,0 +1,109 @@
+/**
+ * Copyright (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 { Button } from '@/components/Button';
+import { cn } from '@/lib/utils';
+import { useIsMobile } from '@/hooks/useMediaQuery';
+
+export interface ModalContainerProps extends ComponentProps<'div'> {
+    isOpened: boolean;
+    onOpenChange: (value: boolean) => void;
+}
+
+export const ModalContainer: React.FC<ModalContainerProps> = ({
+    isOpened,
+    onOpenChange,
+    children,
+    className,
+    ...props
+}) => {
+    const isMobile = useIsMobile();
+
+    if (isMobile) {
+        return (
+            <Drawer open={isOpened} onOpenChange={onOpenChange}>
+                <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}
+                {...props}
+            >
+                {children}
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+interface ModalHeaderProps extends ComponentProps<'div'> {
+    onClose?: () => void;
+}
+
+export const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, 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">{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 ModalBackButton: React.FC<ComponentProps<'button'>> = ({ className, ...props }) => (
+    <Button variant="secondary" className={cn('!px-2 gap-1 text-sm', className)} {...props}>
+        <ChevronLeft className="h-4 w-4" />
+        <span className="font-semibold">Back</span>
+    </Button>
+);
+
+export const Modal = {
+    Container: ModalContainer,
+    Header: ModalHeader,
+    Title: ModalTitle,
+    Body: ModalBody,
+    Footer: ModalFooter,
+    BackButton: ModalBackButton,
+};
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..5c068b16c
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/option-row/option-row.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 { ChevronRight, Loader2 } from 'lucide-react';
+
+export interface OptionRowProps {
+    icon: React.ReactNode;
+    title: string;
+    subtitle: string;
+    loading?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+
+/** 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,
+}) => (
+    <button
+        type="button"
+        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..7b5f2acce
--- /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 '@/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..8e4472115
--- /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 '@/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..d9307898b
--- /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 '@/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/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/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..64009194d
--- /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 '@/components/NetworkSelector';
+import { useTonWallet } from '@/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/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..fb83b4341
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/add-wallet-modal/add-wallet-modal.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 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}
+                    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..bf1df3b46
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/create-wallet-screen/create-wallet-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, { 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 { CenteredScreen } from '@/core/components/shared/centered-screen';
+import { Button } from '@/core/components/ui/button';
+import { NetworkSelector } from '@/components/NetworkSelector';
+import { useTonWallet } from '@/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 [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');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const ready = mnemonic.length > 0;
+    const columns = [0, 12];
+
+    const footer = (
+        <Button fullWidth onClick={handleContinue} disabled={!revealed || isLoading}>
+            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">
+                            {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">{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}>
+                                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>
+        </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/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
new file mode 100644
index 000000000..2871b5b53
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
@@ -0,0 +1,242 @@
+/**
+ * Copyright (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 { 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 '@/components/NetworkSelector';
+import { useTonWallet } from '@/hooks';
+import {
+    applyMnemonicPaste,
+    evaluateBip39Slots,
+    extractMnemonicWordsFromPaste,
+    isImportableBip39,
+} from '@/utils/bip39English';
+
+type WalletVersion = 'v5r1' | 'v4r2';
+type WalletInterface = 'mnemonic' | 'signer';
+
+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();
+
+    const [words, setWords] = useState<string[]>(Array(TOTAL_WORDS).fill(''));
+    const [activeInput, setActiveInput] = useState(0);
+    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[0]?.focus();
+    }, []);
+
+    const focusCell = (index: number) => {
+        setTimeout(() => inputRefs.current[index]?.focus(), 0);
+    };
+
+    const handleWordChange = (index: number, value: string) => {
+        const cleanValue = value.toLowerCase().replace(/[^a-z]/g, '');
+        setWords((prev) => {
+            const next = [...prev];
+            next[index] = cleanValue;
+            return next;
+        });
+    };
+
+    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;
+        const value = inputRefs.current[index]?.value ?? '';
+
+        switch (event.key) {
+            case 'Backspace':
+                if (value.length === 0 && !isFirst) {
+                    const prev = inputRefs.current[index - 1];
+                    if (prev) {
+                        prev.focus();
+                        const end = prev.value.length;
+                        prev.setSelectionRange(end, end);
+                    }
+                }
+                return;
+            case 'Enter':
+                event.preventDefault();
+                if (isLast) void handleSubmit();
+                else inputRefs.current[index + 1]?.focus();
+                return;
+            case 'ArrowLeft':
+                if (!isFirst) inputRefs.current[index - 1]?.focus();
+                return;
+            case 'ArrowRight':
+                if (!isLast) inputRefs.current[index + 1]?.focus();
+                return;
+            case ' ':
+                if (!isLast && value.length > 0) {
+                    event.preventDefault();
+                    inputRefs.current[index + 1]?.focus();
+                }
+                return;
+        }
+    };
+
+    const handlePaste = (index: number, event: React.ClipboardEvent) => {
+        const text = event.clipboardData.getData('text/plain') || event.clipboardData.getData('text');
+        const tokens = extractMnemonicWordsFromPaste(text);
+
+        if (tokens.length === 0) {
+            if (text.trim().length > 0) {
+                event.preventDefault();
+                handleWordChange(index, text);
+            }
+            return;
+        }
+
+        event.preventDefault();
+        const { nextWords, focusIndex } = applyMnemonicPaste(words, index, tokens);
+        setWords(nextWords);
+        focusCell(focusIndex);
+    };
+
+    const handleClickPaste = () => {
+        void navigator.clipboard
+            ?.readText()
+            .then((text) => {
+                const tokens = extractMnemonicWordsFromPaste(text ?? '');
+                if (tokens.length < 12) return;
+                const { nextWords, focusIndex } = applyMnemonicPaste(words, 0, tokens);
+                setWords(nextWords);
+                focusCell(focusIndex);
+            })
+            .catch(() => {
+                /* Clipboard API missing or denied; user can still Ctrl+V into a cell. */
+            });
+    };
+
+    const clearAll = () => {
+        setWords(Array(TOTAL_WORDS).fill(''));
+        inputRefs.current[0]?.focus();
+    };
+
+    const cellClassName = (index: number) => {
+        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}>
+            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">Enter the 12 or 24 words of your recovery phrase.</p>
+                </div>
+
+                <div className="mt-4 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">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="mt-4 flex items-center justify-between">
+                    <span className="text-sm text-gray-500">{validation.nonEmptyWords.length}/24 words</span>
+                    <div className="flex gap-3">
+                        <button type="button" onClick={clearAll} className="text-xs text-gray-500 hover:text-gray-700">
+                            Clear
+                        </button>
+                        <button
+                            type="button"
+                            onClick={handleClickPaste}
+                            className="text-xs text-blue-600 hover:text-blue-800"
+                        >
+                            Paste
+                        </button>
+                    </div>
+                </div>
+
+                <div className="mt-3 grid grid-cols-4 gap-1.5">
+                    {words.map((word, index) => (
+                        <div key={index} className="relative">
+                            <input
+                                ref={(el) => {
+                                    inputRefs.current[index] = el;
+                                }}
+                                type="text"
+                                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}`}
+                                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}
+                            />
+                            <span className="absolute -top-1 left-0.5 text-[10px] text-gray-400 bg-white px-0.5">
+                                {index + 1}
+                            </span>
+                        </div>
+                    ))}
+                </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/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/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..0756044df
--- /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')}>
+                Create a new wallet
+            </Button>
+            <Button variant="secondary" fullWidth onClick={() => setIsAddOpen(true)}>
+                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 TON.
+                </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/hooks/index.ts b/apps/demo-wallet/src/hooks/index.ts
index eacc34b80..bd4307414 100644
--- a/apps/demo-wallet/src/hooks/index.ts
+++ b/apps/demo-wallet/src/hooks/index.ts
@@ -6,8 +6,11 @@
  *
  */
 
+export * from './useCountUp';
 export * from './useFormattedJetton';
 export * from './useJettonInfo';
+export * from './useMediaQuery';
 export * from './usePasteHandler';
+export * from './useReceivedToasts';
 export * from './useTonWallet';
 export * from './useWalletDataUpdater';
diff --git a/apps/demo-wallet/src/hooks/useCountUp.ts b/apps/demo-wallet/src/hooks/useCountUp.ts
new file mode 100644
index 000000000..e1a0206b3
--- /dev/null
+++ b/apps/demo-wallet/src/hooks/useCountUp.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/hooks/useJettonInfo.ts b/apps/demo-wallet/src/hooks/useJettonInfo.ts
index e2e8c284d..afa0d6066 100644
--- a/apps/demo-wallet/src/hooks/useJettonInfo.ts
+++ b/apps/demo-wallet/src/hooks/useJettonInfo.ts
@@ -22,7 +22,7 @@ export const TON_INFO: TokenInfo = {
     name: 'TON',
     symbol: 'TON',
     decimals: 9,
-    image: '/ton.png',
+    images: ['/ton.png'],
 };
 
 export function useActiveWalletNetwork(): NetworkType {
diff --git a/apps/demo-wallet/src/hooks/useMediaQuery.ts b/apps/demo-wallet/src/hooks/useMediaQuery.ts
new file mode 100644
index 000000000..c4a03f489
--- /dev/null
+++ b/apps/demo-wallet/src/hooks/useMediaQuery.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/useReceivedToasts.tsx b/apps/demo-wallet/src/hooks/useReceivedToasts.tsx
new file mode 100644
index 000000000..840a73839
--- /dev/null
+++ b/apps/demo-wallet/src/hooks/useReceivedToasts.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 '@/utils/jetton';
+import { formatAmount, formatUsd, toDecimal } from '@/utils';
+
+const TON_KEY = 'TON';
+const TON_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 ? ` (${formatUsd(amount * rate)})` : '';
+    toast(`You received ${formatAmount(amount)} ${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(TON_KEY);
+        balancesRef.current.set(TON_KEY, next);
+
+        if (!tonSeededRef.current) {
+            tonSeededRef.current = true;
+            return;
+        }
+        if (prev !== undefined && next > prev) {
+            toastReceived(toDecimal(next - prev, TON_DECIMALS), 'TON', ratesRef.current[TON_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/hooks/useWalletDataUpdater.ts b/apps/demo-wallet/src/hooks/useWalletDataUpdater.ts
index b07c6ad09..e9dc1de38 100644
--- a/apps/demo-wallet/src/hooks/useWalletDataUpdater.ts
+++ b/apps/demo-wallet/src/hooks/useWalletDataUpdater.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(() => {
@@ -24,14 +25,34 @@ export const useWalletDataUpdater = () => {
 
     // Update on address change
     useEffect(() => {
-        if (address) {
-            clearNfts();
-            clearJettons();
-            void Promise.allSettled([updateBalance(), loadUserJettons(), loadUserNfts()]);
-        }
-    }, [address, updateBalance, loadUserJettons, loadUserNfts, clearNfts, clearJettons]);
+        if (!address) return;
+
+        clearNfts();
+        clearJettons();
+        clearRates();
+
+        void (async () => {
+            await Promise.allSettled([updateBalance(), loadUserJettons(), loadUserNfts()]);
+            await loadRates();
+        })();
+    }, [address, updateBalance, loadUserJettons, loadUserNfts, loadRates, clearNfts, clearJettons, clearRates]);
+
+    // Background refresh: balance + jettons every 10s. Rates are requested too but
+    // self-throttle to 60s (see loadRates), so this doesn't spam the rates backend.
+    useEffect(() => {
+        if (!address) return;
+
+        const interval = setInterval(() => {
+            void (async () => {
+                await Promise.allSettled([updateBalance(), loadUserJettons()]);
+                await loadRates();
+            })();
+        }, 10_000);
+
+        return () => clearInterval(interval);
+    }, [address, updateBalance, loadUserJettons, loadRates]);
 
-    // Periodic refresh for NFTs only (balance and jettons are updated via WebSocket streaming)
+    // Periodic refresh for NFTs (slower cadence — NFTs change rarely)
     useEffect(() => {
         if (!address) return;
 
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/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
index 933a27b74..166acc860 100644
--- a/apps/demo-wallet/src/pages/SendTransaction.tsx
+++ b/apps/demo-wallet/src/pages/SendTransaction.tsx
@@ -46,7 +46,6 @@ export const SendTransaction: React.FC = () => {
     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();
@@ -56,8 +55,8 @@ export const SendTransaction: React.FC = () => {
     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 navigate = useNavigate();
+
     const sender = useSendToken({
         wallet: currentWallet,
         walletKit,
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/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
index aa70f5f1a..61744ae9d 100644
--- a/apps/demo-wallet/src/pages/WalletDashboard.tsx
+++ b/apps/demo-wallet/src/pages/WalletDashboard.tsx
@@ -6,11 +6,9 @@
  *
  */
 
-import React, { useState, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React from 'react';
 import {
     useWallet,
-    useWalletKit,
     useTonConnect,
     useTransactionRequests,
     useSignDataRequests,
@@ -18,50 +16,22 @@ import {
 } from '@demo/wallet-core';
 
 import {
-    AnimatedBalance,
-    Layout,
-    Button,
-    Card,
+    NewLayout,
+    DashboardHeader,
+    BalanceTotal,
+    DashboardActions,
+    DashboardAssets,
     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 { getAvailableWallets, savedWallets, getActiveWallet } = useWallet();
     const activeWallet = getActiveWallet();
-    const network = activeWallet?.network || 'testnet';
     const {
         handleTonConnectUrl,
         pendingConnectRequest,
@@ -73,291 +43,19 @@ export const WalletDashboard: React.FC = () => {
     const { pendingSignDataRequest, isSignDataModalOpen, approveSignDataRequest, rejectSignDataRequest } =
         useSignDataRequests();
     const { pendingSignMessageRequest, isSignMessageModalOpen } = useSignMessageRequests();
-    const { error } = useTonWallet();
 
-    // Use the paste handler hook
+    // Keep clipboard paste-to-connect for TonConnect URLs
     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>
+        <NewLayout header={<DashboardHeader />}>
             <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 */}
+                <BalanceTotal />
+                <DashboardActions />
+                <DashboardAssets />
                 <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}
@@ -370,7 +68,6 @@ export const WalletDashboard: React.FC = () => {
                 />
             )}
 
-            {/* Transaction Request Modal */}
             {pendingTransactionRequest && (
                 <TransactionRequestModal
                     request={pendingTransactionRequest}
@@ -379,7 +76,6 @@ export const WalletDashboard: React.FC = () => {
                 />
             )}
 
-            {/* Sign Data Request Modal */}
             {pendingSignDataRequest && (
                 <SignDataRequestModal
                     request={pendingSignDataRequest}
@@ -390,7 +86,6 @@ export const WalletDashboard: React.FC = () => {
                 />
             )}
 
-            {/* Sign Message Request Modal */}
             {pendingSignMessageRequest && (
                 <SignMessageRequestModal
                     request={pendingSignMessageRequest}
@@ -398,6 +93,6 @@ export const WalletDashboard: React.FC = () => {
                     isOpen={isSignMessageModalOpen}
                 />
             )}
-        </Layout>
+        </NewLayout>
     );
 };
diff --git a/apps/demo-wallet/src/pages/index.ts b/apps/demo-wallet/src/pages/index.ts
index 125c5f0e6..73c8de058 100644
--- a/apps/demo-wallet/src/pages/index.ts
+++ b/apps/demo-wallet/src/pages/index.ts
@@ -6,9 +6,6 @@
  *
  */
 
-export * from './SetupPassword';
-export * from './UnlockWallet';
-export * from './SetupWallet';
 export * from './WalletDashboard';
 export * from './SendTransaction';
 export * from './TracePage';
diff --git a/apps/demo-wallet/src/utils/format.ts b/apps/demo-wallet/src/utils/format.ts
new file mode 100644
index 000000000..b13bd3f0e
--- /dev/null
+++ b/apps/demo-wallet/src/utils/format.ts
@@ -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 { 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 });
+const amount = new Intl.NumberFormat('en-US', { maximumFractionDigits: 4 });
+
+/** 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;
+    }
+};
+
+/** USD value → `$1,234.56`. */
+export const formatUsd = (value: number): string => `$${usd.format(value)}`;
+
+/** USD value split into integer and fraction parts (no `$`), for styled rendering. */
+export const formatUsdParts = (value: number): { intPart: string; fracPart: string } => {
+    const [intPart, fracPart = '00'] = usd.format(value).split('.');
+    return { intPart, fracPart };
+};
+
+/** Token amount → grouped string with up to 4 fraction digits, trailing zeros trimmed. */
+export const formatAmount = (value: number): string => amount.format(value);
+
+/** Per-unit price → `$`, with extra precision for sub-cent values. */
+export const formatRate = (value: number): string => `$${(value >= 0.01 ? usd : usdSmall).format(value)}`;
+
+/** Signed percentage → `+1.23%` / `-4.56%`. */
+export const formatPercent = (value: number): string => `${value > 0 ? '+' : ''}${value.toFixed(2)}%`;
diff --git a/apps/demo-wallet/src/utils/formatters.ts b/apps/demo-wallet/src/utils/formatters.ts
index 84585d826..6d5a004ac 100644
--- a/apps/demo-wallet/src/utils/formatters.ts
+++ b/apps/demo-wallet/src/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)}`;
 }
 
@@ -61,15 +61,6 @@ export const formatTonForDisplay = (amountOrValue: string): string => {
     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 {
diff --git a/apps/demo-wallet/src/utils/index.ts b/apps/demo-wallet/src/utils/index.ts
index 664a2a940..00384bea9 100644
--- a/apps/demo-wallet/src/utils/index.ts
+++ b/apps/demo-wallet/src/utils/index.ts
@@ -6,6 +6,9 @@
  *
  */
 
+export * from './format';
 export * from './formatters';
 export * from './payload';
+export * from './rates';
+export * from './telegram';
 export * from './units';
diff --git a/apps/demo-wallet/src/utils/jetton.ts b/apps/demo-wallet/src/utils/jetton.ts
index 6f4f89a41..cb94add08 100644
--- a/apps/demo-wallet/src/utils/jetton.ts
+++ b/apps/demo-wallet/src/utils/jetton.ts
@@ -30,14 +30,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 img.urls[0] || (img.data ? `data:image/png;base64,${img.data}` : undefined) || '';
 };
 
 export const getFormattedJettonInfo =
diff --git a/apps/demo-wallet/src/utils/rates.ts b/apps/demo-wallet/src/utils/rates.ts
new file mode 100644
index 000000000..930c39eda
--- /dev/null
+++ b/apps/demo-wallet/src/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/utils/telegram.ts b/apps/demo-wallet/src/utils/telegram.ts
new file mode 100644
index 000000000..a5e3b8ec4
--- /dev/null
+++ b/apps/demo-wallet/src/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/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/examples/src/appkit/actions/gasless/gasless.test.ts b/demo/examples/src/appkit/actions/gasless/gasless.test.ts
index eeed4340c..e086dc665 100644
--- a/demo/examples/src/appkit/actions/gasless/gasless.test.ts
+++ b/demo/examples/src/appkit/actions/gasless/gasless.test.ts
@@ -81,14 +81,19 @@ describe('Gasless Actions Examples', () => {
         const mockClient = {
             jettonsByAddress: vi.fn().mockImplementation((params: { address: string }) =>
                 Promise.resolve({
-                    jetton_masters: [{ address: params.address, jetton: params.address }],
-                    metadata: {
-                        [params.address]: {
-                            token_info: [
-                                { valid: true, type: 'jetton_masters', symbol: 'USDT', extra: { decimals: 6 } },
-                            ],
+                    masters: [
+                        {
+                            address: params.address,
+                            name: 'Tether USD',
+                            symbol: 'USDT',
+                            description: '',
+                            decimals: 6,
+                            images: [],
+                            image_data: undefined,
+                            uri: undefined,
                         },
-                    },
+                    ],
+                    addressBook: {},
                 }),
             ),
             runGetMethod: vi.fn().mockImplementation((_addr: string, method: string) => {
diff --git a/demo/examples/src/appkit/actions/jettons/jettons.test.ts b/demo/examples/src/appkit/actions/jettons/jettons.test.ts
index 5d2f2acba..71fbe18b6 100644
--- a/demo/examples/src/appkit/actions/jettons/jettons.test.ts
+++ b/demo/examples/src/appkit/actions/jettons/jettons.test.ts
@@ -61,21 +61,17 @@ describe('Jetton Actions Examples (Integration)', () => {
         // Default jettonsByAddress mock for actions that auto-resolve decimals
         mockClient.jettonsByAddress.mockImplementation((params: { address: string }) =>
             Promise.resolve({
-                jetton_masters: [{ address: params.address, jetton: params.address }],
-                metadata: {
-                    [params.address]: {
-                        token_info: [
-                            {
-                                valid: true,
-                                type: 'jetton_masters',
-                                name: 'Test Jetton',
-                                symbol: 'TEST',
-                                description: 'Test Jetton',
-                                extra: { decimals: 6 },
-                            },
-                        ],
+                masters: [
+                    {
+                        address: params.address,
+                        name: 'Test Jetton',
+                        symbol: 'TEST',
+                        description: 'Test Jetton',
+                        decimals: 6,
+                        images: [],
                     },
-                },
+                ],
+                addressBook: {},
             }),
         );
 
@@ -108,22 +104,18 @@ describe('Jetton Actions Examples (Integration)', () => {
     describe('getJettonInfoExample', () => {
         it('should get and log jetton info', async () => {
             mockClient.jettonsByAddress.mockResolvedValue({
-                jetton_masters: [{ address: JETTON_ADDRESS, jetton: JETTON_ADDRESS }],
-                metadata: {
-                    [JETTON_ADDRESS]: {
-                        token_info: [
-                            {
-                                valid: true,
-                                type: 'jetton_masters',
-                                name: 'Test Jetton',
-                                symbol: 'TEST',
-                                description: 'Test Description',
-                                image: 'test-image-url',
-                                extra: { decimals: 6, uri: 'test-uri' },
-                            },
-                        ],
+                masters: [
+                    {
+                        address: JETTON_ADDRESS,
+                        name: 'Test Jetton',
+                        symbol: 'TEST',
+                        description: 'Test Description',
+                        decimals: 6,
+                        images: ['test-image-url'],
+                        uri: 'test-uri',
                     },
-                },
+                ],
+                addressBook: {},
             });
 
             await getJettonInfoExample(appKit);
diff --git a/demo/wallet-core/src/hooks/useWalletStore.ts b/demo/wallet-core/src/hooks/useWalletStore.ts
index c8bc5c3f1..eea48b511 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
  */
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/ratesSlice.ts b/demo/wallet-core/src/store/slices/ratesSlice.ts
new file mode 100644
index 000000000..27102c838
--- /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_TON_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_TON_ADDRESS) {
+                    entries.TON = { 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/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..13fe27798 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;
@@ -345,6 +365,7 @@ export interface AppState
         TonConnectSlice,
         JettonsSlice,
         NftsSlice,
+        RatesSlice,
         SwapSlice,
         StakingSlice,
         GaslessSlice {
@@ -369,6 +390,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/packages/appkit-react/src/components/ui/fallback-image/fallback-image.tsx b/packages/appkit-react/src/components/ui/fallback-image/fallback-image.tsx
new file mode 100644
index 000000000..fd6801d91
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/fallback-image/fallback-image.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 { forwardRef } from 'react';
+import type { ComponentPropsWithoutRef, ComponentRef, ReactNode } from 'react';
+
+import { useResolvedImageSrc } from './use-resolved-image-src';
+
+export interface FallbackImageProps extends Omit<ComponentPropsWithoutRef<'img'>, '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?: ReactNode;
+}
+
+/**
+ * `<img>` that walks a list of candidate URLs, showing the first that loads and
+ * falling back to the next on error. Renders `fallback` until one succeeds.
+ */
+export const FallbackImage = forwardRef<ComponentRef<'img'>, FallbackImageProps>(
+    ({ src, fallback = null, alt = '', ...props }, ref) => {
+        const { src: resolved, status } = useResolvedImageSrc(src);
+
+        if (status === 'loaded' && resolved) {
+            return <img ref={ref} src={resolved} alt={alt} {...props} />;
+        }
+        return <>{fallback}</>;
+    },
+);
+
+FallbackImage.displayName = 'FallbackImage';
diff --git a/packages/appkit-react/src/components/ui/fallback-image/index.ts b/packages/appkit-react/src/components/ui/fallback-image/index.ts
new file mode 100644
index 000000000..dc0966bbe
--- /dev/null
+++ b/packages/appkit-react/src/components/ui/fallback-image/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 './fallback-image';
+export * from './use-resolved-image-src';
diff --git a/packages/appkit-react/src/components/ui/fallback-image/use-resolved-image-src.ts b/packages/appkit-react/src/components/ui/fallback-image/use-resolved-image-src.ts
new file mode 100644
index 0000000000000000000000000000000000000000..29b2c64f78300fce014f1205d8f9b5506ee82414
GIT binary patch
literal 1728
zcmbtUO>fgc5asM&F{j!NiBm*R4QT~c4v_*vO*ut57<-&7b$6@Xb!k-c-+B9yv?)bJ
z!UuoszIpTJ?Tm-LUP3*(P`4W`R%=UHmD81yS6r<N?6}RVwJ>B<rz@sP)lB$oMa9x^
zO`WV+lU*}?o?h*isZm%bA>D?fm`yJxU*;2PM2m30Oj;>Rwa{Eyr8lG+fFBcC%^U>`
zlSJIyDsAb3I>WPaqdGfj8U*&;!rYdYX-kb(H<W5FE1QlEW2QIdif5{<g<Ls!XZHA_
z7`AGqh9DXU2OG2jH!vOus+iqwZW$8(k1OGOUy6{HbyLF9OE#*#<J$AmLqfQQJ!d<^
zFKsMUrL0BminQy}lG6w0O;=THOw+aPrcX-yqiBT0*3Y%`Io3f#5)GAYOHGO8x}e_B
zCo#G@C1W)_p<j>Dqp<0VKYgLvQL;^vN=XQ_Y9{a)Q+CJ|NEgeewD~R<md9s4NA^+c
za#IN7pN=D^bHamw#r>QXcr5X?Smp(K2bN`7r(1C0?)oswAD_`DrCKhf-_CLTu+Vj0
zbk}!iaI-Vzch`mPtV7Qz$<DtUrP1JfufJW+OhJ>fT0bs2Mr6I!91dYbN_ty6gk~ql
zCoucu_&x3y^RKu|wm+4=&V72x_ZE0RKX4r<0lML?A%dgm!h?R8!-jvg_aG1+$6gA=
zVSWwB!l8M$!%+voHE*yPVZ{$6WR|{3os+I117;yG?e~2$Y^UxGC%GTM>=;-FeKw+5
zmOCxG5WxDhK(gf_b=7Ij()Ci55OOV_N(=)Ta{f7mS)|zUzO3WHYjip>6xoh(Jf@Vj
zRyw7lBmAIH8-3U*DO#2*yQTrX%cG|*-d+2uvb(bF*jMV`=q<oOyTfgL)-5Uz8T%mz
zob<m{6I1Lx@!AfyXbg?VIcc_?miP@}GB5>D>PH?-abQzXx17>8B!6CHXxsETPqgj{
fO9cLn=eb#D`*S;R>vgq}D9U{uAAf4TKm`2;NCq(t

literal 0
HcmV?d00001

diff --git a/packages/appkit-react/src/features/staking/components/staking-balance-block/staking-balance-block.tsx b/packages/appkit-react/src/features/staking/components/staking-balance-block/staking-balance-block.tsx
index 36c8621a8..4a1702b4a 100644
--- a/packages/appkit-react/src/features/staking/components/staking-balance-block/staking-balance-block.tsx
+++ b/packages/appkit-react/src/features/staking/components/staking-balance-block/staking-balance-block.tsx
@@ -61,7 +61,7 @@ export const StakingBalanceBlock: FC<StakingBalanceBlockProps> = ({
     return (
         <div className={clsx(styles.container, className)} {...props}>
             <div className={styles.iconContainer}>
-                {isNativeTon ? <TonIconCircle size={36} /> : <Logo size={36} src={jettonInfo?.image} />}
+                {isNativeTon ? <TonIconCircle size={36} /> : <Logo size={36} src={jettonInfo?.images?.[0]} />}
             </div>
 
             <div className={styles.info}>
diff --git a/packages/appkit-react/src/features/staking/components/staking-confirm-modal/staking-confirm-modal.tsx b/packages/appkit-react/src/features/staking/components/staking-confirm-modal/staking-confirm-modal.tsx
index 461bdb393..c73965bd9 100644
--- a/packages/appkit-react/src/features/staking/components/staking-confirm-modal/staking-confirm-modal.tsx
+++ b/packages/appkit-react/src/features/staking/components/staking-confirm-modal/staking-confirm-modal.tsx
@@ -56,7 +56,7 @@ const toUIToken = (
         name: jettonInfo?.name ?? token.ticker,
         decimals: token.decimals,
         address: token.address,
-        logo: token.address === 'ton' ? undefined : jettonInfo?.image,
+        logo: token.address === 'ton' ? undefined : jettonInfo?.images?.[0],
         network,
     };
 };
diff --git a/packages/appkit-react/src/index.ts b/packages/appkit-react/src/index.ts
index c9b9bc891..ceef9e4b3 100644
--- a/packages/appkit-react/src/index.ts
+++ b/packages/appkit-react/src/index.ts
@@ -15,6 +15,7 @@ export * from './components/ui/block';
 export * from './components/ui/info-block';
 export * from './components/ui/button';
 export * from './components/ui/logo';
+export * from './components/ui/fallback-image';
 export * from './components/ui/modal';
 export * from './components/ui/skeleton';
 export * from './components/ui/input';
diff --git a/packages/appkit/src/actions/jettons/get-jetton-info.ts b/packages/appkit/src/actions/jettons/get-jetton-info.ts
index e9a805d32..b8acc5815 100644
--- a/packages/appkit/src/actions/jettons/get-jetton-info.ts
+++ b/packages/appkit/src/actions/jettons/get-jetton-info.ts
@@ -41,43 +41,13 @@ export const getJettonInfo = async (
         limit: 1,
     });
 
-    if (!response.jetton_masters?.length || !response.jetton_masters[0]) {
+    const master = response.masters[0];
+    if (!master) {
         return null;
     }
 
-    const jetton = response.jetton_masters[0];
-    const metadata = response.metadata?.[jetton.address];
-    const tokenInfo = metadata?.token_info?.find((t) => t.valid && t.type === 'jetton_masters') as
-        | {
-              name?: string;
-              symbol?: string;
-              description?: string;
-              image?: string;
-              extra?: { decimals?: string | number; uri?: string };
-          }
-        | undefined;
-
-    let decimals: number | undefined;
-    if (tokenInfo?.extra?.decimals !== undefined) {
-        try {
-            decimals =
-                typeof tokenInfo.extra.decimals === 'string'
-                    ? parseInt(tokenInfo.extra.decimals, 10)
-                    : tokenInfo.extra.decimals;
-        } catch {
-            // ignore
-        }
-    }
-
-    const result: GetJettonInfoReturnType = {
-        address,
-        decimals,
-        name: tokenInfo?.name ?? '',
-        symbol: tokenInfo?.symbol ?? '',
-        description: tokenInfo?.description ?? '',
-        image: tokenInfo?.image,
-        uri: tokenInfo?.extra?.uri,
-    };
+    // Keep the requested bounceable address as the canonical identifier.
+    const result: GetJettonInfoReturnType = { ...master, address };
 
     await appKit.cache.set(cacheKey, result);
 
diff --git a/packages/appkit/src/utils/jetton/jetton-info.ts b/packages/appkit/src/utils/jetton/jetton-info.ts
index 1a5d77c19..654dd376b 100644
--- a/packages/appkit/src/utils/jetton/jetton-info.ts
+++ b/packages/appkit/src/utils/jetton/jetton-info.ts
@@ -40,14 +40,8 @@ export const getJettonsImage = (jetton: Jetton): string | undefined => {
         return;
     }
 
-    return (
-        jetton.info.image.url ||
-        (jetton.info.image.data ? atob(jetton.info.image.data) : undefined) ||
-        jetton.info.image.mediumUrl ||
-        jetton.info.image.largeUrl ||
-        jetton.info.image.smallUrl ||
-        ''
-    );
+    const { urls, data } = jetton.info.image;
+    return urls[0] || (data ? atob(data) : undefined) || '';
 };
 
 export const getFormattedJettonInfo = (jetton: Jetton) => {
diff --git a/packages/appkit/src/utils/nft/nft-info.ts b/packages/appkit/src/utils/nft/nft-info.ts
index 7added6e9..d15819a7e 100644
--- a/packages/appkit/src/utils/nft/nft-info.ts
+++ b/packages/appkit/src/utils/nft/nft-info.ts
@@ -13,12 +13,9 @@ import { middleEllipsis } from '../string/middle-ellipsis';
 export const getNftImage = (nft: NFT): string | null => {
     if (!nft.info?.image) return null;
 
-    const { url, data, mediumUrl, smallUrl, largeUrl } = nft.info.image;
+    const { urls, data } = nft.info.image;
 
-    if (url) return url;
-    if (mediumUrl) return mediumUrl;
-    if (largeUrl) return largeUrl;
-    if (smallUrl) return smallUrl;
+    if (urls[0]) return urls[0];
 
     if (data) {
         try {
diff --git a/packages/mcp/src/services/McpWalletService.ts b/packages/mcp/src/services/McpWalletService.ts
index bfcf4bf78..48fa83e82 100644
--- a/packages/mcp/src/services/McpWalletService.ts
+++ b/packages/mcp/src/services/McpWalletService.ts
@@ -528,40 +528,19 @@ export class McpWalletService {
             limit: 1,
         });
 
-        if (!response.jetton_masters?.length || !response.jetton_masters[0]) {
+        const master = response.masters[0];
+        if (!master) {
             return null;
         }
 
-        const jetton = response.jetton_masters[0];
-        const jettonMasterAddress = (jetton as { address?: string; jetton?: string }).address ?? jetton.jetton;
-        const metadata = jettonMasterAddress ? response.metadata?.[jettonMasterAddress] : undefined;
-        const tokenInfo = metadata?.token_info?.find((item) => item.valid && item.type === 'jetton_masters') as
-            | {
-                  name?: string;
-                  symbol?: string;
-                  description?: string;
-                  image?: string;
-                  extra?: { decimals?: string | number; uri?: string };
-              }
-            | undefined;
-
-        let decimals: number | undefined;
-        if (tokenInfo?.extra?.decimals !== undefined) {
-            const value = tokenInfo.extra.decimals;
-            decimals = typeof value === 'string' ? Number.parseInt(value, 10) : value;
-            if (!Number.isFinite(decimals)) {
-                decimals = undefined;
-            }
-        }
-
         return {
-            address: jettonMasterAddress ?? normalizedAddress,
-            name: tokenInfo?.name ?? '',
-            symbol: tokenInfo?.symbol ?? '',
-            decimals,
-            description: tokenInfo?.description ?? '',
-            image: tokenInfo?.image,
-            uri: tokenInfo?.extra?.uri,
+            address: master.address || normalizedAddress,
+            name: master.name,
+            symbol: master.symbol,
+            decimals: master.decimals,
+            description: master.description,
+            image: master.images?.[0],
+            uri: master.uri,
         };
     }
 
@@ -994,7 +973,7 @@ export class McpWalletService {
             address: nft.address,
             name: nft.info?.name,
             description: nft.info?.description,
-            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.url,
+            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.urls?.[0],
             collection: nft.collection
                 ? {
                       address: nft.collection.address,
@@ -1025,7 +1004,7 @@ export class McpWalletService {
             address: nft.address,
             name: nft.info?.name,
             description: nft.info?.description,
-            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.url,
+            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.urls?.[0],
             collection: nft.collection
                 ? {
                       address: nft.collection.address,
@@ -1057,7 +1036,7 @@ export class McpWalletService {
             address: nft.address,
             name: nft.info?.name,
             description: nft.info?.description,
-            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.url,
+            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.urls?.[0],
             collection: nft.collection
                 ? {
                       address: nft.collection.address,
diff --git a/packages/walletkit/src/api/interfaces/ApiClient.ts b/packages/walletkit/src/api/interfaces/ApiClient.ts
index dd0f83903..081a8265a 100644
--- a/packages/walletkit/src/api/interfaces/ApiClient.ts
+++ b/packages/walletkit/src/api/interfaces/ApiClient.ts
@@ -8,7 +8,8 @@
 
 import type { Address } from '@ton/core';
 
-import type { ToncenterResponseJettonMasters, ToncenterTracesResponse } from '../../types/toncenter/emulation';
+import type { ToncenterTracesResponse } from '../../types/toncenter/emulation';
+import type { JettonMastersResponse } from '../../types/jettons';
 import type { Event } from '../../types/toncenter/AccountEvent';
 import type {
     AccountState,
@@ -138,7 +139,7 @@ export interface ApiClient {
     resolveDnsWallet(domain: string): Promise<string | undefined>;
     backResolveDnsWallet(address: UserFriendlyAddress): Promise<string | undefined>;
 
-    jettonsByAddress(request: GetJettonsByAddressRequest): Promise<ToncenterResponseJettonMasters>;
+    jettonsByAddress(request: GetJettonsByAddressRequest): Promise<JettonMastersResponse>;
     jettonsByOwnerAddress(request: GetJettonsByOwnerRequest): Promise<JettonsResponse>;
 
     getEvents(request: GetEventsRequest): Promise<GetEventsResponse>;
diff --git a/packages/walletkit/src/api/models/core/TokenImage.ts b/packages/walletkit/src/api/models/core/TokenImage.ts
index f27d48f81..b3679233a 100644
--- a/packages/walletkit/src/api/models/core/TokenImage.ts
+++ b/packages/walletkit/src/api/models/core/TokenImage.ts
@@ -7,32 +7,14 @@
  */
 
 /**
- * Token image URLs in various sizes for display purposes.
+ * Token image for display purposes.
  */
 export interface TokenImage {
     /**
-     * Original image URL
+     * Candidate image URLs, ordered best-first (consumers should use the first usable one).
      * @format url
      */
-    url?: string;
-
-    /**
-     * Small thumbnail URL (typically 64x64 or similar)
-     * @format url
-     */
-    smallUrl?: string;
-
-    /**
-     * Medium-sized image URL (typically 256x256 or similar)
-     * @format url
-     */
-    mediumUrl?: string;
-
-    /**
-     * Large image URL (typically 512x512 or higher)
-     * @format url
-     */
-    largeUrl?: string;
+    urls: string[];
 
     /**
      * Raw image data encoded in Base64
diff --git a/packages/walletkit/src/clients/tonapi/ApiClientTonApi.ts b/packages/walletkit/src/clients/tonapi/ApiClientTonApi.ts
index e1e98de51..b2e7658fd 100644
--- a/packages/walletkit/src/clients/tonapi/ApiClientTonApi.ts
+++ b/packages/walletkit/src/clients/tonapi/ApiClientTonApi.ts
@@ -38,7 +38,7 @@ import type {
 } from '../../api/models';
 import type { EmulationResult } from '../../api/models';
 import type { ToncenterTracesResponse } from '../../types/toncenter/emulation';
-import type { ToncenterResponseJettonMasters } from '../toncenter/types/jettons';
+import type { JettonMastersResponse } from '../../types/jettons';
 import { BaseApiClient } from '../BaseApiClient';
 import type { BaseApiClientConfig } from '../BaseApiClient';
 import { TonClientError } from '../TonClientError';
@@ -161,7 +161,7 @@ export class ApiClientTonApi extends BaseApiClient implements ApiClient {
         return state.rawBalance;
     }
 
-    async jettonsByAddress(request: GetJettonsByAddressRequest): Promise<ToncenterResponseJettonMasters> {
+    async jettonsByAddress(request: GetJettonsByAddressRequest): Promise<JettonMastersResponse> {
         const raw = await this.getJson<TonApiJettonInfo>(`/v2/jettons/${request.address}`);
 
         return mapJettonMasters(raw);
diff --git a/packages/walletkit/src/clients/tonapi/mappers/map-jetton-masters.ts b/packages/walletkit/src/clients/tonapi/mappers/map-jetton-masters.ts
index e6f221305..09396ed7b 100644
--- a/packages/walletkit/src/clients/tonapi/mappers/map-jetton-masters.ts
+++ b/packages/walletkit/src/clients/tonapi/mappers/map-jetton-masters.ts
@@ -8,67 +8,45 @@
 
 import { Address } from '@ton/core';
 
-import type { ToncenterResponseJettonMasters } from '../../toncenter/types/jettons';
+import type { JettonInfo, JettonMastersResponse } from '../../../types/jettons';
+import type { EmulationAddressBookEntry } from '../../../api/models';
 import type { TonApiJettonInfo } from '../types/jettons';
 import { asAddressFriendly } from '../../../utils/address';
-import type { AddressBookRowV3 } from '../../../types/toncenter/v3/AddressBookRowV3';
 
 function toRaw(address: string): string {
     return Address.parse(address).toRawString();
 }
 
-export function mapJettonMasters(jettonInfo: TonApiJettonInfo): ToncenterResponseJettonMasters {
-    const addressBook: Record<string, AddressBookRowV3> = {};
-
+export function mapJettonMasters(jettonInfo: TonApiJettonInfo): JettonMastersResponse {
     const jettonRaw = toRaw(jettonInfo.metadata.address);
     const jettonFriendly = asAddressFriendly(jettonInfo.metadata.address);
 
+    const addressBook: Record<string, EmulationAddressBookEntry> = {};
+
     if (jettonInfo.admin) {
-        const adminRaw = toRaw(jettonInfo.admin.address);
-        const adminFriendly = asAddressFriendly(jettonInfo.admin.address);
-        addressBook[adminRaw] = {
-            user_friendly: adminFriendly,
-            domain: jettonInfo.admin.name ?? null,
+        addressBook[toRaw(jettonInfo.admin.address)] = {
+            userFriendly: asAddressFriendly(jettonInfo.admin.address),
+            domain: jettonInfo.admin.name ?? undefined,
             interfaces: [],
         };
     }
 
     addressBook[jettonRaw] = {
-        user_friendly: jettonFriendly,
-        domain: null,
+        userFriendly: jettonFriendly,
+        domain: undefined,
         interfaces: ['jetton_master'],
     };
 
-    return {
-        jetton_masters: [
-            {
-                address: jettonRaw,
-                balance: '0',
-                owner: jettonInfo.admin ? toRaw(jettonInfo.admin.address) : '',
-                jetton: jettonRaw,
-                last_transaction_lt: jettonInfo.last_transaction_lt?.toString() ?? '0',
-                code_hash: jettonInfo.code_hash ?? '',
-                data_hash: jettonInfo.data_hash ?? '',
-            },
-        ],
-        address_book: addressBook,
-        metadata: {
-            [jettonRaw]: {
-                is_indexed: true,
-                token_info: [
-                    {
-                        valid: true,
-                        type: 'jetton_masters',
-                        name: jettonInfo.metadata.name,
-                        symbol: jettonInfo.metadata.symbol,
-                        description: jettonInfo.metadata.description,
-                        image: jettonInfo.metadata.image,
-                        extra: {
-                            decimals: jettonInfo.metadata.decimals,
-                        },
-                    },
-                ],
-            },
-        },
+    const master: JettonInfo = {
+        address: jettonFriendly,
+        name: jettonInfo.metadata.name,
+        symbol: jettonInfo.metadata.symbol,
+        description: jettonInfo.metadata.description ?? '',
+        decimals: jettonInfo.metadata.decimals ? parseInt(jettonInfo.metadata.decimals, 10) : undefined,
+        // Proxied preview (cache.tonapi.io) first, raw metadata image last.
+        images: [jettonInfo.preview, jettonInfo.metadata.image].filter((url): url is string => Boolean(url)),
+        totalSupply: jettonInfo.total_supply,
     };
+
+    return { masters: [master], addressBook };
 }
diff --git a/packages/walletkit/src/clients/tonapi/mappers/map-nft-items.ts b/packages/walletkit/src/clients/tonapi/mappers/map-nft-items.ts
index a4ed80a55..8260303c1 100644
--- a/packages/walletkit/src/clients/tonapi/mappers/map-nft-items.ts
+++ b/packages/walletkit/src/clients/tonapi/mappers/map-nft-items.ts
@@ -9,7 +9,22 @@
 import type { NFT, NFTsResponse } from '../../../api/models';
 import type { AddressBookEntry } from '../../../api/models/core/AddressBook';
 import { asAddressFriendly } from '../../../utils/address';
-import type { TonApiNftItem } from '../types/nfts';
+import type { TonApiNftItem, TonApiNftPreview } from '../types/nfts';
+
+/** Pixel area for a `"WxH"` resolution string; 0 when unparseable. */
+function previewArea(resolution: string): number {
+    const parts = resolution.split('x');
+    const width = parseInt(parts[0] ?? '', 10);
+    const height = parseInt(parts[1] ?? '', 10);
+    return Number.isFinite(width) && Number.isFinite(height) ? width * height : 0;
+}
+
+/** Preview URLs ordered largest-first, so consumers prefer the highest-resolution image. */
+function previewUrlsLargestFirst(previews?: TonApiNftPreview[]): string[] {
+    return [...(previews ?? [])]
+        .sort((a, b) => previewArea(b.resolution) - previewArea(a.resolution))
+        .map((preview) => preview.url);
+}
 
 export function mapNftItem(item: TonApiNftItem): NFT {
     const isVerified = item.trust === 'whitelist' || item.verified;
@@ -29,7 +44,14 @@ export function mapNftItem(item: TonApiNftItem): NFT {
             name: item.metadata.name ?? '',
             description: item.metadata.description ?? '',
             image: {
-                url: item.metadata.image ?? '',
+                // Largest proxied preview first (crisp + more likely to load), original metadata image last.
+                urls: [
+                    ...new Set(
+                        [...previewUrlsLargestFirst(item.previews), item.metadata.image].filter((url): url is string =>
+                            Boolean(url),
+                        ),
+                    ),
+                ],
             },
         },
         attributes: item.metadata.attributes?.map((attr) => ({
diff --git a/packages/walletkit/src/clients/tonapi/mappers/map-user-jettons.ts b/packages/walletkit/src/clients/tonapi/mappers/map-user-jettons.ts
index 240538cde..e3683cc25 100644
--- a/packages/walletkit/src/clients/tonapi/mappers/map-user-jettons.ts
+++ b/packages/walletkit/src/clients/tonapi/mappers/map-user-jettons.ts
@@ -36,7 +36,7 @@ export function mapUserJettons(rawResponse: TonApiJettonsBalances): JettonsRespo
                 name: wallet.jetton.name,
                 description: wallet.jetton.description ?? '',
                 image: {
-                    url: wallet.jetton.image,
+                    urls: wallet.jetton.image ? [wallet.jetton.image] : [],
                 },
                 symbol: wallet.jetton.symbol,
             },
diff --git a/packages/walletkit/src/clients/toncenter/ApiClientToncenter.ts b/packages/walletkit/src/clients/toncenter/ApiClientToncenter.ts
index 2a80c351a..57a087b45 100644
--- a/packages/walletkit/src/clients/toncenter/ApiClientToncenter.ts
+++ b/packages/walletkit/src/clients/toncenter/ApiClientToncenter.ts
@@ -9,7 +9,7 @@
 import { Address } from '@ton/core';
 
 import { Base64ToBigInt, Base64Normalize, Base64ToHex } from '../../utils/base64';
-import type { JettonInfo } from '../../types';
+import type { JettonInfo, JettonMastersResponse } from '../../types';
 import type { ToncenterEmulationResponse } from './types/raw-emulation';
 import type {
     ApiClient,
@@ -58,6 +58,7 @@ import { mapAccountStatesEntry, makeNonExistingAccountState } from './mappers/ma
 import type { ToncenterAccountStatesResponse } from './types/account-states';
 import type { EmulationResult } from '../../api/models';
 import { mapToncenterEmulationResponse } from './mappers/map-emulation';
+import { mapJettonMastersResponse } from './mappers/map-jetton-masters';
 import { BaseApiClient } from '../BaseApiClient';
 import type { BaseApiClientConfig } from '../BaseApiClient';
 import type { V2AddressInformation, V2SendMessageResult, V3RunGetMethodRequest, TonBlockIdExt } from './types/internal';
@@ -367,12 +368,14 @@ export class ApiClientToncenter extends BaseApiClient implements ApiClient {
         return undefined;
     }
 
-    async jettonsByAddress(request: GetJettonsByAddressRequest): Promise<ToncenterResponseJettonMasters> {
-        return this.getJson<ToncenterResponseJettonMasters>('/api/v3/jetton/masters', {
+    async jettonsByAddress(request: GetJettonsByAddressRequest): Promise<JettonMastersResponse> {
+        const raw = await this.getJson<ToncenterResponseJettonMasters>('/api/v3/jetton/masters', {
             address: request.address,
             offset: request.offset,
             limit: request.limit,
         });
+
+        return mapJettonMastersResponse(raw);
     }
 
     async jettonsByOwnerAddress(request: GetJettonsByOwnerRequest): Promise<JettonsResponse> {
@@ -403,7 +406,7 @@ export class ApiClientToncenter extends BaseApiClient implements ApiClient {
                     name: jettonInfo.name,
                     description: jettonInfo.description,
                     image: {
-                        url: jettonInfo.image,
+                        urls: jettonInfo.images ?? [],
                         data: jettonInfo.image_data,
                     },
                     symbol: jettonInfo.symbol,
@@ -454,7 +457,7 @@ export class ApiClientToncenter extends BaseApiClient implements ApiClient {
                 symbol: metadataJettonInfo.symbol ?? '',
                 description: metadataJettonInfo.description ?? '',
                 decimals,
-                image: metadataJettonInfo.image,
+                images: metadataJettonInfo.image ? [metadataJettonInfo.image] : undefined,
                 image_data: metadataJettonInfo.extra.image_data,
                 uri: metadataJettonInfo.extra.uri,
             };
diff --git a/packages/walletkit/src/clients/toncenter/mappers/map-address-book.ts b/packages/walletkit/src/clients/toncenter/mappers/map-address-book.ts
new file mode 100644
index 000000000..e78ae72e1
--- /dev/null
+++ b/packages/walletkit/src/clients/toncenter/mappers/map-address-book.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (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 { AddressBookRowV3 } from '../../../types/toncenter/v3/AddressBookRowV3';
+import type { EmulationAddressBookEntry } from '../../../api/models';
+import { asAddressFriendly } from '../../../utils/address';
+
+/**
+ * Normalizes a raw toncenter `address_book` map into our owned address-book model.
+ */
+export function mapAddressBook(
+    addressBook?: Record<string, AddressBookRowV3>,
+): Record<string, EmulationAddressBookEntry> {
+    return Object.fromEntries(
+        Object.entries(addressBook ?? {}).map(([addr, row]) => [
+            addr,
+            {
+                domain: row.domain ?? undefined,
+                userFriendly: asAddressFriendly(row.user_friendly),
+                interfaces: row.interfaces ?? [],
+            },
+        ]),
+    );
+}
diff --git a/packages/walletkit/src/clients/toncenter/mappers/map-emulation.ts b/packages/walletkit/src/clients/toncenter/mappers/map-emulation.ts
index 5eda13c5b..be4e6b4f8 100644
--- a/packages/walletkit/src/clients/toncenter/mappers/map-emulation.ts
+++ b/packages/walletkit/src/clients/toncenter/mappers/map-emulation.ts
@@ -23,13 +23,13 @@ import type {
     EmulationAccountState,
     EmulationMessage,
     EmulationAction,
-    EmulationAddressBookEntry,
     AccountStatus,
 } from '../../../api/models';
 import { Base64ToHex, asBase64 } from '../../../utils/base64';
 import { asHex } from '../../../utils/hex';
 import { asAddressFriendly, asMaybeAddressFriendly } from '../../../utils/address';
 import { parseMsgSizeCount } from '../utils';
+import { mapAddressBook } from './map-address-book';
 
 function normalizeAccountStatus(status: string): AccountStatus {
     if (status === 'active') return 'active';
@@ -189,16 +189,7 @@ export function mapToncenterEmulationResponse(raw: ToncenterEmulationResponse):
         Object.entries(raw.transactions ?? {}).map(([hash, tx]) => [Base64ToHex(hash), mapTransaction(tx)]),
     );
 
-    const addressBook: Record<string, EmulationAddressBookEntry> = Object.fromEntries(
-        Object.entries(raw.address_book ?? {}).map(([addr, row]) => [
-            addr,
-            {
-                domain: row.domain ?? undefined,
-                userFriendly: asAddressFriendly(row.user_friendly),
-                interfaces: row.interfaces ?? [],
-            },
-        ]),
-    );
+    const addressBook = mapAddressBook(raw.address_book);
 
     const codeCells: Record<string, Base64String> = Object.fromEntries(
         Object.entries(raw.code_cells ?? {}).map(([hash, cell]) => [Base64ToHex(hash), asBase64(cell)]),
diff --git a/packages/walletkit/src/clients/toncenter/mappers/map-jetton-masters.ts b/packages/walletkit/src/clients/toncenter/mappers/map-jetton-masters.ts
new file mode 100644
index 000000000..345e2fcbb
--- /dev/null
+++ b/packages/walletkit/src/clients/toncenter/mappers/map-jetton-masters.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { JettonInfo, JettonMastersResponse } from '../../../types/jettons';
+import type { EmulationTokenInfoMasters } from '../types/metadata';
+import type { ToncenterResponseJettonMasters } from '../types/jettons';
+import { asAddressFriendly } from '../../../utils/address';
+import { mapAddressBook } from './map-address-book';
+
+/**
+ * Collects candidate image URLs (best-first) from a toncenter jetton-masters
+ * token_info: the wire `image` plus the proxied size variants under `extra`.
+ */
+function collectImages(info: EmulationTokenInfoMasters): string[] {
+    const candidates = [info.image, info.extra._image_big, info.extra._image_medium, info.extra._image_small];
+    return [...new Set(candidates.filter((url): url is string => Boolean(url)))];
+}
+
+/**
+ * Maps a raw toncenter `/api/v3/jetton/masters` response into the normalized
+ * {@link JettonMastersResponse}.
+ */
+export function mapJettonMastersResponse(raw: ToncenterResponseJettonMasters): JettonMastersResponse {
+    const masters: JettonInfo[] = raw.jetton_masters.map((master) => {
+        const tokenInfo = raw.metadata[master.address]?.token_info?.find(
+            (info): info is EmulationTokenInfoMasters => info.valid && info.type === 'jetton_masters',
+        );
+
+        return {
+            address: asAddressFriendly(master.jetton),
+            name: tokenInfo?.name ?? '',
+            symbol: tokenInfo?.symbol ?? '',
+            description: tokenInfo?.description ?? '',
+            decimals: tokenInfo?.extra.decimals ? parseInt(tokenInfo.extra.decimals, 10) : undefined,
+            images: tokenInfo ? collectImages(tokenInfo) : [],
+            image_data: tokenInfo?.extra.image_data,
+            uri: tokenInfo?.extra.uri,
+        };
+    });
+
+    return { masters, addressBook: mapAddressBook(raw.address_book) };
+}
diff --git a/packages/walletkit/src/clients/toncenter/types/metadata.ts b/packages/walletkit/src/clients/toncenter/types/metadata.ts
index 0c5b93df1..a4125fca9 100644
--- a/packages/walletkit/src/clients/toncenter/types/metadata.ts
+++ b/packages/walletkit/src/clients/toncenter/types/metadata.ts
@@ -35,6 +35,7 @@ export interface EmulationTokenInfoMasters extends EmulationTokenInfoBase {
     name: string;
     symbol: string;
     description: string;
+    /** Raw toncenter wire image (single URL). */
     image?: string;
     extra: {
         _image_big?: string;
diff --git a/packages/walletkit/src/clients/toncenter/types/nfts.ts b/packages/walletkit/src/clients/toncenter/types/nfts.ts
index f8d373ee6..a22d9bd75 100644
--- a/packages/walletkit/src/clients/toncenter/types/nfts.ts
+++ b/packages/walletkit/src/clients/toncenter/types/nfts.ts
@@ -68,10 +68,16 @@ export function toApiTokenInfo(data: TokenInfo): APITokenInfo {
         name: data.name,
         description: data.description,
         image: {
-            url: data.image ?? data.extra?._image_medium,
-            smallUrl: data.extra?._image_small,
-            mediumUrl: data.extra?._image_medium,
-            largeUrl: data.extra?._image_big,
+            urls: [
+                ...new Set(
+                    [
+                        data.image ?? data.extra?._image_medium,
+                        data.extra?._image_medium,
+                        data.extra?._image_big,
+                        data.extra?._image_small,
+                    ].filter((url): url is string => Boolean(url)),
+                ),
+            ],
         },
         animation: {
             url: animationUrl,
diff --git a/packages/walletkit/src/clients/toncenter/types/v3/NFTCollectionV3.ts b/packages/walletkit/src/clients/toncenter/types/v3/NFTCollectionV3.ts
index 755cfccca..88fc93328 100644
--- a/packages/walletkit/src/clients/toncenter/types/v3/NFTCollectionV3.ts
+++ b/packages/walletkit/src/clients/toncenter/types/v3/NFTCollectionV3.ts
@@ -68,10 +68,13 @@ export function tokenMetaToNftCollection(address: string, data: TokenInfoNFTColl
         name: data.name,
         description: data.description,
         image: {
-            url: image,
-            smallUrl: data?.extra?._image_small,
-            mediumUrl: data?.extra?._image_medium,
-            largeUrl: data?.extra?._image_big,
+            urls: [
+                ...new Set(
+                    [image, data?.extra?._image_medium, data?.extra?._image_big, data?.extra?._image_small].filter(
+                        (url): url is string => Boolean(url),
+                    ),
+                ),
+            ],
         },
         extra: data.extra,
     };
diff --git a/packages/walletkit/src/contracts/w5/WalletV5R1.fixture.ts b/packages/walletkit/src/contracts/w5/WalletV5R1.fixture.ts
index 51a4f573c..25e1a7635 100644
--- a/packages/walletkit/src/contracts/w5/WalletV5R1.fixture.ts
+++ b/packages/walletkit/src/contracts/w5/WalletV5R1.fixture.ts
@@ -10,14 +10,14 @@ import { Dictionary } from '@ton/core';
 
 import { mockFn } from '../../../mock.config';
 import type { ApiClient, GetEventsResponse } from '../../api/interfaces';
-import type { ToncenterTracesResponse } from '../../types';
+import type { JettonMastersResponse, ToncenterTracesResponse } from '../../types';
 import type { AccountState, EmulationResponse, MasterchainInfo } from '../../api/models';
 import type { ResponseUserJettons } from '../../types/export/responses/jettons';
 import type { NftItemsResponse } from '../../clients/toncenter/types/nfts';
 import type { WalletV5R1Id } from './WalletV5R1';
 import { walletV5ConfigToCell } from './WalletV5R1';
 import { WalletV5R1Adapter } from './WalletV5R1Adapter';
-import type { ToncenterResponseJettonMasters, ToncenterTransactionsResponse } from '../../types/toncenter/emulation';
+import type { ToncenterTransactionsResponse } from '../../types/toncenter/emulation';
 import { Signer } from '../../utils/Signer';
 import { Network } from '../../api/models';
 
@@ -99,7 +99,7 @@ export function createMockApiClient(): ApiClient {
         getTransactionsByHash: mockFn().mockResolvedValue({} as ToncenterTransactionsResponse),
         resolveDnsWallet: mockFn().mockResolvedValue({} as string | undefined),
         backResolveDnsWallet: mockFn().mockResolvedValue({} as string | undefined),
-        jettonsByAddress: mockFn().mockResolvedValue({} as ToncenterResponseJettonMasters),
+        jettonsByAddress: mockFn().mockResolvedValue({ masters: [], addressBook: {} } as JettonMastersResponse),
         jettonsByOwnerAddress: mockFn().mockResolvedValue({
             jettons: [],
             address_book: {},
diff --git a/packages/walletkit/src/core/JettonsManager.ts b/packages/walletkit/src/core/JettonsManager.ts
index 6067985ca..dcdac6c7a 100644
--- a/packages/walletkit/src/core/JettonsManager.ts
+++ b/packages/walletkit/src/core/JettonsManager.ts
@@ -112,41 +112,21 @@ export class JettonsManager implements JettonsAPI {
             }
 
             const apiClient = this.networkManager.getClient(targetNetwork);
-            const jettonFromApi = await apiClient.jettonsByAddress({
+            const { masters } = await apiClient.jettonsByAddress({
                 address: address,
                 offset: 0,
                 limit: 1,
             });
 
-            if (jettonFromApi && jettonFromApi?.jetton_masters?.length > 0 && jettonFromApi?.jetton_masters?.[0]) {
-                const jetton = jettonFromApi?.jetton_masters?.[0];
-                const metadata = jettonFromApi?.metadata?.[jetton.address];
-                const tokenInfo = metadata?.token_info?.find((t) => t.valid && t.type === 'jetton_masters') as
-                    | EmulationTokenInfoMasters
-                    | undefined;
-
-                let decimals: number;
-                try {
-                    decimals = parseInt(tokenInfo?.extra.decimals as string, 10);
-                } catch {
-                    decimals = 9;
-                }
-
-                const result: JettonInfo = {
-                    address: jetton.jetton,
-                    name: tokenInfo?.name ?? '',
-                    symbol: tokenInfo?.symbol ?? '',
-                    description: tokenInfo?.description ?? '',
-                    decimals: decimals,
-                    image: tokenInfo?.image,
-                    uri: tokenInfo?.extra?.uri,
-                    totalSupply: '0',
-                };
-                this.cache.set(cacheKey, result);
-
-                return result;
+            const info = masters[0];
+            if (!info) {
+                return null;
             }
-            return null;
+
+            const result: JettonInfo = { ...info, decimals: info.decimals ?? 9 };
+            this.cache.set(cacheKey, result);
+
+            return result;
         } catch (error) {
             log.error('Error getting jetton info', { error, jettonAddress, network: targetNetwork });
             return null;
@@ -218,7 +198,7 @@ export class JettonsManager implements JettonsAPI {
                 name: emulationInfo.name,
                 symbol: emulationInfo.symbol,
                 description: emulationInfo.description,
-                image: emulationInfo.image,
+                images: emulationInfo.image ? [emulationInfo.image] : undefined,
                 decimals:
                     typeof emulationInfo.extra.decimals === 'string'
                         ? parseInt(emulationInfo.extra.decimals, 10)
diff --git a/packages/walletkit/src/types/index.ts b/packages/walletkit/src/types/index.ts
index a775c1b38..b7369a547 100644
--- a/packages/walletkit/src/types/index.ts
+++ b/packages/walletkit/src/types/index.ts
@@ -33,6 +33,7 @@ export { DEFAULT_DURABLE_EVENTS_CONFIG } from './durableEvents';
 // Jettons types
 export type {
     JettonInfo,
+    JettonMastersResponse,
     JettonVerification,
     AddressJetton,
     JettonBalance,
diff --git a/packages/walletkit/src/types/jettons.ts b/packages/walletkit/src/types/jettons.ts
index c5a3b4f06..184ed586e 100644
--- a/packages/walletkit/src/types/jettons.ts
+++ b/packages/walletkit/src/types/jettons.ts
@@ -8,7 +8,7 @@
 
 // Jettons API types based on JETTONS.md specification
 
-import type { Jetton, Network } from '../api/models';
+import type { EmulationAddressBookEntry, Jetton, Network } from '../api/models';
 
 // === Core Jetton Information ===
 export interface JettonInfo {
@@ -18,13 +18,22 @@ export interface JettonInfo {
     description: string;
     decimals?: number;
     totalSupply?: string;
-    image?: string;
+    images?: string[];
     image_data?: string;
     uri?: string;
     verification?: JettonVerification;
     metadata?: Record<string, unknown>;
 }
 
+/**
+ * Normalized response for a jetton-masters lookup.
+ * Both API clients map their raw responses into this shape.
+ */
+export interface JettonMastersResponse {
+    masters: JettonInfo[];
+    addressBook: Record<string, EmulationAddressBookEntry>;
+}
+
 export interface JettonVerification {
     verified: boolean;
     source?: 'toncenter' | 'community' | 'manual';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0ba1f2faf..c1015c938 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -210,18 +210,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)
@@ -261,6 +276,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
@@ -285,6 +303,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))
@@ -1520,6 +1541,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'}
@@ -3378,6 +3402,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'}
@@ -4145,6 +4193,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==}
 
@@ -4681,6 +4732,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'}
@@ -6052,6 +6106,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==}
 
@@ -6549,6 +6606,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'}
@@ -7543,10 +7607,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
@@ -8667,6 +8753,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
@@ -10546,6 +10634,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
@@ -11434,6 +11565,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
@@ -11938,6 +12073,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
@@ -13563,6 +13700,8 @@ snapshots:
 
   minipass@7.1.3: {}
 
+  mitt@3.0.1: {}
+
   mkdirp-classic@0.5.3: {}
 
   mkdirp@1.0.4: {}
@@ -14092,6 +14231,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
@@ -15279,8 +15424,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):

From 9b5d2367e803b55bc81c6c35473af2715cb9fc07 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 08:10:55 +0400
Subject: [PATCH 02/49] refactor(demo-wallet): remove dead pre-redesign
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop components left unused after the redesign (no importers):
ActionPreviewList, CreateWallet, ImportWallet, LedgerSetup — the
wallet create/import/ledger flows now live in features/wallet-setup
and features/ledger.
---
 .../src/components/ActionPreviewList.tsx      |  95 -----
 .../src/components/CreateWallet.tsx           | 132 -------
 .../src/components/ImportWallet.tsx           | 332 ------------------
 .../src/components/LedgerSetup.tsx            |  79 -----
 apps/demo-wallet/src/components/index.ts      |   3 -
 5 files changed, 641 deletions(-)
 delete mode 100644 apps/demo-wallet/src/components/ActionPreviewList.tsx
 delete mode 100644 apps/demo-wallet/src/components/CreateWallet.tsx
 delete mode 100644 apps/demo-wallet/src/components/ImportWallet.tsx
 delete mode 100644 apps/demo-wallet/src/components/LedgerSetup.tsx

diff --git a/apps/demo-wallet/src/components/ActionPreviewList.tsx b/apps/demo-wallet/src/components/ActionPreviewList.tsx
deleted file mode 100644
index 467dc7ad5..000000000
--- a/apps/demo-wallet/src/components/ActionPreviewList.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, { memo, useMemo } from 'react';
-import type { ToncenterEmulationResponse } from '@ton/walletkit';
-import { emulationEvent } from '@ton/walletkit';
-
-import { shortenAddress } from '@/utils';
-
-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, 6)}
-                                                </span>
-                                            ))}
-                                        </div>
-                                    )}
-                                </div>
-                            </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/ImportWallet.tsx b/apps/demo-wallet/src/components/ImportWallet.tsx
deleted file mode 100644
index 2590ae4eb..000000000
--- a/apps/demo-wallet/src/components/ImportWallet.tsx
+++ /dev/null
@@ -1,332 +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, useMemo } from 'react';
-import type { NetworkType } from '@demo/wallet-core';
-
-import {
-    applyMnemonicPaste,
-    evaluateBip39Slots,
-    extractMnemonicWordsFromPaste,
-    isImportableBip39,
-} from '../utils/bip39English';
-import type { Bip39SlotValidation } from '../utils/bip39English';
-import { Button } from './Button';
-import { NetworkSelector } from './NetworkSelector';
-
-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 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;
-}
-
-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 [network, setNetwork] = useState<NetworkType>('mainnet');
-    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-
-    useEffect(() => {
-        inputRefs.current = inputRefs.current.slice(0, TOTAL_WORDS);
-        inputRefs.current[0]?.focus();
-    }, []);
-
-    const focusCell = (index: number) => {
-        setTimeout(() => inputRefs.current[index]?.focus(), 0);
-    };
-
-    const handleWordChange = (index: number, value: string) => {
-        const cleanValue = value.toLowerCase().replace(/[^a-z]/g, '');
-        setWords((prev) => {
-            const next = [...prev];
-            next[index] = cleanValue;
-            return next;
-        });
-    };
-
-    const handleSubmit = () => {
-        const v = evaluateBip39Slots(words);
-        if (!isImportableBip39(v)) return;
-        onImport(v.nonEmptyWords, interfaceType, walletVersion, network);
-    };
-
-    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) {
-            case 'Backspace':
-                if (value.length === 0 && !isFirst) {
-                    const prev = inputRefs.current[index - 1];
-                    if (prev) {
-                        prev.focus();
-                        const end = prev.value.length;
-                        prev.setSelectionRange(end, end);
-                    }
-                }
-                return;
-            case 'Enter':
-                event.preventDefault();
-                if (isLast) handleSubmit();
-                else inputRefs.current[index + 1]?.focus();
-                return;
-            case 'ArrowLeft':
-                if (!isFirst) inputRefs.current[index - 1]?.focus();
-                return;
-            case 'ArrowRight':
-                if (!isLast) inputRefs.current[index + 1]?.focus();
-                return;
-            case ' ':
-                if (!isLast && value.length > 0) {
-                    event.preventDefault();
-                    inputRefs.current[index + 1]?.focus();
-                }
-                return;
-        }
-    };
-
-    const handlePaste = (index: number, event: React.ClipboardEvent) => {
-        const text = event.clipboardData.getData('text/plain') || event.clipboardData.getData('text');
-        const tokens = extractMnemonicWordsFromPaste(text);
-
-        if (tokens.length === 0) {
-            if (text.trim().length > 0) {
-                event.preventDefault();
-                handleWordChange(index, text);
-            }
-            return;
-        }
-
-        event.preventDefault();
-        const { nextWords, focusIndex } = applyMnemonicPaste(words, index, tokens);
-        setWords(nextWords);
-        focusCell(focusIndex);
-    };
-
-    const handleClickPaste = () => {
-        void navigator.clipboard
-            ?.readText()
-            .then((text) => {
-                const tokens = extractMnemonicWordsFromPaste(text ?? '');
-                if (tokens.length < 12) return;
-                const { nextWords, focusIndex } = applyMnemonicPaste(words, 0, tokens);
-                setWords(nextWords);
-                focusCell(focusIndex);
-            })
-            .catch(() => {
-                /* Clipboard API missing or denied; user can still Ctrl+V into a cell. */
-            });
-    };
-
-    const clearAll = () => {
-        setWords(Array(TOTAL_WORDS).fill(''));
-        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 (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';
-    };
-
-    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>
-
-            <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' },
-                        ]}
-                    />
-                    <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>
-
-                <div className="flex items-center justify-between mb-3">
-                    <span className="text-sm text-gray-500" data-testid="word-count">
-                        {filledCount}/{TOTAL_WORDS} words
-                    </span>
-                    <div className="flex space-x-3">
-                        <button
-                            onClick={clearAll}
-                            data-testid="clear-mnemonic"
-                            className="text-xs text-gray-500 hover:text-gray-700 underline"
-                            type="button"
-                        >
-                            Clear
-                        </button>
-                        <button
-                            onClick={handleClickPaste}
-                            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">
-                    {words.map((word, index) => (
-                        <div key={index} className="relative">
-                            <input
-                                ref={(el) => {
-                                    inputRefs.current[index] = el;
-                                }}
-                                type="text"
-                                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}
-                            />
-                            <span className="absolute -top-1 left-0.5 text-[10px] text-gray-400 bg-white px-0.5">
-                                {index + 1}
-                            </span>
-                        </div>
-                    ))}
-                </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>
-            </div>
-        </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/index.ts b/apps/demo-wallet/src/components/index.ts
index 777dbe4e5..995589d4d 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -11,12 +11,9 @@ 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';

From 9db1ec74efbacba756ae56da6381e10cd9ddb499 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 09:17:11 +0400
Subject: [PATCH 03/49] refactor(demo-wallet): move shared hooks to core/hooks

Relocate cross-cutting hooks into core/hooks (kebab-case):
useCountUp, useMediaQuery, usePasteHandler. Repoint consumers and
drop them from the flat hooks barrel.
---
 apps/demo-wallet/src/components/BalanceTotal.tsx      |  2 +-
 apps/demo-wallet/src/components/DashboardAssetRow.tsx |  2 +-
 .../src/core/components/ui/modal/modal.tsx            |  2 +-
 apps/demo-wallet/src/core/hooks/index.ts              | 11 +++++++++++
 .../useCountUp.ts => core/hooks/use-count-up.ts}      |  0
 .../hooks/use-media-query.ts}                         |  0
 .../hooks/use-paste-handler.ts}                       |  2 +-
 apps/demo-wallet/src/hooks/index.ts                   |  3 ---
 apps/demo-wallet/src/pages/WalletDashboard.tsx        |  3 ++-
 9 files changed, 17 insertions(+), 8 deletions(-)
 create mode 100644 apps/demo-wallet/src/core/hooks/index.ts
 rename apps/demo-wallet/src/{hooks/useCountUp.ts => core/hooks/use-count-up.ts} (100%)
 rename apps/demo-wallet/src/{hooks/useMediaQuery.ts => core/hooks/use-media-query.ts} (100%)
 rename apps/demo-wallet/src/{hooks/usePasteHandler.ts => core/hooks/use-paste-handler.ts} (97%)

diff --git a/apps/demo-wallet/src/components/BalanceTotal.tsx b/apps/demo-wallet/src/components/BalanceTotal.tsx
index 8708f8ea8..b45521b64 100644
--- a/apps/demo-wallet/src/components/BalanceTotal.tsx
+++ b/apps/demo-wallet/src/components/BalanceTotal.tsx
@@ -11,7 +11,7 @@ import { Copy } from 'lucide-react';
 import { toast } from 'sonner';
 import { useWallet, useJettons, useRates } from '@demo/wallet-core';
 
-import { useCountUp } from '@/hooks/useCountUp';
+import { useCountUp } from '@/core/hooks/use-count-up';
 import { findRate, formatUsdParts, shortenAddress, toDecimal } from '@/utils';
 
 const TON_DECIMALS = 9;
diff --git a/apps/demo-wallet/src/components/DashboardAssetRow.tsx b/apps/demo-wallet/src/components/DashboardAssetRow.tsx
index 95bd35ae4..c8073cfd4 100644
--- a/apps/demo-wallet/src/components/DashboardAssetRow.tsx
+++ b/apps/demo-wallet/src/components/DashboardAssetRow.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 
 import { FallbackImage } from './FallbackImage';
 
-import { useCountUp } from '@/hooks/useCountUp';
+import { useCountUp } from '@/core/hooks/use-count-up';
 import { formatAmount, formatPercent, formatUsd } from '@/utils';
 
 interface DashboardAssetRowProps {
diff --git a/apps/demo-wallet/src/core/components/ui/modal/modal.tsx b/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
index 184867500..a0afbf283 100644
--- a/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
+++ b/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
@@ -15,7 +15,7 @@ import { Drawer, DrawerContent, DrawerTitle } from '../drawer';
 
 import { Button } from '@/components/Button';
 import { cn } from '@/lib/utils';
-import { useIsMobile } from '@/hooks/useMediaQuery';
+import { useIsMobile } from '@/core/hooks/use-media-query';
 
 export interface ModalContainerProps extends ComponentProps<'div'> {
     isOpened: boolean;
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..57bf60875
--- /dev/null
+++ b/apps/demo-wallet/src/core/hooks/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 './use-count-up';
+export * from './use-media-query';
+export * from './use-paste-handler';
diff --git a/apps/demo-wallet/src/hooks/useCountUp.ts b/apps/demo-wallet/src/core/hooks/use-count-up.ts
similarity index 100%
rename from apps/demo-wallet/src/hooks/useCountUp.ts
rename to apps/demo-wallet/src/core/hooks/use-count-up.ts
diff --git a/apps/demo-wallet/src/hooks/useMediaQuery.ts b/apps/demo-wallet/src/core/hooks/use-media-query.ts
similarity index 100%
rename from apps/demo-wallet/src/hooks/useMediaQuery.ts
rename to apps/demo-wallet/src/core/hooks/use-media-query.ts
diff --git a/apps/demo-wallet/src/hooks/usePasteHandler.ts b/apps/demo-wallet/src/core/hooks/use-paste-handler.ts
similarity index 97%
rename from apps/demo-wallet/src/hooks/usePasteHandler.ts
rename to apps/demo-wallet/src/core/hooks/use-paste-handler.ts
index 32fb23445..599cabee9 100644
--- a/apps/demo-wallet/src/hooks/usePasteHandler.ts
+++ b/apps/demo-wallet/src/core/hooks/use-paste-handler.ts
@@ -8,7 +8,7 @@
 
 import { useEffect } from 'react';
 
-import { log } from '../utils/logger';
+import { log } from '@/utils/logger';
 
 // Hook to listen for paste events and handle TON Connect URLs
 export function usePasteHandler(handleTonConnectUrl: (url: string) => Promise<void>) {
diff --git a/apps/demo-wallet/src/hooks/index.ts b/apps/demo-wallet/src/hooks/index.ts
index bd4307414..cac4922a4 100644
--- a/apps/demo-wallet/src/hooks/index.ts
+++ b/apps/demo-wallet/src/hooks/index.ts
@@ -6,11 +6,8 @@
  *
  */
 
-export * from './useCountUp';
 export * from './useFormattedJetton';
 export * from './useJettonInfo';
-export * from './useMediaQuery';
-export * from './usePasteHandler';
 export * from './useReceivedToasts';
 export * from './useTonWallet';
 export * from './useWalletDataUpdater';
diff --git a/apps/demo-wallet/src/pages/WalletDashboard.tsx b/apps/demo-wallet/src/pages/WalletDashboard.tsx
index 61744ae9d..fa8eb1d0e 100644
--- a/apps/demo-wallet/src/pages/WalletDashboard.tsx
+++ b/apps/demo-wallet/src/pages/WalletDashboard.tsx
@@ -27,7 +27,8 @@ import {
     SignMessageRequestModal,
     NftsCard,
 } from '../components';
-import { usePasteHandler } from '../hooks/usePasteHandler';
+
+import { usePasteHandler } from '@/core/hooks/use-paste-handler';
 
 export const WalletDashboard: React.FC = () => {
     const { getAvailableWallets, savedWallets, getActiveWallet } = useWallet();

From 2ca06da92cbc26ddf9e559eb6559ba02e61fe394 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 09:39:41 +0400
Subject: [PATCH 04/49] refactor(demo-wallet): move shared utils to core/utils

---
 apps/demo-wallet/src/components/BalanceTotal.tsx           | 2 +-
 apps/demo-wallet/src/components/DashboardAssetRow.tsx      | 2 +-
 apps/demo-wallet/src/components/DashboardAssets.tsx        | 2 +-
 apps/demo-wallet/src/components/JettonFlow.tsx             | 3 ++-
 apps/demo-wallet/src/components/RecentTransactions.tsx     | 3 ++-
 apps/demo-wallet/src/components/TraceRow.tsx               | 2 +-
 .../src/components/TransactionRequestDetails.tsx           | 7 ++++---
 apps/demo-wallet/src/components/WalletRow.tsx              | 2 +-
 .../demo-wallet/src/components/transactions/ActionCard.tsx | 3 ++-
 .../src/components/transactions/TonTransferCard.tsx        | 4 ++--
 .../src/components/transactions/TransactionCard.tsx        | 2 +-
 apps/demo-wallet/src/{ => core}/utils/format.ts            | 0
 apps/demo-wallet/src/{ => core}/utils/formatters.ts        | 0
 apps/demo-wallet/src/{ => core}/utils/index.ts             | 0
 apps/demo-wallet/src/{ => core}/utils/payload.ts           | 0
 apps/demo-wallet/src/{ => core}/utils/rates.ts             | 0
 apps/demo-wallet/src/{ => core}/utils/telegram.ts          | 0
 apps/demo-wallet/src/{ => core}/utils/units.ts             | 0
 apps/demo-wallet/src/hooks/useGaslessJettonSend.ts         | 2 +-
 apps/demo-wallet/src/hooks/useJettonInfo.ts                | 2 +-
 apps/demo-wallet/src/hooks/useReceivedToasts.tsx           | 2 +-
 apps/demo-wallet/src/hooks/useSendToken.ts                 | 2 +-
 apps/demo-wallet/src/index.ts                              | 2 +-
 23 files changed, 23 insertions(+), 19 deletions(-)
 rename apps/demo-wallet/src/{ => core}/utils/format.ts (100%)
 rename apps/demo-wallet/src/{ => core}/utils/formatters.ts (100%)
 rename apps/demo-wallet/src/{ => core}/utils/index.ts (100%)
 rename apps/demo-wallet/src/{ => core}/utils/payload.ts (100%)
 rename apps/demo-wallet/src/{ => core}/utils/rates.ts (100%)
 rename apps/demo-wallet/src/{ => core}/utils/telegram.ts (100%)
 rename apps/demo-wallet/src/{ => core}/utils/units.ts (100%)

diff --git a/apps/demo-wallet/src/components/BalanceTotal.tsx b/apps/demo-wallet/src/components/BalanceTotal.tsx
index b45521b64..ec58717c4 100644
--- a/apps/demo-wallet/src/components/BalanceTotal.tsx
+++ b/apps/demo-wallet/src/components/BalanceTotal.tsx
@@ -12,7 +12,7 @@ import { toast } from 'sonner';
 import { useWallet, useJettons, useRates } from '@demo/wallet-core';
 
 import { useCountUp } from '@/core/hooks/use-count-up';
-import { findRate, formatUsdParts, shortenAddress, toDecimal } from '@/utils';
+import { findRate, formatUsdParts, shortenAddress, toDecimal } from '@/core/utils';
 
 const TON_DECIMALS = 9;
 
diff --git a/apps/demo-wallet/src/components/DashboardAssetRow.tsx b/apps/demo-wallet/src/components/DashboardAssetRow.tsx
index c8073cfd4..65192d6bd 100644
--- a/apps/demo-wallet/src/components/DashboardAssetRow.tsx
+++ b/apps/demo-wallet/src/components/DashboardAssetRow.tsx
@@ -11,7 +11,7 @@ import React from 'react';
 import { FallbackImage } from './FallbackImage';
 
 import { useCountUp } from '@/core/hooks/use-count-up';
-import { formatAmount, formatPercent, formatUsd } from '@/utils';
+import { formatAmount, formatPercent, formatUsd } from '@/core/utils';
 
 interface DashboardAssetRowProps {
     /** One or more candidate icon URLs, tried in order until one loads. */
diff --git a/apps/demo-wallet/src/components/DashboardAssets.tsx b/apps/demo-wallet/src/components/DashboardAssets.tsx
index 0acad9fb3..9b3bc7a45 100644
--- a/apps/demo-wallet/src/components/DashboardAssets.tsx
+++ b/apps/demo-wallet/src/components/DashboardAssets.tsx
@@ -14,7 +14,7 @@ import type { JettonInfo } from '@ton/walletkit';
 import { DashboardAssetRow, DashboardAssetRowSkeleton } from './DashboardAssetRow';
 
 import { getJettonsName, getJettonsSymbol } from '@/utils/jetton';
-import { findRate, formatRate, toDecimal } from '@/utils';
+import { findRate, formatRate, toDecimal } from '@/core/utils';
 
 const TON_DECIMALS = 9;
 const JETTON_SLOTS = 2;
diff --git a/apps/demo-wallet/src/components/JettonFlow.tsx b/apps/demo-wallet/src/components/JettonFlow.tsx
index 814cf9ce1..99d7b4e66 100644
--- a/apps/demo-wallet/src/components/JettonFlow.tsx
+++ b/apps/demo-wallet/src/components/JettonFlow.tsx
@@ -11,7 +11,8 @@ 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 { formatUnits } from '@/core/utils/units';
 
 export const JettonNameDisplay = memo(function JettonNameDisplay({
     jettonAddress,
diff --git a/apps/demo-wallet/src/components/RecentTransactions.tsx b/apps/demo-wallet/src/components/RecentTransactions.tsx
index d848260dc..2c0a87244 100644
--- a/apps/demo-wallet/src/components/RecentTransactions.tsx
+++ b/apps/demo-wallet/src/components/RecentTransactions.tsx
@@ -13,10 +13,11 @@ 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';
 
+import { formatTonForDisplay, getTonviewerTxUrl, sameAddress } from '@/core/utils';
+
 interface RecentTransactionsProps {
     embedded?: boolean;
 }
diff --git a/apps/demo-wallet/src/components/TraceRow.tsx b/apps/demo-wallet/src/components/TraceRow.tsx
index f1050210d..d25f000bb 100644
--- a/apps/demo-wallet/src/components/TraceRow.tsx
+++ b/apps/demo-wallet/src/components/TraceRow.tsx
@@ -12,7 +12,7 @@ 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 { getTonviewerTxUrl } from '@/core/utils';
 import { log } from '@/utils/logger';
 
 // Local type definitions for transaction data
diff --git a/apps/demo-wallet/src/components/TransactionRequestDetails.tsx b/apps/demo-wallet/src/components/TransactionRequestDetails.tsx
index 310c5b405..2bd13154f 100644
--- a/apps/demo-wallet/src/components/TransactionRequestDetails.tsx
+++ b/apps/demo-wallet/src/components/TransactionRequestDetails.tsx
@@ -11,9 +11,10 @@ import type { StructuredItem, TransactionRequest, TransactionRequestMessage } fr
 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 { normalizeAddress, shortenAddress } from '@/core/utils/formatters';
+import { decodeTextCommentPayload } from '@/core/utils/payload';
+import { formatNanoTonAmount, formatTokenAmount } from '@/core/utils/units';
 
 interface TransactionRequestDetailsProps {
     request: TransactionRequest;
diff --git a/apps/demo-wallet/src/components/WalletRow.tsx b/apps/demo-wallet/src/components/WalletRow.tsx
index 8fee52467..e0af7a8c3 100644
--- a/apps/demo-wallet/src/components/WalletRow.tsx
+++ b/apps/demo-wallet/src/components/WalletRow.tsx
@@ -13,7 +13,7 @@ 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 '@/utils';
+import { shortenAddress } from '@/core/utils';
 
 const networkBadgeClass = (network: SavedWallet['network']): string => {
     if (network === 'mainnet') return 'bg-green-100 text-green-800';
diff --git a/apps/demo-wallet/src/components/transactions/ActionCard.tsx b/apps/demo-wallet/src/components/transactions/ActionCard.tsx
index 6a31e2e75..4ddf8ccd2 100644
--- a/apps/demo-wallet/src/components/transactions/ActionCard.tsx
+++ b/apps/demo-wallet/src/components/transactions/ActionCard.tsx
@@ -9,10 +9,11 @@
 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';
 
+import { formatTonForDisplay, sameAddress } from '@/core/utils';
+
 interface ActionCardProps {
     action: Action;
     myAddress: string;
diff --git a/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx b/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx
index 30d84ad12..e3c0f1f09 100644
--- a/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx
+++ b/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx
@@ -10,8 +10,8 @@ import React, { memo } from 'react';
 import { Link } from 'react-router-dom';
 import type { TonTransferAction } from '@ton/walletkit';
 
-import { shortenAddress, formatTimestamp } from '../../utils';
-import { formatTon } from '../../utils/units';
+import { shortenAddress, formatTimestamp } from '@/core/utils';
+import { formatTon } from '@/core/utils/units';
 
 interface TonTransferCardProps {
     action: TonTransferAction;
diff --git a/apps/demo-wallet/src/components/transactions/TransactionCard.tsx b/apps/demo-wallet/src/components/transactions/TransactionCard.tsx
index 6b877dd08..ce4dba947 100644
--- a/apps/demo-wallet/src/components/transactions/TransactionCard.tsx
+++ b/apps/demo-wallet/src/components/transactions/TransactionCard.tsx
@@ -9,7 +9,7 @@
 import React, { memo } from 'react';
 import { Link } from 'react-router-dom';
 
-import { formatTimestamp } from '../../utils';
+import { formatTimestamp } from '@/core/utils';
 
 export type TxFinality = 'pending' | 'confirmed' | 'finalized' | 'invalidated' | 'done';
 
diff --git a/apps/demo-wallet/src/utils/format.ts b/apps/demo-wallet/src/core/utils/format.ts
similarity index 100%
rename from apps/demo-wallet/src/utils/format.ts
rename to apps/demo-wallet/src/core/utils/format.ts
diff --git a/apps/demo-wallet/src/utils/formatters.ts b/apps/demo-wallet/src/core/utils/formatters.ts
similarity index 100%
rename from apps/demo-wallet/src/utils/formatters.ts
rename to apps/demo-wallet/src/core/utils/formatters.ts
diff --git a/apps/demo-wallet/src/utils/index.ts b/apps/demo-wallet/src/core/utils/index.ts
similarity index 100%
rename from apps/demo-wallet/src/utils/index.ts
rename to apps/demo-wallet/src/core/utils/index.ts
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/utils/rates.ts b/apps/demo-wallet/src/core/utils/rates.ts
similarity index 100%
rename from apps/demo-wallet/src/utils/rates.ts
rename to apps/demo-wallet/src/core/utils/rates.ts
diff --git a/apps/demo-wallet/src/utils/telegram.ts b/apps/demo-wallet/src/core/utils/telegram.ts
similarity index 100%
rename from apps/demo-wallet/src/utils/telegram.ts
rename to apps/demo-wallet/src/core/utils/telegram.ts
diff --git a/apps/demo-wallet/src/utils/units.ts b/apps/demo-wallet/src/core/utils/units.ts
similarity index 100%
rename from apps/demo-wallet/src/utils/units.ts
rename to apps/demo-wallet/src/core/utils/units.ts
diff --git a/apps/demo-wallet/src/hooks/useGaslessJettonSend.ts b/apps/demo-wallet/src/hooks/useGaslessJettonSend.ts
index baa891b08..519790baa 100644
--- a/apps/demo-wallet/src/hooks/useGaslessJettonSend.ts
+++ b/apps/demo-wallet/src/hooks/useGaslessJettonSend.ts
@@ -12,7 +12,7 @@ import type { Jetton, Wallet, GaslessSupportedAsset, SendTransactionResponse } f
 import { useGasless } from '@demo/wallet-core';
 
 import { useJettonInfo } from '@/hooks/useJettonInfo';
-import { formatUnits, parseUnits } from '@/utils/units';
+import { formatUnits, parseUnits } from '@/core/utils/units';
 
 const QUOTE_DEBOUNCE_MS = 400;
 
diff --git a/apps/demo-wallet/src/hooks/useJettonInfo.ts b/apps/demo-wallet/src/hooks/useJettonInfo.ts
index afa0d6066..4b053dcae 100644
--- a/apps/demo-wallet/src/hooks/useJettonInfo.ts
+++ b/apps/demo-wallet/src/hooks/useJettonInfo.ts
@@ -12,7 +12,7 @@ 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'>> & {
     decimals?: number;
diff --git a/apps/demo-wallet/src/hooks/useReceivedToasts.tsx b/apps/demo-wallet/src/hooks/useReceivedToasts.tsx
index 840a73839..b5c9ef90d 100644
--- a/apps/demo-wallet/src/hooks/useReceivedToasts.tsx
+++ b/apps/demo-wallet/src/hooks/useReceivedToasts.tsx
@@ -13,7 +13,7 @@ import { useJettons, useRates, useWallet } from '@demo/wallet-core';
 import type { RateEntry } from '@demo/wallet-core';
 
 import { getJettonsSymbol } from '@/utils/jetton';
-import { formatAmount, formatUsd, toDecimal } from '@/utils';
+import { formatAmount, formatUsd, toDecimal } from '@/core/utils';
 
 const TON_KEY = 'TON';
 const TON_DECIMALS = 9;
diff --git a/apps/demo-wallet/src/hooks/useSendToken.ts b/apps/demo-wallet/src/hooks/useSendToken.ts
index d7a71144a..13fd0cfb3 100644
--- a/apps/demo-wallet/src/hooks/useSendToken.ts
+++ b/apps/demo-wallet/src/hooks/useSendToken.ts
@@ -10,7 +10,7 @@ import { useCallback } from 'react';
 import { toast } from 'sonner';
 import type { ITonWalletKit, Jetton, SendTransactionResponse, Wallet } from '@ton/walletkit';
 
-import { parseUnits } from '@/utils/units';
+import { parseUnits } from '@/core/utils/units';
 import { useGaslessJettonSend } from '@/hooks/useGaslessJettonSend';
 import type { UseGaslessJettonSendResult } from '@/hooks/useGaslessJettonSend';
 
diff --git a/apps/demo-wallet/src/index.ts b/apps/demo-wallet/src/index.ts
index 785257a71..65ba1019c 100644
--- a/apps/demo-wallet/src/index.ts
+++ b/apps/demo-wallet/src/index.ts
@@ -10,7 +10,7 @@
 export * from './components';
 export * from './pages';
 export * from './hooks';
-export * from './utils';
+export * from '@/core/utils';
 
 // For convenience, also export the main App component
 export { default as App } from './App';

From e98492bbdac384f0d5a58f920cdb5e7d5f3cd6e7 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 09:49:35 +0400
Subject: [PATCH 05/49] refactor(demo-wallet): move routing to core

---
 apps/demo-wallet/src/App.tsx                           |  3 +--
 apps/demo-wallet/src/components/index.ts               |  2 --
 .../AppRouter.tsx => core/routing/app-router.tsx}      |  8 ++++----
 apps/demo-wallet/src/core/routing/index.ts             | 10 ++++++++++
 .../routing/protected-route.tsx}                       |  0
 5 files changed, 15 insertions(+), 8 deletions(-)
 rename apps/demo-wallet/src/{components/AppRouter.tsx => core/routing/app-router.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/core/routing/index.ts
 rename apps/demo-wallet/src/{components/ProtectedRoute.tsx => core/routing/protected-route.tsx} (100%)

diff --git a/apps/demo-wallet/src/App.tsx b/apps/demo-wallet/src/App.tsx
index da4cde225..d10b732ee 100644
--- a/apps/demo-wallet/src/App.tsx
+++ b/apps/demo-wallet/src/App.tsx
@@ -10,8 +10,7 @@ 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 { AppRouter } from '@/core/routing';
 import { Toaster } from '@/core/components/ui/sonner';
 import {
     DISABLE_AUTO_EMULATION,
diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index 995589d4d..d1a765e05 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -7,7 +7,6 @@
  */
 
 export { AnimatedBalance } from './AnimatedBalance';
-export { AppRouter } from './AppRouter';
 export { Button } from './Button';
 export { Card } from './Card';
 export { ConnectRequestModal } from './ConnectRequestModal';
@@ -37,7 +36,6 @@ 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';
diff --git a/apps/demo-wallet/src/components/AppRouter.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/AppRouter.tsx
rename to apps/demo-wallet/src/core/routing/app-router.tsx
index 2ac15555c..f4d780502 100644
--- a/apps/demo-wallet/src/components/AppRouter.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -10,8 +10,9 @@ 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 { ProtectedRoute } from './protected-route';
+
+import { LoaderCircle } from '@/components/LoaderCircle';
 import {
     WalletDashboard,
     SendTransaction,
@@ -20,8 +21,7 @@ import {
     Swap,
     Staking,
     TonConnectRoute,
-} from '../pages';
-
+} from '@/pages';
 import { SetupPasswordScreen, UnlockScreen } from '@/features/auth';
 import { LedgerScreen } from '@/features/ledger';
 import { WelcomeScreen, CreateWalletScreen, ImportWalletScreen } from '@/features/wallet-setup';
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 100%
rename from apps/demo-wallet/src/components/ProtectedRoute.tsx
rename to apps/demo-wallet/src/core/routing/protected-route.tsx

From 346a62d9df8bea80455a027a062a6d201278e9b0 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 09:59:58 +0400
Subject: [PATCH 06/49] refactor(demo-wallet): move Card, Input, FallbackImage
 to core/components/ui

Relocate the shared primitives into core/components/ui/{card,input,
fallback-image} with barrels, and repoint all consumers. Drop them
from the flat components barrel.
---
 apps/demo-wallet/src/components/DashboardAssetRow.tsx    | 3 +--
 apps/demo-wallet/src/components/JettonsCard.tsx          | 2 +-
 apps/demo-wallet/src/components/NftsCard.tsx             | 2 +-
 apps/demo-wallet/src/components/SignDataRequestModal.tsx | 3 ++-
 apps/demo-wallet/src/components/index.ts                 | 3 ---
 apps/demo-wallet/src/components/staking/StakingInfo.tsx  | 2 +-
 .../src/components/staking/StakingInterface.tsx          | 2 +-
 apps/demo-wallet/src/components/swap/SwapInterface.tsx   | 2 +-
 .../Card.tsx => core/components/ui/card/card.tsx}        | 0
 apps/demo-wallet/src/core/components/ui/card/index.ts    | 9 +++++++++
 .../components/ui/fallback-image/fallback-image.tsx}     | 0
 .../src/core/components/ui/fallback-image/index.ts       | 9 +++++++++
 apps/demo-wallet/src/core/components/ui/input/index.ts   | 9 +++++++++
 .../Input.tsx => core/components/ui/input/input.tsx}     | 0
 apps/demo-wallet/src/pages/SendTransaction.tsx           | 4 +++-
 15 files changed, 38 insertions(+), 12 deletions(-)
 rename apps/demo-wallet/src/{components/Card.tsx => core/components/ui/card/card.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/core/components/ui/card/index.ts
 rename apps/demo-wallet/src/{components/FallbackImage.tsx => core/components/ui/fallback-image/fallback-image.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/core/components/ui/fallback-image/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/input/index.ts
 rename apps/demo-wallet/src/{components/Input.tsx => core/components/ui/input/input.tsx} (100%)

diff --git a/apps/demo-wallet/src/components/DashboardAssetRow.tsx b/apps/demo-wallet/src/components/DashboardAssetRow.tsx
index 65192d6bd..9d4c2ba39 100644
--- a/apps/demo-wallet/src/components/DashboardAssetRow.tsx
+++ b/apps/demo-wallet/src/components/DashboardAssetRow.tsx
@@ -8,8 +8,7 @@
 
 import React from 'react';
 
-import { FallbackImage } from './FallbackImage';
-
+import { FallbackImage } from '@/core/components/ui/fallback-image';
 import { useCountUp } from '@/core/hooks/use-count-up';
 import { formatAmount, formatPercent, formatUsd } from '@/core/utils';
 
diff --git a/apps/demo-wallet/src/components/JettonsCard.tsx b/apps/demo-wallet/src/components/JettonsCard.tsx
index d140d1157..18012551a 100644
--- a/apps/demo-wallet/src/components/JettonsCard.tsx
+++ b/apps/demo-wallet/src/components/JettonsCard.tsx
@@ -10,10 +10,10 @@ 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 { Card } from '@/core/components/ui/card';
 import { getJettonsName } from '@/utils/jetton';
 
 const log = createComponentLogger('JettonsCard');
diff --git a/apps/demo-wallet/src/components/NftsCard.tsx b/apps/demo-wallet/src/components/NftsCard.tsx
index bf7072790..ef812ae23 100644
--- a/apps/demo-wallet/src/components/NftsCard.tsx
+++ b/apps/demo-wallet/src/components/NftsCard.tsx
@@ -11,7 +11,7 @@ import type { NFT } from '@ton/walletkit';
 import { ChevronRight } from 'lucide-react';
 import { useNfts } from '@demo/wallet-core';
 
-import { FallbackImage } from './FallbackImage';
+import { FallbackImage } from '@/core/components/ui/fallback-image';
 
 const getNftImageSources = (nft: NFT): string[] => {
     const img = nft.info?.image;
diff --git a/apps/demo-wallet/src/components/SignDataRequestModal.tsx b/apps/demo-wallet/src/components/SignDataRequestModal.tsx
index 4326da165..babc02aa1 100644
--- a/apps/demo-wallet/src/components/SignDataRequestModal.tsx
+++ b/apps/demo-wallet/src/components/SignDataRequestModal.tsx
@@ -12,12 +12,13 @@ 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';
 
+import { Card } from '@/core/components/ui/card';
+
 // Create logger for sign data request modal
 const log = createComponentLogger('SignDataRequestModal');
 
diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index d1a765e05..da0993130 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -8,11 +8,9 @@
 
 export { AnimatedBalance } from './AnimatedBalance';
 export { Button } from './Button';
-export { Card } from './Card';
 export { ConnectRequestModal } from './ConnectRequestModal';
 export { DAppInfo } from './DAppInfo';
 export { DisconnectNotifications } from './DisconnectNotifications';
-export { Input } from './Input';
 export { JettonsCard } from './JettonsCard';
 export { JettonRow } from './JettonRow';
 export { JettonsList } from './JettonsList';
@@ -22,7 +20,6 @@ export { Layout } from './Layout';
 export { NewLayout } from './NewLayout';
 export { DashboardHeader } from './DashboardHeader';
 export { BalanceTotal } from './BalanceTotal';
-export { FallbackImage } from './FallbackImage';
 export { DashboardActionButton } from './DashboardActionButton';
 export { DashboardActions } from './DashboardActions';
 export { DashboardAssetRow, DashboardAssetRowSkeleton } from './DashboardAssetRow';
diff --git a/apps/demo-wallet/src/components/staking/StakingInfo.tsx b/apps/demo-wallet/src/components/staking/StakingInfo.tsx
index 614e05557..ace270e01 100644
--- a/apps/demo-wallet/src/components/staking/StakingInfo.tsx
+++ b/apps/demo-wallet/src/components/staking/StakingInfo.tsx
@@ -9,7 +9,7 @@
 import type { FC } from 'react';
 import { useStaking } from '@demo/wallet-core';
 
-import { Card } from '../Card';
+import { Card } from '@/core/components/ui/card';
 
 export const StakingInfo: FC = () => {
     const { stakedBalance, providerInfo } = useStaking();
diff --git a/apps/demo-wallet/src/components/staking/StakingInterface.tsx b/apps/demo-wallet/src/components/staking/StakingInterface.tsx
index 1a215b44c..06b31b070 100644
--- a/apps/demo-wallet/src/components/staking/StakingInterface.tsx
+++ b/apps/demo-wallet/src/components/staking/StakingInterface.tsx
@@ -12,9 +12,9 @@ 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 { Card } from '@/core/components/ui/card';
 import { cn } from '@/lib/utils';
 
 export const StakingInterface: FC = () => {
diff --git a/apps/demo-wallet/src/components/swap/SwapInterface.tsx b/apps/demo-wallet/src/components/swap/SwapInterface.tsx
index 7840223f9..fe01b9cb0 100644
--- a/apps/demo-wallet/src/components/swap/SwapInterface.tsx
+++ b/apps/demo-wallet/src/components/swap/SwapInterface.tsx
@@ -16,8 +16,8 @@ import { SwapSettings } from './SwapSettings';
 import { TokenInput } from './TokenInput';
 import { QuoteTimer } from './QuoteTimer';
 import { Button } from '../Button';
-import { Card } from '../Card';
 
+import { Card } from '@/core/components/ui/card';
 import { cn } from '@/lib/utils';
 
 function getPriceImpactColor(priceImpact: number): string {
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/components/FallbackImage.tsx b/apps/demo-wallet/src/core/components/ui/fallback-image/fallback-image.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/FallbackImage.tsx
rename to apps/demo-wallet/src/core/components/ui/fallback-image/fallback-image.tsx
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/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/components/Input.tsx b/apps/demo-wallet/src/core/components/ui/input/input.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/Input.tsx
rename to apps/demo-wallet/src/core/components/ui/input/input.tsx
diff --git a/apps/demo-wallet/src/pages/SendTransaction.tsx b/apps/demo-wallet/src/pages/SendTransaction.tsx
index 166acc860..553cd8c99 100644
--- a/apps/demo-wallet/src/pages/SendTransaction.tsx
+++ b/apps/demo-wallet/src/pages/SendTransaction.tsx
@@ -13,9 +13,11 @@ 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 { Layout, Button, AnimatedBalance, WalletSwitcher } from '../components';
 import { createComponentLogger } from '../utils/logger';
 
+import { Input } from '@/core/components/ui/input';
+import { Card } from '@/core/components/ui/card';
 import { getFormattedJettonInfo } from '@/utils/jetton';
 import { useFormattedJetton } from '@/hooks/useFormattedJetton';
 import { useJettonInfo } from '@/hooks/useJettonInfo';

From 3311ad13c6567b795c587d1d0e18a31a6b75165c Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:03:25 +0400
Subject: [PATCH 07/49] refactor(demo-wallet): move Layout and NewLayout to
 core/components/shared

Relocate the app shells into core/components/shared/{layout,new-layout}
with barrels, and repoint all page consumers. Drop them from the flat
components barrel.
---
 apps/demo-wallet/src/components/index.ts                 | 2 --
 .../src/core/components/shared/layout/index.ts           | 9 +++++++++
 .../components/shared/layout/layout.tsx}                 | 2 +-
 .../src/core/components/shared/new-layout/index.ts       | 9 +++++++++
 .../components/shared/new-layout/new-layout.tsx}         | 0
 apps/demo-wallet/src/pages/SendTransaction.tsx           | 3 ++-
 apps/demo-wallet/src/pages/Staking.tsx                   | 4 +++-
 apps/demo-wallet/src/pages/Swap.tsx                      | 2 +-
 apps/demo-wallet/src/pages/TonConnectRoute.tsx           | 3 ++-
 apps/demo-wallet/src/pages/WalletDashboard.tsx           | 2 +-
 10 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 apps/demo-wallet/src/core/components/shared/layout/index.ts
 rename apps/demo-wallet/src/{components/Layout.tsx => core/components/shared/layout/layout.tsx} (97%)
 create mode 100644 apps/demo-wallet/src/core/components/shared/new-layout/index.ts
 rename apps/demo-wallet/src/{components/NewLayout.tsx => core/components/shared/new-layout/new-layout.tsx} (100%)

diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index da0993130..3fba723f1 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -16,8 +16,6 @@ export { JettonRow } from './JettonRow';
 export { JettonsList } from './JettonsList';
 export { Modal } from '@/core/components/ui/modal';
 export { NftsCard } from './NftsCard';
-export { Layout } from './Layout';
-export { NewLayout } from './NewLayout';
 export { DashboardHeader } from './DashboardHeader';
 export { BalanceTotal } from './BalanceTotal';
 export { DashboardActionButton } from './DashboardActionButton';
diff --git a/apps/demo-wallet/src/core/components/shared/layout/index.ts b/apps/demo-wallet/src/core/components/shared/layout/index.ts
new file mode 100644
index 000000000..a5a595803
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/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 './layout';
diff --git a/apps/demo-wallet/src/components/Layout.tsx b/apps/demo-wallet/src/core/components/shared/layout/layout.tsx
similarity index 97%
rename from apps/demo-wallet/src/components/Layout.tsx
rename to apps/demo-wallet/src/core/components/shared/layout/layout.tsx
index 8fc99b049..674366643 100644
--- a/apps/demo-wallet/src/components/Layout.tsx
+++ b/apps/demo-wallet/src/core/components/shared/layout/layout.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { SettingsDropdown } from './SettingsDropdown';
+import { SettingsDropdown } from '@/components/SettingsDropdown';
 // import { StreamingStatus } from './StreamingStatus';
 
 interface LayoutProps {
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/components/NewLayout.tsx b/apps/demo-wallet/src/core/components/shared/new-layout/new-layout.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/NewLayout.tsx
rename to apps/demo-wallet/src/core/components/shared/new-layout/new-layout.tsx
diff --git a/apps/demo-wallet/src/pages/SendTransaction.tsx b/apps/demo-wallet/src/pages/SendTransaction.tsx
index 553cd8c99..d931a8aa8 100644
--- a/apps/demo-wallet/src/pages/SendTransaction.tsx
+++ b/apps/demo-wallet/src/pages/SendTransaction.tsx
@@ -13,9 +13,10 @@ import type { Jetton, TONTransferRequest } from '@ton/walletkit';
 import { useWallet, useJettons, useWalletKit, useAuth, getTransactionExplorerUrls } from '@demo/wallet-core';
 import { toast } from 'sonner';
 
-import { Layout, Button, AnimatedBalance, WalletSwitcher } from '../components';
+import { Button, AnimatedBalance, WalletSwitcher } from '../components';
 import { createComponentLogger } from '../utils/logger';
 
+import { Layout } from '@/core/components/shared/layout';
 import { Input } from '@/core/components/ui/input';
 import { Card } from '@/core/components/ui/card';
 import { getFormattedJettonInfo } from '@/utils/jetton';
diff --git a/apps/demo-wallet/src/pages/Staking.tsx b/apps/demo-wallet/src/pages/Staking.tsx
index a2f157502..aba33aaea 100644
--- a/apps/demo-wallet/src/pages/Staking.tsx
+++ b/apps/demo-wallet/src/pages/Staking.tsx
@@ -11,10 +11,12 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useStaking, useWallet } from '@demo/wallet-core';
 
-import { Layout, Button } from '../components';
+import { Button } from '../components';
 import { StakingInterface } from '../components/staking/StakingInterface';
 import { StakingInfo } from '../components/staking/StakingInfo';
 
+import { Layout } from '@/core/components/shared/layout';
+
 export const Staking: FC = () => {
     const navigate = useNavigate();
     const { address } = useWallet();
diff --git a/apps/demo-wallet/src/pages/Swap.tsx b/apps/demo-wallet/src/pages/Swap.tsx
index a7e5223e0..084833353 100644
--- a/apps/demo-wallet/src/pages/Swap.tsx
+++ b/apps/demo-wallet/src/pages/Swap.tsx
@@ -11,9 +11,9 @@ 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 { Layout } from '@/core/components/shared/layout';
 import { USDT_ADDRESS } from '@/constants/swap';
 
 export const Swap: FC = () => {
diff --git a/apps/demo-wallet/src/pages/TonConnectRoute.tsx b/apps/demo-wallet/src/pages/TonConnectRoute.tsx
index b77f15dc5..3f82919da 100644
--- a/apps/demo-wallet/src/pages/TonConnectRoute.tsx
+++ b/apps/demo-wallet/src/pages/TonConnectRoute.tsx
@@ -10,10 +10,11 @@ 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 { Layout } from '@/core/components/shared/layout';
+
 const log = createComponentLogger('TonConnectRoute');
 
 export const TonConnectRoute: React.FC = () => {
diff --git a/apps/demo-wallet/src/pages/WalletDashboard.tsx b/apps/demo-wallet/src/pages/WalletDashboard.tsx
index fa8eb1d0e..f7fc166cd 100644
--- a/apps/demo-wallet/src/pages/WalletDashboard.tsx
+++ b/apps/demo-wallet/src/pages/WalletDashboard.tsx
@@ -16,7 +16,6 @@ import {
 } from '@demo/wallet-core';
 
 import {
-    NewLayout,
     DashboardHeader,
     BalanceTotal,
     DashboardActions,
@@ -28,6 +27,7 @@ import {
     NftsCard,
 } from '../components';
 
+import { NewLayout } from '@/core/components/shared/new-layout';
 import { usePasteHandler } from '@/core/hooks/use-paste-handler';
 
 export const WalletDashboard: React.FC = () => {

From aa01c7a14755d81f1150b379f8ac92c9d05e92fb Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:08:18 +0400
Subject: [PATCH 08/49] refactor(demo-wallet): move lib and infra utils to
 core/lib

Relocate the flat lib/ directory (cn utils, env, constants, extension
helpers) plus logger and isExtension into core/lib, and repoint all
consumers including the dynamic extensionPopup import. The flat lib/
directory is gone.
---
 apps/demo-wallet/src/App.tsx                          |  8 ++++----
 apps/demo-wallet/src/components/CircleLogo.tsx        |  2 +-
 .../src/components/ConnectRequestModal.tsx            |  3 ++-
 apps/demo-wallet/src/components/JettonsCard.tsx       |  2 +-
 apps/demo-wallet/src/components/JettonsList.tsx       |  2 +-
 apps/demo-wallet/src/components/RequestModal.tsx      |  3 ++-
 apps/demo-wallet/src/components/SettingsDropdown.tsx  |  2 +-
 .../src/components/SignDataRequestModal.tsx           |  2 +-
 apps/demo-wallet/src/components/TraceRow.tsx          |  2 +-
 apps/demo-wallet/src/components/WalletSwitcher.tsx    |  2 +-
 .../src/components/staking/StakingInterface.tsx       |  2 +-
 .../demo-wallet/src/components/swap/SwapInterface.tsx |  2 +-
 apps/demo-wallet/src/components/swap/TokenInput.tsx   |  2 +-
 .../demo-wallet/src/components/swap/TokenSelector.tsx |  2 +-
 .../src/core/components/ui/button/button.tsx          |  2 +-
 .../src/core/components/ui/dialog/dialog.tsx          |  2 +-
 .../src/core/components/ui/drawer/drawer.tsx          |  2 +-
 .../src/core/components/ui/modal/modal.tsx            |  2 +-
 .../src/core/components/ui/popover/popover.tsx        |  2 +-
 .../src/core/components/ui/segmented/segmented.tsx    |  2 +-
 .../src/core/components/ui/select/select.tsx          |  2 +-
 apps/demo-wallet/src/core/hooks/use-paste-handler.ts  |  2 +-
 apps/demo-wallet/src/{ => core}/lib/constants.ts      |  0
 apps/demo-wallet/src/{ => core}/lib/env.ts            |  0
 apps/demo-wallet/src/{ => core}/lib/extension.ts      |  2 +-
 .../src/{ => core}/lib/extensionBackground.ts         |  0
 apps/demo-wallet/src/{ => core}/lib/extensionPopup.ts |  0
 .../isExtension.ts => core/lib/is-extension.ts}       |  0
 apps/demo-wallet/src/{utils => core/lib}/logger.ts    |  6 +++---
 apps/demo-wallet/src/{ => core}/lib/utils.ts          |  0
 apps/demo-wallet/src/extension/background_main.ts     | 11 ++++++++---
 apps/demo-wallet/src/extension/content.ts             |  6 +++++-
 apps/demo-wallet/src/extension/content_script.ts      |  2 +-
 apps/demo-wallet/src/hooks/useTonWallet.ts            |  2 +-
 apps/demo-wallet/src/pages/SendTransaction.tsx        |  2 +-
 apps/demo-wallet/src/pages/TonConnectRoute.tsx        |  2 +-
 apps/demo-wallet/src/utils/walletManifest.ts          |  2 +-
 37 files changed, 49 insertions(+), 38 deletions(-)
 rename apps/demo-wallet/src/{ => core}/lib/constants.ts (100%)
 rename apps/demo-wallet/src/{ => core}/lib/env.ts (100%)
 rename apps/demo-wallet/src/{ => core}/lib/extension.ts (94%)
 rename apps/demo-wallet/src/{ => core}/lib/extensionBackground.ts (100%)
 rename apps/demo-wallet/src/{ => core}/lib/extensionPopup.ts (100%)
 rename apps/demo-wallet/src/{utils/isExtension.ts => core/lib/is-extension.ts} (100%)
 rename apps/demo-wallet/src/{utils => core/lib}/logger.ts (97%)
 rename apps/demo-wallet/src/{ => core}/lib/utils.ts (100%)

diff --git a/apps/demo-wallet/src/App.tsx b/apps/demo-wallet/src/App.tsx
index d10b732ee..50319dfa9 100644
--- a/apps/demo-wallet/src/App.tsx
+++ b/apps/demo-wallet/src/App.tsx
@@ -22,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';
@@ -33,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/components/CircleLogo.tsx b/apps/demo-wallet/src/components/CircleLogo.tsx
index fb8c8c7ec..e6984f7f0 100644
--- a/apps/demo-wallet/src/components/CircleLogo.tsx
+++ b/apps/demo-wallet/src/components/CircleLogo.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/components/ConnectRequestModal.tsx b/apps/demo-wallet/src/components/ConnectRequestModal.tsx
index fa681efe9..0fb79aff6 100644
--- a/apps/demo-wallet/src/components/ConnectRequestModal.tsx
+++ b/apps/demo-wallet/src/components/ConnectRequestModal.tsx
@@ -15,7 +15,8 @@ import { toast } from 'sonner';
 import { Button } from './Button';
 import { DAppInfo } from './DAppInfo';
 import { WalletPreview } from './WalletPreview';
-import { createComponentLogger } from '../utils/logger';
+
+import { createComponentLogger } from '@/core/lib/logger';
 
 // Create logger for connect request modal
 const log = createComponentLogger('ConnectRequestModal');
diff --git a/apps/demo-wallet/src/components/JettonsCard.tsx b/apps/demo-wallet/src/components/JettonsCard.tsx
index 18012551a..854629826 100644
--- a/apps/demo-wallet/src/components/JettonsCard.tsx
+++ b/apps/demo-wallet/src/components/JettonsCard.tsx
@@ -11,8 +11,8 @@ import { useJettons } from '@demo/wallet-core';
 
 import { Button } from './Button';
 import { JettonRow } from './JettonRow';
-import { createComponentLogger } from '../utils/logger';
 
+import { createComponentLogger } from '@/core/lib/logger';
 import { Card } from '@/core/components/ui/card';
 import { getJettonsName } from '@/utils/jetton';
 
diff --git a/apps/demo-wallet/src/components/JettonsList.tsx b/apps/demo-wallet/src/components/JettonsList.tsx
index 91de1db57..78764e253 100644
--- a/apps/demo-wallet/src/components/JettonsList.tsx
+++ b/apps/demo-wallet/src/components/JettonsList.tsx
@@ -10,9 +10,9 @@ 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 { createComponentLogger } from '@/core/lib/logger';
 import { useFormatJetton, useFormattedJetton } from '@/hooks/useFormattedJetton';
 
 // Create logger for jettons list
diff --git a/apps/demo-wallet/src/components/RequestModal.tsx b/apps/demo-wallet/src/components/RequestModal.tsx
index 0045cccca..a2f3076b6 100644
--- a/apps/demo-wallet/src/components/RequestModal.tsx
+++ b/apps/demo-wallet/src/components/RequestModal.tsx
@@ -16,7 +16,8 @@ import { Button } from './Button';
 import { HoldToSignButton } from './HoldToSignButton';
 import { JettonFlow } from './JettonFlow';
 import { SuccessCard } from './SuccessCard';
-import { createComponentLogger } from '../utils/logger';
+
+import { createComponentLogger } from '@/core/lib/logger';
 
 type RequestEvent = SendTransactionRequestEvent | SignMessageRequestEvent;
 type WarningTone = 'red' | 'yellow';
diff --git a/apps/demo-wallet/src/components/SettingsDropdown.tsx b/apps/demo-wallet/src/components/SettingsDropdown.tsx
index 36f2c0329..21b88d372 100644
--- a/apps/demo-wallet/src/components/SettingsDropdown.tsx
+++ b/apps/demo-wallet/src/components/SettingsDropdown.tsx
@@ -13,8 +13,8 @@ import { useAuth, useWallet } from '@demo/wallet-core';
 
 import { MnemonicDisplay } from './MnemonicDisplay';
 import { ToggleRow } from './ToggleRow';
-import { createComponentLogger } from '../utils/logger';
 
+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';
diff --git a/apps/demo-wallet/src/components/SignDataRequestModal.tsx b/apps/demo-wallet/src/components/SignDataRequestModal.tsx
index babc02aa1..4cced3721 100644
--- a/apps/demo-wallet/src/components/SignDataRequestModal.tsx
+++ b/apps/demo-wallet/src/components/SignDataRequestModal.tsx
@@ -15,8 +15,8 @@ import { Button } from './Button';
 import { DAppInfo } from './DAppInfo';
 import { WalletPreview } from './WalletPreview';
 import { HoldToSignButton } from './HoldToSignButton';
-import { createComponentLogger } from '../utils/logger';
 
+import { createComponentLogger } from '@/core/lib/logger';
 import { Card } from '@/core/components/ui/card';
 
 // Create logger for sign data request modal
diff --git a/apps/demo-wallet/src/components/TraceRow.tsx b/apps/demo-wallet/src/components/TraceRow.tsx
index d25f000bb..4e3a996ad 100644
--- a/apps/demo-wallet/src/components/TraceRow.tsx
+++ b/apps/demo-wallet/src/components/TraceRow.tsx
@@ -13,7 +13,7 @@ import type { ToncenterTraceItem } from '@ton/walletkit';
 import { useWalletKit, useWalletStore, getChainNetwork } from '@demo/wallet-core';
 
 import { getTonviewerTxUrl } from '@/core/utils';
-import { log } from '@/utils/logger';
+import { log } from '@/core/lib/logger';
 
 // Local type definitions for transaction data
 interface TransactionMessage {
diff --git a/apps/demo-wallet/src/components/WalletSwitcher.tsx b/apps/demo-wallet/src/components/WalletSwitcher.tsx
index bb7523d0b..379f22490 100644
--- a/apps/demo-wallet/src/components/WalletSwitcher.tsx
+++ b/apps/demo-wallet/src/components/WalletSwitcher.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/components/staking/StakingInterface.tsx b/apps/demo-wallet/src/components/staking/StakingInterface.tsx
index 06b31b070..c99b674c4 100644
--- a/apps/demo-wallet/src/components/staking/StakingInterface.tsx
+++ b/apps/demo-wallet/src/components/staking/StakingInterface.tsx
@@ -15,7 +15,7 @@ import { UnstakeMode } from '@ton/walletkit';
 import { Button } from '../Button';
 
 import { Card } from '@/core/components/ui/card';
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 export const StakingInterface: FC = () => {
     const {
diff --git a/apps/demo-wallet/src/components/swap/SwapInterface.tsx b/apps/demo-wallet/src/components/swap/SwapInterface.tsx
index fe01b9cb0..5dd5a6312 100644
--- a/apps/demo-wallet/src/components/swap/SwapInterface.tsx
+++ b/apps/demo-wallet/src/components/swap/SwapInterface.tsx
@@ -18,7 +18,7 @@ import { QuoteTimer } from './QuoteTimer';
 import { Button } from '../Button';
 
 import { Card } from '@/core/components/ui/card';
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 function getPriceImpactColor(priceImpact: number): string {
     if (priceImpact > 500) return 'text-destructive';
diff --git a/apps/demo-wallet/src/components/swap/TokenInput.tsx b/apps/demo-wallet/src/components/swap/TokenInput.tsx
index 84f9dfff9..9b12de4a4 100644
--- a/apps/demo-wallet/src/components/swap/TokenInput.tsx
+++ b/apps/demo-wallet/src/components/swap/TokenInput.tsx
@@ -13,7 +13,7 @@ import type { SwapToken } from '@ton/walletkit';
 import { TokenSelector } from './TokenSelector';
 import { Button } from '../Button';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 interface Props {
     label: string;
diff --git a/apps/demo-wallet/src/components/swap/TokenSelector.tsx b/apps/demo-wallet/src/components/swap/TokenSelector.tsx
index 6a2ae5b7e..afc762377 100644
--- a/apps/demo-wallet/src/components/swap/TokenSelector.tsx
+++ b/apps/demo-wallet/src/components/swap/TokenSelector.tsx
@@ -12,7 +12,7 @@ import { useJettons } from '@demo/wallet-core';
 import type { Jetton } from '@ton/walletkit';
 import type { SwapToken } from '@ton/walletkit';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 import { USDT_ADDRESS } from '@/constants/swap';
 import { getJettonsImage, getJettonsSymbol } from '@/utils/jetton';
 import { CircleLogo } from '@/components/CircleLogo';
diff --git a/apps/demo-wallet/src/core/components/ui/button/button.tsx b/apps/demo-wallet/src/core/components/ui/button/button.tsx
index bfdbff9f7..e97913df1 100644
--- a/apps/demo-wallet/src/core/components/ui/button/button.tsx
+++ b/apps/demo-wallet/src/core/components/ui/button/button.tsx
@@ -10,7 +10,7 @@ import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { Loader2 } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'gray' | 'danger' | 'ghost';
 export type ButtonSize = 'lg' | 'md' | 'sm' | 'icon';
diff --git a/apps/demo-wallet/src/core/components/ui/dialog/dialog.tsx b/apps/demo-wallet/src/core/components/ui/dialog/dialog.tsx
index 2eafa30ee..6a608a9a2 100644
--- a/apps/demo-wallet/src/core/components/ui/dialog/dialog.tsx
+++ b/apps/demo-wallet/src/core/components/ui/dialog/dialog.tsx
@@ -9,7 +9,7 @@
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 const Dialog = DialogPrimitive.Root;
 
diff --git a/apps/demo-wallet/src/core/components/ui/drawer/drawer.tsx b/apps/demo-wallet/src/core/components/ui/drawer/drawer.tsx
index 997a845d7..501cb3244 100644
--- a/apps/demo-wallet/src/core/components/ui/drawer/drawer.tsx
+++ b/apps/demo-wallet/src/core/components/ui/drawer/drawer.tsx
@@ -9,7 +9,7 @@
 import * as React from 'react';
 import { Drawer as DrawerPrimitive } from 'vaul';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
     <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
diff --git a/apps/demo-wallet/src/core/components/ui/modal/modal.tsx b/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
index a0afbf283..878f81ffd 100644
--- a/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
+++ b/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
@@ -14,7 +14,7 @@ import { Dialog, DialogContent, DialogTitle } from '../dialog';
 import { Drawer, DrawerContent, DrawerTitle } from '../drawer';
 
 import { Button } from '@/components/Button';
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 import { useIsMobile } from '@/core/hooks/use-media-query';
 
 export interface ModalContainerProps extends ComponentProps<'div'> {
diff --git a/apps/demo-wallet/src/core/components/ui/popover/popover.tsx b/apps/demo-wallet/src/core/components/ui/popover/popover.tsx
index 7b5f2acce..f1680f421 100644
--- a/apps/demo-wallet/src/core/components/ui/popover/popover.tsx
+++ b/apps/demo-wallet/src/core/components/ui/popover/popover.tsx
@@ -9,7 +9,7 @@
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 const Popover = PopoverPrimitive.Root;
 
diff --git a/apps/demo-wallet/src/core/components/ui/segmented/segmented.tsx b/apps/demo-wallet/src/core/components/ui/segmented/segmented.tsx
index 8e4472115..36d4a2eb8 100644
--- a/apps/demo-wallet/src/core/components/ui/segmented/segmented.tsx
+++ b/apps/demo-wallet/src/core/components/ui/segmented/segmented.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 export interface SegmentedOption<T extends string> {
     value: T;
diff --git a/apps/demo-wallet/src/core/components/ui/select/select.tsx b/apps/demo-wallet/src/core/components/ui/select/select.tsx
index d9307898b..1f5905646 100644
--- a/apps/demo-wallet/src/core/components/ui/select/select.tsx
+++ b/apps/demo-wallet/src/core/components/ui/select/select.tsx
@@ -10,7 +10,7 @@ import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 function Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {
     return <SelectPrimitive.Root data-slot="select" {...props} />;
diff --git a/apps/demo-wallet/src/core/hooks/use-paste-handler.ts b/apps/demo-wallet/src/core/hooks/use-paste-handler.ts
index 599cabee9..bd064918f 100644
--- a/apps/demo-wallet/src/core/hooks/use-paste-handler.ts
+++ b/apps/demo-wallet/src/core/hooks/use-paste-handler.ts
@@ -8,7 +8,7 @@
 
 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>) {
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/extension/background_main.ts b/apps/demo-wallet/src/extension/background_main.ts
index 70bbbeff8..3bd21ea08 100644
--- a/apps/demo-wallet/src/extension/background_main.ts
+++ b/apps/demo-wallet/src/extension/background_main.ts
@@ -19,9 +19,14 @@ import { INJECT_CONTENT_SCRIPT, TONCONNECT_BRIDGE_REQUEST } from '@ton/walletkit
 
 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 { 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..7e8f14587 100644
--- a/apps/demo-wallet/src/extension/content.ts
+++ b/apps/demo-wallet/src/extension/content.ts
@@ -19,7 +19,11 @@ import { onMessage, sendMessage, setNamespace } from '@truecarry/webext-bridge/w
 
 import { getTonConnectDeviceInfo, getTonConnectWalletManifest } from '../utils/walletManifest';
 
-import { JS_BRIDGE_MESSAGE_TO_BACKGROUND, JS_BRIDGE_MESSAGE_TO_CONTENT, JS_BRIDGE_NAMESPACE } from '@/lib/constants';
+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/hooks/useTonWallet.ts b/apps/demo-wallet/src/hooks/useTonWallet.ts
index e3b625138..086c9a019 100644
--- a/apps/demo-wallet/src/hooks/useTonWallet.ts
+++ b/apps/demo-wallet/src/hooks/useTonWallet.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/pages/SendTransaction.tsx b/apps/demo-wallet/src/pages/SendTransaction.tsx
index d931a8aa8..a2fed08b1 100644
--- a/apps/demo-wallet/src/pages/SendTransaction.tsx
+++ b/apps/demo-wallet/src/pages/SendTransaction.tsx
@@ -14,8 +14,8 @@ import { useWallet, useJettons, useWalletKit, useAuth, getTransactionExplorerUrl
 import { toast } from 'sonner';
 
 import { Button, AnimatedBalance, WalletSwitcher } from '../components';
-import { createComponentLogger } from '../utils/logger';
 
+import { createComponentLogger } from '@/core/lib/logger';
 import { Layout } from '@/core/components/shared/layout';
 import { Input } from '@/core/components/ui/input';
 import { Card } from '@/core/components/ui/card';
diff --git a/apps/demo-wallet/src/pages/TonConnectRoute.tsx b/apps/demo-wallet/src/pages/TonConnectRoute.tsx
index 3f82919da..2c190bf17 100644
--- a/apps/demo-wallet/src/pages/TonConnectRoute.tsx
+++ b/apps/demo-wallet/src/pages/TonConnectRoute.tsx
@@ -11,8 +11,8 @@ import { useNavigate } from 'react-router-dom';
 import { useTonConnect } from '@demo/wallet-core';
 
 import { LoaderCircle } from '../components/LoaderCircle';
-import { createComponentLogger } from '../utils/logger';
 
+import { createComponentLogger } from '@/core/lib/logger';
 import { Layout } from '@/core/components/shared/layout';
 
 const log = createComponentLogger('TonConnectRoute');
diff --git a/apps/demo-wallet/src/utils/walletManifest.ts b/apps/demo-wallet/src/utils/walletManifest.ts
index 30bf1948d..00850b812 100644
--- a/apps/demo-wallet/src/utils/walletManifest.ts
+++ b/apps/demo-wallet/src/utils/walletManifest.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 {

From 63a39e61e6dcaab56f501f06d50468bc5666fd13 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:10:48 +0400
Subject: [PATCH 09/49] refactor(demo-wallet): add notifications feature

Move StreamingStatus, DisconnectNotifications and the useReceivedToasts
hook into features/notifications with barrels, and repoint AppRouter.
---
 apps/demo-wallet/src/components/index.ts              |  2 --
 apps/demo-wallet/src/core/routing/app-router.tsx      |  2 +-
 .../disconnect-notifications.tsx}                     |  2 +-
 .../components/disconnect-notifications/index.ts      |  9 +++++++++
 .../components/streaming-status/index.ts              |  9 +++++++++
 .../components/streaming-status/streaming-status.tsx} |  0
 .../notifications/hooks/use-received-toasts.tsx}      |  0
 apps/demo-wallet/src/features/notifications/index.ts  | 11 +++++++++++
 apps/demo-wallet/src/hooks/index.ts                   |  1 -
 9 files changed, 31 insertions(+), 5 deletions(-)
 rename apps/demo-wallet/src/{components/DisconnectNotifications.tsx => features/notifications/components/disconnect-notifications/disconnect-notifications.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/notifications/components/disconnect-notifications/index.ts
 create mode 100644 apps/demo-wallet/src/features/notifications/components/streaming-status/index.ts
 rename apps/demo-wallet/src/{components/StreamingStatus.tsx => features/notifications/components/streaming-status/streaming-status.tsx} (100%)
 rename apps/demo-wallet/src/{hooks/useReceivedToasts.tsx => features/notifications/hooks/use-received-toasts.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/notifications/index.ts

diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index 3fba723f1..08171f325 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -10,7 +10,6 @@ export { AnimatedBalance } from './AnimatedBalance';
 export { Button } from './Button';
 export { ConnectRequestModal } from './ConnectRequestModal';
 export { DAppInfo } from './DAppInfo';
-export { DisconnectNotifications } from './DisconnectNotifications';
 export { JettonsCard } from './JettonsCard';
 export { JettonRow } from './JettonRow';
 export { JettonsList } from './JettonsList';
@@ -30,7 +29,6 @@ export { ReceiveModal } from './ReceiveModal';
 export { MnemonicDisplay } from './MnemonicDisplay';
 export { NetworkSelector } from './NetworkSelector';
 export { SettingsDropdown } from './SettingsDropdown';
-export { StreamingStatus } from './StreamingStatus';
 export { RecentTransactions } from './RecentTransactions';
 export { SignDataRequestModal } from './SignDataRequestModal';
 export { SignMessageRequestModal } from './SignMessageRequestModal';
diff --git a/apps/demo-wallet/src/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index f4d780502..a77a6df35 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -26,7 +26,7 @@ import { SetupPasswordScreen, UnlockScreen } from '@/features/auth';
 import { LedgerScreen } from '@/features/ledger';
 import { WelcomeScreen, CreateWalletScreen, ImportWalletScreen } from '@/features/wallet-setup';
 import { useWalletDataUpdater } from '@/hooks/useWalletDataUpdater';
-import { useReceivedToasts } from '@/hooks/useReceivedToasts';
+import { useReceivedToasts } from '@/features/notifications';
 import { Button } from '@/components/Button';
 
 export const AppRouter: React.FC = () => {
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 98%
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..ebaae1c6e 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 '@/components/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/hooks/useReceivedToasts.tsx b/apps/demo-wallet/src/features/notifications/hooks/use-received-toasts.tsx
similarity index 100%
rename from apps/demo-wallet/src/hooks/useReceivedToasts.tsx
rename to apps/demo-wallet/src/features/notifications/hooks/use-received-toasts.tsx
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/hooks/index.ts b/apps/demo-wallet/src/hooks/index.ts
index cac4922a4..2d926d2ad 100644
--- a/apps/demo-wallet/src/hooks/index.ts
+++ b/apps/demo-wallet/src/hooks/index.ts
@@ -8,6 +8,5 @@
 
 export * from './useFormattedJetton';
 export * from './useJettonInfo';
-export * from './useReceivedToasts';
 export * from './useTonWallet';
 export * from './useWalletDataUpdater';

From 2f3f187bf5a612d0647753a14e79a48f97c63cac Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:12:54 +0400
Subject: [PATCH 10/49] refactor(demo-wallet): add nft feature

Move NftsCard into features/nft with barrels, and repoint WalletDashboard.
---
 apps/demo-wallet/src/components/index.ts                 | 1 -
 .../src/features/nft/components/nfts-card/index.ts       | 9 +++++++++
 .../nft/components/nfts-card/nfts-card.tsx}              | 0
 apps/demo-wallet/src/features/nft/index.ts               | 9 +++++++++
 apps/demo-wallet/src/pages/WalletDashboard.tsx           | 2 +-
 5 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 apps/demo-wallet/src/features/nft/components/nfts-card/index.ts
 rename apps/demo-wallet/src/{components/NftsCard.tsx => features/nft/components/nfts-card/nfts-card.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/nft/index.ts

diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index 08171f325..412040727 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -14,7 +14,6 @@ export { JettonsCard } from './JettonsCard';
 export { JettonRow } from './JettonRow';
 export { JettonsList } from './JettonsList';
 export { Modal } from '@/core/components/ui/modal';
-export { NftsCard } from './NftsCard';
 export { DashboardHeader } from './DashboardHeader';
 export { BalanceTotal } from './BalanceTotal';
 export { DashboardActionButton } from './DashboardActionButton';
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/components/NftsCard.tsx b/apps/demo-wallet/src/features/nft/components/nfts-card/nfts-card.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/NftsCard.tsx
rename to apps/demo-wallet/src/features/nft/components/nfts-card/nfts-card.tsx
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..736206729
--- /dev/null
+++ b/apps/demo-wallet/src/features/nft/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/nfts-card';
diff --git a/apps/demo-wallet/src/pages/WalletDashboard.tsx b/apps/demo-wallet/src/pages/WalletDashboard.tsx
index f7fc166cd..15e2dd9ea 100644
--- a/apps/demo-wallet/src/pages/WalletDashboard.tsx
+++ b/apps/demo-wallet/src/pages/WalletDashboard.tsx
@@ -24,10 +24,10 @@ import {
     TransactionRequestModal,
     SignDataRequestModal,
     SignMessageRequestModal,
-    NftsCard,
 } from '../components';
 
 import { NewLayout } from '@/core/components/shared/new-layout';
+import { NftsCard } from '@/features/nft';
 import { usePasteHandler } from '@/core/hooks/use-paste-handler';
 
 export const WalletDashboard: React.FC = () => {

From 0fde86a8325aca268c0d74ee573da6dc6925457e Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:17:32 +0400
Subject: [PATCH 11/49] refactor(demo-wallet): add jettons feature

Move JettonRow, JettonFlow, JettonsCard, JettonsList, the useJettonInfo
and useFormattedJetton hooks, and the jetton utils into features/jettons
with barrels. Repoint consumers to @/features/jettons; internal
cross-references stay relative.
---
 .../src/components/DashboardAssets.tsx            |  2 +-
 apps/demo-wallet/src/components/RequestModal.tsx  |  2 +-
 .../src/components/TransactionRequestDetails.tsx  |  3 +--
 .../src/components/TransactionRequestModal.tsx    |  3 ++-
 apps/demo-wallet/src/components/index.ts          |  3 ---
 .../src/components/swap/TokenSelector.tsx         |  2 +-
 .../jettons/components/jetton-flow/index.ts       |  9 +++++++++
 .../components/jetton-flow/jetton-flow.tsx}       |  2 +-
 .../jettons/components/jetton-row/index.ts        |  9 +++++++++
 .../jettons/components/jetton-row/jetton-row.tsx} |  2 +-
 .../jettons/components/jettons-card/index.ts      |  9 +++++++++
 .../components/jettons-card/jettons-card.tsx}     |  6 +++---
 .../jettons/components/jettons-list/index.ts      |  9 +++++++++
 .../components/jettons-list/jettons-list.tsx}     |  5 ++---
 .../jettons/hooks/use-formatted-jetton.ts}        |  2 +-
 .../jettons/hooks/use-jetton-info.ts}             |  0
 apps/demo-wallet/src/features/jettons/index.ts    | 15 +++++++++++++++
 .../src/{ => features/jettons}/utils/jetton.ts    |  0
 .../notifications/hooks/use-received-toasts.tsx   |  2 +-
 apps/demo-wallet/src/hooks/index.ts               |  2 --
 .../demo-wallet/src/hooks/useGaslessJettonSend.ts |  2 +-
 apps/demo-wallet/src/pages/SendTransaction.tsx    |  6 +++---
 22 files changed, 70 insertions(+), 25 deletions(-)
 create mode 100644 apps/demo-wallet/src/features/jettons/components/jetton-flow/index.ts
 rename apps/demo-wallet/src/{components/JettonFlow.tsx => features/jettons/components/jetton-flow/jetton-flow.tsx} (99%)
 create mode 100644 apps/demo-wallet/src/features/jettons/components/jetton-row/index.ts
 rename apps/demo-wallet/src/{components/JettonRow.tsx => features/jettons/components/jetton-row/jetton-row.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/jettons/components/jettons-card/index.ts
 rename apps/demo-wallet/src/{components/JettonsCard.tsx => features/jettons/components/jettons-card/jettons-card.tsx} (95%)
 create mode 100644 apps/demo-wallet/src/features/jettons/components/jettons-list/index.ts
 rename apps/demo-wallet/src/{components/JettonsList.tsx => features/jettons/components/jettons-list/jettons-list.tsx} (99%)
 rename apps/demo-wallet/src/{hooks/useFormattedJetton.ts => features/jettons/hooks/use-formatted-jetton.ts} (93%)
 rename apps/demo-wallet/src/{hooks/useJettonInfo.ts => features/jettons/hooks/use-jetton-info.ts} (100%)
 create mode 100644 apps/demo-wallet/src/features/jettons/index.ts
 rename apps/demo-wallet/src/{ => features/jettons}/utils/jetton.ts (100%)

diff --git a/apps/demo-wallet/src/components/DashboardAssets.tsx b/apps/demo-wallet/src/components/DashboardAssets.tsx
index 9b3bc7a45..6f1b0ce3b 100644
--- a/apps/demo-wallet/src/components/DashboardAssets.tsx
+++ b/apps/demo-wallet/src/components/DashboardAssets.tsx
@@ -13,7 +13,7 @@ import type { JettonInfo } from '@ton/walletkit';
 
 import { DashboardAssetRow, DashboardAssetRowSkeleton } from './DashboardAssetRow';
 
-import { getJettonsName, getJettonsSymbol } from '@/utils/jetton';
+import { getJettonsName, getJettonsSymbol } from '@/features/jettons';
 import { findRate, formatRate, toDecimal } from '@/core/utils';
 
 const TON_DECIMALS = 9;
diff --git a/apps/demo-wallet/src/components/RequestModal.tsx b/apps/demo-wallet/src/components/RequestModal.tsx
index a2f3076b6..47d75ea27 100644
--- a/apps/demo-wallet/src/components/RequestModal.tsx
+++ b/apps/demo-wallet/src/components/RequestModal.tsx
@@ -14,9 +14,9 @@ import { toast } from 'sonner';
 
 import { Button } from './Button';
 import { HoldToSignButton } from './HoldToSignButton';
-import { JettonFlow } from './JettonFlow';
 import { SuccessCard } from './SuccessCard';
 
+import { JettonFlow } from '@/features/jettons';
 import { createComponentLogger } from '@/core/lib/logger';
 
 type RequestEvent = SendTransactionRequestEvent | SignMessageRequestEvent;
diff --git a/apps/demo-wallet/src/components/TransactionRequestDetails.tsx b/apps/demo-wallet/src/components/TransactionRequestDetails.tsx
index 2bd13154f..eee590a7d 100644
--- a/apps/demo-wallet/src/components/TransactionRequestDetails.tsx
+++ b/apps/demo-wallet/src/components/TransactionRequestDetails.tsx
@@ -10,8 +10,7 @@ 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 { 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';
diff --git a/apps/demo-wallet/src/components/TransactionRequestModal.tsx b/apps/demo-wallet/src/components/TransactionRequestModal.tsx
index e5144529c..1181a2db3 100644
--- a/apps/demo-wallet/src/components/TransactionRequestModal.tsx
+++ b/apps/demo-wallet/src/components/TransactionRequestModal.tsx
@@ -15,7 +15,8 @@ import { toast } from 'sonner';
 
 import { RequestModal } from './RequestModal';
 import { TransactionRequestDetails } from './TransactionRequestDetails';
-import { useActiveWalletNetwork } from '../hooks/useJettonInfo';
+
+import { useActiveWalletNetwork } from '@/features/jettons';
 
 interface TransactionRequestModalProps {
     request: SendTransactionRequestEvent;
diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index 412040727..786917ee8 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -10,9 +10,6 @@ export { AnimatedBalance } from './AnimatedBalance';
 export { Button } from './Button';
 export { ConnectRequestModal } from './ConnectRequestModal';
 export { DAppInfo } from './DAppInfo';
-export { JettonsCard } from './JettonsCard';
-export { JettonRow } from './JettonRow';
-export { JettonsList } from './JettonsList';
 export { Modal } from '@/core/components/ui/modal';
 export { DashboardHeader } from './DashboardHeader';
 export { BalanceTotal } from './BalanceTotal';
diff --git a/apps/demo-wallet/src/components/swap/TokenSelector.tsx b/apps/demo-wallet/src/components/swap/TokenSelector.tsx
index afc762377..9f06e36f1 100644
--- a/apps/demo-wallet/src/components/swap/TokenSelector.tsx
+++ b/apps/demo-wallet/src/components/swap/TokenSelector.tsx
@@ -14,7 +14,7 @@ import type { SwapToken } from '@ton/walletkit';
 
 import { cn } from '@/core/lib/utils';
 import { USDT_ADDRESS } from '@/constants/swap';
-import { getJettonsImage, getJettonsSymbol } from '@/utils/jetton';
+import { getJettonsImage, getJettonsSymbol } from '@/features/jettons';
 import { CircleLogo } from '@/components/CircleLogo';
 
 interface TokenSelectorProps {
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 99%
rename from apps/demo-wallet/src/components/JettonFlow.tsx
rename to apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx
index 99d7b4e66..9f79efeec 100644
--- a/apps/demo-wallet/src/components/JettonFlow.tsx
+++ b/apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx
@@ -10,7 +10,7 @@ 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 { resolveTokenAddress, TON_INFO, useJettonInfo } from '../../hooks/use-jetton-info';
 
 import { formatUnits } from '@/core/utils/units';
 
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/features/jettons/components/jettons-card/index.ts b/apps/demo-wallet/src/features/jettons/components/jettons-card/index.ts
new file mode 100644
index 000000000..11401d6f0
--- /dev/null
+++ b/apps/demo-wallet/src/features/jettons/components/jettons-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 './jettons-card';
diff --git a/apps/demo-wallet/src/components/JettonsCard.tsx b/apps/demo-wallet/src/features/jettons/components/jettons-card/jettons-card.tsx
similarity index 95%
rename from apps/demo-wallet/src/components/JettonsCard.tsx
rename to apps/demo-wallet/src/features/jettons/components/jettons-card/jettons-card.tsx
index 854629826..33a898bf0 100644
--- a/apps/demo-wallet/src/components/JettonsCard.tsx
+++ b/apps/demo-wallet/src/features/jettons/components/jettons-card/jettons-card.tsx
@@ -9,12 +9,12 @@
 import React from 'react';
 import { useJettons } from '@demo/wallet-core';
 
-import { Button } from './Button';
-import { JettonRow } from './JettonRow';
+import { JettonRow } from '../jetton-row';
 
+import { Button } from '@/components/Button';
 import { createComponentLogger } from '@/core/lib/logger';
 import { Card } from '@/core/components/ui/card';
-import { getJettonsName } from '@/utils/jetton';
+import { getJettonsName } from '@/features/jettons';
 
 const log = createComponentLogger('JettonsCard');
 
diff --git a/apps/demo-wallet/src/features/jettons/components/jettons-list/index.ts b/apps/demo-wallet/src/features/jettons/components/jettons-list/index.ts
new file mode 100644
index 000000000..ee1378e7f
--- /dev/null
+++ b/apps/demo-wallet/src/features/jettons/components/jettons-list/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 './jettons-list';
diff --git a/apps/demo-wallet/src/components/JettonsList.tsx b/apps/demo-wallet/src/features/jettons/components/jettons-list/jettons-list.tsx
similarity index 99%
rename from apps/demo-wallet/src/components/JettonsList.tsx
rename to apps/demo-wallet/src/features/jettons/components/jettons-list/jettons-list.tsx
index 78764e253..0b4743f89 100644
--- a/apps/demo-wallet/src/components/JettonsList.tsx
+++ b/apps/demo-wallet/src/features/jettons/components/jettons-list/jettons-list.tsx
@@ -10,10 +10,9 @@ import React, { useState } from 'react';
 import type { Jetton } from '@ton/walletkit';
 import { useJettons } from '@demo/wallet-core';
 
-import { Button } from './Button';
-
+import { Button } from '@/components/Button';
 import { createComponentLogger } from '@/core/lib/logger';
-import { useFormatJetton, useFormattedJetton } from '@/hooks/useFormattedJetton';
+import { useFormatJetton, useFormattedJetton } from '@/features/jettons';
 
 // Create logger for jettons list
 const log = createComponentLogger('JettonsList');
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 100%
rename from apps/demo-wallet/src/hooks/useJettonInfo.ts
rename to apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
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..d48805b0b
--- /dev/null
+++ b/apps/demo-wallet/src/features/jettons/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/jetton-row';
+export * from './components/jetton-flow';
+export * from './components/jettons-card';
+export * from './components/jettons-list';
+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 100%
rename from apps/demo-wallet/src/utils/jetton.ts
rename to apps/demo-wallet/src/features/jettons/utils/jetton.ts
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
index b5c9ef90d..f3bd1b56a 100644
--- a/apps/demo-wallet/src/features/notifications/hooks/use-received-toasts.tsx
+++ b/apps/demo-wallet/src/features/notifications/hooks/use-received-toasts.tsx
@@ -12,7 +12,7 @@ import { toast } from 'sonner';
 import { useJettons, useRates, useWallet } from '@demo/wallet-core';
 import type { RateEntry } from '@demo/wallet-core';
 
-import { getJettonsSymbol } from '@/utils/jetton';
+import { getJettonsSymbol } from '@/features/jettons';
 import { formatAmount, formatUsd, toDecimal } from '@/core/utils';
 
 const TON_KEY = 'TON';
diff --git a/apps/demo-wallet/src/hooks/index.ts b/apps/demo-wallet/src/hooks/index.ts
index 2d926d2ad..5c9bbf548 100644
--- a/apps/demo-wallet/src/hooks/index.ts
+++ b/apps/demo-wallet/src/hooks/index.ts
@@ -6,7 +6,5 @@
  *
  */
 
-export * from './useFormattedJetton';
-export * from './useJettonInfo';
 export * from './useTonWallet';
 export * from './useWalletDataUpdater';
diff --git a/apps/demo-wallet/src/hooks/useGaslessJettonSend.ts b/apps/demo-wallet/src/hooks/useGaslessJettonSend.ts
index 519790baa..aeb1172a9 100644
--- a/apps/demo-wallet/src/hooks/useGaslessJettonSend.ts
+++ b/apps/demo-wallet/src/hooks/useGaslessJettonSend.ts
@@ -11,7 +11,7 @@ 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 { useJettonInfo } from '@/features/jettons';
 import { formatUnits, parseUnits } from '@/core/utils/units';
 
 const QUOTE_DEBOUNCE_MS = 400;
diff --git a/apps/demo-wallet/src/pages/SendTransaction.tsx b/apps/demo-wallet/src/pages/SendTransaction.tsx
index a2fed08b1..4ad295856 100644
--- a/apps/demo-wallet/src/pages/SendTransaction.tsx
+++ b/apps/demo-wallet/src/pages/SendTransaction.tsx
@@ -19,9 +19,9 @@ import { createComponentLogger } from '@/core/lib/logger';
 import { Layout } from '@/core/components/shared/layout';
 import { Input } from '@/core/components/ui/input';
 import { Card } from '@/core/components/ui/card';
-import { getFormattedJettonInfo } from '@/utils/jetton';
-import { useFormattedJetton } from '@/hooks/useFormattedJetton';
-import { useJettonInfo } from '@/hooks/useJettonInfo';
+import { getFormattedJettonInfo } from '@/features/jettons';
+import { useFormattedJetton } from '@/features/jettons';
+import { useJettonInfo } from '@/features/jettons';
 import { useSendToken } from '@/hooks/useSendToken';
 
 // Create logger for send transaction

From b0eecf013e58abcdcfedde7b760ac33497f8c10d Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:24:16 +0400
Subject: [PATCH 12/49] refactor(demo-wallet): add send feature

Move the SendTransaction screen and the useSendToken / useGaslessJettonSend
hooks into features/send with barrels. Repoint AppRouter to @/features/send
and drop SendTransaction from the pages barrel.
---
 apps/demo-wallet/src/core/routing/app-router.tsx      | 11 ++---------
 .../send/components/send-transaction/index.ts         |  9 +++++++++
 .../components/send-transaction/send-transaction.tsx} |  4 ++--
 .../send/hooks/use-gasless-jetton-send.ts}            |  0
 .../send/hooks/use-send-token.ts}                     |  5 +++--
 apps/demo-wallet/src/features/send/index.ts           | 11 +++++++++++
 apps/demo-wallet/src/pages/index.ts                   |  1 -
 7 files changed, 27 insertions(+), 14 deletions(-)
 create mode 100644 apps/demo-wallet/src/features/send/components/send-transaction/index.ts
 rename apps/demo-wallet/src/{pages/SendTransaction.tsx => features/send/components/send-transaction/send-transaction.tsx} (99%)
 rename apps/demo-wallet/src/{hooks/useGaslessJettonSend.ts => features/send/hooks/use-gasless-jetton-send.ts} (100%)
 rename apps/demo-wallet/src/{hooks/useSendToken.ts => features/send/hooks/use-send-token.ts} (96%)
 create mode 100644 apps/demo-wallet/src/features/send/index.ts

diff --git a/apps/demo-wallet/src/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index a77a6df35..f285a7cbf 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -13,15 +13,8 @@ import { useWalletStore, useWallet } from '@demo/wallet-core';
 import { ProtectedRoute } from './protected-route';
 
 import { LoaderCircle } from '@/components/LoaderCircle';
-import {
-    WalletDashboard,
-    SendTransaction,
-    TracePage,
-    TransactionDetail,
-    Swap,
-    Staking,
-    TonConnectRoute,
-} from '@/pages';
+import { WalletDashboard, TracePage, TransactionDetail, Swap, Staking, TonConnectRoute } from '@/pages';
+import { SendTransaction } from '@/features/send';
 import { SetupPasswordScreen, UnlockScreen } from '@/features/auth';
 import { LedgerScreen } from '@/features/ledger';
 import { WelcomeScreen, CreateWalletScreen, ImportWalletScreen } from '@/features/wallet-setup';
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/pages/SendTransaction.tsx b/apps/demo-wallet/src/features/send/components/send-transaction/send-transaction.tsx
similarity index 99%
rename from apps/demo-wallet/src/pages/SendTransaction.tsx
rename to apps/demo-wallet/src/features/send/components/send-transaction/send-transaction.tsx
index 4ad295856..be24cde8a 100644
--- a/apps/demo-wallet/src/pages/SendTransaction.tsx
+++ b/apps/demo-wallet/src/features/send/components/send-transaction/send-transaction.tsx
@@ -13,8 +13,9 @@ import type { Jetton, TONTransferRequest } from '@ton/walletkit';
 import { useWallet, useJettons, useWalletKit, useAuth, getTransactionExplorerUrls } from '@demo/wallet-core';
 import { toast } from 'sonner';
 
-import { Button, AnimatedBalance, WalletSwitcher } from '../components';
+import { useSendToken } from '../../hooks/use-send-token';
 
+import { Button, AnimatedBalance, WalletSwitcher } from '@/components';
 import { createComponentLogger } from '@/core/lib/logger';
 import { Layout } from '@/core/components/shared/layout';
 import { Input } from '@/core/components/ui/input';
@@ -22,7 +23,6 @@ import { Card } from '@/core/components/ui/card';
 import { getFormattedJettonInfo } from '@/features/jettons';
 import { useFormattedJetton } from '@/features/jettons';
 import { useJettonInfo } from '@/features/jettons';
-import { useSendToken } from '@/hooks/useSendToken';
 
 // Create logger for send transaction
 const log = createComponentLogger('SendTransaction');
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 100%
rename from apps/demo-wallet/src/hooks/useGaslessJettonSend.ts
rename to apps/demo-wallet/src/features/send/hooks/use-gasless-jetton-send.ts
diff --git a/apps/demo-wallet/src/hooks/useSendToken.ts b/apps/demo-wallet/src/features/send/hooks/use-send-token.ts
similarity index 96%
rename from apps/demo-wallet/src/hooks/useSendToken.ts
rename to apps/demo-wallet/src/features/send/hooks/use-send-token.ts
index 13fd0cfb3..b393ef9f0 100644
--- a/apps/demo-wallet/src/hooks/useSendToken.ts
+++ b/apps/demo-wallet/src/features/send/hooks/use-send-token.ts
@@ -10,9 +10,10 @@ import { useCallback } from 'react';
 import { toast } from 'sonner';
 import type { ITonWalletKit, Jetton, SendTransactionResponse, Wallet } from '@ton/walletkit';
 
+import { useGaslessJettonSend } from './use-gasless-jetton-send';
+import type { UseGaslessJettonSendResult } from './use-gasless-jetton-send';
+
 import { parseUnits } from '@/core/utils/units';
-import { useGaslessJettonSend } from '@/hooks/useGaslessJettonSend';
-import type { UseGaslessJettonSendResult } from '@/hooks/useGaslessJettonSend';
 
 const TON_DECIMALS = 9;
 
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..09b9d4524
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/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/send-transaction';
+export * from './hooks/use-send-token';
+export * from './hooks/use-gasless-jetton-send';
diff --git a/apps/demo-wallet/src/pages/index.ts b/apps/demo-wallet/src/pages/index.ts
index 73c8de058..457c58158 100644
--- a/apps/demo-wallet/src/pages/index.ts
+++ b/apps/demo-wallet/src/pages/index.ts
@@ -7,7 +7,6 @@
  */
 
 export * from './WalletDashboard';
-export * from './SendTransaction';
 export * from './TracePage';
 export * from './TransactionDetail';
 export * from './Swap';

From 3537b23dfcd3e0319b54270393a365f44288bbce Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:26:39 +0400
Subject: [PATCH 13/49] refactor(demo-wallet): add swap feature

Move the Swap screen, swap components (SwapInterface, SwapSettings,
TokenInput, TokenSelector, QuoteTimer) and swap constants into
features/swap with barrels. Repoint AppRouter and drop Swap from the
pages barrel.
---
 apps/demo-wallet/src/core/routing/app-router.tsx   |  3 ++-
 .../features/swap/components/quote-timer/index.ts  |  9 +++++++++
 .../swap/components/quote-timer/quote-timer.tsx}   |  2 +-
 .../swap/components/swap-interface/index.ts        |  9 +++++++++
 .../components/swap-interface/swap-interface.tsx}  |  8 ++++----
 .../features/swap/components/swap-screen/index.ts  |  9 +++++++++
 .../swap/components/swap-screen/swap-screen.tsx}   |  4 ++--
 .../swap/components/swap-settings/index.ts         |  9 +++++++++
 .../components/swap-settings/swap-settings.tsx}    |  3 +--
 .../features/swap/components/token-input/index.ts  |  9 +++++++++
 .../swap/components/token-input/token-input.tsx}   |  4 ++--
 .../swap/components/token-selector/index.ts        |  9 +++++++++
 .../components/token-selector/token-selector.tsx}  |  3 ++-
 .../src/{ => features/swap}/constants/swap.ts      |  0
 apps/demo-wallet/src/features/swap/index.ts        | 14 ++++++++++++++
 apps/demo-wallet/src/pages/index.ts                |  1 -
 16 files changed, 82 insertions(+), 14 deletions(-)
 create mode 100644 apps/demo-wallet/src/features/swap/components/quote-timer/index.ts
 rename apps/demo-wallet/src/{components/swap/QuoteTimer.tsx => features/swap/components/quote-timer/quote-timer.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/swap/components/swap-interface/index.ts
 rename apps/demo-wallet/src/{components/swap/SwapInterface.tsx => features/swap/components/swap-interface/swap-interface.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/swap/components/swap-screen/index.ts
 rename apps/demo-wallet/src/{pages/Swap.tsx => features/swap/components/swap-screen/swap-screen.tsx} (94%)
 create mode 100644 apps/demo-wallet/src/features/swap/components/swap-settings/index.ts
 rename apps/demo-wallet/src/{components/swap/SwapSettings.tsx => features/swap/components/swap-settings/swap-settings.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/swap/components/token-input/index.ts
 rename apps/demo-wallet/src/{components/swap/TokenInput.tsx => features/swap/components/token-input/token-input.tsx} (97%)
 create mode 100644 apps/demo-wallet/src/features/swap/components/token-selector/index.ts
 rename apps/demo-wallet/src/{components/swap/TokenSelector.tsx => features/swap/components/token-selector/token-selector.tsx} (98%)
 rename apps/demo-wallet/src/{ => features/swap}/constants/swap.ts (100%)
 create mode 100644 apps/demo-wallet/src/features/swap/index.ts

diff --git a/apps/demo-wallet/src/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index f285a7cbf..8c3c96605 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -13,7 +13,8 @@ import { useWalletStore, useWallet } from '@demo/wallet-core';
 import { ProtectedRoute } from './protected-route';
 
 import { LoaderCircle } from '@/components/LoaderCircle';
-import { WalletDashboard, TracePage, TransactionDetail, Swap, Staking, TonConnectRoute } from '@/pages';
+import { WalletDashboard, TracePage, TransactionDetail, Staking, TonConnectRoute } from '@/pages';
+import { Swap } from '@/features/swap';
 import { SendTransaction } from '@/features/send';
 import { SetupPasswordScreen, UnlockScreen } from '@/features/auth';
 import { LedgerScreen } from '@/features/ledger';
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 98%
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..4609b796c 100644
--- a/apps/demo-wallet/src/components/swap/QuoteTimer.tsx
+++ b/apps/demo-wallet/src/features/swap/components/quote-timer/quote-timer.tsx
@@ -9,7 +9,7 @@
 import type { FC } from 'react';
 import { useEffect, useState } from 'react';
 
-import { Button } from '../Button';
+import { Button } from '@/components/Button';
 
 interface QuoteTimerProps {
     expiresAt?: number; // Unix timestamp in seconds
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/components/swap/SwapInterface.tsx b/apps/demo-wallet/src/features/swap/components/swap-interface/swap-interface.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/swap/SwapInterface.tsx
rename to apps/demo-wallet/src/features/swap/components/swap-interface/swap-interface.tsx
index 5dd5a6312..b8d5e2926 100644
--- a/apps/demo-wallet/src/components/swap/SwapInterface.tsx
+++ b/apps/demo-wallet/src/features/swap/components/swap-interface/swap-interface.tsx
@@ -12,11 +12,11 @@ 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 { SwapSettings } from '../swap-settings';
+import { TokenInput } from '../token-input';
+import { QuoteTimer } from '../quote-timer';
 
+import { Button } from '@/components/Button';
 import { Card } from '@/core/components/ui/card';
 import { cn } from '@/core/lib/utils';
 
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/pages/Swap.tsx b/apps/demo-wallet/src/features/swap/components/swap-screen/swap-screen.tsx
similarity index 94%
rename from apps/demo-wallet/src/pages/Swap.tsx
rename to apps/demo-wallet/src/features/swap/components/swap-screen/swap-screen.tsx
index 084833353..e92c04349 100644
--- a/apps/demo-wallet/src/pages/Swap.tsx
+++ b/apps/demo-wallet/src/features/swap/components/swap-screen/swap-screen.tsx
@@ -11,10 +11,10 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useSwap } from '@demo/wallet-core';
 
-import { SwapInterface } from '../components/swap/SwapInterface';
+import { SwapInterface } from '../swap-interface';
+import { USDT_ADDRESS } from '../../constants/swap';
 
 import { Layout } from '@/core/components/shared/layout';
-import { USDT_ADDRESS } from '@/constants/swap';
 
 export const Swap: FC = () => {
     const navigate = useNavigate();
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/components/swap/SwapSettings.tsx b/apps/demo-wallet/src/features/swap/components/swap-settings/swap-settings.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/swap/SwapSettings.tsx
rename to apps/demo-wallet/src/features/swap/components/swap-settings/swap-settings.tsx
index 3ea3fa53d..664df8f58 100644
--- a/apps/demo-wallet/src/components/swap/SwapSettings.tsx
+++ b/apps/demo-wallet/src/features/swap/components/swap-settings/swap-settings.tsx
@@ -9,8 +9,7 @@
 import type { FC } from 'react';
 import { useState, useEffect } from 'react';
 
-import { Button } from '../Button';
-
+import { Button } from '@/components/Button';
 import { Modal } from '@/core/components/ui/modal';
 
 interface SwapSettingsProps {
diff --git a/apps/demo-wallet/src/features/swap/components/token-input/index.ts b/apps/demo-wallet/src/features/swap/components/token-input/index.ts
new file mode 100644
index 000000000..ab438bfda
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/token-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 './token-input';
diff --git a/apps/demo-wallet/src/components/swap/TokenInput.tsx b/apps/demo-wallet/src/features/swap/components/token-input/token-input.tsx
similarity index 97%
rename from apps/demo-wallet/src/components/swap/TokenInput.tsx
rename to apps/demo-wallet/src/features/swap/components/token-input/token-input.tsx
index 9b12de4a4..022ea8323 100644
--- a/apps/demo-wallet/src/components/swap/TokenInput.tsx
+++ b/apps/demo-wallet/src/features/swap/components/token-input/token-input.tsx
@@ -10,9 +10,9 @@ 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 { TokenSelector } from '../token-selector';
 
+import { Button } from '@/components/Button';
 import { cn } from '@/core/lib/utils';
 
 interface Props {
diff --git a/apps/demo-wallet/src/features/swap/components/token-selector/index.ts b/apps/demo-wallet/src/features/swap/components/token-selector/index.ts
new file mode 100644
index 000000000..9801a9e75
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/components/token-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 './token-selector';
diff --git a/apps/demo-wallet/src/components/swap/TokenSelector.tsx b/apps/demo-wallet/src/features/swap/components/token-selector/token-selector.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/swap/TokenSelector.tsx
rename to apps/demo-wallet/src/features/swap/components/token-selector/token-selector.tsx
index 9f06e36f1..a27f87c5a 100644
--- a/apps/demo-wallet/src/components/swap/TokenSelector.tsx
+++ b/apps/demo-wallet/src/features/swap/components/token-selector/token-selector.tsx
@@ -12,8 +12,9 @@ import { useJettons } from '@demo/wallet-core';
 import type { Jetton } from '@ton/walletkit';
 import type { SwapToken } from '@ton/walletkit';
 
+import { USDT_ADDRESS } from '../../constants/swap';
+
 import { cn } from '@/core/lib/utils';
-import { USDT_ADDRESS } from '@/constants/swap';
 import { getJettonsImage, getJettonsSymbol } from '@/features/jettons';
 import { CircleLogo } from '@/components/CircleLogo';
 
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/index.ts b/apps/demo-wallet/src/features/swap/index.ts
new file mode 100644
index 000000000..46a39c885
--- /dev/null
+++ b/apps/demo-wallet/src/features/swap/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 './components/swap-screen';
+export * from './components/swap-interface';
+export * from './components/swap-settings';
+export * from './components/token-input';
+export * from './components/token-selector';
+export * from './components/quote-timer';
diff --git a/apps/demo-wallet/src/pages/index.ts b/apps/demo-wallet/src/pages/index.ts
index 457c58158..ce71f1cbe 100644
--- a/apps/demo-wallet/src/pages/index.ts
+++ b/apps/demo-wallet/src/pages/index.ts
@@ -9,6 +9,5 @@
 export * from './WalletDashboard';
 export * from './TracePage';
 export * from './TransactionDetail';
-export * from './Swap';
 export * from './Staking';
 export * from './TonConnectRoute';

From 06514fdbbc47435eb6a845cac83901ca1e7aa4c6 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:28:35 +0400
Subject: [PATCH 14/49] refactor(demo-wallet): add staking feature

Move the Staking screen, StakingInfo and StakingInterface into
features/staking with barrels. Repoint AppRouter and drop Staking
from the pages barrel.
---
 apps/demo-wallet/src/core/routing/app-router.tsx      |  3 ++-
 .../features/staking/components/staking-info/index.ts |  9 +++++++++
 .../staking/components/staking-info/staking-info.tsx} |  0
 .../staking/components/staking-interface/index.ts     |  9 +++++++++
 .../staking-interface/staking-interface.tsx}          |  3 +--
 .../staking/components/staking-screen/index.ts        |  9 +++++++++
 .../components/staking-screen/staking-screen.tsx}     |  6 +++---
 apps/demo-wallet/src/features/staking/index.ts        | 11 +++++++++++
 apps/demo-wallet/src/pages/index.ts                   |  1 -
 9 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 apps/demo-wallet/src/features/staking/components/staking-info/index.ts
 rename apps/demo-wallet/src/{components/staking/StakingInfo.tsx => features/staking/components/staking-info/staking-info.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/staking/components/staking-interface/index.ts
 rename apps/demo-wallet/src/{components/staking/StakingInterface.tsx => features/staking/components/staking-interface/staking-interface.tsx} (99%)
 create mode 100644 apps/demo-wallet/src/features/staking/components/staking-screen/index.ts
 rename apps/demo-wallet/src/{pages/Staking.tsx => features/staking/components/staking-screen/staking-screen.tsx} (92%)
 create mode 100644 apps/demo-wallet/src/features/staking/index.ts

diff --git a/apps/demo-wallet/src/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index 8c3c96605..346bfa2fe 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -13,7 +13,8 @@ import { useWalletStore, useWallet } from '@demo/wallet-core';
 import { ProtectedRoute } from './protected-route';
 
 import { LoaderCircle } from '@/components/LoaderCircle';
-import { WalletDashboard, TracePage, TransactionDetail, Staking, TonConnectRoute } from '@/pages';
+import { WalletDashboard, TracePage, TransactionDetail, TonConnectRoute } from '@/pages';
+import { Staking } from '@/features/staking';
 import { Swap } from '@/features/swap';
 import { SendTransaction } from '@/features/send';
 import { SetupPasswordScreen, UnlockScreen } from '@/features/auth';
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/components/staking/StakingInfo.tsx b/apps/demo-wallet/src/features/staking/components/staking-info/staking-info.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/staking/StakingInfo.tsx
rename to apps/demo-wallet/src/features/staking/components/staking-info/staking-info.tsx
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/components/staking/StakingInterface.tsx b/apps/demo-wallet/src/features/staking/components/staking-interface/staking-interface.tsx
similarity index 99%
rename from apps/demo-wallet/src/components/staking/StakingInterface.tsx
rename to apps/demo-wallet/src/features/staking/components/staking-interface/staking-interface.tsx
index c99b674c4..4470a8bed 100644
--- a/apps/demo-wallet/src/components/staking/StakingInterface.tsx
+++ b/apps/demo-wallet/src/features/staking/components/staking-interface/staking-interface.tsx
@@ -12,8 +12,7 @@ import { useStaking } from '@demo/wallet-core';
 import { useNavigate } from 'react-router-dom';
 import { UnstakeMode } from '@ton/walletkit';
 
-import { Button } from '../Button';
-
+import { Button } from '@/components/Button';
 import { Card } from '@/core/components/ui/card';
 import { cn } from '@/core/lib/utils';
 
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/pages/Staking.tsx b/apps/demo-wallet/src/features/staking/components/staking-screen/staking-screen.tsx
similarity index 92%
rename from apps/demo-wallet/src/pages/Staking.tsx
rename to apps/demo-wallet/src/features/staking/components/staking-screen/staking-screen.tsx
index aba33aaea..0f64bb556 100644
--- a/apps/demo-wallet/src/pages/Staking.tsx
+++ b/apps/demo-wallet/src/features/staking/components/staking-screen/staking-screen.tsx
@@ -11,10 +11,10 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useStaking, useWallet } from '@demo/wallet-core';
 
-import { Button } from '../components';
-import { StakingInterface } from '../components/staking/StakingInterface';
-import { StakingInfo } from '../components/staking/StakingInfo';
+import { StakingInterface } from '../staking-interface';
+import { StakingInfo } from '../staking-info';
 
+import { Button } from '@/components';
 import { Layout } from '@/core/components/shared/layout';
 
 export const Staking: FC = () => {
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..01ef8546b
--- /dev/null
+++ b/apps/demo-wallet/src/features/staking/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/staking-screen';
+export * from './components/staking-info';
+export * from './components/staking-interface';
diff --git a/apps/demo-wallet/src/pages/index.ts b/apps/demo-wallet/src/pages/index.ts
index ce71f1cbe..02b3b6d09 100644
--- a/apps/demo-wallet/src/pages/index.ts
+++ b/apps/demo-wallet/src/pages/index.ts
@@ -9,5 +9,4 @@
 export * from './WalletDashboard';
 export * from './TracePage';
 export * from './TransactionDetail';
-export * from './Staking';
 export * from './TonConnectRoute';

From 4deca5aab7fcec074aeaae28291c3b91e8220644 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:32:30 +0400
Subject: [PATCH 15/49] refactor(demo-wallet): add transactions feature

Move TracePage, TransactionDetail, TraceRow, RecentTransactions and the
transaction card components into features/transactions with barrels.
Repoint AppRouter and drop them from the pages/components barrels.
---
 apps/demo-wallet/src/components/index.ts            |  3 ---
 apps/demo-wallet/src/core/routing/app-router.tsx    |  3 ++-
 .../components/recent-transactions}/index.ts        |  5 +----
 .../recent-transactions/recent-transactions.tsx}    |  9 +++++++--
 .../transactions/components/trace-page/index.ts     |  9 +++++++++
 .../components/trace-page/trace-page.tsx}           |  2 +-
 .../transactions/components/trace-row/index.ts      |  9 +++++++++
 .../components/trace-row/trace-row.tsx}             |  0
 .../components/transaction-cards/action-card.tsx}   |  4 ++--
 .../components/transaction-cards/index.ts           | 12 ++++++++++++
 .../transaction-cards/ton-transfer-card.tsx}        |  0
 .../transaction-cards/transaction-card.tsx}         |  0
 .../transaction-cards/transaction-states.tsx}       |  0
 .../components/transaction-detail/index.ts          |  9 +++++++++
 .../transaction-detail/transaction-detail.tsx}      |  0
 apps/demo-wallet/src/features/transactions/index.ts | 13 +++++++++++++
 apps/demo-wallet/src/pages/index.ts                 |  2 --
 17 files changed, 65 insertions(+), 15 deletions(-)
 rename apps/demo-wallet/src/{components/transactions => features/transactions/components/recent-transactions}/index.ts (54%)
 rename apps/demo-wallet/src/{components/RecentTransactions.tsx => features/transactions/components/recent-transactions/recent-transactions.tsx} (99%)
 create mode 100644 apps/demo-wallet/src/features/transactions/components/trace-page/index.ts
 rename apps/demo-wallet/src/{pages/TracePage.tsx => features/transactions/components/trace-page/trace-page.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/transactions/components/trace-row/index.ts
 rename apps/demo-wallet/src/{components/TraceRow.tsx => features/transactions/components/trace-row/trace-row.tsx} (100%)
 rename apps/demo-wallet/src/{components/transactions/ActionCard.tsx => features/transactions/components/transaction-cards/action-card.tsx} (97%)
 create mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-cards/index.ts
 rename apps/demo-wallet/src/{components/transactions/TonTransferCard.tsx => features/transactions/components/transaction-cards/ton-transfer-card.tsx} (100%)
 rename apps/demo-wallet/src/{components/transactions/TransactionCard.tsx => features/transactions/components/transaction-cards/transaction-card.tsx} (100%)
 rename apps/demo-wallet/src/{components/transactions/TransactionStates.tsx => features/transactions/components/transaction-cards/transaction-states.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-detail/index.ts
 rename apps/demo-wallet/src/{pages/TransactionDetail.tsx => features/transactions/components/transaction-detail/transaction-detail.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/transactions/index.ts

diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index 786917ee8..315338a00 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -25,13 +25,10 @@ export { ReceiveModal } from './ReceiveModal';
 export { MnemonicDisplay } from './MnemonicDisplay';
 export { NetworkSelector } from './NetworkSelector';
 export { SettingsDropdown } from './SettingsDropdown';
-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/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index 346bfa2fe..d58764eac 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -13,7 +13,8 @@ import { useWalletStore, useWallet } from '@demo/wallet-core';
 import { ProtectedRoute } from './protected-route';
 
 import { LoaderCircle } from '@/components/LoaderCircle';
-import { WalletDashboard, TracePage, TransactionDetail, TonConnectRoute } from '@/pages';
+import { WalletDashboard, TonConnectRoute } from '@/pages';
+import { TracePage, TransactionDetail } from '@/features/transactions';
 import { Staking } from '@/features/staking';
 import { Swap } from '@/features/swap';
 import { SendTransaction } from '@/features/send';
diff --git a/apps/demo-wallet/src/components/transactions/index.ts b/apps/demo-wallet/src/features/transactions/components/recent-transactions/index.ts
similarity index 54%
rename from apps/demo-wallet/src/components/transactions/index.ts
rename to apps/demo-wallet/src/features/transactions/components/recent-transactions/index.ts
index 50757e4e4..0f88c6373 100644
--- a/apps/demo-wallet/src/components/transactions/index.ts
+++ b/apps/demo-wallet/src/features/transactions/components/recent-transactions/index.ts
@@ -6,7 +6,4 @@
  *
  */
 
-export * from './TransactionStates';
-export * from './TonTransferCard';
-export * from './TransactionCard';
-export * from './ActionCard';
+export * from './recent-transactions';
diff --git a/apps/demo-wallet/src/components/RecentTransactions.tsx b/apps/demo-wallet/src/features/transactions/components/recent-transactions/recent-transactions.tsx
similarity index 99%
rename from apps/demo-wallet/src/components/RecentTransactions.tsx
rename to apps/demo-wallet/src/features/transactions/components/recent-transactions/recent-transactions.tsx
index 2c0a87244..09a939afb 100644
--- a/apps/demo-wallet/src/components/RecentTransactions.tsx
+++ b/apps/demo-wallet/src/features/transactions/components/recent-transactions/recent-transactions.tsx
@@ -13,8 +13,13 @@ import { useWalletStore } from '@demo/wallet-core';
 import { Base64ToHex } from '@ton/walletkit';
 import type { Event, Action } from '@ton/walletkit';
 
-import { TraceRow } from './TraceRow';
-import { TransactionErrorState, TransactionLoadingState, TransactionEmptyState, ActionCard } from './transactions';
+import { TraceRow } from '../trace-row';
+import {
+    TransactionErrorState,
+    TransactionLoadingState,
+    TransactionEmptyState,
+    ActionCard,
+} from '../transaction-cards';
 
 import { formatTonForDisplay, getTonviewerTxUrl, sameAddress } from '@/core/utils';
 
diff --git a/apps/demo-wallet/src/features/transactions/components/trace-page/index.ts b/apps/demo-wallet/src/features/transactions/components/trace-page/index.ts
new file mode 100644
index 000000000..00fc8d7cd
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/trace-page/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 './trace-page';
diff --git a/apps/demo-wallet/src/pages/TracePage.tsx b/apps/demo-wallet/src/features/transactions/components/trace-page/trace-page.tsx
similarity index 98%
rename from apps/demo-wallet/src/pages/TracePage.tsx
rename to apps/demo-wallet/src/features/transactions/components/trace-page/trace-page.tsx
index 3ef5a58dc..5da3e9f5e 100644
--- a/apps/demo-wallet/src/pages/TracePage.tsx
+++ b/apps/demo-wallet/src/features/transactions/components/trace-page/trace-page.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { useParams, Link } from 'react-router-dom';
 
-import { TraceRow } from '../components/TraceRow';
+import { TraceRow } from '../trace-row';
 
 export const TracePage: React.FC = () => {
     const { traceId: fullTraceId } = useParams<{ traceId: string }>();
diff --git a/apps/demo-wallet/src/features/transactions/components/trace-row/index.ts b/apps/demo-wallet/src/features/transactions/components/trace-row/index.ts
new file mode 100644
index 000000000..12b371ed2
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/trace-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 './trace-row';
diff --git a/apps/demo-wallet/src/components/TraceRow.tsx b/apps/demo-wallet/src/features/transactions/components/trace-row/trace-row.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/TraceRow.tsx
rename to apps/demo-wallet/src/features/transactions/components/trace-row/trace-row.tsx
diff --git a/apps/demo-wallet/src/components/transactions/ActionCard.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-cards/action-card.tsx
similarity index 97%
rename from apps/demo-wallet/src/components/transactions/ActionCard.tsx
rename to apps/demo-wallet/src/features/transactions/components/transaction-cards/action-card.tsx
index 4ddf8ccd2..b1d1fb2e0 100644
--- a/apps/demo-wallet/src/components/transactions/ActionCard.tsx
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-cards/action-card.tsx
@@ -9,8 +9,8 @@
 import React, { memo, useMemo } from 'react';
 import type { Action } from '@ton/walletkit';
 
-import { TransactionCard } from './TransactionCard';
-import type { TxFinality } from './TransactionCard';
+import { TransactionCard } from './transaction-card';
+import type { TxFinality } from './transaction-card';
 
 import { formatTonForDisplay, sameAddress } from '@/core/utils';
 
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-cards/index.ts b/apps/demo-wallet/src/features/transactions/components/transaction-cards/index.ts
new file mode 100644
index 000000000..00c126978
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-cards/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (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-states';
+export * from './ton-transfer-card';
+export * from './transaction-card';
+export * from './action-card';
diff --git a/apps/demo-wallet/src/components/transactions/TonTransferCard.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-cards/ton-transfer-card.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/transactions/TonTransferCard.tsx
rename to apps/demo-wallet/src/features/transactions/components/transaction-cards/ton-transfer-card.tsx
diff --git a/apps/demo-wallet/src/components/transactions/TransactionCard.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-cards/transaction-card.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/transactions/TransactionCard.tsx
rename to apps/demo-wallet/src/features/transactions/components/transaction-cards/transaction-card.tsx
diff --git a/apps/demo-wallet/src/components/transactions/TransactionStates.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-cards/transaction-states.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/transactions/TransactionStates.tsx
rename to apps/demo-wallet/src/features/transactions/components/transaction-cards/transaction-states.tsx
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-detail/index.ts b/apps/demo-wallet/src/features/transactions/components/transaction-detail/index.ts
new file mode 100644
index 000000000..f83aea3b6
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-detail/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-detail';
diff --git a/apps/demo-wallet/src/pages/TransactionDetail.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-detail/transaction-detail.tsx
similarity index 100%
rename from apps/demo-wallet/src/pages/TransactionDetail.tsx
rename to apps/demo-wallet/src/features/transactions/components/transaction-detail/transaction-detail.tsx
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..957f57c5b
--- /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/trace-page';
+export * from './components/transaction-detail';
+export * from './components/trace-row';
+export * from './components/recent-transactions';
+export * from './components/transaction-cards';
diff --git a/apps/demo-wallet/src/pages/index.ts b/apps/demo-wallet/src/pages/index.ts
index 02b3b6d09..5bdd6cbef 100644
--- a/apps/demo-wallet/src/pages/index.ts
+++ b/apps/demo-wallet/src/pages/index.ts
@@ -7,6 +7,4 @@
  */
 
 export * from './WalletDashboard';
-export * from './TracePage';
-export * from './TransactionDetail';
 export * from './TonConnectRoute';

From 22aeb4aea748a4c103bffc990527e5a991420b17 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:35:21 +0400
Subject: [PATCH 16/49] refactor(demo-wallet): add ton-connect feature

Move TonConnectRoute and the dApp connect/request modals (ConnectDappModal,
ConnectRequestModal, DAppInfo, RequestModal, SignDataRequestModal,
SignMessageRequestModal, TransactionRequestModal, TransactionRequestDetails)
into features/ton-connect with barrels. Repoint AppRouter, WalletDashboard
and DashboardHeader; drop them from the pages/components barrels.
---
 .../src/components/DashboardHeader.tsx          |  2 +-
 apps/demo-wallet/src/components/index.ts        |  6 ------
 .../demo-wallet/src/core/routing/app-router.tsx |  3 ++-
 .../connect-dapp-modal/connect-dapp-modal.tsx}  |  3 +--
 .../components/connect-dapp-modal/index.ts      |  9 +++++++++
 .../connect-request-modal.tsx}                  |  6 +++---
 .../components/connect-request-modal/index.ts   |  9 +++++++++
 .../components/dapp-info/dapp-info.tsx}         |  0
 .../ton-connect/components/dapp-info/index.ts   |  9 +++++++++
 .../components/request-modal/index.ts           |  9 +++++++++
 .../components/request-modal/request-modal.tsx} |  7 +++----
 .../components/sign-data-request-modal/index.ts |  9 +++++++++
 .../sign-data-request-modal.tsx}                |  8 ++++----
 .../sign-message-request-modal/index.ts         |  9 +++++++++
 .../sign-message-request-modal.tsx}             |  4 ++--
 .../components/ton-connect-screen/index.ts      |  9 +++++++++
 .../ton-connect-screen/ton-connect-screen.tsx}  |  3 +--
 .../transaction-request-details/index.ts        |  9 +++++++++
 .../transaction-request-details.tsx}            |  0
 .../transaction-request-modal/index.ts          |  9 +++++++++
 .../transaction-request-modal.tsx}              |  4 ++--
 .../src/features/ton-connect/index.ts           | 17 +++++++++++++++++
 apps/demo-wallet/src/pages/WalletDashboard.tsx  |  9 +++------
 apps/demo-wallet/src/pages/index.ts             |  1 -
 24 files changed, 120 insertions(+), 34 deletions(-)
 rename apps/demo-wallet/src/{components/ConnectDappModal.tsx => features/ton-connect/components/connect-dapp-modal/connect-dapp-modal.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/connect-dapp-modal/index.ts
 rename apps/demo-wallet/src/{components/ConnectRequestModal.tsx => features/ton-connect/components/connect-request-modal/connect-request-modal.tsx} (99%)
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/connect-request-modal/index.ts
 rename apps/demo-wallet/src/{components/DAppInfo.tsx => features/ton-connect/components/dapp-info/dapp-info.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/dapp-info/index.ts
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/request-modal/index.ts
 rename apps/demo-wallet/src/{components/RequestModal.tsx => features/ton-connect/components/request-modal/request-modal.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/sign-data-request-modal/index.ts
 rename apps/demo-wallet/src/{components/SignDataRequestModal.tsx => features/ton-connect/components/sign-data-request-modal/sign-data-request-modal.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/index.ts
 rename apps/demo-wallet/src/{components/SignMessageRequestModal.tsx => features/ton-connect/components/sign-message-request-modal/sign-message-request-modal.tsx} (94%)
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/index.ts
 rename apps/demo-wallet/src/{pages/TonConnectRoute.tsx => features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx} (95%)
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/index.ts
 rename apps/demo-wallet/src/{components/TransactionRequestDetails.tsx => features/ton-connect/components/transaction-request-details/transaction-request-details.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/index.ts
 rename apps/demo-wallet/src/{components/TransactionRequestModal.tsx => features/ton-connect/components/transaction-request-modal/transaction-request-modal.tsx} (96%)
 create mode 100644 apps/demo-wallet/src/features/ton-connect/index.ts

diff --git a/apps/demo-wallet/src/components/DashboardHeader.tsx b/apps/demo-wallet/src/components/DashboardHeader.tsx
index a5e3639be..67330151e 100644
--- a/apps/demo-wallet/src/components/DashboardHeader.tsx
+++ b/apps/demo-wallet/src/components/DashboardHeader.tsx
@@ -12,8 +12,8 @@ import { useWallet } from '@demo/wallet-core';
 
 import { SettingsDropdown } from './SettingsDropdown';
 import { WalletSelectorModal } from './WalletSelectorModal';
-import { ConnectDappModal } from './ConnectDappModal';
 
+import { ConnectDappModal } from '@/features/ton-connect';
 import { ScanIcon } from '@/core/components/ui/icons';
 
 export const DashboardHeader: React.FC = () => {
diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index 315338a00..440dcf9dd 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -8,8 +8,6 @@
 
 export { AnimatedBalance } from './AnimatedBalance';
 export { Button } from './Button';
-export { ConnectRequestModal } from './ConnectRequestModal';
-export { DAppInfo } from './DAppInfo';
 export { Modal } from '@/core/components/ui/modal';
 export { DashboardHeader } from './DashboardHeader';
 export { BalanceTotal } from './BalanceTotal';
@@ -20,14 +18,10 @@ export { DashboardAssets } from './DashboardAssets';
 export { WalletSelectorModal } from './WalletSelectorModal';
 export { WalletRow } from './WalletRow';
 export { ToggleRow } from './ToggleRow';
-export { ConnectDappModal } from './ConnectDappModal';
 export { ReceiveModal } from './ReceiveModal';
 export { MnemonicDisplay } from './MnemonicDisplay';
 export { NetworkSelector } from './NetworkSelector';
 export { SettingsDropdown } from './SettingsDropdown';
-export { SignDataRequestModal } from './SignDataRequestModal';
-export { SignMessageRequestModal } from './SignMessageRequestModal';
-export { TransactionRequestModal } from './TransactionRequestModal';
 export { WalletPreview } from './WalletPreview';
 export { WalletSwitcher } from './WalletSwitcher';
 
diff --git a/apps/demo-wallet/src/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index d58764eac..82a8c7c87 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -13,7 +13,8 @@ import { useWalletStore, useWallet } from '@demo/wallet-core';
 import { ProtectedRoute } from './protected-route';
 
 import { LoaderCircle } from '@/components/LoaderCircle';
-import { WalletDashboard, TonConnectRoute } from '@/pages';
+import { WalletDashboard } from '@/pages';
+import { TonConnectRoute } from '@/features/ton-connect';
 import { TracePage, TransactionDetail } from '@/features/transactions';
 import { Staking } from '@/features/staking';
 import { Swap } from '@/features/swap';
diff --git a/apps/demo-wallet/src/components/ConnectDappModal.tsx b/apps/demo-wallet/src/features/ton-connect/components/connect-dapp-modal/connect-dapp-modal.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/ConnectDappModal.tsx
rename to apps/demo-wallet/src/features/ton-connect/components/connect-dapp-modal/connect-dapp-modal.tsx
index 878b07f68..652d93c96 100644
--- a/apps/demo-wallet/src/components/ConnectDappModal.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/connect-dapp-modal/connect-dapp-modal.tsx
@@ -9,8 +9,7 @@
 import React, { useCallback, useState } from 'react';
 import { useTonConnect } from '@demo/wallet-core';
 
-import { Button } from './Button';
-
+import { Button } from '@/components/Button';
 import { Modal } from '@/core/components/ui/modal';
 
 interface ConnectDappModalProps {
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/components/ConnectRequestModal.tsx b/apps/demo-wallet/src/features/ton-connect/components/connect-request-modal/connect-request-modal.tsx
similarity index 99%
rename from apps/demo-wallet/src/components/ConnectRequestModal.tsx
rename to apps/demo-wallet/src/features/ton-connect/components/connect-request-modal/connect-request-modal.tsx
index 0fb79aff6..3bed952f2 100644
--- a/apps/demo-wallet/src/components/ConnectRequestModal.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/connect-request-modal/connect-request-modal.tsx
@@ -12,10 +12,10 @@ 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 { DAppInfo } from '../dapp-info';
 
+import { Button } from '@/components/Button';
+import { WalletPreview } from '@/components/WalletPreview';
 import { createComponentLogger } from '@/core/lib/logger';
 
 // Create logger for connect request modal
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/components/DAppInfo.tsx b/apps/demo-wallet/src/features/ton-connect/components/dapp-info/dapp-info.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/DAppInfo.tsx
rename to apps/demo-wallet/src/features/ton-connect/components/dapp-info/dapp-info.tsx
diff --git a/apps/demo-wallet/src/features/ton-connect/components/dapp-info/index.ts b/apps/demo-wallet/src/features/ton-connect/components/dapp-info/index.ts
new file mode 100644
index 000000000..7c8e88e86
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/dapp-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 './dapp-info';
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/components/RequestModal.tsx b/apps/demo-wallet/src/features/ton-connect/components/request-modal/request-modal.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/RequestModal.tsx
rename to apps/demo-wallet/src/features/ton-connect/components/request-modal/request-modal.tsx
index 47d75ea27..f50ec0636 100644
--- a/apps/demo-wallet/src/components/RequestModal.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/request-modal/request-modal.tsx
@@ -12,10 +12,9 @@ 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 { SuccessCard } from './SuccessCard';
-
+import { Button } from '@/components/Button';
+import { HoldToSignButton } from '@/components/HoldToSignButton';
+import { SuccessCard } from '@/components/SuccessCard';
 import { JettonFlow } from '@/features/jettons';
 import { createComponentLogger } from '@/core/lib/logger';
 
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/components/SignDataRequestModal.tsx b/apps/demo-wallet/src/features/ton-connect/components/sign-data-request-modal/sign-data-request-modal.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/SignDataRequestModal.tsx
rename to apps/demo-wallet/src/features/ton-connect/components/sign-data-request-modal/sign-data-request-modal.tsx
index 4cced3721..919168395 100644
--- a/apps/demo-wallet/src/components/SignDataRequestModal.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/sign-data-request-modal/sign-data-request-modal.tsx
@@ -11,11 +11,11 @@ import type { SignDataRequestEvent } from '@ton/walletkit';
 import type { SavedWallet } from '@demo/wallet-core';
 import { useAuth } from '@demo/wallet-core';
 
-import { Button } from './Button';
-import { DAppInfo } from './DAppInfo';
-import { WalletPreview } from './WalletPreview';
-import { HoldToSignButton } from './HoldToSignButton';
+import { DAppInfo } from '../dapp-info';
 
+import { Button } from '@/components/Button';
+import { WalletPreview } from '@/components/WalletPreview';
+import { HoldToSignButton } from '@/components/HoldToSignButton';
 import { createComponentLogger } from '@/core/lib/logger';
 import { Card } from '@/core/components/ui/card';
 
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 94%
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..9a0434d81 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;
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 95%
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 2c190bf17..018314243 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,8 +10,7 @@ import React, { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTonConnect } from '@demo/wallet-core';
 
-import { LoaderCircle } from '../components/LoaderCircle';
-
+import { LoaderCircle } from '@/components/LoaderCircle';
 import { createComponentLogger } from '@/core/lib/logger';
 import { Layout } from '@/core/components/shared/layout';
 
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 100%
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
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 96%
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 1181a2db3..943a3c1ab 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,8 +13,8 @@ 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 { RequestModal } from '../request-modal';
+import { TransactionRequestDetails } from '../transaction-request-details';
 
 import { useActiveWalletNetwork } from '@/features/jettons';
 
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..1f970f58a
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/index.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.
+ *
+ */
+
+export * from './components/ton-connect-screen';
+export * from './components/connect-dapp-modal';
+export * from './components/connect-request-modal';
+export * from './components/dapp-info';
+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/pages/WalletDashboard.tsx b/apps/demo-wallet/src/pages/WalletDashboard.tsx
index 15e2dd9ea..562140e1e 100644
--- a/apps/demo-wallet/src/pages/WalletDashboard.tsx
+++ b/apps/demo-wallet/src/pages/WalletDashboard.tsx
@@ -15,17 +15,14 @@ import {
     useSignMessageRequests,
 } from '@demo/wallet-core';
 
+import { DashboardHeader, BalanceTotal, DashboardActions, DashboardAssets } from '../components';
+
 import {
-    DashboardHeader,
-    BalanceTotal,
-    DashboardActions,
-    DashboardAssets,
     ConnectRequestModal,
     TransactionRequestModal,
     SignDataRequestModal,
     SignMessageRequestModal,
-} from '../components';
-
+} from '@/features/ton-connect';
 import { NewLayout } from '@/core/components/shared/new-layout';
 import { NftsCard } from '@/features/nft';
 import { usePasteHandler } from '@/core/hooks/use-paste-handler';
diff --git a/apps/demo-wallet/src/pages/index.ts b/apps/demo-wallet/src/pages/index.ts
index 5bdd6cbef..816a2c9f8 100644
--- a/apps/demo-wallet/src/pages/index.ts
+++ b/apps/demo-wallet/src/pages/index.ts
@@ -7,4 +7,3 @@
  */
 
 export * from './WalletDashboard';
-export * from './TonConnectRoute';

From c6c479e169128c339cd22eb20874622e0196ec07 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:36:41 +0400
Subject: [PATCH 17/49] refactor(demo-wallet): add settings feature

Move SettingsDropdown and ToggleRow into features/settings with barrels.
Repoint DashboardHeader and the Layout shell; drop them from the
components barrel.
---
 apps/demo-wallet/src/components/DashboardHeader.tsx    |  2 +-
 apps/demo-wallet/src/components/index.ts               |  2 --
 .../src/core/components/shared/layout/layout.tsx       |  2 +-
 .../settings/components/settings-dropdown/index.ts     |  9 +++++++++
 .../settings-dropdown/settings-dropdown.tsx}           |  4 ++--
 .../features/settings/components/toggle-row/index.ts   |  9 +++++++++
 .../settings/components/toggle-row/toggle-row.tsx}     |  0
 apps/demo-wallet/src/features/settings/index.ts        | 10 ++++++++++
 8 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 apps/demo-wallet/src/features/settings/components/settings-dropdown/index.ts
 rename apps/demo-wallet/src/{components/SettingsDropdown.tsx => features/settings/components/settings-dropdown/settings-dropdown.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/settings/components/toggle-row/index.ts
 rename apps/demo-wallet/src/{components/ToggleRow.tsx => features/settings/components/toggle-row/toggle-row.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/settings/index.ts

diff --git a/apps/demo-wallet/src/components/DashboardHeader.tsx b/apps/demo-wallet/src/components/DashboardHeader.tsx
index 67330151e..abd425482 100644
--- a/apps/demo-wallet/src/components/DashboardHeader.tsx
+++ b/apps/demo-wallet/src/components/DashboardHeader.tsx
@@ -10,9 +10,9 @@ import React, { useState } from 'react';
 import { ChevronDown } from 'lucide-react';
 import { useWallet } from '@demo/wallet-core';
 
-import { SettingsDropdown } from './SettingsDropdown';
 import { WalletSelectorModal } from './WalletSelectorModal';
 
+import { SettingsDropdown } from '@/features/settings';
 import { ConnectDappModal } from '@/features/ton-connect';
 import { ScanIcon } from '@/core/components/ui/icons';
 
diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index 440dcf9dd..7bef0e248 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -17,11 +17,9 @@ export { DashboardAssetRow, DashboardAssetRowSkeleton } from './DashboardAssetRo
 export { DashboardAssets } from './DashboardAssets';
 export { WalletSelectorModal } from './WalletSelectorModal';
 export { WalletRow } from './WalletRow';
-export { ToggleRow } from './ToggleRow';
 export { ReceiveModal } from './ReceiveModal';
 export { MnemonicDisplay } from './MnemonicDisplay';
 export { NetworkSelector } from './NetworkSelector';
-export { SettingsDropdown } from './SettingsDropdown';
 export { WalletPreview } from './WalletPreview';
 export { WalletSwitcher } from './WalletSwitcher';
 
diff --git a/apps/demo-wallet/src/core/components/shared/layout/layout.tsx b/apps/demo-wallet/src/core/components/shared/layout/layout.tsx
index 674366643..c7636391d 100644
--- a/apps/demo-wallet/src/core/components/shared/layout/layout.tsx
+++ b/apps/demo-wallet/src/core/components/shared/layout/layout.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { SettingsDropdown } from '@/components/SettingsDropdown';
+import { SettingsDropdown } from '@/features/settings';
 // import { StreamingStatus } from './StreamingStatus';
 
 interface LayoutProps {
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/components/SettingsDropdown.tsx b/apps/demo-wallet/src/features/settings/components/settings-dropdown/settings-dropdown.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/SettingsDropdown.tsx
rename to apps/demo-wallet/src/features/settings/components/settings-dropdown/settings-dropdown.tsx
index 21b88d372..d906effad 100644
--- a/apps/demo-wallet/src/components/SettingsDropdown.tsx
+++ b/apps/demo-wallet/src/features/settings/components/settings-dropdown/settings-dropdown.tsx
@@ -11,9 +11,9 @@ import { useNavigate } from 'react-router-dom';
 import { ChevronRight, KeyRound, Lock, Plus, Trash2 } from 'lucide-react';
 import { useAuth, useWallet } from '@demo/wallet-core';
 
-import { MnemonicDisplay } from './MnemonicDisplay';
-import { ToggleRow } from './ToggleRow';
+import { ToggleRow } from '../toggle-row';
 
+import { MnemonicDisplay } from '@/components/MnemonicDisplay';
 import { createComponentLogger } from '@/core/lib/logger';
 import { Modal } from '@/core/components/ui/modal';
 import { SettingsIcon } from '@/core/components/ui/icons';
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/components/ToggleRow.tsx b/apps/demo-wallet/src/features/settings/components/toggle-row/toggle-row.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/ToggleRow.tsx
rename to apps/demo-wallet/src/features/settings/components/toggle-row/toggle-row.tsx
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';

From 483c85c534e8dc5e99335e4eddc05d7318735b42 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:39:34 +0400
Subject: [PATCH 18/49] refactor(demo-wallet): add wallets feature

Move wallet management (WalletSwitcher, WalletSelectorModal, WalletRow,
WalletPreview, Mnemonic* components), ReceiveModal, NetworkSelector and
the bip39 word list into features/wallets with barrels. Repoint all
consumers; drop them from the components barrel.
---
 .../src/components/DashboardActions.tsx        |  2 +-
 .../src/components/DashboardHeader.tsx         |  3 +--
 apps/demo-wallet/src/components/index.ts       |  9 ++-------
 .../components/ledger-screen/ledger-screen.tsx |  2 +-
 .../send-transaction/send-transaction.tsx      |  3 ++-
 .../settings-dropdown/settings-dropdown.tsx    |  2 +-
 .../connect-request-modal.tsx                  |  2 +-
 .../sign-data-request-modal.tsx                |  2 +-
 .../create-wallet-screen.tsx                   |  2 +-
 .../import-wallet-screen.tsx                   |  4 ++--
 .../components/mnemonic-display/index.ts       |  9 +++++++++
 .../mnemonic-display/mnemonic-display.tsx}     |  0
 .../wallets/components/mnemonic-grid/index.ts  |  9 +++++++++
 .../mnemonic-grid/mnemonic-grid.tsx}           |  0
 .../components/mnemonic-skeleton/index.ts      |  9 +++++++++
 .../mnemonic-skeleton/mnemonic-skeleton.tsx}   |  0
 .../components/network-selector/index.ts       |  9 +++++++++
 .../network-selector/network-selector.tsx}     |  0
 .../wallets/components/receive-modal/index.ts  |  9 +++++++++
 .../receive-modal/receive-modal.tsx}           |  0
 .../wallets/components/wallet-preview/index.ts |  9 +++++++++
 .../wallet-preview/wallet-preview.tsx}         |  0
 .../wallets/components/wallet-row/index.ts     |  9 +++++++++
 .../components/wallet-row/wallet-row.tsx}      |  0
 .../components/wallet-selector-modal/index.ts  |  9 +++++++++
 .../wallet-selector-modal.tsx}                 |  2 +-
 .../components/wallet-switcher/index.ts        |  9 +++++++++
 .../wallet-switcher/wallet-switcher.tsx}       |  0
 apps/demo-wallet/src/features/wallets/index.ts | 18 ++++++++++++++++++
 .../wallets/utils/bip39-english.ts}            |  0
 30 files changed, 113 insertions(+), 19 deletions(-)
 create mode 100644 apps/demo-wallet/src/features/wallets/components/mnemonic-display/index.ts
 rename apps/demo-wallet/src/{components/MnemonicDisplay.tsx => features/wallets/components/mnemonic-display/mnemonic-display.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/wallets/components/mnemonic-grid/index.ts
 rename apps/demo-wallet/src/{components/MnemonicGrid.tsx => features/wallets/components/mnemonic-grid/mnemonic-grid.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/wallets/components/mnemonic-skeleton/index.ts
 rename apps/demo-wallet/src/{components/MnemonicSkeleton.tsx => features/wallets/components/mnemonic-skeleton/mnemonic-skeleton.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/wallets/components/network-selector/index.ts
 rename apps/demo-wallet/src/{components/NetworkSelector.tsx => features/wallets/components/network-selector/network-selector.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/wallets/components/receive-modal/index.ts
 rename apps/demo-wallet/src/{components/ReceiveModal.tsx => features/wallets/components/receive-modal/receive-modal.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/wallets/components/wallet-preview/index.ts
 rename apps/demo-wallet/src/{components/WalletPreview.tsx => features/wallets/components/wallet-preview/wallet-preview.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/wallets/components/wallet-row/index.ts
 rename apps/demo-wallet/src/{components/WalletRow.tsx => features/wallets/components/wallet-row/wallet-row.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/wallets/components/wallet-selector-modal/index.ts
 rename apps/demo-wallet/src/{components/WalletSelectorModal.tsx => features/wallets/components/wallet-selector-modal/wallet-selector-modal.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/wallets/components/wallet-switcher/index.ts
 rename apps/demo-wallet/src/{components/WalletSwitcher.tsx => features/wallets/components/wallet-switcher/wallet-switcher.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/wallets/index.ts
 rename apps/demo-wallet/src/{utils/bip39English.ts => features/wallets/utils/bip39-english.ts} (100%)

diff --git a/apps/demo-wallet/src/components/DashboardActions.tsx b/apps/demo-wallet/src/components/DashboardActions.tsx
index bdacb1c15..b01dee47b 100644
--- a/apps/demo-wallet/src/components/DashboardActions.tsx
+++ b/apps/demo-wallet/src/components/DashboardActions.tsx
@@ -10,8 +10,8 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { DashboardActionButton } from './DashboardActionButton';
-import { ReceiveModal } from './ReceiveModal';
 
+import { ReceiveModal } from '@/features/wallets';
 import { SwapIcon, ReceiveIcon, SendIcon } from '@/core/components/ui/icons';
 
 export const DashboardActions: React.FC = () => {
diff --git a/apps/demo-wallet/src/components/DashboardHeader.tsx b/apps/demo-wallet/src/components/DashboardHeader.tsx
index abd425482..ada288c9d 100644
--- a/apps/demo-wallet/src/components/DashboardHeader.tsx
+++ b/apps/demo-wallet/src/components/DashboardHeader.tsx
@@ -10,8 +10,7 @@ import React, { useState } from 'react';
 import { ChevronDown } from 'lucide-react';
 import { useWallet } from '@demo/wallet-core';
 
-import { WalletSelectorModal } from './WalletSelectorModal';
-
+import { WalletSelectorModal } from '@/features/wallets';
 import { SettingsDropdown } from '@/features/settings';
 import { ConnectDappModal } from '@/features/ton-connect';
 import { ScanIcon } from '@/core/components/ui/icons';
diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index 7bef0e248..bd92c12c3 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -15,12 +15,7 @@ export { DashboardActionButton } from './DashboardActionButton';
 export { DashboardActions } from './DashboardActions';
 export { DashboardAssetRow, DashboardAssetRowSkeleton } from './DashboardAssetRow';
 export { DashboardAssets } from './DashboardAssets';
-export { WalletSelectorModal } from './WalletSelectorModal';
-export { WalletRow } from './WalletRow';
-export { ReceiveModal } from './ReceiveModal';
-export { MnemonicDisplay } from './MnemonicDisplay';
-export { NetworkSelector } from './NetworkSelector';
-export { WalletPreview } from './WalletPreview';
-export { WalletSwitcher } from './WalletSwitcher';
+export { WalletSelectorModal } from '@/features/wallets';
+export { ReceiveModal } from '@/features/wallets';
 
 // Transaction components
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
index 64009194d..aa1a93c44 100644
--- 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
@@ -14,7 +14,7 @@ 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 '@/components/NetworkSelector';
+import { NetworkSelector } from '@/features/wallets';
 import { useTonWallet } from '@/hooks';
 
 /** Dedicated screen for connecting a Ledger hardware wallet. */
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
index be24cde8a..901ea2fd1 100644
--- 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
@@ -15,7 +15,8 @@ import { toast } from 'sonner';
 
 import { useSendToken } from '../../hooks/use-send-token';
 
-import { Button, AnimatedBalance, WalletSwitcher } from '@/components';
+import { Button, AnimatedBalance } from '@/components';
+import { WalletSwitcher } from '@/features/wallets';
 import { createComponentLogger } from '@/core/lib/logger';
 import { Layout } from '@/core/components/shared/layout';
 import { Input } from '@/core/components/ui/input';
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
index d906effad..bdf059974 100644
--- 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
@@ -13,7 +13,7 @@ import { useAuth, useWallet } from '@demo/wallet-core';
 
 import { ToggleRow } from '../toggle-row';
 
-import { MnemonicDisplay } from '@/components/MnemonicDisplay';
+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';
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
index 3bed952f2..3107ee6db 100644
--- 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
@@ -15,7 +15,7 @@ import { toast } from 'sonner';
 import { DAppInfo } from '../dapp-info';
 
 import { Button } from '@/components/Button';
-import { WalletPreview } from '@/components/WalletPreview';
+import { WalletPreview } from '@/features/wallets';
 import { createComponentLogger } from '@/core/lib/logger';
 
 // Create logger for connect 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
index 919168395..40ec51804 100644
--- 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
@@ -14,7 +14,7 @@ import { useAuth } from '@demo/wallet-core';
 import { DAppInfo } from '../dapp-info';
 
 import { Button } from '@/components/Button';
-import { WalletPreview } from '@/components/WalletPreview';
+import { WalletPreview } from '@/features/wallets';
 import { HoldToSignButton } from '@/components/HoldToSignButton';
 import { createComponentLogger } from '@/core/lib/logger';
 import { Card } from '@/core/components/ui/card';
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
index bf1df3b46..043cad47c 100644
--- 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
@@ -15,7 +15,7 @@ import { toast } from 'sonner';
 
 import { CenteredScreen } from '@/core/components/shared/centered-screen';
 import { Button } from '@/core/components/ui/button';
-import { NetworkSelector } from '@/components/NetworkSelector';
+import { NetworkSelector } from '@/features/wallets';
 import { useTonWallet } from '@/hooks';
 
 /** Dedicated "Recovery phrase" screen for creating a new wallet. */
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
index 2871b5b53..37b3612ee 100644
--- a/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
+++ b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
@@ -15,14 +15,14 @@ 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 '@/components/NetworkSelector';
+import { NetworkSelector } from '@/features/wallets';
 import { useTonWallet } from '@/hooks';
 import {
     applyMnemonicPaste,
     evaluateBip39Slots,
     extractMnemonicWordsFromPaste,
     isImportableBip39,
-} from '@/utils/bip39English';
+} from '@/features/wallets';
 
 type WalletVersion = 'v5r1' | 'v4r2';
 type WalletInterface = 'mnemonic' | 'signer';
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 100%
rename from apps/demo-wallet/src/components/NetworkSelector.tsx
rename to apps/demo-wallet/src/features/wallets/components/network-selector/network-selector.tsx
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/components/ReceiveModal.tsx b/apps/demo-wallet/src/features/wallets/components/receive-modal/receive-modal.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/ReceiveModal.tsx
rename to apps/demo-wallet/src/features/wallets/components/receive-modal/receive-modal.tsx
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 100%
rename from apps/demo-wallet/src/components/WalletPreview.tsx
rename to apps/demo-wallet/src/features/wallets/components/wallet-preview/wallet-preview.tsx
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/components/WalletRow.tsx b/apps/demo-wallet/src/features/wallets/components/wallet-row/wallet-row.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/WalletRow.tsx
rename to apps/demo-wallet/src/features/wallets/components/wallet-row/wallet-row.tsx
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/components/WalletSelectorModal.tsx b/apps/demo-wallet/src/features/wallets/components/wallet-selector-modal/wallet-selector-modal.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/WalletSelectorModal.tsx
rename to apps/demo-wallet/src/features/wallets/components/wallet-selector-modal/wallet-selector-modal.tsx
index 21a42de56..4ca9a53ff 100644
--- a/apps/demo-wallet/src/components/WalletSelectorModal.tsx
+++ b/apps/demo-wallet/src/features/wallets/components/wallet-selector-modal/wallet-selector-modal.tsx
@@ -11,7 +11,7 @@ import { useNavigate } from 'react-router-dom';
 import { Plus } from 'lucide-react';
 import { useWallet } from '@demo/wallet-core';
 
-import { WalletRow } from './WalletRow';
+import { WalletRow } from '../wallet-row';
 
 import { Modal } from '@/core/components/ui/modal';
 import { AddWalletModal, WALLET_SETUP_ROUTE } from '@/features/wallet-setup';
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 100%
rename from apps/demo-wallet/src/components/WalletSwitcher.tsx
rename to apps/demo-wallet/src/features/wallets/components/wallet-switcher/wallet-switcher.tsx
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..68f6906fe
--- /dev/null
+++ b/apps/demo-wallet/src/features/wallets/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/wallet-switcher';
+export * from './components/wallet-selector-modal';
+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

From 906e908dd85ba1faaf1cb8e1dab2aa51b89e3323 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:43:39 +0400
Subject: [PATCH 19/49] refactor(demo-wallet): add dashboard feature

Move WalletDashboard and the dashboard components (DashboardHeader,
DashboardActions, DashboardActionButton, DashboardAssets,
DashboardAssetRow, BalanceTotal, AnimatedBalance) into features/dashboard
with barrels. Repoint AppRouter and remove the now-empty pages/ barrel.
---
 apps/demo-wallet/src/components/index.ts         |  7 -------
 apps/demo-wallet/src/core/routing/app-router.tsx |  2 +-
 .../animated-balance/animated-balance.tsx}       |  0
 .../components/animated-balance/index.ts         |  9 +++++++++
 .../components/balance-total/balance-total.tsx}  |  0
 .../dashboard/components/balance-total}/index.ts |  2 +-
 .../dashboard-action-button.tsx}                 |  0
 .../components/dashboard-action-button/index.ts  |  9 +++++++++
 .../dashboard-actions/dashboard-actions.tsx}     |  2 +-
 .../components/dashboard-actions/index.ts        |  9 +++++++++
 .../dashboard-asset-row/dashboard-asset-row.tsx} |  0
 .../components/dashboard-asset-row/index.ts      |  9 +++++++++
 .../dashboard-assets/dashboard-assets.tsx}       |  2 +-
 .../components/dashboard-assets/index.ts         |  9 +++++++++
 .../dashboard-header/dashboard-header.tsx}       |  0
 .../components/dashboard-header/index.ts         |  9 +++++++++
 .../components/wallet-dashboard/index.ts         |  9 +++++++++
 .../wallet-dashboard/wallet-dashboard.tsx}       |  5 ++++-
 apps/demo-wallet/src/features/dashboard/index.ts | 16 ++++++++++++++++
 .../send-transaction/send-transaction.tsx        |  3 ++-
 apps/demo-wallet/src/index.ts                    |  1 -
 21 files changed, 89 insertions(+), 14 deletions(-)
 rename apps/demo-wallet/src/{components/AnimatedBalance.tsx => features/dashboard/components/animated-balance/animated-balance.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/dashboard/components/animated-balance/index.ts
 rename apps/demo-wallet/src/{components/BalanceTotal.tsx => features/dashboard/components/balance-total/balance-total.tsx} (100%)
 rename apps/demo-wallet/src/{pages => features/dashboard/components/balance-total}/index.ts (82%)
 rename apps/demo-wallet/src/{components/DashboardActionButton.tsx => features/dashboard/components/dashboard-action-button/dashboard-action-button.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/dashboard/components/dashboard-action-button/index.ts
 rename apps/demo-wallet/src/{components/DashboardActions.tsx => features/dashboard/components/dashboard-actions/dashboard-actions.tsx} (95%)
 create mode 100644 apps/demo-wallet/src/features/dashboard/components/dashboard-actions/index.ts
 rename apps/demo-wallet/src/{components/DashboardAssetRow.tsx => features/dashboard/components/dashboard-asset-row/dashboard-asset-row.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/index.ts
 rename apps/demo-wallet/src/{components/DashboardAssets.tsx => features/dashboard/components/dashboard-assets/dashboard-assets.tsx} (98%)
 create mode 100644 apps/demo-wallet/src/features/dashboard/components/dashboard-assets/index.ts
 rename apps/demo-wallet/src/{components/DashboardHeader.tsx => features/dashboard/components/dashboard-header/dashboard-header.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/features/dashboard/components/dashboard-header/index.ts
 create mode 100644 apps/demo-wallet/src/features/dashboard/components/wallet-dashboard/index.ts
 rename apps/demo-wallet/src/{pages/WalletDashboard.tsx => features/dashboard/components/wallet-dashboard/wallet-dashboard.tsx} (93%)
 create mode 100644 apps/demo-wallet/src/features/dashboard/index.ts

diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
index bd92c12c3..258965114 100644
--- a/apps/demo-wallet/src/components/index.ts
+++ b/apps/demo-wallet/src/components/index.ts
@@ -6,15 +6,8 @@
  *
  */
 
-export { AnimatedBalance } from './AnimatedBalance';
 export { Button } from './Button';
 export { Modal } from '@/core/components/ui/modal';
-export { DashboardHeader } from './DashboardHeader';
-export { BalanceTotal } from './BalanceTotal';
-export { DashboardActionButton } from './DashboardActionButton';
-export { DashboardActions } from './DashboardActions';
-export { DashboardAssetRow, DashboardAssetRowSkeleton } from './DashboardAssetRow';
-export { DashboardAssets } from './DashboardAssets';
 export { WalletSelectorModal } from '@/features/wallets';
 export { ReceiveModal } from '@/features/wallets';
 
diff --git a/apps/demo-wallet/src/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index 82a8c7c87..7ff78ec2c 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -13,7 +13,7 @@ import { useWalletStore, useWallet } from '@demo/wallet-core';
 import { ProtectedRoute } from './protected-route';
 
 import { LoaderCircle } from '@/components/LoaderCircle';
-import { WalletDashboard } from '@/pages';
+import { WalletDashboard } from '@/features/dashboard';
 import { TonConnectRoute } from '@/features/ton-connect';
 import { TracePage, TransactionDetail } from '@/features/transactions';
 import { Staking } from '@/features/staking';
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 100%
rename from apps/demo-wallet/src/components/AnimatedBalance.tsx
rename to apps/demo-wallet/src/features/dashboard/components/animated-balance/animated-balance.tsx
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/components/BalanceTotal.tsx b/apps/demo-wallet/src/features/dashboard/components/balance-total/balance-total.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/BalanceTotal.tsx
rename to apps/demo-wallet/src/features/dashboard/components/balance-total/balance-total.tsx
diff --git a/apps/demo-wallet/src/pages/index.ts b/apps/demo-wallet/src/features/dashboard/components/balance-total/index.ts
similarity index 82%
rename from apps/demo-wallet/src/pages/index.ts
rename to apps/demo-wallet/src/features/dashboard/components/balance-total/index.ts
index 816a2c9f8..f9061d039 100644
--- a/apps/demo-wallet/src/pages/index.ts
+++ b/apps/demo-wallet/src/features/dashboard/components/balance-total/index.ts
@@ -6,4 +6,4 @@
  *
  */
 
-export * from './WalletDashboard';
+export * from './balance-total';
diff --git a/apps/demo-wallet/src/components/DashboardActionButton.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-action-button/dashboard-action-button.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/DashboardActionButton.tsx
rename to apps/demo-wallet/src/features/dashboard/components/dashboard-action-button/dashboard-action-button.tsx
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/components/DashboardActions.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-actions/dashboard-actions.tsx
similarity index 95%
rename from apps/demo-wallet/src/components/DashboardActions.tsx
rename to apps/demo-wallet/src/features/dashboard/components/dashboard-actions/dashboard-actions.tsx
index b01dee47b..8ecf67ebd 100644
--- a/apps/demo-wallet/src/components/DashboardActions.tsx
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-actions/dashboard-actions.tsx
@@ -9,7 +9,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { DashboardActionButton } from './DashboardActionButton';
+import { DashboardActionButton } from '../dashboard-action-button';
 
 import { ReceiveModal } from '@/features/wallets';
 import { SwapIcon, ReceiveIcon, SendIcon } from '@/core/components/ui/icons';
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/components/DashboardAssetRow.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/dashboard-asset-row.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/DashboardAssetRow.tsx
rename to apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/dashboard-asset-row.tsx
diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/index.ts b/apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/index.ts
new file mode 100644
index 000000000..cbef02d24
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-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 './dashboard-asset-row';
diff --git a/apps/demo-wallet/src/components/DashboardAssets.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-assets/dashboard-assets.tsx
similarity index 98%
rename from apps/demo-wallet/src/components/DashboardAssets.tsx
rename to apps/demo-wallet/src/features/dashboard/components/dashboard-assets/dashboard-assets.tsx
index 6f1b0ce3b..ae6649d1a 100644
--- a/apps/demo-wallet/src/components/DashboardAssets.tsx
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-assets/dashboard-assets.tsx
@@ -11,7 +11,7 @@ import { ChevronRight } from 'lucide-react';
 import { useJettons, useRates, useWallet, useWalletKit } from '@demo/wallet-core';
 import type { JettonInfo } from '@ton/walletkit';
 
-import { DashboardAssetRow, DashboardAssetRowSkeleton } from './DashboardAssetRow';
+import { DashboardAssetRow, DashboardAssetRowSkeleton } from '../dashboard-asset-row';
 
 import { getJettonsName, getJettonsSymbol } from '@/features/jettons';
 import { findRate, formatRate, toDecimal } from '@/core/utils';
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/components/DashboardHeader.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-header/dashboard-header.tsx
similarity index 100%
rename from apps/demo-wallet/src/components/DashboardHeader.tsx
rename to apps/demo-wallet/src/features/dashboard/components/dashboard-header/dashboard-header.tsx
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/pages/WalletDashboard.tsx b/apps/demo-wallet/src/features/dashboard/components/wallet-dashboard/wallet-dashboard.tsx
similarity index 93%
rename from apps/demo-wallet/src/pages/WalletDashboard.tsx
rename to apps/demo-wallet/src/features/dashboard/components/wallet-dashboard/wallet-dashboard.tsx
index 562140e1e..6aeec9641 100644
--- a/apps/demo-wallet/src/pages/WalletDashboard.tsx
+++ b/apps/demo-wallet/src/features/dashboard/components/wallet-dashboard/wallet-dashboard.tsx
@@ -15,7 +15,10 @@ import {
     useSignMessageRequests,
 } from '@demo/wallet-core';
 
-import { DashboardHeader, BalanceTotal, DashboardActions, DashboardAssets } from '../components';
+import { DashboardHeader } from '../dashboard-header';
+import { BalanceTotal } from '../balance-total';
+import { DashboardActions } from '../dashboard-actions';
+import { DashboardAssets } from '../dashboard-assets';
 
 import {
     ConnectRequestModal,
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..3d6bcd19f
--- /dev/null
+++ b/apps/demo-wallet/src/features/dashboard/index.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (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-asset-row';
+export * from './components/dashboard-assets';
+export * from './components/dashboard-header';
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
index 901ea2fd1..2fe69e8a3 100644
--- 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
@@ -15,7 +15,8 @@ import { toast } from 'sonner';
 
 import { useSendToken } from '../../hooks/use-send-token';
 
-import { Button, AnimatedBalance } from '@/components';
+import { Button } from '@/components';
+import { AnimatedBalance } from '@/features/dashboard';
 import { WalletSwitcher } from '@/features/wallets';
 import { createComponentLogger } from '@/core/lib/logger';
 import { Layout } from '@/core/components/shared/layout';
diff --git a/apps/demo-wallet/src/index.ts b/apps/demo-wallet/src/index.ts
index 65ba1019c..6a9ee62f9 100644
--- a/apps/demo-wallet/src/index.ts
+++ b/apps/demo-wallet/src/index.ts
@@ -8,7 +8,6 @@
 
 // Re-export main app components and utilities
 export * from './components';
-export * from './pages';
 export * from './hooks';
 export * from '@/core/utils';
 

From 4b5b67a2de2d7fa58d610591387779688c87f783 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:47:30 +0400
Subject: [PATCH 20/49] refactor(demo-wallet): move remaining shared
 primitives, hooks and manifest to core

Move CircleLogo, LoaderCircle, SuccessCard, HoldToSignButton to
core/components/ui; useTonWallet and useWalletDataUpdater to core/hooks;
walletManifest to core/lib. Remove the empty flat hooks/ and utils/
barrels. Only the legacy Button remains in components/, pending its
consolidation onto core/components/ui/button.
---
 apps/demo-wallet/src/components/Button.tsx               | 2 +-
 .../components/ui/circle-logo/circle-logo.tsx}           | 0
 .../{hooks => core/components/ui/circle-logo}/index.ts   | 3 +--
 .../ui/hold-to-sign-button/hold-to-sign-button.tsx}      | 0
 .../src/core/components/ui/hold-to-sign-button/index.ts  | 9 +++++++++
 .../src/core/components/ui/loader-circle/index.ts        | 9 +++++++++
 .../components/ui/loader-circle/loader-circle.tsx}       | 0
 .../src/core/components/ui/success-card/index.ts         | 9 +++++++++
 .../components/ui/success-card/success-card.tsx}         | 0
 apps/demo-wallet/src/core/hooks/index.ts                 | 2 ++
 .../useTonWallet.ts => core/hooks/use-ton-wallet.ts}     | 0
 .../hooks/use-wallet-data-updater.ts}                    | 0
 .../walletManifest.ts => core/lib/wallet-manifest.ts}    | 0
 apps/demo-wallet/src/core/routing/app-router.tsx         | 4 ++--
 apps/demo-wallet/src/extension/background_main.ts        | 3 +--
 apps/demo-wallet/src/extension/content.ts                | 3 +--
 .../ledger/components/ledger-screen/ledger-screen.tsx    | 2 +-
 .../swap/components/token-selector/token-selector.tsx    | 2 +-
 .../components/request-modal/request-modal.tsx           | 4 ++--
 .../sign-data-request-modal/sign-data-request-modal.tsx  | 2 +-
 .../components/ton-connect-screen/ton-connect-screen.tsx | 2 +-
 .../create-wallet-screen/create-wallet-screen.tsx        | 2 +-
 .../import-wallet-screen/import-wallet-screen.tsx        | 2 +-
 apps/demo-wallet/src/index.ts                            | 1 -
 24 files changed, 43 insertions(+), 18 deletions(-)
 rename apps/demo-wallet/src/{components/CircleLogo.tsx => core/components/ui/circle-logo/circle-logo.tsx} (100%)
 rename apps/demo-wallet/src/{hooks => core/components/ui/circle-logo}/index.ts (69%)
 rename apps/demo-wallet/src/{components/HoldToSignButton.tsx => core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/core/components/ui/hold-to-sign-button/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/loader-circle/index.ts
 rename apps/demo-wallet/src/{components/LoaderCircle.tsx => core/components/ui/loader-circle/loader-circle.tsx} (100%)
 create mode 100644 apps/demo-wallet/src/core/components/ui/success-card/index.ts
 rename apps/demo-wallet/src/{components/SuccessCard.tsx => core/components/ui/success-card/success-card.tsx} (100%)
 rename apps/demo-wallet/src/{hooks/useTonWallet.ts => core/hooks/use-ton-wallet.ts} (100%)
 rename apps/demo-wallet/src/{hooks/useWalletDataUpdater.ts => core/hooks/use-wallet-data-updater.ts} (100%)
 rename apps/demo-wallet/src/{utils/walletManifest.ts => core/lib/wallet-manifest.ts} (100%)

diff --git a/apps/demo-wallet/src/components/Button.tsx b/apps/demo-wallet/src/components/Button.tsx
index 3b9ac21c8..9c0fd5dc6 100644
--- a/apps/demo-wallet/src/components/Button.tsx
+++ b/apps/demo-wallet/src/components/Button.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { LoaderCircle } from './LoaderCircle';
+import { LoaderCircle } from '@/core/components/ui/loader-circle';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary' | 'danger';
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 100%
rename from apps/demo-wallet/src/components/CircleLogo.tsx
rename to apps/demo-wallet/src/core/components/ui/circle-logo/circle-logo.tsx
diff --git a/apps/demo-wallet/src/hooks/index.ts b/apps/demo-wallet/src/core/components/ui/circle-logo/index.ts
similarity index 69%
rename from apps/demo-wallet/src/hooks/index.ts
rename to apps/demo-wallet/src/core/components/ui/circle-logo/index.ts
index 5c9bbf548..f0cc01254 100644
--- a/apps/demo-wallet/src/hooks/index.ts
+++ b/apps/demo-wallet/src/core/components/ui/circle-logo/index.ts
@@ -6,5 +6,4 @@
  *
  */
 
-export * from './useTonWallet';
-export * from './useWalletDataUpdater';
+export * from './circle-logo';
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 100%
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
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/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/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
index 57bf60875..5cef44e31 100644
--- a/apps/demo-wallet/src/core/hooks/index.ts
+++ b/apps/demo-wallet/src/core/hooks/index.ts
@@ -9,3 +9,5 @@
 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/hooks/useTonWallet.ts b/apps/demo-wallet/src/core/hooks/use-ton-wallet.ts
similarity index 100%
rename from apps/demo-wallet/src/hooks/useTonWallet.ts
rename to apps/demo-wallet/src/core/hooks/use-ton-wallet.ts
diff --git a/apps/demo-wallet/src/hooks/useWalletDataUpdater.ts b/apps/demo-wallet/src/core/hooks/use-wallet-data-updater.ts
similarity index 100%
rename from apps/demo-wallet/src/hooks/useWalletDataUpdater.ts
rename to apps/demo-wallet/src/core/hooks/use-wallet-data-updater.ts
diff --git a/apps/demo-wallet/src/utils/walletManifest.ts b/apps/demo-wallet/src/core/lib/wallet-manifest.ts
similarity index 100%
rename from apps/demo-wallet/src/utils/walletManifest.ts
rename to apps/demo-wallet/src/core/lib/wallet-manifest.ts
diff --git a/apps/demo-wallet/src/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index 7ff78ec2c..6f3257942 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -12,7 +12,7 @@ import { useWalletStore, useWallet } from '@demo/wallet-core';
 
 import { ProtectedRoute } from './protected-route';
 
-import { LoaderCircle } from '@/components/LoaderCircle';
+import { LoaderCircle } from '@/core/components/ui/loader-circle';
 import { WalletDashboard } from '@/features/dashboard';
 import { TonConnectRoute } from '@/features/ton-connect';
 import { TracePage, TransactionDetail } from '@/features/transactions';
@@ -22,7 +22,7 @@ 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 '@/hooks/useWalletDataUpdater';
+import { useWalletDataUpdater } from '@/core/hooks/use-wallet-data-updater';
 import { useReceivedToasts } from '@/features/notifications';
 import { Button } from '@/components/Button';
 
diff --git a/apps/demo-wallet/src/extension/background_main.ts b/apps/demo-wallet/src/extension/background_main.ts
index 3bd21ea08..6e45c0f54 100644
--- a/apps/demo-wallet/src/extension/background_main.ts
+++ b/apps/demo-wallet/src/extension/background_main.ts
@@ -17,8 +17,7 @@ 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 { getTonConnectDeviceInfo, getTonConnectWalletManifest } from '@/core/lib/wallet-manifest';
 import { JS_BRIDGE_MESSAGE_TO_BACKGROUND } from '@/core/lib/constants';
 import { SendMessageToExtensionContentFromBackground } from '@/core/lib/extensionBackground';
 import {
diff --git a/apps/demo-wallet/src/extension/content.ts b/apps/demo-wallet/src/extension/content.ts
index 7e8f14587..31bd9da00 100644
--- a/apps/demo-wallet/src/extension/content.ts
+++ b/apps/demo-wallet/src/extension/content.ts
@@ -17,8 +17,7 @@ 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 { getTonConnectDeviceInfo, getTonConnectWalletManifest } from '@/core/lib/wallet-manifest';
 import {
     JS_BRIDGE_MESSAGE_TO_BACKGROUND,
     JS_BRIDGE_MESSAGE_TO_CONTENT,
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
index aa1a93c44..09456eb98 100644
--- 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
@@ -15,7 +15,7 @@ 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 '@/hooks';
+import { useTonWallet } from '@/core/hooks';
 
 /** Dedicated screen for connecting a Ledger hardware wallet. */
 export const LedgerScreen: React.FC = () => {
diff --git a/apps/demo-wallet/src/features/swap/components/token-selector/token-selector.tsx b/apps/demo-wallet/src/features/swap/components/token-selector/token-selector.tsx
index a27f87c5a..6b9c7e64f 100644
--- a/apps/demo-wallet/src/features/swap/components/token-selector/token-selector.tsx
+++ b/apps/demo-wallet/src/features/swap/components/token-selector/token-selector.tsx
@@ -16,7 +16,7 @@ import { USDT_ADDRESS } from '../../constants/swap';
 
 import { cn } from '@/core/lib/utils';
 import { getJettonsImage, getJettonsSymbol } from '@/features/jettons';
-import { CircleLogo } from '@/components/CircleLogo';
+import { CircleLogo } from '@/core/components/ui/circle-logo';
 
 interface TokenSelectorProps {
     selectedToken: SwapToken;
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
index f50ec0636..324b1a349 100644
--- 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
@@ -13,8 +13,8 @@ import type { SavedWallet } from '@demo/wallet-core';
 import { toast } from 'sonner';
 
 import { Button } from '@/components/Button';
-import { HoldToSignButton } from '@/components/HoldToSignButton';
-import { SuccessCard } from '@/components/SuccessCard';
+import { HoldToSignButton } from '@/core/components/ui/hold-to-sign-button';
+import { SuccessCard } from '@/core/components/ui/success-card';
 import { JettonFlow } from '@/features/jettons';
 import { createComponentLogger } from '@/core/lib/logger';
 
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
index 40ec51804..455731aae 100644
--- 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
@@ -15,7 +15,7 @@ import { DAppInfo } from '../dapp-info';
 
 import { Button } from '@/components/Button';
 import { WalletPreview } from '@/features/wallets';
-import { HoldToSignButton } from '@/components/HoldToSignButton';
+import { HoldToSignButton } from '@/core/components/ui/hold-to-sign-button';
 import { createComponentLogger } from '@/core/lib/logger';
 import { Card } from '@/core/components/ui/card';
 
diff --git a/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx b/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx
index 018314243..3f602433d 100644
--- a/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx
@@ -10,7 +10,7 @@ import React, { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTonConnect } from '@demo/wallet-core';
 
-import { LoaderCircle } from '@/components/LoaderCircle';
+import { LoaderCircle } from '@/core/components/ui/loader-circle';
 import { createComponentLogger } from '@/core/lib/logger';
 import { Layout } from '@/core/components/shared/layout';
 
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
index 043cad47c..f6b6c7963 100644
--- 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
@@ -16,7 +16,7 @@ import { toast } from 'sonner';
 import { CenteredScreen } from '@/core/components/shared/centered-screen';
 import { Button } from '@/core/components/ui/button';
 import { NetworkSelector } from '@/features/wallets';
-import { useTonWallet } from '@/hooks';
+import { useTonWallet } from '@/core/hooks';
 
 /** Dedicated "Recovery phrase" screen for creating a new wallet. */
 export const CreateWalletScreen: React.FC = () => {
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
index 37b3612ee..627ac268d 100644
--- a/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
+++ b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
@@ -16,7 +16,7 @@ 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 '@/hooks';
+import { useTonWallet } from '@/core/hooks';
 import {
     applyMnemonicPaste,
     evaluateBip39Slots,
diff --git a/apps/demo-wallet/src/index.ts b/apps/demo-wallet/src/index.ts
index 6a9ee62f9..3a2a0110c 100644
--- a/apps/demo-wallet/src/index.ts
+++ b/apps/demo-wallet/src/index.ts
@@ -8,7 +8,6 @@
 
 // Re-export main app components and utilities
 export * from './components';
-export * from './hooks';
 export * from '@/core/utils';
 
 // For convenience, also export the main App component

From c6c91c0d8b38c2144f9a4b3b1ebe111274186a8a Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 10:49:49 +0400
Subject: [PATCH 21/49] refactor(demo-wallet): retire the flat components
 barrel

Repoint the last Button consumers to @/components/Button directly, delete
the components/index.ts barrel, and drop the components re-export from the
app index. Only Button.tsx remains flat, pending its consolidation onto
core/components/ui/button.
---
 apps/demo-wallet/src/components/index.ts           | 14 --------------
 .../send-transaction/send-transaction.tsx          |  2 +-
 .../components/staking-screen/staking-screen.tsx   |  2 +-
 apps/demo-wallet/src/index.ts                      |  3 +--
 4 files changed, 3 insertions(+), 18 deletions(-)
 delete mode 100644 apps/demo-wallet/src/components/index.ts

diff --git a/apps/demo-wallet/src/components/index.ts b/apps/demo-wallet/src/components/index.ts
deleted file mode 100644
index 258965114..000000000
--- a/apps/demo-wallet/src/components/index.ts
+++ /dev/null
@@ -1,14 +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 { Button } from './Button';
-export { Modal } from '@/core/components/ui/modal';
-export { WalletSelectorModal } from '@/features/wallets';
-export { ReceiveModal } from '@/features/wallets';
-
-// Transaction components
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
index 2fe69e8a3..abc56e505 100644
--- 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
@@ -15,7 +15,7 @@ import { toast } from 'sonner';
 
 import { useSendToken } from '../../hooks/use-send-token';
 
-import { Button } from '@/components';
+import { Button } from '@/components/Button';
 import { AnimatedBalance } from '@/features/dashboard';
 import { WalletSwitcher } from '@/features/wallets';
 import { createComponentLogger } from '@/core/lib/logger';
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
index 0f64bb556..eaa5d8ea8 100644
--- 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
@@ -14,7 +14,7 @@ import { useStaking, useWallet } from '@demo/wallet-core';
 import { StakingInterface } from '../staking-interface';
 import { StakingInfo } from '../staking-info';
 
-import { Button } from '@/components';
+import { Button } from '@/components/Button';
 import { Layout } from '@/core/components/shared/layout';
 
 export const Staking: FC = () => {
diff --git a/apps/demo-wallet/src/index.ts b/apps/demo-wallet/src/index.ts
index 3a2a0110c..7474dffd9 100644
--- a/apps/demo-wallet/src/index.ts
+++ b/apps/demo-wallet/src/index.ts
@@ -6,8 +6,7 @@
  *
  */
 
-// Re-export main app components and utilities
-export * from './components';
+// Re-export shared utilities
 export * from '@/core/utils';
 
 // For convenience, also export the main App component

From 4c480ece814f362bd23b5266d82e553d30ac3aae Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 11:03:46 +0400
Subject: [PATCH 22/49] refactor(demo-wallet): consolidate Button onto
 core/components/ui/button

Remove the legacy components/Button.tsx and point all consumers at the
design-system button in core/components/ui/button. Rename the loading
prop isLoading -> loading at every call site, and align HoldToSignButton
and QuoteTimer to the same `loading` prop name. The flat components/
directory is now gone entirely.
---
 apps/demo-wallet/src/components/Button.tsx    | 60 -------------------
 .../hold-to-sign-button.tsx                   | 14 ++---
 .../src/core/components/ui/modal/modal.tsx    |  2 +-
 .../src/core/routing/app-router.tsx           |  2 +-
 .../components/jettons-card/jettons-card.tsx  |  2 +-
 .../components/jettons-list/jettons-list.tsx  |  4 +-
 .../disconnect-notifications.tsx              |  2 +-
 .../send-transaction/send-transaction.tsx     |  6 +-
 .../staking-interface/staking-interface.tsx   |  6 +-
 .../staking-screen/staking-screen.tsx         |  2 +-
 .../components/quote-timer/quote-timer.tsx    | 14 ++---
 .../swap-interface/swap-interface.tsx         |  8 +--
 .../swap-settings/swap-settings.tsx           |  2 +-
 .../components/token-input/token-input.tsx    |  2 +-
 .../connect-dapp-modal/connect-dapp-modal.tsx |  4 +-
 .../connect-request-modal.tsx                 |  4 +-
 .../request-modal/request-modal.tsx           |  6 +-
 .../sign-data-request-modal.tsx               |  6 +-
 18 files changed, 40 insertions(+), 106 deletions(-)
 delete mode 100644 apps/demo-wallet/src/components/Button.tsx

diff --git a/apps/demo-wallet/src/components/Button.tsx b/apps/demo-wallet/src/components/Button.tsx
deleted file mode 100644
index 9c0fd5dc6..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 '@/core/components/ui/loader-circle';
-
-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-[transform,background-color,color] hover:scale-[1.03] active:scale-[0.97] disabled:hover:scale-100 disabled:active:scale-100 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/core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx b/apps/demo-wallet/src/core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx
index 85bb3149d..3205c4c24 100644
--- a/apps/demo-wallet/src/core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx
+++ b/apps/demo-wallet/src/core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx
@@ -11,7 +11,7 @@ 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;
 }
@@ -19,7 +19,7 @@ interface HoldToSignButtonProps {
 export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
     onComplete,
     disabled = false,
-    isLoading = false,
+    loading = false,
     holdDuration = 3000,
     className = '',
 }) => {
@@ -43,7 +43,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 +74,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 +110,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}
     `;
@@ -124,7 +124,7 @@ export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
             onTouchStart={handleHoldStart}
             onTouchEnd={handleHoldEnd}
             onTouchCancel={handleHoldEnd}
-            disabled={disabled || isLoading}
+            disabled={disabled || loading}
         >
             {/* Ripple effects */}
             {showRipples && !isComplete && (
@@ -176,7 +176,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
diff --git a/apps/demo-wallet/src/core/components/ui/modal/modal.tsx b/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
index 878f81ffd..906ae380e 100644
--- a/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
+++ b/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
@@ -13,7 +13,7 @@ import { ChevronLeft, X } from 'lucide-react';
 import { Dialog, DialogContent, DialogTitle } from '../dialog';
 import { Drawer, DrawerContent, DrawerTitle } from '../drawer';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { cn } from '@/core/lib/utils';
 import { useIsMobile } from '@/core/hooks/use-media-query';
 
diff --git a/apps/demo-wallet/src/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index 6f3257942..74758e350 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -24,7 +24,7 @@ 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 '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 
 export const AppRouter: React.FC = () => {
     const isPasswordSet = useWalletStore((state) => state.auth.isPasswordSet);
diff --git a/apps/demo-wallet/src/features/jettons/components/jettons-card/jettons-card.tsx b/apps/demo-wallet/src/features/jettons/components/jettons-card/jettons-card.tsx
index 33a898bf0..398b86b73 100644
--- a/apps/demo-wallet/src/features/jettons/components/jettons-card/jettons-card.tsx
+++ b/apps/demo-wallet/src/features/jettons/components/jettons-card/jettons-card.tsx
@@ -11,7 +11,7 @@ import { useJettons } from '@demo/wallet-core';
 
 import { JettonRow } from '../jetton-row';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { createComponentLogger } from '@/core/lib/logger';
 import { Card } from '@/core/components/ui/card';
 import { getJettonsName } from '@/features/jettons';
diff --git a/apps/demo-wallet/src/features/jettons/components/jettons-list/jettons-list.tsx b/apps/demo-wallet/src/features/jettons/components/jettons-list/jettons-list.tsx
index 0b4743f89..f01cf97a8 100644
--- a/apps/demo-wallet/src/features/jettons/components/jettons-list/jettons-list.tsx
+++ b/apps/demo-wallet/src/features/jettons/components/jettons-list/jettons-list.tsx
@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import type { Jetton } from '@ton/walletkit';
 import { useJettons } from '@demo/wallet-core';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { createComponentLogger } from '@/core/lib/logger';
 import { useFormatJetton, useFormattedJetton } from '@/features/jettons';
 
@@ -85,7 +85,7 @@ export const JettonsList: React.FC<JettonsListProps> = ({
                         variant="secondary"
                         size="sm"
                         onClick={handleRefresh}
-                        isLoading={isRefreshing}
+                        loading={isRefreshing}
                         disabled={isLoadingJettons}
                     >
                         {isRefreshing ? 'Refreshing...' : 'Refresh'}
diff --git a/apps/demo-wallet/src/features/notifications/components/disconnect-notifications/disconnect-notifications.tsx b/apps/demo-wallet/src/features/notifications/components/disconnect-notifications/disconnect-notifications.tsx
index ebaae1c6e..5ed4d0c9d 100644
--- a/apps/demo-wallet/src/features/notifications/components/disconnect-notifications/disconnect-notifications.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 '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 
 interface DisconnectNotificationsProps {
     className?: string;
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
index abc56e505..c49effed1 100644
--- 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
@@ -15,7 +15,7 @@ import { toast } from 'sonner';
 
 import { useSendToken } from '../../hooks/use-send-token';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { AnimatedBalance } from '@/features/dashboard';
 import { WalletSwitcher } from '@/features/wallets';
 import { createComponentLogger } from '@/core/lib/logger';
@@ -589,7 +589,7 @@ export const SendTransaction: React.FC = () => {
                                                 type="button"
                                                 variant="secondary"
                                                 onClick={handleFastSend}
-                                                isLoading={isLoading}
+                                                loading={isLoading}
                                                 disabled={isSendFastDisabled}
                                                 className="flex-1"
                                                 data-testid="send-fast"
@@ -599,7 +599,7 @@ export const SendTransaction: React.FC = () => {
                                         )}
                                         <Button
                                             type="submit"
-                                            isLoading={isLoading || gasless.isSending}
+                                            loading={isLoading || gasless.isSending}
                                             disabled={isSendDisabled}
                                             className="flex-1"
                                             data-testid="send-submit"
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
index 4470a8bed..84fb240eb 100644
--- 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
@@ -12,7 +12,7 @@ import { useStaking } from '@demo/wallet-core';
 import { useNavigate } from 'react-router-dom';
 import { UnstakeMode } from '@ton/walletkit';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { Card } from '@/core/components/ui/card';
 import { cn } from '@/core/lib/utils';
 
@@ -170,7 +170,7 @@ export const StakingInterface: FC = () => {
                         className="w-full py-4 text-lg font-bold"
                         onClick={handleGetQuote}
                         disabled={!canGetQuote || isLoadingQuote}
-                        isLoading={isLoadingQuote}
+                        loading={isLoadingQuote}
                     >
                         Preview {tab === 'stake' ? 'Stake' : 'Unstake'}
                     </Button>
@@ -184,7 +184,7 @@ export const StakingInterface: FC = () => {
                         >
                             Cancel
                         </Button>
-                        <Button className="py-4 font-bold" onClick={handleAction} isLoading={isStaking || isUnstaking}>
+                        <Button className="py-4 font-bold" onClick={handleAction} loading={isStaking || isUnstaking}>
                             Confirm {tab === 'stake' ? 'Stake' : 'Unstake'}
                         </Button>
                     </div>
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
index eaa5d8ea8..d0a2d23aa 100644
--- 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
@@ -14,7 +14,7 @@ import { useStaking, useWallet } from '@demo/wallet-core';
 import { StakingInterface } from '../staking-interface';
 import { StakingInfo } from '../staking-info';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { Layout } from '@/core/components/shared/layout';
 
 export const Staking: FC = () => {
diff --git a/apps/demo-wallet/src/features/swap/components/quote-timer/quote-timer.tsx b/apps/demo-wallet/src/features/swap/components/quote-timer/quote-timer.tsx
index 4609b796c..a9e4a555f 100644
--- a/apps/demo-wallet/src/features/swap/components/quote-timer/quote-timer.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 '@/components/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(() => {
@@ -47,13 +47,7 @@ export const QuoteTimer: FC<QuoteTimerProps> = ({ expiresAt, onRefresh, isLoadin
         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"
-                >
+                <Button onClick={onRefresh} disabled={loading} loading={loading} size="sm" className="h-7 px-3 text-xs">
                     Refresh
                 </Button>
             </div>
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
index b8d5e2926..acba53b71 100644
--- 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
@@ -16,7 +16,7 @@ import { SwapSettings } from '../swap-settings';
 import { TokenInput } from '../token-input';
 import { QuoteTimer } from '../quote-timer';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { Card } from '@/core/components/ui/card';
 import { cn } from '@/core/lib/utils';
 
@@ -192,7 +192,7 @@ export const SwapInterface: FC<SwapInterfaceProps> = ({ className }) => {
                         <QuoteTimer
                             expiresAt={currentQuote.expiresAt}
                             onRefresh={handleGetQuote}
-                            isLoading={isLoadingQuote}
+                            loading={isLoadingQuote}
                         />
 
                         <div className="border-t border-gray-200 my-6" />
@@ -239,7 +239,7 @@ export const SwapInterface: FC<SwapInterfaceProps> = ({ className }) => {
                     <Button
                         disabled={isSwapDisabled}
                         onClick={handleGetQuote}
-                        isLoading={isLoadingQuote}
+                        loading={isLoadingQuote}
                         className="w-full"
                     >
                         {isLoadingQuote ? 'Getting Quote...' : 'Get Quote'}
@@ -250,7 +250,7 @@ export const SwapInterface: FC<SwapInterfaceProps> = ({ className }) => {
                     <Button
                         disabled={!currentQuote || isSwapping}
                         onClick={handleExecuteSwap}
-                        isLoading={isSwapping}
+                        loading={isSwapping}
                         className="w-full"
                     >
                         {isSwapping ? 'Swapping...' : getSwapButtonText()}
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
index 664df8f58..c72c90e86 100644
--- 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
@@ -9,7 +9,7 @@
 import type { FC } from 'react';
 import { useState, useEffect } from 'react';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { Modal } from '@/core/components/ui/modal';
 
 interface SwapSettingsProps {
diff --git a/apps/demo-wallet/src/features/swap/components/token-input/token-input.tsx b/apps/demo-wallet/src/features/swap/components/token-input/token-input.tsx
index 022ea8323..fb7fa8f37 100644
--- a/apps/demo-wallet/src/features/swap/components/token-input/token-input.tsx
+++ b/apps/demo-wallet/src/features/swap/components/token-input/token-input.tsx
@@ -12,7 +12,7 @@ import type { SwapToken } from '@ton/walletkit';
 
 import { TokenSelector } from '../token-selector';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { cn } from '@/core/lib/utils';
 
 interface Props {
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
index 652d93c96..2b354975c 100644
--- 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
@@ -9,7 +9,7 @@
 import React, { useCallback, useState } from 'react';
 import { useTonConnect } from '@demo/wallet-core';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { Modal } from '@/core/components/ui/modal';
 
 interface ConnectDappModalProps {
@@ -60,7 +60,7 @@ export const ConnectDappModal: React.FC<ConnectDappModalProps> = ({ isOpen, onCl
                 <Button
                     data-testid="tonconnect-process"
                     onClick={handleConnect}
-                    isLoading={isConnecting}
+                    loading={isConnecting}
                     disabled={!url.trim() || isConnecting}
                     className="w-full"
                 >
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
index 3107ee6db..90dd13668 100644
--- 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
@@ -14,7 +14,7 @@ import { toast } from 'sonner';
 
 import { DAppInfo } from '../dapp-info';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { WalletPreview } from '@/features/wallets';
 import { createComponentLogger } from '@/core/lib/logger';
 
@@ -307,7 +307,7 @@ export const ConnectRequestModal: React.FC<ConnectRequestModalProps> = ({
                     <Button
                         data-testid="connect-approve"
                         onClick={handleApprove}
-                        isLoading={isLoading}
+                        loading={isLoading}
                         disabled={!selectedWallet || isLoading}
                         className="flex-1"
                     >
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
index 324b1a349..28ef2430c 100644
--- 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
@@ -12,7 +12,7 @@ import { useAuth, useWalletKit, useWalletStore } from '@demo/wallet-core';
 import type { SavedWallet } from '@demo/wallet-core';
 import { toast } from 'sonner';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { HoldToSignButton } from '@/core/components/ui/hold-to-sign-button';
 import { SuccessCard } from '@/core/components/ui/success-card';
 import { JettonFlow } from '@/features/jettons';
@@ -320,14 +320,14 @@ export const RequestModal: React.FC<RequestModalProps> = ({
                         (holdToSign ? (
                             <HoldToSignButton
                                 onComplete={handleApprove}
-                                isLoading={isLoading}
+                                loading={isLoading}
                                 disabled={isLoading}
                                 holdDuration={3000}
                             />
                         ) : (
                             <Button
                                 onClick={handleApprove}
-                                isLoading={isLoading}
+                                loading={isLoading}
                                 disabled={isLoading}
                                 className="flex-1"
                                 data-testid={testIds.approve}
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
index 455731aae..b02ee0936 100644
--- 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
@@ -13,7 +13,7 @@ import { useAuth } from '@demo/wallet-core';
 
 import { DAppInfo } from '../dapp-info';
 
-import { Button } from '@/components/Button';
+import { Button } from '@/core/components/ui/button';
 import { WalletPreview } from '@/features/wallets';
 import { HoldToSignButton } from '@/core/components/ui/hold-to-sign-button';
 import { createComponentLogger } from '@/core/lib/logger';
@@ -263,7 +263,7 @@ export const SignDataRequestModal: React.FC<SignDataRequestModalProps> = ({
                             {holdToSign ? (
                                 <HoldToSignButton
                                     onComplete={handleApprove}
-                                    isLoading={isLoading}
+                                    loading={isLoading}
                                     disabled={isLoading}
                                     holdDuration={3000}
                                 />
@@ -271,7 +271,7 @@ export const SignDataRequestModal: React.FC<SignDataRequestModalProps> = ({
                                 <Button
                                     data-testid="sign-data-approve"
                                     onClick={handleApprove}
-                                    isLoading={isLoading}
+                                    loading={isLoading}
                                     disabled={isLoading}
                                     className="flex-1"
                                 >

From b7f7f1a4c2f1ad72c28d9d78f0b6cc98ffedc352 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 11:57:06 +0400
Subject: [PATCH 23/49] feat(demo-wallet): redesigned transaction history on
 the dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a History block to the wallet dashboard showing the last 6
transactions (pending + events merged, newest first), with the same
section header as Assets/NFTs and hidden while loading or empty (like
NftsCard). Introduce a reusable TransactionRow list item — gray icon
with a +/- glyph and a success/loading/failed status badge, title,
truncated trace id, signed coloured amount and date — plus a
map-transaction-row mapper, both to be reused by the full history page
later. Existing transaction cards are left untouched.
---
 .../wallet-dashboard/wallet-dashboard.tsx     |   2 +
 .../components/transaction-history/index.ts   |   9 +
 .../transaction-history.tsx                   | 101 ++++++++++++
 .../components/transaction-row/index.ts       |   9 +
 .../transaction-row/transaction-row.tsx       |  73 +++++++++
 .../src/features/transactions/index.ts        |   3 +
 .../transactions/utils/map-transaction-row.ts | 155 ++++++++++++++++++
 7 files changed, 352 insertions(+)
 create mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-history/index.ts
 create mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-history/transaction-history.tsx
 create mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-row/index.ts
 create mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-row/transaction-row.tsx
 create mode 100644 apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts

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
index 6aeec9641..a16e81aad 100644
--- 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
@@ -28,6 +28,7 @@ import {
 } from '@/features/ton-connect';
 import { NewLayout } from '@/core/components/shared/new-layout';
 import { NftsCard } from '@/features/nft';
+import { TransactionHistory } from '@/features/transactions';
 import { usePasteHandler } from '@/core/hooks/use-paste-handler';
 
 export const WalletDashboard: React.FC = () => {
@@ -55,6 +56,7 @@ export const WalletDashboard: React.FC = () => {
                 <DashboardActions />
                 <DashboardAssets />
                 <NftsCard />
+                <TransactionHistory />
             </div>
 
             {pendingConnectRequest && (
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..6c1a2ed5d
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-history/transaction-history.tsx
@@ -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 React, { useEffect, useMemo } from 'react';
+import { ChevronRight } from 'lucide-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 { TransactionRow } from '../transaction-row';
+import { mapEventToRow, mapPendingToRow } from '../../utils/map-transaction-row';
+import type { TransactionRowModel } from '../../utils/map-transaction-row';
+
+const MAX_ROWS = 6;
+// Load a few extra so the preview still fills 6 rows after action-less events are skipped.
+const LOAD_LIMIT = 10;
+
+const nowSeconds = (): number => Math.floor(Date.now() / 1000);
+
+/**
+ * Dashboard "History" block: the latest transactions for the active wallet.
+ * Mirrors the Assets/NFTs section header and, like NftsCard, renders nothing
+ * while loading or when there is nothing to show.
+ */
+export const TransactionHistory: React.FC = () => {
+    const { events, loadEvents, address, pendingTransactions } = useWalletStore(
+        useShallow((state) => ({
+            events: state.walletManagement.events,
+            loadEvents: state.loadEvents,
+            address: state.walletManagement.address,
+            pendingTransactions: state.walletManagement.pendingTransactions,
+        })),
+    );
+
+    useEffect(() => {
+        if (!address) return;
+        void loadEvents(LOAD_LIMIT, 0);
+    }, [address, loadEvents]);
+
+    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) };
+            });
+
+        const eventRows = eventItems
+            .map((ev) => ({ timestamp: ev.timestamp, row: mapEventToRow(ev, myAddress) }))
+            .filter((item): item is { timestamp: number; row: TransactionRowModel } => item.row !== null);
+
+        return [...pendingRows, ...eventRows]
+            .sort((a, b) => b.timestamp - a.timestamp)
+            .slice(0, MAX_ROWS)
+            .map((item) => item.row);
+    }, [events, pendingTransactions, address]);
+
+    // Like NftsCard: render nothing while loading or when empty.
+    if (rows.length === 0) {
+        return null;
+    }
+
+    return (
+        <section>
+            <header className="mb-2 flex items-center gap-1">
+                <h2 className="text-base font-semibold text-gray-900">History</h2>
+                <ChevronRight className="h-4 w-4 text-gray-400" />
+            </header>
+
+            <div className="space-y-1">
+                {rows.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..5da5eca41
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-row/transaction-row.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (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 { Link } from 'react-router-dom';
+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> = ({
+    traceId,
+    title,
+    subtitleId,
+    amount,
+    isOutgoing,
+    status,
+    date,
+}) => (
+    <Link
+        to={`/wallet/trace/${traceId}`}
+        className="flex items-center gap-3 py-2 -mx-1 px-1 rounded-xl hover:bg-gray-50 transition-colors"
+    >
+        <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>
+    </Link>
+);
diff --git a/apps/demo-wallet/src/features/transactions/index.ts b/apps/demo-wallet/src/features/transactions/index.ts
index 957f57c5b..8a63f67f1 100644
--- a/apps/demo-wallet/src/features/transactions/index.ts
+++ b/apps/demo-wallet/src/features/transactions/index.ts
@@ -11,3 +11,6 @@ export * from './components/transaction-detail';
 export * from './components/trace-row';
 export * from './components/recent-transactions';
 export * from './components/transaction-cards';
+export * from './components/transaction-row';
+export * from './components/transaction-history';
+export * from './utils/map-transaction-row';
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..88d2ed9c5
--- /dev/null
+++ b/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts
@@ -0,0 +1,155 @@
+/**
+ * Copyright (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 { Action, Event } from '@ton/walletkit';
+
+import { formatTonForDisplay, sameAddress } from '@/core/utils';
+
+/** 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;
+    /** Trace id used to navigate to the trace page. */
+    traceId: string;
+    /** Primary label, e.g. "Sent 5 TON" / "Received 1 USDT". */
+    title: string;
+    /** Truncated trace id shown as the subtitle. */
+    subtitleId: string;
+    /** Signed crypto amount, e.g. "+5 TON" / "-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 TON_TRANSFER_DESC = /^Transferring (.+) TON$/;
+const TON_VALUE = /^(.+) TON$/;
+const JETTON_TRANSFER_DESC = /^Transferring (.+)$/;
+
+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, mirroring the existing ActionCard mapping. */
+const describeAction = (action: Action, isOutgoing: boolean): { title: string; value: string } => {
+    const { description, value } = action.simplePreview;
+    const label = isOutgoing ? 'Sent' : 'Received';
+
+    const descMatch = description?.match(TON_TRANSFER_DESC);
+    const valueMatch = value?.match(TON_VALUE);
+    if (descMatch && valueMatch && action.type === 'TonTransfer') {
+        const amount = formatTonForDisplay(valueMatch[1]);
+        return { title: `${label} ${amount} TON`, value: `${amount} TON` };
+    }
+    if (valueMatch && action.type === 'TonTransfer') {
+        return { title: description, value: `${formatTonForDisplay(valueMatch[1])} TON` };
+    }
+    const jettonMatch = description?.match(JETTON_TRANSFER_DESC);
+    if (jettonMatch && action.type === 'JettonTransfer') {
+        return { title: `${label} ${jettonMatch[1]}`, value: value ?? '' };
+    }
+    return { title: description, 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): 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 traceId = String(event.eventId);
+    return {
+        id: traceId,
+        traceId,
+        title,
+        subtitleId: truncateMiddle(traceId),
+        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): TransactionRowModel => {
+    const status = pendingStatus(pending);
+    const base = {
+        id: `pending-${pending.traceId}`,
+        traceId: pending.traceId,
+        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 amount = pending.preview ? `${formatTonForDisplay(pending.preview.amount)} TON` : '';
+    const title = pending.preview ? `${isOutgoing ? 'Sent' : 'Received'} ${amount}` : 'Processing';
+    return { ...base, title, amount: signedAmount(amount, isOutgoing), isOutgoing };
+};

From 92cd3b766656d04e28772f10b1ff3ce1fbd168cb Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 12:02:47 +0400
Subject: [PATCH 24/49] feat(demo-wallet): open transaction history rows in the
 explorer

Match the previous behaviour: tapping a transaction in the dashboard
History block opens the Tonviewer transaction page in a new tab instead
of the internal trace page. Pending (not-yet-on-chain) rows stay
non-clickable, as before.
---
 .../transaction-history.tsx                   | 26 ++++---
 .../transaction-row/transaction-row.tsx       | 67 ++++++++++++-------
 .../transactions/utils/map-transaction-row.ts | 37 +++++++---
 3 files changed, 85 insertions(+), 45 deletions(-)

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
index 6c1a2ed5d..1e75f8023 100644
--- 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
@@ -29,13 +29,19 @@ const nowSeconds = (): number => Math.floor(Date.now() / 1000);
  * while loading or when there is nothing to show.
  */
 export const TransactionHistory: React.FC = () => {
-    const { events, loadEvents, address, pendingTransactions } = useWalletStore(
-        useShallow((state) => ({
-            events: state.walletManagement.events,
-            loadEvents: state.loadEvents,
-            address: state.walletManagement.address,
-            pendingTransactions: state.walletManagement.pendingTransactions,
-        })),
+    const { events, loadEvents, address, 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,
+                pendingTransactions: state.walletManagement.pendingTransactions,
+                network: activeWallet?.network ?? 'testnet',
+            };
+        }),
     );
 
     useEffect(() => {
@@ -66,18 +72,18 @@ export const TransactionHistory: React.FC = () => {
             })
             .map((p) => {
                 const timestamp = p.preview?.timestamp ?? nowSeconds();
-                return { timestamp, row: mapPendingToRow(p, myAddress, timestamp) };
+                return { timestamp, row: mapPendingToRow(p, myAddress, timestamp, network) };
             });
 
         const eventRows = eventItems
-            .map((ev) => ({ timestamp: ev.timestamp, row: mapEventToRow(ev, myAddress) }))
+            .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)
             .slice(0, MAX_ROWS)
             .map((item) => item.row);
-    }, [events, pendingTransactions, address]);
+    }, [events, pendingTransactions, address, network]);
 
     // Like NftsCard: render nothing while loading or when empty.
     if (rows.length === 0) {
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
index 5da5eca41..c0304cdd0 100644
--- 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
@@ -7,7 +7,6 @@
  */
 
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { Check, MinusCircle, PlusCircle, X } from 'lucide-react';
 
 import type { TransactionRowModel, TransactionRowStatus } from '../../utils/map-transaction-row';
@@ -39,35 +38,53 @@ const StatusBadge: React.FC<{ status: TransactionRowStatus }> = ({ status }) =>
 
 /** Single transaction list item. Reused by the dashboard preview and the full history page. */
 export const TransactionRow: React.FC<TransactionRowModel> = ({
-    traceId,
+    explorerUrl,
     title,
     subtitleId,
     amount,
     isOutgoing,
     status,
     date,
-}) => (
-    <Link
-        to={`/wallet/trace/${traceId}`}
-        className="flex items-center gap-3 py-2 -mx-1 px-1 rounded-xl hover:bg-gray-50 transition-colors"
-    >
-        <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>
+}) => {
+    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>
+        </>
+    );
 
-        <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>
+    const rowClassName = 'flex items-center gap-3 py-2 -mx-1 px-1 rounded-xl';
 
-        <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>
-    </Link>
-);
+    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/utils/map-transaction-row.ts b/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts
index 88d2ed9c5..7b1f4ab1f 100644
--- a/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts
+++ b/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts
@@ -6,9 +6,13 @@
  *
  */
 
+import { Base64ToHex } from '@ton/walletkit';
 import type { Action, Event } from '@ton/walletkit';
 
-import { formatTonForDisplay, sameAddress } from '@/core/utils';
+import { formatTonForDisplay, 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';
@@ -17,8 +21,8 @@ export type TransactionRowStatus = 'success' | 'loading' | 'failed';
 export interface TransactionRowModel {
     /** Unique React key. */
     id: string;
-    /** Trace id used to navigate to the trace page. */
-    traceId: string;
+    /** Tonviewer transaction URL. Undefined for not-yet-on-chain pending transactions (row is not clickable). */
+    explorerUrl?: string;
     /** Primary label, e.g. "Sent 5 TON" / "Received 1 USDT". */
     title: string;
     /** Truncated trace id shown as the subtitle. */
@@ -107,17 +111,22 @@ const signedAmount = (value: string, isOutgoing: boolean): string => (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): TransactionRowModel | null => {
+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 traceId = String(event.eventId);
+    const eventId = String(event.eventId);
+    const hash = event.traceExternalHash ? Base64ToHex(event.traceExternalHash) : eventId;
     return {
-        id: traceId,
-        traceId,
+        id: eventId,
+        explorerUrl: getTonviewerTxUrl(network, hash),
         title,
-        subtitleId: truncateMiddle(traceId),
+        subtitleId: truncateMiddle(eventId),
         amount: signedAmount(value, isOutgoing),
         isOutgoing,
         status: action.status === 'failure' ? 'failed' : 'success',
@@ -132,11 +141,19 @@ const pendingStatus = (pending: PendingLike): TransactionRowStatus => {
 };
 
 /** 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): TransactionRowModel => {
+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}`,
-        traceId: pending.traceId,
+        explorerUrl,
         subtitleId: truncateMiddle(pending.traceId),
         status,
         date: formatTxDate(timestamp),

From 2a16819071e330ab4735fe8fec4bcc0abcf0cad6 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 12:15:07 +0400
Subject: [PATCH 25/49] feat(demo-wallet): format history amounts with
 formatUnits + formatLargeValue

Derive transaction amounts from the typed action fields (TonTransfer /
JettonTransfer raw amounts + jetton decimals) via formatUnits, then
format for display with formatLargeValue (M/B/T abbreviation and locale
separators), matching the appkit-react widgets. Add formatLargeValue to
core/utils; the history mapper no longer uses formatTonForDisplay.
---
 apps/demo-wallet/src/core/utils/formatters.ts | 34 +++++++++++++++
 .../transactions/utils/map-transaction-row.ts | 42 +++++++++----------
 2 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/apps/demo-wallet/src/core/utils/formatters.ts b/apps/demo-wallet/src/core/utils/formatters.ts
index 6d5a004ac..978c7d91d 100644
--- a/apps/demo-wallet/src/core/utils/formatters.ts
+++ b/apps/demo-wallet/src/core/utils/formatters.ts
@@ -84,3 +84,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/features/transactions/utils/map-transaction-row.ts b/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts
index 7b1f4ab1f..7b8c4e36b 100644
--- a/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts
+++ b/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts
@@ -9,7 +9,7 @@
 import { Base64ToHex } from '@ton/walletkit';
 import type { Action, Event } from '@ton/walletkit';
 
-import { formatTonForDisplay, getTonviewerTxUrl, sameAddress } from '@/core/utils';
+import { formatLargeValue, formatUnits, getTonviewerTxUrl, sameAddress } from '@/core/utils';
 
 /** Network accepted by the explorer-url builder (mainnet/testnet/tetra). */
 type ExplorerNetwork = Parameters<typeof getTonviewerTxUrl>[0];
@@ -45,9 +45,13 @@ interface PendingLike {
     preview?: { type: 'send' | 'receive' | 'contract'; amount: string };
 }
 
-const TON_TRANSFER_DESC = /^Transferring (.+) TON$/;
-const TON_VALUE = /^(.+) TON$/;
-const JETTON_TRANSFER_DESC = /^Transferring (.+)$/;
+const TON_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);
@@ -77,25 +81,21 @@ const isOutgoingFromAction = (action: Action, myAddress: string): boolean => {
     return accounts != null && accounts.length > 0 && sameAddress(accounts[0].address, myAddress);
 };
 
-/** Title + bare value (no sign) for an action, mirroring the existing ActionCard mapping. */
+/** 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 { description, value } = action.simplePreview;
     const label = isOutgoing ? 'Sent' : 'Received';
 
-    const descMatch = description?.match(TON_TRANSFER_DESC);
-    const valueMatch = value?.match(TON_VALUE);
-    if (descMatch && valueMatch && action.type === 'TonTransfer') {
-        const amount = formatTonForDisplay(valueMatch[1]);
-        return { title: `${label} ${amount} TON`, value: `${amount} TON` };
-    }
-    if (valueMatch && action.type === 'TonTransfer') {
-        return { title: description, value: `${formatTonForDisplay(valueMatch[1])} TON` };
+    if (action.type === 'TonTransfer' && 'TonTransfer' in action) {
+        const value = `${formatAmount(action.TonTransfer.amount, TON_DECIMALS)} TON`;
+        return { title: `${label} ${value}`, value };
     }
-    const jettonMatch = description?.match(JETTON_TRANSFER_DESC);
-    if (jettonMatch && action.type === 'JettonTransfer') {
-        return { title: `${label} ${jettonMatch[1]}`, 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 };
     }
-    return { title: description, 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. */
@@ -166,7 +166,7 @@ export const mapPendingToRow = (
     }
 
     const isOutgoing = pending.preview?.type === 'send';
-    const amount = pending.preview ? `${formatTonForDisplay(pending.preview.amount)} TON` : '';
-    const title = pending.preview ? `${isOutgoing ? 'Sent' : 'Received'} ${amount}` : 'Processing';
-    return { ...base, title, amount: signedAmount(amount, isOutgoing), isOutgoing };
+    const value = pending.preview ? `${formatAmount(pending.preview.amount, TON_DECIMALS)} TON` : '';
+    const title = pending.preview ? `${isOutgoing ? 'Sent' : 'Received'} ${value}` : 'Processing';
+    return { ...base, title, amount: signedAmount(value, isOutgoing), isOutgoing };
 };

From e4deb2e5689e249c35e6ca753ffcf60cacf2a370 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 12:20:19 +0400
Subject: [PATCH 26/49] refactor(demo-wallet): remove formatTonForDisplay

Drop the heuristic formatTonForDisplay helper entirely. Its two remaining
consumers (legacy RecentTransactions and ActionCard) now derive amounts
from raw values via formatUnits + formatLargeValue, consistent with the
new history mapper.
---
 apps/demo-wallet/src/core/utils/formatters.ts   | 17 -----------------
 .../recent-transactions/recent-transactions.tsx |  6 ++++--
 .../transaction-cards/action-card.tsx           | 10 +++++-----
 3 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/apps/demo-wallet/src/core/utils/formatters.ts b/apps/demo-wallet/src/core/utils/formatters.ts
index 978c7d91d..30793b6a7 100644
--- a/apps/demo-wallet/src/core/utils/formatters.ts
+++ b/apps/demo-wallet/src/core/utils/formatters.ts
@@ -44,23 +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);
-};
-
 type ExplorerNetwork = 'mainnet' | 'testnet' | 'tetra';
 
 function getTonviewerHost(network: ExplorerNetwork): string {
diff --git a/apps/demo-wallet/src/features/transactions/components/recent-transactions/recent-transactions.tsx b/apps/demo-wallet/src/features/transactions/components/recent-transactions/recent-transactions.tsx
index 09a939afb..15070b0b6 100644
--- a/apps/demo-wallet/src/features/transactions/components/recent-transactions/recent-transactions.tsx
+++ b/apps/demo-wallet/src/features/transactions/components/recent-transactions/recent-transactions.tsx
@@ -21,7 +21,7 @@ import {
     ActionCard,
 } from '../transaction-cards';
 
-import { formatTonForDisplay, getTonviewerTxUrl, sameAddress } from '@/core/utils';
+import { formatLargeValue, formatUnits, getTonviewerTxUrl, sameAddress } from '@/core/utils';
 
 interface RecentTransactionsProps {
     embedded?: boolean;
@@ -282,7 +282,9 @@ export const RecentTransactions: React.FC<RecentTransactionsProps> = memo(({ emb
                                     );
                                 }
 
-                                const amountFormatted = preview ? formatTonForDisplay(preview.amount) : '0';
+                                const amountFormatted = preview
+                                    ? formatLargeValue(formatUnits(preview.amount, 9), 4)
+                                    : '0';
                                 const description = preview
                                     ? preview.type === 'send'
                                         ? `Sent ${amountFormatted} TON`
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-cards/action-card.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-cards/action-card.tsx
index b1d1fb2e0..32e977c79 100644
--- a/apps/demo-wallet/src/features/transactions/components/transaction-cards/action-card.tsx
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-cards/action-card.tsx
@@ -12,7 +12,7 @@ import type { Action } from '@ton/walletkit';
 import { TransactionCard } from './transaction-card';
 import type { TxFinality } from './transaction-card';
 
-import { formatTonForDisplay, sameAddress } from '@/core/utils';
+import { formatLargeValue, formatUnits, sameAddress } from '@/core/utils';
 
 interface ActionCardProps {
     action: Action;
@@ -60,16 +60,16 @@ export const ActionCard: React.FC<ActionCardProps> = memo(
         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]);
+            if (descMatch && valueMatch && action.type === 'TonTransfer' && 'TonTransfer' in action) {
+                const amount = formatLargeValue(formatUnits(action.TonTransfer.amount, 9), 4);
                 const label = isOutgoing ? 'Sent' : 'Received';
                 return {
                     description: `${label} ${amount} TON`,
                     value: `${amount} TON`,
                 };
             }
-            if (valueMatch && action.type === 'TonTransfer') {
-                const amount = formatTonForDisplay(valueMatch[1]);
+            if (valueMatch && action.type === 'TonTransfer' && 'TonTransfer' in action) {
+                const amount = formatLargeValue(formatUnits(action.TonTransfer.amount, 9), 4);
                 return { description, value: `${amount} TON` };
             }
             const jettonMatch = description?.match(JETTON_TRANSFER_DESC);

From a614d6e41a2cf5e8469331919c13ec0496f182d0 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 13:34:42 +0400
Subject: [PATCH 27/49] refactor(demo-wallet): rework amounts display

---
 apps/demo-wallet/src/core/utils/format.ts     | 16 --------------
 .../balance-total/balance-total.tsx           | 10 ++++++++-
 .../dashboard-asset-row.tsx                   | 21 ++++++-------------
 .../dashboard-assets/dashboard-assets.tsx     |  4 ----
 .../hooks/use-received-toasts.tsx             |  6 +++---
 5 files changed, 18 insertions(+), 39 deletions(-)

diff --git a/apps/demo-wallet/src/core/utils/format.ts b/apps/demo-wallet/src/core/utils/format.ts
index b13bd3f0e..0a91946f9 100644
--- a/apps/demo-wallet/src/core/utils/format.ts
+++ b/apps/demo-wallet/src/core/utils/format.ts
@@ -10,7 +10,6 @@ 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 });
-const amount = new Intl.NumberFormat('en-US', { maximumFractionDigits: 4 });
 
 /** Raw token units (nanotons / jetton base units) → a JS number in whole tokens. */
 export const toDecimal = (raw: bigint | string | undefined, decimals: number): number => {
@@ -22,20 +21,5 @@ export const toDecimal = (raw: bigint | string | undefined, decimals: number): n
     }
 };
 
-/** USD value → `$1,234.56`. */
-export const formatUsd = (value: number): string => `$${usd.format(value)}`;
-
-/** USD value split into integer and fraction parts (no `$`), for styled rendering. */
-export const formatUsdParts = (value: number): { intPart: string; fracPart: string } => {
-    const [intPart, fracPart = '00'] = usd.format(value).split('.');
-    return { intPart, fracPart };
-};
-
-/** Token amount → grouped string with up to 4 fraction digits, trailing zeros trimmed. */
-export const formatAmount = (value: number): string => amount.format(value);
-
 /** Per-unit price → `$`, with extra precision for sub-cent values. */
 export const formatRate = (value: number): string => `$${(value >= 0.01 ? usd : usdSmall).format(value)}`;
-
-/** Signed percentage → `+1.23%` / `-4.56%`. */
-export const formatPercent = (value: number): string => `${value > 0 ? '+' : ''}${value.toFixed(2)}%`;
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
index ec58717c4..c4306a795 100644
--- 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
@@ -12,7 +12,15 @@ import { toast } from 'sonner';
 import { useWallet, useJettons, useRates } from '@demo/wallet-core';
 
 import { useCountUp } from '@/core/hooks/use-count-up';
-import { findRate, formatUsdParts, shortenAddress, toDecimal } from '@/core/utils';
+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 TON_DECIMALS = 9;
 
diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/dashboard-asset-row.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/dashboard-asset-row.tsx
index 9d4c2ba39..2770b1880 100644
--- a/apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/dashboard-asset-row.tsx
+++ b/apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/dashboard-asset-row.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 
 import { FallbackImage } from '@/core/components/ui/fallback-image';
 import { useCountUp } from '@/core/hooks/use-count-up';
-import { formatAmount, formatPercent, formatUsd } from '@/core/utils';
+import { formatLargeValue } from '@/core/utils';
 
 interface DashboardAssetRowProps {
     /** One or more candidate icon URLs, tried in order until one loads. */
@@ -22,15 +22,8 @@ interface DashboardAssetRowProps {
     rateLabel?: string;
     /** Fiat value to display on the right; omit to hide (asset has no rate). */
     fiat?: number;
-    change24h?: number;
 }
 
-const changeColor = (value: number): string => {
-    if (value > 0) return 'text-green-500';
-    if (value < 0) return 'text-red-500';
-    return 'text-gray-400';
-};
-
 export const DashboardAssetRow: React.FC<DashboardAssetRowProps> = ({
     icon,
     fallbackText,
@@ -39,7 +32,6 @@ export const DashboardAssetRow: React.FC<DashboardAssetRowProps> = ({
     amount,
     rateLabel,
     fiat,
-    change24h,
 }) => {
     const animatedAmount = useCountUp(amount);
     const animatedFiat = useCountUp(fiat ?? 0);
@@ -62,16 +54,15 @@ export const DashboardAssetRow: React.FC<DashboardAssetRowProps> = ({
             <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">
-                    {formatAmount(animatedAmount)} {symbol}
+                    {formatLargeValue(String(animatedAmount), 4)} {symbol}
                     {rateLabel && ` · ${rateLabel}`}
                 </div>
             </div>
-            {(hasFiat || change24h !== undefined) && (
+            {hasFiat && (
                 <div className="text-right flex-shrink-0 tabular-nums">
-                    {hasFiat && <div className="text-sm font-semibold text-gray-900">{formatUsd(animatedFiat)}</div>}
-                    {change24h !== undefined && (
-                        <div className={`text-xs ${changeColor(change24h)}`}>{formatPercent(change24h)}</div>
-                    )}
+                    <div className="text-sm font-semibold text-gray-900">
+                        ${formatLargeValue(String(animatedFiat), 2, 2)}
+                    </div>
                 </div>
             )}
         </div>
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
index ae6649d1a..6d97930c0 100644
--- 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
@@ -41,7 +41,6 @@ interface AssetRowData {
     amount: number;
     rateLabel?: string;
     fiat?: number;
-    change24h?: number;
 }
 
 export const DashboardAssets: React.FC = () => {
@@ -91,7 +90,6 @@ export const DashboardAssets: React.FC = () => {
             amount,
             rateLabel: rateEntry ? formatRate(rateEntry.rate) : undefined,
             fiat: rateEntry ? amount * rateEntry.rate : undefined,
-            change24h: rateEntry?.change24h,
         };
     }, [assetsReady, balance, rates]);
 
@@ -114,7 +112,6 @@ export const DashboardAssets: React.FC = () => {
                     amount,
                     rateLabel: rateEntry ? formatRate(rateEntry.rate) : undefined,
                     fiat,
-                    change24h: rateEntry?.change24h,
                 } satisfies AssetRowData,
                 isVerified: jetton.isVerified,
                 hasRate: Boolean(rateEntry),
@@ -164,7 +161,6 @@ export const DashboardAssets: React.FC = () => {
                     amount,
                     rateLabel: rateEntry ? formatRate(rateEntry.rate) : undefined,
                     fiat: rateEntry ? amount * rateEntry.rate : undefined,
-                    change24h: rateEntry?.change24h,
                 });
             }
         }
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
index f3bd1b56a..c1b204b74 100644
--- a/apps/demo-wallet/src/features/notifications/hooks/use-received-toasts.tsx
+++ b/apps/demo-wallet/src/features/notifications/hooks/use-received-toasts.tsx
@@ -13,7 +13,7 @@ import { useJettons, useRates, useWallet } from '@demo/wallet-core';
 import type { RateEntry } from '@demo/wallet-core';
 
 import { getJettonsSymbol } from '@/features/jettons';
-import { formatAmount, formatUsd, toDecimal } from '@/core/utils';
+import { formatLargeValue, toDecimal } from '@/core/utils';
 
 const TON_KEY = 'TON';
 const TON_DECIMALS = 9;
@@ -34,8 +34,8 @@ const ReceivedIcon = (
 );
 
 const toastReceived = (amount: number, symbol: string, rate?: number): void => {
-    const fiat = rate ? ` (${formatUsd(amount * rate)})` : '';
-    toast(`You received ${formatAmount(amount)} ${symbol}${fiat}`.trim(), { icon: ReceivedIcon });
+    const fiat = rate ? ` ($${formatLargeValue(String(amount * rate), 2, 2)})` : '';
+    toast(`You received ${formatLargeValue(String(amount), 4)} ${symbol}${fiat}`.trim(), { icon: ReceivedIcon });
 };
 
 /**

From 08a3482e06f1d6422190ebb037e0f1495e319bd7 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 15:14:11 +0400
Subject: [PATCH 28/49] refactor(demo-wallet): add assets page

---
 .../components/shared/screen-header}/index.ts |   2 +-
 .../shared/screen-header/screen-header.tsx    |  33 ++++
 .../src/core/routing/app-router.tsx           |   9 +
 .../components/asset-row/asset-row.tsx}       |  16 +-
 .../assets/components/asset-row/index.ts      |   9 +
 .../assets-screen/assets-screen.tsx           |  43 +++++
 .../assets/components/assets-screen/index.ts  |   9 +
 .../features/assets/hooks/use-asset-rows.ts   |  83 +++++++++
 apps/demo-wallet/src/features/assets/index.ts |  11 ++
 .../dashboard-assets/dashboard-assets.tsx     | 176 ++++++------------
 .../src/features/dashboard/index.ts           |   1 -
 11 files changed, 255 insertions(+), 137 deletions(-)
 rename apps/demo-wallet/src/{features/dashboard/components/dashboard-asset-row => core/components/shared/screen-header}/index.ts (81%)
 create mode 100644 apps/demo-wallet/src/core/components/shared/screen-header/screen-header.tsx
 rename apps/demo-wallet/src/features/{dashboard/components/dashboard-asset-row/dashboard-asset-row.tsx => assets/components/asset-row/asset-row.tsx} (91%)
 create mode 100644 apps/demo-wallet/src/features/assets/components/asset-row/index.ts
 create mode 100644 apps/demo-wallet/src/features/assets/components/assets-screen/assets-screen.tsx
 create mode 100644 apps/demo-wallet/src/features/assets/components/assets-screen/index.ts
 create mode 100644 apps/demo-wallet/src/features/assets/hooks/use-asset-rows.ts
 create mode 100644 apps/demo-wallet/src/features/assets/index.ts

diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/index.ts b/apps/demo-wallet/src/core/components/shared/screen-header/index.ts
similarity index 81%
rename from apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/index.ts
rename to apps/demo-wallet/src/core/components/shared/screen-header/index.ts
index cbef02d24..7dddcbda7 100644
--- a/apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/index.ts
+++ b/apps/demo-wallet/src/core/components/shared/screen-header/index.ts
@@ -6,4 +6,4 @@
  *
  */
 
-export * from './dashboard-asset-row';
+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/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index 74758e350..9fb518490 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -14,6 +14,7 @@ import { ProtectedRoute } from './protected-route';
 
 import { LoaderCircle } from '@/core/components/ui/loader-circle';
 import { WalletDashboard } from '@/features/dashboard';
+import { AssetsScreen } from '@/features/assets';
 import { TonConnectRoute } from '@/features/ton-connect';
 import { TracePage, TransactionDetail } from '@/features/transactions';
 import { Staking } from '@/features/staking';
@@ -121,6 +122,14 @@ export const AppRouter: React.FC = () => {
                         </ProtectedRoute>
                     }
                 />
+                <Route
+                    path="/wallet/assets"
+                    element={
+                        <ProtectedRoute requiresWallet>
+                            <AssetsScreen />
+                        </ProtectedRoute>
+                    }
+                />
                 <Route
                     path="/send"
                     element={
diff --git a/apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/dashboard-asset-row.tsx b/apps/demo-wallet/src/features/assets/components/asset-row/asset-row.tsx
similarity index 91%
rename from apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/dashboard-asset-row.tsx
rename to apps/demo-wallet/src/features/assets/components/asset-row/asset-row.tsx
index 2770b1880..a6877f0f5 100644
--- a/apps/demo-wallet/src/features/dashboard/components/dashboard-asset-row/dashboard-asset-row.tsx
+++ b/apps/demo-wallet/src/features/assets/components/asset-row/asset-row.tsx
@@ -12,7 +12,9 @@ import { FallbackImage } from '@/core/components/ui/fallback-image';
 import { useCountUp } from '@/core/hooks/use-count-up';
 import { formatLargeValue } from '@/core/utils';
 
-interface DashboardAssetRowProps {
+/** 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;
@@ -24,15 +26,7 @@ interface DashboardAssetRowProps {
     fiat?: number;
 }
 
-export const DashboardAssetRow: React.FC<DashboardAssetRowProps> = ({
-    icon,
-    fallbackText,
-    name,
-    symbol,
-    amount,
-    rateLabel,
-    fiat,
-}) => {
+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;
@@ -69,7 +63,7 @@ export const DashboardAssetRow: React.FC<DashboardAssetRowProps> = ({
     );
 };
 
-export const DashboardAssetRowSkeleton: React.FC = () => (
+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">
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..8e5d83f9e
--- /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 } from '@/core/utils';
+
+const TON_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['TON'];
+        const amount = toDecimal(balance, TON_DECIMALS);
+        return {
+            id: 'TON',
+            icon: '/ton.svg',
+            fallbackText: 'TN',
+            name: 'Toncoin',
+            symbol: 'TON',
+            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(jetton.info?.image?.urls, 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/dashboard/components/dashboard-assets/dashboard-assets.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-assets/dashboard-assets.tsx
index 6d97930c0..d9a78eb21 100644
--- 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
@@ -8,52 +8,32 @@
 
 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 { DashboardAssetRow, DashboardAssetRowSkeleton } from '../dashboard-asset-row';
-
+import { AssetRow, AssetRowSkeleton, imageSources, useAssetRows } from '@/features/assets';
+import type { AssetRowData } from '@/features/assets';
 import { getJettonsName, getJettonsSymbol } from '@/features/jettons';
 import { findRate, formatRate, toDecimal } from '@/core/utils';
 
-const TON_DECIMALS = 9;
 const JETTON_SLOTS = 2;
 
-// Always-shown fallback jettons (used to pad the list to 3 assets when the user
+// 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' },
 ];
 
-// Candidate icon URLs (best-first), appending the inline base64 image as a last resort.
-const imageSources = (urls: string[] | undefined, dataBase64?: string): string[] => [
-    ...(urls ?? []),
-    ...(dataBase64 ? [`data:image/png;base64,${dataBase64}`] : []),
-];
-
-interface AssetRowData {
-    id: string;
-    icon?: string | string[];
-    fallbackText: string;
-    name: string;
-    symbol: string;
-    amount: number;
-    rateLabel?: string;
-    fiat?: number;
-}
-
 export const DashboardAssets: React.FC = () => {
-    const { balance, currentWallet, getActiveWallet } = useWallet();
-    const { userJettons, lastJettonsUpdate } = useJettons();
-    const { entries: rates, lastUpdated: ratesUpdated } = useRates();
+    const navigate = useNavigate();
+    const { currentWallet, getActiveWallet } = useWallet();
+    const { userJettons } = useJettons();
+    const { entries: rates } = useRates();
     const walletKit = useWalletKit();
+    const { tonRow, jettonRows, assetsReady } = useAssetRows();
 
-    const ratesLoaded = ratesUpdated > 0;
-    const hasJettonsLoaded = lastJettonsUpdate > 0;
-    const hasBalance = balance !== undefined;
-    // Show TON and jettons strictly together: all skeletons until balances AND rates are loaded.
-    const assetsReady = hasBalance && hasJettonsLoaded && ratesLoaded;
     const isMainnet = getActiveWallet()?.network === 'mainnet';
 
     // Fetch metadata (name/icon) for the default tokens from the API — mainnet only.
@@ -77,112 +57,60 @@ export const DashboardAssets: React.FC = () => {
         };
     }, [isMainnet, walletKit, currentWallet]);
 
-    const tonRow = useMemo<AssetRowData | null>(() => {
-        if (!assetsReady) return null;
-        const rateEntry = rates['TON'];
-        const amount = toDecimal(balance, TON_DECIMALS);
-        return {
-            id: 'TON',
-            icon: '/ton.svg',
-            fallbackText: 'TN',
-            name: 'Toncoin',
-            symbol: 'TON',
-            amount,
-            rateLabel: rateEntry ? formatRate(rateEntry.rate) : undefined,
-            fiat: rateEntry ? amount * rateEntry.rate : undefined,
-        };
-    }, [assetsReady, balance, rates]);
-
-    const jettonRows = useMemo<AssetRowData[]>(() => {
-        if (!assetsReady) return [];
-
-        const entries = userJettons.map((jetton) => {
-            const rateEntry = findRate(rates, jetton.address);
-            const decimals = jetton.decimalsNumber ?? 9;
-            const amount = toDecimal(jetton.balance, decimals);
-            const fiat = rateEntry ? amount * rateEntry.rate : undefined;
-            const symbol = getJettonsSymbol(jetton) ?? '';
-            return {
-                row: {
-                    id: jetton.address,
-                    icon: imageSources(jetton.info?.image?.urls, jetton.info?.image?.data),
-                    fallbackText: symbol.slice(0, 2).toUpperCase() || '??',
-                    name: getJettonsName(jetton) ?? symbol,
-                    symbol,
-                    amount,
-                    rateLabel: rateEntry ? formatRate(rateEntry.rate) : undefined,
-                    fiat,
-                } satisfies AssetRowData,
-                isVerified: jetton.isVerified,
-                hasRate: Boolean(rateEntry),
-            };
-        });
-
-        // Pick the user's own jettons first: by fiat if any have value, else by verified status.
-        const withPositiveFiat = entries.filter((entry) => (entry.row.fiat ?? 0) > 0);
-        let selected: AssetRowData[];
-        if (withPositiveFiat.length > 0) {
-            selected = withPositiveFiat
-                .sort((a, b) => (b.row.fiat ?? 0) - (a.row.fiat ?? 0))
-                .slice(0, JETTON_SLOTS)
-                .map((entry) => entry.row);
-        } else {
-            const withRate = entries.filter((entry) => entry.hasRate);
-            const base = withRate.length > 0 ? withRate : entries;
-            selected = base
-                .sort((a, b) => Number(b.isVerified) - Number(a.isVerified))
-                .slice(0, JETTON_SLOTS)
-                .map((entry) => entry.row);
-        }
-
-        // On mainnet always show JETTON_SLOTS rows — pad with default tokens
-        // (USDT/XAUT) the user doesn't already have shown.
-        if (isMainnet && selected.length < JETTON_SLOTS) {
-            const heldByAddress = new Map(userJettons.map((jetton) => [jetton.address, jetton]));
-            const present = new Set(selected.map((row) => row.id));
-
-            for (const def of DEFAULT_JETTONS) {
-                if (selected.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);
-                selected.push({
-                    id: def.address,
-                    icon: held
-                        ? imageSources(held.info?.image?.urls, held.info?.image?.data)
-                        : imageSources(info?.images, 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,
-                });
-            }
+    // 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(held.info?.image?.urls, held.info?.image?.data)
+                    : imageSources(info?.images, 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 selected;
-    }, [assetsReady, isMainnet, userJettons, rates, defaultInfos]);
+        return padded;
+    }, [jettonRows, isMainnet, userJettons, rates, defaultInfos]);
 
     return (
         <section>
-            <header className="flex items-center gap-1 mb-2">
+            <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" />
-            </header>
+            </button>
 
             <div className="space-y-1">
-                {tonRow ? <DashboardAssetRow {...tonRow} /> : <DashboardAssetRowSkeleton />}
+                {tonRow ? <AssetRow {...tonRow} /> : <AssetRowSkeleton />}
                 {assetsReady ? (
-                    jettonRows.map((row) => <DashboardAssetRow key={row.id} {...row} />)
+                    selected.map((row) => <AssetRow key={row.id} {...row} />)
                 ) : (
                     <>
-                        <DashboardAssetRowSkeleton />
-                        <DashboardAssetRowSkeleton />
+                        <AssetRowSkeleton />
+                        <AssetRowSkeleton />
                     </>
                 )}
             </div>
diff --git a/apps/demo-wallet/src/features/dashboard/index.ts b/apps/demo-wallet/src/features/dashboard/index.ts
index 3d6bcd19f..e3c0b0de1 100644
--- a/apps/demo-wallet/src/features/dashboard/index.ts
+++ b/apps/demo-wallet/src/features/dashboard/index.ts
@@ -11,6 +11,5 @@ 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-asset-row';
 export * from './components/dashboard-assets';
 export * from './components/dashboard-header';

From c1123b47747f489f8b29b92c9b5e3192c33fb2b0 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 15:19:47 +0400
Subject: [PATCH 29/49] refactor(demo-wallet): add nfts page

---
 .../src/core/routing/app-router.tsx           |  9 ++++
 .../nft/components/nft-screen/index.ts        |  9 ++++
 .../nft/components/nft-screen/nft-screen.tsx  | 36 +++++++++++++
 .../features/nft/components/nft-tile/index.ts |  9 ++++
 .../nft/components/nft-tile/nft-tile.tsx      | 54 +++++++++++++++++++
 .../nft/components/nfts-card/nfts-card.tsx    | 53 +++++-------------
 apps/demo-wallet/src/features/nft/index.ts    |  2 +
 7 files changed, 133 insertions(+), 39 deletions(-)
 create mode 100644 apps/demo-wallet/src/features/nft/components/nft-screen/index.ts
 create mode 100644 apps/demo-wallet/src/features/nft/components/nft-screen/nft-screen.tsx
 create mode 100644 apps/demo-wallet/src/features/nft/components/nft-tile/index.ts
 create mode 100644 apps/demo-wallet/src/features/nft/components/nft-tile/nft-tile.tsx

diff --git a/apps/demo-wallet/src/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index 9fb518490..3bdbbe856 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -15,6 +15,7 @@ import { ProtectedRoute } from './protected-route';
 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 { TracePage, TransactionDetail } from '@/features/transactions';
 import { Staking } from '@/features/staking';
@@ -130,6 +131,14 @@ export const AppRouter: React.FC = () => {
                         </ProtectedRoute>
                     }
                 />
+                <Route
+                    path="/wallet/nft"
+                    element={
+                        <ProtectedRoute requiresWallet>
+                            <NftsScreen />
+                        </ProtectedRoute>
+                    }
+                />
                 <Route
                     path="/send"
                     element={
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..47b994777
--- /dev/null
+++ b/apps/demo-wallet/src/features/nft/components/nft-tile/nft-tile.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+import type { NFT } from '@ton/walletkit';
+
+import { FallbackImage } from '@/core/components/ui/fallback-image';
+
+const getNftImageSources = (nft: NFT): string[] => {
+    const img = nft.info?.image;
+    if (!img) return [];
+    return [...img.urls, ...(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/nfts-card.tsx b/apps/demo-wallet/src/features/nft/components/nfts-card/nfts-card.tsx
index ef812ae23..18fb21fef 100644
--- 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
@@ -7,63 +7,38 @@
  */
 
 import React from 'react';
-import type { NFT } from '@ton/walletkit';
 import { ChevronRight } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 import { useNfts } from '@demo/wallet-core';
 
-import { FallbackImage } from '@/core/components/ui/fallback-image';
-
-const getNftImageSources = (nft: NFT): string[] => {
-    const img = nft.info?.image;
-    if (!img) return [];
-    return [...img.urls, ...(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';
-};
-
-const NftTile: React.FC<{ nft: NFT; formatNftIndex: (index: string) => string }> = ({ nft, formatNftIndex }) => {
-    const name = getNftName(nft, formatNftIndex);
-    const indexLabel = nft.index ? formatNftIndex(nft.index) : null;
-
-    return (
-        <article className="flex-shrink-0 w-36 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>
-    );
-};
+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();
 
-    // Only render when there are NFTs to show — no skeletons, no empty block.
     if (userNfts.length === 0) {
         return null;
     }
 
     return (
         <section>
-            <header className="flex items-center gap-1 mb-2">
+            <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" />
-            </header>
+            </button>
 
             <div className="flex gap-3 overflow-x-auto -mx-4 px-4 pb-1 [&::-webkit-scrollbar]:hidden [scrollbar-width:none]">
                 {userNfts.map((nft) => (
-                    <NftTile key={nft.address} nft={nft} formatNftIndex={formatNftIndex} />
+                    <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
index 736206729..bb51a9e3b 100644
--- a/apps/demo-wallet/src/features/nft/index.ts
+++ b/apps/demo-wallet/src/features/nft/index.ts
@@ -7,3 +7,5 @@
  */
 
 export * from './components/nfts-card';
+export * from './components/nft-tile';
+export * from './components/nft-screen';

From b5da1f59232d6d6edde5f339d7d4601dd0b4edf0 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 15:28:15 +0400
Subject: [PATCH 30/49] refactor(demo-wallet): add history page

---
 .../src/core/routing/app-router.tsx           | 10 +-
 .../history-screen/history-screen.tsx         | 49 ++++++++++
 .../components/history-screen/index.ts        |  9 ++
 .../transaction-history.tsx                   | 93 ++++---------------
 .../hooks/use-transaction-rows.ts             | 85 +++++++++++++++++
 .../src/features/transactions/index.ts        |  2 +
 6 files changed, 173 insertions(+), 75 deletions(-)
 create mode 100644 apps/demo-wallet/src/features/transactions/components/history-screen/history-screen.tsx
 create mode 100644 apps/demo-wallet/src/features/transactions/components/history-screen/index.ts
 create mode 100644 apps/demo-wallet/src/features/transactions/hooks/use-transaction-rows.ts

diff --git a/apps/demo-wallet/src/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index 3bdbbe856..9565e1344 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -17,7 +17,7 @@ import { WalletDashboard } from '@/features/dashboard';
 import { AssetsScreen } from '@/features/assets';
 import { NftsScreen } from '@/features/nft';
 import { TonConnectRoute } from '@/features/ton-connect';
-import { TracePage, TransactionDetail } from '@/features/transactions';
+import { TracePage, TransactionDetail, HistoryScreen } from '@/features/transactions';
 import { Staking } from '@/features/staking';
 import { Swap } from '@/features/swap';
 import { SendTransaction } from '@/features/send';
@@ -139,6 +139,14 @@ export const AppRouter: React.FC = () => {
                         </ProtectedRoute>
                     }
                 />
+                <Route
+                    path="/wallet/history"
+                    element={
+                        <ProtectedRoute requiresWallet>
+                            <HistoryScreen />
+                        </ProtectedRoute>
+                    }
+                />
                 <Route
                     path="/send"
                     element={
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/transaction-history.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-history/transaction-history.tsx
index 1e75f8023..dbbdd3679 100644
--- 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
@@ -6,99 +6,44 @@
  *
  */
 
-import React, { useEffect, useMemo } from 'react';
+import React from 'react';
 import { ChevronRight } from 'lucide-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 { useNavigate } from 'react-router-dom';
 
 import { TransactionRow } from '../transaction-row';
-import { mapEventToRow, mapPendingToRow } from '../../utils/map-transaction-row';
-import type { TransactionRowModel } from '../../utils/map-transaction-row';
+import { useTransactionRows } from '../../hooks/use-transaction-rows';
 
-const MAX_ROWS = 6;
+const PREVIEW_COUNT = 6;
 // Load a few extra so the preview still fills 6 rows after action-less events are skipped.
-const LOAD_LIMIT = 10;
-
-const nowSeconds = (): number => Math.floor(Date.now() / 1000);
+const PREVIEW_LOAD = 10;
 
 /**
- * Dashboard "History" block: the latest transactions for the active wallet.
- * Mirrors the Assets/NFTs section header and, like NftsCard, renders nothing
- * while loading or when there is nothing to show.
+ * 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 { events, loadEvents, address, 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,
-                pendingTransactions: state.walletManagement.pendingTransactions,
-                network: activeWallet?.network ?? 'testnet',
-            };
-        }),
-    );
-
-    useEffect(() => {
-        if (!address) return;
-        void loadEvents(LOAD_LIMIT, 0);
-    }, [address, loadEvents]);
-
-    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)
-            .slice(0, MAX_ROWS)
-            .map((item) => item.row);
-    }, [events, pendingTransactions, address, network]);
+    const navigate = useNavigate();
+    const { rows } = useTransactionRows(PREVIEW_LOAD);
+    const preview = rows.slice(0, PREVIEW_COUNT);
 
-    // Like NftsCard: render nothing while loading or when empty.
-    if (rows.length === 0) {
+    if (preview.length === 0) {
         return null;
     }
 
     return (
         <section>
-            <header className="mb-2 flex items-center gap-1">
+            <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" />
-            </header>
+            </button>
 
             <div className="space-y-1">
-                {rows.map((row) => (
+                {preview.map((row) => (
                     <TransactionRow key={row.id} {...row} />
                 ))}
             </div>
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
index 8a63f67f1..ea004df72 100644
--- a/apps/demo-wallet/src/features/transactions/index.ts
+++ b/apps/demo-wallet/src/features/transactions/index.ts
@@ -14,3 +14,5 @@ export * from './components/transaction-cards';
 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';

From a06f93dc945f10fb2e42aaa8fd5f43d0ca71f53e Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 17:04:38 +0400
Subject: [PATCH 31/49] refactor(demo-wallet): rework send page

---
 apps/demo-wallet/src/assets/react.svg         |   1 -
 .../shared/amount-presets/amount-presets.tsx  |  48 ++
 .../components/shared/amount-presets/index.ts |   9 +
 .../ui/amount-reversed/amount-reversed.tsx    |  60 ++
 .../components/ui/amount-reversed/index.ts    |   9 +
 .../centered-amount-input.tsx                 | 139 ++++
 .../ui/centered-amount-input/index.ts         |   9 +
 .../src/core/components/ui/input/input.tsx    | 199 +++++-
 .../components/ui/input/use-input-resize.ts   | 101 +++
 .../components/amount-field/amount-field.tsx  |  55 ++
 .../send/components/amount-field/index.ts     |   9 +
 .../gasless-options/gasless-options.tsx       |  91 +++
 .../send/components/gasless-options/index.ts  |   9 +
 .../send/components/recipient-field/index.ts  |   9 +
 .../recipient-field/recipient-field.tsx       |  47 ++
 .../send-transaction/send-transaction.tsx     | 628 ++++--------------
 .../components/token-select-button/index.ts   |   9 +
 .../token-select-button.tsx                   |  53 ++
 .../components/token-select-modal/index.ts    |   9 +
 .../token-select-modal/token-select-modal.tsx |  63 ++
 .../send/hooks/use-gasless-jetton-send.ts     |  25 +-
 .../features/send/hooks/use-send-tokens.ts    |  62 ++
 apps/demo-wallet/src/features/send/index.ts   |   7 +
 apps/demo-wallet/src/features/send/types.ts   |  33 +
 .../src/store/slices/gaslessSlice.ts          | 380 ++++++-----
 25 files changed, 1351 insertions(+), 713 deletions(-)
 delete mode 100644 apps/demo-wallet/src/assets/react.svg
 create mode 100644 apps/demo-wallet/src/core/components/shared/amount-presets/amount-presets.tsx
 create mode 100644 apps/demo-wallet/src/core/components/shared/amount-presets/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/amount-reversed/amount-reversed.tsx
 create mode 100644 apps/demo-wallet/src/core/components/ui/amount-reversed/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/centered-amount-input/centered-amount-input.tsx
 create mode 100644 apps/demo-wallet/src/core/components/ui/centered-amount-input/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/ui/input/use-input-resize.ts
 create mode 100644 apps/demo-wallet/src/features/send/components/amount-field/amount-field.tsx
 create mode 100644 apps/demo-wallet/src/features/send/components/amount-field/index.ts
 create mode 100644 apps/demo-wallet/src/features/send/components/gasless-options/gasless-options.tsx
 create mode 100644 apps/demo-wallet/src/features/send/components/gasless-options/index.ts
 create mode 100644 apps/demo-wallet/src/features/send/components/recipient-field/index.ts
 create mode 100644 apps/demo-wallet/src/features/send/components/recipient-field/recipient-field.tsx
 create mode 100644 apps/demo-wallet/src/features/send/components/token-select-button/index.ts
 create mode 100644 apps/demo-wallet/src/features/send/components/token-select-button/token-select-button.tsx
 create mode 100644 apps/demo-wallet/src/features/send/components/token-select-modal/index.ts
 create mode 100644 apps/demo-wallet/src/features/send/components/token-select-modal/token-select-modal.tsx
 create mode 100644 apps/demo-wallet/src/features/send/hooks/use-send-tokens.ts
 create mode 100644 apps/demo-wallet/src/features/send/types.ts

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/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/core/components/shared/amount-presets/index.ts b/apps/demo-wallet/src/core/components/shared/amount-presets/index.ts
new file mode 100644
index 000000000..0f9c1611d
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/shared/amount-presets/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-presets';
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/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..dc8e64e04
--- /dev/null
+++ b/apps/demo-wallet/src/core/components/ui/centered-amount-input/centered-amount-input.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 { 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;
+}
+
+/** 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,
+    ...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}
+                    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/core/components/ui/input/input.tsx b/apps/demo-wallet/src/core/components/ui/input/input.tsx
index 1c64eae75..243c4f85c 100644
--- a/apps/demo-wallet/src/core/components/ui/input/input.tsx
+++ b/apps/demo-wallet/src/core/components/ui/input/input.tsx
@@ -6,28 +6,193 @@
  *
  */
 
-import React from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import type { FC, ReactNode, ComponentProps, ChangeEvent } from 'react';
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    label?: string;
-    error?: string;
-    helperText?: string;
+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;
 }
 
-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
-  `;
+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="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
+            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/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..6c487c4b4
--- /dev/null
+++ b/apps/demo-wallet/src/features/send/components/amount-field/amount-field.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 { 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} />
+                {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/send-transaction.tsx b/apps/demo-wallet/src/features/send/components/send-transaction/send-transaction.tsx
index c49effed1..122141ad3 100644
--- 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
@@ -6,106 +6,62 @@
  *
  */
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useState } 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 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 { AnimatedBalance } from '@/features/dashboard';
-import { WalletSwitcher } from '@/features/wallets';
+import { NewLayout } from '@/core/components/shared/new-layout';
+import { ScreenHeader } from '@/core/components/shared/screen-header';
 import { createComponentLogger } from '@/core/lib/logger';
-import { Layout } from '@/core/components/shared/layout';
-import { Input } from '@/core/components/ui/input';
-import { Card } from '@/core/components/ui/card';
-import { getFormattedJettonInfo } from '@/features/jettons';
-import { useFormattedJetton } from '@/features/jettons';
-import { useJettonInfo } from '@/features/jettons';
 
-// 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 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 [selectedToken, setSelectedToken] = useState<SelectedToken>({ type: 'TON' });
-    const [showTokenSelector, setShowTokenSelector] = useState(false);
-    const tokenSelectorRef = useRef<HTMLDivElement>(null);
+    const [showTokenModal, setShowTokenModal] = useState(false);
 
-    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);
-
-    const navigate = useNavigate();
+    const options = useSendTokens();
+    const selected = options.find((option) => option.id === selectedId) ?? options[0];
 
     const sender = useSendToken({
         wallet: currentWallet,
         walletKit,
-        tokenType: selectedToken.type,
-        jetton: selectedToken.data,
+        tokenType: selected.token.type,
+        jetton: selected.token.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) => {
@@ -124,6 +80,17 @@ export const SendTransaction: React.FC = () => {
         });
     };
 
+    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('');
@@ -135,27 +102,22 @@ export const SendTransaction: React.FC = () => {
             }
 
             const inputAmount = parseFloat(amount);
-            if (inputAmount <= 0) {
+            if (!(inputAmount > 0)) {
                 throw new Error('Amount must be greater than 0');
             }
-
-            const currentBalance = parseFloat(getCurrentTokenBalance());
-            if (inputAmount > currentBalance) {
+            if (inputAmount > selected.balance) {
                 throw new Error('Insufficient balance');
             }
 
-            // Build + submit, dispatching gasless vs regular inside the hook.
+            // 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();
-
-            // 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!` },
-                });
+                navigate('/wallet', { state: { message: `${selected.symbol} sent successfully!` } });
             }
         } catch (err) {
             log.error('Send transaction error:', err);
@@ -165,20 +127,6 @@ export const SendTransaction: React.FC = () => {
         }
     };
 
-    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;
@@ -191,20 +139,17 @@ export const SendTransaction: React.FC = () => {
         setIsLoading(true);
         try {
             let result;
-            if (selectedToken.type === 'TON') {
-                const tonTransferParams: TONTransferRequest = {
-                    recipientAddress: recipientAddress,
-                    transferAmount: '1000000',
-                };
-                const tx = await currentWallet.createTransferTonTransaction(tonTransferParams);
+            if (selected.token.type === 'TON') {
+                const params: TONTransferRequest = { recipientAddress, transferAmount: '1000000' };
+                const tx = await currentWallet.createTransferTonTransaction(params);
                 result = await currentWallet.sendTransaction(tx);
-            } else if (selectedToken.data) {
-                const jettonTransaction = await currentWallet.createTransferJettonTransaction({
-                    recipientAddress: recipientAddress,
-                    jettonAddress: selectedToken.data.address,
+            } else if (selected.token.data) {
+                const tx = await currentWallet.createTransferJettonTransaction({
+                    recipientAddress,
+                    jettonAddress: selected.token.data.address,
                     transferAmount: '1',
                 });
-                result = await currentWallet.sendTransaction(jettonTransaction);
+                result = await currentWallet.sendTransaction(tx);
             }
             if (result?.normalizedHash) {
                 notifySent(result.normalizedHash);
@@ -217,417 +162,78 @@ export const SendTransaction: React.FC = () => {
         }
     };
 
-    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 recipientError = recipient.length > 0 && !isValidAddress(recipient) ? 'Invalid address' : '';
+    const isSendDisabled = sender.isDisabled || Boolean(recipientError);
     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}
-                                                loading={isLoading}
-                                                disabled={isSendFastDisabled}
-                                                className="flex-1"
-                                                data-testid="send-fast"
-                                            >
-                                                Send Fast
-                                            </Button>
-                                        )}
-                                        <Button
-                                            type="submit"
-                                            loading={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>
-                            </>
+        <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>
-                </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>
+                </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/features/send/hooks/use-gasless-jetton-send.ts b/apps/demo-wallet/src/features/send/hooks/use-gasless-jetton-send.ts
index aeb1172a9..9d304f4aa 100644
--- a/apps/demo-wallet/src/features/send/hooks/use-gasless-jetton-send.ts
+++ b/apps/demo-wallet/src/features/send/hooks/use-gasless-jetton-send.ts
@@ -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
         ) {
             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/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..5e8a29e56
--- /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 TON_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, TON_DECIMALS);
+        const tonOption: TokenOption = {
+            token: { type: 'TON' },
+            id: 'TON',
+            icon: '/ton.svg',
+            fallbackText: 'TN',
+            name: 'Toncoin',
+            symbol: 'TON',
+            decimals: TON_DECIMALS,
+            balance: tonAmount,
+            maxSendable: Math.max(0, tonAmount - TON_GAS_RESERVE),
+            rate: rates['TON']?.rate,
+        };
+
+        const jettonOptions = userJettons.map((jetton): TokenOption => {
+            const decimals = jetton.decimalsNumber ?? TON_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
index 09b9d4524..a1dc1adb5 100644
--- a/apps/demo-wallet/src/features/send/index.ts
+++ b/apps/demo-wallet/src/features/send/index.ts
@@ -7,5 +7,12 @@
  */
 
 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/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;
-        });
-    },
-});
+        },
+    };
+};

From fa05c2888df41ec2c6b2a2789b4511cf927745f3 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 17:47:19 +0400
Subject: [PATCH 32/49] refactor(demo-wallet): rework swap page

---
 .../src/core/components/ui/button/button.tsx  |   2 +-
 .../components/quote-timer/quote-timer.tsx    |  14 +-
 .../{token-input => swap-field}/index.ts      |   2 +-
 .../swap/components/swap-field/swap-field.tsx |  74 +++++
 .../{token-selector => swap-info}/index.ts    |   2 +-
 .../swap/components/swap-info/swap-info.tsx   |  62 ++++
 .../swap-interface/swap-interface.tsx         | 313 ++++++++----------
 .../components/swap-screen/swap-screen.tsx    |  31 +-
 .../swap-settings/swap-settings.tsx           | 122 ++++---
 .../components/token-input/token-input.tsx    | 112 -------
 .../token-selector/token-selector.tsx         | 130 --------
 .../features/swap/hooks/use-swap-providers.ts |  30 ++
 apps/demo-wallet/src/features/swap/index.ts   |   5 +-
 demo/wallet-core/src/hooks/useWalletStore.ts  |   2 +
 .../wallet-core/src/store/slices/swapSlice.ts |  16 +-
 .../src/store/slices/walletCoreSlice.ts       |   2 +
 demo/wallet-core/src/types/store.ts           |   3 +
 17 files changed, 422 insertions(+), 500 deletions(-)
 rename apps/demo-wallet/src/features/swap/components/{token-input => swap-field}/index.ts (84%)
 create mode 100644 apps/demo-wallet/src/features/swap/components/swap-field/swap-field.tsx
 rename apps/demo-wallet/src/features/swap/components/{token-selector => swap-info}/index.ts (83%)
 create mode 100644 apps/demo-wallet/src/features/swap/components/swap-info/swap-info.tsx
 delete mode 100644 apps/demo-wallet/src/features/swap/components/token-input/token-input.tsx
 delete mode 100644 apps/demo-wallet/src/features/swap/components/token-selector/token-selector.tsx
 create mode 100644 apps/demo-wallet/src/features/swap/hooks/use-swap-providers.ts

diff --git a/apps/demo-wallet/src/core/components/ui/button/button.tsx b/apps/demo-wallet/src/core/components/ui/button/button.tsx
index e97913df1..5a1abe919 100644
--- a/apps/demo-wallet/src/core/components/ui/button/button.tsx
+++ b/apps/demo-wallet/src/core/components/ui/button/button.tsx
@@ -33,7 +33,7 @@ const VARIANT_CLASS: Record<ButtonVariant, string> = {
 };
 
 const SIZE_CLASS: Record<ButtonSize, string> = {
-    lg: 'px-5 py-4 text-base font-bold rounded-2xl',
+    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',
diff --git a/apps/demo-wallet/src/features/swap/components/quote-timer/quote-timer.tsx b/apps/demo-wallet/src/features/swap/components/quote-timer/quote-timer.tsx
index a9e4a555f..7389479b2 100644
--- a/apps/demo-wallet/src/features/swap/components/quote-timer/quote-timer.tsx
+++ b/apps/demo-wallet/src/features/swap/components/quote-timer/quote-timer.tsx
@@ -43,11 +43,15 @@ export const QuoteTimer: FC<QuoteTimerProps> = ({ expiresAt, onRefresh, loading
     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={loading} loading={loading} 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>
@@ -55,8 +59,8 @@ export const QuoteTimer: FC<QuoteTimerProps> = ({ expiresAt, onRefresh, loading
     }
 
     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/token-input/index.ts b/apps/demo-wallet/src/features/swap/components/swap-field/index.ts
similarity index 84%
rename from apps/demo-wallet/src/features/swap/components/token-input/index.ts
rename to apps/demo-wallet/src/features/swap/components/swap-field/index.ts
index ab438bfda..cd1af50f3 100644
--- a/apps/demo-wallet/src/features/swap/components/token-input/index.ts
+++ b/apps/demo-wallet/src/features/swap/components/swap-field/index.ts
@@ -6,4 +6,4 @@
  *
  */
 
-export * from './token-input';
+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/token-selector/index.ts b/apps/demo-wallet/src/features/swap/components/swap-info/index.ts
similarity index 83%
rename from apps/demo-wallet/src/features/swap/components/token-selector/index.ts
rename to apps/demo-wallet/src/features/swap/components/swap-info/index.ts
index 9801a9e75..706f1854b 100644
--- a/apps/demo-wallet/src/features/swap/components/token-selector/index.ts
+++ b/apps/demo-wallet/src/features/swap/components/swap-info/index.ts
@@ -6,4 +6,4 @@
  *
  */
 
-export * from './token-selector';
+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/swap-interface.tsx b/apps/demo-wallet/src/features/swap/components/swap-interface/swap-interface.tsx
index acba53b71..8c776d03b 100644
--- 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
@@ -6,24 +6,31 @@
  *
  */
 
-import type { FC } from 'react';
 import { useState } from 'react';
-import { useSwap } from '@demo/wallet-core';
+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 { TokenInput } from '../token-input';
 import { QuoteTimer } from '../quote-timer';
 
 import { Button } from '@/core/components/ui/button';
-import { Card } from '@/core/components/ui/card';
+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';
 
-function getPriceImpactColor(priceImpact: number): string {
-    if (priceImpact > 500) return 'text-destructive';
-    if (priceImpact > 200) return 'text-yellow-600';
-    return 'text-green-600';
+/** 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 {
@@ -31,6 +38,9 @@ interface SwapInterfaceProps {
 }
 
 export const SwapInterface: FC<SwapInterfaceProps> = ({ className }) => {
+    const navigate = useNavigate();
+    const { balance } = useWallet();
+    const { userJettons } = useJettons();
     const {
         fromToken,
         toToken,
@@ -42,221 +52,176 @@ export const SwapInterface: FC<SwapInterfaceProps> = ({ className }) => {
         isSwapping,
         error,
         slippageBps,
-        setFromToken,
-        setToToken,
+        providerId,
         setSwapAmount: setAmount,
         setIsReverseSwap,
         setDestinationAddress,
         setSlippageBps,
+        setSwapProviderId,
         swapTokens,
-        getSwapQuote: getQuote,
+        getSwapQuote,
         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 getTokenView = (token: SwapToken): TokenView => {
+        if (token.address === 'ton') {
+            return {
+                symbol: token.symbol || 'TON',
+                icon: '/ton.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 fromSymbol = getTokenSymbol(fromToken);
-    const toSymbol = getTokenSymbol(toToken);
+    const fromView = getTokenView(fromToken);
+    const toView = getTokenView(toToken);
 
-    const handleGetQuote = async () => {
-        await getQuote();
-    };
-
-    const handleExecuteSwap = async () => {
-        await executeSwap();
-
-        navigate('/wallet', {
-            state: { message: `${fromSymbol} sent successfully!` },
-        });
-    };
+    const fromAmount = !isReverseSwap ? amount : currentQuote ? currentQuote.fromAmount : '';
+    const toAmount = isReverseSwap ? amount : currentQuote ? currentQuote.toAmount : '';
 
-    const handleFromAmountChange = (val: string) => {
-        setAmount(val);
+    const handleFromAmountChange = (value: string) => {
+        setAmount(value);
         setIsReverseSwap(false);
     };
 
-    const handleToAmountChange = (val: string) => {
-        setAmount(val);
+    const handleToAmountChange = (value: string) => {
+        setAmount(value);
         setIsReverseSwap(true);
     };
 
-    const fromAmount = !isReverseSwap ? amount : currentQuote ? currentQuote.fromAmount : '';
+    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 toAmount = isReverseSwap ? amount : currentQuote ? currentQuote.toAmount : '';
+    const handleExecuteSwap = async () => {
+        await executeSwap();
+        navigate('/wallet', { state: { message: `${fromView.symbol} sent successfully!` } });
+    };
 
-    const getSwapButtonText = () => {
-        if (!fromToken || !toToken) return 'Select tokens';
+    const getSwapButtonText = (): string => {
         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}`;
+        return `Swap ${fromView.symbol} for ${toView.symbol}`;
     };
 
-    const isSwapDisabled = !!error || isLoadingQuote || isSwapping;
+    const isSwapDisabled = Boolean(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 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>
 
-                <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>
+                <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>
 
-                    {useCustomDestination && (
-                        <div className="space-y-1">
-                            <input
-                                type="text"
+            {/* 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="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"
+                                placeholder="Recipient address (EQ…)"
                             />
-                            <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}
-                            loading={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>
+                        </Input.Field>
+                        <Input.Caption>Swapped tokens will be sent here instead of your wallet.</Input.Caption>
+                    </Input.Container>
                 )}
             </div>
 
-            <div className="flex flex-col gap-3 mt-6">
-                {!currentQuote && (
+            {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
-                        disabled={isSwapDisabled}
-                        onClick={handleGetQuote}
+                        type="button"
+                        fullWidth
+                        onClick={getSwapQuote}
                         loading={isLoadingQuote}
-                        className="w-full"
+                        disabled={isSwapDisabled}
                     >
-                        {isLoadingQuote ? 'Getting Quote...' : 'Get Quote'}
+                        {isLoadingQuote ? 'Getting quote…' : 'Get Quote'}
                     </Button>
-                )}
-
-                {currentQuote && (
+                ) : (
                     <Button
-                        disabled={!currentQuote || isSwapping}
+                        type="button"
+                        fullWidth
                         onClick={handleExecuteSwap}
                         loading={isSwapping}
-                        className="w-full"
+                        disabled={isSwapping}
                     >
-                        {isSwapping ? 'Swapping...' : getSwapButtonText()}
+                        {isSwapping ? 'Swapping…' : getSwapButtonText()}
                     </Button>
                 )}
+                <SwapSettings
+                    slippageBps={slippageBps}
+                    setSlippageBps={setSlippageBps}
+                    providerId={providerId}
+                    setProviderId={setSwapProviderId}
+                />
             </div>
-        </Card>
+        </div>
     );
 };
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
index e92c04349..fbab87754 100644
--- 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
@@ -14,42 +14,23 @@ import { useSwap } from '@demo/wallet-core';
 import { SwapInterface } from '../swap-interface';
 import { USDT_ADDRESS } from '../../constants/swap';
 
-import { Layout } from '@/core/components/shared/layout';
+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 });
-        setToToken({ address: USDT_ADDRESS, decimals: 6 });
+        setFromToken({ address: 'ton', decimals: 9, symbol: 'TON' });
+        setToToken({ address: USDT_ADDRESS, decimals: 6, symbol: 'USDT' });
 
         return () => clearSwap();
     }, []);
 
     return (
-        <Layout title="Swap TON ↔ USDT" onBack={() => navigate('/wallet')}>
+        <NewLayout header={<ScreenHeader title="Swap" 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>
+        </NewLayout>
     );
 };
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
index c72c90e86..3ea98414d 100644
--- 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
@@ -6,100 +6,128 @@
  *
  */
 
-import type { FC } from 'react';
-import { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Settings2 } from 'lucide-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 { cn } from '@/core/lib/utils';
+
+const PRESET_SLIPPAGES = [50, 100, 300, 500];
 
 interface SwapSettingsProps {
     slippageBps: number;
     setSlippageBps: (slippage: number) => void;
-    showSettings: boolean;
-    setShowSettings: (show: boolean) => void;
+    providerId: string;
+    setProviderId: (providerId: string) => void;
 }
 
-export const SwapSettings: FC<SwapSettingsProps> = ({ slippageBps, setSlippageBps }) => {
+/** 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 presetSlippages = [50, 100, 300, 500];
+    const [tempProviderId, setTempProviderId] = useState(providerId);
 
     useEffect(() => {
-        setTempSlippageBps(slippageBps);
-    }, [slippageBps]);
+        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 handleCancel = () => {
-        setTempSlippageBps(slippageBps);
-        setOpen(false);
-    };
+    const selectedProviderName = providers.find((provider) => provider.id === tempProviderId)?.name;
 
     return (
         <>
             <button
-                className="w-8 h-8 p-0 flex items-center justify-center hover:bg-gray-100 rounded-md"
+                type="button"
                 onClick={() => setOpen(true)}
+                aria-label="Swap settings"
+                className="flex size-13 shrink-0 items-center justify-center rounded-2xl bg-gray-100 text-gray-600 transition-colors hover:bg-gray-200"
             >
-                <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>
+                <Settings2 className="h-5 w-5" />
             </button>
 
-            <Modal.Container isOpened={open} onOpenChange={(value) => !value && handleCancel()}>
-                <Modal.Header onClose={handleCancel}>
-                    <Modal.Title>Swap Settings</Modal.Title>
+            <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">
-                        <label className="block text-sm font-medium text-gray-700">Slippage Tolerance</label>
+                        <span className="block text-sm font-medium text-gray-700">Slippage tolerance</span>
                         <div className="grid grid-cols-4 gap-2">
-                            {presetSlippages.map((preset) => (
+                            {PRESET_SLIPPAGES.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}
+                                    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-gray-500 text-xs">
+                        <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>
-                    <div className="flex gap-2">
-                        <Button className="flex-1" onClick={handleCancel} variant="secondary">
-                            Cancel
-                        </Button>
-                        <Button className="flex-1" onClick={handleSave}>
-                            Save
-                        </Button>
-                    </div>
+                    <Button fullWidth onClick={handleSave}>
+                        Save
+                    </Button>
                 </Modal.Footer>
             </Modal.Container>
         </>
diff --git a/apps/demo-wallet/src/features/swap/components/token-input/token-input.tsx b/apps/demo-wallet/src/features/swap/components/token-input/token-input.tsx
deleted file mode 100644
index fb7fa8f37..000000000
--- a/apps/demo-wallet/src/features/swap/components/token-input/token-input.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 '../token-selector';
-
-import { Button } from '@/core/components/ui/button';
-import { cn } from '@/core/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/features/swap/components/token-selector/token-selector.tsx b/apps/demo-wallet/src/features/swap/components/token-selector/token-selector.tsx
deleted file mode 100644
index 6b9c7e64f..000000000
--- a/apps/demo-wallet/src/features/swap/components/token-selector/token-selector.tsx
+++ /dev/null
@@ -1,130 +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 { USDT_ADDRESS } from '../../constants/swap';
-
-import { cn } from '@/core/lib/utils';
-import { getJettonsImage, getJettonsSymbol } from '@/features/jettons';
-import { CircleLogo } from '@/core/components/ui/circle-logo';
-
-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/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
index 46a39c885..0044e3193 100644
--- a/apps/demo-wallet/src/features/swap/index.ts
+++ b/apps/demo-wallet/src/features/swap/index.ts
@@ -9,6 +9,7 @@
 export * from './components/swap-screen';
 export * from './components/swap-interface';
 export * from './components/swap-settings';
-export * from './components/token-input';
-export * from './components/token-selector';
+export * from './components/swap-field';
+export * from './components/swap-info';
 export * from './components/quote-timer';
+export * from './hooks/use-swap-providers';
diff --git a/demo/wallet-core/src/hooks/useWalletStore.ts b/demo/wallet-core/src/hooks/useWalletStore.ts
index eea48b511..70b947e52 100644
--- a/demo/wallet-core/src/hooks/useWalletStore.ts
+++ b/demo/wallet-core/src/hooks/useWalletStore.ts
@@ -252,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/store/slices/swapSlice.ts b/demo/wallet-core/src/store/slices/swapSlice.ts
index 64c7f86a5..7d7c3c2dd 100644
--- a/demo/wallet-core/src/store/slices/swapSlice.ts
+++ b/demo/wallet-core/src/store/slices/swapSlice.ts
@@ -27,6 +27,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
         error: null,
         slippageBps: 100,
         isReverseSwap: false,
+        providerId: 'omniston',
     },
 
     setFromToken: (token: SwapToken) => {
@@ -74,6 +75,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;
@@ -157,7 +168,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 +238,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) => {
@@ -353,6 +364,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/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/types/store.ts b/demo/wallet-core/src/types/store.ts
index 13fe27798..62b3e0041 100644
--- a/demo/wallet-core/src/types/store.ts
+++ b/demo/wallet-core/src/types/store.ts
@@ -278,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
@@ -349,6 +351,7 @@ 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>;

From 56d348fe7aac29d7c3a5271e71e9cbdf9af1e737 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 18:50:36 +0400
Subject: [PATCH 33/49] refactor(demo-wallet): replace TON with GRAM

---
 apps/demo-wallet/public/gram.svg                |   1 +
 apps/demo-wallet/src/core/utils/units.ts        |   2 +-
 .../src/features/assets/hooks/use-asset-rows.ts |  12 ++++++------
 .../animated-balance/animated-balance.tsx       |   2 +-
 .../components/balance-total/balance-total.tsx  |   4 ++--
 .../components/jetton-flow/jetton-flow.tsx      |   4 ++--
 .../features/jettons/hooks/use-jetton-info.ts   |   8 ++++----
 .../notifications/hooks/use-received-toasts.tsx |  10 +++++-----
 .../src/features/send/hooks/use-send-token.ts   |   4 ++--
 .../src/features/send/hooks/use-send-tokens.ts  |  16 ++++++++--------
 .../components/staking-info/staking-info.tsx    |   2 +-
 .../staking-interface/staking-interface.tsx     |   8 +++++---
 .../staking-screen/staking-screen.tsx           |   2 +-
 .../swap-interface/swap-interface.tsx           |   4 ++--
 .../swap/components/swap-screen/swap-screen.tsx |   2 +-
 .../transaction-request-details.tsx             |   2 +-
 .../components/trace-row/trace-row.tsx          |  10 +++++-----
 .../transaction-cards/ton-transfer-card.tsx     |   2 +-
 .../transaction-detail/transaction-detail.tsx   |   8 ++++----
 .../transactions/utils/map-transaction-row.ts   |  10 +++++-----
 .../welcome-screen/welcome-screen.tsx           |   2 +-
 .../wallet-preview/wallet-preview.tsx           |  12 ++++++------
 demo/wallet-core/src/store/slices/swapSlice.ts  |   4 ++--
 .../.storybook/public/tokens/gram.png           | Bin 0 -> 6185 bytes
 .../.storybook/public/tokens/ton.png            | Bin 1725 -> 0 bytes
 25 files changed, 67 insertions(+), 64 deletions(-)
 create mode 100644 apps/demo-wallet/public/gram.svg
 create mode 100644 packages/appkit-react/.storybook/public/tokens/gram.png
 delete mode 100644 packages/appkit-react/.storybook/public/tokens/ton.png

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/src/core/utils/units.ts b/apps/demo-wallet/src/core/utils/units.ts
index 4a589e88a..f057bb393 100644
--- a/apps/demo-wallet/src/core/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/features/assets/hooks/use-asset-rows.ts b/apps/demo-wallet/src/features/assets/hooks/use-asset-rows.ts
index 8e5d83f9e..1913ad7bf 100644
--- a/apps/demo-wallet/src/features/assets/hooks/use-asset-rows.ts
+++ b/apps/demo-wallet/src/features/assets/hooks/use-asset-rows.ts
@@ -14,7 +14,7 @@ import type { AssetRowData } from '../components/asset-row';
 import { getJettonsName, getJettonsSymbol } from '@/features/jettons';
 import { findRate, formatRate, toDecimal } from '@/core/utils';
 
-const TON_DECIMALS = 9;
+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[] => [
@@ -40,13 +40,13 @@ export const useAssetRows = (): AssetRows => {
     const tonRow = useMemo<AssetRowData | null>(() => {
         if (!assetsReady) return null;
         const rateEntry = rates['TON'];
-        const amount = toDecimal(balance, TON_DECIMALS);
+        const amount = toDecimal(balance, GRAM_DECIMALS);
         return {
             id: 'TON',
-            icon: '/ton.svg',
-            fallbackText: 'TN',
-            name: 'Toncoin',
-            symbol: 'TON',
+            icon: '/gram.svg',
+            fallbackText: 'GR',
+            name: 'Gram',
+            symbol: 'GRAM',
             amount,
             rateLabel: rateEntry ? formatRate(rateEntry.rate) : undefined,
             fiat: rateEntry ? amount * rateEntry.rate : undefined,
diff --git a/apps/demo-wallet/src/features/dashboard/components/animated-balance/animated-balance.tsx b/apps/demo-wallet/src/features/dashboard/components/animated-balance/animated-balance.tsx
index a95c13843..80fd84cf4 100644
--- a/apps/demo-wallet/src/features/dashboard/components/animated-balance/animated-balance.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/balance-total/balance-total.tsx b/apps/demo-wallet/src/features/dashboard/components/balance-total/balance-total.tsx
index c4306a795..7d1ed9622 100644
--- 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
@@ -22,7 +22,7 @@ const formatUsdParts = (value: number): { intPart: string; fracPart: string } =>
     return { intPart, fracPart };
 };
 
-const TON_DECIMALS = 9;
+const GRAM_DECIMALS = 9;
 
 export const BalanceTotal: React.FC = () => {
     const { address, balance } = useWallet();
@@ -38,7 +38,7 @@ export const BalanceTotal: React.FC = () => {
         let total = 0;
         const tonRate = rates['TON']?.rate;
         if (tonRate) {
-            total += toDecimal(balance, TON_DECIMALS) * tonRate;
+            total += toDecimal(balance, GRAM_DECIMALS) * tonRate;
         }
         for (const jetton of userJettons) {
             const rate = findRate(rates, jetton.address)?.rate;
diff --git a/apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx b/apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx
index 9f79efeec..a9824d921 100644
--- a/apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx
+++ b/apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx
@@ -10,7 +10,7 @@ import { memo } from 'react';
 import type { Address } from '@ton/core';
 import type { TransactionTraceMoneyFlowItem } from '@ton/walletkit';
 
-import { resolveTokenAddress, TON_INFO, useJettonInfo } from '../../hooks/use-jetton-info';
+import { resolveTokenAddress, GRAM_INFO, useJettonInfo } from '../../hooks/use-jetton-info';
 
 import { formatUnits } from '@/core/utils/units';
 
@@ -48,7 +48,7 @@ export const JettonImage = memo(function JettonImage({
 }) {
     const jettonInfo = useJettonInfo(resolveTokenAddress(jettonAddress));
     if (!jettonInfo?.images?.[0]) {
-        return <img src={TON_INFO.images?.[0]} alt={TON_INFO.name} className="w-8 h-8 rounded-full" />;
+        return <img src={GRAM_INFO.images?.[0]} alt={GRAM_INFO.name} className="w-8 h-8 rounded-full" />;
     }
     return <img src={jettonInfo.images[0]} alt={jettonInfo.name} className="w-8 h-8 rounded-full" />;
 });
diff --git a/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts b/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
index 4b053dcae..266230f31 100644
--- a/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
+++ b/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
@@ -18,11 +18,11 @@ export type TokenInfo = Partial<Omit<JettonInfo, 'decimals'>> & {
     decimals?: number;
 };
 
-export const TON_INFO: TokenInfo = {
-    name: 'TON',
-    symbol: 'TON',
+export const GRAM_INFO: TokenInfo = {
+    name: 'Gram',
+    symbol: 'GRAM',
     decimals: 9,
-    images: ['/ton.png'],
+    images: ['/gram.svg'],
 };
 
 export function useActiveWalletNetwork(): NetworkType {
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
index c1b204b74..22ffb7ce8 100644
--- a/apps/demo-wallet/src/features/notifications/hooks/use-received-toasts.tsx
+++ b/apps/demo-wallet/src/features/notifications/hooks/use-received-toasts.tsx
@@ -15,8 +15,8 @@ import type { RateEntry } from '@demo/wallet-core';
 import { getJettonsSymbol } from '@/features/jettons';
 import { formatLargeValue, toDecimal } from '@/core/utils';
 
-const TON_KEY = 'TON';
-const TON_DECIMALS = 9;
+const GRAM_KEY = 'GRAM';
+const GRAM_DECIMALS = 9;
 
 const safeBigInt = (value: string | undefined): bigint | null => {
     if (!value) return null;
@@ -68,15 +68,15 @@ export const useReceivedToasts = (): void => {
         const next = safeBigInt(balance);
         if (next === null) return;
 
-        const prev = balancesRef.current.get(TON_KEY);
-        balancesRef.current.set(TON_KEY, next);
+        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, TON_DECIMALS), 'TON', ratesRef.current[TON_KEY]?.rate);
+            toastReceived(toDecimal(next - prev, GRAM_DECIMALS), 'GRAM', ratesRef.current[GRAM_KEY]?.rate);
         }
     }, [balance]);
 
diff --git a/apps/demo-wallet/src/features/send/hooks/use-send-token.ts b/apps/demo-wallet/src/features/send/hooks/use-send-token.ts
index b393ef9f0..4223efa83 100644
--- a/apps/demo-wallet/src/features/send/hooks/use-send-token.ts
+++ b/apps/demo-wallet/src/features/send/hooks/use-send-token.ts
@@ -15,7 +15,7 @@ import type { UseGaslessJettonSendResult } from './use-gasless-jetton-send';
 
 import { parseUnits } from '@/core/utils/units';
 
-const TON_DECIMALS = 9;
+const GRAM_DECIMALS = 9;
 
 interface UseSendTokenParams {
     wallet: Wallet | null | undefined;
@@ -80,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;
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
index 5e8a29e56..710f4a9b1 100644
--- a/apps/demo-wallet/src/features/send/hooks/use-send-tokens.ts
+++ b/apps/demo-wallet/src/features/send/hooks/use-send-tokens.ts
@@ -14,7 +14,7 @@ import type { TokenOption } from '../types';
 import { getJettonsImage, getJettonsName, getJettonsSymbol } from '@/features/jettons';
 import { findRate, toDecimal } from '@/core/utils';
 
-const TON_DECIMALS = 9;
+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;
 
@@ -25,22 +25,22 @@ export const useSendTokens = (): TokenOption[] => {
     const { entries: rates } = useRates();
 
     return useMemo<TokenOption[]>(() => {
-        const tonAmount = toDecimal(balance, TON_DECIMALS);
+        const tonAmount = toDecimal(balance, GRAM_DECIMALS);
         const tonOption: TokenOption = {
             token: { type: 'TON' },
             id: 'TON',
-            icon: '/ton.svg',
-            fallbackText: 'TN',
-            name: 'Toncoin',
-            symbol: 'TON',
-            decimals: TON_DECIMALS,
+            icon: '/gram.svg',
+            fallbackText: 'GR',
+            name: 'Gram',
+            symbol: 'GRAM',
+            decimals: GRAM_DECIMALS,
             balance: tonAmount,
             maxSendable: Math.max(0, tonAmount - TON_GAS_RESERVE),
             rate: rates['TON']?.rate,
         };
 
         const jettonOptions = userJettons.map((jetton): TokenOption => {
-            const decimals = jetton.decimalsNumber ?? TON_DECIMALS;
+            const decimals = jetton.decimalsNumber ?? GRAM_DECIMALS;
             const amount = toDecimal(jetton.balance, decimals);
             const symbol = getJettonsSymbol(jetton) ?? '';
             return {
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
index ace270e01..3c5cd6359 100644
--- 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
@@ -45,7 +45,7 @@ export const StakingInfo: FC = () => {
                             {providerInfo?.instantUnstakeAvailable
                                 ? Number(providerInfo?.instantUnstakeAvailable).toFixed(4)
                                 : '0.00'}{' '}
-                            TON
+                            GRAM
                         </span>
                     </div>
                 </div>
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
index 84fb240eb..3b352d2a3 100644
--- 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
@@ -112,7 +112,9 @@ export const StakingInterface: FC = () => {
                             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>
+                            <span className="text-sm font-bold text-gray-500">
+                                {tab === 'stake' ? 'GRAM' : 'tsTON'}
+                            </span>
                         </div>
                     </div>
                     {validationError && amount !== '' && <p className="mt-2 text-sm text-red-500">{validationError}</p>}
@@ -141,7 +143,7 @@ export const StakingInterface: FC = () => {
                             ))}
                         </div>
                         <p className="text-[10px] text-gray-500 italic">
-                            {unstakeMode === UnstakeMode.INSTANT && 'Receive TON immediately'}
+                            {unstakeMode === UnstakeMode.INSTANT && 'Receive GRAM 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>
@@ -153,7 +155,7 @@ export const StakingInterface: FC = () => {
                         <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'}
+                                {currentQuote.amountOut} {tab === 'stake' ? 'tsTON' : 'GRAM'}
                             </span>
                         </div>
                     </div>
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
index d0a2d23aa..f58b1b4dc 100644
--- 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
@@ -56,7 +56,7 @@ export const Staking: FC = () => {
                     </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
+                            Staking involves locking your GRAM to earn rewards. Please note that unstaking may take some
                             time depending on the pool cycle.
                         </p>
                     </div>
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
index 8c776d03b..27ad6ef88 100644
--- 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
@@ -68,8 +68,8 @@ export const SwapInterface: FC<SwapInterfaceProps> = ({ className }) => {
     const getTokenView = (token: SwapToken): TokenView => {
         if (token.address === 'ton') {
             return {
-                symbol: token.symbol || 'TON',
-                icon: '/ton.svg',
+                symbol: token.symbol || 'GRAM',
+                icon: '/gram.svg',
                 balance: formatUnits(balance || '0', token.decimals),
             };
         }
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
index fbab87754..56362d244 100644
--- 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
@@ -22,7 +22,7 @@ export const Swap: FC = () => {
     const { setFromToken, setToToken, clearSwap } = useSwap();
 
     useEffect(() => {
-        setFromToken({ address: 'ton', decimals: 9, symbol: 'TON' });
+        setFromToken({ address: 'ton', decimals: 9, symbol: 'GRAM' });
         setToToken({ address: USDT_ADDRESS, decimals: 6, symbol: 'USDT' });
 
         return () => clearSwap();
diff --git a/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/transaction-request-details.tsx b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/transaction-request-details.tsx
index eee590a7d..6ca4fbb69 100644
--- a/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/transaction-request-details.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/transaction-request-details.tsx
@@ -101,7 +101,7 @@ function TonItemAction({ item, index }: { item: Extract<StructuredItem, { type:
         <div className="p-3 border border-gray-200 rounded-lg space-y-2">
             <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>
diff --git a/apps/demo-wallet/src/features/transactions/components/trace-row/trace-row.tsx b/apps/demo-wallet/src/features/transactions/components/trace-row/trace-row.tsx
index 4e3a996ad..b1a7d17ff 100644
--- a/apps/demo-wallet/src/features/transactions/components/trace-row/trace-row.tsx
+++ b/apps/demo-wallet/src/features/transactions/components/trace-row/trace-row.tsx
@@ -106,7 +106,7 @@ export const TraceRow: React.FC<TraceRowProps> = memo(
                             </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 className="text-xs text-gray-500">Fee: {formatTonAmount(tx.total_fees || '0')} GRAM</div>
                     </div>
 
                     {/* Incoming message */}
@@ -121,7 +121,7 @@ export const TraceRow: React.FC<TraceRowProps> = memo(
                                         d="M17 13l-5 5m0 0l-5-5m5 5V6"
                                     />
                                 </svg>
-                                <span>In: +{formatTonAmount(tx.in_msg!.value!)} TON</span>
+                                <span>In: +{formatTonAmount(tx.in_msg!.value!)} GRAM</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>
@@ -141,7 +141,7 @@ export const TraceRow: React.FC<TraceRowProps> = memo(
                                             d="M7 11l5-5m0 0l5 5m-5-5v12"
                                         />
                                     </svg>
-                                    <span>Out: -{formatTonAmount(msg.value || '0')} TON</span>
+                                    <span>Out: -{formatTonAmount(msg.value || '0')} GRAM</span>
                                     <span className="text-gray-500">to {formatAddress(msg.destination)}</span>
                                     <span className="text-gray-400">({formatMessageType(msg)})</span>
                                 </div>
@@ -314,7 +314,7 @@ export const TraceRow: React.FC<TraceRowProps> = memo(
         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 amountStr = amount !== '0' ? `${formatTonAmount(amount)} GRAM` : 'Contract';
             const sign = type === 'send' ? '-' : type === 'receive' ? '+' : '';
             const amountColor =
                 type === 'send' ? 'text-red-600' : type === 'receive' ? 'text-green-600' : 'text-blue-600';
@@ -535,7 +535,7 @@ export const TraceRow: React.FC<TraceRowProps> = memo(
                                 }`}
                             >
                                 {traceInfo.type === 'send' ? '-' : traceInfo.type === 'receive' ? '+' : ''}
-                                {traceInfo.amount !== '0' ? `${formatTonAmount(traceInfo.amount)} TON` : 'Contract'}
+                                {traceInfo.amount !== '0' ? `${formatTonAmount(traceInfo.amount)} GRAM` : 'Contract'}
                             </p>
                             <p
                                 className={`text-xs ${traceInfo.status === 'confirmed' ? 'text-green-500' : 'text-red-500'}`}
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-cards/ton-transfer-card.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-cards/ton-transfer-card.tsx
index e3c0f1f09..97239c8f7 100644
--- a/apps/demo-wallet/src/features/transactions/components/transaction-cards/ton-transfer-card.tsx
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-cards/ton-transfer-card.tsx
@@ -76,7 +76,7 @@ export const TonTransferCard: React.FC<TonTransferCardProps> = memo(
                 <div className="text-right">
                     <p className={`text-sm font-medium ${isOutgoing ? 'text-red-600' : 'text-green-600'}`}>
                         {isOutgoing ? '-' : '+'}
-                        {amount} TON
+                        {amount} GRAM
                     </p>
                     <p className="text-xs text-gray-400">{formatTimestamp(timestamp)}</p>
                 </div>
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-detail/transaction-detail.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-detail/transaction-detail.tsx
index ba4066fa9..8d1d792ab 100644
--- a/apps/demo-wallet/src/features/transactions/components/transaction-detail/transaction-detail.tsx
+++ b/apps/demo-wallet/src/features/transactions/components/transaction-detail/transaction-detail.tsx
@@ -259,7 +259,7 @@ export const TransactionDetail: React.FC = () => {
                                     }`}
                                 >
                                     {transaction.type === 'send' ? '-' : '+'}
-                                    {formatTonAmount(transaction.amount)} TON
+                                    {formatTonAmount(transaction.amount)} GRAM
                                 </p>
                                 <p
                                     className={`text-sm font-medium ${
@@ -336,7 +336,7 @@ export const TransactionDetail: React.FC = () => {
                         {/* 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>
+                            <span className="text-sm text-gray-900">{formatTonAmount(transaction.totalFees)} GRAM</span>
                         </div>
 
                         {/* Logical Time */}
@@ -398,7 +398,7 @@ export const TransactionDetail: React.FC = () => {
                                         <div className="flex justify-between">
                                             <span className="text-sm text-gray-500">Value:</span>
                                             <span className="text-sm">
-                                                {formatTonAmount(transaction.inMessage.value || '0')} TON
+                                                {formatTonAmount(transaction.inMessage.value || '0')} GRAM
                                             </span>
                                         </div>
                                     </div>
@@ -427,7 +427,7 @@ export const TransactionDetail: React.FC = () => {
                                                 <div className="flex justify-between">
                                                     <span className="text-sm text-gray-500">Value:</span>
                                                     <span className="text-sm">
-                                                        {formatTonAmount(msg.value || '0')} TON
+                                                        {formatTonAmount(msg.value || '0')} GRAM
                                                     </span>
                                                 </div>
                                             </div>
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
index 7b8c4e36b..adfccc36e 100644
--- a/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts
+++ b/apps/demo-wallet/src/features/transactions/utils/map-transaction-row.ts
@@ -23,11 +23,11 @@ export interface TransactionRowModel {
     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 TON" / "Received 1 USDT". */
+    /** 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 TON" / "-1 USDT". */
+    /** Signed crypto amount, e.g. "+5 GRAM" / "-1 USDT". */
     amount: string;
     /** Outgoing transfers are red, incoming are green. */
     isOutgoing: boolean;
@@ -45,7 +45,7 @@ interface PendingLike {
     preview?: { type: 'send' | 'receive' | 'contract'; amount: string };
 }
 
-const TON_DECIMALS = 9;
+const GRAM_DECIMALS = 9;
 /** Cap on fractional digits shown for amounts (matches the appkit widget formatter). */
 const AMOUNT_DECIMALS = 4;
 
@@ -86,7 +86,7 @@ const describeAction = (action: Action, isOutgoing: boolean): { title: string; v
     const label = isOutgoing ? 'Sent' : 'Received';
 
     if (action.type === 'TonTransfer' && 'TonTransfer' in action) {
-        const value = `${formatAmount(action.TonTransfer.amount, TON_DECIMALS)} TON`;
+        const value = `${formatAmount(action.TonTransfer.amount, GRAM_DECIMALS)} GRAM`;
         return { title: `${label} ${value}`, value };
     }
     if (action.type === 'JettonTransfer' && 'JettonTransfer' in action) {
@@ -166,7 +166,7 @@ export const mapPendingToRow = (
     }
 
     const isOutgoing = pending.preview?.type === 'send';
-    const value = pending.preview ? `${formatAmount(pending.preview.amount, TON_DECIMALS)} TON` : '';
+    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/welcome-screen/welcome-screen.tsx b/apps/demo-wallet/src/features/wallet-setup/components/welcome-screen/welcome-screen.tsx
index 0756044df..ed4ee7efb 100644
--- 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
@@ -62,7 +62,7 @@ export const WelcomeScreen: React.FC = () => {
                 <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 TON.
+                    Create a new wallet or add an existing one to start sending and receiving GRAM.
                 </p>
             </div>
 
diff --git a/apps/demo-wallet/src/features/wallets/components/wallet-preview/wallet-preview.tsx b/apps/demo-wallet/src/features/wallets/components/wallet-preview/wallet-preview.tsx
index 0bcd337b1..d130ef23b 100644
--- a/apps/demo-wallet/src/features/wallets/components/wallet-preview/wallet-preview.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/demo/wallet-core/src/store/slices/swapSlice.ts b/demo/wallet-core/src/store/slices/swapSlice.ts
index 7d7c3c2dd..ccd2dc6f2 100644
--- a/demo/wallet-core/src/store/slices/swapSlice.ts
+++ b/demo/wallet-core/src/store/slices/swapSlice.ts
@@ -17,7 +17,7 @@ const log = createComponentLogger('SwapSlice');
 
 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: '',
@@ -351,7 +351,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
 
     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,
diff --git a/packages/appkit-react/.storybook/public/tokens/gram.png b/packages/appkit-react/.storybook/public/tokens/gram.png
new file mode 100644
index 0000000000000000000000000000000000000000..62f59d9fb2ac86af23be42b1b7893fe470c9ee92
GIT binary patch
literal 6185
zcmX9?cRbbK|F=ixy|VYU-6f;YrHf1U&Pw5?P+6tAl$FuF_Pq8cLPS<(R`}S2gsjUo
zvqvuVyS~52<GkOG*Lj`idc7a-zYfmS_%_QGzAF?I6fAnWD02!5%DBsiftuW@cl!31
zf`ZD#)X-A<wwED1g$Tv3K=3Q@oO$voG=&IGAwux0&=dl>4^3UUJSD$VRv^hM;N)c}
zevC|k$Ie6XtB{mc*@Oiso^T0HS%s#p!texG!U6=p1i=&Fm*8bc;u17wnv8*@tU!~N
z$wvQg2Tdkxu3o~D*8fLY{h!VXEM?_V1ivbqLZ)2mkbTKuFgZZVGAwl!l1cz4lfx{N
z-J$QsE>rz~&XhGUewmz&JOvCtFPpwDo3sv1T7-}@TqaqSi6={u>s1(;n7jffizky8
z0g`qZ42&lu3FJkNL3aNik^sGQx%34mErQA6la?S!1bEttR0>g&Jb2=QM9efSo*;9{
zB2&mAm!OF=(lHBic}M^L{UZ;UI&vnLdkD+ef@kf><sRsNJcgzc<#G<7scW#*wf#ST
z)ryZ{X&dm&-|)<BSjHwSZCx&BKV{?$p0g*Hv$t|^(NDa9Wp1w={B{0v0!t-U&5+<(
zyYQ^v@Qkg9|NaDY{ply3!?Snc*?U#9Bv|^UbHmAx?F;{|Kd`Ldu+(*U&c1i+Y2hSE
zj*Q7YfamVR(l=lk8`hss3MbBBX+*iK9azRTJY(Ct?G%=_7Wv<w*2VMIMUr*(2`p>J
z`txz&1PPw82~AyxrEj$^o&VVWE0??P)k?NL4e0&@O<OOTB(*M)s%J<R!n5DVU;nv}
zxv>R>$oxDzr6Y33v8~N3Cumm#fMnm<(fs<g(jiVX?~_Kb8E7HbJ7;8fcX&ZgGiPKt
z_gbK%SzK;VP;OvcP*p6z)XU2=*pcd*oLoYC`|!2g*w_&>CnwY3gps_woW)Oz!&M2v
zd3mNHqVk|?*D6Qi<>jR_SaT>SIJxvt8kU%!TbVPS<Bxd02`(Yiix>wj8}XX8#z}g4
z^tBr$$owYcLsu=Tu5Y0<9GXFjMl;<m{oZ4;Zn|T32E*HYtSgG6zr84_-`{&0I4dA^
zXy7&85Oc9|Ks<Rh)iF1I;`@tO%Q1x8&F<|&xi;4-vHvIrc@+GWyUO5G7p}?iN^A~6
z|09w}!kKQ4`Ui}PEaoAftmzj<Q$xN@sR2}#c({y!LL1C;g2&!Lv^7UGCfgiPr;-C3
zny2NIZ#tD~Z0rZzA1Z*W%cbF#BiA?BG9t|56w<b=Jj`Zs?L&?<j~?#qsx1pTWwBRQ
z^M2XY)TE2Q&Z+V_QC@IajUDouW7%J(4!!?A)DR>SHZTcpk(QI8TVtW?n6L;ga%I<!
zSt;#Q-+gg|{`)s>-hYMqQCt5>R;L=N+*Jbq8un9mlsf$@763?$<P>-2Fwc8z>0#eY
zwOU)o7pZ#fDWC{#-chfSs9)T;Qi<K+WCVa<o=~(A?CmSJb2+O#9Yc*!vueFeDgTzt
z{>2bMn`jkUrLaMsNrGl%29rL)%BEOnT#507r71vpLz&ZihwrHhu{A@~I41M0bY2{1
zKZ=C-y<d70okqwEl_qP);v%Wkf$aTHWw5GA+t=3Dh_lFlVcP;J?8#j@&HNmmOg*Zk
z*fxV0s(hY5$v4HPca#JPgsez^y|YT31bR4*8mj=)E7al^9EvZ@863RQzo@J?g!xe#
zEcN1<vN15c6m)9|?$UF$L)jz&AlyS!FuMOpDMUaY(Qn%LihehL(>_UD%&a38$EU}u
zBJc&$ms;QtUh1~}jae1gx$8ckJoos@H4Vh(mj7mX8^P)dnoebXR&+0^Q=o~HV?gDF
z?$Fs@Y5!I4+pLTZ`mx<oSdHICsvf!^Gl5lRph-%&^LLqLZ`&I}QLKHb3S;MdpO^DY
zfUyt8GW+&MD(`M<xcs;Sgj<)h^+{wuZraBWZ2_NAnn(G~G;UPJuNu0%zFC`0@ae1Y
zN^k0}(^-p(4H~Mje{eTT=<)J0<1^k9X_f@6u&4F!rL;$PM?;co*{XWSWeA!}Dgxp@
z-M-9Ul6W3Q>`u+`2%r7@)nfr9-l#pUin1T5p41IT_>^1g%+QmfyEZA+knxX=T{k_9
zH7joa=N6G!tPu;LvaJ63u<S#G4^DfP-L&fIi(sK#hBb`>&^?dJkXp~^dxPW4o-~%C
zDOV}gW-G`iDIh6itY1W?)C|2w?7cX>8>m?B<Fd0RtEP9ELL;}L4gr<)hh7DsbEA>Y
z5|9?c<<`_<>yz{2ncHjr;l&Ik26mRbqWQOh*|&L-`Vq1kLsotZzT5Y6HiSOCXpi8U
zhf}IC19Q4wbbSkZ#Y;(NJBfE7S$!0CT2!)_rmmy&W2Ss9@@ToVR+#HP2LY8_R!4&s
z=7Lz1;f>mdo&>9h1gY&0ymxG4=04GRdjWL0<{~=6&vcwSK}p5UF|K>P3(L*tR}k$#
z@*fYQMvy6|SOL3;RaY<Nrm@Xsq5EBSoR9sE2$IiJ>^4+2?W^8sDG#Haiw%QoT+N-P
z9g3&TliRJ7Ow3Hz@7ozN@msM{TBTX>^KjjJKfxHT&33|9@lO56Cy2z{T0uO!rRL`5
zq75~UHF*RrpRa$z1+U;}^K!O^ibbL^ih}72yfiA^$Va*HuF22y=@Uiq#(NK)nSohC
z@{dSo6ylBkUjjzEf{^($q2)&}Y<$;6-5(uobKkj2^W&?(f*2LJa!_o{DW4<ZzAp!S
z3Xk7Ekfj2c9~}H!armb|+CO=eS;IQ2CNln{(n51ww<RD`<bwBDBc0w^6t0+6MBB0b
zDeNcZpNCqxZ~ye5X7W<TC~Z$|zcy$C8Dkk9QYZ8>Sym;9+yLD&Qx+NaPH1|hyNeab
z_do`4N;~6!VD05>#`IWveeUNb9Jv9-(9IQrC|BhB8#MaUB6+%#YuaVpYz*XormQz=
z6u>K@DB?*IVJqb`+Bi7Tt+h6A6Kpyt92(Q=9!@8IJ2#6d=^%9g`=)<l(LSj+qywd&
zn`!yBx8AMxfKJ~DIL)e_(x9Rv$@0dL&~O%LH7g`icm@6bZ%8Q|yVcCt4rq4wQ0ck}
z=dr@EINxB?Hakz42^;S0&f;b+8-U;jPb^yR7lt@Fjf3`RgL)c%zPU5&+y1G}))QU6
ztiZ*?^(Y!u&bA}8?r3x7r`!5*S;~Ue8Sbk=Ygi^fIpg2-W;|eQ`vzp}z0wy0P8GMd
z2NDrD*7tYXA8*SpiJ5BRX?pg;gIu=lwbfy&Ts-&~Vz1TT@;_&Nf=3QkX^Q2Rt?_rz
z0Y8srpB27;F!;&UCQvjK=qc^*hgFMgegIW8V2ggyt{BVkn(J4U6>oFeKmjn8PXW50
z{i4&OC*6I&@4EH}w?&T<&oIa@L!i~UMzh2`3)`|)@Avo{o_!8o;d67lyD_gIVG^BV
zZ9|`p=V)nPTP3}Y^*BmNgb4Y9_c76}OjnM}?^mRIexJYiwh(_p*<n~LtwvIxUHr00
ze`+ggaU+q|vb`-S+uyo|d+|ugKcYo!2T@7@6uCI)y`IvjKV0QO?5iX16qej1Ema4Y
z)*n{LV+ckzUpCaFs!x|pj5t#jAojwaT+Dor?*;r@No3RJ#9iy`kf8Z&Onj#!ZWboR
zDau5}8535<5au$k$O;e;-D=@Ex%JxRfd39>_})0K2uazl({)uZ4;XcG`iWx^PMCjL
zpBrZXMInW2b7D0{m-l9(vE)NKRde9>w?;QdN=VdvU}|EYQ6R5p_{;Fuud@&Qa%e@x
z#T9Q2k+O-t!(WIyTixHDq-#e?n!jQCpvU5{!|=<e|9ZTh9kwXMJC)tX<aZ6+IF#Wp
ztsOS)ZL*SRmy~%Gxgl26gZ%}~BFqULE3viHtn_`|u1jI89=HmTwW@o>C@H;3{e0FS
z%*d19k2~XrgbC@Few%AJwC0r@3|4}zW6Ho~{&(mDPGkIhH<U9TVh6U-dQ~NT_ea9{
z)lR{_@z(nFjYA&;TJZF8P7xOgHaao4ndvEK{z*<$s~l_fR@1ttIHSproqIhxKt_5u
zYxcsgGa@>U8_GpmuX!DYIXb+kD-%$zdPY+5WmhwrsBj!Tb2>3-ecm$f?;@?B$2ZtQ
zy6a+5>{>OLJ~QV$r<9nc_>*)#Oe(o+jq{&=RMl5)_9>xz+m&Y9M*{6oXDfUhj2M;^
zUwfMzwb!aK>&7519fh(tvA&`_!QYQBEnoWBxI+`B_~flPcrEUgJAm&&$+S`Px7I@2
zoZ?qZfvhSDdUffepG$wbVc>QqWBxmgFIz+(Nk(U7LNsP8NV0abN{GeG*CDRg8U_lh
zQkhuvt>+B3`dd#het<=i2$NO4EmHH|NnEbi)iwLaTKk#vR&1q?FY+}HV=HM^$`p6H
z!$TixG@5zv-O8$5d5XF}5SS}O|IaA(9sT^&HPG;p=WE!zAEO!Cl)N$~ZYu&`O%|B6
z4%XbGNguphZ!Z+5hKJUz%zbb8+LC;NBCz-9QXBZ*od97Fe0x&5&+0aKj&@h;o_ySH
zeq}Qlp5q3yQX~30k$$#sOd%Y6J=Bd6NAg1_LkXFos`S2?TRGikGl!?$0o5FI4c+d%
zk??ziE=7B{J1aG48O*FkJU>*_E}!csSGrF=X6rT!3Jthb>>XHs&)VLAMu?Y^VH*8c
zukx>H%TEt1O1UtSvsLxM!gfe)&mKe3hEqaMw~Dq1R(RB5J>o>W08jAoHm1OyJ%@hG
z$~WNLSY;6>9=7mxB(B9KAWWu-#bMbLXfzH<2>RuJ0XC;M|JZ*EHrwmXVRnc1?Gow@
zuB*DTg+ko=BEU#<f+|v02*tzTmwRF8qSo`oZVWk+PZd|&p>uuLlq%nZa9=~~5k{AC
zRI2)pA)bN_DsqNO*oZr|h@(ehjkf@QJ|H=$*!CbyP<^}jAJlA=BJ5_LL4s@unjj=<
zFygy}uNT`1wN3*a&iTn?on-8m;hbcAIj0+LpMrr{%?#|bi*J->t1zYP0>z8-efO+J
zD5ogRkY1?C>xtj}Y?qHvp1IlM^yE3J+FcF5((d%6LM&A*A=*T>5z!Fig=M<Qg{x7h
z!hzUeTlOpZ8A_n(bWWy&1^pSC6m=uu^iYkDp3s{Y-r<!BY2xPnsqEK;r2VlQa>A^i
zbZNk2maFaD1G?Pq!1jomP~SMH>Z=&AB^}P|v`%&)L^^U<fmh-!=eq8}!hxa9i!zkm
zn>$8$dYw6^i9w+43~t#DG(hcu`K59~J2WB$C>*4ASer%7W0O$l`wOE5hfI$o06B<H
zqRpdLz`YLYkMFN{6_I`=U~dUAd%emjYY<FEA@&{b|FBR6$lx%9cE!Tt!?H*TfG6Vg
zko2%;c}@ZVN3h4f{h}Y3aR<298)C#YQ=Wj85<*211%^M&$LNEyF}spKy07;31*HEE
zAs%@<Rv+{iBWL=`=jhU@c~r;Rf!z9q85v*SaL|ze1S0Y?5XIT*Cd~rLsPjFn)!Mq6
z(eZ82r7x!W=0w_Gv)lwMy^!+`Tt#uFK3oET!F&q)?0?m!)3YFf0fG3@k;poDNIm~g
z4S+dy6)hIX$MpiLhC{eOBPfylcCFm75folb26XJ3n_Lr?%bSU12aph_8v{=gJ&@yF
zwyLPD1Cd_U4Z0Wc1yYxrg|B_LJxsY%ack^k8H*N|xj@BvQYQ<PEaBCfw-nd)jhkFL
z7reUO;u;ZMNkx_$k<YmQPLj>yvm*8fvHkGaB4t8qR_VJ4I*0!H1!u~H+haT(8CGIL
z6y%fJ<bO=IX$Ui#Dz#+?EQp#`mDp;MJGtnGN}cKk;aGp6GRyL)U)}t6l2mN8bA{-K
zirU!^vltMe_Idd?Lb1L=%${J6)K%p-XgmYLS$5L<hT)FaDJlr-E;Mk38`hAg8o~(>
zL8sGy?l=+D9ANnu#mo`>&e-7AQrx3ARDe!|oTxw?KU&*E#|rmVtGTE^=4YcCXxH@d
zdWztf`zCu;5B1yvdeKy{^J9iM725^gxC1i<0$`-KeTnlgb!R?mb#bxPRNporf~lDJ
zSFvBU9uGIkEgpaGfdDK}3wdqC!QXE@)5NG^k!XnGpbHIzJ^0-$)#9Y3+$uXL9P<fj
z+~mKmHjqaN+Ksy_!dai99I$`%f`d$LK*luqZvYLtC;%9mI^>8b9!mx>xCiH6`Cl)z
z0ciu8=MkZb72#%R4CQ7_W<Ye@7kOI46`+Wu5z>IM`-G#wx@1aVu;bJXaU9L?1I|SC
zx9@F1i@@M_KXZ4X#Ba7BgLG8KYE_qjvv|u-(v$uvE%KPtw9jUvE5Pr(-#tT7t$K&h
z%I6y|uy%r|*e0Mm86E<I1LIR#<lQuMr;y)(IDK{n$e7pz%=Th78lMUgrD9XKd*A0}
zaH|j<0AsVU<{G1GkbzZaQ$2I>cr$3Zws}S#uXM%mws3!CCA}t%(5kBHS$)gR$8Lm(
zC5nJm`LwF2_)r=>N9!6Kwt7LmJOVBJQu|8(ThFi}c#%m{lIFTs>HyF3%Y->(oybJ}
zdp6(R2eMlR?f8It)}gPq{3EG`16f~)C!Bw0588;5q6Rfly4l!sU(8XSp#OmXTz%2e
z`aj<{)kP~}`6G^+^oliwhdn*R%a~V>ihUdbk>U8Hn16YQ0JXYt)lXO*Edz6xwzej9
z!M3bv;FFQB`r9L*w#<tcPYpimQ9nT&Ec*3I-edgC9;+$wW*q(CIhx<5M(D5G=c;>X
zM<(=V!AS=GL<3KoJ?ZkWR}R<zMq48@Yg8)Y`>qt0Xq2-y=tzR&xV@sEpc1I2!y7nh
zJjEWkJwUD@(H{Y@<JbEo$fdfs!P$eqS0b_v(e?e^>i6>kX)Vy+Rj~(!HgxjQ=v(#E
z*dgyVM(}SmG5VsF-%mS4Mn1mM?xe}liS_*k#UGZ3DB}kuBgHQ#_T66=ga3O_`ciJU
zeo*JsQ)V`J9sJZW*X?r?yxHUhh9Z3drPHtFN|A}x_Z?B~0Fyr2|F`VaoVlEQQ9;{s
zN+UF4KtOp6Q|EjQkynnNIl$0;#q}oBOXWWnN@AF=4R1*5fdCi%on8N7_ZLvgY{sbf
z2v;pay@TI;k-t|sj)D2`lmk4oClhNsMiW?SkTZ3KC5U4Y;W2hy&h(bGpJ4feg%5P*
z(px0~(^sb21qGd}BJ~6N4}t3>W^;)#i)!6waG?W1SIoK{sntFoTf@&Ioi4&_RPtwX
z4Ro)Pke}QM@_rho?Bs8w+Uv@FXGXV~ZsJQ+lnV3rWZt_Tg4Es6IK1RlzPm#b6YpxS
z%qZ3+HQZaQV|{irwV+n*qP}d2DK1;`s<L=?EYFYcB8;rpw&#9Ny4g##>tl4!6D@^f
zBN%acch=(yk1&w+IB^}jjKXcUT3<A)-j&L`#vGNld~t<>z$xQs;|FUP@x8e3#^!fc
z8<O4?%A@>N@#D<>_Nj4>X<CMTv(NZ3+otcF$6I4T>*9@w^O6B!jeTCw`kk?urIM!_
zvd%BB^~Ga$_Uyc^-_?wiUe(iV5;)n9qqCH_ss~*DWT=~=tr0H{jY(j1a~20D1kOKj
zeGbsI6I&Nw$&XxO5|N21B>n_$l6Za=Dw_-Ib*jZTtL{#KN*t>~fhHBk++ujf($ngQ
zXF?pse<;ObjZAS?9~}!PQ!09^FsbwtZ`{kB3Pn5DHokB0$P8}g78Y!%J{-$-;~TVy
zDsQ{4anE;|b4Z>;U(DQYLc`2*m&!%H$<^HK`8fk5u3$9m=y&H_Q)c9E7q{l?3SU8K
z$(}MCTN7tP-#gc)jN`{J%_Zk0d_#q2g1{WjG#wuGXMAG47vk)Cm8;)=9c)LgIiqAr
zhz}k|Yy4n=`#zSlnDk$6Y>!)1LALc)ffO%`4L#aIZyYs#4CqM{kN7R~%kt;&UM^pj
zab8^GygQ4ky9+_2`ERav@mpiMch~SyDh~IxG>tDjK2Go*-pr~a`X&W&uldl0L|T2^
z%rR%z?fP{NNcl$N^Srh>I57|M%-8W+uYj5Z%(Hwsb#m$$A6@?jhEBO*%~d_Q)_%3y
z{AK&;AC^z+WAo|5(P1l3r>n1rvL^*G*jQa}YIEdS<rf65-J;SItRWmfTP0u6Qs`+L
Kqbf8V-~JyrmDKeB

literal 0
HcmV?d00001

diff --git a/packages/appkit-react/.storybook/public/tokens/ton.png b/packages/appkit-react/.storybook/public/tokens/ton.png
deleted file mode 100644
index 109900c3c8213a2a8f263fe419042beaea3d2f25..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1725
zcmV;u215CXP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF000JrNkl<Zc-rk+
z%WqU=6hHSdZ)l4UsD_77#8?3nsAv>+x^O2N1^xsh#up%pwSpFjgqW~E7bLneaiKN3
zVQVxIDh(-85@MA{7fK2CIi1&?`+0uf{qD?kI#Z^dXYHM2V0!QQ&N<)jobSBuHR+3C
zL5ujK(<1+P0C)g+0C)g+0C)g+0C)g+0C)g+0C)f_%8yw|W*WX)brlxeyo*Ky0DCsr
zm#j1^m#(me`GRzfOoJ$GS4K?P0Knp~iWL)NhBR8=Vp71+<h6?Ko#iAL-0S0MDT@MH
zMt0o*kP6r&O>yXn2))uCq%}(nGOBb8;9NtKX*x3yr<0eaNU$7DFAoH5z9TV>lnXKd
zJ<m1K^A84`GfJf?r00QTi_!phm-Spv&<p3rWf;%sQp+rWGfxRYhqs62=HZ^OkUFOK
z{AR$)0pwm^O?d%i?Oq?CceaJ44u)RiBLGDZ@cdz&UVSv=Fk%hi`lCrfw<gm3cVVl*
zJ3#wTbM~lUQ-6%{*=9E=ltrXG_O!K24Qlac5rpi|F2^XDcGiiS0RUl^piRq7S{>1)
z`(iV<V>a#hZj^3~TQhw;<LgArI9LwuTTb@{9Ga1YO;7fW&{$j)_emDAuGysC-7T~-
z<j7pJM5j$H23;9Wk>;CU;4P~VGV}I0nR2XOZ1Y;)|Fh8)3K}<=H)PDFLrnmXNVCcR
zVukL;ZMokRTehvqpx3s9<hk_eg*~U(HZ}E6p(Ef^@#b~ry@6#w7Gy#;bf7ZQ?)(4%
z@?4CJPuTSJU_yc7Xz&3C#pb0trL38o$to#|GS1%!cz{<6^8{~)%prno=uj-)RP_kR
zw8iJ{Xx|i#vUU7yg(O>MMNp^r5uN!DvjX*i43x~Pb9;nihAw6J+58B$kPRK|dNe}-
zz~m5mchsV;i_vM0{pQv%wXO6~iqETF1_)Sd@kTeU^3fYxLepeGCS*egThyr=L_JPy
z@zcM@=*qvAJgdmjuv+(y2osbiKv!AgIP=m~DGV6{BNm<J^at5#yN>O!aHB9=`r!F!
zrXGMr_Ou0P=UTtC;CxDBLs@^<IzPR%A>eqNa;F2oMx{(sE59Ksdmdn+2H<>t?#~4M
za5E_tPbr@~!TkZvQ%Rw;lRU`b3En@l49J2^OEkzp#8vjt`APX3-5@Hrr(1or=iwmP
zT;P~<kOW$+*~@F6;`0w)vcu$i2U!N`mFu`G0ssu|;}Z4SKPfuZKc&iBM@7T}BdE#J
zxs+iEXh3W7n(oIV(|Dcgk4YJjWs3$IiNQ+5Y3dlKreQ9LVKLO`D30FRil(Ksv?ytq
z7MTP^Pm*^EUf_AGFDhkNHc`XP1l{6jV$!A~y(%p#lON%_U<D6Kl2%U1SELRG4QOR8
zAulN&zeOc)$PkS>6oq9p4o+vU#_8gnY+7t)m+e9oms0(5fh`CZ7pCdz2vZZUanoKO
z^E%5z5b&;~^{X-!mYIsf^8o}a%BHUUn?v--Dy~|RD2}wk6(4WDz15`sIW0CmZ-bXr
zUQtyu0MOf;Y^k4aB<UNZD^@z5b}Wu^7SXHFM&xl}y3TD*;ESt*3Ov9IJkw%<JQt8&
z%4hZPg{bV@f~s5Fw=qEN_xorpuQ)Pz^W$9PZ+^f}dzl8bScA3T0bVxI!g(+v(;_!1
zH}0h9lS@uoOxSL>7;z>)1>#4i3Vbf@30?~x;AM*i_GHLSi^q8rLma(fQMW{XX0@M2
zl3AOM^6zK)+RJTD$qQPn=>~WePJ1;2z)g#ZDVyHyom6GBW5%N$5zhBoPVU#}!;Y{5
z&Y{5?tgUp~tJqk4E?L3m=>GGI%V=k-Q`QzMi`{#_aJ9GV+Y!>M==wE#IO?W-*}<uC
zdZF<ZuDRoFNh@Zb9WEFE+_ZRMC`n&ki)Uv0h3IhaOQr#BwbEW)9*;{m<{IcdE|H^_
zm@&f>ssqG5Sw@#R<!ML&kjnn%snN%MQ`sz$n=$zF5#IxiuLfto<}XNCYJB!7x66b4
z6bLmwTpVBg#<i1ZrGwQ?dvycAb#ptB9iM4AeIc&lo~c(i?bY=a8CX{5;P(AsoIbxA
z%RKZvGZ2&4^eS|Fb*}@8K2~Sne~d@x_<fn5?V&j+=P@@m!aG8x9tG+8Jo@RsopRhz
zJ=hcr{UxcnfPf8S<E6eF@xKCKE^mc+?+JPUcmQ|+cmQ|+cmQ|+cmQ|+ROj;_<$~E!
TL)vg*00000NkvXXu0mjfVh%i>


From b053dc6774c219aead56594dcb465b27d324780d Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 18:57:15 +0400
Subject: [PATCH 34/49] refactor(demo-wallet): replace action buttons on the
 dashboard

---
 .../src/core/components/ui/icons/icons.tsx    | 10 +++++
 .../dashboard-actions/dashboard-actions.tsx   | 44 ++++++++-----------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/apps/demo-wallet/src/core/components/ui/icons/icons.tsx b/apps/demo-wallet/src/core/components/ui/icons/icons.tsx
index bc30830fe..172002f38 100644
--- a/apps/demo-wallet/src/core/components/ui/icons/icons.tsx
+++ b/apps/demo-wallet/src/core/components/ui/icons/icons.tsx
@@ -78,3 +78,13 @@ export const ReceiveIcon: React.FC<IconProps> = (props) => (
         <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/features/dashboard/components/dashboard-actions/dashboard-actions.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-actions/dashboard-actions.tsx
index 8ecf67ebd..52da85812 100644
--- 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
@@ -6,39 +6,33 @@
  *
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { DashboardActionButton } from '../dashboard-action-button';
 
-import { ReceiveModal } from '@/features/wallets';
-import { SwapIcon, ReceiveIcon, SendIcon } from '@/core/components/ui/icons';
+import { SwapIcon, SendIcon, StakeIcon } from '@/core/components/ui/icons';
 
 export const DashboardActions: React.FC = () => {
     const navigate = useNavigate();
-    const [isReceiveOpen, setIsReceiveOpen] = useState(false);
 
     return (
-        <>
-            <div className="flex items-stretch gap-2">
-                <DashboardActionButton
-                    icon={<SwapIcon className="w-6 h-6" />}
-                    label="Swap"
-                    onClick={() => navigate('/swap')}
-                />
-                <DashboardActionButton
-                    icon={<SendIcon className="w-6 h-6" />}
-                    label="Send"
-                    onClick={() => navigate('/send')}
-                />
-                <DashboardActionButton
-                    icon={<ReceiveIcon className="w-6 h-6" />}
-                    label="Receive"
-                    onClick={() => setIsReceiveOpen(true)}
-                />
-            </div>
-
-            <ReceiveModal isOpen={isReceiveOpen} onClose={() => setIsReceiveOpen(false)} />
-        </>
+        <div className="flex items-stretch gap-2">
+            <DashboardActionButton
+                icon={<SendIcon className="w-6 h-6" />}
+                label="Send"
+                onClick={() => navigate('/send')}
+            />
+            <DashboardActionButton
+                icon={<SwapIcon className="w-6 h-6" />}
+                label="Swap"
+                onClick={() => navigate('/swap')}
+            />
+            <DashboardActionButton
+                icon={<StakeIcon className="w-6 h-6" />}
+                label="Stake"
+                onClick={() => navigate('/staking')}
+            />
+        </div>
     );
 };

From 184278bb073b0fdd63f5064fc2e1446e2d6308f7 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Thu, 11 Jun 2026 22:11:57 +0400
Subject: [PATCH 35/49] refactor(demo-wallet): rework staking page

---
 .../shared/settings-button/index.ts           |   9 +
 .../settings-button/settings-button.tsx       |  37 +++
 .../components/staking-info/staking-info.tsx  |  78 ++---
 .../staking-interface/staking-interface.tsx   | 302 +++++++++++-------
 .../staking-screen/staking-screen.tsx         |  41 +--
 .../components/staking-settings/index.ts      |   9 +
 .../staking-settings/staking-settings.tsx     |  81 +++++
 .../staking/hooks/use-staking-providers.ts    |  28 ++
 .../demo-wallet/src/features/staking/index.ts |   2 +
 .../swap-settings/swap-settings.tsx           |  11 +-
 10 files changed, 393 insertions(+), 205 deletions(-)
 create mode 100644 apps/demo-wallet/src/core/components/shared/settings-button/index.ts
 create mode 100644 apps/demo-wallet/src/core/components/shared/settings-button/settings-button.tsx
 create mode 100644 apps/demo-wallet/src/features/staking/components/staking-settings/index.ts
 create mode 100644 apps/demo-wallet/src/features/staking/components/staking-settings/staking-settings.tsx
 create mode 100644 apps/demo-wallet/src/features/staking/hooks/use-staking-providers.ts

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/features/staking/components/staking-info/staking-info.tsx b/apps/demo-wallet/src/features/staking/components/staking-info/staking-info.tsx
index 3c5cd6359..2de312165 100644
--- 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
@@ -9,47 +9,51 @@
 import type { FC } from 'react';
 import { useStaking } from '@demo/wallet-core';
 
-import { Card } from '@/core/components/ui/card';
+import { useStakingProviders } from '../../hooks/use-staking-providers';
 
-export const StakingInfo: FC = () => {
-    const { stakedBalance, providerInfo } = useStaking();
+import { formatLargeValue } from '@/core/utils';
 
-    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>
+interface StakingInfoProps {
+    /** Ticker received from the current quote (stake → tsTON, unstake → GRAM). */
+    receiveTicker?: string;
+}
 
-            <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'}{' '}
-                            GRAM
-                        </span>
-                    </div>
+/** 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>
-            </Card>
+            )}
         </div>
     );
 };
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
index 3b352d2a3..3fc8bb160 100644
--- 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
@@ -6,17 +6,39 @@
  *
  */
 
-import type { FC, ChangeEvent } from 'react';
 import { useState } from 'react';
-import { useStaking } from '@demo/wallet-core';
+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 { Card } from '@/core/components/ui/card';
+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,
@@ -25,8 +47,11 @@ export const StakingInterface: FC = () => {
         isUnstaking,
         error,
         unstakeMode,
+        stakedBalance,
+        providerId,
         setStakingAmount: setAmount,
         setUnstakeMode,
+        setStakingProviderId,
         getStakingQuote: getQuote,
         stake,
         unstake,
@@ -34,164 +59,195 @@ export const StakingInterface: FC = () => {
     } = useStaking();
 
     const [tab, setTab] = useState<'stake' | 'unstake'>('stake');
+    const isStake = tab === 'stake';
 
-    const navigate = useNavigate();
+    const availableGram = formatUnits(balance || '0', GRAM_DECIMALS);
+    const stakedTs = stakedBalance?.stakedBalance ?? '0';
 
-    const handleAmountChange = (e: ChangeEvent<HTMLInputElement>) => {
-        setAmount(e.target.value);
+    const handleTab = (next: 'stake' | 'unstake') => {
+        setTab(next);
+        setAmount('');
     };
 
-    const handleGetQuote = async () => {
-        await getQuote({
-            amount,
-            direction: tab === 'stake' ? 'stake' : 'unstake',
-        });
+    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;
-
-        if (tab === 'stake') {
+        if (isStake) {
             await stake({ quote: currentQuote });
         } else {
             await unstake({ quote: currentQuote });
         }
-
-        navigate('/wallet', {
-            state: { message: `${tab === 'stake' ? 'Staked' : 'Unstaked'} successfully!` },
-        });
+        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 canGetQuote = !validationError && amount && parseFloat(amount) > 0;
+    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 (
-        <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 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>
 
-            <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' ? 'GRAM' : 'tsTON'}
-                            </span>
-                        </div>
-                    </div>
-                    {validationError && amount !== '' && <p className="mt-2 text-sm text-red-500">{validationError}</p>}
-                </div>
+            {/* Amount */}
+            <div className="py-2">
+                <CenteredAmountInput
+                    value={amount}
+                    onValueChange={handleAmountChange}
+                    ticker={isStake ? STAKE_TICKER : STAKED_TICKER}
+                />
+            </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 GRAM 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>
-                )}
+            {/* 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>
 
-                {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' : 'GRAM'}
-                            </span>
-                        </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>
+            )}
 
-                {error && (
-                    <div className="bg-red-50 border border-red-100 rounded-xl p-4">
-                        <p className="text-sm text-red-600">{error}</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
-                        className="w-full py-4 text-lg font-bold"
-                        onClick={handleGetQuote}
-                        disabled={!canGetQuote || isLoadingQuote}
+                        type="button"
+                        fullWidth
+                        onClick={handlePreview}
                         loading={isLoadingQuote}
+                        disabled={!canPreview || isLoadingQuote}
                     >
-                        Preview {tab === 'stake' ? 'Stake' : 'Unstake'}
+                        {isStake ? 'Preview Stake' : 'Preview Unstake'}
                     </Button>
                 ) : (
-                    <div className="grid grid-cols-2 gap-4">
+                    <>
                         <Button
+                            type="button"
                             variant="secondary"
-                            className="py-4 font-bold"
+                            fullWidth
                             onClick={() => setAmount('')}
-                            disabled={isStaking || isUnstaking}
+                            disabled={isSending}
                         >
                             Cancel
                         </Button>
-                        <Button className="py-4 font-bold" onClick={handleAction} loading={isStaking || isUnstaking}>
-                            Confirm {tab === 'stake' ? 'Stake' : 'Unstake'}
+                        <Button type="button" fullWidth onClick={handleAction} loading={isSending} disabled={isSending}>
+                            {isStake ? 'Stake' : 'Unstake'}
                         </Button>
-                    </div>
+                    </>
                 )}
+                <StakingSettings providerId={providerId} setProviderId={setStakingProviderId} />
             </div>
-        </Card>
+
+            <StakingInfo receiveTicker={receiveTicker} />
+        </div>
     );
 };
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
index f58b1b4dc..7de54bda0 100644
--- 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
@@ -12,10 +12,9 @@ import { useNavigate } from 'react-router-dom';
 import { useStaking, useWallet } from '@demo/wallet-core';
 
 import { StakingInterface } from '../staking-interface';
-import { StakingInfo } from '../staking-info';
 
-import { Button } from '@/core/components/ui/button';
-import { Layout } from '@/core/components/shared/layout';
+import { NewLayout } from '@/core/components/shared/new-layout';
+import { ScreenHeader } from '@/core/components/shared/screen-header';
 
 export const Staking: FC = () => {
     const navigate = useNavigate();
@@ -30,38 +29,8 @@ export const Staking: FC = () => {
     }, [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 GRAM to earn rewards. Please note that unstaking may take some
-                            time depending on the pool cycle.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </Layout>
+        <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
index 01ef8546b..892b92221 100644
--- a/apps/demo-wallet/src/features/staking/index.ts
+++ b/apps/demo-wallet/src/features/staking/index.ts
@@ -9,3 +9,5 @@
 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/swap-settings/swap-settings.tsx b/apps/demo-wallet/src/features/swap/components/swap-settings/swap-settings.tsx
index 3ea98414d..878797af2 100644
--- 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
@@ -7,13 +7,13 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { Settings2 } from 'lucide-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];
@@ -59,14 +59,7 @@ export const SwapSettings: React.FC<SwapSettingsProps> = ({
 
     return (
         <>
-            <button
-                type="button"
-                onClick={() => setOpen(true)}
-                aria-label="Swap settings"
-                className="flex size-13 shrink-0 items-center justify-center rounded-2xl bg-gray-100 text-gray-600 transition-colors hover:bg-gray-200"
-            >
-                <Settings2 className="h-5 w-5" />
-            </button>
+            <SettingsButton onClick={() => setOpen(true)} aria-label="Swap settings" />
 
             <Modal.Container isOpened={open} onOpenChange={setOpen}>
                 <Modal.Header onClose={() => setOpen(false)}>

From 952c2a95137ffa706e16816d50dad5c4a2beee61 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Fri, 12 Jun 2026 10:20:56 +0400
Subject: [PATCH 36/49] refactor(demo-wallet): fix paste handler with opened
 connect modal

---
 apps/demo-wallet/src/core/hooks/use-paste-handler.ts |  6 ++++--
 .../components/dashboard-header/dashboard-header.tsx | 11 ++++++++---
 .../components/wallet-dashboard/wallet-dashboard.tsx | 12 +-----------
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/apps/demo-wallet/src/core/hooks/use-paste-handler.ts b/apps/demo-wallet/src/core/hooks/use-paste-handler.ts
index bd064918f..208e3f879 100644
--- a/apps/demo-wallet/src/core/hooks/use-paste-handler.ts
+++ b/apps/demo-wallet/src/core/hooks/use-paste-handler.ts
@@ -11,8 +11,10 @@ import { useEffect } from 'react';
 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/features/dashboard/components/dashboard-header/dashboard-header.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-header/dashboard-header.tsx
index ada288c9d..0bd6a3212 100644
--- 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
@@ -8,19 +8,24 @@
 
 import React, { useState } from 'react';
 import { ChevronDown } from 'lucide-react';
-import { useWallet } from '@demo/wallet-core';
+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 { savedWallets, activeWalletId } = useWallet();
-    const activeWallet = savedWallets.find((w) => w.id === activeWalletId);
     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
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
index a16e81aad..56ba8b5f0 100644
--- 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
@@ -29,26 +29,16 @@ import {
 import { NewLayout } from '@/core/components/shared/new-layout';
 import { NftsCard } from '@/features/nft';
 import { TransactionHistory } from '@/features/transactions';
-import { usePasteHandler } from '@/core/hooks/use-paste-handler';
 
 export const WalletDashboard: React.FC = () => {
     const { getAvailableWallets, savedWallets, getActiveWallet } = useWallet();
     const activeWallet = getActiveWallet();
-    const {
-        handleTonConnectUrl,
-        pendingConnectRequest,
-        isConnectModalOpen,
-        approveConnectRequest,
-        rejectConnectRequest,
-    } = useTonConnect();
+    const { pendingConnectRequest, isConnectModalOpen, approveConnectRequest, rejectConnectRequest } = useTonConnect();
     const { pendingTransactionRequest, isTransactionModalOpen } = useTransactionRequests();
     const { pendingSignDataRequest, isSignDataModalOpen, approveSignDataRequest, rejectSignDataRequest } =
         useSignDataRequests();
     const { pendingSignMessageRequest, isSignMessageModalOpen } = useSignMessageRequests();
 
-    // Keep clipboard paste-to-connect for TonConnect URLs
-    usePasteHandler(handleTonConnectUrl);
-
     return (
         <NewLayout header={<DashboardHeader />}>
             <div className="space-y-4">

From a4d788665f3fbf3bfd4be30f1da3b2e8418414a3 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Fri, 12 Jun 2026 12:07:39 +0400
Subject: [PATCH 37/49] refactor(demo-wallet): remove dead legacy components

---
 .../src/core/routing/app-router.tsx           |  18 +-
 .../jettons/components/jettons-card/index.ts  |   9 -
 .../components/jettons-card/jettons-card.tsx  |  94 ---
 .../jettons/components/jettons-list/index.ts  |   9 -
 .../components/jettons-list/jettons-list.tsx  | 360 -----------
 .../demo-wallet/src/features/jettons/index.ts |   2 -
 .../components/recent-transactions/index.ts   |   9 -
 .../recent-transactions.tsx                   | 506 ---------------
 .../components/trace-page/index.ts            |   9 -
 .../components/trace-page/trace-page.tsx      | 110 ----
 .../components/trace-row/index.ts             |   9 -
 .../components/trace-row/trace-row.tsx        | 585 ------------------
 .../transaction-cards/action-card.tsx         | 100 ---
 .../components/transaction-cards/index.ts     |  12 -
 .../transaction-cards/ton-transfer-card.tsx   |  86 ---
 .../transaction-cards/transaction-card.tsx    | 238 -------
 .../transaction-cards/transaction-states.tsx  |  66 --
 .../components/transaction-detail/index.ts    |   9 -
 .../transaction-detail/transaction-detail.tsx | 444 -------------
 .../src/features/transactions/index.ts        |   5 -
 20 files changed, 1 insertion(+), 2679 deletions(-)
 delete mode 100644 apps/demo-wallet/src/features/jettons/components/jettons-card/index.ts
 delete mode 100644 apps/demo-wallet/src/features/jettons/components/jettons-card/jettons-card.tsx
 delete mode 100644 apps/demo-wallet/src/features/jettons/components/jettons-list/index.ts
 delete mode 100644 apps/demo-wallet/src/features/jettons/components/jettons-list/jettons-list.tsx
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/recent-transactions/index.ts
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/recent-transactions/recent-transactions.tsx
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/trace-page/index.ts
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/trace-page/trace-page.tsx
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/trace-row/index.ts
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/trace-row/trace-row.tsx
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-cards/action-card.tsx
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-cards/index.ts
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-cards/ton-transfer-card.tsx
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-cards/transaction-card.tsx
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-cards/transaction-states.tsx
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-detail/index.ts
 delete mode 100644 apps/demo-wallet/src/features/transactions/components/transaction-detail/transaction-detail.tsx

diff --git a/apps/demo-wallet/src/core/routing/app-router.tsx b/apps/demo-wallet/src/core/routing/app-router.tsx
index 9565e1344..61b4c905c 100644
--- a/apps/demo-wallet/src/core/routing/app-router.tsx
+++ b/apps/demo-wallet/src/core/routing/app-router.tsx
@@ -17,7 +17,7 @@ import { WalletDashboard } from '@/features/dashboard';
 import { AssetsScreen } from '@/features/assets';
 import { NftsScreen } from '@/features/nft';
 import { TonConnectRoute } from '@/features/ton-connect';
-import { TracePage, TransactionDetail, HistoryScreen } from '@/features/transactions';
+import { HistoryScreen } from '@/features/transactions';
 import { Staking } from '@/features/staking';
 import { Swap } from '@/features/swap';
 import { SendTransaction } from '@/features/send';
@@ -171,22 +171,6 @@ export const AppRouter: React.FC = () => {
                         </ProtectedRoute>
                     }
                 />
-                <Route
-                    path="/wallet/transactions/:hash"
-                    element={
-                        <ProtectedRoute requiresWallet>
-                            <TransactionDetail />
-                        </ProtectedRoute>
-                    }
-                />
-                <Route
-                    path="/wallet/trace/:traceId"
-                    element={
-                        <ProtectedRoute requiresWallet>
-                            <TracePage />
-                        </ProtectedRoute>
-                    }
-                />
                 <Route
                     path="/ton-connect"
                     element={
diff --git a/apps/demo-wallet/src/features/jettons/components/jettons-card/index.ts b/apps/demo-wallet/src/features/jettons/components/jettons-card/index.ts
deleted file mode 100644
index 11401d6f0..000000000
--- a/apps/demo-wallet/src/features/jettons/components/jettons-card/index.ts
+++ /dev/null
@@ -1,9 +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 './jettons-card';
diff --git a/apps/demo-wallet/src/features/jettons/components/jettons-card/jettons-card.tsx b/apps/demo-wallet/src/features/jettons/components/jettons-card/jettons-card.tsx
deleted file mode 100644
index 398b86b73..000000000
--- a/apps/demo-wallet/src/features/jettons/components/jettons-card/jettons-card.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 { JettonRow } from '../jetton-row';
-
-import { Button } from '@/core/components/ui/button';
-import { createComponentLogger } from '@/core/lib/logger';
-import { Card } from '@/core/components/ui/card';
-import { getJettonsName } from '@/features/jettons';
-
-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/features/jettons/components/jettons-list/index.ts b/apps/demo-wallet/src/features/jettons/components/jettons-list/index.ts
deleted file mode 100644
index ee1378e7f..000000000
--- a/apps/demo-wallet/src/features/jettons/components/jettons-list/index.ts
+++ /dev/null
@@ -1,9 +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 './jettons-list';
diff --git a/apps/demo-wallet/src/features/jettons/components/jettons-list/jettons-list.tsx b/apps/demo-wallet/src/features/jettons/components/jettons-list/jettons-list.tsx
deleted file mode 100644
index f01cf97a8..000000000
--- a/apps/demo-wallet/src/features/jettons/components/jettons-list/jettons-list.tsx
+++ /dev/null
@@ -1,360 +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 { Button } from '@/core/components/ui/button';
-import { createComponentLogger } from '@/core/lib/logger';
-import { useFormatJetton, useFormattedJetton } from '@/features/jettons';
-
-// 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}
-                        loading={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/features/jettons/index.ts b/apps/demo-wallet/src/features/jettons/index.ts
index d48805b0b..407b6aae6 100644
--- a/apps/demo-wallet/src/features/jettons/index.ts
+++ b/apps/demo-wallet/src/features/jettons/index.ts
@@ -8,8 +8,6 @@
 
 export * from './components/jetton-row';
 export * from './components/jetton-flow';
-export * from './components/jettons-card';
-export * from './components/jettons-list';
 export * from './hooks/use-jetton-info';
 export * from './hooks/use-formatted-jetton';
 export * from './utils/jetton';
diff --git a/apps/demo-wallet/src/features/transactions/components/recent-transactions/index.ts b/apps/demo-wallet/src/features/transactions/components/recent-transactions/index.ts
deleted file mode 100644
index 0f88c6373..000000000
--- a/apps/demo-wallet/src/features/transactions/components/recent-transactions/index.ts
+++ /dev/null
@@ -1,9 +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 './recent-transactions';
diff --git a/apps/demo-wallet/src/features/transactions/components/recent-transactions/recent-transactions.tsx b/apps/demo-wallet/src/features/transactions/components/recent-transactions/recent-transactions.tsx
deleted file mode 100644
index 15070b0b6..000000000
--- a/apps/demo-wallet/src/features/transactions/components/recent-transactions/recent-transactions.tsx
+++ /dev/null
@@ -1,506 +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 { TraceRow } from '../trace-row';
-import {
-    TransactionErrorState,
-    TransactionLoadingState,
-    TransactionEmptyState,
-    ActionCard,
-} from '../transaction-cards';
-
-import { formatLargeValue, formatUnits, getTonviewerTxUrl, sameAddress } from '@/core/utils';
-
-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
-                                    ? formatLargeValue(formatUnits(preview.amount, 9), 4)
-                                    : '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/features/transactions/components/trace-page/index.ts b/apps/demo-wallet/src/features/transactions/components/trace-page/index.ts
deleted file mode 100644
index 00fc8d7cd..000000000
--- a/apps/demo-wallet/src/features/transactions/components/trace-page/index.ts
+++ /dev/null
@@ -1,9 +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 './trace-page';
diff --git a/apps/demo-wallet/src/features/transactions/components/trace-page/trace-page.tsx b/apps/demo-wallet/src/features/transactions/components/trace-page/trace-page.tsx
deleted file mode 100644
index 5da3e9f5e..000000000
--- a/apps/demo-wallet/src/features/transactions/components/trace-page/trace-page.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 '../trace-row';
-
-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/features/transactions/components/trace-row/index.ts b/apps/demo-wallet/src/features/transactions/components/trace-row/index.ts
deleted file mode 100644
index 12b371ed2..000000000
--- a/apps/demo-wallet/src/features/transactions/components/trace-row/index.ts
+++ /dev/null
@@ -1,9 +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 './trace-row';
diff --git a/apps/demo-wallet/src/features/transactions/components/trace-row/trace-row.tsx b/apps/demo-wallet/src/features/transactions/components/trace-row/trace-row.tsx
deleted file mode 100644
index b1a7d17ff..000000000
--- a/apps/demo-wallet/src/features/transactions/components/trace-row/trace-row.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 '@/core/utils';
-import { log } from '@/core/lib/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')} GRAM</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!)} GRAM</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')} GRAM</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)} GRAM` : '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)} GRAM` : '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/features/transactions/components/transaction-cards/action-card.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-cards/action-card.tsx
deleted file mode 100644
index 32e977c79..000000000
--- a/apps/demo-wallet/src/features/transactions/components/transaction-cards/action-card.tsx
+++ /dev/null
@@ -1,100 +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 { TransactionCard } from './transaction-card';
-import type { TxFinality } from './transaction-card';
-
-import { formatLargeValue, formatUnits, sameAddress } from '@/core/utils';
-
-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' && 'TonTransfer' in action) {
-                const amount = formatLargeValue(formatUnits(action.TonTransfer.amount, 9), 4);
-                const label = isOutgoing ? 'Sent' : 'Received';
-                return {
-                    description: `${label} ${amount} TON`,
-                    value: `${amount} TON`,
-                };
-            }
-            if (valueMatch && action.type === 'TonTransfer' && 'TonTransfer' in action) {
-                const amount = formatLargeValue(formatUnits(action.TonTransfer.amount, 9), 4);
-                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/features/transactions/components/transaction-cards/index.ts b/apps/demo-wallet/src/features/transactions/components/transaction-cards/index.ts
deleted file mode 100644
index 00c126978..000000000
--- a/apps/demo-wallet/src/features/transactions/components/transaction-cards/index.ts
+++ /dev/null
@@ -1,12 +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 './transaction-states';
-export * from './ton-transfer-card';
-export * from './transaction-card';
-export * from './action-card';
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-cards/ton-transfer-card.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-cards/ton-transfer-card.tsx
deleted file mode 100644
index 97239c8f7..000000000
--- a/apps/demo-wallet/src/features/transactions/components/transaction-cards/ton-transfer-card.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 { shortenAddress, formatTimestamp } from '@/core/utils';
-import { formatTon } from '@/core/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">{shortenAddress(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} GRAM
-                    </p>
-                    <p className="text-xs text-gray-400">{formatTimestamp(timestamp)}</p>
-                </div>
-            </Link>
-        );
-    },
-);
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-cards/transaction-card.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-cards/transaction-card.tsx
deleted file mode 100644
index ce4dba947..000000000
--- a/apps/demo-wallet/src/features/transactions/components/transaction-cards/transaction-card.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 '@/core/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/features/transactions/components/transaction-cards/transaction-states.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-cards/transaction-states.tsx
deleted file mode 100644
index 3800b6a54..000000000
--- a/apps/demo-wallet/src/features/transactions/components/transaction-cards/transaction-states.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/features/transactions/components/transaction-detail/index.ts b/apps/demo-wallet/src/features/transactions/components/transaction-detail/index.ts
deleted file mode 100644
index f83aea3b6..000000000
--- a/apps/demo-wallet/src/features/transactions/components/transaction-detail/index.ts
+++ /dev/null
@@ -1,9 +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 './transaction-detail';
diff --git a/apps/demo-wallet/src/features/transactions/components/transaction-detail/transaction-detail.tsx b/apps/demo-wallet/src/features/transactions/components/transaction-detail/transaction-detail.tsx
deleted file mode 100644
index 8d1d792ab..000000000
--- a/apps/demo-wallet/src/features/transactions/components/transaction-detail/transaction-detail.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)} GRAM
-                                </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)} GRAM</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')} GRAM
-                                            </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')} GRAM
-                                                    </span>
-                                                </div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
diff --git a/apps/demo-wallet/src/features/transactions/index.ts b/apps/demo-wallet/src/features/transactions/index.ts
index ea004df72..5c1d3ab79 100644
--- a/apps/demo-wallet/src/features/transactions/index.ts
+++ b/apps/demo-wallet/src/features/transactions/index.ts
@@ -6,11 +6,6 @@
  *
  */
 
-export * from './components/trace-page';
-export * from './components/transaction-detail';
-export * from './components/trace-row';
-export * from './components/recent-transactions';
-export * from './components/transaction-cards';
 export * from './components/transaction-row';
 export * from './components/transaction-history';
 export * from './utils/map-transaction-row';

From 3eba88640963a0923fe26edaf90cd301d2bc7320 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Fri, 12 Jun 2026 15:18:24 +0400
Subject: [PATCH 38/49] refactor(demo-wallet): redesign ton connect modals

---
 apps/demo-wallet/public/walletkit.svg         |   8 +
 .../src/core/components/ui/drawer/drawer.tsx  |   3 +-
 .../src/core/components/ui/modal/index.ts     |   2 +-
 .../src/core/components/ui/modal/modal.tsx    |  34 +-
 .../components/jetton-flow/jetton-flow.tsx    |   6 +-
 .../connect-request-modal.tsx                 | 341 +++++-------------
 .../components/dapp-info/dapp-info.tsx        |  66 ----
 .../dapp-request-header.tsx                   |  50 +++
 .../components/dapp-request-header/index.ts   |   9 +
 .../dapp-request-modal/dapp-request-modal.tsx | 108 ++++++
 .../components/dapp-request-modal/index.ts    |   9 +
 .../request-modal/request-modal.tsx           | 315 ++++------------
 .../sign-data-request-modal.tsx               | 329 +++++------------
 .../sign-message-request-modal.tsx            |  25 +-
 .../transaction-request-details.tsx           |  22 +-
 .../transaction-request-modal.tsx             |  21 +-
 .../{dapp-info => wallet-plate}/index.ts      |   2 +-
 .../components/wallet-plate/wallet-plate.tsx  |  53 +++
 .../src/features/ton-connect/index.ts         |   4 +-
 .../components/wallet-picker-view/index.ts    |   9 +
 .../wallet-picker-view/wallet-picker-view.tsx |  57 +++
 .../components/wallet-row/wallet-row.tsx      | 139 +++----
 .../demo-wallet/src/features/wallets/index.ts |   1 +
 .../src/store/slices/tonConnectSlice.ts       |  39 +-
 24 files changed, 701 insertions(+), 951 deletions(-)
 create mode 100644 apps/demo-wallet/public/walletkit.svg
 delete mode 100644 apps/demo-wallet/src/features/ton-connect/components/dapp-info/dapp-info.tsx
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/dapp-request-header/dapp-request-header.tsx
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/dapp-request-header/index.ts
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/dapp-request-modal/dapp-request-modal.tsx
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/dapp-request-modal/index.ts
 rename apps/demo-wallet/src/features/ton-connect/components/{dapp-info => wallet-plate}/index.ts (83%)
 create mode 100644 apps/demo-wallet/src/features/ton-connect/components/wallet-plate/wallet-plate.tsx
 create mode 100644 apps/demo-wallet/src/features/wallets/components/wallet-picker-view/index.ts
 create mode 100644 apps/demo-wallet/src/features/wallets/components/wallet-picker-view/wallet-picker-view.tsx

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/core/components/ui/drawer/drawer.tsx b/apps/demo-wallet/src/core/components/ui/drawer/drawer.tsx
index 501cb3244..5e97f27ea 100644
--- a/apps/demo-wallet/src/core/components/ui/drawer/drawer.tsx
+++ b/apps/demo-wallet/src/core/components/ui/drawer/drawer.tsx
@@ -39,12 +39,11 @@ const DrawerContent = React.forwardRef<
         <DrawerPrimitive.Content
             ref={ref}
             className={cn(
-                'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+                '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}
         >
-            <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
             {children}
         </DrawerPrimitive.Content>
     </DrawerPortal>
diff --git a/apps/demo-wallet/src/core/components/ui/modal/index.ts b/apps/demo-wallet/src/core/components/ui/modal/index.ts
index 6ddbe7a1d..dfee28f4f 100644
--- a/apps/demo-wallet/src/core/components/ui/modal/index.ts
+++ b/apps/demo-wallet/src/core/components/ui/modal/index.ts
@@ -6,5 +6,5 @@
  *
  */
 
-export { Modal, ModalContainer, ModalHeader, ModalTitle, ModalBody, ModalFooter, ModalBackButton } from './modal';
+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
index 906ae380e..3a791db62 100644
--- a/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
+++ b/apps/demo-wallet/src/core/components/ui/modal/modal.tsx
@@ -13,18 +13,20 @@ import { ChevronLeft, X } from 'lucide-react';
 import { Dialog, DialogContent, DialogTitle } from '../dialog';
 import { Drawer, DrawerContent, DrawerTitle } from '../drawer';
 
-import { Button } from '@/core/components/ui/button';
 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
@@ -33,7 +35,7 @@ export const ModalContainer: React.FC<ModalContainerProps> = ({
 
     if (isMobile) {
         return (
-            <Drawer open={isOpened} onOpenChange={onOpenChange}>
+            <Drawer open={isOpened} onOpenChange={onOpenChange} dismissible={dismissible}>
                 <DrawerContent className={cn('max-w-md mx-auto', className)} aria-describedby={undefined} {...props}>
                     {children}
                 </DrawerContent>
@@ -46,6 +48,8 @@ export const ModalContainer: React.FC<ModalContainerProps> = ({
             <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}
@@ -56,11 +60,25 @@ export const ModalContainer: React.FC<ModalContainerProps> = ({
 
 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, children, className, ...props }) => (
+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">{children}</div>
+        <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"
@@ -92,18 +110,10 @@ export const ModalFooter: React.FC<ComponentProps<'div'>> = ({ children, classNa
     </div>
 );
 
-export const ModalBackButton: React.FC<ComponentProps<'button'>> = ({ className, ...props }) => (
-    <Button variant="secondary" className={cn('!px-2 gap-1 text-sm', className)} {...props}>
-        <ChevronLeft className="h-4 w-4" />
-        <span className="font-semibold">Back</span>
-    </Button>
-);
-
 export const Modal = {
     Container: ModalContainer,
     Header: ModalHeader,
     Title: ModalTitle,
     Body: ModalBody,
     Footer: ModalFooter,
-    BackButton: ModalBackButton,
 };
diff --git a/apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx b/apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx
index a9824d921..8675e3e69 100644
--- a/apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx
+++ b/apps/demo-wallet/src/features/jettons/components/jetton-flow/jetton-flow.tsx
@@ -76,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/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
index 90dd13668..7e891f4d2 100644
--- 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
@@ -6,19 +6,18 @@
  *
  */
 
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useEffect, useMemo, useState } 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 { DAppInfo } from '../dapp-info';
+import { DappRequestModal } from '../dapp-request-modal';
+import { WalletPlate } from '../wallet-plate';
 
 import { Button } from '@/core/components/ui/button';
-import { WalletPreview } from '@/features/wallets';
 import { createComponentLogger } from '@/core/lib/logger';
+import { WalletPickerView } from '@/features/wallets';
 
-// Create logger for connect request modal
 const log = createComponentLogger('ConnectRequestModal');
 
 interface ConnectRequestModalProps {
@@ -40,281 +39,117 @@ export const ConnectRequestModal: React.FC<ConnectRequestModalProps> = ({
     onApprove,
     onReject,
 }) => {
-    const [selectedWallet, setSelectedWallet] = useState<Wallet | null>(currentWallet || null);
+    const [selectedWallet, setSelectedWallet] = useState<Wallet | null>(currentWallet ?? null);
+    const [pickerOpen, setPickerOpen] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
-    const [showAllWallets, setShowAllWallets] = useState(false);
 
-    // Auto-select current wallet or first available wallet if selectedWallet is null
+    // Fall back to the active or first available wallet until one is picked.
     useEffect(() => {
-        if (selectedWallet !== null) return;
+        if (selectedWallet === null) setSelectedWallet(currentWallet ?? availableWallets[0] ?? null);
+    }, [selectedWallet, currentWallet, availableWallets]);
 
-        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(() => {
+    // SavedWallet records keyed by the WalletKit id (savedWallet.id is a separate store id).
+    const savedByKitId = useMemo(() => {
         const map = new Map<string, SavedWallet>();
-        savedWallets.forEach((savedWallet) => {
-            map.set(savedWallet.id, 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,
-            });
+            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',
-        };
+    // 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);
     };
 
-    if (!isOpen) return null;
+    const walletSlot = (
+        <WalletPlate
+            name={selectedWallet ? walletName(selectedWallet.getWalletId()) : 'Wallet'}
+            address={selectedWallet?.getAddress() ?? ''}
+            selectable={canSelect}
+            onClick={canSelect ? () => setPickerOpen(true) : undefined}
+        />
+    );
 
     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>
-                                    )
+        <DappRequestModal
+            isOpen={isOpen}
+            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>
-                        )}
-
-                        {/* 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}
-                        loading={isLoading}
-                        disabled={!selectedWallet || isLoading}
-                        className="flex-1"
-                    >
-                        Connect
-                    </Button>
-                </div>
-            </div>
-        </div>
+            )}
+        </DappRequestModal>
     );
 };
diff --git a/apps/demo-wallet/src/features/ton-connect/components/dapp-info/dapp-info.tsx b/apps/demo-wallet/src/features/ton-connect/components/dapp-info/dapp-info.tsx
deleted file mode 100644
index 36a8a936a..000000000
--- a/apps/demo-wallet/src/features/ton-connect/components/dapp-info/dapp-info.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/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..7a0dd8aed
--- /dev/null
+++ b/apps/demo-wallet/src/features/ton-connect/components/dapp-request-modal/dapp-request-modal.tsx
@@ -0,0 +1,108 @@
+/**
+ * Copyright (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;
+    /** 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,
+    altView,
+}) => (
+    <Modal.Container
+        isOpened={isOpen}
+        onOpenChange={() => {}}
+        dismissible={false}
+        className="flex max-h-[88vh] flex-col overflow-hidden"
+    >
+        {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/request-modal.tsx b/apps/demo-wallet/src/features/ton-connect/components/request-modal/request-modal.tsx
index 28ef2430c..cf7c3eb15 100644
--- 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
@@ -12,55 +12,42 @@ 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 { SuccessCard } from '@/core/components/ui/success-card';
 import { JettonFlow } from '@/features/jettons';
 import { createComponentLogger } from '@/core/lib/logger';
 
 type RequestEvent = SendTransactionRequestEvent | SignMessageRequestEvent;
-type WarningTone = 'red' | 'yellow';
 
 interface RequestModalProps {
     request: RequestEvent;
     savedWallets: SavedWallet[];
     isOpen: boolean;
-    title: string;
+    verb: string;
     subtitle: string;
     details?: React.ReactNode;
-    warning: { tone: WarningTone; message: React.ReactNode };
     approveLabel: string;
-    successMessage: string;
-    testIds: { request: string; approve: string; reject: string };
+    disclaimer: React.ReactNode;
+    testIds: { 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',
-    },
-};
-
+/** Shared shell for transaction / sign-message requests, built on {@link DappRequestModal}. */
 export const RequestModal: React.FC<RequestModalProps> = ({
     request,
     savedWallets,
     isOpen,
-    title,
+    verb,
     subtitle,
     details,
-    warning,
     approveLabel,
-    successMessage,
+    disclaimer,
     testIds,
     onApprove,
     onReject,
@@ -71,29 +58,23 @@ export const RequestModal: React.FC<RequestModalProps> = ({
     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]);
+    const currentWallet = useMemo(
+        () => (request.walletAddress ? (savedWallets.find((w) => w.kitWalletId === request.walletId) ?? null) : null),
+        [savedWallets, request.walletAddress, request.walletId],
+    );
 
     useEffect(() => {
-        const checkExpiration = () => {
+        const check = () => {
             const validUntil = request.request?.validUntil;
-            if (validUntil) {
-                const now = Math.floor(Date.now() / 1000);
-                setIsExpired(validUntil < now);
-            } else {
-                setIsExpired(false);
-            }
+            setIsExpired(validUntil ? validUntil < Math.floor(Date.now() / 1000) : false);
         };
-        checkExpiration();
-        const interval = setInterval(checkExpiration, 1000);
+        check();
+        const interval = setInterval(check, 1000);
         return () => clearInterval(interval);
     }, [request.request?.validUntil]);
 
@@ -114,7 +95,6 @@ export const RequestModal: React.FC<RequestModalProps> = ({
 
     useEffect(() => {
         if (!isOpen) {
-            setShowSuccess(false);
             setIsLoading(false);
             setIsExpired(false);
         }
@@ -124,219 +104,72 @@ export const RequestModal: React.FC<RequestModalProps> = ({
         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,
-            });
+            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;
-    }
+    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 (
-        <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}
-                                loading={isLoading}
-                                disabled={isLoading}
-                                holdDuration={3000}
-                            />
-                        ) : (
-                            <Button
-                                onClick={handleApprove}
-                                loading={isLoading}
-                                disabled={isLoading}
-                                className="flex-1"
-                                data-testid={testIds.approve}
-                            >
-                                {approveLabel}
-                            </Button>
-                        ))}
+        <DappRequestModal
+            isOpen={isOpen}
+            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>
-            </div>
-        </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/sign-data-request-modal.tsx b/apps/demo-wallet/src/features/ton-connect/components/sign-data-request-modal/sign-data-request-modal.tsx
index b02ee0936..8743bb585 100644
--- 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
@@ -6,20 +6,19 @@
  *
  */
 
-import React, { useMemo, useState, useEffect } from 'react';
+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 { DAppInfo } from '../dapp-info';
+import { DappRequestModal } from '../dapp-request-modal';
+import { WalletPlate } from '../wallet-plate';
 
 import { Button } from '@/core/components/ui/button';
-import { WalletPreview } from '@/features/wallets';
 import { HoldToSignButton } from '@/core/components/ui/hold-to-sign-button';
 import { createComponentLogger } from '@/core/lib/logger';
-import { Card } from '@/core/components/ui/card';
 
-// Create logger for sign data request modal
 const log = createComponentLogger('SignDataRequestModal');
 
 interface SignDataRequestModalProps {
@@ -30,6 +29,45 @@ interface SignDataRequestModalProps {
     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,
@@ -37,251 +75,68 @@ export const SignDataRequestModal: React.FC<SignDataRequestModalProps> = ({
     onApprove,
     onReject,
 }) => {
-    const [isLoading, setIsLoading] = useState(false);
-    const [showSuccess, setShowSuccess] = useState(false);
     const { holdToSign } = useAuth();
+    const [isLoading, setIsLoading] = useState(false);
 
-    // 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]);
+    const currentWallet = useMemo(
+        () => savedWallets.find((wallet) => wallet.kitWalletId === request.walletId) ?? null,
+        [savedWallets, request.walletId],
+    );
 
-    // Reset success state when modal closes/opens
-    useEffect(() => {
-        if (!isOpen) {
-            setShowSuccess(false);
-            setIsLoading(false);
-        }
-    }, [isOpen]);
+    const dApp = request.dAppInfo ?? request.preview.dAppInfo;
 
     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
+            toast.success('Data signed');
         } catch (error) {
-            log.error('Failed to approve sign data request:', error);
+            log.error('Failed to sign data:', error);
+            toast.error('Failed to sign data', { description: (error as Error)?.message });
+        } finally {
             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}
-                                    loading={isLoading}
-                                    disabled={isLoading}
-                                    holdDuration={3000}
-                                />
-                            ) : (
-                                <Button
-                                    data-testid="sign-data-approve"
-                                    onClick={handleApprove}
-                                    loading={isLoading}
-                                    disabled={isLoading}
-                                    className="flex-1"
-                                >
-                                    Sign Data ('regular')
-                                </Button>
-                            )}
-                        </div>
-                    </div>
-                </Card>
-            </div>
-        </div>
+        <DappRequestModal
+            isOpen={isOpen}
+            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/sign-message-request-modal.tsx b/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/sign-message-request-modal.tsx
index 9a0434d81..e3aa3d624 100644
--- a/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/sign-message-request-modal.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/sign-message-request-modal.tsx
@@ -36,25 +36,12 @@ 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' }}
             onApprove={handleApprove}
             onReject={handleReject}
             loggerName="SignMessageRequestModal"
diff --git a/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/transaction-request-details.tsx b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/transaction-request-details.tsx
index 6ca4fbb69..5ec53974a 100644
--- a/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/transaction-request-details.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-details/transaction-request-details.tsx
@@ -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,7 +98,7 @@ 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 GRAM #{index + 1}</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>
@@ -158,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>
@@ -187,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/transaction-request-modal.tsx b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/transaction-request-modal.tsx
index 943a3c1ab..1609864f1 100644
--- a/apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/transaction-request-modal.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/transaction-request-modal.tsx
@@ -62,25 +62,12 @@ 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' }}
             onApprove={handleApprove}
             onReject={handleReject}
             loggerName="TransactionRequestModal"
diff --git a/apps/demo-wallet/src/features/ton-connect/components/dapp-info/index.ts b/apps/demo-wallet/src/features/ton-connect/components/wallet-plate/index.ts
similarity index 83%
rename from apps/demo-wallet/src/features/ton-connect/components/dapp-info/index.ts
rename to apps/demo-wallet/src/features/ton-connect/components/wallet-plate/index.ts
index 7c8e88e86..fe27067d5 100644
--- a/apps/demo-wallet/src/features/ton-connect/components/dapp-info/index.ts
+++ b/apps/demo-wallet/src/features/ton-connect/components/wallet-plate/index.ts
@@ -6,4 +6,4 @@
  *
  */
 
-export * from './dapp-info';
+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
index 1f970f58a..845634798 100644
--- a/apps/demo-wallet/src/features/ton-connect/index.ts
+++ b/apps/demo-wallet/src/features/ton-connect/index.ts
@@ -9,7 +9,9 @@
 export * from './components/ton-connect-screen';
 export * from './components/connect-dapp-modal';
 export * from './components/connect-request-modal';
-export * from './components/dapp-info';
+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';
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-row/wallet-row.tsx b/apps/demo-wallet/src/features/wallets/components/wallet-row/wallet-row.tsx
index e0af7a8c3..1b97dcd27 100644
--- 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
@@ -35,8 +35,9 @@ interface WalletRowProps {
     wallet: SavedWallet;
     isActive: boolean;
     onSelect: () => void;
-    onRename: (id: string, name: string) => void;
-    onRemove: (id: string) => 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 }) => {
@@ -45,6 +46,8 @@ export const WalletRow: React.FC<WalletRowProps> = ({ wallet, isActive, onSelect
     const [isEditing, setIsEditing] = useState(false);
     const [draftName, setDraftName] = useState(wallet.name);
 
+    const hasActions = Boolean(onRename || onRemove);
+
     const startRename = () => {
         setDraftName(wallet.name);
         setIsEditing(true);
@@ -53,7 +56,7 @@ export const WalletRow: React.FC<WalletRowProps> = ({ wallet, isActive, onSelect
 
     const saveRename = () => {
         const next = draftName.trim();
-        if (next && next !== wallet.name) onRename(wallet.id, next);
+        if (next && next !== wallet.name) onRename?.(wallet.id, next);
         setIsEditing(false);
     };
 
@@ -131,69 +134,75 @@ export const WalletRow: React.FC<WalletRowProps> = ({ wallet, isActive, onSelect
                 </button>
             </div>
 
-            <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>
+            {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>
-                        </div>
-                    ) : (
-                        <>
-                            <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>
-                            <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>
+                        ) : (
+                            <>
+                                {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/index.ts b/apps/demo-wallet/src/features/wallets/index.ts
index 68f6906fe..9fd037f1a 100644
--- a/apps/demo-wallet/src/features/wallets/index.ts
+++ b/apps/demo-wallet/src/features/wallets/index.ts
@@ -8,6 +8,7 @@
 
 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';
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();

From 49c1c1c74088b1681a3a670156547e02dc396900 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Fri, 12 Jun 2026 15:25:42 +0400
Subject: [PATCH 39/49] refactor(demo-wallet): redesign ton connect screen

---
 .../core/components/shared/layout/index.ts    |  9 ---
 .../core/components/shared/layout/layout.tsx  | 67 -------------------
 .../ton-connect-screen/ton-connect-screen.tsx | 11 +--
 3 files changed, 6 insertions(+), 81 deletions(-)
 delete mode 100644 apps/demo-wallet/src/core/components/shared/layout/index.ts
 delete mode 100644 apps/demo-wallet/src/core/components/shared/layout/layout.tsx

diff --git a/apps/demo-wallet/src/core/components/shared/layout/index.ts b/apps/demo-wallet/src/core/components/shared/layout/index.ts
deleted file mode 100644
index a5a595803..000000000
--- a/apps/demo-wallet/src/core/components/shared/layout/index.ts
+++ /dev/null
@@ -1,9 +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 './layout';
diff --git a/apps/demo-wallet/src/core/components/shared/layout/layout.tsx b/apps/demo-wallet/src/core/components/shared/layout/layout.tsx
deleted file mode 100644
index c7636391d..000000000
--- a/apps/demo-wallet/src/core/components/shared/layout/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 '@/features/settings';
-// 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/features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx b/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx
index 3f602433d..a31bc82ee 100644
--- a/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/ton-connect-screen/ton-connect-screen.tsx
@@ -12,7 +12,7 @@ import { useTonConnect } from '@demo/wallet-core';
 
 import { LoaderCircle } from '@/core/components/ui/loader-circle';
 import { createComponentLogger } from '@/core/lib/logger';
-import { Layout } from '@/core/components/shared/layout';
+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>
     );
 };

From 5d983311d274c25aac2d27d23497b7b276739a4c Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Fri, 12 Jun 2026 16:29:08 +0400
Subject: [PATCH 40/49] refactor(demo-wallet): improve error handling

---
 .../staking-interface/staking-interface.tsx    |  8 ++------
 .../swap-interface/swap-interface.tsx          |  4 ++--
 .../src/store/slices/stakingSlice.ts           |  8 ++++++--
 demo/wallet-core/src/store/slices/swapSlice.ts | 18 +++++++++++++-----
 demo/wallet-core/src/types/store.ts            |  6 +++---
 5 files changed, 26 insertions(+), 18 deletions(-)

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
index 3fc8bb160..7db106d09 100644
--- 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
@@ -89,12 +89,8 @@ export const StakingInterface: FC = () => {
 
     const handleAction = async () => {
         if (!currentQuote) return;
-        if (isStake) {
-            await stake({ quote: currentQuote });
-        } else {
-            await unstake({ quote: currentQuote });
-        }
-        navigate('/wallet', { state: { message: `${isStake ? 'Staked' : 'Unstaked'} successfully!` } });
+        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;
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
index 27ad6ef88..8fc62c2f9 100644
--- 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
@@ -109,8 +109,8 @@ export const SwapInterface: FC<SwapInterfaceProps> = ({ className }) => {
     };
 
     const handleExecuteSwap = async () => {
-        await executeSwap();
-        navigate('/wallet', { state: { message: `${fromView.symbol} sent successfully!` } });
+        const ok = await executeSwap();
+        if (ok) navigate('/wallet', { state: { message: `${fromView.symbol} sent successfully!` } });
     };
 
     const getSwapButtonText = (): string => {
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 ccd2dc6f2..2067a80a3 100644
--- a/demo/wallet-core/src/store/slices/swapSlice.ts
+++ b/demo/wallet-core/src/store/slices/swapSlice.ts
@@ -15,6 +15,9 @@ 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: 'GRAM' },
@@ -147,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);
@@ -273,7 +279,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
             set((state) => {
                 state.swap.error = validationError;
             });
-            return;
+            return false;
         }
 
         if (!currentQuote) {
@@ -281,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) {
@@ -289,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) {
@@ -297,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) {
@@ -305,7 +311,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
             set((state) => {
                 state.swap.error = 'No wallet address';
             });
-            return;
+            return false;
         }
 
         set((state) => {
@@ -337,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);
 
@@ -346,6 +353,7 @@ export const createSwapSlice: SwapSliceCreator = (set: SetState, get) => ({
                 state.swap.isSwapping = false;
                 state.swap.error = errorMessage;
             });
+            return false;
         }
     },
 
diff --git a/demo/wallet-core/src/types/store.ts b/demo/wallet-core/src/types/store.ts
index 62b3e0041..33ad4e8d3 100644
--- a/demo/wallet-core/src/types/store.ts
+++ b/demo/wallet-core/src/types/store.ts
@@ -303,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;
@@ -354,7 +354,7 @@ export interface SwapSlice {
     setSwapProviderId: (providerId: string) => void;
     swapTokens: () => void;
     getSwapQuote: () => Promise<void>;
-    executeSwap: () => Promise<void>;
+    executeSwap: () => Promise<boolean>;
     clearSwap: () => void;
     validateSwapInputs: () => string | null;
 }

From 56ef7c25f794d86127cff5c300df8bc9e0b0d420 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Fri, 12 Jun 2026 16:35:25 +0400
Subject: [PATCH 41/49] refactor(demo-wallet): save mnemonic before continue

---
 .../create-wallet-screen.tsx                     | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

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
index f6b6c7963..d1ed74ea7 100644
--- 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
@@ -27,6 +27,7 @@ export const CreateWalletScreen: React.FC = () => {
     const [mnemonic, setMnemonic] = useState<string[]>([]);
     const [network, setNetwork] = useState<NetworkType>('mainnet');
     const [revealed, setRevealed] = useState(false);
+    const [isSaved, setIsSaved] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState('');
 
@@ -67,7 +68,7 @@ export const CreateWalletScreen: React.FC = () => {
     const columns = [0, 12];
 
     const footer = (
-        <Button fullWidth onClick={handleContinue} disabled={!revealed || isLoading}>
+        <Button fullWidth onClick={handleContinue} disabled={!isSaved || isLoading}>
             Continue
         </Button>
     );
@@ -122,6 +123,19 @@ export const CreateWalletScreen: React.FC = () => {
                     </Button>
                 </div>
 
+                {revealed && (
+                    <label className="mt-6 flex cursor-pointer items-center justify-center gap-2.5">
+                        <input
+                            type="checkbox"
+                            data-testid="saved-checkbox"
+                            checked={isSaved}
+                            onChange={(e) => setIsSaved(e.target.checked)}
+                            className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                        />
+                        <span className="text-sm text-gray-700">I’ve saved my recovery phrase</span>
+                    </label>
+                )}
+
                 {error && <p className="mt-4 text-center text-sm text-red-500">{error}</p>}
             </div>
         </CenteredScreen>

From b45c940164c69cc9bd7372dc6baeba8de14a10b3 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Fri, 12 Jun 2026 16:38:41 +0400
Subject: [PATCH 42/49] refactor(demo-wallet): fix for 0 decimals

---
 .../src/features/send/hooks/use-gasless-jetton-send.ts          | 2 +-
 apps/demo-wallet/src/features/send/hooks/use-send-token.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/demo-wallet/src/features/send/hooks/use-gasless-jetton-send.ts b/apps/demo-wallet/src/features/send/hooks/use-gasless-jetton-send.ts
index 9d304f4aa..22e017804 100644
--- a/apps/demo-wallet/src/features/send/hooks/use-gasless-jetton-send.ts
+++ b/apps/demo-wallet/src/features/send/hooks/use-gasless-jetton-send.ts
@@ -100,7 +100,7 @@ export const useGaslessJettonSend = ({
             !isValidAddress(recipient) ||
             !(inputAmount > 0) ||
             !gasless.feeAsset ||
-            !jettonDecimals
+            jettonDecimals == null
         ) {
             return;
         }
diff --git a/apps/demo-wallet/src/features/send/hooks/use-send-token.ts b/apps/demo-wallet/src/features/send/hooks/use-send-token.ts
index 4223efa83..ee9d55dfc 100644
--- a/apps/demo-wallet/src/features/send/hooks/use-send-token.ts
+++ b/apps/demo-wallet/src/features/send/hooks/use-send-token.ts
@@ -88,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,

From da630d56d43cd32e0605264fb23b5c2306d19be2 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Fri, 12 Jun 2026 18:17:53 +0400
Subject: [PATCH 43/49] refactor(demo-wallet): fix some tests for new UI

---
 .../demo-wallet/e2e/demo-wallet/DemoWallet.ts | 48 ++++++++-----------
 .../e2e/localSendTransaction.spec.ts          |  5 +-
 apps/demo-wallet/e2e/utils.ts                 |  2 +-
 .../centered-amount-input.tsx                 |  4 ++
 .../components/ui/option-row/option-row.tsx   |  3 ++
 .../dashboard-action-button.tsx               |  3 ++
 .../dashboard-actions/dashboard-actions.tsx   |  3 ++
 .../dashboard-header/dashboard-header.tsx     |  1 +
 .../components/amount-field/amount-field.tsx  |  7 ++-
 .../staking-interface/staking-interface.tsx   |  1 +
 .../connect-request-modal.tsx                 |  1 +
 .../dapp-request-modal/dapp-request-modal.tsx |  4 ++
 .../request-modal/request-modal.tsx           |  4 ++
 .../sign-data-request-modal.tsx               |  1 +
 .../sign-message-request-modal.tsx            |  1 +
 .../transaction-request-modal.tsx             |  1 +
 .../add-wallet-modal/add-wallet-modal.tsx     |  1 +
 .../import-wallet-screen.tsx                  | 15 ++++--
 .../welcome-screen/welcome-screen.tsx         |  4 +-
 19 files changed, 73 insertions(+), 36 deletions(-)

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/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/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
index dc8e64e04..29f6f96bd 100644
--- 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
@@ -23,6 +23,8 @@ export interface CenteredAmountInputProps extends ComponentProps<'div'> {
     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). */
@@ -33,6 +35,7 @@ export const CenteredAmountInput: FC<CenteredAmountInputProps> = ({
     symbol,
     placeholder = '0',
     className,
+    baseTestId,
     ...props
 }) => {
     const wrapperRef = useRef<HTMLDivElement>(null);
@@ -102,6 +105,7 @@ export const CenteredAmountInput: FC<CenteredAmountInputProps> = ({
                 )}
                 <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"
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
index 5c068b16c..7edbe5f72 100644
--- 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
@@ -16,6 +16,7 @@ export interface OptionRowProps {
     loading?: boolean;
     disabled?: boolean;
     onClick?: () => void;
+    testId?: string;
 }
 
 /** Selectable list row: leading icon, title/subtitle, trailing chevron (or spinner). */
@@ -26,9 +27,11 @@ export const OptionRow: React.FC<OptionRowProps> = ({
     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"
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
index e7c1fad66..a38f99677 100644
--- 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
@@ -13,6 +13,7 @@ interface DashboardActionButtonProps {
     label: string;
     onClick?: () => void;
     'aria-label'?: string;
+    testId?: string;
 }
 
 export const DashboardActionButton: React.FC<DashboardActionButtonProps> = ({
@@ -20,10 +21,12 @@ export const DashboardActionButton: React.FC<DashboardActionButtonProps> = ({
     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"
     >
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
index 52da85812..be697eadd 100644
--- 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
@@ -22,16 +22,19 @@ export const DashboardActions: React.FC = () => {
                 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-header/dashboard-header.tsx b/apps/demo-wallet/src/features/dashboard/components/dashboard-header/dashboard-header.tsx
index 0bd6a3212..3293f346c 100644
--- 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
@@ -33,6 +33,7 @@ export const DashboardHeader: React.FC = () => {
                 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>
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
index 6c487c4b4..f36cafd4c 100644
--- 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
@@ -46,7 +46,12 @@ export const AmountField: React.FC<AmountFieldProps> = ({ value, onChange, token
     return (
         <div className="space-y-4">
             <div className="space-y-2 py-2">
-                <CenteredAmountInput value={value} onValueChange={handleAmountChange} ticker={token.symbol} />
+                <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} />
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
index 7db106d09..a64121bbb 100644
--- 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
@@ -142,6 +142,7 @@ export const StakingInterface: FC = () => {
                     value={amount}
                     onValueChange={handleAmountChange}
                     ticker={isStake ? STAKE_TICKER : STAKED_TICKER}
+                    baseTestId="stake-amount"
                 />
             </div>
 
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
index 7e891f4d2..76a91269c 100644
--- 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
@@ -104,6 +104,7 @@ export const ConnectRequestModal: React.FC<ConnectRequestModalProps> = ({
     return (
         <DappRequestModal
             isOpen={isOpen}
+            testId="connect-request"
             dAppInfo={dApp}
             domain={request.domain}
             verb="Connect to"
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
index 7a0dd8aed..701b64be3 100644
--- 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
@@ -43,6 +43,8 @@ interface DappRequestModalProps {
     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;
@@ -65,6 +67,7 @@ export const DappRequestModal: React.FC<DappRequestModalProps> = ({
     rejectDisabled,
     rejectTestId,
     disclaimer,
+    testId,
     altView,
 }) => (
     <Modal.Container
@@ -72,6 +75,7 @@ export const DappRequestModal: React.FC<DappRequestModalProps> = ({
         onOpenChange={() => {}}
         dismissible={false}
         className="flex max-h-[88vh] flex-col overflow-hidden"
+        data-testid={testId}
     >
         {altView ?? (
             <>
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
index cf7c3eb15..49a0cd736 100644
--- 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
@@ -32,6 +32,8 @@ interface RequestModalProps {
     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;
@@ -49,6 +51,7 @@ export const RequestModal: React.FC<RequestModalProps> = ({
     approveLabel,
     disclaimer,
     testIds,
+    modalTestId,
     onApprove,
     onReject,
     loggerName,
@@ -138,6 +141,7 @@ export const RequestModal: React.FC<RequestModalProps> = ({
     return (
         <DappRequestModal
             isOpen={isOpen}
+            testId={modalTestId}
             dAppInfo={request.dAppInfo}
             domain={request.domain}
             verb={verb}
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
index 8743bb585..d1d99a82d 100644
--- 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
@@ -101,6 +101,7 @@ export const SignDataRequestModal: React.FC<SignDataRequestModalProps> = ({
     return (
         <DappRequestModal
             isOpen={isOpen}
+            testId="sign-data-request"
             dAppInfo={dApp}
             domain={request.domain}
             verb="Sign data for"
diff --git a/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/sign-message-request-modal.tsx b/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/sign-message-request-modal.tsx
index e3aa3d624..144241df3 100644
--- a/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/sign-message-request-modal.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/sign-message-request-modal/sign-message-request-modal.tsx
@@ -42,6 +42,7 @@ export const SignMessageRequestModal: React.FC<SignMessageRequestModalProps> = (
             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/transaction-request-modal/transaction-request-modal.tsx b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/transaction-request-modal.tsx
index 1609864f1..40720f07d 100644
--- a/apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/transaction-request-modal.tsx
+++ b/apps/demo-wallet/src/features/ton-connect/components/transaction-request-modal/transaction-request-modal.tsx
@@ -68,6 +68,7 @@ export const TransactionRequestModal: React.FC<TransactionRequestModalProps> = (
             approveLabel="Approve & Sign"
             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/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
index fb83b4341..db75eb514 100644
--- 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
@@ -37,6 +37,7 @@ export const AddWalletModal: React.FC<AddWalletModalProps> = ({ isOpen, onClose,
             {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}
diff --git a/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
index 627ac268d..34db4af02 100644
--- a/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
+++ b/apps/demo-wallet/src/features/wallet-setup/components/import-wallet-screen/import-wallet-screen.tsx
@@ -169,7 +169,7 @@ export const ImportWalletScreen: React.FC = () => {
     };
 
     const footer = (
-        <Button fullWidth onClick={handleSubmit} disabled={!isValid || isLoading}>
+        <Button fullWidth onClick={handleSubmit} disabled={!isValid || isLoading} data-testid="import-wallet-process">
             Continue
         </Button>
     );
@@ -195,15 +195,23 @@ export const ImportWalletScreen: React.FC = () => {
                 </div>
 
                 <div className="mt-4 flex items-center justify-between">
-                    <span className="text-sm text-gray-500">{validation.nonEmptyWords.length}/24 words</span>
+                    <span className="text-sm text-gray-500" data-testid="word-count">
+                        {validation.nonEmptyWords.length}/24 words
+                    </span>
                     <div className="flex gap-3">
-                        <button type="button" onClick={clearAll} className="text-xs text-gray-500 hover:text-gray-700">
+                        <button
+                            type="button"
+                            onClick={clearAll}
+                            className="text-xs text-gray-500 hover:text-gray-700"
+                            data-testid="clear-mnemonic"
+                        >
                             Clear
                         </button>
                         <button
                             type="button"
                             onClick={handleClickPaste}
                             className="text-xs text-blue-600 hover:text-blue-800"
+                            data-testid="paste-mnemonic"
                         >
                             Paste
                         </button>
@@ -218,6 +226,7 @@ export const ImportWalletScreen: React.FC = () => {
                                     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)}
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
index ed4ee7efb..2a2dd4d7c 100644
--- 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
@@ -37,10 +37,10 @@ export const WelcomeScreen: React.FC = () => {
 
     const footer = (
         <div className="space-y-2">
-            <Button fullWidth onClick={() => start('create')}>
+            <Button fullWidth onClick={() => start('create')} data-testid="welcome-create">
                 Create a new wallet
             </Button>
-            <Button variant="secondary" fullWidth onClick={() => setIsAddOpen(true)}>
+            <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">

From 57e8f61266217b0f857998282b03f5cce6d02f09 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Sun, 14 Jun 2026 11:33:54 +0400
Subject: [PATCH 44/49] refactor(demo-wallet): fix all tests

---
 .../e2e/pages/SetupPasswordPage.ts            | 10 +--
 apps/demo-wallet/e2e/pages/SetupWalletPage.ts | 10 ++-
 .../demo-wallet/e2e/pages/UnlockWalletPage.ts | 21 ------
 apps/demo-wallet/e2e/pages/index.ts           |  1 -
 .../e2e/ui-tests/importWallet.spec.ts         | 72 ++++--------------
 .../e2e/ui-tests/newWallet.spec.ts            | 75 ++-----------------
 .../e2e/ui-tests/setupPassword.spec.ts        | 47 ++++++------
 .../create-wallet-screen.tsx                  | 19 ++++-
 8 files changed, 73 insertions(+), 182 deletions(-)
 delete mode 100644 apps/demo-wallet/e2e/pages/UnlockWalletPage.ts

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..f03f1f1e4 100644
--- a/apps/demo-wallet/e2e/pages/SetupWalletPage.ts
+++ b/apps/demo-wallet/e2e/pages/SetupWalletPage.ts
@@ -8,14 +8,18 @@
 
 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 {
     constructor(private readonly page: Page) {}
 
-    get title() {
-        return this.page.getByTestId('title').filter({ hasText: 'Setup Wallet' });
+    get revealButton() {
+        return this.page.getByTestId('reveal-mnemonic');
     }
 
     async waitForPage() {
-        await this.title.waitFor({ state: 'visible' });
+        await this.revealButton.waitFor({ state: 'visible' });
     }
 }
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..727b4152f 100644
--- a/apps/demo-wallet/e2e/ui-tests/newWallet.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/newWallet.spec.ts
@@ -15,112 +15,53 @@ 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
+        // Mainnet is selected by default.
         await expect(page.getByTestId('network-select-mainnet')).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 (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();
 
-        // 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();
-
-        // Verify testnet button is enabled
         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();
-
-        // 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' });
-
-        // Reveal mnemonic
         await page.getByTestId('reveal-mnemonic').click();
 
-        // The Import Wallet button should be disabled without checking the save checkbox
+        // Continue is disabled until the "I've saved my recovery phrase" box is checked.
         await expect(page.getByTestId('create-wallet-confirm')).toBeDisabled();
 
-        // Check the save checkbox
         await page.getByTestId('saved-checkbox').check();
 
-        // Now the button should be enabled
         await expect(page.getByTestId('create-wallet-confirm')).toBeEnabled();
     });
 });
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/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
index d1ed74ea7..6e5340985 100644
--- 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
@@ -68,7 +68,7 @@ export const CreateWalletScreen: React.FC = () => {
     const columns = [0, 12];
 
     const footer = (
-        <Button fullWidth onClick={handleContinue} disabled={!isSaved || isLoading}>
+        <Button fullWidth onClick={handleContinue} disabled={!isSaved || isLoading} data-testid="create-wallet-confirm">
             Continue
         </Button>
     );
@@ -89,7 +89,7 @@ export const CreateWalletScreen: React.FC = () => {
 
                 <div className="relative mt-6">
                     <div className={revealed ? 'select-text' : 'blur-sm'}>
-                        <div className="flex gap-6">
+                        <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(() => ''))
@@ -99,7 +99,12 @@ export const CreateWalletScreen: React.FC = () => {
                                             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">{word || '—'}</span>
+                                                    <span
+                                                        className="font-bold text-gray-900"
+                                                        data-testid={`mnemonic-word-${n}`}
+                                                    >
+                                                        {word || '—'}
+                                                    </span>
                                                 </div>
                                             );
                                         })}
@@ -110,7 +115,13 @@ export const CreateWalletScreen: React.FC = () => {
 
                     {!revealed && (
                         <div className="absolute inset-0 flex items-center justify-center">
-                            <Button variant="primary" size="sm" onClick={() => setRevealed(true)} disabled={!ready}>
+                            <Button
+                                variant="primary"
+                                size="sm"
+                                onClick={() => setRevealed(true)}
+                                disabled={!ready}
+                                data-testid="reveal-mnemonic"
+                            >
                                 Click to reveal
                             </Button>
                         </div>

From 1df5e9199eac6a6cacd1a445091cefab38cb3932 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Sun, 14 Jun 2026 21:32:17 +0400
Subject: [PATCH 45/49] refactor(demo-wallet): replace TON with GRAM

---
 .../demo-wallet/src/features/assets/hooks/use-asset-rows.ts | 2 +-
 .../dashboard/components/balance-total/balance-total.tsx    | 2 +-
 .../src/features/jettons/hooks/use-jetton-info.ts           | 5 +++++
 apps/demo-wallet/src/features/send/hooks/use-send-tokens.ts | 2 +-
 demo/wallet-core/src/store/slices/ratesSlice.ts             | 6 +++---
 5 files changed, 11 insertions(+), 6 deletions(-)

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
index 1913ad7bf..1b20c5a3d 100644
--- a/apps/demo-wallet/src/features/assets/hooks/use-asset-rows.ts
+++ b/apps/demo-wallet/src/features/assets/hooks/use-asset-rows.ts
@@ -39,7 +39,7 @@ export const useAssetRows = (): AssetRows => {
 
     const tonRow = useMemo<AssetRowData | null>(() => {
         if (!assetsReady) return null;
-        const rateEntry = rates['TON'];
+        const rateEntry = rates['GRAM'];
         const amount = toDecimal(balance, GRAM_DECIMALS);
         return {
             id: 'TON',
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
index 7d1ed9622..8c6a147ad 100644
--- 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
@@ -36,7 +36,7 @@ export const BalanceTotal: React.FC = () => {
         if (!ready) return 0;
 
         let total = 0;
-        const tonRate = rates['TON']?.rate;
+        const tonRate = rates['GRAM']?.rate;
         if (tonRate) {
             total += toDecimal(balance, GRAM_DECIMALS) * tonRate;
         }
diff --git a/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts b/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
index 266230f31..af65b8777 100644
--- a/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
+++ b/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
@@ -52,6 +52,11 @@ 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);
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
index 710f4a9b1..9dc6d69b1 100644
--- a/apps/demo-wallet/src/features/send/hooks/use-send-tokens.ts
+++ b/apps/demo-wallet/src/features/send/hooks/use-send-tokens.ts
@@ -36,7 +36,7 @@ export const useSendTokens = (): TokenOption[] => {
             decimals: GRAM_DECIMALS,
             balance: tonAmount,
             maxSendable: Math.max(0, tonAmount - TON_GAS_RESERVE),
-            rate: rates['TON']?.rate,
+            rate: rates['GRAM']?.rate,
         };
 
         const jettonOptions = userJettons.map((jetton): TokenOption => {
diff --git a/demo/wallet-core/src/store/slices/ratesSlice.ts b/demo/wallet-core/src/store/slices/ratesSlice.ts
index 27102c838..488503f7c 100644
--- a/demo/wallet-core/src/store/slices/ratesSlice.ts
+++ b/demo/wallet-core/src/store/slices/ratesSlice.ts
@@ -17,7 +17,7 @@ const log = createComponentLogger('RatesSlice');
 // (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_TON_ADDRESS = '0:0000000000000000000000000000000000000000000000000000000000000000';
+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;
@@ -98,8 +98,8 @@ export const createRatesSlice: RatesSliceCreator = (set: SetState, get) => ({
                 if (rate <= 0) continue;
 
                 const rawAddress = jetton.metadata.address;
-                if (rawAddress === RAW_TON_ADDRESS) {
-                    entries.TON = { rate, currency: 'USD' };
+                if (rawAddress === RAW_GRAM_ADDRESS) {
+                    entries.GRAM = { rate, currency: 'USD' };
                     continue;
                 }
 

From 83c6785d4e21dd7b1dabbcbe387a58f398fae49f Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Sun, 14 Jun 2026 22:58:44 +0400
Subject: [PATCH 46/49] refactor(demo-wallet): fix extension e2e

---
 .../components/wallet-dashboard/wallet-dashboard.tsx       | 7 +++++++
 1 file changed, 7 insertions(+)

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
index 56ba8b5f0..0afbda0eb 100644
--- 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
@@ -29,8 +29,15 @@ import {
 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();

From 0268f9b9503c8a6f7670f50c1e1900061b03d7a8 Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Mon, 15 Jun 2026 13:13:30 +0400
Subject: [PATCH 47/49] refactor(demo-wallet): fix extension size

---
 apps/demo-wallet/src/extension.css | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

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;
 }

From 9bfd7972f8841383879e6622df6a2519aba3009d Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Mon, 15 Jun 2026 13:30:51 +0400
Subject: [PATCH 48/49] refactor(walletkit): rework confirm save mnemonic

---
 apps/demo-wallet/e2e/pages/SetupWalletPage.ts | 43 ++++++++++++++
 .../e2e/ui-tests/newWallet.spec.ts            | 29 +++++++---
 .../hold-to-sign-button.tsx                   | 13 ++++-
 .../create-wallet-screen.tsx                  | 32 ++++++-----
 .../save-phrase-confirm-modal/index.ts        |  9 +++
 .../save-phrase-confirm-modal.tsx             | 57 +++++++++++++++++++
 6 files changed, 158 insertions(+), 25 deletions(-)
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/save-phrase-confirm-modal/index.ts
 create mode 100644 apps/demo-wallet/src/features/wallet-setup/components/save-phrase-confirm-modal/save-phrase-confirm-modal.tsx

diff --git a/apps/demo-wallet/e2e/pages/SetupWalletPage.ts b/apps/demo-wallet/e2e/pages/SetupWalletPage.ts
index f03f1f1e4..20a69770b 100644
--- a/apps/demo-wallet/e2e/pages/SetupWalletPage.ts
+++ b/apps/demo-wallet/e2e/pages/SetupWalletPage.ts
@@ -13,13 +13,56 @@ import type { Page } from '@playwright/test';
  * 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 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.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/ui-tests/newWallet.spec.ts b/apps/demo-wallet/e2e/ui-tests/newWallet.spec.ts
index 727b4152f..9b9ecdeef 100644
--- a/apps/demo-wallet/e2e/ui-tests/newWallet.spec.ts
+++ b/apps/demo-wallet/e2e/ui-tests/newWallet.spec.ts
@@ -10,6 +10,7 @@ import { expect } from '@playwright/test';
 
 import { testWithUIFixture } from './UITestFixture';
 import { TEST_PASSWORD } from '../constants';
+import { SetupWalletPage } from '../pages';
 
 const test = testWithUIFixture();
 
@@ -24,6 +25,8 @@ test.describe('New Wallet Flow', () => {
     });
 
     test('Create new wallet on Mainnet', async ({ page }) => {
+        const setupWallet = new SetupWalletPage(page);
+
         // Mainnet is selected by default.
         await expect(page.getByTestId('network-select-mainnet')).toBeEnabled();
 
@@ -32,14 +35,16 @@ test.describe('New Wallet Flow', () => {
         await expect(page.getByTestId('mnemonic-grid')).toBeVisible();
         await expect(page.getByTestId('mnemonic-word-1')).toBeVisible();
 
-        await page.getByTestId('saved-checkbox').check();
-        await page.getByTestId('create-wallet-confirm').click();
+        // Continue → "Have you saved it?" modal → hold-to-continue.
+        await setupWallet.confirmAndCreate();
 
         // The settings button only exists on the wallet dashboard.
         await expect(page.getByTestId('wallet-menu')).toBeVisible();
     });
 
     test('Create new wallet on Testnet', async ({ page }) => {
+        const setupWallet = new SetupWalletPage(page);
+
         await page.getByTestId('network-select-testnet').click();
         await expect(page.getByTestId('network-select-testnet')).toBeEnabled();
 
@@ -48,20 +53,28 @@ test.describe('New Wallet Flow', () => {
         await expect(page.getByTestId('mnemonic-grid')).toBeVisible();
         await expect(page.getByTestId('mnemonic-word-1')).toBeVisible();
 
-        await page.getByTestId('saved-checkbox').check();
-        await page.getByTestId('create-wallet-confirm').click();
+        await setupWallet.confirmAndCreate();
 
         await expect(page.getByTestId('wallet-menu')).toBeVisible();
     });
 
     test('Cannot proceed without saving confirmation', async ({ page }) => {
+        const setupWallet = new SetupWalletPage(page);
+
+        // Continue is disabled until the recovery phrase has been revealed.
+        await expect(setupWallet.continueButton).toBeDisabled();
+
         await page.getByTestId('reveal-mnemonic').click();
 
-        // Continue is disabled until the "I've saved my recovery phrase" box is checked.
-        await expect(page.getByTestId('create-wallet-confirm')).toBeDisabled();
+        await expect(setupWallet.continueButton).toBeEnabled();
 
-        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();
 
-        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/src/core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx b/apps/demo-wallet/src/core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx
index 3205c4c24..8bfa2c75e 100644
--- a/apps/demo-wallet/src/core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx
+++ b/apps/demo-wallet/src/core/components/ui/hold-to-sign-button/hold-to-sign-button.tsx
@@ -14,6 +14,11 @@ interface HoldToSignButtonProps {
     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> = ({
@@ -22,6 +27,9 @@ export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
     loading = false,
     holdDuration = 3000,
     className = '',
+    idleLabel = 'Hold to Sign',
+    completeLabel = 'Signed!',
+    testId,
 }) => {
     const [isHolding, setIsHolding] = useState(false);
     const [progress, setProgress] = useState(0);
@@ -118,6 +126,7 @@ export const HoldToSignButton: React.FC<HoldToSignButtonProps> = ({
     return (
         <button
             className={buttonClasses}
+            data-testid={testId}
             onMouseDown={handleHoldStart}
             onMouseUp={handleHoldEnd}
             onMouseLeave={handleHoldEnd}
@@ -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/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
index 6e5340985..c4ced1bf3 100644
--- 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
@@ -13,6 +13,8 @@ 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';
@@ -27,7 +29,7 @@ export const CreateWalletScreen: React.FC = () => {
     const [mnemonic, setMnemonic] = useState<string[]>([]);
     const [network, setNetwork] = useState<NetworkType>('mainnet');
     const [revealed, setRevealed] = useState(false);
-    const [isSaved, setIsSaved] = useState(false);
+    const [confirmOpen, setConfirmOpen] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState('');
 
@@ -59,6 +61,7 @@ export const CreateWalletScreen: React.FC = () => {
             navigate('/wallet');
         } catch (err) {
             setError(err instanceof Error ? err.message : 'Failed to create wallet');
+            setConfirmOpen(false);
         } finally {
             setIsLoading(false);
         }
@@ -68,7 +71,12 @@ export const CreateWalletScreen: React.FC = () => {
     const columns = [0, 12];
 
     const footer = (
-        <Button fullWidth onClick={handleContinue} disabled={!isSaved || isLoading} data-testid="create-wallet-confirm">
+        <Button
+            fullWidth
+            onClick={() => setConfirmOpen(true)}
+            disabled={!revealed || isLoading}
+            data-testid="create-wallet-confirm"
+        >
             Continue
         </Button>
     );
@@ -134,21 +142,15 @@ export const CreateWalletScreen: React.FC = () => {
                     </Button>
                 </div>
 
-                {revealed && (
-                    <label className="mt-6 flex cursor-pointer items-center justify-center gap-2.5">
-                        <input
-                            type="checkbox"
-                            data-testid="saved-checkbox"
-                            checked={isSaved}
-                            onChange={(e) => setIsSaved(e.target.checked)}
-                            className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                        />
-                        <span className="text-sm text-gray-700">I’ve saved my recovery phrase</span>
-                    </label>
-                )}
-
                 {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/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>
+);

From ec2bd67dbdebac8ab7c7382e5e9d86eb1ccefa0d Mon Sep 17 00:00:00 2001
From: VK <heyllog@gmail.com>
Date: Mon, 15 Jun 2026 13:55:20 +0400
Subject: [PATCH 49/49] refactor(demo-wallet): delete kits changes

---
 apps/demo-wallet/src/core/utils/index.ts      |   1 +
 .../demo-wallet/src/core/utils/token-image.ts |  19 ++++++
 .../features/assets/hooks/use-asset-rows.ts   |   4 +-
 .../dashboard-assets/dashboard-assets.tsx     |   6 +-
 .../features/jettons/hooks/use-jetton-info.ts |   6 +-
 .../src/features/jettons/utils/jetton.ts      |   4 +-
 .../nft/components/nft-tile/nft-tile.tsx      |   3 +-
 .../appkit/actions/gasless/gasless.test.ts    |  19 ++----
 .../appkit/actions/jettons/jettons.test.ts    |  50 ++++++++------
 .../.storybook/public/tokens/gram.png         | Bin 6185 -> 0 bytes
 .../.storybook/public/tokens/ton.png          | Bin 0 -> 1725 bytes
 .../ui/fallback-image/fallback-image.tsx      |  36 ----------
 .../src/components/ui/fallback-image/index.ts |  10 ---
 .../fallback-image/use-resolved-image-src.ts  | Bin 1728 -> 0 bytes
 .../staking-balance-block.tsx                 |   2 +-
 .../staking-confirm-modal.tsx                 |   2 +-
 packages/appkit-react/src/index.ts            |   1 -
 .../src/actions/jettons/get-jetton-info.ts    |  38 +++++++++--
 .../appkit/src/utils/jetton/jetton-info.ts    |  10 ++-
 packages/appkit/src/utils/nft/nft-info.ts     |   7 +-
 packages/mcp/src/services/McpWalletService.ts |  45 ++++++++----
 .../walletkit/src/api/interfaces/ApiClient.ts |   5 +-
 .../src/api/models/core/TokenImage.ts         |  24 ++++++-
 .../src/clients/tonapi/ApiClientTonApi.ts     |   4 +-
 .../tonapi/mappers/map-jetton-masters.ts      |  64 ++++++++++++------
 .../clients/tonapi/mappers/map-nft-items.ts   |  26 +------
 .../tonapi/mappers/map-user-jettons.ts        |   2 +-
 .../clients/toncenter/ApiClientToncenter.ts   |  13 ++--
 .../toncenter/mappers/map-address-book.ts     |  29 --------
 .../toncenter/mappers/map-emulation.ts        |  13 +++-
 .../toncenter/mappers/map-jetton-masters.ts   |  47 -------------
 .../src/clients/toncenter/types/metadata.ts   |   1 -
 .../src/clients/toncenter/types/nfts.ts       |  14 ++--
 .../toncenter/types/v3/NFTCollectionV3.ts     |  11 ++-
 .../src/contracts/w5/WalletV5R1.fixture.ts    |   6 +-
 packages/walletkit/src/core/JettonsManager.ts |  40 ++++++++---
 packages/walletkit/src/types/index.ts         |   1 -
 packages/walletkit/src/types/jettons.ts       |  13 +---
 38 files changed, 282 insertions(+), 294 deletions(-)
 create mode 100644 apps/demo-wallet/src/core/utils/token-image.ts
 delete mode 100644 packages/appkit-react/.storybook/public/tokens/gram.png
 create mode 100644 packages/appkit-react/.storybook/public/tokens/ton.png
 delete mode 100644 packages/appkit-react/src/components/ui/fallback-image/fallback-image.tsx
 delete mode 100644 packages/appkit-react/src/components/ui/fallback-image/index.ts
 delete mode 100644 packages/appkit-react/src/components/ui/fallback-image/use-resolved-image-src.ts
 delete mode 100644 packages/walletkit/src/clients/toncenter/mappers/map-address-book.ts
 delete mode 100644 packages/walletkit/src/clients/toncenter/mappers/map-jetton-masters.ts

diff --git a/apps/demo-wallet/src/core/utils/index.ts b/apps/demo-wallet/src/core/utils/index.ts
index 00384bea9..cdf5226cb 100644
--- a/apps/demo-wallet/src/core/utils/index.ts
+++ b/apps/demo-wallet/src/core/utils/index.ts
@@ -11,4 +11,5 @@ 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/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/features/assets/hooks/use-asset-rows.ts b/apps/demo-wallet/src/features/assets/hooks/use-asset-rows.ts
index 1b20c5a3d..afb9a461a 100644
--- a/apps/demo-wallet/src/features/assets/hooks/use-asset-rows.ts
+++ b/apps/demo-wallet/src/features/assets/hooks/use-asset-rows.ts
@@ -12,7 +12,7 @@ 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 } from '@/core/utils';
+import { findRate, formatRate, toDecimal, tokenImageUrls } from '@/core/utils';
 
 const GRAM_DECIMALS = 9;
 
@@ -64,7 +64,7 @@ export const useAssetRows = (): AssetRows => {
                 return {
                     row: {
                         id: jetton.address,
-                        icon: imageSources(jetton.info?.image?.urls, jetton.info?.image?.data),
+                        icon: imageSources(tokenImageUrls(jetton.info?.image), jetton.info?.image?.data),
                         fallbackText: symbol.slice(0, 2).toUpperCase() || '??',
                         name: getJettonsName(jetton) ?? symbol,
                         symbol,
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
index d9a78eb21..c004f49da 100644
--- 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
@@ -15,7 +15,7 @@ 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 } from '@/core/utils';
+import { findRate, formatRate, toDecimal, tokenImageUrls } from '@/core/utils';
 
 const JETTON_SLOTS = 2;
 
@@ -78,8 +78,8 @@ export const DashboardAssets: React.FC = () => {
             padded.push({
                 id: def.address,
                 icon: held
-                    ? imageSources(held.info?.image?.urls, held.info?.image?.data)
-                    : imageSources(info?.images, info?.image_data),
+                    ? 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,
diff --git a/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts b/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
index af65b8777..c6a8777ed 100644
--- a/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
+++ b/apps/demo-wallet/src/features/jettons/hooks/use-jetton-info.ts
@@ -14,8 +14,10 @@ import type { NetworkType } from '@demo/wallet-core';
 
 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 GRAM_INFO: TokenInfo = {
@@ -60,7 +62,7 @@ export function useJettonInfo(tokenAddress: Address | string | null | undefined)
         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/utils/jetton.ts b/apps/demo-wallet/src/features/jettons/utils/jetton.ts
index cb94add08..4e63287be 100644
--- a/apps/demo-wallet/src/features/jettons/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,7 +32,7 @@ export const getJettonsImage = (jetton: Jetton): string | undefined => {
     }
 
     const img = jetton.info.image;
-    return img.urls[0] || (img.data ? `data:image/png;base64,${img.data}` : undefined) || '';
+    return tokenImageUrls(img)[0] || (img.data ? `data:image/png;base64,${img.data}` : undefined) || '';
 };
 
 export const getFormattedJettonInfo =
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
index 47b994777..fc16749e6 100644
--- 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
@@ -10,11 +10,12 @@ 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 [...img.urls, ...(img.data ? [`data:image/png;base64,${img.data}`] : [])];
+    return [...tokenImageUrls(img), ...(img.data ? [`data:image/png;base64,${img.data}`] : [])];
 };
 
 const getNftName = (nft: NFT, formatNftIndex: (index: string) => string): string => {
diff --git a/demo/examples/src/appkit/actions/gasless/gasless.test.ts b/demo/examples/src/appkit/actions/gasless/gasless.test.ts
index e086dc665..eeed4340c 100644
--- a/demo/examples/src/appkit/actions/gasless/gasless.test.ts
+++ b/demo/examples/src/appkit/actions/gasless/gasless.test.ts
@@ -81,19 +81,14 @@ describe('Gasless Actions Examples', () => {
         const mockClient = {
             jettonsByAddress: vi.fn().mockImplementation((params: { address: string }) =>
                 Promise.resolve({
-                    masters: [
-                        {
-                            address: params.address,
-                            name: 'Tether USD',
-                            symbol: 'USDT',
-                            description: '',
-                            decimals: 6,
-                            images: [],
-                            image_data: undefined,
-                            uri: undefined,
+                    jetton_masters: [{ address: params.address, jetton: params.address }],
+                    metadata: {
+                        [params.address]: {
+                            token_info: [
+                                { valid: true, type: 'jetton_masters', symbol: 'USDT', extra: { decimals: 6 } },
+                            ],
                         },
-                    ],
-                    addressBook: {},
+                    },
                 }),
             ),
             runGetMethod: vi.fn().mockImplementation((_addr: string, method: string) => {
diff --git a/demo/examples/src/appkit/actions/jettons/jettons.test.ts b/demo/examples/src/appkit/actions/jettons/jettons.test.ts
index 71fbe18b6..5d2f2acba 100644
--- a/demo/examples/src/appkit/actions/jettons/jettons.test.ts
+++ b/demo/examples/src/appkit/actions/jettons/jettons.test.ts
@@ -61,17 +61,21 @@ describe('Jetton Actions Examples (Integration)', () => {
         // Default jettonsByAddress mock for actions that auto-resolve decimals
         mockClient.jettonsByAddress.mockImplementation((params: { address: string }) =>
             Promise.resolve({
-                masters: [
-                    {
-                        address: params.address,
-                        name: 'Test Jetton',
-                        symbol: 'TEST',
-                        description: 'Test Jetton',
-                        decimals: 6,
-                        images: [],
+                jetton_masters: [{ address: params.address, jetton: params.address }],
+                metadata: {
+                    [params.address]: {
+                        token_info: [
+                            {
+                                valid: true,
+                                type: 'jetton_masters',
+                                name: 'Test Jetton',
+                                symbol: 'TEST',
+                                description: 'Test Jetton',
+                                extra: { decimals: 6 },
+                            },
+                        ],
                     },
-                ],
-                addressBook: {},
+                },
             }),
         );
 
@@ -104,18 +108,22 @@ describe('Jetton Actions Examples (Integration)', () => {
     describe('getJettonInfoExample', () => {
         it('should get and log jetton info', async () => {
             mockClient.jettonsByAddress.mockResolvedValue({
-                masters: [
-                    {
-                        address: JETTON_ADDRESS,
-                        name: 'Test Jetton',
-                        symbol: 'TEST',
-                        description: 'Test Description',
-                        decimals: 6,
-                        images: ['test-image-url'],
-                        uri: 'test-uri',
+                jetton_masters: [{ address: JETTON_ADDRESS, jetton: JETTON_ADDRESS }],
+                metadata: {
+                    [JETTON_ADDRESS]: {
+                        token_info: [
+                            {
+                                valid: true,
+                                type: 'jetton_masters',
+                                name: 'Test Jetton',
+                                symbol: 'TEST',
+                                description: 'Test Description',
+                                image: 'test-image-url',
+                                extra: { decimals: 6, uri: 'test-uri' },
+                            },
+                        ],
                     },
-                ],
-                addressBook: {},
+                },
             });
 
             await getJettonInfoExample(appKit);
diff --git a/packages/appkit-react/.storybook/public/tokens/gram.png b/packages/appkit-react/.storybook/public/tokens/gram.png
deleted file mode 100644
index 62f59d9fb2ac86af23be42b1b7893fe470c9ee92..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6185
zcmX9?cRbbK|F=ixy|VYU-6f;YrHf1U&Pw5?P+6tAl$FuF_Pq8cLPS<(R`}S2gsjUo
zvqvuVyS~52<GkOG*Lj`idc7a-zYfmS_%_QGzAF?I6fAnWD02!5%DBsiftuW@cl!31
zf`ZD#)X-A<wwED1g$Tv3K=3Q@oO$voG=&IGAwux0&=dl>4^3UUJSD$VRv^hM;N)c}
zevC|k$Ie6XtB{mc*@Oiso^T0HS%s#p!texG!U6=p1i=&Fm*8bc;u17wnv8*@tU!~N
z$wvQg2Tdkxu3o~D*8fLY{h!VXEM?_V1ivbqLZ)2mkbTKuFgZZVGAwl!l1cz4lfx{N
z-J$QsE>rz~&XhGUewmz&JOvCtFPpwDo3sv1T7-}@TqaqSi6={u>s1(;n7jffizky8
z0g`qZ42&lu3FJkNL3aNik^sGQx%34mErQA6la?S!1bEttR0>g&Jb2=QM9efSo*;9{
zB2&mAm!OF=(lHBic}M^L{UZ;UI&vnLdkD+ef@kf><sRsNJcgzc<#G<7scW#*wf#ST
z)ryZ{X&dm&-|)<BSjHwSZCx&BKV{?$p0g*Hv$t|^(NDa9Wp1w={B{0v0!t-U&5+<(
zyYQ^v@Qkg9|NaDY{ply3!?Snc*?U#9Bv|^UbHmAx?F;{|Kd`Ldu+(*U&c1i+Y2hSE
zj*Q7YfamVR(l=lk8`hss3MbBBX+*iK9azRTJY(Ct?G%=_7Wv<w*2VMIMUr*(2`p>J
z`txz&1PPw82~AyxrEj$^o&VVWE0??P)k?NL4e0&@O<OOTB(*M)s%J<R!n5DVU;nv}
zxv>R>$oxDzr6Y33v8~N3Cumm#fMnm<(fs<g(jiVX?~_Kb8E7HbJ7;8fcX&ZgGiPKt
z_gbK%SzK;VP;OvcP*p6z)XU2=*pcd*oLoYC`|!2g*w_&>CnwY3gps_woW)Oz!&M2v
zd3mNHqVk|?*D6Qi<>jR_SaT>SIJxvt8kU%!TbVPS<Bxd02`(Yiix>wj8}XX8#z}g4
z^tBr$$owYcLsu=Tu5Y0<9GXFjMl;<m{oZ4;Zn|T32E*HYtSgG6zr84_-`{&0I4dA^
zXy7&85Oc9|Ks<Rh)iF1I;`@tO%Q1x8&F<|&xi;4-vHvIrc@+GWyUO5G7p}?iN^A~6
z|09w}!kKQ4`Ui}PEaoAftmzj<Q$xN@sR2}#c({y!LL1C;g2&!Lv^7UGCfgiPr;-C3
zny2NIZ#tD~Z0rZzA1Z*W%cbF#BiA?BG9t|56w<b=Jj`Zs?L&?<j~?#qsx1pTWwBRQ
z^M2XY)TE2Q&Z+V_QC@IajUDouW7%J(4!!?A)DR>SHZTcpk(QI8TVtW?n6L;ga%I<!
zSt;#Q-+gg|{`)s>-hYMqQCt5>R;L=N+*Jbq8un9mlsf$@763?$<P>-2Fwc8z>0#eY
zwOU)o7pZ#fDWC{#-chfSs9)T;Qi<K+WCVa<o=~(A?CmSJb2+O#9Yc*!vueFeDgTzt
z{>2bMn`jkUrLaMsNrGl%29rL)%BEOnT#507r71vpLz&ZihwrHhu{A@~I41M0bY2{1
zKZ=C-y<d70okqwEl_qP);v%Wkf$aTHWw5GA+t=3Dh_lFlVcP;J?8#j@&HNmmOg*Zk
z*fxV0s(hY5$v4HPca#JPgsez^y|YT31bR4*8mj=)E7al^9EvZ@863RQzo@J?g!xe#
zEcN1<vN15c6m)9|?$UF$L)jz&AlyS!FuMOpDMUaY(Qn%LihehL(>_UD%&a38$EU}u
zBJc&$ms;QtUh1~}jae1gx$8ckJoos@H4Vh(mj7mX8^P)dnoebXR&+0^Q=o~HV?gDF
z?$Fs@Y5!I4+pLTZ`mx<oSdHICsvf!^Gl5lRph-%&^LLqLZ`&I}QLKHb3S;MdpO^DY
zfUyt8GW+&MD(`M<xcs;Sgj<)h^+{wuZraBWZ2_NAnn(G~G;UPJuNu0%zFC`0@ae1Y
zN^k0}(^-p(4H~Mje{eTT=<)J0<1^k9X_f@6u&4F!rL;$PM?;co*{XWSWeA!}Dgxp@
z-M-9Ul6W3Q>`u+`2%r7@)nfr9-l#pUin1T5p41IT_>^1g%+QmfyEZA+knxX=T{k_9
zH7joa=N6G!tPu;LvaJ63u<S#G4^DfP-L&fIi(sK#hBb`>&^?dJkXp~^dxPW4o-~%C
zDOV}gW-G`iDIh6itY1W?)C|2w?7cX>8>m?B<Fd0RtEP9ELL;}L4gr<)hh7DsbEA>Y
z5|9?c<<`_<>yz{2ncHjr;l&Ik26mRbqWQOh*|&L-`Vq1kLsotZzT5Y6HiSOCXpi8U
zhf}IC19Q4wbbSkZ#Y;(NJBfE7S$!0CT2!)_rmmy&W2Ss9@@ToVR+#HP2LY8_R!4&s
z=7Lz1;f>mdo&>9h1gY&0ymxG4=04GRdjWL0<{~=6&vcwSK}p5UF|K>P3(L*tR}k$#
z@*fYQMvy6|SOL3;RaY<Nrm@Xsq5EBSoR9sE2$IiJ>^4+2?W^8sDG#Haiw%QoT+N-P
z9g3&TliRJ7Ow3Hz@7ozN@msM{TBTX>^KjjJKfxHT&33|9@lO56Cy2z{T0uO!rRL`5
zq75~UHF*RrpRa$z1+U;}^K!O^ibbL^ih}72yfiA^$Va*HuF22y=@Uiq#(NK)nSohC
z@{dSo6ylBkUjjzEf{^($q2)&}Y<$;6-5(uobKkj2^W&?(f*2LJa!_o{DW4<ZzAp!S
z3Xk7Ekfj2c9~}H!armb|+CO=eS;IQ2CNln{(n51ww<RD`<bwBDBc0w^6t0+6MBB0b
zDeNcZpNCqxZ~ye5X7W<TC~Z$|zcy$C8Dkk9QYZ8>Sym;9+yLD&Qx+NaPH1|hyNeab
z_do`4N;~6!VD05>#`IWveeUNb9Jv9-(9IQrC|BhB8#MaUB6+%#YuaVpYz*XormQz=
z6u>K@DB?*IVJqb`+Bi7Tt+h6A6Kpyt92(Q=9!@8IJ2#6d=^%9g`=)<l(LSj+qywd&
zn`!yBx8AMxfKJ~DIL)e_(x9Rv$@0dL&~O%LH7g`icm@6bZ%8Q|yVcCt4rq4wQ0ck}
z=dr@EINxB?Hakz42^;S0&f;b+8-U;jPb^yR7lt@Fjf3`RgL)c%zPU5&+y1G}))QU6
ztiZ*?^(Y!u&bA}8?r3x7r`!5*S;~Ue8Sbk=Ygi^fIpg2-W;|eQ`vzp}z0wy0P8GMd
z2NDrD*7tYXA8*SpiJ5BRX?pg;gIu=lwbfy&Ts-&~Vz1TT@;_&Nf=3QkX^Q2Rt?_rz
z0Y8srpB27;F!;&UCQvjK=qc^*hgFMgegIW8V2ggyt{BVkn(J4U6>oFeKmjn8PXW50
z{i4&OC*6I&@4EH}w?&T<&oIa@L!i~UMzh2`3)`|)@Avo{o_!8o;d67lyD_gIVG^BV
zZ9|`p=V)nPTP3}Y^*BmNgb4Y9_c76}OjnM}?^mRIexJYiwh(_p*<n~LtwvIxUHr00
ze`+ggaU+q|vb`-S+uyo|d+|ugKcYo!2T@7@6uCI)y`IvjKV0QO?5iX16qej1Ema4Y
z)*n{LV+ckzUpCaFs!x|pj5t#jAojwaT+Dor?*;r@No3RJ#9iy`kf8Z&Onj#!ZWboR
zDau5}8535<5au$k$O;e;-D=@Ex%JxRfd39>_})0K2uazl({)uZ4;XcG`iWx^PMCjL
zpBrZXMInW2b7D0{m-l9(vE)NKRde9>w?;QdN=VdvU}|EYQ6R5p_{;Fuud@&Qa%e@x
z#T9Q2k+O-t!(WIyTixHDq-#e?n!jQCpvU5{!|=<e|9ZTh9kwXMJC)tX<aZ6+IF#Wp
ztsOS)ZL*SRmy~%Gxgl26gZ%}~BFqULE3viHtn_`|u1jI89=HmTwW@o>C@H;3{e0FS
z%*d19k2~XrgbC@Few%AJwC0r@3|4}zW6Ho~{&(mDPGkIhH<U9TVh6U-dQ~NT_ea9{
z)lR{_@z(nFjYA&;TJZF8P7xOgHaao4ndvEK{z*<$s~l_fR@1ttIHSproqIhxKt_5u
zYxcsgGa@>U8_GpmuX!DYIXb+kD-%$zdPY+5WmhwrsBj!Tb2>3-ecm$f?;@?B$2ZtQ
zy6a+5>{>OLJ~QV$r<9nc_>*)#Oe(o+jq{&=RMl5)_9>xz+m&Y9M*{6oXDfUhj2M;^
zUwfMzwb!aK>&7519fh(tvA&`_!QYQBEnoWBxI+`B_~flPcrEUgJAm&&$+S`Px7I@2
zoZ?qZfvhSDdUffepG$wbVc>QqWBxmgFIz+(Nk(U7LNsP8NV0abN{GeG*CDRg8U_lh
zQkhuvt>+B3`dd#het<=i2$NO4EmHH|NnEbi)iwLaTKk#vR&1q?FY+}HV=HM^$`p6H
z!$TixG@5zv-O8$5d5XF}5SS}O|IaA(9sT^&HPG;p=WE!zAEO!Cl)N$~ZYu&`O%|B6
z4%XbGNguphZ!Z+5hKJUz%zbb8+LC;NBCz-9QXBZ*od97Fe0x&5&+0aKj&@h;o_ySH
zeq}Qlp5q3yQX~30k$$#sOd%Y6J=Bd6NAg1_LkXFos`S2?TRGikGl!?$0o5FI4c+d%
zk??ziE=7B{J1aG48O*FkJU>*_E}!csSGrF=X6rT!3Jthb>>XHs&)VLAMu?Y^VH*8c
zukx>H%TEt1O1UtSvsLxM!gfe)&mKe3hEqaMw~Dq1R(RB5J>o>W08jAoHm1OyJ%@hG
z$~WNLSY;6>9=7mxB(B9KAWWu-#bMbLXfzH<2>RuJ0XC;M|JZ*EHrwmXVRnc1?Gow@
zuB*DTg+ko=BEU#<f+|v02*tzTmwRF8qSo`oZVWk+PZd|&p>uuLlq%nZa9=~~5k{AC
zRI2)pA)bN_DsqNO*oZr|h@(ehjkf@QJ|H=$*!CbyP<^}jAJlA=BJ5_LL4s@unjj=<
zFygy}uNT`1wN3*a&iTn?on-8m;hbcAIj0+LpMrr{%?#|bi*J->t1zYP0>z8-efO+J
zD5ogRkY1?C>xtj}Y?qHvp1IlM^yE3J+FcF5((d%6LM&A*A=*T>5z!Fig=M<Qg{x7h
z!hzUeTlOpZ8A_n(bWWy&1^pSC6m=uu^iYkDp3s{Y-r<!BY2xPnsqEK;r2VlQa>A^i
zbZNk2maFaD1G?Pq!1jomP~SMH>Z=&AB^}P|v`%&)L^^U<fmh-!=eq8}!hxa9i!zkm
zn>$8$dYw6^i9w+43~t#DG(hcu`K59~J2WB$C>*4ASer%7W0O$l`wOE5hfI$o06B<H
zqRpdLz`YLYkMFN{6_I`=U~dUAd%emjYY<FEA@&{b|FBR6$lx%9cE!Tt!?H*TfG6Vg
zko2%;c}@ZVN3h4f{h}Y3aR<298)C#YQ=Wj85<*211%^M&$LNEyF}spKy07;31*HEE
zAs%@<Rv+{iBWL=`=jhU@c~r;Rf!z9q85v*SaL|ze1S0Y?5XIT*Cd~rLsPjFn)!Mq6
z(eZ82r7x!W=0w_Gv)lwMy^!+`Tt#uFK3oET!F&q)?0?m!)3YFf0fG3@k;poDNIm~g
z4S+dy6)hIX$MpiLhC{eOBPfylcCFm75folb26XJ3n_Lr?%bSU12aph_8v{=gJ&@yF
zwyLPD1Cd_U4Z0Wc1yYxrg|B_LJxsY%ack^k8H*N|xj@BvQYQ<PEaBCfw-nd)jhkFL
z7reUO;u;ZMNkx_$k<YmQPLj>yvm*8fvHkGaB4t8qR_VJ4I*0!H1!u~H+haT(8CGIL
z6y%fJ<bO=IX$Ui#Dz#+?EQp#`mDp;MJGtnGN}cKk;aGp6GRyL)U)}t6l2mN8bA{-K
zirU!^vltMe_Idd?Lb1L=%${J6)K%p-XgmYLS$5L<hT)FaDJlr-E;Mk38`hAg8o~(>
zL8sGy?l=+D9ANnu#mo`>&e-7AQrx3ARDe!|oTxw?KU&*E#|rmVtGTE^=4YcCXxH@d
zdWztf`zCu;5B1yvdeKy{^J9iM725^gxC1i<0$`-KeTnlgb!R?mb#bxPRNporf~lDJ
zSFvBU9uGIkEgpaGfdDK}3wdqC!QXE@)5NG^k!XnGpbHIzJ^0-$)#9Y3+$uXL9P<fj
z+~mKmHjqaN+Ksy_!dai99I$`%f`d$LK*luqZvYLtC;%9mI^>8b9!mx>xCiH6`Cl)z
z0ciu8=MkZb72#%R4CQ7_W<Ye@7kOI46`+Wu5z>IM`-G#wx@1aVu;bJXaU9L?1I|SC
zx9@F1i@@M_KXZ4X#Ba7BgLG8KYE_qjvv|u-(v$uvE%KPtw9jUvE5Pr(-#tT7t$K&h
z%I6y|uy%r|*e0Mm86E<I1LIR#<lQuMr;y)(IDK{n$e7pz%=Th78lMUgrD9XKd*A0}
zaH|j<0AsVU<{G1GkbzZaQ$2I>cr$3Zws}S#uXM%mws3!CCA}t%(5kBHS$)gR$8Lm(
zC5nJm`LwF2_)r=>N9!6Kwt7LmJOVBJQu|8(ThFi}c#%m{lIFTs>HyF3%Y->(oybJ}
zdp6(R2eMlR?f8It)}gPq{3EG`16f~)C!Bw0588;5q6Rfly4l!sU(8XSp#OmXTz%2e
z`aj<{)kP~}`6G^+^oliwhdn*R%a~V>ihUdbk>U8Hn16YQ0JXYt)lXO*Edz6xwzej9
z!M3bv;FFQB`r9L*w#<tcPYpimQ9nT&Ec*3I-edgC9;+$wW*q(CIhx<5M(D5G=c;>X
zM<(=V!AS=GL<3KoJ?ZkWR}R<zMq48@Yg8)Y`>qt0Xq2-y=tzR&xV@sEpc1I2!y7nh
zJjEWkJwUD@(H{Y@<JbEo$fdfs!P$eqS0b_v(e?e^>i6>kX)Vy+Rj~(!HgxjQ=v(#E
z*dgyVM(}SmG5VsF-%mS4Mn1mM?xe}liS_*k#UGZ3DB}kuBgHQ#_T66=ga3O_`ciJU
zeo*JsQ)V`J9sJZW*X?r?yxHUhh9Z3drPHtFN|A}x_Z?B~0Fyr2|F`VaoVlEQQ9;{s
zN+UF4KtOp6Q|EjQkynnNIl$0;#q}oBOXWWnN@AF=4R1*5fdCi%on8N7_ZLvgY{sbf
z2v;pay@TI;k-t|sj)D2`lmk4oClhNsMiW?SkTZ3KC5U4Y;W2hy&h(bGpJ4feg%5P*
z(px0~(^sb21qGd}BJ~6N4}t3>W^;)#i)!6waG?W1SIoK{sntFoTf@&Ioi4&_RPtwX
z4Ro)Pke}QM@_rho?Bs8w+Uv@FXGXV~ZsJQ+lnV3rWZt_Tg4Es6IK1RlzPm#b6YpxS
z%qZ3+HQZaQV|{irwV+n*qP}d2DK1;`s<L=?EYFYcB8;rpw&#9Ny4g##>tl4!6D@^f
zBN%acch=(yk1&w+IB^}jjKXcUT3<A)-j&L`#vGNld~t<>z$xQs;|FUP@x8e3#^!fc
z8<O4?%A@>N@#D<>_Nj4>X<CMTv(NZ3+otcF$6I4T>*9@w^O6B!jeTCw`kk?urIM!_
zvd%BB^~Ga$_Uyc^-_?wiUe(iV5;)n9qqCH_ss~*DWT=~=tr0H{jY(j1a~20D1kOKj
zeGbsI6I&Nw$&XxO5|N21B>n_$l6Za=Dw_-Ib*jZTtL{#KN*t>~fhHBk++ujf($ngQ
zXF?pse<;ObjZAS?9~}!PQ!09^FsbwtZ`{kB3Pn5DHokB0$P8}g78Y!%J{-$-;~TVy
zDsQ{4anE;|b4Z>;U(DQYLc`2*m&!%H$<^HK`8fk5u3$9m=y&H_Q)c9E7q{l?3SU8K
z$(}MCTN7tP-#gc)jN`{J%_Zk0d_#q2g1{WjG#wuGXMAG47vk)Cm8;)=9c)LgIiqAr
zhz}k|Yy4n=`#zSlnDk$6Y>!)1LALc)ffO%`4L#aIZyYs#4CqM{kN7R~%kt;&UM^pj
zab8^GygQ4ky9+_2`ERav@mpiMch~SyDh~IxG>tDjK2Go*-pr~a`X&W&uldl0L|T2^
z%rR%z?fP{NNcl$N^Srh>I57|M%-8W+uYj5Z%(Hwsb#m$$A6@?jhEBO*%~d_Q)_%3y
z{AK&;AC^z+WAo|5(P1l3r>n1rvL^*G*jQa}YIEdS<rf65-J;SItRWmfTP0u6Qs`+L
Kqbf8V-~JyrmDKeB

diff --git a/packages/appkit-react/.storybook/public/tokens/ton.png b/packages/appkit-react/.storybook/public/tokens/ton.png
new file mode 100644
index 0000000000000000000000000000000000000000..109900c3c8213a2a8f263fe419042beaea3d2f25
GIT binary patch
literal 1725
zcmV;u215CXP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF000JrNkl<Zc-rk+
z%WqU=6hHSdZ)l4UsD_77#8?3nsAv>+x^O2N1^xsh#up%pwSpFjgqW~E7bLneaiKN3
zVQVxIDh(-85@MA{7fK2CIi1&?`+0uf{qD?kI#Z^dXYHM2V0!QQ&N<)jobSBuHR+3C
zL5ujK(<1+P0C)g+0C)g+0C)g+0C)g+0C)g+0C)f_%8yw|W*WX)brlxeyo*Ky0DCsr
zm#j1^m#(me`GRzfOoJ$GS4K?P0Knp~iWL)NhBR8=Vp71+<h6?Ko#iAL-0S0MDT@MH
zMt0o*kP6r&O>yXn2))uCq%}(nGOBb8;9NtKX*x3yr<0eaNU$7DFAoH5z9TV>lnXKd
zJ<m1K^A84`GfJf?r00QTi_!phm-Spv&<p3rWf;%sQp+rWGfxRYhqs62=HZ^OkUFOK
z{AR$)0pwm^O?d%i?Oq?CceaJ44u)RiBLGDZ@cdz&UVSv=Fk%hi`lCrfw<gm3cVVl*
zJ3#wTbM~lUQ-6%{*=9E=ltrXG_O!K24Qlac5rpi|F2^XDcGiiS0RUl^piRq7S{>1)
z`(iV<V>a#hZj^3~TQhw;<LgArI9LwuTTb@{9Ga1YO;7fW&{$j)_emDAuGysC-7T~-
z<j7pJM5j$H23;9Wk>;CU;4P~VGV}I0nR2XOZ1Y;)|Fh8)3K}<=H)PDFLrnmXNVCcR
zVukL;ZMokRTehvqpx3s9<hk_eg*~U(HZ}E6p(Ef^@#b~ry@6#w7Gy#;bf7ZQ?)(4%
z@?4CJPuTSJU_yc7Xz&3C#pb0trL38o$to#|GS1%!cz{<6^8{~)%prno=uj-)RP_kR
zw8iJ{Xx|i#vUU7yg(O>MMNp^r5uN!DvjX*i43x~Pb9;nihAw6J+58B$kPRK|dNe}-
zz~m5mchsV;i_vM0{pQv%wXO6~iqETF1_)Sd@kTeU^3fYxLepeGCS*egThyr=L_JPy
z@zcM@=*qvAJgdmjuv+(y2osbiKv!AgIP=m~DGV6{BNm<J^at5#yN>O!aHB9=`r!F!
zrXGMr_Ou0P=UTtC;CxDBLs@^<IzPR%A>eqNa;F2oMx{(sE59Ksdmdn+2H<>t?#~4M
za5E_tPbr@~!TkZvQ%Rw;lRU`b3En@l49J2^OEkzp#8vjt`APX3-5@Hrr(1or=iwmP
zT;P~<kOW$+*~@F6;`0w)vcu$i2U!N`mFu`G0ssu|;}Z4SKPfuZKc&iBM@7T}BdE#J
zxs+iEXh3W7n(oIV(|Dcgk4YJjWs3$IiNQ+5Y3dlKreQ9LVKLO`D30FRil(Ksv?ytq
z7MTP^Pm*^EUf_AGFDhkNHc`XP1l{6jV$!A~y(%p#lON%_U<D6Kl2%U1SELRG4QOR8
zAulN&zeOc)$PkS>6oq9p4o+vU#_8gnY+7t)m+e9oms0(5fh`CZ7pCdz2vZZUanoKO
z^E%5z5b&;~^{X-!mYIsf^8o}a%BHUUn?v--Dy~|RD2}wk6(4WDz15`sIW0CmZ-bXr
zUQtyu0MOf;Y^k4aB<UNZD^@z5b}Wu^7SXHFM&xl}y3TD*;ESt*3Ov9IJkw%<JQt8&
z%4hZPg{bV@f~s5Fw=qEN_xorpuQ)Pz^W$9PZ+^f}dzl8bScA3T0bVxI!g(+v(;_!1
zH}0h9lS@uoOxSL>7;z>)1>#4i3Vbf@30?~x;AM*i_GHLSi^q8rLma(fQMW{XX0@M2
zl3AOM^6zK)+RJTD$qQPn=>~WePJ1;2z)g#ZDVyHyom6GBW5%N$5zhBoPVU#}!;Y{5
z&Y{5?tgUp~tJqk4E?L3m=>GGI%V=k-Q`QzMi`{#_aJ9GV+Y!>M==wE#IO?W-*}<uC
zdZF<ZuDRoFNh@Zb9WEFE+_ZRMC`n&ki)Uv0h3IhaOQr#BwbEW)9*;{m<{IcdE|H^_
zm@&f>ssqG5Sw@#R<!ML&kjnn%snN%MQ`sz$n=$zF5#IxiuLfto<}XNCYJB!7x66b4
z6bLmwTpVBg#<i1ZrGwQ?dvycAb#ptB9iM4AeIc&lo~c(i?bY=a8CX{5;P(AsoIbxA
z%RKZvGZ2&4^eS|Fb*}@8K2~Sne~d@x_<fn5?V&j+=P@@m!aG8x9tG+8Jo@RsopRhz
zJ=hcr{UxcnfPf8S<E6eF@xKCKE^mc+?+JPUcmQ|+cmQ|+cmQ|+cmQ|+ROj;_<$~E!
TL)vg*00000NkvXXu0mjfVh%i>

literal 0
HcmV?d00001

diff --git a/packages/appkit-react/src/components/ui/fallback-image/fallback-image.tsx b/packages/appkit-react/src/components/ui/fallback-image/fallback-image.tsx
deleted file mode 100644
index fd6801d91..000000000
--- a/packages/appkit-react/src/components/ui/fallback-image/fallback-image.tsx
+++ /dev/null
@@ -1,36 +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 { forwardRef } from 'react';
-import type { ComponentPropsWithoutRef, ComponentRef, ReactNode } from 'react';
-
-import { useResolvedImageSrc } from './use-resolved-image-src';
-
-export interface FallbackImageProps extends Omit<ComponentPropsWithoutRef<'img'>, '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?: ReactNode;
-}
-
-/**
- * `<img>` that walks a list of candidate URLs, showing the first that loads and
- * falling back to the next on error. Renders `fallback` until one succeeds.
- */
-export const FallbackImage = forwardRef<ComponentRef<'img'>, FallbackImageProps>(
-    ({ src, fallback = null, alt = '', ...props }, ref) => {
-        const { src: resolved, status } = useResolvedImageSrc(src);
-
-        if (status === 'loaded' && resolved) {
-            return <img ref={ref} src={resolved} alt={alt} {...props} />;
-        }
-        return <>{fallback}</>;
-    },
-);
-
-FallbackImage.displayName = 'FallbackImage';
diff --git a/packages/appkit-react/src/components/ui/fallback-image/index.ts b/packages/appkit-react/src/components/ui/fallback-image/index.ts
deleted file mode 100644
index dc0966bbe..000000000
--- a/packages/appkit-react/src/components/ui/fallback-image/index.ts
+++ /dev/null
@@ -1,10 +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 './fallback-image';
-export * from './use-resolved-image-src';
diff --git a/packages/appkit-react/src/components/ui/fallback-image/use-resolved-image-src.ts b/packages/appkit-react/src/components/ui/fallback-image/use-resolved-image-src.ts
deleted file mode 100644
index 29b2c64f78300fce014f1205d8f9b5506ee82414..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1728
zcmbtUO>fgc5asM&F{j!NiBm*R4QT~c4v_*vO*ut57<-&7b$6@Xb!k-c-+B9yv?)bJ
z!UuoszIpTJ?Tm-LUP3*(P`4W`R%=UHmD81yS6r<N?6}RVwJ>B<rz@sP)lB$oMa9x^
zO`WV+lU*}?o?h*isZm%bA>D?fm`yJxU*;2PM2m30Oj;>Rwa{Eyr8lG+fFBcC%^U>`
zlSJIyDsAb3I>WPaqdGfj8U*&;!rYdYX-kb(H<W5FE1QlEW2QIdif5{<g<Ls!XZHA_
z7`AGqh9DXU2OG2jH!vOus+iqwZW$8(k1OGOUy6{HbyLF9OE#*#<J$AmLqfQQJ!d<^
zFKsMUrL0BminQy}lG6w0O;=THOw+aPrcX-yqiBT0*3Y%`Io3f#5)GAYOHGO8x}e_B
zCo#G@C1W)_p<j>Dqp<0VKYgLvQL;^vN=XQ_Y9{a)Q+CJ|NEgeewD~R<md9s4NA^+c
za#IN7pN=D^bHamw#r>QXcr5X?Smp(K2bN`7r(1C0?)oswAD_`DrCKhf-_CLTu+Vj0
zbk}!iaI-Vzch`mPtV7Qz$<DtUrP1JfufJW+OhJ>fT0bs2Mr6I!91dYbN_ty6gk~ql
zCoucu_&x3y^RKu|wm+4=&V72x_ZE0RKX4r<0lML?A%dgm!h?R8!-jvg_aG1+$6gA=
zVSWwB!l8M$!%+voHE*yPVZ{$6WR|{3os+I117;yG?e~2$Y^UxGC%GTM>=;-FeKw+5
zmOCxG5WxDhK(gf_b=7Ij()Ci55OOV_N(=)Ta{f7mS)|zUzO3WHYjip>6xoh(Jf@Vj
zRyw7lBmAIH8-3U*DO#2*yQTrX%cG|*-d+2uvb(bF*jMV`=q<oOyTfgL)-5Uz8T%mz
zob<m{6I1Lx@!AfyXbg?VIcc_?miP@}GB5>D>PH?-abQzXx17>8B!6CHXxsETPqgj{
fO9cLn=eb#D`*S;R>vgq}D9U{uAAf4TKm`2;NCq(t

diff --git a/packages/appkit-react/src/features/staking/components/staking-balance-block/staking-balance-block.tsx b/packages/appkit-react/src/features/staking/components/staking-balance-block/staking-balance-block.tsx
index 4a1702b4a..36c8621a8 100644
--- a/packages/appkit-react/src/features/staking/components/staking-balance-block/staking-balance-block.tsx
+++ b/packages/appkit-react/src/features/staking/components/staking-balance-block/staking-balance-block.tsx
@@ -61,7 +61,7 @@ export const StakingBalanceBlock: FC<StakingBalanceBlockProps> = ({
     return (
         <div className={clsx(styles.container, className)} {...props}>
             <div className={styles.iconContainer}>
-                {isNativeTon ? <TonIconCircle size={36} /> : <Logo size={36} src={jettonInfo?.images?.[0]} />}
+                {isNativeTon ? <TonIconCircle size={36} /> : <Logo size={36} src={jettonInfo?.image} />}
             </div>
 
             <div className={styles.info}>
diff --git a/packages/appkit-react/src/features/staking/components/staking-confirm-modal/staking-confirm-modal.tsx b/packages/appkit-react/src/features/staking/components/staking-confirm-modal/staking-confirm-modal.tsx
index c73965bd9..461bdb393 100644
--- a/packages/appkit-react/src/features/staking/components/staking-confirm-modal/staking-confirm-modal.tsx
+++ b/packages/appkit-react/src/features/staking/components/staking-confirm-modal/staking-confirm-modal.tsx
@@ -56,7 +56,7 @@ const toUIToken = (
         name: jettonInfo?.name ?? token.ticker,
         decimals: token.decimals,
         address: token.address,
-        logo: token.address === 'ton' ? undefined : jettonInfo?.images?.[0],
+        logo: token.address === 'ton' ? undefined : jettonInfo?.image,
         network,
     };
 };
diff --git a/packages/appkit-react/src/index.ts b/packages/appkit-react/src/index.ts
index ceef9e4b3..c9b9bc891 100644
--- a/packages/appkit-react/src/index.ts
+++ b/packages/appkit-react/src/index.ts
@@ -15,7 +15,6 @@ export * from './components/ui/block';
 export * from './components/ui/info-block';
 export * from './components/ui/button';
 export * from './components/ui/logo';
-export * from './components/ui/fallback-image';
 export * from './components/ui/modal';
 export * from './components/ui/skeleton';
 export * from './components/ui/input';
diff --git a/packages/appkit/src/actions/jettons/get-jetton-info.ts b/packages/appkit/src/actions/jettons/get-jetton-info.ts
index b8acc5815..e9a805d32 100644
--- a/packages/appkit/src/actions/jettons/get-jetton-info.ts
+++ b/packages/appkit/src/actions/jettons/get-jetton-info.ts
@@ -41,13 +41,43 @@ export const getJettonInfo = async (
         limit: 1,
     });
 
-    const master = response.masters[0];
-    if (!master) {
+    if (!response.jetton_masters?.length || !response.jetton_masters[0]) {
         return null;
     }
 
-    // Keep the requested bounceable address as the canonical identifier.
-    const result: GetJettonInfoReturnType = { ...master, address };
+    const jetton = response.jetton_masters[0];
+    const metadata = response.metadata?.[jetton.address];
+    const tokenInfo = metadata?.token_info?.find((t) => t.valid && t.type === 'jetton_masters') as
+        | {
+              name?: string;
+              symbol?: string;
+              description?: string;
+              image?: string;
+              extra?: { decimals?: string | number; uri?: string };
+          }
+        | undefined;
+
+    let decimals: number | undefined;
+    if (tokenInfo?.extra?.decimals !== undefined) {
+        try {
+            decimals =
+                typeof tokenInfo.extra.decimals === 'string'
+                    ? parseInt(tokenInfo.extra.decimals, 10)
+                    : tokenInfo.extra.decimals;
+        } catch {
+            // ignore
+        }
+    }
+
+    const result: GetJettonInfoReturnType = {
+        address,
+        decimals,
+        name: tokenInfo?.name ?? '',
+        symbol: tokenInfo?.symbol ?? '',
+        description: tokenInfo?.description ?? '',
+        image: tokenInfo?.image,
+        uri: tokenInfo?.extra?.uri,
+    };
 
     await appKit.cache.set(cacheKey, result);
 
diff --git a/packages/appkit/src/utils/jetton/jetton-info.ts b/packages/appkit/src/utils/jetton/jetton-info.ts
index 654dd376b..1a5d77c19 100644
--- a/packages/appkit/src/utils/jetton/jetton-info.ts
+++ b/packages/appkit/src/utils/jetton/jetton-info.ts
@@ -40,8 +40,14 @@ export const getJettonsImage = (jetton: Jetton): string | undefined => {
         return;
     }
 
-    const { urls, data } = jetton.info.image;
-    return urls[0] || (data ? atob(data) : undefined) || '';
+    return (
+        jetton.info.image.url ||
+        (jetton.info.image.data ? atob(jetton.info.image.data) : undefined) ||
+        jetton.info.image.mediumUrl ||
+        jetton.info.image.largeUrl ||
+        jetton.info.image.smallUrl ||
+        ''
+    );
 };
 
 export const getFormattedJettonInfo = (jetton: Jetton) => {
diff --git a/packages/appkit/src/utils/nft/nft-info.ts b/packages/appkit/src/utils/nft/nft-info.ts
index d15819a7e..7added6e9 100644
--- a/packages/appkit/src/utils/nft/nft-info.ts
+++ b/packages/appkit/src/utils/nft/nft-info.ts
@@ -13,9 +13,12 @@ import { middleEllipsis } from '../string/middle-ellipsis';
 export const getNftImage = (nft: NFT): string | null => {
     if (!nft.info?.image) return null;
 
-    const { urls, data } = nft.info.image;
+    const { url, data, mediumUrl, smallUrl, largeUrl } = nft.info.image;
 
-    if (urls[0]) return urls[0];
+    if (url) return url;
+    if (mediumUrl) return mediumUrl;
+    if (largeUrl) return largeUrl;
+    if (smallUrl) return smallUrl;
 
     if (data) {
         try {
diff --git a/packages/mcp/src/services/McpWalletService.ts b/packages/mcp/src/services/McpWalletService.ts
index 48fa83e82..bfcf4bf78 100644
--- a/packages/mcp/src/services/McpWalletService.ts
+++ b/packages/mcp/src/services/McpWalletService.ts
@@ -528,19 +528,40 @@ export class McpWalletService {
             limit: 1,
         });
 
-        const master = response.masters[0];
-        if (!master) {
+        if (!response.jetton_masters?.length || !response.jetton_masters[0]) {
             return null;
         }
 
+        const jetton = response.jetton_masters[0];
+        const jettonMasterAddress = (jetton as { address?: string; jetton?: string }).address ?? jetton.jetton;
+        const metadata = jettonMasterAddress ? response.metadata?.[jettonMasterAddress] : undefined;
+        const tokenInfo = metadata?.token_info?.find((item) => item.valid && item.type === 'jetton_masters') as
+            | {
+                  name?: string;
+                  symbol?: string;
+                  description?: string;
+                  image?: string;
+                  extra?: { decimals?: string | number; uri?: string };
+              }
+            | undefined;
+
+        let decimals: number | undefined;
+        if (tokenInfo?.extra?.decimals !== undefined) {
+            const value = tokenInfo.extra.decimals;
+            decimals = typeof value === 'string' ? Number.parseInt(value, 10) : value;
+            if (!Number.isFinite(decimals)) {
+                decimals = undefined;
+            }
+        }
+
         return {
-            address: master.address || normalizedAddress,
-            name: master.name,
-            symbol: master.symbol,
-            decimals: master.decimals,
-            description: master.description,
-            image: master.images?.[0],
-            uri: master.uri,
+            address: jettonMasterAddress ?? normalizedAddress,
+            name: tokenInfo?.name ?? '',
+            symbol: tokenInfo?.symbol ?? '',
+            decimals,
+            description: tokenInfo?.description ?? '',
+            image: tokenInfo?.image,
+            uri: tokenInfo?.extra?.uri,
         };
     }
 
@@ -973,7 +994,7 @@ export class McpWalletService {
             address: nft.address,
             name: nft.info?.name,
             description: nft.info?.description,
-            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.urls?.[0],
+            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.url,
             collection: nft.collection
                 ? {
                       address: nft.collection.address,
@@ -1004,7 +1025,7 @@ export class McpWalletService {
             address: nft.address,
             name: nft.info?.name,
             description: nft.info?.description,
-            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.urls?.[0],
+            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.url,
             collection: nft.collection
                 ? {
                       address: nft.collection.address,
@@ -1036,7 +1057,7 @@ export class McpWalletService {
             address: nft.address,
             name: nft.info?.name,
             description: nft.info?.description,
-            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.urls?.[0],
+            image: typeof nft.info?.image === 'string' ? nft.info.image : nft.info?.image?.url,
             collection: nft.collection
                 ? {
                       address: nft.collection.address,
diff --git a/packages/walletkit/src/api/interfaces/ApiClient.ts b/packages/walletkit/src/api/interfaces/ApiClient.ts
index 081a8265a..dd0f83903 100644
--- a/packages/walletkit/src/api/interfaces/ApiClient.ts
+++ b/packages/walletkit/src/api/interfaces/ApiClient.ts
@@ -8,8 +8,7 @@
 
 import type { Address } from '@ton/core';
 
-import type { ToncenterTracesResponse } from '../../types/toncenter/emulation';
-import type { JettonMastersResponse } from '../../types/jettons';
+import type { ToncenterResponseJettonMasters, ToncenterTracesResponse } from '../../types/toncenter/emulation';
 import type { Event } from '../../types/toncenter/AccountEvent';
 import type {
     AccountState,
@@ -139,7 +138,7 @@ export interface ApiClient {
     resolveDnsWallet(domain: string): Promise<string | undefined>;
     backResolveDnsWallet(address: UserFriendlyAddress): Promise<string | undefined>;
 
-    jettonsByAddress(request: GetJettonsByAddressRequest): Promise<JettonMastersResponse>;
+    jettonsByAddress(request: GetJettonsByAddressRequest): Promise<ToncenterResponseJettonMasters>;
     jettonsByOwnerAddress(request: GetJettonsByOwnerRequest): Promise<JettonsResponse>;
 
     getEvents(request: GetEventsRequest): Promise<GetEventsResponse>;
diff --git a/packages/walletkit/src/api/models/core/TokenImage.ts b/packages/walletkit/src/api/models/core/TokenImage.ts
index b3679233a..f27d48f81 100644
--- a/packages/walletkit/src/api/models/core/TokenImage.ts
+++ b/packages/walletkit/src/api/models/core/TokenImage.ts
@@ -7,14 +7,32 @@
  */
 
 /**
- * Token image for display purposes.
+ * Token image URLs in various sizes for display purposes.
  */
 export interface TokenImage {
     /**
-     * Candidate image URLs, ordered best-first (consumers should use the first usable one).
+     * Original image URL
      * @format url
      */
-    urls: string[];
+    url?: string;
+
+    /**
+     * Small thumbnail URL (typically 64x64 or similar)
+     * @format url
+     */
+    smallUrl?: string;
+
+    /**
+     * Medium-sized image URL (typically 256x256 or similar)
+     * @format url
+     */
+    mediumUrl?: string;
+
+    /**
+     * Large image URL (typically 512x512 or higher)
+     * @format url
+     */
+    largeUrl?: string;
 
     /**
      * Raw image data encoded in Base64
diff --git a/packages/walletkit/src/clients/tonapi/ApiClientTonApi.ts b/packages/walletkit/src/clients/tonapi/ApiClientTonApi.ts
index b2e7658fd..e1e98de51 100644
--- a/packages/walletkit/src/clients/tonapi/ApiClientTonApi.ts
+++ b/packages/walletkit/src/clients/tonapi/ApiClientTonApi.ts
@@ -38,7 +38,7 @@ import type {
 } from '../../api/models';
 import type { EmulationResult } from '../../api/models';
 import type { ToncenterTracesResponse } from '../../types/toncenter/emulation';
-import type { JettonMastersResponse } from '../../types/jettons';
+import type { ToncenterResponseJettonMasters } from '../toncenter/types/jettons';
 import { BaseApiClient } from '../BaseApiClient';
 import type { BaseApiClientConfig } from '../BaseApiClient';
 import { TonClientError } from '../TonClientError';
@@ -161,7 +161,7 @@ export class ApiClientTonApi extends BaseApiClient implements ApiClient {
         return state.rawBalance;
     }
 
-    async jettonsByAddress(request: GetJettonsByAddressRequest): Promise<JettonMastersResponse> {
+    async jettonsByAddress(request: GetJettonsByAddressRequest): Promise<ToncenterResponseJettonMasters> {
         const raw = await this.getJson<TonApiJettonInfo>(`/v2/jettons/${request.address}`);
 
         return mapJettonMasters(raw);
diff --git a/packages/walletkit/src/clients/tonapi/mappers/map-jetton-masters.ts b/packages/walletkit/src/clients/tonapi/mappers/map-jetton-masters.ts
index 09396ed7b..e6f221305 100644
--- a/packages/walletkit/src/clients/tonapi/mappers/map-jetton-masters.ts
+++ b/packages/walletkit/src/clients/tonapi/mappers/map-jetton-masters.ts
@@ -8,45 +8,67 @@
 
 import { Address } from '@ton/core';
 
-import type { JettonInfo, JettonMastersResponse } from '../../../types/jettons';
-import type { EmulationAddressBookEntry } from '../../../api/models';
+import type { ToncenterResponseJettonMasters } from '../../toncenter/types/jettons';
 import type { TonApiJettonInfo } from '../types/jettons';
 import { asAddressFriendly } from '../../../utils/address';
+import type { AddressBookRowV3 } from '../../../types/toncenter/v3/AddressBookRowV3';
 
 function toRaw(address: string): string {
     return Address.parse(address).toRawString();
 }
 
-export function mapJettonMasters(jettonInfo: TonApiJettonInfo): JettonMastersResponse {
+export function mapJettonMasters(jettonInfo: TonApiJettonInfo): ToncenterResponseJettonMasters {
+    const addressBook: Record<string, AddressBookRowV3> = {};
+
     const jettonRaw = toRaw(jettonInfo.metadata.address);
     const jettonFriendly = asAddressFriendly(jettonInfo.metadata.address);
 
-    const addressBook: Record<string, EmulationAddressBookEntry> = {};
-
     if (jettonInfo.admin) {
-        addressBook[toRaw(jettonInfo.admin.address)] = {
-            userFriendly: asAddressFriendly(jettonInfo.admin.address),
-            domain: jettonInfo.admin.name ?? undefined,
+        const adminRaw = toRaw(jettonInfo.admin.address);
+        const adminFriendly = asAddressFriendly(jettonInfo.admin.address);
+        addressBook[adminRaw] = {
+            user_friendly: adminFriendly,
+            domain: jettonInfo.admin.name ?? null,
             interfaces: [],
         };
     }
 
     addressBook[jettonRaw] = {
-        userFriendly: jettonFriendly,
-        domain: undefined,
+        user_friendly: jettonFriendly,
+        domain: null,
         interfaces: ['jetton_master'],
     };
 
-    const master: JettonInfo = {
-        address: jettonFriendly,
-        name: jettonInfo.metadata.name,
-        symbol: jettonInfo.metadata.symbol,
-        description: jettonInfo.metadata.description ?? '',
-        decimals: jettonInfo.metadata.decimals ? parseInt(jettonInfo.metadata.decimals, 10) : undefined,
-        // Proxied preview (cache.tonapi.io) first, raw metadata image last.
-        images: [jettonInfo.preview, jettonInfo.metadata.image].filter((url): url is string => Boolean(url)),
-        totalSupply: jettonInfo.total_supply,
+    return {
+        jetton_masters: [
+            {
+                address: jettonRaw,
+                balance: '0',
+                owner: jettonInfo.admin ? toRaw(jettonInfo.admin.address) : '',
+                jetton: jettonRaw,
+                last_transaction_lt: jettonInfo.last_transaction_lt?.toString() ?? '0',
+                code_hash: jettonInfo.code_hash ?? '',
+                data_hash: jettonInfo.data_hash ?? '',
+            },
+        ],
+        address_book: addressBook,
+        metadata: {
+            [jettonRaw]: {
+                is_indexed: true,
+                token_info: [
+                    {
+                        valid: true,
+                        type: 'jetton_masters',
+                        name: jettonInfo.metadata.name,
+                        symbol: jettonInfo.metadata.symbol,
+                        description: jettonInfo.metadata.description,
+                        image: jettonInfo.metadata.image,
+                        extra: {
+                            decimals: jettonInfo.metadata.decimals,
+                        },
+                    },
+                ],
+            },
+        },
     };
-
-    return { masters: [master], addressBook };
 }
diff --git a/packages/walletkit/src/clients/tonapi/mappers/map-nft-items.ts b/packages/walletkit/src/clients/tonapi/mappers/map-nft-items.ts
index 8260303c1..a4ed80a55 100644
--- a/packages/walletkit/src/clients/tonapi/mappers/map-nft-items.ts
+++ b/packages/walletkit/src/clients/tonapi/mappers/map-nft-items.ts
@@ -9,22 +9,7 @@
 import type { NFT, NFTsResponse } from '../../../api/models';
 import type { AddressBookEntry } from '../../../api/models/core/AddressBook';
 import { asAddressFriendly } from '../../../utils/address';
-import type { TonApiNftItem, TonApiNftPreview } from '../types/nfts';
-
-/** Pixel area for a `"WxH"` resolution string; 0 when unparseable. */
-function previewArea(resolution: string): number {
-    const parts = resolution.split('x');
-    const width = parseInt(parts[0] ?? '', 10);
-    const height = parseInt(parts[1] ?? '', 10);
-    return Number.isFinite(width) && Number.isFinite(height) ? width * height : 0;
-}
-
-/** Preview URLs ordered largest-first, so consumers prefer the highest-resolution image. */
-function previewUrlsLargestFirst(previews?: TonApiNftPreview[]): string[] {
-    return [...(previews ?? [])]
-        .sort((a, b) => previewArea(b.resolution) - previewArea(a.resolution))
-        .map((preview) => preview.url);
-}
+import type { TonApiNftItem } from '../types/nfts';
 
 export function mapNftItem(item: TonApiNftItem): NFT {
     const isVerified = item.trust === 'whitelist' || item.verified;
@@ -44,14 +29,7 @@ export function mapNftItem(item: TonApiNftItem): NFT {
             name: item.metadata.name ?? '',
             description: item.metadata.description ?? '',
             image: {
-                // Largest proxied preview first (crisp + more likely to load), original metadata image last.
-                urls: [
-                    ...new Set(
-                        [...previewUrlsLargestFirst(item.previews), item.metadata.image].filter((url): url is string =>
-                            Boolean(url),
-                        ),
-                    ),
-                ],
+                url: item.metadata.image ?? '',
             },
         },
         attributes: item.metadata.attributes?.map((attr) => ({
diff --git a/packages/walletkit/src/clients/tonapi/mappers/map-user-jettons.ts b/packages/walletkit/src/clients/tonapi/mappers/map-user-jettons.ts
index e3683cc25..240538cde 100644
--- a/packages/walletkit/src/clients/tonapi/mappers/map-user-jettons.ts
+++ b/packages/walletkit/src/clients/tonapi/mappers/map-user-jettons.ts
@@ -36,7 +36,7 @@ export function mapUserJettons(rawResponse: TonApiJettonsBalances): JettonsRespo
                 name: wallet.jetton.name,
                 description: wallet.jetton.description ?? '',
                 image: {
-                    urls: wallet.jetton.image ? [wallet.jetton.image] : [],
+                    url: wallet.jetton.image,
                 },
                 symbol: wallet.jetton.symbol,
             },
diff --git a/packages/walletkit/src/clients/toncenter/ApiClientToncenter.ts b/packages/walletkit/src/clients/toncenter/ApiClientToncenter.ts
index 57a087b45..2a80c351a 100644
--- a/packages/walletkit/src/clients/toncenter/ApiClientToncenter.ts
+++ b/packages/walletkit/src/clients/toncenter/ApiClientToncenter.ts
@@ -9,7 +9,7 @@
 import { Address } from '@ton/core';
 
 import { Base64ToBigInt, Base64Normalize, Base64ToHex } from '../../utils/base64';
-import type { JettonInfo, JettonMastersResponse } from '../../types';
+import type { JettonInfo } from '../../types';
 import type { ToncenterEmulationResponse } from './types/raw-emulation';
 import type {
     ApiClient,
@@ -58,7 +58,6 @@ import { mapAccountStatesEntry, makeNonExistingAccountState } from './mappers/ma
 import type { ToncenterAccountStatesResponse } from './types/account-states';
 import type { EmulationResult } from '../../api/models';
 import { mapToncenterEmulationResponse } from './mappers/map-emulation';
-import { mapJettonMastersResponse } from './mappers/map-jetton-masters';
 import { BaseApiClient } from '../BaseApiClient';
 import type { BaseApiClientConfig } from '../BaseApiClient';
 import type { V2AddressInformation, V2SendMessageResult, V3RunGetMethodRequest, TonBlockIdExt } from './types/internal';
@@ -368,14 +367,12 @@ export class ApiClientToncenter extends BaseApiClient implements ApiClient {
         return undefined;
     }
 
-    async jettonsByAddress(request: GetJettonsByAddressRequest): Promise<JettonMastersResponse> {
-        const raw = await this.getJson<ToncenterResponseJettonMasters>('/api/v3/jetton/masters', {
+    async jettonsByAddress(request: GetJettonsByAddressRequest): Promise<ToncenterResponseJettonMasters> {
+        return this.getJson<ToncenterResponseJettonMasters>('/api/v3/jetton/masters', {
             address: request.address,
             offset: request.offset,
             limit: request.limit,
         });
-
-        return mapJettonMastersResponse(raw);
     }
 
     async jettonsByOwnerAddress(request: GetJettonsByOwnerRequest): Promise<JettonsResponse> {
@@ -406,7 +403,7 @@ export class ApiClientToncenter extends BaseApiClient implements ApiClient {
                     name: jettonInfo.name,
                     description: jettonInfo.description,
                     image: {
-                        urls: jettonInfo.images ?? [],
+                        url: jettonInfo.image,
                         data: jettonInfo.image_data,
                     },
                     symbol: jettonInfo.symbol,
@@ -457,7 +454,7 @@ export class ApiClientToncenter extends BaseApiClient implements ApiClient {
                 symbol: metadataJettonInfo.symbol ?? '',
                 description: metadataJettonInfo.description ?? '',
                 decimals,
-                images: metadataJettonInfo.image ? [metadataJettonInfo.image] : undefined,
+                image: metadataJettonInfo.image,
                 image_data: metadataJettonInfo.extra.image_data,
                 uri: metadataJettonInfo.extra.uri,
             };
diff --git a/packages/walletkit/src/clients/toncenter/mappers/map-address-book.ts b/packages/walletkit/src/clients/toncenter/mappers/map-address-book.ts
deleted file mode 100644
index e78ae72e1..000000000
--- a/packages/walletkit/src/clients/toncenter/mappers/map-address-book.ts
+++ /dev/null
@@ -1,29 +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 { AddressBookRowV3 } from '../../../types/toncenter/v3/AddressBookRowV3';
-import type { EmulationAddressBookEntry } from '../../../api/models';
-import { asAddressFriendly } from '../../../utils/address';
-
-/**
- * Normalizes a raw toncenter `address_book` map into our owned address-book model.
- */
-export function mapAddressBook(
-    addressBook?: Record<string, AddressBookRowV3>,
-): Record<string, EmulationAddressBookEntry> {
-    return Object.fromEntries(
-        Object.entries(addressBook ?? {}).map(([addr, row]) => [
-            addr,
-            {
-                domain: row.domain ?? undefined,
-                userFriendly: asAddressFriendly(row.user_friendly),
-                interfaces: row.interfaces ?? [],
-            },
-        ]),
-    );
-}
diff --git a/packages/walletkit/src/clients/toncenter/mappers/map-emulation.ts b/packages/walletkit/src/clients/toncenter/mappers/map-emulation.ts
index be4e6b4f8..5eda13c5b 100644
--- a/packages/walletkit/src/clients/toncenter/mappers/map-emulation.ts
+++ b/packages/walletkit/src/clients/toncenter/mappers/map-emulation.ts
@@ -23,13 +23,13 @@ import type {
     EmulationAccountState,
     EmulationMessage,
     EmulationAction,
+    EmulationAddressBookEntry,
     AccountStatus,
 } from '../../../api/models';
 import { Base64ToHex, asBase64 } from '../../../utils/base64';
 import { asHex } from '../../../utils/hex';
 import { asAddressFriendly, asMaybeAddressFriendly } from '../../../utils/address';
 import { parseMsgSizeCount } from '../utils';
-import { mapAddressBook } from './map-address-book';
 
 function normalizeAccountStatus(status: string): AccountStatus {
     if (status === 'active') return 'active';
@@ -189,7 +189,16 @@ export function mapToncenterEmulationResponse(raw: ToncenterEmulationResponse):
         Object.entries(raw.transactions ?? {}).map(([hash, tx]) => [Base64ToHex(hash), mapTransaction(tx)]),
     );
 
-    const addressBook = mapAddressBook(raw.address_book);
+    const addressBook: Record<string, EmulationAddressBookEntry> = Object.fromEntries(
+        Object.entries(raw.address_book ?? {}).map(([addr, row]) => [
+            addr,
+            {
+                domain: row.domain ?? undefined,
+                userFriendly: asAddressFriendly(row.user_friendly),
+                interfaces: row.interfaces ?? [],
+            },
+        ]),
+    );
 
     const codeCells: Record<string, Base64String> = Object.fromEntries(
         Object.entries(raw.code_cells ?? {}).map(([hash, cell]) => [Base64ToHex(hash), asBase64(cell)]),
diff --git a/packages/walletkit/src/clients/toncenter/mappers/map-jetton-masters.ts b/packages/walletkit/src/clients/toncenter/mappers/map-jetton-masters.ts
deleted file mode 100644
index 345e2fcbb..000000000
--- a/packages/walletkit/src/clients/toncenter/mappers/map-jetton-masters.ts
+++ /dev/null
@@ -1,47 +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 { JettonInfo, JettonMastersResponse } from '../../../types/jettons';
-import type { EmulationTokenInfoMasters } from '../types/metadata';
-import type { ToncenterResponseJettonMasters } from '../types/jettons';
-import { asAddressFriendly } from '../../../utils/address';
-import { mapAddressBook } from './map-address-book';
-
-/**
- * Collects candidate image URLs (best-first) from a toncenter jetton-masters
- * token_info: the wire `image` plus the proxied size variants under `extra`.
- */
-function collectImages(info: EmulationTokenInfoMasters): string[] {
-    const candidates = [info.image, info.extra._image_big, info.extra._image_medium, info.extra._image_small];
-    return [...new Set(candidates.filter((url): url is string => Boolean(url)))];
-}
-
-/**
- * Maps a raw toncenter `/api/v3/jetton/masters` response into the normalized
- * {@link JettonMastersResponse}.
- */
-export function mapJettonMastersResponse(raw: ToncenterResponseJettonMasters): JettonMastersResponse {
-    const masters: JettonInfo[] = raw.jetton_masters.map((master) => {
-        const tokenInfo = raw.metadata[master.address]?.token_info?.find(
-            (info): info is EmulationTokenInfoMasters => info.valid && info.type === 'jetton_masters',
-        );
-
-        return {
-            address: asAddressFriendly(master.jetton),
-            name: tokenInfo?.name ?? '',
-            symbol: tokenInfo?.symbol ?? '',
-            description: tokenInfo?.description ?? '',
-            decimals: tokenInfo?.extra.decimals ? parseInt(tokenInfo.extra.decimals, 10) : undefined,
-            images: tokenInfo ? collectImages(tokenInfo) : [],
-            image_data: tokenInfo?.extra.image_data,
-            uri: tokenInfo?.extra.uri,
-        };
-    });
-
-    return { masters, addressBook: mapAddressBook(raw.address_book) };
-}
diff --git a/packages/walletkit/src/clients/toncenter/types/metadata.ts b/packages/walletkit/src/clients/toncenter/types/metadata.ts
index a4125fca9..0c5b93df1 100644
--- a/packages/walletkit/src/clients/toncenter/types/metadata.ts
+++ b/packages/walletkit/src/clients/toncenter/types/metadata.ts
@@ -35,7 +35,6 @@ export interface EmulationTokenInfoMasters extends EmulationTokenInfoBase {
     name: string;
     symbol: string;
     description: string;
-    /** Raw toncenter wire image (single URL). */
     image?: string;
     extra: {
         _image_big?: string;
diff --git a/packages/walletkit/src/clients/toncenter/types/nfts.ts b/packages/walletkit/src/clients/toncenter/types/nfts.ts
index a22d9bd75..f8d373ee6 100644
--- a/packages/walletkit/src/clients/toncenter/types/nfts.ts
+++ b/packages/walletkit/src/clients/toncenter/types/nfts.ts
@@ -68,16 +68,10 @@ export function toApiTokenInfo(data: TokenInfo): APITokenInfo {
         name: data.name,
         description: data.description,
         image: {
-            urls: [
-                ...new Set(
-                    [
-                        data.image ?? data.extra?._image_medium,
-                        data.extra?._image_medium,
-                        data.extra?._image_big,
-                        data.extra?._image_small,
-                    ].filter((url): url is string => Boolean(url)),
-                ),
-            ],
+            url: data.image ?? data.extra?._image_medium,
+            smallUrl: data.extra?._image_small,
+            mediumUrl: data.extra?._image_medium,
+            largeUrl: data.extra?._image_big,
         },
         animation: {
             url: animationUrl,
diff --git a/packages/walletkit/src/clients/toncenter/types/v3/NFTCollectionV3.ts b/packages/walletkit/src/clients/toncenter/types/v3/NFTCollectionV3.ts
index 88fc93328..755cfccca 100644
--- a/packages/walletkit/src/clients/toncenter/types/v3/NFTCollectionV3.ts
+++ b/packages/walletkit/src/clients/toncenter/types/v3/NFTCollectionV3.ts
@@ -68,13 +68,10 @@ export function tokenMetaToNftCollection(address: string, data: TokenInfoNFTColl
         name: data.name,
         description: data.description,
         image: {
-            urls: [
-                ...new Set(
-                    [image, data?.extra?._image_medium, data?.extra?._image_big, data?.extra?._image_small].filter(
-                        (url): url is string => Boolean(url),
-                    ),
-                ),
-            ],
+            url: image,
+            smallUrl: data?.extra?._image_small,
+            mediumUrl: data?.extra?._image_medium,
+            largeUrl: data?.extra?._image_big,
         },
         extra: data.extra,
     };
diff --git a/packages/walletkit/src/contracts/w5/WalletV5R1.fixture.ts b/packages/walletkit/src/contracts/w5/WalletV5R1.fixture.ts
index 25e1a7635..51a4f573c 100644
--- a/packages/walletkit/src/contracts/w5/WalletV5R1.fixture.ts
+++ b/packages/walletkit/src/contracts/w5/WalletV5R1.fixture.ts
@@ -10,14 +10,14 @@ import { Dictionary } from '@ton/core';
 
 import { mockFn } from '../../../mock.config';
 import type { ApiClient, GetEventsResponse } from '../../api/interfaces';
-import type { JettonMastersResponse, ToncenterTracesResponse } from '../../types';
+import type { ToncenterTracesResponse } from '../../types';
 import type { AccountState, EmulationResponse, MasterchainInfo } from '../../api/models';
 import type { ResponseUserJettons } from '../../types/export/responses/jettons';
 import type { NftItemsResponse } from '../../clients/toncenter/types/nfts';
 import type { WalletV5R1Id } from './WalletV5R1';
 import { walletV5ConfigToCell } from './WalletV5R1';
 import { WalletV5R1Adapter } from './WalletV5R1Adapter';
-import type { ToncenterTransactionsResponse } from '../../types/toncenter/emulation';
+import type { ToncenterResponseJettonMasters, ToncenterTransactionsResponse } from '../../types/toncenter/emulation';
 import { Signer } from '../../utils/Signer';
 import { Network } from '../../api/models';
 
@@ -99,7 +99,7 @@ export function createMockApiClient(): ApiClient {
         getTransactionsByHash: mockFn().mockResolvedValue({} as ToncenterTransactionsResponse),
         resolveDnsWallet: mockFn().mockResolvedValue({} as string | undefined),
         backResolveDnsWallet: mockFn().mockResolvedValue({} as string | undefined),
-        jettonsByAddress: mockFn().mockResolvedValue({ masters: [], addressBook: {} } as JettonMastersResponse),
+        jettonsByAddress: mockFn().mockResolvedValue({} as ToncenterResponseJettonMasters),
         jettonsByOwnerAddress: mockFn().mockResolvedValue({
             jettons: [],
             address_book: {},
diff --git a/packages/walletkit/src/core/JettonsManager.ts b/packages/walletkit/src/core/JettonsManager.ts
index dcdac6c7a..6067985ca 100644
--- a/packages/walletkit/src/core/JettonsManager.ts
+++ b/packages/walletkit/src/core/JettonsManager.ts
@@ -112,21 +112,41 @@ export class JettonsManager implements JettonsAPI {
             }
 
             const apiClient = this.networkManager.getClient(targetNetwork);
-            const { masters } = await apiClient.jettonsByAddress({
+            const jettonFromApi = await apiClient.jettonsByAddress({
                 address: address,
                 offset: 0,
                 limit: 1,
             });
 
-            const info = masters[0];
-            if (!info) {
-                return null;
-            }
-
-            const result: JettonInfo = { ...info, decimals: info.decimals ?? 9 };
-            this.cache.set(cacheKey, result);
+            if (jettonFromApi && jettonFromApi?.jetton_masters?.length > 0 && jettonFromApi?.jetton_masters?.[0]) {
+                const jetton = jettonFromApi?.jetton_masters?.[0];
+                const metadata = jettonFromApi?.metadata?.[jetton.address];
+                const tokenInfo = metadata?.token_info?.find((t) => t.valid && t.type === 'jetton_masters') as
+                    | EmulationTokenInfoMasters
+                    | undefined;
+
+                let decimals: number;
+                try {
+                    decimals = parseInt(tokenInfo?.extra.decimals as string, 10);
+                } catch {
+                    decimals = 9;
+                }
 
-            return result;
+                const result: JettonInfo = {
+                    address: jetton.jetton,
+                    name: tokenInfo?.name ?? '',
+                    symbol: tokenInfo?.symbol ?? '',
+                    description: tokenInfo?.description ?? '',
+                    decimals: decimals,
+                    image: tokenInfo?.image,
+                    uri: tokenInfo?.extra?.uri,
+                    totalSupply: '0',
+                };
+                this.cache.set(cacheKey, result);
+
+                return result;
+            }
+            return null;
         } catch (error) {
             log.error('Error getting jetton info', { error, jettonAddress, network: targetNetwork });
             return null;
@@ -198,7 +218,7 @@ export class JettonsManager implements JettonsAPI {
                 name: emulationInfo.name,
                 symbol: emulationInfo.symbol,
                 description: emulationInfo.description,
-                images: emulationInfo.image ? [emulationInfo.image] : undefined,
+                image: emulationInfo.image,
                 decimals:
                     typeof emulationInfo.extra.decimals === 'string'
                         ? parseInt(emulationInfo.extra.decimals, 10)
diff --git a/packages/walletkit/src/types/index.ts b/packages/walletkit/src/types/index.ts
index b7369a547..a775c1b38 100644
--- a/packages/walletkit/src/types/index.ts
+++ b/packages/walletkit/src/types/index.ts
@@ -33,7 +33,6 @@ export { DEFAULT_DURABLE_EVENTS_CONFIG } from './durableEvents';
 // Jettons types
 export type {
     JettonInfo,
-    JettonMastersResponse,
     JettonVerification,
     AddressJetton,
     JettonBalance,
diff --git a/packages/walletkit/src/types/jettons.ts b/packages/walletkit/src/types/jettons.ts
index 184ed586e..c5a3b4f06 100644
--- a/packages/walletkit/src/types/jettons.ts
+++ b/packages/walletkit/src/types/jettons.ts
@@ -8,7 +8,7 @@
 
 // Jettons API types based on JETTONS.md specification
 
-import type { EmulationAddressBookEntry, Jetton, Network } from '../api/models';
+import type { Jetton, Network } from '../api/models';
 
 // === Core Jetton Information ===
 export interface JettonInfo {
@@ -18,22 +18,13 @@ export interface JettonInfo {
     description: string;
     decimals?: number;
     totalSupply?: string;
-    images?: string[];
+    image?: string;
     image_data?: string;
     uri?: string;
     verification?: JettonVerification;
     metadata?: Record<string, unknown>;
 }
 
-/**
- * Normalized response for a jetton-masters lookup.
- * Both API clients map their raw responses into this shape.
- */
-export interface JettonMastersResponse {
-    masters: JettonInfo[];
-    addressBook: Record<string, EmulationAddressBookEntry>;
-}
-
 export interface JettonVerification {
     verified: boolean;
     source?: 'toncenter' | 'community' | 'manual';