Changing UI to display balances on load

app/components/accountBalance.js

@@ -1,7 +1,6 @@
-import Web3 from 'web3';
-
+import web3 from 'Embark/web3';
+import EmbarkJS from 'Embark/EmbarkJS';
 import React from 'react';
-import { Grid, Row, Form, FormGroup, FormControl, HelpBlock, Button, ControlLabel, Col, InputGroup, Alert } from 'react-bootstrap';
  
 class AccountBalance extends React.Component {
 
@@ -14,21 +13,62 @@ class AccountBalance extends React.Component {
         };
     }
 
-    async updateBalances(ev){
-        ev.preventDefault();
-        this.setState({
-            eth: await this.props.web3.eth.getBalance(this.props.address),
-            rnd: await this.props.RND.methods.balanceOf(this.props.address).call()
+    componentDidMount(){
+        EmbarkJS.onReady(err => {
+            if(!err)
+                this.updateBalances();
         });
     }
 
+    updateBalances(ev){
+        if(ev) ev.preventDefault();
+
+        web3.eth.getBalance(this.props.address)
+            .then(eth => { 
+                this.setState({ eth });
+            });
+        
+        this.props.RND.methods.balanceOf(this.props.address)
+            .call()
+            .then(rnd => { 
+                this.setState({ rnd });
+            });
+    }
+
+    sendEther(ev){
+        ev.preventDefault();
+
+        web3.eth.sendTransaction({to: this.props.address, value: web3.utils.toWei('1', 'ether')})
+                .then(() => {
+                    this.updateBalances();
+                    return true;
+                })
+    }
+
+    generateTokens(ev){
+        ev.preventDefault();
+
+        this.props.RND.methods.generateTokens(this.props.address, web3.utils.toWei('500', 'ether'))
+                              .send({gas: 1000000})
+                              .then(() => {
+                                  this.updateBalances();
+                                  return true;
+                              });
+    }
+
     render(){
+        const rnd = web3.utils.fromWei(this.state.rnd, "ether");
+        const eth = web3.utils.fromWei(this.state.eth, "ether");
+
         return <div>
               <h3>{this.props.name}</h3>
               <small>{this.props.address}</small>
-              <p><b>RDN</b><br /><small>{this.state.rnd}</small></p>
-              <p><b>ETH</b><br /><small>{this.state.eth}</small></p>
-              <a href="#" onClick={(ev) => this.updateBalances(ev)}>Update balances</a>
+              <p><b>RDN</b><br /><small>{rnd}</small></p>
+              <p><b>ETH</b><br /><small>{eth}</small></p>
+              <a href="#" onClick={(ev) => this.updateBalances(ev)}>Update balances</a><br />
+              <a href="#" onClick={(ev) => this.generateTokens(ev)}>Generate Tokens</a><br />
+              <a href="#" onClick={(ev) => this.sendEther(ev)}>Send 1 Ether</a><br />
+
             </div>;
     }
 };

app/components/approveandcallgasrelayed.js

@@ -14,7 +14,7 @@ class ApproveAndCallGasRelayed extends React.Component {
         account: '0x1847ab5a71eaa95315c3fc2d3dfb53b7e6e8f313',
         address: this.props.IdentityGasRelay.options.address,
         topic: '0x4964656e',
-        to: '0x00',
+        to: '0x0000000000000000000000000000000000000000',
         value: 0,
         data: '0x00',
         nonce: 0,

app/components/callgasrelayed.js

@@ -13,7 +13,7 @@ class CallGasRelayed extends React.Component {
         account: '0x1847ab5a71eaa95315c3fc2d3dfb53b7e6e8f313',
         address: this.props.IdentityGasRelay.options.address,
         topic: '0x4964656e',
-        to: '0x00',
+        to: '0x0000000000000000000000000000000000000000',
         value: 0,
         data: '0x00',
         nonce: 0,