mobx Contracts storage; support of async; web3 module is added

package.json

@@ -9,6 +9,7 @@
     "babel-jest": "20.0.3",
     "babel-loader": "7.1.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-app": "^3.1.0",
@@ -49,6 +50,7 @@
     "sw-precache-webpack-plugin": "0.11.4",
     "sweetalert2": "^7.0.8",
     "url-loader": "0.6.2",
+    "web3": "^1.0.0-beta.26",
     "webpack": "3.8.1",
     "webpack-dev-server": "2.9.4",
     "webpack-manifest-plugin": "1.3.2",

src/getWeb3.js

@@ -0,0 +1,64 @@
+let errorMsgNoMetamaskAccount = `You haven't chosen any account in MetaMask.
+Please, choose your initial key in MetaMask and reload the page.
+Check POA Network <a href='https://github.com/oraclesorg/oracles-wiki' target='blank'>wiki</a> for more info.`;
+
+let getWeb3 = () => {
+  return new Promise(function (resolve, reject) {
+    // Wait for loading completion to avoid race conditions with web3 injection timing.
+    window.addEventListener('load', function () {
+      var results
+      var web3 = window.web3
+
+      // Checking if Web3 has been injected by the browser (Mist/MetaMask)
+      if (typeof web3 !== 'undefined') {
+        // Use Mist/MetaMask's provider.
+        var errorMsg = null;
+        web3 = new window.Web3(web3.currentProvider)
+        web3.version.getNetwork((err, netId) => {
+          let netIdName;
+          console.log('netId', netId);
+          switch (netId) {
+            case "99":
+              netIdName = 'Core'
+              console.log('This is Core', netId)
+              break;
+            case "77":
+              netIdName = 'Sokol'
+              console.log('This is Sokol', netId)
+              break;
+            default:
+              netIdName = 'ERROR'
+              errorMsg = `You aren't connected to POA Network. 
+                  Please, switch on POA plugin and refresh the page. 
+                  Check POA Network <a href='https://github.com/oraclesorg/oracles-wiki' target='blank'>wiki</a> for more info.`
+              console.log('This is an unknown network.', netId)
+          }
+          var defaultAccount = web3.eth.defaultAccount || null;
+          if(defaultAccount === null){
+            reject({message: errorMsgNoMetamaskAccount})
+          }
+          if(errorMsg !== null){
+            reject({message: errorMsg})
+          }
+          results = {
+            web3Instance: web3,
+            netIdName,
+            netId,
+            injectedWeb3: true,
+            defaultAccount
+          }
+          resolve(results)
+        })
+
+        console.log('Injected web3 detected.');
+
+      } else {
+        reject({message: errorMsgNoMetamaskAccount})
+        console.error('Metamask not found'); 
+      }
+    })
+  })
+}
+
+export default getWeb3
+

src/index.js

@@ -1,28 +1,55 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import { Provider } from 'mobx-react';
 import newBallotStore from './stores/NewBallotStore';
+import contractsStore from './stores/ContractsStore';
 import swal from 'sweetalert2';
+import getWeb3 from './getWeb3'
+import "babel-polyfill";
 
-const stores = { newBallotStore };
+const stores = { contractsStore, newBallotStore };
 
-if (window.web3) {
-  ReactDOM.render((
-    <Provider { ...stores }>
-      <BrowserRouter>
-        <App/>
-      </BrowserRouter>
-    </Provider>
-  ), document.getElementById('root'));
-} else {
-  swal(
-    'Please use a web3 browser',
-    "You aren't connected to POA Network. Please, switch on Oracles plugin and refresh the page. Check Oracles network <a href='https://github.com/oraclesorg/oracles-wiki' target='blank'>wiki</a> for more info.",
-    'error'
-  );
+function generateElement(msg){
+  let errorNode = document.createElement("div");
+  errorNode.innerHTML = `<div>
+    ${msg}
+  </div>`;
+  return errorNode;
 }
 
+class AppMainRouter extends Component {
+
+  constructor(props) {
+    super(props);
+
+    getWeb3().then(async (web3Config) => {
+      contractsStore.setVotingToChangeKeys(web3Config);
+      contractsStore.setVotingToChangeMinThreshold(web3Config);
+      contractsStore.setVotingToChangeProxy(web3Config);
+    }).catch((error) => {
+      console.error(error.message);
+      swal({
+        icon: 'error',
+        title: 'Error',
+        content: generateElement(error.message)
+      });
+    });
+  }
+
+  render(){
+    return (
+      <Provider { ...stores }>
+        <BrowserRouter>
+          <App/>
+        </BrowserRouter>
+      </Provider>
+    )
+  }
+
+}
+
+ReactDOM.render(<AppMainRouter />, document.getElementById('root'));
 registerServiceWorker();

src/stores/ContractsStore.js

@@ -0,0 +1,43 @@
+import { observable, computed, action } from 'mobx';
+
+import VotingToChangeKeys from '../contracts/VotingToChangeKeys.contract'
+import VotingToChangeMinThreshold from '../contracts/VotingToChangeMinThreshold.contract'
+import VotingToChangeProxy from '../contracts/VotingToChangeProxy.contract'
+
+class ContractsStore {
+	@observable votingToChangeKeys;
+	@observable votingToChangeMinThreshold;
+	@observable votingToChangeProxy;
+
+	constructor() {
+		this.votingToChangeKeys = null;
+		this.votingToChangeMinThreshold = null;
+		this.votingToChangeProxy = null;
+	}
+
+	@action("Set VotingToChangeKeys contract")
+	setVotingToChangeKeys = (web3Config) => {
+		this.votingToChangeKeys = new VotingToChangeKeys({
+        	web3: web3Config.web3Instance
+      	});
+	}
+
+	@action("Set VotingToChangeMinThreshold contract")
+	setVotingToChangeMinThreshold = (web3Config) => {
+		this.votingToChangeMinThreshold = new VotingToChangeMinThreshold({
+        	web3: web3Config.web3Instance
+      	});
+	}
+
+	@action("Set VotingToChangeProxy contract")
+	setVotingToChangeProxy = (web3Config) => {
+		this.votingToChangeProxy = new VotingToChangeProxy({
+        	web3: web3Config.web3Instance
+      	});
+	}
+}
+
+const contractsStore = new ContractsStore();
+
+export default contractsStore;
+export { ContractsStore };