Highlight search match in token dashboard title and details

oasisprotocol · Feb 2, 2024 · 81f588c · 81f588c
1 parent de11783
commit 81f588c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx
@@ -21,8 +21,13 @@ import { RouteUtils } from '../../utils/route-utils'
 import { tokenTransfersContainerId } from '../../pages/TokenDashboardPage/TokenTransfersCard'
 import { tokenHoldersContainerId } from '../../pages/TokenDashboardPage/TokenHoldersCard'
 import { RoundedBalance } from 'app/components/RoundedBalance'
+import { HighlightedText } from '../../components/HighlightedText'
 
-export const TokenDetailsCard: FC<{ scope: SearchScope; address: string }> = ({ scope, address }) => {
+export const TokenDetailsCard: FC<{ scope: SearchScope; address: string; searchTerm: string }> = ({
+  scope,
+  address,
+  searchTerm,
+}) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
 
@@ -41,7 +46,9 @@ export const TokenDetailsCard: FC<{ scope: SearchScope; address: string }> = ({
         {!isLoading && account && token && (
           <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
             <dt>{t('common.token')}</dt>
-            <dd>{token.name}</dd>
+            <dd>
+              <HighlightedText text={token.name} pattern={searchTerm} />
+            </dd>
 
             {isMobile && (
               <>

diff --git a/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx b/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx
@@ -12,6 +12,7 @@ import { styled } from '@mui/material/styles'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
 import { useTranslation } from 'react-i18next'
 import { SearchScope } from '../../../types/searchScope'
+import { HighlightedText } from '../../components/HighlightedText'
 
 export const StyledCard = styled(Card)(() => ({
   '&': {
@@ -22,7 +23,11 @@ export const StyledCard = styled(Card)(() => ({
 
 const TitleSkeleton: FC = () => <Skeleton variant="text" sx={{ display: 'inline-block', width: '100%' }} />
 
-export const TokenTitleCard: FC<{ scope: SearchScope; address: string }> = ({ scope, address }) => {
+export const TokenTitleCard: FC<{ scope: SearchScope; address: string; searchTerm: string }> = ({
+  scope,
+  address,
+  searchTerm,
+}) => {
   const { t } = useTranslation()
   const { isLoading, token } = useTokenInfo(scope, address)
 
@@ -49,7 +54,7 @@ export const TokenTitleCard: FC<{ scope: SearchScope; address: string }> = ({ sc
                 flexWrap: 'wrap',
               }}
             >
-              {token?.name ?? t('common.missing')}
+              {token?.name ? <HighlightedText text={token.name} pattern={searchTerm} /> : t('common.missing')}
               &nbsp;
               <Typography
                 component="span"
@@ -59,7 +64,11 @@ export const TokenTitleCard: FC<{ scope: SearchScope; address: string }> = ({ sc
                   fontWeight: 700,
                 }}
               >
-                ({token?.symbol ?? t('common.missing')})
+                {token?.symbol ? (
+                  <HighlightedText text={token.symbol} pattern={searchTerm} />
+                ) : (
+                  t('common.missing')
+                )}
               </Typography>
             </Typography>
 

diff --git a/src/app/pages/TokenDashboardPage/index.tsx b/src/app/pages/TokenDashboardPage/index.tsx
@@ -29,7 +29,7 @@ export const TokenDashboardPage: FC = () => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   const scope = useRequiredScopeParam()
-  const { address } = useLoaderData() as AddressLoaderData
+  const { address, searchTerm } = useLoaderData() as AddressLoaderData
 
   const { token, isError } = useTokenInfo(scope, address)
 
@@ -49,11 +49,11 @@ export const TokenDashboardPage: FC = () => {
 
   return (
     <PageLayout>
-      <TokenTitleCard scope={scope} address={address} />
+      <TokenTitleCard scope={scope} address={address} searchTerm={searchTerm} />
       <DappBanner scope={scope} ethAddress={token?.eth_contract_addr} />
       <TokenSnapshot scope={scope} address={address} />
       <Divider variant="layout" sx={{ mt: isMobile ? 4 : 0 }} />
-      <TokenDetailsCard scope={scope} address={address} />
+      <TokenDetailsCard scope={scope} address={address} searchTerm={searchTerm} />
       <RouterTabs
         tabs={[
           { label: t('tokens.transfers'), to: tokenTransfersLink },