Merge pull request #47 from yamijuan/liquidation

Added loan information on liquidation page

src/components/LoanInfoLine/index.tsx

@@ -0,0 +1,102 @@
+import { Card, Col, Row, 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";
+import { GUTTER } from "../../constants";
+
+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 (
+    <Row gutter={GUTTER}>
+      <Col xs={24} xl={5}>
+        <Card className={props.className}>
+          <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>
+            )}
+          />
+        </Card>
+      </Col>
+      <Col xs={24} xl={5}>
+        <Card className={props.className}>
+          <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>
+            )}
+          />
+        </Card>
+      </Col>
+      <Col xs={24} xl={5}>
+        <Card className={props.className}>
+          <Statistic title="APY" value={formatPct.format(borrowAPY)} />
+        </Card>
+      </Col>
+      <Col xs={24} xl={9}>
+        <Card className={props.className}>
+          <Statistic
+            title="Health Factor"
+            value={obligation.info.health.toFixed(2)}
+          />
+        </Card>
+      </Col>
+    </Row>
+  );
+};

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,14 +6,20 @@ import {
   SideReserveOverviewMode,
 } from "../../components/SideReserveOverview";
 
+import { LoanInfoLine } from "../../components/LoanInfoLine";
+
 import { LiquidateInput } from "../../components/LiquidateInput";
 
 import "./style.less";
+import { Col, Row } from "antd";
+import { GUTTER } from "../../constants";
+import { BorrowInput } from "../../components/BorrowInput";
 
 export const LiquidateReserveView = () => {
   const { id } = useParams<{ id: string }>();
 
   const obligation = useEnrichedLendingObligation(id);
+
   const repayReserve = useLendingReserve(obligation?.info.borrowReserve);
   const withdrawReserve = useLendingReserve(obligation?.info.collateralReserve);
 
@@ -22,20 +28,25 @@ export const LiquidateReserveView = () => {
   }
 
   return (
-    <div className="liquidate-reserve">
-      <div className="liquidate-reserve-container">
-        <LiquidateInput
-          className="liquidate-reserve-item liquidate-reserve-item-left"
-          obligation={obligation}
-          withdrawReserve={withdrawReserve}
-          repayReserve={repayReserve}
-        />
-        <SideReserveOverview
-          className="liquidate-reserve-item liquidate-reserve-item-right"
-          reserve={repayReserve}
-          mode={SideReserveOverviewMode.Deposit}
-        />
-      </div>
+    <div className="borrow-reserve">
+      <LoanInfoLine className="card-fill" obligation={obligation} />
+      <Row gutter={GUTTER} style={{ flex: 1 }}>
+        <Col xs={24} xl={15}>
+          <LiquidateInput
+            className="card-fill"
+            obligation={obligation}
+            withdrawReserve={withdrawReserve}
+            repayReserve={repayReserve}
+          />
+        </Col>
+        <Col xs={24} xl={9}>
+          <SideReserveOverview
+            className="card-fill"
+            reserve={repayReserve}
+            mode={SideReserveOverviewMode.Deposit}
+          />
+        </Col>
+      </Row>
     </div>
   );
 };