From efb9cd167d160a8ecbb6d941e1b3f75cca699737 Mon Sep 17 00:00:00 2001 From: bojan07 Date: Tue, 17 Oct 2023 04:34:31 -0700 Subject: [PATCH] feat: applied diamond to monitor page --- .../components/monitor/metapool-monitor.tsx | 37 ++++---- .../dapp/components/monitor/price-monitor.tsx | 93 +++++++++++-------- .../dapp/components/monitor/token-monitor.tsx | 29 +++--- 3 files changed, 86 insertions(+), 73 deletions(-) diff --git a/packages/dapp/components/monitor/metapool-monitor.tsx b/packages/dapp/components/monitor/metapool-monitor.tsx index 118082a1e..955070e23 100644 --- a/packages/dapp/components/monitor/metapool-monitor.tsx +++ b/packages/dapp/components/monitor/metapool-monitor.tsx @@ -1,8 +1,9 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; +import useEffectAsync from "../lib/hooks/use-effect-async"; import { formatEther } from "@/lib/format"; import useNamedContracts from "../lib/hooks/contracts/use-named-contracts"; -import useManagerManaged from "../lib/hooks/contracts/use-manager-managed"; +import useProtocolContracts from "@/components/lib/hooks/contracts/use-protocol-contracts"; // import Address from "./ui/Address"; import Balance from "./ui/balance"; // import { useConnectedContext } from "@/lib/connected"; @@ -10,29 +11,29 @@ import Balance from "./ui/balance"; type State = null | MetapoolMonitorProps; type MetapoolMonitorProps = { metaPoolAddress: string; - uadBalance: number; - crvBalance: number; + dollarTokenBalance: number; + curve3CrvTokenBalance: number; }; const MetapoolMonitorContainer = () => { - const { dollarMetapool: metaPool } = useManagerManaged() || {}; + const protocolContracts = useProtocolContracts(); const { curvePool } = useNamedContracts() || {}; const [metaPoolMonitorProps, setMetapoolMonitorProps] = useState(null); - useEffect(() => { + useEffectAsync(async () => { + const contracts = await protocolContracts; + const metaPool = contracts.curveMetaPoolDollarTriPoolLp; if (metaPool && curvePool) { - (async function () { - const [uadBalance, crvBalance] = await Promise.all([metaPool.balances(0), metaPool.balances(1)]); - - setMetapoolMonitorProps({ - metaPoolAddress: metaPool.address, - uadBalance: +formatEther(uadBalance), - crvBalance: +formatEther(crvBalance), - }); - })(); + const [dollarTokenBalance, curve3CrvTokenBalance] = await Promise.all([metaPool.balances(0), metaPool.balances(1)]); + + setMetapoolMonitorProps({ + metaPoolAddress: metaPool.address, + dollarTokenBalance: +formatEther(dollarTokenBalance), + curve3CrvTokenBalance: +formatEther(curve3CrvTokenBalance), + }); } - }, [metaPool, curvePool]); + }, [curvePool]); return metaPoolMonitorProps && ; }; @@ -42,8 +43,8 @@ const MetapoolMonitor = (props: MetapoolMonitorProps) => {

Metapool Balances

{/* cspell: disable-next-line */} - - + +
); }; diff --git a/packages/dapp/components/monitor/price-monitor.tsx b/packages/dapp/components/monitor/price-monitor.tsx index ccee25adc..e6b3caad8 100644 --- a/packages/dapp/components/monitor/price-monitor.tsx +++ b/packages/dapp/components/monitor/price-monitor.tsx @@ -1,10 +1,12 @@ import { BigNumber, ethers } from "ethers"; -import { useEffect, useState } from "react"; +import { useState } from "react"; +import useEffectAsync from "../lib/hooks/use-effect-async"; import NAMED_ACCOUNTS from "../config/named-accounts.json"; import { formatEther, formatMwei } from "@/lib/format"; import useNamedContracts from "../lib/hooks/contracts/use-named-contracts"; -import useManagerManaged from "../lib/hooks/contracts/use-manager-managed"; +import useProtocolContracts, { ProtocolContracts } from "@/components/lib/hooks/contracts/use-protocol-contracts"; +// import Address from "./ui/Address"; import PriceExchange from "./ui/price-exchange"; type State = null | PriceMonitorProps; @@ -21,57 +23,66 @@ type PriceMonitorProps = { dollarToBeMinted: number | null; }; -type ManagedContracts = NonNullable>>; type NamedContracts = NonNullable>>; -const fetchPrices = async ( - { dollarToken: uad, dollarMetapool: metaPool, dollarTwapOracle: twapOracle, dollarMintCalculator: dollarMintCalc }: ManagedContracts, - { curvePool }: NamedContracts -): Promise => { - const [[daiIndex, usdtIndex], [uadIndex, usdcIndex]] = await Promise.all([ - curvePool.get_coin_indices(metaPool.address, NAMED_ACCOUNTS.DAI, NAMED_ACCOUNTS.USDT), - curvePool.get_coin_indices(metaPool.address, uad.address, NAMED_ACCOUNTS.USDC), - ]); +const fetchPrices = async (protocolContracts: ProtocolContracts, { curvePool }: NamedContracts): Promise => { + const contracts = await protocolContracts; + if (contracts) { + const { + dollarToken: dollarToken, + curveMetaPoolDollarTriPoolLp: metaPool, + twapOracleDollar3poolFacet: twapOracle, + dollarMintCalculatorFacet: dollarMintCalc, + } = contracts; - const metaPoolGet = async (i1: BigNumber, i2: BigNumber): Promise => { - return await metaPool.get_dy_underlying(i1, i2, ethers.utils.parseEther("1")); - }; + if (dollarToken && metaPool && twapOracle && dollarMintCalc) { + const [[daiIndex, usdtIndex], [uadIndex, usdcIndex]] = await Promise.all([ + curvePool.get_coin_indices(metaPool.address, NAMED_ACCOUNTS.DAI, NAMED_ACCOUNTS.USDT), + curvePool.get_coin_indices(metaPool.address, dollarToken.address, NAMED_ACCOUNTS.USDC), + ]); - const [daiUsdt, uadUsdc, uadDai, uadUsdt, uadCrv, crvUad] = await Promise.all([ - metaPoolGet(daiIndex, usdtIndex), - metaPoolGet(uadIndex, usdcIndex), - metaPoolGet(uadIndex, daiIndex), - metaPoolGet(uadIndex, usdtIndex), - twapOracle.consult(uad.address), - twapOracle.consult(NAMED_ACCOUNTS.curve3CrvToken), - ]); + const metaPoolGet = async (i1: BigNumber, i2: BigNumber): Promise => { + return await metaPool.get_dy_underlying(i1, i2, ethers.utils.parseEther("1")); + }; - return { - metaPoolAddress: metaPool.address, - daiUsdt: +formatMwei(daiUsdt), - uadUsdc: +formatMwei(uadUsdc), - uadDai: +formatEther(uadDai), - uadUsdt: +formatMwei(uadUsdt), - twapAddress: twapOracle.address, - uadCrv: +formatEther(uadCrv), - crvUad: +formatEther(crvUad), - dollarMintCalcAddress: dollarMintCalc.address, - dollarToBeMinted: uadCrv.gt(ethers.utils.parseEther("1")) ? +formatEther(await dollarMintCalc.getDollarsToMint()) : null, - }; + const [daiUsdt, uadUsdc, uadDai, uadUsdt, uadCrv, crvUad] = await Promise.all([ + metaPoolGet(daiIndex, usdtIndex), + metaPoolGet(uadIndex, usdcIndex), + metaPoolGet(uadIndex, daiIndex), + metaPoolGet(uadIndex, usdtIndex), + twapOracle.consult(dollarToken.address), + twapOracle.consult(NAMED_ACCOUNTS.curve3CrvToken), + ]); + + return { + metaPoolAddress: metaPool.address, + daiUsdt: +formatMwei(daiUsdt), + uadUsdc: +formatMwei(uadUsdc), + uadDai: +formatEther(uadDai), + uadUsdt: +formatMwei(uadUsdt), + twapAddress: twapOracle.address, + uadCrv: +formatEther(uadCrv), + crvUad: +formatEther(crvUad), + dollarMintCalcAddress: dollarMintCalc.address, + dollarToBeMinted: uadCrv.gt(ethers.utils.parseEther("1")) ? +formatEther(await dollarMintCalc.getDollarsToMint()) : null, + }; + } + } }; const PriceMonitorContainer = () => { - const managedContracts = useManagerManaged(); const namedContracts = useNamedContracts(); + const protocolContracts = useProtocolContracts(); const [priceMonitorProps, setPriceMonitorProps] = useState(null); - useEffect(() => { - if (managedContracts && namedContracts) { - (async function () { - setPriceMonitorProps(await fetchPrices(managedContracts, namedContracts)); - })(); + useEffectAsync(async () => { + if (protocolContracts && namedContracts) { + const prices = await fetchPrices(protocolContracts, namedContracts); + if (prices) { + setPriceMonitorProps(prices); + } } - }, [managedContracts, namedContracts]); + }, [namedContracts]); return priceMonitorProps && ; }; diff --git a/packages/dapp/components/monitor/token-monitor.tsx b/packages/dapp/components/monitor/token-monitor.tsx index 973b3f25e..e76a26a06 100644 --- a/packages/dapp/components/monitor/token-monitor.tsx +++ b/packages/dapp/components/monitor/token-monitor.tsx @@ -1,10 +1,11 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; import { formatEther } from "@/lib/format"; -import useDeployedContracts from "../lib/hooks/contracts/use-deployed-contracts"; +import useProtocolContracts from "@/components/lib/hooks/contracts/use-protocol-contracts"; import useManagerManaged from "../lib/hooks/contracts/use-manager-managed"; // import Address from "./ui/Address"; import Balance from "./ui/balance"; +import useEffectAsync from "../lib/hooks/use-effect-async"; type State = null | TokenMonitorProps; type TokenMonitorProps = { @@ -15,28 +16,28 @@ type TokenMonitorProps = { }; const TokenMonitorContainer = () => { - const { debtCouponManager } = useDeployedContracts() || {}; - const { creditNft: debtCouponToken, dollarToken: uad } = useManagerManaged() || {}; - + const protocolContracts = useProtocolContracts(); + const { creditNft, dollarToken } = useManagerManaged() || {}; const [tokenMonitorPRops, setTokenMonitorProps] = useState(null); - useEffect(() => { - if (debtCouponManager && debtCouponToken && uad) { - (async function () { + useEffectAsync(async () => { + const contracts = await protocolContracts; + if (contracts && contracts.creditNftManagerFacet) { + if (creditNft && dollarToken) { const [totalOutstandingDebt, totalRedeemable] = await Promise.all([ - debtCouponToken.getTotalOutstandingDebt(), - uad.balanceOf(debtCouponManager.address), + creditNft.getTotalOutstandingDebt(), + dollarToken.balanceOf(contracts.creditNftManagerFacet.address), ]); setTokenMonitorProps({ - debtCouponAddress: debtCouponToken.address, - debtCouponManagerAddress: debtCouponManager.address, + debtCouponAddress: creditNft.address, + debtCouponManagerAddress: contracts.creditNftManagerFacet.address, totalOutstandingDebt: +formatEther(totalOutstandingDebt), totalRedeemable: +formatEther(totalRedeemable), }); - })(); + } } - }, [debtCouponManager, debtCouponToken, uad]); + }, [creditNft, dollarToken]); return tokenMonitorPRops && ; };