1 files changed, 50 insertions, 16 deletions
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index a38163770..581d2ba97 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 = {
@@ -46,13 +46,29 @@ const styles: Styles = {
         padding: 4,
         width: 125,
     },
-    ethAmountInput: { height: 32 },
-    innerDiv: { paddingLeft: 60, paddingTop: 0 },
-    wrapEtherConfirmationButtonContainer: { width: 128, top: 16 },
+    amountInput: { height: 34 },
+    amountInputLabel: {
+        paddingTop: 10,
+        paddingRight: 10,
+        paddingLeft: 5,
+        color: colors.grey,
+        fontSize: 14,
+    },
+    amountInputHint: {
+        bottom: 18,
+    },
+    innerDiv: { paddingLeft: 60, paddingTop: 0, paddingBottom: 10 },
+    wrapEtherConfirmationButtonContainer: { width: 128, top: 19 },
     wrapEtherConfirmationButtonLabel: {
-        fontSize: 10,
+        fontSize: 12,
         color: colors.white,
     },
+    errorMsg: {
+        fontSize: 12,
+        marginTop: 4,
+        color: colors.red,
+        minHeight: 20,
+    },
 };
 
 export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEtherItemState> {
@@ -60,11 +76,11 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
         super(props);
         this.state = {
             currentInputAmount: undefined,
-            currentInputHasErrors: false,
             isEthConversionHappening: false,
+            errorMsg: null,
         };
     }
-    public render() {
+    public render(): React.ReactNode {
         const etherBalanceInEth = ZeroEx.toUnitAmount(this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH);
         const isWrappingEth = this.props.direction === Side.Deposit;
         const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1';
@@ -84,7 +100,10 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
                                     shouldShowIncompleteErrs={false}
                                     shouldShowErrs={false}
                                     shouldShowUnderline={false}
-                                    style={styles.ethAmountInput}
+                                    style={styles.amountInput}
+                                    labelStyle={styles.amountInputLabel}
+                                    inputHintStyle={styles.amountInputHint}
+                                    onErrorMsgChange={this._onErrorMsgChange.bind(this)}
                                 />
                             ) : (
                                 <TokenAmountInput
@@ -99,12 +118,16 @@ 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}
+                                    style={styles.amountInput}
+                                    labelStyle={styles.amountInputLabel}
+                                    inputHintStyle={styles.amountInputHint}
+                                    onErrorMsgChange={this._onErrorMsgChange.bind(this)}
                                 />
                             )}
                         </div>
+                        {this._renderErrorMsg()}
                     </div>
                 }
                 secondaryTextLines={2}
@@ -116,20 +139,24 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
             />
         );
     }
-    private _onValueChange(isValid: boolean, amount?: BigNumber) {
+    private _onValueChange(isValid: boolean, amount?: BigNumber): void {
         this.setState({
             currentInputAmount: amount,
-            currentInputHasErrors: !isValid,
         });
     }
-    private _renderIsEthConversionHappeningSpinner() {
+    private _onErrorMsgChange(errorMsg: React.ReactNode): void {
+        this.setState({
+            errorMsg,
+        });
+    }
+    private _renderIsEthConversionHappeningSpinner(): React.ReactElement<{}> {
         return this.state.isEthConversionHappening ? (
             <div className="pl1" style={{ paddingTop: 10 }}>
                 <i className="zmdi zmdi-spinner zmdi-hc-spin" />
             </div>
         ) : null;
     }
-    private _renderWrapEtherConfirmationButton() {
+    private _renderWrapEtherConfirmationButton(): React.ReactElement<{}> {
         const isWrappingEth = this.props.direction === Side.Deposit;
         const labelText = isWrappingEth ? 'wrap' : 'unwrap';
         return (
@@ -138,13 +165,20 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
                     backgroundColor={colors.wrapEtherConfirmationButton}
                     label={labelText}
                     labelStyle={styles.wrapEtherConfirmationButtonLabel}
-                    onClick={this._wrapEtherConfirmationAction.bind(this)}
+                    onClick={this._wrapEtherConfirmationActionAsync.bind(this)}
                     disabled={this.state.isEthConversionHappening}
                 />
             </div>
         );
     }
-    private async _wrapEtherConfirmationAction() {
+    private _renderErrorMsg(): React.ReactNode {
+        return (
+            <div style={styles.errorMsg}>
+                {this.state.errorMsg}
+            </div>
+        );
+    }
+    private async _wrapEtherConfirmationActionAsync(): Promise<void> {
         this.setState({
             isEthConversionHappening: true,
         });