104 lines
3.7 KiB
JavaScript
104 lines
3.7 KiB
JavaScript
import React, { Fragment, PureComponent } from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import Toggle from 'react-toggle';
|
|
import { BigNumber } from './utils'
|
|
import "react-toggle/style.css";
|
|
import CircularProgress from '@material-ui/core/CircularProgress';
|
|
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';
|
|
import { actions, getSNTAllowance } from '../../reducers/accounts';
|
|
|
|
// We set an allowance to be "unlimited" by setting it to
|
|
// it's maximum possible value -- namely, 2^256 - 1.
|
|
const { fromWei } = web3.utils;
|
|
const unlimitedAllowance = new BigNumber(2).pow(256).sub(1);
|
|
const getDefaultAccount = () => web3.eth.defaultAccount;
|
|
const SUPPORTED_TOKENS = ['SNT', 'STT'];
|
|
const BALANCE_KEYS = { 'SNT': 'SNTBalance', 'STT': 'SNTBalance' };
|
|
|
|
class TokenHandle extends PureComponent {
|
|
constructor(props){
|
|
super(props);
|
|
this.state = {};
|
|
}
|
|
|
|
toggleApproved = () => {
|
|
const { approved } = this.state;
|
|
const { methods: { approve }, spender, receiveSntAllowance } = this.props;
|
|
const isApproved = !!Number(approved);
|
|
let amountToApprove = isApproved ? 0 : unlimitedAllowance;
|
|
console.log("approve(\""+spender+"\",\"" +amountToApprove +"\")")
|
|
this.setState({ updating: true });
|
|
approve(
|
|
spender,
|
|
amountToApprove
|
|
)
|
|
.send()
|
|
.then(approval => {
|
|
const { events: { Approval: { returnValues: { _value } } } } = approval
|
|
receiveSntAllowance(_value)
|
|
this.setState({ ...this.state, updating: false })
|
|
}).catch(err => {
|
|
console.log("Approve failed: " + err);
|
|
this.setState({ updating: false });
|
|
})
|
|
}
|
|
|
|
render() {
|
|
const { symbol, account, isLoading, mobile, SNTAllowance } = this.props;
|
|
const { updating } = this.state;
|
|
return (
|
|
<Fragment>
|
|
{!updating && !isLoading && !!account && <div>
|
|
<FormControl component="fieldset">
|
|
<FormLabel component="legend" style={{ textAlign: 'center' }}>Token Permissions</FormLabel>
|
|
<FormGroup style={{ alignItems: 'center' }}>
|
|
<FormControlLabel
|
|
control={
|
|
<Switch
|
|
checked={!!Number(SNTAllowance)}
|
|
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>
|
|
)
|
|
}
|
|
}
|
|
|
|
const TokenPermissions = (props) => (
|
|
<Fragment>
|
|
{!props.mobile && <Fragment>
|
|
<Tooltip title="Turn on permissions for a token to enable its use with the ENS subdomain registry">
|
|
<h3>Token Permissions</h3>
|
|
</Tooltip>
|
|
<hr/>
|
|
</Fragment>}
|
|
<TokenHandle {...props} />
|
|
</Fragment>
|
|
)
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
receiveSntAllowance(amount) {
|
|
dispatch(actions.receiveSntAllowance(amount));
|
|
},
|
|
});
|
|
|
|
const mapStateToProps = state => ({
|
|
SNTAllowance: getSNTAllowance(state),
|
|
});
|
|
export default connect(mapStateToProps, mapDispatchToProps)(TokenPermissions);
|