Merge pull request #2160 from oasisprotocol/csillag/highlight-different-address-representations

Hover highlight: recognize different representations of the same address

Author: csillag

.changelog/2160.trivial.md

@@ -0,0 +1 @@
+Hover highlight: recognize different representations of the same address

src/app/components/HoverHighlightingContext/WithHoverHighlighting.tsx

@@ -8,7 +8,7 @@ export const WithHoverHighlighting: FC<{ children: ReactNode; address: string }>
   children,
   address,
 }) => {
-  const { highlightedAddress, highlightAddress, releaseAddress } = useHoverHighlighting()
+  const { shouldHighlight, selectAddress, releaseAddress } = useHoverHighlighting()
   useEffect(() => {
     // Release address on unmount
     return () => releaseAddress(address)
@@ -17,11 +17,10 @@ export const WithHoverHighlighting: FC<{ children: ReactNode; address: string }>
   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()
+  const isHighlighted = !isTablet && shouldHighlight(address)
   return (
     <Box
-      onMouseEnter={() => highlightAddress(address)}
+      onMouseEnter={() => selectAddress(address)}
       onMouseLeave={() => releaseAddress(address)}
       sx={{
         display: 'inline-flex',

src/app/components/HoverHighlightingContext/index.tsx

@@ -1,29 +1,41 @@
 import { createContext, FC, ReactNode, useContext, useState } from 'react'
+import { getEvmBech32Address, isValidEthAddress } from '../../utils/helpers'
 
 interface HoverHighlightingContextInfo {
-  readonly highlightedAddress: string | undefined
-  highlightAddress: (value: string) => void
+  shouldHighlight: (address: string) => boolean
+  selectAddress: (value: string) => void
   releaseAddress: (value: string) => void
 }
 
 const HoverHighlightingContext = createContext<HoverHighlightingContextInfo | null>(null)
 
 const noContext: HoverHighlightingContextInfo = {
-  highlightedAddress: undefined,
-  highlightAddress: () => {},
+  shouldHighlight: () => false,
+  selectAddress: () => {},
   releaseAddress: () => {},
 }
 
+/**
+ * Convert highlight address to a uniform format:
+ */
+const normalizeAddress = (address: string) =>
+  isValidEthAddress(address)
+    ? getEvmBech32Address(address).toLowerCase() // We always want oasis address, not eth
+    : address.toLowerCase() // wherever else this is, just lowercase it
+
 export const HoverHighlightingContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
-  const [address, setAddress] = useState<string | undefined>()
-  const releaseAddress = (oldAddress: string) => {
-    if (address === oldAddress) setAddress(undefined)
+  const [selectedAddress, setSelectedAddress] = useState<string | undefined>()
+  const shouldHighlight = (address: string) =>
+    !!selectedAddress && selectedAddress === normalizeAddress(address)
+  const selectAddress = (address: string) => setSelectedAddress(normalizeAddress(address))
+  const releaseAddress = (address: string) => {
+    if (selectedAddress === normalizeAddress(address)) setSelectedAddress(undefined)
   }
   return (
     <HoverHighlightingContext.Provider
       value={{
-        highlightedAddress: address,
-        highlightAddress: setAddress,
+        shouldHighlight,
+        selectAddress,
         releaseAddress,
       }}
     >