Merge pull request #860 from blockscout/token-holders-fix

fix token holders

ui/token/TokenHolders/TokenHoldersListItem.tsx

-import { Flex, Skeleton } from '@chakra-ui/react';
+import { Box, Flex, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -36,17 +36,20 @@ const TokenHoldersListItem = ({ holder, token, isLoading }: Props) => {
         <CopyToClipboard text={ holder.address.hash } isLoading={ isLoading }/>
       </Address>
       <Flex justifyContent="space-between" alignItems="center" width="100%">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
-          { quantity }
+        <Skeleton isLoaded={ !isLoading } display="inline-block" width="100%">
+          <Box as="span" wordBreak="break-word" mr={ 6 }>
+            { quantity }
+          </Box>
+          { token.total_supply && (
+            <Utilization
+              value={ BigNumber(holder.value).div(BigNumber(token.total_supply)).dp(4).toNumber() }
+              colorScheme="green"
+              isLoading={ isLoading }
+              display="inline-flex"
+              float="right"
+            />
+          ) }
         </Skeleton>
-        { token.total_supply && (
-          <Utilization
-            value={ BigNumber(holder.value).div(BigNumber(token.total_supply)).dp(4).toNumber() }
-            colorScheme="green"
-            ml={ 6 }
-            isLoading={ isLoading }
-          />
-        ) }
       </Flex>
     </ListItemMobile>
   );

ui/token/TokenHolders/TokenHoldersTable.tsx

@@ -15,11 +15,11 @@ interface Props {
 
 const TokenHoldersTable = ({ data, token, top, isLoading }: Props) => {
   return (
-    <Table variant="simple" size="sm">
+    <Table variant="simple" size="sm" layout="auto">
       <Thead top={ top }>
         <Tr>
           <Th>Holder</Th>
-          <Th isNumeric width="300px">Quantity</Th>
+          <Th isNumeric>Quantity</Th>
           { token.total_supply && <Th isNumeric width="175px">Percentage</Th> }
         </Tr>
       </Thead>

ui/token/TokenHolders/TokenHoldersTableItem.tsx

@@ -32,12 +32,13 @@ const TokenTransferTableItem = ({ holder, token, isLoading }: Props) => {
             alias={ holder.address.name }
             flexGrow={ 1 }
             isLoading={ isLoading }
+            truncation="constant"
           />
           <CopyToClipboard text={ holder.address.hash } isLoading={ isLoading }/>
         </Address>
       </Td>
       <Td verticalAlign="middle" isNumeric>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton isLoaded={ !isLoading } display="inline-block" wordBreak="break-word">
           { quantity }
         </Skeleton>
       </Td>