remove AddressSnippet and Address components

ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx

+import { Box, Skeleton } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
 import type { CustomAbi } from 'types/api/account';
 
-import AddressSnippet from 'ui/shared/AddressSnippet';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
@@ -25,7 +26,16 @@ const CustomAbiListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Prop
 
   return (
     <ListItemMobile>
-      <AddressSnippet address={ item.contract_address } subtitle={ item.name } isLoading={ isLoading }/>
+      <Box maxW="100%">
+        <AddressEntity
+          address={ item.contract_address }
+          fontWeight="600"
+          isLoading={ isLoading }
+        />
+        <Skeleton fontSize="sm" color="text_secondary" mt={ 0.5 } ml={ 8 } display="inline-block" isLoaded={ !isLoading }>
+          <span>{ item.name }</span>
+        </Skeleton>
+      </Box>
       <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick } isLoading={ isLoading }/>
     </ListItemMobile>
   );

ui/customAbi/CustomAbiTable/CustomAbiTableItem.tsx

 import {
   Tr,
   Td,
+  Box,
+  Skeleton,
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
 import type { CustomAbi } from 'types/api/account';
 
-import AddressSnippet from 'ui/shared/AddressSnippet';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
@@ -29,7 +31,16 @@ const CustomAbiTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
   return (
     <Tr alignItems="top" key={ item.id }>
       <Td>
-        <AddressSnippet address={ item.contract_address } subtitle={ item.name } isLoading={ isLoading }/>
+        <Box maxW="100%">
+          <AddressEntity
+            address={ item.contract_address }
+            fontWeight="600"
+            isLoading={ isLoading }
+          />
+          <Skeleton fontSize="sm" color="text_secondary" mt={ 0.5 } ml={ 8 } display="inline-block" isLoaded={ !isLoading }>
+            <span>{ item.name }</span>
+          </Skeleton>
+        </Box>
       </Td>
       <Td>
         <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick } isLoading={ isLoading }/>

ui/privateTags/AddressTagTable/AddressTagListItem.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 
 import type { AddressTag } from 'types/api/account';
 
-import AddressSnippet from 'ui/shared/AddressSnippet';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
@@ -26,7 +26,12 @@ const AddressTagListItem = ({ item, onEditClick, onDeleteClick, isLoading }: Pro
   return (
     <ListItemMobile>
       <Flex alignItems="flex-start" flexDirection="column" maxW="100%">
-        <AddressSnippet address={ item.address } isLoading={ isLoading }/>
+        <AddressEntity
+          address={ item.address }
+          isLoading={ isLoading }
+          fontWeight="600"
+          w="100%"
+        />
         <HStack spacing={ 3 } mt={ 4 }>
           <Text fontSize="sm" fontWeight={ 500 }>Private tag</Text>
           <Skeleton isLoaded={ !isLoading } display="inline-block" borderRadius="sm">

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

@@ -6,8 +6,8 @@ import React, { useCallback } from 'react';
 
 import type { AddressTag } from 'types/api/account';
 
-import AddressSnippet from 'ui/shared/AddressSnippet';
 import Tag from 'ui/shared/chakra/Tag';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
@@ -29,7 +29,12 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick, isLoading }: Pr
   return (
     <Tr alignItems="top" key={ item.id }>
       <Td>
-        <AddressSnippet address={ item.address } isLoading={ isLoading }/>
+        <AddressEntity
+          address={ item.address }
+          isLoading={ isLoading }
+          fontWeight="600"
+          py="2px"
+        />
       </Td>
       <Td whiteSpace="nowrap">
         <Tag isLoading={ isLoading } isTruncated>{ item.name }</Tag>

ui/publicTags/PublicTagTable/PublicTagListItem.tsx

@@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
 
 import type { PublicTag } from 'types/api/account';
 
-import AddressSnippet from 'ui/shared/AddressSnippet';
 import Tag from 'ui/shared/chakra/Tag';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
@@ -28,7 +28,15 @@ const PublicTagListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Prop
     <ListItemMobile>
       <VStack spacing={ 3 } alignItems="flex-start" maxW="100%">
         <VStack spacing={ 4 } alignItems="unset" maxW="100%">
-          { item.addresses_with_info.map((address) => <AddressSnippet key={ address.hash } address={ address } isLoading={ isLoading }/>) }
+          { item.addresses_with_info.map((address) => (
+            <AddressEntity
+              key={ address.hash }
+              address={ address }
+              isLoading={ isLoading }
+              fontWeight="600"
+              w="100%"
+            />
+          )) }
         </VStack>
         <HStack spacing={ 3 }>
           <Text fontSize="sm" fontWeight={ 500 }>Public tags</Text>

ui/publicTags/PublicTagTable/PublicTagTableItem.tsx

@@ -9,8 +9,8 @@ import React, { useCallback } from 'react';
 
 import type { PublicTag } from 'types/api/account';
 
-import AddressSnippet from 'ui/shared/AddressSnippet';
 import Tag from 'ui/shared/chakra/Tag';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
@@ -33,7 +33,15 @@ const PublicTagTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
     <Tr alignItems="top" key={ item.id }>
       <Td>
         <VStack spacing={ 4 } alignItems="unset">
-          { item.addresses_with_info.map((address) => <AddressSnippet key={ address.hash } address={ address } isLoading={ isLoading }/>) }
+          { item.addresses_with_info.map((address) => (
+            <AddressEntity
+              key={ address.hash }
+              address={ address }
+              isLoading={ isLoading }
+              fontWeight="600"
+              py="2px"
+            />
+          )) }
         </VStack>
       </Td>
       <Td>

ui/shared/AddressSnippet.tsx

-import { Box, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-import type { AddressParam } from 'types/api/addressParams';
-
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
-
-interface Props {
-  address: Pick<AddressParam, 'hash' | 'is_contract' | 'implementation_name'>;
-  subtitle?: string;
-  isLoading?: boolean;
-}
-
-// TODO @tom2drum remove this component
-const AddressSnippet = ({ address, subtitle, isLoading }: Props) => {
-  return (
-    <Box maxW="100%">
-      <Address>
-        <AddressIcon address={ address } isLoading={ isLoading }/>
-        <AddressLink type="address" hash={ address.hash } fontWeight="600" ml={ 2 } isLoading={ isLoading }/>
-        <CopyToClipboard text={ address.hash } isLoading={ isLoading }/>
-      </Address>
-      { subtitle && (
-        <Skeleton fontSize="sm" color="text_secondary" mt={ 0.5 } ml={ 8 } display="inline-block" isLoaded={ !isLoading }>
-          <span>{ subtitle }</span>
-        </Skeleton>
-      ) }
-    </Box>
-  );
-};
-
-export default React.memo(AddressSnippet);

ui/shared/address/Address.tsx

-import { Flex, chakra } from '@chakra-ui/react';
-import React from 'react';
-
-interface Props {
-  className?: string;
-  children: React.ReactNode;
-}
-
-// TODO @tom2drum delete this component
-/**
- * @deprecated use `ui/shared/entities/address` instead
- */
-const Address = ({ children, className }: Props) => {
-  return <Flex alignItems="center" overflow="hidden" className={ className }>{ children }</Flex>;
-};
-
-const AddressChakra = chakra(Address);
-
-export default React.memo(AddressChakra);

ui/shared/logs/LogDecodedInputDataTable.tsx

@@ -4,9 +4,8 @@ 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 AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 interface Props {
@@ -33,10 +32,10 @@ const Row = ({ name, type, indexed, value, isLoading }: ArrayElement<DecodedInpu
   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>
+        <AddressEntity
+          address={{ hash: value, name: '', implementation_name: null, is_contract: false, is_verified: false }}
+          isLoading={ isLoading }
+        />
       );
     }
 

ui/shared/logs/LogItem.tsx

@@ -7,9 +7,8 @@ import { route } from 'nextjs-routes';
 
 // import searchIcon from 'icons/search.svg';
 import { space } from 'lib/html-entities';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import LogTopic from 'ui/shared/logs/LogTopic';
 
@@ -54,15 +53,19 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash,
       ) }
       { hasTxInfo ? <RowHeader isLoading={ isLoading }>Transaction</RowHeader> : <RowHeader isLoading={ isLoading }>Address</RowHeader> }
       <GridItem display="flex" alignItems="center">
-        <Address mr={{ base: 9, lg: 0 }}>
-          { !hasTxInfo && <AddressIcon address={ address } mr={ 2 } isLoading={ isLoading }/> }
-          <AddressLink
-            hash={ hasTxInfo ? txHash : address.hash }
-            alias={ hasTxInfo ? undefined : address.name }
-            type={ type === 'address' ? 'transaction' : 'address' }
+        { type === 'address' ? (
+          <TxEntity
+            hash={ txHash }
             isLoading={ isLoading }
+            mr={{ base: 9, lg: 4 }}
           />
-        </Address>
+        ) : (
+          <AddressEntity
+            address={ address }
+            isLoading={ isLoading }
+            mr={{ base: 9, lg: 4 }}
+          />
+        ) }
         { /* api doesn't have find topic feature yet */ }
         { /* <Tooltip label="Find matches topic">
           <Link ml={ 2 } mr={{ base: 9, lg: 0 }} display="inline-flex">

ui/shared/logs/LogTopic.tsx

@@ -4,9 +4,8 @@ import React from 'react';
 
 import hexToAddress from 'lib/hexToAddress';
 import hexToUtf8 from 'lib/hexToUtf8';
-import Address from 'ui/shared/address/Address';
-import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 interface Props {
@@ -51,10 +50,10 @@ const LogTopic = ({ hex, index, isLoading }: Props) => {
 
       case 'address': {
         return (
-          <Address>
-            <AddressLink type="address" hash={ value } isLoading={ isLoading }/>
-            <CopyToClipboard text={ value } isLoading={ isLoading }/>
-          </Address>
+          <AddressEntity
+            address={{ hash: value, name: '', implementation_name: null, is_contract: false, is_verified: false }}
+            isLoading={ isLoading }
+          />
         );
       }
     }

ui/verifiedAddresses/VerifiedAddressesListItem.tsx

@@ -5,8 +5,8 @@ import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account';
 
 import editIcon from 'icons/edit.svg';
 import dayjs from 'lib/date/dayjs';
-import AddressSnippet from 'ui/shared/AddressSnippet';
 import Icon from 'ui/shared/chakra/Icon';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
 import VerifiedAddressesStatus from './VerifiedAddressesStatus';
@@ -69,8 +69,12 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
   return (
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py="3px">
-        <AddressSnippet address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }} isLoading={ isLoading }/>
+      <ListItemMobileGrid.Value>
+        <AddressEntity
+          address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}
+          isLoading={ isLoading }
+          w="100%"
+        />
       </ListItemMobileGrid.Value>
 
       { item.metadata.tokenName && (

ui/verifiedAddresses/VerifiedAddressesTableItem.tsx

@@ -5,8 +5,8 @@ import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account';
 
 import editIcon from 'icons/edit.svg';
 import dayjs from 'lib/date/dayjs';
-import AddressSnippet from 'ui/shared/AddressSnippet';
 import Icon from 'ui/shared/chakra/Icon';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 import VerifiedAddressesStatus from './VerifiedAddressesStatus';
 import VerifiedAddressesTokenSnippet from './VerifiedAddressesTokenSnippet';
@@ -54,7 +54,11 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
   return (
     <Tr>
       <Td>
-        <AddressSnippet address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }} isLoading={ isLoading }/>
+        <AddressEntity
+          address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}
+          isLoading={ isLoading }
+          fontWeight="600"
+        />
       </Td>
       <Td fontSize="sm" verticalAlign="middle" pr={ 1 }>
         { tokenInfo }

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -9,9 +9,9 @@ import TokensIcon from 'icons/tokens.svg';
 import WalletIcon from 'icons/wallet.svg';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { nbsp } from 'lib/html-entities';
-import AddressSnippet from 'ui/shared/AddressSnippet';
 import Icon from 'ui/shared/chakra/Icon';
 import CurrencyValue from 'ui/shared/CurrencyValue';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isLoading?: boolean }) => {
@@ -26,7 +26,12 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL
 
   return (
     <VStack spacing={ 2 } align="stretch" fontWeight={ 500 }>
-      <AddressSnippet address={ item.address } isLoading={ isLoading }/>
+      <AddressEntity
+        address={ item.address }
+        isLoading={ isLoading }
+        fontWeight="600"
+        py="2px"
+      />
       <Flex fontSize="sm" pl={ infoItemsPaddingLeft } flexWrap="wrap" alignItems="center" rowGap={ 1 }>
         <TokenLogo
           data={ nativeTokenData }