Merge pull request #4 from ensuro/multi-chain

Adapt the store to accept multi chain

.github/workflows/tests.yaml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "20"
           cache: "npm"
       - run: npm ci
       - run: npm run test -- --coverage

.nvmrc

@@ -0,0 +1 @@
+v20

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-store",
-  "version": "0.2.4",
+  "version": "0.2.8",
   "description": "Ethereum store for react redux",
   "scripts": {
     "prettier": "prettier --write .",
@@ -34,28 +34,28 @@
   "dependencies": {
     "big.js": "^6.2.1",
     "buffer": "^6.0.3",
-    "ethers": "^5.7.2",
+    "ethers": "^6.9.0",
     "lodash": "^4.17.21",
     "lodash.clonedeep": "^4.5.0",
-    "react-redux": "^8.1.2",
-    "react-router-dom": "^5.2.0",
-    "reactstrap": "^9.2.0",
-    "redux": "^4.2.1",
+    "react-redux": "^9.0.4",
+    "react-router-dom": "^6.21.0",
+    "reactstrap": "^9.2.1",
+    "redux": "^5.0.0",
     "redux-saga": "^1.2.3",
     "reselect": "^4.1.8",
-    "web3": "^4.1.1"
+    "web3": "^4.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
-    "@openzeppelin/contracts": "^4.9.3",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@openzeppelin/contracts": "^5.0.1",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "prettier": "^3.0.2",
+    "prettier": "^3.1.1",
     "react-scripts": "^5.0.1",
-    "sinon": "^15.2.0"
+    "sinon": "^17.0.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",

src/App.js

@@ -1,12 +1,12 @@
-import React, { useEffect } from "react";
-import { Switch, BrowserRouter as Router } from "react-router-dom";
+import React, { useEffect, useRef } from "react";
+import { Route, Routes } from "react-router-dom";
 import { useDispatch } from "react-redux";
 // Import Routes all
 import { userRoutes } from "./routes/allRoutes";
-import Middleware from "./routes/middleware/Middleware";
 
 function App() {
   let dispatch = useDispatch();
+  const mounted = useRef(false);
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -15,15 +15,22 @@ function App() {
     return () => clearInterval(interval);
   }, [dispatch]);
 
+  // Initial useEffects
+  useEffect(() => {
+    mounted.current = true;
+    dispatch({ type: "SET_USER_CURRENT_CHAIN", name: "Mumbai", id: 80001, rpc: "https://rpc.ankr.com/polygon_mumbai" });
+    return () => {
+      mounted.current = false;
+    };
+  }, [dispatch]);
+
   return (
     <React.Fragment>
-      <Router>
-        <Switch>
-          {userRoutes.map((route, idx) => (
-            <Middleware path={route.path} component={route.component} key={idx} exact />
-          ))}
-        </Switch>
-      </Router>
+      <Routes>
+        {userRoutes.map((route) => (
+          <Route path={route.path} key={route.path} element={<route.component />} />
+        ))}
+      </Routes>
     </React.Fragment>
   );
 }

src/helpers/contractRegistry.js

@@ -1,7 +1,7 @@
 /* This file is used only for testing purposes. */
 const { ethers } = require("ethers");
 
-const roProvider = new ethers.providers.JsonRpcProvider("https://rpc.ankr.com/polygon_mumbai");
+const roProvider = new ethers.JsonRpcProvider("https://rpc.ankr.com/polygon_mumbai");
 
 const abis = {}; // Mapping (abiName => abi)
 const formatters = {}; // Mapping (abiName => method => outputFormatterFunction)

src/helpers/mock_helper.js

@@ -46,7 +46,7 @@ export const mockProviderFn = () => {
   ret._defaultProvider = {
     getSigner: sinon.fake.resolves({
       signMessage: () => "0x1234567890",
-      _signTypedData: () => "0x0987654321",
+      signTypedData: () => "0x0987654321",
     }),
   }; // Default provider
   ret.default = (provider) => {
@@ -63,7 +63,7 @@ export const mockProviderRejectsFn = () => {
   ret._defaultProvider = {
     getSigner: sinon.fake.resolves({
       signMessage: sinon.fake.rejects("Error signing message"),
-      _signTypedData: sinon.fake.rejects("Error signing typed message"),
+      signTypedData: sinon.fake.rejects("Error signing typed message"),
     }),
   }; // Default provider
   ret.default = (provider) => {

src/package-index.js

@@ -14,9 +14,6 @@ let selectUserAddressFn;
 let selectChainIdFn;
 let selectProviderFn;
 
-// Chain
-let envChain;
-
 export function initializeEthereumStore(options) {
   const {
     getEncodedCall,
@@ -29,7 +26,6 @@ export function initializeEthereumStore(options) {
     selectUserAddress,
     selectChainId,
     selectProvider,
-    chain,
   } = options;
 
   getEncodedCallFn = getEncodedCall;
@@ -42,7 +38,6 @@ export function initializeEthereumStore(options) {
   selectUserAddressFn = selectUserAddress;
   selectChainIdFn = selectChainId;
   selectProviderFn = selectProvider;
-  envChain = chain;
 }
 
 export {
@@ -56,5 +51,4 @@ export {
   selectUserAddressFn,
   selectChainIdFn,
   selectProviderFn,
-  envChain,
 };

src/pages/StaticDashboard/staticDashboard.js

@@ -5,7 +5,7 @@ import { Container } from "reactstrap";
 import { Button } from "react-bootstrap";
 import { useDispatch } from "react-redux";
 import { connect } from "react-redux";
-import { selectEthCallMultiple } from "../../store/ethereum/selectors";
+import { selectCurrentChain, selectEthCallMultiple } from "../../store/ethereum/selectors";
 import SubsManager from "./subsManager";
 
 const componentEthCalls = function () {
@@ -19,7 +19,7 @@ const componentEthCalls = function () {
   ];
 };
 
-const Static = ({ totalSupply, subscriptions }) => {
+const Static = ({ totalSupply, subscriptions, currentChain }) => {
   let dispatch = useDispatch();
   const [sub, setSub] = useState(false);
   const mounted = useRef(false);
@@ -36,7 +36,7 @@ const Static = ({ totalSupply, subscriptions }) => {
       dispatch({ type: "ETH_REMOVE_SUBSCRIPTION", key: "staticDashboard" });
       mounted.current = false;
     };
-  }, [dispatch]);
+  }, [dispatch, currentChain]);
 
   return (
     <React.Fragment>
@@ -94,8 +94,9 @@ const Static = ({ totalSupply, subscriptions }) => {
 
 const mapStateToProps = (state) => {
   const [totalSupply] = selectEthCallMultiple(state.EthereumReducer, componentEthCalls());
+  const currentChain = selectCurrentChain(state.EthereumReducer);
   const subscriptions = state.EthereumReducer.subscriptions;
-  return { totalSupply, subscriptions };
+  return { totalSupply, subscriptions, currentChain };
 };
 
 export default connect(mapStateToProps, null)(Static);

src/pages/StaticDashboard/subsManager.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { useDispatch } from "react-redux";
 import { connect } from "react-redux";
-import { selectEthCallMultiple } from "../../store/ethereum/selectors";
+import { selectCurrentChain, selectEthCallMultiple } from "../../store/ethereum/selectors";
 
 const componentEthCalls = function () {
   return [
@@ -14,7 +14,7 @@ const componentEthCalls = function () {
   ];
 };
 
-const SubsManager = ({ symbol }) => {
+const SubsManager = ({ symbol, currentChain }) => {
   let dispatch = useDispatch();
   const mounted = useRef(false);
 
@@ -30,7 +30,7 @@ const SubsManager = ({ symbol }) => {
       dispatch({ type: "ETH_REMOVE_SUBSCRIPTION", key: "subsManager" });
       mounted.current = false;
     };
-  }, [dispatch]);
+  }, [dispatch, currentChain]);
 
   return (
     <React.Fragment>
@@ -47,7 +47,8 @@ const SubsManager = ({ symbol }) => {
 
 const mapStateToProps = (state) => {
   const [symbol] = selectEthCallMultiple(state.EthereumReducer, componentEthCalls());
-  return { symbol };
+  const currentChain = selectCurrentChain(state.EthereumReducer);
+  return { symbol, currentChain };
 };
 
 export default connect(mapStateToProps, null)(SubsManager);

src/store/ethereum/actionTypes.js

@@ -82,3 +82,5 @@ export const ETH_PLAIN_SIGN_FAILED = "ETH_PLAIN_SIGN_FAILED";
  * {type: ETH_PLAIN_SIGN_PROCESSED, key: userAddress, signature: "0x1234...", message: "message to sign"}
  * {type: ETH_PLAIN_SIGN_FAILED, key: userAddress, payload: error.message  }
  */
+
+export const SET_USER_CURRENT_CHAIN = "SET_USER_CURRENT_CHAIN";