From dc3be992a3a1d5f352b65effa5c05f69f8e3272c Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 20 Mar 2018 20:55:11 -0700
Subject: Implement ETH/WETH conversion and allowance toggle styling

---
 .../ts/components/inputs/balance_bounded_input.tsx     | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/components/inputs/balance_bounded_input.tsx')

diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 253b01871..e9b8dd369 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -12,6 +12,7 @@ interface BalanceBoundedInputProps {
     label?: string;
     balance: BigNumber;
     amount?: BigNumber;
+    hintText?: string;
     onChange: ValidatedBigNumberCallback;
     shouldShowIncompleteErrs?: boolean;
     shouldCheckBalance: boolean;
@@ -19,6 +20,8 @@ interface BalanceBoundedInputProps {
     onVisitBalancesPageClick?: () => void;
     shouldHideVisitBalancesLink?: boolean;
     isDisabled?: boolean;
+    shouldShowErrs?: boolean;
+    shouldShowUnderline?: boolean;
 }
 
 interface BalanceBoundedInputState {
@@ -31,6 +34,9 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
         shouldShowIncompleteErrs: false,
         shouldHideVisitBalancesLink: false,
         isDisabled: false,
+        shouldShowErrs: true,
+        hintText: 'amount',
+        shouldShowUnderline: true,
     };
     constructor(props: BalanceBoundedInputProps) {
         super(props);
@@ -71,9 +77,12 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
         }
     }
     public render() {
-        let errorText = this.state.errMsg;
-        if (this.props.shouldShowIncompleteErrs && this.state.amountString === '') {
-            errorText = 'This field is required';
+        let errorText;
+        if (this.props.shouldShowErrs) {
+            errorText =
+                this.props.shouldShowIncompleteErrs && this.state.amountString === ''
+                    ? 'This field is required'
+                    : this.state.errMsg;
         }
         let label: React.ReactNode | string = '';
         if (!_.isUndefined(this.props.label)) {
@@ -87,9 +96,10 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
                 floatingLabelStyle={{ color: colors.grey, width: 206 }}
                 errorText={errorText}
                 value={this.state.amountString}
-                hintText={<span style={{ textTransform: 'capitalize' }}>amount</span>}
+                hintText={<span style={{ textTransform: 'capitalize' }}>{this.props.hintText}</span>}
                 onChange={this._onValueChange.bind(this)}
                 underlineStyle={{ width: 'calc(100% + 50px)' }}
+                underlineShow={this.props.shouldShowUnderline}
                 disabled={this.props.isDisabled}
             />
         );
-- 
cgit