1 files changed, 26 insertions, 14 deletions
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 9e638b67b..f040928f1 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { Blockchain } from 'ts/blockchain';
 import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
-import { InputErrMsg, Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
+import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
 
 interface TokenAmountInputProps {
     userAddress: string;
@@ -20,11 +20,14 @@ interface TokenAmountInputProps {
     shouldCheckBalance: boolean;
     shouldCheckAllowance: boolean;
     onChange: ValidatedBigNumberCallback;
+    onErrorMsgChange?: (errorMsg: React.ReactNode) => void;
     onVisitBalancesPageClick?: () => void;
     lastForceTokenStateRefetch: number;
     shouldShowErrs?: boolean;
     shouldShowUnderline?: boolean;
     style?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    inputHintStyle?: React.CSSProperties;
 }
 
 interface TokenAmountInputState {
@@ -52,14 +55,14 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
             isBalanceAndAllowanceLoaded: false,
         };
     }
-    public componentWillMount() {
+    public componentWillMount(): void {
         // tslint:disable-next-line:no-floating-promises
         this._fetchBalanceAndAllowanceAsync(this.props.token.address, this.props.userAddress);
     }
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         this._isUnmounted = true;
     }
-    public componentWillReceiveProps(nextProps: TokenAmountInputProps) {
+    public componentWillReceiveProps(nextProps: TokenAmountInputProps): void {
         if (
             nextProps.userAddress !== this.props.userAddress ||
             nextProps.networkId !== this.props.networkId ||
@@ -70,21 +73,18 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
             this._fetchBalanceAndAllowanceAsync(nextProps.token.address, nextProps.userAddress);
         }
     }
-    public render() {
+    public render(): React.ReactNode {
         const amount = this.props.amount
             ? ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals)
             : undefined;
-        const hasLabel = !_.isUndefined(this.props.label);
-        const style = !_.isUndefined(this.props.style)
-            ? this.props.style
-            : { height: hasLabel ? HEIGHT_WITH_LABEL : HEIGHT_WITHOUT_LABEL };
         return (
-            <div className="flex overflow-hidden" style={style}>
+            <div className="flex overflow-hidden" style={this._getStyle()}>
                 <BalanceBoundedInput
                     label={this.props.label}
                     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}
@@ -93,19 +93,21 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     hintText={this.props.hintText}
                     shouldShowErrs={this.props.shouldShowErrs}
                     shouldShowUnderline={this.props.shouldShowUnderline}
+                    inputStyle={this.props.style}
+                    inputHintStyle={this.props.inputHintStyle}
                 />
-                <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div>
+                <div style={this._getLabelStyle()}>{this.props.token.symbol}</div>
             </div>
         );
     }
-    private _onChange(isValid: boolean, amount?: BigNumber) {
+    private _onChange(isValid: boolean, amount?: BigNumber): void {
         let baseUnitAmount;
         if (!_.isUndefined(amount)) {
             baseUnitAmount = ZeroEx.toBaseUnitAmount(amount, this.props.token.decimals);
         }
         this.props.onChange(isValid, baseUnitAmount);
     }
-    private _validate(amount: BigNumber): InputErrMsg {
+    private _validate(amount: BigNumber): React.ReactNode {
         if (this.props.shouldCheckAllowance && amount.gt(this.state.allowance)) {
             return (
                 <span>
@@ -122,7 +124,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
             return undefined;
         }
     }
-    private async _fetchBalanceAndAllowanceAsync(tokenAddress: string, userAddress: string) {
+    private async _fetchBalanceAndAllowanceAsync(tokenAddress: string, userAddress: string): Promise<void> {
         this.setState({
             isBalanceAndAllowanceLoaded: false,
         });
@@ -139,4 +141,14 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
             });
         }
     }
+    private _getStyle(): React.CSSProperties {
+        const hasLabel = !_.isUndefined(this.props.label);
+        return !_.isUndefined(this.props.style)
+            ? this.props.style
+            : { height: hasLabel ? HEIGHT_WITH_LABEL : HEIGHT_WITHOUT_LABEL };
+    }
+    private _getLabelStyle(): React.CSSProperties {
+        const hasLabel = !_.isUndefined(this.props.label);
+        return this.props.labelStyle || { paddingTop: hasLabel ? 39 : 14 };
+    }
 }