fixes

ui/address/tokenSelect/TokenSelectItem.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import { route } from 'nextjs-routes';
 
+import getCurrencyValue from 'lib/getCurrencyValue';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import LinkInternal from 'ui/shared/LinkInternal';
 import TruncatedValue from 'ui/shared/TruncatedValue';
@@ -55,7 +56,10 @@ const TokenSelectItem = ({ data }: Props) => {
             ) }
             { data.value !== null && (
               <span>
-                { BigNumber(data.value).toFormat() }
+                { data.token.decimals ?
+                  getCurrencyValue({ value: data.value, decimals: data.token.decimals, accuracy: 2 }).valueStr :
+                  BigNumber(data.value).toFormat()
+                }
               </span>
             ) }
           </>

ui/address/tokens/NFTItem.tsx

@@ -5,6 +5,7 @@ import type { AddressNFT } from 'types/api/address';
 
 import { route } from 'nextjs-routes';
 
+import getCurrencyValue from 'lib/getCurrencyValue';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import NftMedia from 'ui/shared/nft/NftMedia';
@@ -14,6 +15,7 @@ import NFTItemContainer from './NFTItemContainer';
 type Props = AddressNFT & { isLoading: boolean; withTokenLink?: boolean };
 
 const NFTItem = ({ token, value, isLoading, withTokenLink, ...tokenInstance }: Props) => {
+  const valueResult = token.decimals ? getCurrencyValue({ value, decimals: token.decimals, accuracy: 2 }).valueStr : value;
   const tokenInstanceLink = tokenInstance.id ?
     route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address, id: tokenInstance.id } }) :
     undefined;
@@ -31,13 +33,18 @@ const NFTItem = ({ token, value, isLoading, withTokenLink, ...tokenInstance }: P
           isLoading={ isLoading }
         />
       </Link>
-      <Flex justifyContent="space-between" w="100%">
+      <Flex justifyContent="space-between" w="100%" flexWrap="wrap">
         <Flex ml={ 1 } overflow="hidden">
           <Text whiteSpace="pre" variant="secondary">ID# </Text>
           <NftEntity hash={ token.address } id={ tokenInstance.id } isLoading={ isLoading } noIcon/>
         </Flex>
-        <Skeleton isLoaded={ !isLoading }>
-          { Number(value) > 1 && <Flex><Text variant="secondary" whiteSpace="pre">Qty </Text>{ value }</Flex> }
+        <Skeleton isLoaded={ !isLoading } overflow="hidden" ml={ 1 }>
+          { valueResult && (
+            <Flex>
+              <Text variant="secondary" whiteSpace="pre">Qty </Text>
+              <Text overflow="hidden" wordBreak="break-all">{ valueResult }</Text>
+            </Flex>
+          ) }
         </Skeleton>
       </Flex>
       { withTokenLink && (

ui/token/TokenHolders/TokenHoldersListItem.tsx

@@ -47,7 +47,7 @@ const TokenHoldersListItem = ({ holder, token, isLoading }: Props) => {
         </Skeleton>
       </ListItemMobileGrid.Value>
 
-      { token.total_supply && (
+      { token.total_supply && token.type !== 'ERC-404' && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Percentage</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>

ui/token/TokenHolders/TokenHoldersTable.tsx

@@ -21,7 +21,7 @@ const TokenHoldersTable = ({ data, token, top, isLoading }: Props) => {
           <Th>Holder</Th>
           { (token.type === 'ERC-1155' || token.type === 'ERC-404') && <Th>ID#</Th> }
           <Th isNumeric>Quantity</Th>
-          { token.total_supply && <Th isNumeric width="175px">Percentage</Th> }
+          { token.total_supply && token.type !== 'ERC-404' && <Th isNumeric width="175px">Percentage</Th> }
         </Tr>
       </Thead>
       <Tbody>

ui/token/TokenHolders/TokenHoldersTableItem.tsx

@@ -38,7 +38,7 @@ const TokenTransferTableItem = ({ holder, token, isLoading }: Props) => {
           { quantity }
         </Skeleton>
       </Td>
-      { token.total_supply && (
+      { token.total_supply && token.type !== 'ERC-404' && (
         <Td verticalAlign="middle" isNumeric>
           <Utilization
             value={ BigNumber(holder.value).div(BigNumber(token.total_supply)).dp(4).toNumber() }

ui/token/TokenTransfer/TokenTransferTable.tsx

@@ -32,9 +32,9 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
           <Tr>
             <Th width="280px">Txn hash</Th>
             <Th width="200px">Method</Th>
-            <Th width={{ lg: '224px', xl: '420px' }}>From/To</Th>
+            <Th width={{ lg: '224px', xl: '380px' }}>From/To</Th>
             { (NFT_TOKEN_TYPE_IDS.includes(tokenType)) &&
-              <Th width={ tokenType === 'ERC-1155' ? '50%' : '100%' }>Token ID</Th>
+              <Th width={ tokenType === 'ERC-1155' || tokenType === 'ERC-404' ? '50%' : '100%' }>Token ID</Th>
             }
             { (tokenType === 'ERC-20' || tokenType === 'ERC-1155' || tokenType === 'ERC-404') && (
               <Th width={ tokenType === 'ERC-20' ? '100%' : '50%' } isNumeric>