From 129a025d5fc36dc0c930da85e2d9c78552d8eb5d Mon Sep 17 00:00:00 2001
From: juan <juandgoc@gmail.com>
Date: Mon, 25 Jan 2021 14:13:55 -0500
Subject: [PATCH 1/2] Added loan information on liquidation page

---
 src/components/LoanInfoLine/index.tsx | 88 +++++++++++++++++++++++++++
 src/views/liquidate/index.tsx         |  2 +-
 src/views/liquidateReserve/index.tsx  |  7 +++
 3 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 src/components/LoanInfoLine/index.tsx

diff --git a/src/components/LoanInfoLine/index.tsx b/src/components/LoanInfoLine/index.tsx
new file mode 100644
index 0000000..2fdd832
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/views/liquidate/index.tsx b/src/views/liquidate/index.tsx
index 677eff6..78f546c 100644
--- a/src/views/liquidate/index.tsx
+++ b/src/views/liquidate/index.tsx
@@ -107,7 +107,7 @@ export const LiquidateView = () => {
                   <LiquidateItem
                     key={item.account.pubkey.toBase58()}
                     item={item}
-                  ></LiquidateItem>
+                  />
                 ))}
               </Card>
             </Col>
diff --git a/src/views/liquidateReserve/index.tsx b/src/views/liquidateReserve/index.tsx
index e050d0a..652dc79 100644
--- a/src/views/liquidateReserve/index.tsx
+++ b/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"

From 0be2d169c25f5b5f93ded81b28f70fe4464ad7e9 Mon Sep 17 00:00:00 2001
From: juan <juandgoc@gmail.com>
Date: Tue, 26 Jan 2021 12:49:44 -0500
Subject: [PATCH 2/2] changed loaninfoline into small cards

---
 src/components/LoanInfoLine/index.tsx | 92 +++++++++++++++------------
 src/views/liquidateReserve/index.tsx  | 40 ++++++------
 2 files changed, 75 insertions(+), 57 deletions(-)

diff --git a/src/components/LoanInfoLine/index.tsx b/src/components/LoanInfoLine/index.tsx
index 2fdd832..f896743 100644
--- a/src/components/LoanInfoLine/index.tsx
+++ b/src/components/LoanInfoLine/index.tsx
@@ -1,4 +1,4 @@
-import { Card, Statistic } from "antd";
+import { Card, Col, Row, Statistic } from "antd";
 import {
   formatNumber,
   formatPct,
@@ -13,6 +13,7 @@ import {
 } from "../../hooks";
 import { useMint } from "../../contexts/accounts";
 import { calculateBorrowAPY, collateralToLiquidity } from "../../models";
+import { GUTTER } from "../../constants";
 
 export const LoanInfoLine = (props: {
   className?: string;
@@ -46,43 +47,56 @@ export const LoanInfoLine = (props: {
   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>
+    <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>
   );
 };
diff --git a/src/views/liquidateReserve/index.tsx b/src/views/liquidateReserve/index.tsx
index 652dc79..b722035 100644
--- a/src/views/liquidateReserve/index.tsx
+++ b/src/views/liquidateReserve/index.tsx
@@ -11,6 +11,9 @@ 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 }>();
@@ -25,24 +28,25 @@ 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"
-          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>
   );
 };