aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/wallet
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-05-17 08:06:57 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-05-18 04:04:39 +0800
commitea0067d99976a572dcd4a4d988f4d33ca083f230 (patch)
treece750f48028c76a152f260c84c1dbeb9333a3171 /packages/website/ts/components/wallet
parentec49ca648027cd82c4488f388e4917a879a71364 (diff)
downloaddexon-0x-contracts-ea0067d99976a572dcd4a4d988f4d33ca083f230.tar.gz
dexon-0x-contracts-ea0067d99976a572dcd4a4d988f4d33ca083f230.tar.zst
dexon-0x-contracts-ea0067d99976a572dcd4a4d988f4d33ca083f230.zip
Show error messages in the wrapped ether item
Diffstat (limited to 'packages/website/ts/components/wallet')
-rw-r--r--packages/website/ts/components/wallet/wrap_ether_item.tsx34
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,