diff --git a/app/js/App.js b/app/js/App.js
new file mode 100644
index 0000000..6831e89
--- /dev/null
+++ b/app/js/App.js
@@ -0,0 +1,62 @@
+/*global web3*/
+import React from 'react';
+import {HashRouter, Route, Redirect, Switch} from "react-router-dom";
+
+import EmbarkJS from 'Embark/EmbarkJS';
+
+import Home from './components/Home';
+
+const MAINNET = 1;
+const TESTNET = 3;
+
+class App extends React.Component {
+
+ state = {
+ error: null,
+ loading: true
+ };
+
+ componentDidMount() {
+ EmbarkJS.onReady(async (err) => {
+ if (err) {
+ return this.setState({error: err.message || err});
+ }
+
+ const netId = await web3.eth.net.getId();
+ if (EmbarkJS.environment === 'testnet' && netId !== TESTNET) {
+ return this.setState({error: 'Please connect to Ropsten'});
+ }
+ if (EmbarkJS.environment === 'livenet' && netId !== MAINNET) {
+ return this.setState({error: 'Please connect to Mainnet'});
+ }
+ this.setState({loading: false})
+ });
+ }
+
+ render() {
+ const {error, loading} = this.state;
+
+ if (error) {
+ return (
+
Something went wrong connecting to Ethereum. Please make sure you have a node running or are using Metamask
+ to connect to the Ethereum network:
+
+
{error}
+
);
+ }
+
+ if (loading) {
+ return Loading, please wait
;
+ }
+
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+export default App;
diff --git a/app/js/app.js b/app/js/components/Home.js
similarity index 85%
rename from app/js/app.js
rename to app/js/components/Home.js
index c80b238..b74a168 100644
--- a/app/js/app.js
+++ b/app/js/components/Home.js
@@ -1,12 +1,9 @@
/*global web3*/
-
import React from 'react';
import {Button, Grid, Row, Col, Alert } from 'react-bootstrap';
import * as NumericInput from 'react-numeric-input';
import Select from 'react-select';
-import EmbarkJS from 'Embark/EmbarkJS';
-
import Meritocracy from 'Embark/contracts/Meritocracy';
// import './css/dapp.css';
@@ -17,19 +14,15 @@ TODO:
- listen to events to update UI, (initially on page load but within function calls)
*/
-const MAINNET = 1;
-const TESTNET = 3;
-
// Todo Resolve ENS entries
-import contributors from "./contributors";
+import contributors from "../contributors";
let options = contributors;
-class App extends React.Component {
+class Home extends React.Component {
state = {
- error: null,
errorMsg: null,
- busy: true,
+ busy: false,
selectedContributors: [],
contributorList: [],
currentContributor: {
@@ -40,9 +33,8 @@ class App extends React.Component {
status: []
},
award: 0,
- praise: '',
- networkName: ''
- }
+ praise: ''
+ };
constructor(props) {
super(props);
@@ -54,29 +46,12 @@ class App extends React.Component {
this.withdrawTokens = this.withdrawTokens.bind(this);
}
- componentDidMount() {
- EmbarkJS.onReady(async (err) => {
- if (err) {
- return this.setState({error: err.message || err});
- }
+ async componentDidMount() {
+ options = options.map(prepareOptions);
- const netId = await web3.eth.net.getId();
- if (EmbarkJS.environment === 'testnet' && netId !== TESTNET) {
- this.setState({ error: 'Please connect to Ropsten' });
- return;
- } else if (EmbarkJS.environment === 'livenet' && netId !== MAINNET) {
- this.setState({ error: 'Please connect to Mainnet' });
- return;
- }
+ await this.getContributors();
- this.setState({busy: false});
-
- options = options.map(prepareOptions);
-
- await this.getContributors();
-
- this.getCurrentContributorData();
- });
+ this.getCurrentContributorData();
}
handleContributorSelection(_selectedContributors) {
@@ -99,7 +74,6 @@ class App extends React.Component {
this.setState({
praise: '',
selectedContributors: [],
- error: '',
errorMsg: '',
award: 0
});
@@ -132,7 +106,7 @@ class App extends React.Component {
}
async getContributors() {
- const registry = await Meritocracy.methods.getRegistry().call();
+ const registry = await Meritocracy.methods.getRegistry().call({from: web3.eth.defaultAccount});
const contributorList = options.filter(x => registry.includes(x.value) && x.value !== web3.eth.defaultAccount);
this.setState({contributorList});
}
@@ -182,7 +156,7 @@ class App extends React.Component {
async withdrawTokens(e) {
const {currentContributor} = this.state;
- if (currentContributor.received == 0) {
+ if (currentContributor.received === 0) {
this.setState({errorMsg: 'can only call withdraw when you have tokens'});
return;
}
@@ -210,14 +184,7 @@ class App extends React.Component {
}
render() {
- const { selectedContributors, contributorList, award, currentContributor, praise, busy, error, errorMsg } = this.state;
-
- if (error) {
- return (
-
Something went wrong connecting to ethereum. Please make sure you have a node running or are using metamask to connect to the ethereum network:
-
{error}
-
);
- }
+ const { selectedContributors, contributorList, award, currentContributor, praise, busy, errorMsg } = this.state;
const maxAllocation = selectedContributors.length ? currentContributor.allocation / selectedContributors.length : 0;
@@ -278,6 +245,6 @@ const prepareOptions = option => {
//
}
return option;
-}
+};
-export default App;
+export default Home;
diff --git a/app/js/index.js b/app/js/index.js
index 78ec1a4..4e4b9ab 100644
--- a/app/js/index.js
+++ b/app/js/index.js
@@ -1,6 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import App from './app';
+import App from './App';
-ReactDOM.render(, document.getElementById('app'));
+ReactDOM.render(
+ ,
+ document.getElementById('app')
+);