diff options
author | Fabio Berger <me@fabioberger.com> | 2017-12-15 00:41:33 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2017-12-15 00:41:33 +0800 |
commit | 7ce1021798ac2d459f80d1827a3259e781b4b201 (patch) | |
tree | a249f5d4de842d1aedeb50b742a396e74ed3e88d /packages/website/ts/components/eth_weth_conversion_button.tsx | |
parent | 105bcc6664f0d4ab642486977f1edaf8d84b020e (diff) | |
download | dexon-0x-contracts-7ce1021798ac2d459f80d1827a3259e781b4b201.tar.gz dexon-0x-contracts-7ce1021798ac2d459f80d1827a3259e781b4b201.tar.zst dexon-0x-contracts-7ce1021798ac2d459f80d1827a3259e781b4b201.zip |
Refactor the WETH conversion dialog/button to be either wrap or unwrap specific and not both
Diffstat (limited to 'packages/website/ts/components/eth_weth_conversion_button.tsx')
-rw-r--r-- | packages/website/ts/components/eth_weth_conversion_button.tsx | 38 |
1 files changed, 31 insertions, 7 deletions
diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index a83b1543f..bf686d44b 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -12,12 +12,15 @@ import {errorReporter} from 'ts/utils/error_reporter'; import {utils} from 'ts/utils/utils'; interface EthWethConversionButtonProps { + direction: Side; ethToken: Token; ethTokenState: TokenState; dispatcher: Dispatcher; blockchain: Blockchain; userEtherBalance: BigNumber; - onError: () => void; + isOutdatedWrappedEther: boolean; + onConversionSuccessful?: () => void; + isDisabled?: boolean; } interface EthWethConversionButtonState { @@ -27,6 +30,9 @@ interface EthWethConversionButtonState { export class EthWethConversionButton extends React.Component<EthWethConversionButtonProps, EthWethConversionButtonState> { + public static defaultProps: Partial<EthWethConversionButtonProps> = { + isDisabled: false, + }; public constructor(props: EthWethConversionButtonProps) { super(props); this.state = { @@ -36,16 +42,26 @@ export class EthWethConversionButton extends } public render() { const labelStyle = this.state.isEthConversionHappening ? {fontSize: 10} : {}; + let callToActionLabel; + let inProgressLabel; + if (this.props.direction === Side.deposit) { + callToActionLabel = 'Wrap'; + inProgressLabel = 'Wrapping...'; + } else { + callToActionLabel = 'Unwrap'; + inProgressLabel = 'Unwrapping...'; + } return ( <div> <RaisedButton style={{width: '100%'}} labelStyle={labelStyle} - disabled={this.state.isEthConversionHappening} - label={this.state.isEthConversionHappening ? 'Converting...' : 'Convert'} + disabled={this.props.isDisabled || this.state.isEthConversionHappening} + label={this.state.isEthConversionHappening ? inProgressLabel : callToActionLabel} onClick={this.toggleConversionDialog.bind(this)} /> <EthWethConversionDialog + direction={this.props.direction} isOpen={this.state.isEthConversionDialogVisible} onComplete={this.onConversionAmountSelectedAsync.bind(this)} onCancelled={this.toggleConversionDialog.bind(this)} @@ -73,15 +89,20 @@ export class EthWethConversionButton extends if (direction === Side.deposit) { await this.props.blockchain.convertEthToWrappedEthTokensAsync(value); const ethAmount = ZeroEx.toUnitAmount(value, constants.ETH_DECIMAL_PLACES); - this.props.dispatcher.showFlashMessage(`Successfully converted ${ethAmount.toString()} ETH to WETH`); + this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`); balance = balance.plus(value); } else { await this.props.blockchain.convertWrappedEthTokensToEthAsync(value); const tokenAmount = ZeroEx.toUnitAmount(value, token.decimals); - this.props.dispatcher.showFlashMessage(`Successfully converted ${tokenAmount.toString()} WETH to ETH`); + this.props.dispatcher.showFlashMessage(`Successfully unwrapped ${tokenAmount.toString()} WETH to ETH`); balance = balance.minus(value); } - this.props.dispatcher.replaceTokenBalanceByAddress(token.address, balance); + if (!this.props.isOutdatedWrappedEther) { + this.props.dispatcher.replaceTokenBalanceByAddress(token.address, balance); + } + if (!_.isUndefined(this.props.onConversionSuccessful)) { + this.props.onConversionSuccessful(); + } } catch (err) { const errMsg = '' + err; if (_.includes(errMsg, BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES)) { @@ -90,7 +111,10 @@ export class EthWethConversionButton extends utils.consoleLog(`Unexpected error encountered: ${err}`); utils.consoleLog(err.stack); await errorReporter.reportAsync(err); - this.props.onError(); + const errorMsg = direction === Side.deposit ? + 'Failed to wrap your ETH. Please try again.' : + 'Failed to unwrap your WETH. Please try again.'; + this.props.dispatcher.showFlashMessage(errorMsg); } } this.setState({ |