From 851ac577c5ceb500761f5f00743d362c813c6025 Mon Sep 17 00:00:00 2001 From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com> Date: Thu, 26 Nov 2020 21:55:30 -0600 Subject: [PATCH] feat: add market size --- src/contexts/lending.tsx | 10 +++++++- src/views/borrow/item.tsx | 3 +-- src/views/home/index.tsx | 47 +++++++++++++++++++++++++++++++++-- src/views/home/itemStyle.less | 5 ++++ 4 files changed, 60 insertions(+), 5 deletions(-) diff --git a/src/contexts/lending.tsx b/src/contexts/lending.tsx index 094130c..1432d26 100644 --- a/src/contexts/lending.tsx +++ b/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; }; diff --git a/src/views/borrow/item.tsx b/src/views/borrow/item.tsx index 438f880..a5822ac 100644 --- a/src/views/borrow/item.tsx +++ b/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"; diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx index fe62b97..c31b672 100644 --- a/src/views/home/index.tsx +++ b/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; + + 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 (
+

+ Current market size: {formatUSD.format(totalMarketSize)} +

+
{LABELS.TABLE_TITLE_ASSET}
{LABELS.TABLE_TITLE_MARKET_SIZE}
diff --git a/src/views/home/itemStyle.less b/src/views/home/itemStyle.less index 9a76f13..74b2bff 100644 --- a/src/views/home/itemStyle.less +++ b/src/views/home/itemStyle.less @@ -25,4 +25,9 @@ text-align: left; flex: 80px } +} + +.home-market-size { + text-align: right; + margin-right: 20px; } \ No newline at end of file