aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/inputs
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-03-21 11:55:11 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-03-23 14:13:49 +0800
commitdc3be992a3a1d5f352b65effa5c05f69f8e3272c (patch)
treee57938fa5655ae6e8251090f5a1f10a779f7c81a /packages/website/ts/components/inputs
parentbed7d87b7ff64989051e6b2115a1c77e1e72ff55 (diff)
downloaddexon-0x-contracts-dc3be992a3a1d5f352b65effa5c05f69f8e3272c.tar
dexon-0x-contracts-dc3be992a3a1d5f352b65effa5c05f69f8e3272c.tar.gz
dexon-0x-contracts-dc3be992a3a1d5f352b65effa5c05f69f8e3272c.tar.bz2
dexon-0x-contracts-dc3be992a3a1d5f352b65effa5c05f69f8e3272c.tar.lz
dexon-0x-contracts-dc3be992a3a1d5f352b65effa5c05f69f8e3272c.tar.xz
dexon-0x-contracts-dc3be992a3a1d5f352b65effa5c05f69f8e3272c.tar.zst
dexon-0x-contracts-dc3be992a3a1d5f352b65effa5c05f69f8e3272c.zip
Implement ETH/WETH conversion and allowance toggle styling
Diffstat (limited to 'packages/website/ts/components/inputs')
-rw-r--r--packages/website/ts/components/inputs/allowance_toggle.tsx31
-rw-r--r--packages/website/ts/components/inputs/balance_bounded_input.tsx18
-rw-r--r--packages/website/ts/components/inputs/eth_amount_input.tsx14
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx14
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>