add loading indicator to approval toggle

app/components/standard/TokenPermission.js

@@ -4,6 +4,7 @@ import web3 from "Embark/web3"
 import Toggle from 'react-toggle';
 import { BigNumber } from './utils'
 import "react-toggle/style.css";
+import CircularProgress from '@material-ui/core/CircularProgress';
 
 // We set an allowance to be "unlimited" by setting it to
 // it's maximum possible value -- namely, 2^256 - 1.
@@ -39,6 +40,7 @@ class TokenHandle extends PureComponent {
     const isApproved = !!Number(approved);
     let amountToApprove = isApproved ? 0 : unlimitedAllowance;
     console.log("approve(\""+spender+"\",\"" +amountToApprove +"\")")
+    this.setState({ updating: true });
     approve(
       spender,
       amountToApprove
@@ -46,24 +48,26 @@ class TokenHandle extends PureComponent {
            .send()
            .then(approval => {
              const { events: { Approval: { returnValues: { _value } } } } = approval
-             this.setState({ ...this.state, approved: _value })
+             this.setState({ ...this.state, approved: _value, updating: false })
            }).catch(err => {
              console.log("Approve failed: " + err);
+             this.setState({ updating: false });
            })
   }
 
   render() {
     const { symbol, account, isLoading } = this.props;
-    const { approved } = this.state;
+    const { approved, updating } = this.state;
     return (
       <Fragment>
-      {!isLoading && !!account && <div style={{ display: 'flex', justifyContent: 'center', margin: '10px', paddingLeft: '60px' }}>
+      {!updating && !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(account[BALANCE_KEYS[symbol]]).toLocaleString()} ${symbol.toUpperCase()}`}</label>
       </div>}
+      {isLoading || updating && <CircularProgress />}
       </Fragment>
     )
   }

package.json

@@ -18,22 +18,25 @@
   },
   "homepage": "https://github.com/status-im/contracts#readme",
   "dependencies": {
-    "prop-types": "^15.6.1",
+    "@material-ui/core": "^1.2.1",
     "bignumber.js": "^5.0.0",
     "eth-ens-namehash": "^2.0.8",
     "formik": "^0.11.11",
-    "styled-components": "^3.3.2",
+    "install": "^0.11.0",
+    "npm": "^6.1.0",
+    "prop-types": "^15.6.1",
     "react": "^16.3.2",
     "react-blockies": "^1.3.0",
     "react-bootstrap": "^0.32.1",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.3.2",
     "react-redux": "^5.0.7",
+    "react-toggle": "^4.0.2",
     "redux": "^4.0.0",
     "redux-action-creator": "^2.3.0",
     "redux-thunk": "^2.3.0",
-    "react-toggle": "^4.0.2",
     "reselect": "^3.0.1",
+    "styled-components": "^3.3.2",
     "web3-utils": "^1.0.0-beta.34"
   },
   "devDependencies": {