refactor to new composed component

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 useBasePath from 'lib/hooks/useBasePath';
-import HashStringShorten from 'ui/shared/HashStringShorten';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-
-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 basePath = useBasePath();
-  let url;
-  if (type === 'transaction') {
-    url = basePath + '/tx/' + address;
-  } else if (type === 'token') {
-    url = basePath + '/address/' + address + '/tokens#address-tabs';
-  } else {
-    url = basePath + '/address/' + 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"
-      >
-        { truncated ?
-          <HashStringShorten address={ address }/> :
-          <HashStringShortenDynamic address={ address } fontWeight={ styles.fontWeight || FONT_WEIGHT }/>
-        }
-      </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';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 interface Props {
   address: string;
@@ -11,13 +14,16 @@ 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 hash={ address }>
+        <AddressIcon hash={ address }/>
+        <AddressLink fontWeight="600" ml={ 2 }>
+          <HashStringShortenDynamic fontWeight="600"/>
+        </AddressLink>
+        <CopyToClipboard 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

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

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,25 +20,20 @@ const TAIL_LENGTH = 4;
 const HEAD_MIN_LENGTH = 4;
 
 interface Props {
-  address: string;
+  hash?: string;
   fontWeight?: string | number;
 }
 
-const HashStringShortenDynamic = ({ address, fontWeight = '400' }: Props) => {
-  const addressRef = useRef<HTMLSpanElement>(null);
-  const [ displayedAddress, setAddress ] = React.useState(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;
     }
@@ -46,25 +41,25 @@ const HashStringShortenDynamic = ({ address, fontWeight = '400' }: 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
@@ -83,12 +78,12 @@ const HashStringShortenDynamic = ({ address, fontWeight = '400' }: Props) => {
     };
   }, [ calculateString ]);
 
-  const content = <span ref={ addressRef }>{ displayedAddress }</span>;
-  const isTruncated = 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>
     );
   }
 

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

ui/shared/address/Address.tsx

+import { Flex, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  hash: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const Address = ({ children, className, ...props }: Props) => {
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, { ...props, text: props.hash } as Partial<unknown>);
+    }
+
+    return child;
+  });
+
+  return <Flex alignItems="center" overflow="hidden" className={ className }>{ childrenWithProps }</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 || 'random') }/>
+    </Box>
+  );
+};
+
+export default chakra(AddressIcon);

ui/shared/address/AddressLink.tsx

+import { Link, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import useBasePath from 'lib/hooks/useBasePath';
+
+interface Props {
+  children: React.ReactNode;
+  type?: 'address' | 'transaction' | 'token';
+  hash?: string;
+  className?: string;
+}
+
+const AddressLink = ({ children, type, className, ...props }: Props) => {
+  const basePath = useBasePath();
+  let url;
+  if (type === 'transaction') {
+    url = basePath + '/tx/' + props.hash;
+  } else if (type === 'token') {
+    url = basePath + '/address/' + props.hash + '/tokens#address-tabs';
+  } else {
+    url = basePath + '/address/' + props.hash;
+  }
+
+  const childrenWithProps = React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, { ...props });
+    }
+
+    return child;
+  });
+
+  return (
+    <Link
+      className={ className }
+      href={ url }
+      target="_blank"
+      overflow="hidden"
+      whiteSpace="nowrap"
+    >
+      { childrenWithProps }
+    </Link>
+  );
+};
+
+const AddressLinkChakra = chakra(AddressLink);
+
+export default React.memo(AddressLinkChakra);

ui/tx/TokenTransfer.tsx

@@ -3,7 +3,8 @@ 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 HashStringShorten from 'ui/shared/HashStringShorten';
 import Token from 'ui/shared/Token';
 
 interface Props {
@@ -17,9 +18,13 @@ 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 }>
+        <HashStringShorten/>
+      </AddressLink>
       <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-      <AddressLinkWithTooltip address={ to } fontWeight="500" truncated withCopy={ false }/>
+      <AddressLink fontWeight="500" hash={ to }>
+        <HashStringShorten/>
+      </AddressLink>
       <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';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 interface RowProps {
   children: React.ReactNode;
@@ -109,10 +111,20 @@ const TxDecodedInputData = () => {
         Data
       </GridItem>
       <TableRow name="from" type="address">
-        <AddressLinkWithTooltip address="0x0000000000000000000000000000000000000000" columnGap={ 0 } justifyContent="space-between" fontWeight="400"/>
+        <Address hash="0x0000000000000000000000000000000000000000" justifyContent="space-between">
+          <AddressLink>
+            <HashStringShortenDynamic/>
+          </AddressLink>
+          <CopyToClipboard/>
+        </Address>
       </TableRow>
       <TableRow name="from" type="address">
-        <AddressLinkWithTooltip address="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718" columnGap={ 0 } justifyContent="space-between" fontWeight="400"/>
+        <Address hash="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718" justifyContent="space-between">
+          <AddressLink>
+            <HashStringShortenDynamic/>
+          </AddressLink>
+          <CopyToClipboard/>
+        </Address>
       </TableRow>
       <TableRow name="tokenId" type="uint256" isLast>
         <Flex alignItems="center" justifyContent="space-between">

ui/tx/TxDetails.tsx

@@ -7,10 +7,12 @@ 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 HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import RawInputData from 'ui/shared/RawInputData';
 import Token from 'ui/shared/Token';
 import Utilization from 'ui/shared/Utilization';
@@ -77,15 +79,25 @@ 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 hash={ tx.address_from }>
+          <AddressIcon/>
+          <AddressLink ml={ 2 }>
+            <HashStringShortenDynamic/>
+          </AddressLink>
+          <CopyToClipboard/>
+        </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 hash={ tx.address_to }>
+          <AddressIcon/>
+          <AddressLink ml={ 2 }>
+            <HashStringShortenDynamic/>
+          </AddressLink>
+          <CopyToClipboard/>
+        </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/internals/TxInternalsTableItem.tsx

@@ -3,8 +3,10 @@ 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 HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import TxStatus from 'ui/tx/TxStatus';
 
 interface Props {
@@ -25,15 +27,23 @@ const TxInternalTableItem = ({ type, status, from, to, value, gasLimit }: Props)
       </Td>
       <Td pr="0">
         <Flex alignItems="center">
-          <AddressIcon address={ from }/>
-          <AddressLinkWithTooltip address={ from } fontWeight="500" withCopy={ false } ml={ 2 }/>
+          <Address hash={ from }>
+            <AddressIcon/>
+            <AddressLink ml={ 2 } fontWeight="500">
+              <HashStringShortenDynamic/>
+            </AddressLink>
+          </Address>
           <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
         </Flex>
       </Td>
       <Td pl="0">
         <Flex alignItems="center">
-          <AddressIcon address={ to }/>
-          <AddressLinkWithTooltip address={ to } fontWeight="500" withCopy={ false } ml={ 2 }/>
+          <Address hash={ to }>
+            <AddressIcon/>
+            <AddressLink ml={ 2 } fontWeight="500">
+              <HashStringShortenDynamic/>
+            </AddressLink>
+          </Address>
         </Flex>
       </Td>
       <Td isNumeric>

ui/tx/logs/TxLogItem.tsx

@@ -2,8 +2,10 @@ 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 HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import TxLogTopic from 'ui/tx/logs/TxLogTopic';
 import DecodedInputData from 'ui/tx/TxDecodedInputData';
 
@@ -24,8 +26,12 @@ 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 hash={ address }>
+          <AddressIcon/>
+          <AddressLink ml={ 2 }>
+            <HashStringShortenDynamic/>
+          </AddressLink>
+        </Address>
         <Tooltip label="Find matches topic">
           <Link ml={ 2 }>
             <SearchIcon w={ 5 } h={ 5 }/>