Restrict hover-based address highlighting to desktop

Author: csillag

.changelog/1961.trivial.md

@@ -0,0 +1 @@
+Restrict hover-based address highlighting to desktop

src/app/components/HighlightingContext/WithHighlighting.tsx

@@ -2,11 +2,16 @@ import { FC, ReactNode, useEffect } from 'react'
 import { useAddressHighlighting } from './index'
 import { COLORS } from '../../../styles/theme/colors'
 import Box from '@mui/material/Box'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 export const WithHighlighting: FC<{ children: ReactNode; address: string }> = ({ children, address }) => {
   const { highlightedAddress, highlightAddress, releaseAddress } = useAddressHighlighting()
   useEffect(() => () => releaseAddress(address)) // Release address on umount
-  const isHighlighted = !!highlightedAddress && highlightedAddress.toLowerCase() === address.toLowerCase()
+  const { isTablet } = useScreenSize()
+  // We have decided that we only want this feature on desktop,
+  // so we are on tablet (or mobile), just return the wrapped contnt directly.
+  const isHighlighted =
+    !isTablet && !!highlightedAddress && highlightedAddress.toLowerCase() === address.toLowerCase()
   return (
     <Box
       onMouseEnter={() => highlightAddress(address)}