(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 (
{
+ 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
index f5ebe40aa..f2b5ed3ba 100644
--- 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
index e51b46834..4cd02b7a2 100644
--- 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
new file mode 100644
index 000000000..4252f7767
--- /dev/null
+++ 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
index d2af317b8..6960b3f28 100644
--- 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
index b49b7adc3..ab9db6d0a 100644
--- 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
index c66a012f8..9171d3a27 100644
--- 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 (
{
showLastNonZeroDecimal
/>
- {token.valueUsd &&
- (!token.isLowLiquidity ||
- new BigNumber(token.valueUsd).isLessThan(
- LOW_LIQUIDITY_DISPLAY_TRESHOLD
- )) && (
-
- (
-
- )
-
- )}
+ {isValidDisplayValue && (
+
+ (
+
+ )
+
+ )}