feat: add market size

src/contexts/lending.tsx

@@ -83,7 +83,9 @@ export const useLending = () => {
     setLendingAccounts([]);
 
     const queryLendingAccounts = async () => {
-      const accounts = (await connection.getProgramAccounts(LENDING_PROGRAM_ID))
+      const programAccounts = (await connection.getProgramAccounts(LENDING_PROGRAM_ID));
+
+      const accounts = programAccounts
         .map(processAccount)
         .filter((item) => item !== undefined);
 
@@ -114,6 +116,7 @@ export const useLending = () => {
         }),
       ].flat() as string[];
 
+
       // This will pre-cache all accounts used by pools
       // All those accounts are updated whenever there is a change
       await getMultipleAccounts(connection, toQuery, "single").then(
@@ -126,6 +129,11 @@ export const useLending = () => {
         }
       );
 
+      // HACK: fix, force account refresh
+      programAccounts
+        .map(processAccount)
+        .filter((item) => item !== undefined);
+        
       return accounts;
     };
 

src/views/borrow/item.tsx

@@ -1,7 +1,6 @@
-import React, { useMemo } from "react";
+import React from "react";
 import {
   useCollateralBalance,
-  useLendingReserves,
   useTokenName,
 } from "../../hooks";
 import { calculateBorrowAPY, LendingReserve } from "../../models/lending";

src/views/home/index.tsx

@@ -1,16 +1,59 @@
-import React from "react";
+import { MintInfo } from "@solana/spl-token";
+import React, { useEffect, useState } from "react";
 import { LABELS } from "../../constants";
+import { cache, ParsedAccount } from "../../contexts/accounts";
+import { useMarkets } from "../../contexts/market";
 import { useLendingReserves } from "../../hooks";
+import { formatUSD, fromLamports, wadToLamports } from "../../utils/utils";
 import { LendingReserveItem } from "./item";
 import "./itemStyle.less";
 
 export const HomeView = () => {
   const { reserveAccounts } = useLendingReserves();
+  const [totalMarketSize, setTotalMarketSize] = useState(0);
+  const { marketEmitter, midPriceInUSD } = useMarkets();
 
-  // TODO: add total Liquidity amount ...
+
+  useEffect(() => {
+    const refreshTotalMarketSize = () => {
+      const total = reserveAccounts.reduce((result, item) => {
+        const marketCapLamports = item.info.availableLiquidity.toNumber() +
+          wadToLamports(item.info.borrowedLiquidityWad).toNumber();
+
+        const localCache = cache;
+        const mint = localCache.get(item.info.liquidityMint.toBase58()) as ParsedAccount<MintInfo>;
+
+        if (!mint) {
+          return result;
+        }
+
+        const marketCap = fromLamports(marketCapLamports, mint?.info) * midPriceInUSD(mint?.pubkey.toBase58());
+
+        return result + marketCap;
+      }, 0);
+
+      setTotalMarketSize(total);
+    };
+
+    const dispose = marketEmitter.onMarket(() => {
+      refreshTotalMarketSize();
+    });
+
+    refreshTotalMarketSize();
+
+    return () => {
+      dispose();
+    };
+
+
+  }, [marketEmitter, midPriceInUSD, setTotalMarketSize, reserveAccounts]);
 
   return (
     <div className="flexColumn">
+      <h2 className="home-market-size">
+        Current market size: {formatUSD.format(totalMarketSize)}
+      </h2>
+
       <div className="home-item home-header">
         <div>{LABELS.TABLE_TITLE_ASSET}</div>
         <div>{LABELS.TABLE_TITLE_MARKET_SIZE}</div>

src/views/home/itemStyle.less

@@ -25,4 +25,9 @@
     text-align: left;
     flex: 80px
   }
+}
+
+.home-market-size {
+  text-align: right;
+  margin-right: 20px;
 }