Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/input-fees-rounding

CODEOWNERS

@@ -10,20 +10,26 @@ packages/instant/  @BMillman19 @fragosti @steveklebanoff
 packages/website/  @BMillman19 @fragosti @fabioberger @steveklebanoff
 
 # Dev tools & setup
+.circleci/ @LogvinovLeon
 packages/abi-gen/ @LogvinovLeon
 packages/base-contract/ @LogvinovLeon
+packages/connect/ @fragosti 
 packages/contract_templates/ @LogvinovLeon
+packages/contract-addresses/ @albrow
+packages/contract-artifacts/ @albrow
 packages/dev-utils/ @LogvinovLeon @fabioberger
-
+packages/devnet/ @albrow
 packages/ethereum-types/ @LogvinovLeon
 packages/metacoin/ @LogvinovLeon
+packages/monorepo-scripts/ @fabioberger
+packages/order-utils/ @fabioberger @LogvinovLeon 
 packages/sol-compiler/ @LogvinovLeon
 packages/sol-cov/ @LogvinovLeon
 packages/sol-resolver/ @LogvinovLeon
-packages/web3-wrapper/ @LogvinovLeon @fabioberger
-.circleci/ @LogvinovLeon
 packages/subproviders/ @fabioberger @dekz
-packages/connect/ @fragosti 
+packages/verdaccio/ @albrow
-packages/monorepo-scripts/ @fabioberger
+packages/web3-wrapper/ @LogvinovLeon @fabioberger
-packages/order-utils/ @fabioberger @LogvinovLeon 
+python-packages/ @feuGeneA
-python-packages/ @feuGeneA
+
+# Protocol/smart contracts
+packages/contracts/test/ @albrow

packages/asset-buyer/src/asset_buyer.ts

@@ -135,9 +135,14 @@ export class AssetBuyer {
         assert.isBoolean('shouldForceOrderRefresh', shouldForceOrderRefresh);
         assert.isNumber('slippagePercentage', slippagePercentage);
         const zrxTokenAssetData = this._getZrxTokenAssetDataOrThrow();
+        const isMakerAssetZrxToken = assetData === zrxTokenAssetData;
+        // get the relevant orders for the makerAsset and fees
+        // if the requested assetData is ZRX, don't get the fee info
         const [ordersAndFillableAmounts, feeOrdersAndFillableAmounts] = await Promise.all([
             this._getOrdersAndFillableAmountsAsync(assetData, shouldForceOrderRefresh),
-            this._getOrdersAndFillableAmountsAsync(zrxTokenAssetData, shouldForceOrderRefresh),
+            isMakerAssetZrxToken
+                ? Promise.resolve(constants.EMPTY_ORDERS_AND_FILLABLE_AMOUNTS)
+                : this._getOrdersAndFillableAmountsAsync(zrxTokenAssetData, shouldForceOrderRefresh),
             shouldForceOrderRefresh,
         ]);
         if (ordersAndFillableAmounts.orders.length === 0) {
@@ -149,6 +154,7 @@ export class AssetBuyer {
             assetBuyAmount,
             feePercentage,
             slippagePercentage,
+            isMakerAssetZrxToken,
         );
         return buyQuote;
     }

packages/asset-buyer/src/constants.ts

@@ -1,6 +1,7 @@
+import { SignedOrder } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 
-import { AssetBuyerOpts, BuyQuoteExecutionOpts, BuyQuoteRequestOpts } from './types';
+import { AssetBuyerOpts, BuyQuoteExecutionOpts, BuyQuoteRequestOpts, OrdersAndFillableAmounts } from './types';
 
 const NULL_ADDRESS = '0x0000000000000000000000000000000000000000';
 const MAINNET_NETWORK_ID = 1;
@@ -22,6 +23,11 @@ const DEFAULT_BUY_QUOTE_EXECUTION_OPTS: BuyQuoteExecutionOpts = {
     feeRecipient: NULL_ADDRESS,
 };
 
+const EMPTY_ORDERS_AND_FILLABLE_AMOUNTS: OrdersAndFillableAmounts = {
+    orders: [] as SignedOrder[],
+    remainingFillableMakerAssetAmounts: [] as BigNumber[],
+};
+
 export const constants = {
     ZERO_AMOUNT: new BigNumber(0),
     NULL_ADDRESS,
@@ -31,4 +37,5 @@ export const constants = {
     DEFAULT_BUY_QUOTE_EXECUTION_OPTS,
     DEFAULT_BUY_QUOTE_REQUEST_OPTS,
     MAX_PER_PAGE: 10000,
+    EMPTY_ORDERS_AND_FILLABLE_AMOUNTS,
 };

packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts

@@ -30,7 +30,7 @@ export class StandardRelayerAPIOrderProvider implements OrderProvider {
                 'remainingTakerAssetAmount',
                 order.takerAssetAmount,
             );
-            const remainingFillableMakerAssetAmount = orderUtils.calculateRemainingMakerAssetAmount(
+            const remainingFillableMakerAssetAmount = orderUtils.getRemainingMakerAmount(
                 order,
                 remainingFillableTakerAssetAmount,
             );

packages/asset-buyer/src/utils/buy_quote_calculator.ts

@@ -1,10 +1,12 @@
-import { marketUtils, rateUtils } from '@0x/order-utils';
+import { marketUtils, SignedOrder } from '@0x/order-utils';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
 import { constants } from '../constants';
 import { AssetBuyerError, BuyQuote, BuyQuoteInfo, OrdersAndFillableAmounts } from '../types';
 
+import { orderUtils } from './order_utils';
+
 // Calculates a buy quote for orders that have WETH as the takerAsset
 export const buyQuoteCalculator = {
     calculate(
@@ -13,6 +15,7 @@ export const buyQuoteCalculator = {
         assetBuyAmount: BigNumber,
         feePercentage: number,
         slippagePercentage: number,
+        isMakerAssetZrxToken: boolean,
     ): BuyQuote {
         const orders = ordersAndFillableAmounts.orders;
         const remainingFillableMakerAssetAmounts = ordersAndFillableAmounts.remainingFillableMakerAssetAmounts;
@@ -32,22 +35,31 @@ export const buyQuoteCalculator = {
         if (remainingFillAmount.gt(constants.ZERO_AMOUNT)) {
             throw new Error(AssetBuyerError.InsufficientAssetLiquidity);
         }
+        // if we are not buying ZRX:
         // given the orders calculated above, find the fee-orders that cover the desired assetBuyAmount (with slippage)
         // TODO(bmillman): optimization
         // update this logic to find the minimum amount of feeOrders to cover the worst case as opposed to
         // finding order that cover all fees, this will help with estimating ETH and minimizing gas usage
-        const {
+        let resultFeeOrders = [] as SignedOrder[];
-            resultFeeOrders,
+        let feeOrdersRemainingFillableMakerAssetAmounts = [] as BigNumber[];
-            remainingFeeAmount,
+        if (!isMakerAssetZrxToken) {
-            feeOrdersRemainingFillableMakerAssetAmounts,
+            const feeOrdersAndRemainingFeeAmount = marketUtils.findFeeOrdersThatCoverFeesForTargetOrders(
-        } = marketUtils.findFeeOrdersThatCoverFeesForTargetOrders(resultOrders, feeOrders, {
+                resultOrders,
-            remainingFillableMakerAssetAmounts: ordersRemainingFillableMakerAssetAmounts,
+                feeOrders,
-            remainingFillableFeeAmounts,
+                {
-        });
+                    remainingFillableMakerAssetAmounts: ordersRemainingFillableMakerAssetAmounts,
-        // if we do not have enough feeOrders to cover the fees, throw
+                    remainingFillableFeeAmounts,
-        if (remainingFeeAmount.gt(constants.ZERO_AMOUNT)) {
+                },
-            throw new Error(AssetBuyerError.InsufficientZrxLiquidity);
+            );
+            // if we do not have enough feeOrders to cover the fees, throw
+            if (feeOrdersAndRemainingFeeAmount.remainingFeeAmount.gt(constants.ZERO_AMOUNT)) {
+                throw new Error(AssetBuyerError.InsufficientZrxLiquidity);
+            }
+            resultFeeOrders = feeOrdersAndRemainingFeeAmount.resultFeeOrders;
+            feeOrdersRemainingFillableMakerAssetAmounts =
+                feeOrdersAndRemainingFeeAmount.feeOrdersRemainingFillableMakerAssetAmounts;
         }
+
         // assetData information for the result
         const assetData = orders[0].makerAssetData;
         // compile the resulting trimmed set of orders for makerAsset and feeOrders that are needed for assetBuyAmount
@@ -64,6 +76,7 @@ export const buyQuoteCalculator = {
             trimmedFeeOrdersAndFillableAmounts,
             assetBuyAmount,
             feePercentage,
+            isMakerAssetZrxToken,
         );
         // in order to calculate the maxRate, reverse the ordersAndFillableAmounts such that they are sorted from worst rate to best rate
         const worstCaseQuoteInfo = calculateQuoteInfo(
@@ -71,6 +84,7 @@ export const buyQuoteCalculator = {
             reverseOrdersAndFillableAmounts(trimmedFeeOrdersAndFillableAmounts),
             assetBuyAmount,
             feePercentage,
+            isMakerAssetZrxToken,
         );
         return {
             assetData,
@@ -89,22 +103,30 @@ function calculateQuoteInfo(
     feeOrdersAndFillableAmounts: OrdersAndFillableAmounts,
     assetBuyAmount: BigNumber,
     feePercentage: number,
+    isMakerAssetZrxToken: boolean,
 ): BuyQuoteInfo {
     // find the total eth and zrx needed to buy assetAmount from the resultOrders from left to right
-    const [ethAmountToBuyAsset, zrxAmountToBuyAsset] = findEthAndZrxAmountNeededToBuyAsset(
+    let ethAmountToBuyAsset = constants.ZERO_AMOUNT;
-        ordersAndFillableAmounts,
+    let ethAmountToBuyZrx = constants.ZERO_AMOUNT;
-        assetBuyAmount,
+    if (isMakerAssetZrxToken) {
-    );
+        ethAmountToBuyAsset = findEthAmountNeededToBuyZrx(ordersAndFillableAmounts, assetBuyAmount);
-    // find the total eth needed to buy fees
+    } else {
-    const ethAmountToBuyFees = findEthAmountNeededToBuyFees(feeOrdersAndFillableAmounts, zrxAmountToBuyAsset);
+        // find eth and zrx amounts needed to buy
-    const affiliateFeeEthAmount = ethAmountToBuyAsset.mul(feePercentage);
+        const ethAndZrxAmountToBuyAsset = findEthAndZrxAmountNeededToBuyAsset(ordersAndFillableAmounts, assetBuyAmount);
-    const totalEthAmountWithoutAffiliateFee = ethAmountToBuyAsset.plus(ethAmountToBuyFees);
+        ethAmountToBuyAsset = ethAndZrxAmountToBuyAsset[0];
-    const totalEthAmount = totalEthAmountWithoutAffiliateFee.plus(affiliateFeeEthAmount);
+        const zrxAmountToBuyAsset = ethAndZrxAmountToBuyAsset[1];
+        // find eth amount needed to buy zrx
+        ethAmountToBuyZrx = findEthAmountNeededToBuyZrx(feeOrdersAndFillableAmounts, zrxAmountToBuyAsset);
+    }
+    /// find the eth amount needed to buy the affiliate fee
+    const ethAmountToBuyAffiliateFee = ethAmountToBuyAsset.mul(feePercentage);
+    const totalEthAmountWithoutAffiliateFee = ethAmountToBuyAsset.plus(ethAmountToBuyZrx);
+    const ethAmountTotal = totalEthAmountWithoutAffiliateFee.plus(ethAmountToBuyAffiliateFee);
     // divide into the assetBuyAmount in order to find rate of makerAsset / WETH
     const ethPerAssetPrice = totalEthAmountWithoutAffiliateFee.div(assetBuyAmount);
     return {
-        totalEthAmount,
+        totalEthAmount: ethAmountTotal,
-        feeEthAmount: affiliateFeeEthAmount,
+        feeEthAmount: ethAmountToBuyAffiliateFee,
         ethPerAssetPrice,
     };
 }
@@ -119,29 +141,38 @@ function reverseOrdersAndFillableAmounts(ordersAndFillableAmounts: OrdersAndFill
     };
 }
 
-function findEthAmountNeededToBuyFees(
+function findEthAmountNeededToBuyZrx(
     feeOrdersAndFillableAmounts: OrdersAndFillableAmounts,
-    feeAmount: BigNumber,
+    zrxBuyAmount: BigNumber,
 ): BigNumber {
     const { orders, remainingFillableMakerAssetAmounts } = feeOrdersAndFillableAmounts;
     const result = _.reduce(
         orders,
         (acc, order, index) => {
+            const { totalEthAmount, remainingZrxBuyAmount } = acc;
             const remainingFillableMakerAssetAmount = remainingFillableMakerAssetAmounts[index];
-            const amountToFill = BigNumber.min(acc.remainingFeeAmount, remainingFillableMakerAssetAmount);
+            const makerFillAmount = BigNumber.min(remainingZrxBuyAmount, remainingFillableMakerAssetAmount);
-            const feeAdjustedRate = rateUtils.getFeeAdjustedRateOfFeeOrder(order);
+            const [takerFillAmount, adjustedMakerFillAmount] = orderUtils.getTakerFillAmountForFeeOrder(
-            const ethAmountForThisOrder = feeAdjustedRate.mul(amountToFill);
+                order,
+                makerFillAmount,
+            );
+            const extraFeeAmount = remainingFillableMakerAssetAmount.greaterThanOrEqualTo(adjustedMakerFillAmount)
+                ? constants.ZERO_AMOUNT
+                : adjustedMakerFillAmount.sub(makerFillAmount);
             return {
-                ethAmount: acc.ethAmount.plus(ethAmountForThisOrder),
+                totalEthAmount: totalEthAmount.plus(takerFillAmount),
-                remainingFeeAmount: BigNumber.max(constants.ZERO_AMOUNT, acc.remainingFeeAmount.minus(amountToFill)),
+                remainingZrxBuyAmount: BigNumber.max(
+                    constants.ZERO_AMOUNT,
+                    remainingZrxBuyAmount.minus(makerFillAmount).plus(extraFeeAmount),
+                ),
             };
         },
         {
-            ethAmount: constants.ZERO_AMOUNT,
+            totalEthAmount: constants.ZERO_AMOUNT,
-            remainingFeeAmount: feeAmount,
+            remainingZrxBuyAmount: zrxBuyAmount,
         },
     );
-    return result.ethAmount;
+    return result.totalEthAmount;
 }
 
 function findEthAndZrxAmountNeededToBuyAsset(
@@ -152,28 +183,25 @@ function findEthAndZrxAmountNeededToBuyAsset(
     const result = _.reduce(
         orders,
         (acc, order, index) => {
+            const { totalEthAmount, totalZrxAmount, remainingAssetBuyAmount } = acc;
             const remainingFillableMakerAssetAmount = remainingFillableMakerAssetAmounts[index];
-            const amountToFill = BigNumber.min(acc.remainingAssetBuyAmount, remainingFillableMakerAssetAmount);
+            const makerFillAmount = BigNumber.min(acc.remainingAssetBuyAmount, remainingFillableMakerAssetAmount);
-            // find the amount of eth required to fill amountToFill (amountToFill / makerAssetAmount) * takerAssetAmount
+            const takerFillAmount = orderUtils.getTakerFillAmount(order, makerFillAmount);
-            const ethAmountForThisOrder = amountToFill
+            const takerFeeAmount = orderUtils.getTakerFeeAmount(order, takerFillAmount);
-                .mul(order.takerAssetAmount)
-                .dividedToIntegerBy(order.makerAssetAmount);
-            // find the amount of zrx required to fill fees for amountToFill (amountToFill / makerAssetAmount) * takerFee
-            const zrxAmountForThisOrder = amountToFill.mul(order.takerFee).dividedToIntegerBy(order.makerAssetAmount);
             return {
-                ethAmount: acc.ethAmount.plus(ethAmountForThisOrder),
+                totalEthAmount: totalEthAmount.plus(takerFillAmount),
-                zrxAmount: acc.zrxAmount.plus(zrxAmountForThisOrder),
+                totalZrxAmount: totalZrxAmount.plus(takerFeeAmount),
                 remainingAssetBuyAmount: BigNumber.max(
                     constants.ZERO_AMOUNT,
-                    acc.remainingAssetBuyAmount.minus(amountToFill),
+                    remainingAssetBuyAmount.minus(makerFillAmount),
                 ),
             };
         },
         {
-            ethAmount: constants.ZERO_AMOUNT,
+            totalEthAmount: constants.ZERO_AMOUNT,
-            zrxAmount: constants.ZERO_AMOUNT,
+            totalZrxAmount: constants.ZERO_AMOUNT,
             remainingAssetBuyAmount: assetBuyAmount,
         },
     );
-    return [result.ethAmount, result.zrxAmount];
+    return [result.totalEthAmount, result.totalZrxAmount];
 }

packages/asset-buyer/src/utils/order_provider_response_processor.ts

@@ -110,10 +110,7 @@ function getValidOrdersWithRemainingFillableMakerAssetAmountsFromOnChain(
                 traderInfo.makerZrxBalance,
             ]);
             const remainingTakerAssetAmount = order.takerAssetAmount.minus(orderInfo.orderTakerAssetFilledAmount);
-            const remainingMakerAssetAmount = orderUtils.calculateRemainingMakerAssetAmount(
+            const remainingMakerAssetAmount = orderUtils.getRemainingMakerAmount(order, remainingTakerAssetAmount);
-                order,
-                remainingTakerAssetAmount,
-            );
             const remainingFillableCalculator = new RemainingFillableCalculator(
                 order.makerFee,
                 order.makerAssetAmount,

packages/asset-buyer/src/utils/order_utils.ts

@@ -12,19 +12,63 @@ export const orderUtils = {
         const currentUnixTimestampSec = new BigNumber(Date.now() / millisecondsInSecond).round();
         return order.expirationTimeSeconds.lessThan(currentUnixTimestampSec.plus(secondsFromNow));
     },
-    calculateRemainingMakerAssetAmount(order: SignedOrder, remainingTakerAssetAmount: BigNumber): BigNumber {
-        if (remainingTakerAssetAmount.eq(0)) {
-            return constants.ZERO_AMOUNT;
-        }
-        return remainingTakerAssetAmount.times(order.makerAssetAmount).dividedToIntegerBy(order.takerAssetAmount);
-    },
-    calculateRemainingTakerAssetAmount(order: SignedOrder, remainingMakerAssetAmount: BigNumber): BigNumber {
-        if (remainingMakerAssetAmount.eq(0)) {
-            return constants.ZERO_AMOUNT;
-        }
-        return remainingMakerAssetAmount.times(order.takerAssetAmount).dividedToIntegerBy(order.makerAssetAmount);
-    },
     isOpenOrder(order: SignedOrder): boolean {
         return order.takerAddress === constants.NULL_ADDRESS;
     },
+    // given a remaining amount of takerAsset, calculate how much makerAsset is available
+    getRemainingMakerAmount(order: SignedOrder, remainingTakerAmount: BigNumber): BigNumber {
+        const remainingMakerAmount = remainingTakerAmount
+            .times(order.makerAssetAmount)
+            .div(order.takerAssetAmount)
+            .floor();
+        return remainingMakerAmount;
+    },
+    // given a desired amount of makerAsset, calculate how much takerAsset is required to fill that amount
+    getTakerFillAmount(order: SignedOrder, makerFillAmount: BigNumber): BigNumber {
+        // Round up because exchange rate favors Maker
+        const takerFillAmount = makerFillAmount
+            .mul(order.takerAssetAmount)
+            .div(order.makerAssetAmount)
+            .ceil();
+        return takerFillAmount;
+    },
+    // given a desired amount of takerAsset to fill, calculate how much fee is required by the taker to fill that amount
+    getTakerFeeAmount(order: SignedOrder, takerFillAmount: BigNumber): BigNumber {
+        // Round down because Taker fee rate favors Taker
+        const takerFeeAmount = takerFillAmount
+            .mul(order.takerFee)
+            .div(order.takerAssetAmount)
+            .floor();
+        return takerFeeAmount;
+    },
+    // given a desired amount of takerAsset to fill, calculate how much makerAsset will be filled
+    getMakerFillAmount(order: SignedOrder, takerFillAmount: BigNumber): BigNumber {
+        // Round down because exchange rate favors Maker
+        const makerFillAmount = takerFillAmount
+            .mul(order.makerAssetAmount)
+            .div(order.takerAssetAmount)
+            .floor();
+        return makerFillAmount;
+    },
+    // given a desired amount of makerAsset, calculate how much fee is required by the maker to fill that amount
+    getMakerFeeAmount(order: SignedOrder, makerFillAmount: BigNumber): BigNumber {
+        // Round down because Maker fee rate favors Maker
+        const makerFeeAmount = makerFillAmount
+            .mul(order.makerFee)
+            .div(order.makerAssetAmount)
+            .floor();
+        return makerFeeAmount;
+    },
+    // given a desired amount of ZRX from a fee order, calculate how much takerAsset is required to fill that amount
+    // also calculate how much ZRX needs to be bought in order fill the desired amount + takerFee
+    getTakerFillAmountForFeeOrder(order: SignedOrder, makerFillAmount: BigNumber): [BigNumber, BigNumber] {
+        // For each unit of TakerAsset we buy (MakerAsset - TakerFee)
+        const adjustedTakerFillAmount = makerFillAmount
+            .mul(order.takerAssetAmount)
+            .div(order.makerAssetAmount.sub(order.takerFee))
+            .ceil();
+        // The amount that we buy will be greater than makerFillAmount, since we buy some amount for fees.
+        const adjustedMakerFillAmount = orderUtils.getMakerFillAmount(order, adjustedTakerFillAmount);
+        return [adjustedTakerFillAmount, adjustedMakerFillAmount];
+    },
 };

packages/asset-buyer/test/buy_quote_calculator_test.ts

@@ -49,9 +49,9 @@ describe('buyQuoteCalculator', () => {
                 remainingFillableMakerAssetAmounts: [smallFeeOrder.makerAssetAmount],
             };
             const largeFeeOrder = orderFactory.createSignedOrderFromPartial({
-                makerAssetAmount: new BigNumber(110),
+                makerAssetAmount: new BigNumber(113),
                 takerAssetAmount: new BigNumber(200),
-                takerFee: new BigNumber(10),
+                takerFee: new BigNumber(11),
             });
             allFeeOrdersAndFillableAmounts = {
                 orders: [smallFeeOrder, largeFeeOrder],
@@ -70,6 +70,7 @@ describe('buyQuoteCalculator', () => {
                     new BigNumber(500),
                     0,
                     0,
+                    false,
                 ),
             ).to.throw(AssetBuyerError.InsufficientAssetLiquidity);
         });
@@ -82,6 +83,7 @@ describe('buyQuoteCalculator', () => {
                     new BigNumber(300),
                     0,
                     0,
+                    false,
                 ),
             ).to.throw(AssetBuyerError.InsufficientZrxLiquidity);
         });
@@ -97,6 +99,7 @@ describe('buyQuoteCalculator', () => {
                 assetBuyAmount,
                 feePercentage,
                 slippagePercentage,
+                false,
             );
             // test if orders are correct
             expect(buyQuote.orders).to.deep.equal([ordersAndFillableAmounts.orders[0]]);
@@ -134,6 +137,7 @@ describe('buyQuoteCalculator', () => {
                 assetBuyAmount,
                 feePercentage,
                 slippagePercentage,
+                false,
             );
             // test if orders are correct
             expect(buyQuote.orders).to.deep.equal(ordersAndFillableAmounts.orders);
@@ -149,9 +153,9 @@ describe('buyQuoteCalculator', () => {
             expect(buyQuote.bestCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount);
             expect(buyQuote.bestCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount);
             expect(buyQuote.bestCaseQuoteInfo.ethPerAssetPrice).to.bignumber.equal(expectedEthPerAssetPrice);
-            // 100 eth to fill the first order + 200 eth for fees
+            // 100 eth to fill the first order + 208 eth for fees
             const expectedWorstEthAmountForAsset = new BigNumber(100);
-            const expectedWorstEthAmountForZrxFees = new BigNumber(200);
+            const expectedWorstEthAmountForZrxFees = new BigNumber(208);
             const expectedWorstFillEthAmount = expectedWorstEthAmountForAsset.plus(expectedWorstEthAmountForZrxFees);
             const expectedWorstFeeEthAmount = expectedWorstEthAmountForAsset.mul(feePercentage);
             const expectedWorstTotalEthAmount = expectedWorstFillEthAmount.plus(expectedWorstFeeEthAmount);

packages/instant/src/components/buy_button.tsx

@@ -1,7 +1,8 @@
-import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
 
+import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
 import { util } from '../util/util';
 import { web3Wrapper } from '../util/web3_wrapper';
@@ -11,9 +12,11 @@ import { Button, Text } from './ui';
 export interface BuyButtonProps {
     buyQuote?: BuyQuote;
     assetBuyer?: AssetBuyer;
-    onClick: (buyQuote: BuyQuote) => void;
+    onAwaitingSignature: (buyQuote: BuyQuote) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
+    onSignatureDenied: (buyQuote: BuyQuote, preventedError: Error) => void;
-    onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
 }
 
 export class BuyButton extends React.Component<BuyButtonProps> {
@@ -34,17 +37,33 @@ export class BuyButton extends React.Component<BuyButtonProps> {
     }
     private readonly _handleClick = async () => {
         // The button is disabled when there is no buy quote anyway.
-        if (_.isUndefined(this.props.buyQuote) || _.isUndefined(this.props.assetBuyer)) {
+        const { buyQuote, assetBuyer } = this.props;
+        if (_.isUndefined(buyQuote) || _.isUndefined(assetBuyer)) {
             return;
         }
-        this.props.onClick(this.props.buyQuote);
+
-        let txnHash;
+        let txHash: string | undefined;
+        this.props.onAwaitingSignature(buyQuote);
         try {
-            txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
+            txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote);
-            const txnReceipt = await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
+        } catch (e) {
-            this.props.onBuySuccess(this.props.buyQuote, txnReceipt.transactionHash);
+            if (e instanceof Error && e.message === AssetBuyerError.SignatureRequestDenied) {
-        } catch {
+                this.props.onSignatureDenied(buyQuote, e);
-            this.props.onBuyFailure(this.props.buyQuote, txnHash);
+                return;
+            }
+            throw e;
         }
+
+        this.props.onBuyProcessing(buyQuote, txHash);
+        try {
+            await web3Wrapper.awaitTransactionSuccessAsync(txHash);
+        } catch (e) {
+            if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) {
+                this.props.onBuyFailure(buyQuote, txHash);
+                return;
+            }
+            throw e;
+        }
+        this.props.onBuySuccess(buyQuote, txHash);
     };
 }

packages/instant/src/components/buy_order_state_button.tsx

@@ -4,18 +4,21 @@ import { PlacingOrderButton } from '../components/placing_order_button';
 import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button';
 import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button';
 import { SelectedAssetViewTransactionButton } from '../containers/selected_asset_view_transaction_button';
-import { AsyncProcessState } from '../types';
+import { OrderProcessState } from '../types';
 
 export interface BuyOrderStateButtonProps {
-    buyOrderProcessingState: AsyncProcessState;
+    buyOrderProcessingState: OrderProcessState;
 }
 
 export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => {
-    if (props.buyOrderProcessingState === AsyncProcessState.FAILURE) {
+    if (props.buyOrderProcessingState === OrderProcessState.FAILURE) {
         return <SelectedAssetRetryButton />;
-    } else if (props.buyOrderProcessingState === AsyncProcessState.SUCCESS) {
+    } else if (
+        props.buyOrderProcessingState === OrderProcessState.SUCCESS ||
+        props.buyOrderProcessingState === OrderProcessState.PROCESSING
+    ) {
         return <SelectedAssetViewTransactionButton />;
-    } else if (props.buyOrderProcessingState === AsyncProcessState.PENDING) {
+    } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) {
         return <PlacingOrderButton />;
     }
 

packages/instant/src/components/instant_heading.tsx

@@ -4,12 +4,13 @@ import * as React from 'react';
 
 import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input';
 import { ColorOption } from '../style/theme';
-import { AsyncProcessState, OrderState } from '../types';
+import { AsyncProcessState, OrderProcessState, OrderState } from '../types';
 import { format } from '../util/format';
 
 import { AmountPlaceholder } from './amount_placeholder';
 import { Container, Flex, Text } from './ui';
 import { Icon } from './ui/icon';
+import { Spinner } from './ui/spinner';
 
 export interface InstantHeadingProps {
     selectedAssetAmount?: BigNumber;
@@ -70,9 +71,11 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private _renderIcon(): React.ReactNode {
         const processState = this.props.buyOrderState.processState;
 
-        if (processState === AsyncProcessState.FAILURE) {
+        if (processState === OrderProcessState.FAILURE) {
             return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
-        } else if (processState === AsyncProcessState.SUCCESS) {
+        } else if (processState === OrderProcessState.PROCESSING) {
+            return <Spinner widthPx={ICON_HEIGHT} heightPx={ICON_HEIGHT} />;
+        } else if (processState === OrderProcessState.SUCCESS) {
             return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />;
         }
         return undefined;
@@ -80,9 +83,11 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
 
     private _renderTopText(): React.ReactNode {
         const processState = this.props.buyOrderState.processState;
-        if (processState === AsyncProcessState.FAILURE) {
+        if (processState === OrderProcessState.FAILURE) {
             return 'Order failed';
-        } else if (processState === AsyncProcessState.SUCCESS) {
+        } else if (processState === OrderProcessState.PROCESSING) {
+            return 'Processing Order...';
+        } else if (processState === OrderProcessState.SUCCESS) {
             return 'Tokens received!';
         }
 

packages/instant/src/constants.ts

@@ -2,3 +2,4 @@ import { BigNumber } from '@0x/utils';
 export const BIG_NUMBER_ZERO = new BigNumber(0);
 export const ethDecimals = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
+export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';

packages/instant/src/containers/selected_asset_buy_button.ts

@@ -6,7 +6,7 @@ import { Dispatch } from 'redux';
 
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
-import { AsyncProcessState } from '../types';
+import { OrderProcessState, OrderState } from '../types';
 
 import { BuyButton } from '../components/buy_button';
 
@@ -18,9 +18,11 @@ interface ConnectedState {
 }
 
 interface ConnectedDispatch {
-    onClick: (buyQuote: BuyQuote) => void;
+    onAwaitingSignature: (buyQuote: BuyQuote) => void;
-    onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
+    onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void;
-    onBuyFailure: (buyQuote: BuyQuote) => void;
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void;
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void;
 }
 
 const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({
@@ -29,10 +31,22 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps):
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({
-    onClick: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.PENDING })),
+    onAwaitingSignature: (buyQuote: BuyQuote) => {
-    onBuySuccess: (buyQuote: BuyQuote, txnHash: string) =>
+        const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE };
-        dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.SUCCESS, txnHash })),
+        dispatch(actions.updateBuyOrderState(newOrderState));
-    onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.FAILURE })),
+    },
+    onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => {
+        const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash };
+        dispatch(actions.updateBuyOrderState(newOrderState));
+    },
+    onBuySuccess: (buyQuote: BuyQuote, txHash: string) =>
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })),
+    onBuyFailure: (buyQuote: BuyQuote, txHash: string) =>
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })),
+    onSignatureDenied: (buyQuote, error) => {
+        dispatch(actions.resetAmount());
+        dispatch(actions.setError(error));
+    },
 });
 
 export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect(

packages/instant/src/containers/selected_asset_buy_order_state_button.tsx

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 
 import { State } from '../redux/reducer';
-import { AsyncProcessState } from '../types';
+import { OrderProcessState } from '../types';
 
 import { BuyOrderStateButton } from '../components/buy_order_state_button';
 
 interface ConnectedState {
-    buyOrderProcessingState: AsyncProcessState;
+    buyOrderProcessingState: OrderProcessState;
 }
 export interface SelectedAssetButtonProps {}
 const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({

packages/instant/src/containers/selected_asset_view_transaction_button.tsx

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { State } from '../redux/reducer';
 
 import { ViewTransactionButton } from '../components/view_transaction_button';
-import { AsyncProcessState } from '../types';
+import { OrderProcessState } from '../types';
 import { etherscanUtil } from '../util/etherscan';
 
 export interface SelectedAssetViewTransactionButtonProps {}
@@ -16,9 +16,13 @@ interface ConnectedState {
 
 const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
     onClick: () => {
-        if (state.assetBuyer && state.buyOrderState.processState === AsyncProcessState.SUCCESS) {
+        if (
+            state.assetBuyer &&
+            (state.buyOrderState.processState === OrderProcessState.PROCESSING ||
+                state.buyOrderState.processState === OrderProcessState.SUCCESS)
+        ) {
             const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists(
-                state.buyOrderState.txnHash,
+                state.buyOrderState.txHash,
                 state.assetBuyer.networkId,
             );
             if (etherscanUrl) {

packages/instant/src/containers/selected_erc20_asset_amount_input.ts

@@ -10,7 +10,7 @@ import { Dispatch } from 'redux';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
-import { AsyncProcessState, ERC20Asset } from '../types';
+import { ERC20Asset, OrderProcessState } from '../types';
 import { BigNumberInput } from '../util/big_number_input';
 import { errorUtil } from '../util/error';
 
@@ -91,7 +91,7 @@ const mapDispatchToProps = (
         // invalidate the last buy quote.
         dispatch(actions.updateLatestBuyQuote(undefined));
         // reset our buy state
-        dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.NONE }));
+        dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.NONE }));
 
         if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) {
             // even if it's debounced, give them the illusion it's loading

packages/instant/src/redux/reducer.ts

@@ -4,7 +4,15 @@ import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
 import { assetMetaDataMap } from '../data/asset_meta_data_map';
-import { Asset, AssetMetaData, AsyncProcessState, DisplayStatus, Network, OrderState } from '../types';
+import {
+    Asset,
+    AssetMetaData,
+    AsyncProcessState,
+    DisplayStatus,
+    Network,
+    OrderProcessState,
+    OrderState,
+} from '../types';
 import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
 
@@ -28,7 +36,7 @@ export const INITIAL_STATE: State = {
     network: Network.Mainnet,
     selectedAssetAmount: undefined,
     assetMetaDataMap,
-    buyOrderState: { processState: AsyncProcessState.NONE },
+    buyOrderState: { processState: OrderProcessState.NONE },
     ethUsdPrice: undefined,
     latestBuyQuote: undefined,
     latestError: undefined,
@@ -107,7 +115,7 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
                 ...state,
                 latestBuyQuote: undefined,
                 quoteRequestState: AsyncProcessState.NONE,
-                buyOrderState: { processState: AsyncProcessState.NONE },
+                buyOrderState: { processState: OrderProcessState.NONE },
                 selectedAssetAmount: undefined,
             };
         default:

packages/instant/src/types.ts

@@ -8,18 +8,22 @@ export enum AsyncProcessState {
     FAILURE = 'Failure',
 }
 
-interface RegularOrderState {
+export enum OrderProcessState {
-    processState: AsyncProcessState.NONE | AsyncProcessState.PENDING;
+    NONE = 'None',
+    AWAITING_SIGNATURE = 'Awaiting Signature',
+    PROCESSING = 'Processing',
+    SUCCESS = 'Success',
+    FAILURE = 'Failure',
 }
-interface SuccessfulOrderState {
+
-    processState: AsyncProcessState.SUCCESS;
+interface OrderStatePreTx {
-    txnHash: string;
+    processState: OrderProcessState.NONE | OrderProcessState.AWAITING_SIGNATURE;
 }
-interface FailureOrderState {
+interface OrderStatePostTx {
-    processState: AsyncProcessState.FAILURE;
+    processState: OrderProcessState.PROCESSING | OrderProcessState.SUCCESS | OrderProcessState.FAILURE;
-    txnHash?: string;
+    txHash: string;
 }
-export type OrderState = RegularOrderState | SuccessfulOrderState | FailureOrderState;
+export type OrderState = OrderStatePreTx | OrderStatePostTx;
 
 export enum DisplayStatus {
     Present,

packages/instant/src/util/error.ts

@@ -46,6 +46,10 @@ const humanReadableMessageForError = (error: Error, asset?: Asset): string | und
         return `${assetName} is currently unavailable`;
     }
 
+    if (error.message === AssetBuyerError.SignatureRequestDenied) {
+        return 'You denied this transaction';
+    }
+
     return undefined;
 };
 

packages/instant/src/util/etherscan.ts

@@ -14,11 +14,11 @@ const etherscanPrefix = (networkId: number): string | undefined => {
 };
 
 export const etherscanUtil = {
-    getEtherScanTxnAddressIfExists: (txnHash: string, networkId: number) => {
+    getEtherScanTxnAddressIfExists: (txHash: string, networkId: number) => {
         const prefix = etherscanPrefix(networkId);
         if (_.isUndefined(prefix)) {
             return;
         }
-        return `https://${prefix}etherscan.io/tx/${txnHash}`;
+        return `https://${prefix}etherscan.io/tx/${txHash}`;
     },
 };

packages/migrations/README.md

@@ -50,33 +50,10 @@ yarn lint
 
 ### Migrate
 
-#### V2-beta smart contracts
+#### V2 smart contracts
 
-In order to migrate the V2-beta 0x smart contracts to Kovan using a Ledger Nano S, run:
+In order to migrate the V2 0x smart contracts to TestRPC/Ganache running at `http://localhost:8545`, run:
-
-```bash
-yarn migrate:v2-beta-testnet
-```
-
-**Note:** Ledger settings `contract data` must be `on`, and `browser support` must be set to `off`.
-
-Post-publish steps:
-
-1.  Since we don't re-deploy the `WETH9` nor `ZRXToken` contracts, manually copy over the artifacts for them from `2.0.0` into `2.0.0-beta-testnet` and add the Kovan & ganache addresses to both of their `networks` sections.
-2.  We now need to copy over the network `50` settings from the `2.0.0` artifacts to the `2.0.0-beta-testnet` artifacts for the newly deployed contracts (e.g `Exchange`, `ERC20Proxy`, `ERC721Proxy` and `AssetProxyOwner`)
-
-#### V2 (under development) smart contracts
-
-In order to migrate the V2 (under development) 0x smart contracts to TestRPC/Ganache running at `http://localhost:8545`, run:
 
 ```bash
 yarn migrate:v2
 ```
-
-#### V1 smart contracts
-
-In order to migrate the V1 0x smart contracts to TestRPC/Ganache running at `http://localhost:8545`, run:
-
-```bash
-yarn migrate:v1
-```