Add pnl analytics to balances table

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>
   )

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',

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>

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>
   )
 

src/components/table/Table.module.sass

@@ -27,6 +27,20 @@ $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
+
 .Card
   min-height: 5rem
   border-radius: $border_radius_normal
@@ -322,6 +336,7 @@ $zero_margin: 0
     border-bottom: 1px solid #f0f0f0
 
   .NonTokenImage
-    width: 24px
+    max-width: 24px
+    width: 100%
     height: 24px
     font-size: $font_small

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,11 +12,8 @@ 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 ActionPanel from './utils/ActionPanel'
 import TransferModal from 'src/components/transfer/TransferModal'
 import PricesWarning from './PricesWarning'
 
@@ -30,24 +26,26 @@ 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)
-  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()
 
   return (
     <div className={clsx(styles.BalanceBlock, 'mt-0')}>
-      <ActionPannel
+      <ActionPanel
         balancesVariant={balancesVariant}
         setBalancesVariant={setBalancesVariant}
         loading={!!balancesLoading}
@@ -78,7 +76,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 +86,9 @@ const BalancesTableNew = (props: BalancesTableProps) => {
     <TableContextWrapper {...storeProps}>
       <PricesWarning />
 
-      <BalancesTableNewInner {...storeProps} {...props} />
+      <BalancesTableInner {...storeProps} {...props} />
     </TableContextWrapper>
   )
 }
 
-export default BalancesTableNew
+export default BalancesTable