fix perp stats open interest

components/stats/PerpMarketDetails.tsx

@@ -2,7 +2,6 @@ import { IconButton } from '@components/shared/Button'
 import SheenLoader from '@components/shared/SheenLoader'
 import { ChevronLeftIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
-// import dayjs from 'dayjs'
 import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { useMemo } from 'react'
@@ -23,7 +22,6 @@ const PerpMarketDetails = ({
   const { t } = useTranslation(['common', 'trade'])
   const perpStats = mangoStore((s) => s.perpStats.data)
   const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
-  // const perpMarkets = mangoStore((s) => s.perpMarkets)
 
   const marketStats = useMemo(() => {
     if (!perpStats) return []
@@ -96,8 +94,8 @@ const PerpMarketDetails = ({
               daysToShow={'999'}
               heightClass="h-64"
               suffix="%"
-              tickFormat={(x) => formatNumericValue(x)}
-              title={t('hourly-funding')}
+              tickFormat={(x) => formatNumericValue(x, 4)}
+              title={t('trade:hourly-funding')}
               xKey="date_hour"
               yKey={'funding_rate_hourly'}
             />
@@ -108,8 +106,8 @@ const PerpMarketDetails = ({
               daysToShow={'999'}
               heightClass="h-64"
               suffix="%"
-              tickFormat={(x) => formatNumericValue(x)}
-              title={t('instantaneous-funding')}
+              tickFormat={(x) => formatNumericValue(x, 4)}
+              title={t('trade:instantaneous-funding')}
               xKey="date_hour"
               yKey={'instantaneous_funding_rate'}
             />

components/stats/PerpMarketsTable.tsx

@@ -15,6 +15,7 @@ import { usePerpFundingRate } from '@components/trade/PerpFundingRate'
 import { IconButton } from '@components/shared/Button'
 import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
+import { getDecimalCount } from 'utils/numbers'
 const SimpleAreaChart = dynamic(
   () => import('@components/shared/SimpleAreaChart'),
   { ssr: false }
@@ -76,6 +77,8 @@ const PerpMarketsTable = ({
                 fundingRate = '–'
               }
 
+              const openInterest = market.baseLotsToUi(market.openInterest)
+
               return (
                 <TrBody key={market.publicKey.toString()}>
                   <Td>
@@ -122,16 +125,14 @@ const PerpMarketsTable = ({
                   <Td>
                     <div className="flex flex-col text-right">
                       <p>
-                        {market.openInterest.toString()}{' '}
-                        <span className="font-body text-th-fgd-3">
-                          {market.name.slice(0, -5)}
-                        </span>
+                        <FormatNumericValue
+                          value={openInterest}
+                          decimals={getDecimalCount(market.minOrderSize)}
+                        />
                       </p>
                       <p className="text-xs text-th-fgd-4">
                         <FormatNumericValue
-                          value={
-                            market.openInterest.toNumber() * market.uiPrice
-                          }
+                          value={openInterest * market.uiPrice}
                           isUsd
                         />
                       </p>

components/stats/TokenStats.tsx

@@ -144,6 +144,7 @@ const TokenStats = () => {
                       <BankAmountWithValue
                         amount={available}
                         bank={bank}
+                        fixDecimals={false}
                         stacked
                       />
                     </div>