feat(ui): apply diamond architecture to the remained or missed compon…

…ents (#824) * fix(review): updated contract names
ubiquity · Oct 24, 2023 · f091f2b · f091f2b · ubiquibot · Oct 24, 2023
1 parent 97989f1
commit f091f2b
Show file tree

Hide file tree

Showing 31 changed files with 552 additions and 637 deletions.
diff --git a/packages/dapp/components/layout/inventory.tsx b/packages/dapp/components/layout/inventory.tsx
@@ -1,29 +1,35 @@
 import Tippy from "@tippyjs/react";
 import { BaseContract, BigNumber, ethers } from "ethers";
-import { useEffect } from "react";
+import { useState } from "react";
+import useEffectAsync from "../lib/hooks/use-effect-async";
 
 import useWeb3 from "@/lib/hooks/use-web-3";
 import icons from "@/ui/icons";
 
-import useManagerManaged from "../lib/hooks/contracts/use-manager-managed";
+import useProtocolContracts from "@/components/lib/hooks/contracts/use-protocol-contracts";
 import useNamedContracts from "../lib/hooks/contracts/use-named-contracts";
 import useBalances from "../lib/hooks/use-balances";
-import { ManagedContracts } from "../lib/hooks/contracts/use-manager-managed";
 import { Balances } from "../lib/types";
 
+type ProtocolContracts = NonNullable<Awaited<ReturnType<typeof useProtocolContracts>>>;
+
 const Inventory = () => {
   const { walletAddress } = useWeb3();
   const [balances, refreshBalances] = useBalances();
-  const managedContracts = useManagerManaged();
+  const protocolContracts = useProtocolContracts();
   const namedContracts = useNamedContracts();
+  const [contracts, setContracts] = useState<ProtocolContracts>();
+
+  useEffectAsync(async () => {
+    const contract = await protocolContracts;
+    setContracts(contract);
 
-  useEffect(() => {
     if (walletAddress) {
       refreshBalances();
     }
   }, [walletAddress]);
 
-  if (!walletAddress || !balances || !managedContracts || !namedContracts) {
+  if (!walletAddress || !balances || !namedContracts) {
     return null;
   }
 
@@ -36,14 +42,14 @@ const Inventory = () => {
       <div>
         <div>
           {/* cspell: disable-next-line */}
-          {showIfBalanceExists("uad", "uAD", "dollarToken")}
+          {showIfBalanceExists("dollar", "DOLLAR", "dollarToken")}
           {/* cspell: disable-next-line */}
-          {showIfBalanceExists("ucr", "uCR", "creditToken")}
-          {showIfBalanceExists("ucrNft", "uCR-NFT", "creditNft")}
+          {showIfBalanceExists("credit", "CREDIT", "creditToken")}
+          {showIfBalanceExists("creditNft", "CREDIT-NFT", "creditNft")}
           {/* cspell: disable-next-line */}
-          {showIfBalanceExists("ubq", "UBQ", "governanceToken")}
+          {showIfBalanceExists("governance", "GOVERNANCE", "governanceToken")}
           {showIfBalanceExists("_3crv", "3crv", "_3crvToken")}
-          {showIfBalanceExists("uad3crv", "uAD3CRV-f", "dollarMetapool")}
+          {showIfBalanceExists("dollar3crv", "dollar3CRV-f", "curveMetaPoolDollarTriPoolLp")}
           {showIfBalanceExists("usdc", "USDC", "usdc")}
           {showIfBalanceExists("dai", "DAI", "dai")}
           {showIfBalanceExists("usdt", "USDT", "usdt")}
@@ -64,8 +70,8 @@ const Inventory = () => {
     }
 
     const balance = balances[key];
-    if (Number(balance) && managedContracts) {
-      let selectedContract = managedContracts[id as keyof ManagedContracts] as BaseContract;
+    if (Number(balance) && contracts) {
+      let selectedContract = contracts[id as keyof ProtocolContracts] as BaseContract;
       if (!selectedContract && namedContracts) {
         selectedContract = namedContracts[key as keyof typeof namedContracts];
       }
@@ -86,33 +92,34 @@ interface TokenInterface {
 const Token = ({ balance, token, tokenAddr, accountAddr, decimals = 18 }: TokenInterface) => {
   const Svg = tokenSvg[token] || (() => <></>);
 
-  const ethereum = window.ethereum;
-
   const addTokenToWallet = async () => {
-    if (!ethereum?.request) {
-      return;
-    }
-    try {
-      const base64Img = icons.base64s[token.toLowerCase()];
-      const wasAdded = await ethereum.request({
-        method: "wallet_watchAsset",
-        params: {
-          type: "ERC20",
-          options: {
-            address: tokenAddr,
-            symbol: token,
-            decimals: decimals,
-            image: base64Img,
+    if (typeof window !== "undefined") {
+      const ethereum = window.ethereum;
+      if (!ethereum?.request) {
+        return;
+      }
+      try {
+        const base64Img = icons.base64s[token.toLowerCase()];
+        const wasAdded = await ethereum.request({
+          method: "wallet_watchAsset",
+          params: {
+            type: "ERC20",
+            options: {
+              address: tokenAddr,
+              symbol: token,
+              decimals: decimals,
+              image: base64Img,
+            },
           },
-        },
-      });
-      if (wasAdded) {
-        console.log("Thanks for your interest!");
-      } else {
-        console.log("Your loss!");
+        });
+        if (wasAdded) {
+          console.log("Thanks for your interest!");
+        } else {
+          console.log("Your loss!");
+        }
+      } catch (error) {
+        console.log(error);
       }
-    } catch (error) {
-      console.log(error);
     }
   };
 
@@ -146,17 +153,17 @@ const Token = ({ balance, token, tokenAddr, accountAddr, decimals = 18 }: TokenI
 
 const tokenSvg = {
   // cspell: disable-next-line
-  uAD: () => icons.SVGs.uad,
+  DOLLAR: () => icons.SVGs.dollar,
   // cspell: disable-next-line
-  uCR: () => icons.SVGs.ucr,
-  "uCR-NFT": () => icons.SVGs.ucrNft,
+  CREDIT: () => icons.SVGs.credit,
+  "CREDIT-NFT": () => icons.SVGs.creditNft,
   // cspell: disable-next-line
-  UBQ: () => icons.SVGs.ubq,
+  GOVERNANCE: () => icons.SVGs.governance,
   USDC: () => icons.SVGs.usdc,
   DAI: () => icons.SVGs.dai,
   USDT: () => icons.SVGs.usdt,
   "3crv": () => <img src={icons.base64s["3crv"]} />,
-  "uAD3CRV-f": () => <img src={icons.base64s["uad3crv-f"]} />,
+  "dollar3CRV-f": () => <img src={icons.base64s["dollar3crv-f"]} />,
 };
 
 export default Inventory;
diff --git a/packages/dapp/components/layout/sidebar.tsx b/packages/dapp/components/layout/sidebar.tsx
@@ -19,7 +19,7 @@ const Sidebar = () => {
                 <Link href="/" id="Logo">
                   <div>
                     <div>
-                      <Icon icon="uad" />
+                      <Icon icon="dollar" />
                     </div>
                     <div>
                       <span>Ubiquity Dollar (Beta)</span>

diff --git a/packages/dapp/components/lib/contracts-shortcuts.ts b/packages/dapp/components/lib/contracts-shortcuts.ts
@@ -42,33 +42,33 @@ export async function ensureERC1155Allowance(logName: string, contract: Contract
 // const toEtherNum = (n: BigNumber) => +n.toString() / 1e18;
 // const toNum = (n: BigNumber) => +n.toString();
 
-// export async function logBondingUbqInfo(contracts: Contracts) {
-//   const reserves = await contracts.ugovUadPair.getReserves();
-//   const ubqReserve = +reserves.reserve0.toString();
-//   const uadReserve = +reserves.reserve1.toString();
-//   const ubqPrice = uadReserve / ubqReserve;
-//   console.log("uAD-UBQ Pool", uadReserve, ubqReserve);
-//   console.log("UBQ Price", ubqPrice);
-//   const ubqPerBlock = await contracts.masterChef.uGOVPerBlock();
-//   const ubqMultiplier = await contracts.masterChef.uGOVmultiplier();
+// export async function logStakingGovernanceInfo(contracts: Contracts) {
+//   const reserves = await contracts.ugovDollarPair.getReserves();
+//   const governanceReserve = +reserves.reserve0.toString();
+//   const dollarReserve = +reserves.reserve1.toString();
+//   const governancePrice = dollarReserve / governanceReserve;
+//   console.log("DOLLAR-GOVERNANCE Pool", dollarReserve, governanceReserve);
+//   console.log("GOVERNANCE Price", governancePrice);
+//   const governancePerBlock = await contracts.masterChef.uGOVPerBlock();
+//   const governanceMultiplier = await contracts.masterChef.uGOVmultiplier();
 //   const ugovDivider = toNum(await contracts.masterChef.uGOVDivider());
 
-//   console.log("UBQ per block", toEtherNum(ubqPerBlock));
-//   console.log("UBQ Multiplier", toEtherNum(ubqMultiplier));
-//   const actualUbqPerBlock = toEtherNum(ubqPerBlock.mul(ubqMultiplier).div(`${1e18}`));
-//   console.log("Actual UBQ per block", actualUbqPerBlock);
-//   console.log("Extra UBQ per block to treasury", actualUbqPerBlock / ugovDivider);
-//   const blockCountInAWeek = toNum(await contracts.bonding.blockCountInAWeek());
+//   console.log("GOVERNANCE per block", toEtherNum(governancePerBlock));
+//   console.log("GOVERNANCE Multiplier", toEtherNum(governanceMultiplier));
+//   const actualGovernancePerBlock = toEtherNum(governancePerBlock.mul(governanceMultiplier).div(`${1e18}`));
+//   console.log("Actual GOVERNANCE per block", actualGovernancePerBlock);
+//   console.log("Extra GOVERNANCE per block to treasury", actualGovernancePerBlock / ugovDivider);
+//   const blockCountInAWeek = toNum(await contracts.staking.blockCountInAWeek());
 //   console.log("Block count in a week", blockCountInAWeek);
 
-//   const ubqPerWeek = actualUbqPerBlock * blockCountInAWeek;
-//   console.log("UBQ Minted per week", ubqPerWeek);
-//   console.log("Extra UBQ minted per week to treasury", ubqPerWeek / ugovDivider);
+//   const governancePerWeek = actualGovernancePerBlock * blockCountInAWeek;
+//   console.log("GOVERNANCE Minted per week", governancePerWeek);
+//   console.log("Extra GOVERNANCE minted per week to treasury", governancePerWeek / ugovDivider);
 
 //   const DAYS_IN_A_YEAR = 365.2422;
 //   const totalShares = toEtherNum(await contracts.masterChef.totalShares());
-//   console.log("Total Bonding Shares", totalShares);
-//   const usdPerWeek = ubqPerWeek * ubqPrice;
+//   console.log("Total Staking Shares", totalShares);
+//   const usdPerWeek = governancePerWeek * governancePrice;
 //   const usdPerDay = usdPerWeek / 7;
 //   const usdPerYear = usdPerDay * DAYS_IN_A_YEAR;
 //   console.log("USD Minted per day", usdPerDay);
@@ -77,11 +77,11 @@ export async function ensureERC1155Allowance(logName: string, contract: Contract
 //   const usdAsLp = 0.7460387929;
 //   const bigNumberOneUsdAsLp = ethers.utils.parseEther(usdAsLp.toString());
 
-//   const bondingDiscountMultiplier = await contracts.bonding.bondingDiscountMultiplier();
+//   const stakingDiscountMultiplier = await contracts.staking.stakingDiscountMultiplier();
 //   const sharesResults = await Promise.all(
 //     [1, 50, 100, 208].map(async (i) => {
 //       const weeks = BigNumber.from(i.toString());
-//       const shares = toEtherNum(await contracts.ubiquityFormulas.durationMultiply(bigNumberOneUsdAsLp, weeks, bondingDiscountMultiplier));
+//       const shares = toEtherNum(await contracts.ubiquityFormulas.durationMultiply(bigNumberOneUsdAsLp, weeks, stakingDiscountMultiplier));
 //       return [i, shares];
 //     })
 //   );

diff --git a/packages/dapp/components/lib/hooks/contracts/use-deployed-contracts.tsx b/packages/dapp/components/lib/hooks/contracts/use-deployed-contracts.tsx
diff --git a/packages/dapp/components/lib/hooks/contracts/use-manager-managed.tsx b/packages/dapp/components/lib/hooks/contracts/use-manager-managed.tsx