From 3ec1dfa1f895a1bc66a4de932c8a2d389f9244b2 Mon Sep 17 00:00:00 2001 From: Radu Mojic Date: Wed, 28 Feb 2024 18:27:23 +0200 Subject: [PATCH] - use existing components on the AccountTokens table - updated the FormatUSD component with props similar to Denominate ( FormatAmount ) --- src/components/Format/FormatUSD/FormatUSD.tsx | 30 +++-- src/components/TokenLink/TokenLink.tsx | 47 +++++-- src/helpers/amountWithoutRounding.ts | 25 ++-- src/helpers/formatValue/formatUSD.ts | 27 ++-- src/pages/AccountDetails/AccountTokens.tsx | 123 ++++++------------ 5 files changed, 126 insertions(+), 126 deletions(-) diff --git a/src/components/Format/FormatUSD/FormatUSD.tsx b/src/components/Format/FormatUSD/FormatUSD.tsx index d7b833cbd..3b1ce0e5e 100644 --- a/src/components/Format/FormatUSD/FormatUSD.tsx +++ b/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 ? ( - - {formatUSD({ amount, usd, digits, showPrefix })} + + {formatUSD({ + amount, + usd, + digits, + maxDigits, + showPrefix, + showLastNonZeroDecimal + })} ) : ( - formatUSD({ amount, usd, digits, showPrefix }) + formatUSD({ + amount, + usd, + digits, + maxDigits, + showPrefix, + showLastNonZeroDecimal + }) )} )} diff --git a/src/components/TokenLink/TokenLink.tsx b/src/components/TokenLink/TokenLink.tsx index 7e35814ac..e62db98cc 100644 --- a/src/components/TokenLink/TokenLink.tsx +++ b/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 = () => ( + + {(token.assets?.svgUrl || token.assets?.pngUrl) && ( + {token.identifier} + )} +
{token?.ticker ?? token.name}
+ + ); + return (
{token?.assets ? ( <> - {token?.assets?.svgUrl && ( - {token.name} + {token.type === TokenTypeEnum.MetaESDT && + detailsIdentifier !== token.identifier ? ( + + + + ) : ( + )} -
- {token?.ticker ? token.ticker : token.name} -
) : ( {token.identifier} diff --git a/src/helpers/amountWithoutRounding.ts b/src/helpers/amountWithoutRounding.ts index 65a8eed6f..fba5b541a 100644 --- a/src/helpers/amountWithoutRounding.ts +++ b/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'; diff --git a/src/helpers/formatValue/formatUSD.ts b/src/helpers/formatValue/formatUSD.ts index 84523281d..8e8588a18 100644 --- a/src/helpers/formatValue/formatUSD.ts +++ b/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}`; }; diff --git a/src/pages/AccountDetails/AccountTokens.tsx b/src/pages/AccountDetails/AccountTokens.tsx index 8b6fc4057..68f6c4369 100644 --- a/src/pages/AccountDetails/AccountTokens.tsx +++ b/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 = () => ( -
- {assets ? ( - <> - {assets?.svgUrl && ( - {name} - )} -
- {ticker ? ticker : name}{' '} -
- - ) : ( -
{identifier}
- )} -
- ); - - return ( - -
-
- { + return ( + +
+
+ +
+ {token.valueUsd && ( + + ( + -
- {valueUsd && ( - - (${amountWithoutRounding(valueUsd)}) - - )} + ) + + )} - -
- {type === TokenTypeEnum.MetaESDT && - assets?.svgUrl ? ( - - - - ) : ( - - )} -
- -
- - ); - } - )} + +
+ + ); + })} )}