landing react-scripts 5 upgrade (#716)

landing/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 = {
       },
     },
   ],
-};
+};

landing/package.json

@@ -13,11 +13,12 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.7",
     "@types/styled-components": "^5.1.7",
-    "@web3-react/core": "^6.1.9", 
+    "@web3-react/core": "^8.1.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",
     "react": "^17.0.1",
@@ -27,7 +28,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",

landing/src/App.tsx

@@ -8,9 +8,7 @@ import {
 } from "react-router-dom";
 import { Web3ReactProvider } from "@web3-react/core";
 import { ConnectionProvider } from "@solana/wallet-adapter-react";
-
 import { Web3ContextProvider } from "shared/lib/hooks/web3Context";
-import { getLibrary } from "shared/lib/utils/getLibrary";
 import { Web3DataContextProvider } from "shared/lib/hooks/web3DataContext";
 import { SubgraphDataContextProvider } from "shared/lib/hooks/subgraphDataContext";
 import { ExternalAPIDataContextProvider } from "shared/lib/hooks/externalAPIDataContext";
@@ -27,6 +25,7 @@ import TermsPage from "./pages/TermsPage";
 import colors from "shared/lib/designSystem/colors";
 import { getSolanaClusterURI } from "shared/lib/utils/env";
 import StickyFooter from "./components/StickyFooter/StickyFooter";
+import { allConnectors } from "shared/lib/utils/wallet/connectors";
 import "shared/lib/i18n/config";
 
 const Body = styled.div`
@@ -44,7 +43,7 @@ function App() {
     <ChainContextProvider>
       <ConnectionProvider endpoint={getSolanaClusterURI()}>
         <Web3ContextProvider>
-          <Web3ReactProvider getLibrary={getLibrary}>
+          <Web3ReactProvider connectors={allConnectors}>
             <Web3DataContextProvider>
               <SubgraphDataContextProvider>
                 <ExternalAPIDataContextProvider>

shared/src/hooks/chainContext.tsx

@@ -1,5 +1,7 @@
 import React, { ReactElement, useContext, useState } from "react";
 import { Chains } from "../constants/constants";
+import { Web3ReactProvider } from "@web3-react/core";
+import { allConnectors } from "../utils/wallet/connectors";
 
 interface ChainContextType {
   chain: Chains;
@@ -22,8 +24,10 @@ export const ChainContextProvider: React.FC<{
   const [chain, setChain] = useState(Chains.NotSelected);
 
   return (
-    <ChainContext.Provider value={{ chain, setChain }}>
-      {children}
-    </ChainContext.Provider>
+    <Web3ReactProvider connectors={allConnectors}>
+      <ChainContext.Provider value={{ chain, setChain }}>
+        {children}
+      </ChainContext.Provider>
+    </Web3ReactProvider>
   );
 };

shared/src/hooks/useFetchEarnVaultData.ts

@@ -5,6 +5,7 @@ import {
   getVaultNetwork,
   EarnVaultList,
   VIPVaultList,
+  isEarnVault,
 } from "../constants/constants";
 import { isProduction, isTreasury, isVIP } from "../utils/env";
 import { getVaultContract } from "./useVaultContract";
@@ -154,17 +155,19 @@ const useFetchEarnVaultData = (): V2VaultData => {
           queuedWithdrawShares
         );
 
+        const roundPricePerShare = round
+          ? await contract.roundPricePerShare(round - 1)
+          : BigNumber.from(0);
+
+        const usedPricePerShare =
+          vault === "rEARN" ? roundPricePerShare : actualPricePerShare;
+
         const accountVaultBalance = (shares as BigNumber)
-          .mul(actualPricePerShare)
+          .mul(usedPricePerShare)
           .div(BigNumber.from("10").pow(decimals as BigNumber));
         // we use roundPricePerShare for earn treasury because pricePerShare goes down
         // during the round itself
 
-        const roundPricePerShare =
-          (isTreasury() || isVIP()) && round
-            ? await contract.roundPricePerShare(round - 1)
-            : BigNumber.from(0);
-
         const allocationState = (
           (
             _allocationState as {