User friendly ltv when super high (#3712)

OasisDEX · Mar 22, 2024 · 38ad03b · 38ad03b
1 parent 48f06f8
commit 38ad03b
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 11 deletions.
diff --git 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({
     <DetailsSectionContentSimpleModal
       title={t('omni-kit.content-card.ltv.title')}
       description={t('omni-kit.content-card.ltv.modal-description')}
-      value={ltv.gt(1.1) ? '>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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')
 }