Added loan information on liquidation page

src/components/LoanInfoLine/index.tsx

@@ -0,0 +1,88 @@
+import { Card, Statistic } from "antd";
+import {
+  formatNumber,
+  formatPct,
+  fromLamports,
+  wadToLamports,
+} from "../../utils/utils";
+import React, { useMemo } from "react";
+import {
+  EnrichedLendingObligation,
+  useLendingReserve,
+  useTokenName,
+} from "../../hooks";
+import { useMint } from "../../contexts/accounts";
+import { calculateBorrowAPY, collateralToLiquidity } from "../../models";
+
+export const LoanInfoLine = (props: {
+  className?: string;
+  obligation: EnrichedLendingObligation;
+}) => {
+  const obligation = props.obligation;
+
+  const repayReserve = useLendingReserve(obligation?.info.borrowReserve);
+  const withdrawReserve = useLendingReserve(obligation?.info.collateralReserve);
+
+  const liquidityMint = useMint(repayReserve?.info.liquidityMint);
+  const collateralMint = useMint(withdrawReserve?.info.liquidityMint);
+  const repayName = useTokenName(repayReserve?.info.liquidityMint);
+  const withdrawName = useTokenName(withdrawReserve?.info.liquidityMint);
+
+  const borrowAPY = useMemo(
+    () => (repayReserve ? calculateBorrowAPY(repayReserve?.info) : 0),
+    [repayReserve]
+  );
+  if (!obligation || !repayReserve) {
+    return null;
+  }
+  const borrowAmount = fromLamports(
+    wadToLamports(obligation?.info.borrowAmountWad),
+    liquidityMint
+  );
+  const collateralLamports = collateralToLiquidity(
+    obligation?.info.depositedCollateral,
+    repayReserve.info
+  );
+  const collateral = fromLamports(collateralLamports, collateralMint);
+
+  return (
+    <Card
+      className={props.className}
+      bodyStyle={{ display: "flex", justifyContent: "space-between" }}
+    >
+      <Statistic
+        title="Loan Balance"
+        value={obligation.info.borrowedInQuote}
+        formatter={(val) => (
+          <div>
+            <div>
+              <em>{formatNumber.format(borrowAmount)}</em> {repayName}
+            </div>
+            <div className="dashboard-amount-quote">
+              ${formatNumber.format(parseFloat(val.toString()))}
+            </div>
+          </div>
+        )}
+      />
+      <Statistic
+        title="Collateral"
+        value={obligation.info.borrowedInQuote}
+        formatter={(val) => (
+          <div>
+            <div>
+              <em>{formatNumber.format(collateral)}</em> {withdrawName}
+            </div>
+            <div className="dashboard-amount-quote">
+              ${formatNumber.format(parseFloat(val.toString()))}
+            </div>
+          </div>
+        )}
+      />
+      <Statistic title="APY" value={formatPct.format(borrowAPY)} />
+      <Statistic
+        title="Health Factor"
+        value={obligation.info.health.toFixed(2)}
+      />
+    </Card>
+  );
+};

src/views/liquidate/index.tsx

@@ -107,7 +107,7 @@ export const LiquidateView = () => {
                   <LiquidateItem
                     key={item.account.pubkey.toBase58()}
                     item={item}
-                  ></LiquidateItem>
+                  />
                 ))}
               </Card>
             </Col>

src/views/liquidateReserve/index.tsx

@@ -6,6 +6,8 @@ import {
   SideReserveOverviewMode,
 } from "../../components/SideReserveOverview";
 
+import { LoanInfoLine } from "../../components/LoanInfoLine";
+
 import { LiquidateInput } from "../../components/LiquidateInput";
 
 import "./style.less";
@@ -14,6 +16,7 @@ export const LiquidateReserveView = () => {
   const { id } = useParams<{ id: string }>();
 
   const obligation = useEnrichedLendingObligation(id);
+
   const repayReserve = useLendingReserve(obligation?.info.borrowReserve);
   const withdrawReserve = useLendingReserve(obligation?.info.collateralReserve);
 
@@ -23,6 +26,10 @@ export const LiquidateReserveView = () => {
 
   return (
     <div className="liquidate-reserve">
+      <LoanInfoLine
+        className="liquidate-reserve-item"
+        obligation={obligation}
+      />
       <div className="liquidate-reserve-container">
         <LiquidateInput
           className="liquidate-reserve-item liquidate-reserve-item-left"