Merge pull request #120 from multiversx/frontend-sort

Account Tokens Table
multiversx · Aug 29, 2024 · 5cccc80 · 5cccc80
2 parents 180d0c2 + 2f31556
commit 5cccc80
Show file tree

Hide file tree

Showing 30 changed files with 774 additions and 75 deletions.
diff --git a/src/appConstants/apiFields.ts b/src/appConstants/apiFields.ts
@@ -46,3 +46,19 @@ export const NODE_STATUS_PREVIEW_FIELDS = [
   'auctionQualified',
   'isInDangerZone'
 ];
+
+export const ACCOUNT_TOKENS_FIELDS = [
+  'type',
+  'identifier',
+  'collection',
+  'name',
+  'ticker',
+  'decimals',
+  'assets',
+  'price',
+  'totalLiquidity',
+  'isLowLiquidity',
+  'lowLiquidityThresholdPercent',
+  'balance',
+  'valueUsd'
+];
diff --git a/src/assets/scss/components/_pages.scss b/src/assets/scss/components/_pages.scss
@@ -1,4 +1,5 @@
 @import '../../../pages/AccountDetails/AccountStaking/accountStaking.styles.scss';
+@import '../../../pages/AccountDetails/AccountTokensTable/accountTokensTable.styles.scss';
 @import '../../../pages/Analytics/analytics.styles.scss';
 @import '../../../pages/BlockDetails/blockDetails.styles.scss';
 @import '../../../pages/Identities/identities.styles.scss';

diff --git a/src/assets/scss/elements/_badges.scss b/src/assets/scss/elements/_badges.scss
@@ -144,6 +144,12 @@ button.badge {
         rgba(215, 221, 232, 0.3)
       );
     }
+    &.active {
+      @extend .badge-grey;
+      &:before {
+        display: none;
+      }
+    }
   }
   &-primary {
     color: var(--primary);

diff --git a/src/components/Filters/TableSearch.tsx b/src/components/Filters/TableSearch.tsx
@@ -61,7 +61,8 @@ export const TableSearch = ({
     <div
       role='search'
       className={classNames(
-        'search-md input-group input-group-search input-group-seamless',
+        'input-group input-group-seamless',
+        { 'input-group-search search-sm': !className },
         className
       )}
     >

diff --git a/src/components/FormatValue/FormatDisplayValue/FormatDisplayValue.tsx b/src/components/FormatValue/FormatDisplayValue/FormatDisplayValue.tsx
@@ -11,6 +11,7 @@ export interface FormatDisplayValueUIType
   symbol?: React.ReactNode;
   label?: React.ReactNode;
   details?: React.ReactNode;
+  hideLessThanOne?: boolean;
   showTooltipSymbol?: boolean;
   showTooltipLabel?: boolean;
   spacedLabel?: boolean;
@@ -26,14 +27,15 @@ export const FormatDisplayValue = (props: FormatDisplayValueUIType) => {
     egldLabel,
     details,
     digits = DIGITS,
-    showLastNonZeroDecimal = false,
+    showLastNonZeroDecimal,
+    hideLessThanOne,
     showLabel = true,
     showTooltip = true,
-    showSymbol = false,
-    superSuffix = false,
-    showTooltipSymbol = false,
-    showTooltipLabel = false,
-    spacedLabel = false,
+    showSymbol,
+    superSuffix,
+    showTooltipSymbol,
+    showTooltipLabel,
+    spacedLabel,
     decimalOpacity = true,
     className
   } = props;
@@ -43,6 +45,9 @@ export const FormatDisplayValue = (props: FormatDisplayValueUIType) => {
   const displayLabel = label ?? (token ? token : egldLabel);
 
   const DisplayValue = () => {
+    if (hideLessThanOne) {
+      return <span className='am'>{'< 1'}</span>;
+    }
     const completeValueParts = String(completeValue).split('.');
     const decimalArray = completeValueParts?.[1]?.split('') ?? [];
     const areAllDigitsZeroes = decimalArray.every((digit) => digit === ZERO);

diff --git a/src/components/FormatValue/FormatNumber/FormatNumber.tsx b/src/components/FormatValue/FormatNumber/FormatNumber.tsx
@@ -33,21 +33,18 @@ export const FormatNumber = (props: FormatNumberUIType) => {
     );
   }
 
-  let formattedValue = bNamount.isInteger()
+  const formattedValue = bNamount.isInteger()
     ? completeValue
     : formatBigNumber({ value: bNamount, maxDigits });
 
-  if (hideLessThanOne && bNamount.isLessThan(1)) {
-    formattedValue = '< 1';
-  }
-
   return (
     <FormatDisplayValue
       {...props}
       formattedValue={formattedValue}
       completeValue={completeValue}
       symbol={symbol}
       egldLabel={label}
+      hideLessThanOne={hideLessThanOne && bNamount.isLessThan(1)}
       showSymbol={Boolean(symbol)}
       showLabel={Boolean(label)}
       showTooltipSymbol={Boolean(symbol)}

diff --git a/src/components/LowLiquidityTooltip/LowLiquidityTooltip.tsx b/src/components/LowLiquidityTooltip/LowLiquidityTooltip.tsx
@@ -1,4 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import BigNumber from 'bignumber.js';
 import classNames from 'classnames';
 import { FormatUSD, Overlay } from 'components';
 import { faSquareInfo } from 'icons/solid';
@@ -18,17 +19,23 @@ export const LowLiquidityTooltip = ({
     return null;
   }
 
-  const { totalLiquidity, isLowLiquidity } = token;
+  const { totalLiquidity, isLowLiquidity, lowLiquidityThresholdPercent } =
+    token;
+
   if (!isLowLiquidity) {
     return null;
   }
 
+  const displayTresholdPercent = new BigNumber(
+    lowLiquidityThresholdPercent ?? 0.5
+  ).toFormat();
+
   return (
     <Overlay
       title={
         <>
-          Less than 0.5% of total Token Supply captured in xExchange Liquidity
-          Pools.
+          Less than {displayTresholdPercent}% of total Token Supply captured in
+          xExchange Liquidity Pools.
           {showTotalLiquidity && totalLiquidity && (
             <>
               (<FormatUSD value={totalLiquidity} usd={1} />)

diff --git a/src/components/ProvidersTable/ProvidersTable.tsx b/src/components/ProvidersTable/ProvidersTable.tsx
@@ -18,21 +18,21 @@ export const ProvidersTable = (props: ProvidersTableUIType) => {
   const { providers, showIndex = true, showIdentity = true } = props;
   const [displayProviders, setDisplayProviders] =
     useState<ProviderType[]>(providers);
-  const sort = useGetSort();
+  const { sort, order } = useGetSort();
 
   useEffect(() => {
-    if (sort.sort && sort.order) {
+    if (sort && order) {
       setDisplayProviders((existing) =>
         sortProviders({
-          field: sort.sort as SortProviderFieldEnum,
-          order: sort.order,
+          field: sort as SortProviderFieldEnum,
+          order: order,
           sortArray: [...existing]
         })
       );
     } else {
       setDisplayProviders(providers);
     }
-  }, [sort.sort, sort.order]);
+  }, [sort, order]);
 
   return (
     <div

diff --git a/src/helpers/getValue/getItemsPage.ts b/src/helpers/getValue/getItemsPage.ts
@@ -0,0 +1,48 @@
+import BigNumber from 'bignumber.js';
+
+interface GetItemsPageType {
+  currentPage: number;
+  itemsPerPage: number;
+  items: any[];
+}
+
+export const getItemsPage = ({
+  items,
+  currentPage,
+  itemsPerPage
+}: GetItemsPageType) => {
+  const itemsPerPageBigNumber = new BigNumber(itemsPerPage);
+  const currentPageBigNumber = new BigNumber(currentPage);
+  const itemsLengthBigNumber = new BigNumber(items.length);
+
+  const totalPages = Math.ceil(
+    itemsLengthBigNumber.dividedBy(itemsPerPage).toNumber()
+  );
+
+  const totalPagesArray = Array.from({ length: totalPages });
+  const ranges = totalPagesArray.map((_, index) => [
+    itemsPerPageBigNumber.times(index),
+    itemsPerPageBigNumber.times(new BigNumber(index).plus(1))
+  ]);
+
+  const rangesLengthBigNumber = new BigNumber(ranges.length);
+  const currentRange = ranges.find((_, index) => {
+    if (rangesLengthBigNumber.lte(currentPage)) {
+      return rangesLengthBigNumber.minus(1).isEqualTo(index);
+    }
+
+    return currentPageBigNumber.minus(1).isEqualTo(index);
+  });
+
+  if (!currentRange) {
+    return items;
+  }
+
+  const [currentRangeStart, currentRangeEnd] = currentRange;
+  const slicedTokensArray = items.slice(
+    currentRangeStart.toNumber(),
+    currentRangeEnd.toNumber()
+  );
+
+  return slicedTokensArray;
+};
diff --git a/src/helpers/getValue/index.ts b/src/helpers/getValue/index.ts
@@ -4,6 +4,7 @@ export * from './getAccountStakingDetails';
 export * from './getAccountValidatorStakeDetails';
 export * from './getColors';
 export * from './getDisplayReceiver';
+export * from './getItemsPage';
 export * from './getNftText';
 export * from './getNodeIcon';
 export * from './getNodeIssue';

diff --git a/src/helpers/index.ts b/src/helpers/index.ts
@@ -16,6 +16,7 @@ export * from './isEllipsisActive';
 export * from './isHash';
 export * from './isMetachain';
 export * from './isUtf8';
+export * from './isValidTokenValue';
 export * from './parseAmount';
 export * from './parseJwt';
 export * from './partitionBy';

diff --git a/src/helpers/isValidTokenValue.ts b/src/helpers/isValidTokenValue.ts
@@ -0,0 +1,14 @@
+import BigNumber from 'bignumber.js';
+
+import { LOW_LIQUIDITY_DISPLAY_TRESHOLD } from 'appConstants';
+import { TokenType } from 'types';
+
+export const isValidTokenValue = (token: TokenType) => {
+  return Boolean(
+    token.valueUsd &&
+      (!token.isLowLiquidity ||
+        new BigNumber(token.valueUsd).isLessThan(
+          LOW_LIQUIDITY_DISPLAY_TRESHOLD
+        ))
+  );
+};
diff --git a/src/layouts/AccountLayout/AccountDetailsCard/AccountDetailsCard.tsx b/src/layouts/AccountLayout/AccountDetailsCard/AccountDetailsCard.tsx
@@ -1,13 +1,8 @@
 import React, { useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import BigNumber from 'bignumber.js';
 import { useDispatch, useSelector } from 'react-redux';
 
-import {
-  ELLIPSIS,
-  MAX_ACOUNT_TOKENS_BALANCE,
-  LOW_LIQUIDITY_DISPLAY_TRESHOLD
-} from 'appConstants';
+import { ELLIPSIS, MAX_ACOUNT_TOKENS_BALANCE } from 'appConstants';
 import { NativeTokenSymbol } from 'components';
 import {
   CardItem,
@@ -22,7 +17,8 @@ import {
   urlBuilder,
   formatHerotag,
   formatBigNumber,
-  getTotalTokenUsdValue
+  getTotalTokenUsdValue,
+  isValidTokenValue
 } from 'helpers';
 import { useAdapter, useIsSovereign } from 'hooks';
 import { faClock, faExclamationTriangle } from 'icons/regular';
@@ -118,12 +114,7 @@ export const AccountDetailsCard = () => {
         }
         if (accountTokensValueData.success) {
           const validTokenValues = accountTokensValueData.data.filter(
-            (token: TokenType) =>
-              token.valueUsd &&
-              (!token.isLowLiquidity ||
-                new BigNumber(token.valueUsd).isLessThan(
-                  LOW_LIQUIDITY_DISPLAY_TRESHOLD
-                ))
+            (token: TokenType) => isValidTokenValue(token)
           );
           const tokenBalance = getTotalTokenUsdValue(validTokenValues);
           accountExtraDetails.tokenBalance = tokenBalance;

diff --git a/src/layouts/TokenLayout/TokenDetailsCard.tsx b/src/layouts/TokenLayout/TokenDetailsCard.tsx
@@ -109,13 +109,14 @@ export const TokenDetailsCard = () => {
   ];
 
   const smallStatsCards = [
-    supply
+    supply && new BigNumber(supply).isGreaterThanOrEqualTo(0)
       ? {
           title: 'Supply',
           value: new BigNumber(supply).toFormat(0)
         }
       : {},
-    circulatingSupply
+    circulatingSupply &&
+    new BigNumber(circulatingSupply).isGreaterThanOrEqualTo(0)
       ? {
           title: 'Circulating',
           value: new BigNumber(circulatingSupply).toFormat(0)

diff --git a/src/pages/AccountDetails/AccountTokens.tsx b/src/pages/AccountDetails/AccountTokens.tsx
@@ -1,9 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
-import BigNumber from 'bignumber.js';
 import { useSelector } from 'react-redux';
 import { useParams, useSearchParams } from 'react-router-dom';
 
-import { ZERO, LOW_LIQUIDITY_DISPLAY_TRESHOLD } from 'appConstants';
+import { ZERO } from 'appConstants';
 import {
   DetailItem,
   Loader,
@@ -15,6 +14,7 @@ import {
   FormatUSD,
   LowLiquidityTooltip
 } from 'components';
+import { isValidTokenValue } from 'helpers';
 import { useAdapter, useGetPage } from 'hooks';
 import { faCoins } from 'icons/solid';
 import { AccountTabs } from 'layouts/AccountLayout/AccountTabs';
@@ -90,6 +90,7 @@ export const AccountTokens = () => {
           {dataReady === true && accountTokens.length > 0 && (
             <>
               {accountTokens.map((token) => {
+                const isValidDisplayValue = isValidTokenValue(token);
                 return (
                   <DetailItem
                     title={token.name}
@@ -107,23 +108,19 @@ export const AccountTokens = () => {
                           showLastNonZeroDecimal
                         />
                       </div>
-                      {token.valueUsd &&
-                        (!token.isLowLiquidity ||
-                          new BigNumber(token.valueUsd).isLessThan(
-                            LOW_LIQUIDITY_DISPLAY_TRESHOLD
-                          )) && (
-                          <span>
-                            (
-                            <FormatUSD
-                              value={token.valueUsd}
-                              usd={1}
-                              showPrefix={false}
-                              showLastNonZeroDecimal
-                              className='text-neutral-400'
-                            />
-                            )
-                          </span>
-                        )}
+                      {isValidDisplayValue && (
+                        <span>
+                          (
+                          <FormatUSD
+                            value={token.valueUsd ?? ZERO}
+                            usd={1}
+                            showPrefix={false}
+                            showLastNonZeroDecimal
+                            className='text-neutral-400'
+                          />
+                          )
+                        </span>
+                      )}
                       <LowLiquidityTooltip token={token} />
                       <TokenLink token={token} />
                     </div>