diff --git a/features/omni-kit/components/details-section/modals/OmniCardDataLtvModal.tsx b/features/omni-kit/components/details-section/modals/OmniCardDataLtvModal.tsx index 55737f3e8c..581a82699b 100644 --- a/features/omni-kit/components/details-section/modals/OmniCardDataLtvModal.tsx +++ b/features/omni-kit/components/details-section/modals/OmniCardDataLtvModal.tsx @@ -2,7 +2,7 @@ import type BigNumber from 'bignumber.js' import { DetailsSectionContentSimpleModal } from 'components/DetailsSectionContentSimpleModal' import { AutomationFeatures } from 'features/automation/common/types' import type { OmniCardLtvAutomationData } from 'features/omni-kit/components/details-section' -import { formatDecimalAsPercent } from 'helpers/formatters/format' +import { formatDecimalAsPercent, formatLtvDecimalAsPercent } from 'helpers/formatters/format' import { useTranslation } from 'next-i18next' import React from 'react' import { Card, Heading, Text } from 'theme-ui' @@ -29,7 +29,7 @@ export function OmniCardDataLtvModal({ 110.00%' : formatDecimalAsPercent(ltv)} + value={formatLtvDecimalAsPercent(ltv)} > <> {maxLtv && ( diff --git a/features/omni-kit/components/details-section/parsers/useOmniCardDataLtv.ts b/features/omni-kit/components/details-section/parsers/useOmniCardDataLtv.ts index 17e4daeab3..1dd62d3b63 100644 --- a/features/omni-kit/components/details-section/parsers/useOmniCardDataLtv.ts +++ b/features/omni-kit/components/details-section/parsers/useOmniCardDataLtv.ts @@ -4,7 +4,7 @@ import type { OmniContentCardBase, OmniContentCardDataWithModal, } from 'features/omni-kit/components/details-section' -import { formatDecimalAsPercent } from 'helpers/formatters/format' +import { formatDecimalAsPercent, formatLtvDecimalAsPercent } from 'helpers/formatters/format' export type OmniCardLtvAutomationData = { isStopLossLikeEnabled: boolean @@ -48,9 +48,9 @@ export function useOmniCardDataLtv({ return { title: { key: 'omni-kit.content-card.ltv.title' }, - value: ltv.gt(1.1) ? '>110.00%' : formatDecimalAsPercent(ltv), + value: formatLtvDecimalAsPercent(ltv), ...(afterLtv && { - change: [formatDecimalAsPercent(afterLtv)], + change: [formatLtvDecimalAsPercent(afterLtv)], }), ...(footnote && { footnote, diff --git a/features/omni-kit/components/sidebars/borrow/OmniBorrowFormOrder.tsx b/features/omni-kit/components/sidebars/borrow/OmniBorrowFormOrder.tsx index f61b51de1d..d11f4540e0 100644 --- a/features/omni-kit/components/sidebars/borrow/OmniBorrowFormOrder.tsx +++ b/features/omni-kit/components/sidebars/borrow/OmniBorrowFormOrder.tsx @@ -7,6 +7,7 @@ import { OmniProductType } from 'features/omni-kit/types' import { formatCryptoBalance, formatDecimalAsPercent, + formatLtvDecimalAsPercent, formatUsdValue, } from 'helpers/formatters/format' import { one } from 'helpers/zero' @@ -48,9 +49,9 @@ export function OmniBorrowFormOrder() { afterCollateralLocked: simulationData?.collateralAmount && `${formatCryptoBalance(simulationData.collateralAmount)} ${collateralToken}`, - ltv: formatDecimalAsPercent(positionData.riskRatio.loanToValue), + ltv: formatLtvDecimalAsPercent(positionData.riskRatio.loanToValue), afterLtv: - simulationData?.riskRatio && formatDecimalAsPercent(simulationData.riskRatio.loanToValue), + simulationData?.riskRatio && formatLtvDecimalAsPercent(simulationData.riskRatio.loanToValue), liquidationPrice: `${formatCryptoBalance(liquidationPrice)} ${priceFormat}`, afterLiquidationPrice: afterLiquidationPrice && `${formatCryptoBalance(afterLiquidationPrice)} ${priceFormat}`, diff --git a/features/omni-kit/components/sidebars/multiply/OmniMultiplyFormOrder.tsx b/features/omni-kit/components/sidebars/multiply/OmniMultiplyFormOrder.tsx index eca18ebaf3..ed8ee804d2 100644 --- a/features/omni-kit/components/sidebars/multiply/OmniMultiplyFormOrder.tsx +++ b/features/omni-kit/components/sidebars/multiply/OmniMultiplyFormOrder.tsx @@ -23,6 +23,7 @@ import { formatAmount, formatCryptoBalance, formatDecimalAsPercent, + formatLtvDecimalAsPercent, formatUsdValue, } from 'helpers/formatters/format' import { useObservable } from 'helpers/observableHook' @@ -152,10 +153,10 @@ export function OmniMultiplyFormOrder() { positionDebt: `${formatCryptoBalance(positionData.debtAmount)} ${quoteToken}`, afterPositionDebt: afterPositionDebt && `${formatCryptoBalance(afterPositionDebt)} ${quoteToken}`, - loanToValue: formatDecimalAsPercent(positionData.riskRatio.loanToValue), + loanToValue: formatLtvDecimalAsPercent(positionData.riskRatio.loanToValue), afterLoanToValue: simulationData?.riskRatio && - formatDecimalAsPercent( + formatLtvDecimalAsPercent( simulationData.riskRatio.loanToValue.decimalPlaces(4, BigNumber.ROUND_DOWN), ), dynamicMaxLtv: formatDecimalAsPercent(positionData.maxRiskRatio.loanToValue), diff --git a/features/omni-kit/controllers/OmniLayoutController.tsx b/features/omni-kit/controllers/OmniLayoutController.tsx index 7d387c7788..c3c00b309b 100644 --- a/features/omni-kit/controllers/OmniLayoutController.tsx +++ b/features/omni-kit/controllers/OmniLayoutController.tsx @@ -22,7 +22,7 @@ import { getOmniHeadlineProps } from 'features/omni-kit/helpers' import { isPoolSupportingMultiply } from 'features/omni-kit/protocols/ajna/helpers' import { OmniProductType, OmniSidebarAutomationStep } from 'features/omni-kit/types' import { useAppConfig } from 'helpers/config' -import { formatCryptoBalance, formatDecimalAsPercent } from 'helpers/formatters/format' +import { formatCryptoBalance, formatLtvDecimalAsPercent } from 'helpers/formatters/format' import { hasCommonElement } from 'helpers/hasCommonElement' import { useAccount } from 'helpers/useAccount' import { useTranslation } from 'next-i18next' @@ -120,7 +120,7 @@ export function OmniLayoutController({ txHandler }: { txHandler: () => () => voi ? [ { label: t('omni-kit.headline.details.current-ltv'), - value: formatDecimalAsPercent(ltv), + value: formatLtvDecimalAsPercent(ltv), }, ] : []), diff --git a/helpers/formatters/format.ts b/helpers/formatters/format.ts index 7f552a5f82..7c8a653fb5 100644 --- a/helpers/formatters/format.ts +++ b/helpers/formatters/format.ts @@ -154,6 +154,31 @@ export function formatDecimalAsPercent( }) } +export function formatLtvDecimalAsPercent( + number: BigNumber, + { + precision = 2, + plus = false, + roundMode = BigNumber.ROUND_DOWN, + noPercentSign = false, + }: FormatPercentOptions = {}, +) { + const ltvHighestUiValue = new BigNumber(1.1) + const value = number.gt(ltvHighestUiValue) ? ltvHighestUiValue : number + const percentageValue = formatPercent(value.times(100), { + precision, + plus, + roundMode, + noPercentSign, + }) + + if (number.gt(ltvHighestUiValue)) { + return `>${percentageValue}` + } + + return percentageValue +} + export function formatDateTime(time: Date, showMs?: boolean): string { return dayjs(time).format(showMs ? 'DD.MM HH:mm:ss' : 'DD.MM HH:mm') }