Implement ETH/WETH conversion and allowance toggle styling

4 files changed, 70 insertions, 7 deletions

diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index da6f900e6..cfe75b751 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -1,4 +1,4 @@
-import { constants as sharedConstants } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared';
 import { BigNumber, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Toggle from 'material-ui/Toggle';
@@ -30,6 +30,31 @@ interface AllowanceToggleState {
     prevAllowance: BigNumber;
 }
 
+const styles: Styles = {
+    baseThumbStyle: {
+        height: 10,
+        width: 10,
+        top: 6,
+        backgroundColor: colors.white,
+        boxShadow: `0px 0px 0px ${colors.allowanceToggleShadow}`,
+    },
+    offThumbStyle: {
+        left: 4,
+    },
+    onThumbStyle: {
+        left: 25,
+    },
+    baseTrackStyle: {
+        width: 25,
+    },
+    offTrackStyle: {
+        backgroundColor: colors.allowanceToggleOffTrack,
+    },
+    onTrackStyle: {
+        backgroundColor: colors.allowanceToggleOnTrack,
+    },
+};
+
 export class AllowanceToggle extends React.Component<AllowanceToggleProps, AllowanceToggleState> {
     constructor(props: AllowanceToggleProps) {
         super(props);
@@ -54,6 +79,10 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
                         disabled={this.state.isSpinnerVisible || this.props.isDisabled}
                         toggled={this._isAllowanceSet()}
                         onToggle={this._onToggleAllowanceAsync.bind(this)}
+                        thumbStyle={{ ...styles.baseThumbStyle, ...styles.offThumbStyle }}
+                        thumbSwitchedStyle={{ ...styles.baseThumbStyle, ...styles.onThumbStyle }}
+                        trackStyle={{ ...styles.baseTrackStyle, ...styles.offTrackStyle }}
+                        trackSwitchedStyle={{ ...styles.baseTrackStyle, ...styles.onTrackStyle }}
                     />
                 </div>
                 {this.state.isSpinnerVisible && (
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}
             />
         );
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index a66f92c8c..f3a879065 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -10,22 +10,31 @@ interface EthAmountInputProps {
     label?: string;
     balance: BigNumber;
     amount?: BigNumber;
+    hintText?: string;
     onChange: ValidatedBigNumberCallback;
     shouldShowIncompleteErrs: boolean;
     onVisitBalancesPageClick?: () => void;
     shouldCheckBalance: boolean;
     shouldHideVisitBalancesLink?: boolean;
+    shouldShowErrs?: boolean;
+    shouldShowUnderline?: boolean;
+    style?: React.CSSProperties;
 }
 
 interface EthAmountInputState {}
 
 export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmountInputState> {
+    public static defaultProps: Partial<EthAmountInputProps> = {
+        shouldShowErrs: true,
+        shouldShowUnderline: true,
+        style: { height: 63 },
+    };
     public render() {
         const amount = this.props.amount
             ? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH)
             : undefined;
         return (
-            <div className="flex overflow-hidden" style={{ height: 63 }}>
+            <div className="flex overflow-hidden" style={this.props.style}>
                 <BalanceBoundedInput
                     label={this.props.label}
                     balance={this.props.balance}
@@ -35,6 +44,9 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
                     shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
                     onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
                     shouldHideVisitBalancesLink={this.props.shouldHideVisitBalancesLink}
+                    hintText={this.props.hintText}
+                    shouldShowErrs={this.props.shouldShowErrs}
+                    shouldShowUnderline={this.props.shouldShowUnderline}
                 />
                 <div style={{ paddingTop: _.isUndefined(this.props.label) ? 15 : 40 }}>ETH</div>
             </div>
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index b55840fc4..591be7c0c 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -15,12 +15,16 @@ interface TokenAmountInputProps {
     token: Token;
     label?: string;
     amount?: BigNumber;
+    hintText?: string;
     shouldShowIncompleteErrs: boolean;
     shouldCheckBalance: boolean;
     shouldCheckAllowance: boolean;
     onChange: ValidatedBigNumberCallback;
     onVisitBalancesPageClick?: () => void;
     lastForceTokenStateRefetch: number;
+    shouldShowErrs?: boolean;
+    shouldShowUnderline?: boolean;
+    style?: React.CSSProperties;
 }
 
 interface TokenAmountInputState {
@@ -30,6 +34,10 @@ interface TokenAmountInputState {
 }
 
 export class TokenAmountInput extends React.Component<TokenAmountInputProps, TokenAmountInputState> {
+    public static defaultProps: Partial<TokenAmountInputProps> = {
+        shouldShowErrs: true,
+        shouldShowUnderline: true,
+    };
     private _isUnmounted: boolean;
     constructor(props: TokenAmountInputProps) {
         super(props);
@@ -64,8 +72,9 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
             ? 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 ? 84 : 62 };
         return (
-            <div className="flex overflow-hidden" style={{ height: hasLabel ? 84 : 62 }}>
+            <div className="flex overflow-hidden" style={style}>
                 <BalanceBoundedInput
                     label={this.props.label}
                     amount={amount}
@@ -76,6 +85,9 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
                     onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
                     isDisabled={!this.state.isBalanceAndAllowanceLoaded}
+                    hintText={this.props.hintText}
+                    shouldShowErrs={this.props.shouldShowErrs}
+                    shouldShowUnderline={this.props.shouldShowUnderline}
                 />
                 <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div>
             </div>