diff --git a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx index 7b3572b4d9..84262cbc33 100644 --- 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 && (
{t('common.token')}
-
{token.name}
+
+ +
{isMobile && ( <> diff --git a/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx b/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx index 06d30e6ab2..c9aa28b0ef 100644 --- 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 = () => -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 ? : t('common.missing')}   = ({ sc fontWeight: 700, }} > - ({token?.symbol ?? t('common.missing')}) + {token?.symbol ? ( + + ) : ( + t('common.missing') + )} diff --git a/src/app/pages/TokenDashboardPage/index.tsx b/src/app/pages/TokenDashboardPage/index.tsx index b41c554dab..4f5cbe256d 100644 --- 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 ( - + - +