Merge pull request #379 from 0xProject/portal_json

Make portal order JSON compatible with 0x.js

6 files changed, 79 insertions, 134 deletions

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 97f616be2..51e44134c 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -18,8 +18,8 @@ import { EthereumAddress } from 'ts/components/ui/ethereum_address';
 import { Identicon } from 'ts/components/ui/identicon';
 import { VisualOrder } from 'ts/components/visual_order';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { orderSchema } from 'ts/schemas/order_schema';
-import { SchemaValidator } from 'ts/schemas/validator';
+import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
+import { validator } from 'ts/schemas/validator';
 import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
@@ -59,7 +59,6 @@ interface FillOrderState {
 }
 
 export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
-    private _validator: SchemaValidator;
     private _isUnmounted: boolean;
     constructor(props: FillOrderProps) {
         super(props);
@@ -82,7 +81,6 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             isConfirmingTokenTracking: false,
             tokensToTrack: [],
         };
-        this._validator = new SchemaValidator();
     }
     public componentWillMount() {
         if (!_.isEmpty(this.state.orderJSON)) {
@@ -109,7 +107,6 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                             <FillOrderJSON
                                 blockchain={this.props.blockchain}
                                 tokenByAddress={this.props.tokenByAddress}
-                                networkId={this.props.networkId}
                                 orderJSON={this.state.orderJSON}
                                 onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)}
                             />
@@ -136,7 +133,6 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                                     <FillOrderJSON
                                         blockchain={this.props.blockchain}
                                         tokenByAddress={this.props.tokenByAddress}
-                                        networkId={this.props.networkId}
                                         orderJSON={this.state.orderJSON}
                                         onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)}
                                     />
@@ -182,16 +178,16 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         );
     }
     private _renderVisualOrder() {
-        const takerTokenAddress = this.state.parsedOrder.taker.token.address;
+        const takerTokenAddress = this.state.parsedOrder.signedOrder.takerTokenAddress;
         const takerToken = this.props.tokenByAddress[takerTokenAddress];
-        const orderTakerAmount = new BigNumber(this.state.parsedOrder.taker.amount);
-        const orderMakerAmount = new BigNumber(this.state.parsedOrder.maker.amount);
+        const orderTakerAmount = new BigNumber(this.state.parsedOrder.signedOrder.takerTokenAmount);
+        const orderMakerAmount = new BigNumber(this.state.parsedOrder.signedOrder.makerTokenAmount);
         const takerAssetToken = {
             amount: orderTakerAmount.minus(this.state.unavailableTakerAmount),
             symbol: takerToken.symbol,
         };
-        const fillToken = this.props.tokenByAddress[takerToken.address];
-        const makerTokenAddress = this.state.parsedOrder.maker.token.address;
+        const fillToken = this.props.tokenByAddress[takerTokenAddress];
+        const makerTokenAddress = this.state.parsedOrder.signedOrder.makerTokenAddress;
         const makerToken = this.props.tokenByAddress[makerTokenAddress];
         const makerAssetToken = {
             amount: orderMakerAmount.times(takerAssetToken.amount).div(orderTakerAmount),
@@ -201,10 +197,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             amount: this.props.orderFillAmount,
             symbol: takerToken.symbol,
         };
-        const orderTaker = !_.isEmpty(this.state.parsedOrder.taker.address)
-            ? this.state.parsedOrder.taker.address
-            : this.props.userAddress;
-        const parsedOrderExpiration = new BigNumber(this.state.parsedOrder.expiration);
+        const parsedOrderExpiration = new BigNumber(this.state.parsedOrder.signedOrder.expirationUnixTimestampSec);
         const exchangeRate = orderMakerAmount.div(orderTakerAmount);
 
         let orderReceiveAmount = 0;
@@ -213,7 +206,8 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             orderReceiveAmount = this._formatCurrencyAmount(orderReceiveAmountBigNumber, makerToken.decimals);
         }
         const isUserMaker =
-            !_.isUndefined(this.state.parsedOrder) && this.state.parsedOrder.maker.address === this.props.userAddress;
+            !_.isUndefined(this.state.parsedOrder) &&
+            this.state.parsedOrder.signedOrder.maker === this.props.userAddress;
         const expiryDate = utils.convertToReadableDateTimeFromUnixTimestamp(parsedOrderExpiration);
         return (
             <div className="pt3 pb1">
@@ -224,11 +218,11 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                             Maker:
                         </div>
                         <div className="col col-2 pr1">
-                            <Identicon address={this.state.parsedOrder.maker.address} diameter={23} />
+                            <Identicon address={this.state.parsedOrder.signedOrder.maker} diameter={23} />
                         </div>
                         <div className="col col-6">
                             <EthereumAddress
-                                address={this.state.parsedOrder.maker.address}
+                                address={this.state.parsedOrder.signedOrder.maker}
                                 networkId={this.props.networkId}
                             />
                         </div>
@@ -237,8 +231,6 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 <div className="lg-px4 md-px4 sm-px0">
                     <div className="lg-px4 md-px4 sm-px1 pt1">
                         <VisualOrder
-                            orderTakerAddress={orderTaker}
-                            orderMakerAddress={this.state.parsedOrder.maker.address}
                             makerAssetToken={makerAssetToken}
                             takerAssetToken={takerAssetToken}
                             tokenByAddress={this.props.tokenByAddress}
@@ -361,15 +353,16 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             return;
         }
 
-        const makerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.maker.token.address];
-        const takerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.taker.token.address];
+        const makerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.signedOrder.makerTokenAddress];
+        const takerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.signedOrder.takerTokenAddress];
 
-        const tokensToTrack = [];
+        const tokensToTrack: Token[] = [];
         const isUnseenMakerToken = _.isUndefined(makerTokenIfExists);
         const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && makerTokenIfExists.isTracked;
         if (isUnseenMakerToken) {
             tokensToTrack.push({
-                ...this.state.parsedOrder.maker.token,
+                ...this.state.parsedOrder.metadata.makerToken,
+                address: this.state.parsedOrder.signedOrder.makerTokenAddress,
                 iconUrl: undefined,
                 isTracked: false,
                 isRegistered: false,
@@ -381,7 +374,8 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         const isTakerTokenTracked = !_.isUndefined(takerTokenIfExists) && takerTokenIfExists.isTracked;
         if (isUnseenTakerToken) {
             tokensToTrack.push({
-                ...this.state.parsedOrder.taker.token,
+                ...this.state.parsedOrder.metadata.takerToken,
+                address: this.state.parsedOrder.signedOrder.takerTokenAddress,
                 iconUrl: undefined,
                 isTracked: false,
                 isRegistered: false,
@@ -403,9 +397,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
     private async _validateFillOrderFireAndForgetAsync(orderJSON: string) {
         let orderJSONErrMsg = '';
         let parsedOrder: Order;
+        let orderHash: string;
         try {
             const order = JSON.parse(orderJSON);
-            const validationResult = this._validator.validate(order, orderSchema);
+            const validationResult = validator.validate(order, portalOrderSchema);
             if (validationResult.errors.length > 0) {
                 orderJSONErrMsg = 'Submitted order JSON is not a valid order';
                 utils.consoleLog(`Unexpected order JSON validation error: ${validationResult.errors.join(', ')}`);
@@ -413,41 +408,36 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             }
             parsedOrder = order;
 
-            const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
-            const makerAmount = new BigNumber(parsedOrder.maker.amount);
-            const takerAmount = new BigNumber(parsedOrder.taker.amount);
-            const expiration = new BigNumber(parsedOrder.expiration);
-            const salt = new BigNumber(parsedOrder.salt);
-            const parsedMakerFee = new BigNumber(parsedOrder.maker.feeAmount);
-            const parsedTakerFee = new BigNumber(parsedOrder.taker.feeAmount);
+            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 zeroExOrder: ZeroExOrder = {
-                exchangeContractAddress: parsedOrder.exchangeContract,
+                exchangeContractAddress: parsedOrder.signedOrder.exchangeContractAddress,
                 expirationUnixTimestampSec: expiration,
-                feeRecipient: parsedOrder.feeRecipient,
-                maker: parsedOrder.maker.address,
+                feeRecipient: parsedOrder.signedOrder.feeRecipient,
+                maker: parsedOrder.signedOrder.maker,
                 makerFee: parsedMakerFee,
-                makerTokenAddress: parsedOrder.maker.token.address,
+                makerTokenAddress: parsedOrder.signedOrder.makerTokenAddress,
                 makerTokenAmount: makerAmount,
                 salt,
-                taker: _.isEmpty(parsedOrder.taker.address) ? constants.NULL_ADDRESS : parsedOrder.taker.address,
+                taker: _.isEmpty(parsedOrder.signedOrder.taker)
+                    ? constants.NULL_ADDRESS
+                    : parsedOrder.signedOrder.taker,
                 takerFee: parsedTakerFee,
-                takerTokenAddress: parsedOrder.taker.token.address,
+                takerTokenAddress: parsedOrder.signedOrder.takerTokenAddress,
                 takerTokenAmount: takerAmount,
             };
-            const orderHash = ZeroEx.getOrderHashHex(zeroExOrder);
+            orderHash = ZeroEx.getOrderHashHex(zeroExOrder);
 
-            const signature = parsedOrder.signature;
-            const isValidSignature = ZeroEx.isValidSignature(signature.hash, signature, parsedOrder.maker.address);
-            if (this.props.networkId !== parsedOrder.networkId) {
-                orderJSONErrMsg = `This order was made on another Ethereum network
-                                   (id: ${parsedOrder.networkId}). Connect to this network to fill.`;
-                parsedOrder = undefined;
-            } else if (exchangeContractAddr !== parsedOrder.exchangeContract) {
-                orderJSONErrMsg = 'This order was made using a deprecated 0x Exchange contract.';
-                parsedOrder = undefined;
-            } else if (orderHash !== signature.hash) {
-                orderJSONErrMsg = 'Order hash does not match supplied plaintext values';
+            const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
+            const signature = parsedOrder.signedOrder.ecSignature;
+            const isValidSignature = ZeroEx.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) {
                 orderJSONErrMsg = 'Order signature is invalid';
@@ -478,13 +468,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             // Clear cache entry if user updates orderJSON to invalid entry
             this.props.dispatcher.updateUserSuppliedOrderCache(undefined);
         } else {
-            const orderHash = parsedOrder.signature.hash;
             unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
             const isMakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync(
-                parsedOrder.maker.token.address,
+                parsedOrder.signedOrder.makerTokenAddress,
             );
             const isTakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync(
-                parsedOrder.taker.token.address,
+                parsedOrder.signedOrder.takerTokenAddress,
             );
             this.setState({
                 isMakerTokenAddressInRegistry,
@@ -529,20 +518,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             globalErrMsg = 'You must specify a fill amount';
         }
 
-        const signedOrder = this.props.blockchain.portalOrderToSignedOrder(
-            parsedOrder.maker.address,
-            parsedOrder.taker.address,
-            parsedOrder.maker.token.address,
-            parsedOrder.taker.token.address,
-            new BigNumber(parsedOrder.maker.amount),
-            new BigNumber(parsedOrder.taker.amount),
-            new BigNumber(parsedOrder.maker.feeAmount),
-            new BigNumber(parsedOrder.taker.feeAmount),
-            new BigNumber(this.state.parsedOrder.expiration),
-            parsedOrder.feeRecipient,
-            parsedOrder.signature,
-            new BigNumber(parsedOrder.salt),
-        );
+        const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder);
         if (_.isEmpty(globalErrMsg)) {
             try {
                 await this.props.blockchain.validateFillOrderThrowIfInvalidAsync(
@@ -551,7 +527,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                     this.props.userAddress,
                 );
             } catch (err) {
-                globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.taker.address);
+                globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.taker);
             }
         }
         if (!_.isEmpty(globalErrMsg)) {
@@ -562,7 +538,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             return;
         }
         const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
-        const eventLabel = `${parsedOrder.taker.token.symbol}-${networkName}`;
+        const eventLabel = `${parsedOrder.metadata.takerToken.symbol}-${networkName}`;
         try {
             const orderFilledAmount: BigNumber = await this.props.blockchain.fillOrderAsync(
                 signedOrder,
@@ -572,7 +548,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 category: 'Portal',
                 action: 'Fill Order Success',
                 label: eventLabel,
-                value: parsedOrder.taker.amount,
+                value: parsedOrder.signedOrder.takerTokenAmount,
             });
             // After fill completes, let's force fetch the token balances
             this.props.dispatcher.forceTokenStateRefetch();
@@ -591,7 +567,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 category: 'Portal',
                 action: 'Fill Order Failure',
                 label: eventLabel,
-                value: parsedOrder.taker.amount,
+                value: parsedOrder.signedOrder.takerTokenAmount,
             });
             const errMsg = `${err}`;
             if (utils.didUserDenyWeb3Request(errMsg)) {
@@ -618,7 +594,6 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         });
 
         const parsedOrder = this.state.parsedOrder;
-        const orderHash = parsedOrder.signature.hash;
         const takerAddress = this.props.userAddress;
 
         if (_.isUndefined(takerAddress)) {
@@ -630,28 +605,16 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         }
         let globalErrMsg = '';
 
-        const takerTokenAmount = new BigNumber(parsedOrder.taker.amount);
+        const takerTokenAmount = new BigNumber(parsedOrder.signedOrder.takerTokenAmount);
 
-        const signedOrder = this.props.blockchain.portalOrderToSignedOrder(
-            parsedOrder.maker.address,
-            parsedOrder.taker.address,
-            parsedOrder.maker.token.address,
-            parsedOrder.taker.token.address,
-            new BigNumber(parsedOrder.maker.amount),
-            takerTokenAmount,
-            new BigNumber(parsedOrder.maker.feeAmount),
-            new BigNumber(parsedOrder.taker.feeAmount),
-            new BigNumber(this.state.parsedOrder.expiration),
-            parsedOrder.feeRecipient,
-            parsedOrder.signature,
-            new BigNumber(parsedOrder.salt),
-        );
+        const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder);
+        const orderHash = ZeroEx.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.taker.address);
+            globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.taker);
         }
         if (!_.isEmpty(globalErrMsg)) {
             this.setState({
@@ -661,7 +624,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             return;
         }
         const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
-        const eventLabel = `${parsedOrder.maker.token.symbol}-${networkName}`;
+        const eventLabel = `${parsedOrder.metadata.makerToken.symbol}-${networkName}`;
         try {
             await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount);
             this.setState({
@@ -674,7 +637,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 category: 'Portal',
                 action: 'Cancel Order Success',
                 label: eventLabel,
-                value: parsedOrder.maker.amount,
+                value: parsedOrder.signedOrder.makerTokenAmount,
             });
             return;
         } catch (err) {
@@ -689,7 +652,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                 category: 'Portal',
                 action: 'Cancel Order Failure',
                 label: eventLabel,
-                value: parsedOrder.maker.amount,
+                value: parsedOrder.signedOrder.makerTokenAmount,
             });
             globalErrMsg = 'Failed to cancel order, please refresh and try again';
             utils.consoleLog(`${err}`);
diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx
index f8e43481a..7d5351ec4 100644
--- a/packages/website/ts/components/fill_order_json.tsx
+++ b/packages/website/ts/components/fill_order_json.tsx
@@ -12,7 +12,6 @@ import { utils } from 'ts/utils/utils';
 interface FillOrderJSONProps {
     blockchain: Blockchain;
     tokenByAddress: TokenByAddress;
-    networkId: number;
     orderJSON: string;
     onFillOrderJSONChanged: (event: any) => void;
 }
@@ -34,8 +33,7 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
             },
         };
         const hintOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
-        const hintSignatureData = {
-            hash: '0xf965a9978a0381ab58f5a2408ad967c...',
+        const hintECSignature = {
             r: '0xf01103f759e2289a28593eaf22e5820032...',
             s: '937862111edcba395f8a9e0cc1b2c5e12320...',
             v: 27,
@@ -43,7 +41,6 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
         const hintSalt = ZeroEx.generatePseudoRandomSalt();
         const feeRecipient = constants.NULL_ADDRESS;
         const hintOrder = utils.generateOrder(
-            this.props.networkId,
             exchangeContract,
             hintSideToAssetToken,
             hintOrderExpiryTimestamp,
@@ -52,7 +49,7 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
             constants.MAKER_FEE,
             constants.TAKER_FEE,
             feeRecipient,
-            hintSignatureData,
+            hintECSignature,
             this.props.tokenByAddress,
             hintSalt,
         );
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 c9417f5a4..a3f222784 100644
--- 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 { Order, ZeroEx } from '0x.js';
+import { ECSignature, Order, ZeroEx } from '0x.js';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
@@ -17,18 +17,9 @@ import { HelpTooltip } from 'ts/components/ui/help_tooltip';
 import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
 import { SwapIcon } from 'ts/components/ui/swap_icon';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { orderSchema } from 'ts/schemas/order_schema';
-import { SchemaValidator } from 'ts/schemas/validator';
-import {
-    AlertTypes,
-    BlockchainErrs,
-    HashData,
-    Side,
-    SideToAssetToken,
-    SignatureData,
-    Token,
-    TokenByAddress,
-} from 'ts/types';
+import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
+import { validator } from 'ts/schemas/validator';
+import { AlertTypes, BlockchainErrs, HashData, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
@@ -49,7 +40,7 @@ interface GenerateOrderFormProps {
     orderExpiryTimestamp: BigNumber;
     networkId: number;
     userAddress: string;
-    orderSignatureData: SignatureData;
+    orderECSignature: ECSignature;
     orderTakerAddress: string;
     orderSalt: BigNumber;
     sideToAssetToken: SideToAssetToken;
@@ -64,7 +55,6 @@ interface GenerateOrderFormState {
 }
 
 export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, GenerateOrderFormState> {
-    private _validator: SchemaValidator;
     constructor(props: GenerateOrderFormProps) {
         super(props);
         this.state = {
@@ -72,7 +62,6 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
             shouldShowIncompleteErrs: false,
             signingState: SigningState.UNSIGNED,
         };
-        this._validator = new SchemaValidator();
     }
     public componentDidMount() {
         window.scrollTo(0, 0);
@@ -88,6 +77,8 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                                   allowed to fill this order. If no taker is<br> \
                                   specified, anyone is able to fill it.';
         const exchangeContractIfExists = this.props.blockchain.getExchangeContractAddressIfExists();
+        const initialTakerAddress =
+            this.props.orderTakerAddress === ZeroEx.NULL_ADDRESS ? '' : this.props.orderTakerAddress;
         return (
             <div className="clearfix mb2 lg-px4 md-px4 sm-px2">
                 <h3>Generate an order</h3>
@@ -168,7 +159,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                     <div className="pt1 flex mx-auto">
                         <IdenticonAddressInput
                             label="Taker"
-                            initialAddress={this.props.orderTakerAddress}
+                            initialAddress={initialTakerAddress}
                             updateOrderAddress={this._updateOrderAddress.bind(this)}
                         />
                         <div className="pt3">
@@ -209,14 +200,13 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                     <OrderJSON
                         exchangeContractIfExists={exchangeContractIfExists}
                         orderExpiryTimestamp={this.props.orderExpiryTimestamp}
-                        orderSignatureData={this.props.orderSignatureData}
+                        orderECSignature={this.props.orderECSignature}
                         orderTakerAddress={this.props.orderTakerAddress}
                         orderMakerAddress={this.props.userAddress}
                         orderSalt={this.props.orderSalt}
                         orderMakerFee={this.props.hashData.makerFee}
                         orderTakerFee={this.props.hashData.takerFee}
                         orderFeeRecipient={this.props.hashData.feeRecipientAddress}
-                        networkId={this.props.networkId}
                         sideToAssetToken={this.props.sideToAssetToken}
                         tokenByAddress={this.props.tokenByAddress}
                     />
@@ -327,9 +317,8 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
 
         let globalErrMsg = '';
         try {
-            const signatureData = await this.props.blockchain.signOrderHashAsync(orderHash);
+            const ecSignature = await this.props.blockchain.signOrderHashAsync(orderHash);
             const order = utils.generateOrder(
-                this.props.networkId,
                 exchangeContractAddr,
                 this.props.sideToAssetToken,
                 hashData.orderExpiryTimestamp,
@@ -338,11 +327,11 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                 hashData.makerFee,
                 hashData.takerFee,
                 hashData.feeRecipientAddress,
-                signatureData,
+                ecSignature,
                 this.props.tokenByAddress,
                 hashData.orderSalt,
             );
-            const validationResult = this._validator.validate(order, orderSchema);
+            const validationResult = validator.validate(order, portalOrderSchema);
             if (validationResult.errors.length > 0) {
                 globalErrMsg = 'Order signing failed. Please refresh and try again';
                 utils.consoleLog(`Unexpected error occured: Order validation failed:
@@ -367,7 +356,8 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
     }
     private _updateOrderAddress(address?: string): void {
         if (!_.isUndefined(address)) {
-            this.props.dispatcher.updateOrderTakerAddress(address);
+            const normalizedAddress = _.isEmpty(address) ? ZeroEx.NULL_ADDRESS : address;
+            this.props.dispatcher.updateOrderTakerAddress(normalizedAddress);
         }
     }
 }
diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx
index 1b6b32a04..a5dd9ebc1 100644
--- a/packages/website/ts/components/order_json.tsx
+++ b/packages/website/ts/components/order_json.tsx
@@ -1,10 +1,11 @@
+import { ECSignature } from '0x.js';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import { CopyIcon } from 'ts/components/ui/copy_icon';
-import { SideToAssetToken, SignatureData, TokenByAddress, WebsitePaths } from 'ts/types';
+import { SideToAssetToken, TokenByAddress, WebsitePaths } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
@@ -13,14 +14,13 @@ import { utils } from 'ts/utils/utils';
 interface OrderJSONProps {
     exchangeContractIfExists: string;
     orderExpiryTimestamp: BigNumber;
-    orderSignatureData: SignatureData;
+    orderECSignature: ECSignature;
     orderTakerAddress: string;
     orderMakerAddress: string;
     orderSalt: BigNumber;
     orderMakerFee: BigNumber;
     orderTakerFee: BigNumber;
     orderFeeRecipient: string;
-    networkId: number;
     sideToAssetToken: SideToAssetToken;
     tokenByAddress: TokenByAddress;
 }
@@ -40,7 +40,6 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> {
     }
     public render() {
         const order = utils.generateOrder(
-            this.props.networkId,
             this.props.exchangeContractIfExists,
             this.props.sideToAssetToken,
             this.props.orderExpiryTimestamp,
@@ -49,7 +48,7 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> {
             this.props.orderMakerFee,
             this.props.orderTakerFee,
             this.props.orderFeeRecipient,
-            this.props.orderSignatureData,
+            this.props.orderECSignature,
             this.props.tokenByAddress,
             this.props.orderSalt,
         );
@@ -162,7 +161,6 @@ You can see and fill it here: ${this.state.shareLink}`);
     }
     private _getOrderUrl() {
         const order = utils.generateOrder(
-            this.props.networkId,
             this.props.exchangeContractIfExists,
             this.props.sideToAssetToken,
             this.props.orderExpiryTimestamp,
@@ -171,7 +169,7 @@ You can see and fill it here: ${this.state.shareLink}`);
             this.props.orderMakerFee,
             this.props.orderTakerFee,
             this.props.orderFeeRecipient,
-            this.props.orderSignatureData,
+            this.props.orderECSignature,
             this.props.tokenByAddress,
             this.props.orderSalt,
         );
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 92589f75c..0409f28c0 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -21,8 +21,8 @@ import { FlashMessage } from 'ts/components/ui/flash_message';
 import { GenerateOrderForm } from 'ts/containers/generate_order_form';
 import { localStorage } from 'ts/local_storage/local_storage';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { orderSchema } from 'ts/schemas/order_schema';
-import { SchemaValidator } from 'ts/schemas/validator';
+import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
+import { validator } from 'ts/schemas/validator';
 import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
@@ -367,9 +367,8 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
             return undefined;
         }
 
-        const validator = new SchemaValidator();
         const order = JSON.parse(decodeURIComponent(orderPair[1]));
-        const validationResult = validator.validate(order, orderSchema);
+        const validationResult = validator.validate(order, portalOrderSchema);
         if (validationResult.errors.length > 0) {
             utils.consoleLog(`Invalid shared order: ${validationResult.errors}`);
             return undefined;
diff --git a/packages/website/ts/components/visual_order.tsx b/packages/website/ts/components/visual_order.tsx
index 092954086..ec2d47f39 100644
--- a/packages/website/ts/components/visual_order.tsx
+++ b/packages/website/ts/components/visual_order.tsx
@@ -8,8 +8,6 @@ import { utils } from 'ts/utils/utils';
 const PRECISION = 5;
 
 interface VisualOrderProps {
-    orderTakerAddress: string;
-    orderMakerAddress: string;
     makerAssetToken: AssetToken;
     takerAssetToken: AssetToken;
     makerToken: Token;