Improve latest debt loading (#798)

* Improve latest debt loading * Typing fixes
liquity · Jan 30, 2025 · 6cdfa14 · 6cdfa14
1 parent 60e1a2c
commit 6cdfa14
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 18 deletions.
diff --git a/frontend/app/src/comps/Positions/PositionCardBorrow.tsx b/frontend/app/src/comps/Positions/PositionCardBorrow.tsx
@@ -1,6 +1,8 @@
 import type { PositionLoanCommitted } from "@/src/types";
+import type { Dnum } from "dnum";
 import type { ReactNode } from "react";
 
+import { Amount } from "@/src/comps/Amount/Amount";
 import { formatLiquidationRisk } from "@/src/formatting";
 import { fmtnum } from "@/src/formatting";
 import { getLiquidationRisk, getLtv, getRedemptionRisk } from "@/src/liquity-math";
@@ -16,7 +18,7 @@ import { CardRow, CardRows } from "./shared";
 
 export function PositionCardBorrow({
   batchManager,
-  borrowed,
+  debt,
   collIndex,
   deposit,
   interestRate,
@@ -26,20 +28,21 @@ export function PositionCardBorrow({
   & Pick<
     PositionLoanCommitted,
     | "batchManager"
-    | "borrowed"
     | "collIndex"
     | "deposit"
     | "interestRate"
     | "troveId"
   >
   & {
+    debt: null | Dnum;
     statusTag?: ReactNode;
   })
 {
   const token = getCollToken(collIndex);
   const collateralPriceUsd = usePrice(token?.symbol ?? null);
 
-  const ltv = collateralPriceUsd.data && getLtv(deposit, borrowed, collateralPriceUsd.data);
+  const ltv = debt && collateralPriceUsd.data
+    && getLtv(deposit, debt, collateralPriceUsd.data);
   const redemptionRisk = getRedemptionRisk(interestRate);
 
   const maxLtv = token && dn.from(1 / token.collateralRatio, 18);
@@ -48,7 +51,7 @@ export function PositionCardBorrow({
   const title = token
     ? [
       `Loan ID: ${shortenTroveId(troveId)}…`,
-      `Borrowed: ${fmtnum(borrowed, "full")} BOLD`,
+      `Debt: ${fmtnum(debt, "full")} BOLD`,
       `Collateral: ${fmtnum(deposit, "full")} ${token.name}`,
       `Interest rate: ${fmtnum(interestRate, "pctfull")}%`,
     ]
@@ -87,7 +90,7 @@ export function PositionCardBorrow({
         main={{
           value: (
             <HFlex gap={8} alignItems="center" justifyContent="flex-start">
-              {fmtnum(borrowed)}
+              <Amount value={debt} fallback="−" />
               <TokenIcon
                 size={24}
                 symbol="BOLD"

diff --git a/frontend/app/src/comps/Positions/PositionCardLeverage.tsx b/frontend/app/src/comps/Positions/PositionCardLeverage.tsx
@@ -1,4 +1,5 @@
 import type { PositionLoanCommitted } from "@/src/types";
+import type { Dnum } from "dnum";
 import type { ReactNode } from "react";
 
 import { formatRedemptionRisk } from "@/src/formatting";
@@ -15,7 +16,7 @@ import { PositionCard } from "./PositionCard";
 import { CardRow, CardRows } from "./shared";
 
 export function PositionCardLeverage({
-  borrowed,
+  debt,
   collIndex,
   deposit,
   interestRate,
@@ -24,13 +25,13 @@ export function PositionCardLeverage({
 }:
   & Pick<
     PositionLoanCommitted,
-    | "borrowed"
     | "collIndex"
     | "deposit"
     | "interestRate"
     | "troveId"
   >
   & {
+    debt: null | Dnum;
     statusTag?: ReactNode;
   })
 {
@@ -42,7 +43,8 @@ export function PositionCardLeverage({
   const collateralPriceUsd = usePrice(token.symbol);
 
   const maxLtv = dn.from(1 / token.collateralRatio, 18);
-  const ltv = collateralPriceUsd.data && getLtv(deposit, borrowed, collateralPriceUsd.data);
+  const ltv = debt && collateralPriceUsd.data
+    && getLtv(deposit, debt, collateralPriceUsd.data);
   const liquidationRisk = ltv && getLiquidationRisk(ltv, maxLtv);
   const redemptionRisk = getRedemptionRisk(interestRate);
 

diff --git a/frontend/app/src/comps/Positions/PositionCardLoan.tsx b/frontend/app/src/comps/Positions/PositionCardLoan.tsx
@@ -31,7 +31,7 @@ export function PositionCardLoan(
   return (
     <Card
       {...props}
-      borrowed={loan.data?.borrowed ?? props.borrowed}
+      debt={loan.data?.borrowed ?? null}
       statusTag={props.status === "liquidated"
         ? <LoanStatusTag status="liquidated" />
         : props.status === "redeemed"

diff --git a/frontend/app/src/liquity-utils.ts b/frontend/app/src/liquity-utils.ts
@@ -1,7 +1,16 @@
 import type { Contracts } from "@/src/contracts";
 import type { StabilityPoolDepositQuery } from "@/src/graphql/graphql";
-import type { CollIndex, Dnum, PositionEarn, PositionStake, PrefixedTroveId, TroveId } from "@/src/types";
+import type {
+  CollIndex,
+  Dnum,
+  PositionEarn,
+  PositionLoanCommitted,
+  PositionStake,
+  PrefixedTroveId,
+  TroveId,
+} from "@/src/types";
 import type { Address, CollateralSymbol, CollateralToken } from "@liquity2/uikit";
+import type { UseQueryResult } from "@tanstack/react-query";
 import type { Config as WagmiConfig } from "wagmi";
 
 import { DATA_REFRESH_INTERVAL, INTEREST_RATE_INCREMENT, INTEREST_RATE_MAX, INTEREST_RATE_MIN } from "@/src/constants";
@@ -634,17 +643,35 @@ export function useLoanLiveDebt(collIndex: CollIndex, troveId: TroveId) {
   };
 }
 
-export function useLoan(collIndex: CollIndex, troveId: TroveId) {
+export function useLoan(collIndex: CollIndex, troveId: TroveId): UseQueryResult<PositionLoanCommitted | null> {
   const liveDebt = useLoanLiveDebt(collIndex, troveId);
   const loan = useLoanById(getPrefixedTroveId(collIndex, troveId));
-  if (liveDebt.data && loan.data) {
+
+  if (liveDebt.status === "pending" || loan.status === "pending") {
     return {
       ...loan,
-      data: {
-        ...loan.data,
-        borrowed: dnum18(liveDebt.data),
-      },
+      data: undefined,
+      error: null,
+      isError: false,
+      isFetching: true,
+      isLoading: true,
+      isLoadingError: false,
+      isPending: true,
+      isRefetchError: false,
+      isSuccess: false,
+      status: "pending",
     };
   }
-  return loan;
+
+  if (!loan.data) {
+    return loan;
+  }
+
+  return {
+    ...loan,
+    data: {
+      ...loan.data,
+      borrowed: liveDebt.data ? dnum18(liveDebt.data) : loan.data.borrowed,
+    },
+  };
 }
diff --git a/frontend/app/src/screens/LoanScreen/LoanScreen.tsx b/frontend/app/src/screens/LoanScreen/LoanScreen.tsx
@@ -8,7 +8,7 @@ import content from "@/src/content";
 import { getCollateralContract } from "@/src/contracts";
 import { dnum18 } from "@/src/dnum-utils";
 import { fmtnum } from "@/src/formatting";
-import { getCollToken, getPrefixedTroveId, parsePrefixedTroveId, useLoan, useLoanLiveDebt } from "@/src/liquity-utils";
+import { getCollToken, getPrefixedTroveId, parsePrefixedTroveId, useLoan } from "@/src/liquity-utils";
 import { useAccount } from "@/src/services/Ethereum";
 import { usePrice } from "@/src/services/Prices";
 import { useStoredState } from "@/src/services/StoredState";