Top accounts percentage of funds is not displayed correctly (#1274)

Fixes #1267

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 = ({
           <span>{ addressBalance.dp(8).toFormat() }</span>
         </Skeleton>
       </HStack>
-      { totalSupply && totalSupply !== '0' && (
+      { !totalSupply.eq(ZERO) && (
         <HStack spacing={ 3 }>
           <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Percentage</Skeleton>
           <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">

ui/addresses/AddressesTable.tsx

 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<AddressesItem>;
-  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 (
     <Table variant="simple" size="sm">
       <Thead top={ top }>

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 = ({
       </Td>
       { hasPercentage && (
         <Td isNumeric>
-          <Text lineHeight="24px">{ addressBalance.div(BigNumber(totalSupply)).multipliedBy(100).dp(8).toFormat() + '%' }</Text>
+          <Text lineHeight="24px">{ addressBalance.div(totalSupply).multipliedBy(100).dp(8).toFormat() + '%' }</Text>
         </Td>
       ) }
       <Td isNumeric>

ui/pages/Accounts.tsx

 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 ? (
     <>
       <Hide below="lg" ssr={ false }>
         <AddressesTable
           top={ pagination.isVisible ? 80 : 0 }
           items={ data.items }
-          totalSupply={ data.total_supply }
+          totalSupply={ totalSupply }
           pageStartIndex={ pageStartIndex }
           isLoading={ isPlaceholderData }
         />
@@ -57,7 +62,7 @@ const Accounts = () => {
               key={ item.hash + (isPlaceholderData ? index : '') }
               item={ item }
               index={ pageStartIndex + index }
-              totalSupply={ data.total_supply }
+              totalSupply={ totalSupply }
               isLoading={ isPlaceholderData }
             />
           );