diff options
Diffstat (limited to 'packages/website/ts/components/generate_order/generate_order_form.tsx')
| -rw-r--r-- | packages/website/ts/components/generate_order/generate_order_form.tsx | 92 |
1 files changed, 53 insertions, 39 deletions
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index 7a25609b8..949be4f84 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -1,23 +1,23 @@ -import {Order, ZeroEx} from '0x.js'; +import { Order, ZeroEx } from '0x.js'; import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import Divider from 'material-ui/Divider'; import * as React from 'react'; -import {Blockchain} from 'ts/blockchain'; -import {ExpirationInput} from 'ts/components/inputs/expiration_input'; -import {HashInput} from 'ts/components/inputs/hash_input'; -import {IdenticonAddressInput} from 'ts/components/inputs/identicon_address_input'; -import {TokenAmountInput} from 'ts/components/inputs/token_amount_input'; -import {TokenInput} from 'ts/components/inputs/token_input'; -import {OrderJSON} from 'ts/components/order_json'; -import {Alert} from 'ts/components/ui/alert'; -import {HelpTooltip} from 'ts/components/ui/help_tooltip'; -import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button'; -import {SwapIcon} from 'ts/components/ui/swap_icon'; -import {Dispatcher} from 'ts/redux/dispatcher'; -import {orderSchema} from 'ts/schemas/order_schema'; -import {SchemaValidator} from 'ts/schemas/validator'; +import { Blockchain } from 'ts/blockchain'; +import { ExpirationInput } from 'ts/components/inputs/expiration_input'; +import { HashInput } from 'ts/components/inputs/hash_input'; +import { IdenticonAddressInput } from 'ts/components/inputs/identicon_address_input'; +import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; +import { TokenInput } from 'ts/components/inputs/token_input'; +import { OrderJSON } from 'ts/components/order_json'; +import { Alert } from 'ts/components/ui/alert'; +import { HelpTooltip } from 'ts/components/ui/help_tooltip'; +import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button'; +import { SwapIcon } from 'ts/components/ui/swap_icon'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { orderSchema } from 'ts/schemas/order_schema'; +import { SchemaValidator } from 'ts/schemas/validator'; import { AlertTypes, BlockchainErrs, @@ -29,9 +29,9 @@ import { TokenByAddress, TokenStateByAddress, } from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {errorReporter} from 'ts/utils/error_reporter'; -import {utils} from 'ts/utils/utils'; +import { colors } from 'ts/utils/colors'; +import { errorReporter } from 'ts/utils/error_reporter'; +import { utils } from 'ts/utils/utils'; enum SigningState { UNSIGNED, @@ -84,7 +84,8 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G const receiveTokenAddress = this.props.sideToAssetToken[Side.Receive].address; const receiveToken = this.props.tokenByAddress[receiveTokenAddress]; const receiveTokenState = this.props.tokenStateByAddress[receiveTokenAddress]; - const takerExplanation = 'If a taker is specified, only they are<br> \ + const takerExplanation = + 'If a taker is specified, only they are<br> \ allowed to fill this order. If no taker is<br> \ specified, anyone is able to fill it.'; const exchangeContractIfExists = this.props.blockchain.getExchangeContractAddressIfExists(); @@ -92,7 +93,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G <div className="clearfix mb2 lg-px4 md-px4 sm-px2"> <h3>Generate an order</h3> <Divider /> - <div className="mx-auto" style={{maxWidth: 580}}> + <div className="mx-auto" style={{ maxWidth: 580 }}> <div className="pt3"> <div className="mx-auto clearfix"> <div className="lg-col md-col lg-col-5 md-col-5 sm-col sm-col-5 sm-pb2"> @@ -121,9 +122,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G </div> <div className="lg-col md-col lg-col-2 md-col-2 sm-col sm-col-2 xs-hide"> <div className="p1"> - <SwapIcon - swapTokensFn={dispatcher.swapAssetTokenSymbols.bind(dispatcher)} - /> + <SwapIcon swapTokensFn={dispatcher.swapAssetTokenSymbols.bind(dispatcher)} /> </div> </div> <div className="lg-col md-col lg-col-5 md-col-5 sm-col sm-col-5 sm-pb2"> @@ -154,7 +153,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G </div> <div className="pt1 sm-pb2 lg-px4 md-px4"> <div className="lg-px3 md-px3"> - <div style={{fontSize: 12, color: colors.grey}}>Expiration</div> + <div style={{ fontSize: 12, color: colors.grey }}>Expiration</div> <ExpirationInput orderExpiryTimestamp={this.props.orderExpiryTimestamp} updateOrderExpiry={dispatcher.updateOrderExpiry.bind(dispatcher)} @@ -169,9 +168,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G /> <div className="pt3"> <div className="pl1"> - <HelpTooltip - explanation={takerExplanation} - /> + <HelpTooltip explanation={takerExplanation} /> </div> </div> </div> @@ -192,14 +189,14 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G onClickAsyncFn={this._onSignClickedAsync.bind(this)} /> </div> - {this.state.globalErrMsg !== '' && + {this.state.globalErrMsg !== '' && ( <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} /> - } + )} </div> </div> <Dialog title="Order JSON" - titleStyle={{fontWeight: 100}} + titleStyle={{ fontWeight: 100 }} modal={false} open={this.state.signingState === SigningState.SIGNED} onRequestClose={this._onCloseOrderJSONDialog.bind(this)} @@ -223,7 +220,10 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G ); } private _onTokenAmountChange(token: Token, side: Side, isValid: boolean, amount?: BigNumber) { - this.props.dispatcher.updateChosenAssetToken(side, {address: token.address, amount}); + this.props.dispatcher.updateChosenAssetToken(side, { + address: token.address, + amount, + }); } private _onCloseOrderJSONDialog() { // Upon closing the order JSON dialog, we update the orderSalt stored in the Redux store @@ -245,10 +245,15 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G const debitBalance = this.props.tokenStateByAddress[debitToken.address].balance; const debitAllowance = this.props.tokenStateByAddress[debitToken.address].allowance; const receiveAmount = this.props.sideToAssetToken[Side.Receive].amount; - if (!_.isUndefined(debitToken.amount) && !_.isUndefined(receiveAmount) && - debitToken.amount.gt(0) && receiveAmount.gt(0) && + if ( + !_.isUndefined(debitToken.amount) && + !_.isUndefined(receiveAmount) && + debitToken.amount.gt(0) && + receiveAmount.gt(0) && this.props.userAddress !== '' && - debitBalance.gte(debitToken.amount) && debitAllowance.gte(debitToken.amount)) { + debitBalance.gte(debitToken.amount) && + debitAllowance.gte(debitToken.amount) + ) { const didSignSuccessfully = await this._signTransactionAsync(); if (didSignSuccessfully) { this.setState({ @@ -303,11 +308,20 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G let globalErrMsg = ''; try { const signatureData = await this.props.blockchain.signOrderHashAsync(orderHash); - const order = utils.generateOrder(this.props.networkId, exchangeContractAddr, this.props.sideToAssetToken, - hashData.orderExpiryTimestamp, this.props.orderTakerAddress, - this.props.userAddress, hashData.makerFee, hashData.takerFee, - hashData.feeRecipientAddress, signatureData, this.props.tokenByAddress, - hashData.orderSalt); + const order = utils.generateOrder( + this.props.networkId, + exchangeContractAddr, + this.props.sideToAssetToken, + hashData.orderExpiryTimestamp, + this.props.orderTakerAddress, + this.props.userAddress, + hashData.makerFee, + hashData.takerFee, + hashData.feeRecipientAddress, + signatureData, + this.props.tokenByAddress, + hashData.orderSalt, + ); const validationResult = this._validator.validate(order, orderSchema); if (validationResult.errors.length > 0) { globalErrMsg = 'Order signing failed. Please refresh and try again'; |