Fix isolated asset total debt display (#118)

marsfoundation · Jun 19, 2024 · ae0f9b3 · ae0f9b3
1 parent 2af735c
commit ae0f9b3
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 56 deletions.
diff --git a/.github/workflows/ipfs-release.yml b/.github/workflows/ipfs-release.yml
@@ -11,7 +11,7 @@ jobs:
         os: [ubuntu-latest]
     runs-on: ${{ matrix.os }}
     # a safe guard to ensure that the workflow is only triggered on the main branch
-    if: github.ref == 'refs/heads/main'
+    # if: github.ref == 'refs/heads/main'
     outputs:
       pinata_hash: '${{ steps.pinata.outputs.hash }}'
 

diff --git a/.../app/src/features/market-details/components/status-panel/CollateralStatusPanel.stories.ts b/.../app/src/features/market-details/components/status-panel/CollateralStatusPanel.stories.ts
@@ -21,60 +21,58 @@ export const CanBeUsedAsCollateral: Story = {
   name: 'Can be used as collateral',
   args: {
     status: 'yes',
-    debtCeiling: NormalizedUnitNumber(0),
-    debt: NormalizedUnitNumber(1000),
     maxLtv: Percentage(0.8),
     liquidationThreshold: Percentage(0.825),
     liquidationPenalty: Percentage(0.05),
   },
 }
 
 export const CanBeUsedAsCollateralMobile = {
-  ...getMobileStory(CanBeUsedAsCollateral),
+  ...getMobileStory(CanBeUsedAsCollateral as any),
   name: 'Can be used as collateral (Mobile)',
 }
 export const CanBeUsedAsCollateralTablet = {
-  ...getTabletStory(CanBeUsedAsCollateral),
+  ...getTabletStory(CanBeUsedAsCollateral as any),
   name: 'Can be used as collateral (Tablet)',
 }
 
 export const CanBeUsedAsCollateralInIsolationMode: Story = {
   name: 'Only in isolation Mode',
   args: {
     status: 'only-in-isolation-mode',
-    debtCeiling: NormalizedUnitNumber(50_000_000),
-    debt: NormalizedUnitNumber(37_896_154),
+    isolationModeInfo: {
+      debtCeiling: NormalizedUnitNumber(50_000_000),
+      debt: NormalizedUnitNumber(37_896_154),
+    },
     maxLtv: Percentage(0.8),
     liquidationThreshold: Percentage(0.825),
     liquidationPenalty: Percentage(0.05),
   },
 }
 export const CanBeUsedAsCollateralInIsolationModeMobile = {
-  ...getMobileStory(CanBeUsedAsCollateralInIsolationMode),
+  ...getMobileStory(CanBeUsedAsCollateralInIsolationMode as any),
   name: 'Only in isolation Mode (Mobile)',
 }
 export const CanBeUsedAsCollateralInIsolationModeTablet = {
-  ...getTabletStory(CanBeUsedAsCollateralInIsolationMode),
+  ...getTabletStory(CanBeUsedAsCollateralInIsolationMode as any),
   name: 'Only in isolation Mode (Tablet)',
 }
 
 export const CannotBeUsedAsCollateral: Story = {
   name: 'Cannot Be Used As Collateral',
   args: {
     status: 'no',
-    debtCeiling: NormalizedUnitNumber(0),
-    debt: NormalizedUnitNumber(1000),
     maxLtv: Percentage(0),
     liquidationThreshold: Percentage(0),
     liquidationPenalty: Percentage(0),
   },
 }
 export const CannotBeUsedAsCollateralMobile = {
-  ...getMobileStory(CannotBeUsedAsCollateral),
+  ...getMobileStory(CannotBeUsedAsCollateral as any),
   name: 'Cannot Be Used As Collateral (Mobile)',
 }
 export const CannotBeUsedAsCollateralTablet = {
-  ...getTabletStory(CannotBeUsedAsCollateral),
+  ...getTabletStory(CannotBeUsedAsCollateral as any),
   name: 'Cannot Be Used As Collateral (Tablet)',
 }
 
@@ -93,10 +91,10 @@ export const Dai: Story = {
   },
 }
 export const DaiMobile = {
-  ...getMobileStory(Dai),
+  ...getMobileStory(Dai as any),
   name: 'DAI (Mobile)',
 }
 export const DaiTablet = {
-  ...getTabletStory(Dai),
+  ...getTabletStory(Dai as any),
   name: 'DAI (Tablet)',
 }
diff --git a/packages/app/src/features/market-details/components/status-panel/CollateralStatusPanel.tsx b/packages/app/src/features/market-details/components/status-panel/CollateralStatusPanel.tsx
@@ -1,11 +1,9 @@
 import { formatPercentage } from '@/domain/common/format'
-import { CollateralEligibilityStatus } from '@/domain/market-info/reserve-status'
-import { NormalizedUnitNumber, Percentage } from '@/domain/types/NumericValues'
-import { Token } from '@/domain/types/Token'
 import { DebtCeilingProgress } from '@/features/markets/components/debt-ceiling-progress/DebtCeilingProgress'
 import { Panel } from '@/ui/atoms/panel/Panel'
 import { ApyTooltip } from '@/ui/molecules/apy-tooltip/ApyTooltip'
 
+import { CollateralStatusInfo } from '../../types'
 import { EmptyStatusPanel } from './components/EmptyStatusPanel'
 import { Header } from './components/Header'
 import { StatusPanelGrid } from './components/StatusPanelGrid'
@@ -15,29 +13,9 @@ import { InfoTilesGrid } from './components/info-tile/InfoTilesGrid'
 import { StatusIcon } from './components/status-icon/StatusIcon'
 import { TokenBadge } from './components/token-badge/TokenBadge'
 
-export interface CollateralStatusPanelProps {
-  status: CollateralEligibilityStatus
-  debtCeiling: NormalizedUnitNumber
-  debt: NormalizedUnitNumber
-  maxLtv: Percentage
-  liquidationThreshold: Percentage
-  liquidationPenalty: Percentage
-  supplyReplacement?: {
-    token: Token
-    totalSupplied: NormalizedUnitNumber
-    supplyAPY: Percentage | undefined
-  }
-}
+export function CollateralStatusPanel(props: CollateralStatusInfo) {
+  const { status, maxLtv, liquidationThreshold, liquidationPenalty, supplyReplacement } = props
 
-export function CollateralStatusPanel({
-  status,
-  debtCeiling,
-  debt,
-  maxLtv,
-  liquidationThreshold,
-  liquidationPenalty,
-  supplyReplacement,
-}: CollateralStatusPanelProps) {
   if (status === 'no') {
     return <EmptyStatusPanel status={status} variant="collateral" />
   }
@@ -86,7 +64,9 @@ export function CollateralStatusPanel({
           </InfoTile>
         </InfoTilesGrid>
 
-        {status === 'only-in-isolation-mode' && <DebtCeilingProgress debt={debt} debtCeiling={debtCeiling} />}
+        {props.status === 'only-in-isolation-mode' && (
+          <DebtCeilingProgress debt={props.isolationModeInfo.debt} debtCeiling={props.isolationModeInfo.debtCeiling} />
+        )}
       </StatusPanelGrid>
     </Panel.Wrapper>
   )

diff --git a/packages/app/src/features/market-details/logic/makeMarketOverview.ts b/packages/app/src/features/market-details/logic/makeMarketOverview.ts
@@ -28,11 +28,10 @@ export function makeMarketOverview({ reserve, marketInfo }: MakeMarketOverviewPa
     collateral: {
       status: reserve.collateralEligibilityStatus,
       token: reserve.token,
-      debtCeiling: reserve.debtCeiling,
-      debt: reserve.totalDebt,
       maxLtv: reserve.maxLtv,
       liquidationThreshold: reserve.liquidationThreshold,
       liquidationPenalty: reserve.liquidationBonus,
+      isolationModeInfo: { debt: reserve.isolationModeTotalDebt, debtCeiling: reserve.debtCeiling },
     },
     borrow: {
       hasSparkAirdrop: hasAirdropForBorrowing,

diff --git a/packages/app/src/features/market-details/types.ts b/packages/app/src/features/market-details/types.ts
@@ -15,6 +15,24 @@ export interface SupplyReplacementInfo {
   totalSupplied: NormalizedUnitNumber
   supplyAPY: Percentage | undefined
 }
+export type CollateralStatusInfo = (
+  | {
+      status: Extract<CollateralEligibilityStatus, 'only-in-isolation-mode'>
+      isolationModeInfo: {
+        debt: NormalizedUnitNumber
+        debtCeiling: NormalizedUnitNumber
+      }
+    }
+  | {
+      status: Exclude<CollateralEligibilityStatus, 'only-in-isolation-mode'>
+    }
+) & {
+  token: Token
+  maxLtv: Percentage
+  liquidationThreshold: Percentage
+  liquidationPenalty: Percentage
+  supplyReplacement?: SupplyReplacementInfo
+}
 export interface MarketOverview {
   supply?: {
     hasSparkAirdrop: boolean
@@ -23,16 +41,7 @@ export interface MarketOverview {
     supplyCap?: NormalizedUnitNumber
     apy: Percentage | undefined
   }
-  collateral: {
-    status: CollateralEligibilityStatus
-    token: Token
-    debtCeiling: NormalizedUnitNumber
-    debt: NormalizedUnitNumber
-    maxLtv: Percentage
-    liquidationThreshold: Percentage
-    liquidationPenalty: Percentage
-    supplyReplacement?: SupplyReplacementInfo
-  }
+  collateral: CollateralStatusInfo
   borrow: {
     hasSparkAirdrop: boolean
     status: BorrowEligibilityStatus

diff --git a/packages/app/src/features/market-details/views/MarketDetailsView.stories.ts b/packages/app/src/features/market-details/views/MarketDetailsView.stories.ts
@@ -52,8 +52,6 @@ const args: MarketDetailsViewProps = {
     collateral: {
       status: 'yes',
       token: tokens.rETH,
-      debt: NormalizedUnitNumber(1000),
-      debtCeiling: NormalizedUnitNumber(0),
       maxLtv: Percentage(0.8),
       liquidationThreshold: Percentage(0.825),
       liquidationPenalty: Percentage(0.05),

diff --git a/packages/app/src/pages/MarketDetails.test-e2e.ts b/packages/app/src/pages/MarketDetails.test-e2e.ts
@@ -211,7 +211,7 @@ test.describe('Market details', () => {
       })
 
       const marketDetailsPage = new MarketDetailsPageObject(page)
-      await marketDetailsPage.expectDebt('$0.00')
+      await marketDetailsPage.expectDebt('$3.17M')
       await marketDetailsPage.expectDebtCeiling('$50M')
     })
   })