some fixes and tests

lib/shortenString.ts

-export default function shortenString(string: string | null, charNumber = 8) {
+export default function shortenString(string: string | null, charNumber: number | undefined = 8) {
   if (!string) {
     return '';
   }
 
-  if (string.length <= charNumber - 1) {
+  if (string.length <= charNumber) {
     return string;
   }
 

ui/address/internals/AddressIntTxsListItem.tsx

@@ -45,7 +45,7 @@ const TxInternalsListItem = ({
           hash={ txnHash }
           isLoading={ isLoading }
           fontWeight={ 700 }
-          truncation="constant"
+          truncation="constant_long"
         />
         <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
           <span>{ dayjs(timestamp).fromNow() }</span>

ui/address/internals/AddressIntTxsTableItem.tsx

@@ -43,6 +43,7 @@ const AddressIntTxsTableItem = ({
             isLoading={ isLoading }
             fontWeight={ 700 }
             noIcon
+            truncation="constant_long"
           />
           { timestamp && (
             <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">

ui/addressVerification/steps/AddressVerificationStepSignature.tsx

@@ -157,7 +157,7 @@ const AddressVerificationStepSignature = ({ address, signingMessage, contractCre
       }
       case 'INVALID_SIGNER_ERROR': {
         const signer = shortenString(formState.errors.root.message || '');
-        const expectedSigners = [ contractCreator, contractOwner ].filter(Boolean).map(shortenString).join(', ');
+        const expectedSigners = [ contractCreator, contractOwner ].filter(Boolean).map(s => shortenString(s)).join(', ');
         return (
           <Box>
             <span>This address </span>

ui/home/LatestBlocksItem.tsx

@@ -74,6 +74,7 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => {
               isLoading={ isLoading }
               noIcon
               noCopy
+              truncation="constant"
             />
           </>
         ) }

ui/home/LatestDepositsItem.tsx

@@ -46,6 +46,7 @@ const LatestDepositsItem = ({ item, isLoading }: Props) => {
       hash={ item.l1_tx_hash }
       fontSize="sm"
       lineHeight={ 5 }
+      truncation={ isMobile ? 'constant_long' : 'dynamic' }
     />
   );
 
@@ -55,6 +56,7 @@ const LatestDepositsItem = ({ item, isLoading }: Props) => {
       hash={ item.l2_tx_hash }
       fontSize="sm"
       lineHeight={ 5 }
+      truncation={ isMobile ? 'constant_long' : 'dynamic' }
     />
   );
 

ui/home/LatestTxsItemMobile.tsx

@@ -58,7 +58,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           isLoading={ isLoading }
           hash={ tx.hash }
           fontWeight="700"
-          truncation="constant"
+          truncation="constant_long"
         />
         { tx.timestamp && (
           <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm" ml={ 3 }>

ui/nameDomain/history/NameDomainHistoryListItem.tsx

@@ -18,7 +18,7 @@ const NameDomainHistoryListItem = ({ isLoading, transaction_hash: transactionHas
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Txn hash</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TxEntity hash={ transactionHash } isLoading={ isLoading } fontWeight={ 500 }/>
+        <TxEntity hash={ transactionHash } isLoading={ isLoading } fontWeight={ 500 } truncation="constant_long"/>
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>

ui/nameDomain/history/NameDomainHistoryTableItem.tsx

@@ -17,7 +17,13 @@ const NameDomainHistoryTableItem = ({ isLoading, transaction_hash: transactionHa
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <TxEntity hash={ transactionHash } isLoading={ isLoading } fontWeight={ 700 }/>
+        <TxEntity
+          hash={ transactionHash }
+          isLoading={ isLoading }
+          fontWeight={ 700 }
+          noIcon
+          truncation="constant_long"
+        />
       </Td>
       <Td pl={ 9 } verticalAlign="middle">
         <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -67,7 +67,7 @@ const TokenTransferListItem = ({
           <TxEntity
             isLoading={ isLoading }
             hash={ txHash }
-            truncation="constant"
+            truncation="constant_long"
             fontWeight="700"
           />
           { timestamp && (

ui/shared/TokenTransfer/TokenTransferTable.tsx

@@ -38,11 +38,11 @@ const TokenTransferTable = ({
         <Thead top={ top }>
           <Tr>
             { showTxInfo && <Th width="44px"></Th> }
-            <Th width="185px">Token</Th>
+            <Th width="200px">Token</Th>
             <Th width="160px">Token ID</Th>
-            { showTxInfo && <Th width="20%">Txn hash</Th> }
-            <Th width="50%">From/To</Th>
-            <Th width="30%" isNumeric>Value</Th>
+            { showTxInfo && <Th width="200px">Txn hash</Th> }
+            <Th width="60%">From/To</Th>
+            <Th width="40%" isNumeric>Value</Th>
           </Tr>
         </Thead>
         <Tbody>

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -75,6 +75,7 @@ const TokenTransferTableItem = ({
             fontWeight={ 600 }
             noIcon
             mt="7px"
+            truncation="constant_long"
           />
           { timestamp && (
             <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" mt="10px" display="inline-block">

ui/shared/address/AddressFromTo.tsx

 import type { ThemeTypings } from '@chakra-ui/react';
-import { Flex, chakra, useBreakpointValue } from '@chakra-ui/react';
+import { Flex, Grid, chakra, useBreakpointValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressParam } from 'types/api/addressParams';
@@ -55,6 +55,7 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
             truncation="constant"
             maxW="calc(100% - 28px)"
             w="min-content"
+
           />
         </Flex>
         { to && (
@@ -76,10 +77,10 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
   }
 
   const isOutgoing = current === from.hash;
-  const iconSizeWithMargins = (5 + (isOutgoing ? 4 : 2) + 3) * 4;
+  const iconSize = 20;
 
   return (
-    <Flex className={ className } alignItems="center">
+    <Grid className={ className } alignItems="center" gridTemplateColumns={ `fit-content(100%) ${ iconSize }px fit-content(100%)` }>
       <Entity
         address={ from }
         isLoading={ isLoading }
@@ -88,7 +89,6 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
         noIcon={ noIcon }
         tokenHash={ tokenHash }
         truncation="constant"
-        maxW={ `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
         mr={ isOutgoing ? 4 : 2 }
       />
       <AddressFromToIcon
@@ -104,11 +104,10 @@ const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading
           noIcon={ noIcon }
           tokenHash={ tokenHash }
           truncation="constant"
-          maxW={ `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
           ml={ 3 }
         />
       ) }
-    </Flex>
+    </Grid>
   );
 };
 

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -40,7 +40,7 @@ const TokenTransferListItem = ({
         <TxEntity
           isLoading={ isLoading }
           hash={ txHash }
-          truncation="constant"
+          truncation="constant_long"
           fontWeight="700"
         />
         { timestamp && (

ui/token/TokenTransfer/TokenTransferTable.tsx

@@ -26,15 +26,17 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
 
   return (
     <AddressHighlightProvider>
-      <Table variant="simple" size="sm">
+      <Table variant="simple" size="sm" minW="950px">
         <Thead top={ top }>
           <Tr>
-            <Th width={ tokenType === 'ERC-1155' ? '50%' : '75%' }>Txn hash</Th>
-            <Th width="164px">Method</Th>
-            <Th width={{ lg: '200px', xl: '420px' }}>From/To</Th>
-            { (tokenType === 'ERC-721' || tokenType === 'ERC-1155') && <Th width="25%" isNumeric={ tokenType === 'ERC-721' }>Token ID</Th> }
+            <Th width="280px">Txn hash</Th>
+            <Th width="200px">Method</Th>
+            <Th width={{ lg: '224px', xl: '420px' }}>From/To</Th>
+            { (tokenType === 'ERC-721' || tokenType === 'ERC-1155') &&
+              <Th width={ tokenType === 'ERC-1155' ? '50%' : '100%' }>Token ID</Th>
+            }
             { (tokenType === 'ERC-20' || tokenType === 'ERC-1155') && (
-              <Th width="25%" isNumeric>
+              <Th width={ tokenType === 'ERC-1155' ? '50%' : '100%' } isNumeric>
                 <TruncatedValue value={ `Value ${ token?.symbol || '' }` } w="100%" verticalAlign="middle"/>
               </Th>
             ) }

ui/token/TokenTransfer/TokenTransferTableItem.tsx

-import { Tr, Td, Grid, Skeleton, Box } from '@chakra-ui/react';
+import { Tr, Td, Flex, Skeleton, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
@@ -35,12 +35,13 @@ const TokenTransferTableItem = ({
   return (
     <Tr alignItems="top">
       <Td>
-        <Grid alignItems="center" gridTemplateColumns="auto 130px" width="fit-content" py="7px">
+        <Flex alignItems="center" py="7px">
           <TxEntity
             hash={ txHash }
             isLoading={ isLoading }
             fontWeight={ 600 }
             noIcon
+            truncation="constant_long"
           />
           { timestamp && (
             <Skeleton isLoaded={ !isLoading } display="inline-block" color="gray.500" fontWeight="400" ml="10px">
@@ -49,7 +50,7 @@ const TokenTransferTableItem = ({
               </span>
             </Skeleton>
           ) }
-        </Grid>
+        </Flex>
       </Td>
       <Td>
         { method ? (

ui/tokens/TokensTableItem.tsx

@@ -87,7 +87,6 @@ const TokensTableItem = ({
                 noIcon
                 fontSize="sm"
                 fontWeight={ 500 }
-                truncation="constant"
               />
               <AddressAddToWallet
                 token={ token }

ui/tx/details/TxDetailsTokenTransfer.tsx

@@ -68,7 +68,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
   return (
     <Flex
       alignItems="flex-start"
-      flexWrap={{ base: 'wrap', lg: 'nowrap' }}
+      flexWrap="wrap"
       columnGap={ 2 }
       rowGap={ 3 }
       flexDir="row"
@@ -81,9 +81,7 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
         noIcon
         fontWeight="500"
       />
-      <Flex flexDir="column" rowGap={ 5 } w="100%" overflow="hidden" fontWeight={ 500 }>
-        { content }
-      </Flex>
+      { content }
     </Flex>
   );
 };

ui/txs/TxsTable.tsx

@@ -49,11 +49,11 @@ const TxsTable = ({
         <TheadSticky top={ top }>
           <Tr>
             <Th width="54px"></Th>
-            <Th width="22%">Txn hash</Th>
+            <Th width="180px">Txn hash</Th>
             <Th width="160px">Type</Th>
             <Th width="20%">Method</Th>
             { showBlockInfo && <Th width="18%">Block</Th> }
-            <Th width={{ base: '224px', xl: '360px' }}>From/To</Th>
+            <Th width="224px">From/To</Th>
             { !config.UI.views.tx.hiddenFields?.value && (
               <Th width="20%" isNumeric>
                 <Link onClick={ sort('value') } display="flex" justifyContent="end">

ui/txs/TxsTableItem.tsx

@@ -55,7 +55,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
             fontWeight={ 700 }
             noIcon
             maxW="100%"
-            truncation="constant"
+            truncation="constant_long"
           />
           { tx.timestamp && <Skeleton color="text_secondary" fontWeight="400" isLoaded={ !isLoading }><span>{ timeAgo }</span></Skeleton> }
         </VStack>
@@ -95,7 +95,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
           current={ currentAddress }
           isLoading={ isLoading }
           mt="2px"
-          mode={{ lg: 'compact', xl: 'long' }}
+          mode="compact"
         />
       </Td>
       { !config.UI.views.tx.hiddenFields?.value && (

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx

@@ -53,6 +53,7 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
           hash={ item.l2_tx_hash }
           fontSize="sm"
           lineHeight={ 5 }
+          truncation="constant_long"
         />
       </ListItemMobileGrid.Value>
 
@@ -83,6 +84,7 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
               hash={ item.l1_tx_hash }
               fontSize="sm"
               lineHeight={ 5 }
+              truncation="constant_long"
             />
           </ListItemMobileGrid.Value>
         </>