From ccc78fc6ae2d59c2ba3c0d6c7bafa5a171f25d21 Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Sat, 5 Dec 2020 23:00:43 +0000
Subject: [PATCH] feat: add liquidate view item

---
 src/components/Layout/index.tsx    |  2 +-
 src/constants/labels.ts            |  4 +-
 src/views/dashboard/index.tsx      |  2 +-
 src/views/liquidate/index.tsx      | 43 ++++++++++++++++++---
 src/views/liquidate/item.tsx       | 60 ++++++++++++++++++++++++++++++
 src/views/liquidate/itemStyle.less | 29 +++++++++++++++
 6 files changed, 131 insertions(+), 9 deletions(-)
 create mode 100644 src/views/liquidate/item.tsx
 create mode 100644 src/views/liquidate/itemStyle.less

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index f305c0e..6401b12 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -102,7 +102,7 @@ export const AppLayout = (props: any) => {
                 >
                   {LABELS.MENU_LIQUIDATE}
                 </Link>
-              </Menu.Item>              
+              </Menu.Item>
               {env !== "mainnet-beta" && (
                 <Menu.Item key="6" icon={<RocketOutlined />}>
                   <Link
diff --git a/src/constants/labels.ts b/src/constants/labels.ts
index 91db6a0..fbaa6db 100644
--- a/src/constants/labels.ts
+++ b/src/constants/labels.ts
@@ -26,8 +26,10 @@ export const LABELS = {
   SELECT_COLLATERAL: "Select collateral",
   BORROW_QUESTION: "How much would you like to borrow?",
   BORROW_ACTION: "Borrow",
+  LIQUIDATE_ACTION: "Liquidate",
   TABLE_TITLE_ASSET: "Asset",
-  TABLE_TITLE_LOAN_BALANCE: "Your loan balance",
+  TABLE_TITLE_YOUR_LOAN_BALANCE: "Your loan balance",
+  TABLE_TITLE_LOAN_BALANCE: "Loan balance",
   TABLE_TITLE_DEPOSIT_BALANCE: "Your deposit balance",
   TABLE_TITLE_APY: "APY",
   TABLE_TITLE_BORROW_APY: "Borrow APY",
diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx
index 94a7a7d..545469a 100644
--- a/src/views/dashboard/index.tsx
+++ b/src/views/dashboard/index.tsx
@@ -40,7 +40,7 @@ export const DashboardView = () => {
           <span>{LABELS.DASHBOARD_TITLE_LOANS}</span>
           <div className="dashboard-item dashboard-header">
             <div>{LABELS.TABLE_TITLE_ASSET}</div>
-            <div>{LABELS.TABLE_TITLE_LOAN_BALANCE}</div>
+            <div>{LABELS.TABLE_TITLE_YOUR_LOAN_BALANCE}</div>
             <div>{LABELS.TABLE_TITLE_APY}</div>
             <div>{LABELS.TABLE_TITLE_ACTION}</div>
           </div>
diff --git a/src/views/liquidate/index.tsx b/src/views/liquidate/index.tsx
index 07d0886..1302dbf 100644
--- a/src/views/liquidate/index.tsx
+++ b/src/views/liquidate/index.tsx
@@ -1,13 +1,44 @@
+import { PublicKey } from "@solana/web3.js";
+import BN from "bn.js";
 import React from "react";
-
+import { LABELS, ZERO } from "../../constants";
+import { LiquidateItem } from "./item";
+import "./itemStyle.less";
 
 export const LiquidateView = () => {
 
+   // ParsedAccount<LendingObligation> 
+  const obligations = [
+    {
+      pubkey: new PublicKey("2KfJP7pZ6QSpXa26RmsN6kKVQteDEdQmizLSvuyryeiW"),
+      account: {
+        executable: false,
+        owner: new PublicKey("2KfJP7pZ6QSpXa26RmsN6kKVQteDEdQmizLSvuyryeiW"),
+        lamports: 0,
+        data: new Buffer("x"),
+      },
+      info: {
+        lastUpdateSlot: ZERO,
+        collateralAmount: ZERO,
+        collateralSupply: new PublicKey("2KfJP7pZ6QSpXa26RmsN6kKVQteDEdQmizLSvuyryeiW"),
+        cumulativeBorrowRateWad: ZERO,
+        borrowAmountWad: new BN(0),
+        borrowReserve: new PublicKey("EwhnKnkwcAeVxHDbR5wMpjwipHFuafxTUhQaaagjUxQG"),
+        tokenMint: new PublicKey("2KfJP7pZ6QSpXa26RmsN6kKVQteDEdQmizLSvuyryeiW"),
+      }
+    }
+  ];
   return (
-    <div>
-      <div>Liquidation</div>
+    <div className="flexColumn">
+      <div className="liquidate-item liquidate-header">
+        <div>{LABELS.TABLE_TITLE_ASSET}</div>
+        <div>{LABELS.TABLE_TITLE_LOAN_BALANCE}</div>
+        <div>{LABELS.TABLE_TITLE_APY}</div>
+        <div>{LABELS.TABLE_TITLE_ACTION}</div>
+      </div>
+      {obligations.map((obligation) => (
+        <LiquidateItem key={obligation.pubkey.toBase58()} obligation={obligation}></LiquidateItem>
+        ))}
     </div>
-
   );
-
-};
\ No newline at end of file
+};
diff --git a/src/views/liquidate/item.tsx b/src/views/liquidate/item.tsx
new file mode 100644
index 0000000..6952424
--- /dev/null
+++ b/src/views/liquidate/item.tsx
@@ -0,0 +1,60 @@
+import React, { useMemo }  from "react";
+import { cache, ParsedAccount, useMint } from "../../contexts/accounts";
+import { LendingObligation, LendingReserve, calculateBorrowAPY } from "../../models/lending";
+import { useTokenName } from "../../hooks";
+import { Link } from "react-router-dom";
+import { Button, Card } from "antd";
+import { TokenIcon } from "../../components/TokenIcon";
+import {
+  wadToLamports,
+  formatNumber,
+  fromLamports,
+  formatPct,
+} from "../../utils/utils";
+import { LABELS } from "../../constants";
+
+export const LiquidateItem = (props: {
+  obligation: ParsedAccount<LendingObligation>;
+}) => {
+
+  const { obligation } = props;
+
+  const borrowReserve = cache.get(obligation.info.borrowReserve) as ParsedAccount<LendingReserve>;
+  const tokenName = useTokenName(borrowReserve?.info.liquidityMint);
+  const liquidityMint = useMint(borrowReserve.info.liquidityMint);
+
+  console.log("wad",obligation.info.borrowAmountWad)
+
+  const borrowAmount = fromLamports(
+    wadToLamports(obligation.info.borrowAmountWad),
+    liquidityMint
+  );
+
+  const borrowAPY = useMemo(() => calculateBorrowAPY(borrowReserve.info), [
+    borrowReserve,
+  ]);
+
+  return (
+    <Link to={`/liquidate/${obligation.pubkey.toBase58()}`}>
+      <Card>
+        <div className="liquidate-item">
+          <span style={{ display: "flex" }}>
+            <TokenIcon mintAddress={borrowReserve.info.liquidityMint} />
+            {tokenName}
+          </span>
+          <div>
+            {formatNumber.format(borrowAmount)} {tokenName}
+          </div>
+          <div>
+            {formatPct.format(borrowAPY)}
+          </div>
+          <div>
+            <Button>
+              <span>{LABELS.LIQUIDATE_ACTION}</span>
+            </Button>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+};
\ No newline at end of file
diff --git a/src/views/liquidate/itemStyle.less b/src/views/liquidate/itemStyle.less
new file mode 100644
index 0000000..1c8178a
--- /dev/null
+++ b/src/views/liquidate/itemStyle.less
@@ -0,0 +1,29 @@
+.liquidate-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & > div, span {
+    flex: 20%;
+    height: 22px;
+    text-align: right;
+  }
+
+  & > :first-child {
+    flex: 80px
+  }
+}
+
+.liquidate-header {
+  margin: 0px 30px;
+
+  & > div {
+    flex: 20%;
+    text-align: right;
+  }
+
+  & > :first-child {
+    text-align: left;
+    flex: 80px
+  }
+}
\ No newline at end of file