diff --git a/src/app/components/Account/AccountLink.tsx b/src/app/components/Account/AccountLink.tsx
index 263560495..3f0fbda61 100644
--- 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 (
+ {
+ // 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}
+
+ )
+}
const WithTypographyAndLink: FC<{
to: string
@@ -137,18 +169,20 @@ export const AccountLink: FC = ({
// In a table, we only ever want a short line
return (
-
-
- {showAccountName ? (
-
- {' '}
- {trimLongString(accountName, 12, 0)}
-
- ) : (
- trimLongString(address, 6, 6)
- )}
-
-
+
+
+
+ {showAccountName ? (
+
+ {' '}
+ {trimLongString(accountName, 12, 0)}
+
+ ) : (
+ trimLongString(address, 6, 6)
+ )}
+
+
+
)
}
@@ -157,18 +191,20 @@ export const AccountLink: FC = ({
// We want one long line, with name and address.
return (
-
-
- {showAccountName ? (
-
-
- ({address})
-
- ) : (
- address
- )}
-
-
+
+
+
+ {showAccountName ? (
+
+
+ ({address})
+
+ ) : (
+ address
+ )}
+
+
+
)
}
@@ -176,18 +212,20 @@ export const AccountLink: FC = ({
// We want two lines, one for name (if available), one for address
// Both lines adaptively shortened to fill available space
return (
-
- <>
-
- {accountMetadata && }
-
-
-
- >
-
+
+
+ <>
+
+ {accountMetadata && }
+
+
+
+ >
+
+
)
}
diff --git a/src/app/components/HighlightingContext/index.tsx b/src/app/components/HighlightingContext/index.tsx
new file mode 100644
index 000000000..752c0f3bf
--- /dev/null
+++ 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(null)
+
+const noContext: HighlightingContextInfo = {
+ address: undefined,
+ setAddress: () => {},
+}
+
+export const HighlightingContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
+ const [address, setAddress] = useState()
+ return (
+ {children}
+ )
+}
+
+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
index 6125f6628..7ac077811 100644
--- 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: (
-
+
+
+
),
children: [