- use existing components on the AccountTokens table

- updated the FormatUSD component with props similar to Denominate ( FormatAmount )

src/components/Format/FormatUSD/FormatUSD.tsx

@@ -5,17 +5,13 @@ import { useSelector } from 'react-redux';
 import { ELLIPSIS } from 'appConstants';
 import { Overlay } from 'components';
 import { DIGITS } from 'config';
-import { denominate, formatUSD, stringIsFloat } from 'helpers';
+import { denominate, formatUSD, stringIsFloat, FormatUSDType } from 'helpers';
 
 import { economicsSelector } from 'redux/selectors';
 import { WithClassnameType } from 'types';
 
-export interface FormatUSDUIType extends WithClassnameType {
-  amount: string | number;
-  usd?: string | number;
+export interface FormatUSDUIType extends FormatUSDType, WithClassnameType {
   decimals?: number;
-  digits?: number;
-  showPrefix?: boolean;
   showTooltip?: boolean;
 }
 
@@ -24,8 +20,10 @@ export const FormatUSD = ({
   usd: usdValue,
   digits,
   decimals,
+  maxDigits,
   showPrefix = true,
   showTooltip = true,
+  showLastNonZeroDecimal,
   className
 }: FormatUSDUIType) => {
   const { isFetched, unprocessed } = useSelector(economicsSelector);
@@ -60,11 +58,25 @@ export const FormatUSD = ({
       ) : (
         <>
           {showTooltip && !isEqual ? (
-            <Overlay title={`$${value.toFormat()}`}>
-              {formatUSD({ amount, usd, digits, showPrefix })}
+            <Overlay title={`$${value.toFormat()}`} className='cursor-context'>
+              {formatUSD({
+                amount,
+                usd,
+                digits,
+                maxDigits,
+                showPrefix,
+                showLastNonZeroDecimal
+              })}
             </Overlay>
           ) : (
-            formatUSD({ amount, usd, digits, showPrefix })
+            formatUSD({
+              amount,
+              usd,
+              digits,
+              maxDigits,
+              showPrefix,
+              showLastNonZeroDecimal
+            })
           )}
         </>
       )}

src/components/TokenLink/TokenLink.tsx

@@ -1,28 +1,49 @@
-import { NetworkLink } from 'components';
+import { NetworkLink, Overlay } from 'components';
 import { urlBuilder } from 'helpers';
-import { TokenType } from 'types';
+import { TokenType, TokenTypeEnum } from 'types';
 
 export const TokenLink = ({ token }: { token: TokenType }) => {
+  const identifierArray = token.identifier ? token.identifier.split('-') : [];
+  if (identifierArray.length > 2 && token.type === TokenTypeEnum.MetaESDT) {
+    identifierArray.pop();
+  }
+  const detailsIdentifier = identifierArray.join('-');
+  const networkLink =
+    token.type === TokenTypeEnum.MetaESDT
+      ? urlBuilder.tokenMetaEsdtDetails(detailsIdentifier)
+      : urlBuilder.tokenDetails(token.identifier);
+
+  const TokenComponent = () => (
+    <span className='d-flex align-items-center gap-1 text-truncate'>
+      {(token.assets?.svgUrl || token.assets?.pngUrl) && (
+        <img
+          src={token.assets?.svgUrl || token.assets?.pngUrl}
+          alt={token.identifier}
+          className='side-icon'
+        />
+      )}
+      <div className='text-truncate'>{token?.ticker ?? token.name}</div>
+    </span>
+  );
+
   return (
     <NetworkLink
-      to={urlBuilder.tokenDetails(token.identifier)}
+      to={networkLink}
       className={`d-flex text-truncate ${
-        token?.assets?.svgUrl ? 'side-link' : ''
+        token.assets?.svgUrl || token.assets?.pngUrl ? 'side-link' : ''
       }`}
     >
       <div className='d-flex align-items-center symbol text-truncate'>
         {token?.assets ? (
           <>
-            {token?.assets?.svgUrl && (
-              <img
-                src={token.assets.svgUrl}
-                alt={token.name}
-                className='side-icon me-1'
-              />
+            {token.type === TokenTypeEnum.MetaESDT &&
+            detailsIdentifier !== token.identifier ? (
+              <Overlay title={token.identifier}>
+                <TokenComponent />
+              </Overlay>
+            ) : (
+              <TokenComponent />
             )}
-            <div className='text-truncate'>
-              {token?.ticker ? token.ticker : token.name}
-            </div>
           </>
         ) : (
           <span className='text-truncate'>{token.identifier}</span>

src/helpers/amountWithoutRounding.ts

@@ -3,11 +3,14 @@ import { DIGITS } from 'config';
 import { stringIsFloat } from './stringIsFloat';
 
 export const amountWithoutRounding = (
-  amount: string | number,
-  minNonZeroDecimals?: number,
-  maxDecimals?: number
+  amount: string | number | BigNumber,
+  minNonZeroDigits?: number,
+  maxDigits?: number
 ) => {
-  const bNamount = new BigNumber(amount);
+  const bNamount = BigNumber.isBigNumber(amount)
+    ? amount
+    : new BigNumber(amount);
+
   const formattedAmount = bNamount.toFormat({
     groupSeparator: '',
     decimalSeparator: '.'
@@ -17,19 +20,19 @@ export const amountWithoutRounding = (
       return '0';
     }
 
-    const amountDecimals = formattedAmount.split('.')?.[1];
-    let displayDecimals = minNonZeroDecimals ?? DIGITS;
-    if (amountDecimals) {
-      for (let i = 0; i < amountDecimals.length; i++) {
-        if (amountDecimals.charAt(i) === '0') {
-          displayDecimals++;
+    const amountDigits = formattedAmount.split('.')?.[1];
+    let displayDigits = minNonZeroDigits ?? DIGITS;
+    if (amountDigits) {
+      for (let i = 0; i < amountDigits.length; i++) {
+        if (amountDigits.charAt(i) === '0') {
+          displayDigits++;
         } else {
           break;
         }
       }
     }
 
-    return new BigNumber(amount).toFormat(maxDecimals ?? displayDecimals);
+    return new BigNumber(amount).toFormat(maxDigits ?? displayDigits);
   }
 
   return '0';

src/helpers/formatValue/formatUSD.ts

@@ -1,19 +1,30 @@
 import BigNumber from 'bignumber.js';
+import { amountWithoutRounding } from 'helpers';
 
-export const formatUSD = ({
-  amount,
-  usd,
-  digits,
-  showPrefix = true
-}: {
+export interface FormatUSDType {
   amount: string | number;
   usd?: string | number;
   digits?: number;
+  maxDigits?: number;
   showPrefix?: boolean;
-}) => {
+  showLastNonZeroDecimal?: boolean;
+}
+
+export const formatUSD = ({
+  amount,
+  usd,
+  digits,
+  showPrefix = true,
+  maxDigits,
+  showLastNonZeroDecimal
+}: FormatUSDType) => {
   const value = new BigNumber(amount).times(usd ? new BigNumber(usd) : 1);
 
+  const displayValue = showLastNonZeroDecimal
+    ? amountWithoutRounding(value, digits, maxDigits)
+    : value.toFormat(digits);
+
   return `${
     showPrefix ? (value.isGreaterThan(0) ? '~' : '=') : ''
-  }$${value.toFormat(digits)}`;
+  }$${displayValue}`;
 };

src/pages/AccountDetails/AccountTokens.tsx

@@ -8,15 +8,15 @@ import {
   Pager,
   PageState,
   Denominate,
-  NetworkLink,
-  Overlay
+  TokenLink,
+  FormatUSD
 } from 'components';
-import { urlBuilder, amountWithoutRounding } from 'helpers';
+import { amountWithoutRounding } from 'helpers';
 import { useAdapter, useGetPage } from 'hooks';
 import { faCoins } from 'icons/solid';
 import { AccountTabs } from 'layouts/AccountLayout/AccountTabs';
 import { activeNetworkSelector, accountSelector } from 'redux/selectors';
-import { TokenType, TokenTypeEnum } from 'types';
+import { TokenType } from 'types';
 
 export const AccountTokens = () => {
   const ref = useRef(null);
@@ -86,90 +86,43 @@ export const AccountTokens = () => {
           )}
           {dataReady === true && accountTokens.length > 0 && (
             <>
-              {accountTokens.map(
-                ({
-                  type,
-                  identifier,
-                  name,
-                  balance,
-                  decimals,
-                  assets,
-                  ticker,
-                  valueUsd
-                }) => {
-                  const identifierArray = identifier.split('-');
-                  if (identifierArray.length > 2) {
-                    identifierArray.pop();
-                  }
-
-                  const networkLink =
-                    type === TokenTypeEnum.MetaESDT
-                      ? urlBuilder.tokenMetaEsdtDetails(
-                          identifierArray.join('-')
-                        )
-                      : urlBuilder.tokenDetails(identifier);
-
-                  const TokenInfo = () => (
-                    <div className='d-flex align-items-center symbol text-truncate'>
-                      {assets ? (
-                        <>
-                          {assets?.svgUrl && (
-                            <img
-                              src={assets.svgUrl}
-                              alt={name}
-                              className='side-icon me-1'
-                            />
-                          )}
-                          <div className='text-truncate'>
-                            {ticker ? ticker : name}{' '}
-                          </div>
-                        </>
-                      ) : (
-                        <div className='text-truncate'>{identifier}</div>
-                      )}
-                    </div>
-                  );
-
-                  return (
-                    <DetailItem title={name} key={identifier} verticalCenter>
-                      <div className='d-flex align-items-center'>
-                        <div className='me-1 text-neutral-100'>
-                          <Denominate
-                            showLabel={false}
-                            showSymbol={false}
-                            value={balance ? balance : '0'}
-                            denomination={decimals}
+              {accountTokens.map((token) => {
+                return (
+                  <DetailItem
+                    title={token.name}
+                    key={token.identifier}
+                    verticalCenter
+                  >
+                    <div className='d-flex align-items-center flex-wrap gap-1'>
+                      <div className='text-neutral-100'>
+                        <Denominate
+                          showLabel={false}
+                          showSymbol={false}
+                          value={token.balance ? token.balance : '0'}
+                          denomination={token.decimals}
+                          showLastNonZeroDecimal
+                        />
+                      </div>
+                      {token.valueUsd && (
+                        <span>
+                          (
+                          <FormatUSD
+                            amount={token.valueUsd}
+                            usd={1}
+                            digits={2}
+                            showPrefix={false}
                             showLastNonZeroDecimal
+                            className='text-neutral-400'
                           />
-                        </div>
-                        {valueUsd && (
-                          <span className='text-neutral-400 me-1'>
-                            (${amountWithoutRounding(valueUsd)})
-                          </span>
-                        )}
+                          )
+                        </span>
+                      )}
 
-                        <NetworkLink
-                          to={networkLink}
-                          className={`d-flex text-truncate ${
-                            assets?.svgUrl ? 'side-link' : ''
-                          }`}
-                        >
-                          <div className='d-flex align-items-center symbol text-truncate'>
-                            {type === TokenTypeEnum.MetaESDT &&
-                            assets?.svgUrl ? (
-                              <Overlay title={identifier}>
-                                <TokenInfo />
-                              </Overlay>
-                            ) : (
-                              <TokenInfo />
-                            )}
-                          </div>
-                        </NetworkLink>
-                      </div>
-                    </DetailItem>
-                  );
-                }
-              )}
+                      <TokenLink token={token} />
+                    </div>
+                  </DetailItem>
+                );
+              })}
             </>
           )}
         </div>