embed erc20token inside testtoken

app/components/erc20token.js

@@ -7,21 +7,16 @@ class ERC20TokenUI extends React.Component {
 
     constructor(props) {
       super(props);
+      ERC20Token.options.address = props.address;
       this.state = {
-
         balanceOf: 0,
         transferTo: "",
         transferAmount: 0,
-        logs: []
+        accountBalance: 0,
+        accountB: web3.eth.defaultAccount,
       }      
     }  
     
-    contractAddress(e){
-      e.preventDefault();
-      var tokenAddress = e.target.value;
-      ERC20Token.options.address = tokenAddress;
-    }
-
     update_transferTo(e){
       this.setState({transferTo: e.target.value});
     }
@@ -50,7 +45,6 @@ class ERC20TokenUI extends React.Component {
       if (EmbarkJS.isNewWeb3()) {
         ERC20Token.methods.balanceOf(who).call()
           .then(_value => this.setState({balanceOf: _value}))
-        
       } else {
         ERC20Token.balanceOf(who)
           .then(_value => this.x({balanceOf: _value}));
@@ -58,25 +52,32 @@ class ERC20TokenUI extends React.Component {
       this._addToLog(ERC20Token.options.address+".balanceOf(" + who + ")");
     }
   
+    getDefaultAccountBalance(){
+      if (EmbarkJS.isNewWeb3()) {
+        ERC20Token.methods.balanceOf(web3.eth.defaultAccount).call()
+          .then(_value => this.setState({accountBalance: _value}))
+      } else {
+        ERC20Token.balanceOf(web3.eth.defaultAccount)
+          .then(_value => this.x({valueGet: _value}))
+      }
+      this._addToLog(ERC20Token.options.address + ".balanceOf(" + web3.eth.defaultAccount + ")");
+    }
 
     _addToLog(txt){
-      this.state.logs.push(txt);
+      console.log(txt);
-      this.setState({logs: this.state.logs});
     }
   
     render(){
       return (<React.Fragment>
-     
+          
-          <h2> Set token contract address</h2>
+          <h3> Read your account token balance </h3>
           <Form inline>
             <FormGroup>
-              <FormControl
+              <HelpBlock>Your test token balance is <span className="accountBalance">{this.state.accountBalance}</span></HelpBlock>
-                type="text"
+              <Button bsStyle="primary" onClick={(e) => this.getDefaultAccountBalance()}>Get Balance</Button>
-                onChange={(e) => this.contractAddress(e)} />
             </FormGroup>
           </Form>
-
+     
-          
           <h3> Read account token balance</h3>
           <Form inline>
             <FormGroup>
@@ -115,14 +116,7 @@ class ERC20TokenUI extends React.Component {
               <Button bsStyle="primary" onClick={(e) => this.approve(e)}>Approve</Button>
             </FormGroup>
           </Form>
-     
+    
-          <h3> Contract Calls </h3>
-          <p>Javascript calls being made: </p>
-          <div className="logs">
-          {
-            this.state.logs.map((item, i) => <p key={i}>{item}</p>)
-          }
-          </div>
       </React.Fragment>
       );
     }

app/components/testtoken.js

@@ -2,17 +2,14 @@ import EmbarkJS from 'Embark/EmbarkJS';
 import TestToken from 'Embark/contracts/TestToken';
 import React from 'react';
 import { Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
- 
+import ERC20TokenUI from './erc20token';
+
 class TestTokenUI extends React.Component {
 
     constructor(props) {
       super(props);
       this.state = {
         amountToMint: 100,
-        accountBalance: 0,
-        accountB: web3.eth.defaultAccount,
-        balanceOf: 0,
-        logs: []
       }      
     }
   
@@ -33,28 +30,10 @@ class TestTokenUI extends React.Component {
       }
       this._addToLog(TestToken.options.address +".mint("+value+").send({from: " + web3.eth.defaultAccount + "})");
     }
-  
+    
-    getBalance(e){
-      e.preventDefault();
-      
-      if (EmbarkJS.isNewWeb3()) {
-        TestToken.methods.balanceOf(web3.eth.defaultAccount).call()
-          .then(_value => this.setState({accountBalance: _value}))
-      } else {
-        TestToken.balanceOf(web3.eth.defaultAccount)
-          .then(_value => this.x({valueGet: _value}))
-      }
-      this._addToLog(TestToken.options.address + ".balanceOf(" + web3.eth.defaultAccount + ")");
-    }
-  
-    _addToLog(txt){
-      this.state.logs.push(txt);
-      this.setState({logs: this.state.logs});
-    }
-  
     render(){
       return (<React.Fragment>
-          <h3> 1. Mint Test Token</h3>
+          <h3> Mint Test Token</h3>
           <Form inline>
             <FormGroup>
               <FormControl
@@ -65,21 +44,8 @@ class TestTokenUI extends React.Component {
             </FormGroup>
           </Form>
           
-          <h3> 2. Read your account token balance </h3>
+          <ERC20TokenUI address={ TestToken.options.address } />
-          <Form inline>
+
-            <FormGroup>
-              <HelpBlock>Your test token balance is <span className="accountBalance">{this.state.accountBalance}</span></HelpBlock>
-              <Button bsStyle="primary" onClick={(e) => this.getBalance(e)}>Get Balance</Button>
-            </FormGroup>
-          </Form>
-     
-          <h3> 3. Contract Calls </h3>
-          <p>Javascript calls being made: </p>
-          <div className="logs">
-          {
-            this.state.logs.map((item, i) => <p key={i}>{item}</p>)
-          }
-          </div>
       </React.Fragment>
       );
     }

app/dapp.js

@@ -5,7 +5,6 @@ import { Tabs, Tab } from 'react-bootstrap';
 import EmbarkJS from 'Embark/EmbarkJS';
 import TopNavbar from './components/topnavbar';
 import TestTokenUI from './components/testtoken';
-import ERC20TokenUI from './components/erc20token';
 
 import './dapp.css';
 
@@ -40,9 +39,6 @@ class App extends React.Component {
           <Tab eventKey={1} title="TestToken">
               <TestTokenUI />
           </Tab>
-          <Tab eventKey={2} title="ERC20Token">
-              <ERC20TokenUI />
-          </Tab>
         </Tabs>
       </div>);
   }