Wallet connect for lend and treasury (#719)

* treasury wallet connect v2

* lend wallet connect

lend/craco.config.js

@@ -1,13 +1,33 @@
 const CracoLessPlugin = require("craco-less");
-
+const webpack = require('webpack');
 module.exports = {
+  reactStrictMode: true,
   webpack: {
     configure: (webpackConfig) => {
       webpackConfig.module.rules.push({
         test: /\.mjs$/,
         include: /node_modules/,
         type: "javascript/auto",
+
+      });
+      webpackConfig.module.rules.push({
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false,
+        },
       });
+      webpackConfig.resolve.fallback = {
+        ...webpackConfig.resolve.fallback,
+        "fs": false, // Mock 'fs' with an empty module.
+        "path": require.resolve("path-browserify"),
+        "buffer": require.resolve("buffer")
+      };
+      webpackConfig.plugins.push(
+        new webpack.ProvidePlugin({
+            process: 'process/browser',
+            Buffer: ['buffer', 'Buffer'],
+        }),
+    );
       return webpackConfig;
     },
   },
@@ -24,4 +44,4 @@ module.exports = {
       },
     },
   ],
-};
+};

lend/package.json

@@ -13,11 +13,12 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.7",
-    "@web3-react/core": "^6.1.9",
+    "@web3-react/core": "^8.2.0",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/walletconnect-connector": "^6.1.9",
     "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
+    "craco-less": "3.0.1",
     "ethers": "5.4.0",
     "framer": "^1.2.29",
     "rc-slider": "^10.0.1",
@@ -28,7 +29,7 @@
     "react-dom": "^17.0.1",
     "react-hooks-global-state": "^1.0.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "shared": "^0.1.0",
     "styled-components": "^5.2.1",
     "typescript": "^4.1.2",

lend/src/App.tsx

@@ -5,7 +5,6 @@ import { Web3ReactProvider } from "@web3-react/core";
 import { Web3DataContextProvider } from "./hooks/web3DataContext";
 import "shared/lib/i18n/config";
 import { Web3ContextProvider } from "./hooks/web3Context";
-import { getLibrary } from "shared/lib/utils/getLibrary";
 import { SubgraphDataContextProvider } from "./hooks/subgraphDataContext";
 import { PendingTransactionsContextProvider } from "./hooks/pendingTransactionsContext";
 import { ExternalAPIDataContextProvider } from "shared/lib/hooks/externalAPIDataContext";
@@ -16,6 +15,7 @@ import Geoblocked from "shared/lib/components/Geoblocked/Geoblocked";
 import { LoadingText } from "shared/lib/hooks/useLoadingText";
 import RootApp from "./pages/RootApp";
 import colors from "shared/lib/designSystem/colors";
+import { allConnectors } from "shared/lib/utils/wallet/connectors";
 import "shared/lib/i18n/config";
 
 const Body = styled.div`
@@ -48,7 +48,7 @@ function App() {
   return (
     <ChainContextProvider>
       <Web3ContextProvider>
-        <Web3ReactProvider getLibrary={getLibrary}>
+        <Web3ReactProvider connectors={allConnectors}>
           <PendingTransactionsContextProvider>
             <Web3DataContextProvider>
               <SubgraphDataContextProvider>

lend/src/components/WalletPage/index.tsx

@@ -26,7 +26,6 @@ import { useAssetsBalance } from "../../hooks/web3DataContext";
 import Indicator from "shared/lib/components/Indicator/Indicator";
 import { truncateAddress } from "shared/lib/utils/address";
 import { formatUnits } from "ethers/lib/utils";
-import { useChain } from "../../hooks/chainContext";
 
 const borderStyle = `1px solid ${colors.primaryText}1F`;
 
@@ -253,7 +252,6 @@ export const WalletPage = ({ onHide }: WalletPageProps) => {
   );
   const [selectedWallet, setWallet] = useState<EthereumWallet>();
   const balances = useAssetsBalance();
-  const [chain] = useChain();
   useEffect(() => {
     setTimeout(() => {
       if (active) setWalletStep(WalletPageEnum.ACCOUNT);
@@ -263,13 +261,18 @@ export const WalletPage = ({ onHide }: WalletPageProps) => {
   const onActivate = useCallback(async () => {
     if (selectedWallet) {
       try {
-        await activate(selectedWallet as EthereumWallet, chain);
+        if (selectedWallet === EthereumWallet.WalletConnect) {
+          setTimeout(() => {
+            onHide();
+          }, 1000);
+        }
+        await activate(selectedWallet as EthereumWallet, Chains.Ethereum);
         onHide();
       } catch (error) {
         console.error(error);
       }
     }
-  }, [activate, chain, onHide, selectedWallet]);
+  }, [activate, onHide, selectedWallet]);
 
   const modalTitle = useMemo(() => {
     if (walletStep === WalletPageEnum.ACCOUNT) {

lend/src/hooks/useERC20Contracts.ts

@@ -4,6 +4,7 @@ import { ERC20Balance } from "../codegen";
 import { ERC20Balance__factory } from "../codegen/factories/ERC20Balance__factory";
 import { useWeb3Context } from "shared/lib/hooks/web3Context";
 import deployment from "../constants/deployments.json";
+import useWeb3Wallet from "./useWeb3Wallet";
 
 export const getRibbonContract = (library: any, useSigner: boolean = true) => {
   const provider = useSigner ? library.getSigner() : library;
@@ -21,17 +22,18 @@ export const getUSDCContract = (library: any, useSigner: boolean = true) => {
 };
 
 const useERC20Contracts = () => {
-  const { active, library } = useWeb3React();
-  const { provider } = useWeb3Context();
+  const { provider } = useWeb3React();
+  const { active } = useWeb3Wallet();
+  const { provider: defaultProvider } = useWeb3Context();
   const [ribbonToken, setRibbonToken] = useState<ERC20Balance | null>(null);
   const [usdcToken, setUSDCToken] = useState<ERC20Balance | null>(null);
 
   useEffect(() => {
-    const ribbonToken = getRibbonContract(library || provider, active);
+    const ribbonToken = getRibbonContract(provider || defaultProvider, active);
     setRibbonToken(ribbonToken);
-    const usdcToken = getUSDCContract(library || provider, active);
+    const usdcToken = getUSDCContract(provider || defaultProvider, active);
     setUSDCToken(usdcToken);
-  }, [active, library, provider]);
+  }, [active, defaultProvider, provider]);
 
   return {
     ribbonToken,

lend/src/hooks/useFetchPoolData.ts

@@ -10,16 +10,13 @@ import { defaultPoolData, PoolData, PoolDataResponses } from "../models/pool";
 import { isProduction } from "shared/lib/utils/env";
 import { usePendingTransactions } from "./pendingTransactionsContext";
 import { isPoolSupportedOnChain } from "../utils/pool";
+import useWeb3Wallet from "./useWeb3Wallet";
 
 const useFetchPoolData = (): PoolData => {
-  const {
-    chainId,
-    library,
-    active: web3Active,
-    account: web3Account,
-  } = useWeb3React();
-
-  const { provider } = useWeb3Context();
+  const { chainId, provider, account: web3Account } = useWeb3React();
+
+  const { active: web3Active } = useWeb3Wallet();
+  const { provider: defaultProvider } = useWeb3Context();
   const account = impersonateAddress ? impersonateAddress : web3Account;
   const { transactionsCounter } = usePendingTransactions();
 
@@ -47,7 +44,11 @@ const useFetchPoolData = (): PoolData => {
           web3Active && isPoolSupportedOnChain(pool, chainId || 1)
         );
 
-        const contract = getLendContract(library || provider, pool, active);
+        const contract = getLendContract(
+          provider || defaultProvider,
+          pool,
+          active
+        );
 
         if (!contract) {
           return { pool };
@@ -205,7 +206,7 @@ const useFetchPoolData = (): PoolData => {
     if (!isProduction()) {
       console.timeEnd("Pool Data Fetch"); // eslint-disable-line
     }
-  }, [account, web3Active, library, provider, chainId]);
+  }, [web3Active, chainId, provider, defaultProvider, account]);
 
   useEffect(() => {
     doMulticall();

lend/src/hooks/useInterestRateModelData.ts

@@ -6,12 +6,12 @@ import { getInterestRateModelContract } from "./useInterestRateModelContract";
 import { useWeb3Context } from "./web3Context";
 
 export const useInterestRateModelData = () => {
-  const { library } = useWeb3React();
-  const { provider } = useWeb3Context();
+  const { provider } = useWeb3React();
+  const { provider: defaultProvider } = useWeb3Context();
   const [data, setData] = useState<InterestData>(defaultInterestData);
   const [loading, setLoading] = useState<boolean>(true);
   const getData = useCallback(async () => {
-    const contract = getInterestRateModelContract(library || provider);
+    const contract = getInterestRateModelContract(provider || defaultProvider);
 
     if (!contract) {
       return;
@@ -40,7 +40,7 @@ export const useInterestRateModelData = () => {
     } as InterestData);
 
     setLoading(false);
-  }, [library, provider]);
+  }, [defaultProvider, provider]);
 
   useEffect(() => {
     getData();

lend/src/hooks/useLendContract.ts

@@ -7,6 +7,7 @@ import {
   PoolOptions,
 } from "shared/lib/constants/lendConstants";
 import { useWeb3Context } from "shared/lib/hooks/web3Context";
+import useWeb3Wallet from "./useWeb3Wallet";
 
 export const getLendContract = (
   library: any,
@@ -22,14 +23,19 @@ export const getLendContract = (
 };
 
 const useLendContract = (poolOption: PoolOptions) => {
-  const { active, library } = useWeb3React();
-  const { provider } = useWeb3Context();
+  const { provider } = useWeb3React();
+  const { active } = useWeb3Wallet();
+  const { provider: defaultProvider } = useWeb3Context();
   const [pool, setPool] = useState<RibbonLendPool | null>(null);
 
   useEffect(() => {
-    const pool = getLendContract(library || provider, poolOption, active);
+    const pool = getLendContract(
+      provider || defaultProvider,
+      poolOption,
+      active
+    );
     setPool(pool);
-  }, [active, library, provider, poolOption]);
+  }, [active, provider, poolOption, defaultProvider]);
 
   return pool;
 };

lend/src/hooks/usePoolFactoryContract.ts

@@ -4,6 +4,7 @@ import { PoolFactory } from "../codegen";
 import { PoolFactory__factory } from "../codegen/factories/PoolFactory__factory";
 import { useWeb3Context } from "shared/lib/hooks/web3Context";
 import deployment from "../constants/deployments.json";
+import useWeb3Wallet from "./useWeb3Wallet";
 
 export const getPoolFactoryContract = (
   library: any,
@@ -15,14 +16,18 @@ export const getPoolFactoryContract = (
 };
 
 const usePoolFactoryContract = () => {
-  const { active, library } = useWeb3React();
-  const { provider } = useWeb3Context();
+  const { provider } = useWeb3React();
+  const { active } = useWeb3Wallet();
+  const { provider: defaultProvider } = useWeb3Context();
   const [poolFactory, setPoolFactory] = useState<PoolFactory | null>(null);
 
   useEffect(() => {
-    const poolFactory = getPoolFactoryContract(library || provider, active);
+    const poolFactory = getPoolFactoryContract(
+      provider || defaultProvider,
+      active
+    );
     setPoolFactory(poolFactory);
-  }, [active, library, provider]);
+  }, [active, defaultProvider, provider]);
 
   return poolFactory;
 };