adjust handling of approval toggle, use address of sub domain

app/components/ens/registerSubDomain.js

@@ -54,7 +54,7 @@ const InnerForm = ({
       name="price"
       label="Domain Price"
       disabled
-      value={values.price ? `${values.price} SNT` : null} />
+      value={values.price ? `${Number(values.price).toLocaleString()} SNT` : ''} />
     <FieldGroup
       id="address"
       name="address"

app/components/ensSubManagement.js

@@ -1,5 +1,6 @@
 import EmbarkJS from 'Embark/EmbarkJS';
 import ENSRegistry from 'Embark/contracts/ENSRegistry';
+import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
 import TestToken from 'Embark/contracts/TestToken';
 import React, { Fragment } from 'react';
 import { Form, FormGroup, FormControl, HelpBlock, Button, ControlLabel } from 'react-bootstrap';
@@ -27,7 +28,7 @@ const ENSSubManagement = (props) => (
     <hr/>
     <TokenPermissions
       symbol='SNT'
-      spender={ENSRegistry._address}
+      spender={ENSSubdomainRegistry._address}
       methods={TestToken.methods} />
     <hr/>
     <SetupENS ENSRegistry={ENSRegistry} />

app/components/standard/TokenPermission.js

@@ -8,7 +8,6 @@ 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'];
 
@@ -34,20 +33,25 @@ class TokenHandle extends PureComponent {
   getAllowance = () => {
     const { methods, spender } = this.props;
     methods.allowance(getDefaultAccount(), spender)
-        .call()
-        .then(approved => { this.setState({ ...this.state, approved }) })
+           .call()
+           .then(approved => {
+             this.setState({ ...this.state, approved })
+           })
   }
 
   toggleApproved = () => {
     const { approved } = this.state;
     const { methods: { approve }, spender } = this.props;
-    const isApproved = !!approved;
+    const isApproved = !!Number(approved);
       approve(
         spender,
         isApproved ? 0 : unlimitedAllowance
       )
         .send()
-        .then(approval => { this.setState({ ...this.state, approved: !approved }) })
+        .then(approval => {
+          const { events: { Approval: { returnValues: { _value } } } } = approval
+          this.setState({ ...this.state, approved: _value })
+        })
   }
 
   render() {
@@ -56,10 +60,10 @@ class TokenHandle extends PureComponent {
     return (
       <div style={{ display: 'flex' }}>
         <Toggle
-          checked={!!approved}
+          checked={!!Number(approved)}
           name={symbol}
           onChange={this.toggleApproved} />
-        <label style={{ margin: '2px 0px 0px 10px', fontWeight: 400 }}>{`${balance} ${symbol.toUpperCase()}`}</label>
+        <label style={{ margin: '2px 0px 0px 10px', fontWeight: 400 }}>{`${Number(balance).toLocaleString()} ${symbol.toUpperCase()}`}</label>
       </div>
     )
   }