misc number formatting

components/AccountInfo.tsx

@@ -281,7 +281,10 @@ export default function AccountInfo() {
                   nativeToUi(
                     mngoAccrued.toNumber(),
                     mangoGroup.tokens[MNGO_INDEX].decimals
-                  )
+                  ).toLocaleString(undefined, {
+                    minimumSignificantDigits: 2,
+                    maximumFractionDigits: 2,
+                  })
                 ) : (
                   0
                 )}

components/MarketDetails.tsx

@@ -8,9 +8,9 @@ import ManualRefresh from './ManualRefresh'
 import useOraclePrice from '../hooks/useOraclePrice'
 import DayHighLow from './DayHighLow'
 import {
-  getPrecisionDigits,
+  getDecimalCount,
   patchInternalMarketName,
-  perpContractPrecision,
+  roundPerpSize,
   usdFormatter,
 } from '../utils'
 import { PerpMarket } from '@blockworks-foundation/mango-client'
@@ -190,7 +190,10 @@ const MarketDetails = () => {
             <div className="text-th-fgd-1 md:text-xs">
               {oraclePrice && selectedMarket
                 ? oraclePrice.toNumber().toLocaleString(undefined, {
-                    maximumFractionDigits: getPrecisionDigits(
+                    minimumFractionDigits: getDecimalCount(
+                      selectedMarket.tickSize
+                    ),
+                    maximumFractionDigits: getDecimalCount(
                       selectedMarket.tickSize
                     ),
                   })
@@ -256,11 +259,10 @@ const MarketDetails = () => {
                 </div>
                 <div className="text-th-fgd-1 md:text-xs">
                   {selectedMarket ? (
-                    `${parseOpenInterest(
-                      selectedMarket as PerpMarket
-                    ).toLocaleString(undefined, {
-                      maximumFractionDigits: perpContractPrecision[baseSymbol],
-                    })} ${baseSymbol}`
+                    `${roundPerpSize(
+                      parseOpenInterest(selectedMarket as PerpMarket),
+                      baseSymbol
+                    )} ${baseSymbol}`
                   ) : (
                     <MarketDataLoader />
                   )}

components/MarketPosition.tsx

@@ -1,11 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import { ElementTitle } from './styles'
 import useMangoStore from '../stores/useMangoStore'
-import {
-  formatUsdValue,
-  getPrecisionDigits,
-  perpContractPrecision,
-} from '../utils'
+import { formatUsdValue, getPrecisionDigits, roundPerpSize } from '../utils'
 import Button, { LinkButton } from './Button'
 import Tooltip from './Tooltip'
 import PerpSideBadge from './PerpSideBadge'
@@ -182,9 +178,7 @@ export default function MarketPosition() {
                 className="cursor-pointer underline hover:no-underline"
                 onClick={() => handleSizeClick(basePosition)}
               >
-                {`${Math.abs(basePosition).toLocaleString(undefined, {
-                  maximumFractionDigits: perpContractPrecision[baseSymbol],
-                })} ${baseSymbol}`}
+                {`${roundPerpSize(basePosition, baseSymbol)} ${baseSymbol}`}
               </span>
             ) : (
               `0 ${baseSymbol}`

components/PerpPositionsTable.tsx

@@ -9,11 +9,7 @@ import Button, { LinkButton } from '../components/Button'
 import { useViewport } from '../hooks/useViewport'
 import { breakpoints } from './TradePageGrid'
 import { ExpandableRow, Table, Td, Th, TrBody, TrHead } from './TableElements'
-import {
-  formatUsdValue,
-  getPrecisionDigits,
-  perpContractPrecision,
-} from '../utils'
+import { formatUsdValue, getPrecisionDigits, roundPerpSize } from '../utils'
 import Loading from './Loading'
 import MarketCloseModal from './MarketCloseModal'
 import PerpSideBadge from './PerpSideBadge'
@@ -161,12 +157,10 @@ const PositionsTable = () => {
                       breakEvenPrice,
                       unrealizedPnl,
                     }) => {
-                      const basePositionUi = Math.abs(
-                        basePosition
-                      ).toLocaleString(undefined, {
-                        maximumFractionDigits:
-                          perpContractPrecision[marketConfig.baseSymbol],
-                      })
+                      const basePositionUi = roundPerpSize(
+                        basePosition,
+                        marketConfig.baseSymbol
+                      )
                       return (
                         <TrBody key={`${marketConfig.marketIndex}`}>
                           <Td>
@@ -268,12 +262,10 @@ const PositionsTable = () => {
                     },
                     index
                   ) => {
-                    const basePositionUi = Math.abs(
-                      basePosition
-                    ).toLocaleString(undefined, {
-                      maximumFractionDigits:
-                        perpContractPrecision[marketConfig.baseSymbol],
-                    })
+                    const basePositionUi = roundPerpSize(
+                      basePosition,
+                      marketConfig.baseSymbol
+                    )
                     return (
                       <ExpandableRow
                         buttonTemplate={

components/TradingView/index.tsx

@@ -13,7 +13,7 @@ import { breakpoints } from '../TradePageGrid'
 import { Order, Market } from '@project-serum/serum/lib/market'
 import { PerpOrder, PerpMarket } from '@blockworks-foundation/mango-client'
 import { notify } from '../../utils/notifications'
-import { sleep, formatUsdValue, usdFormatter } from '../../utils'
+import { sleep, formatUsdValue, usdFormatter, roundPerpSize } from '../../utils'
 import useInterval from '../../hooks/useInterval'
 import { PerpTriggerOrder } from '../../@types/types'
 import { useTranslation } from 'next-i18next'
@@ -339,6 +339,7 @@ const TVChartContainer = () => {
   }
 
   function getLine(order, market) {
+    const orderSizeUi = roundPerpSize(order.size, market.config.baseSymbol)
     return tvWidgetRef.current
       .chart()
       .createOrderLine({ disableUndo: false })
@@ -374,7 +375,7 @@ const TVChartContainer = () => {
             tvWidgetRef.current.showConfirmDialog({
               title: t('tv-chart:modify-order'),
               body: t('tv-chart:modify-order-details', {
-                orderSize: order.size,
+                orderSize: orderSizeUi,
                 baseSymbol: market.config.baseSymbol,
                 orderSide: t(order.side),
                 currentOrderPrice: currentOrderPrice,
@@ -408,7 +409,7 @@ const TVChartContainer = () => {
         tvWidgetRef.current.showConfirmDialog({
           title: t('tv-chart:cancel-order'),
           body: t('tv-chart:cancel-order-details', {
-            orderSize: order.size,
+            orderSize: orderSizeUi,
             baseSymbol: market.config.baseSymbol,
             orderSide: t(order.side),
             orderPrice: order.price,
@@ -423,7 +424,7 @@ const TVChartContainer = () => {
         })
       })
       .setPrice(order.price)
-      .setQuantity(order.size)
+      .setQuantity(orderSizeUi)
       .setText(getLineText(order, market))
       .setTooltip(
         order.perpTrigger?.clientOrderId

utils/index.ts

@@ -322,3 +322,10 @@ export function patchInternalMarketName(marketName: string) {
   }
   return marketName
 }
+
+export function roundPerpSize(size: number, symbol: string) {
+  return Math.abs(size).toLocaleString(undefined, {
+    minimumFractionDigits: perpContractPrecision[symbol],
+    maximumFractionDigits: perpContractPrecision[symbol],
+  })
+}