diff --git a/components/trade/Orderbook.tsx b/components/trade/Orderbook.tsx index 1061785a..adbeb0ec 100644 --- a/components/trade/Orderbook.tsx +++ b/components/trade/Orderbook.tsx @@ -30,6 +30,13 @@ import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettin import { ArrowPathIcon } from '@heroicons/react/20/solid' import { sleep } from 'utils' +const sizeCompacter = Intl.NumberFormat('en', { + maximumFractionDigits: 6, + notation: 'compact', +}) + +const SHOW_EXPONENTIAL_THRESHOLD = 0.00001 + const getMarket = () => { const group = mangoStore.getState().group const selectedMarket = mangoStore.getState().selectedMarket.current @@ -609,10 +616,12 @@ const Orderbook = () => {
{orderbookData?.spread - ? formatNumericValue( - orderbookData.spread, - market ? getDecimalCount(market.tickSize) : undefined - ) + ? orderbookData.spread < SHOW_EXPONENTIAL_THRESHOLD + ? orderbookData.spread.toExponential() + : formatNumericValue( + orderbookData.spread, + market ? getDecimalCount(market.tickSize) : undefined + ) : null}
@@ -753,9 +762,10 @@ const OrderbookRow = ({ className={`z-10 w-full text-right font-mono text-xs ${ hasOpenOrder ? 'text-th-active' : '' }`} - // onClick={handleSizeClick} > - {formattedSize.toFixed(minOrderSizeDecimals)} + {size >= 1000000 + ? sizeCompacter.format(size) + : formattedSize.toFixed(minOrderSizeDecimals)}
- {formattedPrice.toFixed(groupingDecimalCount)} + {price < SHOW_EXPONENTIAL_THRESHOLD + ? formattedPrice.toExponential() + : formattedPrice.toFixed(groupingDecimalCount)}