feat: add liquidation view

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>

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

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

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

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