Feat: Transferable tokens (#2537)

src/renderer/entities/asset/ui/AssetDetails/AssetDetails.tsx

@@ -1,13 +1,15 @@
+import { type BN } from '@polkadot/util';
+import { BigNumber } from 'bignumber.js';
+
 import { type Asset } from '@/shared/core';
-import { Shimmering } from '@/shared/ui/Shimmering/Shimmering';
-import { HelpText } from '@/shared/ui/Typography/index';
+import { HelpText, Shimmering } from '@/shared/ui';
 import { AssetFiatBalance } from '@/entities/price';
 import { AssetBalance } from '../AssetBalance/AssetBalance';
 
 type Props = {
   asset: Asset;
   label: string;
-  value?: string;
+  value?: BN;
 };
 
 export const AssetDetails = ({ asset, value, label }: Props) => {
@@ -17,7 +19,13 @@ export const AssetDetails = ({ asset, value, label }: Props) => {
         {label}
       </HelpText>
       <dd>{value ? <AssetBalance value={value} asset={asset} /> : <Shimmering width={150} height={20} />}</dd>
-      <dd>{value ? <AssetFiatBalance amount={value} asset={asset} /> : <Shimmering width={56} height={18} />}</dd>
+      <dd>
+        {value ? (
+          <AssetFiatBalance amount={new BigNumber(value.toString())} asset={asset} />
+        ) : (
+          <Shimmering width={56} height={18} />
+        )}
+      </dd>
     </div>
   );
 };

src/renderer/entities/balance/model/balance-model.ts

@@ -1,7 +1,7 @@
 import { createEffect, createEvent, createStore, sample } from 'effector';
 import { throttle } from 'patronum';
 
-import { storageService } from '@/shared/api/storage';
+import { balanceMapper, storageService } from '@/shared/api/storage';
 import { type Balance, type ID } from '@/shared/core';
 import { balanceUtils } from '../lib/balance-utils';
 import { BUFFER_DELAY, SAVE_TIMEOUT } from '../lib/constants';
@@ -14,7 +14,9 @@ const $balances = createStore<Balance[]>([]);
 const $balancesBuffer = createStore<Balance[]>([]);
 
 const insertBalancesFx = createEffect(async (balances: Balance[]): Promise<void> => {
-  await storageService.balances.insertAll(balances);
+  const dbBalances = balances.map(balanceMapper.toDB);
+
+  await storageService.balances.insertAll(dbBalances);
 });
 
 const removeBalancesFx = createEffect(async (ids: ID[]): Promise<void> => {

src/renderer/features/assets/AssetsChainView/ui/AssetCard/AssetCard.test.tsx

@@ -1,3 +1,4 @@
+import { BN_TEN, BN_TWO } from '@polkadot/util';
 import { act, render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { fork } from 'effector';
@@ -28,8 +29,8 @@ const defaultProps = {
     assetId: testAsset.assetId.toString(),
     chainId: testChain.chainId,
     accountId: TEST_ACCOUNTS[0],
-    free: '10',
-    frozen: '2',
+    free: BN_TEN,
+    frozen: BN_TWO,
   } as Balance,
 };
 

src/renderer/features/assets/AssetsChainView/ui/AssetCard/AssetCard.tsx

@@ -4,7 +4,7 @@ import { type KeyboardEvent } from 'react';
 import { type Asset, type Balance, type ChainId } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { useToggle } from '@/shared/lib/hooks';
-import { KeyboardKey, cnTw, totalAmount, transferableAmount } from '@/shared/lib/utils';
+import { KeyboardKey, cnTw, totalAmount, transferableAmountBN } from '@/shared/lib/utils';
 import { BodyText, Shimmering } from '@/shared/ui';
 import { AssetBalance, AssetDetails, AssetIcon, AssetLinks } from '@/entities/asset';
 import { AssetFiatBalance, TokenPrice, priceProviderModel } from '@/entities/price';
@@ -30,7 +30,7 @@ export const AssetCard = ({ chainId, asset, balance }: Props) => {
     }
   };
 
-  const transferableBalance = balance?.free ? transferableAmount(balance) : undefined;
+  const transferableBalance = balance ? transferableAmountBN(balance) : undefined;
 
   // TODO: move <li> in parent beneath <ul>
   return (

src/renderer/features/assets/AssetsChainView/ui/NetworkAssets/NetworkAssets.tsx

@@ -50,15 +50,18 @@ export const NetworkAssets = ({ chain, accounts, query, hideZeroBalances, search
   useEffect(() => {
     const chainBalances = balances.filter((b) => b.chainId === chain.chainId && accountIds.includes(b.accountId));
 
+    const newBalancesObject: Record<string, Balance> = {};
     const groupedBalances = Object.values(groupBy(chainBalances, 'assetId'));
 
-    const newBalancesObject = groupedBalances.reduce<Record<string, Balance>>((acc, accountBalances) => {
-      acc[accountBalances[0].assetId] = accountBalances.reduce<Balance>((balancesAcc, balance) => {
-        return sumBalances(balance, balancesAcc);
-      }, {} as Balance);
+    for (const accountBalances of groupedBalances) {
+      let total = {} as Balance;
 
-      return acc;
-    }, {});
+      for (const balance of accountBalances) {
+        total = sumBalances(balance, total);
+      }
+
+      newBalancesObject[accountBalances[0].assetId] = total;
+    }
 
     setBalancesObject(newBalancesObject);
   }, [balances, accountIds.join('')]);

src/renderer/features/assets/AssetsPortfolioView/lib/tokensService.ts

@@ -94,7 +94,7 @@ function getChainWithBalance(
 
 function hideZeroBalances(hideZeroBalance: boolean, activeTokensWithBalance: AssetByChains[]): AssetByChains[] {
   return activeTokensWithBalance.filter((token) => {
-    return hideZeroBalance && totalAmount(token.totalBalance) === ZERO_BALANCE ? false : true;
+    return !hideZeroBalance || totalAmount(token.totalBalance) !== ZERO_BALANCE;
   });
 }
 

src/renderer/features/assets/AssetsPortfolioView/model/__tests__/portfolio-model.test.ts

@@ -1,10 +1,11 @@
+import { BN_ZERO } from '@polkadot/util';
 import { allSettled, fork } from 'effector';
 
 import { type AssetByChains } from '@/shared/core';
 import { AssetsListView } from '@/entities/asset';
 import { portfolioModel } from '../portfolio-model';
 
-const mockTokens = [
+const mockTokens: AssetByChains[] = [
   {
     name: 'Polkadot',
     precision: 10,
@@ -18,17 +19,17 @@ const mockTokens = [
         assetId: 0,
         assetSymbol: 'DOT',
         balance: {
-          free: '0',
-          reserved: '0',
-          frozen: '0',
+          free: BN_ZERO,
+          reserved: BN_ZERO,
+          frozen: BN_ZERO,
           locked: [],
         },
       },
     ],
     totalBalance: {
-      free: '0',
-      reserved: '0',
-      frozen: '0',
+      free: BN_ZERO,
+      reserved: BN_ZERO,
+      frozen: BN_ZERO,
       locked: [],
     },
   },
@@ -45,21 +46,21 @@ const mockTokens = [
         assetId: 0,
         assetSymbol: 'KSM',
         balance: {
-          free: '0',
-          reserved: '0',
-          frozen: '0',
+          free: BN_ZERO,
+          reserved: BN_ZERO,
+          frozen: BN_ZERO,
           locked: [],
         },
       },
     ],
     totalBalance: {
-      free: '0',
-      reserved: '0',
-      frozen: '0',
+      free: BN_ZERO,
+      reserved: BN_ZERO,
+      frozen: BN_ZERO,
       locked: [],
     },
   },
-] as AssetByChains[];
+];
 
 describe('features/assets/AssetsPortfolioView/model/portfolio-model', () => {
   test('should handle activeViewChanged event', async () => {

src/renderer/features/balances/subscription/model/__tests__/balance-sub-model.test.ts

@@ -2,7 +2,7 @@ import { type Scope, allSettled, fork } from 'effector';
 
 import { balanceService } from '@/shared/api/balances';
 import { storageService } from '@/shared/api/storage';
-import { type Balance, ConnectionStatus } from '@/shared/core';
+import { type ChainId, ConnectionStatus } from '@/shared/core';
 import { balanceModel } from '@/entities/balance';
 import { networkModel } from '@/entities/network';
 import { walletModel } from '@/entities/wallet';
@@ -247,10 +247,10 @@ describe('features/balances/subscription/model/balance-sub-model', () => {
     };
 
     const newBalances = [
-      { id: 1, chainId: '0x01', accountId: accounts[2].accountId },
-      { id: 2, chainId: '0x02', accountId: accounts[3].accountId },
-      { id: 3, chainId: '0x02', accountId: accounts[0].accountId },
-    ] as unknown as Balance[];
+      { id: 1, chainId: '0x01' as ChainId, accountId: accounts[2].accountId, assetId: '1' },
+      { id: 2, chainId: '0x02' as ChainId, accountId: accounts[3].accountId, assetId: '1' },
+      { id: 3, chainId: '0x02' as ChainId, accountId: accounts[0].accountId, assetId: '1' },
+    ];
 
     jest.spyOn(storageService.balances, 'readAll').mockResolvedValue(newBalances);
 

src/renderer/features/balances/subscription/model/balance-sub-model.ts

@@ -4,7 +4,7 @@ import mapValues from 'lodash/mapValues';
 import { combineEvents, once, previous, spread } from 'patronum';
 
 import { balanceService } from '@/shared/api/balances';
-import { storageService } from '@/shared/api/storage';
+import { balanceMapper, storageService } from '@/shared/api/storage';
 import {
   type AccountId,
   type Balance,
@@ -23,7 +23,7 @@ import { type SubAccounts, type Subscriptions } from '../lib/types';
 
 const walletToUnsubSet = createEvent<Wallet>();
 const walletToSubSet = createEvent<Wallet>();
-const balancesUpdated = createEvent<Balance[]>();
+const balancesUpdated = createEvent<Omit<Balance, 'id'>[]>();
 
 const $subscriptions = createStore<Subscriptions>({});
 const $subAccounts = createStore<SubAccounts>({});
@@ -36,7 +36,7 @@ const populateBalancesFx = createEffect(async (accountIds: Set<AccountId>): Prom
 
   const balances = await storageService.balances.readAll();
 
-  return balances.filter((balance) => accountIds.has(balance.accountId));
+  return balances.filter((balance) => accountIds.has(balance.accountId)).map(balanceMapper.fromDB);
 });
 
 type UnsubWalletParams = {
@@ -190,7 +190,7 @@ sample({
     isPending: populateBalancesFx.pending,
   },
   fn: ({ balancesBucket, isPending }, newBalances) => {
-    const updatedBalances = balanceUtils.getMergeBalances(balancesBucket, newBalances);
+    const updatedBalances = balanceUtils.getMergeBalances(balancesBucket, newBalances as Balance[]);
 
     return {
       bucket: isPending ? updatedBalances : [],