add token permissions to proposal manager

app/components/proposal-manager/proposal-manager.js

@@ -7,15 +7,9 @@ import { Form, FormGroup, FormControl, HelpBlock, Button, Alert } from 'react-bo
 import web3 from "Embark/web3";
 import { withFormik } from 'formik';
 import FieldGroup from '../standard/FieldGroup';
+import TokenPermissions from '../standard/TokenPermission'
 
 const { setSubmitPrice } = ProposalCuration.methods;
-const setPrice = (address = web3.eth.defaultAccount, allowed = true, stakeValue = 1) => {
-  setSubmitPrice(address, allowed, stakeValue)
-    .send()
-    .then(res => { console.log(res) })
-    .catch(err => { console.log(err) })
-}
-
 class InnerForm extends PureComponent {
 
   constructor(props) {
@@ -51,44 +45,16 @@ class InnerForm extends PureComponent {
     });
   }
 
-  async handleClick(){
+  setPrice = (address = web3.eth.defaultAccount, allowed = true, stakeValue = 1) => {
-    let description = {
+    setSubmitPrice(address, allowed, stakeValue)
-      "url": this.state.url,
+      .send()
-      "title": this.state.title,
+      .then(res => {
-      "description": this.state.description
+        this.setState({ ...state, canSubmit: true });
-    };
+        console.log(res);
-
+      })
-    EmbarkJS.Storage.saveText(JSON.stringify(description))
+      .catch(err => { console.log(err) })
-            .then(async (hash) => {
-              let hexHash = web3.utils.toHex(hash);
-
-              let receipt = await SNT.methods.approve(
-                ProposalCuration.options.address,
-                this.state.submitPrice)
-                                     .send({from: web3.eth.defaultAccount, gasLimit: 1000000});
-
-              console.log(receipt);
-
-              receipt = await ProposalCuration.methods.submitProposal(
-                "0x00",
-                "0x0000000000000000000000000000000000000000",
-                0,
-                "0x00",
-                hexHash
-              )
-                                              .send({from: web3.eth.defaultAccount, gasLimit: 1000000});
-
-              console.log(receipt);
-            })
-            .catch((err) => {
-              if(err){
-                // TODO show error
-                console.log("Storage saveText Error => " + err.message);
-              }
-            });
   }
 
-
   render() {
     const { values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue } = this.props;
     const { canSubmit } = this.state;
@@ -96,12 +62,12 @@ class InnerForm extends PureComponent {
       <Fragment>
         {!canSubmit &&
          <Alert bsStyle="warning">
-           Account not allowed to submit proposals <Button onClick={(e) => setPrice()}>Click to enable (Admin only)</Button>
+           Account not allowed to submit proposals <Button onClick={(e) => this.setPrice()}>Click to enable (Admin only)</Button>
          </Alert>
         }
+        <TokenPermissions methods={SNT.methods} spender={ProposalCuration._address} symbol='SNT' />
+        <hr/>
         <h2>Add proposal</h2>
-        <p>Execute this on the console if proposal submit is not allowed</p>
-        <code>await ProposalCuration.methods.setSubmitPrice(web3.eth.defaultAccount, true, 1).send();</code>
         <h3>Price: {this.state.submitPrice}</h3>
         <Form onSubmit={handleSubmit}>
           <FieldGroup

app/components/standard/TokenPermission.js

@@ -0,0 +1,107 @@
+import React, { Fragment, PureComponent } from 'react';
+import { Tooltip, OverlayTrigger } from 'react-bootstrap';
+import web3 from "Embark/web3"
+import Toggle from 'react-toggle';
+import { BigNumber } from './utils'
+import "react-toggle/style.css";
+
+// We set an allowance to be "unlimited" by setting it to
+// it's maximum possible value -- namely, 2^256 - 1.
+const unlimitedAllowance = new BigNumber(2).pow(256).sub(1);
+const getDefaultAccount = () => web3.eth.defaultAccount;
+const SUPPORTED_TOKENS = ['SNT'];
+const commaize = (str) => Number(str).toLocaleString();
+
+const balanceTooltip = (balance, approved) => (
+  <Tooltip id="balanceTooltip">
+    {`Your balance of ${commaize(balance)} is ${approved ? 'approved' : 'not approved'} for spending by the contract`}
+  </Tooltip>
+);
+
+class TokenHandle extends PureComponent {
+  constructor(props){
+    super(props);
+    this.state = { balance: 0, approved: 0 };
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.getBalance();
+      this.getAllowance();
+    }, 1000)
+  }
+
+  getBalance = () => {
+    this.props.methods.balanceOf(getDefaultAccount())
+        .call()
+        .then(balance => { this.setState({ ...this.state, balance }) });
+  }
+
+  getAllowance = () => {
+    const { methods, spender } = this.props;
+    methods.allowance(getDefaultAccount(), spender)
+           .call()
+           .then(approved => {
+             this.setState({ ...this.state, approved })
+           })
+  }
+
+  toggleApproved = () => {
+    const { approved } = this.state;
+    const { methods: { approve }, spender } = this.props;
+    const isApproved = !!Number(approved);
+    let amountToApprove = isApproved ? 0 : unlimitedAllowance;
+    console.log("approve(\""+spender+"\",\"" +amountToApprove +"\")")
+    approve(
+      spender,
+      amountToApprove
+    )
+           .send()
+           .then(approval => {
+             const { events: { Approval: { returnValues: { _value, _amount } } } } = approval
+             console.log('value',_value, approval)
+             this.setState({ ...this.state, approved: _value || _amount })
+           }).catch(err => {
+             console.log("Approve failed: " + err);
+           })
+  }
+
+  render() {
+    const { symbol } = this.props;
+    const { balance, approved } = this.state;
+    const balanceTooltip = (
+      <Tooltip id="balanceTooltip">
+        {`Your balance of ${commaize(balance)} is ${approved ? 'approved' : 'not approved'} for spending by the contract`}
+      </Tooltip>
+    );
+    return (
+      <OverlayTrigger placement="top" overlay={balanceTooltip}>
+        <div style={{ display: 'flex' }}>
+          <Toggle
+            checked={!!Number(approved)}
+            name={symbol}
+            onChange={this.toggleApproved} />
+          <label style={{ margin: '2px 0px 0px 10px', fontWeight: 400 }}>{`${Number(balance).toLocaleString()} ${symbol.toUpperCase()}`}</label>
+        </div>
+      </OverlayTrigger>
+    )
+  }
+}
+
+const tooltip = (
+  <Tooltip id="tooltip">
+    Turn on permissions for a token to enable its use with the ENS subdomain registry.
+  </Tooltip>
+);
+
+const TokenPermissions = (props) => (
+  <Fragment>
+    <OverlayTrigger placement="right" overlay={tooltip}>
+      <h3>Token Permissions</h3>
+    </OverlayTrigger>
+    <hr/>
+    <TokenHandle {...props} />
+  </Fragment>
+)
+
+export default TokenPermissions;

app/components/standard/utils.js

@@ -0,0 +1,9 @@
+import BigNumber from 'bignumber.js';
+
+// By default BigNumber's `toString` method converts to exponential notation if the value has
+// more then 20 digits. We want to avoid this behavior, so we set EXPONENTIAL_AT to a high number
+BigNumber.config({
+  EXPONENTIAL_AT: 1000,
+});
+
+export { BigNumber };

package.json

@@ -19,11 +19,13 @@
   "dependencies": {
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-stage-2": "^6.24.1",
+    "bignumber.js": "^5.0.0",
     "formik": "^0.11.11",
     "jquery": "^3.3.1",
     "react": "^16.3.2",
     "react-blockies": "^1.3.0",
     "react-bootstrap": "^0.32.1",
-    "react-dom": "^16.3.2"
+    "react-dom": "^16.3.2",
+    "react-toggle": "^4.0.2"
   }
 }