replace library of useActiveWeb3React with signer or provider from wa…

…gmi hook

package.json

@@ -29,7 +29,7 @@
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.29.3",
     "ethcall": "^4.8.13",
-    "ethers": "^5.5.3",
+    "ethers": "^5.7.2",
     "framer-motion": "^4.0.3",
     "history": "^5.0.0",
     "i18next": "^19.8.3",

src/components/DepositPage.tsx

@@ -83,7 +83,7 @@ const DepositPage = (props: Props): ReactElement => {
     onConfirmTransaction,
     onToggleDepositWrapped,
   } = props
-  const { account, chainId, library } = useActiveWeb3React()
+  const { account, chainId, signerOrProvider } = useActiveWeb3React()
   const { unstakeMinichef, amountStakedMinichef } = useRewardsHelpers(
     poolData?.name ?? "",
   )
@@ -107,11 +107,11 @@ const DepositPage = (props: Props): ReactElement => {
     const liquidityGaugeContract = getContract(
       gaugeAddr,
       LIQUIDITY_GAUGE_V5_ABI,
-      library,
+      signerOrProvider,
       account,
     ) as LiquidityGaugeV5
     setLiquidityGaugeContract(liquidityGaugeContract)
-  }, [account, chainId, poolData, gaugeAddr, library])
+  }, [account, chainId, poolData, gaugeAddr, signerOrProvider])
 
   const onMigrateToGaugeClick = async () => {
     if (

src/connectors/config.ts

@@ -1,13 +1,10 @@
 import { Chain, connectorsForWallets } from "@rainbow-me/rainbowkit"
-import { STALL_TIMEOUT, SUPPORTED_NETWORKS } from "../constants/networks"
 import {
   arbitrum,
   aurora,
-  avalanche,
   evmos,
   evmosTestnet,
   fantom,
-  goerli,
   hardhat,
   mainnet,
   optimism,
@@ -20,9 +17,9 @@ import {
   walletConnectWallet,
 } from "@rainbow-me/rainbowkit/wallets"
 import { configureChains, createClient } from "wagmi"
+import { STALL_TIMEOUT } from "../constants/networks"
 import Tally from "../components/Rainbowkit"
 import { alchemyProvider } from "wagmi/providers/alchemy"
-import { jsonRpcProvider } from "wagmi/providers/jsonRpc"
 import { publicProvider } from "wagmi/providers/public"
 
 const kava: Readonly<Chain> = {
@@ -51,40 +48,32 @@ const kava: Readonly<Chain> = {
 }
 
 export const chain: Record<string, Chain> = {
+  mainnet,
   arbitrum,
   aurora,
-  avalanche,
   evmos,
   evmosTestnet,
   fantom,
-  goerli,
   hardhat,
-  mainnet,
+  kava,
   optimism,
   optimismGoerli,
-  kava,
 }
 
 const alchemyKey = process.env.REACT_APP_ALCHEMY_API_KEY
 
-const { chains, provider } = configureChains(Object.values(chain), [
-  alchemyProvider({
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    apiKey: alchemyKey!,
-    stallTimeout: STALL_TIMEOUT,
-    priority: alchemyKey ? 0 : 2,
-  }),
-  jsonRpcProvider({
-    rpc: (networkChain) => ({
-      http: SUPPORTED_NETWORKS[networkChain.id]
-        ? networkChain.rpcUrls.default.http[0]
-        : "",
+const { chains, provider, webSocketProvider } = configureChains(
+  Object.values(chain),
+  [
+    alchemyProvider({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      apiKey: alchemyKey!,
+      stallTimeout: STALL_TIMEOUT,
+      priority: alchemyKey ? 0 : 2,
     }),
-    stallTimeout: STALL_TIMEOUT,
-    priority: 1,
-  }),
-  publicProvider({ stallTimeout: STALL_TIMEOUT, priority: 5 }),
-])
+    publicProvider({ stallTimeout: STALL_TIMEOUT, priority: 1 }),
+  ],
+)
 const connectors = connectorsForWallets([
   {
     groupName: "Popular",
@@ -102,6 +91,7 @@ const connectors = connectorsForWallets([
 export const wagmiConfig = createClient({
   autoConnect: true,
   provider,
+  webSocketProvider,
   connectors,
 })
 

src/hooks/index.ts

@@ -1,10 +1,4 @@
-import {
-  useAccount,
-  useChainId,
-  useConnect,
-  useProvider,
-  useSigner,
-} from "wagmi"
+import { useAccount, useChainId, useProvider, useSigner } from "wagmi"
 
 import { ChainId } from "../constants/networks"
 import { useMemo } from "react"
@@ -14,13 +8,12 @@ export function useActiveWeb3React() {
   const { address: account } = useAccount()
   const provider = useProvider()
   const { data: signer } = useSigner()
-  const { isLoading } = useConnect()
-  console.log("isloading ==>", isLoading)
-  const library = useMemo(() => signer || provider, [signer, provider])
+
+  const signerOrProvider = useMemo(() => signer || provider, [signer, provider])
 
   const activeWeb3React = useMemo(
-    () => ({ chainId, account, library }),
-    [chainId, account, library],
+    () => ({ chainId, account, signerOrProvider }),
+    [chainId, account, signerOrProvider],
   )
 
   return activeWeb3React

src/hooks/useAddTokenToMetamask.ts

@@ -1,29 +1,36 @@
-import { SUPPORTED_WALLETS, Token } from "../constants"
 import { useCallback, useState } from "react"
-import { useChainId, useConnect } from "wagmi"
 
-import { ChainId } from "../constants/networks"
-import { find } from "lodash"
+import { Token } from "../constants"
+import { getTokenIconPath } from "../utils"
+import { useAccount } from "wagmi"
+import { useActiveWeb3React } from "."
 
 // @dev https://eips.ethereum.org/EIPS/eip-747#wallet_watchasset
 export default function useAddTokenToMetamask(token: Token | undefined): {
   addToken: () => void
   success: boolean | undefined
   canAdd: boolean
 } {
-  const chainId = useChainId()
-  const connector = useConnect()
-  const [success] = useState<boolean | undefined>()
+  const { chainId } = useActiveWeb3React()
+  const { connector: activeConnector } = useAccount()
+  const [success, setSuccess] = useState<boolean | undefined>()
 
-  const isMetaMask: boolean =
-    find(SUPPORTED_WALLETS, ["connector", connector])?.name == "MetaMask"
-  const canAdd = Boolean(
-    isMetaMask && chainId && token?.addresses[chainId as ChainId],
-  )
+  const isMetaMask = activeConnector?.name === "MetaMask"
+  const canAdd = Boolean(isMetaMask && chainId && token?.addresses[chainId])
 
   const addToken = useCallback(() => {
-    console.log("add")
-  }, [])
+    if (activeConnector && isMetaMask && token) {
+      activeConnector
+        .watchAsset?.({
+          address: token.addresses[chainId],
+          symbol: token.symbol,
+          decimals: token.decimals,
+          image: getTokenIconPath(token.symbol),
+        })
+        .then((success: boolean) => setSuccess(success))
+        .catch(() => setSuccess(false))
+    }
+  }, [activeConnector, chainId, isMetaMask, token])
 
   return { addToken, success, canAdd }
 }

src/hooks/useApproveAndDeposit.ts

@@ -44,7 +44,7 @@ export function useApproveAndDeposit(
   const dispatch = useDispatch()
   const swapContract = useSwapContract(poolName)
   const lpTokenContract = useLPTokenContract(poolName)
-  const { account, chainId, library } = useActiveWeb3React()
+  const { account, chainId, signerOrProvider } = useActiveWeb3React()
   const { gasStandard, gasFast, gasInstant } = useSelector(
     (state: AppState) => state.application,
   )
@@ -65,12 +65,12 @@ export function useApproveAndDeposit(
       return getContract(
         pool.poolAddress,
         META_SWAP_ABI,
-        library,
+        signerOrProvider,
         account ?? undefined,
       ) as MetaSwap
     }
     return null
-  }, [pool?.poolAddress, chainId, library, account])
+  }, [pool?.poolAddress, chainId, signerOrProvider, account])
 
   return async function approveAndDeposit(
     state: ApproveAndDepositStateArgument,
@@ -118,17 +118,17 @@ export function useApproveAndDeposit(
         if (!token) {
           enqueueToast(
             "error",
-            "There was a problem loading the token or library",
+            "There was a problem loading the token or signerOrProvider",
           )
-          console.error("Token or library is not loaded")
+          console.error("Token or signerOrProvider is not loaded")
           return
         }
         const spendingValue = BigNumber.from(state[token.address].valueSafe)
         if (spendingValue.isZero()) return
         const tokenContract = getContract(
           token.address,
           ERC20_ABI,
-          library,
+          signerOrProvider,
           account ?? undefined,
         ) as Erc20
         if (tokenContract == null) return

src/hooks/useApproveAndMigrate.ts

@@ -24,7 +24,7 @@ export function useApproveAndMigrate(): (
   const dispatch = useDispatch()
   const migratorContract = useGeneralizedSwapMigratorContract()
   const basicPools = useContext(BasicPoolsContext)
-  const { account, chainId, library } = useActiveWeb3React()
+  const { account, chainId, signerOrProvider } = useActiveWeb3React()
   const { gasStandard, gasFast, gasInstant } = useSelector(
     (state: AppState) => state.application,
   )
@@ -41,7 +41,7 @@ export function useApproveAndMigrate(): (
     if (
       !migratorContract ||
       !account ||
-      !library ||
+      !signerOrProvider ||
       !oldPool ||
       !lpTokenBalance ||
       lpTokenBalance.isZero()
@@ -50,19 +50,19 @@ export function useApproveAndMigrate(): (
     const lpTokenContract = getContract(
       oldPool.lpToken,
       ERC20_ABI,
-      library,
+      signerOrProvider,
       account,
     ) as Erc20
     const oldPoolAddress = oldPool.poolAddress
 
     const newPoolContract = getSwapContract(
-      library,
+      signerOrProvider,
       oldPool?.newPoolAddress,
       {},
       account ?? undefined,
     ) as SwapFlashLoanNoWithdrawFee
     const oldPoolContract = getSwapContract(
-      library,
+      signerOrProvider,
       oldPoolAddress,
       {},
       account ?? undefined,

src/hooks/useApproveAndSwap.ts

@@ -55,7 +55,7 @@ export function useApproveAndSwap(): (
   const dispatch = useDispatch()
   const basicPools = useContext(BasicPoolsContext)
   const { tokenAddrToTokenMap } = useTokenMaps()
-  const { library } = useActiveWeb3React()
+  const { signerOrProvider } = useActiveWeb3React()
   const { address: account } = useAccount()
   const chainId = useChainId()
   const baseSynthetixContract = useSynthetixContract()
@@ -76,7 +76,8 @@ export function useApproveAndSwap(): (
     state: ApproveAndSwapStateArgument,
   ): Promise<void> {
     try {
-      if (!account || !library) throw new Error("Wallet must be connected")
+      if (!account || !signerOrProvider)
+        throw new Error("Wallet must be connected")
       if (state.swapType === SWAP_TYPES.DIRECT && !state.swapContract)
         throw new Error("Swap contract is not loaded")
       if (state.swapType !== SWAP_TYPES.DIRECT && !state.bridgeContract)
@@ -88,7 +89,7 @@ export function useApproveAndSwap(): (
       const tokenContract = getContract(
         token.address.toLowerCase(),
         ERC20_ABI,
-        library,
+        signerOrProvider,
         account,
       ) as Erc20
       let gasPrice

src/hooks/useApproveAndWithdraw.ts

@@ -39,23 +39,23 @@ export function useApproveAndWithdraw(
   const basicPools = useContext(BasicPoolsContext)
   const swapContract = useSwapContract(poolName)
   const lpTokenContract = useLPTokenContract(poolName)
-  const { account, chainId, library } = useActiveWeb3React()
+  const { account, chainId, signerOrProvider } = useActiveWeb3React()
   const { gasStandard, gasFast, gasInstant } = useSelector(
     (state: AppState) => state.application,
   )
   const tokens = useContext(TokensContext)
   const pool = basicPools?.[poolName]
 
   const metaSwapContract = useMemo(() => {
-    if (pool?.poolAddress && chainId && library) {
+    if (pool?.poolAddress && chainId && signerOrProvider) {
       return getContract(
         pool.poolAddress,
         META_SWAP_ABI,
-        library,
+        signerOrProvider,
         account ?? undefined,
       ) as MetaSwap
     }
-  }, [chainId, library, account, pool?.poolAddress])
+  }, [chainId, signerOrProvider, account, pool?.poolAddress])
 
   const {
     slippageCustom,
@@ -74,7 +74,7 @@ export function useApproveAndWithdraw(
     try {
       const basicPool = basicPools?.[poolName]
       if (!state || !tokens) return
-      if (!account || !chainId || !library)
+      if (!account || !chainId || !signerOrProvider)
         throw new Error("Wallet must be connected")
       if (!swapContract || !basicPool || !lpTokenContract)
         throw new Error("Swap contract is not loaded")
@@ -117,12 +117,12 @@ export function useApproveAndWithdraw(
       const approveSingleToken = async (
         token: BasicToken | undefined,
       ): Promise<void> => {
-        if (!token || !library) {
+        if (!token || !signerOrProvider) {
           enqueueToast(
             "error",
-            "There was a problem loading the token or library",
+            "There was a problem loading the token or signerOrProvider",
           )
-          console.error("Token or library is not loaded")
+          console.error("Token or signerOrProvider is not loaded")
           return
         }
         const spendingValue = BigNumber.from(
@@ -132,7 +132,7 @@ export function useApproveAndWithdraw(
         const tokenContract = getContract(
           token.address,
           ERC20_ABI,
-          library,
+          signerOrProvider,
           account ?? undefined,
         ) as Erc20
         if (tokenContract == null) return