handle large and small numbers in orderbook

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,7 +616,9 @@ const Orderbook = () => {
             </div>
             <div className="col-span-1 text-right font-mono">
               {orderbookData?.spread
-                ? formatNumericValue(
+                ? orderbookData.spread < SHOW_EXPONENTIAL_THRESHOLD
+                  ? orderbookData.spread.toExponential()
+                  : formatNumericValue(
                       orderbookData.spread,
                       market ? getDecimalCount(market.tickSize) : undefined
                     )
@@ -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)}
             </div>
           </div>
           <div
@@ -763,7 +773,9 @@ const OrderbookRow = ({
             onClick={handlePriceClick}
           >
             <div className="w-full text-right font-mono text-xs">
-              {formattedPrice.toFixed(groupingDecimalCount)}
+              {price < SHOW_EXPONENTIAL_THRESHOLD
+                ? formattedPrice.toExponential()
+                : formattedPrice.toFixed(groupingDecimalCount)}
             </div>
           </div>
         </div>