diff --git a/ui/addresses/AddressesListItem.tsx b/ui/addresses/AddressesListItem.tsx index ea2ead9a4d..b3d584863a 100644 --- a/ui/addresses/AddressesListItem.tsx +++ b/ui/addresses/AddressesListItem.tsx @@ -5,6 +5,7 @@ import React from 'react'; import type { AddressesItem } from 'types/api/addresses'; import config from 'configs/app'; +import { ZERO } from 'lib/consts'; import Tag from 'ui/shared/chakra/Tag'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; @@ -12,7 +13,7 @@ import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; type Props = { item: AddressesItem; index: number; - totalSupply: string; + totalSupply: BigNumber; isLoading?: boolean; } @@ -47,7 +48,7 @@ const AddressesListItem = ({ { addressBalance.dp(8).toFormat() } - { totalSupply && totalSupply !== '0' && ( + { !totalSupply.eq(ZERO) && ( Percentage diff --git a/ui/addresses/AddressesTable.tsx b/ui/addresses/AddressesTable.tsx index 4a87862332..610d3e58cb 100644 --- a/ui/addresses/AddressesTable.tsx +++ b/ui/addresses/AddressesTable.tsx @@ -1,23 +1,25 @@ import { Table, Tbody, Tr, Th } from '@chakra-ui/react'; +import type BigNumber from 'bignumber.js'; import React from 'react'; import type { AddressesItem } from 'types/api/addresses'; import config from 'configs/app'; +import { ZERO } from 'lib/consts'; import { default as Thead } from 'ui/shared/TheadSticky'; import AddressesTableItem from './AddressesTableItem'; interface Props { items: Array; - totalSupply: string; + totalSupply: BigNumber; pageStartIndex: number; top: number; isLoading?: boolean; } const AddressesTable = ({ items, totalSupply, pageStartIndex, top, isLoading }: Props) => { - const hasPercentage = Boolean(totalSupply && totalSupply !== '0'); + const hasPercentage = !totalSupply.eq(ZERO); return ( diff --git a/ui/addresses/AddressesTableItem.tsx b/ui/addresses/AddressesTableItem.tsx index 5508b555d8..05f2f0ce0a 100644 --- a/ui/addresses/AddressesTableItem.tsx +++ b/ui/addresses/AddressesTableItem.tsx @@ -11,7 +11,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity'; type Props = { item: AddressesItem; index: number; - totalSupply: string; + totalSupply: BigNumber; hasPercentage: boolean; isLoading?: boolean; } @@ -55,7 +55,7 @@ const AddressesTableItem = ({ { hasPercentage && ( ) }
- { addressBalance.div(BigNumber(totalSupply)).multipliedBy(100).dp(8).toFormat() + '%' } + { addressBalance.div(totalSupply).multipliedBy(100).dp(8).toFormat() + '%' } diff --git a/ui/pages/Accounts.tsx b/ui/pages/Accounts.tsx index 1eadcc0484..ce9a8009bc 100644 --- a/ui/pages/Accounts.tsx +++ b/ui/pages/Accounts.tsx @@ -1,4 +1,5 @@ import { Hide, Show } from '@chakra-ui/react'; +import BigNumber from 'bignumber.js'; import React from 'react'; import { TOP_ADDRESS } from 'stubs/address'; @@ -39,13 +40,17 @@ const Accounts = () => { ); const pageStartIndex = (pagination.page - 1) * PAGE_SIZE + 1; + const totalSupply = React.useMemo(() => { + return BigNumber(data?.total_supply || '0'); + }, [ data?.total_supply ]); + const content = data?.items ? ( <> @@ -57,7 +62,7 @@ const Accounts = () => { key={ item.hash + (isPlaceholderData ? index : '') } item={ item } index={ pageStartIndex + index } - totalSupply={ data.total_supply } + totalSupply={ totalSupply } isLoading={ isPlaceholderData } /> );