update token permissions for mobile

This commit is contained in:
Barry Gitarts 2018-08-15 16:19:13 -04:00
parent e2fa2cc604
commit b267cdeb63
1 changed files with 40 additions and 21 deletions

View File

@ -5,6 +5,12 @@ import { BigNumber } from './utils'
import "react-toggle/style.css"; import "react-toggle/style.css";
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from '@material-ui/core/CircularProgress';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@material-ui/core/Tooltip';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import Switch from '@material-ui/core/Switch';
// 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.
@ -46,29 +52,40 @@ class TokenHandle extends PureComponent {
spender, spender,
amountToApprove amountToApprove
) )
.send() .send()
.then(approval => { .then(approval => {
const { events: { Approval: { returnValues: { _value } } } } = approval const { events: { Approval: { returnValues: { _value } } } } = approval
this.setState({ ...this.state, approved: _value, updating: false }) 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 }); this.setState({ updating: false });
}) })
} }
render() { render() {
const { symbol, account, isLoading } = this.props; const { symbol, account, isLoading, mobile } = this.props;
const { approved, updating } = this.state; const { approved, updating } = this.state;
return ( return (
<Fragment> <Fragment>
{!updating && !isLoading && !!account && <div style={{ display: 'flex', justifyContent: 'center', margin: '10px', paddingLeft: '60px' }}> {!updating && !isLoading && !!account && <div>
<Toggle <FormControl component="fieldset">
checked={!!Number(approved)} <FormLabel component="legend" style={{ textAlign: 'center' }}>Token Permissions</FormLabel>
name={symbol} <FormGroup style={{ alignItems: 'center' }}>
onChange={this.toggleApproved} /> <FormControlLabel
<label style={{ margin: '2px 0px 0px 10px', fontWeight: 400 }}>{`${Number(fromWei(account[BALANCE_KEYS[symbol]])).toLocaleString()} ${symbol}`}</label> control={
</div>} <Switch
{isLoading || updating && <CircularProgress />} checked={!!Number(approved)}
onChange={this.toggleApproved}
value={symbol}
/>
}
label={`${Number(fromWei(account[BALANCE_KEYS[symbol]])).toLocaleString()} ${symbol}`}
/>
</FormGroup>
<FormHelperText style={{ textAlign: 'center' }}>Registry needs permission to transfer SNT from your account prior to registration</FormHelperText>
</FormControl>
</div>}
{isLoading || updating && <CircularProgress style={{ marginLeft: mobile ? '45%' : null }} />}
</Fragment> </Fragment>
) )
} }
@ -76,10 +93,12 @@ class TokenHandle extends PureComponent {
const TokenPermissions = (props) => ( const TokenPermissions = (props) => (
<Fragment> <Fragment>
<Tooltip title="Turn on permissions for a token to enable its use with the ENS subdomain registry"> {!props.mobile && <Fragment>
<h3>Token Permissions</h3> <Tooltip title="Turn on permissions for a token to enable its use with the ENS subdomain registry">
</Tooltip> <h3>Token Permissions</h3>
<hr/> </Tooltip>
<hr/>
</Fragment>}
<TokenHandle {...props} /> <TokenHandle {...props} />
</Fragment> </Fragment>
) )