add better global handling of SNT user balance

app/actions/accounts.js

@@ -8,8 +8,8 @@ export const fetchAndDispatchAccountsWithBalances = (web3, dispatch) => {
       const defaultAccount = web3.eth.defaultAccount || addresses[0]
       const accounts = addresses.map(async address => {
         const balance = await web3.eth.getBalance(address, 'latest')
-        const ERC20TokenBalance = await ERC20Token.methods.balanceOf(address).call()
-        return { address, balance, ERC20TokenBalance }
+        const SNTBalance = await ERC20Token.methods.balanceOf(address).call()
+        return { address, balance, SNTBalance }
       })
       Promise.all(accounts).then(accounts => {
         dispatch(receiveAccounts(defaultAccount, accounts))

app/components/erc20token.js

@@ -76,7 +76,7 @@ class ERC20TokenUI extends React.Component {
         <h3> Read your account token balance </h3>
         <Form inline>
           <FormGroup>
-            {!isLoading && <HelpBlock>Your test token balance is <span className="accountBalance">{account.ERC20TokenBalance}</span></HelpBlock>}
+            {!isLoading && <HelpBlock>Your test token balance is <span className="accountBalance">{account.SNTBalance}</span></HelpBlock>}
           </FormGroup>
         </Form>
         

app/components/standard/TokenPermission.js

@@ -10,24 +10,18 @@ import "react-toggle/style.css";
 const unlimitedAllowance = new BigNumber(2).pow(256).sub(1);
 const getDefaultAccount = () => web3.eth.defaultAccount;
 const SUPPORTED_TOKENS = ['SNT'];
+const BALANCE_KEYS = { 'SNT': 'SNTBalance' };
 
 class TokenHandle extends PureComponent {
   constructor(props){
     super(props);
-    this.state = { balance: 0, approved: 0 };
+    this.state = { approved: 0 };
   }
 
   componentDidMount() {
-    setTimeout(() => {
-      this.getBalance();
+    __embarkContext.execWhenReady(() => {
       this.getAllowance();
-    }, 1000)
-  }
-
-  getBalance = () => {
-    this.props.methods.balanceOf(getDefaultAccount())
-           .call()
-           .then(balance => { this.setState({ ...this.state, balance }) });
+    });
   }
 
   getAllowance = () => {
@@ -45,30 +39,33 @@ class TokenHandle extends PureComponent {
     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 } } } } = approval
-          this.setState({ ...this.state, approved: _value })
-        }).catch(err => {
-          console.log("Approve failed: " + err);
-        })
+    approve(
+      spender,
+      amountToApprove
+    )
+           .send()
+           .then(approval => {
+             const { events: { Approval: { returnValues: { _value } } } } = approval
+             this.setState({ ...this.state, approved: _value })
+           }).catch(err => {
+             console.log("Approve failed: " + err);
+           })
   }
 
   render() {
-    const { symbol } = this.props;
-    const { balance, approved } = this.state;
+    const { symbol, account, isLoading } = this.props;
+    const { approved } = this.state;
+    console.log('account:', this.props)
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', margin: '10px', paddingLeft: '60px' }}>
+      <Fragment>
+      {!isLoading && !!account && <div style={{ display: 'flex', justifyContent: 'center', margin: '10px', paddingLeft: '60px' }}>
         <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>
+        <label style={{ margin: '2px 0px 0px 10px', fontWeight: 400 }}>{`${Number(account[BALANCE_KEYS[symbol]]).toLocaleString()} ${symbol.toUpperCase()}`}</label>
+      </div>}
+      </Fragment>
     )
   }
 }

app/components/standard/TokenPermissionConnect.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import TokenPermissions from './TokenPermission';
+import { getCurrentAccount, accountsIsLoading } from '../../reducers/accounts';
+
+const mapStateToProps = state => ({
+  account: getCurrentAccount(state),
+  isLoading: accountsIsLoading(state),
+});
+export default connect(mapStateToProps)(TokenPermissions);

app/components/testtoken.js

@@ -57,7 +57,7 @@ class TestTokenUI extends React.Component {
 
 const mapDispatchToProps = dispatch => ({
   addToBalance(amount) {
-    dispatch(accountActions.addToErc20TokenBalance(amount));
+    dispatch(accountActions.addToSntTokenBalance(amount));
   },
 });
 

app/dapp.js

@@ -11,7 +11,7 @@ import ENSSubManagement from './components/ensSubManagement';
 import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
 import NameLookup from './components/ens/nameLookup';
 import AdminMode from './components/AdminMode';
-import TokenPermissions from './components/standard/TokenPermission';
+import TokenPermissions from './components/standard/TokenPermissionConnect';
 
 import './dapp.css';
 

app/reducers/accounts.js

@@ -4,12 +4,12 @@ import { createSelector } from 'reselect'
 export const types = createTypes([
   'RECEIVE_ACCOUNTS',
   'UPDATE_DEFAULT_ACCOUNT',
-  'ADD_TO_ERC20_TOKEN_BALANCE'
+  'ADD_TO_SNT_TOKEN_BALANCE'
 ], 'ACCOUNTS')
 export const actions = {
   receiveAccounts: actionCreator(types.RECEIVE_ACCOUNTS, 'defaultAccount','accounts'),
   updateDefaultAccount: actionCreator(types.UPDATE_DEFAULT_ACCOUNT, 'defaultAccount'),
-  addToErc20TokenBalance: actionCreator(types.ADD_TO_ERC20_TOKEN_BALANCE, 'amount')
+  addToSntTokenBalance: actionCreator(types.ADD_TO_SNT_TOKEN_BALANCE, 'amount')
 }
 
 export default function(state = { loading: true, accounts: [] }, action) {
@@ -27,9 +27,9 @@ export default function(state = { loading: true, accounts: [] }, action) {
     const { defaultAccount } = action.payload
     return { ...state, defaultAccount }
   }
-  case types.ADD_TO_ERC20_TOKEN_BALANCE: {
+  case types.ADD_TO_SNT_TOKEN_BALANCE: {
     const currentAccount = { ...getCurrentAccount({accounts: state}) }
-    currentAccount.ERC20TokenBalance = Number(currentAccount.ERC20TokenBalance) + Number(action.payload.amount)
+    currentAccount.SNTTokenBalance = Number(currentAccount.SNTTokenBalance) + Number(action.payload.amount)
     const accounts = [ ...state.accounts ]
     const idx = accounts.findIndex(a => a.address === currentAccount.address)
     accounts[idx] = currentAccount