Merge branch 'v2-prototype' into feature/website/wallet-flex-box

* v2-prototype: (95 commits)
  Add missing dep to website
  Upgrade solidity parser
  Fix trace test
  Fix linter issues
  Move contract utils
  Fix prettier
  Fix NameResolver
  Fix prettier
  Remove 0x.js as a dependency from website
  Enable 0x.js tests
  Fix small bug in order-utils
  Address feedback
  Fix Tslint error caused by "PromiseLike" value
  Fix Tslint error caused by "PromiseLike" value
  Update dogfood url
  fix contract-wrappers version
  Parse compiler.json in SolCompilerArtifactsAdapter
  Fix TokenTransferProxy artifact name since it's now suffixed with _v1
  Update yarn.lock
  Fix signature verification test
  ...

31 files changed, 168 insertions, 142 deletions

diff --git a/packages/website/package.json b/packages/website/package.json
index 3ef66d269..a91437646 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@0xproject/website",
-    "version": "0.0.32",
+    "version": "0.0.33",
     "engines": {
         "node": ">=6.12"
     },
@@ -11,20 +11,20 @@
         "clean": "shx rm -f public/bundle*",
         "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
         "watch": "webpack-dev-server --content-base public --https",
-        "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
+        "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
         "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
         "deploy_live": "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers"
     },
     "author": "Fabio Berger",
     "license": "Apache-2.0",
     "dependencies": {
-        "0x.js": "^0.37.2",
-        "@0xproject/react-docs": "^0.0.11",
-        "@0xproject/react-shared": "^0.1.6",
-        "@0xproject/subproviders": "^0.10.1",
-        "@0xproject/typescript-typings": "^0.3.1",
-        "@0xproject/utils": "^0.6.1",
-        "@0xproject/web3-wrapper": "^0.6.3",
+        "@0xproject/react-docs": "^0.0.12",
+        "@0xproject/react-shared": "^0.1.7",
+        "@0xproject/subproviders": "^0.10.2",
+        "@0xproject/contract-wrappers": "^0.0.2",
+        "@0xproject/typescript-typings": "^0.3.2",
+        "@0xproject/utils": "^0.6.2",
+        "@0xproject/web3-wrapper": "^0.6.4",
         "accounting": "^0.4.1",
         "basscss": "^8.0.3",
         "blockies": "^0.0.2",
@@ -88,6 +88,7 @@
         "tslint": "5.8.0",
         "tslint-config-0xproject": "^0.0.2",
         "typescript": "2.7.1",
+        "uglifyjs-webpack-plugin": "^1.2.5",
         "webpack": "^3.1.0",
         "webpack-dev-middleware": "^1.10.0",
         "webpack-dev-server": "^2.5.0"
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 32acb9d43..d18f3b398 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -1,20 +1,15 @@
 import {
-    BlockParam,
     BlockRange,
+    ContractWrappers,
     DecodedLogEvent,
-    ECSignature,
     ExchangeContractEventArgs,
     ExchangeEvents,
     IndexedFilterValues,
     LogCancelContractEventArgs,
     LogFillContractEventArgs,
-    LogWithDecodedArgs,
-    Order,
-    SignedOrder,
     Token as ZeroExToken,
-    TransactionReceiptWithDecodedLogs,
-    ZeroEx,
-} from '0x.js';
+} from '@0xproject/contract-wrappers';
+import { isValidOrderHash, signOrderHashAsync } from '@0xproject/order-utils';
 import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import {
     InjectedWeb3Subprovider,
@@ -23,7 +18,15 @@ import {
     RedundantSubprovider,
     Subprovider,
 } from '@0xproject/subproviders';
-import { Provider } from '@0xproject/types';
+import {
+    BlockParam,
+    ECSignature,
+    LogWithDecodedArgs,
+    Order,
+    Provider,
+    SignedOrder,
+    TransactionReceiptWithDecodedLogs,
+} from '@0xproject/types';
 import { BigNumber, intervalUtils, logUtils, promisify } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
@@ -72,7 +75,7 @@ const providerToName: { [provider: string]: string } = {
 export class Blockchain {
     public networkId: number;
     public nodeVersion: string;
-    private _zeroEx: ZeroEx;
+    private _contractWrappers: ContractWrappers;
     private _dispatcher: Dispatcher;
     private _web3Wrapper?: Web3Wrapper;
     private _blockchainWatcher?: BlockchainWatcher;
@@ -164,8 +167,8 @@ export class Blockchain {
         }
     }
     public async isAddressInTokenRegistryAsync(tokenAddress: string): Promise<boolean> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
-        const tokenIfExists = await this._zeroEx.tokenRegistry.getTokenIfExistsAsync(tokenAddress);
+        utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.');
+        const tokenIfExists = await this._contractWrappers.tokenRegistry.getTokenIfExistsAsync(tokenAddress);
         return !_.isUndefined(tokenIfExists);
     }
     public getLedgerDerivationPathIfExists(): string {
@@ -182,7 +185,7 @@ export class Blockchain {
         this._ledgerSubprovider.setPath(path);
     }
     public async updateProviderToLedgerAsync(networkId: number): Promise<void> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+        utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.');
 
         const isU2FSupported = await utils.isU2FSupportedAsync();
         if (!isU2FSupported) {
@@ -225,12 +228,12 @@ export class Blockchain {
             this.networkId,
             shouldPollUserAddress,
         );
-        this._zeroEx.setProvider(provider, this.networkId);
+        this._contractWrappers.setProvider(provider, this.networkId);
         this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState();
         this._dispatcher.updateProviderType(ProviderType.Ledger);
     }
     public async updateProviderToInjectedAsync(): Promise<void> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+        utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.');
 
         if (_.isUndefined(this._cachedProvider)) {
             return; // Going from injected to injected, so we noop
@@ -253,7 +256,7 @@ export class Blockchain {
         const userAddresses = await this._web3Wrapper.getAvailableAddressesAsync();
         this._userAddressIfExists = userAddresses[0];
 
-        this._zeroEx.setProvider(provider, this.networkId);
+        this._contractWrappers.setProvider(provider, this.networkId);
 
         await this.fetchTokenInformationAsync();
         this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState();
@@ -264,10 +267,10 @@ export class Blockchain {
     public async setProxyAllowanceAsync(token: Token, amountInBaseUnits: BigNumber): Promise<void> {
         utils.assert(this.isValidAddress(token.address), BlockchainCallErrs.TokenAddressIsInvalid);
         utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+        utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.');
 
         this._showFlashMessageIfLedger();
-        const txHash = await this._zeroEx.token.setProxyAllowanceAsync(
+        const txHash = await this._contractWrappers.token.setProxyAllowanceAsync(
             token.address,
             this._userAddressIfExists,
             amountInBaseUnits,
@@ -278,11 +281,11 @@ export class Blockchain {
         await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
     }
     public async transferAsync(token: Token, toAddress: string, amountInBaseUnits: BigNumber): Promise<void> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
         utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
 
         this._showFlashMessageIfLedger();
-        const txHash = await this._zeroEx.token.transferAsync(
+        const txHash = await this._contractWrappers.token.transferAsync(
             token.address,
             this._userAddressIfExists,
             toAddress,
@@ -326,13 +329,13 @@ export class Blockchain {
         return zeroExSignedOrder;
     }
     public async fillOrderAsync(signedOrder: SignedOrder, fillTakerTokenAmount: BigNumber): Promise<BigNumber> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
         utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
 
         const shouldThrowOnInsufficientBalanceOrAllowance = true;
 
         this._showFlashMessageIfLedger();
-        const txHash = await this._zeroEx.exchange.fillOrderAsync(
+        const txHash = await this._contractWrappers.exchange.fillOrderAsync(
             signedOrder,
             fillTakerTokenAmount,
             shouldThrowOnInsufficientBalanceOrAllowance,
@@ -343,7 +346,7 @@ export class Blockchain {
         );
         const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
         const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any;
-        this._zeroEx.exchange.throwLogErrorsAsErrors(logs);
+        this._contractWrappers.exchange.throwLogErrorsAsErrors(logs);
         const logFill = _.find(logs, { event: 'LogFill' });
         const args = (logFill.args as any) as LogFillContractEventArgs;
         const filledTakerTokenAmount = args.filledTakerTokenAmount;
@@ -351,32 +354,32 @@ export class Blockchain {
     }
     public async cancelOrderAsync(signedOrder: SignedOrder, cancelTakerTokenAmount: BigNumber): Promise<BigNumber> {
         this._showFlashMessageIfLedger();
-        const txHash = await this._zeroEx.exchange.cancelOrderAsync(signedOrder, cancelTakerTokenAmount, {
+        const txHash = await this._contractWrappers.exchange.cancelOrderAsync(signedOrder, cancelTakerTokenAmount, {
             gasPrice: this._defaultGasPrice,
         });
         const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
         const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any;
-        this._zeroEx.exchange.throwLogErrorsAsErrors(logs);
+        this._contractWrappers.exchange.throwLogErrorsAsErrors(logs);
         const logCancel = _.find(logs, { event: ExchangeEvents.LogCancel });
         const args = (logCancel.args as any) as LogCancelContractEventArgs;
         const cancelledTakerTokenAmount = args.cancelledTakerTokenAmount;
         return cancelledTakerTokenAmount;
     }
     public async getUnavailableTakerAmountAsync(orderHash: string): Promise<BigNumber> {
-        utils.assert(ZeroEx.isValidOrderHash(orderHash), 'Must be valid orderHash');
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
-        const unavailableTakerAmount = await this._zeroEx.exchange.getUnavailableTakerAmountAsync(orderHash);
+        utils.assert(isValidOrderHash(orderHash), 'Must be valid orderHash');
+        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
+        const unavailableTakerAmount = await this._contractWrappers.exchange.getUnavailableTakerAmountAsync(orderHash);
         return unavailableTakerAmount;
     }
     public getExchangeContractAddressIfExists(): string | undefined {
-        return this._zeroEx.exchange.getContractAddress();
+        return this._contractWrappers.exchange.getContractAddress();
     }
     public async validateFillOrderThrowIfInvalidAsync(
         signedOrder: SignedOrder,
         fillTakerTokenAmount: BigNumber,
         takerAddress: string,
     ): Promise<void> {
-        await this._zeroEx.exchange.validateFillOrderThrowIfInvalidAsync(
+        await this._contractWrappers.exchange.validateFillOrderThrowIfInvalidAsync(
             signedOrder,
             fillTakerTokenAmount,
             takerAddress,
@@ -386,7 +389,7 @@ export class Blockchain {
         order: Order,
         cancelTakerTokenAmount: BigNumber,
     ): Promise<void> {
-        await this._zeroEx.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount);
+        await this._contractWrappers.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount);
     }
     public isValidAddress(address: string): boolean {
         const lowercaseAddress = address.toLowerCase();
@@ -421,7 +424,7 @@ export class Blockchain {
         return newTokenBalancePromise;
     }
     public async signOrderHashAsync(orderHash: string): Promise<ECSignature> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
         const makerAddress = this._userAddressIfExists;
         // If makerAddress is undefined, this means they have a web3 instance injected into their browser
         // but no account addresses associated with it.
@@ -438,11 +441,8 @@ export class Blockchain {
         if ((isParityNode && !isLedgerSigner) || isTestRpc || isLedgerSigner) {
             shouldAddPersonalMessagePrefix = false;
         }
-        const ecSignature = await this._zeroEx.signOrderHashAsync(
-            orderHash,
-            makerAddress,
-            shouldAddPersonalMessagePrefix,
-        );
+        const provider = this._contractWrappers.getProvider();
+        const ecSignature = await signOrderHashAsync(provider, orderHash, makerAddress, shouldAddPersonalMessagePrefix);
         this._dispatcher.updateECSignature(ecSignature);
         return ecSignature;
     }
@@ -461,11 +461,11 @@ export class Blockchain {
         return balanceInWei;
     }
     public async convertEthToWrappedEthTokensAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
         utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
 
         this._showFlashMessageIfLedger();
-        const txHash = await this._zeroEx.etherToken.depositAsync(
+        const txHash = await this._contractWrappers.etherToken.depositAsync(
             etherTokenAddress,
             amount,
             this._userAddressIfExists,
@@ -476,11 +476,11 @@ export class Blockchain {
         await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
     }
     public async convertWrappedEthTokensToEthAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
         utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
 
         this._showFlashMessageIfLedger();
-        const txHash = await this._zeroEx.etherToken.withdrawAsync(
+        const txHash = await this._contractWrappers.etherToken.withdrawAsync(
             etherTokenAddress,
             amount,
             this._userAddressIfExists,
@@ -507,7 +507,7 @@ export class Blockchain {
         ownerAddressIfExists: string,
         tokenAddress: string,
     ): Promise<BigNumber[]> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
 
         if (_.isUndefined(ownerAddressIfExists)) {
             const zero = new BigNumber(0);
@@ -516,14 +516,16 @@ export class Blockchain {
         let balance = new BigNumber(0);
         let allowance = new BigNumber(0);
         if (this._doesUserAddressExist()) {
-            balance = await this._zeroEx.token.getBalanceAsync(tokenAddress, ownerAddressIfExists);
-            allowance = await this._zeroEx.token.getProxyAllowanceAsync(tokenAddress, ownerAddressIfExists);
+            balance = await this._contractWrappers.token.getBalanceAsync(tokenAddress, ownerAddressIfExists);
+            allowance = await this._contractWrappers.token.getProxyAllowanceAsync(tokenAddress, ownerAddressIfExists);
         }
         return [balance, allowance];
     }
     public async getUserAccountsAsync(): Promise<string[]> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
-        const userAccountsIfExists = await this._zeroEx.getAvailableAddressesAsync();
+        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
+        const provider = this._contractWrappers.getProvider();
+        const web3Wrapper = new Web3Wrapper(provider);
+        const userAccountsIfExists = await web3Wrapper.getAvailableAddressesAsync();
         return userAccountsIfExists;
     }
     // HACK: When a user is using a Ledger, we simply dispatch the selected userAddress, which
@@ -619,7 +621,9 @@ export class Blockchain {
                 etherScanLinkIfExists,
             }),
         );
-        const receipt = await this._zeroEx.awaitTransactionMinedAsync(txHash);
+        const provider = this._contractWrappers.getProvider();
+        const web3Wrapper = new Web3Wrapper(provider);
+        const receipt = await web3Wrapper.awaitTransactionMinedAsync(txHash);
         return receipt;
     }
     private _doesUserAddressExist(): boolean {
@@ -633,7 +637,7 @@ export class Blockchain {
             return; // short-circuit
         }
 
-        if (!_.isUndefined(this._zeroEx)) {
+        if (!_.isUndefined(this._contractWrappers)) {
             // Since we do not have an index on the `taker` address and want to show
             // transactions where an account is either the `maker` or `taker`, we loop
             // through all fill events, and filter/cache them client-side.
@@ -642,14 +646,14 @@ export class Blockchain {
         }
     }
     private async _startListeningForExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues): Promise<void> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
         utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
 
         // Fetch historical logs
         await this._fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues);
 
         // Start a subscription for new logs
-        this._zeroEx.exchange.subscribe(
+        this._contractWrappers.exchange.subscribe(
             ExchangeEvents.LogFill,
             indexFilterValues,
             async (err: Error, decodedLogEvent: DecodedLogEvent<LogFillContractEventArgs>) => {
@@ -684,7 +688,7 @@ export class Blockchain {
             fromBlock,
             toBlock: 'latest' as BlockParam,
         };
-        const decodedLogs = await this._zeroEx.exchange.getLogsAsync<LogFillContractEventArgs>(
+        const decodedLogs = await this._contractWrappers.exchange.getLogsAsync<LogFillContractEventArgs>(
             ExchangeEvents.LogFill,
             blockRange,
             indexFilterValues,
@@ -741,11 +745,11 @@ export class Blockchain {
         }
     }
     private _stopWatchingExchangeLogFillEvents(): void {
-        this._zeroEx.exchange.unsubscribeAll();
+        this._contractWrappers.exchange.unsubscribeAll();
     }
     private async _getTokenRegistryTokensByAddressAsync(): Promise<TokenByAddress> {
-        utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
-        const tokenRegistryTokens = await this._zeroEx.tokenRegistry.getTokensAsync();
+        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
+        const tokenRegistryTokens = await this._contractWrappers.tokenRegistry.getTokensAsync();
 
         const tokenByAddress: TokenByAddress = {};
         _.each(tokenRegistryTokens, (t: ZeroExToken, i: number) => {
@@ -794,7 +798,7 @@ export class Blockchain {
         const zeroExConfigs = {
             networkId: this.networkId,
         };
-        this._zeroEx = new ZeroEx(provider, zeroExConfigs);
+        this._contractWrappers = new ContractWrappers(provider, zeroExConfigs);
         this._updateProviderName(injectedWeb3);
         const shouldPollUserAddress = true;
         this._web3Wrapper = new Web3Wrapper(provider);
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index 069a75560..d647bba80 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -1,6 +1,6 @@
-import { ZeroEx } from '0x.js';
 import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
@@ -78,7 +78,7 @@ export class EthWethConversionDialog extends React.Component<
                 ? 'Convert your Ether into a tokenized, tradable form.'
                 : "Convert your Wrapped Ether back into it's native form.";
         const isWrappedVersion = this.props.direction === Side.Receive;
-        const etherBalanceInEth = ZeroEx.toUnitAmount(this.props.etherBalanceInWei, constants.DECIMAL_PLACES_ETH);
+        const etherBalanceInEth = Web3Wrapper.toUnitAmount(this.props.etherBalanceInWei, constants.DECIMAL_PLACES_ETH);
         return (
             <div>
                 <div className="pb2">{explanation}</div>
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index 3c839d6f5..196414407 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -1,6 +1,6 @@
-import { ZeroEx } from '0x.js';
 import { colors, constants as sharedConstants } from '@0xproject/react-shared';
 import { BigNumber, logUtils } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
@@ -168,7 +168,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
             // We specifically prefix kovan ETH.
             // TODO: We should probably add prefixes for all networks
             const isKovanNetwork = networkName === 'Kovan';
-            const balanceInEth = ZeroEx.toUnitAmount(balanceInWei, constants.DECIMAL_PLACES_ETH);
+            const balanceInEth = Web3Wrapper.toUnitAmount(balanceInWei, constants.DECIMAL_PLACES_ETH);
             const balanceString = `${balanceInEth.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`;
             return (
                 <TableRow key={userAddress} style={{ height: 40 }}>
diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index e8db42a7a..4b91a2ebd 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -1,5 +1,5 @@
-import { ZeroEx } from '0x.js';
 import { BigNumber, logUtils } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
@@ -95,11 +95,11 @@ export class EthWethConversionButton extends React.Component<
         try {
             if (direction === Side.Deposit) {
                 await this.props.blockchain.convertEthToWrappedEthTokensAsync(token.address, value);
-                const ethAmount = ZeroEx.toUnitAmount(value, constants.DECIMAL_PLACES_ETH);
+                const ethAmount = Web3Wrapper.toUnitAmount(value, constants.DECIMAL_PLACES_ETH);
                 this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`);
             } else {
                 await this.props.blockchain.convertWrappedEthTokensToEthAsync(token.address, value);
-                const tokenAmount = ZeroEx.toUnitAmount(value, token.decimals);
+                const tokenAmount = Web3Wrapper.toUnitAmount(value, token.decimals);
                 this.props.dispatcher.showFlashMessage(`Successfully unwrapped ${tokenAmount.toString()} WETH to ETH`);
             }
             if (!this.props.isOutdatedWrappedEther) {
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index f19b05861..a5758a66a 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -1,6 +1,6 @@
-import { ZeroEx } from '0x.js';
 import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import Divider from 'material-ui/Divider';
 import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
@@ -85,7 +85,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
     }
     public render(): React.ReactNode {
         const etherToken = this._getEthToken();
-        const wethBalance = ZeroEx.toUnitAmount(this.state.ethTokenState.balance, constants.DECIMAL_PLACES_ETH);
+        const wethBalance = Web3Wrapper.toUnitAmount(this.state.ethTokenState.balance, constants.DECIMAL_PLACES_ETH);
         const isBidirectional = true;
         const etherscanUrl = sharedUtils.getEtherScanLinkIfExists(
             etherToken.address,
@@ -93,7 +93,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
             EtherscanLinkSuffixes.Address,
         );
         const tokenLabel = this._renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH);
-        const userEtherBalanceInEth = ZeroEx.toUnitAmount(
+        const userEtherBalanceInEth = Web3Wrapper.toUnitAmount(
             this.props.userEtherBalanceInWei,
             constants.DECIMAL_PLACES_ETH,
         );
@@ -265,7 +265,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                 const outdatedEtherTokenState = this.state.outdatedWETHStateByAddress[outdatedWETHIfExists.address];
                 const isStateLoaded = outdatedEtherTokenState.isLoaded;
                 const balanceInEthIfExists = isStateLoaded
-                    ? ZeroEx.toUnitAmount(outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH).toFixed(
+                    ? Web3Wrapper.toUnitAmount(outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH).toFixed(
                           configs.AMOUNT_DISPLAY_PRECSION,
                       )
                     : undefined;
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 59c32cebc..0168ec8f6 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,6 +1,8 @@
-import { Order as ZeroExOrder, ZeroEx } from '0x.js';
+import { getOrderHashHex, isValidSignature } from '@0xproject/order-utils';
 import { colors, constants as sharedConstants } from '@0xproject/react-shared';
+import { Order as ZeroExOrder } from '@0xproject/types';
 import { BigNumber, logUtils } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as accounting from 'accounting';
 import * as _ from 'lodash';
 import { Card, CardHeader, CardText } from 'material-ui/Card';
@@ -433,15 +435,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 takerTokenAddress: parsedOrder.signedOrder.takerTokenAddress,
                 takerTokenAmount: takerAmount,
             };
-            orderHash = ZeroEx.getOrderHashHex(zeroExOrder);
+            orderHash = getOrderHashHex(zeroExOrder);
 
             const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
             const signature = parsedOrder.signedOrder.ecSignature;
-            const isValidSignature = ZeroEx.isValidSignature(orderHash, signature, parsedOrder.signedOrder.maker);
+            const isSignatureValid = isValidSignature(orderHash, signature, parsedOrder.signedOrder.maker);
             if (exchangeContractAddr !== parsedOrder.signedOrder.exchangeContractAddress) {
                 orderJSONErrMsg = 'This order was made on another network or using a deprecated Exchange contract';
                 parsedOrder = undefined;
-            } else if (!isValidSignature) {
+            } else if (!isSignatureValid) {
                 orderJSONErrMsg = 'Order signature is invalid';
                 parsedOrder = undefined;
             } else {
@@ -600,7 +602,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         const takerTokenAmount = new BigNumber(parsedOrder.signedOrder.takerTokenAmount);
 
         const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder);
-        const orderHash = ZeroEx.getOrderHashHex(signedOrder);
+        const orderHash = getOrderHashHex(signedOrder);
         const unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
         const availableTakerTokenAmount = takerTokenAmount.minus(unavailableTakerAmount);
         try {
@@ -646,7 +648,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         }
     }
     private _formatCurrencyAmount(amount: BigNumber, decimals: number): number {
-        const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
+        const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
         const roundedUnitAmount = Math.round(unitAmount.toNumber() * 100000) / 100000;
         return roundedUnitAmount;
     }
diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx
index 97297d5a1..90eedbb18 100644
--- a/packages/website/ts/components/fill_order_json.tsx
+++ b/packages/website/ts/components/fill_order_json.tsx
@@ -1,4 +1,4 @@
-import { ZeroEx } from '0x.js';
+import { generatePseudoRandomSalt } from '@0xproject/order-utils';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
@@ -38,7 +38,7 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
             s: '937862111edcba395f8a9e0cc1b2c5e12320...',
             v: 27,
         };
-        const hintSalt = ZeroEx.generatePseudoRandomSalt();
+        const hintSalt = generatePseudoRandomSalt();
         const feeRecipient = constants.NULL_ADDRESS;
         const hintOrder = utils.generateOrder(
             exchangeContract,
diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/token_send_completed.tsx
index bb5adfa4e..f3f1ea2fc 100644
--- a/packages/website/ts/components/flash_messages/token_send_completed.tsx
+++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx
@@ -1,6 +1,6 @@
-import { ZeroEx } from '0x.js';
 import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Token } from 'ts/types';
@@ -22,7 +22,7 @@ export class TokenSendCompleted extends React.Component<TokenSendCompletedProps,
                 Verify on Etherscan
             </a>
         );
-        const amountInUnits = ZeroEx.toUnitAmount(this.props.amountInBaseUnits, this.props.token.decimals);
+        const amountInUnits = Web3Wrapper.toUnitAmount(this.props.amountInBaseUnits, this.props.token.decimals);
         const truncatedAddress = utils.getAddressBeginAndEnd(this.props.toAddress);
         return (
             <div>
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx
index d46c29058..5f968a5e4 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -1,5 +1,6 @@
-import { ECSignature, Order, ZeroEx } from '0x.js';
+import { generatePseudoRandomSalt, getOrderHashHex } from '@0xproject/order-utils';
 import { colors, constants as sharedConstants } from '@0xproject/react-shared';
+import { ECSignature, Order } from '@0xproject/types';
 import { BigNumber, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
@@ -78,7 +79,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                                   specified, anyone is able to fill it.';
         const exchangeContractIfExists = this.props.blockchain.getExchangeContractAddressIfExists();
         const initialTakerAddress =
-            this.props.orderTakerAddress === ZeroEx.NULL_ADDRESS ? '' : this.props.orderTakerAddress;
+            this.props.orderTakerAddress === constants.NULL_ADDRESS ? '' : this.props.orderTakerAddress;
         return (
             <div className="clearfix mb2 lg-px4 md-px4 sm-px2">
                 <h3>Generate an order</h3>
@@ -224,7 +225,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
         // Upon closing the order JSON dialog, we update the orderSalt stored in the Redux store
         // with a new value so that if a user signs the identical order again, the newly signed
         // orderHash will not collide with the previously generated orderHash.
-        this.props.dispatcher.updateOrderSalt(ZeroEx.generatePseudoRandomSalt());
+        this.props.dispatcher.updateOrderSalt(generatePseudoRandomSalt());
         this.setState({
             signingState: SigningState.UNSIGNED,
         });
@@ -305,7 +306,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
             takerTokenAddress: hashData.receiveTokenContractAddr,
             takerTokenAmount: hashData.receiveAmount,
         };
-        const orderHash = ZeroEx.getOrderHashHex(zeroExOrder);
+        const orderHash = getOrderHashHex(zeroExOrder);
 
         let globalErrMsg = '';
         try {
@@ -348,7 +349,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
     }
     private _updateOrderAddress(address?: string): void {
         if (!_.isUndefined(address)) {
-            const normalizedAddress = _.isEmpty(address) ? ZeroEx.NULL_ADDRESS : address;
+            const normalizedAddress = _.isEmpty(address) ? constants.NULL_ADDRESS : address;
             this.props.dispatcher.updateOrderTakerAddress(normalizedAddress);
         }
     }
diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx
index 10f71b430..a9b8e9589 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -157,14 +157,14 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
         const maxLength = 30;
         const tokens = _.values(this.props.tokenByAddress);
         const tokenWithNameIfExists = _.find(tokens, { name });
-        const tokenWithNameExists = !_.isUndefined(tokenWithNameIfExists);
+        const doesTokenWithNameExists = !_.isUndefined(tokenWithNameIfExists);
         if (name === '') {
             nameErrText = 'Name is required';
         } else if (!this._isValidName(name)) {
             nameErrText = 'Name should only contain letters, digits and spaces';
         } else if (name.length > maxLength) {
             nameErrText = `Max length is ${maxLength}`;
-        } else if (tokenWithNameExists) {
+        } else if (doesTokenWithNameExists) {
             nameErrText = 'Token with this name already exists';
         }
 
@@ -177,14 +177,14 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
         let symbolErrText = '';
         const maxLength = 5;
         const tokens = _.values(this.props.tokenByAddress);
-        const tokenWithSymbolExists = !_.isUndefined(_.find(tokens, { symbol }));
+        const doesTokenWithSymbolExists = !_.isUndefined(_.find(tokens, { symbol }));
         if (symbol === '') {
             symbolErrText = 'Symbol is required';
         } else if (!this._isAlphanumeric(symbol)) {
             symbolErrText = 'Can only include alphanumeric characters';
         } else if (symbol.length > maxLength) {
             symbolErrText = `Max length is ${maxLength}`;
-        } else if (tokenWithSymbolExists) {
+        } else if (doesTokenWithSymbolExists) {
             symbolErrText = 'Token with symbol already exists';
         }
 
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index fa684d85c..1f0f27410 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -1,5 +1,5 @@
-import { ZeroEx } from '0x.js';
 import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
@@ -34,7 +34,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
     };
     public render(): React.ReactNode {
         const amount = this.props.amount
-            ? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH)
+            ? Web3Wrapper.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH)
             : undefined;
         return (
             <div className="flex overflow-hidden" style={this.props.style}>
@@ -61,7 +61,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
     private _onChange(isValid: boolean, amount?: BigNumber): void {
         const baseUnitAmountIfExists = _.isUndefined(amount)
             ? undefined
-            : ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
+            : Web3Wrapper.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
         this.props.onChange(isValid, baseUnitAmountIfExists);
     }
     private _getLabelStyle(): React.CSSProperties {
diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx
index 37d4af138..8d9cdfc0b 100644
--- a/packages/website/ts/components/inputs/hash_input.tsx
+++ b/packages/website/ts/components/inputs/hash_input.tsx
@@ -1,5 +1,6 @@
-import { Order, ZeroEx } from '0x.js';
+import { getOrderHashHex } from '@0xproject/order-utils';
 import { Styles } from '@0xproject/react-shared';
+import { Order } from '@0xproject/types';
 import * as _ from 'lodash';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
@@ -57,7 +58,7 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> {
             takerTokenAddress: hashData.receiveTokenContractAddr,
             takerTokenAmount: hashData.receiveAmount,
         };
-        const orderHash = ZeroEx.getOrderHashHex(order);
+        const orderHash = getOrderHashHex(order);
         return orderHash;
     }
 }
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index f040928f1..a67120320 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,6 +1,6 @@
-import { ZeroEx } from '0x.js';
 import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
@@ -75,14 +75,14 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
     }
     public render(): React.ReactNode {
         const amount = this.props.amount
-            ? ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals)
+            ? Web3Wrapper.toUnitAmount(this.props.amount, this.props.token.decimals)
             : undefined;
         return (
             <div className="flex overflow-hidden" style={this._getStyle()}>
                 <BalanceBoundedInput
                     label={this.props.label}
                     amount={amount}
-                    balance={ZeroEx.toUnitAmount(this.state.balance, this.props.token.decimals)}
+                    balance={Web3Wrapper.toUnitAmount(this.state.balance, this.props.token.decimals)}
                     onChange={this._onChange.bind(this)}
                     onErrorMsgChange={this.props.onErrorMsgChange}
                     validate={this._validate.bind(this)}
@@ -103,7 +103,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
     private _onChange(isValid: boolean, amount?: BigNumber): void {
         let baseUnitAmount;
         if (!_.isUndefined(amount)) {
-            baseUnitAmount = ZeroEx.toBaseUnitAmount(amount, this.props.token.decimals);
+            baseUnitAmount = Web3Wrapper.toBaseUnitAmount(amount, this.props.token.decimals);
         }
         this.props.onChange(isValid, baseUnitAmount);
     }
diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx
index 6feefea50..35188c024 100644
--- a/packages/website/ts/components/order_json.tsx
+++ b/packages/website/ts/components/order_json.tsx
@@ -1,4 +1,4 @@
-import { ECSignature } from '0x.js';
+import { ECSignature } from '@0xproject/types';
 import { BigNumber, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx
index e8353a3b0..6a3301549 100644
--- a/packages/website/ts/components/portal/menu.tsx
+++ b/packages/website/ts/components/portal/menu.tsx
@@ -61,13 +61,13 @@ export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => {
     return (
         <div>
             {_.map(props.menuItemEntries, entry => {
-                const selected = entry.to === props.selectedPath;
+                const isSelected = entry.to === props.selectedPath;
                 return (
                     <MenuItem key={entry.to} to={entry.to}>
                         <MenuItemLabel
                             title={entry.labelText}
                             iconName={entry.iconName}
-                            selected={selected}
+                            selected={isSelected}
                             theme={props.theme}
                         />
                     </MenuItem>
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index b992204a7..1bd318c28 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -466,8 +466,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         this.props.dispatcher.updateScreenWidth(newScreenWidth);
     }
     private _isSmallScreen(): boolean {
-        const result = this.props.screenWidth === ScreenWidths.Sm;
-        return result;
+        const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
+        return isSmallScreen;
     }
 }
 
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 8da4e0e10..9ef6eaf59 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -60,8 +60,8 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
         this._isUnmounted = true;
     }
     public render(): React.ReactNode {
-        const readyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos);
-        if (!readyToRender) {
+        const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos);
+        if (!isReadyToRender) {
             return (
                 // TODO: consolidate this loading component with the one in portal
                 <div className="center">
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 83948e5c2..f5a51dabb 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -1,4 +1,3 @@
-import { ZeroEx } from '0x.js';
 import {
     colors,
     constants as sharedConstants,
@@ -8,6 +7,7 @@ import {
     utils as sharedUtils,
 } from '@0xproject/react-shared';
 import { BigNumber, logUtils } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import Divider from 'material-ui/Divider';
@@ -111,7 +111,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         if (nextProps.userEtherBalanceInWei !== this.props.userEtherBalanceInWei) {
             if (this.state.isBalanceSpinnerVisible) {
                 const receivedAmountInWei = nextProps.userEtherBalanceInWei.minus(this.props.userEtherBalanceInWei);
-                const receivedAmountInEth = ZeroEx.toUnitAmount(receivedAmountInWei, constants.DECIMAL_PLACES_ETH);
+                const receivedAmountInEth = Web3Wrapper.toUnitAmount(receivedAmountInWei, constants.DECIMAL_PLACES_ETH);
                 const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
                 this.props.dispatcher.showFlashMessage(
                     `Received ${receivedAmountInEth.toString(10)} ${networkName} Ether`,
@@ -180,7 +180,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                                   token balances in order to execute trades.<br> \
                                   Toggling sets an allowance for the<br> \
                                   smart contract so you can start trading that token.';
-        const userEtherBalanceInEth = ZeroEx.toUnitAmount(
+        const userEtherBalanceInEth = Web3Wrapper.toUnitAmount(
             this.props.userEtherBalanceInWei,
             constants.DECIMAL_PLACES_ETH,
         );
@@ -445,7 +445,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         });
     }
     private _renderAmount(amount: BigNumber, decimals: number): React.ReactNode {
-        const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
+        const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
         return unitAmount.toNumber().toFixed(configs.AMOUNT_DISPLAY_PRECSION);
     }
     private _renderTokenName(token: Token): React.ReactNode {
@@ -508,7 +508,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         try {
             await this.props.blockchain.mintTestTokensAsync(token);
             await this._refetchTokenStateAsync(token.address);
-            const amount = ZeroEx.toUnitAmount(constants.MINT_AMOUNT, token.decimals);
+            const amount = Web3Wrapper.toUnitAmount(constants.MINT_AMOUNT, token.decimals);
             this.props.dispatcher.showFlashMessage(`Successfully minted ${amount.toString(10)} ${token.symbol}`);
             return true;
         } catch (err) {
diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx
index adca4d58c..321a8b0e1 100644
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -1,6 +1,6 @@
-import { ZeroEx } from '0x.js';
 import { colors, EtherscanLinkSuffixes } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
 import * as moment from 'moment';
@@ -90,10 +90,16 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
     }
     private _renderAmounts(makerToken: Token, takerToken: Token): React.ReactNode {
         const fill = this.props.fill;
-        const filledTakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledTakerTokenAmount, takerToken.decimals);
-        const filledMakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledMakerTokenAmount, takerToken.decimals);
+        const filledTakerTokenAmountInUnits = Web3Wrapper.toUnitAmount(
+            fill.filledTakerTokenAmount,
+            takerToken.decimals,
+        );
+        const filledMakerTokenAmountInUnits = Web3Wrapper.toUnitAmount(
+            fill.filledMakerTokenAmount,
+            takerToken.decimals,
+        );
         let exchangeRate = filledTakerTokenAmountInUnits.div(filledMakerTokenAmountInUnits);
-        const fillMakerTokenAmount = ZeroEx.toBaseUnitAmount(filledMakerTokenAmountInUnits, makerToken.decimals);
+        const fillMakerTokenAmount = Web3Wrapper.toBaseUnitAmount(filledMakerTokenAmountInUnits, makerToken.decimals);
 
         let receiveAmount;
         let receiveToken;
@@ -160,7 +166,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
         );
     }
     private _renderAmount(amount: BigNumber, symbol: string, decimals: number): React.ReactNode {
-        const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
+        const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
         return (
             <span>
                 {unitAmount.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} {symbol}
diff --git a/packages/website/ts/components/visual_order.tsx b/packages/website/ts/components/visual_order.tsx
index 76a283547..a8d18006e 100644
--- a/packages/website/ts/components/visual_order.tsx
+++ b/packages/website/ts/components/visual_order.tsx
@@ -1,4 +1,4 @@
-import { ZeroEx } from '0x.js';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Party } from 'ts/components/ui/party';
@@ -63,7 +63,7 @@ export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderSt
         );
     }
     private _renderAmount(assetToken: AssetToken, token: Token): React.ReactNode {
-        const unitAmount = ZeroEx.toUnitAmount(assetToken.amount, token.decimals);
+        const unitAmount = Web3Wrapper.toUnitAmount(assetToken.amount, token.decimals);
         return (
             <div style={{ fontSize: 13 }}>
                 {unitAmount.toNumber().toFixed(configs.AMOUNT_DISPLAY_PRECSION)} {token.symbol}
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 113f3c864..d0354580d 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -1,4 +1,3 @@
-import { ZeroEx } from '0x.js';
 import {
     constants as sharedConstants,
     EtherscanLinkSuffixes,
@@ -6,6 +5,7 @@ import {
     utils as sharedUtils,
 } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import FlatButton from 'material-ui/FlatButton';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
@@ -450,7 +450,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
     }
     private _renderAmount(amount: BigNumber, decimals: number, symbol: string): React.ReactNode {
-        const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
+        const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
         const formattedAmount = unitAmount.toPrecision(TOKEN_AMOUNT_DISPLAY_PRECISION);
         const result = `${formattedAmount} ${symbol}`;
         return <div style={styles.amountLabel}>{result}</div>;
@@ -459,7 +459,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         if (_.isUndefined(price)) {
             return null;
         }
-        const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
+        const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
         const value = unitAmount.mul(price);
         const formattedAmount = value.toFixed(USD_DECIMAL_PLACES);
         const result = `$${formattedAmount}`;
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index aab1d4439..34b5b8824 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -1,6 +1,6 @@
-import { ZeroEx } from '0x.js';
 import { Styles } from '@0xproject/react-shared';
 import { BigNumber, logUtils } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import FlatButton from 'material-ui/FlatButton';
 import { ListItem } from 'material-ui/List';
@@ -90,7 +90,10 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
         };
     }
     public render(): React.ReactNode {
-        const etherBalanceInEth = ZeroEx.toUnitAmount(this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH);
+        const etherBalanceInEth = Web3Wrapper.toUnitAmount(
+            this.props.userEtherBalanceInWei,
+            constants.DECIMAL_PLACES_ETH,
+        );
         const isWrappingEth = this.props.direction === Side.Deposit;
         const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1';
 
@@ -192,11 +195,11 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
             const amountToConvert = this.state.currentInputAmount;
             if (this.props.direction === Side.Deposit) {
                 await this.props.blockchain.convertEthToWrappedEthTokensAsync(etherToken.address, amountToConvert);
-                const ethAmount = ZeroEx.toUnitAmount(amountToConvert, constants.DECIMAL_PLACES_ETH);
+                const ethAmount = Web3Wrapper.toUnitAmount(amountToConvert, constants.DECIMAL_PLACES_ETH);
                 this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`);
             } else {
                 await this.props.blockchain.convertWrappedEthTokensToEthAsync(etherToken.address, amountToConvert);
-                const tokenAmount = ZeroEx.toUnitAmount(amountToConvert, etherToken.decimals);
+                const tokenAmount = Web3Wrapper.toUnitAmount(amountToConvert, etherToken.decimals);
                 this.props.dispatcher.showFlashMessage(`Successfully unwrapped ${tokenAmount.toString()} WETH to ETH`);
             }
             await this.props.refetchEthTokenStateAsync();
diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts
index 8c5deb690..98c9b8cd6 100644
--- a/packages/website/ts/containers/generate_order_form.ts
+++ b/packages/website/ts/containers/generate_order_form.ts
@@ -1,4 +1,4 @@
-import { ECSignature } from '0x.js';
+import { ECSignature } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts
index 981522360..340b80d49 100644
--- a/packages/website/ts/redux/dispatcher.ts
+++ b/packages/website/ts/redux/dispatcher.ts
@@ -1,4 +1,4 @@
-import { ECSignature } from '0x.js';
+import { ECSignature } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import { Dispatch } from 'redux';
 import { State } from 'ts/redux/reducer';
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index bb8f1472b..fba6afa5d 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -1,4 +1,5 @@
-import { ECSignature, ZeroEx } from '0x.js';
+import { constants, generatePseudoRandomSalt } from '@0xproject/order-utils';
+import { ECSignature } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import * as moment from 'moment';
@@ -65,8 +66,8 @@ const INITIAL_STATE: State = {
         s: '',
         v: 27,
     },
-    orderTakerAddress: ZeroEx.NULL_ADDRESS,
-    orderSalt: ZeroEx.generatePseudoRandomSalt(),
+    orderTakerAddress: constants.NULL_ADDRESS,
+    orderSalt: generatePseudoRandomSalt(),
     nodeVersion: undefined,
     screenWidth: utils.getScreenWidth(),
     shouldBlockchainErrDialogBeOpen: false,
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 33e4d6c30..294a58f64 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -1,4 +1,4 @@
-import { ECSignature } from '0x.js';
+import { ECSignature } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 9fec814b7..e72a7f201 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -19,7 +19,7 @@ export const configs = {
     // WARNING: ZRX & WETH MUST always be default trackedTokens
     DEFAULT_TRACKED_TOKEN_SYMBOLS: ['WETH', 'ZRX'],
     DOMAIN_STAGING: 'staging-0xproject.s3-website-us-east-1.amazonaws.com',
-    DOMAIN_DOGFOOD: 'dogfood-0xproject.s3-website-us-east-1.amazonaws.com',
+    DOMAIN_DOGFOOD: 'dogfood.0xproject.com',
     DOMAIN_DEVELOPMENT: '0xproject.localhost:3572',
     DOMAIN_PRODUCTION: '0xproject.com',
     ENVIRONMENT: isDevelopment ? Environments.DEVELOPMENT : Environments.PRODUCTION,
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index c370ac90c..e79a873e0 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -1,7 +1,7 @@
-import { ContractWrappersError, ECSignature, ExchangeContractErrs, ZeroEx } from '0x.js';
+import { ContractWrappersError, ExchangeContractErrs } from '@0xproject/contract-wrappers';
 import { OrderError } from '@0xproject/order-utils';
 import { constants as sharedConstants, EtherscanLinkSuffixes, Networks } from '@0xproject/react-shared';
-import { Provider } from '@0xproject/types';
+import { ECSignature, Provider } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import deepEqual = require('deep-equal');
 import * as _ from 'lodash';
diff --git a/packages/website/tslint.json b/packages/website/tslint.json
index d6a5f5031..b55ffe90f 100644
--- a/packages/website/tslint.json
+++ b/packages/website/tslint.json
@@ -4,6 +4,7 @@
         "no-implicit-dependencies": false,
         "no-object-literal-type-assertion": false,
         "completed-docs": false,
-        "prefer-function-over-method": false
+        "prefer-function-over-method": false,
+        "custom-no-magic-numbers": false
     }
 }
diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js
index e28e9e064..f9abeb27c 100644
--- a/packages/website/webpack.config.js
+++ b/packages/website/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 module.exports = {
     entry: ['./ts/index.tsx'],
@@ -76,9 +77,14 @@ module.exports = {
                           NODE_ENV: JSON.stringify(process.env.NODE_ENV),
                       },
                   }),
-                  new webpack.optimize.UglifyJsPlugin({
-                      mangle: {
-                          except: ['BigNumber'],
+                  // TODO: Revert to webpack bundled version with webpack v4.
+                  // The v3 series bundled version does not support ES6 and
+                  // fails to build.
+                  new UglifyJsPlugin({
+                      uglifyOptions: {
+                          mangle: {
+                              reserved: ['BigNumber'],
+                          },
                       },
                   }),
               ]