From d299a35d87dd982d9bfb23568f8b774ea894a4a6 Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Sun, 13 Dec 2020 01:49:02 +0000
Subject: [PATCH] feat: add liquidation view

---
 src/routes.tsx                        |  5 ++++
 src/views/index.tsx                   |  1 +
 src/views/liquidate/item.tsx          |  2 +-
 src/views/liquidateReserve/index.tsx  | 36 +++++++++++++++++++++++++++
 src/views/liquidateReserve/style.less | 30 ++++++++++++++++++++++
 5 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/views/liquidateReserve/index.tsx
 create mode 100644 src/views/liquidateReserve/style.less

diff --git a/src/routes.tsx b/src/routes.tsx
index c0493e6..8a2b576 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -19,6 +19,7 @@ import {
   ReserveView,
   WithdrawView,
   LiquidateView,
+  LiquidateReserveView
 } from "./views";
 
 export function Routes() {
@@ -67,6 +68,10 @@ export function Routes() {
                         path="/liquidate"
                         children={<LiquidateView />}
                       />
+                      <Route
+                        path="/liquidate/:id"
+                        children={<LiquidateReserveView />}
+                      />
                       <Route exact path="/faucet" children={<FaucetView />} />
                     </Switch>
                   </AppLayout>
diff --git a/src/views/index.tsx b/src/views/index.tsx
index df92ae2..69f7522 100644
--- a/src/views/index.tsx
+++ b/src/views/index.tsx
@@ -9,3 +9,4 @@ export { WithdrawView } from "./withdraw";
 export { FaucetView } from "./faucet";
 export { RepayReserveView } from "./repayReserve";
 export { LiquidateView } from "./liquidate";
+export { LiquidateReserveView } from "./liquidateReserve";
diff --git a/src/views/liquidate/item.tsx b/src/views/liquidate/item.tsx
index d3ae4ef..296e814 100644
--- a/src/views/liquidate/item.tsx
+++ b/src/views/liquidate/item.tsx
@@ -34,7 +34,7 @@ export const LiquidateItem = (props: {
   ]);
 
   return (
-    <Link to={`/liquidate/${borrowReserve.pubkey.toBase58()}`}>
+    <Link to={`/liquidate/${obligation.pubkey.toBase58()}`}>
       <Card>
         <div className="liquidate-item">
           <span style={{ display: "flex" }}>
diff --git a/src/views/liquidateReserve/index.tsx b/src/views/liquidateReserve/index.tsx
new file mode 100644
index 0000000..47b50bd
--- /dev/null
+++ b/src/views/liquidateReserve/index.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useLendingObligation, useLendingReserve } from "../../hooks";
+import {
+  SideReserveOverview,
+  SideReserveOverviewMode,
+} from "../../components/SideReserveOverview";
+import "./style.less";
+
+export const LiquidateReserveView = () => {
+  const { id } = useParams<{ id: string }>();
+
+  const obligation = useLendingObligation(id);
+  const reserve = useLendingReserve(obligation?.info.borrowReserve);
+
+  if (!obligation || !reserve) {
+    return null;
+  }
+
+  return (
+    <div className="liquidate-reserve">
+      <div className="liquidate-reserve-container">
+        <div
+          className="liquidate-reserve-item liquidate-reserve-item-left"
+
+        />
+        <SideReserveOverview
+          className="liquidate-reserve-item liquidate-reserve-item-right"
+          reserve={reserve}
+          mode={SideReserveOverviewMode.Deposit}
+        />
+      </div>
+    </div>
+  )
+
+}
\ No newline at end of file
diff --git a/src/views/liquidateReserve/style.less b/src/views/liquidateReserve/style.less
new file mode 100644
index 0000000..df915e8
--- /dev/null
+++ b/src/views/liquidateReserve/style.less
@@ -0,0 +1,30 @@
+.liquidate-reserve {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.liquidate--reserve-item {
+  margin: 4px;
+}
+
+.liquidate-reserve-container {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+}
+
+.liquidate--reserve-item-left {
+  flex: 60%;
+}
+
+.liquidate-reserve-item-right {
+  flex: 30%;
+}
+
+/* Responsive layout - makes a one column layout instead of a two-column layout */
+@media (max-width: 600px) {
+  .liquidate--reserve-item-right, .liquidate-reserve-item-left {
+    flex: 100%;
+  }
+}
\ No newline at end of file