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') +);