finished demo

.eslintrc

@@ -13,6 +13,8 @@
     "prettier/react"
   ],
   "rules": {
+    "react/destructuring-assignment": ["off"],
+    "linebreak-style": ["off"],
     "prettier/prettier": "error",
     "react/forbid-prop-types": [1, { "forbid": ["any"] }]
   }

package.json

@@ -5,14 +5,15 @@
   "scripts": {
     "precommit": "yarn lint --fix",
     "lint": "eslint 'src/**/*.js*' --fix",
-    "start": "parcel src/index.html",
+    "start": "parcel src/index.html --no-cache",
     "test": "jest --all --verbose --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
     "test:local": "jest --all --verbose --coverage"
   },
   "dependencies": {
     "antd": "3.6.3",
     "axios": "0.18.0",
     "babel-polyfill": "6.26.0",
+    "lodash": "^4.17.10",
     "node-sass": "4.9.0",
     "prop-types": "15.6.2",
     "react": "16.4.1",

src/Services/Web3Service.jsx

@@ -1,17 +1,19 @@
 import Web3 from "web3";
-
-import myContract from "../assets/contract/build/contracts/Coin.json";
+import _ from "lodash";
 
 export default class Web3Service {
   constructor(contract = null, connectionUrl = null) {
     this.web3 = new Web3(connectionUrl || Web3.givenProvider);
 
     this.contract = {};
-    if (contract) this.contract = this.addContract(myContract);
+    if (contract) this.contract = this.addContract(contract);
   }
 
-  addContract = async contractJSON =>
-    (this.contract = await new this.web3.eth.Contract(myContract.abi));
+  addContract = async contractJSON => {
+    this.contract = await new this.web3.eth.Contract(contractJSON.abi);
+    const key = _.findKey(contractJSON.networks, "address");
+    this.contract.options.address = contractJSON.networks[key].address;
+  };
 
   getContract = () => this.contract;
 

src/components/DataDisplay/DataDisplay.jsx

@@ -1,18 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const DataDisplay = props => (
+const DataDisplay = ({ text, data }) => (
   <div style={{ fontSize: "14px", textAlign: "left", margin: "auto" }}>
-    <pre>{props.asset && JSON.stringify(props.asset, null, 2)}</pre>
+    <pre>{text}{data && JSON.stringify(data, null, 2)}</pre>
   </div>
 );
 
 DataDisplay.propTypes = {
-  asset: PropTypes.object
+  data: PropTypes.any
 };
 
 DataDisplay.defaultProps = {
-  asset: null
+  data: null
 };
 
 export default DataDisplay;

src/components/Form/MyForm.jsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Form, Icon, Input, Button } from "antd";
 
-import "./MyForm.css";
+// import "./MyForm.css";
 
 const FormItem = Form.Item;
 
@@ -46,6 +46,7 @@ class MyForm extends Component {
             rules: [{ required: true, message: "Please input a value!" }]
           })(
             <Input
+              style={{ width: "50vh" }}
               prefix={<Icon type="edit" style={{ color: "rgba(0,0,0,.25)" }} />}
               placeholder="Value"
             />

src/components/Routing/Routing.jsx

@@ -8,9 +8,7 @@ import DefaultRoute from "./DefaultRoute";
 
 // Pages
 import {
-  DashboardPage,
   HomePage,
-  LoginPage,
   PageNotFound
 } from "../../containers";
 
@@ -21,12 +19,6 @@ class Routing extends PureComponent {
     return (
       <Switch>
         <DefaultRoute exact path="/" component={HomePage} appState={appState} />
-        <DefaultRoute path="/login" component={LoginPage} appState={appState} />
-        <DefaultRoute
-          path="/dashboard"
-          component={DashboardPage}
-          appState={appState}
-        />
         {/* <PrivateRoute */}
         {/* exact */}
         {/* path="/dashboard" */}

src/containers/Home/HomePage.jsx

@@ -3,22 +3,82 @@ import { notification } from "antd";
 
 import Web3Service from "../../Services/Web3Service";
 
-import contract from "../../assets/contract/build/contracts/Coin.json";
+import CoinContract from "../../assets/contract/build/contracts/Coin.json";
 import MyForm from "../../components/Form/MyForm";
+import DataDisplay from "../../components/DataDisplay/DataDisplay";
 
 class HomePage extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
-  }
+    this.state = {
+      metaMaskAcc: "0x627306090abaB3A6e1400e9345bC60c78a8BEf57",
+      otherRandomAcc: "",
+      gasCost: 0,
+      account: {},
+      contract: {},
+      txAddUser: {},
+      txInitUser: {},
+      retrievedUser: {}
+    };
 
-  componentDidMount() {
-    console.log(contract);
+    this.web3Service = null;
+  }
 
-    this.web3Service = new Web3Service(contract.abi); // no param, assuming metamask
+  async componentDidMount() {
+    this.web3Service = await new Web3Service(CoinContract); // no param, assuming metamask
+    this.setState({
+      contract: this.web3Service.getContract(),
+      account: this.web3Service.createAccount().address
+    });
   }
 
+  calculateGas = async userToAdd => {
+    const { contract } = this.state;
+    await this.setState({
+      gasCost: await contract.methods.addUser(userToAdd.value).estimateGas()
+    });
+    this.openNotification(`Gas calculated! ${this.state.gasCost}`);
+  };
+
+  addUser = async userToAdd => {
+    const { contract, metaMaskAcc } = this.state;
+    await this.setState({
+      txAddUser: await contract.methods.addUser(userToAdd.value).send({
+        from: metaMaskAcc
+      })
+    });
+    this.openNotification(
+      `User Added in SC! ${this.state.txAddUser.transactionHash}`
+    );
+  };
+
+  initializeUser = async amountCoins => {
+    const { account, contract, metaMaskAcc } = this.state;
+    await this.setState({
+      txInitUser: await contract.methods
+        .setAssignableCoins(account, amountCoins.value)
+        .send({
+          from: metaMaskAcc
+        })
+    });
+    this.openNotification(
+      `User coins initialized in SC! ${this.state.txAddUser.transactionHash}`
+    );
+  };
+
+  getUser = async givenUser => {
+    const { contract, metaMaskAcc } = this.state;
+    await this.setState({
+      retrievedUser: await contract.methods
+        .assignableCoins(givenUser.value)
+        .call({
+          from: metaMaskAcc
+        })
+    });
+    this.openNotification(`User Added in SC! ${this.state.retrievedUser}`);
+  };
+
   openNotification = (title, message) => {
     const args = {
       message: title,
@@ -28,21 +88,36 @@ class HomePage extends Component {
     notification.open(args);
   };
 
-  handleSubmit = () => {
-    const account = this.web3Service.createAccount();
-    const contract = this.web3Service.getContract();
-    console.log("=======");
-    console.log(contract);
-    const gasCost = contract.methods.addUser(account.address).estimateGas();
-  };
-
   render() {
-    const { tx } = this.state;
+    const {
+      gasCost,
+      txAddUser,
+      account,
+      retrievedUser,
+      txInitUser
+    } = this.state;
 
     return (
       <div>
-        <MyForm handleSubmit={this.handleSubmit} btnText="Send Transaction" />
-        {/* <DataDisplay asset={this.state.tx} /> */}
+        <DataDisplay text="Current account: " data={account} />
+
+        <MyForm handleSubmit={this.calculateGas} btnText="Calculate Gas" />
+        <DataDisplay text="Gas cost for operation: " data={gasCost} />
+
+        <MyForm handleSubmit={this.addUser} btnText="Add user" />
+        <DataDisplay
+          text="Added user, txHash: "
+          data={txAddUser.transactionHash}
+        />
+
+        <MyForm handleSubmit={this.initializeUser} btnText="Give coins" />
+        <DataDisplay
+          text="Gave coins, txHash: "
+          data={txInitUser.transactionHash}
+        />
+
+        <MyForm handleSubmit={this.getUser} btnText="Get user" />
+        <DataDisplay text="Amount of coins: " data={retrievedUser} />
       </div>
     );
   }

src/containers/index.jsx

@@ -1,9 +1,5 @@
 import HomePage from "./Home/HomePage";
 
-import DashboardPage from "./Dashboard/DashboardPage";
-
-import LoginPage from "./Auth/LoginPage";
-
 import PageNotFound from "./Errors/PageNotFound";
 
-export { HomePage, DashboardPage, LoginPage, PageNotFound };
+export { HomePage, PageNotFound };

yarn.lock

@@ -4802,7 +4802,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@^4.0.0, lodash@~4.17.10:
+lodash@^4.0.0, lodash@^4.17.10, lodash@~4.17.10:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"