disable tooltip for address links on mobile devices

ui/shared/HashStringShorten.tsx

@@ -3,11 +3,12 @@ import React from 'react';
 
 interface Props {
   hash: string;
+  isTooltipDisabled?: boolean;
 }
 
-const HashStringShorten = ({ hash }: Props) => {
+const HashStringShorten = ({ hash, isTooltipDisabled }: Props) => {
   return (
-    <Tooltip label={ hash }>
+    <Tooltip label={ hash } isDisabled={ isTooltipDisabled }>
       { hash.slice(0, 4) + '...' + hash.slice(-4) }
     </Tooltip>
   );

ui/shared/HashStringShortenDynamic.tsx

@@ -22,9 +22,10 @@ const HEAD_MIN_LENGTH = 4;
 interface Props {
   hash: string;
   fontWeight?: string | number;
+  isTooltipDisabled?: boolean;
 }
 
-const HashStringShortenDynamic = ({ hash, fontWeight = '400' }: Props) => {
+const HashStringShortenDynamic = ({ hash, fontWeight = '400', isTooltipDisabled }: Props) => {
   const elementRef = useRef<HTMLSpanElement>(null);
   const [ displayedString, setDisplayedString ] = React.useState(hash);
 
@@ -90,7 +91,7 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400' }: Props) => {
 
   if (isTruncated) {
     return (
-      <Tooltip label={ hash }>{ content }</Tooltip>
+      <Tooltip label={ hash } isDisabled={ isTooltipDisabled }>{ content }</Tooltip>
     );
   }
 

ui/shared/address/AddressLink.tsx

@@ -2,6 +2,7 @@ import { Link, chakra, shouldForwardProp, Tooltip, Box } from '@chakra-ui/react'
 import type { HTMLAttributeAnchorTarget } from 'react';
 import React from 'react';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import link from 'lib/link/link';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
@@ -18,6 +19,8 @@ interface Props {
 }
 
 const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, id, fontWeight, target = '_self' }: Props) => {
+  const isMobile = useIsMobile();
+
   let url;
   if (type === 'transaction') {
     url = link('tx', { id: id || hash });
@@ -34,16 +37,16 @@ const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, id,
   const content = (() => {
     if (alias) {
       return (
-        <Tooltip label={ hash }>
+        <Tooltip label={ hash } isDisabled={ isMobile }>
           <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">{ alias }</Box>
         </Tooltip>
       );
     }
     switch (truncation) {
       case 'constant':
-        return <HashStringShorten hash={ id || hash }/>;
+        return <HashStringShorten hash={ id || hash } isTooltipDisabled={ isMobile }/>;
       case 'dynamic':
-        return <HashStringShortenDynamic hash={ id || hash } fontWeight={ fontWeight }/>;
+        return <HashStringShortenDynamic hash={ id || hash } fontWeight={ fontWeight } isTooltipDisabled={ isMobile }/>;
       case 'none':
         return <span>{ id || hash }</span>;
     }