1 files changed, 23 insertions, 17 deletions

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 1a150e9ee..d0cfd2cf5 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -19,7 +19,7 @@ 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 { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
@@ -33,9 +33,9 @@ interface FillOrderProps {
     networkId: number;
     userAddress: string;
     tokenByAddress: TokenByAddress;
-    tokenStateByAddress: TokenStateByAddress;
     initialOrder: Order;
     dispatcher: Dispatcher;
+    lastForceTokenStateRefetch: number;
 }
 
 interface FillOrderState {
@@ -59,8 +59,10 @@ interface FillOrderState {
 
 export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
     private _validator: SchemaValidator;
+    private _isUnmounted: boolean;
     constructor(props: FillOrderProps) {
         super(props);
+        this._isUnmounted = false;
         this.state = {
             globalErrMsg: '',
             didOrderValidationRun: false,
@@ -90,6 +92,9 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
     public componentDidMount() {
         window.scrollTo(0, 0);
     }
+    public componentWillUnmount() {
+        this._isUnmounted = true;
+    }
     public render() {
         return (
             <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}>
@@ -185,7 +190,6 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             symbol: takerToken.symbol,
         };
         const fillToken = this.props.tokenByAddress[takerToken.address];
-        const fillTokenState = this.props.tokenStateByAddress[takerToken.address];
         const makerTokenAddress = this.state.parsedOrder.maker.token.address;
         const makerToken = this.props.tokenByAddress[makerTokenAddress];
         const makerAssetToken = {
@@ -249,14 +253,17 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 {!isUserMaker && (
                     <div className="clearfix mx-auto relative" style={{ width: 235, height: 108 }}>
                         <TokenAmountInput
+                            blockchain={this.props.blockchain}
+                            userAddress={this.props.userAddress}
+                            networkId={this.props.networkId}
                             label="Fill amount"
                             onChange={this._onFillAmountChange.bind(this)}
                             shouldShowIncompleteErrs={false}
                             token={fillToken}
-                            tokenState={fillTokenState}
                             amount={fillAssetToken.amount}
                             shouldCheckBalance={true}
                             shouldCheckAllowance={true}
+                            lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
                         />
                         <div
                             className="absolute sm-hide xs-hide"
@@ -454,12 +461,14 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             if (!_.isEmpty(orderJSON)) {
                 orderJSONErrMsg = 'Submitted order JSON is not valid JSON';
             }
-            this.setState({
-                didOrderValidationRun: true,
-                orderJSON,
-                orderJSONErrMsg,
-                parsedOrder,
-            });
+            if (!this._isUnmounted) {
+                this.setState({
+                    didOrderValidationRun: true,
+                    orderJSON,
+                    orderJSONErrMsg,
+                    parsedOrder,
+                });
+            }
             return;
         }
 
@@ -556,11 +565,8 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 signedOrder,
                 this.props.orderFillAmount,
             );
-            // After fill completes, let's update the token balances
-            const makerToken = this.props.tokenByAddress[parsedOrder.maker.token.address];
-            const takerToken = this.props.tokenByAddress[parsedOrder.taker.token.address];
-            const tokens = [makerToken, takerToken];
-            await this.props.blockchain.updateTokenBalancesAndAllowancesAsync(tokens);
+            // After fill completes, let's force fetch the token balances
+            this.props.dispatcher.forceTokenStateRefetch();
             this.setState({
                 isFilling: false,
                 didFillOrderSucceed: true,
@@ -573,7 +579,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 isFilling: false,
             });
             const errMsg = `${err}`;
-            if (_.includes(errMsg, 'User denied transaction signature')) {
+            if (utils.didUserDenyWeb3Request(errMsg)) {
                 return;
             }
             globalErrMsg = 'Failed to fill order, please refresh and try again';
@@ -653,7 +659,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 isCancelling: false,
             });
             const errMsg = `${err}`;
-            if (_.includes(errMsg, 'User denied transaction signature')) {
+            if (utils.didUserDenyWeb3Request(errMsg)) {
                 return;
             }
             globalErrMsg = 'Failed to cancel order, please refresh and try again';