feat: borrowing power

src/components/CollateralSelector/index.tsx

@@ -22,7 +22,7 @@ export const CollateralItem = (props: {
   } = props;
 
   return (
-   <>
+    <>
       <div
         style={{ display: "flex", alignItems: "center" }}
       >
@@ -32,10 +32,10 @@ export const CollateralItem = (props: {
           className="token-balance"
         >
           &nbsp;{" "}
-          {userDeposit ? formatAmount(userDeposit.info.amount): '--'}
+          {userDeposit ? formatAmount(userDeposit.info.amount) : '--'}
         </span>
       </div>
-      </>
+    </>
   );
 }
 
@@ -52,8 +52,11 @@ export const CollateralSelector = (props: {
   const market = cache.get(props.reserve?.lendingMarket) as ParsedAccount<
     LendingMarket
   >;
-  const onlyQuoteAllowed = props.reserve?.liquidityMint?.toBase58() !== 
-    market?.info?.quoteMint?.toBase58();
+
+  const quoteMintAddress = market?.info?.quoteMint?.toBase58();
+
+  const onlyQuoteAllowed = props.reserve?.liquidityMint?.toBase58() !==
+    quoteMintAddress;
 
   return (
     <Select

src/constants/labels.ts

@@ -1,5 +1,8 @@
 export const LABELS = {
   CONNECT_LABEL: "Connect Wallet",
+  BORROWING_POWER_USED: "Borrowing Power Used",
+  BORROWING_POWER_VALUE: "Borrowing Power",
+  BORROWED_VALUE: "You borrowed",
   GIVE_SOL: "Give me SOL",
   LIQUIDATION_INFO: "This view displays all loans that can be liquidated. A liquidation is a process where borrower collateral does not cover value of the loan. It is represented by health factor falling below 1.o. When a loan is liquidated, an liquidator can purchase collateral at a discount by repaing the portio of the loan. ",
   FAUCET_INFO:

src/hooks/useBorrowingPower.ts

@@ -4,6 +4,7 @@ import { useMidPriceInUSD } from "../contexts/market";
 import { useLendingMarket } from "./useLendingMarket";
 import { getLendingReserves, useLendingReserve } from "./useLendingReserves";
 import { useUserDeposits } from "./useUserDeposits";
+import { useUserObligations } from "./useUserObligations";
 
 // TODO: add option to decrease buying power by overcollateralization factor
 
@@ -37,16 +38,24 @@ export function useBorrowingPower(reserveAddress: string | PublicKey, overcollat
 
   const price = useMidPriceInUSD(liquidityMintAddress).price;
 
+  const { totalInQuote: loansValue } = useUserObligations();
+
+  const totalDeposits = loansValue + totalInQuote;
+
+  const utilization = totalDeposits === 0 ? 0 : loansValue / totalDeposits;
+
   // amounts already expressed as quite mint
-  if (liquidityMintAddress === market?.info.quoteMint?.toBase58()) {
+  if (liquidityMintAddress === quoteMintAddess) {
     return {
       borrowingPower: totalInQuote,
       totalInQuote,
+      utilization,
     };
   }
 
   return {
     borrowingPower: totalInQuote / price,
     totalInQuote,
+    utilization
   };
 }

src/views/borrowReserve/index.tsx

@@ -10,32 +10,26 @@ import {
 } from "../../components/SideReserveOverview";
 import { Card, Col, Row, Statistic } from "antd";
 import { BarChartStatistic } from "../../components/BarChartStatistic";
-import { GUTTER } from "../../constants";
+import { GUTTER, LABELS } from "../../constants";
 
 export const BorrowReserveView = () => {
   const { id } = useParams<{ id: string }>();
   const lendingReserve = useLendingReserve(id);
   const { userObligations, totalInQuote: loansValue } = useUserObligations();
 
-  const { totalInQuote: borrowingPower } = useBorrowingPower(id)
+  const { totalInQuote: borrowingPower, utilization } = useBorrowingPower(id)
 
   if (!lendingReserve) {
     return null;
   }
 
-  const numberOfLoans = userObligations
-    .filter(ob =>
-      // ob.obligation.info.borrowReserve.toBase58() === id &&
-      ob.obligation.info.collateralInQuote > 0)
-    .length;
-
   return (
     <div className="borrow-reserve">
       <Row gutter={GUTTER}>
         <Col xs={24} xl={5}>
           <Card>
             <Statistic
-              title="Your loans value"
+              title={LABELS.BORROWED_VALUE}
               value={loansValue}
               precision={2}
               prefix="$"
@@ -45,16 +39,17 @@ export const BorrowReserveView = () => {
         <Col xs={24} xl={5}>
           <Card>
             <Statistic
-              title="Number of loans"
-              value={numberOfLoans}
-              precision={0}
+              title={LABELS.BORROWING_POWER_USED}
+              value={utilization * 100}
+              precision={2}
+              suffix="%"
             />
           </Card>
         </Col>
         <Col xs={24} xl={5}>
           <Card>
             <Statistic
-              title="Borrowing power"
+              title={LABELS.BORROWING_POWER_VALUE}
               value={borrowingPower}
               valueStyle={{ color: "#3f8600" }}
               precision={2}