Show error messages in the wrapped ether item

3 files changed, 21 insertions, 15 deletions

diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 68b77cfc3..72a246280 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -14,6 +14,7 @@ interface BalanceBoundedInputProps {
     amount?: BigNumber;
     hintText?: string;
     onChange: ValidatedBigNumberCallback;
+    onErrorMsgChange?: (errorMsg: React.ReactNode) => void;
     shouldShowIncompleteErrs?: boolean;
     shouldCheckBalance: boolean;
     validate?: (amount: BigNumber) => InputErrMsg;
@@ -36,6 +37,7 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
         isDisabled: false,
         shouldShowErrs: true,
         hintText: 'amount',
+        onErrorMsgChange: utils.noop,
         shouldShowUnderline: true,
     };
     constructor(props: BalanceBoundedInputProps) {
@@ -63,17 +65,11 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
             }
             if (shouldResetState) {
                 const amountString = nextProps.amount.toString();
-                this.setState({
-                    errMsg: this._validate(amountString, nextProps.balance),
-                    amountString,
-                });
+                this._setAmountState(amountString, nextProps.balance);
             }
         } else if (isCurrentAmountNumeric) {
             const amountString = '';
-            this.setState({
-                errMsg: this._validate(amountString, nextProps.balance),
-                amountString,
-            });
+            this._setAmountState(amountString, nextProps.balance);
         }
     }
     public render(): React.ReactNode {
@@ -105,14 +101,11 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
         );
     }
     private _onValueChange(e: any, amountString: string): void {
-        const errMsg = this._validate(amountString, this.props.balance);
-        this.setState(
-            {
-                amountString,
-                errMsg,
-            },
+        this._setAmountState(
+            amountString,
+            this.props.balance,
             () => {
-                const isValid = _.isUndefined(errMsg);
+                const isValid = _.isUndefined(this._validate(amountString, this.props.balance));
                 if (utils.isNumeric(amountString) && !_.includes(amountString, '-')) {
                     this.props.onChange(isValid, new BigNumber(amountString));
                 } else {
@@ -161,4 +154,13 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
             );
         }
     }
+
+    private _setAmountState(amount: string, balance: BigNumber, callback: () => void = utils.noop): void {
+        const errorMsg = this._validate(amount, balance);
+        this.props.onErrorMsgChange(errorMsg);
+        this.setState({
+            amountString: amount,
+            errMsg: this._validate(amount, balance),
+        }, callback);
+    }
 }
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index c3822a80b..862ba25f8 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -12,6 +12,7 @@ interface EthAmountInputProps {
     amount?: BigNumber;
     hintText?: string;
     onChange: ValidatedBigNumberCallback;
+    onErrorMsgChange?: (errorMsg: React.ReactNode) => void;
     shouldShowIncompleteErrs: boolean;
     onVisitBalancesPageClick?: () => void;
     shouldCheckBalance: boolean;
@@ -40,6 +41,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
                     balance={this.props.balance}
                     amount={amount}
                     onChange={this._onChange.bind(this)}
+                    onErrorMsgChange={this.props.onErrorMsgChange}
                     shouldCheckBalance={this.props.shouldCheckBalance}
                     shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
                     onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 9a74bdd51..3ff2c5440 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -20,6 +20,7 @@ interface TokenAmountInputProps {
     shouldCheckBalance: boolean;
     shouldCheckAllowance: boolean;
     onChange: ValidatedBigNumberCallback;
+    onErrorMsgChange?: (errorMsg: React.ReactNode) => void;
     onVisitBalancesPageClick?: () => void;
     lastForceTokenStateRefetch: number;
     shouldShowErrs?: boolean;
@@ -85,6 +86,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     amount={amount}
                     balance={ZeroEx.toUnitAmount(this.state.balance, this.props.token.decimals)}
                     onChange={this._onChange.bind(this)}
+                    onErrorMsgChange={this.props.onErrorMsgChange}
                     validate={this._validate.bind(this)}
                     shouldCheckBalance={this.props.shouldCheckBalance}
                     shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}