Initial changes for v2 portal

2018-08-29 14:33:55 -07:00
parent 81ba2a8411
commit 82a01ef020
17 changed files with 327 additions and 366 deletions
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -18,12 +18,12 @@
    "author": "Fabio Berger",
    "license": "Apache-2.0",
    "dependencies": {
-        "@0xproject/contract-wrappers": "^0.0.5",
-        "@0xproject/order-utils": "^0.0.9",
+        "@0xproject/contract-wrappers": "^1.0.1-rc.5",
+        "@0xproject/order-utils": "^1.0.1-rc.6",
        "@0xproject/react-docs": "^1.0.7",
        "@0xproject/react-shared": "^1.0.8",
        "@0xproject/subproviders": "^2.0.1",
-        "@0xproject/types": "^0.8.1",
+        "@0xproject/types": "^1.0.1-rc.6",
        "@0xproject/typescript-typings": "^0.4.3",
        "@0xproject/utils": "^1.0.7",
        "@0xproject/web3-wrapper": "^2.0.1",
@@ -32,6 +32,7 @@
        "blockies": "^0.0.2",
        "bowser": "^1.9.3",
        "deep-equal": "^1.0.1",
+        "ethereum-types": "^1.0.5",
        "ethereumjs-util": "^5.1.1",
        "find-versions": "^2.0.0",
        "jsonschema": "^1.2.0",
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -2,14 +2,13 @@ import {
    BlockRange,
    ContractWrappers,
    DecodedLogEvent,
-    ExchangeContractEventArgs,
+    ExchangeCancelEventArgs,
+    ExchangeEventArgs,
    ExchangeEvents,
+    ExchangeFillEventArgs,
    IndexedFilterValues,
-    LogCancelContractEventArgs,
-    LogFillContractEventArgs,
-    Token as ZeroExToken,
 } from '@0xproject/contract-wrappers';
-import { isValidOrderHash, signOrderHashAsync } from '@0xproject/order-utils';
+import { orderHashUtils, signatureUtils, SignerType, assetDataUtils } from '@0xproject/order-utils';
 import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import {
    ledgerEthereumBrowserClientFactoryAsync,
@@ -19,21 +18,15 @@ import {
    SignerSubprovider,
    Web3ProviderEngine,
 } from '@0xproject/subproviders';
-import {
-    BlockParam,
-    ECSignature,
-    LogWithDecodedArgs,
-    Order,
-    Provider,
-    SignedOrder,
-    TransactionReceiptWithDecodedLogs,
-} from '@0xproject/types';
+import { ECSignature, Order, SignedOrder, Token as ZeroExToken } from '@0xproject/types';
 import { BigNumber, intervalUtils, logUtils, promisify } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { BlockParam, LogWithDecodedArgs, Provider, TransactionReceiptWithDecodedLogs } from 'ethereum-types';
 import * as _ from 'lodash';
 import * as moment from 'moment';
 import * as React from 'react';
 import contract = require('truffle-contract');
+
 import { BlockchainWatcher } from 'ts/blockchain_watcher';
 import { AssetSendCompleted } from 'ts/components/flash_messages/asset_send_completed';
 import { TransactionSubmitted } from 'ts/components/flash_messages/transaction_submitted';
@@ -48,7 +41,7 @@ import {
    InjectedProviderObservable,
    InjectedProviderUpdate,
    InjectedWeb3,
-    Order as PortalOrder,
+    PortalOrder,
    Providers,
    ProviderType,
    Side,
@@ -231,8 +224,10 @@ export class Blockchain {
    }
    public async isAddressInTokenRegistryAsync(tokenAddress: string): Promise<boolean> {
        utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.');
-        const tokenIfExists = await this._contractWrappers.tokenRegistry.getTokenIfExistsAsync(tokenAddress);
-        return !_.isUndefined(tokenIfExists);
+        // need to get rid of token registry
+        // const tokenIfExists = await this._contractWrappers.tokenRegistry.getTokenIfExistsAsync(tokenAddress);
+        // return !_.isUndefined(tokenIfExists);
+        return false;
    }
    public getLedgerDerivationPathIfExists(): string {
        if (_.isUndefined(this._ledgerSubprovider)) {
@@ -266,7 +261,7 @@ export class Blockchain {
        utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.');

        this._showFlashMessageIfLedger();
-        const txHash = await this._contractWrappers.token.setProxyAllowanceAsync(
+        const txHash = await this._contractWrappers.erc20Token.setProxyAllowanceAsync(
            token.address,
            this._userAddressIfExists,
            amountInBaseUnits,
@@ -307,7 +302,7 @@ export class Blockchain {
        utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);

        this._showFlashMessageIfLedger();
-        const txHash = await this._contractWrappers.token.transferAsync(
+        const txHash = await this._contractWrappers.erc20Token.transferAsync(
            token.address,
            this._userAddressIfExists,
            toAddress,
@@ -332,66 +327,65 @@ export class Blockchain {
            }),
        );
    }
-    public portalOrderToZeroExOrder(portalOrder: PortalOrder): SignedOrder {
-        const exchangeContractAddress = this.getExchangeContractAddressIfExists();
-        const zeroExSignedOrder = {
-            exchangeContractAddress,
-            maker: portalOrder.signedOrder.maker,
-            taker: portalOrder.signedOrder.taker,
-            makerTokenAddress: portalOrder.signedOrder.makerTokenAddress,
-            takerTokenAddress: portalOrder.signedOrder.takerTokenAddress,
-            makerTokenAmount: new BigNumber(portalOrder.signedOrder.makerTokenAmount),
-            takerTokenAmount: new BigNumber(portalOrder.signedOrder.takerTokenAmount),
-            makerFee: new BigNumber(portalOrder.signedOrder.makerFee),
-            takerFee: new BigNumber(portalOrder.signedOrder.takerFee),
-            expirationUnixTimestampSec: new BigNumber(portalOrder.signedOrder.expirationUnixTimestampSec),
-            feeRecipient: portalOrder.signedOrder.feeRecipient,
-            ecSignature: portalOrder.signedOrder.ecSignature,
-            salt: new BigNumber(portalOrder.signedOrder.salt),
-        };
-        return zeroExSignedOrder;
-    }
+    // i think we can get rid of this?
+    // public portalOrderToZeroExOrder(portalOrder: PortalOrder): SignedOrder {
+    //     const exchangeContractAddress = this.getExchangeContractAddressIfExists();
+    //     const zeroExSignedOrder = {
+    //         exchangeContractAddress,
+    //         maker: portalOrder.signedOrder.maker,
+    //         taker: portalOrder.signedOrder.taker,
+    //         makerTokenAddress: portalOrder.signedOrder.makerTokenAddress,
+    //         takerTokenAddress: portalOrder.signedOrder.takerTokenAddress,
+    //         makerTokenAmount: new BigNumber(portalOrder.signedOrder.makerTokenAmount),
+    //         takerTokenAmount: new BigNumber(portalOrder.signedOrder.takerTokenAmount),
+    //         makerFee: new BigNumber(portalOrder.signedOrder.makerFee),
+    //         takerFee: new BigNumber(portalOrder.signedOrder.takerFee),
+    //         expirationUnixTimestampSec: new BigNumber(portalOrder.signedOrder.expirationUnixTimestampSec),
+    //         feeRecipient: portalOrder.signedOrder.feeRecipient,
+    //         ecSignature: portalOrder.signedOrder.ecSignature,
+    //         salt: new BigNumber(portalOrder.signedOrder.salt),
+    //     };
+    //     return zeroExSignedOrder;
+    // }
    public async fillOrderAsync(signedOrder: SignedOrder, fillTakerTokenAmount: BigNumber): Promise<BigNumber> {
        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
        utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
-
-        const shouldThrowOnInsufficientBalanceOrAllowance = true;
-
        this._showFlashMessageIfLedger();
        const txHash = await this._contractWrappers.exchange.fillOrderAsync(
            signedOrder,
            fillTakerTokenAmount,
-            shouldThrowOnInsufficientBalanceOrAllowance,
            this._userAddressIfExists,
            {
                gasPrice: this._defaultGasPrice,
            },
        );
        const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
-        const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any;
-        this._contractWrappers.exchange.throwLogErrorsAsErrors(logs);
-        const logFill = _.find(logs, { event: 'LogFill' });
-        const args = (logFill.args as any) as LogFillContractEventArgs;
-        const filledTakerTokenAmount = args.filledTakerTokenAmount;
-        return filledTakerTokenAmount;
+        const logs: Array<LogWithDecodedArgs<ExchangeEventArgs>> = receipt.logs as any;
+        // how to get errors from logs?
+        // this._contractWrappers.exchange.throwLogErrorsAsErrors(logs);
+        const logFill = _.find(logs, { event: ExchangeEvents.Fill });
+        const args = (logFill.args as any) as ExchangeFillEventArgs;
+        const takerAssetFilledAmount = args.takerAssetFilledAmount;
+        return takerAssetFilledAmount;
    }
-    public async cancelOrderAsync(signedOrder: SignedOrder, cancelTakerTokenAmount: BigNumber): Promise<BigNumber> {
+    public async cancelOrderAsync(signedOrder: SignedOrder): Promise<string> {
        this._showFlashMessageIfLedger();
-        const txHash = await this._contractWrappers.exchange.cancelOrderAsync(signedOrder, cancelTakerTokenAmount, {
+        const txHash = await this._contractWrappers.exchange.cancelOrderAsync(signedOrder, {
            gasPrice: this._defaultGasPrice,
        });
        const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
-        const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any;
-        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;
+        const logs: Array<LogWithDecodedArgs<ExchangeEventArgs>> = receipt.logs as any;
+        // how to get errors from logs?
+        // this._contractWrappers.exchange.throwLogErrorsAsErrors(logs);
+        const logCancel = _.find(logs, { event: ExchangeEvents.Cancel });
+        const args = (logCancel.args as any) as ExchangeCancelEventArgs;
+        const cancelledOrderHash = args.orderHash;
+        return cancelledOrderHash;
    }
    public async getUnavailableTakerAmountAsync(orderHash: string): Promise<BigNumber> {
-        utils.assert(isValidOrderHash(orderHash), 'Must be valid orderHash');
+        utils.assert(orderHashUtils.isValidOrderHash(orderHash), 'Must be valid orderHash');
        utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
-        const unavailableTakerAmount = await this._contractWrappers.exchange.getUnavailableTakerAmountAsync(orderHash);
+        const unavailableTakerAmount = await this._contractWrappers.exchange.getFilledTakerAssetAmountAsync(orderHash);
        return unavailableTakerAmount;
    }
    public getExchangeContractAddressIfExists(): string | undefined {
@@ -402,17 +396,19 @@ export class Blockchain {
        fillTakerTokenAmount: BigNumber,
        takerAddress: string,
    ): Promise<void> {
-        await this._contractWrappers.exchange.validateFillOrderThrowIfInvalidAsync(
-            signedOrder,
-            fillTakerTokenAmount,
-            takerAddress,
-        );
+        // we can use OrderValidationUtils here
+        // await this._contractWrappers.exchange.validateFillOrderThrowIfInvalidAsync(
+        //     signedOrder,
+        //     fillTakerTokenAmount,
+        //     takerAddress,
+        // );
    }
    public async validateCancelOrderThrowIfInvalidAsync(
        order: Order,
        cancelTakerTokenAmount: BigNumber,
    ): Promise<void> {
-        await this._contractWrappers.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount);
+        // we can use OrderValidationUtils here
+        // await this._contractWrappers.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount);
    }
    public isValidAddress(address: string): boolean {
        const lowercaseAddress = address.toLowerCase();
@@ -446,7 +442,7 @@ export class Blockchain {

        return newTokenBalancePromise;
    }
-    public async signOrderHashAsync(orderHash: string): Promise<ECSignature> {
+    public async signOrderHashAsync(orderHash: string): Promise<string> {
        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
@@ -454,20 +450,25 @@ export class Blockchain {
        if (_.isUndefined(makerAddress)) {
            throw new Error('Tried to send a sign request but user has no associated addresses');
        }
-
        this._showFlashMessageIfLedger();
-        const nodeVersion = await this._web3Wrapper.getNodeVersionAsync();
-        const isParityNode = utils.isParityNode(nodeVersion);
-        const isTestRpc = utils.isTestRpc(nodeVersion);
-        const isLedgerSigner = !_.isUndefined(this._ledgerSubprovider);
-        let shouldAddPersonalMessagePrefix = true;
-        if ((isParityNode && !isLedgerSigner) || isTestRpc || isLedgerSigner) {
-            shouldAddPersonalMessagePrefix = false;
-        }
+
        const provider = this._contractWrappers.getProvider();
-        const ecSignature = await signOrderHashAsync(provider, orderHash, makerAddress, shouldAddPersonalMessagePrefix);
-        this._dispatcher.updateECSignature(ecSignature);
-        return ecSignature;
+        const isLedgerSigner = !_.isUndefined(this._ledgerSubprovider);
+        const isMetaMaskSigner = utils.getProviderType(provider) === Providers.Metamask;
+        let signerType = SignerType.Default;
+        if (isLedgerSigner) {
+            signerType = SignerType.Ledger;
+        } else if (isMetaMaskSigner) {
+            signerType = SignerType.Metamask;
+        }
+        const ecSignatureString = await signatureUtils.ecSignOrderHashAsync(
+            provider,
+            orderHash,
+            makerAddress,
+            signerType,
+        );
+        this._dispatcher.updateSignature(ecSignatureString);
+        return ecSignatureString;
    }
    public async mintTestTokensAsync(token: Token): Promise<void> {
        utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
@@ -540,8 +541,8 @@ export class Blockchain {
        let allowance = new BigNumber(0);
        if (this._doesUserAddressExist()) {
            [balance, allowance] = await Promise.all([
-                this._contractWrappers.token.getBalanceAsync(tokenAddress, ownerAddressIfExists),
-                this._contractWrappers.token.getProxyAllowanceAsync(tokenAddress, ownerAddressIfExists),
+                this._contractWrappers.erc20Token.getBalanceAsync(tokenAddress, ownerAddressIfExists),
+                this._contractWrappers.erc20Token.getProxyAllowanceAsync(tokenAddress, ownerAddressIfExists),
            ]);
        }
        return [balance, allowance];
@@ -699,9 +700,9 @@ export class Blockchain {

        // Start a subscription for new logs
        this._contractWrappers.exchange.subscribe(
-            ExchangeEvents.LogFill,
+            ExchangeEvents.Fill,
            indexFilterValues,
-            async (err: Error, decodedLogEvent: DecodedLogEvent<LogFillContractEventArgs>) => {
+            async (err: Error, decodedLogEvent: DecodedLogEvent<ExchangeFillEventArgs>) => {
                if (err) {
                    // Note: it's not entirely clear from the documentation which
                    // errors will be thrown by `watch`. For now, let's log the error
@@ -732,8 +733,8 @@ export class Blockchain {
            fromBlock,
            toBlock: 'latest' as BlockParam,
        };
-        const decodedLogs = await this._contractWrappers.exchange.getLogsAsync<LogFillContractEventArgs>(
-            ExchangeEvents.LogFill,
+        const decodedLogs = await this._contractWrappers.exchange.getLogsAsync<ExchangeFillEventArgs>(
+            ExchangeEvents.Fill,
            blockRange,
            indexFilterValues,
        );
@@ -746,28 +747,28 @@ export class Blockchain {
            tradeHistoryStorage.addFillToUser(this._userAddressIfExists, this.networkId, fill);
        }
    }
-    private async _convertDecodedLogToFillAsync(
-        decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>,
-    ): Promise<Fill> {
+    private async _convertDecodedLogToFillAsync(decodedLog: LogWithDecodedArgs<ExchangeFillEventArgs>): Promise<Fill> {
        const args = decodedLog.args;
        const blockTimestamp = await this._web3Wrapper.getBlockTimestampAsync(decodedLog.blockHash);
+        const makerToken = assetDataUtils.decodeERC20AssetData(args.makerAssetData).tokenAddress;
+        const takerToken = assetDataUtils.decodeERC20AssetData(args.takerAssetData).tokenAddress;
        const fill = {
-            filledTakerTokenAmount: args.filledTakerTokenAmount,
-            filledMakerTokenAmount: args.filledMakerTokenAmount,
+            filledTakerTokenAmount: args.takerAssetFilledAmount,
+            filledMakerTokenAmount: args.makerAssetFilledAmount,
            logIndex: decodedLog.logIndex,
-            maker: args.maker,
+            maker: args.makerAddress,
            orderHash: args.orderHash,
-            taker: args.taker,
-            makerToken: args.makerToken,
-            takerToken: args.takerToken,
-            paidMakerFee: args.paidMakerFee,
-            paidTakerFee: args.paidTakerFee,
+            taker: args.takerAddress,
+            makerToken,
+            takerToken,
+            paidMakerFee: args.makerFeePaid,
+            paidTakerFee: args.takerFeePaid,
            transactionHash: decodedLog.transactionHash,
            blockTimestamp,
        };
        return fill;
    }
-    private _doesLogEventInvolveUser(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>): boolean {
+    private _doesLogEventInvolveUser(decodedLog: LogWithDecodedArgs<ExchangeFillEventArgs>): boolean {
        const args = decodedLog.args;
        const isUserMakerOrTaker = args.maker === this._userAddressIfExists || args.taker === this._userAddressIfExists;
        return isUserMakerOrTaker;
@@ -796,8 +797,10 @@ export class Blockchain {
        if (this.networkId === constants.NETWORK_ID_MAINNET) {
            tokenRegistryTokens = await backendClient.getTokenInfosAsync();
        } else {
-            utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
-            tokenRegistryTokens = await this._contractWrappers.tokenRegistry.getTokensAsync();
+            // get rid of token registry
+            // utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.');
+            // tokenRegistryTokens = await this._contractWrappers.tokenRegistry.getTokensAsync();
+            tokenRegistryTokens = [] as ZeroExToken[];
        }
        const tokenByAddress: TokenByAddress = {};
        _.each(tokenRegistryTokens, (t: ZeroExToken) => {
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,4 +1,4 @@
-import { getOrderHashHex, isValidSignature } from '@0xproject/order-utils';
+import { assetDataUtils, orderHashUtils, signatureUtils } from '@0xproject/order-utils';
 import { colors } from '@0xproject/react-shared';
 import { Order as ZeroExOrder } from '@0xproject/types';
 import { BigNumber, logUtils } from '@0xproject/utils';
@@ -22,7 +22,7 @@ import { VisualOrder } from 'ts/components/visual_order';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
 import { validator } from 'ts/schemas/validator';
-import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, WebsitePaths } from 'ts/types';
+import { AlertTypes, BlockchainErrs, PortalOrder, Token, TokenByAddress, WebsitePaths } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
@@ -36,7 +36,7 @@ interface FillOrderProps {
    networkId: number;
    userAddress: string;
    tokenByAddress: TokenByAddress;
-    initialOrder: Order;
+    initialOrder: PortalOrder;
    dispatcher: Dispatcher;
    lastForceTokenStateRefetch: number;
    isFullWidth?: boolean;
@@ -49,7 +49,7 @@ interface FillOrderState {
    globalErrMsg: string;
    orderJSON: string;
    orderJSONErrMsg: string;
-    parsedOrder: Order;
+    parsedOrder: PortalOrder;
    didFillOrderSucceed: boolean;
    didCancelOrderSucceed: boolean;
    unavailableTakerAmount: BigNumber;
@@ -191,16 +191,18 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
        );
    }
    private _renderVisualOrder(): React.ReactNode {
-        const takerTokenAddress = this.state.parsedOrder.signedOrder.takerTokenAddress;
+        const takerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.takerAssetData)
+            .tokenAddress;
        const takerToken = this.props.tokenByAddress[takerTokenAddress];
-        const orderTakerAmount = new BigNumber(this.state.parsedOrder.signedOrder.takerTokenAmount);
-        const orderMakerAmount = new BigNumber(this.state.parsedOrder.signedOrder.makerTokenAmount);
+        const orderTakerAmount = this.state.parsedOrder.signedOrder.takerAssetAmount;
+        const orderMakerAmount = this.state.parsedOrder.signedOrder.makerAssetAmount;
        const takerAssetToken = {
            amount: orderTakerAmount.minus(this.state.unavailableTakerAmount),
            symbol: takerToken.symbol,
        };
        const fillToken = this.props.tokenByAddress[takerTokenAddress];
-        const makerTokenAddress = this.state.parsedOrder.signedOrder.makerTokenAddress;
+        const makerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.makerAssetData)
+            .tokenAddress;
        const makerToken = this.props.tokenByAddress[makerTokenAddress];
        const makerAssetToken = {
            amount: orderMakerAmount.times(takerAssetToken.amount).div(orderTakerAmount),
@@ -210,7 +212,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
            amount: this.props.orderFillAmount,
            symbol: takerToken.symbol,
        };
-        const parsedOrderExpiration = new BigNumber(this.state.parsedOrder.signedOrder.expirationUnixTimestampSec);
+        const parsedOrderExpiration = this.state.parsedOrder.signedOrder.expirationTimeSeconds;

        let orderReceiveAmount = 0;
        if (!_.isUndefined(this.props.orderFillAmount)) {
@@ -222,7 +224,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
        }
        const isUserMaker =
            !_.isUndefined(this.state.parsedOrder) &&
-            this.state.parsedOrder.signedOrder.maker === this.props.userAddress;
+            this.state.parsedOrder.signedOrder.makerAddress === this.props.userAddress;
        const expiryDate = utils.convertToReadableDateTimeFromUnixTimestamp(parsedOrderExpiration);
        return (
            <div className="pt3 pb1">
@@ -233,11 +235,11 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                            Maker:
                        </div>
                        <div className="col col-2 pr1">
-                            <Identicon address={this.state.parsedOrder.signedOrder.maker} diameter={23} />
+                            <Identicon address={this.state.parsedOrder.signedOrder.makerAddress} diameter={23} />
                        </div>
                        <div className="col col-6">
                            <EthereumAddress
-                                address={this.state.parsedOrder.signedOrder.maker}
+                                address={this.state.parsedOrder.signedOrder.makerAddress}
                                networkId={this.props.networkId}
                            />
                        </div>
@@ -367,17 +369,19 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
        if (!_.isEmpty(this.state.orderJSONErrMsg)) {
            return;
        }
-
-        const makerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.signedOrder.makerTokenAddress];
-        const takerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.signedOrder.takerTokenAddress];
-
+        const makerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.makerAssetData)
+            .tokenAddress;
+        const takerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.takerAssetData)
+            .tokenAddress;
+        const makerTokenIfExists = this.props.tokenByAddress[makerTokenAddress];
+        const takerTokenIfExists = this.props.tokenByAddress[takerTokenAddress];
        const tokensToTrack: Token[] = [];
        const isUnseenMakerToken = _.isUndefined(makerTokenIfExists);
        const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && utils.isTokenTracked(makerTokenIfExists);
        if (isUnseenMakerToken) {
            tokensToTrack.push({
                ...this.state.parsedOrder.metadata.makerToken,
-                address: this.state.parsedOrder.signedOrder.makerTokenAddress,
+                address: makerTokenAddress,
                iconUrl: undefined,
                trackedTimestamp: undefined,
                isRegistered: false,
@@ -390,7 +394,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
        if (isUnseenTakerToken) {
            tokensToTrack.push({
                ...this.state.parsedOrder.metadata.takerToken,
-                address: this.state.parsedOrder.signedOrder.takerTokenAddress,
+                address: takerTokenAddress,
                iconUrl: undefined,
                trackedTimestamp: undefined,
                isRegistered: false,
@@ -411,7 +415,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
    }
    private async _validateFillOrderFireAndForgetAsync(orderJSON: string): Promise<void> {
        let orderJSONErrMsg = '';
-        let parsedOrder: Order;
+        let parsedOrder: PortalOrder;
        let orderHash: string;
        try {
            const order = JSON.parse(orderJSON);
@@ -422,36 +426,32 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                return;
            }
            parsedOrder = order;
-
-            const makerAmount = new BigNumber(parsedOrder.signedOrder.makerTokenAmount);
-            const takerAmount = new BigNumber(parsedOrder.signedOrder.takerTokenAmount);
-            const expiration = new BigNumber(parsedOrder.signedOrder.expirationUnixTimestampSec);
-            const salt = new BigNumber(parsedOrder.signedOrder.salt);
-            const parsedMakerFee = new BigNumber(parsedOrder.signedOrder.makerFee);
-            const parsedTakerFee = new BigNumber(parsedOrder.signedOrder.takerFee);
-
+            const signedOrder = parsedOrder.signedOrder;
            const zeroExOrder: ZeroExOrder = {
-                exchangeContractAddress: parsedOrder.signedOrder.exchangeContractAddress,
-                expirationUnixTimestampSec: expiration,
-                feeRecipient: parsedOrder.signedOrder.feeRecipient,
-                maker: parsedOrder.signedOrder.maker,
-                makerFee: parsedMakerFee,
-                makerTokenAddress: parsedOrder.signedOrder.makerTokenAddress,
-                makerTokenAmount: makerAmount,
-                salt,
-                taker: _.isEmpty(parsedOrder.signedOrder.taker)
-                    ? constants.NULL_ADDRESS
-                    : parsedOrder.signedOrder.taker,
-                takerFee: parsedTakerFee,
-                takerTokenAddress: parsedOrder.signedOrder.takerTokenAddress,
-                takerTokenAmount: takerAmount,
+                exchangeAddress: signedOrder.exchangeAddress,
+                expirationTimeSeconds: signedOrder.expirationTimeSeconds,
+                feeRecipientAddress: signedOrder.feeRecipientAddress,
+                makerAddress: signedOrder.makerAddress,
+                makerFee: signedOrder.makerFee,
+                makerAssetData: signedOrder.makerAssetData,
+                makerAssetAmount: signedOrder.makerAssetAmount,
+                salt: signedOrder.salt,
+                takerAddress: _.isEmpty(signedOrder.takerAddress) ? constants.NULL_ADDRESS : signedOrder.takerAddress,
+                takerFee: signedOrder.takerFee,
+                takerAssetData: signedOrder.takerAssetData,
+                takerAssetAmount: signedOrder.takerAssetAmount,
+                senderAddress: signedOrder.senderAddress,
            };
-            orderHash = getOrderHashHex(zeroExOrder);
-
+            orderHash = orderHashUtils.getOrderHashHex(zeroExOrder);
            const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
-            const signature = parsedOrder.signedOrder.ecSignature;
-            const isSignatureValid = isValidSignature(orderHash, signature, parsedOrder.signedOrder.maker);
-            if (exchangeContractAddr !== parsedOrder.signedOrder.exchangeContractAddress) {
+            const signature = signedOrder.signature;
+            const ecSignature = signatureUtils.parseECSignature(signature);
+            const isSignatureValid = signatureUtils.isValidECSignature(
+                orderHash,
+                ecSignature,
+                signedOrder.makerAddress,
+            );
+            if (exchangeContractAddr !== signedOrder.exchangeAddress) {
                orderJSONErrMsg = 'This order was made on another network or using a deprecated Exchange contract';
                parsedOrder = undefined;
            } else if (!isSignatureValid) {
@@ -484,11 +484,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
            this.props.dispatcher.updateUserSuppliedOrderCache(undefined);
        } else {
            unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
+            const makerTokenAddress = assetDataUtils.decodeERC20AssetData(parsedOrder.signedOrder.makerAssetData)
+                .tokenAddress;
+            const takerTokenAddress = assetDataUtils.decodeERC20AssetData(parsedOrder.signedOrder.takerAssetData)
+                .tokenAddress;
            const isMakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync(
-                parsedOrder.signedOrder.makerTokenAddress,
+                makerTokenAddress,
            );
            const isTakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync(
-                parsedOrder.signedOrder.takerTokenAddress,
+                takerTokenAddress,
            );
            this.setState({
                isMakerTokenAddressInRegistry,
@@ -537,7 +541,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
            globalErrMsg = 'You must specify a fill amount';
        }

-        const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder);
+        const signedOrder = parsedOrder.signedOrder;
        if (_.isEmpty(globalErrMsg)) {
            try {
                await this.props.blockchain.validateFillOrderThrowIfInvalidAsync(
@@ -546,7 +550,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                    this.props.userAddress,
                );
            } catch (err) {
-                globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.taker);
+                globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.takerAddress);
            }
        }
        if (!_.isEmpty(globalErrMsg)) {
@@ -611,17 +615,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
            return;
        }
        let globalErrMsg = '';
-
-        const takerTokenAmount = new BigNumber(parsedOrder.signedOrder.takerTokenAmount);
-
-        const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder);
-        const orderHash = getOrderHashHex(signedOrder);
+        const signedOrder = parsedOrder.signedOrder;
+        const takerTokenAmount = signedOrder.takerAssetAmount;
+        const orderHash = orderHashUtils.getOrderHashHex(signedOrder);
        const unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
        const availableTakerTokenAmount = takerTokenAmount.minus(unavailableTakerAmount);
        try {
            await this.props.blockchain.validateCancelOrderThrowIfInvalidAsync(signedOrder, availableTakerTokenAmount);
        } catch (err) {
-            globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.taker);
+            globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.takerAddress);
        }
        if (!_.isEmpty(globalErrMsg)) {
            this.setState({
@@ -631,7 +633,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
            return;
        }
        try {
-            await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount);
+            await this.props.blockchain.cancelOrderAsync(signedOrder);
            this.setState({
                isCancelling: false,
                didCancelOrderSucceed: true,
--- a/packages/website/ts/components/fill_order_json.tsx
+++ b/packages/website/ts/components/fill_order_json.tsx
@@ -33,11 +33,7 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
            },
        };
        const hintOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
-        const hintECSignature = {
-            r: '0xf01103f759e2289a28593eaf22e5820032...',
-            s: '937862111edcba395f8a9e0cc1b2c5e12320...',
-            v: 27,
-        };
+        const hintECSignature = '0x012761a3ed31b43c8780e905a260a35faefcc527be7516aa11c0256729b5b351bc33';
        const hintSalt = generatePseudoRandomSalt();
        const feeRecipient = constants.NULL_ADDRESS;
        const hintOrder = utils.generateOrder(
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -1,4 +1,4 @@
-import { generatePseudoRandomSalt, getOrderHashHex } from '@0xproject/order-utils';
+import { assetDataUtils, generatePseudoRandomSalt, orderHashUtils } from '@0xproject/order-utils';
 import { colors } from '@0xproject/react-shared';
 import { ECSignature, Order as ZeroExOrder } from '@0xproject/types';
 import { BigNumber, logUtils } from '@0xproject/utils';
@@ -20,7 +20,16 @@ import { SwapIcon } from 'ts/components/ui/swap_icon';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
 import { validator } from 'ts/schemas/validator';
-import { AlertTypes, BlockchainErrs, HashData, Order, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
+import {
+    AlertTypes,
+    BlockchainErrs,
+    HashData,
+    PortalOrder,
+    Side,
+    SideToAssetToken,
+    Token,
+    TokenByAddress,
+} from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
@@ -41,7 +50,7 @@ interface GenerateOrderFormProps {
    orderExpiryTimestamp: BigNumber;
    networkId: number;
    userAddress: string;
-    orderECSignature: ECSignature;
+    orderSignature: string;
    orderTakerAddress: string;
    orderSalt: BigNumber;
    sideToAssetToken: SideToAssetToken;
@@ -212,7 +221,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                    <OrderJSON
                        exchangeContractIfExists={exchangeContractIfExists}
                        orderExpiryTimestamp={this.props.orderExpiryTimestamp}
-                        orderECSignature={this.props.orderECSignature}
+                        orderSignature={this.props.orderSignature}
                        orderTakerAddress={this.props.orderTakerAddress}
                        orderMakerAddress={this.props.userAddress}
                        orderSalt={this.props.orderSalt}
@@ -294,12 +303,12 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
            return false;
        }
    }
-    private async _signTransactionAsync(): Promise<Order | undefined> {
+    private async _signTransactionAsync(): Promise<PortalOrder | undefined> {
        this.setState({
            signingState: SigningState.SIGNING,
        });
-        const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
-        if (_.isUndefined(exchangeContractAddr)) {
+        const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists();
+        if (_.isUndefined(exchangeAddress)) {
            this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
            this.setState({
                signingState: SigningState.UNSIGNED,
@@ -308,28 +317,31 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
        }
        const hashData = this.props.hashData;

+        const makerAssetData = assetDataUtils.encodeERC20AssetData(hashData.depositTokenContractAddr);
+        const takerAssetData = assetDataUtils.encodeERC20AssetData(hashData.receiveTokenContractAddr);
        const zeroExOrder: ZeroExOrder = {
-            exchangeContractAddress: exchangeContractAddr,
-            expirationUnixTimestampSec: hashData.orderExpiryTimestamp,
-            feeRecipient: hashData.feeRecipientAddress,
-            maker: hashData.orderMakerAddress,
+            senderAddress: constants.NULL_ADDRESS,
+            exchangeAddress,
+            expirationTimeSeconds: hashData.orderExpiryTimestamp,
+            feeRecipientAddress: hashData.feeRecipientAddress,
+            makerAddress: hashData.orderMakerAddress,
            makerFee: hashData.makerFee,
-            makerTokenAddress: hashData.depositTokenContractAddr,
-            makerTokenAmount: hashData.depositAmount,
+            makerAssetData,
+            makerAssetAmount: hashData.depositAmount,
            salt: hashData.orderSalt,
-            taker: hashData.orderTakerAddress,
+            takerAddress: hashData.orderTakerAddress,
            takerFee: hashData.takerFee,
-            takerTokenAddress: hashData.receiveTokenContractAddr,
-            takerTokenAmount: hashData.receiveAmount,
+            takerAssetData: hashData.receiveTokenContractAddr,
+            takerAssetAmount: hashData.receiveAmount,
        };
-        const orderHash = getOrderHashHex(zeroExOrder);
+        const orderHash = orderHashUtils.getOrderHashHex(zeroExOrder);

        let globalErrMsg = '';
        let order;
        try {
            const ecSignature = await this.props.blockchain.signOrderHashAsync(orderHash);
            order = utils.generateOrder(
-                exchangeContractAddr,
+                exchangeAddress,
                this.props.sideToAssetToken,
                hashData.orderExpiryTimestamp,
                this.props.orderTakerAddress,
--- a/packages/website/ts/components/inputs/hash_input.tsx
+++ b/packages/website/ts/components/inputs/hash_input.tsx
@@ -1,9 +1,10 @@
-import { getOrderHashHex } from '@0xproject/order-utils';
+import { assetDataUtils, orderHashUtils } 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');
+
 import { Blockchain } from 'ts/blockchain';
 import { FakeTextField } from 'ts/components/ui/fake_text_field';
 import { HashData } from 'ts/types';
@@ -42,23 +43,26 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> {
        );
    }
    private _generateMessageHashHex(): string {
-        const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists();
+        const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists();
        const hashData = this.props.hashData;
+        const makerAssetData = assetDataUtils.encodeERC20AssetData(hashData.depositTokenContractAddr);
+        const takerAssetData = assetDataUtils.encodeERC20AssetData(hashData.receiveTokenContractAddr);
        const order: Order = {
-            exchangeContractAddress,
-            expirationUnixTimestampSec: hashData.orderExpiryTimestamp,
-            feeRecipient: hashData.feeRecipientAddress,
-            maker: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress,
+            senderAddress: constants.NULL_ADDRESS,
+            exchangeAddress,
+            expirationTimeSeconds: hashData.orderExpiryTimestamp,
+            feeRecipientAddress: hashData.feeRecipientAddress,
+            makerAddress: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress,
            makerFee: hashData.makerFee,
-            makerTokenAddress: hashData.depositTokenContractAddr,
-            makerTokenAmount: hashData.depositAmount,
+            makerAssetData,
+            makerAssetAmount: hashData.depositAmount,
            salt: hashData.orderSalt,
-            taker: hashData.orderTakerAddress,
+            takerAddress: hashData.orderTakerAddress,
            takerFee: hashData.takerFee,
-            takerTokenAddress: hashData.receiveTokenContractAddr,
-            takerTokenAmount: hashData.receiveAmount,
+            takerAssetData,
+            takerAssetAmount: hashData.receiveAmount,
        };
-        const orderHash = getOrderHashHex(order);
+        const orderHash = orderHashUtils.getOrderHashHex(order);
        return orderHash;
    }
 }
--- a/packages/website/ts/components/order_json.tsx
+++ b/packages/website/ts/components/order_json.tsx
@@ -14,7 +14,7 @@ import { utils } from 'ts/utils/utils';
 interface OrderJSONProps {
    exchangeContractIfExists: string;
    orderExpiryTimestamp: BigNumber;
-    orderECSignature: ECSignature;
+    orderSignature: string;
    orderTakerAddress: string;
    orderMakerAddress: string;
    orderSalt: BigNumber;
@@ -48,7 +48,7 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> {
            this.props.orderMakerFee,
            this.props.orderTakerFee,
            this.props.orderFeeRecipient,
-            this.props.orderECSignature,
+            this.props.orderSignature,
            this.props.tokenByAddress,
            this.props.orderSalt,
        );
@@ -169,7 +169,7 @@ You can see and fill it here: ${this.state.shareLink}`);
            this.props.orderMakerFee,
            this.props.orderTakerFee,
            this.props.orderFeeRecipient,
-            this.props.orderECSignature,
+            this.props.orderSignature,
            this.props.tokenByAddress,
            this.props.orderSalt,
        );
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -39,7 +39,7 @@ import {
    BlockchainErrs,
    HashData,
    ItemByAddress,
-    Order,
+    PortalOrder,
    ProviderType,
    ScreenWidths,
    Token,
@@ -71,7 +71,7 @@ export interface PortalProps {
    userEtherBalanceInWei?: BigNumber;
    userAddress: string;
    shouldBlockchainErrDialogBeOpen: boolean;
-    userSuppliedOrderCache: Order;
+    userSuppliedOrderCache: PortalOrder;
    location: Location;
    flashMessage?: string | React.ReactNode;
    lastForceTokenStateRefetch: number;
@@ -114,7 +114,7 @@ const DOCUMENT_DESCRIPTION = 'Learn about and trade on 0x Relayers';

 export class Portal extends React.Component<PortalProps, PortalState> {
    private _blockchain: Blockchain;
-    private readonly _sharedOrderIfExists: Order;
+    private readonly _sharedOrderIfExists: PortalOrder;
    private readonly _throttledScreenWidthUpdate: () => void;
    constructor(props: PortalProps) {
        super(props);
--- a/packages/website/ts/containers/generate_order_form.ts
+++ b/packages/website/ts/containers/generate_order_form.ts
@@ -20,7 +20,7 @@ interface ConnectedState {
    blockchainErr: BlockchainErrs;
    blockchainIsLoaded: boolean;
    orderExpiryTimestamp: BigNumber;
-    orderECSignature: ECSignature;
+    orderSignature: string;
    userAddress: string;
    orderTakerAddress: string;
    orderSalt: BigNumber;
@@ -34,7 +34,7 @@ const mapStateToProps = (state: State, _ownProps: GenerateOrderFormProps): Conne
    blockchainErr: state.blockchainErr,
    blockchainIsLoaded: state.blockchainIsLoaded,
    orderExpiryTimestamp: state.orderExpiryTimestamp,
-    orderECSignature: state.orderECSignature,
+    orderSignature: state.orderSignature,
    orderTakerAddress: state.orderTakerAddress,
    orderSalt: state.orderSalt,
    networkId: state.networkId,
--- a/packages/website/ts/containers/portal.ts
+++ b/packages/website/ts/containers/portal.ts
@@ -6,7 +6,7 @@ import { Dispatch } from 'redux';
 import { Portal as PortalComponent, PortalProps as PortalComponentProps } from 'ts/components/portal/portal';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { State } from 'ts/redux/reducer';
-import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, Side, TokenByAddress } from 'ts/types';
+import { BlockchainErrs, HashData, PortalOrder, ProviderType, ScreenWidths, Side, TokenByAddress } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';

@@ -25,7 +25,7 @@ interface ConnectedState {
    screenWidth: ScreenWidths;
    shouldBlockchainErrDialogBeOpen: boolean;
    userAddress: string;
-    userSuppliedOrderCache: Order;
+    userSuppliedOrderCache: PortalOrder;
    flashMessage?: string | React.ReactNode;
    translate: Translate;
    isPortalOnboardingShowing: boolean;
--- a/packages/website/ts/redux/dispatcher.ts
+++ b/packages/website/ts/redux/dispatcher.ts
@@ -7,7 +7,7 @@ import {
    AssetToken,
    BlockchainErrs,
    Language,
-    Order,
+    PortalOrder,
    ProviderType,
    ScreenWidths,
    Side,
@@ -50,7 +50,7 @@ export class Dispatcher {
            type: ActionTypes.UpdateOrderSalt,
        });
    }
-    public updateUserSuppliedOrderCache(order: Order): void {
+    public updateUserSuppliedOrderCache(order: PortalOrder): void {
        this._dispatch({
            data: order,
            type: ActionTypes.UpdateUserSuppliedOrderCache,
@@ -149,10 +149,10 @@ export class Dispatcher {
            type: ActionTypes.ForceTokenStateRefetch,
        });
    }
-    public updateECSignature(ecSignature: ECSignature): void {
+    public updateSignature(signature: string): void {
        this._dispatch({
-            data: ecSignature,
-            type: ActionTypes.UpdateOrderECSignature,
+            data: signature,
+            type: ActionTypes.UpdateOrderSignature,
        });
    }
    public updateUserWeiBalance(balance?: BigNumber): void {
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -7,7 +7,7 @@ import {
    Action,
    ActionTypes,
    BlockchainErrs,
-    Order,
+    PortalOrder,
    ProviderType,
    ScreenWidths,
    Side,
@@ -31,7 +31,7 @@ export interface State {
    orderExpiryTimestamp: BigNumber;
    orderFillAmount: BigNumber;
    orderTakerAddress: string;
-    orderECSignature: ECSignature;
+    orderSignature: string;
    orderSalt: BigNumber;
    nodeVersion: string;
    screenWidth: ScreenWidths;
@@ -45,7 +45,7 @@ export interface State {
    isPortalOnboardingShowing: boolean;
    hasPortalOnboardingBeenClosed: boolean;
    // Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
-    userSuppliedOrderCache: Order;
+    userSuppliedOrderCache: PortalOrder;

    // Docs
    docsVersion: string;
@@ -65,11 +65,7 @@ export const INITIAL_STATE: State = {
    networkId: undefined,
    orderExpiryTimestamp: utils.initialOrderExpiryUnixTimestampSec(),
    orderFillAmount: undefined,
-    orderECSignature: {
-        r: '',
-        s: '',
-        v: 27,
-    },
+    orderSignature: '',
    orderTakerAddress: constants.NULL_ADDRESS,
    orderSalt: generatePseudoRandomSalt(),
    nodeVersion: undefined,
@@ -90,7 +86,6 @@ export const INITIAL_STATE: State = {
    // Docs
    docsVersion: DEFAULT_DOCS_VERSION,
    availableDocVersions: [DEFAULT_DOCS_VERSION],
-
    // Shared
    flashMessage: undefined,
    providerType: ProviderType.Injected,
@@ -207,10 +202,10 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
                lastForceTokenStateRefetch: moment().unix(),
            };

-        case ActionTypes.UpdateOrderECSignature: {
+        case ActionTypes.UpdateOrderSignature: {
            return {
                ...state,
-                orderECSignature: action.data,
+                orderSignature: action.data,
            };
        }

--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -1,4 +1,4 @@
-import { ECSignature } from '@0xproject/types';
+import { ECSignature, SignedOrder } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import { Provider } from 'ethereum-types';
 import * as React from 'react';
@@ -56,28 +56,12 @@ export interface OrderToken {
    decimals: number;
 }

-export interface SignedOrder {
-    maker: string;
-    taker: string;
-    makerTokenAddress: string;
-    takerTokenAddress: string;
-    makerFee: string;
-    takerFee: string;
-    makerTokenAmount: string;
-    takerTokenAmount: string;
-    expirationUnixTimestampSec: string;
-    feeRecipient: string;
-    salt: string;
-    ecSignature: ECSignature;
-    exchangeContractAddress: string;
-}
-
 export interface OrderMetadata {
    makerToken: OrderToken;
    takerToken: OrderToken;
 }

-export interface Order {
+export interface PortalOrder {
    signedOrder: SignedOrder;
    metadata: OrderMetadata;
 }
@@ -120,7 +104,7 @@ export enum ActionTypes {
    UpdateChosenAssetTokenAddress = 'UPDATE_CHOSEN_ASSET_TOKEN_ADDRESS',
    UpdateOrderTakerAddress = 'UPDATE_ORDER_TAKER_ADDRESS',
    UpdateOrderSalt = 'UPDATE_ORDER_SALT',
-    UpdateOrderECSignature = 'UPDATE_ORDER_EC_SIGNATURE',
+    UpdateOrderSignature = 'UPDATE_ORDER_SIGNATURE',
    UpdateTokenByAddress = 'UPDATE_TOKEN_BY_ADDRESS',
    RemoveTokenFromTokenByAddress = 'REMOVE_TOKEN_FROM_TOKEN_BY_ADDRESS',
    ForceTokenStateRefetch = 'FORCE_TOKEN_STATE_REFETCH',
--- a/packages/website/ts/utils/analytics.ts
+++ b/packages/website/ts/utils/analytics.ts
@@ -1,5 +1,6 @@
+import { assetDataUtils } from '@0xproject/order-utils';
 import * as _ from 'lodash';
-import { ObjectMap, Order } from 'ts/types';
+import { ObjectMap, PortalOrder } from 'ts/types';
 import { utils } from 'ts/utils/utils';

 export interface HeapAnalytics {
@@ -53,12 +54,16 @@ export class Analytics {
    }
    // tslint:enable:no-floating-promises
    // Custom methods
-    public trackOrderEvent(eventName: string, order: Order): void {
+    public trackOrderEvent(eventName: string, order: PortalOrder): void {
+        const takerTokenAmount = order.signedOrder.takerAssetAmount.toString();
+        const makerTokenAmount = order.signedOrder.makerAssetAmount.toString();
+        const takerToken = assetDataUtils.decodeERC20AssetData(order.signedOrder.takerAssetData).tokenAddress;
+        const makerToken = assetDataUtils.decodeERC20AssetData(order.signedOrder.makerAssetData).tokenAddress;
        const orderLoggingData = {
-            takerTokenAmount: order.signedOrder.takerTokenAmount,
-            makeTokenAmount: order.signedOrder.makerTokenAmount,
-            takerToken: order.metadata.takerToken.symbol,
-            makerToken: order.metadata.makerToken.symbol,
+            takerTokenAmount,
+            makerTokenAmount,
+            takerToken,
+            makerToken,
        };
        this.track(eventName, orderLoggingData);
    }
--- a/packages/website/ts/utils/order_parser.ts
+++ b/packages/website/ts/utils/order_parser.ts
@@ -1,12 +1,12 @@
-import { logUtils } from '@0xproject/utils';
+import { BigNumber, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';

 import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
 import { validator } from 'ts/schemas/validator';
-import { Order } from 'ts/types';
+import { PortalOrder } from 'ts/types';

 export const orderParser = {
-    parse(queryString: string): Order | undefined {
+    parse(queryString: string): PortalOrder | undefined {
        if (queryString.length === 0) {
            return undefined;
        }
@@ -28,6 +28,33 @@ export const orderParser = {
            logUtils.log(`Invalid shared order: ${validationResult.errors}`);
            return undefined;
        }
-        return order;
+        const result = convertOrderStringFieldsToBigNumber(order);
+        return result;
    },
 };
+
+// TODO: consolidate this function with that in typeConverters in @0xproject/connect
+function convertOrderStringFieldsToBigNumber(order: any): any {
+    return convertStringsFieldsToBigNumbers(order, [
+        'makerAssetAmount',
+        'takerAssetAmount',
+        'makerFee',
+        'takerFee',
+        'expirationTimeSeconds',
+        'salt',
+    ]);
+}
+
+// TODO: consolidate this function with that in typeConverters in @0xproject/connect
+function convertStringsFieldsToBigNumbers(obj: any, fields: string[]): any {
+    const result = _.assign({}, obj);
+    _.each(fields, field => {
+        _.update(result, field, (value: string) => {
+            if (_.isUndefined(value)) {
+                throw new Error(`Could not find field '${field}' while converting string fields to BigNumber.`);
+            }
+            return new BigNumber(value);
+        });
+    });
+    return result;
+}
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -1,11 +1,12 @@
-import { ContractWrappersError, ExchangeContractErrs } from '@0xproject/contract-wrappers';
-import { OrderError } from '@0xproject/order-utils';
+import { ContractWrappersError } from '@0xproject/contract-wrappers';
+import { assetDataUtils, OrderError, signatureUtils } from '@0xproject/order-utils';
 import { constants as sharedConstants, Networks } from '@0xproject/react-shared';
-import { ECSignature, Provider } from '@0xproject/types';
+import { ECSignature, ExchangeContractErrs } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as bowser from 'bowser';
 import deepEqual = require('deep-equal');
+import { Provider } from 'ethereum-types';
 import * as _ from 'lodash';
 import * as moment from 'moment';
 import * as numeral from 'numeral';
@@ -16,7 +17,7 @@ import {
    BrowserType,
    Environments,
    OperatingSystemType,
-    Order,
+    PortalOrder,
    Providers,
    ProviderType,
    ScreenWidths,
@@ -64,35 +65,36 @@ export const utils = {
        return formattedDate;
    },
    generateOrder(
-        exchangeContractAddress: string,
+        exchangeAddress: string,
        sideToAssetToken: SideToAssetToken,
-        expirationUnixTimestampSec: BigNumber,
+        expirationTimeSeconds: BigNumber,
        orderTakerAddress: string,
        orderMakerAddress: string,
        makerFee: BigNumber,
        takerFee: BigNumber,
-        feeRecipient: string,
-        ecSignature: ECSignature,
+        feeRecipientAddress: string,
+        signature: string,
        tokenByAddress: TokenByAddress,
        orderSalt: BigNumber,
-    ): Order {
+    ): PortalOrder {
        const makerToken = tokenByAddress[sideToAssetToken[Side.Deposit].address];
        const takerToken = tokenByAddress[sideToAssetToken[Side.Receive].address];
        const order = {
            signedOrder: {
-                maker: orderMakerAddress,
-                taker: orderTakerAddress,
-                makerFee: makerFee.toString(),
-                takerFee: takerFee.toString(),
-                makerTokenAmount: sideToAssetToken[Side.Deposit].amount.toString(),
-                takerTokenAmount: sideToAssetToken[Side.Receive].amount.toString(),
-                makerTokenAddress: makerToken.address,
-                takerTokenAddress: takerToken.address,
-                expirationUnixTimestampSec: expirationUnixTimestampSec.toString(),
-                feeRecipient,
-                salt: orderSalt.toString(),
-                ecSignature,
-                exchangeContractAddress,
+                senderAddress: constants.NULL_ADDRESS,
+                makerAddress: orderMakerAddress,
+                takerAddress: orderTakerAddress,
+                makerFee,
+                takerFee,
+                makerAssetAmount: sideToAssetToken[Side.Deposit].amount,
+                takerAssetAmount: sideToAssetToken[Side.Receive].amount,
+                makerAssetData: assetDataUtils.encodeERC20AssetData(makerToken.address),
+                takerAssetData: assetDataUtils.encodeERC20AssetData(takerToken.address),
+                expirationTimeSeconds,
+                feeRecipientAddress,
+                salt: orderSalt,
+                signature,
+                exchangeAddress,
            },
            metadata: {
                makerToken: {
@@ -231,10 +233,10 @@ export const utils = {
        const ContractWrappersErrorToHumanReadableError: { [error: string]: string } = {
            [ContractWrappersError.ExchangeContractDoesNotExist]: 'Exchange contract does not exist',
            [ContractWrappersError.EtherTokenContractDoesNotExist]: 'EtherToken contract does not exist',
-            [ContractWrappersError.TokenTransferProxyContractDoesNotExist]:
-                'TokenTransferProxy contract does not exist',
-            [ContractWrappersError.TokenRegistryContractDoesNotExist]: 'TokenRegistry contract does not exist',
-            [ContractWrappersError.TokenContractDoesNotExist]: 'Token contract does not exist',
+            [ContractWrappersError.ERC20ProxyContractDoesNotExist]: 'ERC20 proxy contract des not exist',
+            [ContractWrappersError.ERC721ProxyContractDoesNotExist]: 'ERC721 proxy contract des not exist',
+            [ContractWrappersError.ERC20TokenContractDoesNotExist]: 'ERC20 token contract does not exist',
+            [ContractWrappersError.ERC721TokenContractDoesNotExist]: 'ERC721 token contract does not exist',
            [ContractWrappersError.ZRXContractDoesNotExist]: 'ZRX contract does not exist',
            [BlockchainCallErrs.UserHasNoAssociatedAddresses]: 'User has no addresses available',
            [OrderError.InvalidSignature]: 'Order signature is not valid',
@@ -247,12 +249,9 @@ export const utils = {
        } = {
            [ExchangeContractErrs.OrderFillExpired]: 'This order has expired',
            [ExchangeContractErrs.OrderCancelExpired]: 'This order has expired',
-            [ExchangeContractErrs.OrderCancelAmountZero]: "Order cancel amount can't be 0",
-            [ExchangeContractErrs.OrderAlreadyCancelledOrFilled]:
-                'This order has already been completely filled or cancelled',
+            [ExchangeContractErrs.OrderCancelled]: 'This order has been cancelled',
            [ExchangeContractErrs.OrderFillAmountZero]: "Order fill amount can't be 0",
-            [ExchangeContractErrs.OrderRemainingFillAmountZero]:
-                'This order has already been completely filled or cancelled',
+            [ExchangeContractErrs.OrderRemainingFillAmountZero]: 'This order has already been completely filled',
            [ExchangeContractErrs.OrderFillRoundingError]:
                'Rounding error will occur when filling this order. Please try filling a different amount.',
            [ExchangeContractErrs.InsufficientTakerBalance]:
--- a/yarn.lock
+++ b/yarn.lock
@@ -493,16 +493,6 @@
    npmlog "^4.1.2"
    write-file-atomic "^2.3.0"

-"@0xproject/assert@^0.2.12", "@0xproject/assert@^0.2.14":
-  version "0.2.14"
-  resolved "https://registry.yarnpkg.com/@0xproject/assert/-/assert-0.2.14.tgz#7d5a373fedc8eb482716b730f4dddf3ef33bfa29"
-  dependencies:
-    "@0xproject/json-schemas" "^0.8.3"
-    "@0xproject/typescript-typings" "^0.4.3"
-    "@0xproject/utils" "^0.7.3"
-    lodash "4.17.10"
-    valid-url "1.0.9"
-
 "@0xproject/assert@^0.2.13":
  version "0.2.13"
  resolved "https://registry.yarnpkg.com/@0xproject/assert/-/assert-0.2.13.tgz#8eb0e16cd6d802eae1b0ab86d344360ea0038331"
@@ -513,7 +503,17 @@
    lodash "4.17.10"
    valid-url "1.0.9"

-"@0xproject/base-contract@^0.3.4", "@0xproject/base-contract@^0.3.5", "@0xproject/base-contract@^0.3.6":
+"@0xproject/assert@^0.2.14":
+  version "0.2.14"
+  resolved "https://registry.yarnpkg.com/@0xproject/assert/-/assert-0.2.14.tgz#7d5a373fedc8eb482716b730f4dddf3ef33bfa29"
+  dependencies:
+    "@0xproject/json-schemas" "^0.8.3"
+    "@0xproject/typescript-typings" "^0.4.3"
+    "@0xproject/utils" "^0.7.3"
+    lodash "4.17.10"
+    valid-url "1.0.9"
+
+"@0xproject/base-contract@^0.3.5", "@0xproject/base-contract@^0.3.6":
  version "0.3.6"
  resolved "https://registry.yarnpkg.com/@0xproject/base-contract/-/base-contract-0.3.6.tgz#c6d742ce2904bdd9e77524d99ba2438d3aae8a40"
  dependencies:
@@ -538,26 +538,6 @@
    sinon "^4.0.0"
    websocket "^1.0.25"

-"@0xproject/contract-wrappers@^0.0.5":
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/@0xproject/contract-wrappers/-/contract-wrappers-0.0.5.tgz#36f91afb7de51478f9d2e4e0a3c4e685b3d18f28"
-  dependencies:
-    "@0xproject/assert" "^0.2.12"
-    "@0xproject/base-contract" "^0.3.4"
-    "@0xproject/fill-scenarios" "^0.0.4"
-    "@0xproject/json-schemas" "^0.8.1"
-    "@0xproject/order-utils" "^0.0.7"
-    "@0xproject/types" "^0.8.1"
-    "@0xproject/typescript-typings" "^0.4.1"
-    "@0xproject/utils" "^0.7.1"
-    "@0xproject/web3-wrapper" "^0.7.1"
-    ethereumjs-blockstream "2.0.7"
-    ethereumjs-util "5.1.5"
-    ethers "3.0.22"
-    js-sha3 "0.7.0"
-    lodash "4.17.10"
-    uuid "3.2.1"
-
 "@0xproject/contract-wrappers@^0.1.0":
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/@0xproject/contract-wrappers/-/contract-wrappers-0.1.1.tgz#8108d7ec051f202ef0cfa77c91c4ef994bf89881"
@@ -579,19 +559,6 @@
    lodash "4.17.10"
    uuid "3.2.1"

-"@0xproject/fill-scenarios@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@0xproject/fill-scenarios/-/fill-scenarios-0.0.4.tgz#4d23c75abda7e9f117b698c0b8b142af07e0c69e"
-  dependencies:
-    "@0xproject/base-contract" "^0.3.4"
-    "@0xproject/order-utils" "^0.0.7"
-    "@0xproject/types" "^0.8.1"
-    "@0xproject/typescript-typings" "^0.4.1"
-    "@0xproject/utils" "^0.7.1"
-    "@0xproject/web3-wrapper" "^0.7.1"
-    ethers "3.0.22"
-    lodash "4.17.10"
-
 "@0xproject/fill-scenarios@^0.0.5":
  version "0.0.5"
  resolved "https://registry.yarnpkg.com/@0xproject/fill-scenarios/-/fill-scenarios-0.0.5.tgz#a62a240ae40423b9b73ecc0b1fc2abb58b76621c"
@@ -618,15 +585,6 @@
    ethers "3.0.22"
    lodash "4.17.10"

-"@0xproject/json-schemas@^0.8.1", "@0xproject/json-schemas@^0.8.3":
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/@0xproject/json-schemas/-/json-schemas-0.8.3.tgz#455e6219a6bd05e990392165192a983a9ab89f26"
-  dependencies:
-    "@0xproject/typescript-typings" "^0.4.3"
-    "@types/node" "9.6.0"
-    jsonschema "1.2.2"
-    lodash.values "4.3.0"
-
 "@0xproject/json-schemas@^0.8.2":
  version "0.8.2"
  resolved "https://registry.yarnpkg.com/@0xproject/json-schemas/-/json-schemas-0.8.2.tgz#9d3f446e546ce0c959cf7beb45d41ac60476a78c"
@@ -636,21 +594,14 @@
    jsonschema "1.2.2"
    lodash.values "4.3.0"

-"@0xproject/order-utils@^0.0.7":
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/@0xproject/order-utils/-/order-utils-0.0.7.tgz#eaa465782ea5745bdad54e1a851533172d993b7c"
+"@0xproject/json-schemas@^0.8.3":
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/@0xproject/json-schemas/-/json-schemas-0.8.3.tgz#455e6219a6bd05e990392165192a983a9ab89f26"
  dependencies:
-    "@0xproject/assert" "^0.2.12"
-    "@0xproject/json-schemas" "^0.8.1"
-    "@0xproject/types" "^0.8.1"
-    "@0xproject/typescript-typings" "^0.4.1"
-    "@0xproject/utils" "^0.7.1"
-    "@0xproject/web3-wrapper" "^0.7.1"
+    "@0xproject/typescript-typings" "^0.4.3"
    "@types/node" "9.6.0"
-    bn.js "4.11.7"
-    ethereumjs-abi "0.6.5"
-    ethereumjs-util "5.1.5"
-    lodash "4.17.10"
+    jsonschema "1.2.2"
+    lodash.values "4.3.0"

 "@0xproject/order-utils@^0.0.8":
  version "0.0.8"
@@ -741,7 +692,7 @@
  dependencies:
    bignumber.js "~4.1.0"

-"@0xproject/types@^0.8.1", "@0xproject/types@^0.8.2":
+"@0xproject/types@^0.8.2":
  version "0.8.2"
  resolved "https://registry.yarnpkg.com/@0xproject/types/-/types-0.8.2.tgz#6f936b73bfb6f017b5102002d97da0881da92d1b"
  dependencies:
@@ -755,7 +706,7 @@
    "@0xproject/types" "^0.5.0"
    bignumber.js "~4.1.0"

-"@0xproject/typescript-typings@^0.4.1", "@0xproject/typescript-typings@^0.4.2", "@0xproject/typescript-typings@^0.4.3":
+"@0xproject/typescript-typings@^0.4.2", "@0xproject/typescript-typings@^0.4.3":
  version "0.4.3"
  resolved "https://registry.yarnpkg.com/@0xproject/typescript-typings/-/typescript-typings-0.4.3.tgz#f99f939a43f2764ad7182fcd78a71212a1d76d96"
  dependencies:
@@ -763,7 +714,7 @@
    bignumber.js "~4.1.0"
    ethereum-types "^0.0.2"

-"@0xproject/utils@^0.7.1", "@0xproject/utils@^0.7.2", "@0xproject/utils@^0.7.3":
+"@0xproject/utils@^0.7.2", "@0xproject/utils@^0.7.3":
  version "0.7.3"
  resolved "https://registry.yarnpkg.com/@0xproject/utils/-/utils-0.7.3.tgz#ffa7c6da9bf0dd3e13694f185dcfc48a8981ff05"
  dependencies:
@@ -777,7 +728,7 @@
    lodash "4.17.10"
    web3 "0.20.6"

-"@0xproject/web3-wrapper@^0.7.1", "@0xproject/web3-wrapper@^0.7.2", "@0xproject/web3-wrapper@^0.7.3":
+"@0xproject/web3-wrapper@^0.7.2", "@0xproject/web3-wrapper@^0.7.3":
  version "0.7.3"
  resolved "https://registry.yarnpkg.com/@0xproject/web3-wrapper/-/web3-wrapper-0.7.3.tgz#9bd50b034b92fd505b6766b6e225f014b6d08b08"
  dependencies:
@@ -5246,14 +5197,6 @@ ethereumjs-block@~1.2.2:
    ethereumjs-util "^4.0.1"
    merkle-patricia-tree "^2.1.2"

-ethereumjs-blockstream@2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/ethereumjs-blockstream/-/ethereumjs-blockstream-2.0.7.tgz#8e791d18d517f13e0ba928892dda545dc930936b"
-  dependencies:
-    immutable "3.8.1"
-    source-map-support "0.4.14"
-    uuid "3.0.1"
-
 ethereumjs-blockstream@5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/ethereumjs-blockstream/-/ethereumjs-blockstream-5.0.0.tgz#63bfe9185757329a32822d5815562eb1dcd75d71"
@@ -7080,10 +7023,6 @@ immediate@^3.2.3:
  version "3.2.3"
  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.2.3.tgz#d140fa8f614659bd6541233097ddaac25cdd991c"

-immutable@3.8.1:
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
-
 immutable@3.8.2:
  version "3.8.2"
  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
@@ -12785,12 +12724,6 @@ source-map-resolve@^0.5.0:
    source-map-url "^0.4.0"
    urix "^0.1.0"

-source-map-support@0.4.14:
-  version "0.4.14"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.14.tgz#9d4463772598b86271b4f523f6c1f4e02a7d6aef"
-  dependencies:
-    source-map "^0.5.6"
-
 source-map-support@0.5.6, source-map-support@^0.5.6:
  version "0.5.6"
  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.6.tgz#4435cee46b1aab62b8e8610ce60f788091c51c13"