remove type="address" from AddressLink

ui/address/AddressDetails.tsx

@@ -12,11 +12,11 @@ import useApiQuery from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { ADDRESS_COUNTERS } from 'stubs/address';
 import AddressCounterItem from 'ui/address/details/AddressCounterItem';
-import AddressLink from 'ui/shared/address/AddressLink';
 import AddressHeadingInfo from 'ui/shared/AddressHeadingInfo';
 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 TxEntity from 'ui/shared/entities/tx/TxEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
@@ -102,7 +102,12 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
             hint="Transaction and address of creation"
             isLoading={ addressQuery.isPlaceholderData }
           >
-            <AddressLink type="address" hash={ data.creator_address_hash } truncation="constant"/>
+            <AddressEntity
+              address={{ hash: data.creator_address_hash }}
+              truncation="constant"
+              noIcon
+              noCopy
+            />
             <Text whiteSpace="pre"> at txn </Text>
             <TxEntity hash={ data.creation_tx_hash } truncation="constant" noIcon/>
           </DetailsInfoItem>

ui/address/tokens/ERC20TokensListItem.tsx

@@ -6,7 +6,7 @@ import type { AddressTokenBalance } from 'types/api/address';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 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 TokenLogo from 'ui/shared/TokenLogo';
 
@@ -28,8 +28,12 @@ const ERC20TokensListItem = ({ token, value, isLoading }: Props) => {
         <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString } isLoading={ isLoading }/>
       </Flex>
       <Flex alignItems="center" pl={ 8 }>
-        <AddressLink hash={ token.address } type="address" truncation="constant" isLoading={ isLoading }/>
-        <CopyToClipboard text={ token.address } isLoading={ isLoading }/>
+        <AddressEntity
+          address={{ hash: token.address }}
+          isLoading={ isLoading }
+          truncation="constant"
+          noIcon
+        />
         <AddressAddToWallet token={ token } ml={ 2 } isLoading={ isLoading }/>
       </Flex>
       { token.exchange_rate !== undefined && token.exchange_rate !== null && (

ui/address/tokens/ERC20TokensTableItem.tsx

@@ -6,7 +6,7 @@ import type { AddressTokenBalance } from 'types/api/address';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import AddressLink from 'ui/shared/address/AddressLink';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 type Props = AddressTokenBalance & { isLoading: boolean };
@@ -34,10 +34,11 @@ const ERC20TokensTableItem = ({
       </Td>
       <Td verticalAlign="middle">
         <Flex alignItems="center" width="150px" justifyContent="space-between">
-          <Flex alignItems="center">
-            <AddressLink hash={ token.address } type="address" truncation="constant" isLoading={ isLoading }/>
-            <CopyToClipboard text={ token.address } isLoading={ isLoading }/>
-          </Flex>
+          <AddressEntity
+            address={{ hash: token.address }}
+            isLoading={ isLoading }
+            noIcon
+          />
           <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading }/>
         </Flex>
       </Td>

ui/address/tokens/ERC721TokensListItem.tsx

@@ -6,7 +6,7 @@ import type { AddressTokenBalance } from 'types/api/address';
 
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 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 TokenLogo from 'ui/shared/TokenLogo';
 
@@ -26,8 +26,12 @@ const ERC721TokensListItem = ({ token, value, isLoading }: Props) => {
         <AddressLink fontWeight="700" hash={ hash } tokenHash={ token.address } type="address_token" alias={ tokenString } isLoading={ isLoading }/>
       </Flex>
       <Flex alignItems="center" pl={ 8 }>
-        <AddressLink hash={ token.address } type="address" truncation="constant" isLoading={ isLoading }/>
-        <CopyToClipboard text={ token.address } isLoading={ isLoading }/>
+        <AddressEntity
+          address={{ hash: token.address }}
+          isLoading={ isLoading }
+          truncation="constant"
+          noIcon
+        />
         <AddressAddToWallet token={ token } ml={ 2 } isLoading={ isLoading }/>
       </Flex>
       <HStack spacing={ 3 }>

ui/address/tokens/ERC721TokensTableItem.tsx

@@ -6,7 +6,7 @@ import type { AddressTokenBalance } from 'types/api/address';
 
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import AddressLink from 'ui/shared/address/AddressLink';
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 type Props = AddressTokenBalance & { isLoading: boolean};
@@ -31,10 +31,11 @@ const ERC721TokensTableItem = ({
       </Td>
       <Td verticalAlign="middle">
         <Flex alignItems="center" width="150px" justifyContent="space-between">
-          <Flex alignItems="center">
-            <AddressLink hash={ token.address } type="address" truncation="dynamic" isLoading={ isLoading }/>
-            <CopyToClipboard text={ token.address } isLoading={ isLoading }/>
-          </Flex>
+          <AddressEntity
+            address={{ hash: token.address }}
+            isLoading={ isLoading }
+            noIcon
+          />
           <AddressAddToWallet token={ token } ml={ 4 } isLoading={ isLoading }/>
         </Flex>
       </Td>

ui/block/BlockDetails.tsx

@@ -20,11 +20,11 @@ import dayjs from 'lib/date/dayjs';
 import { space } from 'lib/html-entities';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Icon from 'ui/shared/chakra/Icon';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -206,8 +206,10 @@ const BlockDetails = ({ query }: Props) => {
         columnGap={ 1 }
         isLoading={ isPlaceholderData }
       >
-        <AddressLink type="address" hash={ data.miner.hash } isLoading={ isPlaceholderData }/>
-        { data.miner.name && <Text>{ `(${ capitalize(validatorTitle) }: ${ data.miner.name })` }</Text> }
+        <AddressEntity
+          address={ data.miner }
+          isLoading={ isPlaceholderData }
+        />
         { /* api doesn't return the block processing time yet */ }
         { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
       </DetailsInfoItem>

ui/blocks/BlocksListItem.tsx

@@ -13,8 +13,8 @@ import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { WEI } from 'lib/consts';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Icon from 'ui/shared/chakra/Icon';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -55,9 +55,12 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <span>{ data.size.toLocaleString() } bytes</span>
         </Skeleton>
       </Flex>
-      <Flex columnGap={ 2 }>
+      <Flex columnGap={ 2 } w="100%">
         <Text fontWeight={ 500 }>{ capitalize(getNetworkValidatorTitle()) }</Text>
-        <AddressLink type="address" alias={ data.miner.name } hash={ data.miner.hash } truncation="constant" isLoading={ isLoading }/>
+        <AddressEntity
+          address={ data.miner }
+          isLoading={ isLoading }
+        />
       </Flex>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Txn</Text>

ui/blocks/BlocksTable.tsx

@@ -25,9 +25,9 @@ const BlocksTable = ({ data, isLoading, top, page }: Props) => {
         <Tr>
           <Th width="125px">Block</Th>
           <Th width="120px">Size, bytes</Th>
-          <Th width={ config.features.rollup.isEnabled ? '37%' : '21%' } minW="144px">{ capitalize(getNetworkValidatorTitle()) }</Th>
+          <Th width={ config.features.rollup.isEnabled ? '37%' : '23%' } minW="160px">{ capitalize(getNetworkValidatorTitle()) }</Th>
           <Th width="64px" isNumeric>Txn</Th>
-          <Th width={ config.features.rollup.isEnabled ? '63%' : '35%' }>Gas used</Th>
+          <Th width={ config.features.rollup.isEnabled ? '63%' : '33%' }>Gas used</Th>
           { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.total_reward &&
               <Th width="22%">Reward { config.chain.currency.symbol }</Th> }
           { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.burnt_fees &&

ui/blocks/BlocksTableItem.tsx

@@ -12,8 +12,8 @@ import flameIcon from 'icons/flame.svg';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { WEI } from 'lib/consts';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Icon from 'ui/shared/chakra/Icon';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -65,13 +65,8 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
         </Skeleton>
       </Td>
       <Td fontSize="sm">
-        <AddressLink
-          type="address"
-          alias={ data.miner.name }
-          hash={ data.miner.hash }
-          truncation="constant"
-          display="inline-flex"
-          maxW="100%"
+        <AddressEntity
+          address={ data.miner }
           isLoading={ isLoading }
         />
       </Td>

ui/home/LatestBlocksItem.tsx

@@ -13,7 +13,7 @@ import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
-import AddressLink from 'ui/shared/address/AddressLink';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 
 type Props = {
@@ -66,7 +66,10 @@ const LatestBlocksItem = ({ block, h, isLoading }: Props) => {
             <Skeleton isLoaded={ !isLoading }>Reward</Skeleton>
             <Skeleton isLoaded={ !isLoading } color="text_secondary"><span>{ totalReward.toFixed() }</span></Skeleton>
             <Skeleton isLoaded={ !isLoading } textTransform="capitalize">{ getNetworkValidatorTitle() }</Skeleton>
-            <AddressLink type="address" alias={ block.miner.name } hash={ block.miner.hash } truncation="constant" maxW="100%" isLoading={ isLoading }/>
+            <AddressEntity
+              address={ block.miner }
+              isLoading={ isLoading }
+            />
           </>
         ) }
       </Grid>

ui/shared/address/AddressLink.tsx

@@ -24,7 +24,7 @@ type CommonProps = {
 }
 
 type AddressTokenTxProps = {
-  type: 'address' | 'token';
+  type: 'token';
   hash: 'hash';
 }
 
@@ -48,8 +48,6 @@ const AddressLink = (props: Props) => {
     url = route({ pathname: '/token/[hash]', query: { ...props.query, hash } });
   } else if (type === 'address_token') {
     url = route({ pathname: '/address/[hash]', query: { ...props.query, hash, tab: 'token_transfers', token: props.tokenHash, scroll_to_tabs: 'true' } });
-  } else {
-    url = route({ pathname: '/address/[hash]', query: { ...props.query, hash } });
   }
 
   const content = (() => {

ui/tokens/TokensListItem.tsx

@@ -7,7 +7,7 @@ import type { TokenInfo } from 'types/api/token';
 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 AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TokenLogo from 'ui/shared/TokenLogo';
 
@@ -56,14 +56,14 @@ const TokensTableItem = ({
           </Skeleton>
         </GridItem>
       </Grid>
-      <Flex justifyContent="space-between" alignItems="center" width="100%">
-        <Flex alignItems="center" width="136px" justifyContent="space-between" ml={ 8 } mt="-8px">
-          <Flex alignItems="center">
-            <AddressLink fontSize="sm" hash={ address } type="address" truncation="constant" isLoading={ isLoading }/>
-            <CopyToClipboard text={ address } isLoading={ isLoading }/>
-          </Flex>
-          <AddressAddToWallet token={ token } isLoading={ isLoading }/>
-        </Flex>
+      <Flex justifyContent="space-between" alignItems="center" width="150px" ml={ 8 } mt={ -2 }>
+        <AddressEntity
+          address={{ hash: address }}
+          isLoading={ isLoading }
+          truncation="constant"
+          noIcon
+        />
+        <AddressAddToWallet token={ token } isLoading={ isLoading }/>
       </Flex>
       { exchangeRate && (
         <HStack spacing={ 3 }>

ui/tx/TxDetails.tsx

@@ -39,7 +39,6 @@ import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import RawInputData from 'ui/shared/RawInputData';
 import TextSeparator from 'ui/shared/TextSeparator';
-import TruncatedValue from 'ui/shared/TruncatedValue';
 import TxStatus from 'ui/shared/TxStatus';
 import Utilization from 'ui/shared/Utilization/Utilization';
 import TxDetailsActions from 'ui/tx/details/TxDetailsActions';
@@ -235,7 +234,7 @@ const TxDetails = () => {
           { toAddress ? (
             <>
               { data.to && data.to.hash ? (
-                <Flex flexWrap="nowrap" alignItems="center" w="100%">
+                <Flex flexWrap="nowrap" alignItems="center" maxW="100%">
                   <AddressEntity
                     address={ toAddress }
                     isLoading={ isPlaceholderData }
@@ -256,7 +255,6 @@ const TxDetails = () => {
                   { executionFailedBadge }
                 </Flex>
               ) }
-              { toAddress.name && <TruncatedValue value={ toAddress.name }/> }
               { addressToTags.length > 0 && (
                 <Flex columnGap={ 3 }>
                   { addressToTags }
@@ -281,6 +279,7 @@ const TxDetails = () => {
             currency={ config.chain.currency.symbol }
             exchangeRate={ data.exchange_rate }
             isLoading={ isPlaceholderData }
+            flexWrap="wrap"
           />
         </DetailsInfoItem>
         <DetailsInfoItem

ui/tx/details/TxDetailsAction.tsx

@@ -8,7 +8,7 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import uniswapIcon from 'icons/uniswap.svg';
-import AddressLink from 'ui/shared/address/AddressLink';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 
 interface Props {
@@ -114,7 +114,12 @@ const TxDetailsAction = ({ action }: Props) => {
               rowGap={ 2 }
             />
             <chakra.span> to </chakra.span>
-            <AddressLink hash={ data.to } type="address" truncation="constant"/>
+            <AddressEntity
+              address={{ hash: data.to }}
+              truncation="constant"
+              noIcon
+              noCopy
+            />
           </Flex>
 
           <Flex columnGap={ 1 } rowGap={ 2 } pl={ 3 } flexDirection="column" mt={ 2 }>

ui/tx/details/TxDetailsTokenTransfer.tsx

@@ -5,8 +5,8 @@ import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPay
 
 import rightArrowIcon from 'icons/arrows/east.svg';
 import { space } from 'lib/html-entities';
-import AddressLink from 'ui/shared/address/AddressLink';
 import CurrencyValue from 'ui/shared/CurrencyValue';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
 import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet';
 
@@ -70,10 +70,10 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
       flexDir="row"
       w="100%"
     >
-      <Flex alignItems="center">
-        <AddressLink type="address" fontWeight="500" hash={ data.from.hash } truncation="constant"/>
+      <Flex alignItems="center" fontWeight="500">
+        <AddressEntity address={ data.from } truncation="constant" noIcon maxW="150px"/>
         <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-        <AddressLink type="address" fontWeight="500" hash={ data.to.hash } truncation="constant"/>
+        <AddressEntity address={ data.to } truncation="constant" noIcon maxW="150px"/>
       </Flex>
       <Flex flexDir="column" rowGap={ 5 } w="100%" overflow="hidden">
         { content }