Merge pull request #1219 from mars-protocol/spot-blance-decimals

feature: add spot and perps decimals
mars-protocol · Nov 8, 2024 · 6b5da09 · 6b5da09
2 parents 534e6ee + 32f3996
commit 6b5da09
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 25 deletions.
diff --git a/src/components/account/AccountBalancesTable/Columns/LiqPrice.tsx b/src/components/account/AccountBalancesTable/Columns/LiqPrice.tsx
@@ -6,7 +6,7 @@ import Text from 'components/common/Text'
 import { Tooltip } from 'components/common/Tooltip'
 import useLiquidationPrice from 'hooks/prices/useLiquidationPrice'
 import { BNCoin } from 'types/classes/BNCoin'
-import { getPriceDecimals } from 'utils/formatters'
+import { getPerpsPriceDecimals } from 'utils/formatters'
 import { LiquidationPriceKind } from 'utils/health_computer'
 import { BN } from 'utils/helpers'
 
@@ -72,8 +72,8 @@ export default function LiqPrice(props: Props) {
       coin={BNCoin.fromDenomAndBigNumber('usd', BN(liqPrice))}
       options={{
         abbreviated: false,
-        maxDecimals: getPriceDecimals(liqPrice),
-        minDecimals: getPriceDecimals(liqPrice),
+        maxDecimals: getPerpsPriceDecimals(liqPrice),
+        minDecimals: getPerpsPriceDecimals(liqPrice),
       }}
       showDetailedPrice
     />

diff --git a/src/components/account/AccountBalancesTable/Columns/Price.tsx b/src/components/account/AccountBalancesTable/Columns/Price.tsx
@@ -1,6 +1,7 @@
 import DisplayCurrency from 'components/common/DisplayCurrency'
 import usePrice from 'hooks/prices/usePrice'
 import { BNCoin } from 'types/classes/BNCoin'
+import { getSpotPriceDecimals } from 'utils/formatters'
 import { BN } from 'utils/helpers'
 
 export const PRICE_META = { id: 'price', header: 'Price', meta: { className: 'w-30' } }
@@ -14,13 +15,19 @@ interface Props {
 export default function Price(props: Props) {
   const price = usePrice(props.denom)
 
+  const priceDecimals = getSpotPriceDecimals(BN(price))
   if (props.amount === 0 || props.type === 'vault') return null
 
   return (
     <DisplayCurrency
       className='text-xs text-right number'
       coin={BNCoin.fromDenomAndBigNumber('usd', BN(price))}
-      options={{ abbreviated: false }}
+      options={{
+        abbreviated: false,
+        maxDecimals: priceDecimals,
+        minDecimals: priceDecimals,
+      }}
+      showDetailedPrice
     />
   )
 }
diff --git a/src/components/perps/BalancesTable/Columns/EntryPrice.tsx b/src/components/perps/BalancesTable/Columns/EntryPrice.tsx
@@ -3,7 +3,7 @@ import Text from 'components/common/Text'
 import TitleAndSubCell from 'components/common/TitleAndSubCell'
 import { PRICE_ORACLE_DECIMALS } from 'constants/query'
 import { BNCoin } from 'types/classes/BNCoin'
-import { getPriceDecimals } from 'utils/formatters'
+import { getPerpsPriceDecimals } from 'utils/formatters'
 
 export const ENTRY_PRICE_META = (isOrderTable: boolean) => {
   return {
@@ -37,7 +37,7 @@ export default function EntryPrice(props: Props) {
         <DisplayCurrency
           coin={BNCoin.fromDenomAndBigNumber('usd', entryPrice ?? 0)}
           options={{
-            maxDecimals: getPriceDecimals(entryPrice),
+            maxDecimals: getPerpsPriceDecimals(entryPrice),
             abbreviated: false,
           }}
           showDetailedPrice
@@ -47,8 +47,8 @@ export default function EntryPrice(props: Props) {
         <DisplayCurrency
           coin={BNCoin.fromDenomAndBigNumber('usd', currentPrice ?? 0)}
           options={{
-            maxDecimals: getPriceDecimals(currentPrice),
-            minDecimals: getPriceDecimals(currentPrice),
+            maxDecimals: getPerpsPriceDecimals(currentPrice),
+            minDecimals: getPerpsPriceDecimals(currentPrice),
             abbreviated: false,
           }}
           showDetailedPrice

diff --git a/src/components/perps/BalancesTable/Columns/Size.tsx b/src/components/perps/BalancesTable/Columns/Size.tsx
@@ -5,7 +5,7 @@ import { FormattedNumber } from 'components/common/FormattedNumber'
 import Text from 'components/common/Text'
 import TitleAndSubCell from 'components/common/TitleAndSubCell'
 import { BNCoin } from 'types/classes/BNCoin'
-import { demagnify, getPriceDecimals } from 'utils/formatters'
+import { demagnify, getPerpsPriceDecimals } from 'utils/formatters'
 
 export const SIZE_META = {
   accessorKey: 'size',
@@ -46,7 +46,7 @@ export default function Size(props: Props) {
         <DisplayCurrency
           coin={BNCoin.fromDenomAndBigNumber('usd', value)}
           options={{
-            maxDecimals: getPriceDecimals(value),
+            maxDecimals: getPerpsPriceDecimals(value),
             minDecimals: 0,
             abbreviated: false,
           }}

diff --git a/src/components/perps/Module/ExpectedPrice.tsx b/src/components/perps/Module/ExpectedPrice.tsx
@@ -5,7 +5,7 @@ import usePerpsEnabledAssets from 'hooks/assets/usePerpsEnabledAssets'
 import useTradingFeeAndPrice from 'hooks/perps/useTradingFeeAndPrice'
 import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
-import { getPriceDecimals } from 'utils/formatters'
+import { getPerpsPriceDecimals } from 'utils/formatters'
 
 type Props = {
   denom: string
@@ -27,7 +27,10 @@ export const ExpectedPrice = (props: Props) => {
   return (
     <DisplayCurrency
       coin={BNCoin.fromDenomAndBigNumber('usd', override ? override : price)}
-      options={{ maxDecimals: getPriceDecimals(override ? override : price), abbreviated: false }}
+      options={{
+        maxDecimals: getPerpsPriceDecimals(override ? override : price),
+        abbreviated: false,
+      }}
       className={className}
       showDetailedPrice
     />

diff --git a/src/components/perps/Module/Summary.tsx b/src/components/perps/Module/Summary.tsx
@@ -31,7 +31,7 @@ import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
 import { OrderType } from 'types/enums'
 import { byDenom } from 'utils/array'
-import { formatLeverage, getPriceDecimals, magnify } from 'utils/formatters'
+import { formatLeverage, getPerpsPriceDecimals, magnify } from 'utils/formatters'
 import { BN } from 'utils/helpers'
 
 type Props = {
@@ -418,7 +418,7 @@ function ManageSummary(
             priceOverride ? size.times(priceOverride).shiftedBy(-asset.decimals) : size,
           )}
           options={{
-            maxDecimals: getPriceDecimals(priceOverride ?? size),
+            maxDecimals: getPerpsPriceDecimals(priceOverride ?? size),
             abbreviated: false,
           }}
         />

diff --git a/src/components/perps/Module/TradingFee.tsx b/src/components/perps/Module/TradingFee.tsx
@@ -2,7 +2,7 @@ import { CircularProgress } from 'components/common/CircularProgress'
 import DisplayCurrency from 'components/common/DisplayCurrency'
 import useTradingFeeAndPrice from 'hooks/perps/useTradingFeeAndPrice'
 import { BNCoin } from 'types/classes/BNCoin'
-import { getPriceDecimals } from 'utils/formatters'
+import { getPerpsPriceDecimals } from 'utils/formatters'
 
 type Props = {
   denom: string
@@ -38,7 +38,7 @@ export default function TradingFee(props: Props) {
       showSignPrefix={!!showPrefix}
       showDetailedPrice
       options={{
-        maxDecimals: getPriceDecimals(fee),
+        maxDecimals: getPerpsPriceDecimals(fee),
         abbreviated: false,
       }}
     />

diff --git a/src/components/trade/TradeChart/index.tsx b/src/components/trade/TradeChart/index.tsx
@@ -30,7 +30,7 @@ import {
   ResolutionString,
   widget,
 } from 'utils/charting_library'
-import { formatValue, getPriceDecimals, magnify } from 'utils/formatters'
+import { formatValue, getPerpsPriceDecimals, magnify } from 'utils/formatters'
 import { getTradingViewSettings } from 'utils/theme'
 
 interface Props {
@@ -372,7 +372,7 @@ export default function TradeChart(props: Props) {
                     prefix: '= ',
                     suffix: ` USD`,
                     abbreviated: false,
-                    maxDecimals: getPriceDecimals(props.buyAsset?.price?.amount),
+                    maxDecimals: getPerpsPriceDecimals(props.buyAsset?.price?.amount),
                   }}
                 />
               ) : (
@@ -384,7 +384,7 @@ export default function TradeChart(props: Props) {
                       prefix: '= ',
                       suffix: ` ${props.sellAsset.symbol}`,
                       abbreviated: false,
-                      maxDecimals: getPriceDecimals(props.sellAsset.price?.amount),
+                      maxDecimals: getPerpsPriceDecimals(props.sellAsset.price?.amount),
                     }}
                   />
 

diff --git a/src/components/trade/TradeModule/AssetSelector/AssetItem.tsx b/src/components/trade/TradeModule/AssetSelector/AssetItem.tsx
@@ -10,7 +10,7 @@ import { BN_ONE, BN_ZERO, MAX_AMOUNT_DECIMALS, MIN_AMOUNT } from 'constants/math
 import useFavoriteAssets from 'hooks/localStorage/useFavoriteAssets'
 import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
-import { demagnify, formatAmountToPrecision, getPriceDecimals } from 'utils/formatters'
+import { demagnify, formatAmountToPrecision, getPerpsPriceDecimals } from 'utils/formatters'
 
 interface Props {
   asset: Asset
@@ -111,7 +111,7 @@ export default function AssetItem(props: Props) {
             new BNCoin({ denom: asset.denom, amount: BN_ONE.shiftedBy(asset.decimals).toString() })
           }
           options={{
-            maxDecimals: asset.price ? getPriceDecimals(asset.price.amount) : undefined,
+            maxDecimals: asset.price ? getPerpsPriceDecimals(asset.price.amount) : undefined,
           }}
           showDetailedPrice
         />

diff --git a/src/components/trade/TradeModule/AssetSelector/AssetSelectorItem.tsx b/src/components/trade/TradeModule/AssetSelector/AssetSelectorItem.tsx
@@ -11,7 +11,7 @@ import { BN_ONE, BN_ZERO, MAX_AMOUNT_DECIMALS, MIN_AMOUNT } from 'constants/math
 import useFavoriteAssets from 'hooks/localStorage/useFavoriteAssets'
 import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
-import { demagnify, formatAmountToPrecision, getPriceDecimals } from 'utils/formatters'
+import { demagnify, formatAmountToPrecision, getPerpsPriceDecimals } from 'utils/formatters'
 import { BN } from 'utils/helpers'
 
 interface Props {
@@ -131,7 +131,7 @@ export default function AssetSelectorItem(props: Props) {
             })
           }
           options={{
-            maxDecimals: asset.price ? getPriceDecimals(asset.price.amount) : undefined,
+            maxDecimals: asset.price ? getPerpsPriceDecimals(asset.price.amount) : undefined,
           }}
           showDetailedPrice
         />

diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts
@@ -6,7 +6,7 @@ import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
 import { BN } from 'utils/helpers'
 
-export function getPriceDecimals(price?: number | BigNumber) {
+function getPriceDecimals(price?: number | BigNumber, additionalDecimals: number = 2) {
   if (!price) return 2
   const priceNum = BN(price).abs()
 
@@ -25,12 +25,20 @@ export function getPriceDecimals(price?: number | BigNumber) {
         break
       }
     }
-    return leadingZeros + 3
+    return leadingZeros + additionalDecimals
   }
 
   return 2
 }
 
+export function getPerpsPriceDecimals(price?: number | BigNumber) {
+  return getPriceDecimals(price, 3)
+}
+
+export function getSpotPriceDecimals(price?: number | BigNumber) {
+  return getPriceDecimals(price, 2)
+}
+
 export function truncate(text = '', [h, t]: [number, number] = [6, 6]): string {
   const head = text.slice(0, h)
   if (t === 0) return text.length > h + t ? head + '...' : text