From 62bf93868cb389d8d12c9aa2ec691a70ce534170 Mon Sep 17 00:00:00 2001
From: Ricardo Guilherme Schmidt <3esmit@gmail.com>
Date: Sun, 13 May 2018 01:31:01 -0300
Subject: [PATCH] simple token UI

---
 app/components/erc20token.js | 131 +++++++++++++++++++++++++++++++++++
 app/components/testtoken.js  |  89 ++++++++++++++++++++++++
 app/dapp.css                 |  53 ++++++++++++++
 app/dapp.js                  |  48 +++++++++++++
 app/index.html               |  12 ++++
 5 files changed, 333 insertions(+)
 create mode 100644 app/components/erc20token.js
 create mode 100644 app/components/testtoken.js
 create mode 100644 app/dapp.css
 create mode 100644 app/dapp.js
 create mode 100644 app/index.html

diff --git a/app/components/erc20token.js b/app/components/erc20token.js
new file mode 100644
index 0000000..6695adf
--- /dev/null
+++ b/app/components/erc20token.js
@@ -0,0 +1,131 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import ERC20Token from 'Embark/contracts/ERC20Token';
+import React from 'react';
+import { Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
+ 
+class ERC20TokenUI extends React.Component {
+
+    constructor(props) {
+      super(props);
+      this.state = {
+
+        balanceOf: 0,
+        transferTo: "",
+        transferAmount: 0,
+        logs: []
+      }      
+    }  
+    
+    contractAddress(e){
+      e.preventDefault();
+      var tokenAddress = e.target.value;
+      ERC20Token.options.address = tokenAddress;
+    }
+
+    update_transferTo(e){
+      this.setState({transferTo: e.target.value});
+    }
+
+    update_transferAmount(e){
+      this.setState({transferAmount: e.target.value});
+    }
+
+    transfer(e){
+      var to = this.state.transferTo;
+      var amount = this.state.transferAmount;
+      var tx = ERC20Token.methods.transfer(to, amount).send({from: web3.eth.defaultAccount});
+      this._addToLog(ERC20Token.options.address+".transfer(" + to + ", "+amount+")");
+    }
+
+    approve(e){
+      var to = this.state.transferTo;
+      var amount = this.state.transferAmount;
+      var tx = ERC20Token.methods.approve(to, amount).send({from: web3.eth.defaultAccount});
+      this._addToLog(ERC20Token.options.address+".approve(" + to + ", "+amount+")");
+    }
+
+    balanceOf(e){
+      e.preventDefault();
+      var who = e.target.value;
+      if (EmbarkJS.isNewWeb3()) {
+        ERC20Token.methods.balanceOf(who).call()
+          .then(_value => this.setState({balanceOf: _value}))
+        
+      } else {
+        ERC20Token.balanceOf(who)
+          .then(_value => this.x({balanceOf: _value}));
+      }
+      this._addToLog(ERC20Token.options.address+".balanceOf(" + who + ")");
+    }
+  
+
+    _addToLog(txt){
+      this.state.logs.push(txt);
+      this.setState({logs: this.state.logs});
+    }
+  
+    render(){
+      return (<React.Fragment>
+     
+          <h2> Set token contract address</h2>
+          <Form inline>
+            <FormGroup>
+              <FormControl
+                type="text"
+                onChange={(e) => this.contractAddress(e)} />
+            </FormGroup>
+          </Form>
+
+          
+          <h3> Read account token balance</h3>
+          <Form inline>
+            <FormGroup>
+              <label>
+                Of:
+                <FormControl
+                  type="text"
+                  defaultValue={this.state.accountB}
+                  onChange={(e) => this.balanceOf(e)} />
+              </label>
+              <label>
+                <HelpBlock><span className="balanceOf">{this.state.balanceOf}</span></HelpBlock>
+              </label>
+              
+            </FormGroup>
+          </Form>
+
+          <h3> Transfer/Approve token balance</h3>
+          <Form inline>
+            <FormGroup>
+              <label>
+                To:
+                <FormControl
+                  type="text"
+                  defaultValue={this.state.transferTo}
+                  onChange={(e) => this.update_transferTo(e) } />
+              </label>
+              <label>
+                Amount:
+                <FormControl
+                  type="text"
+                  defaultValue={this.state.transferAmount}
+                  onChange={(e) => this.update_transferAmount(e) } />
+              </label>
+              <Button bsStyle="primary" onClick={(e) => this.transfer(e)}>Transfer</Button>
+              <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>
+      );
+    }
+  }
+
+  export default ERC20TokenUI;
\ No newline at end of file
diff --git a/app/components/testtoken.js b/app/components/testtoken.js
new file mode 100644
index 0000000..24aa605
--- /dev/null
+++ b/app/components/testtoken.js
@@ -0,0 +1,89 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import TestToken from 'Embark/contracts/TestToken';
+import React from 'react';
+import { Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
+ 
+class TestTokenUI extends React.Component {
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        amountToMint: 100,
+        accountBalance: 0,
+        accountB: web3.eth.defaultAccount,
+        balanceOf: 0,
+        logs: []
+      }      
+    }
+  
+    handleMintAmountChange(e){
+      this.setState({amountToMint: e.target.value});
+    }
+    
+    mint(e){
+      e.preventDefault();
+  
+      var value = parseInt(this.state.amountToMint, 10);
+  
+      // If web3.js 1.0 is being used
+      if (EmbarkJS.isNewWeb3()) {
+        TestToken.methods.mint(value).send({from: web3.eth.defaultAccount});
+        this._addToLog("TestToken.methods.mint("+value+").send({from: " + web3.eth.defaultAccount + "})");
+      } else {
+        TestToken.mint(value);
+        this._addToLog("#blockchain", "TestToken.mint(" + value + ")");
+      }
+    }
+  
+    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>
+          <Form inline>
+            <FormGroup>
+              <FormControl
+                type="text"
+                defaultValue={this.state.amountToMint}
+                onChange={(e) => this.handleMintAmountChange(e)} />
+              <Button bsStyle="primary" onClick={(e) => this.mint(e)}>Mint</Button>
+            </FormGroup>
+          </Form>
+          
+          <h3> 2. Read your account token balance </h3>
+          <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>
+      );
+    }
+  }
+
+  export default TestTokenUI;
\ No newline at end of file
diff --git a/app/dapp.css b/app/dapp.css
new file mode 100644
index 0000000..49f1976
--- /dev/null
+++ b/app/dapp.css
@@ -0,0 +1,53 @@
+
+div {
+  margin: 15px;
+}
+
+.logs {
+  background-color: black;
+  font-size: 14px;
+  color: white;
+  font-weight: bold;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.tab-content {
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  padding: 10px;
+  margin: 0px;
+}
+
+.nav-tabs {
+  margin-bottom: 0;
+}
+
+.status-offline {
+  vertical-align: middle;
+  margin-left: 5px;
+  margin-top: 4px;
+  width: 12px;
+  height: 12px;
+  background: red;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+}
+
+.status-online {
+  vertical-align: middle;
+  margin-left: 5px;
+  margin-top: 4px;
+  width: 12px;
+  height: 12px;
+  background: mediumseagreen;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+}
+
+input.form-control {
+  margin: 5px;
+}
\ No newline at end of file
diff --git a/app/dapp.js b/app/dapp.js
new file mode 100644
index 0000000..6df03e3
--- /dev/null
+++ b/app/dapp.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Tabs, Tab } from 'react-bootstrap';
+
+import EmbarkJS from 'Embark/EmbarkJS';
+import TestTokenUI from './components/testtoken';
+import ERC20TokenUI from './components/erc20token';
+
+import './dapp.css';
+
+class App extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    
+  }
+
+  componentDidMount(){ 
+    __embarkContext.execWhenReady(() => {
+      
+    });
+  }
+
+
+  _renderStatus(title, available){
+    let className = available ? 'pull-right status-online' : 'pull-right status-offline';
+    return <React.Fragment>
+      {title} 
+      <span className={className}></span>
+    </React.Fragment>;
+  }
+
+  render(){
+    return (<div><h3>Status.im Contracts</h3>
+      <Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
+      <Tab eventKey={1} title="TestToken">
+          <TestTokenUI />
+      </Tab>
+      <Tab eventKey={2} title="ERC20Token">
+          <ERC20TokenUI />
+      </Tab>
+      </Tabs>
+    </div>);
+  }
+}
+
+ReactDOM.render(<App></App>, document.getElementById('app'));
diff --git a/app/index.html b/app/index.html
new file mode 100644
index 0000000..1fb8607
--- /dev/null
+++ b/app/index.html
@@ -0,0 +1,12 @@
+<html>
+  <head>
+    <title>Status.im - Contracts</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  </head>
+  <body class="container">
+      <div id="app">
+      </div>
+      <script src="js/dapp.js"></script>
+  </body>
+</html>