Merge pull request #1023 from 0xProject/website/feature/react-16

[website] Upgrade all the things to React 16

18 files changed, 47 insertions, 51 deletions

diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index edd55a9b5..f58156cf4 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -36,7 +36,7 @@
         "@0xproject/react-shared": "^1.0.8",
         "@0xproject/utils": "^1.0.7",
         "@types/lodash": "4.14.104",
-        "@types/material-ui": "0.18.0",
+        "@types/material-ui": "^0.20.0",
         "@types/node": "^8.0.53",
         "@types/react": "*",
         "@types/react-dom": "*",
@@ -44,9 +44,9 @@
         "basscss": "^8.0.3",
         "compare-versions": "^3.0.1",
         "lodash": "^4.17.5",
-        "material-ui": "^0.17.1",
-        "react": "15.6.1",
-        "react-dom": "15.6.1",
+        "material-ui": "^0.20.0",
+        "react": "^16.4.2",
+        "react-dom": "^16.4.2",
         "react-markdown": "^3.2.2",
         "react-scroll": "0xproject/react-scroll#similar-to-pr-330",
         "react-tooltip": "^3.2.7",
diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json
index eb6679044..57aa9d51d 100644
--- a/packages/react-shared/package.json
+++ b/packages/react-shared/package.json
@@ -33,6 +33,7 @@
         "typescript": "3.0.1"
     },
     "dependencies": {
+        "@material-ui/core": "^3.0.1",
         "@types/is-mobile": "0.3.0",
         "@types/lodash": "4.14.104",
         "@types/material-ui": "0.18.0",
@@ -44,13 +45,12 @@
         "change-case": "^3.0.2",
         "is-mobile": "^0.2.2",
         "lodash": "^4.17.5",
-        "material-ui": "^0.17.1",
-        "react": "15.6.1",
-        "react-dom": "15.6.1",
-        "react-highlight": "0xproject/react-highlight",
+        "material-ui": "^0.20.0",
+        "react": "^16.4.2",
+        "react-dom": "^16.4.2",
+        "react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162",
         "react-markdown": "^3.2.2",
-        "react-scroll": "0xproject/react-scroll#similar-to-pr-330",
-        "react-tap-event-plugin": "^2.0.1"
+        "react-scroll": "0xproject/react-scroll#similar-to-pr-330"
     },
     "publishConfig": {
         "access": "public"
diff --git a/packages/react-shared/src/components/version_drop_down.tsx b/packages/react-shared/src/components/version_drop_down.tsx
index e41590957..5ff4bed54 100644
--- a/packages/react-shared/src/components/version_drop_down.tsx
+++ b/packages/react-shared/src/components/version_drop_down.tsx
@@ -1,6 +1,6 @@
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
 import * as _ from 'lodash';
-import DropDownMenu from 'material-ui/DropDownMenu';
-import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
 
 export interface VersionDropDownProps {
@@ -15,23 +15,23 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
     public render(): React.ReactNode {
         return (
             <div className="mx-auto" style={{ width: 120 }}>
-                <DropDownMenu
-                    maxHeight={300}
-                    value={this.props.selectedVersion}
-                    onChange={this._updateSelectedVersion.bind(this)}
-                >
+                <Select value={this.props.selectedVersion} onChange={this._updateSelectedVersion.bind(this)}>
                     {this._renderDropDownItems()}
-                </DropDownMenu>
+                </Select>
             </div>
         );
     }
     private _renderDropDownItems(): React.ReactNode[] {
         const items = _.map(this.props.versions, version => {
-            return <MenuItem key={version} value={version} primaryText={`v${version}`} />;
+            return (
+                <MenuItem key={version} value={version}>
+                    v{version}
+                </MenuItem>
+            );
         });
         return items;
     }
-    private _updateSelectedVersion(_e: any, _index: number, semver: string): void {
-        this.props.onVersionSelected(semver);
+    private _updateSelectedVersion(event: React.ChangeEvent<HTMLSelectElement>): void {
+        this.props.onVersionSelected(event.target.value);
     }
 }
diff --git a/packages/website/package.json b/packages/website/package.json
index 9b6a0ba36..3b6754fb3 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -21,7 +21,7 @@
         "@0xproject/contract-wrappers": "^0.0.5",
         "@0xproject/order-utils": "^0.0.9",
         "@0xproject/react-docs": "^1.0.7",
-        "@0xproject/react-shared": "^0.2.3",
+        "@0xproject/react-shared": "^1.0.8",
         "@0xproject/subproviders": "^2.0.1",
         "@0xproject/types": "^0.8.1",
         "@0xproject/typescript-typings": "^0.4.3",
@@ -37,21 +37,20 @@
         "jsonschema": "^1.2.0",
         "less": "^2.7.2",
         "lodash": "^4.17.5",
-        "material-ui": "^0.17.1",
+        "material-ui": "^0.20.0",
         "moment": "2.21.0",
         "numeral": "^2.0.6",
         "polished": "^1.9.2",
         "query-string": "^6.0.0",
-        "react": "15.6.1",
-        "react-copy-to-clipboard": "^4.2.3",
+        "react": "^16.4.2",
+        "react-copy-to-clipboard": "^5.0.0",
         "react-document-title": "^2.0.3",
-        "react-dom": "15.6.1",
+        "react-dom": "^16.4.2",
         "react-helmet": "^5.2.0",
         "react-popper": "^1.0.0-beta.6",
         "react-redux": "^5.0.3",
         "react-router-dom": "^4.1.1",
         "react-scroll": "0xproject/react-scroll#similar-to-pr-330",
-        "react-tap-event-plugin": "^2.0.1",
         "react-tooltip": "^3.2.7",
         "redux": "^3.6.0",
         "redux-devtools-extension": "^2.13.2",
@@ -69,13 +68,13 @@
         "@types/find-versions": "^2.0.0",
         "@types/jsonschema": "^1.1.1",
         "@types/lodash": "4.14.104",
-        "@types/material-ui": "0.18.0",
+        "@types/material-ui": "^0.20.0",
         "@types/node": "^8.0.53",
         "@types/numeral": "^0.0.22",
         "@types/query-string": "^5.1.0",
-        "@types/react": "16.3.13",
+        "@types/react": "^16.4.2",
         "@types/react-copy-to-clipboard": "^4.2.0",
-        "@types/react-dom": "^16.0.3",
+        "@types/react-dom": "^16.0.7",
         "@types/react-helmet": "^5.0.6",
         "@types/react-redux": "^4.4.37",
         "@types/react-router-dom": "^4.0.4",
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}
             />
         );
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 981c6f2cb..9e59b00ac 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
-import * as injectTapEventPlugin from 'react-tap-event-plugin';
 import { MetaTags } from 'ts/components/meta_tags';
 import { About } from 'ts/containers/about';
 import { FAQ } from 'ts/containers/faq';
@@ -17,8 +16,6 @@ import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage';
 import { store } from 'ts/redux/store';
 import { WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
 import { muiTheme } from 'ts/utils/mui_theme';
-// Polyfills
-injectTapEventPlugin();
 
 // Check if we've introduced an update that requires us to clear the tradeHistory local storage entries
 tradeHistoryStorage.clearIfRequired();