feat: fix collateral display

src/App.less

@@ -215,6 +215,7 @@ body {
 
 .ant-layout-content {
   display: flex;
+  overflow: auto;
 }
 
 .flexColumn {

src/contexts/lending.tsx

@@ -76,7 +76,7 @@ export const useLending = () => {
         reserveAccounts.map((reserve) => reserve.info.liquidityMint.toBase58())
       );
     }
-  }, [reserveAccounts]);
+  }, [reserveAccounts, precacheMarkets]);
 
   // initial query
   useEffect(() => {

src/contexts/market.tsx

@@ -89,7 +89,7 @@ export function MarketProvider({ children = null as any }) {
         allMarkets.filter((a) => cache.get(a) === undefined),
         "single"
       ).then(({ keys, array }) => {
-        allMarkets.forEach(() => {});
+        allMarkets.forEach(() => { });
 
         return array.map((item, index) => {
           const marketAddress = keys[index];
@@ -158,7 +158,7 @@ export function MarketProvider({ children = null as any }) {
       const info = marketByMint.get(mintAddress);
       const market = cache.get(info?.marketInfo.address.toBase58() || "");
       if (!market) {
-        return () => {};
+        return () => { };
       }
 
       // TODO: get recent volume
@@ -187,7 +187,11 @@ export function MarketProvider({ children = null as any }) {
 
   const precacheMarkets = useCallback(
     (mints: string[]) => {
-      setMarketMints([...new Set([...marketMints, ...mints]).values()]);
+      const newMints = [...new Set([...marketMints, ...mints]).values()];
+
+      if (marketMints.length !== newMints.length) {
+        setMarketMints(newMints);
+      }
     },
     [setMarketMints, marketMints]
   );

src/hooks/useCollateralBalance.ts

@@ -1,6 +1,6 @@
 import { PublicKey } from "@solana/web3.js";
 import { useMint } from "../contexts/accounts";
-import { LendingReserve } from "../models/lending";
+import { LendingReserve, reserveMarketCap } from "../models/lending";
 import { fromLamports } from "../utils/utils";
 import { useUserBalance } from "./useUserBalance";
 
@@ -15,7 +15,7 @@ export function useCollateralBalance(
   );
 
   const collateralRatioLamports =
-    (reserve?.availableLiquidity.toNumber() || 0) *
+    reserveMarketCap(reserve) *
     (balanceLamports / (reserve?.collateralMintSupply.toNumber() || 1));
 
   return {

src/models/lending/borrow.ts

@@ -7,7 +7,7 @@ import {
 import BN from "bn.js";
 import * as BufferLayout from "buffer-layout";
 import { LENDING_PROGRAM_ID, TOKEN_PROGRAM_ID } from "../../constants/ids";
-import { WAD } from "../../constants/math";
+import { wadToLamports } from "../../utils/utils";
 import * as Layout from "./../../utils/layout";
 import { LendingInstruction } from "./lending";
 import { LendingReserve } from "./reserve";
@@ -112,7 +112,7 @@ export const borrowInstruction = (
 // deposit APY utilization currentUtilizationRate * borrowAPY
 
 export const calculateBorrowAPY = (reserve: LendingReserve) => {
-  const totalBorrows = reserve.borrowedLiquidityWad.div(WAD).toNumber();
+  const totalBorrows = wadToLamports(reserve.borrowedLiquidityWad).toNumber();
   const currentUtilization =
     totalBorrows / (reserve.availableLiquidity.toNumber() + totalBorrows);
   const optimalUtilization = reserve.config.optimalUtilizationRate / 100;

src/models/lending/deposit.ts

@@ -5,8 +5,8 @@ import {
 } from "@solana/web3.js";
 import BN from "bn.js";
 import * as BufferLayout from "buffer-layout";
-import { WAD } from "../../constants";
 import { LENDING_PROGRAM_ID, TOKEN_PROGRAM_ID } from "../../constants/ids";
+import { wadToLamports } from "../../utils/utils";
 import * as Layout from "./../../utils/layout";
 import { calculateBorrowAPY } from "./borrow";
 import { LendingInstruction } from "./lending";
@@ -64,7 +64,7 @@ export const depositInstruction = (
 };
 
 export const calculateDepositAPY = (reserve: LendingReserve) => {
-  const totalBorrows = reserve.borrowedLiquidityWad.div(WAD).toNumber();
+  const totalBorrows = wadToLamports(reserve.borrowedLiquidityWad).toNumber();
   const currentUtilization =
     totalBorrows / (reserve.availableLiquidity.toNumber() + totalBorrows);
 

src/models/lending/reserve.ts

@@ -175,3 +175,11 @@ export const calculateUtilizationRatio = (reserve: LendingReserve) => {
     (reserve.availableLiquidity.toNumber() + borrowedLiquidity)
   );
 };
+
+export const reserveMarketCap = (reserve?: LendingReserve ) => {
+  const available = (reserve?.availableLiquidity.toNumber() || 0) ;
+  const borrowed = wadToLamports(reserve?.borrowedLiquidityWad).toNumber() ;
+  const total = available + borrowed;
+
+  return total;
+}

src/views/home/index.tsx

@@ -4,7 +4,8 @@ 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 { reserveMarketCap } from "../../models";
+import { formatUSD, fromLamports } from "../../utils/utils";
 import { LendingReserveItem } from "./item";
 import "./itemStyle.less";
 
@@ -13,12 +14,10 @@ export const HomeView = () => {
   const [totalMarketSize, setTotalMarketSize] = useState(0);
   const { marketEmitter, midPriceInUSD } = useMarkets();
 
-
   useEffect(() => {
     const refreshTotalMarketSize = () => {
       const total = reserveAccounts.reduce((result, item) => {
-        const marketCapLamports = item.info.availableLiquidity.toNumber() +
-          wadToLamports(item.info.borrowedLiquidityWad).toNumber();
+        const marketCapLamports = reserveMarketCap(item.info);
 
         const localCache = cache;
         const mint = localCache.get(item.info.liquidityMint.toBase58()) as ParsedAccount<MintInfo>;