feat: applied diamond to monitor page

ubiquity · Oct 17, 2023 · efb9cd1 · efb9cd1
1 parent d518211
commit efb9cd1
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 73 deletions.
diff --git a/packages/dapp/components/monitor/metapool-monitor.tsx b/packages/dapp/components/monitor/metapool-monitor.tsx
@@ -1,38 +1,39 @@
-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";
 
 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<State>(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 && <MetapoolMonitor {...metaPoolMonitorProps} />;
 };
@@ -42,8 +43,8 @@ const MetapoolMonitor = (props: MetapoolMonitorProps) => {
     <div className="panel">
       <h2>Metapool Balances</h2>
       {/* cspell: disable-next-line */}
-      <Balance title="uAD" balance={props.uadBalance} />
-      <Balance title="CRV" balance={props.crvBalance} />
+      <Balance title="uAD" balance={props.dollarTokenBalance} />
+      <Balance title="CRV" balance={props.curve3CrvTokenBalance} />
     </div>
   );
 };

diff --git 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<Awaited<ReturnType<typeof useManagerManaged>>>;
 type NamedContracts = NonNullable<Awaited<ReturnType<typeof useNamedContracts>>>;
 
-const fetchPrices = async (
-  { dollarToken: uad, dollarMetapool: metaPool, dollarTwapOracle: twapOracle, dollarMintCalculator: dollarMintCalc }: ManagedContracts,
-  { curvePool }: NamedContracts
-): Promise<PriceMonitorProps> => {
-  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<PriceMonitorProps | undefined> => {
+  const contracts = await protocolContracts;
+  if (contracts) {
+    const {
+      dollarToken: dollarToken,
+      curveMetaPoolDollarTriPoolLp: metaPool,
+      twapOracleDollar3poolFacet: twapOracle,
+      dollarMintCalculatorFacet: dollarMintCalc,
+    } = contracts;
 
-  const metaPoolGet = async (i1: BigNumber, i2: BigNumber): Promise<BigNumber> => {
-    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<BigNumber> => {
+        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<State>(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 && <PriceMonitor {...priceMonitorProps} />;
 };

diff --git 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<State>(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 && <TokenMonitor {...tokenMonitorPRops} />;
 };