1  import EmbarkJS from 'Embark/EmbarkJS';
  2  import ERC20Token from 'Embark/contracts/ERC20Token';
  3  import React from 'react';
  4  import { Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
  5   
  6  class ERC20TokenUI extends React.Component {
  7  
  8      constructor(props) {
  9        super(props);
 10        ERC20Token.options.address = props.address;
 11        this.state = {
 12          balanceOf: 0,
 13          transferTo: "",
 14          transferAmount: 0,
 15          accountBalance: 0,
 16          accountB: web3.eth.defaultAccount,
 17        }      
 18      }  
 19      
 20      update_transferTo(e){
 21        this.setState({transferTo: e.target.value});
 22      }
 23  
 24      update_transferAmount(e){
 25        this.setState({transferAmount: e.target.value});
 26      }
 27  
 28      transfer(e){
 29        var to = this.state.transferTo;
 30        var amount = this.state.transferAmount;
 31        this._addToLog(ERC20Token.options.address+".methods.transfer(" + to + ", "+amount+").send({from: " + web3.eth.defaultAccount + "})");
 32        var tx = ERC20Token.methods.transfer(to, amount);
 33        tx.estimateGas().then((r) => {
 34          tx.send({gas: r, from: web3.eth.defaultAccount});
 35        });
 36  
 37      }
 38  
 39      approve(e){
 40        var to = this.state.transferTo;
 41        var amount = this.state.transferAmount;
 42        this._addToLog(ERC20Token.options.address+".methods.approve(" + to + ", "+amount+").send({from: " + web3.eth.defaultAccount + "})");
 43        var tx = ERC20Token.methods.approve(to, amount).send({from: web3.eth.defaultAccount});
 44  
 45      }
 46  
 47      balanceOf(e){
 48        e.preventDefault();
 49        var who = e.target.value;
 50        this._addToLog(ERC20Token.options.address+".methods.balanceOf(" + who + ").call()");
 51        ERC20Token.methods.balanceOf(who).call()
 52          .then(_value => this.setState({balanceOf: _value}))
 53      }
 54    
 55      getDefaultAccountBalance(){
 56        this._addToLog(ERC20Token.options.address + ".methods.balanceOf(" + web3.eth.defaultAccount + ").call()");
 57        ERC20Token.methods.balanceOf(web3.eth.defaultAccount).call()
 58          .then(_value => this.setState({accountBalance: _value}))
 59      }
 60  
 61      _addToLog(txt){
 62        console.log(txt);
 63      }
 64    
 65    render() {
 66  
 67      return (
 68        <React.Fragment>
 69          <h3> Read account token balance</h3>
 70          <Form inline>
 71            <FormGroup>
 72              <label>
 73                Of:
 74                <FormControl
 75                  type="text"
 76                  defaultValue={this.state.accountB}
 77                  onChange={(e) => this.balanceOf(e)} />
 78              </label>
 79              <label>
 80                <HelpBlock><span className="balanceOf">{this.state.balanceOf}</span></HelpBlock>
 81              </label>
 82              
 83            </FormGroup>
 84          </Form>
 85  
 86          <h3> Transfer/Approve token balance</h3>
 87          <Form inline>
 88            <FormGroup>
 89              <label>
 90                To:
 91                <FormControl
 92                  type="text"
 93                  defaultValue={this.state.transferTo}
 94                  onChange={(e) => this.update_transferTo(e) } />
 95              </label>
 96              <label>
 97                Amount:
 98                <FormControl
 99                  type="text"
100                  defaultValue={this.state.transferAmount}
101                  onChange={(e) => this.update_transferAmount(e) } />
102              </label>
103              <Button bsStyle="primary" onClick={(e) => this.transfer(e)}>Transfer</Button>
104              <Button bsStyle="primary" onClick={(e) => this.approve(e)}>Approve</Button>
105            </FormGroup>
106          </Form>
107          
108        </React.Fragment>
109      );
110    }
111  }
112  
113  
114  export default ERC20TokenUI;