From 79f1ee371b10f8e312d4f3cf735a18c769f0d8fa Mon Sep 17 00:00:00 2001
From: rassadin11 <artem.rassadin.05@mail.ru>
Date: Thu, 14 May 2026 15:50:22 +0300
Subject: [PATCH] 14.05.2026 rip

---
 src/app/providers/RouterProvider.tsx          |  2 +-
 src/features/wallet/api/walletApi.ts          | 36 ++++++++++
 src/features/wallet/index.ts                  |  3 +
 src/features/wallet/model/useWalletData.ts    | 20 ++++++
 src/widgets/token-table/model/useTokenRows.ts | 69 +++++++++++++++++++
 .../token-table/ui/TokenTable.module.css      |  6 ++
 src/widgets/token-table/ui/TokenTable.tsx     | 11 +--
 tsconfig.tsbuildinfo                          |  2 +-
 8 files changed, 142 insertions(+), 7 deletions(-)
 create mode 100644 src/features/wallet/api/walletApi.ts
 create mode 100644 src/features/wallet/index.ts
 create mode 100644 src/features/wallet/model/useWalletData.ts
 create mode 100644 src/widgets/token-table/model/useTokenRows.ts

diff --git a/src/app/providers/RouterProvider.tsx b/src/app/providers/RouterProvider.tsx
index 79bd560..f69725f 100644
--- a/src/app/providers/RouterProvider.tsx
+++ b/src/app/providers/RouterProvider.tsx
@@ -26,9 +26,9 @@ export function RouterProvider() {
         </Route>
 
         <Route path={ROUTES.CONVERTER} element={<ConverterPage />} />
+        <Route path={ROUTES.WALLET} element={<WalletPage />} />
 
         <Route element={<ProtectedRoute />}>
-          <Route path={ROUTES.WALLET} element={<WalletPage />} />
           <Route path={ROUTES.SWAP} element={<SwapPage />} />
           <Route path={ROUTES.PROFILE} element={<ProfilePage />} />
           <Route path={ROUTES.SEED_PHRASE} element={<SeedPhrasePage />} />
diff --git a/src/features/wallet/api/walletApi.ts b/src/features/wallet/api/walletApi.ts
new file mode 100644
index 0000000..74ec8a0
--- /dev/null
+++ b/src/features/wallet/api/walletApi.ts
@@ -0,0 +1,36 @@
+import { api } from '@shared/api/base'
+
+export type Chain = 'ETH' | 'BSC' | 'BTC' | 'TRX' | 'SOL'
+
+export interface FormattedAmount {
+  raw: string
+  formatted: string
+  decimals: number
+  usdPrice: number
+  usdValue: number
+}
+
+export interface WalletBalanceData {
+  chain: Chain
+  address: string
+  native: FormattedAmount
+  tokens: Record<string, FormattedAmount>
+}
+
+export interface PriceEntry {
+  usd: number
+}
+
+export const CHAINS: Chain[] = ['ETH', 'BSC', 'BTC', 'TRX', 'SOL']
+
+export async function getWalletBalance(chain: Chain): Promise<WalletBalanceData> {
+  const res = await api.get<{ success: boolean; data: WalletBalanceData }>(`/api/wallets/${chain}/balance`)
+  return res.data
+}
+
+export async function getPrices(symbols: string[]): Promise<Record<string, PriceEntry>> {
+  const res = await api.get<{ success: boolean; data: Record<string, PriceEntry> }>(
+    `/api/prices?symbols=${symbols.join(',')}`
+  )
+  return res.data
+}
diff --git a/src/features/wallet/index.ts b/src/features/wallet/index.ts
new file mode 100644
index 0000000..2e351d0
--- /dev/null
+++ b/src/features/wallet/index.ts
@@ -0,0 +1,3 @@
+export { useAllWalletBalances, usePrices } from './model/useWalletData'
+export type { Chain, FormattedAmount, WalletBalanceData, PriceEntry } from './api/walletApi'
+export { CHAINS } from './api/walletApi'
diff --git a/src/features/wallet/model/useWalletData.ts b/src/features/wallet/model/useWalletData.ts
new file mode 100644
index 0000000..f773f8a
--- /dev/null
+++ b/src/features/wallet/model/useWalletData.ts
@@ -0,0 +1,20 @@
+import { useQuery, useQueries } from '@tanstack/react-query'
+import { getWalletBalance, getPrices, CHAINS } from '../api/walletApi'
+
+export function useAllWalletBalances() {
+  return useQueries({
+    queries: CHAINS.map(chain => ({
+      queryKey: ['wallet', 'balance', chain],
+      queryFn: () => getWalletBalance(chain),
+      staleTime: 30_000,
+    })),
+  })
+}
+
+export function usePrices(symbols: string[]) {
+  return useQuery({
+    queryKey: ['wallet', 'prices', symbols.join(',')],
+    queryFn: () => getPrices(symbols),
+    staleTime: 5 * 60 * 1000,
+  })
+}
diff --git a/src/widgets/token-table/model/useTokenRows.ts b/src/widgets/token-table/model/useTokenRows.ts
new file mode 100644
index 0000000..536829e
--- /dev/null
+++ b/src/widgets/token-table/model/useTokenRows.ts
@@ -0,0 +1,69 @@
+import { useAllWalletBalances, usePrices } from '@features/wallet'
+import { CHAINS } from '@features/wallet'
+import { TOKENS } from './tokens'
+import type { WalletBalanceData } from '@features/wallet'
+
+const PRICE_SYMBOLS = ['BTC', 'ETH', 'SOL', 'TRX', 'ARB']
+
+type ChainSource =
+  | { chain: 'BTC' | 'ETH' | 'SOL' | 'TRX'; type: 'native' }
+  | { chain: 'ETH'; type: 'token'; symbol: string }
+
+const CHAIN_MAP: Record<string, ChainSource> = {
+  BTC: { chain: 'BTC', type: 'native' },
+  ETH: { chain: 'ETH', type: 'native' },
+  SOL: { chain: 'SOL', type: 'native' },
+  TRX: { chain: 'TRX', type: 'native' },
+  ARB: { chain: 'ETH', type: 'token', symbol: 'ARB' },
+}
+
+function formatUsd(value: number): string {
+  return `$${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+}
+
+function formatPrice(value: number): string {
+  if (value >= 1) {
+    return `$${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+  }
+  return `$${value.toLocaleString('en-US', { minimumFractionDigits: 4, maximumFractionDigits: 6 })}`
+}
+
+export function useTokenRows() {
+  const balanceResults = useAllWalletBalances()
+  const pricesQuery = usePrices(PRICE_SYMBOLS)
+
+  const isLoading = balanceResults.some(r => r.isLoading) || pricesQuery.isLoading
+
+  const balanceByChain: Record<string, WalletBalanceData> = {}
+  CHAINS.forEach((chain, i) => {
+    const data = balanceResults[i].data
+    if (data) balanceByChain[chain] = data
+  })
+
+  const rows = TOKENS.map(t => {
+    const src = CHAIN_MAP[t.ticker]
+    const chainData = src ? balanceByChain[src.chain] : undefined
+
+    let bal = t.bal
+    let usd = t.usd
+
+    if (chainData) {
+      const amount =
+        src.type === 'native'
+          ? chainData.native
+          : chainData.tokens[src.type === 'token' ? src.symbol : t.ticker]
+
+      if (amount) {
+        bal = amount.formatted
+        usd = formatUsd(amount.usdValue)
+      }
+    }
+
+    const priceEntry = pricesQuery.data?.[t.ticker]
+    const price = priceEntry ? formatPrice(priceEntry.usd) : t.price
+
+    return { ...t, price, bal, usd }
+  })
+
+  return { rows, isLoading }
+}
diff --git a/src/widgets/token-table/ui/TokenTable.module.css b/src/widgets/token-table/ui/TokenTable.module.css
index bd0f4b3..e25c0c4 100644
--- a/src/widgets/token-table/ui/TokenTable.module.css
+++ b/src/widgets/token-table/ui/TokenTable.module.css
@@ -3,6 +3,12 @@
   border: 1px solid var(--glass-border);
   border-radius: 20px;
   overflow: hidden;
+  transition: opacity 0.2s;
+}
+
+.loading {
+  opacity: 0.6;
+  pointer-events: none;
 }
 
 .table {
diff --git a/src/widgets/token-table/ui/TokenTable.tsx b/src/widgets/token-table/ui/TokenTable.tsx
index a9c21f3..8bde73d 100644
--- a/src/widgets/token-table/ui/TokenTable.tsx
+++ b/src/widgets/token-table/ui/TokenTable.tsx
@@ -1,9 +1,10 @@
 import { useState } from 'react'
-import { TOKENS } from '../model/tokens'
+import { useTokenRows } from '../model/useTokenRows'
 import styles from './TokenTable.module.css'
 
 export function TokenTable() {
-  const [favs, setFavs] = useState<boolean[]>(TOKENS.map((t) => t.fav))
+  const { rows, isLoading } = useTokenRows()
+  const [favs, setFavs] = useState<boolean[]>(() => rows.map((t) => t.fav))
 
   function toggleFav(i: number) {
     setFavs((prev) => prev.map((v, idx) => (idx === i ? !v : v)))
@@ -17,7 +18,7 @@ export function TokenTable() {
 
   return (
     <>
-      <div className={styles.wrap}>
+      <div className={`${styles.wrap} ${isLoading ? styles.loading : ''}`}>
         {/* Desktop table */}
         <table className={styles.table}>
           <thead>
@@ -31,7 +32,7 @@ export function TokenTable() {
             </tr>
           </thead>
           <tbody>
-            {TOKENS.map((t, i) => (
+            {rows.map((t, i) => (
               <tr key={t.ticker}>
                 <td>
                   <button
@@ -81,7 +82,7 @@ export function TokenTable() {
 
         {/* Mobile card list */}
         <div className={styles.mobileList}>
-          {TOKENS.map((t, i) => (
+          {rows.map((t, i) => (
             <div key={t.ticker} className={styles.card}>
               <button
                 className={`${styles.star} ${favs[i] ? styles.starOn : ''}`}
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
index ed380af..a1ad639 100644
--- a/tsconfig.tsbuildinfo
+++ b/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/app.tsx","./src/app/providers/guestroute.tsx","./src/app/providers/protectedroute.tsx","./src/app/providers/queryprovider.tsx","./src/app/providers/routerprovider.tsx","./src/app/providers/scrolltotop.tsx","./src/app/providers/index.ts","./src/features/auth/index.ts","./src/features/auth/api/profileapi.ts","./src/features/auth/api/registrationapi.ts","./src/features/auth/hooks/useauth.ts","./src/features/auth/hooks/useisauthenticated.ts","./src/features/auth/hooks/useme.ts","./src/features/kyc/api/kycapi.ts","./src/features/payment/index.ts","./src/features/payment/api/paymentapi.ts","./src/features/payment/hooks/usecreateorder.ts","./src/features/payment/hooks/usepaymentconfig.ts","./src/features/payment/hooks/usepaymentquote.ts","./src/pages/converter/index.ts","./src/pages/converter/ui/converterpage.tsx","./src/pages/home/index.ts","./src/pages/home/ui/homepage.tsx","./src/pages/kyc/index.ts","./src/pages/kyc/ui/kycpage.tsx","./src/pages/login/index.ts","./src/pages/login/ui/loginpage.tsx","./src/pages/profile/index.ts","./src/pages/profile/ui/profilepage.tsx","./src/pages/register/index.ts","./src/pages/register/ui/registerpage.tsx","./src/pages/seed-phrase/index.ts","./src/pages/seed-phrase/ui/seedphrasepage.tsx","./src/pages/swap/index.ts","./src/pages/swap/ui/swappage.tsx","./src/pages/wallet/index.ts","./src/pages/wallet/ui/walletpage.tsx","./src/shared/api/base.ts","./src/shared/api/csrf.ts","./src/shared/api/tokenstore.ts","./src/shared/api/types.ts","./src/shared/config/constants.ts","./src/shared/config/env.ts","./src/shared/config/routes.ts","./src/shared/lib/hooks/usedebounce.ts","./src/shared/lib/hooks/uselocalstorage.ts","./src/shared/lib/utils/cn.ts","./src/shared/types/index.ts","./src/shared/ui/index.ts","./src/shared/ui/button/button.tsx","./src/shared/ui/button/index.ts","./src/shared/ui/formfield/formfield.tsx","./src/shared/ui/formfield/index.ts","./src/shared/ui/notification/notification.tsx","./src/shared/ui/notification/index.ts","./src/shared/ui/pill/pill.tsx","./src/shared/ui/pill/index.ts","./src/shared/ui/primarybutton/primarybutton.tsx","./src/shared/ui/primarybutton/index.ts","./src/shared/ui/title/title.tsx","./src/shared/ui/tokenicon/tokenicon.tsx","./src/shared/ui/tokenicon/index.ts","./src/widgets/about/index.ts","./src/widgets/about/ui/about.tsx","./src/widgets/balance-card/index.ts","./src/widgets/balance-card/ui/balancecard.tsx","./src/widgets/converter-page/index.ts","./src/widgets/converter-page/ui/agreementcheck.tsx","./src/widgets/converter-page/ui/commissionpanel.tsx","./src/widgets/converter-page/ui/convertersection.tsx","./src/widgets/currency-converter/index.ts","./src/widgets/currency-converter/model/tiers.ts","./src/widgets/currency-converter/model/useconverter.ts","./src/widgets/currency-converter/ui/agreementcheckbox.tsx","./src/widgets/currency-converter/ui/commissiontable.tsx","./src/widgets/currency-converter/ui/converter.tsx","./src/widgets/currency-converter/ui/tiers.tsx","./src/widgets/footer/index.ts","./src/widgets/footer/ui/footer.tsx","./src/widgets/header/index.ts","./src/widgets/header/ui/header.tsx","./src/widgets/hero/index.ts","./src/widgets/hero/lib/usecountdown.ts","./src/widgets/hero/ui/conversionflow.tsx","./src/widgets/hero/ui/countdown.tsx","./src/widgets/hero/ui/exchangecard.tsx","./src/widgets/hero/ui/hero.tsx","./src/widgets/kyc-verification/index.ts","./src/widgets/kyc-verification/model/usekyc.ts","./src/widgets/kyc-verification/ui/kycmodal.tsx","./src/widgets/kyc-verification/ui/kycwidget.tsx","./src/widgets/login-form/index.ts","./src/widgets/login-form/model/useloginform.ts","./src/widgets/login-form/ui/loginform.tsx","./src/widgets/networks-table/index.ts","./src/widgets/networks-table/model/networks.ts","./src/widgets/networks-table/ui/networkstable.tsx","./src/widgets/profile/index.ts","./src/widgets/profile/ui/profileavatar.tsx","./src/widgets/profile/ui/profilesection.tsx","./src/widgets/register-form/index.ts","./src/widgets/register-form/model/useregisterform.ts","./src/widgets/register-form/ui/registerform.tsx","./src/widgets/seed-phrase/index.ts","./src/widgets/seed-phrase/model/useseedphrase.ts","./src/widgets/seed-phrase/ui/seedphrasewidget.tsx","./src/widgets/swap-form/index.ts","./src/widgets/swap-form/model/useswapform.ts","./src/widgets/swap-form/ui/raterow.tsx","./src/widgets/swap-form/ui/swapcard.tsx","./src/widgets/swap-form/ui/swapdirectionbutton.tsx","./src/widgets/swap-form/ui/swapform.tsx","./src/widgets/swap-form/ui/swapinfopanel.tsx","./src/widgets/swap-form/ui/tokenselect.tsx","./src/widgets/token-table/index.ts","./src/widgets/token-table/model/tokens.ts","./src/widgets/token-table/ui/tokentable.tsx","./src/widgets/wallet-header/index.ts","./src/widgets/wallet-header/ui/walletheader.tsx"],"version":"5.6.3"}
\ No newline at end of file
+{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/app.tsx","./src/app/providers/guestroute.tsx","./src/app/providers/protectedroute.tsx","./src/app/providers/queryprovider.tsx","./src/app/providers/routerprovider.tsx","./src/app/providers/scrolltotop.tsx","./src/app/providers/index.ts","./src/features/auth/index.ts","./src/features/auth/api/profileapi.ts","./src/features/auth/api/registrationapi.ts","./src/features/auth/hooks/useauth.ts","./src/features/auth/hooks/useisauthenticated.ts","./src/features/auth/hooks/useme.ts","./src/features/kyc/api/kycapi.ts","./src/features/payment/index.ts","./src/features/payment/api/paymentapi.ts","./src/features/payment/hooks/usecreateorder.ts","./src/features/payment/hooks/usepaymentconfig.ts","./src/features/payment/hooks/usepaymentquote.ts","./src/features/wallet/index.ts","./src/features/wallet/api/walletapi.ts","./src/features/wallet/model/usewalletdata.ts","./src/pages/converter/index.ts","./src/pages/converter/ui/converterpage.tsx","./src/pages/home/index.ts","./src/pages/home/ui/homepage.tsx","./src/pages/kyc/index.ts","./src/pages/kyc/ui/kycpage.tsx","./src/pages/login/index.ts","./src/pages/login/ui/loginpage.tsx","./src/pages/profile/index.ts","./src/pages/profile/ui/profilepage.tsx","./src/pages/register/index.ts","./src/pages/register/ui/registerpage.tsx","./src/pages/seed-phrase/index.ts","./src/pages/seed-phrase/ui/seedphrasepage.tsx","./src/pages/swap/index.ts","./src/pages/swap/ui/swappage.tsx","./src/pages/wallet/index.ts","./src/pages/wallet/ui/walletpage.tsx","./src/shared/api/base.ts","./src/shared/api/csrf.ts","./src/shared/api/tokenstore.ts","./src/shared/api/types.ts","./src/shared/config/constants.ts","./src/shared/config/env.ts","./src/shared/config/routes.ts","./src/shared/lib/hooks/usedebounce.ts","./src/shared/lib/hooks/uselocalstorage.ts","./src/shared/lib/utils/cn.ts","./src/shared/types/index.ts","./src/shared/ui/index.ts","./src/shared/ui/button/button.tsx","./src/shared/ui/button/index.ts","./src/shared/ui/formfield/formfield.tsx","./src/shared/ui/formfield/index.ts","./src/shared/ui/notification/notification.tsx","./src/shared/ui/notification/index.ts","./src/shared/ui/pill/pill.tsx","./src/shared/ui/pill/index.ts","./src/shared/ui/primarybutton/primarybutton.tsx","./src/shared/ui/primarybutton/index.ts","./src/shared/ui/title/title.tsx","./src/shared/ui/tokenicon/tokenicon.tsx","./src/shared/ui/tokenicon/index.ts","./src/widgets/about/index.ts","./src/widgets/about/ui/about.tsx","./src/widgets/balance-card/index.ts","./src/widgets/balance-card/ui/balancecard.tsx","./src/widgets/converter-page/index.ts","./src/widgets/converter-page/ui/agreementcheck.tsx","./src/widgets/converter-page/ui/commissionpanel.tsx","./src/widgets/converter-page/ui/convertersection.tsx","./src/widgets/currency-converter/index.ts","./src/widgets/currency-converter/model/tiers.ts","./src/widgets/currency-converter/model/useconverter.ts","./src/widgets/currency-converter/ui/agreementcheckbox.tsx","./src/widgets/currency-converter/ui/commissiontable.tsx","./src/widgets/currency-converter/ui/converter.tsx","./src/widgets/currency-converter/ui/tiers.tsx","./src/widgets/footer/index.ts","./src/widgets/footer/ui/footer.tsx","./src/widgets/header/index.ts","./src/widgets/header/ui/header.tsx","./src/widgets/hero/index.ts","./src/widgets/hero/lib/usecountdown.ts","./src/widgets/hero/ui/conversionflow.tsx","./src/widgets/hero/ui/countdown.tsx","./src/widgets/hero/ui/exchangecard.tsx","./src/widgets/hero/ui/hero.tsx","./src/widgets/kyc-verification/index.ts","./src/widgets/kyc-verification/model/usekyc.ts","./src/widgets/kyc-verification/ui/kycmodal.tsx","./src/widgets/kyc-verification/ui/kycwidget.tsx","./src/widgets/login-form/index.ts","./src/widgets/login-form/model/useloginform.ts","./src/widgets/login-form/ui/loginform.tsx","./src/widgets/networks-table/index.ts","./src/widgets/networks-table/model/networks.ts","./src/widgets/networks-table/ui/networkstable.tsx","./src/widgets/profile/index.ts","./src/widgets/profile/ui/profileavatar.tsx","./src/widgets/profile/ui/profilesection.tsx","./src/widgets/register-form/index.ts","./src/widgets/register-form/model/useregisterform.ts","./src/widgets/register-form/ui/registerform.tsx","./src/widgets/seed-phrase/index.ts","./src/widgets/seed-phrase/model/useseedphrase.ts","./src/widgets/seed-phrase/ui/seedphrasewidget.tsx","./src/widgets/swap-form/index.ts","./src/widgets/swap-form/model/useswapform.ts","./src/widgets/swap-form/ui/raterow.tsx","./src/widgets/swap-form/ui/swapcard.tsx","./src/widgets/swap-form/ui/swapdirectionbutton.tsx","./src/widgets/swap-form/ui/swapform.tsx","./src/widgets/swap-form/ui/swapinfopanel.tsx","./src/widgets/swap-form/ui/tokenselect.tsx","./src/widgets/token-table/index.ts","./src/widgets/token-table/model/tokens.ts","./src/widgets/token-table/model/usetokenrows.ts","./src/widgets/token-table/ui/tokentable.tsx","./src/widgets/wallet-header/index.ts","./src/widgets/wallet-header/ui/walletheader.tsx"],"version":"5.6.3"}
\ No newline at end of file