From e744e4cd989bd3ae1070c59f7baa8097f18b8b06 Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Fri, 22 Dec 2017 15:05:32 +0100
Subject: Apply prettier config

---
 .../ts/components/generate_order/asset_picker.tsx  | 76 +++++++++---------
 .../generate_order/generate_order_form.tsx         | 92 +++++++++++++---------
 .../components/generate_order/new_token_form.tsx   | 47 +++++------
 3 files changed, 117 insertions(+), 98 deletions(-)

(limited to 'packages/website/ts/components/generate_order')

diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index 407070607..df7d87cfd 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -2,19 +2,13 @@ import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {NewTokenForm} from 'ts/components/generate_order/new_token_form';
-import {TrackTokenConfirmation} from 'ts/components/track_token_confirmation';
-import {TokenIcon} from 'ts/components/ui/token_icon';
-import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {
-    DialogConfigs,
-    Token,
-    TokenByAddress,
-    TokenState,
-    TokenVisibility,
-} from 'ts/types';
+import { Blockchain } from 'ts/blockchain';
+import { NewTokenForm } from 'ts/components/generate_order/new_token_form';
+import { TrackTokenConfirmation } from 'ts/components/track_token_confirmation';
+import { TokenIcon } from 'ts/components/ui/token_icon';
+import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { DialogConfigs, Token, TokenByAddress, TokenState, TokenVisibility } from 'ts/types';
 
 const TOKEN_ICON_DIMENSION = 100;
 const TILE_DIMENSION = 146;
@@ -47,7 +41,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
     public static defaultProps: Partial<AssetPickerProps> = {
         tokenVisibility: TokenVisibility.ALL,
     };
-    private _dialogConfigsByAssetView: {[assetView: string]: DialogConfigs};
+    private _dialogConfigsByAssetView: { [assetView: string]: DialogConfigs };
     constructor(props: AssetPickerProps) {
         super(props);
         this.state = {
@@ -90,25 +84,21 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         return (
             <Dialog
                 title={dialogConfigs.title}
-                titleStyle={{fontWeight: 100}}
+                titleStyle={{ fontWeight: 100 }}
                 modal={dialogConfigs.isModal}
                 open={this.props.isOpen}
                 actions={dialogConfigs.actions}
                 onRequestClose={this._onCloseDialog.bind(this)}
             >
-                {this.state.assetView === AssetViews.ASSET_PICKER &&
-                    this._renderAssetPicker()
-                }
-                {this.state.assetView === AssetViews.NEW_TOKEN_FORM &&
+                {this.state.assetView === AssetViews.ASSET_PICKER && this._renderAssetPicker()}
+                {this.state.assetView === AssetViews.NEW_TOKEN_FORM && (
                     <NewTokenForm
                         blockchain={this.props.blockchain}
                         onNewTokenSubmitted={this._onNewTokenSubmitted.bind(this)}
                         tokenByAddress={this.props.tokenByAddress}
                     />
-                }
-                {this.state.assetView === AssetViews.CONFIRM_TRACK_TOKEN &&
-                    this._renderConfirmTrackToken()
-                }
+                )}
+                {this.state.assetView === AssetViews.CONFIRM_TRACK_TOKEN && this._renderConfirmTrackToken()}
             </Dialog>
         );
     }
@@ -127,7 +117,12 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         return (
             <div
                 className="clearfix flex flex-wrap"
-                style={{overflowY: 'auto', maxWidth: 720, maxHeight: 356, marginBottom: 10}}
+                style={{
+                    overflowY: 'auto',
+                    maxWidth: 720,
+                    maxHeight: 356,
+                    marginBottom: 10,
+                }}
             >
                 {this._renderGridTiles()}
             </div>
@@ -137,8 +132,10 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         let isHovered;
         let tileStyles;
         const gridTiles = _.map(this.props.tokenByAddress, (token: Token, address: string) => {
-            if ((this.props.tokenVisibility === TokenVisibility.TRACKED && !token.isTracked) ||
-                (this.props.tokenVisibility === TokenVisibility.UNTRACKED && token.isTracked)) {
+            if (
+                (this.props.tokenVisibility === TokenVisibility.TRACKED && !token.isTracked) ||
+                (this.props.tokenVisibility === TokenVisibility.UNTRACKED && token.isTracked)
+            ) {
                 return null; // Skip
             }
             isHovered = this.state.hoveredAddress === address;
@@ -149,7 +146,11 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
             return (
                 <div
                     key={address}
-                    style={{width: TILE_DIMENSION, height: TILE_DIMENSION, ...tileStyles}}
+                    style={{
+                        width: TILE_DIMENSION,
+                        height: TILE_DIMENSION,
+                        ...tileStyles,
+                    }}
                     className="p2 mx-auto"
                     onClick={this._onChooseToken.bind(this, address)}
                     onMouseEnter={this._onToggleHover.bind(this, address, true)}
@@ -169,10 +170,14 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
             opacity: isHovered ? 0.6 : 1,
         };
         if (this.props.tokenVisibility !== TokenVisibility.TRACKED) {
-            gridTiles.push((
+            gridTiles.push(
                 <div
                     key={otherTokenKey}
-                    style={{width: TILE_DIMENSION, height: TILE_DIMENSION, ...tileStyles}}
+                    style={{
+                        width: TILE_DIMENSION,
+                        height: TILE_DIMENSION,
+                        ...tileStyles,
+                    }}
                     className="p2 mx-auto"
                     onClick={this._onCustomAssetChosen.bind(this)}
                     onMouseEnter={this._onToggleHover.bind(this, otherTokenKey, true)}
@@ -180,13 +185,13 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
                 >
                     <div className="p1 center">
                         <i
-                            style={{fontSize: 105, paddingLeft: 1, paddingRight: 1}}
+                            style={{ fontSize: 105, paddingLeft: 1, paddingRight: 1 }}
                             className="zmdi zmdi-plus-circle"
                         />
                     </div>
                     <div className="center">Other ERC20 Token</div>
-                </div>
-            ));
+                </div>,
+            );
         }
         return gridTiles;
     }
@@ -251,10 +256,9 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
         newTokenEntry.isTracked = true;
         trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
 
-        const [
-            balance,
-            allowance,
-        ] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(token.address);
+        const [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
+            token.address,
+        );
         this.props.dispatcher.updateTokenStateByAddress({
             [token.address]: {
                 balance,
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';
diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx
index fe40854cb..d0cd6add1 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -2,13 +2,13 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {AddressInput} from 'ts/components/inputs/address_input';
-import {Alert} from 'ts/components/ui/alert';
-import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
-import {RequiredLabel} from 'ts/components/ui/required_label';
-import {AlertTypes, Token, TokenByAddress, TokenState} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { Blockchain } from 'ts/blockchain';
+import { AddressInput } from 'ts/components/inputs/address_input';
+import { Alert } from 'ts/components/ui/alert';
+import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
+import { RequiredLabel } from 'ts/components/ui/required_label';
+import { AlertTypes, Token, TokenByAddress, TokenState } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 
 interface NewTokenFormProps {
     blockchain: Blockchain;
@@ -45,11 +45,11 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
     }
     public render() {
         return (
-            <div className="mx-auto pb2" style={{width: 256}}>
+            <div className="mx-auto pb2" style={{ width: 256 }}>
                 <div>
                     <TextField
                         floatingLabelFixed={true}
-                        floatingLabelStyle={{color: colors.grey}}
+                        floatingLabelStyle={{ color: colors.grey }}
                         floatingLabelText={<RequiredLabel label="Name" />}
                         value={this.state.name}
                         errorText={this.state.nameErrText}
@@ -59,7 +59,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
                 <div>
                     <TextField
                         floatingLabelFixed={true}
-                        floatingLabelStyle={{color: colors.grey}}
+                        floatingLabelStyle={{ color: colors.grey }}
                         floatingLabelText={<RequiredLabel label="Symbol" />}
                         value={this.state.symbol}
                         errorText={this.state.symbolErrText}
@@ -78,14 +78,14 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
                 <div>
                     <TextField
                         floatingLabelFixed={true}
-                        floatingLabelStyle={{color: colors.grey}}
+                        floatingLabelStyle={{ color: colors.grey }}
                         floatingLabelText={<RequiredLabel label="Decimals" />}
                         value={this.state.decimals}
                         errorText={this.state.decimalsErrText}
                         onChange={this._onTokenDecimalsChanged.bind(this)}
                     />
                 </div>
-                <div className="pt2 mx-auto" style={{width: 120}}>
+                <div className="pt2 mx-auto" style={{ width: 120 }}>
                     <LifeCycleRaisedButton
                         labelReady="Add"
                         labelLoading="Adding..."
@@ -93,9 +93,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
                         onClickAsyncFn={this._onAddNewTokenClickAsync.bind(this)}
                     />
                 </div>
-                {this.state.globalErrMsg !== '' &&
-                    <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
-                }
+                {this.state.globalErrMsg !== '' && <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />}
             </div>
         );
     }
@@ -116,18 +114,21 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
         let allowance = new BigNumber(0);
         if (doesContractExist) {
             try {
-                [
-                    balance,
-                    allowance,
-                ] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(this.state.address);
+                [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
+                    this.state.address,
+                );
             } catch (err) {
                 hasBalanceAllowanceErr = true;
             }
         }
 
         let globalErrMsg = '';
-        if (this.state.nameErrText !== '' || this.state.symbolErrText !== '' ||
-            this.state.decimalsErrText !== '' || isAddressIncomplete) {
+        if (
+            this.state.nameErrText !== '' ||
+            this.state.symbolErrText !== '' ||
+            this.state.decimalsErrText !== '' ||
+            isAddressIncomplete
+        ) {
             globalErrMsg = 'Please fix the above issues';
         } else if (!doesContractExist) {
             globalErrMsg = 'No contract found at supplied address';
@@ -164,7 +165,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
         let nameErrText = '';
         const maxLength = 30;
         const tokens = _.values(this.props.tokenByAddress);
-        const tokenWithNameIfExists = _.find(tokens, {name});
+        const tokenWithNameIfExists = _.find(tokens, { name });
         const tokenWithNameExists = !_.isUndefined(tokenWithNameIfExists);
         if (name === '') {
             nameErrText = 'Name is required';
@@ -185,7 +186,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
         let symbolErrText = '';
         const maxLength = 5;
         const tokens = _.values(this.props.tokenByAddress);
-        const tokenWithSymbolExists = !_.isUndefined(_.find(tokens, {symbol}));
+        const tokenWithSymbolExists = !_.isUndefined(_.find(tokens, { symbol }));
         if (symbol === '') {
             symbolErrText = 'Symbol is required';
         } else if (!this._isLetters(symbol)) {
-- 
cgit