From ad161a973e5453ec267510f54d88621517254039 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 24 Aug 2018 15:59:14 -0700
Subject: Change all onTouchTap to onClick

---
 packages/website/ts/components/dialogs/blockchain_err_dialog.tsx      | 2 +-
 packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx | 4 ++--
 packages/website/ts/components/dialogs/ledger_config_dialog.tsx       | 2 +-
 packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx   | 2 +-
 packages/website/ts/components/dialogs/send_dialog.tsx                | 4 ++--
 .../website/ts/components/dialogs/track_token_confirmation_dialog.tsx | 4 ++--
 packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx   | 2 +-
 .../ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx       | 2 +-
 packages/website/ts/components/fill_warning_dialog.tsx                | 4 ++--
 packages/website/ts/components/generate_order/asset_picker.tsx        | 4 ++--
 packages/website/ts/components/token_balances.tsx                     | 2 +-
 packages/website/ts/components/top_bar/top_bar.tsx                    | 2 +-
 packages/website/ts/components/ui/lifecycle_raised_button.tsx         | 2 +-
 13 files changed, 18 insertions(+), 18 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index c8e10303f..18c060991 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -22,7 +22,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
                 key="blockchainErrOk"
                 label="Ok"
                 primary={true}
-                onTouchTap={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
+                onClick={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
             />,
         ];
 
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index 5f4bf8519..f2cfb279a 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -54,8 +54,8 @@ export class EthWethConversionDialog extends React.Component<
     }
     public render(): React.ReactNode {
         const convertDialogActions = [
-            <FlatButton key="cancel" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
-            <FlatButton key="convert" label="Convert" primary={true} onTouchTap={this._onConvertClick.bind(this)} />,
+            <FlatButton key="cancel" label="Cancel" onClick={this._onCancel.bind(this)} />,
+            <FlatButton key="convert" label="Convert" primary={true} onClick={this._onConvertClick.bind(this)} />,
         ];
         const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
         return !_.isUndefined(this.props.etherBalanceInWei) ? (
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index d2f373d67..fbc6c868b 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -64,7 +64,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
     }
     public render(): React.ReactNode {
         const dialogActions = [
-            <FlatButton key="ledgerConnectCancel" label="Cancel" onTouchTap={this._onClose.bind(this)} />,
+            <FlatButton key="ledgerConnectCancel" label="Cancel" onClick={this._onClose.bind(this)} />,
         ];
         const dialogTitle =
             this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address';
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index 41a17fe96..ef295762b 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -13,7 +13,7 @@ export const PortalDisclaimerDialog = (props: PortalDisclaimerDialogProps) => {
         <Dialog
             title="0x Portal Disclaimer"
             titleStyle={{ fontWeight: 100 }}
-            actions={[<FlatButton key="portalAgree" label="I Agree" onTouchTap={props.onToggleDialog} />]}
+            actions={[<FlatButton key="portalAgree" label="I Agree" onClick={props.onToggleDialog} />]}
             open={props.isOpen}
             onRequestClose={props.onToggleDialog}
             autoScrollBodyContent={true}
diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx
index c1179dbd0..2754b153f 100644
--- a/packages/website/ts/components/dialogs/send_dialog.tsx
+++ b/packages/website/ts/components/dialogs/send_dialog.tsx
@@ -38,13 +38,13 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
     }
     public render(): React.ReactNode {
         const transferDialogActions = [
-            <FlatButton key="cancelTransfer" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
+            <FlatButton key="cancelTransfer" label="Cancel" onClick={this._onCancel.bind(this)} />,
             <FlatButton
                 key="sendTransfer"
                 disabled={this._hasErrors()}
                 label="Send"
                 primary={true}
-                onTouchTap={this._onSendClick.bind(this)}
+                onClick={this._onSendClick.bind(this)}
             />,
         ];
         return (
diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
index 3751ce06f..c8d5af6b6 100644
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
@@ -43,12 +43,12 @@ export class TrackTokenConfirmationDialog extends React.Component<
                     <FlatButton
                         key="trackNo"
                         label="No"
-                        onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)}
+                        onClick={this._onTrackConfirmationRespondedAsync.bind(this, false)}
                     />,
                     <FlatButton
                         key="trackYes"
                         label="Yes"
-                        onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)}
+                        onClick={this._onTrackConfirmationRespondedAsync.bind(this, true)}
                     />,
                 ]}
                 open={this.props.isOpen}
diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
index 3ebab03ef..afbb30b82 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -14,7 +14,7 @@ export const U2fNotSupportedDialog = (props: U2fNotSupportedDialogProps) => {
         <Dialog
             title="U2F Not Supported"
             titleStyle={{ fontWeight: 100 }}
-            actions={[<FlatButton key="u2fNo" label="Ok" onTouchTap={props.onToggleDialog} />]}
+            actions={[<FlatButton key="u2fNo" label="Ok" onClick={props.onToggleDialog} />]}
             open={props.isOpen}
             onRequestClose={props.onToggleDialog}
             autoScrollBodyContent={true}
diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
index 78b270c1e..cf2c4dda5 100644
--- a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
+++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
@@ -14,7 +14,7 @@ export const WrappedEthSectionNoticeDialog = (props: WrappedEthSectionNoticeDial
             title="Dedicated Wrapped Ether Section"
             titleStyle={{ fontWeight: 100 }}
             actions={[
-                <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onTouchTap={props.onToggleDialog} />,
+                <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onClick={props.onToggleDialog} />,
             ]}
             open={props.isOpen}
             onRequestClose={props.onToggleDialog}
diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx
index 45c492221..4821aaabe 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -18,12 +18,12 @@ export const FillWarningDialog = (props: FillWarningDialogProps) => {
                 <FlatButton
                     key="fillWarningCancel"
                     label="Cancel"
-                    onTouchTap={() => props.onToggleDialog(didCancel)} // tslint:disable-line:jsx-no-lambda
+                    onClick={() => props.onToggleDialog(didCancel)} // tslint:disable-line:jsx-no-lambda
                 />,
                 <FlatButton
                     key="fillWarningContinue"
                     label="Fill Order"
-                    onTouchTap={() => props.onToggleDialog(!didCancel)} // tslint:disable-line:jsx-no-lambda
+                    onClick={() => props.onToggleDialog(!didCancel)} // tslint:disable-line:jsx-no-lambda
                 />,
             ]}
             open={props.isOpen}
diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index 2dca3483f..98aad6c62 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -73,12 +73,12 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
                     <FlatButton
                         key="noTracking"
                         label="No"
-                        onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)}
+                        onClick={this._onTrackConfirmationRespondedAsync.bind(this, false)}
                     />,
                     <FlatButton
                         key="yesTrack"
                         label="Yes"
-                        onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)}
+                        onClick={this._onTrackConfirmationRespondedAsync.bind(this, true)}
                     />,
                 ],
             },
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 969ef32ff..7e7a8d1fa 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -165,7 +165,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                 key="errorOkBtn"
                 label="Ok"
                 primary={true}
-                onTouchTap={this._onErrorDialogToggle.bind(this, false)}
+                onClick={this._onErrorDialogToggle.bind(this, false)}
             />,
         ];
         const isTestNetwork = utils.isTestNetwork(this.props.networkId);
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 9ef8211a9..8580c3a6e 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -410,7 +410,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                         <MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
                     </a>
                     <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
-                        <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}>
+                        <MenuItem className="py2" onClick={this._onMenuButtonClick.bind(this)}>
                             {this.props.translate.get(Key.Faq, Deco.Cap)}
                         </MenuItem>
                     </Link>
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 380fbc77d..0bb99b9d8 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -71,7 +71,7 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton
                 style={{ width: '100%' }}
                 backgroundColor={this.props.backgroundColor}
                 labelColor={this.props.labelColor}
-                onTouchTap={this.onClickAsync.bind(this)}
+                onClick={this.onClickAsync.bind(this)}
                 disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY}
             />
         );
-- 
cgit 


From 91a9014a50cca8e0d42634666fe409839aeae8cf Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 24 Aug 2018 16:48:48 -0700
Subject: Simplify dropdown component

---
 packages/website/ts/components/ui/drop_down.tsx | 40 ++++++++++---------------
 1 file changed, 15 insertions(+), 25 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 4d5caef08..752c92e02 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -25,6 +25,7 @@ export interface DropDownProps {
 
 interface DropDownState {
     isDropDownOpen: boolean;
+    isHovering: boolean;
     anchorEl?: HTMLInputElement;
 }
 
@@ -35,11 +36,21 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         activateEvent: DropdownMouseEvent.Hover,
         closeEvent: DropdownMouseEvent.Hover,
     };
-    private _isHovering: boolean;
     private _popoverCloseCheckIntervalId: number;
+    public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
+        switch (props.activateEvent) {
+            case DropdownMouseEvent.Click:
+                return { isDropDownOpen: state.isDropDownOpen };
+            case DropdownMouseEvent.Hover:
+                return { isDropDownOpen: state.isHovering };
+            default:
+                return {};
+        }
+    }
     constructor(props: DropDownProps) {
         super(props);
         this.state = {
+            isHovering: false,
             isDropDownOpen: false,
         };
     }
@@ -51,15 +62,6 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public componentWillUnmount(): void {
         window.clearInterval(this._popoverCloseCheckIntervalId);
     }
-    public componentWillReceiveProps(_nextProps: DropDownProps): void {
-        // HACK: If the popoverContent is updated to a different dimension and the users
-        // mouse is no longer above it, the dropdown can enter an inconsistent state where
-        // it believes the user is still hovering over it. In order to remedy this, we
-        // call hoverOff whenever the dropdown receives updated props. This is a hack
-        // because it will effectively close the dropdown on any prop update, barring
-        // dropdowns from having dynamic content.
-        this._onHoverOff();
-    }
     public render(): React.ReactNode {
         return (
             <div
@@ -98,28 +100,16 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         }
     }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
-        this._isHovering = true;
-        if (this.props.activateEvent === DropdownMouseEvent.Hover) {
-            this._checkIfShouldOpenPopover(event);
-        }
+        this.setState({ isHovering: true });
     }
     private _onHoverOff(): void {
-        this._isHovering = false;
-    }
-    private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void {
-        if (this.state.isDropDownOpen) {
-            return; // noop
-        }
-        this.setState({
-            isDropDownOpen: true,
-            anchorEl: event.currentTarget,
-        });
+        this.setState({ isHovering: false });
     }
     private _checkIfShouldClosePopover(): void {
         if (!this.state.isDropDownOpen) {
             return; // noop
         }
-        if (this.props.closeEvent === DropdownMouseEvent.Hover && !this._isHovering) {
+        if (this.props.closeEvent === DropdownMouseEvent.Hover && !this.state.isHovering) {
             this._closePopover();
         }
     }
-- 
cgit 


From 5785ec0713c39466b3a6a171f5f0a2d38207b44b Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 27 Aug 2018 18:29:35 -0700
Subject: Have new Popover component working in React 16

---
 .../ts/components/top_bar/provider_display.tsx     |  2 -
 packages/website/ts/components/top_bar/top_bar.tsx |  2 -
 packages/website/ts/components/ui/container.tsx    |  8 +--
 packages/website/ts/components/ui/drop_down.tsx    | 43 ++++++++--------
 packages/website/ts/components/ui/overlay.tsx      |  2 +-
 packages/website/ts/components/ui/popover.tsx      | 59 ++++++++++++++++++++++
 packages/website/ts/components/wallet/wallet.tsx   |  2 -
 7 files changed, 84 insertions(+), 34 deletions(-)
 create mode 100644 packages/website/ts/components/ui/popover.tsx

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 806eaeea5..0a5c61776 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -61,8 +61,6 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                 <DropDown
                     activeNode={activeNode}
                     popoverContent={this._renderPopoverContent()}
-                    anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
-                    targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
                     zDepth={1}
                 />
             </div>
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 8580c3a6e..3eef17746 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -276,8 +276,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                 <DropDown
                                     activeNode={activeNode}
                                     popoverContent={popoverContent}
-                                    anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
-                                    targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
                                     style={styles.menuItem}
                                 />
                                 <TopBarMenuItem
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index f2ae68b70..cf3ec41f2 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -26,10 +26,10 @@ export interface ContainerProps {
     className?: string;
     position?: 'absolute' | 'fixed' | 'relative' | 'unset';
     display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
-    top?: string;
-    left?: string;
-    right?: string;
-    bottom?: string;
+    top?: StringOrNum;
+    left?: StringOrNum;
+    right?: StringOrNum;
+    bottom?: StringOrNum;
     zIndex?: number;
     Tag?: ContainerTag;
     cursor?: string;
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 752c92e02..638b29f88 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -1,6 +1,6 @@
-import Popover from 'material-ui/Popover';
 import * as React from 'react';
-import { MaterialUIPosition } from 'ts/types';
+import { Placement } from 'react-popper';
+import { Popover } from 'ts/components/ui/popover';
 
 const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
 const DEFAULT_STYLE = {
@@ -15,8 +15,7 @@ export enum DropdownMouseEvent {
 export interface DropDownProps {
     activeNode: React.ReactNode;
     popoverContent: React.ReactNode;
-    anchorOrigin: MaterialUIPosition;
-    targetOrigin: MaterialUIPosition;
+    placement?: Placement;
     style?: React.CSSProperties;
     zDepth?: number;
     activateEvent?: DropdownMouseEvent;
@@ -33,8 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
-        activateEvent: DropdownMouseEvent.Hover,
-        closeEvent: DropdownMouseEvent.Hover,
+        activateEvent: DropdownMouseEvent.Click,
+        closeEvent: DropdownMouseEvent.Click,
     };
     private _popoverCloseCheckIntervalId: number;
     public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
@@ -70,24 +69,22 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                 onMouseLeave={this._onHoverOff.bind(this)}
             >
                 <div onClick={this._onActiveNodeClick.bind(this)}>{this.props.activeNode}</div>
-                <Popover
-                    open={this.state.isDropDownOpen}
-                    anchorEl={this.state.anchorEl}
-                    anchorOrigin={this.props.anchorOrigin}
-                    targetOrigin={this.props.targetOrigin}
-                    onRequestClose={this._closePopover.bind(this)}
-                    useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
-                    animated={false}
-                    zDepth={this.props.zDepth}
-                >
-                    <div
-                        onMouseEnter={this._onHover.bind(this)}
-                        onMouseLeave={this._onHoverOff.bind(this)}
-                        onClick={this._closePopover.bind(this)}
+                {this.state.isDropDownOpen &&
+                    <Popover
+                        anchorEl={this.state.anchorEl}
+                        placement={this.props.placement}
+                        onRequestClose={this._closePopover.bind(this)}
+                        zIndex={this.props.zDepth}
                     >
-                        {this.props.popoverContent}
-                    </div>
-                </Popover>
+                        <div
+                            onMouseEnter={this._onHover.bind(this)}
+                            onMouseLeave={this._onHoverOff.bind(this)}
+                            onClick={this._closePopover.bind(this)}
+                        >
+                            {this.props.popoverContent}
+                        </div>
+                    </Popover>
+                }
             </div>
         );
     }
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
index fc7507475..cb68aeca1 100644
--- a/packages/website/ts/components/ui/overlay.tsx
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -29,4 +29,4 @@ Overlay.defaultProps = {
     onClick: _.noop.bind(_),
 };
 
-Overlay.displayName = 'Overlay';
+Overlay.displayName = 'Overlay';
\ No newline at end of file
diff --git a/packages/website/ts/components/ui/popover.tsx b/packages/website/ts/components/ui/popover.tsx
new file mode 100644
index 000000000..66c0ac663
--- /dev/null
+++ b/packages/website/ts/components/ui/popover.tsx
@@ -0,0 +1,59 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Placement, Popper, PopperChildrenProps } from 'react-popper';
+
+import { colors } from '@0xproject/react-shared';
+import { Container } from 'ts/components/ui/container';
+import { Overlay } from 'ts/components/ui/overlay';
+import { styled } from 'ts/style/theme';
+
+export interface PopoverProps {
+    anchorEl: HTMLInputElement;
+    placement?: Placement;
+    onRequestClose?: () => void;
+    zIndex?: number;
+}
+
+const PopoverContainer = styled.div`
+    background-color: ${colors.white};
+    max-height: 679px;
+    overflow-y: auto;
+    border-radius: 2px;
+`;
+
+const defaultPlacement: Placement = 'bottom';
+
+export class Popover extends React.Component<PopoverProps> {
+    public static defaultProps = {
+        placement: defaultPlacement,
+    };
+
+    public render(): React.ReactNode {
+        const { anchorEl, placement, zIndex, onRequestClose } = this.props;
+        const overlayStyleOverrides = {
+            zIndex,
+            backgroundColor: 'transparent',
+        };
+        return (
+            <div>
+                <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/>
+                <Popper referenceElement={anchorEl} placement="bottom" eventsEnabled={true}>
+                    {this._renderPopperChildren.bind(this)}
+                </Popper>
+            </div>
+        );
+    }
+    private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
+        const popperContainerStyleOverrids = {
+            zIndex: _.isUndefined(this.props.zIndex) ? undefined : this.props.zIndex + 1,
+        };
+        return (
+            <div ref={props.ref} style={{...props.style, ...popperContainerStyleOverrids}}>
+                <PopoverContainer>
+                    {this.props.children}
+                </PopoverContainer>
+            </div>
+        );
+    }
+}
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 6abaa840b..968377010 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -234,8 +234,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                         {!isMobile && <GoToAccountManagementSimpleMenuItem />}
                     </SimpleMenu>
                 }
-                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-                targetOrigin={{ horizontal: 'right', vertical: 'top' }}
                 zDepth={1}
                 activateEvent={DropdownMouseEvent.Click}
                 closeEvent={DropdownMouseEvent.Click}
-- 
cgit 


From ac1640140c9279ac9e8a92d84702a2f84d9165fb Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 28 Aug 2018 13:53:49 -0700
Subject: Enable hovering state for dropdown

---
 packages/website/ts/components/ui/drop_down.tsx  | 13 +++++++------
 packages/website/ts/components/ui/popover.tsx    |  3 ++-
 packages/website/ts/components/wallet/wallet.tsx |  1 +
 3 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 638b29f88..32105d353 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -32,8 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
-        activateEvent: DropdownMouseEvent.Click,
-        closeEvent: DropdownMouseEvent.Click,
+        activateEvent: DropdownMouseEvent.Hover,
+        closeEvent: DropdownMouseEvent.Hover,
     };
     private _popoverCloseCheckIntervalId: number;
     public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
@@ -77,8 +77,6 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                         zIndex={this.props.zDepth}
                     >
                         <div
-                            onMouseEnter={this._onHover.bind(this)}
-                            onMouseLeave={this._onHoverOff.bind(this)}
                             onClick={this._closePopover.bind(this)}
                         >
                             {this.props.popoverContent}
@@ -97,10 +95,13 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         }
     }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
-        this.setState({ isHovering: true });
+        this.setState({
+            isHovering: true,
+            anchorEl: event.currentTarget,
+        });
     }
     private _onHoverOff(): void {
-        this.setState({ isHovering: false });
+        this.setState({ isHovering: false, anchorEl: undefined });
     }
     private _checkIfShouldClosePopover(): void {
         if (!this.state.isDropDownOpen) {
diff --git a/packages/website/ts/components/ui/popover.tsx b/packages/website/ts/components/ui/popover.tsx
index 66c0ac663..556e8b110 100644
--- a/packages/website/ts/components/ui/popover.tsx
+++ b/packages/website/ts/components/ui/popover.tsx
@@ -20,6 +20,7 @@ const PopoverContainer = styled.div`
     max-height: 679px;
     overflow-y: auto;
     border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
 `;
 
 const defaultPlacement: Placement = 'bottom';
@@ -37,7 +38,7 @@ export class Popover extends React.Component<PopoverProps> {
         };
         return (
             <div>
-                <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/>
+                {/* <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/> */}
                 <Popper referenceElement={anchorEl} placement="bottom" eventsEnabled={true}>
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 968377010..191f3a18a 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -235,6 +235,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                     </SimpleMenu>
                 }
                 zDepth={1}
+                placement="right-end"
                 activateEvent={DropdownMouseEvent.Click}
                 closeEvent={DropdownMouseEvent.Click}
             />
-- 
cgit 


From 8e14e65b60bc4b94ba686c7bb5467bb4a5e2c645 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 28 Aug 2018 15:07:24 -0700
Subject: Revert "Enable hovering state for dropdown"

This reverts commit ac1640140c9279ac9e8a92d84702a2f84d9165fb.
---
 packages/website/ts/components/ui/drop_down.tsx  | 13 ++++++-------
 packages/website/ts/components/ui/popover.tsx    |  3 +--
 packages/website/ts/components/wallet/wallet.tsx |  1 -
 3 files changed, 7 insertions(+), 10 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 32105d353..638b29f88 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -32,8 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
-        activateEvent: DropdownMouseEvent.Hover,
-        closeEvent: DropdownMouseEvent.Hover,
+        activateEvent: DropdownMouseEvent.Click,
+        closeEvent: DropdownMouseEvent.Click,
     };
     private _popoverCloseCheckIntervalId: number;
     public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
@@ -77,6 +77,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                         zIndex={this.props.zDepth}
                     >
                         <div
+                            onMouseEnter={this._onHover.bind(this)}
+                            onMouseLeave={this._onHoverOff.bind(this)}
                             onClick={this._closePopover.bind(this)}
                         >
                             {this.props.popoverContent}
@@ -95,13 +97,10 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         }
     }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
-        this.setState({
-            isHovering: true,
-            anchorEl: event.currentTarget,
-        });
+        this.setState({ isHovering: true });
     }
     private _onHoverOff(): void {
-        this.setState({ isHovering: false, anchorEl: undefined });
+        this.setState({ isHovering: false });
     }
     private _checkIfShouldClosePopover(): void {
         if (!this.state.isDropDownOpen) {
diff --git a/packages/website/ts/components/ui/popover.tsx b/packages/website/ts/components/ui/popover.tsx
index 556e8b110..66c0ac663 100644
--- a/packages/website/ts/components/ui/popover.tsx
+++ b/packages/website/ts/components/ui/popover.tsx
@@ -20,7 +20,6 @@ const PopoverContainer = styled.div`
     max-height: 679px;
     overflow-y: auto;
     border-radius: 2px;
-    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
 `;
 
 const defaultPlacement: Placement = 'bottom';
@@ -38,7 +37,7 @@ export class Popover extends React.Component<PopoverProps> {
         };
         return (
             <div>
-                {/* <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/> */}
+                <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/>
                 <Popper referenceElement={anchorEl} placement="bottom" eventsEnabled={true}>
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 191f3a18a..968377010 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -235,7 +235,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                     </SimpleMenu>
                 }
                 zDepth={1}
-                placement="right-end"
                 activateEvent={DropdownMouseEvent.Click}
                 closeEvent={DropdownMouseEvent.Click}
             />
-- 
cgit 


From de11b62e30270ec72ad42c510989b5698339e590 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 28 Aug 2018 15:07:28 -0700
Subject: Revert "Have new Popover component working in React 16"

This reverts commit 5785ec0713c39466b3a6a171f5f0a2d38207b44b.
---
 .../ts/components/top_bar/provider_display.tsx     |  2 +
 packages/website/ts/components/top_bar/top_bar.tsx |  2 +
 packages/website/ts/components/ui/container.tsx    |  8 +--
 packages/website/ts/components/ui/drop_down.tsx    | 43 ++++++++--------
 packages/website/ts/components/ui/overlay.tsx      |  2 +-
 packages/website/ts/components/ui/popover.tsx      | 59 ----------------------
 packages/website/ts/components/wallet/wallet.tsx   |  2 +
 7 files changed, 34 insertions(+), 84 deletions(-)
 delete mode 100644 packages/website/ts/components/ui/popover.tsx

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 0a5c61776..806eaeea5 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -61,6 +61,8 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                 <DropDown
                     activeNode={activeNode}
                     popoverContent={this._renderPopoverContent()}
+                    anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
+                    targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
                     zDepth={1}
                 />
             </div>
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 3eef17746..8580c3a6e 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -276,6 +276,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                 <DropDown
                                     activeNode={activeNode}
                                     popoverContent={popoverContent}
+                                    anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
+                                    targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
                                     style={styles.menuItem}
                                 />
                                 <TopBarMenuItem
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index cf3ec41f2..f2ae68b70 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -26,10 +26,10 @@ export interface ContainerProps {
     className?: string;
     position?: 'absolute' | 'fixed' | 'relative' | 'unset';
     display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
-    top?: StringOrNum;
-    left?: StringOrNum;
-    right?: StringOrNum;
-    bottom?: StringOrNum;
+    top?: string;
+    left?: string;
+    right?: string;
+    bottom?: string;
     zIndex?: number;
     Tag?: ContainerTag;
     cursor?: string;
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 638b29f88..752c92e02 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -1,6 +1,6 @@
+import Popover from 'material-ui/Popover';
 import * as React from 'react';
-import { Placement } from 'react-popper';
-import { Popover } from 'ts/components/ui/popover';
+import { MaterialUIPosition } from 'ts/types';
 
 const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
 const DEFAULT_STYLE = {
@@ -15,7 +15,8 @@ export enum DropdownMouseEvent {
 export interface DropDownProps {
     activeNode: React.ReactNode;
     popoverContent: React.ReactNode;
-    placement?: Placement;
+    anchorOrigin: MaterialUIPosition;
+    targetOrigin: MaterialUIPosition;
     style?: React.CSSProperties;
     zDepth?: number;
     activateEvent?: DropdownMouseEvent;
@@ -32,8 +33,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
-        activateEvent: DropdownMouseEvent.Click,
-        closeEvent: DropdownMouseEvent.Click,
+        activateEvent: DropdownMouseEvent.Hover,
+        closeEvent: DropdownMouseEvent.Hover,
     };
     private _popoverCloseCheckIntervalId: number;
     public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
@@ -69,22 +70,24 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                 onMouseLeave={this._onHoverOff.bind(this)}
             >
                 <div onClick={this._onActiveNodeClick.bind(this)}>{this.props.activeNode}</div>
-                {this.state.isDropDownOpen &&
-                    <Popover
-                        anchorEl={this.state.anchorEl}
-                        placement={this.props.placement}
-                        onRequestClose={this._closePopover.bind(this)}
-                        zIndex={this.props.zDepth}
+                <Popover
+                    open={this.state.isDropDownOpen}
+                    anchorEl={this.state.anchorEl}
+                    anchorOrigin={this.props.anchorOrigin}
+                    targetOrigin={this.props.targetOrigin}
+                    onRequestClose={this._closePopover.bind(this)}
+                    useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
+                    animated={false}
+                    zDepth={this.props.zDepth}
+                >
+                    <div
+                        onMouseEnter={this._onHover.bind(this)}
+                        onMouseLeave={this._onHoverOff.bind(this)}
+                        onClick={this._closePopover.bind(this)}
                     >
-                        <div
-                            onMouseEnter={this._onHover.bind(this)}
-                            onMouseLeave={this._onHoverOff.bind(this)}
-                            onClick={this._closePopover.bind(this)}
-                        >
-                            {this.props.popoverContent}
-                        </div>
-                    </Popover>
-                }
+                        {this.props.popoverContent}
+                    </div>
+                </Popover>
             </div>
         );
     }
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
index cb68aeca1..fc7507475 100644
--- a/packages/website/ts/components/ui/overlay.tsx
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -29,4 +29,4 @@ Overlay.defaultProps = {
     onClick: _.noop.bind(_),
 };
 
-Overlay.displayName = 'Overlay';
\ No newline at end of file
+Overlay.displayName = 'Overlay';
diff --git a/packages/website/ts/components/ui/popover.tsx b/packages/website/ts/components/ui/popover.tsx
deleted file mode 100644
index 66c0ac663..000000000
--- a/packages/website/ts/components/ui/popover.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { Placement, Popper, PopperChildrenProps } from 'react-popper';
-
-import { colors } from '@0xproject/react-shared';
-import { Container } from 'ts/components/ui/container';
-import { Overlay } from 'ts/components/ui/overlay';
-import { styled } from 'ts/style/theme';
-
-export interface PopoverProps {
-    anchorEl: HTMLInputElement;
-    placement?: Placement;
-    onRequestClose?: () => void;
-    zIndex?: number;
-}
-
-const PopoverContainer = styled.div`
-    background-color: ${colors.white};
-    max-height: 679px;
-    overflow-y: auto;
-    border-radius: 2px;
-`;
-
-const defaultPlacement: Placement = 'bottom';
-
-export class Popover extends React.Component<PopoverProps> {
-    public static defaultProps = {
-        placement: defaultPlacement,
-    };
-
-    public render(): React.ReactNode {
-        const { anchorEl, placement, zIndex, onRequestClose } = this.props;
-        const overlayStyleOverrides = {
-            zIndex,
-            backgroundColor: 'transparent',
-        };
-        return (
-            <div>
-                <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/>
-                <Popper referenceElement={anchorEl} placement="bottom" eventsEnabled={true}>
-                    {this._renderPopperChildren.bind(this)}
-                </Popper>
-            </div>
-        );
-    }
-    private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
-        const popperContainerStyleOverrids = {
-            zIndex: _.isUndefined(this.props.zIndex) ? undefined : this.props.zIndex + 1,
-        };
-        return (
-            <div ref={props.ref} style={{...props.style, ...popperContainerStyleOverrids}}>
-                <PopoverContainer>
-                    {this.props.children}
-                </PopoverContainer>
-            </div>
-        );
-    }
-}
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 968377010..6abaa840b 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -234,6 +234,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                         {!isMobile && <GoToAccountManagementSimpleMenuItem />}
                     </SimpleMenu>
                 }
+                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                targetOrigin={{ horizontal: 'right', vertical: 'top' }}
                 zDepth={1}
                 activateEvent={DropdownMouseEvent.Click}
                 closeEvent={DropdownMouseEvent.Click}
-- 
cgit 


From 55fab3d98f8714d09906745922b59afbdc0de00d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 28 Aug 2018 15:07:29 -0700
Subject: Revert "Simplify dropdown component"

This reverts commit 91a9014a50cca8e0d42634666fe409839aeae8cf.
---
 packages/website/ts/components/ui/drop_down.tsx | 40 +++++++++++++++----------
 1 file changed, 25 insertions(+), 15 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 752c92e02..4d5caef08 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -25,7 +25,6 @@ export interface DropDownProps {
 
 interface DropDownState {
     isDropDownOpen: boolean;
-    isHovering: boolean;
     anchorEl?: HTMLInputElement;
 }
 
@@ -36,21 +35,11 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         activateEvent: DropdownMouseEvent.Hover,
         closeEvent: DropdownMouseEvent.Hover,
     };
+    private _isHovering: boolean;
     private _popoverCloseCheckIntervalId: number;
-    public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
-        switch (props.activateEvent) {
-            case DropdownMouseEvent.Click:
-                return { isDropDownOpen: state.isDropDownOpen };
-            case DropdownMouseEvent.Hover:
-                return { isDropDownOpen: state.isHovering };
-            default:
-                return {};
-        }
-    }
     constructor(props: DropDownProps) {
         super(props);
         this.state = {
-            isHovering: false,
             isDropDownOpen: false,
         };
     }
@@ -62,6 +51,15 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public componentWillUnmount(): void {
         window.clearInterval(this._popoverCloseCheckIntervalId);
     }
+    public componentWillReceiveProps(_nextProps: DropDownProps): void {
+        // HACK: If the popoverContent is updated to a different dimension and the users
+        // mouse is no longer above it, the dropdown can enter an inconsistent state where
+        // it believes the user is still hovering over it. In order to remedy this, we
+        // call hoverOff whenever the dropdown receives updated props. This is a hack
+        // because it will effectively close the dropdown on any prop update, barring
+        // dropdowns from having dynamic content.
+        this._onHoverOff();
+    }
     public render(): React.ReactNode {
         return (
             <div
@@ -100,16 +98,28 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         }
     }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
-        this.setState({ isHovering: true });
+        this._isHovering = true;
+        if (this.props.activateEvent === DropdownMouseEvent.Hover) {
+            this._checkIfShouldOpenPopover(event);
+        }
     }
     private _onHoverOff(): void {
-        this.setState({ isHovering: false });
+        this._isHovering = false;
+    }
+    private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void {
+        if (this.state.isDropDownOpen) {
+            return; // noop
+        }
+        this.setState({
+            isDropDownOpen: true,
+            anchorEl: event.currentTarget,
+        });
     }
     private _checkIfShouldClosePopover(): void {
         if (!this.state.isDropDownOpen) {
             return; // noop
         }
-        if (this.props.closeEvent === DropdownMouseEvent.Hover && !this.state.isHovering) {
+        if (this.props.closeEvent === DropdownMouseEvent.Hover && !this._isHovering) {
             this._closePopover();
         }
     }
-- 
cgit 


From 74d5af34ebf1e4d46a3cb13573d0793579454933 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 29 Aug 2018 16:33:08 -0700
Subject: Add TypedText component and use it on landing page

---
 packages/website/ts/components/ui/text.tsx       |  2 +
 packages/website/ts/components/ui/typed_text.tsx | 75 ++++++++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 packages/website/ts/components/ui/typed_text.tsx

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 734483564..cd8f290e3 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -20,6 +20,7 @@ export interface TextProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     hoverColor?: string;
     noWrap?: boolean;
+    display?: string;
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
@@ -41,6 +42,7 @@ export const Text = styled(PlainText)`
     ${props => (props.onClick ? 'cursor: pointer' : '')};
     transition: color 0.5s ease;
     ${props => (props.noWrap ? 'white-space: nowrap' : '')};
+    ${props => (props.display ? `display: ${props.display}` : '')};
     &:hover {
         ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')};
     }
diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx
new file mode 100644
index 000000000..a59309139
--- /dev/null
+++ b/packages/website/ts/components/ui/typed_text.tsx
@@ -0,0 +1,75 @@
+import * as _ from 'lodash';
+import { darken } from 'polished';
+import * as React from 'react';
+import Typist from 'react-typist';
+
+import { Text, TextProps } from 'ts/components/ui/text';
+
+import 'react-typist/dist/Typist.css';
+
+export interface TypedTextProps extends TextProps {
+    textList: string[];
+    shouldRepeat?: boolean;
+    wordDelayMs?: number;
+    avgKeystrokeDelayMs?: number;
+    stdKeystrokeDelay?: number;
+}
+
+export interface TypedTextState {
+    cycleCount: number;
+}
+
+export class TypedText extends React.Component<TypedTextProps, TypedTextState> {
+    public static defaultProps = {
+        shouldRepeat: false,
+        avgKeystrokeDelayMs: 90,
+        wordDelayMs: 1000,
+    };
+    public state = {
+        cycleCount: 0,
+    };
+    public render(): React.ReactNode {
+        const {
+            textList,
+            shouldRepeat,
+            wordDelayMs,
+            avgKeystrokeDelayMs,
+            stdKeystrokeDelay,
+            ...textProps
+        } = this.props;
+        const { cycleCount } = this.state;
+        if (_.isEmpty(textList)) {
+            return null;
+        }
+        const typistChildren: React.ReactNode[] = [];
+        _.forEach(textList, text => {
+            typistChildren.push(
+                <Text key={`text-${text}-${cycleCount}`} {...textProps}>
+                    {text}
+                </Text>,
+            );
+            if (wordDelayMs) {
+                typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />);
+            }
+            typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />);
+        });
+        return (
+            <Typist
+                avgTypingDelay={avgKeystrokeDelayMs}
+                stdTypingDelay={stdKeystrokeDelay}
+                className="inline"
+                key={`typist-key-${cycleCount}`}
+                onTypingDone={this._onTypingDone.bind(this)}
+            >
+                {typistChildren}
+            </Typist>
+        );
+    }
+    private _onTypingDone(): void {
+        if (this.props.shouldRepeat) {
+            this.setState({
+                cycleCount: this.state.cycleCount + 1,
+            });
+        }
+    }
+}
-- 
cgit 


From b1f97a27f3b0114ee1d9e648e0365932217c8dc8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 30 Aug 2018 11:37:58 -0700
Subject: Final tweaks

---
 packages/website/ts/components/ui/button.tsx     | 1 +
 packages/website/ts/components/ui/typed_text.tsx | 1 +
 2 files changed, 2 insertions(+)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 2952c8859..75ba7bcff 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -96,4 +96,5 @@ export const CallToAction: React.StatelessComponent<CallToActionProps> = ({
 CallToAction.defaultProps = {
     type: 'dark',
     fontSize: '14px',
+    padding: '0.9em 1.6em',
 };
diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx
index a59309139..2bb2d40b0 100644
--- a/packages/website/ts/components/ui/typed_text.tsx
+++ b/packages/website/ts/components/ui/typed_text.tsx
@@ -35,6 +35,7 @@ export class TypedText extends React.Component<TypedTextProps, TypedTextState> {
             wordDelayMs,
             avgKeystrokeDelayMs,
             stdKeystrokeDelay,
+            // tslint:disable-next-line
             ...textProps
         } = this.props;
         const { cycleCount } = this.state;
-- 
cgit 


From fd5ad69c268ef5411901d8ff24e429a7e0b4f888 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 30 Aug 2018 11:47:55 -0700
Subject: Add careers page to top bar

---
 packages/website/ts/components/top_bar/top_bar.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 8580c3a6e..1841d890b 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -238,7 +238,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         const fullWidthClasses = isExpandedDisplayType ? 'pr4' : '';
         const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
         const menuClasses = `col col-${
-            isExpandedDisplayType ? '4' : '5'
+            isExpandedDisplayType ? '4' : '6'
         } ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`;
         const menuIconStyle = {
             fontSize: 25,
@@ -301,6 +301,13 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                     isNightVersion={isNightVersion}
                                     isExternal={false}
                                 />
+                                <TopBarMenuItem
+                                    title={this.props.translate.get(Key.Careers, Deco.Cap)}
+                                    path={`${WebsitePaths.Careers}`}
+                                    style={styles.menuItem}
+                                    isNightVersion={isNightVersion}
+                                    isExternal={false}
+                                />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
                                     path={`${WebsitePaths.Portal}`}
@@ -406,6 +413,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     <Link to={`${WebsitePaths.About}`} className="text-decoration-none">
                         <MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem>
                     </Link>
+                    <Link to={`${WebsitePaths.Careers}`} className="text-decoration-none">
+                        <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem>
+                    </Link>
                     <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
                     </a>
-- 
cgit 


From 82a01ef0200571d7e9079647d6b70d2d25e6ce05 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 29 Aug 2018 14:33:55 -0700
Subject: Initial changes for v2 portal

---
 packages/website/ts/components/fill_order.tsx      | 116 +++++++++++----------
 packages/website/ts/components/fill_order_json.tsx |   6 +-
 .../generate_order/generate_order_form.tsx         |  48 +++++----
 .../website/ts/components/inputs/hash_input.tsx    |  28 ++---
 packages/website/ts/components/order_json.tsx      |   6 +-
 packages/website/ts/components/portal/portal.tsx   |   6 +-
 6 files changed, 112 insertions(+), 98 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 7da2e0870..60eccff34 100644
--- 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,
diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx
index 90eedbb18..1ecc426bd 100644
--- 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(
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 72efab033..9eb50f3d7 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 { 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,
diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx
index 8d9cdfc0b..5125ec4de 100644
--- 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;
     }
 }
diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx
index cf06f10c8..2a4d992a0 100644
--- 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,
         );
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index ff11880e3..047464e03 100644
--- 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);
-- 
cgit 


From 1d5ef4d0ca4d0c65b6b73c56eb18550840bbc936 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 30 Aug 2018 13:24:17 -0700
Subject: Fix unused vars for react-shared and website

---
 packages/website/ts/components/top_bar/top_bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 8580c3a6e..fdfed961c 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -19,7 +19,7 @@ import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
 import { Container } from 'ts/components/ui/container';
 import { DropDown } from 'ts/components/ui/drop_down';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
+import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
-- 
cgit 


From 660e670d381316f412e706a9d7ced66b6c48c18c Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 29 Aug 2018 23:41:09 -0700
Subject: Update generate and fill order flows

---
 packages/website/ts/components/fill_order.tsx      | 26 +++++-----------------
 .../generate_order/generate_order_form.tsx         |  7 +++---
 packages/website/ts/components/portal/portal.tsx   |  2 +-
 3 files changed, 11 insertions(+), 24 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 60eccff34..f24d065f4 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -26,6 +26,7 @@ import { AlertTypes, BlockchainErrs, PortalOrder, Token, TokenByAddress, Website
 import { analytics } from 'ts/utils/analytics';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
+import { orderParser } from 'ts/utils/order_parser';
 import { utils } from 'ts/utils/utils';
 
 interface FillOrderProps {
@@ -418,7 +419,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         let parsedOrder: PortalOrder;
         let orderHash: string;
         try {
-            const order = JSON.parse(orderJSON);
+            const order = orderParser.parseJsonString(orderJSON);
             const validationResult = validator.validate(order, portalOrderSchema);
             if (validationResult.errors.length > 0) {
                 orderJSONErrMsg = 'Submitted order JSON is not a valid order';
@@ -427,28 +428,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             }
             parsedOrder = order;
             const signedOrder = parsedOrder.signedOrder;
-            const zeroExOrder: ZeroExOrder = {
-                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 = orderHashUtils.getOrderHashHex(zeroExOrder);
+            orderHash = orderHashUtils.getOrderHashHex(signedOrder);
             const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
             const signature = signedOrder.signature;
-            const ecSignature = signatureUtils.parseECSignature(signature);
-            const isSignatureValid = signatureUtils.isValidECSignature(
+            const isSignatureValid = await this.props.blockchain.isValidSignatureAsync(
                 orderHash,
-                ecSignature,
+                signature,
                 signedOrder.makerAddress,
             );
             if (exchangeContractAddr !== signedOrder.exchangeAddress) {
@@ -500,6 +485,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             });
         }
 
+        console.log(parsedOrder);
         this.setState({
             didOrderValidationRun: true,
             orderJSON,
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 9eb50f3d7..bb6265170 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -331,7 +331,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
             salt: hashData.orderSalt,
             takerAddress: hashData.orderTakerAddress,
             takerFee: hashData.takerFee,
-            takerAssetData: hashData.receiveTokenContractAddr,
+            takerAssetData,
             takerAssetAmount: hashData.receiveAmount,
         };
         const orderHash = orderHashUtils.getOrderHashHex(zeroExOrder);
@@ -339,7 +339,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
         let globalErrMsg = '';
         let order;
         try {
-            const ecSignature = await this.props.blockchain.signOrderHashAsync(orderHash);
+            const signature = await this.props.blockchain.signOrderHashAsync(orderHash);
             order = utils.generateOrder(
                 exchangeAddress,
                 this.props.sideToAssetToken,
@@ -349,10 +349,11 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                 hashData.makerFee,
                 hashData.takerFee,
                 hashData.feeRecipientAddress,
-                ecSignature,
+                signature,
                 this.props.tokenByAddress,
                 hashData.orderSalt,
             );
+            console.log(order);
             const validationResult = validator.validate(order, portalOrderSchema);
             if (validationResult.errors.length > 0) {
                 globalErrMsg = 'Order signing failed. Please refresh and try again';
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 047464e03..b8d7ceea9 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -118,7 +118,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     private readonly _throttledScreenWidthUpdate: () => void;
     constructor(props: PortalProps) {
         super(props);
-        this._sharedOrderIfExists = orderParser.parse(window.location.search);
+        this._sharedOrderIfExists = orderParser.parseQueryString(window.location.search);
         this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
         const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER);
         const hasAcceptedDisclaimer =
-- 
cgit 


From 4f2bc29744b4daac08d4bc642fba63a0d8a8ca4b Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 30 Aug 2018 13:59:42 -0700
Subject: Remove cancel check

---
 packages/website/ts/components/fill_order.tsx | 5 -----
 1 file changed, 5 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index f24d065f4..95f2039b3 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -606,11 +606,6 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         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.takerAddress);
-        }
         if (!_.isEmpty(globalErrMsg)) {
             this.setState({
                 isCancelling: false,
-- 
cgit 


From f9e86c057de152fb0f3f157e0699bc5e13be798d Mon Sep 17 00:00:00 2001
From: Leonid Logvinov <logvinov.leon@gmail.com>
Date: Tue, 4 Sep 2018 16:08:35 +0200
Subject: Remove unused imports

---
 packages/website/ts/components/ui/typed_text.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx
index 2bb2d40b0..6d38580b9 100644
--- a/packages/website/ts/components/ui/typed_text.tsx
+++ b/packages/website/ts/components/ui/typed_text.tsx
@@ -1,5 +1,4 @@
 import * as _ from 'lodash';
-import { darken } from 'polished';
 import * as React from 'react';
 import Typist from 'react-typist';
 
-- 
cgit 


From 4883b8be108ea99162844d82983cbfb54a5cd46b Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 4 Sep 2018 18:37:33 +0100
Subject: remove console log

---
 packages/website/ts/components/generate_order/generate_order_form.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages/website/ts/components')

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 bb6265170..054b9524f 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -353,7 +353,6 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                 this.props.tokenByAddress,
                 hashData.orderSalt,
             );
-            console.log(order);
             const validationResult = validator.validate(order, portalOrderSchema);
             if (validationResult.errors.length > 0) {
                 globalErrMsg = 'Order signing failed. Please refresh and try again';
-- 
cgit 


From 1690f59857b14da5eccaaf6f9264b46aaddebe9e Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 4 Sep 2018 18:42:50 +0100
Subject: Remove unused imports and console.log

---
 packages/website/ts/components/fill_order.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 95f2039b3..4c7fa0356 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,6 +1,5 @@
-import { assetDataUtils, orderHashUtils, signatureUtils } from '@0xproject/order-utils';
+import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils';
 import { colors } from '@0xproject/react-shared';
-import { Order as ZeroExOrder } from '@0xproject/types';
 import { BigNumber, logUtils } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as accounting from 'accounting';
@@ -24,7 +23,6 @@ import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
 import { validator } from 'ts/schemas/validator';
 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';
 import { orderParser } from 'ts/utils/order_parser';
 import { utils } from 'ts/utils/utils';
@@ -485,7 +483,6 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             });
         }
 
-        console.log(parsedOrder);
         this.setState({
             didOrderValidationRun: true,
             orderJSON,
-- 
cgit 


From f5237f79716fb9ab5f16a64445fb21ea715d70b8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 4 Sep 2018 11:55:08 -0700
Subject: Use order parser utils from order utils

---
 packages/website/ts/components/fill_order.tsx                         | 4 +---
 packages/website/ts/components/generate_order/generate_order_form.tsx | 3 +--
 packages/website/ts/components/order_json.tsx                         | 1 -
 3 files changed, 2 insertions(+), 6 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 95f2039b3..d082b9f70 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,6 +1,5 @@
-import { assetDataUtils, orderHashUtils, signatureUtils } from '@0xproject/order-utils';
+import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils';
 import { colors } from '@0xproject/react-shared';
-import { Order as ZeroExOrder } from '@0xproject/types';
 import { BigNumber, logUtils } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as accounting from 'accounting';
@@ -24,7 +23,6 @@ import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
 import { validator } from 'ts/schemas/validator';
 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';
 import { orderParser } from 'ts/utils/order_parser';
 import { utils } from 'ts/utils/utils';
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 bb6265170..ec153c005 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -1,6 +1,6 @@
 import { assetDataUtils, generatePseudoRandomSalt, orderHashUtils } from '@0xproject/order-utils';
 import { colors } from '@0xproject/react-shared';
-import { ECSignature, Order as ZeroExOrder } from '@0xproject/types';
+import { Order as ZeroExOrder } from '@0xproject/types';
 import { BigNumber, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
@@ -353,7 +353,6 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
                 this.props.tokenByAddress,
                 hashData.orderSalt,
             );
-            console.log(order);
             const validationResult = validator.validate(order, portalOrderSchema);
             if (validationResult.errors.length > 0) {
                 globalErrMsg = 'Order signing failed. Please refresh and try again';
diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx
index 2a4d992a0..a2a53a523 100644
--- a/packages/website/ts/components/order_json.tsx
+++ b/packages/website/ts/components/order_json.tsx
@@ -1,4 +1,3 @@
-import { ECSignature } from '@0xproject/types';
 import { BigNumber, fetchAsync, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-- 
cgit 


From 46b168e10f3363096789d88a77b3578f2934ca70 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 4 Sep 2018 12:09:24 -0700
Subject: Run linter

---
 packages/website/ts/components/fill_order.tsx | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 4c7fa0356..3c3155349 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -600,9 +600,6 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
         let globalErrMsg = '';
         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);
         if (!_.isEmpty(globalErrMsg)) {
             this.setState({
                 isCancelling: false,
-- 
cgit 


From 8131c5d6bcf80a9d55bd881efe418d2b9fe8d29f Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 7 Sep 2018 13:03:02 +0200
Subject: Fix minting for new tokens on testnets

---
 packages/website/ts/components/token_balances.tsx | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 7e7a8d1fa..5965ad9bd 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -337,14 +337,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         const isMintable =
             (_.includes(configs.SYMBOLS_OF_MINTABLE_KOVAN_TOKENS, token.symbol) &&
                 this.props.networkId === sharedConstants.NETWORK_ID_BY_NAME[Networks.Kovan]) ||
-            (_.includes(configs.SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS, token.symbol) &&
-                _.includes(
-                    [
-                        sharedConstants.NETWORK_ID_BY_NAME[Networks.Rinkeby],
-                        sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten],
-                    ],
-                    this.props.networkId,
-                ));
+            (_.includes(configs.SYMBOLS_OF_MINTABLE_ROPSTEN_TOKENS, token.symbol) &&
+                this.props.networkId === sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten]);
         return (
             <TableRow key={token.address} style={{ height: TOKEN_TABLE_ROW_HEIGHT }}>
                 <TableRowColumn colSpan={tokenColSpan}>
@@ -392,14 +386,6 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                                 onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)}
                             />
                         )}
-                        {token.symbol === ZRX_TOKEN_SYMBOL && (
-                            <LifeCycleRaisedButton
-                                labelReady="Request"
-                                labelLoading="Sending..."
-                                labelComplete="Sent!"
-                                onClickAsyncFn={this._faucetRequestAsync.bind(this, false)}
-                            />
-                        )}
                     </TableRowColumn>
                 )}
                 {this.props.screenWidth !== ScreenWidths.Sm && (
-- 
cgit 


From e46807c28b0c915130b1b5e49d1c9f39f12751ae Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 18 Sep 2018 13:55:31 +0200
Subject: Fix order creation and fill flow in Portal

---
 packages/website/ts/components/inputs/token_amount_input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 93ef516cf..db093fb68 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -111,7 +111,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                 <span>
                     Insufficient allowance.{' '}
                     <Link
-                        to={`${WebsitePaths.Portal}/balances`}
+                        to={`${WebsitePaths.Portal}/account`}
                         style={{ cursor: 'pointer', color: colors.darkestGrey }}
                     >
                         Set allowance
-- 
cgit 


From d20f713fade2d23e847dfb349938730ca95cbf15 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 25 Sep 2018 21:08:32 +0200
Subject: When number of relayers is less than number of columns, reduce column
 number to number of relayers

---
 packages/website/ts/components/relayer_index/relayer_index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 4aea1bbbb..91dbeb27a 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -56,7 +56,11 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
                 </div>
             );
         } else {
-            const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth);
+            const numberOfRelayers = this.state.relayerInfos.length;
+            const numberOfColumns = Math.min(
+                numberOfRelayers,
+                this._numberOfColumnsForScreenWidth(this.props.screenWidth),
+            );
             return (
                 <GridList
                     cellHeight={CELL_HEIGHT}
-- 
cgit 


From d6090921a89ffbb5fc0ed8f51bc0d51dd901234b Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 26 Sep 2018 17:55:40 +0200
Subject: Update everything to Coinbase Wallet instead of Toshi

---
 .../ts/components/onboarding/install_wallet_onboarding_step.tsx     | 4 ++--
 packages/website/ts/components/wallet/body_overlay.tsx              | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
index d618c8318..1035d4ad9 100644
--- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
@@ -12,7 +12,7 @@ export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWallet
     const followupText = isOnMobile
         ? `Please revisit this site in your mobile dApp browser to continue!`
         : `Please refresh the page once you've done this to continue!`;
-    const downloadText = isOnMobile ? 'Get the Toshi Wallet' : 'Get the MetaMask extension';
+    const downloadText = isOnMobile ? 'Get Coinbase Wallet' : 'Get the MetaMask extension';
     return (
         <div className="flex items-center flex-column">
             <Text>First, you need to connect to a wallet. This will be used across all 0x relayers and dApps.</Text>
@@ -21,7 +21,7 @@ export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWallet
                     height="50px"
                     width="50px"
                     borderRadius="22%"
-                    src={isOnMobile ? '/images/toshi_logo.jpg' : '/images/metamask_icon.png'}
+                    src={isOnMobile ? '/images/coinbase_wallet_logo.png' : '/images/metamask_icon.png'}
                 />
                 <Container marginLeft="10px">
                     <a href={downloadLink} target="_blank">
diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx
index 26359d0d2..3795f0eaa 100644
--- a/packages/website/ts/components/wallet/body_overlay.tsx
+++ b/packages/website/ts/components/wallet/body_overlay.tsx
@@ -13,7 +13,7 @@ import { AccountState, ProviderType } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
 const METAMASK_IMG_SRC = '/images/metamask_icon.png';
-const TOSHI_IMG_SRC = '/images/toshi_logo.jpg';
+const COINBASE_WALLET_IMG_SRC = '/images/coinbase_wallet_logo.png';
 
 export interface BodyOverlayProps {
     dispatcher: Dispatcher;
@@ -116,8 +116,8 @@ const UseDifferentWallet = (props: UseDifferentWallet) => {
 
 const GetWalletCallToAction = () => {
     const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLinkAndIsMobile();
-    const imageUrl = isOnMobile ? TOSHI_IMG_SRC : METAMASK_IMG_SRC;
-    const text = isOnMobile ? 'Get Toshi Wallet' : 'Get MetaMask Wallet';
+    const imageUrl = isOnMobile ? COINBASE_WALLET_IMG_SRC : METAMASK_IMG_SRC;
+    const text = isOnMobile ? 'Get Coinbase Wallet' : 'Get MetaMask Wallet';
     return (
         <a href={downloadLink} target="_blank" style={{ textDecoration: 'none' }}>
             <Island
-- 
cgit 


From 48f6452c3b3540e2655868d854c200a12460e188 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 26 Sep 2018 17:58:48 +0200
Subject: remove items-center classname

---
 packages/website/ts/components/portal/portal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index b8d7ceea9..b42954f60 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -545,7 +545,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             <Section
                 header={!isMobile && <TextHeader labelText="0x Relayers" />}
                 body={
-                    <Container className="flex flex-column items-center">
+                    <Container className="flex flex-column">
                         {isMobile && (
                             <Container marginTop="20px" marginBottom="20px">
                                 {this._renderStartOnboarding()}
-- 
cgit