small fixes and use the component for other tags

ui/pages/PrivateTags.tsx

@@ -19,7 +19,7 @@ const PrivateTags: React.FC = () => {
     <Page>
       <Box h="100%">
         <Heading as="h1" size="lg" marginBottom={ 8 }>Private tags</Heading>
-        <Tabs variant="soft-rounded" colorScheme="blue">
+        <Tabs variant="soft-rounded" colorScheme="blue" isLazy>
           <TabList marginBottom={ 8 }>
             <Tab>Address</Tab>
             <Tab>Transaction</Tab>

ui/privateTags/TransactionTagTable/TransactionTagTableItem.tsx

@@ -33,9 +33,7 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <Tr alignItems="top" key={ item.transaction }>
       <Td>
-        <HStack spacing={ 4 }>
-          <AddressLinkWithTooltip address={ item.transaction }/>
-        </HStack>
+        <AddressLinkWithTooltip address={ item.transaction }/>
       </Td>
       <Td>
         <Tooltip label={ item.tag }>

ui/shared/AddressLinkWithTooltip.tsx

@@ -21,4 +21,4 @@ const AddressLinkWithTooltip = ({ address }: {address: string}) => {
   )
 }
 
-export default AddressLinkWithTooltip;
+export default React.memo(AddressLinkWithTooltip);

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -6,11 +6,11 @@ import {
   Td,
   Switch,
   HStack,
-  Tooltip,
 } from '@chakra-ui/react'
 
 import EditButton from 'ui/shared/EditButton';
 import DeleteButton from 'ui/shared/DeleteButton';
+import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
 import type { TWatchlistItem } from 'data/watchlist';
 
@@ -35,11 +35,11 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     <Tr alignItems="top" key={ item.address }>
       <Td><WatchListAddressItem item={ item }/></Td>
       <Td>
-        <Tooltip label={ item.tag }>
+        <TruncatedTextTooltip label={ item.tag }>
           <Tag variant="gray" lineHeight="24px">
             { item.tag }
           </Tag>
-        </Tooltip>
+        </TruncatedTextTooltip>
       </Td>
       <Td><Switch colorScheme="blue" size="md" isChecked={ item.notification }/></Td>
       <Td>