Start to build highlighting feature

oasisprotocol · Feb 28, 2025 · 6ea54fb · 6ea54fb
1 parent f090689
commit 6ea54fb
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 38 deletions.
diff --git a/src/app/components/Account/AccountLink.tsx b/src/app/components/Account/AccountLink.tsx
@@ -14,6 +14,38 @@ import { HighlightedText } from '../HighlightedText'
 import { AdaptiveHighlightedText } from '../HighlightedText/AdaptiveHighlightedText'
 import { AdaptiveTrimmer } from '../AdaptiveTrimmer/AdaptiveTrimmer'
 import { AccountMetadataSourceIndicator } from './AccountMetadataSourceIndicator'
+import { useHighlighting } from '../HighlightingContext'
+import { COLORS } from '../../../styles/theme/colors'
+
+const WithHighlighting: FC<{ children: ReactNode; address: string }> = ({ children, address }) => {
+  const { address: highlightAddress, setAddress: setHighlightAddress } = useHighlighting()
+  const highlighted = !!highlightAddress && highlightAddress.toLowerCase() === address.toLowerCase()
+  return (
+    <Box
+      onMouseEnter={() => {
+        // console.log('Mouse entered to', address)
+        setHighlightAddress(address)
+      }}
+      onMouseLeave={() => {
+        // console.log('Mouse left', address)
+        setHighlightAddress(undefined)
+      }}
+      sx={
+        highlighted
+          ? {
+              background: COLORS.warningLight,
+              border: `1px dashed ${COLORS.warningColor}`,
+              borderRadius: '6px',
+            }
+          : {
+              margin: '1px',
+            }
+      }
+    >
+      {children}
+    </Box>
+  )
+}
 
 const WithTypographyAndLink: FC<{
   to: string
@@ -137,18 +169,20 @@ export const AccountLink: FC<Props> = ({
     // In a table, we only ever want a short line
 
     return (
-      <WithTypographyAndLink to={to} labelOnly={labelOnly}>
-        <MaybeWithTooltip title={tooltipTitle}>
-          {showAccountName ? (
-            <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
-              <AccountMetadataSourceIndicator source={accountMetadata!.source} />{' '}
-              {trimLongString(accountName, 12, 0)}
-            </Box>
-          ) : (
-            trimLongString(address, 6, 6)
-          )}
-        </MaybeWithTooltip>
-      </WithTypographyAndLink>
+      <WithHighlighting address={address}>
+        <WithTypographyAndLink to={to} labelOnly={labelOnly}>
+          <MaybeWithTooltip title={tooltipTitle}>
+            {showAccountName ? (
+              <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
+                <AccountMetadataSourceIndicator source={accountMetadata!.source} />{' '}
+                {trimLongString(accountName, 12, 0)}
+              </Box>
+            ) : (
+              trimLongString(address, 6, 6)
+            )}
+          </MaybeWithTooltip>
+        </WithTypographyAndLink>
+      </WithHighlighting>
     )
   }
 
@@ -157,37 +191,41 @@ export const AccountLink: FC<Props> = ({
     // We want one long line, with name and address.
 
     return (
-      <WithTypographyAndLink to={to} labelOnly={labelOnly}>
-        <MaybeWithTooltip title={tooltipTitle}>
-          {showAccountName ? (
-            <Box sx={{ display: 'inline-flex', gap: 3, alignItems: 'center' }}>
-              <AccountMetadataSourceIndicator source={accountMetadata!.source} />
-              <HighlightedText text={accountName} pattern={highlightedPartOfName} /> ({address})
-            </Box>
-          ) : (
-            address
-          )}
-        </MaybeWithTooltip>
-      </WithTypographyAndLink>
+      <WithHighlighting address={address}>
+        <WithTypographyAndLink to={to} labelOnly={labelOnly}>
+          <MaybeWithTooltip title={tooltipTitle}>
+            {showAccountName ? (
+              <Box sx={{ display: 'inline-flex', gap: 3, alignItems: 'center' }}>
+                <AccountMetadataSourceIndicator source={accountMetadata!.source} />
+                <HighlightedText text={accountName} pattern={highlightedPartOfName} /> ({address})
+              </Box>
+            ) : (
+              address
+            )}
+          </MaybeWithTooltip>
+        </WithTypographyAndLink>
+      </WithHighlighting>
     )
   }
 
   // We need to show the data in details mode on mobile.
   // We want two lines, one for name (if available), one for address
   // Both lines adaptively shortened to fill available space
   return (
-    <WithTypographyAndLink to={to} mobile labelOnly={labelOnly}>
-      <>
-        <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
-          {accountMetadata && <AccountMetadataSourceIndicator source={accountMetadata.source} />}
-          <AdaptiveHighlightedText
-            text={showAccountName ? accountName : ''}
-            pattern={highlightedPartOfName}
-            extraTooltip={tooltipTitle}
-          />
-        </Box>
-        <AdaptiveTrimmer text={address} strategy="middle" tooltipOverride={tooltipTitle} />
-      </>
-    </WithTypographyAndLink>
+    <WithHighlighting address={address}>
+      <WithTypographyAndLink to={to} mobile labelOnly={labelOnly}>
+        <>
+          <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
+            {accountMetadata && <AccountMetadataSourceIndicator source={accountMetadata.source} />}
+            <AdaptiveHighlightedText
+              text={showAccountName ? accountName : ''}
+              pattern={highlightedPartOfName}
+              extraTooltip={tooltipTitle}
+            />
+          </Box>
+          <AdaptiveTrimmer text={address} strategy="middle" tooltipOverride={tooltipTitle} />
+        </>
+      </WithTypographyAndLink>
+    </WithHighlighting>
   )
 }
diff --git a/src/app/components/HighlightingContext/index.tsx b/src/app/components/HighlightingContext/index.tsx
@@ -0,0 +1,29 @@
+import { createContext, FC, ReactNode, useContext, useState } from 'react'
+
+interface HighlightingContextInfo {
+  readonly address: string | undefined
+  setAddress: (value: string | undefined) => void
+}
+
+const HighlightingContext = createContext<HighlightingContextInfo | null>(null)
+
+const noContext: HighlightingContextInfo = {
+  address: undefined,
+  setAddress: () => {},
+}
+
+export const HighlightingContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [address, setAddress] = useState<string | undefined>()
+  return (
+    <HighlightingContext.Provider value={{ address, setAddress }}>{children}</HighlightingContext.Provider>
+  )
+}
+
+export const useHighlighting = () => {
+  const context = useContext(HighlightingContext)
+  if (!context) {
+    console.log('Warning: highlighting context is not provided!')
+    return noContext
+  }
+  return context
+}
diff --git a/src/routes.tsx b/src/routes.tsx
@@ -65,6 +65,7 @@ import { useConsensusAccountDetailsProps } from './app/pages/ConsensusAccountDet
 import { ConsensusAccountTransactionsCard } from './app/pages/ConsensusAccountDetailsPage/ConsensusAccountTransactionsCard'
 import { FC, useEffect } from 'react'
 import { AnalyticsConsentProvider } from './app/components/AnalyticsConsent'
+import { HighlightingContextProvider } from './app/components/HighlightingContext'
 
 const ScopeSpecificPart = () => {
   const { network, layer } = useRequiredScopeParam()
@@ -107,7 +108,9 @@ export const routes: RouteObject[] = [
     element: (
       <AnalyticsConsentProvider>
         <ScrollRestoration />
-        <Outlet />
+        <HighlightingContextProvider>
+          <Outlet />
+        </HighlightingContextProvider>
       </AnalyticsConsentProvider>
     ),
     children: [