diff --git a/src/entries/popup/pages/home/TokenDetails/PriceChart.tsx b/src/entries/popup/pages/home/TokenDetails/PriceChart.tsx index 6be795225b..868158f575 100644 --- a/src/entries/popup/pages/home/TokenDetails/PriceChart.tsx +++ b/src/entries/popup/pages/home/TokenDetails/PriceChart.tsx @@ -28,11 +28,20 @@ import { ChartData, ChartPoint, LineChart } from './LineChart'; import { ParsedTokenInfo } from './useTokenInfo'; const parsePriceChange = ( - value: number, -): { color: TextProps['color']; symbol: SymbolName | '' } => { - if (value < 0) return { color: 'red', symbol: 'arrow.down' }; - if (value > 0) return { color: 'green', symbol: 'arrow.up' }; - return { color: 'labelSecondary', symbol: '' }; + changePercentage: number, +): { label: string; color: TextProps['color']; symbol: SymbolName | '' } => { + const label = Math.abs(changePercentage).toFixed(2) + ' %'; + + if (changePercentage === Infinity) + return { label: '∞ %', color: 'green', symbol: '' }; + + if (changePercentage < 0) + return { label, color: 'red', symbol: 'arrow.down' }; + + if (changePercentage > 0) + return { label, color: 'green', symbol: 'arrow.up' }; + + return { label, color: 'labelSecondary', symbol: '' }; }; type PriceChange = { @@ -44,7 +53,7 @@ const PriceChange = memo(function PriceChange({ changePercentage = 0, date, }: PriceChange) { - const { color, symbol } = parsePriceChange(+changePercentage.toFixed(2)); + const { color, symbol, label } = parsePriceChange(changePercentage); return ( @@ -58,7 +67,7 @@ const PriceChange = memo(function PriceChange({ cursor="text" userSelect="text" > - {Math.abs(changePercentage).toFixed(2)} % + {label} @@ -165,7 +174,7 @@ const usePriceChart = ({ }; const percentDiff = (current = 1, last = 0) => - ((current - last) / current) * 100; + ((current - last) / last) * 100 || 0; const now = new Date(); const chartTimeToTimestamp = {