2 files changed, 34 insertions, 7 deletions
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx
index 6a3301549..6e97ee37e 100644
--- a/packages/website/ts/components/portal/menu.tsx
+++ b/packages/website/ts/components/portal/menu.tsx
@@ -43,9 +43,14 @@ export const defaultMenuItemEntries: MenuItemEntry[] = [
         iconName: 'zmdi-circle-o',
     },
     {
-        to: `${WebsitePaths.Portal}/direct`,
-        labelText: 'Trade direct',
-        iconName: 'zmdi-swap',
+        to: `${WebsitePaths.Portal}/generate`,
+        labelText: 'Generate order',
+        iconName: 'zmdi-arrow-right-top',
+    },
+    {
+        to: `${WebsitePaths.Portal}/fill`,
+        labelText: 'Fill order',
+        iconName: 'zmdi-arrow-left-bottom',
     },
 ];
 
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index e08393791..cb55b0912 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -10,6 +10,7 @@ import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog
 import { LedgerConfigDialog } from 'ts/components/dialogs/ledger_config_dialog';
 import { PortalDisclaimerDialog } from 'ts/components/dialogs/portal_disclaimer_dialog';
 import { EthWrappers } from 'ts/components/eth_wrappers';
+import { FillOrder } from 'ts/components/fill_order';
 import { AssetPicker } from 'ts/components/generate_order/asset_picker';
 import { BackButton } from 'ts/components/portal/back_button';
 import { Loading } from 'ts/components/portal/loading';
@@ -336,9 +337,14 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 render: this._renderTradeHistory.bind(this),
             },
             {
-                pathName: `${WebsitePaths.Portal}/direct`,
-                headerText: 'Trade Direct',
-                render: this._renderTradeDirect.bind(this),
+                pathName: `${WebsitePaths.Portal}/generate`,
+                headerText: 'Generate Order',
+                render: this._renderGenerateOrderForm.bind(this),
+            },
+            {
+                pathName: `${WebsitePaths.Portal}/fill`,
+                headerText: 'Fill Order',
+                render: this._renderFillOrder.bind(this),
             },
         ];
         return (
@@ -386,7 +392,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             />
         );
     }
-    private _renderTradeDirect(match: any, location: Location, history: History): React.ReactNode {
+    private _renderGenerateOrderForm(): React.ReactNode {
         return (
             <GenerateOrderForm
                 blockchain={this._blockchain}
@@ -395,6 +401,22 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             />
         );
     }
+    private _renderFillOrder(): React.ReactNode {
+        return (
+            <FillOrder
+                blockchain={this._blockchain}
+                blockchainErr={this.props.blockchainErr}
+                initialOrder={undefined} // Add user supplied order and shared order stuff here
+                isOrderInUrl={false}
+                orderFillAmount={this.props.orderFillAmount}
+                networkId={this.props.networkId}
+                userAddress={this.props.userAddress}
+                tokenByAddress={this.props.tokenByAddress}
+                dispatcher={this.props.dispatcher}
+                lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+            />
+        );
+    }
     private _renderTokenBalances(): React.ReactNode {
         const allTokens = _.values(this.props.tokenByAddress);
         const trackedTokens = _.filter(allTokens, t => t.isTracked);