remove Address component, pt.1

ui/address/contract/ContractCode.tsx

@@ -12,10 +12,8 @@ import dayjs from 'lib/date/dayjs';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import * as stubs from 'stubs/contract';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
@@ -171,10 +169,12 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
         { !data?.is_verified && data?.verified_twin_address_hash && !data?.minimal_proxy_address_hash && (
           <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
             <span>Contract is not verified. However, we found a verified contract with the same bytecode in Blockscout DB </span>
-            <Address>
-              <AddressIcon address={{ hash: data.verified_twin_address_hash, is_contract: true, implementation_name: null }}/>
-              <AddressLink type="address" hash={ data.verified_twin_address_hash } truncation="constant" ml={ 2 }/>
-            </Address>
+            <AddressEntity
+              address={{ hash: data.verified_twin_address_hash, is_contract: true, implementation_name: null }}
+              truncation="constant"
+              fontSize="sm"
+              fontWeight="500"
+            />
             <chakra.span mt={ 1 }>All functions displayed below are from ABI of that contract. In order to verify current contract, proceed with </chakra.span>
             <LinkInternal href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash || '' } }) }>
               Verify & Publish
@@ -185,10 +185,12 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
         { data?.minimal_proxy_address_hash && (
           <Alert status="warning" flexWrap="wrap" whiteSpace="pre-wrap">
             <span>Minimal Proxy Contract for </span>
-            <Address>
-              <AddressIcon address={{ hash: data.minimal_proxy_address_hash, is_contract: true, implementation_name: null }}/>
-              <AddressLink type="address" hash={ data.minimal_proxy_address_hash } truncation="constant" ml={ 2 }/>
-            </Address>
+            <AddressEntity
+              address={{ hash: data.minimal_proxy_address_hash, is_contract: true, implementation_name: null }}
+              truncation="constant"
+              fontSize="sm"
+              fontWeight="500"
+            />
             <span>. </span>
             <Box>
               <Link href="https://eips.ethereum.org/EIPS/eip-1167">EIP-1167</Link>

ui/address/contract/ContractExternalLibraries.tsx

@@ -24,10 +24,7 @@ import arrowIcon from 'icons/arrows/east-mini.svg';
 import iconWarning from 'icons/status/warning.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { apos } 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 CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 interface Props {
   className?: string;
@@ -38,11 +35,13 @@ const Item = (data: SmartContractExternalLibrary) => {
   return (
     <Flex flexDir="column" py={ 2 } w="100%" rowGap={ 1 }>
       <Box>{ data.name }</Box>
-      <Address>
-        <AddressIcon address={{ hash: data.address_hash, is_contract: true, implementation_name: null }}/>
-        <AddressLink hash={ data.address_hash } type="address" ml={ 2 } fontWeight={ 500 } fontSize="sm" target="_blank" query={{ tab: 'contract' }}/>
-        <CopyToClipboard text={ data.address_hash }/>
-      </Address>
+      <AddressEntity
+        address={{ hash: data.address_hash, is_contract: true, implementation_name: null }}
+        query={{ tab: 'contract' }}
+        fontSize="sm"
+        fontWeight="500"
+        target="_blank"
+      />
     </Flex>
   );
 };

ui/address/contract/ContractImplementationAddress.tsx

+import { Flex } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
 import type { Address as TAddress } from 'types/api/address';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
-import Address from 'ui/shared/address/Address';
-import AddressLink from 'ui/shared/address/AddressLink';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 interface Props {
   hash: string | undefined;
@@ -22,10 +22,10 @@ const ContractImplementationAddress = ({ hash }: Props) => {
   }
 
   return (
-    <Address whiteSpace="pre-wrap" flexWrap="wrap" mb={ 6 }>
-      <span>Implementation address: </span>
-      <AddressLink type="address" hash={ data.implementation_address }/>
-    </Address>
+    <Flex mb={ 6 } flexWrap="wrap" columnGap={ 2 }>
+      <span>Implementation address:</span>
+      <AddressEntity address={{ hash: data.implementation_address, is_contract: true }} noIcon noCopy/>
+    </Flex>
   );
 };
 

ui/address/contract/ContractMethodConstant.tsx

@@ -7,9 +7,7 @@ import type { SmartContractMethodOutput } from 'types/api/contract';
 
 import config from 'configs/app';
 import { WEI } from 'lib/consts';
-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';
 
 function castValueToString(value: number | string | boolean | bigint | undefined): string {
   switch (typeof value) {
@@ -49,10 +47,10 @@ const ContractMethodStatic = ({ data }: Props) => {
   const content = (() => {
     if (typeof data.value === 'string' && data.type === 'address' && data.value) {
       return (
-        <Address>
-          <AddressLink type="address" hash={ data.value }/>
-          <CopyToClipboard text={ data.value }/>
-        </Address>
+        <AddressEntity
+          address={{ hash: data.value }}
+          noIcon
+        />
       );
     }
 

ui/addresses/AddressesListItem.tsx

@@ -5,11 +5,8 @@ import React from 'react';
 import type { AddressesItem } from 'types/api/addresses';
 
 import config from 'configs/app';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Tag from 'ui/shared/chakra/Tag';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 
 type Props = {
@@ -31,19 +28,12 @@ const AddressesListItem = ({
   return (
     <ListItemMobile rowGap={ 3 }>
       <Flex alignItems="center" justifyContent="space-between" w="100%">
-        <Address maxW="100%" mr={ 8 }>
-          <AddressIcon address={ item } mr={ 2 } isLoading={ isLoading }/>
-          <AddressLink
-            fontWeight={ 700 }
-            flexGrow={ 1 }
-            w="calc(100% - 32px)"
-            hash={ item.hash }
-            alias={ item.name }
-            type="address"
-            isLoading={ isLoading }
-          />
-          <CopyToClipboard text={ item.hash } isLoading={ isLoading }/>
-        </Address>
+        <AddressEntity
+          address={ item }
+          isLoading={ isLoading }
+          fontWeight={ 700 }
+          mr={ 2 }
+        />
         <Skeleton isLoaded={ !isLoading } fontSize="sm" ml="auto" minW={ 6 } color="text_secondary">
           <span>{ index }</span>
         </Skeleton>

ui/addresses/AddressesTableItem.tsx

@@ -5,11 +5,8 @@ import React from 'react';
 import type { AddressesItem } from 'types/api/addresses';
 
 import config from 'configs/app';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Tag from 'ui/shared/chakra/Tag';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 type Props = {
   item: AddressesItem;
@@ -37,20 +34,12 @@ const AddressesTableItem = ({
           { index }
         </Skeleton>
       </Td>
-      <Td>
-        <Address display="inline-flex" maxW="100%">
-          <AddressIcon address={ item } mr={ 2 } isLoading={ isLoading }/>
-          <AddressLink
-            fontWeight={ 700 }
-            flexGrow={ 1 }
-            w="calc(100% - 32px)"
-            hash={ item.hash }
-            alias={ item.name }
-            type="address"
-            isLoading={ isLoading }
-          />
-          <CopyToClipboard text={ item.hash } isLoading={ isLoading }/>
-        </Address>
+      <Td verticalAlign="middle">
+        <AddressEntity
+          address={ item }
+          isLoading={ isLoading }
+          fontWeight={ 700 }
+        />
       </Td>
       <Td pl={ 10 }>
         { item.public_tags && item.public_tags.length ? item.public_tags.map(tag => (

ui/home/LatestTxsItem.tsx

@@ -14,10 +14,8 @@ import config from 'configs/app';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Icon from 'ui/shared/chakra/Icon';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/TxStatus';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
@@ -83,31 +81,20 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
             isLoading={ isLoading }
           />
           <Box overflow="hidden" ml={ 1 }>
-            <Address mb={ 2 }>
-              <AddressIcon address={ tx.from } isLoading={ isLoading }/>
-              <AddressLink
-                type="address"
-                hash={ tx.from.hash }
-                alias={ tx.from.name }
-                fontWeight="500"
-                ml={ 2 }
-                fontSize="sm"
+            <AddressEntity
+              isLoading={ isLoading }
+              address={ tx.from }
+              fontSize="sm"
+              fontWeight="500"
+              mb={ 2 }
+            />
+            { dataTo && (
+              <AddressEntity
                 isLoading={ isLoading }
+                address={ dataTo }
+                fontSize="sm"
+                fontWeight="500"
               />
-            </Address>
-            { dataTo && (
-              <Address>
-                <AddressIcon address={ dataTo } isLoading={ isLoading }/>
-                <AddressLink
-                  type="address"
-                  hash={ dataTo.hash }
-                  alias={ dataTo.name }
-                  fontWeight="500"
-                  ml={ 2 }
-                  fontSize="sm"
-                  isLoading={ isLoading }
-                />
-              </Address>
             ) }
           </Box>
         </Grid>

ui/home/LatestTxsItemMobile.tsx

@@ -13,10 +13,8 @@ import config from 'configs/app';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Icon from 'ui/shared/chakra/Icon';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/TxStatus';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
@@ -67,19 +65,14 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
         ) }
       </Flex>
       <Flex alignItems="center" mb={ 3 }>
-        <Address mr={ 2 }>
-          <AddressIcon address={ tx.from } isLoading={ isLoading }/>
-          <AddressLink
-            type="address"
-            hash={ tx.from.hash }
-            alias={ tx.from.name }
-            fontWeight="500"
-            ml={ 2 }
-            truncation="constant"
-            fontSize="sm"
-            isLoading={ isLoading }
-          />
-        </Address>
+        <AddressEntity
+          isLoading={ isLoading }
+          address={ tx.from }
+          truncation="constant"
+          fontSize="sm"
+          fontWeight="500"
+          mr={ 2 }
+        />
         <Icon
           as={ rightArrowIcon }
           boxSize={ 6 }
@@ -87,19 +80,13 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           isLoading={ isLoading }
         />
         { dataTo && (
-          <Address ml={ 2 }>
-            <AddressIcon address={ dataTo } isLoading={ isLoading }/>
-            <AddressLink
-              type="address"
-              hash={ dataTo.hash }
-              alias={ dataTo.name }
-              fontWeight="500"
-              ml={ 2 }
-              truncation="constant"
-              fontSize="sm"
-              isLoading={ isLoading }
-            />
-          </Address>
+          <AddressEntity
+            isLoading={ isLoading }
+            address={ dataTo }
+            truncation="constant"
+            fontSize="sm"
+            fontWeight="500"
+          />
         ) }
       </Flex>
       <Skeleton isLoaded={ !isLoading } mb={ 2 } fontSize="sm" w="fit-content">

ui/pages/ContractVerification.tsx

-import { Text } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -9,12 +8,9 @@ import { useAppContext } from 'lib/contexts/app';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import ContractVerificationForm from 'ui/contractVerification/ContractVerificationForm';
 import { isValidVerificationMethod, sortVerificationMethods } from 'ui/contractVerification/utils';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
 import ContentLoader from 'ui/shared/ContentLoader';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 const ContractVerification = () => {
@@ -100,15 +96,14 @@ const ContractVerification = () => {
         title="New smart contract verification"
         backLink={ backLink }
       />
-      { hash && (
-        <Address mb={ 12 }>
-          <AddressIcon address={{ hash, is_contract: true, implementation_name: null }} flexShrink={ 0 }/>
-          <Text fontFamily="heading" ml={ 2 } fontWeight={ 500 } fontSize="lg" w={{ base: '100%', lg: 'auto' }} whiteSpace="nowrap" overflow="hidden">
-            <HashStringShortenDynamic hash={ hash }/>
-          </Text>
-          <CopyToClipboard text={ hash }/>
-        </Address>
-      ) }
+      <AddressEntity
+        address={{ hash, is_contract: true, implementation_name: null }}
+        noLink
+        fontFamily="heading"
+        fontSize="lg"
+        fontWeight={ 500 }
+        mb={ 12 }
+      />
       { content }
     </>
   );

ui/pages/CsvExport.tsx

@@ -8,14 +8,11 @@ import type { CsvExportParams } from 'types/client/address';
 import type { ResourceName } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
 import CsvExportForm from 'ui/csvExport/CsvExportForm';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 interface ExportTypeEntity {
@@ -60,7 +57,6 @@ const isCorrectExportType = (type: string): type is CsvExportParams['type'] => O
 
 const CsvExport = () => {
   const router = useRouter();
-  const isMobile = useIsMobile();
   const appProps = useAppContext();
 
   const addressHash = router.query.address?.toString() || '';
@@ -133,10 +129,10 @@ const CsvExport = () => {
       />
       <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
         <span>Export { EXPORT_TYPES[exportType].text } for address </span>
-        <Address>
-          <AddressIcon address={{ hash: addressHash, is_contract: true, implementation_name: null }}/>
-          <AddressLink hash={ addressHash } type="address" ml={ 2 } truncation={ isMobile ? 'constant' : 'dynamic' }/>
-        </Address>
+        <AddressEntity
+          address={{ hash: addressHash, is_contract: true, implementation_name: null }}
+          noCopy
+        />
         <span>{ nbsp }</span>
         { filterType && filterValue && <span>with applied filter by { filterType } ({ filterValue }) </span> }
         <span>to CSV file. </span>

ui/pages/Sol2Uml.tsx

@@ -3,16 +3,12 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import { useAppContext } from 'lib/contexts/app';
-import useIsMobile from 'lib/hooks/useIsMobile';
-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 PageTitle from 'ui/shared/Page/PageTitle';
 import Sol2UmlDiagram from 'ui/sol2uml/Sol2UmlDiagram';
 
 const Sol2Uml = () => {
   const router = useRouter();
-  const isMobile = useIsMobile();
   const appProps = useAppContext();
 
   const addressHash = router.query.address?.toString() || '';
@@ -36,12 +32,11 @@ const Sol2Uml = () => {
         title="Solidity UML diagram"
         backLink={ backLink }
       />
-      <Flex mb={ 10 }>
+      <Flex mb={ 10 } flexWrap="wrap" columnGap={ 3 }>
         <span>For contract</span>
-        <Address ml={ 3 }>
-          <AddressIcon address={{ hash: addressHash, is_contract: true, implementation_name: null }}/>
-          <AddressLink hash={ addressHash } type="address" ml={ 2 } truncation={ isMobile ? 'constant' : 'dynamic' }/>
-        </Address>
+        <AddressEntity
+          address={{ hash: addressHash, is_contract: true, implementation_name: null }}
+        />
       </Flex>
       <Sol2UmlDiagram addressHash={ addressHash }/>
     </>

ui/searchResults/SearchResultListItem.tsx

@@ -11,9 +11,7 @@ import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
 import * as mixpanel from 'lib/mixpanel/index';
 import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
+import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
@@ -76,14 +74,31 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
       case 'contract':
       case 'address': {
         const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
+        const address = {
+          hash: data.address,
+          is_contract: data.type === 'contract',
+          is_verified: data.is_smart_contract_verified,
+          name: null,
+          implementation_name: null,
+        };
+
         return (
-          <Address>
-            <AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
-            <Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden">
-              <AddressLink type="address" hash={ data.address } fontWeight={ 700 } display="block" w="100%" onClick={ handleLinkClick }/>
-            </Box>
-            { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
-          </Address>
+          <AddressEntity.Container>
+            <AddressEntity.Icon address={ address }/>
+            <AddressEntity.Link
+              address={ address }
+              onClick={ handleLinkClick }
+            >
+              <AddressEntity.Content
+                asProp={ shouldHighlightHash ? 'mark' : 'span' }
+                address={ address }
+                fontSize="sm"
+                lineHeight={ 5 }
+                fontWeight={ 700 }
+              />
+            </AddressEntity.Link>
+            <AddressEntity.Copy address={ address }/>
+          </AddressEntity.Container>
         );
       }
 

ui/searchResults/SearchResultTableItem.tsx

@@ -11,9 +11,7 @@ import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
 import * as mixpanel from 'lib/mixpanel/index';
 import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
+import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
@@ -95,25 +93,33 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
       case 'address': {
         if (data.name) {
           const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
+          const address = {
+            hash: data.address,
+            is_contract: data.type === 'contract',
+            is_verified: data.is_smart_contract_verified,
+            name: null,
+            implementation_name: null,
+          };
 
           return (
             <>
               <Td fontSize="sm">
-                <Flex alignItems="center" overflow="hidden">
-                  <AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
-                  <LinkInternal
-                    href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) }
-                    fontWeight={ 700 }
-                    overflow="hidden"
-                    whiteSpace="nowrap"
+                <AddressEntity.Container>
+                  <AddressEntity.Icon address={ address }/>
+                  <AddressEntity.Link
+                    address={ address }
                     onClick={ handleLinkClick }
                   >
-                    <Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
-                      <HashStringShortenDynamic hash={ data.address }/>
-                    </Box>
-                  </LinkInternal>
-                  { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
-                </Flex>
+                    <AddressEntity.Content
+                      asProp={ shouldHighlightHash ? 'mark' : 'span' }
+                      address={ address }
+                      fontSize="sm"
+                      lineHeight={ 5 }
+                      fontWeight={ 700 }
+                    />
+                  </AddressEntity.Link>
+                  <AddressEntity.Copy address={ address }/>
+                </AddressEntity.Container>
               </Td>
               <Td colSpan={ 2 } fontSize="sm" verticalAlign="middle">
                 <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? data.name : highlightText(data.name, searchTerm) }}/>
@@ -122,15 +128,32 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
           );
         }
 
+        const address = {
+          hash: data.address,
+          is_contract: data.type === 'contract',
+          is_verified: data.is_smart_contract_verified,
+          name: null,
+          implementation_name: null,
+        };
+
         return (
           <Td colSpan={ 3 } fontSize="sm">
-            <Address>
-              <AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
-              <mark>
-                <AddressLink hash={ data.address } type="address" fontWeight={ 700 } onClick={ handleLinkClick }/>
-              </mark>
-              { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
-            </Address>
+            <AddressEntity.Container>
+              <AddressEntity.Icon address={ address }/>
+              <AddressEntity.Link
+                address={ address }
+                onClick={ handleLinkClick }
+              >
+                <AddressEntity.Content
+                  asProp="mark"
+                  address={ address }
+                  fontSize="sm"
+                  lineHeight={ 5 }
+                  fontWeight={ 700 }
+                />
+              </AddressEntity.Link>
+              <AddressEntity.Copy address={ address }/>
+            </AddressEntity.Container>
           </Td>
         );
       }

ui/shared/AddressSnippet.tsx

@@ -14,6 +14,7 @@ interface Props {
   isLoading?: boolean;
 }
 
+// TODO @tom2drum remove this component
 const AddressSnippet = ({ address, subtitle, isLoading }: Props) => {
   return (
     <Box maxW="100%">

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -6,12 +6,9 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import InOutTag from 'ui/shared/InOutTag';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -80,11 +77,14 @@ const TokenTransferListItem = ({
         </Flex>
       ) }
       <Flex w="100%" columnGap={ 3 }>
-        <Address width={ addressWidth } flexShrink={ 0 }>
-          <AddressIcon address={ from } isLoading={ isLoading }/>
-          <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } isDisabled={ baseAddress === from.hash } isLoading={ isLoading }/>
-          { baseAddress !== from.hash && <CopyToClipboard text={ from.hash } isLoading={ isLoading }/> }
-        </Address>
+        <AddressEntity
+          address={ from }
+          isLoading={ isLoading }
+          noLink={ baseAddress === from.hash }
+          noCopy={ baseAddress === from.hash }
+          flexShrink={ 0 }
+          width={ addressWidth }
+        />
         { baseAddress ? (
           <InOutTag
             isIn={ baseAddress === to.hash }
@@ -97,11 +97,14 @@ const TokenTransferListItem = ({
         ) :
           <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading } flexShrink={ 0 }/>
         }
-        <Address width={ addressWidth } flexShrink={ 0 }>
-          <AddressIcon address={ to } isLoading={ isLoading }/>
-          <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ to.hash } isDisabled={ baseAddress === to.hash } isLoading={ isLoading }/>
-          { baseAddress !== to.hash && <CopyToClipboard text={ to.hash } isLoading={ isLoading }/> }
-        </Address>
+        <AddressEntity
+          address={ to }
+          isLoading={ isLoading }
+          noLink={ baseAddress === to.hash }
+          noCopy={ baseAddress === to.hash }
+          flexShrink={ 0 }
+          width={ addressWidth }
+        />
       </Flex>
       { value && (
         <Flex columnGap={ 2 } w="100%">

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -5,11 +5,8 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Tag from 'ui/shared/chakra/Tag';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import InOutTag from 'ui/shared/InOutTag';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
@@ -75,19 +72,14 @@ const TokenTransferTableItem = ({
         </Td>
       ) }
       <Td>
-        <Address display="inline-flex" maxW="100%" my="3px">
-          <AddressIcon address={ from } isLoading={ isLoading }/>
-          <AddressLink
-            type="address" ml={ 2 }
-            fontWeight="500"
-            hash={ from.hash }
-            alias={ from.name }
-            flexGrow={ 1 }
-            isDisabled={ baseAddress === from.hash }
-            isLoading={ isLoading }
-          />
-          { baseAddress !== from.hash && <CopyToClipboard text={ from.hash } isLoading={ isLoading }/> }
-        </Address>
+        <AddressEntity
+          address={ from }
+          isLoading={ isLoading }
+          my="5px"
+          noLink={ baseAddress === from.hash }
+          noCopy={ baseAddress === from.hash }
+          flexGrow={ 1 }
+        />
       </Td>
       { baseAddress && (
         <Td px={ 0 }>
@@ -103,20 +95,14 @@ const TokenTransferTableItem = ({
         </Td>
       ) }
       <Td>
-        <Address display="inline-flex" maxW="100%" my="3px">
-          <AddressIcon address={ to } isLoading={ isLoading }/>
-          <AddressLink
-            type="address"
-            ml={ 2 }
-            fontWeight="500"
-            hash={ to.hash }
-            alias={ to.name }
-            flexGrow={ 1 }
-            isDisabled={ baseAddress === to.hash }
-            isLoading={ isLoading }
-          />
-          { baseAddress !== to.hash && <CopyToClipboard text={ to.hash } isLoading={ isLoading }/> }
-        </Address>
+        <AddressEntity
+          address={ to }
+          isLoading={ isLoading }
+          my="5px"
+          noLink={ baseAddress === to.hash }
+          noCopy={ baseAddress === to.hash }
+          flexGrow={ 1 }
+        />
       </Td>
       <Td isNumeric verticalAlign="top">
         <Skeleton isLoaded={ !isLoading } display="inline-block" my="7px">

ui/shared/address/Address.tsx

@@ -6,6 +6,7 @@ interface Props {
   children: React.ReactNode;
 }
 
+// TODO @tom2drum delete this component
 /**
  * @deprecated use `ui/shared/entities/address` instead
  */

ui/shared/entities/address/AddressEntity.tsx

@@ -29,11 +29,15 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Pick<EntityProps, 'address' | 'isLoading' | 'iconSize'> & {
+type IconProps = Pick<EntityProps, 'address' | 'isLoading' | 'iconSize' | 'noIcon'> & {
   asProp?: As;
 };
 
 const Icon = (props: IconProps) => {
+  if (props.noIcon) {
+    return null;
+  }
+
   const styles = {
     ...getIconProps(props.iconSize),
     marginRight: 2,
@@ -46,19 +50,27 @@ const Icon = (props: IconProps) => {
   if (props.address.is_contract) {
     if (props.address.is_verified) {
       return (
-        <EntityBase.Icon
-          { ...props }
-          asProp={ iconContractVerified }
-          color="green.500"
-        />
+        <Tooltip label="Verified contract">
+          <span>
+            <EntityBase.Icon
+              { ...props }
+              asProp={ iconContractVerified }
+              color="green.500"
+            />
+          </span>
+        </Tooltip>
       );
     }
 
     return (
-      <EntityBase.Icon
-        { ...props }
-        asProp={ iconContract }
-      />
+      <Tooltip label="Contract">
+        <span>
+          <EntityBase.Icon
+            { ...props }
+            asProp={ iconContract }
+          />
+        </span>
+      </Tooltip>
     );
   }
 

ui/shared/entities/address/AddressEntityWithTokenFilter.tsx

 import { chakra } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -11,8 +10,6 @@ interface Props extends AddressEntity.EntityProps {
 }
 
 const AddressEntityWithTokenFilter = (props: Props) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
   const defaultHref = route({
     pathname: '/address/[hash]',
     query: {
@@ -25,15 +22,7 @@ const AddressEntityWithTokenFilter = (props: Props) => {
   });
 
   return (
-    <AddressEntity.Container className={ props.className }>
-      <AddressEntity.Icon { ...partsProps }/>
-      <AddressEntity.Link
-        { ...linkProps }
-        href={ props.href ?? defaultHref }
-      >
-        <AddressEntity.Content { ...partsProps }/>
-      </AddressEntity.Link>
-    </AddressEntity.Container>
+    <AddressEntity.default { ...props } href={ props.href ?? defaultHref }/>
   );
 };
 

ui/shared/entities/base/components.tsx

@@ -26,6 +26,7 @@ export interface EntityBaseProps {
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
   query?: Record<string, string>;
   tailLength?: number;
+  target?: React.HTMLAttributeAnchorTarget;
   truncation?: Truncation;
 }
 

ui/token/TokenHolders/TokenHoldersListItem.tsx

@@ -4,10 +4,7 @@ import React from 'react';
 
 import type { TokenHolder, TokenInfo } from 'types/api/token';
 
-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';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
@@ -22,19 +19,12 @@ const TokenHoldersListItem = ({ holder, token, isLoading }: Props) => {
 
   return (
     <ListItemMobile rowGap={ 3 }>
-      <Address display="inline-flex" maxW="100%">
-        <AddressIcon address={ holder.address } isLoading={ isLoading }/>
-        <AddressLink
-          type="address"
-          ml={ 2 }
-          fontWeight="700"
-          hash={ holder.address.hash }
-          alias={ holder.address.name }
-          flexGrow={ 1 }
-          isLoading={ isLoading }
-        />
-        <CopyToClipboard text={ holder.address.hash } isLoading={ isLoading }/>
-      </Address>
+      <AddressEntity
+        address={ holder.address }
+        isLoading={ isLoading }
+        fontWeight="700"
+        maxW="100%"
+      />
       <Flex justifyContent="space-between" alignItems="center" width="100%">
         <Skeleton isLoaded={ !isLoading } display="inline-block" width="100%">
           <Box as="span" wordBreak="break-word" mr={ 6 }>

ui/token/TokenHolders/TokenHoldersTableItem.tsx

@@ -4,10 +4,7 @@ import React from 'react';
 
 import type { TokenHolder, TokenInfo } from 'types/api/token';
 
-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';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 type Props = {
@@ -22,20 +19,12 @@ const TokenTransferTableItem = ({ holder, token, isLoading }: Props) => {
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <Address display="inline-flex" maxW="100%">
-          <AddressIcon address={ holder.address } isLoading={ isLoading }/>
-          <AddressLink
-            type="address"
-            ml={ 2 }
-            fontWeight="700"
-            hash={ holder.address.hash }
-            alias={ holder.address.name }
-            flexGrow={ 1 }
-            isLoading={ isLoading }
-            truncation="constant"
-          />
-          <CopyToClipboard text={ holder.address.hash } isLoading={ isLoading }/>
-        </Address>
+        <AddressEntity
+          address={ holder.address }
+          isLoading={ isLoading }
+          flexGrow={ 1 }
+          fontWeight="700"
+        />
       </Td>
       <Td verticalAlign="middle" isNumeric>
         <Skeleton isLoaded={ !isLoading } display="inline-block" wordBreak="break-word">

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -6,12 +6,9 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntityWithTokenFilter from 'ui/shared/entities/address/AddressEntityWithTokenFilter';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
@@ -59,17 +56,21 @@ const TokenTransferListItem = ({
       </Flex>
       { method && <Tag isLoading={ isLoading }>{ method }</Tag> }
       <Flex w="100%" columnGap={ 3 }>
-        <Address width="50%">
-          <AddressIcon address={ from } isLoading={ isLoading }/>
-          <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } type="address_token" tokenHash={ token.address } isLoading={ isLoading }/>
-          <CopyToClipboard text={ from.hash } isLoading={ isLoading }/>
-        </Address>
+        <AddressEntityWithTokenFilter
+          address={ from }
+          isLoading={ isLoading }
+          tokenHash={ token.address }
+          width="50%"
+          fontWeight="500"
+        />
         <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
-        <Address width="50%">
-          <AddressIcon address={ to } isLoading={ isLoading }/>
-          <AddressLink ml={ 2 } fontWeight="500" hash={ to.hash } type="address_token" tokenHash={ token.address } isLoading={ isLoading }/>
-          <CopyToClipboard text={ to.hash } isLoading={ isLoading }/>
-        </Address>
+        <AddressEntityWithTokenFilter
+          address={ to }
+          isLoading={ isLoading }
+          tokenHash={ token.address }
+          width="50%"
+          fontWeight="500"
+        />
       </Flex>
       { value && (token.type === 'ERC-20' || token.type === 'ERC-1155') && (
         <Flex columnGap={ 2 } w="100%">

ui/verifiedContracts/VerifiedContractsListItem.tsx

@@ -9,11 +9,9 @@ import iconCheck from 'icons/check.svg';
 import iconCross from 'icons/cross.svg';
 import iconSuccess from 'icons/status/success.svg';
 import dayjs from 'lib/date/dayjs';
-import Address from 'ui/shared/address/Address';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Icon from 'ui/shared/chakra/Icon';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 
@@ -29,14 +27,18 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
 
   return (
     <ListItemMobile rowGap={ 3 }>
-      <Address columnGap={ 2 } overflow="hidden" w="100%">
-        <AddressIcon address={ data.address } isLoading={ isLoading }/>
-        <AddressLink hash={ data.address.hash } type="address" alias={ data.address.name } isLoading={ isLoading } query={{ tab: 'contract' }}/>
+      <Flex w="100%">
+        <AddressEntity
+          isLoading={ isLoading }
+          address={ data.address }
+          query={{ tab: 'contract' }}
+          noCopy
+        />
         <Skeleton isLoaded={ !isLoading } color="text_secondary" ml="auto">
           <HashStringShorten hash={ data.address.hash } isTooltipDisabled/>
         </Skeleton>
-        <CopyToClipboard text={ data.address.hash } ml={ -1 } isLoading={ isLoading }/>
-      </Address>
+        <CopyToClipboard text={ data.address.hash } isLoading={ isLoading }/>
+      </Flex>
       <Flex columnGap={ 3 }>
         <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Balance { config.chain.currency.symbol }</Skeleton>
         <Skeleton isLoaded={ !isLoading } color="text_secondary">