diff options
Diffstat (limited to 'packages/website/ts/components/inputs')
9 files changed, 0 insertions, 910 deletions
diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx deleted file mode 100644 index 1a71f8081..000000000 --- a/packages/website/ts/components/inputs/address_input.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { colors } from '@0x/react-shared'; -import { addressUtils } from '@0x/utils'; -import * as _ from 'lodash'; -import TextField from 'material-ui/TextField'; -import * as React from 'react'; -import { RequiredLabel } from 'ts/components/ui/required_label'; - -interface AddressInputProps { - disabled?: boolean; - initialAddress: string; - isRequired?: boolean; - hintText?: string; - shouldHideLabel?: boolean; - label?: string; - shouldShowIncompleteErrs?: boolean; - updateAddress: (address?: string) => void; -} - -interface AddressInputState { - address: string; - errMsg: string; -} - -export class AddressInput extends React.Component<AddressInputProps, AddressInputState> { - constructor(props: AddressInputProps) { - super(props); - this.state = { - address: this.props.initialAddress, - errMsg: '', - }; - } - public componentWillReceiveProps(nextProps: AddressInputProps): void { - if (nextProps.shouldShowIncompleteErrs && this.props.isRequired && this.state.address === '') { - this.setState({ - errMsg: 'Address is required', - }); - } - } - public render(): React.ReactNode { - const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label; - const labelDisplay = this.props.shouldHideLabel ? 'hidden' : 'block'; - const hintText = this.props.hintText ? this.props.hintText : ''; - return ( - <div className="overflow-hidden"> - <TextField - id={`address-field-${this.props.label}`} - disabled={_.isUndefined(this.props.disabled) ? false : this.props.disabled} - fullWidth={true} - hintText={hintText} - floatingLabelFixed={true} - floatingLabelStyle={{ color: colors.grey, display: labelDisplay }} - floatingLabelText={label} - errorText={this.state.errMsg} - value={this.state.address} - onChange={this._onOrderTakerAddressUpdated.bind(this)} - /> - </div> - ); - } - private _onOrderTakerAddressUpdated(e: any): void { - const address = e.target.value.toLowerCase(); - const isValidAddress = addressUtils.isAddress(address) || address === ''; - const errMsg = isValidAddress ? '' : 'Invalid ethereum address'; - this.setState({ - address, - errMsg, - }); - const addressIfValid = isValidAddress ? address : undefined; - this.props.updateAddress(addressIfValid); - } -} diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx deleted file mode 100644 index 3a78d32f3..000000000 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import { colors } from '@0x/react-shared'; -import { BigNumber, logUtils } from '@0x/utils'; -import * as _ from 'lodash'; -import * as React from 'react'; -import ReactTooltip from 'react-tooltip'; -import { Blockchain } from 'ts/blockchain'; -import { AllowanceState, AllowanceStateView } from 'ts/components/ui/allowance_state_view'; -import { Container } from 'ts/components/ui/container'; -import { PointerDirection } from 'ts/components/ui/pointer'; -import { Text } from 'ts/components/ui/text'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { BalanceErrs, Token, TokenState } from 'ts/types'; -import { analytics } from 'ts/utils/analytics'; -import { errorReporter } from 'ts/utils/error_reporter'; -import { utils } from 'ts/utils/utils'; - -export interface AllowanceStateToggleProps { - networkId: number; - blockchain: Blockchain; - dispatcher: Dispatcher; - token: Token; - tokenState: TokenState; - userAddress: string; - onErrorOccurred?: (errType: BalanceErrs) => void; - refetchTokenStateAsync: () => Promise<void>; - tooltipDirection?: PointerDirection; -} - -export interface AllowanceStateToggleState { - allowanceState: AllowanceState; - prevTokenState: TokenState; - loadingMessage?: string; -} - -const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1); - -export class AllowanceStateToggle extends React.Component<AllowanceStateToggleProps, AllowanceStateToggleState> { - public static defaultProps = { - onErrorOccurred: _.noop.bind(_), - tooltipDirection: PointerDirection.Right, - }; - private static _getAllowanceState(tokenState: TokenState): AllowanceState { - if (!tokenState.isLoaded) { - return AllowanceState.Loading; - } - if (tokenState.allowance.gt(0)) { - return AllowanceState.Unlocked; - } - return AllowanceState.Locked; - } - constructor(props: AllowanceStateToggleProps) { - super(props); - const tokenState = props.tokenState; - this.state = { - allowanceState: AllowanceStateToggle._getAllowanceState(tokenState), - prevTokenState: tokenState, - }; - } - - public render(): React.ReactNode { - const tooltipId = `tooltip-id-${this.props.token.symbol}`; - return ( - <Container cursor="pointer"> - <ReactTooltip id={tooltipId} effect="solid" offset={{ top: 3 }}> - {this._getTooltipContent()} - </ReactTooltip> - <div - data-tip={true} - data-for={tooltipId} - data-place={this.props.tooltipDirection} - onClick={this._onToggleAllowanceAsync.bind(this)} - > - <AllowanceStateView allowanceState={this.state.allowanceState} /> - </div> - </Container> - ); - } - public componentWillReceiveProps(nextProps: AllowanceStateToggleProps): void { - const nextTokenState = nextProps.tokenState; - const prevTokenState = this.state.prevTokenState; - if ( - !nextTokenState.allowance.eq(prevTokenState.allowance) || - nextTokenState.isLoaded !== prevTokenState.isLoaded - ) { - const tokenState = nextProps.tokenState; - this.setState({ - prevTokenState: tokenState, - allowanceState: AllowanceStateToggle._getAllowanceState(nextTokenState), - }); - } - } - private _getTooltipContent(): React.ReactNode { - const symbol = this.props.token.symbol; - switch (this.state.allowanceState) { - case AllowanceState.Loading: - return ( - <Text noWrap={true} fontColor={colors.white}> - {this.state.loadingMessage || 'Loading...'} - </Text> - ); - case AllowanceState.Locked: - return ( - <Text noWrap={true} fontColor={colors.white}> - Click to enable <b>{symbol}</b> for trading - </Text> - ); - case AllowanceState.Unlocked: - return ( - <Text noWrap={true} fontColor={colors.white}> - <b>{symbol}</b> is available for trading - </Text> - ); - default: - return null; - } - } - private async _onToggleAllowanceAsync(): Promise<void> { - // Close all tooltips - ReactTooltip.hide(); - if (this.props.userAddress === '') { - this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); - return; - } - - let newAllowanceAmountInBaseUnits = new BigNumber(0); - if (!this._isAllowanceSet()) { - newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS; - } - const isUnlockingToken = newAllowanceAmountInBaseUnits.gt(0); - this.setState({ - allowanceState: AllowanceState.Loading, - loadingMessage: `${isUnlockingToken ? 'Unlocking' : 'Locking'} ${this.props.token.symbol}`, - }); - const logData = { - tokenSymbol: this.props.token.symbol, - newAllowance: newAllowanceAmountInBaseUnits.toNumber(), - }; - try { - await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits); - analytics.track('Set Allowances Success', logData); - await this.props.refetchTokenStateAsync(); - } catch (err) { - analytics.track('Set Allowance Failure', logData); - this.setState({ - allowanceState: AllowanceStateToggle._getAllowanceState(this.state.prevTokenState), - }); - const errMsg = `${err}`; - if (utils.didUserDenyWeb3Request(errMsg)) { - return; - } - logUtils.log(`Unexpected error encountered: ${err}`); - logUtils.log(err.stack); - this.props.onErrorOccurred(BalanceErrs.AllowanceSettingFailed); - errorReporter.report(err); - } - } - private _isAllowanceSet(): boolean { - return !this.props.tokenState.allowance.eq(0); - } -} diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx deleted file mode 100644 index 83f263842..000000000 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import { colors } from '@0x/react-shared'; -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; -import TextField from 'material-ui/TextField'; -import * as React from 'react'; -import { RequiredLabel } from 'ts/components/ui/required_label'; -import { ValidatedBigNumberCallback } from 'ts/types'; -import { utils } from 'ts/utils/utils'; - -interface BalanceBoundedInputProps { - label?: string; - balance: BigNumber; - amount?: BigNumber; - hintText?: string; - onChange: ValidatedBigNumberCallback; - onErrorMsgChange?: (errorMsg: React.ReactNode) => void; - shouldShowIncompleteErrs?: boolean; - shouldCheckBalance: boolean; - validate?: (amount: BigNumber) => React.ReactNode; - isDisabled?: boolean; - shouldShowErrs?: boolean; - shouldShowUnderline?: boolean; - inputStyle?: React.CSSProperties; - inputHintStyle?: React.CSSProperties; -} - -interface BalanceBoundedInputState { - errMsg: React.ReactNode; - amountString: string; -} - -export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> { - public static defaultProps: Partial<BalanceBoundedInputProps> = { - shouldShowIncompleteErrs: false, - isDisabled: false, - shouldShowErrs: true, - hintText: 'amount', - onErrorMsgChange: _.noop.bind(_), - shouldShowUnderline: true, - }; - constructor(props: BalanceBoundedInputProps) { - super(props); - const amountString = this.props.amount ? this.props.amount.toString() : ''; - this.state = { - errMsg: this._validate(amountString, props.balance), - amountString, - }; - } - public componentWillReceiveProps(nextProps: BalanceBoundedInputProps): void { - if (nextProps === this.props) { - return; - } - const isCurrentAmountNumeric = utils.isNumeric(this.state.amountString); - if (!_.isUndefined(nextProps.amount)) { - let shouldResetState = false; - if (!isCurrentAmountNumeric) { - shouldResetState = true; - } else { - const currentAmount = new BigNumber(this.state.amountString); - if (!currentAmount.eq(nextProps.amount) || !nextProps.balance.eq(this.props.balance)) { - shouldResetState = true; - } - } - if (shouldResetState) { - const amountString = nextProps.amount.toString(); - this._setAmountState(amountString, nextProps.balance); - } - } else if (isCurrentAmountNumeric) { - const amountString = ''; - this._setAmountState(amountString, nextProps.balance); - } - } - public render(): React.ReactNode { - 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)) { - label = <RequiredLabel label={this.props.label} />; - } - return ( - <TextField - fullWidth={true} - floatingLabelText={label} - floatingLabelFixed={true} - floatingLabelStyle={{ color: colors.grey, width: 206 }} - errorText={errorText} - value={this.state.amountString} - hintText={<span style={{ textTransform: 'capitalize' }}>{this.props.hintText}</span>} - onChange={this._onValueChange.bind(this)} - underlineStyle={{ width: 'calc(100% + 50px)' }} - inputStyle={this.props.inputStyle} - hintStyle={this.props.inputHintStyle} - underlineShow={this.props.shouldShowUnderline} - disabled={this.props.isDisabled} - /> - ); - } - private _onValueChange(_event: any, amountString: string): void { - this._setAmountState(amountString, this.props.balance, () => { - const isValid = _.isUndefined(this._validate(amountString, this.props.balance)); - const isPositiveNumber = utils.isNumeric(amountString) && !_.includes(amountString, '-'); - if (isPositiveNumber) { - this.props.onChange(isValid, new BigNumber(amountString)); - } else { - this.props.onChange(isValid); - } - }); - } - private _validate(amountString: string, balance: BigNumber): React.ReactNode { - if (!utils.isNumeric(amountString)) { - return amountString !== '' ? 'Must be a number' : ''; - } - const amount = new BigNumber(amountString); - if (amount.eq(0)) { - return 'Cannot be zero'; - } - if (this.props.shouldCheckBalance && amount.gt(balance)) { - return <span>Insufficient balance.</span>; - } - const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount); - return errMsg; - } - private _setAmountState(amount: string, balance: BigNumber, callback: () => void = _.noop.bind(_)): void { - const errorMsg = this._validate(amount, balance); - this.props.onErrorMsgChange(errorMsg); - this.setState( - { - amountString: amount, - errMsg: errorMsg, - }, - callback, - ); - } -} diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx deleted file mode 100644 index 6799e54bf..000000000 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; -import { ValidatedBigNumberCallback } from 'ts/types'; -import { constants } from 'ts/utils/constants'; - -interface EthAmountInputProps { - label?: string; - balance: BigNumber; - amount?: BigNumber; - hintText?: string; - onChange: ValidatedBigNumberCallback; - onErrorMsgChange?: (errorMsg: React.ReactNode) => void; - shouldShowIncompleteErrs: boolean; - shouldCheckBalance: boolean; - shouldShowErrs?: boolean; - shouldShowUnderline?: boolean; - style?: React.CSSProperties; - labelStyle?: React.CSSProperties; - inputHintStyle?: React.CSSProperties; -} - -interface EthAmountInputState {} - -export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmountInputState> { - public static defaultProps: Partial<EthAmountInputProps> = { - shouldShowErrs: true, - shouldShowUnderline: true, - }; - public render(): React.ReactNode { - const amount = this.props.amount - ? Web3Wrapper.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) - : undefined; - return ( - <div className="flex" style={this.props.style}> - <BalanceBoundedInput - label={this.props.label} - balance={this.props.balance} - amount={amount} - onChange={this._onChange.bind(this)} - onErrorMsgChange={this.props.onErrorMsgChange} - shouldCheckBalance={this.props.shouldCheckBalance} - shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs} - hintText={this.props.hintText} - shouldShowErrs={this.props.shouldShowErrs} - shouldShowUnderline={this.props.shouldShowUnderline} - inputStyle={this.props.style} - inputHintStyle={this.props.inputHintStyle} - /> - <div style={this._getLabelStyle()}>ETH</div> - </div> - ); - } - private _onChange(isValid: boolean, amount?: BigNumber): void { - const baseUnitAmountIfExists = _.isUndefined(amount) - ? undefined - : Web3Wrapper.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH); - this.props.onChange(isValid, baseUnitAmountIfExists); - } - private _getLabelStyle(): React.CSSProperties { - return this.props.labelStyle || { paddingTop: _.isUndefined(this.props.label) ? 15 : 40 }; - } -} diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx deleted file mode 100644 index 3e43c1c07..000000000 --- a/packages/website/ts/components/inputs/expiration_input.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; -import DatePicker from 'material-ui/DatePicker'; -import TimePicker from 'material-ui/TimePicker'; -import * as moment from 'moment'; -import * as React from 'react'; -import { utils } from 'ts/utils/utils'; - -interface ExpirationInputProps { - orderExpiryTimestamp: BigNumber; - updateOrderExpiry: (unixTimestampSec: BigNumber) => void; -} - -interface ExpirationInputState { - dateMoment: moment.Moment; - timeMoment: moment.Moment; -} - -export class ExpirationInput extends React.Component<ExpirationInputProps, ExpirationInputState> { - private readonly _earliestPickableMoment: moment.Moment; - constructor(props: ExpirationInputProps) { - super(props); - // Set the earliest pickable date to today at 00:00, so users can only pick the current or later dates - this._earliestPickableMoment = moment().startOf('day'); - const expirationMoment = utils.convertToMomentFromUnixTimestamp(props.orderExpiryTimestamp); - const initialOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec(); - const didUserSetExpiry = !initialOrderExpiryTimestamp.eq(props.orderExpiryTimestamp); - this.state = { - dateMoment: didUserSetExpiry ? expirationMoment : undefined, - timeMoment: didUserSetExpiry ? expirationMoment : undefined, - }; - } - public render(): React.ReactNode { - const date = this.state.dateMoment ? this.state.dateMoment.toDate() : undefined; - const time = this.state.timeMoment ? this.state.timeMoment.toDate() : undefined; - return ( - <div className="clearfix"> - <div className="col col-6 overflow-hidden pr3 flex relative"> - <DatePicker - className="overflow-hidden" - hintText="Date" - mode="landscape" - autoOk={true} - value={date} - onChange={this._onDateChanged.bind(this)} - shouldDisableDate={this._shouldDisableDate.bind(this)} - /> - <div className="absolute" style={{ fontSize: 20, right: 40, top: 13, pointerEvents: 'none' }}> - <i className="zmdi zmdi-calendar" /> - </div> - </div> - <div className="col col-5 overflow-hidden flex relative"> - <TimePicker - className="overflow-hidden" - hintText="Time" - autoOk={true} - value={time} - onChange={this._onTimeChanged.bind(this)} - /> - <div className="absolute" style={{ fontSize: 20, right: 9, top: 13, pointerEvents: 'none' }}> - <i className="zmdi zmdi-time" /> - </div> - </div> - <div onClick={this._clearDates.bind(this)} className="col col-1 pt2" style={{ textAlign: 'right' }}> - <i style={{ fontSize: 16, cursor: 'pointer' }} className="zmdi zmdi-close" /> - </div> - </div> - ); - } - private _shouldDisableDate(date: Date): boolean { - return moment(date) - .startOf('day') - .isBefore(this._earliestPickableMoment); - } - private _clearDates(): void { - this.setState({ - dateMoment: undefined, - timeMoment: undefined, - }); - const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec(); - this.props.updateOrderExpiry(defaultDateTime); - } - private _onDateChanged(_event: any, date: Date): void { - const dateMoment = moment(date); - this.setState({ - dateMoment, - }); - const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment); - this.props.updateOrderExpiry(timestamp); - } - private _onTimeChanged(_event: any, time: Date): void { - const timeMoment = moment(time); - this.setState({ - timeMoment, - }); - const dateMoment = _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment; - const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, timeMoment); - this.props.updateOrderExpiry(timestamp); - } -} diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx deleted file mode 100644 index 7688ffe21..000000000 --- a/packages/website/ts/components/inputs/hash_input.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { assetDataUtils, orderHashUtils } from '@0x/order-utils'; -import { Styles } from '@0x/react-shared'; -import { Order } from '@0x/types'; -import * as _ from 'lodash'; -import * as React from 'react'; -import ReactTooltip from 'react-tooltip'; - -import { Blockchain } from 'ts/blockchain'; -import { FakeTextField } from 'ts/components/ui/fake_text_field'; -import { HashData } from 'ts/types'; -import { constants } from 'ts/utils/constants'; - -const styles: Styles = { - textField: { - overflow: 'hidden', - paddingTop: 8, - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - }, -}; - -interface HashInputProps { - blockchain: Blockchain; - blockchainIsLoaded: boolean; - hashData: HashData; - label: string; -} - -interface HashInputState {} - -export class HashInput extends React.Component<HashInputProps, HashInputState> { - public render(): React.ReactNode { - const msgHashHex = this.props.blockchainIsLoaded ? this._generateMessageHashHex() : ''; - return ( - <div> - <FakeTextField label={this.props.label}> - <div style={styles.textField} data-tip={true} data-for="hashTooltip"> - {msgHashHex} - </div> - </FakeTextField> - <ReactTooltip id="hashTooltip">{msgHashHex}</ReactTooltip> - </div> - ); - } - private _generateMessageHashHex(): string { - const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists(); - const hashData = this.props.hashData; - const makerAssetData = assetDataUtils.encodeERC20AssetData(hashData.depositTokenContractAddr); - const takerAssetData = assetDataUtils.encodeERC20AssetData(hashData.receiveTokenContractAddr); - const order: Order = { - senderAddress: constants.NULL_ADDRESS, - exchangeAddress, - expirationTimeSeconds: hashData.orderExpiryTimestamp, - feeRecipientAddress: hashData.feeRecipientAddress, - makerAddress: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress, - makerFee: hashData.makerFee, - makerAssetData, - makerAssetAmount: hashData.depositAmount, - salt: hashData.orderSalt, - takerAddress: hashData.orderTakerAddress, - takerFee: hashData.takerFee, - takerAssetData, - takerAssetAmount: hashData.receiveAmount, - }; - const orderHash = orderHashUtils.getOrderHashHex(order); - return orderHash; - } -} diff --git a/packages/website/ts/components/inputs/identicon_address_input.tsx b/packages/website/ts/components/inputs/identicon_address_input.tsx deleted file mode 100644 index 6ba7584a7..000000000 --- a/packages/website/ts/components/inputs/identicon_address_input.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from 'react'; -import { AddressInput } from 'ts/components/inputs/address_input'; -import { Identicon } from 'ts/components/ui/identicon'; -import { InputLabel } from 'ts/components/ui/input_label'; -import { RequiredLabel } from 'ts/components/ui/required_label'; - -interface IdenticonAddressInputProps { - initialAddress: string; - isRequired?: boolean; - label: string; - updateOrderAddress: (address?: string) => void; -} - -interface IdenticonAddressInputState { - address: string; -} - -export class IdenticonAddressInput extends React.Component<IdenticonAddressInputProps, IdenticonAddressInputState> { - constructor(props: IdenticonAddressInputProps) { - super(props); - this.state = { - address: props.initialAddress, - }; - } - public render(): React.ReactNode { - const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label; - return ( - <div className="relative" style={{ width: '100%' }}> - <InputLabel text={label} /> - <div className="flex"> - <div className="col col-1 pb1 pr1" style={{ paddingTop: 13 }}> - <Identicon address={this.state.address} diameter={26} /> - </div> - <div className="col col-11 pb1 pl1" style={{ height: 65 }}> - <AddressInput - hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..." - shouldHideLabel={true} - initialAddress={this.props.initialAddress} - updateAddress={this._updateAddress.bind(this)} - /> - </div> - </div> - </div> - ); - } - private _updateAddress(address?: string): void { - this.setState({ - address, - }); - this.props.updateOrderAddress(address); - } -} diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx deleted file mode 100644 index fded3a9dd..000000000 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import { colors, Link } from '@0x/react-shared'; -import { BigNumber } from '@0x/utils'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { Blockchain } from 'ts/blockchain'; -import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; -import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; - -interface TokenAmountInputProps { - userAddress: string; - networkId: number; - blockchain: Blockchain; - token: Token; - label?: string; - amount?: BigNumber; - hintText?: string; - shouldShowIncompleteErrs: boolean; - shouldCheckBalance: boolean; - shouldCheckAllowance: boolean; - onChange: ValidatedBigNumberCallback; - onErrorMsgChange?: (errorMsg: React.ReactNode) => void; - lastForceTokenStateRefetch: number; - shouldShowErrs?: boolean; - shouldShowUnderline?: boolean; - style?: React.CSSProperties; - labelStyle?: React.CSSProperties; - inputHintStyle?: React.CSSProperties; -} - -interface TokenAmountInputState { - balance: BigNumber; - allowance: BigNumber; - isBalanceAndAllowanceLoaded: boolean; -} - -const HEIGHT_WITH_LABEL = 84; -const HEIGHT_WITHOUT_LABEL = 62; - -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); - this._isUnmounted = false; - const defaultAmount = new BigNumber(0); - this.state = { - balance: defaultAmount, - allowance: defaultAmount, - isBalanceAndAllowanceLoaded: false, - }; - } - public componentWillMount(): void { - // tslint:disable-next-line:no-floating-promises - this._fetchBalanceAndAllowanceAsync(this.props.token.address, this.props.userAddress); - } - public componentWillUnmount(): void { - this._isUnmounted = true; - } - public componentWillReceiveProps(nextProps: TokenAmountInputProps): void { - if ( - nextProps.userAddress !== this.props.userAddress || - nextProps.networkId !== this.props.networkId || - nextProps.token.address !== this.props.token.address || - nextProps.lastForceTokenStateRefetch !== this.props.lastForceTokenStateRefetch - ) { - // tslint:disable-next-line:no-floating-promises - this._fetchBalanceAndAllowanceAsync(nextProps.token.address, nextProps.userAddress); - } - } - public render(): React.ReactNode { - const amount = this.props.amount - ? Web3Wrapper.toUnitAmount(this.props.amount, this.props.token.decimals) - : undefined; - return ( - <div className="flex overflow-hidden" style={this._getStyle()}> - <BalanceBoundedInput - label={this.props.label} - amount={amount} - balance={Web3Wrapper.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} - isDisabled={!this.state.isBalanceAndAllowanceLoaded} - hintText={this.props.hintText} - shouldShowErrs={this.props.shouldShowErrs} - shouldShowUnderline={this.props.shouldShowUnderline} - inputStyle={this.props.style} - inputHintStyle={this.props.inputHintStyle} - /> - <div style={this._getLabelStyle()}>{this.props.token.symbol}</div> - </div> - ); - } - private _onChange(isValid: boolean, amount?: BigNumber): void { - let baseUnitAmount; - if (!_.isUndefined(amount)) { - baseUnitAmount = Web3Wrapper.toBaseUnitAmount(amount, this.props.token.decimals); - } - this.props.onChange(isValid, baseUnitAmount); - } - private _validate(amount: BigNumber): React.ReactNode { - if (this.props.shouldCheckAllowance && amount.gt(this.state.allowance)) { - return ( - <span> - Insufficient allowance.{' '} - <Link - to={`${WebsitePaths.Portal}/account`} - textDecoration="underline" - fontColor={colors.darkestGrey} - > - Set allowance - </Link> - </span> - ); - } else { - return undefined; - } - } - private async _fetchBalanceAndAllowanceAsync(tokenAddress: string, userAddress: string): Promise<void> { - this.setState({ - isBalanceAndAllowanceLoaded: false, - }); - const userAddressIfExists = _.isEmpty(userAddress) ? undefined : userAddress; - const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( - userAddressIfExists, - tokenAddress, - ); - if (!this._isUnmounted) { - this.setState({ - balance, - allowance, - isBalanceAndAllowanceLoaded: true, - }); - } - } - 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 }; - } -} diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx deleted file mode 100644 index c3c2d8b37..000000000 --- a/packages/website/ts/components/inputs/token_input.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { colors } from '@0x/react-shared'; -import Paper from 'material-ui/Paper'; -import * as React from 'react'; -import { Blockchain } from 'ts/blockchain'; -import { AssetPicker } from 'ts/components/generate_order/asset_picker'; -import { InputLabel } from 'ts/components/ui/input_label'; -import { TokenIcon } from 'ts/components/ui/token_icon'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { AssetToken, BlockchainErrs, Side, Token, TokenByAddress } from 'ts/types'; - -const TOKEN_ICON_DIMENSION = 80; - -interface TokenInputProps { - blockchain: Blockchain; - blockchainErr: BlockchainErrs; - dispatcher: Dispatcher; - label: string; - side: Side; - networkId: number; - assetToken: AssetToken; - updateChosenAssetToken: (side: Side, token: AssetToken) => void; - tokenByAddress: TokenByAddress; - userAddress: string; -} - -interface TokenInputState { - isHoveringIcon: boolean; - isPickerOpen: boolean; - trackCandidateTokenIfExists?: Token; -} - -export class TokenInput extends React.Component<TokenInputProps, TokenInputState> { - constructor(props: TokenInputProps) { - super(props); - this.state = { - isHoveringIcon: false, - isPickerOpen: false, - }; - } - public render(): React.ReactNode { - const token = this.props.tokenByAddress[this.props.assetToken.address]; - const iconStyles = { - cursor: 'pointer', - opacity: this.state.isHoveringIcon ? 0.5 : 1, - }; - return ( - <div className="relative"> - <div className="pb1"> - <InputLabel text={this.props.label} /> - </div> - <Paper - zDepth={1} - style={{ cursor: 'pointer' }} - onMouseEnter={this._onToggleHover.bind(this, true)} - onMouseLeave={this._onToggleHover.bind(this, false)} - onClick={this._onAssetClicked.bind(this)} - > - <div className="mx-auto pt2" style={{ width: TOKEN_ICON_DIMENSION, ...iconStyles }}> - <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} /> - </div> - <div className="py1 center" style={{ color: colors.grey }}> - {token.name} - </div> - </Paper> - <AssetPicker - userAddress={this.props.userAddress} - networkId={this.props.networkId} - blockchain={this.props.blockchain} - dispatcher={this.props.dispatcher} - isOpen={this.state.isPickerOpen} - currentTokenAddress={this.props.assetToken.address} - onTokenChosen={this._onTokenChosen.bind(this)} - tokenByAddress={this.props.tokenByAddress} - /> - </div> - ); - } - private _onTokenChosen(tokenAddress: string): void { - const assetToken: AssetToken = { - address: tokenAddress, - amount: this.props.assetToken.amount, - }; - this.props.updateChosenAssetToken(this.props.side, assetToken); - this.setState({ - isPickerOpen: false, - }); - } - private _onToggleHover(isHoveringIcon: boolean): void { - this.setState({ - isHoveringIcon, - }); - } - private _onAssetClicked(): void { - if (this.props.blockchainErr !== BlockchainErrs.NoError) { - this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); - return; - } - - this.setState({ - isPickerOpen: true, - }); - } -} |