feat: repay overview

src/hooks/useBorrowingPower.ts

@@ -8,8 +8,8 @@ import { useUserObligations } from "./useUserObligations";
 
 // TODO: add option to decrease buying power by overcollateralization factor
 // TODO: add support for balance in the wallet
-export function useBorrowingPower(reserveAddress: string | PublicKey, includeWallet = false, overcollateralize = true) {
-  const key = useMemo(() => typeof reserveAddress === 'string' ? reserveAddress : reserveAddress.toBase58(), [reserveAddress]);
+export function useBorrowingPower(reserveAddress: string | PublicKey | undefined, includeWallet = false, overcollateralize = true) {
+  const key = useMemo(() => typeof reserveAddress === 'string' ? reserveAddress : reserveAddress?.toBase58() || '', [reserveAddress]);
 
   const reserve = useLendingReserve(key);
 

src/views/borrowReserve/index.tsx

@@ -67,14 +67,14 @@ export const BorrowReserveView = () => {
           </Card>
         </Col>
       </Row>
-      <Row gutter={GUTTER} className="flexColumn">
+      <Row gutter={GUTTER} style={{ flex: 1 }}>
         <Col xs={24} xl={15}>
           <BorrowInput
             className="card-fill"
             reserve={lendingReserve}
           />
         </Col>
-        <Col xs={24} xl={8}>
+        <Col xs={24} xl={9}>
           <SideReserveOverview
             className="card-fill"
             reserve={lendingReserve}

src/views/repayReserve/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useEnrichedLendingObligation, useLendingReserve } from "../../hooks";
+import { useBorrowingPower, useEnrichedLendingObligation, useLendingReserve, useUserObligations } from "../../hooks";
 import { useParams } from "react-router-dom";
 
 import { RepayInput } from "../../components/RepayInput";
@@ -9,6 +9,9 @@ import {
 } from "../../components/SideReserveOverview";
 
 import "./style.less";
+import { Card, Col, Row, Statistic } from "antd";
+import { BarChartStatistic } from "../../components/BarChartStatistic";
+import { GUTTER, LABELS } from "../../constants";
 
 export const RepayReserveView = () => {
   const { reserve: reserveId, obligation: obligationId } = useParams<{
@@ -17,35 +20,83 @@ export const RepayReserveView = () => {
   }>();
 
   const lendingObligation = useEnrichedLendingObligation(obligationId);
-  const lendingReserve = useLendingReserve(
-    obligationId ? lendingObligation?.info.borrowReserve : reserveId
-  );
+  const id = obligationId ? lendingObligation?.info.borrowReserve : reserveId;
+  const lendingReserve = useLendingReserve(id);
 
   const repayReserve = useLendingReserve(
     obligationId ? lendingObligation?.info.collateralReserve : reserveId
   );
 
+  const { userObligations, totalInQuote: loansValue } = useUserObligations();
+  const { totalInQuote: borrowingPower, utilization } = useBorrowingPower(id);
+
   const reserve = lendingReserve?.info;
 
   if (!reserve || !lendingReserve || !lendingObligation) {
     return null;
   }
 
+
   return (
     <div className="repay-reserve">
-      <div className="repay-reserve-container">
-        <RepayInput
-          className="repay-reserve-item repay-reserve-item-left"
-          borrowReserve={lendingReserve}
-          collateralReserve={repayReserve}
-          obligation={lendingObligation}
-        />
-        <SideReserveOverview
-          className="repay-reserve-item repay-reserve-item-right"
-          reserve={lendingReserve}
-          mode={SideReserveOverviewMode.Borrow}
-        />
-      </div>
-    </div>
-  );
-};
+      <Row gutter={GUTTER}>
+        <Col xs={24} xl={5}>
+          <Card>
+            <Statistic
+              title={LABELS.BORROWED_VALUE}
+              value={loansValue}
+              precision={2}
+              prefix="$"
+            />
+          </Card>
+        </Col>
+        <Col xs={24} xl={5}>
+          <Card>
+            <Statistic
+              title={LABELS.BORROWING_POWER_USED}
+              value={utilization * 100}
+              precision={2}
+              suffix="%"
+            />
+          </Card>
+        </Col>
+        <Col xs={24} xl={5}>
+          <Card>
+            <Statistic
+              title={LABELS.BORROWING_POWER_VALUE}
+              value={borrowingPower}
+              valueStyle={{ color: "#3f8600" }}
+              precision={2}
+              prefix="$"
+            />
+          </Card>
+        </Col>
+        <Col xs={24} xl={9}>
+          <Card>
+            <BarChartStatistic
+              title="Your Loans"
+              items={userObligations}
+              getPct={(item) => item.obligation.info.borrowedInQuote / loansValue}
+              name={(item) => item.obligation.info.repayName} />
+          </Card>
+        </Col>
+      </Row>
+      <Row gutter={GUTTER} style={{ flex: 1 }}>
+        <Col xs={24} xl={15}>
+          <RepayInput
+            className="card-fill"
+            borrowReserve={lendingReserve}
+            collateralReserve={repayReserve}
+            obligation={lendingObligation}
+          />
+        </Col>
+        <Col xs={24} xl={9}>
+          <SideReserveOverview
+            className="card-fill"
+            reserve={lendingReserve}
+            mode={SideReserveOverviewMode.Borrow}
+          />
+        </Col>
+      </Row>
+    </div>);
+}