@@ -13,6 +13,7 @@ import {
1313} from 'ui/src'
1414import { useAppFiatCurrencyInfo } from 'uniswap/src/features/fiatCurrency/hooks'
1515import { useLocalizationContext } from 'uniswap/src/features/language/LocalizationContext'
16+ import { NumberType } from 'utilities/src/format/types'
1617import { ArrowChangeDown } from '~/components/Icons/ArrowChangeDown'
1718import { ArrowChangeUp } from '~/components/Icons/ArrowChangeUp'
1819import { useStatsBannerData } from '~/components/Toucan/Auction/hooks/useStatsBannerData'
@@ -89,7 +90,7 @@ const SUBSCRIPT_THRESHOLD = 4
8990export function AuctionStatsBanner ( ) {
9091 const { t } = useTranslation ( )
9192 const colors = useSporeColors ( )
92- const { formatPercent } = useLocalizationContext ( )
93+ const { formatPercent, formatNumberOrString } = useLocalizationContext ( )
9394 const { symbol : currencySymbol } = useAppFiatCurrencyInfo ( )
9495 const statCellTitleVariant = useStatCellTitleVariant ( )
9596 const media = useMedia ( )
@@ -119,8 +120,14 @@ export function AuctionStatsBanner() {
119120 const arrowSize = media . lg ? 10 : 16
120121 const showChangePercent = changePercent !== null && changePercent > 0
121122
122- // Format the change percent (formatPercent expects a raw percentage like 36 for 36%)
123- const changePercentFormatted = changePercent !== null ? formatPercent ( changePercent ) : null
123+ const changePercentFormatted =
124+ changePercent === null
125+ ? null
126+ : changePercent >= 1_000_000
127+ ? '1M+%'
128+ : changePercent >= 1000
129+ ? `${ formatNumberOrString ( { value : changePercent , type : NumberType . TokenQuantityStats } ) } %`
130+ : formatPercent ( changePercent )
124131
125132 return (
126133 < Flex
0 commit comments