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)}