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: [