Merge pull request #152 from blockscout/refactor-address

refactor everything about address ui

theme/components/Tag.ts

@@ -33,7 +33,7 @@ const sizes = {
 };
 
 const baseStyleContainer = defineStyle({
-  display: 'inline-flex',
+  display: 'inline-block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   borderRadius: 'sm',

ui/shared/AddressIcon.tsx

-import { Box } from '@chakra-ui/react';
-import React from 'react';
-import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
-
-const AddressIcon = ({ address }: {address: string}) => {
-  return (
-    <Box width="24px" display="inline-flex">
-      <Jazzicon diameter={ 24 } seed={ jsNumberForAddress(address) }/>
-    </Box>
-  );
-};
-
-export default AddressIcon;

ui/shared/AddressLinkWithTooltip.tsx

-import { Flex, Link } from '@chakra-ui/react';
-import type { HTMLChakraProps } from '@chakra-ui/system';
-import React from 'react';
-
-import useLink from 'lib/link/useLink';
-
-import AddressWithDots from './AddressWithDots';
-import CopyToClipboard from './CopyToClipboard';
-
-const FONT_WEIGHT = '600';
-
-interface Props extends HTMLChakraProps<'div'> {
-  address: string;
-  type?: 'address' | 'transaction' | 'token';
-  fontWeight?: string;
-  truncated?: boolean;
-  withCopy?: boolean;
-}
-
-const AddressLinkWithTooltip = ({ address, type = 'address', truncated, withCopy = true, ...styles }: Props) => {
-  const link = useLink();
-
-  let url;
-  if (type === 'transaction') {
-    url = link('tx_index', { id: address });
-  } else if (type === 'token') {
-    url = link('token_index', { id: address });
-  } else {
-    url = link('address_index', { id: address });
-  }
-  return (
-    <Flex columnGap={ 2 } alignItems="center" overflow="hidden" maxW="100%" { ...styles }>
-      <Link
-        href={ url }
-        target="_blank"
-        overflow="hidden"
-        fontWeight={ styles.fontWeight || FONT_WEIGHT }
-        lineHeight="24px"
-        whiteSpace="nowrap"
-      >
-        <AddressWithDots address={ address } fontWeight={ styles.fontWeight || FONT_WEIGHT } truncated={ truncated }/>
-      </Link>
-      { withCopy && <CopyToClipboard text={ address }/> }
-    </Flex>
-  );
-};
-
-export default React.memo(AddressLinkWithTooltip);

ui/shared/AddressSnippet.tsx

-import { Box, HStack, Text } from '@chakra-ui/react';
+import { Text, Box } from '@chakra-ui/react';
 import React from 'react';
 
-import AddressIcon from 'ui/shared/AddressIcon';
-import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import Address from 'ui/shared/address/Address';
+import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
 interface Props {
   address: string;
@@ -11,13 +13,14 @@ interface Props {
 
 const AddressSnippet = ({ address, subtitle }: Props) => {
   return (
-    <HStack spacing={ 4 } key={ address } overflow="hidden" alignItems="start" maxW="100%">
-      <AddressIcon address={ address }/>
-      <Box overflow="hidden">
-        <AddressLinkWithTooltip address={ address }/>
-        { subtitle && <Text fontSize="sm" variant="secondary" mt={ 0.5 }>{ subtitle }</Text> }
-      </Box>
-    </HStack>
+    <Box maxW="100%">
+      <Address>
+        <AddressIcon hash={ address }/>
+        <AddressLink hash={ address } fontWeight="600" ml={ 2 }/>
+        <CopyToClipboard text={ address } ml={ 1 }/>
+      </Address>
+      { subtitle && <Text fontSize="sm" variant="secondary" mt={ 0.5 } ml={{ base: 0, lg: 8 }}>{ subtitle }</Text> }
+    </Box>
   );
 };
 

ui/shared/CopyToClipboard.tsx

-import { IconButton, Tooltip, useClipboard } from '@chakra-ui/react';
+import { IconButton, Tooltip, useClipboard, chakra } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 
 import CopyIcon from 'icons/copy.svg';
 
-const CopyToClipboard = ({ text }: {text: string}) => {
+const CopyToClipboard = ({ text, className }: {text: string; className?: string}) => {
   const { hasCopied, onCopy } = useClipboard(text, 3000);
   const [ copied, setCopied ] = useState(false);
 
@@ -26,9 +26,10 @@ const CopyToClipboard = ({ text }: {text: string}) => {
         display="inline-block"
         flexShrink={ 0 }
         onClick={ onCopy }
+        className={ className }
       />
     </Tooltip>
   );
 };
 
-export default CopyToClipboard;
+export default chakra(CopyToClipboard);

ui/shared/HashStringShorten.tsx

+import { Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  hash: string;
+}
+
+const HashStringShorten = ({ hash }: Props) => {
+  return (
+    <Tooltip label={ hash }>
+      { hash.slice(0, 4) + '...' + hash.slice(-4) }
+    </Tooltip>
+  );
+};
+
+export default HashStringShorten;

ui/shared/AddressWithDots.tsx → ui/shared/HashStringShortenDynamic.tsx

-// this component trims address like 0x123...4567 (always 4 chars after dots)
-// or shows full address, if fits
+// this component trims hash string like 0x123...4567 (always 4 chars after dots)
+// or shows full hash string, if fits
 
 // i can't do this with pure css. if you can, feel free to replace it
 
@@ -20,28 +20,20 @@ const TAIL_LENGTH = 4;
 const HEAD_MIN_LENGTH = 4;
 
 interface Props {
-  address: string;
-  fontWeight: string | number;
-  truncated?: boolean;
+  hash: string;
+  fontWeight?: string | number;
 }
 
-const shortenAddress = (address: string) => address.slice(0, 4) + '...' + address.slice(-4);
-
-const AddressWithDots = ({ address, fontWeight, truncated }: Props) => {
-  const addressRef = useRef<HTMLSpanElement>(null);
-  const [ displayedAddress, setAddress ] = React.useState(truncated ? shortenAddress(address) : address);
+const HashStringShortenDynamic = ({ hash, fontWeight = '400' }: Props) => {
+  const elementRef = useRef<HTMLSpanElement>(null);
+  const [ displayedString, setDisplayedString ] = React.useState(hash);
 
   const isFontFaceLoaded = useFontFaceObserver([
     { family: BODY_TYPEFACE, weight: String(fontWeight) as FontFace['weight'] },
   ]);
 
   const calculateString = useCallback(() => {
-    const addressEl = addressRef.current;
-    if (!addressEl) {
-      return;
-    }
-
-    const parent = addressRef?.current?.parentNode as HTMLElement;
+    const parent = elementRef?.current?.parentNode as HTMLElement;
     if (!parent) {
       return;
     }
@@ -49,51 +41,49 @@ const AddressWithDots = ({ address, fontWeight, truncated }: Props) => {
     const shadowEl = document.createElement('span');
     shadowEl.style.opacity = '0';
     parent.appendChild(shadowEl);
-    shadowEl.textContent = address;
+    shadowEl.textContent = hash;
 
     const parentWidth = getWidth(parent);
 
     if (getWidth(shadowEl) > parentWidth) {
-      for (let i = 1; i <= address.length - TAIL_LENGTH - HEAD_MIN_LENGTH; i++) {
-        const res = address.slice(0, address.length - i - TAIL_LENGTH) + '...' + address.slice(-TAIL_LENGTH);
+      for (let i = 1; i <= hash.length - TAIL_LENGTH - HEAD_MIN_LENGTH; i++) {
+        const res = hash.slice(0, hash.length - i - TAIL_LENGTH) + '...' + hash.slice(-TAIL_LENGTH);
         shadowEl.textContent = res;
-        if (getWidth(shadowEl) < parentWidth || i === address.length - TAIL_LENGTH - HEAD_MIN_LENGTH) {
-          setAddress(res);
+        if (getWidth(shadowEl) < parentWidth || i === hash.length - TAIL_LENGTH - HEAD_MIN_LENGTH) {
+          setDisplayedString(res);
           break;
         }
       }
     } else {
-      setAddress(address);
+      setDisplayedString(hash);
     }
 
     parent.removeChild(shadowEl);
-  }, [ address ]);
+  }, [ hash ]);
 
   // we want to do recalculation when isFontFaceLoaded flag is changed
   // but we don't want to create more resize event listeners
   // that's why there are separate useEffect hooks
   useEffect(() => {
-    !truncated && calculateString();
-  }, [ calculateString, isFontFaceLoaded, truncated ]);
+    calculateString();
+  }, [ calculateString, isFontFaceLoaded ]);
 
   useEffect(() => {
-    if (!truncated) {
-      const resizeHandler = _debounce(calculateString, 100);
-      const resizeObserver = new ResizeObserver(resizeHandler);
-
-      resizeObserver.observe(document.body);
-      return function cleanup() {
-        resizeObserver.unobserve(document.body);
-      };
-    }
-  }, [ calculateString, truncated ]);
+    const resizeHandler = _debounce(calculateString, 100);
+    const resizeObserver = new ResizeObserver(resizeHandler);
+
+    resizeObserver.observe(document.body);
+    return function cleanup() {
+      resizeObserver.unobserve(document.body);
+    };
+  }, [ calculateString ]);
 
-  const content = <span ref={ addressRef }>{ displayedAddress }</span>;
-  const isTruncated = truncated || address.length !== displayedAddress.length;
+  const content = <span ref={ elementRef }>{ displayedString }</span>;
+  const isTruncated = hash.length !== displayedString.length;
 
   if (isTruncated) {
     return (
-      <Tooltip label={ address }>{ content }</Tooltip>
+      <Tooltip label={ hash }>{ content }</Tooltip>
     );
   }
 
@@ -104,4 +94,4 @@ function getWidth(el: HTMLElement) {
   return el.getBoundingClientRect().width;
 }
 
-export default React.memo(AddressWithDots);
+export default React.memo(HashStringShortenDynamic);

ui/shared/TransactionSnippet.tsx

-import { Box, HStack, Icon, useColorModeValue } from '@chakra-ui/react';
+import { Icon, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import transactionIcon from 'icons/transactions.svg';
-import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import Address from 'ui/shared/address/Address';
+import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
 interface Props {
   hash: string;
@@ -10,12 +12,11 @@ interface Props {
 
 const TransactionSnippet = ({ hash }: Props) => {
   return (
-    <HStack spacing={ 2 } overflow="hidden" alignItems="start" maxW="100%">
+    <Address maxW="100%">
       <Icon as={ transactionIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') }/>
-      <Box overflow="hidden">
-        <AddressLinkWithTooltip address={ hash } type="transaction"/>
-      </Box>
-    </HStack>
+      <AddressLink hash={ hash } fontWeight="600" type="transaction" ml={ 2 }/>
+      <CopyToClipboard text={ hash } ml={ 1 }/>
+    </Address>
   );
 };
 

ui/shared/address/Address.tsx

+import { Flex, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const Address = ({ children, className }: Props) => {
+  return <Flex alignItems="center" overflow="hidden" className={ className }>{ children }</Flex>;
+};
+
+const AddressChakra = chakra(Address);
+
+export default React.memo(AddressChakra);

ui/shared/address/AddressIcon.tsx

+import { Box, chakra } from '@chakra-ui/react';
+import React from 'react';
+import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
+
+const AddressIcon = ({ hash, className }: {hash: string; className?: string}) => {
+  return (
+    <Box className={ className } width="24px" display="inline-flex">
+      <Jazzicon diameter={ 24 } seed={ jsNumberForAddress(hash) }/>
+    </Box>
+  );
+};
+
+export default chakra(AddressIcon);

ui/shared/address/AddressLink.tsx

+import { Link, chakra, shouldForwardProp } from '@chakra-ui/react';
+import React from 'react';
+
+import useLink from 'lib/link/useLink';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+
+interface Props {
+  type?: 'address' | 'transaction' | 'token';
+  className?: string;
+  hash: string;
+  truncation?: 'constant' | 'dynamic'| 'none';
+  fontWeight?: string;
+}
+
+const AddressLink = ({ type, className, truncation = 'dynamic', hash, fontWeight }: Props) => {
+  const link = useLink();
+  let url;
+  if (type === 'transaction') {
+    url = link('tx_index', { id: hash });
+  } else if (type === 'token') {
+    url = link('token_index', { id: hash });
+  } else {
+    url = link('address_index', { id: hash });
+  }
+
+  const content = (() => {
+    switch (truncation) {
+      case 'constant':
+        return <HashStringShorten hash={ hash }/>;
+      case 'dynamic':
+        return <HashStringShortenDynamic hash={ hash } fontWeight={ fontWeight }/>;
+      case 'none':
+        return <span>{ hash }</span>;
+    }
+  })();
+
+  return (
+    <Link
+      className={ className }
+      href={ url }
+      target="_blank"
+      overflow="hidden"
+      whiteSpace="nowrap"
+    >
+      { content }
+    </Link>
+  );
+};
+
+const AddressLinkChakra = chakra(AddressLink, {
+  shouldForwardProp: (prop) => {
+    const isChakraProp = !shouldForwardProp(prop);
+
+    // forward fontWeight to the AddressLink since it's needed for underlying HashStringShortenDynamic component
+    if (isChakraProp && prop !== 'fontWeight') {
+      return false;
+    }
+
+    return true;
+  },
+});
+
+export default React.memo(AddressLinkChakra);

ui/tx/TokenTransfer.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import rightArrowIcon from 'icons/arrows/right.svg';
 import { space } from 'lib/html-entities';
-import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import AddressLink from 'ui/shared/address/AddressLink';
 import Token from 'ui/shared/Token';
 
 interface Props {
@@ -17,9 +17,9 @@ interface Props {
 const TokenTransfer = ({ from, to, amount, usd, token }: Props) => {
   return (
     <Center>
-      <AddressLinkWithTooltip address={ from } fontWeight="500" truncated withCopy={ false }/>
+      <AddressLink fontWeight="500" hash={ from } truncation="constant"/>
       <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-      <AddressLinkWithTooltip address={ to } fontWeight="500" truncated withCopy={ false }/>
+      <AddressLink fontWeight="500" hash={ to } truncation="constant"/>
       <Text fontWeight={ 500 } as="span" ml={ 4 }>For:{ space }
         <Text fontWeight={ 600 } as="span">{ amount }</Text>{ space }
         <Text fontWeight={ 400 } variant="secondary" as="span">(${ usd.toFixed(2) })</Text>

ui/tx/TxDecodedInputData.tsx

 import { Flex, Text, Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import Address from 'ui/shared/address/Address';
+import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
 interface RowProps {
@@ -109,10 +110,16 @@ const TxDecodedInputData = () => {
         Data
       </GridItem>
       <TableRow name="from" type="address">
-        <AddressLinkWithTooltip address="0x0000000000000000000000000000000000000000" columnGap={ 0 } justifyContent="space-between" fontWeight="400"/>
+        <Address justifyContent="space-between">
+          <AddressLink hash="0x0000000000000000000000000000000000000000"/>
+          <CopyToClipboard text="0x0000000000000000000000000000000000000000"/>
+        </Address>
       </TableRow>
       <TableRow name="from" type="address">
-        <AddressLinkWithTooltip address="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718" columnGap={ 0 } justifyContent="space-between" fontWeight="400"/>
+        <Address justifyContent="space-between">
+          <AddressLink hash="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718"/>
+          <CopyToClipboard text="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718"/>
+        </Address>
       </TableRow>
       <TableRow name="tokenId" type="uint256" isLast>
         <Flex alignItems="center" justifyContent="space-between">

ui/tx/TxDetails.tsx

@@ -7,8 +7,9 @@ import clockIcon from 'icons/clock.svg';
 import flameIcon from 'icons/flame.svg';
 import successIcon from 'icons/status/success.svg';
 import dayjs from 'lib/date/dayjs';
-import AddressIcon from 'ui/shared/AddressIcon';
-import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+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 RawInputData from 'ui/shared/RawInputData';
@@ -77,15 +78,21 @@ const TxDetails = () => {
         hint="Address (external or contract) sending the transaction."
         mt={ 8 }
       >
-        <AddressIcon address={ tx.address_from }/>
-        <AddressLinkWithTooltip address={ tx.address_from } columnGap={ 0 } ml={ 2 } fontWeight="400"/>
+        <Address>
+          <AddressIcon hash={ tx.address_from }/>
+          <AddressLink ml={ 2 } hash={ tx.address_from }/>
+          <CopyToClipboard text={ tx.address_from }/>
+        </Address>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Interacted with contract"
         hint="Address (external or contract) receiving the transaction."
       >
-        <AddressIcon address={ tx.address_to }/>
-        <AddressLinkWithTooltip address={ tx.address_to } columnGap={ 0 } ml={ 2 } fontWeight="400"/>
+        <Address>
+          <AddressIcon hash={ tx.address_to }/>
+          <AddressLink ml={ 2 } hash={ tx.address_to }/>
+          <CopyToClipboard text={ tx.address_to }/>
+        </Address>
         <Tag colorScheme="orange" variant="solid" ml={ 3 }>SANA</Tag>
         <Icon as={ successIcon } boxSize={ 4 } ml={ 2 } color="green.500"/>
         <Token symbol="USDT" ml={ 3 }/>

ui/tx/TxStatus.tsx

@@ -14,7 +14,7 @@ const TxStatus = ({ status }: Props) => {
   const colorScheme = status === 'success' ? 'green' : 'red';
 
   return (
-    <Tag colorScheme={ colorScheme }>
+    <Tag colorScheme={ colorScheme } display="inline-flex">
       <TagLeftIcon boxSize={ 2.5 } as={ icon }/>
       <TagLabel>{ label }</TagLabel>
     </Tag>

ui/tx/internals/TxInternalsTableItem.tsx

-import { Tr, Td, Tag, Flex, Icon } from '@chakra-ui/react';
+import { Tr, Td, Tag, Icon } from '@chakra-ui/react';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
 
 import rightArrowIcon from 'icons/arrows/right.svg';
-import AddressIcon from 'ui/shared/AddressIcon';
-import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import Address from 'ui/shared/address/Address';
+import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
 import TxStatus from 'ui/tx/TxStatus';
 
 interface Props {
@@ -24,17 +25,17 @@ const TxInternalTableItem = ({ type, status, from, to, value, gasLimit }: Props)
         <TxStatus status={ status }/>
       </Td>
       <Td pr="0">
-        <Flex alignItems="center">
-          <AddressIcon address={ from }/>
-          <AddressLinkWithTooltip address={ from } fontWeight="500" withCopy={ false } ml={ 2 }/>
-          <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-        </Flex>
+        <Address>
+          <AddressIcon hash={ from }/>
+          <AddressLink ml={ 2 } fontWeight="500" hash={ from }/>
+          <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } flexShrink={ 0 } color="gray.500"/>
+        </Address>
       </Td>
       <Td pl="0">
-        <Flex alignItems="center">
-          <AddressIcon address={ to }/>
-          <AddressLinkWithTooltip address={ to } fontWeight="500" withCopy={ false } ml={ 2 }/>
-        </Flex>
+        <Address>
+          <AddressIcon hash={ to }/>
+          <AddressLink ml={ 2 } fontWeight="500" hash={ to }/>
+        </Address>
       </Td>
       <Td isNumeric>
         { value }

ui/tx/logs/TxLogItem.tsx

@@ -2,8 +2,9 @@ import { SearchIcon } from '@chakra-ui/icons';
 import { Text, Grid, GridItem, Link, Tooltip, Button, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import AddressIcon from 'ui/shared/AddressIcon';
-import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import Address from 'ui/shared/address/Address';
+import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
 import TxLogTopic from 'ui/tx/logs/TxLogTopic';
 import DecodedInputData from 'ui/tx/TxDecodedInputData';
 
@@ -24,8 +25,10 @@ const TxLogItem = ({ address, index, topics, data }: Props) => {
     <Grid gridTemplateColumns="200px 1fr" gap={ 8 } py={ 8 } _notFirst={{ borderTopWidth: '1px', borderTopColor: borderColor }}>
       <RowHeader>Address</RowHeader>
       <GridItem display="flex" alignItems="center">
-        <AddressIcon address={ address }/>
-        <AddressLinkWithTooltip address={ address } columnGap={ 0 } ml={ 2 } fontWeight="400" withCopy={ false }/>
+        <Address>
+          <AddressIcon hash={ address }/>
+          <AddressLink hash={ address } ml={ 2 }/>
+        </Address>
         <Tooltip label="Find matches topic">
           <Link ml={ 2 }>
             <SearchIcon w={ 5 } h={ 5 }/>

ui/tx/state/TxStateTableItem.tsx

@@ -7,7 +7,6 @@ import {
   Box,
   Tr,
   Td,
-  Flex,
   Stat,
   StatArrow,
   Portal,
@@ -18,8 +17,9 @@ import React, { useRef } from 'react';
 
 import type { TTxStateItem } from 'data/txState';
 import { nbsp } from 'lib/html-entities';
-import AddressIcon from 'ui/shared/AddressIcon';
-import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
+import Address from 'ui/shared/address/Address';
+import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
 
 import TxStateStorageItem from './TxStateStorageItem';
 
@@ -57,10 +57,10 @@ const TxStateTableItem = ({ txStateItem }: { txStateItem: TTxStateItem }) => {
               </AccordionButton>
             </Td>
             <Td border={ 0 }>
-              <Flex height="30px" alignItems="center">
-                <AddressIcon address={ txStateItem.address }/>
-                <AddressLinkWithTooltip address={ txStateItem.address } fontWeight="500" truncated withCopy={ false } ml={ 2 }/>
-              </Flex>
+              <Address height="30px">
+                <AddressIcon hash={ txStateItem.address }/>
+                <AddressLink hash={ txStateItem.address } fontWeight="500" truncation="constant" ml={ 2 }/>
+              </Address>
             </Td>
             <Td border={ 0 } lineHeight="30px"><Link>{ txStateItem.miner }</Link></Td>
             <Td border={ 0 } isNumeric lineHeight="30px">