diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-05-17 08:06:57 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-05-18 04:04:39 +0800 |
commit | ea0067d99976a572dcd4a4d988f4d33ca083f230 (patch) | |
tree | ce750f48028c76a152f260c84c1dbeb9333a3171 /packages/website/ts/components/wallet/wrap_ether_item.tsx | |
parent | ec49ca648027cd82c4488f388e4917a879a71364 (diff) | |
download | dexon-sol-tools-ea0067d99976a572dcd4a4d988f4d33ca083f230.tar dexon-sol-tools-ea0067d99976a572dcd4a4d988f4d33ca083f230.tar.gz dexon-sol-tools-ea0067d99976a572dcd4a4d988f4d33ca083f230.tar.bz2 dexon-sol-tools-ea0067d99976a572dcd4a4d988f4d33ca083f230.tar.lz dexon-sol-tools-ea0067d99976a572dcd4a4d988f4d33ca083f230.tar.xz dexon-sol-tools-ea0067d99976a572dcd4a4d988f4d33ca083f230.tar.zst dexon-sol-tools-ea0067d99976a572dcd4a4d988f4d33ca083f230.zip |
Show error messages in the wrapped ether item
Diffstat (limited to 'packages/website/ts/components/wallet/wrap_ether_item.tsx')
-rw-r--r-- | packages/website/ts/components/wallet/wrap_ether_item.tsx | 34 |
1 files changed, 27 insertions, 7 deletions
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 2ed924bcd..c8ced8d08 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -31,8 +31,8 @@ export interface WrapEtherItemProps { interface WrapEtherItemState { currentInputAmount?: BigNumber; - currentInputHasErrors: boolean; isEthConversionHappening: boolean; + errorMsg: React.ReactNode; } const styles: Styles = { @@ -47,12 +47,18 @@ const styles: Styles = { width: 125, }, ethAmountInput: { height: 32 }, - innerDiv: { paddingLeft: 60, paddingTop: 0 }, - wrapEtherConfirmationButtonContainer: { width: 128, top: 16 }, + innerDiv: { paddingLeft: 60, paddingTop: 0, paddingBottom: 10 }, + wrapEtherConfirmationButtonContainer: { width: 128, top: 18 }, wrapEtherConfirmationButtonLabel: { - fontSize: 10, + fontSize: 12, color: colors.white, }, + errorMsg: { + fontSize: 12, + marginTop: 4, + color: 'red', + minHeight: 20, + }, }; export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEtherItemState> { @@ -60,8 +66,8 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther super(props); this.state = { currentInputAmount: undefined, - currentInputHasErrors: false, isEthConversionHappening: false, + errorMsg: null, }; } public render(): React.ReactNode { @@ -85,6 +91,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther shouldShowErrs={false} shouldShowUnderline={false} style={styles.ethAmountInput} + onErrorMsgChange={this._onErrorMsgChange.bind(this)} /> ) : ( <TokenAmountInput @@ -99,12 +106,14 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther onChange={this._onValueChange.bind(this)} amount={this.state.currentInputAmount} hintText="0.00" - shouldShowErrs={false} // TODO: error handling + shouldShowErrs={false} shouldShowUnderline={false} style={styles.ethAmountInput} + onErrorMsgChange={this._onErrorMsgChange.bind(this)} /> )} </div> + {this._renderErrorMsg()} </div> } secondaryTextLines={2} @@ -119,7 +128,11 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther private _onValueChange(isValid: boolean, amount?: BigNumber): void { this.setState({ currentInputAmount: amount, - currentInputHasErrors: !isValid, + }); + } + private _onErrorMsgChange(errorMsg: React.ReactNode): void { + this.setState({ + errorMsg, }); } private _renderIsEthConversionHappeningSpinner(): React.ReactElement<{}> { @@ -144,6 +157,13 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther </div> ); } + private _renderErrorMsg(): React.ReactNode { + return ( + <div style={styles.errorMsg}> + {this.state.errorMsg} + </div> + ); + } private async _wrapEtherConfirmationActionAsync(): Promise<void> { this.setState({ isEthConversionHappening: true, |