diff --git a/src/components/account/AccountBalancesTable/Columns/LiqPrice.tsx b/src/components/account/AccountBalancesTable/Columns/LiqPrice.tsx index b4a45d3be..5c947be9f 100644 --- 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 index 6669cd6fc..b3e0efb08 100644 --- 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 ( ) } diff --git a/src/components/perps/BalancesTable/Columns/EntryPrice.tsx b/src/components/perps/BalancesTable/Columns/EntryPrice.tsx index 01aae528e..20d7b233e 100644 --- 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) { { return ( diff --git a/src/components/perps/Module/Summary.tsx b/src/components/perps/Module/Summary.tsx index fd2f62907..aee744a00 100644 --- 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 index eed53cb7f..c49d27902 100644 --- 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 index 311883aba..158cc9ad5 100644 --- 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 index 2e6b58fc1..2ec8c6f51 100644 --- 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 index 9c93f8500..0ac105cab 100644 --- 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 index a7f83d524..b1ce7e14f 100644 --- 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