tx logs: fix layout on mobile (#1062)

* tx logs: fix layout on mobile

Fixes #1052

* make a use of TruncatedValue

ui/address/tokenSelect/TokenSelectItem.tsx

@@ -4,7 +4,7 @@ import { route } from 'nextjs-routes';
 import React from 'react';
 
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
-import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 
 import type { TokenEnhancedData } from '../utils/tokenUtils';
 
@@ -22,24 +22,14 @@ const TokenSelectItem = ({ data }: Props) => {
 
         return (
           <>
-            <TruncatedTextTooltip label={ text }>
-              <chakra.span textOverflow="ellipsis" overflow="hidden">
-                { text }
-              </chakra.span>
-            </TruncatedTextTooltip>
+            <TruncatedValue value={ text }/>
             { data.token.exchange_rate && <chakra.span ml={ 2 }>@{ Number(data.token.exchange_rate).toLocaleString() }</chakra.span> }
           </>
         );
       }
       case 'ERC-721': {
         const text = `${ BigNumber(data.value).toFormat() } ${ data.token.symbol || '' }`;
-        return (
-          <TruncatedTextTooltip label={ text }>
-            <chakra.span textOverflow="ellipsis" overflow="hidden">
-              { text }
-            </chakra.span>
-          </TruncatedTextTooltip>
-        );
+        return <TruncatedValue value={ text }/>;
       }
       case 'ERC-1155': {
         return (

ui/address/tokens/NFTItem.tsx

@@ -7,6 +7,7 @@ import type { AddressTokenBalance } from 'types/api/address';
 import NftMedia from 'ui/shared/nft/NftMedia';
 import TokenLogo from 'ui/shared/TokenLogo';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 
 type Props = AddressTokenBalance & { isLoading: boolean };
 
@@ -55,11 +56,7 @@ const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance, isLo
       { token.name && (
         <Flex alignItems="center">
           <TokenLogo data={ token } boxSize={ 6 } ml={ 1 } mr={ 1 } isLoading={ isLoading }/>
-          <TruncatedTextTooltip label={ token.name }>
-            <Skeleton isLoaded={ !isLoading } color="text_secondary" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
-              <span>{ token.name }</span>
-            </Skeleton>
-          </TruncatedTextTooltip>
+          <TruncatedValue isLoading={ isLoading } value={ token.name } color="text_secondary"/>
         </Flex>
       ) }
     </LinkBox>

ui/shared/TokenSnippet/TokenSnippet.tsx

 import type { StyleProps } from '@chakra-ui/react';
-import { Flex, chakra, Skeleton, Box, shouldForwardProp } from '@chakra-ui/react';
+import { Flex, chakra, Skeleton, shouldForwardProp } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
 
 import AddressLink from 'ui/shared/address/AddressLink';
 import TokenLogo from 'ui/shared/TokenLogo';
-import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 
 interface Props {
   data?: Pick<TokenInfo, 'address' | 'icon_url' | 'name' | 'symbol'>;
@@ -44,9 +44,7 @@ const TokenSnippet = ({ data, className, logoSize = 6, isDisabled, hideSymbol, h
       { withSymbol && (
         <Skeleton isLoaded={ !isLoading } color="text_secondary" maxW="20%" display="flex">
           <div>(</div>
-          <TruncatedTextTooltip label={ data.symbol || '' }>
-            <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" wordBreak="break-all">{ data.symbol }</Box>
-          </TruncatedTextTooltip>
+          <TruncatedValue value={ data.symbol } display="block" wordBreak="break-all"/>
           <div>)</div>
         </Skeleton>
       ) }

ui/shared/TruncatedValue.tsx

+import { Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+
+interface Props {
+  className?: string;
+  isLoading?: boolean;
+  value: string;
+}
+
+const TruncatedValue = ({ className, isLoading, value }: Props) => {
+  return (
+    <TruncatedTextTooltip label={ value }>
+      <Skeleton
+        className={ className }
+        isLoaded={ !isLoading }
+        display="inline-block"
+        whiteSpace="nowrap"
+        overflow="hidden"
+        textOverflow="ellipsis"
+        height="fit-content"
+      >
+        { value }
+      </Skeleton>
+    </TruncatedTextTooltip>
+  );
+};
+
+export default React.memo(chakra(TruncatedValue));

ui/shared/address/AddressLink.tsx

@@ -7,8 +7,7 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkInternal from 'ui/shared/LinkInternal';
-
-import TruncatedTextTooltip from '../TruncatedTextTooltip';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 
 type CommonProps = {
   className?: string;
@@ -63,11 +62,7 @@ const AddressLink = (props: Props) => {
     if (alias) {
       const text = <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">{ alias }</Box>;
       if (type === 'token' || type === 'address_token') {
-        return (
-          <TruncatedTextTooltip label={ alias }>
-            { text }
-          </TruncatedTextTooltip>
-        );
+        return <TruncatedValue value={ alias } display="block"/>;
       }
       return (
         <Tooltip label={ hash } isDisabled={ isMobile }>

ui/shared/logs/LogDecodedInputData.tsx

-import { Flex, Grid, GridItem, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { DecodedInput } from 'types/api/decodedInput';
 
-import Address from 'ui/shared/address/Address';
-import AddressLink from 'ui/shared/address/AddressLink';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
-
-interface RowProps {
-  children: React.ReactNode;
-  isLast?: boolean;
-  name: string;
-  type: string;
-  indexed?: boolean;
-  isLoading?: boolean;
-}
-
-const PADDING = 4;
-const GAP = 5;
-
-const TableRow = ({ isLast, name, type, children, indexed, isLoading }: RowProps) => {
-  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-
-  return (
-    <>
-      <GridItem
-        pl={ PADDING }
-        pr={ GAP }
-        pt={ GAP }
-        pb={ isLast ? PADDING : 0 }
-        bgColor={ bgColor }
-        borderBottomLeftRadius={ isLast ? 'md' : 'none' }
-      >
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ name }</Skeleton>
-      </GridItem>
-      <GridItem
-        pr={ GAP }
-        pt={ GAP }
-        pb={ isLast ? PADDING : 0 }
-        bgColor={ bgColor }
-      >
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ type }</Skeleton>
-      </GridItem>
-      { indexed !== undefined && (
-        <GridItem
-          pr={ GAP }
-          pt={ GAP }
-          pb={ isLast ? PADDING : 0 }
-          bgColor={ bgColor }
-        >
-          <Skeleton isLoaded={ !isLoading } display="inline-block">{ indexed ? 'true' : 'false' }</Skeleton>
-        </GridItem>
-      ) }
-      <GridItem
-        pr={ PADDING }
-        pt={ GAP }
-        pb={ isLast ? PADDING : 0 }
-        bgColor={ bgColor }
-        borderBottomRightRadius={ isLast ? 'md' : 'none' }
-      >
-        { children }
-      </GridItem>
-    </>
-  );
-};
-
+import LogDecodedInputDataHeader from './LogDecodedInputDataHeader';
+import LogDecodedInputDataTable from './LogDecodedInputDataTable';
 interface Props {
   data: DecodedInput;
   isLoading?: boolean;
 }
 
 const LogDecodedInputData = ({ data, isLoading }: Props) => {
-  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-  const hasIndexed = data.parameters.some(({ indexed }) => indexed !== undefined);
-
-  const gridTemplateColumns = hasIndexed ?
-    'minmax(80px, auto) minmax(80px, auto) minmax(80px, auto) minmax(0, 1fr)' :
-    'minmax(80px, auto) minmax(80px, auto) minmax(0, 1fr)';
-  const colNumber = hasIndexed ? 4 : 3;
-
   return (
-    <Grid gridTemplateColumns={ gridTemplateColumns } fontSize="sm" lineHeight={ 5 } w="100%">
-      { /* FIRST PART OF BLOCK */ }
-      <GridItem fontWeight={ 600 } pl={{ base: 0, lg: PADDING }} pr={{ base: 0, lg: GAP }} colSpan={{ base: colNumber, lg: undefined }}>
-        <Skeleton isLoaded={ !isLoading }>Method Id</Skeleton>
-      </GridItem>
-      <GridItem colSpan={{ base: colNumber, lg: colNumber - 1 }} pr={{ base: 0, lg: PADDING }} mt={{ base: 2, lg: 0 }}>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ data.method_id }</Skeleton>
-      </GridItem>
-      <GridItem
-        py={ 2 }
-        mt={ 2 }
-        pl={{ base: 0, lg: PADDING }}
-        pr={{ base: 0, lg: GAP }}
-        fontWeight={ 600 }
-        borderTopColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
-        borderTopWidth="1px"
-        colSpan={{ base: colNumber, lg: undefined }}
-      >
-        <Skeleton isLoaded={ !isLoading }>Call</Skeleton>
-      </GridItem>
-      <GridItem
-        py={{ base: 0, lg: 2 }}
-        mt={{ base: 0, lg: 2 }}
-        mb={{ base: 2, lg: 0 }}
-        colSpan={{ base: colNumber, lg: colNumber - 1 }}
-        pr={{ base: 0, lg: PADDING }}
-        borderTopColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
-        borderTopWidth={{ base: '0px', lg: '1px' }}
-        whiteSpace="normal"
-      >
-        <Skeleton isLoaded={ !isLoading } display="inline-block">{ data.method_call }</Skeleton>
-      </GridItem>
-      { /* TABLE INSIDE OF BLOCK */ }
-      { data.parameters.length > 0 && (
-        <>
-          <GridItem
-            pl={ PADDING }
-            pr={ GAP }
-            pt={ PADDING }
-            pb={ 1 }
-            bgColor={ bgColor }
-            fontWeight={ 600 }
-          >
-            <Skeleton isLoaded={ !isLoading } display="inline-block">Name</Skeleton>
-          </GridItem>
-          <GridItem
-            pr={ GAP }
-            pt={ PADDING }
-            pb={ 1 }
-            bgColor={ bgColor }
-            fontWeight={ 600 }
-          >
-            <Skeleton isLoaded={ !isLoading } display="inline-block">Type</Skeleton>
-          </GridItem>
-          { hasIndexed && (
-            <GridItem
-              pr={ GAP }
-              pt={ PADDING }
-              pb={ 1 }
-              bgColor={ bgColor }
-              fontWeight={ 600 }
-            >
-              <Skeleton isLoaded={ !isLoading } display="inline-block">Inde<wbr/>xed?</Skeleton>
-            </GridItem>
-          ) }
-          <GridItem
-            pr={ PADDING }
-            pt={ PADDING }
-            pb={ 1 }
-            bgColor={ bgColor }
-            fontWeight={ 600 }
-          >
-            <Skeleton isLoaded={ !isLoading } display="inline-block">Data</Skeleton>
-          </GridItem>
-        </>
-      ) }
-      { data.parameters.map(({ name, type, value, indexed }, index) => {
-        const content = (() => {
-          if (type === 'address' && typeof value === 'string') {
-            return (
-              <Address justifyContent="space-between">
-                <AddressLink type="address" hash={ value } isLoading={ isLoading }/>
-                <CopyToClipboard text={ value } isLoading={ isLoading }/>
-              </Address>
-            );
-          }
-
-          if (typeof value === 'object') {
-            const text = JSON.stringify(value, undefined, 4);
-            return (
-              <Flex alignItems="flex-start" justifyContent="space-between" whiteSpace="normal" wordBreak="break-all">
-                <Skeleton isLoaded={ !isLoading } display="inline-block">{ text }</Skeleton>
-                <CopyToClipboard text={ text } isLoading={ isLoading }/>
-              </Flex>
-            );
-          }
-
-          return (
-            <Flex alignItems="flex-start" justifyContent="space-between" whiteSpace="normal" wordBreak="break-all">
-              <Skeleton isLoaded={ !isLoading } display="inline-block">{ value }</Skeleton>
-              <CopyToClipboard text={ value } isLoading={ isLoading }/>
-            </Flex>
-          );
-        })();
-
-        return (
-          <TableRow
-            key={ name }
-            name={ name }
-            type={ type }
-            isLast={ index === data.parameters.length - 1 }
-            indexed={ indexed }
-            isLoading={ isLoading }
-          >
-            { content }
-          </TableRow>
-        );
-      }) }
-    </Grid>
+    <>
+      <LogDecodedInputDataHeader methodId={ data.method_id } methodCall={ data.method_call } isLoading={ isLoading }/>
+      { data.parameters.length > 0 && <LogDecodedInputDataTable data={ data.parameters } isLoading={ isLoading }/> }
+    </>
   );
 };
 
-export default LogDecodedInputData;
+export default React.memo(LogDecodedInputData);

ui/shared/logs/LogDecodedInputDataHeader.tsx

+import { Divider, Flex, Skeleton, VStack } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  methodId: string;
+  methodCall: string;
+  isLoading?: boolean;
+}
+
+const Item = ({ label, text, isLoading }: { label: string; text: string; isLoading?: boolean}) => {
+  return (
+    <Flex
+      columnGap={ 5 }
+      rowGap={ 2 }
+      px={{ base: 0, lg: 4 }}
+      flexDir={{ base: 'column', lg: 'row' }}
+      alignItems="flex-start"
+    >
+      <Skeleton fontWeight={ 600 } w={{ base: 'auto', lg: '80px' }} flexShrink={ 0 } isLoaded={ !isLoading }>
+        { label }
+      </Skeleton >
+      <Skeleton isLoaded={ !isLoading }>{ text }</Skeleton>
+    </Flex>
+  );
+};
+
+const LogDecodedInputDataHeader = ({ methodId, methodCall, isLoading }: Props) => {
+  return (
+    <VStack
+      align="flex-start"
+      divider={ <Divider/> }
+      fontSize="sm"
+      lineHeight={ 5 }
+    >
+      <Item label="Method id" text={ methodId } isLoading={ isLoading }/>
+      <Item label="Call" text={ methodCall } isLoading={ isLoading }/>
+    </VStack>
+  );
+};
+
+export default LogDecodedInputDataHeader;

ui/shared/logs/LogDecodedInputDataTable.tsx

+import { Flex, Grid, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { DecodedInput } from 'types/api/decodedInput';
+import type { ArrayElement } from 'types/utils';
+
+import Address from 'ui/shared/address/Address';
+import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+interface Props {
+  data: DecodedInput['parameters'];
+  isLoading?: boolean;
+}
+
+const HeaderItem = ({ children, isLoading }: { children: React.ReactNode; isLoading?: boolean }) => {
+  return (
+    <Skeleton
+      fontWeight={ 600 }
+      pb={ 1 }
+      display="inline-block"
+      width="fit-content"
+      height="fit-content"
+      isLoaded={ !isLoading }
+    >
+      { children }
+    </Skeleton>
+  );
+};
+
+const Row = ({ name, type, indexed, value, isLoading }: ArrayElement<DecodedInput['parameters']> & { isLoading?: boolean }) => {
+  const content = (() => {
+    if (type === 'address' && typeof value === 'string') {
+      return (
+        <Address justifyContent="space-between">
+          <AddressLink type="address" hash={ value } isLoading={ isLoading }/>
+          <CopyToClipboard text={ value } isLoading={ isLoading }/>
+        </Address>
+      );
+    }
+
+    if (typeof value === 'object') {
+      const text = JSON.stringify(value, undefined, 4);
+      return (
+        <Flex alignItems="flex-start" justifyContent="space-between" whiteSpace="normal" wordBreak="break-all">
+          <TruncatedValue value={ text } isLoading={ isLoading }/>
+          <CopyToClipboard text={ text } isLoading={ isLoading }/>
+        </Flex>
+      );
+    }
+
+    return (
+      <Flex alignItems="flex-start" justifyContent="space-between" whiteSpace="normal" wordBreak="break-all">
+        <TruncatedValue value={ value } isLoading={ isLoading }/>
+        <CopyToClipboard text={ value } isLoading={ isLoading }/>
+      </Flex>
+    );
+  })();
+
+  return (
+    <>
+      <TruncatedValue value={ name } isLoading={ isLoading }/>
+      <TruncatedValue value={ type } isLoading={ isLoading }/>
+      { indexed !== undefined && (
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ indexed ? 'true' : 'false' }</Skeleton>
+      ) }
+      <Skeleton isLoaded={ !isLoading } display="inline-block">{ content }</Skeleton>
+    </>
+  );
+};
+
+const LogDecodedInputDataTable = ({ data, isLoading }: Props) => {
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const hasIndexed = data.some(({ indexed }) => indexed !== undefined);
+
+  const gridTemplateColumnsBase = hasIndexed ?
+    '50px 60px 40px minmax(0, 1fr)' :
+    '50px 60px minmax(0, 1fr)';
+  const gridTemplateColumnsLg = hasIndexed ?
+    '80px 80px 80px minmax(0, 1fr)' :
+    '80px 80px minmax(0, 1fr)';
+
+  return (
+    <Grid
+      gridTemplateColumns={{ base: gridTemplateColumnsBase, lg: gridTemplateColumnsLg }}
+      fontSize="sm"
+      lineHeight={ 5 }
+      bgColor={ bgColor }
+      p={ 4 }
+      mt={ 2 }
+      w="100%"
+      columnGap={ 5 }
+      rowGap={ 5 }
+      borderBottomLeftRadius="md"
+      borderBottomRightRadius="md"
+    >
+      <HeaderItem isLoading={ isLoading }>Name</HeaderItem>
+      <HeaderItem isLoading={ isLoading }>Type</HeaderItem>
+      { hasIndexed && <HeaderItem isLoading={ isLoading }>Inde<wbr/>xed?</HeaderItem> }
+      <HeaderItem isLoading={ isLoading }>Data</HeaderItem>
+      { data.map((item) => {
+
+        return <Row key={ item.name } { ...item } isLoading={ isLoading }/>;
+      }) }
+    </Grid>
+  );
+};
+
+export default LogDecodedInputDataTable;

ui/token/TokenDetails.tsx

@@ -13,7 +13,8 @@ import { TOKEN_COUNTERS } from 'stubs/token';
 import type { TokenTabs } from 'ui/pages/Token';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
-import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
 interface Props {
   tokenQuery: UseQueryResult<TokenInfo>;
 }
@@ -120,15 +121,9 @@ const TokenDetails = ({ tokenQuery }: Props) => {
         isLoading={ tokenQuery.isPlaceholderData }
       >
         <Skeleton isLoaded={ !tokenQuery.isPlaceholderData } w="100%" display="flex">
-          <TruncatedTextTooltip label={ totalSupplyValue || '0' }>
-            <Box overflow="hidden" textOverflow="ellipsis" flexShrink={ 0 } maxW="80%" whiteSpace="nowrap">
-              { totalSupplyValue || '0' }
-            </Box>
-          </TruncatedTextTooltip>
+          <TruncatedValue value={ totalSupplyValue || '0' } maxW="80%" flexShrink={ 0 }/>
           <Box flexShrink={ 0 }> </Box>
-          <TruncatedTextTooltip label={ symbol || '' }>
-            <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">{ symbol || '' }</Box>
-          </TruncatedTextTooltip>
+          <TruncatedValue value={ symbol || '' }/>
         </Skeleton>
       </DetailsInfoItem>
       <DetailsInfoItem

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -15,7 +15,7 @@ import Tag from 'ui/shared/chakra/Tag';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
-import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 
 type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean };
 
@@ -92,13 +92,7 @@ const TokenTransferListItem = ({
           <Skeleton isLoaded={ !isLoading } color="text_secondary">
             <span>{ value }</span>
           </Skeleton>
-          { token.symbol && (
-            <TruncatedTextTooltip label={ token.symbol }>
-              <Skeleton isLoaded={ !isLoading } overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
-                { token.symbol }
-              </Skeleton>
-            </TruncatedTextTooltip>
-          ) }
+          { token.symbol && <TruncatedValue isLoading={ isLoading } value={ token.symbol }/> }
         </Flex>
       ) }
       { 'token_id' in total && (token.type === 'ERC-721' || token.type === 'ERC-1155') && (

ui/token/TokenTransfer/TokenTransferTable.tsx

-import { Table, Tbody, Tr, Th, Box } from '@chakra-ui/react';
+import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
@@ -6,7 +6,7 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import { default as Thead } from 'ui/shared/TheadSticky';
-import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 import TokenTransferTableItem from 'ui/token/TokenTransfer/TokenTransferTableItem';
 
 interface Props {
@@ -34,10 +34,8 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
           <Th width="218px" >To</Th>
           { (tokenType === 'ERC-721' || tokenType === 'ERC-1155') && <Th width="20%" isNumeric={ tokenType === 'ERC-721' }>Token ID</Th> }
           { (tokenType === 'ERC-20' || tokenType === 'ERC-1155') && (
-            <Th width="20%" isNumeric whiteSpace="nowrap">
-              <TruncatedTextTooltip label={ `Value ${ token?.symbol }` }>
-                <Box overflow="hidden" textOverflow="ellipsis">Value { token?.symbol }</Box>
-              </TruncatedTextTooltip>
+            <Th width="20%" isNumeric>
+              <TruncatedValue value={ `Value ${ token?.symbol || '' }` } w="100%" verticalAlign="middle"/>
             </Th>
           ) }
         </Tr>

ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx

-import { Box, Grid, GridItem, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Grid, GridItem, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInstance } from 'types/api/token';
@@ -7,7 +7,7 @@ import type { MetadataAttributes } from 'types/client/token';
 import parseMetadata from 'lib/token/parseMetadata';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import LinkExternal from 'ui/shared/LinkExternal';
-import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 
 import TokenInstanceDivider from './TokenInstanceDivider';
 
@@ -35,22 +35,12 @@ const Item = ({ data, isLoading }: ItemProps) => {
           overflow="hidden"
           href={ data.value }
         >
-          <TruncatedTextTooltip label={ data.value }>
-            <Box w="calc(100% - 16px)" overflow="hidden" textOverflow="ellipsis">
-              <span>{ data.value }</span>
-            </Box>
-          </TruncatedTextTooltip>
+          <TruncatedValue value={ data.value } w="calc(100% - 16px)"/>
         </LinkExternal>
       );
     }
 
-    return (
-      <TruncatedTextTooltip label={ data.value }>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" w="100%" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
-          { data.value }
-        </Skeleton>
-      </TruncatedTextTooltip>
-    );
+    return <TruncatedValue value={ data.value } fontSize="sm" w="100%" isLoading={ isLoading }/>;
   })();
 
   return (

ui/tx/TxDetails.tsx

@@ -43,7 +43,7 @@ import LinkInternal from 'ui/shared/LinkInternal';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import RawInputData from 'ui/shared/RawInputData';
 import TextSeparator from 'ui/shared/TextSeparator';
-import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
+import TruncatedValue from 'ui/shared/TruncatedValue';
 import TxStatus from 'ui/shared/TxStatus';
 import Utilization from 'ui/shared/Utilization/Utilization';
 import TxDetailsActions from 'ui/tx/details/TxDetailsActions';
@@ -259,11 +259,7 @@ const TxDetails = () => {
                   <CopyToClipboard text={ toAddress.hash }/>
                 </Flex>
               ) }
-              { toAddress.name && (
-                <TruncatedTextTooltip label={ toAddress.name }>
-                  <chakra.span overflow="hidden" textOverflow="ellipsis">{ toAddress.name }</chakra.span>
-                </TruncatedTextTooltip>
-              ) }
+              { toAddress.name && <TruncatedValue value={ toAddress.name }/> }
               { addressToTags.length > 0 && (
                 <Flex columnGap={ 3 }>
                   { addressToTags }