1 files changed, 51 insertions, 0 deletions
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
new file mode 100644
index 000000000..ad551e125
--- /dev/null
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -0,0 +1,51 @@
+import BigNumber from 'bignumber.js';
+import * as _ from 'lodash';
+import * as React from 'react';
+import {ZeroEx} from '0x.js';
+import {ValidatedBigNumberCallback} from 'ts/types';
+import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input';
+import {constants} from 'ts/utils/constants';
+
+interface EthAmountInputProps {
+    label?: string;
+    balance: BigNumber;
+    amount?: BigNumber;
+    onChange: ValidatedBigNumberCallback;
+    shouldShowIncompleteErrs: boolean;
+    onVisitBalancesPageClick?: () => void;
+    shouldCheckBalance: boolean;
+    shouldHideVisitBalancesLink?: boolean;
+}
+
+interface EthAmountInputState {}
+
+export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmountInputState> {
+    public render() {
+        const amount = this.props.amount ?
+            ZeroEx.toUnitAmount(this.props.amount, constants.ETH_DECIMAL_PLACES) :
+            undefined;
+        return (
+            <div className="flex overflow-hidden" style={{height: 63}}>
+                <BalanceBoundedInput
+                    label={this.props.label}
+                    balance={this.props.balance}
+                    amount={amount}
+                    onChange={this.onChange.bind(this)}
+                    shouldCheckBalance={this.props.shouldCheckBalance}
+                    shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
+                    onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
+                    shouldHideVisitBalancesLink={this.props.shouldHideVisitBalancesLink}
+                />
+                <div style={{paddingTop: _.isUndefined(this.props.label) ? 15 : 40}}>
+                    ETH
+                </div>
+            </div>
+        );
+    }
+    private onChange(isValid: boolean, amount?: BigNumber) {
+        const baseUnitAmountIfExists = _.isUndefined(amount) ?
+            undefined :
+            ZeroEx.toBaseUnitAmount(amount, constants.ETH_DECIMAL_PLACES);
+        this.props.onChange(isValid, baseUnitAmountIfExists);
+    }
+}