Fix pnl analytics styles

dappforce · Jan 25, 2024 · 1f8b666 · 1f8b666
1 parent ac2f434
commit 1f8b666
Show file tree

Hide file tree

Showing 8 changed files with 278 additions and 94 deletions.
diff --git 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
@@ -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
@@ -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,14 +303,27 @@ 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}
           name={tokenId}
           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>
     )