diff --git a/src/components/Stats/TokenListItem/TokenListItem.tsx b/src/components/Stats/TokenListItem/TokenListItem.tsx index 25bdc58e..dce6a765 100644 --- a/src/components/Stats/TokenListItem/TokenListItem.tsx +++ b/src/components/Stats/TokenListItem/TokenListItem.tsx @@ -52,6 +52,8 @@ const TokenListItem: React.FC = ({ // const isNegative = priceChange < 0 const isMd = useMediaQuery(theme.breakpoints.down('md')) + const isXs = useMediaQuery(theme.breakpoints.down('xs')) + const isSm = useMediaQuery(theme.breakpoints.down('sm')) const networkUrl = useMemo(() => { switch (network) { @@ -79,6 +81,7 @@ const TokenListItem: React.FC = ({ copyAddressHandler('Failed to copy token address to Clipboard', 'error') }) } + const shouldShowText = icon === icons.unknownToken || !isSm return ( @@ -99,7 +102,15 @@ const TokenListItem: React.FC = ({ }}> {isUnknown && } - + {shouldShowText && ( + + {isXs ? shortenAddress(symbol) : name} + {!isXs && ( + {` (${shortenAddress(symbol)})`} + )} + + )} + {/* {!isMd ? ( <> {name} @@ -108,7 +119,7 @@ const TokenListItem: React.FC = ({ ) : ( shortenAddress(symbol) )} - + */} = ({ {`~$${formatNumber(price)}`} - {/* {!hideName && ( + {/* {!isXs && ( {isNegative ? `${priceChange.toFixed(2)}%` : `+${priceChange.toFixed(2)}%`} @@ -185,7 +196,7 @@ const TokenListItem: React.FC = ({ ) : null} - {/* {!hideName && ( + {/* {!isXs && ( {