add toggle to allow registry token permissions

app/components/ens/registerSubDomain.js

@@ -40,7 +40,7 @@ const InnerForm = ({
       onBlur={handleBlur}
       value={values.domainName}
       button={
-        <Button onClick={() => {
+        <Button style={{ marginTop: '5px' }} onClick={() => {
             ENSSubdomainRegistry.methods.getPrice(hash(values.domainName))
                                 .call()
                                 .then(res => { setFieldValue('price', res); })

app/components/ensSubManagement.js

@@ -1,9 +1,11 @@
 import EmbarkJS from 'Embark/EmbarkJS';
 import ENSRegistry from 'Embark/contracts/ENSRegistry';
+import TestToken from 'Embark/contracts/TestToken';
 import React, { Fragment } from 'react';
 import { Form, FormGroup, FormControl, HelpBlock, Button, ControlLabel } from 'react-bootstrap';
 import AddDomain from './ens/addDomain';
 import RegisterSubDomain from './ens/registerSubDomain';
+import TokenPermissions from './standard/TokenPermission';
 import SetupENS from './ens/setupENS';
 
 const FieldGroup = ({ id, label, help, ...props }) => (
@@ -23,10 +25,14 @@ const ENSSubManagement = (props) => (
     <h3>Register Sub-Domain</h3>
     <RegisterSubDomain />
     <hr/>
+    <TokenPermissions
+      symbol='SNT'
+      spender={ENSRegistry._address}
+      methods={TestToken.methods} />
+    <hr/>
     <SetupENS ENSRegistry={ENSRegistry} />
   </Fragment>
 )
-
 setTimeout(() => ENSRegistry.getPastEvents(
   'allEvents',
   {},

app/components/standard/TokenPermission.js

@@ -0,0 +1,84 @@
+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'];
+
+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 = !!approved;
+      approve(
+        spender,
+        isApproved ? 0 : unlimitedAllowance
+      )
+        .send()
+        .then(approval => { this.setState({ ...this.state, approved: !approved }) })
+  }
+
+  render() {
+    const { symbol } = this.props;
+    const { balance, approved } = this.state;
+    return (
+      <div style={{ display: 'flex' }}>
+        <Toggle
+          checked={!!approved}
+          name={symbol}
+          onChange={this.toggleApproved} />
+        <label style={{ margin: '2px 0px 0px 10px', fontWeight: 400 }}>{`${balance} ${symbol.toUpperCase()}`}</label>
+      </div>
+    )
+  }
+}
+
+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,6 +19,7 @@
   "homepage": "https://github.com/status-im/contracts#readme",
   "dependencies": {
     "prop-types": "^15.6.1",
+    "bignumber.js": "^5.0.0",
     "eth-ens-namehash": "^2.0.8",
     "formik": "^0.11.11",
     "react": "^16.3.2",
@@ -39,9 +40,11 @@
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.8.2"
+    "react-toggle": "^4.0.2",
     "web3-utils": "^1.0.0-beta.34"
   },
   "devDependencies": {
-    "babel-plugin-transform-object-rest-spread": "^6.26.0"
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-stage-2": "^6.24.1"
   }
 }