chore(UI): some fixes (#822)

* test: some fixes

packages/dapp/components/layout/anvil/anvil-rpcs.tsx

@@ -1,16 +1,17 @@
-import React from "react";
 import Button from "../../ui/button";
 import { methodConfigs } from "./method-configs";
 import useWeb3 from "@/components/lib/hooks/use-web-3";
+import { LOCAL_NODE_ADDRESS } from "@/components/lib/hooks/use-web-3";
+import { useState } from "react";
 
 export default function AnvilRpcs() {
-  const [isHidden, setIsHidden] = React.useState<boolean>(true);
-  const [isVisible, setIsVisible] = React.useState<number>(0);
-  const [methodArgs, setMethodArgs] = React.useState<Record<string, string>>({});
+  const [isHidden, setIsHidden] = useState<boolean>(true);
+  const [isVisible, setIsVisible] = useState<number>(0);
+  const [methodArgs, setMethodArgs] = useState<Record<string, string>>({});
   const { signer } = useWeb3();
 
   const handleFetch = async (method: string, params: unknown[]) => {
-    const result = await fetch("http://localhost:8545", {
+    const result = await fetch(LOCAL_NODE_ADDRESS, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

packages/dapp/components/layout/inventory.tsx

@@ -7,8 +7,9 @@ import icons from "@/ui/icons";
 
 import useManagerManaged from "../lib/hooks/contracts/use-manager-managed";
 import useNamedContracts from "../lib/hooks/contracts/use-named-contracts";
-import useBalances, { Balances } from "../lib/hooks/use-balances";
+import useBalances from "../lib/hooks/use-balances";
 import { ManagedContracts } from "../lib/hooks/contracts/use-manager-managed";
+import { Balances } from "../lib/types";
 
 const Inventory = () => {
   const { walletAddress } = useWeb3();

packages/dapp/components/lib/app-context-provider.tsx

@@ -1,4 +1,3 @@
-import { ManagedContractsContextProvider } from "./hooks/contracts/use-manager-managed";
 import { BalancesContextProvider } from "./hooks/use-balances";
 import { TransactionsContextProvider } from "./hooks/use-transaction-logger";
 import { UseWeb3Provider } from "./hooks/use-web-3";

packages/dapp/components/lib/hooks/contracts/use-protocol-contracts.ts

@@ -34,26 +34,26 @@ import IMetaPoolArtifact from "@ubiquity/contracts/out/IMetaPool.sol/IMetaPool.j
 import UniswapV2PairABI from "@/components/config/abis/uniswap-v-2-pair.json";
 
 /**
- * Returns all of the available protocol contracts.
- * 
+ * Returns all of the available protocol contracts
+ *
  * Right now the Ubiquity org uses:
  * - separately deployed contracts (https://github.com/ubiquity/ubiquity-dollar/tree/development/packages/contracts/src/dollar/core)
  * - contracts deployed as diamond proxy facets (https://github.com/ubiquity/ubiquity-dollar/tree/development/packages/contracts/src/dollar/facets)
- * 
+ *
  * The following contracts are not exported for various reasons (but feel free
  * to export new contracts when you need them):
- * 
+ *
  * Contracts not used in the UI (as far as I understand):
  * - https://github.com/ubiquity/ubiquity-dollar/blob/development/packages/contracts/src/dollar/core/ERC1155Ubiquity.sol
  * - https://github.com/ubiquity/ubiquity-dollar/blob/development/packages/contracts/src/dollar/core/ERC20Ubiquity.sol
  * - https://github.com/ubiquity/ubiquity-dollar/blob/development/packages/contracts/src/dollar/facets/DiamondCutFacet.sol
  * - https://github.com/ubiquity/ubiquity-dollar/blob/development/packages/contracts/src/dollar/facets/DiamondLoupeFacet.sol
  * - https://github.com/ubiquity/ubiquity-dollar/blob/development/packages/contracts/src/dollar/Diamond.sol
  * - https://github.com/ubiquity/ubiquity-dollar/blob/development/packages/contracts/src/dollar/DirectGovernanceFarmer.sol
- * 
+ *
  * Contracts not yet integrated (i.e. not used in other solidity contracts):
  * - https://github.com/ubiquity/ubiquity-dollar/blob/development/packages/contracts/src/dollar/core/CreditClock.sol
- * 
+ *
  * Contracts on hold (i.e. obsolete) until we find a better utility for them:
  * - https://github.com/ubiquity/ubiquity-dollar/tree/development/packages/contracts/src/ubiquistick
  */
@@ -65,30 +65,29 @@ const useProtocolContracts = async () => {
   // all protocol contracts
   const protocolContracts: {
     // separately deployed contracts (i.e. not part of the diamond)
-    creditNft: Contract | null,
-    creditToken: Contract | null,
-    dollarToken: Contract | null,
-    governanceToken: Contract | null,
-    stakingShare: Contract | null,
+    creditNft: Contract | null;
+    creditToken: Contract | null;
+    dollarToken: Contract | null;
+    governanceToken: Contract | null;
+    stakingShare: Contract | null;
     // diamond facets
-    accessControlFacet: Contract | null,
-    chefFacet: Contract | null,
-    collectableDustFacet: Contract | null,
-    creditNftManagerFacet: Contract | null,
-    creditNftRedemptionCalculatorFacet: Contract | null,
-    creditRedemptionCalculatorFacet: Contract | null,
-    curveDollarIncentiveFacet: Contract | null,
-    dollarMintCalculatorFacet: Contract | null,
-    dollarMintExcessFacet: Contract | null,
-    managerFacet: Contract | null,
-    ownershipFacet: Contract | null,
-    stakingFacet: Contract | null,
-    stakingFormulasFacet: Contract | null,
-    twapOracleDollar3poolFacet: Contract | null,
-    ubiquityPoolFacet: Contract | null,
-    // related contracts
-    sushiPoolGovernanceDollarLp: Contract | null,
-    curveMetaPoolDollarTriPoolLp: Contract | null,
+    accessControlFacet: Contract | null;
+    chefFacet: Contract | null;
+    collectableDustFacet: Contract | null;
+    creditNftManagerFacet: Contract | null;
+    creditNftRedemptionCalculatorFacet: Contract | null;
+    creditRedemptionCalculatorFacet: Contract | null;
+    curveDollarIncentiveFacet: Contract | null;
+    dollarMintCalculatorFacet: Contract | null;
+    dollarMintExcessFacet: Contract | null;
+    managerFacet: Contract | null;
+    ownershipFacet: Contract | null;
+    stakingFacet: Contract | null;
+    stakingFormulasFacet: Contract | null;
+    twapOracleDollar3poolFacet: Contract | null;
+    ubiquityPoolFacet: Contract | null;
+    sushiPoolGovernanceDollarLp: Contract | null;
+    curveMetaPoolDollarTriPoolLp: Contract | null;
   } = {
     // separately deployed contracts (i.e. not part of the diamond)
     creditNft: null,
@@ -116,30 +115,29 @@ const useProtocolContracts = async () => {
     sushiPoolGovernanceDollarLp: null,
     curveMetaPoolDollarTriPoolLp: null,
   };
-
-  let diamondAddress = '';
+  let diamondAddress = "";
 
   // for all of the deployment transactions
-  latestDeployment.transactions.map(tx => {
-    if (tx.transactionType === 'CREATE') {
+  latestDeployment.transactions.map((tx) => {
+    if (tx.transactionType === "CREATE") {
       // find contracts that deployed separately (i.e. not part of the diamond)
-      if (tx.contractName === 'CreditNft') {
+      if (tx.contractName === "CreditNft") {
         protocolContracts.creditNft = new ethers.Contract(tx.contractAddress, CreditNftArtifact.abi, <Provider>provider);
       }
-      if (tx.contractName === 'UbiquityCreditToken') {
+      if (tx.contractName === "UbiquityCreditToken") {
         protocolContracts.creditToken = new ethers.Contract(tx.contractAddress, UbiquityCreditTokenArtifact.abi, <Provider>provider);
       }
-      if (tx.contractName === 'UbiquityDollarToken') {
+      if (tx.contractName === "UbiquityDollarToken") {
         protocolContracts.dollarToken = new ethers.Contract(tx.contractAddress, UbiquityDollarTokenArtifact.abi, <Provider>provider);
       }
-      if (tx.contractName === 'UbiquityGovernanceToken') {
+      if (tx.contractName === "UbiquityGovernanceToken") {
         protocolContracts.governanceToken = new ethers.Contract(tx.contractAddress, UbiquityGovernanceTokenArtifact.abi, <Provider>provider);
       }
-      if (tx.contractName === 'StakingShare') {
+      if (tx.contractName === "StakingShare") {
         protocolContracts.stakingShare = new ethers.Contract(tx.contractAddress, StakingShareArtifact.abi, <Provider>provider);
       }
       // find the diamond address
-      if (tx.contractName === 'Diamond') diamondAddress = tx.contractAddress;
+      if (tx.contractName === "Diamond") diamondAddress = tx.contractAddress;
     }
   });
 

packages/dapp/components/lib/hooks/use-balances.tsx

@@ -1,25 +1,12 @@
 import { erc1155BalanceOf, _3crvTokenAddress } from "@/lib/utils";
-import { BigNumber } from "ethers";
 import { createContext, useContext, useEffect, useState } from "react";
 import useNamedContracts from "./contracts/use-named-contracts";
 import useWalletAddress from "./use-wallet-address";
 import { ChildrenShim } from "./children-shim-d";
 import useProtocolContracts from "@/components/lib/hooks/contracts/use-protocol-contracts";
 import { getERC20Contract } from "@/components/utils/contracts";
 import useWeb3 from "@/components/lib/hooks/use-web-3";
-
-export interface Balances {
-  uad: BigNumber;
-  _3crv: BigNumber;
-  uad3crv: BigNumber;
-  ucr: BigNumber;
-  ucrNft: BigNumber;
-  ubq: BigNumber;
-  stakingShares: BigNumber;
-  usdc: BigNumber;
-  dai: BigNumber;
-  usdt: BigNumber;
-}
+import { Balances } from "../types";
 
 type RefreshBalances = () => Promise<void>;
 
@@ -39,10 +26,9 @@ export const BalancesContextProvider: React.FC<ChildrenShim> = ({ children }) =>
 
     const contracts = await protocolContracts;
 
-    if(contracts.creditNft && contracts.stakingShare) {
+    if (contracts.creditNft && contracts.stakingShare) {
       // const _3crvTokenAddress = await contracts.managerFacet?.curve3PoolTokenAddress();
       const _3crvTokenContract = getERC20Contract(_3crvTokenAddress, provider);
-
       const [uad, _3crv, uad3crv, ucr, ubq, ucrNft, stakingShares, usdc, dai, usdt] = await Promise.all([
         contracts.dollarToken?.balanceOf(walletAddress),
         _3crvTokenContract.balanceOf(walletAddress),
@@ -55,7 +41,6 @@ export const BalancesContextProvider: React.FC<ChildrenShim> = ({ children }) =>
         namedContracts.dai.balanceOf(walletAddress),
         namedContracts.usdt.balanceOf(walletAddress),
       ]);
-
       setBalances({
         uad,
         _3crv,

packages/dapp/components/lib/hooks/use-web-3.tsx

@@ -1,7 +1,7 @@
 import { JsonRpcProvider, JsonRpcSigner, Web3Provider } from "@ethersproject/providers";
 import { useAccount, useProvider, useSigner } from "wagmi";
 import { WagmiConfig, createClient } from "wagmi";
-import { mainnet, hardhat, localhost, foundry } from "wagmi/chains";
+import { mainnet, localhost, foundry } from "wagmi/chains";
 import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
 import { InjectedConnector } from "wagmi/connectors/injected";
 import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
@@ -25,7 +25,7 @@ export type Web3State = {
   signer?: JsonRpcSigner;
 };
 
-const metamaskInstalled = typeof window !== "undefined" ? !!window?.ethereum?.request : false;
+const metamaskInstalled = (typeof window !== "undefined" ? window.ethereum : undefined);
 
 const defaultChains = [mainnet, localhost, foundry /*, hardhat*/];
 
@@ -42,15 +42,15 @@ const client = createClient(
         chains: defaultChains,
         options: {
           shimDisconnect: true,
-          UNSTABLE_shimOnConnectSelectAccount: true
-        }
+          UNSTABLE_shimOnConnectSelectAccount: true,
+        },
       }),
       new InjectedConnector({
         chains: defaultChains,
         options: {
           name: "Injected Wallet",
           getProvider: () => typeof window !== 'undefined' ? window.ethereum : undefined,
-          shimDisconnect: true
+          shimDisconnect: true,
         },
       }),
       new CoinbaseWalletConnector({
@@ -60,8 +60,8 @@ const client = createClient(
           appLogoUrl: "https://dao.ubq.fi/favicon.ico",
           darkMode: true,
           headlessMode: true,
-          jsonRpcUrl: process.env.NEXT_PUBLIC_JSON_RPC_URL || ""
-        }
+          jsonRpcUrl: process.env.NEXT_PUBLIC_JSON_RPC_URL || "",
+        },
       }),
       new WalletConnectConnector({
         chains: defaultChains,
@@ -72,11 +72,11 @@ const client = createClient(
             name: "Ubiquity DAO",
             description: "World's first scalable digital dollar",
             url: "https://dao.ubq.fi/",
-            icons: ["https://dao.ubq.fi/favicon.ico"]
+            icons: ["https://dao.ubq.fi/favicon.ico"],
           },
-        }
-      })
-    ]
+        },
+      }),
+    ],
   })
 );
 

packages/dapp/components/lib/types.ts

@@ -1,4 +1,4 @@
-import { ethers } from "ethers";
+import { BigNumber, ethers } from "ethers";
 
 export interface EthAccount {
   balance: number;
@@ -30,3 +30,16 @@ export interface PoolState {
   feeProtocol: number;
   unlocked: boolean;
 }
+
+export interface Balances {
+  uad: BigNumber;
+  _3crv: BigNumber;
+  uad3crv: BigNumber;
+  ucr: BigNumber;
+  ucrNft: BigNumber;
+  ubq: BigNumber;
+  stakingShares: BigNumber;
+  usdc: BigNumber;
+  dai: BigNumber;
+  usdt: BigNumber;
+}

packages/dapp/components/lib/utils.ts

@@ -142,7 +142,7 @@ export const USDC_TOKEN = new Token(1, "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB
 export const USDT_TOKEN = new Token(1, "0xdAC17F958D2ee523a2206206994597C13D831ec7", 6, "USDT", "Tether USD");
 export const DAI_TOKEN = new Token(1, "0x6B175474E89094C44Da98b954EedeAC495271d0F", 18, "DAI", "Dai Stablecoin");
 
-export class CurrencyAmount extends CurrencyAmountRaw<Currency> { }
+export class CurrencyAmount extends CurrencyAmountRaw<Currency> {}
 
 // Try to parse a user entered amount for a given token
 export function parseAmount(value: string, currency: Currency): CurrencyAmount {

packages/dapp/components/monitor/price-monitor.tsx

@@ -5,7 +5,6 @@ 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 Address from "./ui/Address";
 import PriceExchange from "./ui/price-exchange";
 
 type State = null | PriceMonitorProps;

packages/dapp/components/redeem/debt-coupon.tsx

@@ -2,9 +2,10 @@ import { constrainNumber, formatTimeDiff } from "@/lib/utils";
 import withLoadedContext, { LoadedContext } from "@/lib/with-loaded-context";
 import { BigNumber, ethers } from "ethers";
 import { ChangeEvent, Dispatch, memo, SetStateAction, useEffect, useMemo, useState } from "react";
-import useBalances, { Balances } from "../lib/hooks/use-balances";
+import useBalances from "../lib/hooks/use-balances";
 import useTransactionLogger from "../lib/hooks/use-transaction-logger";
 import usePrices from "./lib/use-prices";
+import { Balances } from "../lib/types";
 
 type Actions = {
   onRedeem: () => void;

packages/dapp/components/redeem/lib/use-prices.ts

@@ -12,22 +12,21 @@ const usePrices = (): [BigNumber | null, BigNumber | null, () => Promise<void>]
 
   async function refreshPrices() {
     try {
-      if(!protocolContracts || !provider) {
+      if (!protocolContracts || !provider) {
         return;
       }
 
       const contracts = await protocolContracts;
 
-      if(contracts.curveMetaPoolDollarTriPoolLp) {
+      if (contracts.curveMetaPoolDollarTriPoolLp) {
         const dollarTokenAddress = await contracts.managerFacet?.dollarTokenAddress();
         const newTwapPrice = await contracts.twapOracleDollar3poolFacet?.consult(dollarTokenAddress);
         const newSpotPrice = await contracts.curveMetaPoolDollarTriPoolLp["get_dy(int128,int128,uint256)"](0, 1, utils.parseEther("1"));
         setTwapPrice(newTwapPrice);
         setSpotPrice(newSpotPrice);
       }
-
     } catch (error) {
-      console.log("Error in refreshPrices: ", error)
+      console.log("Error in refreshPrices: ", error);
     }
   }