remove usage of AddressIcon

ui/address/contract/ContractConnectWallet.tsx

@@ -4,8 +4,7 @@ import React from 'react';
 import { useAccount, useDisconnect } from 'wagmi';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 const ContractConnectWallet = () => {
   const { open, isOpen } = useWeb3Modal();
@@ -47,8 +46,12 @@ const ContractConnectWallet = () => {
       <Flex columnGap={ 3 } rowGap={ 3 } alignItems={{ base: 'flex-start', lg: 'center' }} flexDir={{ base: 'column', lg: 'row' }}>
         <Flex alignItems="center">
           <span>Connected to </span>
-          <AddressIcon address={{ hash: address, is_contract: false, implementation_name: null }} mx={ 2 }/>
-          <AddressLink type="address" fontWeight={ 600 } hash={ address } truncation={ isMobile ? 'constant' : 'dynamic' }/>
+          <AddressEntity
+            address={{ hash: address, name: '', is_contract: false, implementation_name: null }}
+            truncation={ isMobile ? 'constant' : 'dynamic' }
+            fontWeight={ 600 }
+            ml={ 2 }
+          />
         </Flex>
         <Button onClick={ handleDisconnect } size="sm" variant="outline">Disconnect</Button>
       </Flex>

ui/l2Deposits/DepositsListItem.tsx

@@ -4,16 +4,12 @@ import React from 'react';
 
 import type { L2DepositsItem } from 'types/api/l2Deposits';
 
-import { route } from 'nextjs-routes';
-
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
-import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-import LinkExternal from 'ui/shared/LinkExternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
 const feature = config.features.rollup;
@@ -31,7 +27,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
     <ListItemMobileGrid.Container>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block No</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py="3px">
+      <ListItemMobileGrid.Value>
         <BlockEntityL1
           number={ item.l1_block_number }
           isLoading={ isLoading }
@@ -42,7 +38,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
       </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 }
@@ -57,7 +53,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py="3px">
+      <ListItemMobileGrid.Value>
         <TxEntityL1
           isLoading={ isLoading }
           hash={ item.l1_tx_hash }
@@ -67,19 +63,12 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn origin</ListItemMobileGrid.Label>
-      <ListItemMobileGrid.Value py="3px">
-        <LinkExternal
-          href={ feature.L1BaseUrl + route({ pathname: '/address/[hash]', query: { hash: item.l1_tx_origin } }) }
-          maxW="100%"
-          display="flex"
-          overflow="hidden"
+      <ListItemMobileGrid.Value>
+        <AddressEntityL1
+          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '' }}
           isLoading={ isLoading }
-        >
-          <AddressIcon address={{ hash: item.l1_tx_origin, is_contract: false, implementation_name: '' }} isLoading={ isLoading }/>
-          <Skeleton isLoaded={ !isLoading } w="calc(100% - 44px)" overflow="hidden" whiteSpace="nowrap" ml={ 2 }>
-            <HashStringShortenDynamic hash={ item.l1_tx_origin }/>
-          </Skeleton>
-        </LinkExternal>
+          noCopy
+        />
       </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Gas limit</ListItemMobileGrid.Label>

ui/l2Deposits/DepositsTableItem.tsx

@@ -4,16 +4,12 @@ import React from 'react';
 
 import type { L2DepositsItem } from 'types/api/l2Deposits';
 
-import { route } from 'nextjs-routes';
-
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
-import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import HashStringShorten from 'ui/shared/HashStringShorten';
-import LinkExternal from 'ui/shared/LinkExternal';
 
 const feature = config.features.rollup;
 
@@ -59,18 +55,12 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
         />
       </Td>
       <Td verticalAlign="middle">
-        <LinkExternal
-          href={ feature.L1BaseUrl + route({ pathname: '/address/[hash]', query: { hash: item.l1_tx_origin } }) }
-          maxW="100%"
-          display="inline-flex"
-          overflow="hidden"
+        <AddressEntityL1
+          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '' }}
           isLoading={ isLoading }
-        >
-          <AddressIcon address={{ hash: item.l1_tx_origin, is_contract: false, implementation_name: '' }} isLoading={ isLoading }/>
-          <Skeleton isLoaded={ !isLoading } w="calc(100% - 44px)" overflow="hidden" whiteSpace="nowrap" ml={ 2 }>
-            <HashStringShorten hash={ item.l1_tx_origin }/>
-          </Skeleton>
-        </LinkExternal>
+          truncation="constant"
+          noCopy
+        />
       </Td>
       <Td verticalAlign="middle" isNumeric>
         <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">

ui/l2Withdrawals/WithdrawalsListItem.tsx

@@ -41,10 +41,6 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
               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> */ }
           </ListItemMobileGrid.Value>
         </>
       ) }

ui/shared/AddressHeadingInfo.tsx

@@ -8,10 +8,8 @@ import config from 'configs/app';
 import AddressFavoriteButton from 'ui/address/details/AddressFavoriteButton';
 import AddressQrCode from 'ui/address/details/AddressQrCode';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
-import AddressIcon from 'ui/shared/address/AddressIcon';
-import AddressLink from 'ui/shared/address/AddressLink';
 import AddressActionsMenu from 'ui/shared/AddressActions/Menu';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 interface Props {
   address: Pick<Address, 'hash' | 'is_contract' | 'implementation_name' | 'watchlist_names' | 'watchlist_address_id'>;
@@ -23,18 +21,14 @@ interface Props {
 const AddressHeadingInfo = ({ address, token, isLinkDisabled, isLoading }: Props) => {
   return (
     <Flex alignItems="center">
-      <AddressIcon address={ address } isLoading={ isLoading }/>
-      <AddressLink
-        type="address"
-        hash={ address.hash }
-        ml={ 2 }
+      <AddressEntity
+        address={ address }
+        isLoading={ isLoading }
         fontFamily="heading"
         fontSize="lg"
         fontWeight={ 500 }
-        isDisabled={ isLinkDisabled }
-        isLoading={ isLoading }
+        noLink={ isLinkDisabled }
       />
-      <CopyToClipboard text={ address.hash } isLoading={ isLoading }/>
       { !isLoading && address.is_contract && token && <AddressAddToWallet ml={ 2 } token={ token }/> }
       { !isLoading && !address.is_contract && config.features.account.isEnabled && (
         <AddressFavoriteButton hash={ address.hash } watchListId={ address.watchlist_address_id } ml={ 3 }/>

ui/shared/entities/address/AddressEntityL1.tsx

+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+
+import * as AddressEntity from './AddressEntity';
+
+const feature = config.features.rollup;
+
+const AddressEntityL1 = (props: AddressEntity.EntityProps) => {
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  const defaultHref = feature.L1BaseUrl + route({
+    pathname: '/address/[hash]',
+    query: {
+      ...props.query,
+      hash: props.address.hash,
+    },
+  });
+
+  return (
+    <AddressEntity.default { ...props } href={ props.href ?? defaultHref } isExternal/>
+  );
+};
+
+export default chakra(AddressEntityL1);

ui/verifiedContracts/VerifiedContractsTableItem.tsx

@@ -9,10 +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 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';
 
 interface Props {
@@ -28,17 +27,18 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => {
   return (
     <Tr>
       <Td>
-        <Flex columnGap={ 2 }>
-          <AddressIcon address={ data.address } isLoading={ isLoading }/>
-          <Flex columnGap={ 2 } flexWrap="wrap" w="calc(100% - 32px)">
-            <AddressLink hash={ data.address.hash } type="address" alias={ data.address.name } isLoading={ isLoading } my={ 1 } query={{ tab: 'contract' }}/>
-            <Flex alignItems="center">
-              <Skeleton isLoaded={ !isLoading } color="text_secondary" my={ 1 }>
-                <HashStringShorten hash={ data.address.hash } isTooltipDisabled/>
-              </Skeleton>
-              <CopyToClipboard text={ data.address.hash } isLoading={ isLoading }/>
-            </Flex>
-          </Flex>
+        <AddressEntity
+          address={ data.address }
+          isLoading={ isLoading }
+          query={{ tab: 'contract' }}
+          noCopy
+          mt={ 1 }
+        />
+        <Flex alignItems="center" ml={ 7 }>
+          <Skeleton isLoaded={ !isLoading } color="text_secondary" my={ 1 }>
+            <HashStringShorten hash={ data.address.hash } isTooltipDisabled/>
+          </Skeleton>
+          <CopyToClipboard text={ data.address.hash } isLoading={ isLoading }/>
         </Flex>
       </Td>
       <Td isNumeric>