status-im/ens-usernames
2
0
Fork 0
mirror of https://github.com/status-im/ens-usernames.git synced 2025-02-03 06:13:53 +00:00
Code Issues Projects Releases Wiki Activity

add loading indicator to approval toggle

Browse Source
This commit is contained in:
Barry Gitarts 2018-06-15 11:23:54 -04:00
parent 5b17527d82
commit 1c415b9da4
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/standard/TokenPermission.js
View File

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

9
package.json
View File

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