From 2041e9945edf6f5255185de73c0dc332270e4bbb Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Fri, 15 Dec 2017 15:19:19 +0100
Subject: Fix website unused vars

---
 packages/website/ts/components/fill_order.tsx | 10 ----------
 1 file changed, 10 deletions(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 388c72d8e..40a9b87d6 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -4,10 +4,7 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import {Card, CardHeader, CardText} from 'material-ui/Card';
 import Divider from 'material-ui/Divider';
-import Paper from 'material-ui/Paper';
 import RaisedButton from 'material-ui/RaisedButton';
-import TextField from 'material-ui/TextField';
-import * as moment from 'moment';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import {Blockchain} from 'ts/blockchain';
@@ -19,18 +16,13 @@ import {Alert} from 'ts/components/ui/alert';
 import {EthereumAddress} from 'ts/components/ui/ethereum_address';
 import {Identicon} from 'ts/components/ui/identicon';
 import {VisualOrder} from 'ts/components/visual_order';
-import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage';
 import {Dispatcher} from 'ts/redux/dispatcher';
 import {orderSchema} from 'ts/schemas/order_schema';
 import {SchemaValidator} from 'ts/schemas/validator';
 import {
     AlertTypes,
     BlockchainErrs,
-    ContractResponse,
-    ExchangeContractErrs,
     Order,
-    OrderToken,
-    Side,
     Token,
     TokenByAddress,
     TokenStateByAddress,
@@ -531,8 +523,6 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         });
 
         const parsedOrder = this.state.parsedOrder;
-        const orderHash = parsedOrder.signature.hash;
-        const unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
         const takerFillAmount = this.props.orderFillAmount;
 
         if (_.isUndefined(this.props.userAddress)) {
-- 
cgit v1.2.3


From df9d3e3e16e5a00ea84369691c46a6e4a6a53049 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 18 Dec 2017 09:15:12 +0100
Subject: Consolidate all custom colors and material-ui colors into a colors
 module

---
 packages/website/ts/components/fill_order.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 40a9b87d6..f7473b79e 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -28,12 +28,11 @@ import {
     TokenStateByAddress,
     WebsitePaths,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {errorReporter} from 'ts/utils/error_reporter';
 import {utils} from 'ts/utils/utils';
 
-const CUSTOM_LIGHT_GRAY = '#BBBBBB';
-
 interface FillOrderProps {
     blockchain: Blockchain;
     blockchainErr: BlockchainErrs;
@@ -222,7 +221,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 <div className="clearfix pb2" style={{width: '100%'}}>
                     <div className="inline left">Order details</div>
                     <div className="inline right" style={{minWidth: 208}}>
-                        <div className="col col-4 pl2" style={{color: '#BEBEBE'}}>
+                        <div className="col col-4 pl2" style={{color: colors.gray}}>
                             Maker:
                         </div>
                         <div className="col col-2 pr1">
@@ -274,7 +273,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                        </div>
                        <div
                            className="col col-5 pl1"
-                           style={{color: CUSTOM_LIGHT_GRAY, paddingTop: 39}}
+                           style={{color: colors.lightGray, paddingTop: 39}}
                        >
                            = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
                        </div>
-- 
cgit v1.2.3


From 445ff1e28ee572236ec963a27bff227e859f685c Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 18 Dec 2017 10:06:16 +0100
Subject: Standardize colors to always be in uppercase hex and consolidate
 material-ui greys

---
 packages/website/ts/components/fill_order.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index f7473b79e..f91540c26 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -221,7 +221,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 <div className="clearfix pb2" style={{width: '100%'}}>
                     <div className="inline left">Order details</div>
                     <div className="inline right" style={{minWidth: 208}}>
-                        <div className="col col-4 pl2" style={{color: colors.gray}}>
+                        <div className="col col-4 pl2" style={{color: colors.grey}}>
                             Maker:
                         </div>
                         <div className="col col-2 pr1">
@@ -273,7 +273,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                        </div>
                        <div
                            className="col col-5 pl1"
-                           style={{color: colors.lightGray, paddingTop: 39}}
+                           style={{color: colors.grey400, paddingTop: 39}}
                        >
                            = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
                        </div>
-- 
cgit v1.2.3


From 1aed970ce3468306f3bedbfdc29669d42e487441 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 18 Dec 2017 10:28:34 +0100
Subject: standarize on `grey` over `gray` spelling and other color related
 fixes

---
 packages/website/ts/components/fill_order.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index f91540c26..c96dfe27a 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -323,7 +323,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 Order successfully filled. See the trade details in your{' '}
                 <Link
                     to={`${WebsitePaths.Portal}/trades`}
-                    style={{color: 'white'}}
+                    style={{color: colors.white}}
                 >
                     trade history
                 </Link>
-- 
cgit v1.2.3


From b7004b30029f26e3a556676f5e713ba23cd5151d Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 19 Dec 2017 11:25:50 +0100
Subject: Refactor remaining _.assign to spread operator

---
 packages/website/ts/components/fill_order.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index c96dfe27a..044424fe0 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -380,22 +380,24 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         const isUnseenMakerToken = _.isUndefined(makerTokenIfExists);
         const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && makerTokenIfExists.isTracked;
         if (isUnseenMakerToken) {
-            tokensToTrack.push(_.assign({}, this.state.parsedOrder.maker.token, {
+            tokensToTrack.push({
+                ...this.state.parsedOrder.maker.token,
                 iconUrl: undefined,
                 isTracked: false,
                 isRegistered: false,
-            }));
+            });
         } else if (!isMakerTokenTracked) {
             tokensToTrack.push(makerTokenIfExists);
         }
         const isUnseenTakerToken = _.isUndefined(takerTokenIfExists);
         const isTakerTokenTracked = !_.isUndefined(takerTokenIfExists) && takerTokenIfExists.isTracked;
         if (isUnseenTakerToken) {
-            tokensToTrack.push(_.assign({}, this.state.parsedOrder.taker.token, {
+            tokensToTrack.push({
+                ...this.state.parsedOrder.taker.token,
                 iconUrl: undefined,
                 isTracked: false,
                 isRegistered: false,
-            }));
+            });
         } else if (!isTakerTokenTracked) {
             tokensToTrack.push(takerTokenIfExists);
         }
-- 
cgit v1.2.3


From 66fe7b88b0892b5a5c7a06d66bec9035dd7782f0 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 19 Dec 2017 12:38:41 +0100
Subject: Fix overflow issue on calculated fillAmount

---
 packages/website/ts/components/fill_order.tsx | 28 +++++++++++++--------------
 1 file changed, 13 insertions(+), 15 deletions(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 044424fe0..ac826fdf6 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -258,22 +258,20 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                     </div>
                 </div>
                 {!isUserMaker &&
-                    <div className="clearfix mx-auto" style={{width: 315, height: 108}}>
-                       <div className="col col-7" style={{maxWidth: 235}}>
-                           <TokenAmountInput
-                               label="Fill amount"
-                               onChange={this.onFillAmountChange.bind(this)}
-                               shouldShowIncompleteErrs={false}
-                               token={fillToken}
-                               tokenState={fillTokenState}
-                               amount={fillAssetToken.amount}
-                               shouldCheckBalance={true}
-                               shouldCheckAllowance={true}
-                           />
-                       </div>
+                    <div className="clearfix mx-auto relative" style={{width: 235, height: 108}}>
+                       <TokenAmountInput
+                           label="Fill amount"
+                           onChange={this.onFillAmountChange.bind(this)}
+                           shouldShowIncompleteErrs={false}
+                           token={fillToken}
+                           tokenState={fillTokenState}
+                           amount={fillAssetToken.amount}
+                           shouldCheckBalance={true}
+                           shouldCheckAllowance={true}
+                       />
                        <div
-                           className="col col-5 pl1"
-                           style={{color: colors.grey400, paddingTop: 39}}
+                           className="absolute sm-hide xs-hide"
+                           style={{color: colors.grey400, right: -247, top: 39, width: 242}}
                        >
                            = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
                        </div>
-- 
cgit v1.2.3


From cb11aec84df346d5180c7d5874859c1c34f0bf1c Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 20 Dec 2017 00:44:08 -0500
Subject: Add new underscore-privates rule to @0xproject/tslint-config and fix
 lint errors

---
 packages/website/ts/components/fill_order.tsx | 70 +++++++++++++--------------
 1 file changed, 35 insertions(+), 35 deletions(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index ac826fdf6..c8c9cc0d8 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -66,7 +66,7 @@ interface FillOrderState {
 }
 
 export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
-    private validator: SchemaValidator;
+    private _validator: SchemaValidator;
     constructor(props: FillOrderProps) {
         super(props);
         this.state = {
@@ -87,12 +87,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             isConfirmingTokenTracking: false,
             tokensToTrack: [],
         };
-        this.validator = new SchemaValidator();
+        this._validator = new SchemaValidator();
     }
     public componentWillMount() {
         if (!_.isEmpty(this.state.orderJSON)) {
             // tslint:disable-next-line:no-floating-promises
-            this.validateFillOrderFireAndForgetAsync(this.state.orderJSON);
+            this._validateFillOrderFireAndForgetAsync(this.state.orderJSON);
         }
     }
     public componentDidMount() {
@@ -115,15 +115,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                                 tokenByAddress={this.props.tokenByAddress}
                                 networkId={this.props.networkId}
                                 orderJSON={this.state.orderJSON}
-                                onFillOrderJSONChanged={this.onFillOrderJSONChanged.bind(this)}
+                                onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)}
                             />
-                            {this.renderOrderJsonNotices()}
+                            {this._renderOrderJsonNotices()}
                         </div>
                     }
                     <div>
                         {!_.isUndefined(this.state.parsedOrder) && this.state.didOrderValidationRun
                          && this.state.areAllInvolvedTokensTracked &&
-                             this.renderVisualOrder()
+                             this._renderVisualOrder()
                         }
                     </div>
                     {this.props.isOrderInUrl &&
@@ -140,17 +140,17 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                                         tokenByAddress={this.props.tokenByAddress}
                                         networkId={this.props.networkId}
                                         orderJSON={this.state.orderJSON}
-                                        onFillOrderJSONChanged={this.onFillOrderJSONChanged.bind(this)}
+                                        onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)}
                                     />
                                 </CardText>
                             </Card>
-                            {this.renderOrderJsonNotices()}
+                            {this._renderOrderJsonNotices()}
                         </div>
                     }
                 </div>
                 <FillWarningDialog
                     isOpen={this.state.isFillWarningDialogOpen}
-                    onToggleDialog={this.onFillWarningClosed.bind(this)}
+                    onToggleDialog={this._onFillWarningClosed.bind(this)}
                 />
                 <TrackTokenConfirmationDialog
                     userAddress={this.props.userAddress}
@@ -160,12 +160,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                     dispatcher={this.props.dispatcher}
                     tokens={this.state.tokensToTrack}
                     isOpen={this.state.isConfirmingTokenTracking}
-                    onToggleDialog={this.onToggleTrackConfirmDialog.bind(this)}
+                    onToggleDialog={this._onToggleTrackConfirmDialog.bind(this)}
                 />
             </div>
         );
     }
-    private renderOrderJsonNotices() {
+    private _renderOrderJsonNotices() {
         return (
             <div>
                 {!_.isUndefined(this.props.initialOrder) && !this.state.didOrderValidationRun &&
@@ -182,7 +182,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             </div>
         );
     }
-    private renderVisualOrder() {
+    private _renderVisualOrder() {
         const takerTokenAddress = this.state.parsedOrder.taker.token.address;
         const takerToken = this.props.tokenByAddress[takerTokenAddress];
         const orderTakerAmount = new BigNumber(this.state.parsedOrder.taker.amount);
@@ -211,7 +211,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         let orderReceiveAmount = 0;
         if (!_.isUndefined(this.props.orderFillAmount)) {
             const orderReceiveAmountBigNumber = exchangeRate.mul(this.props.orderFillAmount);
-            orderReceiveAmount = this.formatCurrencyAmount(orderReceiveAmountBigNumber, makerToken.decimals);
+            orderReceiveAmount = this._formatCurrencyAmount(orderReceiveAmountBigNumber, makerToken.decimals);
         }
         const isUserMaker = !_.isUndefined(this.state.parsedOrder) &&
                           this.state.parsedOrder.maker.address === this.props.userAddress;
@@ -261,7 +261,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                     <div className="clearfix mx-auto relative" style={{width: 235, height: 108}}>
                        <TokenAmountInput
                            label="Fill amount"
-                           onChange={this.onFillAmountChange.bind(this)}
+                           onChange={this._onFillAmountChange.bind(this)}
                            shouldShowIncompleteErrs={false}
                            token={fillToken}
                            tokenState={fillTokenState}
@@ -284,12 +284,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                                 style={{width: '100%'}}
                                 disabled={this.state.isCancelling}
                                 label={this.state.isCancelling ? 'Cancelling order...' : 'Cancel order'}
-                                onClick={this.onCancelOrderClickFireAndForgetAsync.bind(this)}
+                                onClick={this._onCancelOrderClickFireAndForgetAsync.bind(this)}
                             />
                             {this.state.didCancelOrderSucceed &&
                                 <Alert
                                     type={AlertTypes.SUCCESS}
-                                    message={this.renderCancelSuccessMsg()}
+                                    message={this._renderCancelSuccessMsg()}
                                 />
                             }
                         </div> :
@@ -298,7 +298,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                                 style={{width: '100%'}}
                                 disabled={this.state.isFilling}
                                 label={this.state.isFilling ? 'Filling order...' : 'Fill order'}
-                                onClick={this.onFillOrderClick.bind(this)}
+                                onClick={this._onFillOrderClick.bind(this)}
                             />
                             {!_.isEmpty(this.state.globalErrMsg) &&
                                 <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
@@ -306,7 +306,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                             {this.state.didFillOrderSucceed &&
                                 <Alert
                                     type={AlertTypes.SUCCESS}
-                                    message={this.renderFillSuccessMsg()}
+                                    message={this._renderFillSuccessMsg()}
                                 />
                             }
                         </div>
@@ -315,7 +315,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             </div>
         );
     }
-    private renderFillSuccessMsg() {
+    private _renderFillSuccessMsg() {
         return (
             <div>
                 Order successfully filled. See the trade details in your{' '}
@@ -328,45 +328,45 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             </div>
         );
     }
-    private renderCancelSuccessMsg() {
+    private _renderCancelSuccessMsg() {
         return (
             <div>
                 Order successfully cancelled.
             </div>
         );
     }
-    private onFillOrderClick() {
+    private _onFillOrderClick() {
         if (!this.state.isMakerTokenAddressInRegistry || !this.state.isTakerTokenAddressInRegistry) {
             this.setState({
                 isFillWarningDialogOpen: true,
             });
         } else {
             // tslint:disable-next-line:no-floating-promises
-            this.onFillOrderClickFireAndForgetAsync();
+            this._onFillOrderClickFireAndForgetAsync();
         }
     }
-    private onFillWarningClosed(didUserCancel: boolean) {
+    private _onFillWarningClosed(didUserCancel: boolean) {
         this.setState({
             isFillWarningDialogOpen: false,
         });
         if (!didUserCancel) {
             // tslint:disable-next-line:no-floating-promises
-            this.onFillOrderClickFireAndForgetAsync();
+            this._onFillOrderClickFireAndForgetAsync();
         }
     }
-    private onFillAmountChange(isValid: boolean, amount?: BigNumber) {
+    private _onFillAmountChange(isValid: boolean, amount?: BigNumber) {
         this.props.dispatcher.updateOrderFillAmount(amount);
     }
-    private onFillOrderJSONChanged(event: any) {
+    private _onFillOrderJSONChanged(event: any) {
         const orderJSON = event.target.value;
         this.setState({
             didOrderValidationRun: _.isEmpty(orderJSON) && _.isEmpty(this.state.orderJSONErrMsg),
             didFillOrderSucceed: false,
         });
         // tslint:disable-next-line:no-floating-promises
-        this.validateFillOrderFireAndForgetAsync(orderJSON);
+        this._validateFillOrderFireAndForgetAsync(orderJSON);
     }
-    private async checkForUntrackedTokensAndAskToAdd() {
+    private async _checkForUntrackedTokensAndAskToAdd() {
         if (!_.isEmpty(this.state.orderJSONErrMsg)) {
             return;
         }
@@ -410,12 +410,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             });
         }
     }
-    private async validateFillOrderFireAndForgetAsync(orderJSON: string) {
+    private async _validateFillOrderFireAndForgetAsync(orderJSON: string) {
         let orderJSONErrMsg = '';
         let parsedOrder: Order;
         try {
             const order = JSON.parse(orderJSON);
-            const validationResult = this.validator.validate(order, orderSchema);
+            const validationResult = this._validator.validate(order, orderSchema);
             if (validationResult.errors.length > 0) {
                 orderJSONErrMsg = 'Submitted order JSON is not a valid order';
                 utils.consoleLog(`Unexpected order JSON validation error: ${validationResult.errors.join(', ')}`);
@@ -508,9 +508,9 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             unavailableTakerAmount,
         });
 
-        await this.checkForUntrackedTokensAndAskToAdd();
+        await this._checkForUntrackedTokensAndAskToAdd();
     }
-    private async onFillOrderClickFireAndForgetAsync(): Promise<void> {
+    private async _onFillOrderClickFireAndForgetAsync(): Promise<void> {
         if (!_.isEmpty(this.props.blockchainErr) || _.isEmpty(this.props.userAddress)) {
             this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
             return;
@@ -601,7 +601,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             return;
         }
     }
-    private async onCancelOrderClickFireAndForgetAsync(): Promise<void> {
+    private async _onCancelOrderClickFireAndForgetAsync(): Promise<void> {
         if (!_.isEmpty(this.props.blockchainErr) || _.isEmpty(this.props.userAddress)) {
             this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
             return;
@@ -684,12 +684,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             return;
         }
     }
-    private formatCurrencyAmount(amount: BigNumber, decimals: number): number {
+    private _formatCurrencyAmount(amount: BigNumber, decimals: number): number {
         const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
         const roundedUnitAmount = Math.round(unitAmount.toNumber() * 100000) / 100000;
         return roundedUnitAmount;
     }
-    private onToggleTrackConfirmDialog(didConfirmTokenTracking: boolean) {
+    private _onToggleTrackConfirmDialog(didConfirmTokenTracking: boolean) {
         if (!didConfirmTokenTracking) {
             this.setState({
                 orderJSON: '',
-- 
cgit v1.2.3


From 42b3a7c9d756dd2c68256707c0c96a95370329bd Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 20 Dec 2017 18:36:12 +0100
Subject: Move call to error reporter to end of handler so that even if
 reporting the error takes a while, it doesn't block the UI

---
 packages/website/ts/components/fill_order.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index ac826fdf6..73850f3b9 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -594,10 +594,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             }
             globalErrMsg = 'Failed to fill order, please refresh and try again';
             utils.consoleLog(`${err}`);
-            await errorReporter.reportAsync(err);
             this.setState({
                 globalErrMsg,
             });
+            await errorReporter.reportAsync(err);
             return;
         }
     }
@@ -677,10 +677,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             }
             globalErrMsg = 'Failed to cancel order, please refresh and try again';
             utils.consoleLog(`${err}`);
-            await errorReporter.reportAsync(err);
             this.setState({
                 globalErrMsg,
             });
+            await errorReporter.reportAsync(err);
             return;
         }
     }
-- 
cgit v1.2.3


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

---
 packages/website/ts/components/fill_order.tsx | 235 ++++++++++++--------------
 1 file changed, 108 insertions(+), 127 deletions(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index abb46f7f2..178b1adaf 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,37 +1,29 @@
-import {Order as ZeroExOrder, ZeroEx} from '0x.js';
+import { Order as ZeroExOrder, ZeroEx } from '0x.js';
 import * as accounting from 'accounting';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {Card, CardHeader, CardText} from 'material-ui/Card';
+import { Card, CardHeader, CardText } from 'material-ui/Card';
 import Divider from 'material-ui/Divider';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
-import {Link} from 'react-router-dom';
-import {Blockchain} from 'ts/blockchain';
-import {TrackTokenConfirmationDialog} from 'ts/components/dialogs/track_token_confirmation_dialog';
-import {FillOrderJSON} from 'ts/components/fill_order_json';
-import {FillWarningDialog} from 'ts/components/fill_warning_dialog';
-import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
-import {Alert} from 'ts/components/ui/alert';
-import {EthereumAddress} from 'ts/components/ui/ethereum_address';
-import {Identicon} from 'ts/components/ui/identicon';
-import {VisualOrder} from 'ts/components/visual_order';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {orderSchema} from 'ts/schemas/order_schema';
-import {SchemaValidator} from 'ts/schemas/validator';
-import {
-    AlertTypes,
-    BlockchainErrs,
-    Order,
-    Token,
-    TokenByAddress,
-    TokenStateByAddress,
-    WebsitePaths,
-} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
-import {errorReporter} from 'ts/utils/error_reporter';
-import {utils} from 'ts/utils/utils';
+import { Link } from 'react-router-dom';
+import { Blockchain } from 'ts/blockchain';
+import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog';
+import { FillOrderJSON } from 'ts/components/fill_order_json';
+import { FillWarningDialog } from 'ts/components/fill_warning_dialog';
+import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { Alert } from 'ts/components/ui/alert';
+import { EthereumAddress } from 'ts/components/ui/ethereum_address';
+import { Identicon } from 'ts/components/ui/identicon';
+import { VisualOrder } from 'ts/components/visual_order';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { orderSchema } from 'ts/schemas/order_schema';
+import { SchemaValidator } from 'ts/schemas/validator';
+import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, TokenStateByAddress, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
 
 interface FillOrderProps {
     blockchain: Blockchain;
@@ -100,15 +92,13 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
     }
     public render() {
         return (
-            <div className="clearfix lg-px4 md-px4 sm-px2" style={{minHeight: 600}}>
+            <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}>
                 <h3>Fill an order</h3>
                 <Divider />
                 <div>
-                    {!this.props.isOrderInUrl &&
+                    {!this.props.isOrderInUrl && (
                         <div>
-                            <div className="pt2 pb2">
-                                Paste an order JSON snippet below to begin
-                            </div>
+                            <div className="pt2 pb2">Paste an order JSON snippet below to begin</div>
                             <div className="pb2">Order JSON</div>
                             <FillOrderJSON
                                 blockchain={this.props.blockchain}
@@ -119,21 +109,23 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                             />
                             {this._renderOrderJsonNotices()}
                         </div>
-                    }
+                    )}
                     <div>
-                        {!_.isUndefined(this.state.parsedOrder) && this.state.didOrderValidationRun
-                         && this.state.areAllInvolvedTokensTracked &&
-                             this._renderVisualOrder()
-                        }
+                        {!_.isUndefined(this.state.parsedOrder) &&
+                            this.state.didOrderValidationRun &&
+                            this.state.areAllInvolvedTokensTracked &&
+                            this._renderVisualOrder()}
                     </div>
-                    {this.props.isOrderInUrl &&
+                    {this.props.isOrderInUrl && (
                         <div className="pt2">
-                            <Card style={{boxShadow: 'none', backgroundColor: 'none', border: '1px solid #eceaea'}}>
-                                <CardHeader
-                                    title="Order JSON"
-                                    actAsExpander={true}
-                                    showExpandableButton={true}
-                                />
+                            <Card
+                                style={{
+                                    boxShadow: 'none',
+                                    backgroundColor: 'none',
+                                    border: '1px solid #eceaea',
+                                }}
+                            >
+                                <CardHeader title="Order JSON" actAsExpander={true} showExpandableButton={true} />
                                 <CardText expandable={true}>
                                     <FillOrderJSON
                                         blockchain={this.props.blockchain}
@@ -146,7 +138,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                             </Card>
                             {this._renderOrderJsonNotices()}
                         </div>
-                    }
+                    )}
                 </div>
                 <FillWarningDialog
                     isOpen={this.state.isFillWarningDialogOpen}
@@ -168,17 +160,18 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
     private _renderOrderJsonNotices() {
         return (
             <div>
-                {!_.isUndefined(this.props.initialOrder) && !this.state.didOrderValidationRun &&
-                    <div className="pt2">
-                        <span className="pr1">
-                            <i className="zmdi zmdi-spinner zmdi-hc-spin" />
-                        </span>
-                        <span>Validating order...</span>
-                    </div>
-                }
-                {!_.isEmpty(this.state.orderJSONErrMsg) &&
+                {!_.isUndefined(this.props.initialOrder) &&
+                    !this.state.didOrderValidationRun && (
+                        <div className="pt2">
+                            <span className="pr1">
+                                <i className="zmdi zmdi-spinner zmdi-hc-spin" />
+                            </span>
+                            <span>Validating order...</span>
+                        </div>
+                    )}
+                {!_.isEmpty(this.state.orderJSONErrMsg) && (
                     <Alert type={AlertTypes.ERROR} message={this.state.orderJSONErrMsg} />
-                }
+                )}
             </div>
         );
     }
@@ -203,8 +196,9 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             amount: this.props.orderFillAmount,
             symbol: takerToken.symbol,
         };
-        const orderTaker = !_.isEmpty(this.state.parsedOrder.taker.address) ? this.state.parsedOrder.taker.address :
-                           this.props.userAddress;
+        const orderTaker = !_.isEmpty(this.state.parsedOrder.taker.address)
+            ? this.state.parsedOrder.taker.address
+            : this.props.userAddress;
         const parsedOrderExpiration = new BigNumber(this.state.parsedOrder.expiration);
         const exchangeRate = orderMakerAmount.div(orderTakerAmount);
 
@@ -213,22 +207,19 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             const orderReceiveAmountBigNumber = exchangeRate.mul(this.props.orderFillAmount);
             orderReceiveAmount = this._formatCurrencyAmount(orderReceiveAmountBigNumber, makerToken.decimals);
         }
-        const isUserMaker = !_.isUndefined(this.state.parsedOrder) &&
-                          this.state.parsedOrder.maker.address === this.props.userAddress;
+        const isUserMaker =
+            !_.isUndefined(this.state.parsedOrder) && this.state.parsedOrder.maker.address === this.props.userAddress;
         const expiryDate = utils.convertToReadableDateTimeFromUnixTimestamp(parsedOrderExpiration);
         return (
             <div className="pt3 pb1">
-                <div className="clearfix pb2" style={{width: '100%'}}>
+                <div className="clearfix pb2" style={{ width: '100%' }}>
                     <div className="inline left">Order details</div>
-                    <div className="inline right" style={{minWidth: 208}}>
-                        <div className="col col-4 pl2" style={{color: colors.grey}}>
+                    <div className="inline right" style={{ minWidth: 208 }}>
+                        <div className="col col-4 pl2" style={{ color: colors.grey }}>
                             Maker:
                         </div>
                         <div className="col col-2 pr1">
-                            <Identicon
-                                address={this.state.parsedOrder.maker.address}
-                                diameter={23}
-                            />
+                            <Identicon address={this.state.parsedOrder.maker.address} diameter={23} />
                         </div>
                         <div className="col col-6">
                             <EthereumAddress
@@ -252,65 +243,63 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                             isMakerTokenAddressInRegistry={this.state.isMakerTokenAddressInRegistry}
                             isTakerTokenAddressInRegistry={this.state.isTakerTokenAddressInRegistry}
                         />
-                        <div className="center pt3 pb2">
-                            Expires: {expiryDate} UTC
-                        </div>
+                        <div className="center pt3 pb2">Expires: {expiryDate} UTC</div>
                     </div>
                 </div>
-                {!isUserMaker &&
-                    <div className="clearfix mx-auto relative" style={{width: 235, height: 108}}>
-                       <TokenAmountInput
-                           label="Fill amount"
-                           onChange={this._onFillAmountChange.bind(this)}
-                           shouldShowIncompleteErrs={false}
-                           token={fillToken}
-                           tokenState={fillTokenState}
-                           amount={fillAssetToken.amount}
-                           shouldCheckBalance={true}
-                           shouldCheckAllowance={true}
-                       />
-                       <div
-                           className="absolute sm-hide xs-hide"
-                           style={{color: colors.grey400, right: -247, top: 39, width: 242}}
-                       >
-                           = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
-                       </div>
+                {!isUserMaker && (
+                    <div className="clearfix mx-auto relative" style={{ width: 235, height: 108 }}>
+                        <TokenAmountInput
+                            label="Fill amount"
+                            onChange={this._onFillAmountChange.bind(this)}
+                            shouldShowIncompleteErrs={false}
+                            token={fillToken}
+                            tokenState={fillTokenState}
+                            amount={fillAssetToken.amount}
+                            shouldCheckBalance={true}
+                            shouldCheckAllowance={true}
+                        />
+                        <div
+                            className="absolute sm-hide xs-hide"
+                            style={{
+                                color: colors.grey400,
+                                right: -247,
+                                top: 39,
+                                width: 242,
+                            }}
+                        >
+                            = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
+                        </div>
                     </div>
-                }
+                )}
                 <div>
-                    {isUserMaker ?
+                    {isUserMaker ? (
                         <div>
                             <RaisedButton
-                                style={{width: '100%'}}
+                                style={{ width: '100%' }}
                                 disabled={this.state.isCancelling}
                                 label={this.state.isCancelling ? 'Cancelling order...' : 'Cancel order'}
                                 onClick={this._onCancelOrderClickFireAndForgetAsync.bind(this)}
                             />
-                            {this.state.didCancelOrderSucceed &&
-                                <Alert
-                                    type={AlertTypes.SUCCESS}
-                                    message={this._renderCancelSuccessMsg()}
-                                />
-                            }
-                        </div> :
+                            {this.state.didCancelOrderSucceed && (
+                                <Alert type={AlertTypes.SUCCESS} message={this._renderCancelSuccessMsg()} />
+                            )}
+                        </div>
+                    ) : (
                         <div>
                             <RaisedButton
-                                style={{width: '100%'}}
+                                style={{ width: '100%' }}
                                 disabled={this.state.isFilling}
                                 label={this.state.isFilling ? 'Filling order...' : 'Fill order'}
                                 onClick={this._onFillOrderClick.bind(this)}
                             />
-                            {!_.isEmpty(this.state.globalErrMsg) &&
+                            {!_.isEmpty(this.state.globalErrMsg) && (
                                 <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
-                            }
-                            {this.state.didFillOrderSucceed &&
-                                <Alert
-                                    type={AlertTypes.SUCCESS}
-                                    message={this._renderFillSuccessMsg()}
-                                />
-                            }
+                            )}
+                            {this.state.didFillOrderSucceed && (
+                                <Alert type={AlertTypes.SUCCESS} message={this._renderFillSuccessMsg()} />
+                            )}
                         </div>
-                    }
+                    )}
                 </div>
             </div>
         );
@@ -319,21 +308,14 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         return (
             <div>
                 Order successfully filled. See the trade details in your{' '}
-                <Link
-                    to={`${WebsitePaths.Portal}/trades`}
-                    style={{color: colors.white}}
-                >
+                <Link to={`${WebsitePaths.Portal}/trades`} style={{ color: colors.white }}>
                     trade history
                 </Link>
             </div>
         );
     }
     private _renderCancelSuccessMsg() {
-        return (
-            <div>
-                Order successfully cancelled.
-            </div>
-        );
+        return <div>Order successfully cancelled.</div>;
     }
     private _onFillOrderClick() {
         if (!this.state.isMakerTokenAddressInRegistry || !this.state.isTakerTokenAddressInRegistry) {
@@ -554,11 +536,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         if (_.isEmpty(globalErrMsg)) {
             try {
                 await this.props.blockchain.validateFillOrderThrowIfInvalidAsync(
-                    signedOrder, takerFillAmount, this.props.userAddress);
-            } catch (err) {
-                globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(
-                    err.message, parsedOrder.taker.address,
+                    signedOrder,
+                    takerFillAmount,
+                    this.props.userAddress,
                 );
+            } catch (err) {
+                globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.taker.address);
             }
         }
         if (!_.isEmpty(globalErrMsg)) {
@@ -570,7 +553,8 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         }
         try {
             const orderFilledAmount: BigNumber = await this.props.blockchain.fillOrderAsync(
-                signedOrder, this.props.orderFillAmount,
+                signedOrder,
+                this.props.orderFillAmount,
             );
             // After fill completes, let's update the token balances
             const makerToken = this.props.tokenByAddress[parsedOrder.maker.token.address];
@@ -644,8 +628,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         const unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
         const availableTakerTokenAmount = takerTokenAmount.minus(unavailableTakerAmount);
         try {
-            await this.props.blockchain.validateCancelOrderThrowIfInvalidAsync(
-                signedOrder, availableTakerTokenAmount);
+            await this.props.blockchain.validateCancelOrderThrowIfInvalidAsync(signedOrder, availableTakerTokenAmount);
         } catch (err) {
             globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.taker.address);
         }
@@ -657,9 +640,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             return;
         }
         try {
-            await this.props.blockchain.cancelOrderAsync(
-                signedOrder, availableTakerTokenAmount,
-            );
+            await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount);
             this.setState({
                 isCancelling: false,
                 didCancelOrderSucceed: true,
-- 
cgit v1.2.3


From 4dfa720f2dec2be0b0758633c087579a02e482bb Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Thu, 4 Jan 2018 12:38:19 +0100
Subject: Use configured version of bignumber in all packages

---
 packages/website/ts/components/fill_order.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 178b1adaf..4e42164c9 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,6 +1,6 @@
 import { Order as ZeroExOrder, ZeroEx } from '0x.js';
 import * as accounting from 'accounting';
-import BigNumber from 'bignumber.js';
+import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import { Card, CardHeader, CardText } from 'material-ui/Card';
 import Divider from 'material-ui/Divider';
-- 
cgit v1.2.3


From e2ef0c5b9419fa1536a1b7e478f7950e69e8ff0e Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Thu, 4 Jan 2018 15:12:32 +0100
Subject: Fix linter errors

---
 packages/website/ts/components/fill_order.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 4e42164c9..ab6cdb5f3 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,6 +1,6 @@
 import { Order as ZeroExOrder, ZeroEx } from '0x.js';
-import * as accounting from 'accounting';
 import { BigNumber } from '@0xproject/utils';
+import * as accounting from 'accounting';
 import * as _ from 'lodash';
 import { Card, CardHeader, CardText } from 'material-ui/Card';
 import Divider from 'material-ui/Divider';
-- 
cgit v1.2.3


From 8a858501f2b633f47cec9576b25e6f99911bbc09 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sun, 21 Jan 2018 17:48:32 +0100
Subject: Fix fill/cancel order by looking for NoError instead of empty
 blockchainErr given the BlockchainErrs type refactor

---
 packages/website/ts/components/fill_order.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components/fill_order.tsx')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index ab6cdb5f3..1a150e9ee 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -493,7 +493,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         await this._checkForUntrackedTokensAndAskToAdd();
     }
     private async _onFillOrderClickFireAndForgetAsync(): Promise<void> {
-        if (!_.isEmpty(this.props.blockchainErr) || _.isEmpty(this.props.userAddress)) {
+        if (this.props.blockchainErr !== BlockchainErrs.NoError || _.isEmpty(this.props.userAddress)) {
             this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
             return;
         }
@@ -586,7 +586,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         }
     }
     private async _onCancelOrderClickFireAndForgetAsync(): Promise<void> {
-        if (!_.isEmpty(this.props.blockchainErr) || _.isEmpty(this.props.userAddress)) {
+        if (this.props.blockchainErr !== BlockchainErrs.NoError || _.isEmpty(this.props.userAddress)) {
             this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
             return;
         }
-- 
cgit v1.2.3

