Upgrade react scripts to v5 and fix tailwind config

.eslintrc.js

@@ -28,7 +28,8 @@ module.exports = {
   },
   ignorePatterns: [
     '.eslintrc.js',
-    'postcss.config.js',
     'tailwind.config.js',
+    'config-overrides.js',
+    'postcss.config.js'
   ]
 };

config-overrides.js

@@ -0,0 +1,22 @@
+const webpack = require('webpack');
+
+module.exports = function override(config) {
+  const fallback = config.resolve.fallback || {};
+  Object.assign(fallback, {
+    "crypto": require.resolve("crypto-browserify"),
+    "stream": require.resolve("stream-browserify"),
+    "assert": require.resolve("assert"),
+    "http": require.resolve("stream-http"),
+    "https": require.resolve("https-browserify"),
+    "os": require.resolve("os-browserify"),
+    "url": require.resolve("url")
+  })
+  config.resolve.fallback = fallback;
+  config.plugins = (config.plugins || []).concat([
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer']
+    })
+  ])
+  return config;
+}

package.json

@@ -11,17 +11,18 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "bls-wallet-clients": "^0.6.0",
+    "eslint": "^8.21.0",
     "ethers": "^5.6.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "GENERATE_SOURCEMAP=false react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -45,14 +46,24 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
+    "assert": "^2.0.0",
     "autoprefixer": "^10.4.8",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "https-browserify": "^1.0.0",
+    "os-browserify": "^0.3.0",
     "postcss": "^8.4.16",
-    "tailwindcss": "^3.1.8"
+    "process": "^0.11.10",
+    "react-app-rewired": "^2.2.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "tailwindcss": "^3.1.8",
+    "url": "^0.11.0"
   }
 }

src/hooks/Balance.ts

@@ -21,7 +21,7 @@ import usePoller from './Poller';
   - If no pollTime is passed, the balance will update on every new block
 */
 
-const DEBUG = false;
+// const DEBUG = false;
 
 export default function useBalance(provider: any, address: any, pollTime = 0) {
   const [balance, setBalance] = useState();
@@ -50,7 +50,7 @@ export default function useBalance(provider: any, address: any, pollTime = 0) {
   usePoller(
     async () => {
       if (provider && address && pollTime > 0) {
-        if (DEBUG) console.log('polling!', address);
+        // if (DEBUG) console.log('polling!', address);
         // @ts-ignore
         pollBalance();
       }

src/hooks/OnBlock.ts

@@ -4,7 +4,7 @@
 import { useEffect, useRef } from 'react';
 
 // helper hook to call a function regularly in time intervals
-const DEBUG = false;
+// const DEBUG = false;
 
 export default function useOnBlock(provider: any, fn: any, args: any) {
   const savedCallback = useRef();
@@ -16,8 +16,8 @@ export default function useOnBlock(provider: any, fn: any, args: any) {
   // Turn on the listener if we have a function & a provider
   useEffect((): any => {
     if (fn && provider) {
-      const listener = (blockNumber: any) => {
-        if (DEBUG) console.log(blockNumber, fn, args, provider.listeners());
+      const listener = () => {
+        // if (DEBUG) console.log(blockNumber, fn, args, provider.listeners());
 
         if (args && args.length > 0) {
           // @ts-ignore

src/index.css

@@ -1,6 +1,6 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities
+@tailwind utilities;
 
 body {
   margin: 0;

tailwind.config.js

@@ -2,7 +2,6 @@
 module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
-    "./src/*.{js,jsx,ts,tsx}",
   ],
   theme: {
     extend: {},