Publish

- 0x.js@2.0.4
 - @0x/abi-gen@1.0.16
 - @0x/abi-gen-wrappers@1.0.5
 - @0x/assert@1.0.17
 - @0x/asset-buyer@3.0.0
 - @0x/base-contract@3.0.6
 - @0x/connect@3.0.6
 - @0x/contract-wrappers@4.0.2
 - contracts@2.1.54
 - @0x/dev-tools-pages@0.0.6
 - @0x/dev-utils@1.0.17
 - @0x/fill-scenarios@1.0.12
 - @0x/instant@0.0.7
 - @0x/json-schemas@2.1.1
 - @0x/metacoin@0.0.28
 - @0x/migrations@2.0.4
 - @0x/order-utils@3.0.2
 - @0x/order-watcher@2.2.4
 - @0x/react-docs@1.0.18
 - @0x/react-shared@1.0.21
 - @0x/sol-compiler@1.1.12
 - @0x/sol-cov@2.1.12
 - @0x/sol-doc@1.0.7
 - @0x/sra-spec@1.0.10
 - @0x/subproviders@2.1.4
 - @0x/testnet-faucets@1.0.56
 - @0x/utils@2.0.5
 - @0x/web3-wrapper@3.1.4
 - @0x/website@0.0.59

packages/0x.js/CHANGELOG.json

@@ -1,4 +1,22 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "2.0.4",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
+    {
+        "timestamp": 1542134075,
+        "version": "2.0.3",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "timestamp": 1542028948,
         "version": "2.0.2",

packages/0x.js/CHANGELOG.md

@@ -5,6 +5,14 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.0.4 - _November 14, 2018_
+
+    * Dependencies updated
+
+## v2.0.3 - _November 13, 2018_
+
+    * Dependencies updated
+
 ## v2.0.2 - _November 12, 2018_
 
     * Dependencies updated

packages/0x.js/package.json

@@ -1,6 +1,6 @@
 {
     "name": "0x.js",
-    "version": "2.0.2",
+    "version": "2.0.4",
     "engines": {
         "node": ">=6.12"
     },
@@ -42,11 +42,11 @@
     },
     "license": "Apache-2.0",
     "devDependencies": {
-        "@0x/abi-gen": "^1.0.15",
+        "@0x/abi-gen": "^1.0.16",
-        "@0x/abi-gen-wrappers": "^1.0.3",
+        "@0x/abi-gen-wrappers": "^1.0.5",
         "@0x/contract-addresses": "^1.1.0",
-        "@0x/dev-utils": "^1.0.15",
+        "@0x/dev-utils": "^1.0.17",
-        "@0x/migrations": "^2.0.2",
+        "@0x/migrations": "^2.0.4",
         "@0x/tslint-config": "^1.0.10",
         "@types/lodash": "4.14.104",
         "@types/mocha": "^2.2.42",
@@ -73,16 +73,16 @@
         "webpack": "^4.20.2"
     },
     "dependencies": {
-        "@0x/assert": "^1.0.16",
+        "@0x/assert": "^1.0.17",
-        "@0x/base-contract": "^3.0.4",
+        "@0x/base-contract": "^3.0.6",
-        "@0x/contract-wrappers": "^4.0.0",
+        "@0x/contract-wrappers": "^4.0.2",
-        "@0x/order-utils": "^3.0.0",
+        "@0x/order-utils": "^3.0.2",
-        "@0x/order-watcher": "^2.2.2",
+        "@0x/order-watcher": "^2.2.4",
-        "@0x/subproviders": "^2.1.2",
+        "@0x/subproviders": "^2.1.4",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "@types/web3-provider-engine": "^14.0.0",
         "ethereum-types": "^1.1.2",
         "ethers": "~4.0.4",

packages/abi-gen-wrappers/CHANGELOG.json

@@ -1,4 +1,22 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "1.0.5",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
+    {
+        "timestamp": 1542134075,
+        "version": "1.0.4",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "timestamp": 1542028948,
         "version": "1.0.3",

packages/abi-gen-wrappers/CHANGELOG.md

@@ -5,6 +5,14 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.5 - _November 14, 2018_
+
+    * Dependencies updated
+
+## v1.0.4 - _November 13, 2018_
+
+    * Dependencies updated
+
 ## v1.0.3 - _November 12, 2018_
 
     * Dependencies updated

packages/abi-gen-wrappers/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/abi-gen-wrappers",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "engines": {
         "node": ">=6.12"
     },
@@ -30,17 +30,17 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/abi-gen-wrappers/README.md",
     "devDependencies": {
-        "@0x/abi-gen": "^1.0.15",
+        "@0x/abi-gen": "^1.0.16",
         "@0x/tslint-config": "^1.0.10",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "ethereum-types": "^1.1.2",
         "ethers": "~4.0.4",
         "lodash": "^4.17.5",
         "shx": "^0.2.2"
     },
     "dependencies": {
-        "@0x/base-contract": "^3.0.4"
+        "@0x/base-contract": "^3.0.6"
     },
     "publishConfig": {
         "access": "public"

packages/abi-gen/CHANGELOG.json

@@ -1,4 +1,13 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "1.0.16",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "version": "1.0.15",
         "changes": [

packages/abi-gen/CHANGELOG.md

@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.16 - _November 14, 2018_
+
+    * Dependencies updated
+
 ## v1.0.15 - _November 9, 2018_
 
     * Dependencies updated

packages/abi-gen/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/abi-gen",
-    "version": "1.0.15",
+    "version": "1.0.16",
     "engines": {
         "node": ">=6.12"
     },
@@ -32,7 +32,7 @@
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/abi-gen/README.md",
     "dependencies": {
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
         "chalk": "^2.3.0",
         "ethereum-types": "^1.1.2",
         "glob": "^7.1.2",

packages/assert/CHANGELOG.json

@@ -1,4 +1,13 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "1.0.17",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "timestamp": 1542028948,
         "version": "1.0.16",

packages/assert/CHANGELOG.md

@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.17 - _November 14, 2018_
+
+    * Dependencies updated
+
 ## v1.0.16 - _November 12, 2018_
 
     * Dependencies updated

packages/assert/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/assert",
-    "version": "1.0.16",
+    "version": "1.0.17",
     "engines": {
         "node": ">=6.12"
     },
@@ -44,9 +44,9 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/json-schemas": "^2.1.0",
+        "@0x/json-schemas": "^2.1.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
         "lodash": "^4.17.5",
         "valid-url": "^1.0.9"
     },

packages/asset-buyer/CHANGELOG.json

@@ -1,4 +1,23 @@
 [
+    {
+        "version": "3.0.0",
+        "changes": [
+            {
+                "note": "update `getBuyQuoteAsync` to return eth spent on assets instead of per unit amount",
+                "pr": 1252
+            }
+        ],
+        "timestamp": 1542208198
+    },
+    {
+        "timestamp": 1542134075,
+        "version": "2.2.2",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "timestamp": 1542028948,
         "version": "2.2.1",

packages/asset-buyer/CHANGELOG.md

@@ -5,6 +5,14 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v3.0.0 - _November 14, 2018_
+
+    * update `getBuyQuoteAsync` to return eth spent on assets instead of per unit amount (#1252)
+
+## v2.2.2 - _November 13, 2018_
+
+    * Dependencies updated
+
 ## v2.2.1 - _November 12, 2018_
 
     * Dependencies updated

packages/asset-buyer/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/asset-buyer",
-    "version": "2.2.1",
+    "version": "3.0.0",
     "engines": {
         "node": ">=6.12"
     },
@@ -36,16 +36,16 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/asset-buyer/README.md",
     "dependencies": {
-        "@0x/assert": "^1.0.16",
+        "@0x/assert": "^1.0.17",
-        "@0x/connect": "^3.0.4",
+        "@0x/connect": "^3.0.6",
-        "@0x/contract-wrappers": "^4.0.0",
+        "@0x/contract-wrappers": "^4.0.2",
-        "@0x/json-schemas": "^2.1.0",
+        "@0x/json-schemas": "^2.1.1",
-        "@0x/order-utils": "^3.0.0",
+        "@0x/order-utils": "^3.0.2",
-        "@0x/subproviders": "^2.1.2",
+        "@0x/subproviders": "^2.1.4",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "ethereum-types": "^1.1.2",
         "lodash": "^4.17.10"
     },

packages/asset-buyer/src/types.ts

@@ -54,12 +54,12 @@ export interface BuyQuote {
 }
 
 /**
- * ethPerAssetPrice: The price of one unit of the desired asset in ETH
+ * assetEthAmount: The amount of eth required to pay for the requested asset.
  * feeEthAmount: The amount of eth required to pay the affiliate fee.
- * totalEthAmount: the total amount of eth required to complete the buy. (Filling orders, feeOrders, and paying affiliate fee)
+ * totalEthAmount: The total amount of eth required to complete the buy (filling orders, feeOrders, and paying affiliate fee).
  */
 export interface BuyQuoteInfo {
-    ethPerAssetPrice: BigNumber;
+    assetEthAmount: BigNumber;
     feeEthAmount: BigNumber;
     totalEthAmount: BigNumber;
 }

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

@@ -18,7 +18,7 @@ export const assert = {
         }
     },
     isValidBuyQuoteInfo(variableName: string, buyQuoteInfo: BuyQuoteInfo): void {
-        sharedAssert.isBigNumber(`${variableName}.ethPerAssetPrice`, buyQuoteInfo.ethPerAssetPrice);
+        sharedAssert.isBigNumber(`${variableName}.assetEthAmount`, buyQuoteInfo.assetEthAmount);
         sharedAssert.isBigNumber(`${variableName}.feeEthAmount`, buyQuoteInfo.feeEthAmount);
         sharedAssert.isBigNumber(`${variableName}.totalEthAmount`, buyQuoteInfo.totalEthAmount);
     },

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

@@ -106,28 +106,28 @@ function calculateQuoteInfo(
     isMakerAssetZrxToken: boolean,
 ): BuyQuoteInfo {
     // find the total eth and zrx needed to buy assetAmount from the resultOrders from left to right
-    let ethAmountToBuyAsset = constants.ZERO_AMOUNT;
+    let assetEthAmount = constants.ZERO_AMOUNT;
-    let ethAmountToBuyZrx = constants.ZERO_AMOUNT;
+    let zrxEthAmount = constants.ZERO_AMOUNT;
     if (isMakerAssetZrxToken) {
-        ethAmountToBuyAsset = findEthAmountNeededToBuyZrx(ordersAndFillableAmounts, assetBuyAmount);
+        assetEthAmount = findEthAmountNeededToBuyZrx(ordersAndFillableAmounts, assetBuyAmount);
     } else {
         // find eth and zrx amounts needed to buy
         const ethAndZrxAmountToBuyAsset = findEthAndZrxAmountNeededToBuyAsset(ordersAndFillableAmounts, assetBuyAmount);
-        ethAmountToBuyAsset = ethAndZrxAmountToBuyAsset[0];
+        assetEthAmount = ethAndZrxAmountToBuyAsset[0];
         const zrxAmountToBuyAsset = ethAndZrxAmountToBuyAsset[1];
         // find eth amount needed to buy zrx
-        ethAmountToBuyZrx = findEthAmountNeededToBuyZrx(feeOrdersAndFillableAmounts, zrxAmountToBuyAsset);
+        zrxEthAmount = findEthAmountNeededToBuyZrx(feeOrdersAndFillableAmounts, zrxAmountToBuyAsset);
     }
-    /// find the eth amount needed to buy the affiliate fee
+    // eth amount needed to buy the affiliate fee
-    const ethAmountToBuyAffiliateFee = ethAmountToBuyAsset.mul(feePercentage).ceil();
+    const affiliateFeeEthAmount = assetEthAmount.mul(feePercentage).ceil();
-    const totalEthAmountWithoutAffiliateFee = ethAmountToBuyAsset.plus(ethAmountToBuyZrx);
+    // eth amount needed for fees is the sum of affiliate fee and zrx fee
-    const ethAmountTotal = totalEthAmountWithoutAffiliateFee.plus(ethAmountToBuyAffiliateFee);
+    const feeEthAmount = affiliateFeeEthAmount.plus(zrxEthAmount);
-    // divide into the assetBuyAmount in order to find rate of makerAsset / WETH
+    // eth amount needed in total is the sum of the amount needed for the asset and the amount needed for fees
-    const ethPerAssetPrice = totalEthAmountWithoutAffiliateFee.div(assetBuyAmount);
+    const totalEthAmount = assetEthAmount.plus(feeEthAmount);
     return {
-        totalEthAmount: ethAmountTotal,
+        assetEthAmount,
-        feeEthAmount: ethAmountToBuyAffiliateFee,
+        feeEthAmount,
-        ethPerAssetPrice,
+        totalEthAmount,
     };
 }
 

packages/asset-buyer/test/buy_quote_calculator_test.ts

@@ -108,17 +108,17 @@ describe('buyQuoteCalculator', () => {
             // 50 eth to fill the first order + 100 eth for fees
             const expectedEthAmountForAsset = new BigNumber(50);
             const expectedEthAmountForZrxFees = new BigNumber(100);
-            const expectedFillEthAmount = expectedEthAmountForAsset.plus(expectedEthAmountForZrxFees);
+            const expectedFillEthAmount = expectedEthAmountForAsset;
-            const expectedFeeEthAmount = expectedEthAmountForAsset.mul(feePercentage);
+            const expectedAffiliateFeeEthAmount = expectedEthAmountForAsset.mul(feePercentage);
+            const expectedFeeEthAmount = expectedAffiliateFeeEthAmount.plus(expectedEthAmountForZrxFees);
             const expectedTotalEthAmount = expectedFillEthAmount.plus(expectedFeeEthAmount);
-            const expectedEthPerAssetPrice = expectedFillEthAmount.div(assetBuyAmount);
+            expect(buyQuote.bestCaseQuoteInfo.assetEthAmount).to.bignumber.equal(expectedFillEthAmount);
             expect(buyQuote.bestCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount);
             expect(buyQuote.bestCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount);
-            expect(buyQuote.bestCaseQuoteInfo.ethPerAssetPrice).to.bignumber.equal(expectedEthPerAssetPrice);
             // because we have no slippage protection, minRate is equal to maxRate
+            expect(buyQuote.worstCaseQuoteInfo.assetEthAmount).to.bignumber.equal(expectedFillEthAmount);
             expect(buyQuote.worstCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedFeeEthAmount);
             expect(buyQuote.worstCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedTotalEthAmount);
-            expect(buyQuote.worstCaseQuoteInfo.ethPerAssetPrice).to.bignumber.equal(expectedEthPerAssetPrice);
             // test if feePercentage gets passed through
             expect(buyQuote.feePercentage).to.equal(feePercentage);
         });
@@ -146,23 +146,23 @@ describe('buyQuoteCalculator', () => {
             // 50 eth to fill the first order + 100 eth for fees
             const expectedEthAmountForAsset = new BigNumber(50);
             const expectedEthAmountForZrxFees = new BigNumber(100);
-            const expectedFillEthAmount = expectedEthAmountForAsset.plus(expectedEthAmountForZrxFees);
+            const expectedFillEthAmount = expectedEthAmountForAsset;
-            const expectedFeeEthAmount = expectedEthAmountForAsset.mul(feePercentage);
+            const expectedAffiliateFeeEthAmount = expectedEthAmountForAsset.mul(feePercentage);
+            const expectedFeeEthAmount = expectedAffiliateFeeEthAmount.plus(expectedEthAmountForZrxFees);
             const expectedTotalEthAmount = expectedFillEthAmount.plus(expectedFeeEthAmount);
-            const expectedEthPerAssetPrice = expectedFillEthAmount.div(assetBuyAmount);
+            expect(buyQuote.bestCaseQuoteInfo.assetEthAmount).to.bignumber.equal(expectedFillEthAmount);
             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 + 208 eth for fees
             const expectedWorstEthAmountForAsset = new BigNumber(100);
             const expectedWorstEthAmountForZrxFees = new BigNumber(208);
-            const expectedWorstFillEthAmount = expectedWorstEthAmountForAsset.plus(expectedWorstEthAmountForZrxFees);
+            const expectedWorstFillEthAmount = expectedWorstEthAmountForAsset;
-            const expectedWorstFeeEthAmount = expectedWorstEthAmountForAsset.mul(feePercentage);
+            const expectedWorstAffiliateFeeEthAmount = expectedWorstEthAmountForAsset.mul(feePercentage);
+            const expectedWorstFeeEthAmount = expectedWorstAffiliateFeeEthAmount.plus(expectedWorstEthAmountForZrxFees);
             const expectedWorstTotalEthAmount = expectedWorstFillEthAmount.plus(expectedWorstFeeEthAmount);
-            const expectedWorstEthPerAssetPrice = expectedWorstFillEthAmount.div(assetBuyAmount);
+            expect(buyQuote.worstCaseQuoteInfo.assetEthAmount).to.bignumber.equal(expectedWorstFillEthAmount);
             expect(buyQuote.worstCaseQuoteInfo.feeEthAmount).to.bignumber.equal(expectedWorstFeeEthAmount);
             expect(buyQuote.worstCaseQuoteInfo.totalEthAmount).to.bignumber.equal(expectedWorstTotalEthAmount);
-            expect(buyQuote.worstCaseQuoteInfo.ethPerAssetPrice).to.bignumber.equal(expectedWorstEthPerAssetPrice);
             // test if feePercentage gets passed through
             expect(buyQuote.feePercentage).to.equal(feePercentage);
         });

packages/base-contract/CHANGELOG.json

@@ -1,4 +1,22 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "3.0.6",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
+    {
+        "timestamp": 1542134075,
+        "version": "3.0.5",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "timestamp": 1542028948,
         "version": "3.0.4",

packages/base-contract/CHANGELOG.md

@@ -5,6 +5,14 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v3.0.6 - _November 14, 2018_
+
+    * Dependencies updated
+
+## v3.0.5 - _November 13, 2018_
+
+    * Dependencies updated
+
 ## v3.0.4 - _November 12, 2018_
 
     * Dependencies updated

packages/base-contract/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/base-contract",
-    "version": "3.0.4",
+    "version": "3.0.6",
     "engines": {
         "node": ">=6.12"
     },
@@ -41,8 +41,8 @@
     },
     "dependencies": {
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "ethereum-types": "^1.1.2",
         "ethers": "~4.0.4",
         "lodash": "^4.17.5"

packages/connect/CHANGELOG.json

@@ -1,4 +1,22 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "3.0.6",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
+    {
+        "timestamp": 1542134075,
+        "version": "3.0.5",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "timestamp": 1542028948,
         "version": "3.0.4",

packages/connect/CHANGELOG.md

@@ -5,6 +5,14 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v3.0.6 - _November 14, 2018_
+
+    * Dependencies updated
+
+## v3.0.5 - _November 13, 2018_
+
+    * Dependencies updated
+
 ## v3.0.4 - _November 12, 2018_
 
     * Dependencies updated

packages/connect/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/connect",
-    "version": "3.0.4",
+    "version": "3.0.6",
     "engines": {
         "node": ">=6.12"
     },
@@ -44,12 +44,12 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/connect/README.md",
     "dependencies": {
-        "@0x/assert": "^1.0.16",
+        "@0x/assert": "^1.0.17",
-        "@0x/json-schemas": "^2.1.0",
+        "@0x/json-schemas": "^2.1.1",
-        "@0x/order-utils": "^3.0.0",
+        "@0x/order-utils": "^3.0.2",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
         "lodash": "^4.17.5",
         "query-string": "^5.0.1",
         "sinon": "^4.0.0",

packages/contract-wrappers/CHANGELOG.json

@@ -1,4 +1,22 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "4.0.2",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
+    {
+        "timestamp": 1542134075,
+        "version": "4.0.1",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "version": "4.0.0",
         "changes": [

packages/contract-wrappers/CHANGELOG.md

@@ -5,6 +5,14 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v4.0.2 - _November 14, 2018_
+
+    * Dependencies updated
+
+## v4.0.1 - _November 13, 2018_
+
+    * Dependencies updated
+
 ## v4.0.0 - _November 12, 2018_
 
     * Add signature validation, regular cancellation and `cancelledUpTo` checks to `validateOrderFillableOrThrowAsync` (#1235)

packages/contract-wrappers/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/contract-wrappers",
-    "version": "4.0.0",
+    "version": "4.0.2",
     "description": "Smart TS wrappers for 0x smart contracts",
     "keywords": [
         "0xproject",
@@ -37,9 +37,9 @@
         "node": ">=6.0.0"
     },
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.15",
+        "@0x/dev-utils": "^1.0.17",
-        "@0x/migrations": "^2.0.2",
+        "@0x/migrations": "^2.0.4",
-        "@0x/subproviders": "^2.1.2",
+        "@0x/subproviders": "^2.1.4",
         "@0x/tslint-config": "^1.0.10",
         "@types/lodash": "4.14.104",
         "@types/mocha": "^2.2.42",
@@ -65,17 +65,17 @@
         "web3-provider-engine": "14.0.6"
     },
     "dependencies": {
-        "@0x/abi-gen-wrappers": "^1.0.3",
+        "@0x/abi-gen-wrappers": "^1.0.5",
-        "@0x/assert": "^1.0.16",
+        "@0x/assert": "^1.0.17",
         "@0x/contract-addresses": "^1.1.0",
         "@0x/contract-artifacts": "^1.1.0",
-        "@0x/fill-scenarios": "^1.0.10",
+        "@0x/fill-scenarios": "^1.0.12",
-        "@0x/json-schemas": "^2.1.0",
+        "@0x/json-schemas": "^2.1.1",
-        "@0x/order-utils": "^3.0.0",
+        "@0x/order-utils": "^3.0.2",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "ethereum-types": "^1.1.2",
         "ethereumjs-blockstream": "6.0.0",
         "ethereumjs-util": "^5.1.1",

packages/contracts/package.json

@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "contracts",
-    "version": "2.1.52",
+    "version": "2.1.54",
     "engines": {
         "node": ">=6.12"
     },
@@ -45,11 +45,11 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/contracts/README.md",
     "devDependencies": {
-        "@0x/abi-gen": "^1.0.15",
+        "@0x/abi-gen": "^1.0.16",
-        "@0x/dev-utils": "^1.0.15",
+        "@0x/dev-utils": "^1.0.17",
-        "@0x/sol-compiler": "^1.1.10",
+        "@0x/sol-compiler": "^1.1.12",
-        "@0x/sol-cov": "^2.1.10",
+        "@0x/sol-cov": "^2.1.12",
-        "@0x/subproviders": "^2.1.2",
+        "@0x/subproviders": "^2.1.4",
         "@0x/tslint-config": "^1.0.10",
         "@types/bn.js": "^4.11.0",
         "@types/ethereumjs-abi": "^0.6.0",
@@ -71,12 +71,12 @@
         "yargs": "^10.0.3"
     },
     "dependencies": {
-        "@0x/base-contract": "^3.0.4",
+        "@0x/base-contract": "^3.0.6",
-        "@0x/order-utils": "^3.0.0",
+        "@0x/order-utils": "^3.0.2",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "@types/js-combinatorics": "^0.5.29",
         "bn.js": "^4.11.8",
         "ethereum-types": "^1.1.2",

packages/dev-tools-pages/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/dev-tools-pages",
-    "version": "0.0.4",
+    "version": "0.0.6",
     "engines": {
         "node": ">=6.12"
     },
@@ -16,7 +16,7 @@
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "@0x/react-shared": "^1.0.19",
+        "@0x/react-shared": "^1.0.21",
         "basscss": "^8.0.3",
         "bowser": "^1.9.3",
         "less": "^2.7.2",

packages/dev-utils/CHANGELOG.json

@@ -1,4 +1,22 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "1.0.17",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
+    {
+        "timestamp": 1542134075,
+        "version": "1.0.16",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "timestamp": 1542028948,
         "version": "1.0.15",

packages/dev-utils/CHANGELOG.md

@@ -5,6 +5,14 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.17 - _November 14, 2018_
+
+    * Dependencies updated
+
+## v1.0.16 - _November 13, 2018_
+
+    * Dependencies updated
+
 ## v1.0.15 - _November 12, 2018_
 
     * Dependencies updated

packages/dev-utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/dev-utils",
-    "version": "1.0.15",
+    "version": "1.0.17",
     "engines": {
         "node": ">=6.12"
     },
@@ -41,11 +41,11 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/subproviders": "^2.1.2",
+        "@0x/subproviders": "^2.1.4",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "@types/web3-provider-engine": "^14.0.0",
         "chai": "^4.0.1",
         "ethereum-types": "^1.1.2",

packages/fill-scenarios/CHANGELOG.json

@@ -1,4 +1,22 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "1.0.12",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
+    {
+        "timestamp": 1542134075,
+        "version": "1.0.11",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "timestamp": 1542028948,
         "version": "1.0.10",

packages/fill-scenarios/CHANGELOG.md

@@ -5,6 +5,14 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.12 - _November 14, 2018_
+
+    * Dependencies updated
+
+## v1.0.11 - _November 13, 2018_
+
+    * Dependencies updated
+
 ## v1.0.10 - _November 12, 2018_
 
     * Dependencies updated

packages/fill-scenarios/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/fill-scenarios",
-    "version": "1.0.10",
+    "version": "1.0.12",
     "description": "0x order fill scenario generator",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -28,14 +28,14 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/abi-gen-wrappers": "^1.0.3",
+        "@0x/abi-gen-wrappers": "^1.0.5",
-        "@0x/base-contract": "^3.0.4",
+        "@0x/base-contract": "^3.0.6",
         "@0x/contract-artifacts": "^1.1.0",
-        "@0x/order-utils": "^3.0.0",
+        "@0x/order-utils": "^3.0.2",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "ethereum-types": "^1.1.2",
         "ethers": "~4.0.4",
         "lodash": "^4.17.5"

packages/instant/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/instant",
-    "version": "0.0.5",
+    "version": "0.0.7",
     "engines": {
         "node": ">=6.12"
     },
@@ -45,15 +45,15 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
     "dependencies": {
-        "@0x/assert": "^1.0.16",
+        "@0x/assert": "^1.0.17",
-        "@0x/asset-buyer": "^2.2.1",
+        "@0x/asset-buyer": "^3.0.0",
-        "@0x/json-schemas": "^2.1.0",
+        "@0x/json-schemas": "^2.1.1",
-        "@0x/order-utils": "^3.0.0",
+        "@0x/order-utils": "^3.0.2",
-        "@0x/subproviders": "^2.1.2",
+        "@0x/subproviders": "^2.1.4",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "copy-to-clipboard": "^3.0.8",
         "ethereum-types": "^1.1.2",
         "lodash": "^4.17.10",

packages/instant/src/components/animations/slide_animation.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 import { OptionallyScreenSpecific } from '../../style/media';
+import { SlideAnimationState } from '../../types';
 
 import { PositionAnimation, PositionAnimationSettings } from './position_animation';
 
-export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
 export interface SlideAnimationProps {
     animationState: SlideAnimationState;
     slideInSettings: OptionallyScreenSpecific<PositionAnimationSettings>;

packages/instant/src/components/buy_button.tsx

@@ -43,7 +43,6 @@ export class BuyButton extends React.Component<BuyButtonProps> {
                 onClick={this._handleClick}
                 isDisabled={shouldDisableButton}
                 fontColor={ColorOption.white}
-                fontSize="20px"
             >
                 Buy
             </Button>

packages/instant/src/components/buy_order_progress.tsx

@@ -12,7 +12,6 @@ export interface BuyOrderProgressProps {
 
 export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> = props => {
     const { buyOrderState } = props;
-
     if (
         buyOrderState.processState === OrderProcessState.Processing ||
         buyOrderState.processState === OrderProcessState.Success ||
@@ -30,6 +29,5 @@ export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> =
             </Container>
         );
     }
-
     return null;
 };

packages/instant/src/components/buy_order_state_buttons.tsx

@@ -35,7 +35,7 @@ export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonP
     if (props.buyOrderProcessingState === OrderProcessState.Failure) {
         return (
             <Flex justify="space-between">
-                <Button width="48%" onClick={props.onRetry} fontColor={ColorOption.white} fontSize="16px">
+                <Button width="48%" onClick={props.onRetry} fontColor={ColorOption.white}>
                     Back
                 </Button>
                 <SecondaryButton width="48%" onClick={props.onViewTransaction}>

packages/instant/src/components/erc20_token_selector.tsx

@@ -29,13 +29,18 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps>
         const { tokens, onTokenSelect } = this.props;
         return (
             <Container height="100%">
+                <Container marginBottom="10px">
+                    <Text fontColor={ColorOption.darkGrey} fontSize="18px" fontWeight="600" lineHeight="22px">
+                        Select Token
+                    </Text>
+                </Container>
                 <SearchInput
                     placeholder="Search tokens..."
                     width="100%"
                     value={this.state.searchQuery}
                     onChange={this._handleSearchInputChange}
                 />
-                <Container overflow="scroll" height="calc(100% - 80px)" marginTop="10px">
+                <Container overflow="scroll" height="calc(100% - 90px)" marginTop="10px">
                     {_.map(tokens, token => {
                         if (!this._isTokenQueryMatch(token)) {
                             return null;

packages/instant/src/components/install_wallet_panel_content.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import { META_MASK_CHROME_STORE_URL, META_MASK_SITE_URL } from '../constants';
+import { ColorOption } from '../style/theme';
+
+import { MetaMaskLogo } from './meta_mask_logo';
+import { StandardPanelContent } from './standard_panel_content';
+import { Button } from './ui/button';
+
+export interface InstallWalletPanelContentProps {}
+
+export const InstallWalletPanelContent: React.StatelessComponent<InstallWalletPanelContentProps> = () => (
+    <StandardPanelContent
+        image={<MetaMaskLogo width={85} height={80} />}
+        title="Install MetaMask"
+        description="Please install the MetaMask wallet extension from the Chrome Store."
+        moreInfoSettings={{
+            href: META_MASK_SITE_URL,
+            text: 'What is MetaMask?',
+        }}
+        action={
+            <Button
+                href={META_MASK_CHROME_STORE_URL}
+                width="100%"
+                fontColor={ColorOption.white}
+                backgroundColor={ColorOption.darkOrange}
+            >
+                Get Chrome Extension
+            </Button>
+        }
+    />
+);

packages/instant/src/components/instant_heading.tsx

@@ -15,8 +15,8 @@ import { Spinner } from './ui/spinner';
 import { Text } from './ui/text';
 
 export interface InstantHeadingProps {
-    selectedAssetAmount?: BigNumber;
+    selectedAssetUnitAmount?: BigNumber;
-    totalEthBaseAmount?: BigNumber;
+    totalEthBaseUnitAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
     buyOrderState: OrderState;
@@ -104,7 +104,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
         if (this.props.quoteRequestState === AsyncProcessState.Pending) {
             return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />;
         }
-        if (_.isUndefined(this.props.selectedAssetAmount)) {
+        if (_.isUndefined(this.props.selectedAssetUnitAmount)) {
             return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />;
         }
         return amountFunction();
@@ -113,8 +113,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private readonly _renderEthAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
-                {format.ethBaseAmount(
+                {format.ethBaseUnitAmount(
-                    this.props.totalEthBaseAmount,
+                    this.props.totalEthBaseUnitAmount,
                     4,
                     <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />,
                 )}
@@ -125,8 +125,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     private readonly _renderDollarAmount = (): React.ReactNode => {
         return (
             <Text fontSize="16px" fontColor={ColorOption.white}>
-                {format.ethBaseAmountInUsd(
+                {format.ethBaseUnitAmountInUsd(
-                    this.props.totalEthBaseAmount,
+                    this.props.totalEthBaseUnitAmount,
                     this.props.ethUsdPrice,
                     2,
                     <AmountPlaceholder isPulsating={false} color={ColorOption.white} />,

packages/instant/src/components/meta_mask_logo.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+export interface MetaMaskLogoProps {
+    width?: number;
+    height?: number;
+}
+
+export const MetaMaskLogo: React.StatelessComponent<MetaMaskLogoProps> = ({ width, height }) => (
+    <svg width={width} height={height} viewBox="0 0 85 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M80.578 0L47.7107 24.8648L53.542 10.2702L80.578 0Z" fill="#E2761B" />
+        <path d="M4.24075 0L37.1081 25.4053L31.2768 10.2702L4.24075 0Z" fill="#E4761B" />
+        <path d="M68.9152 57.8379L59.9032 71.8919L78.9874 77.2973L84.2886 58.3785L68.9152 57.8379Z" fill="#E4761B" />
+        <path d="M0.53006 58.3785L5.83124 77.2973L24.9155 71.8919L15.9035 57.8379L0.53006 58.3785Z" fill="#E4761B" />
+        <path d="M23.8552 34.5941L18.554 42.7022L37.1082 43.7833L36.5781 23.2428L23.8552 34.5941Z" fill="#E4761B" />
+        <path d="M60.9635 34.5941L47.7106 23.2428V43.7833L66.2647 42.7022L60.9635 34.5941Z" fill="#E4761B" />
+        <path d="M24.9156 71.8914L36.0481 66.4861L26.5059 58.378L24.9156 71.8914Z" fill="#E4761B" />
+        <path d="M48.7709 66.4861L59.9034 71.8914L58.313 58.378L48.7709 66.4861Z" fill="#E4761B" />
+        <path d="M59.9034 71.8919L48.7709 66.4865L49.301 73.5135V76.7567L59.9034 71.8919Z" fill="#D7C1B3" />
+        <path d="M24.9157 71.892L35.518 76.7568V73.5136L36.0482 66.4866L24.9157 71.892Z" fill="#D7C1B3" />
+        <path d="M35.5179 53.5138L25.9758 50.8111L32.8673 47.5678L35.5179 53.5138Z" fill="#233447" />
+        <path d="M49.3009 53.5138L51.9515 47.5678L58.843 50.8111L49.3009 53.5138Z" fill="#233447" />
+        <path d="M24.9155 71.892L26.5059 57.838L15.9035 58.3785L24.9155 71.892Z" fill="#CD6116" />
+        <path d="M58.313 57.838L59.9034 71.892L68.9154 58.3785L58.313 57.838Z" fill="#CD6116" />
+        <path
+            d="M66.2648 42.7025L47.7106 43.7836L49.301 53.5132L51.9516 47.5673L58.8431 50.8106L66.2648 42.7025Z"
+            fill="#CD6116"
+        />
+        <path
+            d="M25.9758 50.8106L32.8673 47.5673L35.5179 53.5132L37.1083 43.7836L18.5541 42.7025L25.9758 50.8106Z"
+            fill="#CD6116"
+        />
+        <path d="M18.5541 42.7024L26.5059 58.378L25.9758 50.8105L18.5541 42.7024Z" fill="#E4751F" />
+        <path d="M58.8431 50.8106L58.313 58.3781L66.2647 42.7025L58.8431 50.8106Z" fill="#E4751F" />
+        <path d="M37.1083 43.7838L35.518 53.5135L37.6384 65.4053L38.1686 49.7297L37.1083 43.7838Z" fill="#E4751F" />
+        <path d="M47.7105 43.7838L46.6503 49.7297L47.1804 65.4053L49.3009 53.5135L47.7105 43.7838Z" fill="#E4751F" />
+        <path
+            d="M49.301 53.5134L47.1805 65.4052L48.7709 66.4863L58.313 58.3782L58.8431 50.8107L49.301 53.5134Z"
+            fill="#F6851B"
+        />
+        <path
+            d="M25.9758 50.8107L26.5059 58.3782L36.048 66.4863L37.6384 65.4052L35.5179 53.5134L25.9758 50.8107Z"
+            fill="#F6851B"
+        />
+        <path
+            d="M49.3011 76.7568V73.5135L48.771 72.973H36.0482L35.518 73.5135V76.7568L24.9157 71.8919L28.6265 75.1351L36.0482 80H48.771L56.1927 75.1351L59.9035 71.8919L49.3011 76.7568Z"
+            fill="#C0AD9E"
+        />
+        <path
+            d="M48.771 66.486L47.1806 65.405H37.6385L36.0482 66.486L35.518 73.513L36.0482 72.9725H48.771L49.3011 73.513L48.771 66.486Z"
+            fill="#161616"
+        />
+        <path
+            d="M82.1685 26.4864L84.8191 12.9729L80.5781 0L48.771 24.3242L60.9637 34.5945L78.4576 39.9998L82.1685 35.6755L80.5781 34.0539L83.2287 31.8918L81.1082 30.2702L83.7588 28.108L82.1685 26.4864Z"
+            fill="#763D16"
+        />
+        <path
+            d="M0 12.9729L2.65059 26.4864L1.06024 28.108L3.71083 30.2702L1.59036 31.8918L4.24095 34.0539L2.65059 35.6755L6.36142 39.9998L23.8553 34.5945L36.0481 24.3242L4.24095 0L0 12.9729Z"
+            fill="#763D16"
+        />
+        <path
+            d="M78.4575 39.9993L60.9636 34.5939L66.2648 42.702L58.313 58.3776H68.9154H84.2888L78.4575 39.9993Z"
+            fill="#F6851B"
+        />
+        <path
+            d="M23.8554 34.5939L6.36147 39.9993L0.530167 58.3776H15.9036H26.506L18.5542 42.702L23.8554 34.5939Z"
+            fill="#F6851B"
+        />
+        <path
+            d="M47.7106 43.7833L48.7709 24.3239L53.5419 10.2699H31.2769L36.048 24.3239L37.1083 43.7833L37.6384 49.7292V65.4048H47.1805V49.7292L47.7106 43.7833Z"
+            fill="#F6851B"
+        />
+    </svg>
+);
+
+MetaMaskLogo.defaultProps = {
+    width: 85,
+    height: 80,
+};

packages/instant/src/components/order_details.tsx

@@ -4,6 +4,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { oc } from 'ts-optchain';
 
+import { BIG_NUMBER_ZERO } from '../constants';
 import { ColorOption } from '../style/theme';
 import { format } from '../util/format';
 
@@ -15,16 +16,23 @@ import { Text } from './ui/text';
 
 export interface OrderDetailsProps {
     buyQuoteInfo?: BuyQuoteInfo;
+    selectedAssetUnitAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     isLoading: boolean;
 }
 export class OrderDetails extends React.Component<OrderDetailsProps> {
     public render(): React.ReactNode {
-        const { buyQuoteInfo, ethUsdPrice } = this.props;
+        const { buyQuoteInfo, ethUsdPrice, selectedAssetUnitAmount } = this.props;
         const buyQuoteAccessor = oc(buyQuoteInfo);
-        const ethAssetPrice = buyQuoteAccessor.ethPerAssetPrice();
+        const assetEthBaseUnitAmount = buyQuoteAccessor.assetEthAmount();
-        const ethTokenFee = buyQuoteAccessor.feeEthAmount();
+        const feeEthBaseUnitAmount = buyQuoteAccessor.feeEthAmount();
-        const totalEthAmount = buyQuoteAccessor.totalEthAmount();
+        const totalEthBaseUnitAmount = buyQuoteAccessor.totalEthAmount();
+        const pricePerTokenEth =
+            !_.isUndefined(assetEthBaseUnitAmount) &&
+            !_.isUndefined(selectedAssetUnitAmount) &&
+            !selectedAssetUnitAmount.eq(BIG_NUMBER_ZERO)
+                ? assetEthBaseUnitAmount.div(selectedAssetUnitAmount).ceil()
+                : undefined;
         return (
             <Container padding="20px" width="100%" flexGrow={1}>
                 <Container marginBottom="10px">
@@ -40,20 +48,19 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
                 </Container>
                 <EthAmountRow
                     rowLabel="Token Price"
-                    ethAmount={ethAssetPrice}
+                    ethAmount={pricePerTokenEth}
                     ethUsdPrice={ethUsdPrice}
-                    isEthAmountInBaseUnits={false}
                     isLoading={this.props.isLoading}
                 />
                 <EthAmountRow
                     rowLabel="Fee"
-                    ethAmount={ethTokenFee}
+                    ethAmount={feeEthBaseUnitAmount}
                     ethUsdPrice={ethUsdPrice}
                     isLoading={this.props.isLoading}
                 />
                 <EthAmountRow
                     rowLabel="Total Cost"
-                    ethAmount={totalEthAmount}
+                    ethAmount={totalEthBaseUnitAmount}
                     ethUsdPrice={ethUsdPrice}
                     shouldEmphasize={true}
                     isLoading={this.props.isLoading}
@@ -81,7 +88,7 @@ export class EthAmountRow extends React.Component<EthAmountRowProps> {
         const { rowLabel, ethAmount, isEthAmountInBaseUnits, shouldEmphasize, isLoading } = this.props;
 
         const fontWeight = shouldEmphasize ? 700 : 400;
-        const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseAmount : format.ethUnitAmount;
+        const ethFormatter = isEthAmountInBaseUnits ? format.ethBaseUnitAmount : format.ethUnitAmount;
         return (
             <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}>
                 <Flex justify="space-between">
@@ -105,7 +112,9 @@ export class EthAmountRow extends React.Component<EthAmountRowProps> {
         );
     }
     private _renderUsdSection(): React.ReactNode {
-        const usdFormatter = this.props.isEthAmountInBaseUnits ? format.ethBaseAmountInUsd : format.ethUnitAmountInUsd;
+        const usdFormatter = this.props.isEthAmountInBaseUnits
+            ? format.ethBaseUnitAmountInUsd
+            : format.ethUnitAmountInUsd;
         const shouldHideUsdPriceSection = _.isUndefined(this.props.ethUsdPrice) || _.isUndefined(this.props.ethAmount);
         return shouldHideUsdPriceSection ? null : (
             <Container marginRight="3px" display="inline-block">

packages/instant/src/components/payment_method.tsx

@@ -1,45 +1,132 @@
-import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
-import { Network } from '../types';
+import { Account, AccountState, Network } from '../types';
 
+import { MetaMaskLogo } from './meta_mask_logo';
 import { PaymentMethodDropdown } from './payment_method_dropdown';
 import { Circle } from './ui/circle';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
+import { Icon } from './ui/icon';
 import { Text } from './ui/text';
 
-export interface PaymentMethodProps {}
+export interface PaymentMethodProps {
+    account: Account;
+    network: Network;
+    onInstallWalletClick: () => void;
+    onUnlockWalletClick: () => void;
+}
 
-export const PaymentMethod: React.StatelessComponent<PaymentMethodProps> = () => (
+export class PaymentMethod extends React.Component<PaymentMethodProps> {
-    <Container padding="20px" width="100%">
+    public render(): React.ReactNode {
-        <Container marginBottom="10px">
+        return (
-            <Flex justify="space-between">
+            <Container padding="20px" width="100%">
-                <Text
+                <Container marginBottom="12px">
-                    letterSpacing="1px"
+                    <Flex justify="space-between">
-                    fontColor={ColorOption.primaryColor}
+                        <Text
-                    fontWeight={600}
+                            letterSpacing="1px"
-                    textTransform="uppercase"
+                            fontColor={ColorOption.primaryColor}
-                    fontSize="14px"
+                            fontWeight={600}
-                >
+                            textTransform="uppercase"
-                    Payment Method
+                            fontSize="14px"
-                </Text>
+                        >
-                <Flex>
+                            {this._renderTitleText()}
-                    <Circle color={ColorOption.green} diameter={8} />
+                        </Text>
+                        <Flex>{this._renderTitleLabel()}</Flex>
+                    </Flex>
+                </Container>
+                {this._renderMainContent()}
+            </Container>
+        );
+    }
+    private readonly _renderTitleText = (): string => {
+        const { account } = this.props;
+        switch (account.state) {
+            case AccountState.Loading:
+                return 'loading...';
+            case AccountState.Locked:
+            case AccountState.None:
+                return 'connect your wallet';
+            case AccountState.Ready:
+                return 'payment method';
+        }
+    };
+    private readonly _renderTitleLabel = (): React.ReactNode => {
+        const { account } = this.props;
+        if (account.state === AccountState.Ready || account.state === AccountState.Locked) {
+            const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red;
+            return (
+                <React.Fragment>
+                    <Circle diameter={8} color={circleColor} />
                     <Container marginLeft="3px">
                         <Text fontColor={ColorOption.darkGrey} fontSize="12px">
                             MetaMask
                         </Text>
                     </Container>
-                </Flex>
+                </React.Fragment>
-            </Flex>
+            );
-        </Container>
+        }
-        <PaymentMethodDropdown
+        return null;
-            accountAddress="0xa1b2c3d4e5f6g7h8j9k10"
+    };
-            accountEthBalanceInWei={new BigNumber(10500000000000000000)}
+    private readonly _renderMainContent = (): React.ReactNode => {
-            network={Network.Mainnet}
+        const { account, network } = this.props;
-        />
+        switch (account.state) {
+            case AccountState.Loading:
+                // Just take up the same amount of space as the other states.
+                return <Container height="52px" />;
+            case AccountState.Locked:
+                return (
+                    <WalletPrompt
+                        onClick={this.props.onUnlockWalletClick}
+                        image={<Icon width={13} icon="lock" color={ColorOption.black} />}
+                    >
+                        Please Unlock MetaMask
+                    </WalletPrompt>
+                );
+            case AccountState.None:
+                return (
+                    <WalletPrompt
+                        onClick={this.props.onInstallWalletClick}
+                        image={<MetaMaskLogo width={19} height={18} />}
+                    >
+                        Install MetaMask
+                    </WalletPrompt>
+                );
+            case AccountState.Ready:
+                return (
+                    <PaymentMethodDropdown
+                        accountAddress={account.address}
+                        accountEthBalanceInWei={account.ethBalanceInWei}
+                        network={network}
+                    />
+                );
+        }
+    };
+}
+
+interface WalletPromptProps {
+    image: React.ReactNode;
+    onClick?: () => void;
+}
+
+const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, image, children }) => (
+    <Container
+        padding="14.5px"
+        border={`1px solid ${ColorOption.darkOrange}`}
+        backgroundColor={ColorOption.lightOrange}
+        width="100%"
+        borderRadius="4px"
+        onClick={onClick}
+        cursor={onClick ? 'pointer' : undefined}
+        boxShadowOnHover={!!onClick}
+    >
+        <Flex>
+            <Container marginRight="10px">{image}</Container>
+            <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
+                {children}
+            </Text>
+        </Flex>
     </Container>
 );

packages/instant/src/components/payment_method_dropdown.tsx

@@ -18,7 +18,7 @@ export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdown
     public render(): React.ReactNode {
         const { accountAddress, accountEthBalanceInWei } = this.props;
         const value = format.ethAddress(accountAddress);
-        const label = format.ethBaseAmount(accountEthBalanceInWei, 4, '') as string;
+        const label = format.ethBaseUnitAmount(accountEthBalanceInWei, 4, '') as string;
         return <Dropdown value={value} label={label} items={this._getDropdownItemConfigs()} />;
     }
     private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => {

packages/instant/src/components/placing_order_button.tsx

@@ -7,9 +7,9 @@ import { Container } from './ui/container';
 import { Spinner } from './ui/spinner';
 
 export const PlacingOrderButton: React.StatelessComponent<{}> = props => (
-    <Button isDisabled={true} width="100%" fontColor={ColorOption.white} fontSize="20px">
+    <Button isDisabled={true} width="100%" fontColor={ColorOption.white}>
         <Container display="inline-block" position="relative" top="3px" marginRight="8px">
-            <Spinner widthPx={20} heightPx={20} />
+            <Spinner widthPx={16} heightPx={16} />
         </Container>
         Placing Order&hellip;
     </Button>

packages/instant/src/components/scaling_input.tsx

@@ -156,8 +156,6 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                     return `${width}px`;
                 }
                 return `${textLengthThreshold}ch`;
-            default:
-                return '1ch';
         }
     };
     private readonly _calculateFontSize = (phase: ScalingInputPhase): number => {

packages/instant/src/components/secondary_button.tsx

@@ -15,8 +15,6 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p
             borderColor={ColorOption.lightGrey}
             width={props.width}
             onClick={props.onClick}
-            fontColor={ColorOption.primaryColor}
-            fontSize="16px"
             {...buttonProps}
         >
             {props.children}

packages/instant/src/components/sliding_error.tsx

@@ -3,9 +3,10 @@ import * as React from 'react';
 import { ScreenSpecification } from '../style/media';
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
+import { SlideAnimationState } from '../types';
 
 import { PositionAnimationSettings } from './animations/position_animation';
-import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
+import { SlideAnimation } from './animations/slide_animation';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';

packages/instant/src/components/sliding_panel.tsx

@@ -2,35 +2,25 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
+import { SlideAnimationState } from '../types';
 
 import { PositionAnimationSettings } from './animations/position_animation';
-import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
+import { SlideAnimation } from './animations/slide_animation';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 import { Icon } from './ui/icon';
-import { Text } from './ui/text';
 
 export interface PanelProps {
-    title?: string;
     onClose?: () => void;
 }
 
-export const Panel: React.StatelessComponent<PanelProps> = ({ title, children, onClose }) => (
+export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
     <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel} padding="20px">
-        <Flex justify="space-between">
+        <Flex justify="flex-end">
-            {title && (
+            <Icon padding="5px" width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
-                <Container marginTop="3px">
-                    <Text fontColor={ColorOption.darkGrey} fontSize="18px" fontWeight="600" lineHeight="22px">
-                        {title}
-                    </Text>
-                </Container>
-            )}
-            <Container position="relative" bottom="7px">
-                <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
-            </Container>
         </Flex>
-        <Container marginTop="10px" height="100%">
+        <Container position="relative" top="-10px" height="100%">
             {children}
         </Container>
     </Container>

packages/instant/src/components/standard_panel_content.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
+
+export interface MoreInfoSettings {
+    text: string;
+    href: string;
+}
+
+export interface StandardPanelContentProps {
+    image: React.ReactNode;
+    title: string;
+    description: string;
+    moreInfoSettings?: MoreInfoSettings;
+    action: React.ReactNode;
+}
+
+const SPACING_BETWEEN_PX = '20px';
+
+export const StandardPanelContent: React.StatelessComponent<StandardPanelContentProps> = ({
+    image,
+    title,
+    description,
+    moreInfoSettings,
+    action,
+}) => (
+    <Container height="100%">
+        <Flex direction="column" height="calc(100% - 58px)">
+            <Container marginBottom={SPACING_BETWEEN_PX}>{image}</Container>
+            <Container marginBottom={SPACING_BETWEEN_PX}>
+                <Text fontSize="20px" fontWeight={700} fontColor={ColorOption.black}>
+                    {title}
+                </Text>
+            </Container>
+            <Container marginBottom={SPACING_BETWEEN_PX}>
+                <Text fontSize="14px" fontColor={ColorOption.grey} center={true}>
+                    {description}
+                </Text>
+            </Container>
+            <Container marginBottom={SPACING_BETWEEN_PX}>
+                {moreInfoSettings && (
+                    <Text
+                        center={true}
+                        fontSize="13px"
+                        textDecorationLine="underline"
+                        fontColor={ColorOption.lightGrey}
+                        href={moreInfoSettings.href}
+                    >
+                        {moreInfoSettings.text}
+                    </Text>
+                )}
+            </Container>
+        </Flex>
+        <Container>{action}</Container>
+    </Container>
+);

packages/instant/src/components/standard_sliding_panel.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { SlideAnimationState, StandardSlidingPanelContent, StandardSlidingPanelSettings } from '../types';
+
+import { InstallWalletPanelContent } from './install_wallet_panel_content';
+import { SlidingPanel } from './sliding_panel';
+
+export interface StandardSlidingPanelProps extends StandardSlidingPanelSettings {
+    onClose: () => void;
+}
+
+export class StandardSlidingPanel extends React.Component<StandardSlidingPanelProps> {
+    public render(): React.ReactNode {
+        const { animationState, content, onClose } = this.props;
+        return (
+            <SlidingPanel animationState={animationState} onClose={onClose}>
+                {this._getNodeForContent(content)}
+            </SlidingPanel>
+        );
+    }
+    private readonly _getNodeForContent = (content: StandardSlidingPanelContent): React.ReactNode => {
+        switch (content) {
+            case StandardSlidingPanelContent.InstallWallet:
+                return <InstallWalletPanelContent />;
+            case StandardSlidingPanelContent.None:
+                return null;
+        }
+    };
+}

packages/instant/src/components/timed_progress_bar.tsx

@@ -2,7 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_WIDTH } from '../constants';
-import { ColorOption, keyframes, styled } from '../style/theme';
+import { ColorOption, css, keyframes, styled } from '../style/theme';
 
 import { Container } from './ui/container';
 
@@ -20,15 +20,11 @@ export class TimedProgressBar extends React.Component<TimedProgressBarProps, {}>
     private readonly _barRef = React.createRef<HTMLDivElement>();
 
     public render(): React.ReactNode {
-        const timedProgressProps = this._calculateTimedProgressProps();
+        const widthAnimationSettings = this._calculateWidthAnimationSettings();
-        return (
+        return <ProgressBar animationSettings={widthAnimationSettings} ref={this._barRef} />;
-            <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
-                <TimedProgress {...timedProgressProps} ref={this._barRef as any} />
-            </Container>
-        );
     }
 
-    private _calculateTimedProgressProps(): TimedProgressProps {
+    private _calculateWidthAnimationSettings(): WidthAnimationSettings {
         if (this.props.hasEnded) {
             if (!this._barRef.current) {
                 throw new Error('ended but no reference');
@@ -60,21 +56,45 @@ const expandingWidthKeyframes = (fromWidth: string, toWidth: string) => {
       `;
 };
 
-interface TimedProgressProps {
+export interface WidthAnimationSettings {
     timeMs: number;
     fromWidth: string;
     toWidth: string;
 }
 
-export const TimedProgress =
+interface ProgressProps {
+    width?: string;
+    animationSettings?: WidthAnimationSettings;
+}
+
+export const Progress =
     styled.div <
-    TimedProgressProps >
+    ProgressProps >
     `
     && {
         background-color: ${props => props.theme[ColorOption.primaryColor]};
         border-radius: 6px;
         height: 6px;
-        animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)}
+        ${props => (props.width ? `width: ${props.width};` : '')}
-          ${props => props.timeMs}ms linear 1 forwards;
+        ${props =>
+            props.animationSettings
+                ? css`
+                      animation: ${expandingWidthKeyframes(
+                              props.animationSettings.fromWidth,
+                              props.animationSettings.toWidth,
+                          )}
+                          ${props.animationSettings.timeMs}ms linear 1 forwards;
+                  `
+                : ''}
     }
 `;
+
+export interface ProgressBarProps extends ProgressProps {}
+
+export const ProgressBar: React.ComponentType<ProgressBarProps & React.ClassAttributes<{}>> = React.forwardRef(
+    (props, ref) => (
+        <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
+            <Progress {...props} ref={ref as any} />
+        </Container>
+    ),
+);

packages/instant/src/components/ui/button.tsx

@@ -2,6 +2,9 @@ import { darken, saturate } from 'polished';
 import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
+import { util } from '../../util/util';
+
+export type ButtonOnClickHandler = (event: React.MouseEvent<HTMLElement>) => void;
 
 export interface ButtonProps {
     backgroundColor?: ColorOption;
@@ -12,15 +15,26 @@ export interface ButtonProps {
     padding?: string;
     type?: string;
     isDisabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    href?: string;
+    onClick?: ButtonOnClickHandler;
     className?: string;
 }
 
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
+const PlainButton: React.StatelessComponent<ButtonProps> = ({
-    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
+    children,
-        {children}
+    isDisabled,
-    </button>
+    onClick,
-);
+    href,
+    type,
+    className,
+}) => {
+    const computedOnClick = isDisabled ? undefined : href ? util.createOpenUrlInNewWindow(href) : onClick;
+    return (
+        <button type={type} className={className} onClick={computedOnClick} disabled={isDisabled}>
+            {children}
+        </button>
+    );
+};
 
 const darkenOnHoverAmount = 0.1;
 const darkenOnActiveAmount = 0.2;
@@ -31,7 +45,7 @@ export const Button = styled(PlainButton)`
         box-sizing: border-box;
         font-size: ${props => props.fontSize};
         font-family: 'Inter UI', sans-serif;
-        font-weight: 600;
+        font-weight: 500;
         color: ${props => props.fontColor && props.theme[props.fontColor]};
         cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
         transition: background-color, opacity 0.5s ease;
@@ -64,11 +78,10 @@ export const Button = styled(PlainButton)`
 
 Button.defaultProps = {
     backgroundColor: ColorOption.primaryColor,
-    borderColor: ColorOption.primaryColor,
     width: 'auto',
     isDisabled: false,
-    padding: '.6em 1.2em',
+    padding: '.82em 1.2em',
-    fontSize: '15px',
+    fontSize: '16px',
 };
 
 Button.displayName = 'Button';

packages/instant/src/components/ui/icon.tsx

@@ -20,6 +20,7 @@ interface IconInfoMapping {
     success: IconInfo;
     chevron: IconInfo;
     search: IconInfo;
+    lock: IconInfo;
 }
 const ICONS: IconInfoMapping = {
     closeX: {
@@ -58,6 +59,11 @@ const ICONS: IconInfoMapping = {
         path:
             'M8.39404 5.19727C8.39404 6.96289 6.96265 8.39453 5.19702 8.39453C3.4314 8.39453 2 6.96289 2 5.19727C2 3.43164 3.4314 2 5.19702 2C6.96265 2 8.39404 3.43164 8.39404 5.19727ZM8.09668 9.51074C7.26855 10.0684 6.27075 10.3945 5.19702 10.3945C2.3269 10.3945 0 8.06738 0 5.19727C0 2.32715 2.3269 0 5.19702 0C8.06738 0 10.394 2.32715 10.394 5.19727C10.394 6.27051 10.0686 7.26855 9.51074 8.09668L13.6997 12.2861L12.2854 13.7002L8.09668 9.51074Z',
     },
+    lock: {
+        viewBox: '0 0 13 16',
+        path:
+            'M6.47619 0C3.79509 0 1.60489 2.21216 1.60489 4.92014V6.33135C0.717479 6.33135 0 7.05602 0 7.95232V14.379C0 15.2753 0.717479 16 1.60489 16H11.3475C12.2349 16 12.9524 15.2753 12.9524 14.379V7.95232C12.9524 7.05602 12.2349 6.33135 11.3475 6.33135V4.92014C11.3475 2.21216 9.1573 0 6.47619 0ZM9.6482 6.33135H3.30418V4.92014C3.30418 3.16567 4.72026 1.71633 6.47619 1.71633C8.23213 1.71633 9.6482 3.16567 9.6482 4.92014V6.33135Z',
+    },
 };
 
 export interface IconProps {

packages/instant/src/components/ui/text.tsx

@@ -2,6 +2,7 @@ import { darken } from 'polished';
 import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
+import { util } from '../../util/util';
 
 export interface TextProps {
     fontColor?: ColorOption;
@@ -20,10 +21,16 @@ export interface TextProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     noWrap?: boolean;
     display?: string;
+    href?: string;
 }
 
+export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...rest }) => {
+    const computedOnClick = href ? util.createOpenUrlInNewWindow(href) : onClick;
+    return <StyledText {...rest} onClick={computedOnClick} />;
+};
+
 const darkenOnHoverAmount = 0.3;
-export const Text =
+export const StyledText =
     styled.div <
     TextProps >
     `

packages/instant/src/components/zero_ex_instant.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 
+import { ZeroExInstantContainer } from '../components/zero_ex_instant_container';
+
 import { INJECTED_DIV_CLASS } from '../constants';
 
-import { ZeroExInstantContainer } from './zero_ex_instant_container';
 import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
 
 export type ZeroExInstantProps = ZeroExInstantProviderProps;

packages/instant/src/components/zero_ex_instant_container.tsx

@@ -1,26 +1,29 @@
 import * as React from 'react';
 
 import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector';
+import { ConnectedBuyOrderProgressOrPaymentMethod } from '../containers/connected_buy_order_progress_or_payment_method';
+import { CurrentStandardSlidingPanel } from '../containers/current_standard_sliding_panel';
 import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
 import { LatestError } from '../containers/latest_error';
-import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress';
 import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
+import { OrderProcessState, SlideAnimationState } from '../types';
 
-import { SlideAnimationState } from './animations/slide_animation';
 import { CSSReset } from './css_reset';
 import { SlidingPanel } from './sliding_panel';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 
-export interface ZeroExInstantContainerProps {}
+export interface ZeroExInstantContainerProps {
+    orderProcessState: OrderProcessState;
+}
 export interface ZeroExInstantContainerState {
     tokenSelectionPanelAnimationState: SlideAnimationState;
 }
 
-export class ZeroExInstantContainer extends React.Component<ZeroExInstantContainerProps, ZeroExInstantContainerState> {
+export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantContainerState> {
     public state = {
         tokenSelectionPanelAnimationState: 'none' as SlideAnimationState,
     };
@@ -47,19 +50,19 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                     >
                         <Flex direction="column" justify="flex-start" height="100%">
                             <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
-                            <SelectedAssetBuyOrderProgress />
+                            <ConnectedBuyOrderProgressOrPaymentMethod />
                             <LatestBuyQuoteOrderDetails />
                             <Container padding="20px" width="100%">
                                 <SelectedAssetBuyOrderStateButtons />
                             </Container>
                         </Flex>
                         <SlidingPanel
-                            title="Select Token"
                             animationState={this.state.tokenSelectionPanelAnimationState}
                             onClose={this._handlePanelClose}
                         >
                             <AvailableERC20TokenSelector onTokenSelect={this._handlePanelClose} />
                         </SlidingPanel>
+                        <CurrentStandardSlidingPanel />
                     </Container>
                 </Container>
             </React.Fragment>

packages/instant/src/components/zero_ex_instant_overlay.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
+import { ZeroExInstantContainer } from '../components/zero_ex_instant_container';
 import { ColorOption } from '../style/theme';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 import { Icon } from './ui/icon';
 import { Overlay } from './ui/overlay';
-import { ZeroExInstantContainer } from './zero_ex_instant_container';
 import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
 
 export interface ZeroExInstantOverlayProps extends ZeroExInstantProviderProps {

packages/instant/src/components/zero_ex_instant_provider.tsx

@@ -73,7 +73,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
                       completeAssetMetaDataMap,
                       networkId,
                   ),
-            selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
+            selectedAssetUnitAmount: _.isUndefined(props.defaultAssetBuyAmount)
                 ? undefined
                 : new BigNumber(props.defaultAssetBuyAmount),
             availableAssets: _.isUndefined(props.availableAssetDatas)
@@ -91,12 +91,13 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
     }
     public componentDidMount(): void {
         const state = this._store.getState();
+        const dispatch = this._store.dispatch;
         // tslint:disable-next-line:no-floating-promises
-        asyncData.fetchEthPriceAndDispatchToStore(this._store);
+        asyncData.fetchEthPriceAndDispatchToStore(dispatch);
         // fetch available assets if none are specified
         if (_.isUndefined(state.availableAssets)) {
             // tslint:disable-next-line:no-floating-promises
-            asyncData.fetchAvailableAssetDatasAndDispatchToStore(this._store);
+            asyncData.fetchAvailableAssetDatasAndDispatchToStore(state, dispatch);
         }
         if (state.providerState.account.state !== AccountState.None) {
             this._accountUpdateHeartbeat = generateAccountHeartbeater({
@@ -112,7 +113,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         });
         this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
         // tslint:disable-next-line:no-floating-promises
-        asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store: this._store, shouldSetPending: true });
+        asyncData.fetchCurrentBuyQuoteAndDispatchToStore(state, dispatch, true);
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
         // tslint:disable-next-line:no-floating-promises

packages/instant/src/constants.ts

@@ -19,6 +19,9 @@ export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
 export const PROGRESS_STALL_AT_WIDTH = '95%';
 export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
+export const META_MASK_CHROME_STORE_URL =
+    'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en';
+export const META_MASK_SITE_URL = 'https://metamask.io/';
 export const ETHEREUM_NODE_URL_BY_NETWORK = {
     [Network.Mainnet]: 'https://mainnet.infura.io/',
     [Network.Kovan]: 'https://kovan.infura.io/',

packages/instant/src/containers/connected_account_payment_method.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { PaymentMethod, PaymentMethodProps } from '../components/payment_method';
+import { Action, actions } from '../redux/actions';
+import { asyncData } from '../redux/async_data';
+import { State } from '../redux/reducer';
+import { Network, Omit, ProviderState, StandardSlidingPanelContent } from '../types';
+
+export interface ConnectedAccountPaymentMethodProps {}
+
+interface ConnectedState {
+    network: Network;
+    providerState: ProviderState;
+}
+
+interface ConnectedDispatch {
+    onInstallWalletClick: () => void;
+    unlockWalletAndDispatchToStore: (providerState: ProviderState) => void;
+}
+
+type ConnectedProps = Omit<PaymentMethodProps, keyof ConnectedAccountPaymentMethodProps>;
+
+type FinalProps = ConnectedProps & ConnectedAccountPaymentMethodProps;
+
+const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({
+    network: state.network,
+    providerState: state.providerState,
+});
+
+const mapDispatchToProps = (
+    dispatch: Dispatch<Action>,
+    ownProps: ConnectedAccountPaymentMethodProps,
+): ConnectedDispatch => ({
+    onInstallWalletClick: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)),
+    unlockWalletAndDispatchToStore: async (providerState: ProviderState) =>
+        asyncData.fetchAccountInfoAndDispatchToStore(providerState, dispatch, true),
+});
+
+const mergeProps = (
+    connectedState: ConnectedState,
+    connectedDispatch: ConnectedDispatch,
+    ownProps: ConnectedAccountPaymentMethodProps,
+): FinalProps => ({
+    ...ownProps,
+    network: connectedState.network,
+    account: connectedState.providerState.account,
+    onInstallWalletClick: connectedDispatch.onInstallWalletClick,
+    onUnlockWalletClick: () => {
+        connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState);
+    },
+});
+
+export const ConnectedAccountPaymentMethod: React.ComponentClass<ConnectedAccountPaymentMethodProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+    mergeProps,
+)(PaymentMethod);

packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { State } from '../redux/reducer';
+import { OrderProcessState } from '../types';
+
+import { ConnectedAccountPaymentMethod } from './connected_account_payment_method';
+import { SelectedAssetBuyOrderProgress } from './selected_asset_buy_order_progress';
+
+interface BuyOrderProgressOrPaymentMethodProps {
+    orderProcessState: OrderProcessState;
+}
+export const BuyOrderProgressOrPaymentMethod = (props: BuyOrderProgressOrPaymentMethodProps) => {
+    const { orderProcessState } = props;
+    if (
+        orderProcessState === OrderProcessState.Processing ||
+        orderProcessState === OrderProcessState.Success ||
+        orderProcessState === OrderProcessState.Failure
+    ) {
+        return <SelectedAssetBuyOrderProgress />;
+    }
+    if (orderProcessState === OrderProcessState.None) {
+        return <ConnectedAccountPaymentMethod />;
+    }
+    return null;
+};
+
+interface ConnectedState extends BuyOrderProgressOrPaymentMethodProps {}
+
+export interface ConnectedBuyOrderProgressOrPaymentMethodProps {}
+const mapStateToProps = (state: State, _ownProps: ConnectedBuyOrderProgressOrPaymentMethodProps): ConnectedState => ({
+    orderProcessState: state.buyOrderState.processState,
+});
+export const ConnectedBuyOrderProgressOrPaymentMethod: React.ComponentClass<
+    ConnectedBuyOrderProgressOrPaymentMethodProps
+> = connect(mapStateToProps)(BuyOrderProgressOrPaymentMethod);

packages/instant/src/containers/current_standard_sliding_panel.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { StandardSlidingPanel } from '../components/standard_sliding_panel';
+import { Action, actions } from '../redux/actions';
+import { State } from '../redux/reducer';
+import { StandardSlidingPanelSettings } from '../types';
+
+export interface CurrentStandardSlidingPanelProps {}
+
+interface ConnectedState extends StandardSlidingPanelSettings {}
+
+interface ConnectedDispatch {
+    onClose: () => void;
+}
+
+const mapStateToProps = (state: State, _ownProps: CurrentStandardSlidingPanelProps): ConnectedState =>
+    state.standardSlidingPanelSettings;
+
+const mapDispatchToProps = (
+    dispatch: Dispatch<Action>,
+    ownProps: CurrentStandardSlidingPanelProps,
+): ConnectedDispatch => ({
+    onClose: () => dispatch(actions.closeStandardSlidingPanel()),
+});
+
+export const CurrentStandardSlidingPanel: React.ComponentClass<CurrentStandardSlidingPanelProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(StandardSlidingPanel);

packages/instant/src/containers/latest_buy_quote_order_details.ts

@@ -14,6 +14,7 @@ export interface LatestBuyQuoteOrderDetailsProps {}
 
 interface ConnectedState {
     buyQuoteInfo?: BuyQuoteInfo;
+    selectedAssetUnitAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     isLoading: boolean;
 }
@@ -21,6 +22,7 @@ interface ConnectedState {
 const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({
     // use the worst case quote info
     buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(),
+    selectedAssetUnitAmount: state.selectedAssetUnitAmount,
     ethUsdPrice: state.ethUsdPrice,
     isLoading: state.quoteRequestState === AsyncProcessState.Pending,
 });

packages/instant/src/containers/latest_error.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
-import { SlideAnimationState } from '../components/animations/slide_animation';
 import { SlidingError } from '../components/sliding_error';
 import { Overlay } from '../components/ui/overlay';
 import { Action } from '../redux/actions';
@@ -11,7 +10,7 @@ import { State } from '../redux/reducer';
 import { ScreenWidths } from '../style/media';
 import { generateOverlayBlack } from '../style/theme';
 import { zIndex } from '../style/z_index';
-import { Asset, DisplayStatus, Omit } from '../types';
+import { Asset, DisplayStatus, Omit, SlideAnimationState } from '../types';
 import { errorFlasher } from '../util/error_flasher';
 
 export interface LatestErrorComponentProps {

packages/instant/src/containers/selected_asset_instant_heading.ts

@@ -14,16 +14,16 @@ export interface InstantHeadingProps {
 }
 
 interface ConnectedState {
-    selectedAssetAmount?: BigNumber;
+    selectedAssetUnitAmount?: BigNumber;
-    totalEthBaseAmount?: BigNumber;
+    totalEthBaseUnitAmount?: BigNumber;
     ethUsdPrice?: BigNumber;
     quoteRequestState: AsyncProcessState;
     buyOrderState: OrderState;
 }
 
 const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({
-    selectedAssetAmount: state.selectedAssetAmount,
+    selectedAssetUnitAmount: state.selectedAssetUnitAmount,
-    totalEthBaseAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
+    totalEthBaseUnitAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(),
     ethUsdPrice: state.ethUsdPrice,
     quoteRequestState: state.quoteRequestState,
     buyOrderState: state.buyOrderState,

packages/instant/src/containers/selected_erc20_asset_amount_input.ts

@@ -6,11 +6,11 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
-import { ERC20AssetAmountInput } from '../components/erc20_asset_amount_input';
+import { ERC20AssetAmountInput, ERC20AssetAmountInputProps } from '../components/erc20_asset_amount_input';
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
-import { AffiliateInfo, ERC20Asset, OrderProcessState } from '../types';
+import { AffiliateInfo, ERC20Asset, Omit, OrderProcessState } from '../types';
 import { buyQuoteUpdater } from '../util/buy_quote_updater';
 
 export interface SelectedERC20AssetAmountInputProps {
@@ -37,13 +37,7 @@ interface ConnectedDispatch {
     ) => void;
 }
 
-interface ConnectedProps {
+type ConnectedProps = Omit<ERC20AssetAmountInputProps, keyof SelectedERC20AssetAmountInputProps>;
-    value?: BigNumber;
-    asset?: ERC20Asset;
-    onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
-    isDisabled: boolean;
-    numberOfAssetsAvailable?: number;
-}
 
 type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
 
@@ -59,7 +53,7 @@ const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputP
     const assetBuyer = state.providerState.assetBuyer;
     return {
         assetBuyer,
-        value: state.selectedAssetAmount,
+        value: state.selectedAssetUnitAmount,
         asset: selectedAsset,
         isDisabled,
         numberOfAssetsAvailable,

packages/instant/src/data/asset_meta_data_map.ts

@@ -8,42 +8,42 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
     '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: 'rgb(54, 50, 60)',
+        primaryColor: '#333333',
         symbol: 'zrx',
         name: '0x',
     },
     '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#ec3e6c',
+        primaryColor: '#EC4F81',
         symbol: 'spank',
         name: 'Spank',
     },
     '0xf47261b0000000000000000000000000d26114cd6ee289accf82350c8d8487fedb8a0c07': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#2e61ea',
+        primaryColor: '#2458E7',
         symbol: 'omg',
         name: 'OmiseGo',
     },
     '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#87e4ca',
+        primaryColor: '#68CCBB',
         symbol: 'mkr',
         name: 'Maker',
     },
     '0xf47261b00000000000000000000000000d8775f648430679a709e98d2b0cb6250d2887ef': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#9c326c',
+        primaryColor: '#FF5000',
         symbol: 'bat',
         name: 'Basic Attention Token',
     },
     '0xf47261b0000000000000000000000000744d70fdbe2ba4cf95131626614a1763df805b9e': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
-        primaryColor: '#5663b0',
+        primaryColor: '#4763D7',
         symbol: 'snt',
         name: 'Status',
     },
@@ -54,27 +54,6 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
         symbol: 'mana',
         name: 'Decentraland',
     },
-    '0xf47261b0000000000000000000000000a74476443119a942de498590fe1f2454d7d4ac0d': {
-        assetProxyId: AssetProxyId.ERC20,
-        decimals: 18,
-        primaryColor: '#263469',
-        symbol: 'gnt',
-        name: 'Golem',
-    },
-    '0xf47261b000000000000000000000000012480e24eb5bec1a9d4369cab6a80cad3c0a377a': {
-        assetProxyId: AssetProxyId.ERC20,
-        decimals: 18,
-        primaryColor: '#de5445',
-        symbol: 'sub',
-        name: 'Substratum',
-    },
-    '0xf47261b000000000000000000000000008d32b0da63e2C3bcF8019c9c5d849d7a9d791e6': {
-        assetProxyId: AssetProxyId.ERC20,
-        decimals: 18,
-        primaryColor: '#000',
-        symbol: 'dentacoin',
-        name: 'Dentacoin',
-    },
     '0xf47261b00000000000000000000000001985365e9f78359a9b6ad760e32412f4a445e862': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
@@ -82,4 +61,144 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
         symbol: 'rep',
         name: 'Augur',
     },
+    '0xf47261b00000000000000000000000000abdace70d3790235af448c88547603b945604ea': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#2c3c8c',
+        symbol: 'dnt',
+        name: 'district0x',
+    },
+    '0xf47261b000000000000000000000000005f4a42e251f2d52b8ed15e9fedaacfcef1fad27': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 12,
+        primaryColor: '#048998',
+        symbol: 'zil',
+        name: 'Zilliqa',
+    },
+    '0xf47261b00000000000000000000000008f8221afbb33998d8584a2b05749ba73c37a938a': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#58BFD6',
+        symbol: 'req',
+        name: 'Request Network',
+    },
+    '0xf47261b0000000000000000000000000e0b7927c4af23765cb51314a0e0521a9645f0e2a': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 9,
+        primaryColor: '#BC9952',
+        symbol: 'dgd',
+        name: 'DigixDao',
+    },
+    '0xf47261b00000000000000000000000004f3afec4e5a3f2a6a1a411def7d7dfe50ee057bf': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 9,
+        primaryColor: '#DEB564',
+        symbol: 'dgx',
+        name: 'Digix Gold Token',
+    },
+    '0xf47261b0000000000000000000000000419d0d8bdd9af5e606ae2232ed285aff190e711b': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 8,
+        primaryColor: '#E40057',
+        symbol: 'fun',
+        name: 'FunFair',
+    },
+    '0xf47261b000000000000000000000000041e5560054824ea6b0732e656e3ad64e20e94e45': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 8,
+        primaryColor: '#04bc24',
+        symbol: 'cvc',
+        name: 'Civic',
+    },
+    '0xf47261b00000000000000000000000005ca9a71b1d01849c0a95490cc00559717fcf0d1d': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#F7296E',
+        symbol: 'ae',
+        name: 'Aeternity',
+    },
+    '0xf47261b0000000000000000000000000408e41876cccdc0f92210600ef50372656052a38': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#233C5A',
+        symbol: 'ren',
+        name: 'Republic Protocol',
+    },
+    '0xf47261b0000000000000000000000000514910771af9ca656af840dff83e8264ecf986ca': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#325CD2',
+        symbol: 'link',
+        name: 'ChainLink',
+    },
+    '0xf47261b00000000000000000000000006810e776880c02933d47db1b9fc05908e5386b96': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#48A4C0',
+        symbol: 'gno',
+        name: 'Gnosis',
+    },
+    '0xf47261b0000000000000000000000000960b236a07cf122663c4303350609a66a7b288c0': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#04a29e',
+        symbol: 'ant',
+        name: 'Aragon',
+    },
+    '0xf47261b00000000000000000000000004156d3342d5c385a87d264f90653733592000581': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 8,
+        primaryColor: '#4CABA7',
+        symbol: 'salt',
+        name: 'Salt',
+    },
+    '0xf47261b0000000000000000000000000595832f8fc6bf59c85c527fec3740a1b7a361269': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 6,
+        primaryColor: '#5BC9D4',
+        symbol: 'powr',
+        name: 'PowerLedger',
+    },
+    '0xf47261b00000000000000000000000008eb24319393716668d768dcec29356ae9cffe285': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 8,
+        primaryColor: '#523CE8',
+        symbol: 'agi',
+        name: 'SingularityNET',
+    },
+    '0xf47261b000000000000000000000000039bb259f66e1c59d5abef88375979b4d20d98022': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 8,
+        primaryColor: '#EDB740',
+        symbol: 'wax',
+        name: 'WAX',
+    },
+    '0xf47261b0000000000000000000000000beb9ef514a379b997e0798fdcc901ee474b6d9a1': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#333333',
+        symbol: 'mln',
+        name: 'Melon',
+    },
+    '0xf47261b000000000000000000000000058b6a8a3302369daec383334672404ee733ab239': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#232D37',
+        symbol: 'lpt',
+        name: 'Livepeer',
+    },
+    '0xf47261b000000000000000000000000027054b13b1b798b345b591a4d22e6562d47ea75a': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 4,
+        primaryColor: '#3A74F6',
+        symbol: 'ast',
+        name: 'AirSwap',
+    },
+    '0xf47261b000000000000000000000000089d24a6b4ccb1b6faa2625fe562bdd9a23260359': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#F2B350',
+        symbol: 'dai',
+        name: 'Dai Stablecoin',
+    },
 };

packages/instant/src/redux/actions.ts

@@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { ActionsUnion, AddressAndEthBalanceInWei, Asset } from '../types';
+import { ActionsUnion, AddressAndEthBalanceInWei, Asset, StandardSlidingPanelContent } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
@@ -26,7 +26,7 @@ export enum ActionTypes {
     SET_ACCOUNT_STATE_READY = 'SET_ACCOUNT_STATE_READY',
     UPDATE_ACCOUNT_ETH_BALANCE = 'UPDATE_ACCOUNT_ETH_BALANCE',
     UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
-    UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT',
+    UPDATE_SELECTED_ASSET_UNIT_AMOUNT = 'UPDATE_SELECTED_ASSET_UNIT_AMOUNT',
     SET_BUY_ORDER_STATE_NONE = 'SET_BUY_ORDER_STATE_NONE',
     SET_BUY_ORDER_STATE_VALIDATING = 'SET_BUY_ORDER_STATE_VALIDATING',
     SET_BUY_ORDER_STATE_PROCESSING = 'SET_BUY_ORDER_STATE_PROCESSING',
@@ -41,6 +41,8 @@ export enum ActionTypes {
     HIDE_ERROR = 'HIDE_ERROR',
     CLEAR_ERROR = 'CLEAR_ERROR',
     RESET_AMOUNT = 'RESET_AMOUNT',
+    OPEN_STANDARD_SLIDING_PANEL = 'OPEN_STANDARD_SLIDING_PANEL',
+    CLOSE_STANDARD_SLIDING_PANEL = 'CLOSE_STANDARD_SLIDING_PANEL',
 }
 
 export const actions = {
@@ -50,7 +52,8 @@ export const actions = {
     updateAccountEthBalance: (addressAndBalance: AddressAndEthBalanceInWei) =>
         createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, addressAndBalance),
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
-    updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
+    updateSelectedAssetAmount: (amount?: BigNumber) =>
+        createAction(ActionTypes.UPDATE_SELECTED_ASSET_UNIT_AMOUNT, amount),
     setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE),
     setBuyOrderStateValidating: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_VALIDATING),
     setBuyOrderStateProcessing: (txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
@@ -66,4 +69,7 @@ export const actions = {
     hideError: () => createAction(ActionTypes.HIDE_ERROR),
     clearError: () => createAction(ActionTypes.CLEAR_ERROR),
     resetAmount: () => createAction(ActionTypes.RESET_AMOUNT),
+    openStandardSlidingPanel: (content: StandardSlidingPanelContent) =>
+        createAction(ActionTypes.OPEN_STANDARD_SLIDING_PANEL, content),
+    closeStandardSlidingPanel: () => createAction(ActionTypes.CLOSE_STANDARD_SLIDING_PANEL),
 };

packages/instant/src/redux/async_data.ts

@@ -1,100 +1,102 @@
 import { AssetProxyId } from '@0x/types';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
+import { Dispatch } from 'redux';
 
 import { BIG_NUMBER_ZERO } from '../constants';
-import { AccountState, ERC20Asset, OrderProcessState } from '../types';
+import { AccountState, ERC20Asset, OrderProcessState, ProviderState } from '../types';
 import { assetUtils } from '../util/asset';
 import { buyQuoteUpdater } from '../util/buy_quote_updater';
 import { coinbaseApi } from '../util/coinbase_api';
 import { errorFlasher } from '../util/error_flasher';
 
 import { actions } from './actions';
-import { Store } from './store';
+import { State } from './reducer';
 
 export const asyncData = {
-    fetchEthPriceAndDispatchToStore: async (store: Store) => {
+    fetchEthPriceAndDispatchToStore: async (dispatch: Dispatch) => {
         try {
             const ethUsdPrice = await coinbaseApi.getEthUsdPrice();
-            store.dispatch(actions.updateEthUsdPrice(ethUsdPrice));
+            dispatch(actions.updateEthUsdPrice(ethUsdPrice));
         } catch (e) {
             const errorMessage = 'Error fetching ETH/USD price';
-            errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
+            errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
-            store.dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO));
+            dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO));
         }
     },
-    fetchAvailableAssetDatasAndDispatchToStore: async (store: Store) => {
+    fetchAvailableAssetDatasAndDispatchToStore: async (state: State, dispatch: Dispatch) => {
-        const { providerState, assetMetaDataMap, network } = store.getState();
+        const { providerState, assetMetaDataMap, network } = state;
         const assetBuyer = providerState.assetBuyer;
         try {
             const assetDatas = await assetBuyer.getAvailableAssetDatasAsync();
             const assets = assetUtils.createAssetsFromAssetDatas(assetDatas, assetMetaDataMap, network);
-            store.dispatch(actions.setAvailableAssets(assets));
+            dispatch(actions.setAvailableAssets(assets));
         } catch (e) {
             const errorMessage = 'Could not find any assets';
-            errorFlasher.flashNewErrorMessage(store.dispatch, errorMessage);
+            errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
             // On error, just specify that none are available
-            store.dispatch(actions.setAvailableAssets([]));
+            dispatch(actions.setAvailableAssets([]));
         }
     },
-    fetchAccountInfoAndDispatchToStore: async (options: { store: Store; shouldSetToLoading: boolean }) => {
+    fetchAccountInfoAndDispatchToStore: async (
-        const { store, shouldSetToLoading } = options;
+        providerState: ProviderState,
-        const { providerState } = store.getState();
+        dispatch: Dispatch,
+        shouldAttemptUnlock: boolean = false,
+        shouldSetToLoading: boolean = false,
+    ) => {
         const web3Wrapper = providerState.web3Wrapper;
         const provider = providerState.provider;
         if (shouldSetToLoading && providerState.account.state !== AccountState.Loading) {
-            store.dispatch(actions.setAccountStateLoading());
+            dispatch(actions.setAccountStateLoading());
         }
         let availableAddresses: string[];
         try {
             // TODO(bmillman): Add support at the web3Wrapper level for calling `eth_requestAccounts` instead of calling enable here
             const isPrivacyModeEnabled = !_.isUndefined((provider as any).enable);
-            availableAddresses = isPrivacyModeEnabled
+            availableAddresses =
-                ? await (provider as any).enable()
+                isPrivacyModeEnabled && shouldAttemptUnlock
-                : await web3Wrapper.getAvailableAddressesAsync();
+                    ? await (provider as any).enable()
+                    : await web3Wrapper.getAvailableAddressesAsync();
         } catch (e) {
-            store.dispatch(actions.setAccountStateLocked());
+            dispatch(actions.setAccountStateLocked());
             return;
         }
         if (!_.isEmpty(availableAddresses)) {
             const activeAddress = availableAddresses[0];
-            store.dispatch(actions.setAccountStateReady(activeAddress));
+            dispatch(actions.setAccountStateReady(activeAddress));
             // tslint:disable-next-line:no-floating-promises
-            asyncData.fetchAccountBalanceAndDispatchToStore(store);
+            asyncData.fetchAccountBalanceAndDispatchToStore(activeAddress, providerState.web3Wrapper, dispatch);
         } else {
-            store.dispatch(actions.setAccountStateLocked());
+            dispatch(actions.setAccountStateLocked());
         }
     },
-    fetchAccountBalanceAndDispatchToStore: async (store: Store) => {
+    fetchAccountBalanceAndDispatchToStore: async (address: string, web3Wrapper: Web3Wrapper, dispatch: Dispatch) => {
-        const { providerState } = store.getState();
-        const web3Wrapper = providerState.web3Wrapper;
-        const account = providerState.account;
-        if (account.state !== AccountState.Ready) {
-            return;
-        }
         try {
-            const address = account.address;
             const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address);
-            store.dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei }));
+            dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei }));
         } catch (e) {
             // leave balance as is
             return;
         }
     },
-    fetchCurrentBuyQuoteAndDispatchToStore: async (options: { store: Store; shouldSetPending: boolean }) => {
+    fetchCurrentBuyQuoteAndDispatchToStore: async (
-        const { store, shouldSetPending } = options;
+        state: State,
-        const { buyOrderState, providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
+        dispatch: Dispatch,
+        shouldSetPending: boolean = false,
+    ) => {
+        const { buyOrderState, providerState, selectedAsset, selectedAssetUnitAmount, affiliateInfo } = state;
         const assetBuyer = providerState.assetBuyer;
         if (
-            !_.isUndefined(selectedAssetAmount) &&
+            !_.isUndefined(selectedAssetUnitAmount) &&
             !_.isUndefined(selectedAsset) &&
             buyOrderState.processState === OrderProcessState.None &&
             selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
         ) {
             await buyQuoteUpdater.updateBuyQuoteAsync(
                 assetBuyer,
-                store.dispatch,
+                dispatch,
                 selectedAsset as ERC20Asset,
-                selectedAssetAmount,
+                selectedAssetUnitAmount,
                 shouldSetPending,
                 affiliateInfo,
             );

packages/instant/src/redux/reducer.ts

@@ -19,6 +19,8 @@ import {
     OrderProcessState,
     OrderState,
     ProviderState,
+    StandardSlidingPanelContent,
+    StandardSlidingPanelSettings,
 } from '../types';
 
 import { Action, ActionTypes } from './actions';
@@ -30,6 +32,7 @@ export interface DefaultState {
     buyOrderState: OrderState;
     latestErrorDisplayStatus: DisplayStatus;
     quoteRequestState: AsyncProcessState;
+    standardSlidingPanelSettings: StandardSlidingPanelSettings;
 }
 
 // State that is required but needs to be derived from the props
@@ -41,7 +44,7 @@ interface PropsDerivedState {
 interface OptionalState {
     selectedAsset: Asset;
     availableAssets: Asset[];
-    selectedAssetAmount: BigNumber;
+    selectedAssetUnitAmount: BigNumber;
     ethUsdPrice: BigNumber;
     latestBuyQuote: BuyQuote;
     latestErrorMessage: string;
@@ -56,6 +59,10 @@ export const DEFAULT_STATE: DefaultState = {
     buyOrderState: { processState: OrderProcessState.None },
     latestErrorDisplayStatus: DisplayStatus.Hidden,
     quoteRequestState: AsyncProcessState.None,
+    standardSlidingPanelSettings: {
+        animationState: 'none',
+        content: StandardSlidingPanelContent.None,
+    },
 };
 
 export const createReducer = (initialState: State) => {
@@ -66,11 +73,19 @@ export const createReducer = (initialState: State) => {
             case ActionTypes.SET_ACCOUNT_STATE_LOCKED:
                 return reduceStateWithAccount(state, LOCKED_ACCOUNT);
             case ActionTypes.SET_ACCOUNT_STATE_READY: {
-                const account: AccountReady = {
+                const address = action.data;
+                let newAccount: AccountReady = {
                     state: AccountState.Ready,
-                    address: action.data,
+                    address,
                 };
-                return reduceStateWithAccount(state, account);
+                const currentAccount = state.providerState.account;
+                if (currentAccount.state === AccountState.Ready && currentAccount.address === address) {
+                    newAccount = {
+                        ...newAccount,
+                        ethBalanceInWei: currentAccount.ethBalanceInWei,
+                    };
+                }
+                return reduceStateWithAccount(state, newAccount);
             }
             case ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE: {
                 const { address, ethBalanceInWei } = action.data;
@@ -90,10 +105,10 @@ export const createReducer = (initialState: State) => {
                     ...state,
                     ethUsdPrice: action.data,
                 };
-            case ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT:
+            case ActionTypes.UPDATE_SELECTED_ASSET_UNIT_AMOUNT:
                 return {
                     ...state,
-                    selectedAssetAmount: action.data,
+                    selectedAssetUnitAmount: action.data,
                 };
             case ActionTypes.UPDATE_LATEST_BUY_QUOTE:
                 const newBuyQuoteIfExists = action.data;
@@ -204,13 +219,29 @@ export const createReducer = (initialState: State) => {
                     latestBuyQuote: undefined,
                     quoteRequestState: AsyncProcessState.None,
                     buyOrderState: { processState: OrderProcessState.None },
-                    selectedAssetAmount: undefined,
+                    selectedAssetUnitAmount: undefined,
                 };
             case ActionTypes.SET_AVAILABLE_ASSETS:
                 return {
                     ...state,
                     availableAssets: action.data,
                 };
+            case ActionTypes.OPEN_STANDARD_SLIDING_PANEL:
+                return {
+                    ...state,
+                    standardSlidingPanelSettings: {
+                        content: action.data,
+                        animationState: 'slidIn',
+                    },
+                };
+            case ActionTypes.CLOSE_STANDARD_SLIDING_PANEL:
+                return {
+                    ...state,
+                    standardSlidingPanelSettings: {
+                        content: state.standardSlidingPanelSettings.content,
+                        animationState: 'slidOut',
+                    },
+                };
             default:
                 return state;
         }
@@ -232,9 +263,9 @@ const reduceStateWithAccount = (state: State, account: Account) => {
 
 const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
     const selectedAssetIfExists = state.selectedAsset;
-    const selectedAssetAmountIfExists = state.selectedAssetAmount;
+    const selectedAssetUnitAmountIfExists = state.selectedAssetUnitAmount;
     // if no selectedAsset or selectedAssetAmount exists on the current state, return false
-    if (_.isUndefined(selectedAssetIfExists) || _.isUndefined(selectedAssetAmountIfExists)) {
+    if (_.isUndefined(selectedAssetIfExists) || _.isUndefined(selectedAssetUnitAmountIfExists)) {
         return false;
     }
     // if buyQuote's assetData does not match that of the current selected asset, return false
@@ -246,7 +277,7 @@ const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
     const selectedAssetMetaData = selectedAssetIfExists.metaData;
     if (selectedAssetMetaData.assetProxyId === AssetProxyId.ERC20) {
         const selectedAssetAmountBaseUnits = Web3Wrapper.toBaseUnitAmount(
-            selectedAssetAmountIfExists,
+            selectedAssetUnitAmountIfExists,
             selectedAssetMetaData.decimals,
         );
         const doesAssetAmountMatch = selectedAssetAmountBaseUnits.eq(buyQuote.assetBuyAmount);

packages/instant/src/types.ts

@@ -125,3 +125,15 @@ export interface AddressAndEthBalanceInWei {
     address: string;
     ethBalanceInWei: BigNumber;
 }
+
+export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none';
+
+export enum StandardSlidingPanelContent {
+    None = 'NONE',
+    InstallWallet = 'INSTALL_WALLET',
+}
+
+export interface StandardSlidingPanelSettings {
+    animationState: SlideAnimationState;
+    content: StandardSlidingPanelContent;
+}

packages/instant/src/util/asset.ts

@@ -80,8 +80,6 @@ export const assetUtils = {
                 return metaData.symbol.toUpperCase();
             case AssetProxyId.ERC721:
                 return metaData.name;
-            default:
-                return defaultName;
         }
     },
     formattedSymbolForAsset: (asset?: ERC20Asset, defaultName: string = '???'): string => {

packages/instant/src/util/buy_quote_updater.ts

@@ -15,12 +15,12 @@ export const buyQuoteUpdater = {
         assetBuyer: AssetBuyer,
         dispatch: Dispatch<Action>,
         asset: ERC20Asset,
-        assetAmount: BigNumber,
+        assetUnitAmount: BigNumber,
         setPending = true,
         affiliateInfo?: AffiliateInfo,
     ): Promise<void> => {
         // get a new buy quote.
-        const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetAmount, asset.metaData.decimals);
+        const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetUnitAmount, asset.metaData.decimals);
         if (setPending) {
             // mark quote as pending
             dispatch(actions.setQuoteRequestStatePending());

packages/instant/src/util/etherscan.ts

@@ -8,9 +8,8 @@ const etherscanPrefix = (networkId: number): string | undefined => {
             return 'kovan.';
         case Network.Mainnet:
             return '';
-        default:
-            return undefined;
     }
+    return '';
 };
 
 export const etherscanUtil = {

packages/instant/src/util/format.ts

@@ -5,15 +5,15 @@ import * as _ from 'lodash';
 import { ETH_DECIMALS } from '../constants';
 
 export const format = {
-    ethBaseAmount: (
+    ethBaseUnitAmount: (
-        ethBaseAmount?: BigNumber,
+        ethBaseUnitAmount?: BigNumber,
         decimalPlaces: number = 4,
         defaultText: React.ReactNode = '0 ETH',
     ): React.ReactNode => {
-        if (_.isUndefined(ethBaseAmount)) {
+        if (_.isUndefined(ethBaseUnitAmount)) {
             return defaultText;
         }
-        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ETH_DECIMALS);
+        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseUnitAmount, ETH_DECIMALS);
         return format.ethUnitAmount(ethUnitAmount, decimalPlaces);
     },
     ethUnitAmount: (
@@ -27,16 +27,16 @@ export const format = {
         const roundedAmount = ethUnitAmount.round(decimalPlaces).toDigits(decimalPlaces);
         return `${roundedAmount} ETH`;
     },
-    ethBaseAmountInUsd: (
+    ethBaseUnitAmountInUsd: (
-        ethBaseAmount?: BigNumber,
+        ethBaseUnitAmount?: BigNumber,
         ethUsdPrice?: BigNumber,
         decimalPlaces: number = 2,
         defaultText: React.ReactNode = '$0.00',
     ): React.ReactNode => {
-        if (_.isUndefined(ethBaseAmount) || _.isUndefined(ethUsdPrice)) {
+        if (_.isUndefined(ethBaseUnitAmount) || _.isUndefined(ethUsdPrice)) {
             return defaultText;
         }
-        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseAmount, ETH_DECIMALS);
+        const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseUnitAmount, ETH_DECIMALS);
         return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces);
     },
     ethUnitAmountInUsd: (

packages/instant/src/util/heartbeater_factory.ts

@@ -10,13 +10,13 @@ export interface HeartbeatFactoryOptions {
 export const generateAccountHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
     const { store, shouldPerformImmediatelyOnStart } = options;
     return new Heartbeater(async () => {
-        await asyncData.fetchAccountInfoAndDispatchToStore({ store, shouldSetToLoading: false });
+        await asyncData.fetchAccountInfoAndDispatchToStore(store.getState().providerState, store.dispatch, false);
     }, shouldPerformImmediatelyOnStart);
 };
 
 export const generateBuyQuoteHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
     const { store, shouldPerformImmediatelyOnStart } = options;
     return new Heartbeater(async () => {
-        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore({ store, shouldSetPending: false });
+        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore(store.getState(), store.dispatch, false);
     }, shouldPerformImmediatelyOnStart);
 };

packages/instant/src/util/util.ts

@@ -2,4 +2,5 @@ import * as _ from 'lodash';
 
 export const util = {
     boundNoop: _.noop.bind(_),
+    createOpenUrlInNewWindow: (href: string) => () => window.open(href, '_blank'),
 };

packages/instant/test/util/format.test.ts

@@ -15,20 +15,20 @@ const BIG_NUMBER_FAKE_ETH_USD_PRICE = new BigNumber(2.534);
 describe('format', () => {
     describe('ethBaseAmount', () => {
         it('converts 1 ETH in base units to the string `1 ETH`', () => {
-            expect(format.ethBaseAmount(ONE_ETH_IN_BASE_UNITS)).toBe('1 ETH');
+            expect(format.ethBaseUnitAmount(ONE_ETH_IN_BASE_UNITS)).toBe('1 ETH');
         });
         it('converts .432414 ETH in base units to the string `.4324 ETH`', () => {
-            expect(format.ethBaseAmount(DECIMAL_ETH_IN_BASE_UNITS)).toBe('0.4324 ETH');
+            expect(format.ethBaseUnitAmount(DECIMAL_ETH_IN_BASE_UNITS)).toBe('0.4324 ETH');
         });
         it('converts 5.3014059295032 ETH in base units to the string `5.301 ETH`', () => {
-            expect(format.ethBaseAmount(IRRATIONAL_ETH_IN_BASE_UNITS)).toBe('5.301 ETH');
+            expect(format.ethBaseUnitAmount(IRRATIONAL_ETH_IN_BASE_UNITS)).toBe('5.301 ETH');
         });
         it('returns defaultText param when ethBaseAmount is not defined', () => {
             const defaultText = 'defaultText';
-            expect(format.ethBaseAmount(undefined, 4, defaultText)).toBe(defaultText);
+            expect(format.ethBaseUnitAmount(undefined, 4, defaultText)).toBe(defaultText);
         });
         it('it allows for configurable decimal places', () => {
-            expect(format.ethBaseAmount(DECIMAL_ETH_IN_BASE_UNITS, 2)).toBe('0.43 ETH');
+            expect(format.ethBaseUnitAmount(DECIMAL_ETH_IN_BASE_UNITS, 2)).toBe('0.43 ETH');
         });
     });
     describe('ethUnitAmount', () => {
@@ -52,24 +52,26 @@ describe('format', () => {
     });
     describe('ethBaseAmountInUsd', () => {
         it('correctly formats 1 ETH to usd according to some price', () => {
-            expect(format.ethBaseAmountInUsd(ONE_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$2.53');
+            expect(format.ethBaseUnitAmountInUsd(ONE_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$2.53');
         });
         it('correctly formats .432414 ETH to usd according to some price', () => {
-            expect(format.ethBaseAmountInUsd(DECIMAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$1.10');
+            expect(format.ethBaseUnitAmountInUsd(DECIMAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe(
+                '$1.10',
+            );
         });
         it('correctly formats 5.3014059295032 ETH to usd according to some price', () => {
-            expect(format.ethBaseAmountInUsd(IRRATIONAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe(
+            expect(format.ethBaseUnitAmountInUsd(IRRATIONAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe(
                 '$13.43',
             );
         });
         it('returns defaultText param when ethBaseAmountInUsd or ethUsdPrice is not defined', () => {
             const defaultText = 'defaultText';
-            expect(format.ethBaseAmountInUsd(undefined, undefined, 2, defaultText)).toBe(defaultText);
+            expect(format.ethBaseUnitAmountInUsd(undefined, undefined, 2, defaultText)).toBe(defaultText);
-            expect(format.ethBaseAmountInUsd(BIG_NUMBER_ONE, undefined, 2, defaultText)).toBe(defaultText);
+            expect(format.ethBaseUnitAmountInUsd(BIG_NUMBER_ONE, undefined, 2, defaultText)).toBe(defaultText);
-            expect(format.ethBaseAmountInUsd(undefined, BIG_NUMBER_ONE, 2, defaultText)).toBe(defaultText);
+            expect(format.ethBaseUnitAmountInUsd(undefined, BIG_NUMBER_ONE, 2, defaultText)).toBe(defaultText);
         });
         it('it allows for configurable decimal places', () => {
-            expect(format.ethBaseAmountInUsd(DECIMAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE, 4)).toBe(
+            expect(format.ethBaseUnitAmountInUsd(DECIMAL_ETH_IN_BASE_UNITS, BIG_NUMBER_FAKE_ETH_USD_PRICE, 4)).toBe(
                 '$1.0957',
             );
         });

packages/instant/tslint.json

@@ -3,6 +3,7 @@
     "rules": {
         "custom-no-magic-numbers": false,
         "semicolon": [true, "always", "ignore-bound-class-methods"],
-        "max-classes-per-file": false
+        "max-classes-per-file": false,
+        "switch-default": false
     }
 }

packages/json-schemas/CHANGELOG.json

@@ -1,4 +1,13 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "2.1.1",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "version": "2.1.0",
         "changes": [

packages/json-schemas/CHANGELOG.md

@@ -5,6 +5,10 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.1.1 - _November 14, 2018_
+
+    * Dependencies updated
+
 ## v2.1.0 - _November 12, 2018_
 
     * Improve schemas by enforcing that amounts that must be whole numbers (e.g Order asset amounts) no longer allow decimal amounts (#1173)

packages/json-schemas/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/json-schemas",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "engines": {
         "node": ">=6.12"
     },
@@ -46,7 +46,7 @@
     },
     "devDependencies": {
         "@0x/tslint-config": "^1.0.10",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
         "@types/lodash.foreach": "^4.5.3",
         "@types/lodash.values": "^4.3.3",
         "@types/mocha": "^2.2.42",

packages/metacoin/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/metacoin",
-    "version": "0.0.26",
+    "version": "0.0.28",
     "engines": {
         "node": ">=6.12"
     },
@@ -29,15 +29,15 @@
     "author": "",
     "license": "Apache-2.0",
     "dependencies": {
-        "@0x/abi-gen": "^1.0.15",
+        "@0x/abi-gen": "^1.0.16",
-        "@0x/base-contract": "^3.0.4",
+        "@0x/base-contract": "^3.0.6",
-        "@0x/sol-cov": "^2.1.10",
+        "@0x/sol-cov": "^2.1.12",
-        "@0x/subproviders": "^2.1.2",
+        "@0x/subproviders": "^2.1.4",
         "@0x/tslint-config": "^1.0.10",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "@types/mocha": "^5.2.2",
         "copyfiles": "^2.0.0",
         "ethereum-types": "^1.1.2",
@@ -46,8 +46,8 @@
         "run-s": "^0.0.0"
     },
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.15",
+        "@0x/dev-utils": "^1.0.17",
-        "@0x/sol-compiler": "^1.1.10",
+        "@0x/sol-compiler": "^1.1.12",
         "chai": "^4.0.1",
         "chai-as-promised": "^7.1.0",
         "chai-bignumber": "^2.0.1",

packages/migrations/CHANGELOG.json

@@ -1,4 +1,22 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "2.0.4",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
+    {
+        "timestamp": 1542134075,
+        "version": "2.0.3",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "timestamp": 1542028948,
         "version": "2.0.2",

packages/migrations/CHANGELOG.md

@@ -5,6 +5,14 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.0.4 - _November 14, 2018_
+
+    * Dependencies updated
+
+## v2.0.3 - _November 13, 2018_
+
+    * Dependencies updated
+
 ## v2.0.2 - _November 12, 2018_
 
     * Dependencies updated

packages/migrations/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/migrations",
-    "version": "2.0.2",
+    "version": "2.0.4",
     "engines": {
         "node": ">=6.12"
     },
@@ -17,7 +17,7 @@
     },
     "license": "Apache-2.0",
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.15",
+        "@0x/dev-utils": "^1.0.17",
         "@0x/tslint-config": "^1.0.10",
         "@0x/types": "^1.2.1",
         "@types/yargs": "^10.0.0",
@@ -29,16 +29,16 @@
         "yargs": "^10.0.3"
     },
     "dependencies": {
-        "@0x/abi-gen-wrappers": "^1.0.3",
+        "@0x/abi-gen-wrappers": "^1.0.5",
-        "@0x/base-contract": "^3.0.4",
+        "@0x/base-contract": "^3.0.6",
         "@0x/contract-addresses": "^1.1.0",
         "@0x/contract-artifacts": "^1.1.0",
-        "@0x/order-utils": "^3.0.0",
+        "@0x/order-utils": "^3.0.2",
-        "@0x/sol-compiler": "^1.1.10",
+        "@0x/sol-compiler": "^1.1.12",
-        "@0x/subproviders": "^2.1.2",
+        "@0x/subproviders": "^2.1.4",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "@ledgerhq/hw-app-eth": "^4.3.0",
         "ethereum-types": "^1.1.2",
         "ethers": "~4.0.4",

packages/order-utils/CHANGELOG.json

@@ -1,4 +1,22 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "3.0.2",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
+    {
+        "timestamp": 1542134075,
+        "version": "3.0.1",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "version": "3.0.0",
         "changes": [

packages/order-utils/CHANGELOG.md

@@ -5,6 +5,14 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v3.0.2 - _November 14, 2018_
+
+    * Dependencies updated
+
+## v3.0.1 - _November 13, 2018_
+
+    * Dependencies updated
+
 ## v3.0.0 - _November 12, 2018_
 
     * Add signature validation, regular cancellation and `cancelledUpTo` checks to `validateOrderFillableOrThrowAsync` (#1235)

packages/order-utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/order-utils",
-    "version": "3.0.0",
+    "version": "3.0.2",
     "engines": {
         "node": ">=6.12"
     },
@@ -35,7 +35,7 @@
     },
     "homepage": "https://github.com/0xProject/0x-monorepo/packages/order-utils/README.md",
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.15",
+        "@0x/dev-utils": "^1.0.17",
         "@0x/tslint-config": "^1.0.10",
         "@types/bn.js": "^4.11.0",
         "@types/lodash": "4.14.104",
@@ -53,15 +53,15 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/abi-gen-wrappers": "^1.0.3",
+        "@0x/abi-gen-wrappers": "^1.0.5",
-        "@0x/assert": "^1.0.16",
+        "@0x/assert": "^1.0.17",
-        "@0x/base-contract": "^3.0.4",
+        "@0x/base-contract": "^3.0.6",
         "@0x/contract-artifacts": "^1.1.0",
-        "@0x/json-schemas": "^2.1.0",
+        "@0x/json-schemas": "^2.1.1",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "@types/node": "*",
         "bn.js": "^4.11.8",
         "ethereum-types": "^1.1.2",

packages/order-watcher/CHANGELOG.json

@@ -1,4 +1,29 @@
 [
+    {
+        "version": "2.2.4",
+        "changes": [
+            {
+                "note":
+                    "Fix the bug when order watcher was throwing an error on order removal when maker token was ZRX",
+                "pr": 1259
+            }
+        ],
+        "timestamp": 1542208198
+    },
+    {
+        "version": "2.2.3",
+        "changes": [
+            {
+                "note": "Start jsonRpcRequestId at 1, not 0 as 0 breaks the web3.js websocket RPC provider",
+                "pr": 1227
+            },
+            {
+                "note":
+                    "Fix the bug when order watcher was trying to convert undefined to an object in case of CancelUpTo event"
+            }
+        ],
+        "timestamp": 1542134075
+    },
     {
         "timestamp": 1542028948,
         "version": "2.2.2",

packages/order-watcher/CHANGELOG.md

@@ -5,6 +5,15 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v2.2.4 - _November 14, 2018_
+
+    * Fix the bug when order watcher was throwing an error on order removal when maker token was ZRX (#1259)
+
+## v2.2.3 - _November 13, 2018_
+
+    * Start jsonRpcRequestId at 1, not 0 as 0 breaks the web3.js websocket RPC provider (#1227)
+    * Fix the bug when order watcher was trying to convert undefined to an object in case of CancelUpTo event
+
 ## v2.2.2 - _November 12, 2018_
 
     * Dependencies updated

packages/order-watcher/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@0x/order-watcher",
-    "version": "2.2.2",
+    "version": "2.2.4",
     "description": "An order watcher daemon that watches for order validity",
     "keywords": [
         "0x",
@@ -33,8 +33,8 @@
         "node": ">=6.0.0"
     },
     "devDependencies": {
-        "@0x/dev-utils": "^1.0.15",
+        "@0x/dev-utils": "^1.0.17",
-        "@0x/migrations": "^2.0.2",
+        "@0x/migrations": "^2.0.4",
         "@0x/tslint-config": "^1.0.10",
         "@types/bintrees": "^1.0.2",
         "@types/lodash": "4.14.104",
@@ -57,19 +57,19 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
-        "@0x/abi-gen-wrappers": "^1.0.3",
+        "@0x/abi-gen-wrappers": "^1.0.5",
-        "@0x/assert": "^1.0.16",
+        "@0x/assert": "^1.0.17",
-        "@0x/base-contract": "^3.0.4",
+        "@0x/base-contract": "^3.0.6",
         "@0x/contract-addresses": "^1.1.0",
         "@0x/contract-artifacts": "^1.1.0",
-        "@0x/contract-wrappers": "^4.0.0",
+        "@0x/contract-wrappers": "^4.0.2",
-        "@0x/fill-scenarios": "^1.0.10",
+        "@0x/fill-scenarios": "^1.0.12",
-        "@0x/json-schemas": "^2.1.0",
+        "@0x/json-schemas": "^2.1.1",
-        "@0x/order-utils": "^3.0.0",
+        "@0x/order-utils": "^3.0.2",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "@0x/utils": "^2.0.4",
+        "@0x/utils": "^2.0.5",
-        "@0x/web3-wrapper": "^3.1.2",
+        "@0x/web3-wrapper": "^3.1.4",
         "bintrees": "^1.0.2",
         "ethereum-types": "^1.1.2",
         "ethereumjs-blockstream": "6.0.0",

packages/order-watcher/src/order_watcher/dependent_order_hashes_tracker.ts

@@ -50,7 +50,7 @@ export class DependentOrderHashesTracker {
         return uniqueOrderHashList;
     }
     public getDependentOrderHashesByMaker(makerAddress: string): string[] {
-        const dependentOrderHashes = Array.from(this._orderHashesByMakerAddress[makerAddress]);
+        const dependentOrderHashes = Array.from(this._orderHashesByMakerAddress[makerAddress] || {});
         return dependentOrderHashes;
     }
     public getDependentOrderHashesByAssetDataByMaker(makerAddress: string, assetData: string): string[] {
@@ -89,7 +89,10 @@ export class DependentOrderHashesTracker {
                 (decodedMakerAssetData as ERC721AssetData).tokenId,
             );
         }
-        this._removeFromERC20DependentOrderhashes(signedOrder, this._zrxTokenAddress);
+        // If makerToken === ZRX then we already removed it and we don't need to remove it again.
+        if ((decodedMakerAssetData as ERC20AssetData).tokenAddress !== this._zrxTokenAddress) {
+            this._removeFromERC20DependentOrderhashes(signedOrder, this._zrxTokenAddress);
+        }
         this._removeFromMakerDependentOrderhashes(signedOrder);
     }
     private _getDependentOrderHashesByERC20AssetData(makerAddress: string, erc20AssetData: string): string[] {

packages/react-docs/CHANGELOG.json

@@ -1,4 +1,22 @@
 [
+    {
+        "timestamp": 1542208198,
+        "version": "1.0.18",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
+    {
+        "timestamp": 1542134075,
+        "version": "1.0.17",
+        "changes": [
+            {
+                "note": "Dependencies updated"
+            }
+        ]
+    },
     {
         "timestamp": 1542028948,
         "version": "1.0.16",

packages/react-docs/CHANGELOG.md

@@ -5,6 +5,14 @@ Edit the package's CHANGELOG.json file only.
 
 CHANGELOG
 
+## v1.0.18 - _November 14, 2018_
+
+    * Dependencies updated
+
+## v1.0.17 - _November 13, 2018_
+
+    * Dependencies updated
+
 ## v1.0.16 - _November 12, 2018_
 
     * Dependencies updated