review fixes

ui/shared/AddressSnippet.tsx

@@ -5,7 +5,6 @@ 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;
@@ -15,12 +14,10 @@ interface Props {
 const AddressSnippet = ({ address, subtitle }: Props) => {
   return (
     <Box maxW="100%">
-      <Address hash={ address }>
+      <Address>
         <AddressIcon hash={ address }/>
-        <AddressLink fontWeight="600" ml={ 2 }>
-          <HashStringShortenDynamic fontWeight="600"/>
-        </AddressLink>
-        <CopyToClipboard ml={ 1 }/>
+        <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

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 
 import CopyIcon from 'icons/copy.svg';
 
-const CopyToClipboard = ({ text = '', className }: {text?: string; className?: string}) => {
+const CopyToClipboard = ({ text, className }: {text: string; className?: string}) => {
   const { hasCopied, onCopy } = useClipboard(text, 3000);
   const [ copied, setCopied ] = useState(false);
 

ui/shared/HashStringShorten.tsx

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

ui/shared/HashStringShortenDynamic.tsx

@@ -20,11 +20,11 @@ const TAIL_LENGTH = 4;
 const HEAD_MIN_LENGTH = 4;
 
 interface Props {
-  hash?: string;
+  hash: string;
   fontWeight?: string | number;
 }
 
-const HashStringShortenDynamic = ({ hash = '', fontWeight = '400' }: Props) => {
+const HashStringShortenDynamic = ({ hash, fontWeight = '400' }: Props) => {
   const elementRef = useRef<HTMLSpanElement>(null);
   const [ displayedString, setDisplayedString ] = React.useState(hash);
 

ui/shared/TransactionSnippet.tsx

@@ -5,7 +5,6 @@ import transactionIcon from 'icons/transactions.svg';
 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;
@@ -13,12 +12,10 @@ interface Props {
 
 const TransactionSnippet = ({ hash }: Props) => {
   return (
-    <Address hash={ hash } maxW="100%">
+    <Address maxW="100%">
       <Icon as={ transactionIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') }/>
-      <AddressLink fontWeight="600" type="transaction" ml={ 2 }>
-        <HashStringShortenDynamic fontWeight="600"/>
-      </AddressLink>
-      <CopyToClipboard ml={ 1 }/>
+      <AddressLink hash={ hash } fontWeight="600" type="transaction" ml={ 2 }/>
+      <CopyToClipboard text={ hash } ml={ 1 }/>
     </Address>
   );
 };

ui/shared/address/Address.tsx

@@ -2,21 +2,12 @@ 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 Address = ({ children, className }: Props) => {
+  return <Flex alignItems="center" overflow="hidden" className={ className }>{ children }</Flex>;
 };
 
 const AddressChakra = chakra(Address);

ui/shared/address/AddressIcon.tsx

@@ -2,10 +2,10 @@ 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}) => {
+const AddressIcon = ({ hash, className }: {hash: string; className?: string}) => {
   return (
     <Box className={ className } width="24px" display="inline-flex">
-      <Jazzicon diameter={ 24 } seed={ jsNumberForAddress(hash || 'random') }/>
+      <Jazzicon diameter={ 24 } seed={ jsNumberForAddress(hash) }/>
     </Box>
   );
 };

ui/shared/address/AddressLink.tsx

-import { Link, chakra } from '@chakra-ui/react';
+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 {
-  children: React.ReactNode;
   type?: 'address' | 'transaction' | 'token';
-  hash?: string;
   className?: string;
+  hash: string;
+  truncation?: 'constant' | 'dynamic'| 'none';
+  fontWeight?: string;
 }
 
-const AddressLink = ({ children, type, className, ...props }: Props) => {
+const AddressLink = ({ type, className, truncation = 'dynamic', hash, fontWeight }: Props) => {
   const link = useLink();
   let url;
   if (type === 'transaction') {
-    url = link('tx_index', { id: props.hash });
+    url = link('tx_index', { id: hash });
   } else if (type === 'token') {
-    url = link('token_index', { id: props.hash });
+    url = link('token_index', { id: hash });
   } else {
-    url = link('address_index', { id: props.hash });
+    url = link('address_index', { id: hash });
   }
 
-  const childrenWithProps = React.Children.map(children, child => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, { ...props });
+  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 child;
-  });
+  })();
 
   return (
     <Link
@@ -37,11 +43,22 @@ const AddressLink = ({ children, type, className, ...props }: Props) => {
       overflow="hidden"
       whiteSpace="nowrap"
     >
-      { childrenWithProps }
+      { content }
     </Link>
   );
 };
 
-const AddressLinkChakra = chakra(AddressLink);
+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

@@ -4,7 +4,6 @@ import React from 'react';
 import rightArrowIcon from 'icons/arrows/right.svg';
 import { space } from 'lib/html-entities';
 import AddressLink from 'ui/shared/address/AddressLink';
-import HashStringShorten from 'ui/shared/HashStringShorten';
 import Token from 'ui/shared/Token';
 
 interface Props {
@@ -18,13 +17,9 @@ interface Props {
 const TokenTransfer = ({ from, to, amount, usd, token }: Props) => {
   return (
     <Center>
-      <AddressLink fontWeight="500" hash={ from }>
-        <HashStringShorten/>
-      </AddressLink>
+      <AddressLink fontWeight="500" hash={ from } truncation="constant"/>
       <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-      <AddressLink fontWeight="500" hash={ to }>
-        <HashStringShorten/>
-      </AddressLink>
+      <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

@@ -4,7 +4,6 @@ import React from 'react';
 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;
@@ -111,19 +110,15 @@ const TxDecodedInputData = () => {
         Data
       </GridItem>
       <TableRow name="from" type="address">
-        <Address hash="0x0000000000000000000000000000000000000000" justifyContent="space-between">
-          <AddressLink>
-            <HashStringShortenDynamic/>
-          </AddressLink>
-          <CopyToClipboard/>
+        <Address justifyContent="space-between">
+          <AddressLink hash="0x0000000000000000000000000000000000000000"/>
+          <CopyToClipboard text="0x0000000000000000000000000000000000000000"/>
         </Address>
       </TableRow>
       <TableRow name="from" type="address">
-        <Address hash="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718" justifyContent="space-between">
-          <AddressLink>
-            <HashStringShortenDynamic/>
-          </AddressLink>
-          <CopyToClipboard/>
+        <Address justifyContent="space-between">
+          <AddressLink hash="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718"/>
+          <CopyToClipboard text="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718"/>
         </Address>
       </TableRow>
       <TableRow name="tokenId" type="uint256" isLast>

ui/tx/TxDetails.tsx

@@ -12,7 +12,6 @@ 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';
@@ -79,24 +78,20 @@ const TxDetails = () => {
         hint="Address (external or contract) sending the transaction."
         mt={ 8 }
       >
-        <Address hash={ tx.address_from }>
-          <AddressIcon/>
-          <AddressLink ml={ 2 }>
-            <HashStringShortenDynamic/>
-          </AddressLink>
-          <CopyToClipboard/>
+        <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."
       >
-        <Address hash={ tx.address_to }>
-          <AddressIcon/>
-          <AddressLink ml={ 2 }>
-            <HashStringShortenDynamic/>
-          </AddressLink>
-          <CopyToClipboard/>
+        <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"/>

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';
 
@@ -6,7 +6,6 @@ import rightArrowIcon from 'icons/arrows/right.svg';
 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 {
@@ -26,25 +25,17 @@ const TxInternalTableItem = ({ type, status, from, to, value, gasLimit }: Props)
         <TxStatus status={ status }/>
       </Td>
       <Td pr="0">
-        <Flex alignItems="center">
-          <Address hash={ from }>
-            <AddressIcon/>
-            <AddressLink ml={ 2 } fontWeight="500">
-              <HashStringShortenDynamic/>
-            </AddressLink>
+        <Address>
+          <AddressIcon hash={ from }/>
+          <AddressLink ml={ 2 } fontWeight="500" hash={ from }/>
+          <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } flexShrink={ 0 } color="gray.500"/>
         </Address>
-          <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-        </Flex>
       </Td>
       <Td pl="0">
-        <Flex alignItems="center">
-          <Address hash={ to }>
-            <AddressIcon/>
-            <AddressLink ml={ 2 } fontWeight="500">
-              <HashStringShortenDynamic/>
-            </AddressLink>
+        <Address>
+          <AddressIcon hash={ to }/>
+          <AddressLink ml={ 2 } fontWeight="500" hash={ to }/>
         </Address>
-        </Flex>
       </Td>
       <Td isNumeric>
         { value }

ui/tx/logs/TxLogItem.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 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';
 
@@ -26,11 +25,9 @@ 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">
-        <Address hash={ address }>
-          <AddressIcon/>
-          <AddressLink ml={ 2 }>
-            <HashStringShortenDynamic/>
-          </AddressLink>
+        <Address>
+          <AddressIcon hash={ address }/>
+          <AddressLink hash={ address } ml={ 2 }/>
         </Address>
         <Tooltip label="Find matches topic">
           <Link ml={ 2 }>

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">