remove Address component, pt.2

ui/address/internals/AddressIntTxsListItem.tsx

@@ -7,12 +7,9 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 import config from 'configs/app';
 import eastArrowIcon from 'icons/arrows/east.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 Tag from 'ui/shared/chakra/Tag';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import InOutTag from 'ui/shared/InOutTag';
@@ -40,7 +37,7 @@ const TxInternalsListItem = ({
   const toData = to ? to : createdContract;
 
   const isOut = Boolean(currentAddress && currentAddress === from.hash);
-  const isIn = Boolean(currentAddress && currentAddress === to?.hash);
+  const isIn = Boolean(currentAddress && currentAddress === toData?.hash);
 
   return (
     <ListItemMobile rowGap={ 3 }>
@@ -70,21 +67,25 @@ const TxInternalsListItem = ({
         />
       </HStack>
       <Box w="100%" display="flex" columnGap={ 3 }>
-        <Address width="calc((100% - 48px) / 2)">
-          <AddressIcon address={ from } isLoading={ isLoading }/>
-          <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } isDisabled={ isOut } isLoading={ isLoading }/>
-          { isIn && <CopyToClipboard text={ from.hash } isLoading={ isLoading }/> }
-        </Address>
+        <AddressEntity
+          address={ from }
+          isLoading={ isLoading }
+          noLink={ isOut }
+          noCopy={ isOut }
+          width="calc((100% - 48px) / 2)"
+        />
         { (isIn || isOut) ?
           <InOutTag isIn={ isIn } isOut={ isOut } isLoading={ isLoading }/> :
           <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
         }
         { toData && (
-          <Address width="calc((100% - 48px) / 2)">
-            <AddressIcon address={ toData } isLoading={ isLoading }/>
-            <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ toData.hash } isDisabled={ isIn } isLoading={ isLoading }/>
-            { isOut && <CopyToClipboard text={ toData.hash } isLoading={ isLoading }/> }
-          </Address>
+          <AddressEntity
+            address={ toData }
+            isLoading={ isLoading }
+            noLink={ isIn }
+            noCopy={ isIn }
+            width="calc((100% - 48px) / 2)"
+          />
         ) }
       </Box>
       <HStack spacing={ 3 }>

ui/address/internals/AddressIntTxsTableItem.tsx

@@ -7,12 +7,9 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 import config from 'configs/app';
 import rightArrowIcon 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 BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import InOutTag from 'ui/shared/InOutTag';
@@ -39,7 +36,7 @@ const AddressIntTxsTableItem = ({
   const toData = to ? to : createdContract;
 
   const isOut = Boolean(currentAddress && currentAddress === from.hash);
-  const isIn = Boolean(currentAddress && currentAddress === to?.hash);
+  const isIn = Boolean(currentAddress && currentAddress === toData?.hash);
 
   const timeAgo = useTimeAgoIncrement(timestamp, true);
 
@@ -81,34 +78,27 @@ const AddressIntTxsTableItem = ({
         />
       </Td>
       <Td verticalAlign="middle">
-        <Address display="inline-flex" maxW="100%">
-          <AddressIcon address={ from } isLoading={ isLoading }/>
-          <AddressLink
-            type="address"
-            ml={ 2 }
-            fontWeight="500"
-            hash={ from.hash }
-            alias={ from.name }
-            flexGrow={ 1 }
-            isDisabled={ isOut }
+        <AddressEntity
+          address={ from }
           isLoading={ isLoading }
+          noLink={ isOut }
+          noCopy={ isOut }
         />
-          { isIn && <CopyToClipboard text={ from.hash } isLoading={ isLoading }/> }
-        </Address>
       </Td>
       <Td px={ 0 } verticalAlign="middle">
         { (isIn || isOut) ?
-          <InOutTag isIn={ isIn } isOut={ isOut } isLoading={ isLoading }/> :
+          <InOutTag isIn={ isIn } isOut={ isOut } isLoading={ isLoading } w="100%"/> :
           <Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
         }
       </Td>
       <Td verticalAlign="middle">
         { toData && (
-          <Address display="inline-flex" maxW="100%">
-            <AddressIcon address={ toData } isLoading={ isLoading }/>
-            <AddressLink type="address" hash={ toData.hash } alias={ toData.name } fontWeight="500" ml={ 2 } isDisabled={ isIn } isLoading={ isLoading }/>
-            { isOut && <CopyToClipboard text={ toData.hash } isLoading={ isLoading }/> }
-          </Address>
+          <AddressEntity
+            address={ toData }
+            isLoading={ isLoading }
+            noLink={ isIn }
+            noCopy={ isIn }
+          />
         ) }
       </Td>
       <Td isNumeric verticalAlign="middle">

ui/l2Withdrawals/WithdrawalsListItem.tsx

@@ -5,9 +5,7 @@ import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals';
 
 import config from 'configs/app';
 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 AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import LinkExternal from 'ui/shared/LinkExternal';
@@ -38,17 +36,21 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
       { item.from && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
-          <ListItemMobileGrid.Value py="3px">
-            <Address>
+          <ListItemMobileGrid.Value>
+            <AddressEntity
+              address={ item.from }
+              isLoading={ isLoading }
+            />
+            { /* <Address>
               <AddressIcon address={ item.from } isLoading={ isLoading }/>
               <AddressLink hash={ item.from.hash } type="address" truncation="dynamic" ml={ 2 } isLoading={ isLoading }/>
-            </Address>
+            </Address> */ }
           </ListItemMobileGrid.Value>
         </>
       ) }
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py="3px">
+      <ListItemMobileGrid.Value>
         <TxEntity
           isLoading={ isLoading }
           hash={ item.l2_tx_hash }
@@ -78,7 +80,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
       { item.l1_tx_hash && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
-          <ListItemMobileGrid.Value py="3px">
+          <ListItemMobileGrid.Value>
             <TxEntityL1
               isLoading={ isLoading }
               hash={ item.l1_tx_hash }

ui/l2Withdrawals/WithdrawalsTableItem.tsx

@@ -5,9 +5,7 @@ import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals';
 
 import config from 'configs/app';
 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 AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import LinkExternal from 'ui/shared/LinkExternal';
@@ -31,10 +29,11 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
       </Td>
       <Td verticalAlign="middle">
         { item.from ? (
-          <Address>
-            <AddressIcon address={ item.from } isLoading={ isLoading }/>
-            <AddressLink hash={ item.from.hash } type="address" truncation="constant" ml={ 2 } isLoading={ isLoading }/>
-          </Address>
+          <AddressEntity
+            address={ item.from }
+            isLoading={ isLoading }
+            truncation="constant"
+          />
         ) : 'N/A' }
       </Td>
       <Td verticalAlign="middle">

ui/token/TokenInventoryItem.tsx

-import { Flex, Text, LinkBox, LinkOverlay, useColorModeValue, Hide, Skeleton } from '@chakra-ui/react';
+import { Flex, Text, LinkBox, LinkOverlay, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
 import type { TokenInstance } 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 useIsMobile from 'lib/hooks/useIsMobile';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import LinkInternal from 'ui/shared/LinkInternal';
 import NftMedia from 'ui/shared/nft/NftMedia';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
@@ -15,6 +14,8 @@ type Props = { item: TokenInstance; isLoading: boolean };
 
 const NFTItem = ({ item, isLoading }: Props) => {
 
+  const isMobile = useIsMobile();
+
   const mediaElement = (
     <NftMedia
       mb="18px"
@@ -67,10 +68,13 @@ const NFTItem = ({ item, isLoading }: Props) => {
       { item.owner && (
         <Flex mb={ 2 } ml={ 1 }>
           <Text whiteSpace="pre" variant="secondary" mr={ 2 } lineHeight="24px">Owner</Text>
-          <Address>
-            <Hide below="lg" ssr={ false }><AddressIcon address={ item.owner } mr={ 1 } isLoading={ isLoading }/></Hide>
-            <AddressLink hash={ item.owner.hash } alias={ item.owner.name } type="address" truncation="constant" isLoading={ isLoading }/>
-          </Address>
+          <AddressEntity
+            address={ item.owner }
+            isLoading={ isLoading }
+            truncation="constant"
+            noCopy
+            noIcon={ isMobile }
+          />
         </Flex>
       ) }
     </LinkBox>

ui/token/TokenTransfer/TokenTransferTableItem.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 TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 
@@ -57,21 +54,12 @@ const TokenTransferTableItem = ({
         ) : null }
       </Td>
       <Td>
-        <Address display="inline-flex" maxW="100%" py="3px">
-          <AddressIcon address={ from } isLoading={ isLoading }/>
-          <AddressLink
-            ml={ 2 }
-            flexGrow={ 1 }
-            fontWeight="500"
-            type="address_token"
-            hash={ from.hash }
-            alias={ from.name }
-            tokenHash={ token.address }
-            truncation="constant"
+        <AddressEntityWithTokenFilter
+          address={ from }
           isLoading={ isLoading }
+          truncation="constant"
+          tokenHash={ token.address }
         />
-          <CopyToClipboard text={ from.hash } isLoading={ isLoading }/>
-        </Address>
       </Td>
       <Td px={ 0 }>
         <Box my="3px">
@@ -79,21 +67,12 @@ const TokenTransferTableItem = ({
         </Box>
       </Td>
       <Td>
-        <Address display="inline-flex" maxW="100%" py="3px">
-          <AddressIcon address={ to } isLoading={ isLoading }/>
-          <AddressLink
-            ml={ 2 }
-            flexGrow={ 1 }
-            fontWeight="500"
-            type="address_token"
-            hash={ to.hash }
-            alias={ to.name }
-            tokenHash={ token.address }
-            truncation="constant"
+        <AddressEntityWithTokenFilter
+          address={ to }
           isLoading={ isLoading }
+          truncation="constant"
+          tokenHash={ token.address }
         />
-          <CopyToClipboard text={ to.hash } isLoading={ isLoading }/>
-        </Address>
       </Td>
       { (token.type === 'ERC-721' || token.type === 'ERC-1155') && (
         <Td>

ui/tokenInstance/TokenInstanceDetails.tsx

@@ -3,12 +3,10 @@ import React from 'react';
 
 import type { TokenInstance } 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 DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import NftMedia from 'ui/shared/nft/NftMedia';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
@@ -59,11 +57,10 @@ const TokenInstanceDetails = ({ data, scrollRef, isLoading }: Props) => {
               hint="Current owner of this token instance"
               isLoading={ isLoading }
             >
-              <Address>
-                <AddressIcon address={ data.owner } isLoading={ isLoading }/>
-                <AddressLink type="address" hash={ data.owner.hash } ml={ 2 } isLoading={ isLoading }/>
-                <CopyToClipboard text={ data.owner.hash } isLoading={ isLoading }/>
-              </Address>
+              <AddressEntity
+                address={ data.owner }
+                isLoading={ isLoading }
+              />
             </DetailsInfoItem>
           ) }
           <TokenInstanceCreatorAddress hash={ isLoading ? '' : data.token.address }/>

ui/tokenInstance/details/TokenInstanceCreatorAddress.tsx

@@ -2,11 +2,8 @@ import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { ADDRESS_INFO } from 'stubs/address';
-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 DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 interface Props {
   hash: string;
@@ -41,11 +38,10 @@ const TokenInstanceCreatorAddress = ({ hash }: Props) => {
       hint="Address that deployed this token contract"
       isLoading={ addressQuery.isPlaceholderData }
     >
-      <Address>
-        <AddressIcon address={ creatorAddress } isLoading={ addressQuery.isPlaceholderData }/>
-        <AddressLink type="address" hash={ creatorAddress.hash } ml={ 2 } isLoading={ addressQuery.isPlaceholderData }/>
-        <CopyToClipboard text={ creatorAddress.hash } isLoading={ addressQuery.isPlaceholderData }/>
-      </Address>
+      <AddressEntity
+        address={ creatorAddress }
+        isLoading={ addressQuery.isPlaceholderData }
+      />
     </DetailsInfoItem>
   );
 };

ui/tokens/TokensTableItem.tsx

@@ -4,11 +4,11 @@ import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
 
-import Address from 'ui/shared/address/Address';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import AddressLink from 'ui/shared/address/AddressLink';
 import Tag from 'ui/shared/chakra/Tag';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import type { EntityProps as AddressEntityProps } from 'ui/shared/entities/address/AddressEntity';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 type Props = {
@@ -38,6 +38,13 @@ const TokensTableItem = ({
   } = token;
 
   const tokenString = [ name, symbol && `(${ symbol })` ].filter(Boolean).join(' ');
+  const tokenAddress: AddressEntityProps['address'] = {
+    hash: address,
+    name: '',
+    implementation_name: null,
+    is_contract: true,
+    is_verified: false,
+  };
 
   return (
     <Tr>
@@ -59,11 +66,17 @@ const TokensTableItem = ({
               <AddressLink fontSize="sm" fontWeight="700" hash={ address } type="token" alias={ tokenString } isLoading={ isLoading }/>
             </Flex>
             <Box ml={ 8 } mt={ 2 }>
-              <Address>
-                <AddressLink fontSize="sm" hash={ address } type="address" truncation="constant" fontWeight={ 500 } isLoading={ isLoading }/>
-                <CopyToClipboard text={ address } isLoading={ isLoading }/>
+              <Flex>
+                <AddressEntity
+                  address={ tokenAddress }
+                  isLoading={ isLoading }
+                  noIcon
+                  truncation="constant"
+                  fontSize="sm"
+                  fontWeight={ 500 }
+                />
                 <AddressAddToWallet token={ token } ml={ 2 } isLoading={ isLoading }/>
-              </Address>
+              </Flex>
               <Box mt={ 3 } >
                 <Tag isLoading={ isLoading }>{ type }</Tag>
               </Box>

ui/tx/TxDetails.tsx

@@ -26,9 +26,6 @@ import { WEI, WEI_IN_GWEI } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
-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';
@@ -36,9 +33,9 @@ import CurrencyValue from 'ui/shared/CurrencyValue';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-// import PrevNext from 'ui/shared/PrevNext';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import RawInputData from 'ui/shared/RawInputData';
 import TextSeparator from 'ui/shared/TextSeparator';
@@ -141,8 +138,6 @@ const TxDetails = () => {
             <HashStringShortenDynamic hash={ data.hash }/>
           </Skeleton>
           <CopyToClipboard text={ data.hash } isLoading={ isPlaceholderData }/>
-          { /* api doesn't support navigation between certain address account tx */ }
-          { /* <PrevNext ml={ 7 }/> */ }
         </DetailsInfoItem>
         <DetailsInfoItem
           title="Status and method"
@@ -219,11 +214,10 @@ const TxDetails = () => {
           isLoading={ isPlaceholderData }
           columnGap={ 3 }
         >
-          <Address>
-            <AddressIcon address={ data.from } isLoading={ isPlaceholderData }/>
-            <AddressLink type="address" ml={ 2 } hash={ data.from.hash } isLoading={ isPlaceholderData }/>
-            <CopyToClipboard text={ data.from.hash } isLoading={ isPlaceholderData }/>
-          </Address>
+          <AddressEntity
+            address={ data.from }
+            isLoading={ isPlaceholderData }
+          />
           { data.from.name && <Text>{ data.from.name }</Text> }
           { addressFromTags.length > 0 && (
             <Flex columnGap={ 3 }>
@@ -241,21 +235,25 @@ const TxDetails = () => {
           { toAddress ? (
             <>
               { data.to && data.to.hash ? (
-                <Address alignItems="center" flexShrink={ 0 } w={{ base: '100%', lg: 'auto' }}>
-                  <AddressIcon address={ toAddress } isLoading={ isPlaceholderData }/>
-                  <AddressLink type="address" ml={ 2 } hash={ toAddress.hash } isLoading={ isPlaceholderData }/>
+                <Flex flexWrap="nowrap" alignItems="center" w="100%">
+                  <AddressEntity
+                    address={ toAddress }
+                    isLoading={ isPlaceholderData }
+                  />
                   { executionSuccessBadge }
                   { executionFailedBadge }
-                  <CopyToClipboard text={ toAddress.hash } isLoading={ isPlaceholderData }/>
-                </Address>
+                </Flex>
               ) : (
-                <Flex width={{ base: '100%', lg: 'auto' }} whiteSpace="pre" alignItems="center" flexShrink={ 0 }>
+                <Flex width="100%" whiteSpace="pre" alignItems="center" flexShrink={ 0 }>
                   <span>[Contract </span>
-                  <AddressLink type="address" hash={ toAddress.hash }/>
+                  <AddressEntity
+                    address={ toAddress }
+                    isLoading={ isPlaceholderData }
+                    noIcon
+                  />
                   <span> created]</span>
                   { executionSuccessBadge }
                   { executionFailedBadge }
-                  <CopyToClipboard text={ toAddress.hash }/>
                 </Flex>
               ) }
               { toAddress.name && <TruncatedValue value={ toAddress.name }/> }

ui/tx/internals/TxInternalsListItem.tsx

@@ -6,12 +6,9 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
 import eastArrowIcon from 'icons/arrows/east.svg';
-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 ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TxStatus from 'ui/shared/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
@@ -28,19 +25,19 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
         { typeTitle && <Tag colorScheme="cyan" isLoading={ isLoading }>{ typeTitle }</Tag> }
         <TxStatus status={ success ? 'ok' : 'error' } errorText={ error } isLoading={ isLoading }/>
       </Flex>
-      <Box w="100%" display="flex" columnGap={ 3 }>
-        <Address width="calc((100% - 48px) / 2)">
-          <AddressIcon address={ from } isLoading={ isLoading }/>
-          <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } isLoading={ isLoading }/>
-          <CopyToClipboard text={ from.hash } isLoading={ isLoading }/>
-        </Address>
+      <Box w="100%" display="flex" columnGap={ 3 } fontWeight="500">
+        <AddressEntity
+          address={ from }
+          isLoading={ isLoading }
+          width="calc((100% - 48px) / 2)"
+        />
         <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
         { toData && (
-          <Address width="calc((100% - 48px) / 2)">
-            <AddressIcon address={ toData } isLoading={ isLoading }/>
-            <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ toData.hash } isLoading={ isLoading }/>
-            <CopyToClipboard text={ toData.hash } isLoading={ isLoading }/>
-          </Address>
+          <AddressEntity
+            address={ toData }
+            isLoading={ isLoading }
+            width="calc((100% - 48px) / 2)"
+          />
         ) }
       </Box>
       <HStack spacing={ 3 }>

ui/tx/internals/TxInternalsTableItem.tsx

@@ -6,12 +6,9 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
 import rightArrowIcon from 'icons/arrows/east.svg';
-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 TxStatus from 'ui/shared/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
@@ -36,22 +33,20 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
         </Flex>
       </Td>
       <Td verticalAlign="middle">
-        <Address display="inline-flex" maxW="100%">
-          <AddressIcon address={ from } isLoading={ isLoading }/>
-          <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 } isLoading={ isLoading }/>
-          <CopyToClipboard text={ from.hash } isLoading={ isLoading }/>
-        </Address>
+        <AddressEntity
+          address={ from }
+          isLoading={ isLoading }
+        />
       </Td>
       <Td px={ 0 } verticalAlign="middle">
         <Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
       </Td>
       <Td verticalAlign="middle">
         { toData && (
-          <Address display="inline-flex" maxW="100%">
-            <AddressIcon address={ toData } isLoading={ isLoading }/>
-            <AddressLink type="address" hash={ toData.hash } alias={ toData.name } fontWeight="500" ml={ 2 } isLoading={ isLoading }/>
-            <CopyToClipboard text={ toData.hash } isLoading={ isLoading }/>
-          </Address>
+          <AddressEntity
+            address={ toData }
+            isLoading={ isLoading }
+          />
         ) }
       </Td>
       <Td isNumeric verticalAlign="middle">

ui/tx/state/TxStateListItem.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 
 import type { TxStateChange } from 'types/api/txStateChanges';
 
-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 ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
 import { getStateElements } from './utils';
@@ -22,12 +20,12 @@ const TxStateListItem = ({ data, isLoading }: Props) => {
     <ListItemMobileGrid.Container>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py="3px">
-        <Address flexGrow={ 1 } w="100%" alignSelf="center">
-          <AddressIcon address={ data.address } isLoading={ isLoading }/>
-          <AddressLink type="address" hash={ data.address.hash } ml={ 2 } truncation="constant" mr={ 3 } isLoading={ isLoading }/>
+      <ListItemMobileGrid.Value py="3px" display="flex" flexWrap="nowrap" columnGap={ 3 }>
+        <AddressEntity
+          address={ data.address }
+          isLoading={ isLoading }
+        />
         { tag }
-        </Address>
       </ListItemMobileGrid.Value>
 
       { before && (

ui/tx/state/TxStateTableItem.tsx

@@ -3,9 +3,7 @@ import React from 'react';
 
 import type { TxStateChange } from 'types/api/txStateChanges';
 
-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 { getStateElements } from './utils';
 
@@ -25,18 +23,12 @@ const TxStateTableItem = ({ data, isLoading }: Props) => {
         </Box>
       </Td>
       <Td>
-        <Address py="3px">
-          <AddressIcon address={ data.address } isLoading={ isLoading }/>
-          <AddressLink
-            type="address"
-            hash={ data.address.hash }
-            alias={ data.address.name }
-            fontWeight="500"
-            truncation="constant"
-            ml={ 2 }
+        <AddressEntity
+          address={ data.address }
           isLoading={ isLoading }
+          truncation="constant"
+          py="7px"
         />
-        </Address>
       </Td>
       <Td isNumeric><Box py="7px">{ before }</Box></Td>
       <Td isNumeric><Box py="7px">{ after }</Box></Td>

ui/txs/TxsListItem.tsx

@@ -12,11 +12,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 CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import InOutTag from 'ui/shared/InOutTag';
@@ -91,19 +88,13 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
         </Flex>
       ) }
       <Flex alignItems="center" height={ 6 } mt={ 6 }>
-        <Address w={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }>
-          <AddressIcon address={ tx.from } isLoading={ isLoading }/>
-          <AddressLink
-            type="address"
-            hash={ tx.from.hash }
-            alias={ tx.from.name }
-            fontWeight="500"
-            ml={ 2 }
-            isDisabled={ isOut }
+        <AddressEntity
+          address={ tx.from }
           isLoading={ isLoading }
+          noLink={ isOut }
+          noCopy={ isOut }
+          w={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }
         />
-          { !isOut && <CopyToClipboard text={ tx.from.hash } isLoading={ isLoading }/> }
-        </Address>
         { (isIn || isOut) ?
           <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mx={ 2 } isLoading={ isLoading }/> : (
             <Box mx={ 2 }>
@@ -116,19 +107,13 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
             </Box>
           ) }
         { dataTo ? (
-          <Address w={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }>
-            <AddressIcon address={ dataTo } isLoading={ isLoading }/>
-            <AddressLink
-              type="address"
-              hash={ dataTo.hash }
-              alias={ dataTo.name }
-              fontWeight="500"
-              ml={ 2 }
-              isDisabled={ isIn }
+          <AddressEntity
+            address={ dataTo }
             isLoading={ isLoading }
+            noLink={ isIn }
+            noCopy={ isIn }
+            w={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }
           />
-            { !isIn && <CopyToClipboard text={ dataTo.hash } isLoading={ isLoading }/> }
-          </Address>
         ) : '-' }
       </Flex>
       <Box mt={ 2 }>

ui/txs/TxsTableItem.tsx

@@ -15,13 +15,10 @@ import type { Transaction } from 'types/api/transaction';
 
 import rightArrowIcon 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 CurrencyValue from 'ui/shared/CurrencyValue';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import InOutTag from 'ui/shared/InOutTag';
@@ -46,36 +43,27 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
   const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
 
   const addressFrom = (
-    <Address w="100%">
-      <AddressIcon address={ tx.from } isLoading={ isLoading }/>
-      <AddressLink
-        type="address"
-        hash={ tx.from.hash }
-        alias={ tx.from.name }
-        fontWeight="500" ml={ 2 }
-        truncation="constant"
-        isDisabled={ isOut }
+    <AddressEntity
+      address={ tx.from }
       isLoading={ isLoading }
+      noCopy={ isOut }
+      noLink={ isOut }
+      truncation="constant"
+      w="100%"
+      py="2px"
     />
-      { !isOut && <CopyToClipboard text={ tx.from.hash } isLoading={ isLoading }/> }
-    </Address>
   );
 
   const addressTo = dataTo ? (
-    <Address w="100%">
-      <AddressIcon address={ dataTo } isLoading={ isLoading }/>
-      <AddressLink
-        type="address"
-        hash={ dataTo.hash }
-        alias={ dataTo.name }
-        fontWeight="500"
-        ml={ 2 }
-        truncation="constant"
-        isDisabled={ isIn }
+    <AddressEntity
+      address={ dataTo }
       isLoading={ isLoading }
+      truncation="constant"
+      noCopy={ isIn }
+      noLink={ isIn }
+      w="100%"
+      py="2px"
     />
-      { !isIn && <CopyToClipboard text={ dataTo.hash } isLoading={ isLoading }/> }
-    </Address>
   ) : '-';
 
   return (

ui/withdrawals/WithdrawalsListItem.tsx

@@ -7,10 +7,8 @@ import type { WithdrawalsItem } from 'types/api/withdrawals';
 
 import config from 'configs/app';
 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 CurrencyValue from 'ui/shared/CurrencyValue';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
@@ -62,10 +60,10 @@ const WithdrawalsListItem = ({ item, isLoading, view }: Props) => {
       { view !== 'address' && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>To</ListItemMobileGrid.Label><ListItemMobileGrid.Value>
-            <Address>
-              <AddressIcon address={ item.receiver } isLoading={ isLoading }/>
-              <AddressLink type="address" hash={ item.receiver.hash } truncation="dynamic" ml={ 2 } isLoading={ isLoading }/>
-            </Address>
+            <AddressEntity
+              address={ item.receiver }
+              isLoading={ isLoading }
+            />
           </ListItemMobileGrid.Value>
         </>
       ) }

ui/withdrawals/WithdrawalsTableItem.tsx

@@ -6,10 +6,8 @@ import type { BlockWithdrawalsItem } from 'types/api/block';
 import type { WithdrawalsItem } from 'types/api/withdrawals';
 
 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 CurrencyValue from 'ui/shared/CurrencyValue';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 
  type Props = ({
@@ -44,10 +42,11 @@ const WithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
       ) }
       { view !== 'address' && (
         <Td verticalAlign="middle">
-          <Address>
-            <AddressIcon address={ item.receiver } isLoading={ isLoading }/>
-            <AddressLink type="address" hash={ item.receiver.hash } truncation="constant" ml={ 2 } isLoading={ isLoading }/>
-          </Address>
+          <AddressEntity
+            address={ item.receiver }
+            isLoading={ isLoading }
+            truncation="constant"
+          />
         </Td>
       ) }
       { view !== 'block' && (