tooltip for address

ui/shared/AddressLinkWithTooltip.tsx

 import React from 'react';
 
-import { HStack, Link, Box, Tooltip } from '@chakra-ui/react';
+import { HStack, Link } from '@chakra-ui/react';
 
 import AddressWithDots from './AddressWithDots';
 import CopyToClipboard from './CopyToClipboard';
@@ -14,9 +14,7 @@ const AddressLinkWithTooltip = ({ address }: {address: string}) => {
         fontWeight={ 600 }
         lineHeight="24px"
       >
-        <Tooltip label={ address }>
-          <Box overflow="hidden"><AddressWithDots address={ address }/></Box>
-        </Tooltip>
+        <AddressWithDots address={ address }/>
       </Link>
       <CopyToClipboard text={ address }/>
     </HStack>

ui/shared/AddressWithDots.tsx

@@ -9,6 +9,7 @@
 // so i did it with js
 
 import React, { useCallback, useEffect, useRef } from 'react';
+import { Tooltip } from '@chakra-ui/react'
 import _debounce from 'lodash/debounce';
 
 const TAIL_LENGTH = 4;
@@ -16,6 +17,7 @@ const HEAD_MIN_LENGTH = 4;
 
 const AddressWithDots = ({ address }: {address: string}) => {
   const addressRef = useRef<HTMLSpanElement>(null);
+  const [ displayedAddress, setAddress ] = React.useState(address);
 
   const calculateString = useCallback(() => {
     const addressEl = addressRef.current;
@@ -40,13 +42,14 @@ const AddressWithDots = ({ address }: {address: string}) => {
         const res = address.slice(0, address.length - i - TAIL_LENGTH) + '...' + address.slice(-TAIL_LENGTH);
         shadowEl.textContent = res;
         if (getWidth(shadowEl) < parentWidth || i === address.length - TAIL_LENGTH - HEAD_MIN_LENGTH) {
-          addressRef.current.textContent = res;
+          setAddress(res);
           break;
         }
       }
     } else {
-      addressRef.current.textContent = address;
+      setAddress(address);
     }
+
     parent.removeChild(shadowEl);
   }, [ address ]);
 
@@ -58,11 +61,21 @@ const AddressWithDots = ({ address }: {address: string}) => {
       window.removeEventListener('resize', resizeHandler)
     };
   }, [ calculateString ]);
-  return <span ref={ addressRef }>{ address }</span>;
+
+  const content = <span ref={ addressRef }>{ displayedAddress }</span>;
+  const isTruncated = address.length !== displayedAddress.length;
+
+  if (isTruncated) {
+    return (
+      <Tooltip label={ address }>{ content }</Tooltip>
+    )
+  }
+
+  return content;
 }
 
 function getWidth(el: HTMLElement) {
   return el.getBoundingClientRect().width;
 }
 
-export default AddressWithDots;
+export default React.memo(AddressWithDots);