subscript on orderbook

src/components/Output.tsx

@@ -28,6 +28,7 @@ import { Tag } from '@/components/Tag';
 import { useAppSelector } from '@/state/appTypes';
 import { getSelectedLocale } from '@/state/localizationSelectors';
 
+import { formatZeroNumbers } from '@/lib/formatZeroNumbers';
 import { MustBigNumber, isNumber, type BigNumberish } from '@/lib/numbers';
 import { getStringsForDateTimeDiff, getTimestamp } from '@/lib/timeUtils';
 
@@ -121,6 +122,7 @@ export function formatNumberOutput(
     fractionDigits,
     minimumFractionDigits,
     showSign = ShowSign.Negative,
+    withSubscript = false,
   }: {
     decimalSeparator: string | undefined;
     groupSeparator: string | undefined;
@@ -131,6 +133,7 @@ export function formatNumberOutput(
     roundingMode?: BigNumber.RoundingMode;
     useGrouping?: boolean;
     showSign?: ShowSign;
+    withSubscript?: boolean;
   }
 ) {
   const valueBN = MustBigNumber(value).abs();
@@ -204,7 +207,28 @@ export function formatNumberOutput(
     [OutputType.Multiple]: () => getFormattedVal(valueBN, LEVERAGE_DECIMALS, { suffix: '×' }),
   };
 
-  return `${sign ?? ''}${numberRenderers[type]()}`;
+  const renderedNumber = `${sign ?? ''}${numberRenderers[type]()}`;
+
+  if (withSubscript) {
+    const { currencySign, significantDigits, decimalDigits, zeros, punctuationSymbol } =
+      formatZeroNumbers(renderedNumber);
+
+    if (zeros) {
+      let subscript = '';
+
+      zeros
+        .toString()
+        .split('')
+        .map(Number)
+        .forEach((digit) => {
+          subscript += UNICODE.SUBSCRIPT[digit];
+        });
+
+      return `${currencySign ?? ''}${significantDigits}${punctuationSymbol}0${subscript}${decimalDigits}`;
+    }
+  }
+
+  return renderedNumber;
 }
 
 // must manually memoize options object if you want proper memoization

src/constants/unicode.ts

@@ -1,4 +1,20 @@
-export const UNICODE = {
+export const UNICODE: {
+  MINUS: string;
+  PLUS: string;
+  SUBSCRIPT: Record<number, string>;
+} = {
   MINUS: '\u2212',
   PLUS: '\u002b',
+  SUBSCRIPT: {
+    0: '\u2080',
+    1: '\u2081',
+    2: '\u2082',
+    3: '\u2083',
+    4: '\u2084',
+    5: '\u2085',
+    6: '\u2086',
+    7: '\u2087',
+    8: '\u2088',
+    9: '\u2089',
+  },
 };

src/hooks/Orderbook/useDrawOrderbook.ts

@@ -244,6 +244,7 @@ export const useDrawOrderbook = ({
             groupSeparator,
             selectedLocale,
             fractionDigits: tickSizeDecimals,
+            withSubscript: true,
           }),
           getXByColumn({ canvasWidth, colIdx: 0 }) - ORDERBOOK_ROW_PADDING_RIGHT,
           y

src/views/CanvasOrderbook/OrderbookControls.tsx

@@ -82,6 +82,7 @@ export const OrderbookControls = ({ className, assetId, grouping }: OrderbookCon
             </$WithSeparators>
           </$ButtonGroup>
           <Output
+            withSubscript
             value={grouping?.tickSize}
             type={OutputType.Fiat}
             fractionDigits={tickSizeDecimals === 1 ? 2 : tickSizeDecimals}

src/views/CanvasOrderbook/OrderbookRow.tsx

@@ -62,6 +62,7 @@ export const OrderbookMiddleRow = forwardRef<HTMLDivElement, StyleProps & Elemen
         <span>{stringGetter({ key: STRING_KEYS.PRICE })}</span>
         <span tw="flex flex-col">
           <Output
+            withSubscript
             type={OutputType.Number}
             value={orderbookMidMarketPrice}
             fractionDigits={tickSizeDecimals}