col ratio health bar - change max ratio to display more healthy reg…

…ion (#1379) * feat: change healthy scale to be prominent By adjusting max ratio based on at risk threshold Fixes: #1377 * test: update snapshot * UI fixes * UI fixes * UI fixes Co-authored-by: thedoublejay <[email protected]>
BirthdayResearch · Nov 22, 2021 · 5e2165a · 5e2165a
1 parent a8ebd86
commit 5e2165a
Show file tree

Hide file tree

Showing 20 changed files with 83 additions and 66 deletions.
diff --git a/mobile-app/app/components/TokenIconGroup.tsx b/mobile-app/app/components/TokenIconGroup.tsx
@@ -18,7 +18,7 @@ export function TokenIconGroup (props: TokenIconGroupProps): JSX.Element {
         props.symbols?.map((symbol, index): JSX.Element | null => {
           if (index < props.maxIconToDisplay) {
             return (
-              <View key={symbol} style={[tailwind('bg-white rounded-full p-px relative'), { left: index * -5 }]}>
+              <View key={symbol} style={[tailwind('rounded-full p-px relative'), { left: index * -5 }]}>
                 <SymbolIcon
                   key={symbol}
                   symbol={symbol}

diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/VaultDetailScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/VaultDetailScreen.tsx
@@ -116,7 +116,7 @@ function VaultIdSection ({ vault }: { vault: LoanVault }): JSX.Element {
             >
               {translate('screens/VaultDetailScreen', 'Vault ID')}
             </ThemedText>
-            <VaultStatusTag status={vaultState} />
+            <VaultStatusTag status={vaultState.status} vaultStats={vaultState.vaultStats} />
           </View>
           <View
             style={tailwind('flex flex-row mb-2 items-center')}
@@ -140,7 +140,7 @@ function VaultIdSection ({ vault }: { vault: LoanVault }): JSX.Element {
         </View>
       </ThemedView>
       {
-        vault.state !== LoanVaultState.IN_LIQUIDATION && vaultState !== VaultStatus.Active && (
+        vault.state !== LoanVaultState.IN_LIQUIDATION && vaultState.status !== VaultStatus.Active && (
           <CollateralizationRatioDisplay
             collateralizationRatio={vault.collateralRatio}
             minCollateralizationRatio={vault.loanScheme.minColRatio}

diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/CollateralsTab.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/CollateralsTab.tsx
@@ -11,7 +11,6 @@ import { LoanVaultState } from '@defichain/whale-api-client/dist/api/loan'
 import { EmptyCollateral } from './EmptyCollateral'
 
 interface CollateralCardProps {
-  symbol: string
   displaySymbol: string
   amount?: BigNumber
   vaultShare?: BigNumber
@@ -33,7 +32,6 @@ export function CollateralsTab ({ vault }: {vault: LoanVault}): JSX.Element {
             batch.collaterals.map(collateral => (
               <CollateralCard
                 key={collateral.id}
-                symbol={collateral.symbol}
                 displaySymbol={collateral.displaySymbol}
                 vaultState={LoanVaultState.IN_LIQUIDATION}
               />
@@ -44,7 +42,6 @@ export function CollateralsTab ({ vault }: {vault: LoanVault}): JSX.Element {
           vault.collateralAmounts.map(collateral => (
             <CollateralCard
               key={collateral.id}
-              symbol={collateral.symbol}
               displaySymbol={collateral.displaySymbol}
               amount={new BigNumber(collateral.amount)}
               vaultShare={BigNumber.min(new BigNumber(collateral.amount).multipliedBy(collateral.activePrice?.active?.amount ?? 0).div(vault.collateralValue ?? 1), 1)}
@@ -65,7 +62,7 @@ function CollateralCard (props: CollateralCardProps): JSX.Element {
     >
       <View style={tailwind('flex flex-row mb-3 justify-between items-center')}>
         <View style={tailwind('flex flex-row items-center')}>
-          <SymbolIcon symbol={props.symbol} styleProps={{ width: 16, height: 16 }} />
+          <SymbolIcon symbol={props.displaySymbol} styleProps={{ width: 16, height: 16 }} />
           <ThemedText style={tailwind('ml-2 font-medium')}>{props.displaySymbol}</ThemedText>
         </View>
         <NumberFormat

diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/DetailsTab.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/DetailsTab.tsx
@@ -8,7 +8,7 @@ import { translate } from '@translations'
 import BigNumber from 'bignumber.js'
 import React from 'react'
 import NumberFormat from 'react-number-format'
-import { useVaultStatus, VaultStatus, VaultStatusTag } from '../../components/VaultStatusTag'
+import { useVaultStatus, VaultHealthItem, VaultStatusTag } from '../../components/VaultStatusTag'
 import { useNextCollateralizationRatio } from '../../hooks/NextCollateralizationRatio'
 import { BottomSheetInfo } from '@components/BottomSheetInfo'
 
@@ -97,7 +97,7 @@ function CollateralizationRatioSection (props: CollateralizationRatioSectionProp
             value={props.collateralizationRatio.toFixed(2)}
             testId='text_col_ratio'
             type='current'
-            status={currentVaultState}
+            vaultState={currentVaultState}
           />
         )}
       {props.nextCollateralizationRatio.isLessThan(0)
@@ -117,7 +117,7 @@ function CollateralizationRatioSection (props: CollateralizationRatioSectionProp
             value={props.nextCollateralizationRatio.toFixed(2)}
             testId='text_next_col'
             type='next'
-            status={nextVaultState}
+            vaultState={nextVaultState}
           />
         )}
       <NumberRow
@@ -152,7 +152,7 @@ interface CollateralizationRatioRowProps {
   value: string
   testId: string
   type: 'current' | 'next'
-  status: VaultStatus
+  vaultState: VaultHealthItem
 }
 
 function CollateralizationRatioRow (props: CollateralizationRatioRowProps): JSX.Element {
@@ -177,7 +177,10 @@ function CollateralizationRatioRow (props: CollateralizationRatioRowProps): JSX.
         >
           {props.label}
         </ThemedText>
-        <BottomSheetInfo alertInfo={props.type === 'next' ? nextAlertInfo : alertInfo} name={props.type === 'next' ? nextAlertInfo.title : alertInfo.title} />
+        <BottomSheetInfo
+          alertInfo={props.type === 'next' ? nextAlertInfo : alertInfo}
+          name={props.type === 'next' ? nextAlertInfo.title : alertInfo.title}
+        />
       </View>
 
       <View
@@ -199,7 +202,7 @@ function CollateralizationRatioRow (props: CollateralizationRatioRowProps): JSX.
               >
                 {props.type === 'next' && '~'}{val}
               </ThemedText>
-              <VaultStatusTag status={props.status} />
+              <VaultStatusTag status={props.vaultState.status} vaultStats={props.vaultState.vaultStats} />
             </View>
           )}
         />

diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/LoansTab.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/VaultDetail/components/LoansTab.tsx
@@ -79,7 +79,7 @@ function LoanCard (props: LoanCardProps): JSX.Element {
     >
       <View style={tailwind('flex flex-row items-center')}>
         <SymbolIcon
-          symbol={props.symbol} styleProps={{
+          symbol={props.displaySymbol} styleProps={{
           width: 16,
           height: 16
         }}

diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/components/BottomSheetVaultList.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/components/BottomSheetVaultList.tsx
@@ -64,7 +64,7 @@ export const BottomSheetVaultList = ({
                   >
                     {item.vaultId}
                   </ThemedText>
-                  <VaultStatusTag status={vaultState} />
+                  <VaultStatusTag status={vaultState.status} vaultStats={vaultState.vaultStats} />
                 </View>
               </View>
               <View style={tailwind('flex items-end')}>

diff --git a/...e-app/app/screens/AppNavigator/screens/Loans/components/CollateralizationRatioDisplay.tsx b/...e-app/app/screens/AppNavigator/screens/Loans/components/CollateralizationRatioDisplay.tsx
@@ -19,12 +19,13 @@ interface CollateralizationRatioDisplayProps {
 }
 
 export function CollateralizationRatioDisplay (props: CollateralizationRatioDisplayProps): JSX.Element {
-  const maxRatio = 1000
+  const atRiskThresholdMultiplier = 1.5
   const minColRatio = new BigNumber(props.minCollateralizationRatio)
+  const maxRatio = getMaxRatio(minColRatio.multipliedBy(atRiskThresholdMultiplier))
   const normalizedColRatio = new BigNumber(props.collateralizationRatio).dividedBy(maxRatio)
   const normalizedNextRatio = new BigNumber(props.nextCollateralizationRatio).dividedBy(maxRatio).multipliedBy(100)
   const normalizedLiquidatedThreshold = minColRatio.multipliedBy(1.25).dividedBy(maxRatio).multipliedBy(100)
-  const normalizedAtRiskThreshold = minColRatio.multipliedBy(1.5).dividedBy(maxRatio).multipliedBy(100)
+  const normalizedAtRiskThreshold = minColRatio.multipliedBy(atRiskThresholdMultiplier).dividedBy(maxRatio).multipliedBy(100)
 
   return (
     <View style={tailwind('mb-4')}>
@@ -177,9 +178,9 @@ function HealthBar (props: { normalizedColRatio: BigNumber, normalizedNextRatio:
       <Progress.Bar
         progress={props.normalizedColRatio.toNumber()}
         width={null}
-        borderColor={getColor(isLight ? 'gray-300' : 'gray-600')}
-        color={getColor(isLight ? 'white' : 'black')}
-        unfilledColor={getColor(isLight ? 'gray-100' : 'gray-900')}
+        borderColor={getColor(isLight ? 'gray-300' : 'gray-800')}
+        color={getColor(isLight ? 'white' : 'gray-200')}
+        unfilledColor={getColor(isLight ? 'gray-100' : 'gray-700')}
         borderRadius={8}
         height={12}
       />
@@ -231,3 +232,8 @@ function ColorScale (props: { normalizedLiquidatedThreshold: BigNumber, normaliz
     </View>
   )
 }
+
+function getMaxRatio (atRiskThreshold: BigNumber): number {
+  const healthyScaleRatio = 0.75
+  return atRiskThreshold.dividedBy(new BigNumber(1).minus(healthyScaleRatio)).toNumber()
+}
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/components/VaultCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/components/VaultCard.tsx
@@ -67,7 +67,7 @@ export function VaultCard (props: VaultCardProps): JSX.Element {
                     >
                       {translate('screens/VaultDetailScreen', 'Vault ID')}
                     </ThemedText>
-                    <VaultStatusTag status={vaultState} />
+                    <VaultStatusTag status={vaultState.status} vaultStats={vaultState.vaultStats} />
                   </View>
                   <TouchableOpacity
                     style={tailwind('flex flex-row mb-0.5 items-center')}
@@ -130,7 +130,7 @@ export function VaultCard (props: VaultCardProps): JSX.Element {
           </View>
         </View>
         {
-          ![VaultStatus.Active, VaultStatus.Unknown, VaultStatus.Liquidated].includes(vaultState) && (
+          ![VaultStatus.Active, VaultStatus.Unknown, VaultStatus.Liquidated].includes(vaultState.status) && (
             <CollateralizationRatioDisplay
               collateralizationRatio={vault.collateralRatio}
               minCollateralizationRatio={vault.loanScheme.minColRatio}

diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/components/VaultStatusTag.tsx b/mobile-app/app/screens/AppNavigator/screens/Loans/components/VaultStatusTag.tsx
@@ -4,7 +4,10 @@ import { translate } from '@translations'
 import React from 'react'
 import { LoanVaultState } from '@defichain/whale-api-client/dist/api/loan'
 import BigNumber from 'bignumber.js'
-import { useCollateralRatioStats } from '@screens/AppNavigator/screens/Loans/hooks/CollateralizationRatio'
+import {
+  CollateralizationRatioStats,
+  useCollateralRatioStats
+} from '@screens/AppNavigator/screens/Loans/hooks/CollateralizationRatio'
 
 export enum VaultStatus {
   Active = 'ACTIVE',
@@ -16,52 +19,65 @@ export enum VaultStatus {
   Unknown = 'UNKNOWN'
 }
 
-export function useVaultStatus (status: LoanVaultState, collateralRatio: BigNumber, minColRatio: BigNumber, totalLoanAmount: BigNumber): VaultStatus {
+export interface VaultHealthItem {
+  vaultStats: CollateralizationRatioStats
+  status: VaultStatus
+}
+
+export function useVaultStatus (status: LoanVaultState, collateralRatio: BigNumber, minColRatio: BigNumber, totalLoanAmount: BigNumber): VaultHealthItem {
   const colRatio = collateralRatio.gte(0) ? collateralRatio : new BigNumber(0)
   const stats = useCollateralRatioStats({
     colRatio,
     minColRatio,
     totalLoanAmount
   })
+  let vaultStatus: VaultStatus
   if (status === LoanVaultState.FROZEN) {
-    return VaultStatus.Halted
+    vaultStatus = VaultStatus.Halted
   } else if (status === LoanVaultState.UNKNOWN) {
-    return VaultStatus.Unknown
+    vaultStatus = VaultStatus.Unknown
   } else if (status === LoanVaultState.IN_LIQUIDATION) {
-    return VaultStatus.Liquidated
+    vaultStatus = VaultStatus.Liquidated
   } else if (stats.isInLiquidation) {
-    return VaultStatus.NearLiquidation
+    vaultStatus = VaultStatus.NearLiquidation
   } else if (stats.isAtRisk) {
-    return VaultStatus.AtRisk
+    vaultStatus = VaultStatus.AtRisk
   } else if (stats.isHealthy) {
-    return VaultStatus.Healthy
+    vaultStatus = VaultStatus.Healthy
   } else {
-    return VaultStatus.Active
+    vaultStatus = VaultStatus.Active
+  }
+  return {
+    status: vaultStatus,
+    vaultStats: stats
   }
 }
 
-export function VaultStatusTag ({ status }: { status: VaultStatus }): JSX.Element {
+export function VaultStatusTag ({
+  status,
+  vaultStats
+}: VaultHealthItem): JSX.Element {
   if (status === VaultStatus.Unknown) {
     return <></>
   }
   return (
     <ThemedView
       light={tailwind(
         {
+          'bg-error-100': status === VaultStatus.Liquidated || (status === VaultStatus.NearLiquidation && vaultStats.isInLiquidation),
           'bg-blue-100': status === VaultStatus.Active,
           'bg-success-100': status === VaultStatus.Healthy,
           'bg-warning-100': status === VaultStatus.AtRisk,
-          'bg-gray-100': status === VaultStatus.Halted,
-          'bg-error-100': status === VaultStatus.Liquidated || status === VaultStatus.NearLiquidation
+          'bg-gray-100': status === VaultStatus.Halted
         }
       )}
       dark={tailwind(
         {
+          'bg-darkerror-100': status === VaultStatus.Liquidated || (status === VaultStatus.NearLiquidation && vaultStats.isInLiquidation),
           'bg-darkblue-100': status === VaultStatus.Active,
           'bg-darksuccess-100': status === VaultStatus.Healthy,
           'bg-darkwarning-100': status === VaultStatus.AtRisk,
-          'bg-gray-100': status === VaultStatus.Halted,
-          'bg-darkerror-100': status === VaultStatus.Liquidated || status === VaultStatus.NearLiquidation
+          'bg-gray-100': status === VaultStatus.Halted
         }
       )}
       style={tailwind('flex flex-row items-center')}
@@ -73,7 +89,7 @@ export function VaultStatusTag ({ status }: { status: VaultStatus }): JSX.Elemen
             'text-success-500': status === VaultStatus.Healthy,
             'text-warning-500': status === VaultStatus.AtRisk,
             'text-gray-400': status === VaultStatus.Halted,
-            'text-error-500': status === VaultStatus.Liquidated || status === VaultStatus.NearLiquidation
+            'text-error-500': status === VaultStatus.Liquidated || (status === VaultStatus.NearLiquidation && vaultStats.isInLiquidation)
           }
         )}
         dark={tailwind(
@@ -82,7 +98,7 @@ export function VaultStatusTag ({ status }: { status: VaultStatus }): JSX.Elemen
             'text-darksuccess-500': status === VaultStatus.Healthy,
             'text-darkwarning-500': status === VaultStatus.AtRisk,
             'text-gray-500': status === VaultStatus.Halted,
-            'text-darkerror-500': status === VaultStatus.Liquidated || status === VaultStatus.NearLiquidation
+            'text-darkerror-500': status === VaultStatus.Liquidated || (status === VaultStatus.NearLiquidation && vaultStats.isInLiquidation)
           }
         )}
         style={tailwind('px-2 py-0.5 font-medium text-xs')}

diff --git a/...p/app/screens/AppNavigator/screens/Loans/components/__snapshots__/VaultCard.test.tsx.snap b/...p/app/screens/AppNavigator/screens/Loans/components/__snapshots__/VaultCard.test.tsx.snap