From a8924dbf02a91eb23729754d6150408e7ce31159 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 17 Jan 2024 12:23:03 +0200
Subject: [PATCH 01/10] Calculate pnl values

---
 .../parseData/parseBalanceInfo.tsx            |  8 +++-
 .../table/balancesTable/utils/index.tsx       | 37 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
index 0a591912..d3e734a1 100644
--- a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
+++ b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
@@ -38,6 +38,7 @@ import { TFunction } from 'i18next'
 import { Button } from 'antd'
 import { FiSend } from 'react-icons/fi'
 import { LinksButton } from '../../links/Links'
+import { PnlData } from '../utils'
 
 const getAccountData = (info: AccountInfoByChain, t: TFunction) => {
   const { reservedBalance, freeBalance, lockedBalance } = info
@@ -371,9 +372,14 @@ export const parseBalancesTableInfo = ({
               onTransferClick(nativeSymbol, id)
             }
 
+            const chainValue = <div>
+              {isMulti ? <div className='ml-5'>{chain}</div> : chain}
+              <PnlData symbol={nativeSymbol} balanceValue={balanceValue}/>
+            </div>
+
             return {
               key: key,
-              chain: isMulti ? <div className='ml-5'>{chain}</div> : chain,
+              chain: chainValue,
               balance: getBalancePart(true),
               price: !isMulti ? price : <></>,
               total: (
diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx
index 00a94046..80d016a3 100644
--- a/src/components/table/balancesTable/utils/index.tsx
+++ b/src/components/table/balancesTable/utils/index.tsx
@@ -16,6 +16,7 @@ import ChainCentricIcon from '@/assets/icons/chain-centric.svg'
 import store from 'store'
 import { AccountInfoItem } from '@/components/identity/types'
 import { BalanceEntityRecord } from '@/rtk/features/balances/balancesSlice'
+import { usePrices } from '@/rtk/features/prices/pricesHooks'
 
 export const allowedTokensByNetwork: Record<string, string[]> = {
   statemine: [
@@ -219,3 +220,39 @@ export const createFieldSkeletons = (data?: BalancesTableInfo[]) => {
     return item
   })
 }
+// 55894.3459
+// 0,010318590723302
+// 576,7508790888
+// 36,2181209112
+type PnlDataProps = {
+  symbol: string
+  balanceValue: BN
+}
+
+export const PnlData = ({ symbol, balanceValue }: PnlDataProps) => {
+  const prices = usePrices()
+
+  const priceObjBySymbol = prices?.find(item => item.symbol.toLowerCase() === symbol.toLowerCase())
+
+  if(!priceObjBySymbol) return null
+
+  const { current_price, price_change_percentage_24h } = priceObjBySymbol
+
+  const priceChange24h = new BN(price_change_percentage_24h)
+
+  const price24hAgo = new BN(current_price).dividedBy(new BN(1).minus(priceChange24h.dividedBy(100)))
+
+  console.log(symbol)
+  console.log('price_change_percentage_24h', price_change_percentage_24h)
+  console.log('Current price', current_price)
+  console.log('Price 24h', price24hAgo.toString())
+
+  const balance24hAgo = balanceValue.multipliedBy(price24hAgo)
+  const currentBalance = balanceValue.multipliedBy(current_price)
+
+  const pnl = currentBalance.minus(balance24hAgo)
+
+  return <>
+    Pnl 24h: {pnl.toFixed(4)}
+  </>
+}

From 5aa124a9c5c8e8f0bd163b8309e104b7f80e79ed Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Thu, 18 Jan 2024 16:05:15 +0200
Subject: [PATCH 02/10] Fix mobile version of balances cards

---
 src/components/homePage/AccountInfo.tsx       |  23 +-
 src/components/homePage/HomePageLayout.tsx    |   4 +-
 .../homePage/address-views/utils/index.tsx    |   8 +-
 src/components/qrs/QrModal.tsx                |   2 +-
 src/components/table/balancesTable/index.tsx  |   8 +-
 .../parseData/parseBalanceInfo.tsx            |  52 ++---
 .../parseData/parseTokenCentricView.tsx       | 173 +++++++++------
 .../balancesTable/utils/Index.module.sass     |   6 +
 .../table/balancesTable/utils/index.tsx       |  70 +++---
 .../table/customCard/BalancesCard.module.sass | 166 ++++++++++++++
 .../table/customCard/BalancesSectionCard.tsx  | 203 ++++++++++++++++++
 src/components/table/customCard/index.tsx     |  33 ++-
 .../table/customTable/TableContext.tsx        |   7 +-
 src/components/table/links/Links.tsx          |   4 +-
 src/components/table/types.ts                 |   1 +
 src/components/table/utils.tsx                |  41 +++-
 src/components/utils/MutedText.tsx            |   2 +-
 src/i18n/en.json                              |   4 +-
 src/styles/bootstrap-utilities-4.3.1.css      |   4 +
 src/styles/subsocial-vars.scss                |   2 +
 src/styles/subsocial.scss                     |   8 +
 21 files changed, 640 insertions(+), 181 deletions(-)
 create mode 100644 src/components/table/customCard/BalancesCard.module.sass
 create mode 100644 src/components/table/customCard/BalancesSectionCard.tsx

diff --git a/src/components/homePage/AccountInfo.tsx b/src/components/homePage/AccountInfo.tsx
index 25befc51..eb73ad9a 100644
--- a/src/components/homePage/AccountInfo.tsx
+++ b/src/components/homePage/AccountInfo.tsx
@@ -3,17 +3,14 @@ import { MutedDiv } from '../utils/MutedText'
 import Section from '../utils/Section'
 import { CopyAddress } from './address-views/utils'
 import { LARGE_AVATAR_SIZE } from '../utils/Size.config'
-import { toShortAddress, convertAddressToChainFormat } from '../utils/index'
+import { toShortAddress } from '../utils/index'
 import { DfMd } from '../utils/DfMd'
 import { useMyExtensionAddresses } from '../providers/MyExtensionAccountsContext'
 import { useResponsiveSize } from '../responsive'
 import BaseAvatar from '../utils/DfAvatar'
 import styles from './address-views/utils/index.module.sass'
-import { LinkWithIcon } from '../table/utils'
-import { resolveStatescanUrl } from '../table/links'
 import { AddressQrModal } from '../qrs/QrModal'
 import clsx from 'clsx'
-import { useChainInfo } from '../../rtk/features/multiChainInfo/multiChainInfoHooks'
 import { allAccountsAvatar } from './address-views/utils/index'
 import { toGenericAccountId } from 'src/rtk/app/util'
 import {
@@ -60,7 +57,6 @@ export const AccountInfo = (props: Props) => {
   const { t } = useTranslation()
 
   const accounts = useMyExtensionAddresses()
-  const chains = useChainInfo()
 
   let { image: accountAvatar, about: accountDescription } = owner || {}
 
@@ -84,11 +80,6 @@ export const AccountInfo = (props: Props) => {
 
   const genericAccountId = toGenericAccountId(address?.toString())
 
-  const ksmAddress = convertAddressToChainFormat(
-    address?.toString(),
-    chains?.kusama?.ss58Format
-  )
-
   const addressView = (
     <div
       className={clsx(
@@ -109,21 +100,11 @@ export const AccountInfo = (props: Props) => {
       <div className='d-flex align-items-center'>
         {address && (
           <AddressQrModal
-            className='grey-light'
+            className='GrayIcon'
             address={address.toString()}
             openFromUrl
           />
         )}
-
-        {ksmAddress && (
-          <LinkWithIcon
-            link={resolveStatescanUrl(ksmAddress)}
-            className={clsx(styles.StatescanLink, 'grey-light')}
-            withCircle={false}
-            title={t('buttons.viewAddressOn', { website: 'Statescan.io' })}
-            icon='/images/statescan.svg'
-          />
-        )}
       </div>
     </div>
   )
diff --git a/src/components/homePage/HomePageLayout.tsx b/src/components/homePage/HomePageLayout.tsx
index da707bae..57d2c87a 100644
--- a/src/components/homePage/HomePageLayout.tsx
+++ b/src/components/homePage/HomePageLayout.tsx
@@ -2,7 +2,7 @@ import NtfLayout from '../ntf/NftsLayout'
 import { Tabs } from 'antd'
 import { useEffect, useMemo, useState } from 'react'
 import styles from './Index.module.sass'
-import BalancesTableNew from '../table/balancesTable'
+import BalancesTable from '../table/balancesTable'
 import { useSendEvent } from '../providers/AnalyticContext'
 import { useRouter } from 'next/router'
 import TxHistoryLayout from '../txHistory'
@@ -44,7 +44,7 @@ const HomePageLayout = ({ addresses }: OverviewSectionProps) => {
       {
         key: 'portfolio',
         tab: 'Portfolio',
-        children: <BalancesTableNew addresses={addresses} />,
+        children: <BalancesTable addresses={addresses} />,
       },
       {
         key: 'nfts',
diff --git a/src/components/homePage/address-views/utils/index.tsx b/src/components/homePage/address-views/utils/index.tsx
index 7abe8e22..52fc648b 100644
--- a/src/components/homePage/address-views/utils/index.tsx
+++ b/src/components/homePage/address-views/utils/index.tsx
@@ -30,6 +30,7 @@ type BalanceViewProps = {
   defaultPostfix?: string
   style?: CSSProperties
   className?: string
+  decimalClassName?: string
 }
 
 export const BalanceView = ({
@@ -42,6 +43,7 @@ export const BalanceView = ({
   defaultPostfix = '00',
   className,
   style,
+  decimalClassName
 }: BalanceViewProps) => {
   if (!value) return <>-</>
 
@@ -77,7 +79,7 @@ export const BalanceView = ({
       {postfixValue && (
         <>
           .
-          <span className='DfBalanceDecimals'>
+          <span className={clsx('DfBalanceDecimals', decimalClassName)}>
             {isPrefixInString ? postfixValue.slice(0, -1) : postfixValue}
           </span>
         </>
@@ -112,7 +114,7 @@ export const CopyAddress = ({
 
   return (
     <Copy
-      className={clsx('DfGreyLink', {
+      className={clsx('GrayText', {
         [styles.Copy]: !iconVisibility,
       }, className)}
       text={address.toString()}
@@ -126,7 +128,7 @@ export const CopyAddress = ({
           })}
         >
           {children}
-          <CopyOutlined className='ml-1 grey-light DfGreyLink' />
+          <CopyOutlined className='ml-1 GrayIcon' />
         </div>
       </Tooltip>
     </Copy>
diff --git a/src/components/qrs/QrModal.tsx b/src/components/qrs/QrModal.tsx
index 5bce891f..ba687256 100644
--- a/src/components/qrs/QrModal.tsx
+++ b/src/components/qrs/QrModal.tsx
@@ -94,7 +94,7 @@ export const AddressQrModal = ({ className, modalClassName, ...props }: Omit<QrM
 
   const QrButton = (props: ButtonProps) => (
     <Tooltip title={t('tooltip.showQR')}>
-      <HiOutlineQrCode className={clsx('DfGreyLink', className)} style={{ transform: 'scale(1.15)' }} {...(props as any)} />
+      <HiOutlineQrCode className={clsx('GrayIcon', className)} style={{ transform: 'scale(1.15)' }} {...(props as any)} />
     </Tooltip>
   )
 
diff --git a/src/components/table/balancesTable/index.tsx b/src/components/table/balancesTable/index.tsx
index a0004df8..c17bd321 100644
--- a/src/components/table/balancesTable/index.tsx
+++ b/src/components/table/balancesTable/index.tsx
@@ -30,7 +30,7 @@ type BalancesTableInnerProps = BalancesTableProps & {
   storeTableView: string
 }
 
-const BalancesTableNewInner = (props: BalancesTableInnerProps) => {
+const BalancesTableInner = (props: BalancesTableInnerProps) => {
   const { storeShowZeroBalance, storeTableView, addresses } = props
   const isMyAddress = useIsMyConnectedAddress(addresses?.[0])
   const tableVariantFromStore = store.get(BALANCE_TABLE_VARIANT)
@@ -78,7 +78,7 @@ const BalancesTableNewInner = (props: BalancesTableInnerProps) => {
   )
 }
 
-const BalancesTableNew = (props: BalancesTableProps) => {
+const BalancesTable = (props: BalancesTableProps) => {
   const storeProps = {
     storeShowZeroBalance: BALANCE_SHOW_ZERO_BALANCES,
     storeTableView: BALANCE_TABLE_VIEW,
@@ -88,9 +88,9 @@ const BalancesTableNew = (props: BalancesTableProps) => {
     <TableContextWrapper {...storeProps}>
       <PricesWarning />
 
-      <BalancesTableNewInner {...storeProps} {...props} />
+      <BalancesTableInner {...storeProps} {...props} />
     </TableContextWrapper>
   )
 }
 
-export default BalancesTableNew
+export default BalancesTable
diff --git a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
index d3e734a1..a48392e8 100644
--- a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
+++ b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
@@ -7,7 +7,7 @@ import {
   pluralize,
   toShortMoney,
 } from '@subsocial/utils'
-import { MutedSpan, MutedDiv } from '../../../utils/MutedText'
+import { MutedSpan } from '../../../utils/MutedText'
 import {
   ChainData,
   getBalanceWithDecimals,
@@ -17,7 +17,6 @@ import {
   getBalances,
   AccountPreview,
   getParentBalances,
-  resolveAccountDataImage,
 } from '../../utils'
 import styles from '../../Table.module.sass'
 import { BalancesTableInfo } from '../../types'
@@ -32,10 +31,10 @@ import { convertAddressToChainFormat, SubIcon } from '../../../utils/index'
 import { AccountIdentitiesRecord } from '../../../../rtk/features/identities/identitiesSlice'
 import { AccountInfoByChain } from '../../../identity/types'
 import { getSubsocialIdentityByAccount } from '../../../../rtk/features/identities/identitiesHooks'
-import BaseAvatar from '../../../utils/DfAvatar'
+import { RiQuestionLine } from 'react-icons/ri'
 import { BalanceView } from '../../../homePage/address-views/utils/index'
 import { TFunction } from 'i18next'
-import { Button } from 'antd'
+import { Button, Tooltip } from 'antd'
 import { FiSend } from 'react-icons/fi'
 import { LinksButton } from '../../links/Links'
 import { PnlData } from '../utils'
@@ -44,11 +43,6 @@ const getAccountData = (info: AccountInfoByChain, t: TFunction) => {
   const { reservedBalance, freeBalance, lockedBalance } = info
 
   return [
-    // {
-    //   key: 'frozen',
-    //   label: t('table.balances.frozen'),
-    //   value: frozenBalance?.toString() || '0',
-    // },
     {
       key: 'locked',
       label: t('table.balances.locked'),
@@ -75,7 +69,7 @@ const parseBalancesEntities = (
 ) => {
   const balancesInfoByKey: Record<string, any> = {}
 
-  Object.entries(balancesEntities).forEach(([ account, { balances } ]) => {
+  Object.entries(balancesEntities).forEach(([account, { balances }]) => {
     balances?.forEach((balance) => {
       const { network, info: balanceInfo } = balance || {}
 
@@ -85,7 +79,7 @@ const parseBalancesEntities = (
 
       const balanceInfoBySymbol: Record<string, any> = {}
 
-      Object.entries(balanceInfo || {}).forEach(([ symbol, info ]) => {
+      Object.entries(balanceInfo || {}).forEach(([symbol, info]) => {
         const { decimal } = getDecimalsAndSymbol(chainInfo, symbol)
 
         if (!decimal) return
@@ -175,7 +169,7 @@ export const parseBalancesTableInfo = ({
     tokenPrices
   )
 
-  const parsedData = [ ...supportedNetworks, ...evmLikeNetworks ].map(
+  const parsedData = [...supportedNetworks, ...evmLikeNetworks].map(
     (supportedNetwork) => {
       const chainInfo = chainsInfo[supportedNetwork]
 
@@ -279,6 +273,8 @@ export const parseBalancesTableInfo = ({
                     chain: <></>,
                     balance: <span className='bs-mr-4'>{balance}</span>,
                     price,
+                    balanceValue: balanceValue,
+                    symbol,
                     total,
                     totalValue,
                     className: styles.Children,
@@ -304,28 +300,31 @@ export const parseBalancesTableInfo = ({
                 })
 
                 const chain = (
-                  <div className='d-flex align-items-center'>
-                    <BaseAvatar
-                      size={24}
-                      avatar={resolveAccountDataImage(key)}
-                    />
-                    <div>{label}</div>
+                  <div className='w-fit'>
+                    <Tooltip
+                      title={label}
+                      className='d-flex align-items-center'
+                    >
+                      <div>{label}</div>
+                      <RiQuestionLine className='ml-1 GrayIcon' />
+                    </Tooltip>
                   </div>
                 )
 
                 return {
                   key,
                   chain: (
-                    <MutedDiv
+                    <div
                       className={clsx(
                         { [styles.SecondLevelBalances]: isMulti },
-                        'ml-5'
+                        'ml-5 GrayText'
                       )}
                     >
                       {chain}
-                    </MutedDiv>
+                    </div>
                   ),
                   balance: <span className='bs-mr-4'>{balance}</span>,
+                  balanceValue: valueWithDecimal,
                   price,
                   total,
                   totalValue,
@@ -355,6 +354,9 @@ export const parseBalancesTableInfo = ({
                 icon={icon}
                 name={name}
                 eventSource='balance_table'
+                desc={
+                  <PnlData symbol={nativeSymbol} balanceValue={balanceValue} />
+                }
               />
             ) : (
               <AccountPreview
@@ -372,14 +374,14 @@ export const parseBalancesTableInfo = ({
               onTransferClick(nativeSymbol, id)
             }
 
-            const chainValue = <div>
-              {isMulti ? <div className='ml-5'>{chain}</div> : chain}
-              <PnlData symbol={nativeSymbol} balanceValue={balanceValue}/>
-            </div>
+            const chainValue = (
+              <div>{isMulti ? <div className='ml-5'>{chain}</div> : chain}</div>
+            )
 
             return {
               key: key,
               chain: chainValue,
+              symbol: nativeSymbol,
               balance: getBalancePart(true),
               price: !isMulti ? price : <></>,
               total: (
diff --git a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
index 9c838e3a..64a39007 100644
--- a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
+++ b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
@@ -3,7 +3,10 @@ import { BalanceEntityRecord } from '../../../../rtk/features/balances/balancesS
 import { MultiChainInfo } from '../../../../rtk/features/multiChainInfo/types'
 import { AccountIdentitiesRecord } from '../../../../rtk/features/identities/identitiesSlice'
 import { TFunction } from 'i18next'
-import { AccountInfoByChain, BalancesStruct } from 'src/components/identity/types'
+import {
+  AccountInfoByChain,
+  BalancesStruct,
+} from 'src/components/identity/types'
 import BN from 'bignumber.js'
 import {
   AccountPreview,
@@ -14,21 +17,31 @@ import {
   getDecimalsAndSymbol,
   getParentBalances,
   getPrice,
-  resolveAccountDataImage,
 } from '../../utils'
 import { BalanceView } from 'src/components/homePage/address-views/utils'
-import { convertToBalanceWithDecimal, isDef, isEmptyObj, nonEmptyArr, pluralize, } from '@subsocial/utils'
-import BaseAvatar from 'src/components/utils/DfAvatar'
-import { MutedDiv } from 'src/components/utils/MutedText'
+import {
+  convertToBalanceWithDecimal,
+  isDef,
+  isEmptyObj,
+  nonEmptyArr,
+  pluralize,
+} from '@subsocial/utils'
 import clsx from 'clsx'
 import styles from '../../Table.module.sass'
 import { convertAddressToChainFormat, SubIcon } from 'src/components/utils'
 import { LinksButton } from '../../links/Links'
-import { Button } from 'antd'
+import { Button, Tooltip } from 'antd'
 import { FiSend } from 'react-icons/fi'
 import tokensCentricImages from 'public/images/folderStructs/token-centric-images.json'
 import { getSubsocialIdentityByAccount } from 'src/rtk/features/identities/identitiesHooks'
-import { allowedTokensByNetwork, decodeTokenId, encodeTokenId, getBalancePart, } from '../utils'
+import {
+  allowedTokensByNetwork,
+  decodeTokenId,
+  encodeTokenId,
+  getBalancePart,
+} from '../utils'
+import { PnlData } from '../utils/index'
+import { RiQuestionLine } from 'react-icons/ri'
 
 export type ParseBalanceTableInfoProps = {
   chainsInfo: MultiChainInfo
@@ -50,7 +63,7 @@ type NonTokenImageProps = {
   tokenId: string
 }
 
-const excludedTokensPrefixes = [ 'xc', 'a', 't', '3', 'vs', 'wa' ]
+const excludedTokensPrefixes = ['xc', 'a', 't', '3', 'vs', 'wa']
 
 const NonTokenImage = ({ tokenId }: NonTokenImageProps) => {
   const excludedTokenPrefix = excludedTokensPrefixes.find((prefix) =>
@@ -65,9 +78,13 @@ const NonTokenImage = ({ tokenId }: NonTokenImageProps) => {
 
 type NetworksIconsProps = {
   networkIcons: string[]
+  withCounter?: boolean
 }
 
-export const NetworksIcons = ({ networkIcons }: NetworksIconsProps) => {
+export const NetworksIcons = ({
+  networkIcons,
+  withCounter = false,
+}: NetworksIconsProps) => {
   const icons = networkIcons.map((icon, i) => {
     return (
       <AvatarOrSkeleton
@@ -78,7 +95,16 @@ export const NetworksIcons = ({ networkIcons }: NetworksIconsProps) => {
       />
     )
   })
-  return <div className={'d-flex alignt-items-center'}>{icons}</div>
+  return (
+    <div className='d-flex align-items-center'>
+      <div className={'d-flex alignt-items-center'}>{icons}</div>
+      {withCounter && (
+        <span className='GrayText ml-1'>
+          {pluralize({ count: networkIcons.length, singularText: 'chain' })}
+        </span>
+      )}
+    </div>
+  )
 }
 
 export const parseTokenCentricView = ({
@@ -160,7 +186,7 @@ export const parseTokenCentricView = ({
         })
 
         if (nonEmptyArr(children)) {
-          childrenBalances.children = [ ...children ]
+          childrenBalances.children = [...children]
         }
 
         const chainInfo = chainsInfo[firstNetwork]
@@ -184,7 +210,15 @@ export const parseTokenCentricView = ({
           <ChainData
             icon={imagePath}
             name={tokenId}
-            desc={<NetworksIcons networkIcons={networkIcons} />}
+            desc={
+              <div>
+                <NetworksIcons networkIcons={networkIcons} withCounter />
+                <PnlData
+                  symbol={tokenId}
+                  balanceValue={balanceValueWithDecimals}
+                />
+              </div>
+            }
           />
         ) : (
           <AccountPreview
@@ -207,9 +241,10 @@ export const parseTokenCentricView = ({
           name: tokenId,
           address: '',
           decimals,
+          symbol: tokenId,
           totalValue: totalValue,
           balanceWithoutChildren: getBalancePart(balance, false),
-          balanceValue: totalBalance,
+          balanceValue: balanceValueWithDecimals,
           balanceView: getBalancePart(balance, true),
           links: [],
           networkIcons,
@@ -293,7 +328,7 @@ export const parseTokenCentricView = ({
   const balancesInfo = parsedData.filter(isDef).flat()
 
   return balancesInfo.sort((a, b) =>
-      b.totalTokensValue.minus(a.totalTokensValue).toNumber()
+    b.totalTokensValue.minus(a.totalTokensValue).toNumber()
   )
 }
 
@@ -306,14 +341,14 @@ type BalanceByToken = {
 
 type BalancesByTokenId = Record<string, BalanceByToken>
 
-function parseBalancesByToken (
+function parseBalancesByToken(
   balancesEntities: BalanceEntityRecord,
   multiChainInfo: MultiChainInfo
 ) {
   const balancesByToken: BalancesByTokenId = {}
   const tokenIds = new Set<string>()
 
-  Object.entries(balancesEntities).forEach(([ address, balancesEntity ]) => {
+  Object.entries(balancesEntities).forEach(([address, balancesEntity]) => {
     balancesEntity.balances?.forEach(({ network, info }) => {
       if (!info || isEmptyObj(info)) return
 
@@ -322,7 +357,7 @@ function parseBalancesByToken (
 
       const { ss58Format } = chainInfo
 
-      Object.entries(info).forEach(([ tokenId, balances ]) => {
+      Object.entries(info).forEach(([tokenId, balances]) => {
         const encodedTokenId = encodeTokenId(address, tokenId)
 
         if ((allowedTokens && !allowedTokens.includes(tokenId)) || !tokenId)
@@ -337,7 +372,7 @@ function parseBalancesByToken (
         const { totalBalance: newTotalBalance } = balances
         const { decimal } = getDecimalsAndSymbol(chainInfo, tokenId)
 
-        if(!decimal) return
+        if (!decimal) return
 
         const totalBalanceValue = (totalBalanceSum || new BN('0')).plus(
           newTotalBalance || '0'
@@ -381,7 +416,7 @@ type GetChildrenBalanceParams = {
   t: TFunction
 }
 
-function getChildrenBalances ({
+function getChildrenBalances({
   balancesByNetwork,
   isMulti,
   chainsInfo,
@@ -394,7 +429,7 @@ function getChildrenBalances ({
   const balancesByNetworkEntries = Object.entries(balancesByNetwork)
   const networkIcons: string[] = []
 
-  const result = balancesByNetworkEntries.map(([ network, balances ]) => {
+  const result = balancesByNetworkEntries.map(([network, balances]) => {
     const { totalBalance, accountId, ...otherBalances } = balances
 
     const chainInfo = chainsInfo[network]
@@ -403,7 +438,7 @@ function getChildrenBalances ({
 
     const { decimal } = getDecimalsAndSymbol(chainInfo, tokenId)
 
-    if(!decimal) return
+    if (!decimal) return
 
     const balanceValue = getBalanceWithDecimals({
       totalBalance: totalBalance ?? '0',
@@ -431,15 +466,17 @@ function getChildrenBalances ({
       decimal,
     })
 
-    childrenBalances.children = [ ...accountData.reverse() ]
+    childrenBalances.children = [...accountData.reverse()]
 
-    const chain = <ChainData 
-      icon={icon} 
-      name={name} 
-      avatarSize={'small'} 
-      isBoldName={false} 
-      eventSource='balance_table'
-    />
+    const chain = (
+      <ChainData
+        icon={icon}
+        name={name}
+        avatarSize={'small'}
+        isBoldName={false}
+        eventSource='balance_table'
+      />
+    )
 
     const onButtonClick = (e: React.MouseEvent<HTMLElement>) => {
       e.stopPropagation()
@@ -510,7 +547,7 @@ type GetAccountDataValuesParams = BalancesStruct & {
   t: TFunction
 }
 
-function getAccountDataValues ({ t, ...info }: GetAccountDataValuesParams) {
+function getAccountDataValues({ t, ...info }: GetAccountDataValuesParams) {
   const { reservedBalance, freeBalance, lockedBalance } = info
 
   return [
@@ -545,7 +582,7 @@ type GetAccountDataRowsParams = GetAccountDataValuesParams & {
   isMulti?: boolean
 }
 
-function getAccountDataRows ({
+function getAccountDataRows({
   decimal,
   price,
   priceValue,
@@ -559,42 +596,46 @@ function getAccountDataRows ({
     ...accountDataValuesParams,
   })
 
-  return accountDataValues.map(
-      ({ key, label, value }: any) => {
-        const valueWithDecimal = getBalanceWithDecimals({
-          totalBalance: value,
-          decimals: decimal,
-        })
+  return accountDataValues.map(({ key, label, value }: any) => {
+    const valueWithDecimal = getBalanceWithDecimals({
+      totalBalance: value,
+      decimals: decimal,
+    })
 
-        const { total, totalValue, balance } = getBalances({
-          balanceValue: valueWithDecimal,
-          priceValue,
-          symbol: tokenId,
-          t,
-        })
+    const { total, totalValue, balance } = getBalances({
+      balanceValue: valueWithDecimal,
+      priceValue,
+      symbol: tokenId,
+      t,
+    })
 
-        const chain = (
-            <div className='d-flex align-items-center'>
-              <BaseAvatar size={24} avatar={resolveAccountDataImage(key)}/>
-              <div>{label}</div>
-            </div>
-        )
+    const chain = (
+      <div className='w-fit'>
+        <Tooltip title={label} className='d-flex align-items-center'>
+          <div>{label}</div>
+          <RiQuestionLine className='ml-1 GrayIcon' />
+        </Tooltip>
+      </div>
+    )
 
-        return {
-          key,
-          chain: (
-              <MutedDiv
-                  className={clsx({ [styles.SecondLevelBalances]: isMulti }, 'ml-5')}
-              >
-                {chain}
-              </MutedDiv>
-          ),
-          balance: <span className='bs-mr-4'>{balance}</span>,
-          price,
-          total,
-          totalValue,
-          className: styles.Children,
-        }
-      }
-  )
+    return {
+      key,
+      chain: (
+        <div
+          className={clsx(
+            { [styles.SecondLevelBalances]: isMulti },
+            'ml-5 GrayText'
+          )}
+        >
+          {chain}
+        </div>
+      ),
+      balance: <span className='bs-mr-4'>{balance}</span>,
+      balanceValue: valueWithDecimal,
+      price,
+      total,
+      totalValue,
+      className: styles.Children,
+    }
+  })
 }
diff --git a/src/components/table/balancesTable/utils/Index.module.sass b/src/components/table/balancesTable/utils/Index.module.sass
index cae7a4ea..b7f4f7be 100644
--- a/src/components/table/balancesTable/utils/Index.module.sass
+++ b/src/components/table/balancesTable/utils/Index.module.sass
@@ -80,6 +80,12 @@
   &:hover
     background: transparent
 
+.PnLPositive
+  color: #2EBD85
+
+.PnLNegative
+  color: #F6465D
+
 @media ( max-width: $max_mobile_width )
   .PricesWarning
     flex-direction: column
diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx
index 80d016a3..3450ec24 100644
--- a/src/components/table/balancesTable/utils/index.tsx
+++ b/src/components/table/balancesTable/utils/index.tsx
@@ -44,7 +44,7 @@ export const allowedTokensByNetwork: Record<string, string[]> = {
     'PHA',
     'PARA',
   ],
-  statemint: [ 'WETH', 'WBTC', 'BTC', 'DOT', 'USDC', 'USDT', 'BUSD' ],
+  statemint: ['WETH', 'WBTC', 'BTC', 'DOT', 'USDC', 'USDT', 'BUSD'],
 }
 
 const BALANCES_KEY = 'balances'
@@ -84,7 +84,7 @@ export const encodeTokenId = (address: string, tokenId: string) =>
   `${address}-and-${tokenId}`
 
 export const decodeTokenId = (tokenId: string) => {
-  const [ address, id ] = tokenId.split('-and-')
+  const [address, id] = tokenId.split('-and-')
   return { address, id }
 }
 
@@ -95,12 +95,23 @@ type LabelWithIconProps = {
   iconClassName?: string
 }
 
-export const LabelWithIcon = ({ label, iconSrc, iconSize = 16, iconClassName }: LabelWithIconProps) => {
+export const LabelWithIcon = ({
+  label,
+  iconSrc,
+  iconSize = 16,
+  iconClassName,
+}: LabelWithIconProps) => {
   return (
     <div className={'d-flex align-items-center'}>
       <div className={clsx(styles.IconCircle, iconClassName, 'bs-mr-2')}>
         {typeof iconSrc === 'string' ? (
-          <Image src={iconSrc} alt='' className={styles.IconInLabel} height={iconSize} width={iconSize} />
+          <Image
+            src={iconSrc}
+            alt=''
+            className={styles.IconInLabel}
+            height={iconSize}
+            width={iconSize}
+          />
         ) : (
           iconSrc
         )}
@@ -137,15 +148,6 @@ export const balancesViewOpt = [
     ),
     key: 'table',
   },
-  {
-    label: (
-      <LabelWithIcon
-        iconSrc={<AppstoreOutlined width={16} />}
-        label={'Cards'}
-      />
-    ),
-    key: 'cards',
-  },
   {
     label: (
       <LabelWithIcon
@@ -220,39 +222,49 @@ export const createFieldSkeletons = (data?: BalancesTableInfo[]) => {
     return item
   })
 }
-// 55894.3459
-// 0,010318590723302
-// 576,7508790888
-// 36,2181209112
+
 type PnlDataProps = {
   symbol: string
   balanceValue: BN
+  className?: string
 }
 
-export const PnlData = ({ symbol, balanceValue }: PnlDataProps) => {
+export const PnlData = ({ symbol, balanceValue, className }: PnlDataProps) => {
   const prices = usePrices()
 
-  const priceObjBySymbol = prices?.find(item => item.symbol.toLowerCase() === symbol.toLowerCase())
+  const priceObjBySymbol = prices?.find(
+    (item) => item.symbol.toLowerCase() === symbol.toLowerCase()
+  )
 
-  if(!priceObjBySymbol) return null
+  if (!priceObjBySymbol) return null
 
   const { current_price, price_change_percentage_24h } = priceObjBySymbol
 
   const priceChange24h = new BN(price_change_percentage_24h)
 
-  const price24hAgo = new BN(current_price).dividedBy(new BN(1).minus(priceChange24h.dividedBy(100)))
-
-  console.log(symbol)
-  console.log('price_change_percentage_24h', price_change_percentage_24h)
-  console.log('Current price', current_price)
-  console.log('Price 24h', price24hAgo.toString())
+  const price24hAgo = new BN(current_price).dividedBy(
+    new BN(1).plus(priceChange24h.dividedBy(100))
+  )
 
   const balance24hAgo = balanceValue.multipliedBy(price24hAgo)
   const currentBalance = balanceValue.multipliedBy(current_price)
 
   const pnl = currentBalance.minus(balance24hAgo)
+  const pnlPercent = pnl.dividedBy(balance24hAgo).multipliedBy(100)
+
+  if (pnl.isZero()) return null
+
+  const pnlString = pnl.toFixed(4).replace('-', '')
+  const pnlPercentString = pnlPercent.toFixed(4).replace('-', '')
 
-  return <>
-    Pnl 24h: {pnl.toFixed(4)}
-  </>
+  const sign = pnl.isPositive() ? '+' : '-'
+
+  return (
+    <div className={clsx('font-weight-normal', className)}>
+      <span className='GrayText'>Pnl 24h:</span>{' '}
+      <span className={styles[`PnL${pnl.isPositive() ? 'Positive' : 'Negative'}`]}>
+        {sign}${pnlString} ({sign}{pnlPercentString}%)
+      </span>
+    </div>
+  )
 }
diff --git a/src/components/table/customCard/BalancesCard.module.sass b/src/components/table/customCard/BalancesCard.module.sass
new file mode 100644
index 00000000..3eba160a
--- /dev/null
+++ b/src/components/table/customCard/BalancesCard.module.sass
@@ -0,0 +1,166 @@
+@import 'src/styles/subsocial-vars.scss'
+
+.CardWrapper
+  display: flex
+  flex-direction: column
+
+.Card
+  background: white
+  padding: $space_tiny $space_normal
+  display: flex
+  align-items: start
+
+.RowTitle
+  font-size: 15px
+  font-weight: 600
+  line-height: 1
+
+.RowDesc
+  font-size: 12px
+  font-weight: 400
+  line-height: 24px
+
+.TokenBalance
+  font-size: 15px
+  font-weight: 500
+  line-height: 1
+
+.BalanceInDollars
+  font-size: 12px
+  font-weight: 400
+  line-height: 1
+  color: $color_gray
+
+.TokenDecimals
+  font-size: 12px !important
+  font-weight: 400 !important
+  color: #222 !important
+
+.BalanceInfo
+  width: 100%
+  display: flex
+  flex-direction: column
+  gap: $space_normal
+
+.TopPart
+  display: flex
+  justify-content: space-between
+  align-items: center
+  gap: $space_tiny
+
+.TopPartBlock
+  display: flex
+  flex-direction: column
+  gap: 10px
+
+  span
+    line-height: 1
+
+.BottomPart
+  display: flex
+  flex-direction: column
+  gap: $space_tiny
+  font-size: 12px
+
+  button
+    display: flex 
+    align-items: center
+    gap: 2px
+
+    background: #F8FAFC !important
+    color: #94A3B8 !important
+    border: none !important
+    font-size: 12px
+    line-height: 1
+    border-radius: 6px !important
+    padding: 2px 2px 2px 6px !important
+
+
+    svg
+      font-size: 14px !important
+
+
+.LinksButton
+  align-self: center
+  width: 36px
+  display: flex
+  justify-content: flex-end
+
+  button
+    padding: 4px !important
+    align-items: center
+    display: flex
+
+    \:global .anticon
+      vertical-align: 0 !important
+
+.CollapseWrapper
+  display: grid
+  width: 100%
+  grid-template-rows: 0fr
+  padding-right: 42px
+  transition: grid-template-rows 0.3s ease-out
+
+.ChildrenBalances
+  width: 100%
+  overflow: hidden
+
+.OpenCollapse
+  grid-template-rows: 1fr
+
+.ArrowRight
+  transition: transform 0.3s ease-out
+
+.RotateArrow
+  transform: rotate(-90deg)
+
+.CardDivider
+  padding-right: $space_normal
+  display: flex
+  width: 100%
+  justify-content: flex-end
+
+  \:global .ant-divider
+    margin: 0
+    min-width: 87.5%
+    width: 87.5%
+
+    border-color: #F0F0F0
+
+
+// ----- children balances --------
+
+.ChildrenWrapper
+  display: flex
+  flex-direction: column
+  gap: $space_normal
+
+  .ChildrenRow:first-child
+    margin-top: $space_tiny
+
+.ChildrenRow
+  display: flex
+  justify-content: space-between
+  align-items: flex-start
+  gap: $space_tiny
+  width: 100%
+
+.ChildrenBalancesBlock
+  display: flex
+  flex-direction: column
+  align-items: flex-end
+  gap: 10px
+
+  span
+    line-height: 1
+
+.InnerCardDivider
+  padding: $space_tiny $space_normal 0 $space_normal
+
+  \:global .ant-divider
+    margin: 0
+
+.ChidrenChainName
+  font-size: 12px
+  font-weight: 400
+  line-height: 24px
\ No newline at end of file
diff --git a/src/components/table/customCard/BalancesSectionCard.tsx b/src/components/table/customCard/BalancesSectionCard.tsx
new file mode 100644
index 00000000..ba3e5156
--- /dev/null
+++ b/src/components/table/customCard/BalancesSectionCard.tsx
@@ -0,0 +1,203 @@
+import {
+  BalanceCardProps,
+  BalanceCardsProps,
+  ChildrenBalances,
+  ChildrenBalancesProps,
+} from '.'
+import { TableInfo } from '../types'
+import styles from './BalancesCard.module.sass'
+import { isEmptyArray } from '@subsocial/utils'
+import clsx from 'clsx'
+import React, { useState } from 'react'
+import { AvatarOrSkeleton, Address } from '../utils'
+import { BalanceView } from '@/components/homePage/address-views/utils'
+import { PnlData } from '../balancesTable/utils/index'
+import { Button, Divider } from 'antd'
+import { NetworksIcons } from '../balancesTable/parseData/parseTokenCentricView'
+import { MdKeyboardArrowRight } from 'react-icons/md'
+
+const BalancesSectionCard = <T extends TableInfo>({
+  value,
+}: BalanceCardProps<T>) => {
+  const [open, setOpen] = useState<boolean>(false)
+  let level = 0
+
+  const {
+    address,
+    icon,
+    name,
+    symbol,
+    balanceValue,
+    totalValue,
+    children,
+    networkIcons,
+    showLinks,
+  } = value
+
+  const haveChildren = !!children || !isEmptyArray(children)
+
+  const links = showLinks?.(true)
+
+  const balanceView = (
+    <BalanceView value={balanceValue} decimalClassName={styles.TokenDecimals} />
+  )
+  const balanceInDollars = (
+    <BalanceView value={totalValue} decimalClassName='GrayText' />
+  )
+
+  const chainPart = (
+    <div className='d-flex align-items-start'>
+      <div className={styles.TopPartBlock}>
+        <span className={clsx(styles.RowTitle, 'font-weight-semibold lh-1')}>
+          {name}
+        </span>
+        <span className={styles.RowDesc}>{symbol}</span>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className={styles.CardWrapper}>
+      <div className={styles.Card} onClick={() => setOpen(!open)}>
+        <AvatarOrSkeleton
+          icon={icon}
+          size={'small'}
+          className='bs-mr-2 align-items-start flex-shrink-none'
+        />
+        <div className={styles.BalanceInfo}>
+          <div className={styles.TopPart}>
+            <div>{chainPart}</div>
+            <div className={clsx(styles.TopPartBlock, 'text-right')}>
+              <span className={styles.TokenBalance}>{balanceView}</span>
+              <span className={styles.BalanceInDollars}>
+                ${balanceInDollars}
+              </span>
+            </div>
+          </div>
+          <div className={styles.BottomPart}>
+            <PnlData
+              balanceValue={balanceValue}
+              symbol={symbol}
+              className={
+                'd-flex align-items-center justify-content-between lh-1'
+              }
+            />
+            <div className='d-flex align-items-center justify-content-between'>
+              {address && (
+                <Address accountId={address} withCopy withQr halfLength={5} />
+              )}
+              {networkIcons && (
+                <NetworksIcons networkIcons={networkIcons} withCounter />
+              )}
+              <Button size='small'>
+                Details{' '}
+                <MdKeyboardArrowRight
+                  className={clsx(styles.ArrowRight, {
+                    [styles.RotateArrow]: open && haveChildren,
+                  })}
+                />
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className={styles.LinksButton}>{links}</div>
+      </div>
+      <div className={styles.CardDivider}>
+        <Divider />
+      </div>
+      <div
+        className={clsx(styles.CollapseWrapper, {
+          [styles.OpenCollapse]: open && haveChildren,
+        })}
+      >
+        <ChildrenBalancesNew
+          name={name as string}
+          childrenBalances={children as T[]}
+          level={level + 1}
+          balanceKind={'NativeToken'}
+          className={clsx(styles.ChildrenBalances)}
+        />
+      </div>
+      {open && haveChildren && (
+        <div className={styles.InnerCardDivider}>
+          <Divider />
+        </div>
+      )}
+    </div>
+  )
+}
+
+const ChildrenBalancesNew = <T extends TableInfo>({
+  childrenBalances,
+  className,
+  level
+}: ChildrenBalancesProps<T>) => {
+  return (
+    <div className={clsx(styles.ChildrenWrapper, className)}>
+      {childrenBalances?.map((children) => {
+        const {
+          key,
+          chain,
+          balanceValue,
+          name,
+          totalValue,
+          children: innerChildren,
+        } = children
+
+        const tokenBalance = (
+          <BalanceView
+            value={balanceValue}
+            decimalClassName={styles.TokenDecimals}
+          />
+        )
+
+        const balanceInDollats = (
+          <BalanceView value={totalValue} decimalClassName='GrayText' />
+        )
+
+        return (
+          <>
+            <div key={key} className={styles.ChildrenRow}>
+              <span className={styles.ChidrenChainName}>{chain}</span>
+              <div className={styles.ChildrenBalancesBlock}>
+                <span className={styles.TokenBalance}>{tokenBalance}</span>
+                <span className={styles.BalanceInDollars}>
+                  ${balanceInDollats}
+                </span>
+              </div>
+            </div>
+            <ChildrenBalancesNew
+              name={name as string}
+              childrenBalances={innerChildren as T[]}
+              level={level + 1}
+              balanceKind={'NativeToken'}
+              className={clsx(styles.ChildrenBalances)}
+            />
+          </>
+        )
+      })}
+    </div>
+  )
+}
+
+const BalancesSectionCards = <T extends TableInfo>({
+  data,
+  balanceKind,
+}: BalanceCardsProps<T>) => {
+  return (
+    <div>
+      {data.map((value, index) => {
+        return (
+          <BalancesSectionCard
+            key={index}
+            value={value}
+            balanceKind={balanceKind}
+            isLastElement={index === data.length - 1}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default BalancesSectionCards
diff --git a/src/components/table/customCard/index.tsx b/src/components/table/customCard/index.tsx
index dbf86134..e81f11ac 100644
--- a/src/components/table/customCard/index.tsx
+++ b/src/components/table/customCard/index.tsx
@@ -55,7 +55,7 @@ const CustomCard = <T extends TableInfo>({
   balanceKind,
   isLastElement,
 }: BalanceCardProps<T>) => {
-  const [ open, setOpen ] = useState<boolean>(false)
+  const [open, setOpen] = useState<boolean>(false)
   const { isMobile } = useResponsiveSize()
   const isMulti = useIsMulti()
   let level = 0
@@ -76,7 +76,8 @@ const CustomCard = <T extends TableInfo>({
     showLinks,
   } = value
 
-  const haveChildren = (!!children || !!cardChildren) || !isEmptyArray(children || cardChildren)
+  const haveChildren =
+    !!children || !!cardChildren || !isEmptyArray(children || cardChildren)
 
   const links = showLinks?.(true)
 
@@ -137,12 +138,14 @@ const CustomCard = <T extends TableInfo>({
             <Divider className={clsx(styles.CardDivider, 'MarginTopTiny')} />
           )}
 
-          {(open && haveChildren) &&
+          {open &&
+            haveChildren &&
             (children ? (
               <ChildrenBalances
                 name={name as string}
                 childrenBalances={children as T[]}
                 level={level + 1}
+                balanceKind={balanceKind}
               />
             ) : (
               <CardAdditionalView {...cardChildren} />
@@ -153,23 +156,27 @@ const CustomCard = <T extends TableInfo>({
   )
 }
 
-type ChildrenBalancesProps<T> = {
+export type ChildrenBalancesProps<T> = {
   name: string
   childrenBalances: T[]
   isSecondLevel?: boolean
   level: number
+  balanceKind: BalanceKind
+  className?: string
 }
 
-const ChildrenBalances = <T extends TableInfo>({
+export const ChildrenBalances = <T extends TableInfo>({
   childrenBalances,
   name,
   isSecondLevel = false,
   level,
+  balanceKind,
+  className
 }: ChildrenBalancesProps<T>) => {
   const { isMobile } = useResponsiveSize()
   const isMulti = useIsMulti()
 
-  const balances = childrenBalances.map((child, index) => {
+  const balances = childrenBalances?.map((child, index) => {
     const isLastElement = index === childrenBalances.length - 1
 
     return (
@@ -182,13 +189,16 @@ const ChildrenBalances = <T extends TableInfo>({
           name={name}
           isMulti={isMulti}
           level={level}
+          balanceKind={balanceKind}
           className={clsx(
             { ['bs-mb-2']: isMobile && isLastElement },
-            isMobile && styles.ChildrenBalanceMargin
+            isMobile &&
+              balanceKind !== 'NativeToken' &&
+              styles.ChildrenBalanceMargin
           )}
         />
 
-        {(isLastElement && isSecondLevel && level !== 3) && (
+        {isLastElement && isSecondLevel && level !== 3 && (
           <Divider className={styles.CardDivider} />
         )}
       </>
@@ -197,7 +207,7 @@ const ChildrenBalances = <T extends TableInfo>({
 
   return (
     <>
-      <div key={name} className={styles.ChildrenBalance}>
+      <div key={name} className={clsx(styles.ChildrenBalance, className)}>
         {balances}
       </div>
     </>
@@ -212,6 +222,7 @@ type InnerChildrenBalancesProps<T> = {
   index: number
   level: number
   className?: string
+  balanceKind: BalanceKind
 }
 
 const balanceColumnClasses =
@@ -223,8 +234,9 @@ const InnerChildrenBalances = <T extends TableInfo>({
   isMobile,
   level,
   className,
+  balanceKind,
 }: InnerChildrenBalancesProps<T>) => {
-  const [ open, setOpen ] = useState<boolean>(false)
+  const [open, setOpen] = useState<boolean>(false)
   const haveChildren = child?.children || child.cardChildren
 
   const balances = (
@@ -279,6 +291,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
             childrenBalances={haveChildren as T[]}
             isSecondLevel
             level={level + 1}
+            balanceKind={balanceKind}
           />
         ) : (
           <CardAdditionalView {...child.cardChildren} />
diff --git a/src/components/table/customTable/TableContext.tsx b/src/components/table/customTable/TableContext.tsx
index 180fdb6e..8843cf44 100644
--- a/src/components/table/customTable/TableContext.tsx
+++ b/src/components/table/customTable/TableContext.tsx
@@ -21,16 +21,15 @@ export const TableContextWrapper: React.FC<TableContextProps> = ({
   children,
   ...props
 }) => {
-  const { isMobile } = useResponsiveSize()
   const { storeShowZeroBalance, storeTableView } = props
 
   const tableViewFromStorage = store.get(storeTableView)
   const showZeroBalancesFromStorage = store.get(storeShowZeroBalance)
 
-  const [ tableView, setTableView ] = useState<TableView>(
-    isMobile ? 'cards' : tableViewFromStorage || 'table'
+  const [tableView, setTableView] = useState<TableView>(
+    tableViewFromStorage || 'table'
   )
-  const [ showZeroBalances, setShowZeroBalances ] = useState<boolean>(
+  const [showZeroBalances, setShowZeroBalances] = useState<boolean>(
     showZeroBalancesFromStorage !== undefined
       ? showZeroBalancesFromStorage
       : true
diff --git a/src/components/table/links/Links.tsx b/src/components/table/links/Links.tsx
index d82cfe6f..9b1a7685 100644
--- a/src/components/table/links/Links.tsx
+++ b/src/components/table/links/Links.tsx
@@ -2,7 +2,6 @@ import { LinkWithIcon } from '../utils'
 import { linksByNetworks, NetworkLinks } from '.'
 import { Menu, Dropdown, Button, Divider } from 'antd'
 import { useCurrentAccount } from '../../providers/MyExtensionAccountsContext'
-import { MoreOutlined } from '@ant-design/icons'
 import styles from './Links.module.sass'
 import { isDef } from '@subsocial/utils'
 import clsx from 'clsx'
@@ -17,6 +16,7 @@ import {
 } from './utils'
 import { SubIcon } from 'src/components/utils'
 import { AiFillAppstore } from 'react-icons/ai'
+import { LuMoreVertical } from 'react-icons/lu'
 
 type LinkButtonsOverlayProps = {
   network: string
@@ -203,7 +203,7 @@ export const LinksButton = ({
         ghost
         onClick={onMoreButtonClick}
       >
-        <MoreOutlined />
+        <LuMoreVertical />
       </Button>
     </Dropdown>
   )
diff --git a/src/components/table/types.ts b/src/components/table/types.ts
index a5a6fb84..42da49ca 100644
--- a/src/components/table/types.ts
+++ b/src/components/table/types.ts
@@ -46,6 +46,7 @@ export type CommonTableInfo = {
   balanceValue: BN
 
   price: React.ReactNode
+  symbol: string
 
   total: React.ReactNode
   totalValue: BN
diff --git a/src/components/table/utils.tsx b/src/components/table/utils.tsx
index 4c834122..95ce08b8 100644
--- a/src/components/table/utils.tsx
+++ b/src/components/table/utils.tsx
@@ -54,6 +54,7 @@ import {
 } from '../../rtk/features/identities/identitiesHooks'
 import { BIGNUMBER_ZERO } from '../../config/app/consts'
 import { useSendEvent } from '../providers/AnalyticContext'
+import BalancesSectionCards from './customCard/BalancesSectionCard'
 
 export const BALANCE_TABLE_VIEW = 'BalanceTableView'
 export const BALANCE_TABLE_VARIANT = 'BalanceTableVariant'
@@ -67,9 +68,9 @@ const { TabPane } = Tabs
 
 export type TableKind = 'balances' | 'crowdloans' | 'assets'
 
-export const relayChains: RelayChain[] = [ 'kusama', 'polkadot' ]
+export const relayChains: RelayChain[] = ['kusama', 'polkadot']
 
-export const disableContributionButton = [ 'acala' ]
+export const disableContributionButton = ['acala']
 
 export const tailsViewOpt: TableViewOption[] = [
   { label: <MenuOutlined />, value: 'table' },
@@ -316,11 +317,11 @@ export const BalancePart = <T extends TableInfo>({
 
   useEffect(() => {
     store.set(storeTableView, tableView)
-  }, [ tableView ])
+  }, [tableView])
 
   useEffect(() => {
     store.set(storeShowZeroBalance, showZeroBalances)
-  }, [ showZeroBalances ])
+  }, [showZeroBalances])
 
   if (!data || !skeleton) return <TableLoading loadingLabel={loadingLabel} />
 
@@ -341,6 +342,24 @@ export const BalancePart = <T extends TableInfo>({
   if (isEmptyArray(tableData) && loading)
     return <TableLoading loadingLabel={loadingLabel} />
 
+  if (isMobile) {
+    return balanceKind === 'NativeToken' ? (
+      <BalancesSectionCards
+        data={tableData || []}
+        balanceKind={balanceKind}
+        isMobile={isMobile}
+        noData={noData}
+      />
+    ) : (
+      <BalanceCards
+        data={tableData || []}
+        balanceKind={balanceKind}
+        isMobile={isMobile}
+        noData={noData}
+      />
+    )
+  }
+
   switch (tableView) {
     case 'table':
       return (
@@ -364,10 +383,10 @@ export const BalancePart = <T extends TableInfo>({
       )
     default:
       return (
-        <BalanceCards
-          data={tableData || []}
-          balanceKind={balanceKind}
-          isMobile={isMobile}
+        <InnerBalancesTable
+          loading={loading}
+          columns={columns}
+          tableData={tableData}
           noData={noData}
         />
       )
@@ -728,7 +747,7 @@ export const Address = ({
       )}
       {withQr && (
         <AddressQrModal
-          className='grey-light'
+          className='GrayIcon'
           address={accountId}
           network={name}
         />
@@ -770,9 +789,9 @@ export const AccountPreview = ({
   largeAvatar = false,
   eventSource,
   nameClassName,
-  identityLoadNotRequired
+  identityLoadNotRequired,
 }: AccountPreviewProps) => {
-  useFetchIdentities([ account ], identityLoadNotRequired)
+  useFetchIdentities([account], identityLoadNotRequired)
   const identities = useIdentities(account)
 
   const address = (
diff --git a/src/components/utils/MutedText.tsx b/src/components/utils/MutedText.tsx
index 5e44f9fc..bf3c256c 100644
--- a/src/components/utils/MutedText.tsx
+++ b/src/components/utils/MutedText.tsx
@@ -9,7 +9,7 @@ type Props = React.PropsWithChildren<{
 
 function getClassNames (props: Props): string {
   const { smaller = false, className } = props
-  return `MutedText grey text ${smaller ? 'smaller' : ''} ${className}`
+  return `GrayText text ${smaller ? 'smaller' : ''} ${className}`
 }
 
 export const MutedSpan = (props: Props) => {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 93fd3fdd..70c19513 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -344,8 +344,8 @@
   "table": {
     "balances": {
       "frozen": "Frozen",
-      "locked": "Locked balance",
-      "reserved": "Reserved balance",
+      "locked": "Locked",
+      "reserved": "Reserved",
       "free": "Transferable",
       "title": "Balances",
       "loading": "Loading account balances...",
diff --git a/src/styles/bootstrap-utilities-4.3.1.css b/src/styles/bootstrap-utilities-4.3.1.css
index 5bc79842..70baf277 100644
--- a/src/styles/bootstrap-utilities-4.3.1.css
+++ b/src/styles/bootstrap-utilities-4.3.1.css
@@ -237,6 +237,10 @@
   min-width: fit-content !important;
 }
 
+.w-fit {
+  width: fit-content !important;
+}
+
 .h-25 {
   height: 25% !important;
 }
diff --git a/src/styles/subsocial-vars.scss b/src/styles/subsocial-vars.scss
index 8a329ac5..5ba07fe1 100644
--- a/src/styles/subsocial-vars.scss
+++ b/src/styles/subsocial-vars.scss
@@ -35,6 +35,8 @@ $color_warn_border: #f3e8ac;
 $color_volcano: #fa541c;
 $color_gold: #faad14;
 $color_hover_selectable_bg: #fff0f6;
+$color_gray: #64748B;
+$color_gray_icon: #94A3B8;
 $color_green: #4bb543;
 $color_blue: #0099f4;
 $color_white: #fff;
diff --git a/src/styles/subsocial.scss b/src/styles/subsocial.scss
index 4150ddaf..030a2960 100644
--- a/src/styles/subsocial.scss
+++ b/src/styles/subsocial.scss
@@ -2477,4 +2477,12 @@ hr {
     margin-bottom: 0 !important;
     // padding-top: $space_normal;
   }
+}
+
+.GrayText {
+  color: $color_gray;
+}
+
+.GrayIcon {
+  color: $color_gray_icon;
 }
\ No newline at end of file

From 0ba7ef37a15a21ca50a20b5dc1c10d574f29b97f Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Fri, 19 Jan 2024 13:52:20 +0200
Subject: [PATCH 03/10] Fix mobile version of balances cards

---
 src/components/table/balancesTable/index.tsx  |  16 +-
 .../parseData/parseBalanceInfo.tsx            |   2 +
 .../parseData/parseTokenCentricView.tsx       |   9 +-
 .../balancesTable/utils/ActionPannel.tsx      |   6 +-
 .../balancesTable/utils/Index.module.sass     |  30 +-
 .../table/customCard/BalancesCard.module.sass |  46 ++-
 .../table/customCard/BalancesSectionCard.tsx  | 263 ++++++++++++------
 .../table/customTable/TableContext.tsx        |  12 +-
 src/components/table/utils.tsx                |   7 +-
 9 files changed, 267 insertions(+), 124 deletions(-)

diff --git a/src/components/table/balancesTable/index.tsx b/src/components/table/balancesTable/index.tsx
index c17bd321..2f8e8ddf 100644
--- a/src/components/table/balancesTable/index.tsx
+++ b/src/components/table/balancesTable/index.tsx
@@ -33,15 +33,17 @@ type BalancesTableInnerProps = BalancesTableProps & {
 const BalancesTableInner = (props: BalancesTableInnerProps) => {
   const { storeShowZeroBalance, storeTableView, addresses } = props
   const isMyAddress = useIsMyConnectedAddress(addresses?.[0])
-  const tableVariantFromStore = store.get(BALANCE_TABLE_VARIANT)
-  const { tableView, showZeroBalances } = useTableContext()
 
-  const [ balancesVariant, setBalancesVariant ] = useState<BalanceVariant>(
-    tableVariantFromStore || 'chains'
-  )
+  const { tableView, showZeroBalances, balancesVariant, setBalancesVariant } =
+    useTableContext()
 
-  const { loading, balancesLoading, data, transferModalState, transferModalDispatch } =
-    useGetTableData(addresses, balancesVariant)
+  const {
+    loading,
+    balancesLoading,
+    data,
+    transferModalState,
+    transferModalDispatch,
+  } = useGetTableData(addresses, balancesVariant)
 
   const { t } = useTranslation()
 
diff --git a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
index a48392e8..4d545d42 100644
--- a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
+++ b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
@@ -474,6 +474,7 @@ export const parseBalancesTableInfo = ({
             accountId={numberOfAccounts}
             isMonosizedFont={false}
             withCopy={false}
+            desc={<PnlData symbol={nativeSymbol} balanceValue={balanceValueBN} />}
           />
         )
 
@@ -484,6 +485,7 @@ export const parseBalancesTableInfo = ({
             balance: getBalancePart(true),
             address: numberOfAccounts,
             price,
+            symbol: nativeSymbol,
             total,
             icon,
             name,
diff --git a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
index 64a39007..cb1e4b78 100644
--- a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
+++ b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
@@ -266,7 +266,7 @@ export const parseTokenCentricView = ({
 
     if (isMulti) {
       const { balanceValueBN, totalValueBN, balance, total } =
-        getParentBalances(balancesByKey, tokenId, true)
+        getParentBalances(balancesByKey, tokenId)
 
       const childrenBalances: any = {}
 
@@ -299,6 +299,7 @@ export const parseTokenCentricView = ({
           accountId={numberOfAccounts}
           isMonosizedFont={false}
           withCopy={false}
+          desc={<PnlData symbol={tokenId} balanceValue={balanceValueBN} />}
         />
       )
 
@@ -308,6 +309,7 @@ export const parseTokenCentricView = ({
           chain,
           balance: getBalancePart(balance, true),
           address: numberOfAccounts,
+          symbol: tokenId,
           price,
           total,
           icon: imagePath,
@@ -551,11 +553,6 @@ function getAccountDataValues({ t, ...info }: GetAccountDataValuesParams) {
   const { reservedBalance, freeBalance, lockedBalance } = info
 
   return [
-    // {
-    //   key: 'frozen',
-    //   label: t('table.balances.frozen'),
-    //   value: frozenBalance?.toString() || '0',
-    // },
     {
       key: 'locked',
       label: t('table.balances.locked'),
diff --git a/src/components/table/balancesTable/utils/ActionPannel.tsx b/src/components/table/balancesTable/utils/ActionPannel.tsx
index 4b4a55be..4b0f9980 100644
--- a/src/components/table/balancesTable/utils/ActionPannel.tsx
+++ b/src/components/table/balancesTable/utils/ActionPannel.tsx
@@ -114,12 +114,12 @@ const ActionPannel = ({
   )
 
   return (
-    <div className={clsx('bs-mb-3', { ['bs-px-3']: isMobile })}>
+    <div className={clsx(styles.ActionPannel, 'bs-mb-3', { ['bs-px-3']: isMobile })}>
       <div className='d-flex align-items-center justify-content-between'>
         <div
-          className={'d-flex aling-items-center font-weight-bold FontNormal'}
+          className={styles.TotalBalance}
         >
-          <div className='bs-mr-2 bs-min-w-fit'>{t('general.total')}</div>
+          <div className={styles.TotalBalanceLabel}>{t('general.total')}</div>
           {totalBalance}
         </div>
         <div className={styles.TableActionButtons}>
diff --git a/src/components/table/balancesTable/utils/Index.module.sass b/src/components/table/balancesTable/utils/Index.module.sass
index b7f4f7be..dcf56a7d 100644
--- a/src/components/table/balancesTable/utils/Index.module.sass
+++ b/src/components/table/balancesTable/utils/Index.module.sass
@@ -20,7 +20,6 @@
 .IconInLabel
   border-radius: 50%
 
-
 .IconCircle
   text-align: center
   display: flex
@@ -51,7 +50,6 @@
   label
     width: 100%
 
-
 .MobileButtonsOverlay
   @extend .CommonOverlay
   min-width: 200px !important
@@ -86,7 +84,33 @@
 .PnLNegative
   color: #F6465D
 
+.TotalBalance
+  display: flex
+  font-weight: bold
+
+  .TotalBalanceLabel
+    margin-right: $space_small
+
 @media ( max-width: $max_mobile_width )
   .PricesWarning
     flex-direction: column
-    align-items: center !important
\ No newline at end of file
+    align-items: center !important
+
+  .TotalBalance
+    flex-direction: column
+    align-items: flex-start
+    gap: $space_small
+    line-height: 1
+    font-size: $font_normal
+  
+
+    .TotalBalanceLabel
+      margin-right: 0
+      color: #94A3B8
+      font-size: 14px
+      font-weight: 400
+
+  .ActionPannel
+    border-bottom: 1px solid #F0F0F0 !important
+    margin-bottom: 1px !important
+    padding-bottom: calc($space_small + 1px)
diff --git a/src/components/table/customCard/BalancesCard.module.sass b/src/components/table/customCard/BalancesCard.module.sass
index 3eba160a..cc51a87a 100644
--- a/src/components/table/customCard/BalancesCard.module.sass
+++ b/src/components/table/customCard/BalancesCard.module.sass
@@ -63,7 +63,7 @@
   font-size: 12px
 
   button
-    display: flex 
+    display: flex
     align-items: center
     gap: 2px
 
@@ -75,11 +75,9 @@
     border-radius: 6px !important
     padding: 2px 2px 2px 6px !important
 
-
     svg
       font-size: 14px !important
 
-
 .LinksButton
   align-self: center
   width: 36px
@@ -98,16 +96,16 @@
   display: grid
   width: 100%
   grid-template-rows: 0fr
-  padding-right: 42px
-  transition: grid-template-rows 0.3s ease-out
+  transition: grid-template-rows 0.3s ease-out, padding-top 0.3s ease-out
+
+.OpenCollapse
+  padding-top: $space_normal
+  grid-template-rows: 1fr
 
 .ChildrenBalances
   width: 100%
   overflow: hidden
 
-.OpenCollapse
-  grid-template-rows: 1fr
-
 .ArrowRight
   transition: transform 0.3s ease-out
 
@@ -127,18 +125,26 @@
 
     border-color: #F0F0F0
 
-
 // ----- children balances --------
 
+.InnerChildrenWrapper
+  display: flex
+  flex-direction: column
+
 .ChildrenWrapper
   display: flex
   flex-direction: column
   gap: $space_normal
 
-  .ChildrenRow:first-child
-    margin-top: $space_tiny
+  // .ChildrenRow:first-child
+    // margin-top: $space_normal
 
 .ChildrenRow
+  width: 100%
+  display: flex
+  padding-right: 44px
+
+.ChildrenRowContent
   display: flex
   justify-content: space-between
   align-items: flex-start
@@ -155,7 +161,7 @@
     line-height: 1
 
 .InnerCardDivider
-  padding: $space_tiny $space_normal 0 $space_normal
+  padding: $space_normal $space_normal 0 $space_normal
 
   \:global .ant-divider
     margin: 0
@@ -163,4 +169,18 @@
 .ChidrenChainName
   font-size: 12px
   font-weight: 400
-  line-height: 24px
\ No newline at end of file
+  line-height: 24px
+
+  \:global .ml-5
+    margin-left: 0px !important
+
+.CollapseButton
+  color: $color_gray_icon
+  font-size: 18px !important
+  display: flex
+
+  svg
+    justify-self: center
+    margin-top: 5px
+    margin-left: 6px
+    width: 100%
diff --git a/src/components/table/customCard/BalancesSectionCard.tsx b/src/components/table/customCard/BalancesSectionCard.tsx
index ba3e5156..57388009 100644
--- a/src/components/table/customCard/BalancesSectionCard.tsx
+++ b/src/components/table/customCard/BalancesSectionCard.tsx
@@ -1,9 +1,3 @@
-import {
-  BalanceCardProps,
-  BalanceCardsProps,
-  ChildrenBalances,
-  ChildrenBalancesProps,
-} from '.'
 import { TableInfo } from '../types'
 import styles from './BalancesCard.module.sass'
 import { isEmptyArray } from '@subsocial/utils'
@@ -15,12 +9,23 @@ import { PnlData } from '../balancesTable/utils/index'
 import { Button, Divider } from 'antd'
 import { NetworksIcons } from '../balancesTable/parseData/parseTokenCentricView'
 import { MdKeyboardArrowRight } from 'react-icons/md'
+import { useTableContext } from '../customTable/TableContext'
+import { useIsMulti } from '@/components/providers/MyExtensionAccountsContext'
+import NoData from '@/components/utils/EmptyList'
+
+type BalancesSectionCardProps<T extends TableInfo> = {
+  value: T
+  isLastElement?: boolean
+}
 
 const BalancesSectionCard = <T extends TableInfo>({
   value,
-}: BalanceCardProps<T>) => {
+  isLastElement,
+}: BalancesSectionCardProps<T>) => {
   const [open, setOpen] = useState<boolean>(false)
-  let level = 0
+  const balanceInfoRef = React.useRef<HTMLDivElement>(null)
+
+  const isMulti = useIsMulti()
 
   const {
     address,
@@ -56,15 +61,23 @@ const BalancesSectionCard = <T extends TableInfo>({
     </div>
   )
 
+  const showBottomPart =
+    !!address ||
+    (networkIcons && !isEmptyArray(networkIcons)) ||
+    !balanceValue.isZero()
+
   return (
     <div className={styles.CardWrapper}>
-      <div className={styles.Card} onClick={() => setOpen(!open)}>
+      <div
+        className={styles.Card}
+        onClick={() => haveChildren && setOpen(!open)}
+      >
         <AvatarOrSkeleton
           icon={icon}
           size={'small'}
           className='bs-mr-2 align-items-start flex-shrink-none'
         />
-        <div className={styles.BalanceInfo}>
+        <div ref={balanceInfoRef} className={styles.BalanceInfo}>
           <div className={styles.TopPart}>
             <div>{chainPart}</div>
             <div className={clsx(styles.TopPartBlock, 'text-right')}>
@@ -74,47 +87,57 @@ const BalancesSectionCard = <T extends TableInfo>({
               </span>
             </div>
           </div>
-          <div className={styles.BottomPart}>
-            <PnlData
-              balanceValue={balanceValue}
-              symbol={symbol}
-              className={
-                'd-flex align-items-center justify-content-between lh-1'
-              }
-            />
-            <div className='d-flex align-items-center justify-content-between'>
-              {address && (
-                <Address accountId={address} withCopy withQr halfLength={5} />
-              )}
-              {networkIcons && (
-                <NetworksIcons networkIcons={networkIcons} withCounter />
-              )}
-              <Button size='small'>
-                Details{' '}
-                <MdKeyboardArrowRight
-                  className={clsx(styles.ArrowRight, {
-                    [styles.RotateArrow]: open && haveChildren,
-                  })}
-                />
-              </Button>
+          {showBottomPart && (
+            <div className={styles.BottomPart}>
+              <PnlData
+                balanceValue={balanceValue}
+                symbol={symbol}
+                className={
+                  'd-flex align-items-center justify-content-between lh-1'
+                }
+              />
+
+              <div className='d-flex align-items-center justify-content-between'>
+                {address && (
+                  <Address
+                    accountId={address}
+                    withCopy={!isMulti}
+                    withQr={!isMulti}
+                    halfLength={5}
+                  />
+                )}
+                {networkIcons && !isEmptyArray(networkIcons) && (
+                  <NetworksIcons networkIcons={networkIcons} withCounter />
+                )}
+                {haveChildren && (
+                  <Button size='small'>
+                    Details{' '}
+                    <MdKeyboardArrowRight
+                      className={clsx(styles.ArrowRight, {
+                        [styles.RotateArrow]: open && haveChildren,
+                      })}
+                    />
+                  </Button>
+                )}
+              </div>
             </div>
-          </div>
+          )}
         </div>
         <div className={styles.LinksButton}>{links}</div>
       </div>
-      <div className={styles.CardDivider}>
-        <Divider />
-      </div>
+      {!isLastElement && (
+        <div className={styles.CardDivider}>
+          <Divider />
+        </div>
+      )}
       <div
-        className={clsx(styles.CollapseWrapper, {
+        className={clsx(styles.CollapseWrapper, styles.CollapseWrapperPadding, {
           [styles.OpenCollapse]: open && haveChildren,
         })}
       >
-        <ChildrenBalancesNew
-          name={name as string}
+        <ChildrenBalances
           childrenBalances={children as T[]}
-          level={level + 1}
-          balanceKind={'NativeToken'}
+          leftOffset={(balanceInfoRef.current as any)?.offsetLeft}
           className={clsx(styles.ChildrenBalances)}
         />
       </div>
@@ -127,63 +150,134 @@ const BalancesSectionCard = <T extends TableInfo>({
   )
 }
 
-const ChildrenBalancesNew = <T extends TableInfo>({
+type InnerCildrenBalancesProps<T extends TableInfo> = {
+  value: T
+  className?: string
+  leftOffset: number
+  isLastElement?: boolean
+}
+
+const InnerChildrenBalances = <T extends TableInfo>({
+  value,
+  leftOffset,
+  isLastElement,
+}: InnerCildrenBalancesProps<T>) => {
+  const [open, setOpen] = useState<boolean>(false)
+  const { balancesVariant } = useTableContext()
+
+  const {
+    key,
+    chain,
+    balanceValue,
+    totalValue,
+    children: innerChildren,
+  } = value
+  const childrenRowContentRef = React.useRef<HTMLDivElement>(null)
+  const isMulti = useIsMulti()
+
+  const haveChildren = !!innerChildren || !isEmptyArray(innerChildren)
+
+  const tokenBalance = (
+    <BalanceView value={balanceValue} decimalClassName={styles.TokenDecimals} />
+  )
+
+  const balanceInDollats = (
+    <BalanceView value={totalValue} decimalClassName='GrayText' />
+  )
+
+  const childrenOffsetLeft = childrenRowContentRef.current?.offsetLeft || 0
+
+  let childrenOffset = ['reserved', 'locked', 'free'].includes(key)
+    ? leftOffset + (balancesVariant === 'tokens' || isMulti ? 56 : 8)
+    : leftOffset + 7
+
+  return (
+    <div className={styles.InnerChildrenWrapper}>
+      <div className={styles.ChildrenRow}>
+        <div
+          className={styles.CollapseButton}
+          style={{ width: childrenOffset }}
+        >
+          {haveChildren && (
+            <MdKeyboardArrowRight
+              className={clsx(styles.ArrowRight, styles.InnerChildrenArrow, {
+                [styles.RotateArrow]: open && haveChildren,
+              })}
+            />
+          )}
+        </div>
+        <div
+          key={key}
+          ref={childrenRowContentRef}
+          className={styles.ChildrenRowContent}
+          onClick={() => setOpen(!open)}
+        >
+          <span className={styles.ChidrenChainName}>{chain}</span>
+          <div className={styles.ChildrenBalancesBlock}>
+            <span className={styles.TokenBalance}>{tokenBalance}</span>
+            <span className={styles.BalanceInDollars}>${balanceInDollats}</span>
+          </div>
+        </div>
+      </div>
+      <div
+        className={clsx(styles.CollapseWrapper, {
+          [styles.OpenCollapse]: open && haveChildren,
+        })}
+      >
+        <ChildrenBalances
+          childrenBalances={innerChildren as T[]}
+          leftOffset={childrenOffsetLeft}
+          className={clsx(styles.ChildrenBalances)}
+        />
+      </div>
+      {haveChildren && !isLastElement && open && (
+        <div className={clsx(styles.CardDivider, 'mt-3')}>
+          <Divider />
+        </div>
+      )}
+    </div>
+  )
+}
+
+type ChildrenBalancesProps<T extends TableInfo> = {
+  childrenBalances: T[]
+  className?: string
+  leftOffset: number
+}
+
+const ChildrenBalances = <T extends TableInfo>({
   childrenBalances,
   className,
-  level
+  leftOffset,
 }: ChildrenBalancesProps<T>) => {
   return (
     <div className={clsx(styles.ChildrenWrapper, className)}>
-      {childrenBalances?.map((children) => {
-        const {
-          key,
-          chain,
-          balanceValue,
-          name,
-          totalValue,
-          children: innerChildren,
-        } = children
-
-        const tokenBalance = (
-          <BalanceView
-            value={balanceValue}
-            decimalClassName={styles.TokenDecimals}
-          />
-        )
-
-        const balanceInDollats = (
-          <BalanceView value={totalValue} decimalClassName='GrayText' />
-        )
-
+      {childrenBalances?.map((children, i) => {
         return (
-          <>
-            <div key={key} className={styles.ChildrenRow}>
-              <span className={styles.ChidrenChainName}>{chain}</span>
-              <div className={styles.ChildrenBalancesBlock}>
-                <span className={styles.TokenBalance}>{tokenBalance}</span>
-                <span className={styles.BalanceInDollars}>
-                  ${balanceInDollats}
-                </span>
-              </div>
-            </div>
-            <ChildrenBalancesNew
-              name={name as string}
-              childrenBalances={innerChildren as T[]}
-              level={level + 1}
-              balanceKind={'NativeToken'}
-              className={clsx(styles.ChildrenBalances)}
-            />
-          </>
+          <InnerChildrenBalances
+            key={i}
+            value={children}
+            leftOffset={leftOffset}
+            className={styles.ChildrenBalances}
+            isLastElement={i === childrenBalances.length - 1}
+          />
         )
       })}
     </div>
   )
 }
 
+type BalanceCardsProps<T extends TableInfo> = {
+  data: T[]
+  noData: React.ReactNode
+}
+
 const BalancesSectionCards = <T extends TableInfo>({
   data,
-  balanceKind,
+  noData
 }: BalanceCardsProps<T>) => {
+  if (isEmptyArray(data)) return <NoData description={noData} />
+
   return (
     <div>
       {data.map((value, index) => {
@@ -191,7 +285,6 @@ const BalancesSectionCards = <T extends TableInfo>({
           <BalancesSectionCard
             key={index}
             value={value}
-            balanceKind={balanceKind}
             isLastElement={index === data.length - 1}
           />
         )
diff --git a/src/components/table/customTable/TableContext.tsx b/src/components/table/customTable/TableContext.tsx
index 8843cf44..c7c8b8aa 100644
--- a/src/components/table/customTable/TableContext.tsx
+++ b/src/components/table/customTable/TableContext.tsx
@@ -1,13 +1,16 @@
 import { createContext, useContext, useState } from 'react'
-import { useResponsiveSize } from 'src/components/responsive'
 import { TableView } from '../types'
 import store from 'store'
+import { BalanceVariant } from './types'
+import { BALANCE_TABLE_VARIANT } from '../utils'
 
 export type TableContextState = {
   tableView: TableView
   setTableView: (tableView: TableView) => void
   showZeroBalances: boolean
   setShowZeroBalances: (showZeroBalances: boolean) => void
+  balancesVariant: BalanceVariant
+  setBalancesVariant: (balancesVariant: BalanceVariant) => void
 }
 
 type TableContextProps = {
@@ -25,6 +28,7 @@ export const TableContextWrapper: React.FC<TableContextProps> = ({
 
   const tableViewFromStorage = store.get(storeTableView)
   const showZeroBalancesFromStorage = store.get(storeShowZeroBalance)
+  const tableVariantFromStore = store.get(BALANCE_TABLE_VARIANT)
 
   const [tableView, setTableView] = useState<TableView>(
     tableViewFromStorage || 'table'
@@ -35,11 +39,17 @@ export const TableContextWrapper: React.FC<TableContextProps> = ({
       : true
   )
 
+  const [ balancesVariant, setBalancesVariant ] = useState<BalanceVariant>(
+    tableVariantFromStore || 'chains'
+  )
+
   const value = {
     tableView,
     setTableView,
     showZeroBalances,
     setShowZeroBalances,
+    balancesVariant,
+    setBalancesVariant
   }
 
   return <TableContext.Provider value={value}>{children}</TableContext.Provider>
diff --git a/src/components/table/utils.tsx b/src/components/table/utils.tsx
index 95ce08b8..e5979cec 100644
--- a/src/components/table/utils.tsx
+++ b/src/components/table/utils.tsx
@@ -344,12 +344,7 @@ export const BalancePart = <T extends TableInfo>({
 
   if (isMobile) {
     return balanceKind === 'NativeToken' ? (
-      <BalancesSectionCards
-        data={tableData || []}
-        balanceKind={balanceKind}
-        isMobile={isMobile}
-        noData={noData}
-      />
+      <BalancesSectionCards data={tableData || []} noData={noData} />
     ) : (
       <BalanceCards
         data={tableData || []}

From c7047cf9d5aa48654ac2a1bfd7ccc799bc096498 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Fri, 19 Jan 2024 14:46:10 +0200
Subject: [PATCH 04/10] Remove unused imports

---
 src/components/table/balancesTable/index.tsx  |  4 ----
 .../parseData/parseBalanceInfo.tsx            |  6 +++---
 .../parseData/parseTokenCentricView.tsx       | 20 +++++++++----------
 .../table/balancesTable/utils/index.tsx       |  5 ++---
 .../table/customCard/BalancesSectionCard.tsx  |  6 +++---
 src/components/table/customCard/index.tsx     |  4 ++--
 .../table/customTable/TableContext.tsx        |  4 ++--
 src/components/table/utils.tsx                | 10 +++++-----
 8 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/components/table/balancesTable/index.tsx b/src/components/table/balancesTable/index.tsx
index 2f8e8ddf..628ac0a2 100644
--- a/src/components/table/balancesTable/index.tsx
+++ b/src/components/table/balancesTable/index.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx'
 import styles from '../Table.module.sass'
 import {
   BALANCE_SHOW_ZERO_BALANCES,
-  BALANCE_TABLE_VARIANT,
   BALANCE_TABLE_VIEW,
   BalancePart,
 } from '../utils'
@@ -13,9 +12,6 @@ import {
 } from '../customTable/TableContext'
 import { useTranslation } from 'react-i18next'
 import { useIsMyConnectedAddress } from 'src/components/providers/MyExtensionAccountsContext'
-import { useState } from 'react'
-import { BalanceVariant } from './types'
-import store from 'store'
 import { useGetTableData } from './utils/useGetTableData'
 import ActionPannel from './utils/ActionPannel'
 import TransferModal from 'src/components/transfer/TransferModal'
diff --git a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
index 4d545d42..c40773b3 100644
--- a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
+++ b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
@@ -69,7 +69,7 @@ const parseBalancesEntities = (
 ) => {
   const balancesInfoByKey: Record<string, any> = {}
 
-  Object.entries(balancesEntities).forEach(([account, { balances }]) => {
+  Object.entries(balancesEntities).forEach(([ account, { balances } ]) => {
     balances?.forEach((balance) => {
       const { network, info: balanceInfo } = balance || {}
 
@@ -79,7 +79,7 @@ const parseBalancesEntities = (
 
       const balanceInfoBySymbol: Record<string, any> = {}
 
-      Object.entries(balanceInfo || {}).forEach(([symbol, info]) => {
+      Object.entries(balanceInfo || {}).forEach(([ symbol, info ]) => {
         const { decimal } = getDecimalsAndSymbol(chainInfo, symbol)
 
         if (!decimal) return
@@ -169,7 +169,7 @@ export const parseBalancesTableInfo = ({
     tokenPrices
   )
 
-  const parsedData = [...supportedNetworks, ...evmLikeNetworks].map(
+  const parsedData = [ ...supportedNetworks, ...evmLikeNetworks ].map(
     (supportedNetwork) => {
       const chainInfo = chainsInfo[supportedNetwork]
 
diff --git a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
index cb1e4b78..4b032f95 100644
--- a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
+++ b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
@@ -63,7 +63,7 @@ type NonTokenImageProps = {
   tokenId: string
 }
 
-const excludedTokensPrefixes = ['xc', 'a', 't', '3', 'vs', 'wa']
+const excludedTokensPrefixes = [ 'xc', 'a', 't', '3', 'vs', 'wa' ]
 
 const NonTokenImage = ({ tokenId }: NonTokenImageProps) => {
   const excludedTokenPrefix = excludedTokensPrefixes.find((prefix) =>
@@ -186,7 +186,7 @@ export const parseTokenCentricView = ({
         })
 
         if (nonEmptyArr(children)) {
-          childrenBalances.children = [...children]
+          childrenBalances.children = [ ...children ]
         }
 
         const chainInfo = chainsInfo[firstNetwork]
@@ -343,14 +343,14 @@ type BalanceByToken = {
 
 type BalancesByTokenId = Record<string, BalanceByToken>
 
-function parseBalancesByToken(
+function parseBalancesByToken (
   balancesEntities: BalanceEntityRecord,
   multiChainInfo: MultiChainInfo
 ) {
   const balancesByToken: BalancesByTokenId = {}
   const tokenIds = new Set<string>()
 
-  Object.entries(balancesEntities).forEach(([address, balancesEntity]) => {
+  Object.entries(balancesEntities).forEach(([ address, balancesEntity ]) => {
     balancesEntity.balances?.forEach(({ network, info }) => {
       if (!info || isEmptyObj(info)) return
 
@@ -359,7 +359,7 @@ function parseBalancesByToken(
 
       const { ss58Format } = chainInfo
 
-      Object.entries(info).forEach(([tokenId, balances]) => {
+      Object.entries(info).forEach(([ tokenId, balances ]) => {
         const encodedTokenId = encodeTokenId(address, tokenId)
 
         if ((allowedTokens && !allowedTokens.includes(tokenId)) || !tokenId)
@@ -418,7 +418,7 @@ type GetChildrenBalanceParams = {
   t: TFunction
 }
 
-function getChildrenBalances({
+function getChildrenBalances ({
   balancesByNetwork,
   isMulti,
   chainsInfo,
@@ -431,7 +431,7 @@ function getChildrenBalances({
   const balancesByNetworkEntries = Object.entries(balancesByNetwork)
   const networkIcons: string[] = []
 
-  const result = balancesByNetworkEntries.map(([network, balances]) => {
+  const result = balancesByNetworkEntries.map(([ network, balances ]) => {
     const { totalBalance, accountId, ...otherBalances } = balances
 
     const chainInfo = chainsInfo[network]
@@ -468,7 +468,7 @@ function getChildrenBalances({
       decimal,
     })
 
-    childrenBalances.children = [...accountData.reverse()]
+    childrenBalances.children = [ ...accountData.reverse() ]
 
     const chain = (
       <ChainData
@@ -549,7 +549,7 @@ type GetAccountDataValuesParams = BalancesStruct & {
   t: TFunction
 }
 
-function getAccountDataValues({ t, ...info }: GetAccountDataValuesParams) {
+function getAccountDataValues ({ t, ...info }: GetAccountDataValuesParams) {
   const { reservedBalance, freeBalance, lockedBalance } = info
 
   return [
@@ -579,7 +579,7 @@ type GetAccountDataRowsParams = GetAccountDataValuesParams & {
   isMulti?: boolean
 }
 
-function getAccountDataRows({
+function getAccountDataRows ({
   decimal,
   price,
   priceValue,
diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx
index 3450ec24..22b15a5a 100644
--- a/src/components/table/balancesTable/utils/index.tsx
+++ b/src/components/table/balancesTable/utils/index.tsx
@@ -7,7 +7,6 @@ import Image from 'next/image'
 import styles from './Index.module.sass'
 import clsx from 'clsx'
 import {
-  AppstoreOutlined,
   LineChartOutlined,
   MenuOutlined,
 } from '@ant-design/icons'
@@ -44,7 +43,7 @@ export const allowedTokensByNetwork: Record<string, string[]> = {
     'PHA',
     'PARA',
   ],
-  statemint: ['WETH', 'WBTC', 'BTC', 'DOT', 'USDC', 'USDT', 'BUSD'],
+  statemint: [ 'WETH', 'WBTC', 'BTC', 'DOT', 'USDC', 'USDT', 'BUSD' ],
 }
 
 const BALANCES_KEY = 'balances'
@@ -84,7 +83,7 @@ export const encodeTokenId = (address: string, tokenId: string) =>
   `${address}-and-${tokenId}`
 
 export const decodeTokenId = (tokenId: string) => {
-  const [address, id] = tokenId.split('-and-')
+  const [ address, id ] = tokenId.split('-and-')
   return { address, id }
 }
 
diff --git a/src/components/table/customCard/BalancesSectionCard.tsx b/src/components/table/customCard/BalancesSectionCard.tsx
index 57388009..3efe03b1 100644
--- a/src/components/table/customCard/BalancesSectionCard.tsx
+++ b/src/components/table/customCard/BalancesSectionCard.tsx
@@ -22,7 +22,7 @@ const BalancesSectionCard = <T extends TableInfo>({
   value,
   isLastElement,
 }: BalancesSectionCardProps<T>) => {
-  const [open, setOpen] = useState<boolean>(false)
+  const [ open, setOpen ] = useState<boolean>(false)
   const balanceInfoRef = React.useRef<HTMLDivElement>(null)
 
   const isMulti = useIsMulti()
@@ -162,7 +162,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
   leftOffset,
   isLastElement,
 }: InnerCildrenBalancesProps<T>) => {
-  const [open, setOpen] = useState<boolean>(false)
+  const [ open, setOpen ] = useState<boolean>(false)
   const { balancesVariant } = useTableContext()
 
   const {
@@ -187,7 +187,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
 
   const childrenOffsetLeft = childrenRowContentRef.current?.offsetLeft || 0
 
-  let childrenOffset = ['reserved', 'locked', 'free'].includes(key)
+  let childrenOffset = [ 'reserved', 'locked', 'free' ].includes(key)
     ? leftOffset + (balancesVariant === 'tokens' || isMulti ? 56 : 8)
     : leftOffset + 7
 
diff --git a/src/components/table/customCard/index.tsx b/src/components/table/customCard/index.tsx
index e81f11ac..2b042c2e 100644
--- a/src/components/table/customCard/index.tsx
+++ b/src/components/table/customCard/index.tsx
@@ -55,7 +55,7 @@ const CustomCard = <T extends TableInfo>({
   balanceKind,
   isLastElement,
 }: BalanceCardProps<T>) => {
-  const [open, setOpen] = useState<boolean>(false)
+  const [ open, setOpen ] = useState<boolean>(false)
   const { isMobile } = useResponsiveSize()
   const isMulti = useIsMulti()
   let level = 0
@@ -236,7 +236,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
   className,
   balanceKind,
 }: InnerChildrenBalancesProps<T>) => {
-  const [open, setOpen] = useState<boolean>(false)
+  const [ open, setOpen ] = useState<boolean>(false)
   const haveChildren = child?.children || child.cardChildren
 
   const balances = (
diff --git a/src/components/table/customTable/TableContext.tsx b/src/components/table/customTable/TableContext.tsx
index c7c8b8aa..e7651aec 100644
--- a/src/components/table/customTable/TableContext.tsx
+++ b/src/components/table/customTable/TableContext.tsx
@@ -30,10 +30,10 @@ export const TableContextWrapper: React.FC<TableContextProps> = ({
   const showZeroBalancesFromStorage = store.get(storeShowZeroBalance)
   const tableVariantFromStore = store.get(BALANCE_TABLE_VARIANT)
 
-  const [tableView, setTableView] = useState<TableView>(
+  const [ tableView, setTableView ] = useState<TableView>(
     tableViewFromStorage || 'table'
   )
-  const [showZeroBalances, setShowZeroBalances] = useState<boolean>(
+  const [ showZeroBalances, setShowZeroBalances ] = useState<boolean>(
     showZeroBalancesFromStorage !== undefined
       ? showZeroBalancesFromStorage
       : true
diff --git a/src/components/table/utils.tsx b/src/components/table/utils.tsx
index e5979cec..d04f9109 100644
--- a/src/components/table/utils.tsx
+++ b/src/components/table/utils.tsx
@@ -68,9 +68,9 @@ const { TabPane } = Tabs
 
 export type TableKind = 'balances' | 'crowdloans' | 'assets'
 
-export const relayChains: RelayChain[] = ['kusama', 'polkadot']
+export const relayChains: RelayChain[] = [ 'kusama', 'polkadot' ]
 
-export const disableContributionButton = ['acala']
+export const disableContributionButton = [ 'acala' ]
 
 export const tailsViewOpt: TableViewOption[] = [
   { label: <MenuOutlined />, value: 'table' },
@@ -317,11 +317,11 @@ export const BalancePart = <T extends TableInfo>({
 
   useEffect(() => {
     store.set(storeTableView, tableView)
-  }, [tableView])
+  }, [ tableView ])
 
   useEffect(() => {
     store.set(storeShowZeroBalance, showZeroBalances)
-  }, [showZeroBalances])
+  }, [ showZeroBalances ])
 
   if (!data || !skeleton) return <TableLoading loadingLabel={loadingLabel} />
 
@@ -786,7 +786,7 @@ export const AccountPreview = ({
   nameClassName,
   identityLoadNotRequired,
 }: AccountPreviewProps) => {
-  useFetchIdentities([account], identityLoadNotRequired)
+  useFetchIdentities([ account ], identityLoadNotRequired)
   const identities = useIdentities(account)
 
   const address = (

From 502a59535951717efbac23e51be73bab90aa5144 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Thu, 25 Jan 2024 13:41:35 +0200
Subject: [PATCH 05/10] Fix pnl analytics styles

---
 src/components/table/Table.module.sass        |   7 +-
 .../parseData/parseBalanceInfo.tsx            |  96 +++++++++++----
 .../parseData/parseTokenCentricView.tsx       |  69 +++++++----
 .../table/balancesTable/utils/index.tsx       | 115 +++++++++++++++---
 .../table/customCard/BalancesCard.module.sass |  36 +++---
 .../table/customCard/BalancesSectionCard.tsx  |  41 +++++--
 src/components/table/links/Links.tsx          |   2 +-
 src/components/table/utils.tsx                |   6 +-
 8 files changed, 278 insertions(+), 94 deletions(-)

diff --git a/src/components/table/Table.module.sass b/src/components/table/Table.module.sass
index 42a67597..fe1c8085 100644
--- a/src/components/table/Table.module.sass
+++ b/src/components/table/Table.module.sass
@@ -27,6 +27,10 @@ $zero_margin: 0
   .DfCol
     width: 100%
 
+.RowValue
+  display: flex
+  flex-direction: column
+
 .Card
   min-height: 5rem
   border-radius: $border_radius_normal
@@ -322,6 +326,7 @@ $zero_margin: 0
     border-bottom: 1px solid #f0f0f0
 
   .NonTokenImage
-    width: 24px
+    max-width: 24px
+    width: 100%
     height: 24px
     font-size: $font_small
diff --git a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
index c40773b3..5e4f6660 100644
--- a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
+++ b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
@@ -31,13 +31,13 @@ import { convertAddressToChainFormat, SubIcon } from '../../../utils/index'
 import { AccountIdentitiesRecord } from '../../../../rtk/features/identities/identitiesSlice'
 import { AccountInfoByChain } from '../../../identity/types'
 import { getSubsocialIdentityByAccount } from '../../../../rtk/features/identities/identitiesHooks'
-import { RiQuestionLine } from 'react-icons/ri'
 import { BalanceView } from '../../../homePage/address-views/utils/index'
 import { TFunction } from 'i18next'
 import { Button, Tooltip } from 'antd'
 import { FiSend } from 'react-icons/fi'
 import { LinksButton } from '../../links/Links'
-import { PnlData } from '../utils'
+import { PnlInDollars, PriceChangedOn } from '../utils'
+import { InfoCircleOutlined } from '@ant-design/icons'
 
 const getAccountData = (info: AccountInfoByChain, t: TFunction) => {
   const { reservedBalance, freeBalance, lockedBalance } = info
@@ -306,7 +306,7 @@ export const parseBalancesTableInfo = ({
                       className='d-flex align-items-center'
                     >
                       <div>{label}</div>
-                      <RiQuestionLine className='ml-1 GrayIcon' />
+                      <InfoCircleOutlined className='ml-1 GrayIcon' />
                     </Tooltip>
                   </div>
                 )
@@ -346,6 +346,25 @@ export const parseBalancesTableInfo = ({
               </div>
             )
 
+            const priceView = (
+              <div className={styles.RowValue}>
+                {price}
+                {!isMulti && <PriceChangedOn symbol={nativeSymbol} />}
+              </div>
+            )
+
+            const totalView = (
+              <div className={styles.RowValue}>
+                <BalanceView value={totalValue} symbol='$' startWithSymbol />
+                {!isMulti && (
+                  <PnlInDollars
+                    balanceValue={balanceValue}
+                    symbol={nativeSymbol}
+                  />
+                )}
+              </div>
+            )
+
             const chain = !isMulti ? (
               <ChainData
                 accountId={account}
@@ -354,9 +373,6 @@ export const parseBalancesTableInfo = ({
                 icon={icon}
                 name={name}
                 eventSource='balance_table'
-                desc={
-                  <PnlData symbol={nativeSymbol} balanceValue={balanceValue} />
-                }
               />
             ) : (
               <AccountPreview
@@ -383,14 +399,8 @@ export const parseBalancesTableInfo = ({
               chain: chainValue,
               symbol: nativeSymbol,
               balance: getBalancePart(true),
-              price: !isMulti ? price : <></>,
-              total: (
-                <BalanceView
-                  value={totalTokensValue}
-                  symbol='$'
-                  startWithSymbol
-                />
-              ),
+              price: !isMulti ? priceView : <></>,
+              total: totalView,
               totalTokensValue,
               icon,
               name,
@@ -400,7 +410,7 @@ export const parseBalancesTableInfo = ({
               balanceWithoutChildren: getBalancePart(false),
               balanceValue,
               balanceView: getBalancePart(true),
-              links: (
+              links: isMulti ? [] : (
                 <LinksButton
                   network={supportedNetwork}
                   action={onButtonClick}
@@ -409,14 +419,14 @@ export const parseBalancesTableInfo = ({
                 />
               ),
               showLinks: (isShow: boolean) => (
-                <LinksButton
+                !isMulti && <LinksButton
                   action={onButtonClick}
                   network={supportedNetwork}
                   showActionButton={isShow}
                   disableTransferButton={!chainInfo.isTransferable || loading}
                 />
               ),
-              transferAction: (
+              transferAction: !isMulti && (
                 <Button
                   disabled={!chainInfo.isTransferable || loading}
                   size='small'
@@ -432,7 +442,7 @@ export const parseBalancesTableInfo = ({
           .filter(isDef)
 
       if (isMulti) {
-        const { balanceValueBN, totalValueBN, balance, total } =
+        const { balanceValueBN, totalValueBN, totalTokensValueBN, balance } =
           getParentBalances(balancesByNetwork, nativeSymbol)
 
         const childrenBalances: any = {}
@@ -474,27 +484,62 @@ export const parseBalancesTableInfo = ({
             accountId={numberOfAccounts}
             isMonosizedFont={false}
             withCopy={false}
-            desc={<PnlData symbol={nativeSymbol} balanceValue={balanceValueBN} />}
           />
         )
 
+        const priceView = (
+          <div className={styles.RowValue}>
+            {price}
+            <PriceChangedOn symbol={nativeSymbol} />
+          </div>
+        )
+
+        const totalView = (
+          <div className={styles.RowValue}>
+            <BalanceView value={totalValueBN} symbol='$' startWithSymbol />
+            <PnlInDollars balanceValue={balanceValueBN} symbol={nativeSymbol} />
+          </div>
+        )
+
+        const onButtonClick = (e: React.MouseEvent<HTMLElement>) => {
+          e.stopPropagation()
+          e.currentTarget?.blur()
+          onTransferClick(nativeSymbol, id)
+        }
+
         return [
           {
             key: supportedNetwork,
             chain,
             balance: getBalancePart(true),
             address: numberOfAccounts,
-            price,
+            price: priceView,
             symbol: nativeSymbol,
-            total,
+            total: totalView,
             icon,
             name,
             chainName: name,
-            totalTokensValue: totalValueBN,
+            totalTokensValue: totalTokensValueBN,
             totalValue: totalValueBN,
             balanceWithoutChildren: getBalancePart(false),
             balanceValue: balanceValueBN,
             balanceView: getBalancePart(true),
+            links: (
+              <LinksButton
+                network={supportedNetwork}
+                action={onButtonClick}
+                showActionButton={false}
+                disableTransferButton={!chainInfo.isTransferable || loading}
+              />
+            ),
+            showLinks: (isShow: boolean) => (
+              <LinksButton
+                action={onButtonClick}
+                network={supportedNetwork}
+                showActionButton={isShow}
+                disableTransferButton={!chainInfo.isTransferable || loading}
+              />
+            ),
             ...childrenBalances,
           },
         ]
@@ -506,8 +551,11 @@ export const parseBalancesTableInfo = ({
 
   const balancesInfo = parsedData.filter(isDef).flat()
 
-  const balancesInfoSorted = balancesInfo.sort((a, b) =>
-    b.totalTokensValue.minus(a.totalTokensValue).toNumber()
+  const balancesInfoSorted = balancesInfo.sort(
+    (a, b) =>
+      b.totalValue.minus(a.totalValue).toNumber() ||
+      b.balanceValue.minus(a.balanceValue).toNumber() ||
+      b.totalTokensValue.minus(a.totalTokensValue).toNumber()
   )
 
   return balancesInfoSorted
diff --git a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
index 4b032f95..1e524387 100644
--- a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
+++ b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
@@ -35,13 +35,14 @@ import { FiSend } from 'react-icons/fi'
 import tokensCentricImages from 'public/images/folderStructs/token-centric-images.json'
 import { getSubsocialIdentityByAccount } from 'src/rtk/features/identities/identitiesHooks'
 import {
+  PnlInDollars,
+  PriceChangedOn,
   allowedTokensByNetwork,
   decodeTokenId,
   encodeTokenId,
   getBalancePart,
 } from '../utils'
-import { PnlData } from '../utils/index'
-import { RiQuestionLine } from 'react-icons/ri'
+import { InfoCircleOutlined } from '@ant-design/icons'
 
 export type ParseBalanceTableInfoProps = {
   chainsInfo: MultiChainInfo
@@ -206,19 +207,29 @@ export const parseTokenCentricView = ({
           onTransferClick(tokenId, firstNetwork, { id: assetRedistyId })
         }
 
+        const priceView = (
+          <div className={styles.RowValue}>
+            {price}
+            {!isMulti && <PriceChangedOn symbol={tokenId} />}
+          </div>
+        )
+
+        const totalView = (
+          <div className={styles.RowValue}>
+            <BalanceView value={totalValue} symbol='$' startWithSymbol />
+            {!isMulti && (
+              <PnlInDollars
+                balanceValue={balanceValueWithDecimals}
+                symbol={tokenId}
+              />
+            )}
+          </div>
+        )
         const chain = !isMulti ? (
           <ChainData
             icon={imagePath}
             name={tokenId}
-            desc={
-              <div>
-                <NetworksIcons networkIcons={networkIcons} withCounter />
-                <PnlData
-                  symbol={tokenId}
-                  balanceValue={balanceValueWithDecimals}
-                />
-              </div>
-            }
+            desc={<NetworksIcons networkIcons={networkIcons} withCounter />}
           />
         ) : (
           <AccountPreview
@@ -234,8 +245,8 @@ export const parseTokenCentricView = ({
           key: `${balancesKey}-${j}`,
           chain: isMulti ? <div className='ml-5'>{chain}</div> : chain,
           balance: getBalancePart(balance, true),
-          price: !isMulti ? price : <></>,
-          total: <BalanceView value={totalValue} symbol='$' startWithSymbol />,
+          price: !isMulti ? priceView : <></>,
+          total: totalView,
           totalTokensValue: totalValue,
           icon: imagePath,
           name: tokenId,
@@ -265,7 +276,7 @@ export const parseTokenCentricView = ({
       .filter(isDef)
 
     if (isMulti) {
-      const { balanceValueBN, totalValueBN, balance, total } =
+      const { balanceValueBN, totalValueBN, totalTokensValueBN, balance } =
         getParentBalances(balancesByKey, tokenId)
 
       const childrenBalances: any = {}
@@ -292,6 +303,20 @@ export const parseTokenCentricView = ({
           })
         : ''
 
+      const priceView = (
+        <div className={styles.RowValue}>
+          {price}
+          <PriceChangedOn symbol={tokenId} />
+        </div>
+      )
+
+      const totalView = (
+        <div className={styles.RowValue}>
+          <BalanceView value={totalValueBN} symbol='$' startWithSymbol />
+          <PnlInDollars balanceValue={balanceValueBN} symbol={tokenId} />
+        </div>
+      )
+
       const chain = (
         <ChainData
           icon={imagePath}
@@ -299,7 +324,6 @@ export const parseTokenCentricView = ({
           accountId={numberOfAccounts}
           isMonosizedFont={false}
           withCopy={false}
-          desc={<PnlData symbol={tokenId} balanceValue={balanceValueBN} />}
         />
       )
 
@@ -310,11 +334,11 @@ export const parseTokenCentricView = ({
           balance: getBalancePart(balance, true),
           address: numberOfAccounts,
           symbol: tokenId,
-          price,
-          total,
+          price: priceView,
+          total: totalView,
           icon: imagePath,
           name: tokenId,
-          totalTokensValue: totalValueBN,
+          totalTokensValue: totalTokensValueBN,
           totalValue: totalValueBN,
           balanceWithoutChildren: getBalancePart(balance, false),
           balanceValue: balanceValueBN,
@@ -329,8 +353,11 @@ export const parseTokenCentricView = ({
 
   const balancesInfo = parsedData.filter(isDef).flat()
 
-  return balancesInfo.sort((a, b) =>
-    b.totalTokensValue.minus(a.totalTokensValue).toNumber()
+  return balancesInfo.sort(
+    (a, b) =>
+      b.totalValue.minus(a.totalValue).toNumber() ||
+      b.balanceValue.minus(a.balanceValue).toNumber() ||
+      b.totalTokensValue.minus(a.totalTokensValue).toNumber()
   )
 }
 
@@ -610,7 +637,7 @@ function getAccountDataRows ({
       <div className='w-fit'>
         <Tooltip title={label} className='d-flex align-items-center'>
           <div>{label}</div>
-          <RiQuestionLine className='ml-1 GrayIcon' />
+          <InfoCircleOutlined className='ml-1 GrayIcon' />
         </Tooltip>
       </div>
     )
diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx
index 22b15a5a..6e83bcc7 100644
--- a/src/components/table/balancesTable/utils/index.tsx
+++ b/src/components/table/balancesTable/utils/index.tsx
@@ -7,6 +7,7 @@ import Image from 'next/image'
 import styles from './Index.module.sass'
 import clsx from 'clsx'
 import {
+  InfoCircleOutlined,
   LineChartOutlined,
   MenuOutlined,
 } from '@ant-design/icons'
@@ -16,6 +17,7 @@ import store from 'store'
 import { AccountInfoItem } from '@/components/identity/types'
 import { BalanceEntityRecord } from '@/rtk/features/balances/balancesSlice'
 import { usePrices } from '@/rtk/features/prices/pricesHooks'
+import { Tooltip } from 'antd'
 
 export const allowedTokensByNetwork: Record<string, string[]> = {
   statemine: [
@@ -222,22 +224,28 @@ export const createFieldSkeletons = (data?: BalancesTableInfo[]) => {
   })
 }
 
-type PnlDataProps = {
-  symbol: string
-  balanceValue: BN
-  className?: string
+export const getPriceDataBySymbol = (symbol: string, pricesData?: any[]) => {
+  return pricesData?.find(
+    (item) => item.symbol.toLowerCase() === symbol.toLowerCase()
+  )
 }
 
-export const PnlData = ({ symbol, balanceValue, className }: PnlDataProps) => {
-  const prices = usePrices()
+type CalculatePnlProps = {
+  pricesData?: any[]
+  balanceValue: BN
+  symbol: string
+}
 
-  const priceObjBySymbol = prices?.find(
-    (item) => item.symbol.toLowerCase() === symbol.toLowerCase()
-  )
+export const calculatePnlInTokens = ({
+  pricesData,
+  balanceValue,
+  symbol,
+}: CalculatePnlProps) => {
+  const priceData = getPriceDataBySymbol(symbol, pricesData)
 
-  if (!priceObjBySymbol) return null
+  if (!priceData) return
 
-  const { current_price, price_change_percentage_24h } = priceObjBySymbol
+  const { current_price, price_change_percentage_24h } = priceData
 
   const priceChange24h = new BN(price_change_percentage_24h)
 
@@ -249,21 +257,88 @@ export const PnlData = ({ symbol, balanceValue, className }: PnlDataProps) => {
   const currentBalance = balanceValue.multipliedBy(current_price)
 
   const pnl = currentBalance.minus(balance24hAgo)
-  const pnlPercent = pnl.dividedBy(balance24hAgo).multipliedBy(100)
 
   if (pnl.isZero()) return null
 
-  const pnlString = pnl.toFixed(4).replace('-', '')
-  const pnlPercentString = pnlPercent.toFixed(4).replace('-', '')
+  return { pnlBN: pnl, pnlString: pnl.toFixed(4).replace('-', '') }
+}
+
+const getPnlClassName = (value: BN) =>
+  styles[`PnL${value.isPositive() ? 'Positive' : 'Negative'}`]
+
+type PnlDataProps = {
+  symbol: string
+  balanceValue: BN
+  className?: string
+}
+
+export const PnlInDollars = ({
+  symbol,
+  balanceValue,
+  className,
+}: PnlDataProps) => {
+  const prices = usePrices()
+
+  const pnlData = calculatePnlInTokens({
+    pricesData: prices,
+    balanceValue,
+    symbol,
+  })
+
+  if (!pnlData) return null
 
-  const sign = pnl.isPositive() ? '+' : '-'
+  const { pnlBN, pnlString } = pnlData
+
+  const sign = pnlBN.isPositive() ? '+' : '-'
 
   return (
-    <div className={clsx('font-weight-normal', className)}>
-      <span className='GrayText'>Pnl 24h:</span>{' '}
-      <span className={styles[`PnL${pnl.isPositive() ? 'Positive' : 'Negative'}`]}>
-        {sign}${pnlString} ({sign}{pnlPercentString}%)
+    <Tooltip
+      title='pnl'
+      className='d-flex align-items-center justify-content-end'
+    >
+      <InfoCircleOutlined className='GrayIcon bs-mr-2' />
+      <span
+        className={clsx(getPnlClassName(pnlBN), className)}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {sign}${pnlString}
       </span>
-    </div>
+    </Tooltip>
+  )
+}
+
+type PriceChangesProps = {
+  symbol: string
+  className?: string
+}
+
+export const PriceChangedOn = ({ symbol, className }: PriceChangesProps) => {
+  const prices = usePrices()
+
+  const priceData = getPriceDataBySymbol(symbol, prices)
+
+  if (!priceData) return null
+
+  const { price_change_percentage_24h } = priceData
+  const priceChange24h = new BN(price_change_percentage_24h)
+
+  const priceChange24hString = priceChange24h.toFixed(4).replace('-', '')
+
+  const sign = priceChange24h.isPositive() ? '+' : '-'
+
+  return (
+    <Tooltip
+      title='persentage'
+      className='d-flex align-items-center justify-content-end'
+    >
+      <InfoCircleOutlined className='GrayIcon bs-mr-2' />
+      <span
+        className={clsx(getPnlClassName(priceChange24h), className)}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {sign}
+        {priceChange24hString}%
+      </span>
+    </Tooltip>
   )
 }
diff --git a/src/components/table/customCard/BalancesCard.module.sass b/src/components/table/customCard/BalancesCard.module.sass
index cc51a87a..2483609e 100644
--- a/src/components/table/customCard/BalancesCard.module.sass
+++ b/src/components/table/customCard/BalancesCard.module.sass
@@ -6,7 +6,7 @@
 
 .Card
   background: white
-  padding: $space_tiny $space_normal
+  padding: $space_small $space_normal
   display: flex
   align-items: start
 
@@ -40,7 +40,7 @@
   width: 100%
   display: flex
   flex-direction: column
-  gap: $space_normal
+  gap: $space_small
 
 .TopPart
   display: flex
@@ -80,18 +80,22 @@
 
 .LinksButton
   align-self: center
-  width: 36px
+  max-width: 40px
+  width: 100%
   display: flex
   justify-content: flex-end
 
   button
-    padding: 4px !important
+    padding: 3px !important
     align-items: center
     display: flex
 
     \:global .anticon
       vertical-align: 0 !important
 
+    svg
+      width: 100%
+
 .CollapseWrapper
   display: grid
   width: 100%
@@ -99,7 +103,7 @@
   transition: grid-template-rows 0.3s ease-out, padding-top 0.3s ease-out
 
 .OpenCollapse
-  padding-top: $space_normal
+  padding-top: $space_small
   grid-template-rows: 1fr
 
 .ChildrenBalances
@@ -113,18 +117,25 @@
   transform: rotate(-90deg)
 
 .CardDivider
-  padding-right: $space_normal
+  padding: 0 $space_normal
   display: flex
   width: 100%
   justify-content: flex-end
 
   \:global .ant-divider
     margin: 0
-    min-width: 87.5%
-    width: 87.5%
+    min-width: 100%
+    width: 100%
+    transition: width 0.3s ease-out, min-width 0.3s ease-out
 
     border-color: #F0F0F0
 
+.DividerOpenState
+  \:global .ant-divider
+    margin: 0
+    min-width: 92%
+    width: 92%
+
 // ----- children balances --------
 
 .InnerChildrenWrapper
@@ -134,15 +145,12 @@
 .ChildrenWrapper
   display: flex
   flex-direction: column
-  gap: $space_normal
-
-  // .ChildrenRow:first-child
-    // margin-top: $space_normal
+  gap: $space_small
 
 .ChildrenRow
   width: 100%
   display: flex
-  padding-right: 44px
+  padding-right: $space_normal
 
 .ChildrenRowContent
   display: flex
@@ -161,7 +169,7 @@
     line-height: 1
 
 .InnerCardDivider
-  padding: $space_normal $space_normal 0 $space_normal
+  padding: $space_small $space_normal 0 $space_normal
 
   \:global .ant-divider
     margin: 0
diff --git a/src/components/table/customCard/BalancesSectionCard.tsx b/src/components/table/customCard/BalancesSectionCard.tsx
index 3efe03b1..d572fbb9 100644
--- a/src/components/table/customCard/BalancesSectionCard.tsx
+++ b/src/components/table/customCard/BalancesSectionCard.tsx
@@ -5,13 +5,15 @@ import clsx from 'clsx'
 import React, { useState } from 'react'
 import { AvatarOrSkeleton, Address } from '../utils'
 import { BalanceView } from '@/components/homePage/address-views/utils'
-import { PnlData } from '../balancesTable/utils/index'
 import { Button, Divider } from 'antd'
 import { NetworksIcons } from '../balancesTable/parseData/parseTokenCentricView'
 import { MdKeyboardArrowRight } from 'react-icons/md'
 import { useTableContext } from '../customTable/TableContext'
 import { useIsMulti } from '@/components/providers/MyExtensionAccountsContext'
 import NoData from '@/components/utils/EmptyList'
+import { PnlInDollars, calculatePnlInTokens } from '../balancesTable/utils'
+import { MutedSpan } from '@/components/utils/MutedText'
+import { usePrices } from '@/rtk/features/prices/pricesHooks'
 
 type BalancesSectionCardProps<T extends TableInfo> = {
   value: T
@@ -24,6 +26,7 @@ const BalancesSectionCard = <T extends TableInfo>({
 }: BalancesSectionCardProps<T>) => {
   const [ open, setOpen ] = useState<boolean>(false)
   const balanceInfoRef = React.useRef<HTMLDivElement>(null)
+  const prices = usePrices()
 
   const isMulti = useIsMulti()
 
@@ -36,12 +39,19 @@ const BalancesSectionCard = <T extends TableInfo>({
     totalValue,
     children,
     networkIcons,
+    transferAction,
     showLinks,
   } = value
 
+  const pnlData = calculatePnlInTokens({
+    pricesData: prices,
+    balanceValue,
+    symbol,
+  })
+
   const haveChildren = !!children || !isEmptyArray(children)
 
-  const links = showLinks?.(true)
+  const links = showLinks?.(!isMulti)
 
   const balanceView = (
     <BalanceView value={balanceValue} decimalClassName={styles.TokenDecimals} />
@@ -89,13 +99,12 @@ const BalancesSectionCard = <T extends TableInfo>({
           </div>
           {showBottomPart && (
             <div className={styles.BottomPart}>
-              <PnlData
-                balanceValue={balanceValue}
-                symbol={symbol}
-                className={
-                  'd-flex align-items-center justify-content-between lh-1'
-                }
-              />
+              {pnlData && (
+                <div className='d-flex align-items-center justify-content-between lh-1'>
+                  <MutedSpan>PnL 24h</MutedSpan>
+                  <PnlInDollars balanceValue={balanceValue} symbol={symbol} />
+                </div>
+              )}
 
               <div className='d-flex align-items-center justify-content-between'>
                 {address && (
@@ -123,10 +132,14 @@ const BalancesSectionCard = <T extends TableInfo>({
             </div>
           )}
         </div>
-        <div className={styles.LinksButton}>{links}</div>
+        <div className={styles.LinksButton}>{links || transferAction}</div>
       </div>
       {!isLastElement && (
-        <div className={styles.CardDivider}>
+        <div
+          className={clsx(styles.CardDivider, {
+            [styles.DividerOpenState]: haveChildren && open,
+          })}
+        >
           <Divider />
         </div>
       )}
@@ -170,11 +183,14 @@ const InnerChildrenBalances = <T extends TableInfo>({
     chain,
     balanceValue,
     totalValue,
+    showLinks,
     children: innerChildren,
   } = value
   const childrenRowContentRef = React.useRef<HTMLDivElement>(null)
   const isMulti = useIsMulti()
 
+  const links = showLinks?.(!isMulti)
+
   const haveChildren = !!innerChildren || !isEmptyArray(innerChildren)
 
   const tokenBalance = (
@@ -218,6 +234,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
             <span className={styles.BalanceInDollars}>${balanceInDollats}</span>
           </div>
         </div>
+        <div className={styles.LinksButton}>{links}</div>
       </div>
       <div
         className={clsx(styles.CollapseWrapper, {
@@ -274,7 +291,7 @@ type BalanceCardsProps<T extends TableInfo> = {
 
 const BalancesSectionCards = <T extends TableInfo>({
   data,
-  noData
+  noData,
 }: BalanceCardsProps<T>) => {
   if (isEmptyArray(data)) return <NoData description={noData} />
 
diff --git a/src/components/table/links/Links.tsx b/src/components/table/links/Links.tsx
index 9b1a7685..0c057ef2 100644
--- a/src/components/table/links/Links.tsx
+++ b/src/components/table/links/Links.tsx
@@ -203,7 +203,7 @@ export const LinksButton = ({
         ghost
         onClick={onMoreButtonClick}
       >
-        <LuMoreVertical />
+        <LuMoreVertical className='GrayIcon' />
       </Button>
     </Dropdown>
   )
diff --git a/src/components/table/utils.tsx b/src/components/table/utils.tsx
index d04f9109..cd64acc0 100644
--- a/src/components/table/utils.tsx
+++ b/src/components/table/utils.tsx
@@ -843,6 +843,7 @@ export const getParentBalances = <T extends TableInfo>(
 ) => {
   let balanceValueBN = BIGNUMBER_ZERO
   let totalValueBN = BIGNUMBER_ZERO
+  let totalTokensValueBN = BIGNUMBER_ZERO
   let priceValue
   let decimals = balances[0]?.decimals || 0
 
@@ -850,7 +851,9 @@ export const getParentBalances = <T extends TableInfo>(
     .filter(isDef)
     .forEach(({ balanceValue, totalValue, totalTokensValue, price }) => {
       balanceValueBN = balanceValueBN.plus(balanceValue)
-      totalValueBN = totalValueBN.plus(totalTokensValue || totalValue)
+      totalValueBN = totalValueBN.plus(totalValue)
+      totalTokensValueBN = totalTokensValueBN.plus(totalTokensValue || 0)
+
       priceValue = price
     })
 
@@ -870,6 +873,7 @@ export const getParentBalances = <T extends TableInfo>(
     priceValue,
     balance,
     total,
+    totalTokensValueBN
   }
 }
 

From 6581e074fa2a37f21dc5cc13a3ed55e31d8bc432 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 29 Jan 2024 21:34:23 +0200
Subject: [PATCH 06/10] Fix mobile view for multi account view

---
 .../parseData/parseTokenCentricView.tsx       |  4 ++
 .../table/balancesTable/utils/index.tsx       |  2 -
 .../table/customCard/BalancesCard.module.sass | 11 +++--
 .../table/customCard/BalancesSectionCard.tsx  | 44 ++++++++++++++-----
 src/components/table/utils.tsx                | 26 ++++++-----
 5 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
index 1e524387..a71ed784 100644
--- a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
+++ b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
@@ -452,6 +452,7 @@ function getChildrenBalances ({
   tokenId,
   priceValue,
   loading,
+  isMobile,
   onTransferClick,
   t,
 }: GetChildrenBalanceParams) {
@@ -497,11 +498,14 @@ function getChildrenBalances ({
 
     childrenBalances.children = [ ...accountData.reverse() ]
 
+    const hideIcon = isMulti && isMobile
+
     const chain = (
       <ChainData
         icon={icon}
         name={name}
         avatarSize={'small'}
+        withIcon={!hideIcon}
         isBoldName={false}
         eventSource='balance_table'
       />
diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx
index 6e83bcc7..06f30522 100644
--- a/src/components/table/balancesTable/utils/index.tsx
+++ b/src/components/table/balancesTable/utils/index.tsx
@@ -296,7 +296,6 @@ export const PnlInDollars = ({
       title='pnl'
       className='d-flex align-items-center justify-content-end'
     >
-      <InfoCircleOutlined className='GrayIcon bs-mr-2' />
       <span
         className={clsx(getPnlClassName(pnlBN), className)}
         onClick={(e) => e.stopPropagation()}
@@ -331,7 +330,6 @@ export const PriceChangedOn = ({ symbol, className }: PriceChangesProps) => {
       title='persentage'
       className='d-flex align-items-center justify-content-end'
     >
-      <InfoCircleOutlined className='GrayIcon bs-mr-2' />
       <span
         className={clsx(getPnlClassName(priceChange24h), className)}
         onClick={(e) => e.stopPropagation()}
diff --git a/src/components/table/customCard/BalancesCard.module.sass b/src/components/table/customCard/BalancesCard.module.sass
index 2483609e..6b9aba9e 100644
--- a/src/components/table/customCard/BalancesCard.module.sass
+++ b/src/components/table/customCard/BalancesCard.module.sass
@@ -80,7 +80,7 @@
 
 .LinksButton
   align-self: center
-  max-width: 40px
+  max-width: 30px
   width: 100%
   display: flex
   justify-content: flex-end
@@ -89,6 +89,9 @@
     padding: 3px !important
     align-items: center
     display: flex
+    min-width: 22px !important
+    height: 22px
+    width: 22px
 
     \:global .anticon
       vertical-align: 0 !important
@@ -186,9 +189,11 @@
   color: $color_gray_icon
   font-size: 18px !important
   display: flex
+  justify-content: flex-end
+
+  .InnerCollapseButton
+    // padding-right: 9px
 
   svg
     justify-self: center
     margin-top: 5px
-    margin-left: 6px
-    width: 100%
diff --git a/src/components/table/customCard/BalancesSectionCard.tsx b/src/components/table/customCard/BalancesSectionCard.tsx
index d572fbb9..a5770725 100644
--- a/src/components/table/customCard/BalancesSectionCard.tsx
+++ b/src/components/table/customCard/BalancesSectionCard.tsx
@@ -20,13 +20,18 @@ type BalancesSectionCardProps<T extends TableInfo> = {
   isLastElement?: boolean
 }
 
+const offsetByIndex = [0, 13, 63]
+
+const collapseIconOffset = [ 0, 12, 10]
+
 const BalancesSectionCard = <T extends TableInfo>({
   value,
   isLastElement,
 }: BalancesSectionCardProps<T>) => {
-  const [ open, setOpen ] = useState<boolean>(false)
+  const [open, setOpen] = useState<boolean>(false)
   const balanceInfoRef = React.useRef<HTMLDivElement>(null)
   const prices = usePrices()
+  const level = 0
 
   const isMulti = useIsMulti()
 
@@ -152,6 +157,7 @@ const BalancesSectionCard = <T extends TableInfo>({
           childrenBalances={children as T[]}
           leftOffset={(balanceInfoRef.current as any)?.offsetLeft}
           className={clsx(styles.ChildrenBalances)}
+          level={level + 1}
         />
       </div>
       {open && haveChildren && (
@@ -168,14 +174,16 @@ type InnerCildrenBalancesProps<T extends TableInfo> = {
   className?: string
   leftOffset: number
   isLastElement?: boolean
+  level: number
 }
 
 const InnerChildrenBalances = <T extends TableInfo>({
   value,
   leftOffset,
   isLastElement,
+  level,
 }: InnerCildrenBalancesProps<T>) => {
-  const [ open, setOpen ] = useState<boolean>(false)
+  const [open, setOpen] = useState<boolean>(false)
   const { balancesVariant } = useTableContext()
 
   const {
@@ -203,9 +211,15 @@ const InnerChildrenBalances = <T extends TableInfo>({
 
   const childrenOffsetLeft = childrenRowContentRef.current?.offsetLeft || 0
 
-  let childrenOffset = [ 'reserved', 'locked', 'free' ].includes(key)
-    ? leftOffset + (balancesVariant === 'tokens' || isMulti ? 56 : 8)
-    : leftOffset + 7
+  let childrenOffset = leftOffset + offsetByIndex[level]
+
+  if (['reserved', 'locked', 'free'].includes(key)) {
+    const chainCentricOffset = isMulti ? 62 : 11
+    const tokenCentricOffset = isMulti ? 31 : 63
+
+    childrenOffset =
+      leftOffset + (balancesVariant === 'tokens' ? tokenCentricOffset : chainCentricOffset)
+  }
 
   return (
     <div className={styles.InnerChildrenWrapper}>
@@ -214,13 +228,15 @@ const InnerChildrenBalances = <T extends TableInfo>({
           className={styles.CollapseButton}
           style={{ width: childrenOffset }}
         >
-          {haveChildren && (
-            <MdKeyboardArrowRight
-              className={clsx(styles.ArrowRight, styles.InnerChildrenArrow, {
-                [styles.RotateArrow]: open && haveChildren,
-              })}
-            />
-          )}
+          <div className={styles.InnerCollapseButton} style={{ paddingRight: collapseIconOffset[level] }}>
+            {haveChildren && (
+              <MdKeyboardArrowRight
+                className={clsx(styles.ArrowRight, styles.InnerChildrenArrow, {
+                  [styles.RotateArrow]: open && haveChildren,
+                })}
+              />
+            )}
+          </div>
         </div>
         <div
           key={key}
@@ -245,6 +261,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
           childrenBalances={innerChildren as T[]}
           leftOffset={childrenOffsetLeft}
           className={clsx(styles.ChildrenBalances)}
+          level={level + 1}
         />
       </div>
       {haveChildren && !isLastElement && open && (
@@ -260,12 +277,14 @@ type ChildrenBalancesProps<T extends TableInfo> = {
   childrenBalances: T[]
   className?: string
   leftOffset: number
+  level: number
 }
 
 const ChildrenBalances = <T extends TableInfo>({
   childrenBalances,
   className,
   leftOffset,
+  level,
 }: ChildrenBalancesProps<T>) => {
   return (
     <div className={clsx(styles.ChildrenWrapper, className)}>
@@ -277,6 +296,7 @@ const ChildrenBalances = <T extends TableInfo>({
             leftOffset={leftOffset}
             className={styles.ChildrenBalances}
             isLastElement={i === childrenBalances.length - 1}
+            level={level}
           />
         )
       })}
diff --git a/src/components/table/utils.tsx b/src/components/table/utils.tsx
index cd64acc0..2eea0e5d 100644
--- a/src/components/table/utils.tsx
+++ b/src/components/table/utils.tsx
@@ -68,9 +68,9 @@ const { TabPane } = Tabs
 
 export type TableKind = 'balances' | 'crowdloans' | 'assets'
 
-export const relayChains: RelayChain[] = [ 'kusama', 'polkadot' ]
+export const relayChains: RelayChain[] = ['kusama', 'polkadot']
 
-export const disableContributionButton = [ 'acala' ]
+export const disableContributionButton = ['acala']
 
 export const tailsViewOpt: TableViewOption[] = [
   { label: <MenuOutlined />, value: 'table' },
@@ -317,11 +317,11 @@ export const BalancePart = <T extends TableInfo>({
 
   useEffect(() => {
     store.set(storeTableView, tableView)
-  }, [ tableView ])
+  }, [tableView])
 
   useEffect(() => {
     store.set(storeShowZeroBalance, showZeroBalances)
-  }, [ showZeroBalances ])
+  }, [showZeroBalances])
 
   if (!data || !skeleton) return <TableLoading loadingLabel={loadingLabel} />
 
@@ -396,6 +396,7 @@ type ChainProps = {
   icon: string | JSX.Element
   name?: string
   isShortAddress?: boolean
+  withIcon?: boolean
   withCopy?: boolean
   avatarSize?: AvatarSize
   halfLength?: number
@@ -455,6 +456,7 @@ export const ChainData = ({
   withCopy = true,
   halfLength = 6,
   isMonosizedFont = true,
+  withIcon = true,
   withQr = true,
   isBoldName = true,
   desc,
@@ -478,11 +480,13 @@ export const ChainData = ({
   return (
     <div className={clsx({ ['d-flex']: !isMobile }, 'align-items-center')}>
       <div className='d-flex align-items-center'>
-        <AvatarOrSkeleton
-          icon={icon}
-          size={avatarSize}
-          className='bs-mr-2 align-items-start flex-shrink-none'
-        />
+        {withIcon && (
+          <AvatarOrSkeleton
+            icon={icon}
+            size={avatarSize}
+            className='bs-mr-2 align-items-start flex-shrink-none'
+          />
+        )}
         <div>
           {name && (
             <div
@@ -786,7 +790,7 @@ export const AccountPreview = ({
   nameClassName,
   identityLoadNotRequired,
 }: AccountPreviewProps) => {
-  useFetchIdentities([ account ], identityLoadNotRequired)
+  useFetchIdentities([account], identityLoadNotRequired)
   const identities = useIdentities(account)
 
   const address = (
@@ -873,7 +877,7 @@ export const getParentBalances = <T extends TableInfo>(
     priceValue,
     balance,
     total,
-    totalTokensValueBN
+    totalTokensValueBN,
   }
 }
 

From b3ba5269952e9b892211a2a65430e748ef436344 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Tue, 30 Jan 2024 14:13:35 +0200
Subject: [PATCH 07/10] Remove unused import

---
 src/components/table/balancesTable/utils/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx
index 06f30522..aa03166a 100644
--- a/src/components/table/balancesTable/utils/index.tsx
+++ b/src/components/table/balancesTable/utils/index.tsx
@@ -7,7 +7,6 @@ import Image from 'next/image'
 import styles from './Index.module.sass'
 import clsx from 'clsx'
 import {
-  InfoCircleOutlined,
   LineChartOutlined,
   MenuOutlined,
 } from '@ant-design/icons'

From c924a90053c6921e6f0dea3648b2ce698e8a713e Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Tue, 6 Feb 2024 18:24:57 +0200
Subject: [PATCH 08/10] Fix after design review

---
 src/components/table/Table.module.sass        | 10 +++++
 .../parseData/parseBalanceInfo.tsx            | 45 ++++++++++++-------
 .../parseData/parseTokenCentricView.tsx       | 28 ++++++++----
 .../table/balancesTable/utils/index.tsx       |  4 +-
 .../table/customCard/BalancesCard.module.sass | 13 +++++-
 .../table/customCard/BalancesSectionCard.tsx  | 33 +++++++++-----
 src/components/table/types.ts                 |  2 +-
 src/components/table/utils.tsx                | 18 ++++----
 8 files changed, 106 insertions(+), 47 deletions(-)

diff --git a/src/components/table/Table.module.sass b/src/components/table/Table.module.sass
index fe1c8085..72b265b2 100644
--- a/src/components/table/Table.module.sass
+++ b/src/components/table/Table.module.sass
@@ -27,6 +27,16 @@ $zero_margin: 0
   .DfCol
     width: 100%
 
+.RowTitle
+  font-size: $font_normal
+
+.RowTitleBold
+  font-weight: 600
+
+@media ( max-width: $max_mobile_width )
+  .RowTitle
+    font-size: 15px
+
 .RowValue
   display: flex
   flex-direction: column
diff --git a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
index 5e4f6660..a7203b42 100644
--- a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
+++ b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
@@ -47,16 +47,22 @@ const getAccountData = (info: AccountInfoByChain, t: TFunction) => {
       key: 'locked',
       label: t('table.balances.locked'),
       value: lockedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
     },
     {
       key: 'reserved',
       label: t('table.balances.reserved'),
       value: reservedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are reserved by one specific thing, such as setting an on-chain identity, and cannot be transferred to another account.',
     },
     {
       key: 'free',
       label: t('table.balances.free'),
       value: freeBalance,
+      tooltipText:
+        'Tokens that are not reserved or locked, and can be transferred to another account.',
     },
   ]
 }
@@ -269,8 +275,7 @@ export const parseBalancesTableInfo = ({
                   totalTokensValue = totalTokensValue.plus(totalValue)
 
                   return {
-                    key: symbol,
-                    chain: <></>,
+                    key: `detailed-balances-${symbol}`,
                     balance: <span className='bs-mr-4'>{balance}</span>,
                     price,
                     balanceValue: balanceValue,
@@ -286,7 +291,7 @@ export const parseBalancesTableInfo = ({
             const { decimal } = getDecimalsAndSymbol(chainInfo, nativeSymbol)
 
             const accountDataArray: BalancesTableInfo[] = accountData.map(
-              ({ key, label, value }: any) => {
+              ({ key, label, value, tooltipText }: any) => {
                 const valueWithDecimal = getBalanceWithDecimals({
                   totalBalance: value,
                   decimals: decimal,
@@ -302,7 +307,7 @@ export const parseBalancesTableInfo = ({
                 const chain = (
                   <div className='w-fit'>
                     <Tooltip
-                      title={label}
+                      title={tooltipText}
                       className='d-flex align-items-center'
                     >
                       <div>{label}</div>
@@ -315,9 +320,10 @@ export const parseBalancesTableInfo = ({
                   key,
                   chain: (
                     <div
+                      style={{ marginLeft: isMulti ? '5rem' : '3rem' }}
                       className={clsx(
                         { [styles.SecondLevelBalances]: isMulti },
-                        'ml-5 GrayText'
+                        'GrayText'
                       )}
                     >
                       {chain}
@@ -391,7 +397,13 @@ export const parseBalancesTableInfo = ({
             }
 
             const chainValue = (
-              <div>{isMulti ? <div className='ml-5'>{chain}</div> : chain}</div>
+              <div>
+                {isMulti ? (
+                  <div style={{ marginLeft: '3rem' }}>{chain}</div>
+                ) : (
+                  chain
+                )}
+              </div>
             )
 
             return {
@@ -410,7 +422,9 @@ export const parseBalancesTableInfo = ({
               balanceWithoutChildren: getBalancePart(false),
               balanceValue,
               balanceView: getBalancePart(true),
-              links: isMulti ? [] : (
+              links: isMulti ? (
+                []
+              ) : (
                 <LinksButton
                   network={supportedNetwork}
                   action={onButtonClick}
@@ -418,14 +432,15 @@ export const parseBalancesTableInfo = ({
                   disableTransferButton={!chainInfo.isTransferable || loading}
                 />
               ),
-              showLinks: (isShow: boolean) => (
-                !isMulti && <LinksButton
-                  action={onButtonClick}
-                  network={supportedNetwork}
-                  showActionButton={isShow}
-                  disableTransferButton={!chainInfo.isTransferable || loading}
-                />
-              ),
+              showLinks: (isShow: boolean) =>
+                !isMulti && (
+                  <LinksButton
+                    action={onButtonClick}
+                    network={supportedNetwork}
+                    showActionButton={isShow}
+                    disableTransferButton={!chainInfo.isTransferable || loading}
+                  />
+                ),
               transferAction: !isMulti && (
                 <Button
                   disabled={!chainInfo.isTransferable || loading}
diff --git a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
index a71ed784..d2f20313 100644
--- a/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
+++ b/src/components/table/balancesTable/parseData/parseTokenCentricView.tsx
@@ -243,7 +243,11 @@ export const parseTokenCentricView = ({
 
         return {
           key: `${balancesKey}-${j}`,
-          chain: isMulti ? <div className='ml-5'>{chain}</div> : chain,
+          chain: isMulti ? (
+            <div style={{ marginLeft: '3rem' }}>{chain}</div>
+          ) : (
+            chain
+          ),
           balance: getBalancePart(balance, true),
           price: !isMulti ? priceView : <></>,
           total: totalView,
@@ -452,7 +456,6 @@ function getChildrenBalances ({
   tokenId,
   priceValue,
   loading,
-  isMobile,
   onTransferClick,
   t,
 }: GetChildrenBalanceParams) {
@@ -498,7 +501,7 @@ function getChildrenBalances ({
 
     childrenBalances.children = [ ...accountData.reverse() ]
 
-    const hideIcon = isMulti && isMobile
+    const hideIcon = isMulti
 
     const chain = (
       <ChainData
@@ -530,7 +533,9 @@ function getChildrenBalances ({
 
     return {
       key: `${network}-${tokenId}`,
-      chain: <div className='ml-5'>{chain}</div>,
+      chain: (
+        <div style={{ marginLeft: isMulti ? '5rem' : '3rem' }}>{chain}</div>
+      ),
       balance: getBalancePart(balance, true),
       price: <></>,
       total: <BalanceView value={totalValue} symbol='$' startWithSymbol />,
@@ -588,16 +593,22 @@ function getAccountDataValues ({ t, ...info }: GetAccountDataValuesParams) {
       key: 'locked',
       label: t('table.balances.locked'),
       value: lockedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
     },
     {
       key: 'reserved',
       label: t('table.balances.reserved'),
       value: reservedBalance?.toString() || '0',
+      tooltipText:
+        'Tokens that are reserved by one specific thing, such as setting an on-chain identity, and cannot be transferred to another account.',
     },
     {
       key: 'free',
       label: t('table.balances.free'),
       value: freeBalance,
+      tooltipText:
+        'Tokens that are locked, and cannot be transferred to another account. One token can be locked by multiple things at the same time, such as governance and staking.',
     },
   ]
 }
@@ -624,7 +635,7 @@ function getAccountDataRows ({
     ...accountDataValuesParams,
   })
 
-  return accountDataValues.map(({ key, label, value }: any) => {
+  return accountDataValues.map(({ key, label, tooltipText, value }: any) => {
     const valueWithDecimal = getBalanceWithDecimals({
       totalBalance: value,
       decimals: decimal,
@@ -639,7 +650,7 @@ function getAccountDataRows ({
 
     const chain = (
       <div className='w-fit'>
-        <Tooltip title={label} className='d-flex align-items-center'>
+        <Tooltip title={tooltipText} className='d-flex align-items-center'>
           <div>{label}</div>
           <InfoCircleOutlined className='ml-1 GrayIcon' />
         </Tooltip>
@@ -647,12 +658,13 @@ function getAccountDataRows ({
     )
 
     return {
-      key,
+      key: `detailed-balances-${key}`,
       chain: (
         <div
+          style={{ marginLeft: '5rem' }}
           className={clsx(
             { [styles.SecondLevelBalances]: isMulti },
-            'ml-5 GrayText'
+            'GrayText'
           )}
         >
           {chain}
diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx
index aa03166a..c348472a 100644
--- a/src/components/table/balancesTable/utils/index.tsx
+++ b/src/components/table/balancesTable/utils/index.tsx
@@ -292,7 +292,7 @@ export const PnlInDollars = ({
 
   return (
     <Tooltip
-      title='pnl'
+      title='The change in the value of these tokens in the last 24 hours'
       className='d-flex align-items-center justify-content-end'
     >
       <span
@@ -326,7 +326,7 @@ export const PriceChangedOn = ({ symbol, className }: PriceChangesProps) => {
 
   return (
     <Tooltip
-      title='persentage'
+      title='How much the price of this token has changed in the last 24 hours'
       className='d-flex align-items-center justify-content-end'
     >
       <span
diff --git a/src/components/table/customCard/BalancesCard.module.sass b/src/components/table/customCard/BalancesCard.module.sass
index 6b9aba9e..23c117a7 100644
--- a/src/components/table/customCard/BalancesCard.module.sass
+++ b/src/components/table/customCard/BalancesCard.module.sass
@@ -177,12 +177,21 @@
   \:global .ant-divider
     margin: 0
 
+.ChainName
+  font-size: 15px !important
+  font-weight: 500 !important
+
+  \:global .account-address
+    font-size: 12px !important
+    font-weight: 400 !important
+    line-height: 24px !important
+
 .ChidrenChainName
   font-size: 12px
   font-weight: 400
   line-height: 24px
 
-  \:global .ml-5
+  div:first-child
     margin-left: 0px !important
 
 .CollapseButton
@@ -196,4 +205,4 @@
 
   svg
     justify-self: center
-    margin-top: 5px
+    margin-top: 4px
diff --git a/src/components/table/customCard/BalancesSectionCard.tsx b/src/components/table/customCard/BalancesSectionCard.tsx
index a5770725..c110b491 100644
--- a/src/components/table/customCard/BalancesSectionCard.tsx
+++ b/src/components/table/customCard/BalancesSectionCard.tsx
@@ -20,15 +20,15 @@ type BalancesSectionCardProps<T extends TableInfo> = {
   isLastElement?: boolean
 }
 
-const offsetByIndex = [0, 13, 63]
+const offsetByIndex = [ 0, 13, 63 ]
 
-const collapseIconOffset = [ 0, 12, 10]
+const collapseIconOffset = [ 0, 12, 10 ]
 
 const BalancesSectionCard = <T extends TableInfo>({
   value,
   isLastElement,
 }: BalancesSectionCardProps<T>) => {
-  const [open, setOpen] = useState<boolean>(false)
+  const [ open, setOpen ] = useState<boolean>(false)
   const balanceInfoRef = React.useRef<HTMLDivElement>(null)
   const prices = usePrices()
   const level = 0
@@ -183,7 +183,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
   isLastElement,
   level,
 }: InnerCildrenBalancesProps<T>) => {
-  const [open, setOpen] = useState<boolean>(false)
+  const [ open, setOpen ] = useState<boolean>(false)
   const { balancesVariant } = useTableContext()
 
   const {
@@ -191,6 +191,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
     chain,
     balanceValue,
     totalValue,
+    symbol,
     showLinks,
     children: innerChildren,
   } = value
@@ -213,22 +214,28 @@ const InnerChildrenBalances = <T extends TableInfo>({
 
   let childrenOffset = leftOffset + offsetByIndex[level]
 
-  if (['reserved', 'locked', 'free'].includes(key)) {
+  const isDetailedBalances = key.includes('detailed-balances')
+
+  if (isDetailedBalances) {
     const chainCentricOffset = isMulti ? 62 : 11
     const tokenCentricOffset = isMulti ? 31 : 63
 
     childrenOffset =
-      leftOffset + (balancesVariant === 'tokens' ? tokenCentricOffset : chainCentricOffset)
+      leftOffset +
+      (balancesVariant === 'tokens' ? tokenCentricOffset : chainCentricOffset)
   }
 
   return (
     <div className={styles.InnerChildrenWrapper}>
-      <div className={styles.ChildrenRow}>
+      <div className={styles.ChildrenRow} onClick={() => setOpen(!open)}>
         <div
           className={styles.CollapseButton}
           style={{ width: childrenOffset }}
         >
-          <div className={styles.InnerCollapseButton} style={{ paddingRight: collapseIconOffset[level] }}>
+          <div
+            className={styles.InnerCollapseButton}
+            style={{ paddingRight: collapseIconOffset[level] }}
+          >
             {haveChildren && (
               <MdKeyboardArrowRight
                 className={clsx(styles.ArrowRight, styles.InnerChildrenArrow, {
@@ -242,9 +249,15 @@ const InnerChildrenBalances = <T extends TableInfo>({
           key={key}
           ref={childrenRowContentRef}
           className={styles.ChildrenRowContent}
-          onClick={() => setOpen(!open)}
         >
-          <span className={styles.ChidrenChainName}>{chain}</span>
+          <span
+            className={clsx(styles.ChidrenChainName, {
+              ['GrayText']: isDetailedBalances,
+              [styles.ChainName]: !isDetailedBalances
+            })}
+          >
+            {chain || symbol}
+          </span>
           <div className={styles.ChildrenBalancesBlock}>
             <span className={styles.TokenBalance}>{tokenBalance}</span>
             <span className={styles.BalanceInDollars}>${balanceInDollats}</span>
diff --git a/src/components/table/types.ts b/src/components/table/types.ts
index 42da49ca..5d582d22 100644
--- a/src/components/table/types.ts
+++ b/src/components/table/types.ts
@@ -40,7 +40,7 @@ export type CommonTableInfo = {
   icon: string | JSX.Element
 
   key: string
-  chain: React.ReactNode
+  chain?: React.ReactNode
 
   balance: React.ReactNode
   balanceValue: BN
diff --git a/src/components/table/utils.tsx b/src/components/table/utils.tsx
index 2eea0e5d..845dd7e4 100644
--- a/src/components/table/utils.tsx
+++ b/src/components/table/utils.tsx
@@ -68,9 +68,9 @@ const { TabPane } = Tabs
 
 export type TableKind = 'balances' | 'crowdloans' | 'assets'
 
-export const relayChains: RelayChain[] = ['kusama', 'polkadot']
+export const relayChains: RelayChain[] = [ 'kusama', 'polkadot' ]
 
-export const disableContributionButton = ['acala']
+export const disableContributionButton = [ 'acala' ]
 
 export const tailsViewOpt: TableViewOption[] = [
   { label: <MenuOutlined />, value: 'table' },
@@ -317,11 +317,11 @@ export const BalancePart = <T extends TableInfo>({
 
   useEffect(() => {
     store.set(storeTableView, tableView)
-  }, [tableView])
+  }, [ tableView ])
 
   useEffect(() => {
     store.set(storeShowZeroBalance, showZeroBalances)
-  }, [showZeroBalances])
+  }, [ showZeroBalances ])
 
   if (!data || !skeleton) return <TableLoading loadingLabel={loadingLabel} />
 
@@ -491,8 +491,8 @@ export const ChainData = ({
           {name && (
             <div
               className={clsx(
-                { ['font-weight-bold']: isBoldName },
-                'FontNormal'
+                styles.RowTitle,
+                { [styles.RowTitleBold]: isBoldName },
               )}
             >
               {name}
@@ -790,7 +790,7 @@ export const AccountPreview = ({
   nameClassName,
   identityLoadNotRequired,
 }: AccountPreviewProps) => {
-  useFetchIdentities([account], identityLoadNotRequired)
+  useFetchIdentities([ account ], identityLoadNotRequired)
   const identities = useIdentities(account)
 
   const address = (
@@ -830,10 +830,10 @@ export const AccountPreview = ({
           />
         )}
         <div>
-          <div className={clsx({ ['font-weight-bold']: withName })}>
+          <div className={clsx({ [styles.RowTitleBold]: withName })}>
             {withName && accountName}
           </div>
-          {withAddress && <div>{address}</div>}
+          {withAddress && <div className='account-address'>{address}</div>}
         </div>
       </div>
     </div>

From 67c99c8ee029b96218bd1dc0f5db665e3a063740 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Wed, 7 Feb 2024 16:47:35 +0200
Subject: [PATCH 09/10] Fix font size of detailed balances

---
 .../table/balancesTable/parseData/parseBalanceInfo.tsx   | 2 +-
 src/components/table/customCard/BalancesCard.module.sass | 9 ++++++---
 src/components/table/customCard/BalancesSectionCard.tsx  | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
index a7203b42..d32b885c 100644
--- a/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
+++ b/src/components/table/balancesTable/parseData/parseBalanceInfo.tsx
@@ -317,7 +317,7 @@ export const parseBalancesTableInfo = ({
                 )
 
                 return {
-                  key,
+                  key: `detailed-balances-${key}`,
                   chain: (
                     <div
                       style={{ marginLeft: isMulti ? '5rem' : '3rem' }}
diff --git a/src/components/table/customCard/BalancesCard.module.sass b/src/components/table/customCard/BalancesCard.module.sass
index 23c117a7..eafed003 100644
--- a/src/components/table/customCard/BalancesCard.module.sass
+++ b/src/components/table/customCard/BalancesCard.module.sass
@@ -186,10 +186,13 @@
     font-weight: 400 !important
     line-height: 24px !important
 
-.ChidrenChainName
-  font-size: 12px
-  font-weight: 400
+.DetailedBalances
+  font-size: 12px !important
+  font-weight: 400 !important
   line-height: 24px
+  color: $color_gray
+
+.ChidrenChainName
 
   div:first-child
     margin-left: 0px !important
diff --git a/src/components/table/customCard/BalancesSectionCard.tsx b/src/components/table/customCard/BalancesSectionCard.tsx
index c110b491..2764a8d9 100644
--- a/src/components/table/customCard/BalancesSectionCard.tsx
+++ b/src/components/table/customCard/BalancesSectionCard.tsx
@@ -252,7 +252,7 @@ const InnerChildrenBalances = <T extends TableInfo>({
         >
           <span
             className={clsx(styles.ChidrenChainName, {
-              ['GrayText']: isDetailedBalances,
+              [styles.DetailedBalances]: isDetailedBalances,
               [styles.ChainName]: !isDetailedBalances
             })}
           >

From d7c298f0fd21a3897bff8312d3af4cc4e2f00eea Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Thu, 8 Feb 2024 16:00:42 +0200
Subject: [PATCH 10/10] Fix typo

---
 src/components/table/balancesTable/index.tsx  |  4 ++--
 .../{ActionPannel.tsx => ActionPanel.tsx}     | 20 +++++++++----------
 .../balancesTable/utils/Index.module.sass     |  2 +-
 .../table/balancesTable/utils/index.tsx       |  4 ++--
 .../table/customTable/TableContext.tsx        | 20 +++++++++++++------
 5 files changed, 29 insertions(+), 21 deletions(-)
 rename src/components/table/balancesTable/utils/{ActionPannel.tsx => ActionPanel.tsx} (95%)

diff --git a/src/components/table/balancesTable/index.tsx b/src/components/table/balancesTable/index.tsx
index 628ac0a2..7a180d86 100644
--- a/src/components/table/balancesTable/index.tsx
+++ b/src/components/table/balancesTable/index.tsx
@@ -13,7 +13,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useIsMyConnectedAddress } from 'src/components/providers/MyExtensionAccountsContext'
 import { useGetTableData } from './utils/useGetTableData'
-import ActionPannel from './utils/ActionPannel'
+import ActionPanel from './utils/ActionPanel'
 import TransferModal from 'src/components/transfer/TransferModal'
 import PricesWarning from './PricesWarning'
 
@@ -45,7 +45,7 @@ const BalancesTableInner = (props: BalancesTableInnerProps) => {
 
   return (
     <div className={clsx(styles.BalanceBlock, 'mt-0')}>
-      <ActionPannel
+      <ActionPanel
         balancesVariant={balancesVariant}
         setBalancesVariant={setBalancesVariant}
         loading={!!balancesLoading}
diff --git a/src/components/table/balancesTable/utils/ActionPannel.tsx b/src/components/table/balancesTable/utils/ActionPanel.tsx
similarity index 95%
rename from src/components/table/balancesTable/utils/ActionPannel.tsx
rename to src/components/table/balancesTable/utils/ActionPanel.tsx
index 4b0f9980..210163db 100644
--- a/src/components/table/balancesTable/utils/ActionPannel.tsx
+++ b/src/components/table/balancesTable/utils/ActionPanel.tsx
@@ -43,16 +43,16 @@ type CommonProps = {
   setBalancesVariant: (value: BalanceVariant) => void
 }
 
-type ActionPannelProps = CommonProps & {
+type ActionPanelProps = CommonProps & {
   addresses: string[]
   loading: boolean
 }
 
-const ActionPannel = ({
+const ActionPanel = ({
   addresses,
   loading,
   ...balanceVariantProps
-}: ActionPannelProps) => {
+}: ActionPanelProps) => {
   const { isMobile } = useResponsiveSize()
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
@@ -89,7 +89,7 @@ const ActionPannel = ({
     )
 
     return !isEmptyArray(balances.filter(isDef))
-  }, [ JSON.stringify(balancesFromStore || {}) ])
+  }, [JSON.stringify(balancesFromStore || {})])
 
   const totalBalance = loading ? (
     <Tooltip
@@ -114,11 +114,11 @@ const ActionPannel = ({
   )
 
   return (
-    <div className={clsx(styles.ActionPannel, 'bs-mb-3', { ['bs-px-3']: isMobile })}>
+    <div
+      className={clsx(styles.ActionPanel, 'bs-mb-3', { ['bs-px-3']: isMobile })}
+    >
       <div className='d-flex align-items-center justify-content-between'>
-        <div
-          className={styles.TotalBalance}
-        >
+        <div className={styles.TotalBalance}>
           <div className={styles.TotalBalanceLabel}>{t('general.total')}</div>
           {totalBalance}
         </div>
@@ -189,7 +189,7 @@ const MobileButtons = (props: CommonProps) => {
     <Dropdown
       overlay={<DrowdownOverlay {...props} />}
       placement='bottomLeft'
-      trigger={[ 'click' ]}
+      trigger={['click']}
     >
       <Button shape='circle'>
         <SwitchIcon />
@@ -240,4 +240,4 @@ const DrowdownOverlay = ({
   )
 }
 
-export default ActionPannel
+export default ActionPanel
diff --git a/src/components/table/balancesTable/utils/Index.module.sass b/src/components/table/balancesTable/utils/Index.module.sass
index dcf56a7d..c410ef6e 100644
--- a/src/components/table/balancesTable/utils/Index.module.sass
+++ b/src/components/table/balancesTable/utils/Index.module.sass
@@ -110,7 +110,7 @@
       font-size: 14px
       font-weight: 400
 
-  .ActionPannel
+  .ActionPanel
     border-bottom: 1px solid #F0F0F0 !important
     margin-bottom: 1px !important
     padding-bottom: calc($space_small + 1px)
diff --git a/src/components/table/balancesTable/utils/index.tsx b/src/components/table/balancesTable/utils/index.tsx
index c348472a..66508b1e 100644
--- a/src/components/table/balancesTable/utils/index.tsx
+++ b/src/components/table/balancesTable/utils/index.tsx
@@ -259,7 +259,7 @@ export const calculatePnlInTokens = ({
 
   if (pnl.isZero()) return null
 
-  return { pnlBN: pnl, pnlString: pnl.toFixed(4).replace('-', '') }
+  return { pnlBN: pnl, pnlString: pnl.abs().toFixed(4) }
 }
 
 const getPnlClassName = (value: BN) =>
@@ -320,7 +320,7 @@ export const PriceChangedOn = ({ symbol, className }: PriceChangesProps) => {
   const { price_change_percentage_24h } = priceData
   const priceChange24h = new BN(price_change_percentage_24h)
 
-  const priceChange24hString = priceChange24h.toFixed(4).replace('-', '')
+  const priceChange24hString = priceChange24h.abs().toFixed(4)
 
   const sign = priceChange24h.isPositive() ? '+' : '-'
 
diff --git a/src/components/table/customTable/TableContext.tsx b/src/components/table/customTable/TableContext.tsx
index e7651aec..b2027a39 100644
--- a/src/components/table/customTable/TableContext.tsx
+++ b/src/components/table/customTable/TableContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 import { TableView } from '../types'
 import store from 'store'
 import { BalanceVariant } from './types'
@@ -30,26 +30,34 @@ export const TableContextWrapper: React.FC<TableContextProps> = ({
   const showZeroBalancesFromStorage = store.get(storeShowZeroBalance)
   const tableVariantFromStore = store.get(BALANCE_TABLE_VARIANT)
 
-  const [ tableView, setTableView ] = useState<TableView>(
-    tableViewFromStorage || 'table'
+  const [tableView, setTableView] = useState<TableView>(
+    !tableViewFromStorage || tableViewFromStorage === 'cards'
+      ? 'table'
+      : tableViewFromStorage
   )
-  const [ showZeroBalances, setShowZeroBalances ] = useState<boolean>(
+  const [showZeroBalances, setShowZeroBalances] = useState<boolean>(
     showZeroBalancesFromStorage !== undefined
       ? showZeroBalancesFromStorage
       : true
   )
 
-  const [ balancesVariant, setBalancesVariant ] = useState<BalanceVariant>(
+  const [balancesVariant, setBalancesVariant] = useState<BalanceVariant>(
     tableVariantFromStore || 'chains'
   )
 
+  useEffect(() => {
+    if (!tableViewFromStorage || tableViewFromStorage === 'cards') {
+      store.set(storeTableView, 'table')
+    }
+  }, [tableViewFromStorage])
+
   const value = {
     tableView,
     setTableView,
     showZeroBalances,
     setShowZeroBalances,
     balancesVariant,
-    setBalancesVariant
+    setBalancesVariant,
   }
 
   return <TableContext.Provider value={value}>{children}</TableContext.Provider>