handle large decimals like the bonk chart

apis/birdeye/helpers.ts

@@ -1,3 +1,5 @@
+import Decimal from 'decimal.js'
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export const NEXT_PUBLIC_BIRDEYE_API_KEY =
   process.env.NEXT_PUBLIC_BIRDEYE_API_KEY ||
@@ -59,3 +61,80 @@ export function getNextBarTime(lastBar: any, resolution = '1D') {
 
   return nextBarTime
 }
+
+export const SUBSCRIPT_NUMBER_MAP: Record<number, string> = {
+  4: '₄',
+  5: '₅',
+  6: '₆',
+  7: '₇',
+  8: '₈',
+  9: '₉',
+  10: '₁₀',
+  11: '₁₁',
+  12: '₁₂',
+  13: '₁₃',
+  14: '₁₄',
+  15: '₁₅',
+}
+
+export const calcPricePrecision = (num: number | string) => {
+  if (!num) return 8
+
+  switch (true) {
+    case Math.abs(+num) < 0.00000000001:
+      return 16
+
+    case Math.abs(+num) < 0.000000001:
+      return 14
+
+    case Math.abs(+num) < 0.0000001:
+      return 12
+
+    case Math.abs(+num) < 0.00001:
+      return 10
+
+    case Math.abs(+num) < 0.05:
+      return 6
+
+    case Math.abs(+num) < 1:
+      return 4
+
+    case Math.abs(+num) < 20:
+      return 3
+
+    default:
+      return 2
+  }
+}
+
+export const formatPrice = (
+  num: number,
+  precision?: number,
+  gr0 = true
+): string => {
+  if (!num) {
+    return num.toString()
+  }
+
+  if (!precision) {
+    precision = calcPricePrecision(+num)
+  }
+
+  let formated: string = new Decimal(num).toFixed(precision)
+
+  if (formated.match(/^0\.[0]+$/g)) {
+    formated = formated.replace(/\.[0]+$/g, '')
+  }
+
+  if (gr0 && formated.match(/\.0{4,15}[1-9]+/g)) {
+    const match = formated.match(/\.0{4,15}/g)
+    if (!match) return ''
+    const matchString: string = match[0].slice(1)
+    formated = formated.replace(
+      /\.0{4,15}/g,
+      `.0${SUBSCRIPT_NUMBER_MAP[matchString.length]}`
+    )
+  }
+
+  return formated
+}

apis/datafeed.ts

@@ -223,7 +223,7 @@ export default {
       session: '24x7',
       timezone: 'Etc/UTC',
       minmov: 1,
-      pricescale: 100,
+      pricescale: 10 ** 16,
       has_intraday: true,
       has_weekly_and_monthly: false,
       has_empty_bars: true,

components/trade/TradingViewChart.tsx

@@ -37,6 +37,7 @@ import Datafeed from 'apis/datafeed'
 // import PerpDatafeed from 'apis/mngo/datafeed'
 import useStablePrice from 'hooks/useStablePrice'
 import { isMangoError } from 'types'
+import { formatPrice } from 'apis/birdeye/helpers'
 
 export interface ChartContainerProps {
   container: ChartingLibraryWidgetOptions['container']
@@ -724,6 +725,18 @@ const TradingViewChart = () => {
           'header_symbol_search',
           'popup_hints',
         ],
+        // eslint-disable-next-line
+        // @ts-ignore
+        custom_formatters: {
+          priceFormatterFactory: () => {
+            return {
+              format: (price) => {
+                // return the appropriate format
+                return formatPrice(price)
+              },
+            }
+          },
+        },
         fullscreen: defaultProps.fullscreen,
         autosize: defaultProps.autosize,
         studies_overrides: defaultProps.studiesOverrides,