feat: add liquidate view item

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",

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>

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>
-
   );
-
 };

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>
+  );
+};

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
+  }
+}