Merge pull request #1814 from oasisprotocol/csillag/use-highlighting-also-on-validator-links

Also apply highlighting to validator links

Author: csillag

.changelog/1814.trivial.md

@@ -0,0 +1 @@
+Also apply highlighting to validator links

src/app/components/Account/AccountLink.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useEffect } from 'react'
+import { FC, ReactNode } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import { useScreenSize } from '../../hooks/useScreensize'
 import Link from '@mui/material/Link'
@@ -8,43 +8,13 @@ import Typography from '@mui/material/Typography'
 import { SearchScope } from '../../../types/searchScope'
 import { useAccountMetadata } from '../../hooks/useAccountMetadata'
 import { trimLongString } from '../../utils/trimLongString'
-import { MaybeWithTooltip } from '../AdaptiveTrimmer/MaybeWithTooltip'
+import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
 import Box from '@mui/material/Box'
 import { HighlightedText } from '../HighlightedText'
 import { AdaptiveHighlightedText } from '../HighlightedText/AdaptiveHighlightedText'
 import { AdaptiveTrimmer } from '../AdaptiveTrimmer/AdaptiveTrimmer'
 import { AccountMetadataSourceIndicator } from './AccountMetadataSourceIndicator'
-import { useAddressHighlighting } from '../HighlightingContext'
-import { COLORS } from '../../../styles/theme/colors'
-
-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()
-  return (
-    <Box
-      onMouseEnter={() => highlightAddress(address)}
-      onMouseLeave={() => releaseAddress(address)}
-      sx={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        verticalAlign: 'middle',
-        padding: '4px 4px 2px 4px',
-        ...(isHighlighted
-          ? {
-              background: COLORS.warningLight,
-              border: `1px dashed ${COLORS.warningColor}`,
-              borderRadius: '6px',
-            }
-          : {
-              border: `1px dashed transparent`,
-            }),
-      }}
-    >
-      {children}
-    </Box>
-  )
-}
+import { WithHighlighting } from '../HighlightingContext/WithHighlighting'
 
 const WithTypographyAndLink: FC<{
   scope: SearchScope

src/app/components/AdaptiveTrimmer/AdaptiveDynamicTrimmer.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import Box from '@mui/material/Box'
 import InfoIcon from '@mui/icons-material/Info'
-import { MaybeWithTooltip } from './MaybeWithTooltip'
+import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
 
 type AdaptiveDynamicTrimmerProps = {
   getFullContent: () => {

src/app/components/HighlightingContext/WithHighlighting.tsx

@@ -0,0 +1,33 @@
+import { FC, ReactNode, useEffect } from 'react'
+import { useAddressHighlighting } from './index'
+import { COLORS } from '../../../styles/theme/colors'
+import Box from '@mui/material/Box'
+
+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()
+  return (
+    <Box
+      onMouseEnter={() => highlightAddress(address)}
+      onMouseLeave={() => releaseAddress(address)}
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        verticalAlign: 'middle',
+        padding: '4px 4px 2px 4px',
+        ...(isHighlighted
+          ? {
+              background: COLORS.warningLight,
+              border: `1px dashed ${COLORS.warningColor}`,
+              borderRadius: '6px',
+            }
+          : {
+              border: `1px dashed transparent`,
+            }),
+      }}
+    >
+      {children}
+    </Box>
+  )
+}

…nts/AdaptiveTrimmer/MaybeWithTooltip.tsx …/components/Tooltip/MaybeWithTooltip.tsxsrc/app/components/AdaptiveTrimmer/MaybeWithTooltip.tsx renamed to src/app/components/Tooltip/MaybeWithTooltip.tsx src/app/components/AdaptiveTrimmer/MaybeWithTooltip.tsx renamed to src/app/components/Tooltip/MaybeWithTooltip.tsx

@@ -7,7 +7,7 @@ import { useScreenSize } from '../../hooks/useScreensize'
 import { RouteUtils } from '../../utils/route-utils'
 import { SearchScope } from '../../../types/searchScope'
 import { AdaptiveTrimmer } from '../AdaptiveTrimmer/AdaptiveTrimmer'
-import { MaybeWithTooltip } from '../AdaptiveTrimmer/MaybeWithTooltip'
+import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
 import { trimLongString } from '../../utils/trimLongString'
 import Box from '@mui/material/Box'
 

src/app/components/Transactions/TransactionLink.tsx

@@ -11,7 +11,8 @@ import { HighlightedText } from '../HighlightedText'
 import { useValidatorName } from '../../hooks/useValidatorName'
 import Box from '@mui/material/Box'
 import { AccountMetadataSourceIndicator } from '../Account/AccountMetadataSourceIndicator'
-import { MaybeWithTooltip } from '../AdaptiveTrimmer/MaybeWithTooltip'
+import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
+import { WithHighlighting } from '../HighlightingContext/WithHighlighting'
 
 type ValidatorLinkProps = {
   address: string
@@ -110,15 +111,21 @@ const DesktopValidatorLink: FC<DesktopValidatorLinkProps> = ({
   highlightedPart,
 }) => {
   if (alwaysTrim) {
-    return name ? (
-      <TrimValidatorEndLinkLabel name={name} to={to} highlightedPart={highlightedPart} />
-    ) : (
-      <TrimLinkLabel label={address} to={to} />
+    return (
+      <WithHighlighting address={address}>
+        {name ? (
+          <TrimValidatorEndLinkLabel name={name} to={to} highlightedPart={highlightedPart} />
+        ) : (
+          <TrimLinkLabel label={address} to={to} />
+        )}
+      </WithHighlighting>
     )
   }
   return (
-    <Link component={RouterLink} to={to}>
-      {name ? <HighlightedText text={name} pattern={highlightedPart} /> : address}
-    </Link>
+    <WithHighlighting address={address}>
+      <Link component={RouterLink} to={to}>
+        {name ? <HighlightedText text={name} pattern={highlightedPart} /> : address}
+      </Link>
+    </WithHighlighting>
   )
 }