React 16 (#7174)

* Update packages to use React 16

* Rollback to react-router v3

* Use component instead of pure one

* Remove warning about mobx

* Make webpack load css from @parity/ui

* Update enzyme to support react16

* Fix lint

* Use @parity/ui v3

* Update refs of plugin-signer-* deps

* Exclude plugin-signer-* from babel processing

* Reupdate refs to old method

* Update refs again

js/package.json

@@ -76,7 +76,7 @@
     "babel-register": "6.26.0",
     "chai": "3.5.0",
     "chai-as-promised": "6.0.0",
-    "chai-enzyme": "0.6.1",
+    "chai-enzyme": "1.0.0-beta.0",
     "chalk": "1.1.3",
     "copy-webpack-plugin": "4.0.1",
     "core-js": "2.4.1",
@@ -87,7 +87,8 @@
     "ejsify": "1.0.0",
     "electron": "1.7.5",
     "empty-module": "0.0.2",
-    "enzyme": "2.9.1",
+    "enzyme": "3.2.0",
+    "enzyme-adapter-react-16": "1.1.0",
     "eslint": "3.16.1",
     "eslint-config-semistandard": "7.0.0",
     "eslint-config-standard": "6.2.1",
@@ -120,8 +121,8 @@
     "progress": "1.1.8",
     "raw-loader": "0.5.1",
     "react-addons-perf": "15.4.2",
-    "react-addons-test-utils": "15.4.2",
-    "react-hot-loader": "3.0.0-beta.6",
+    "react-addons-test-utils": "15.6.2",
+    "react-hot-loader": "3.1.3",
     "react-intl-aggregate-webpack-plugin": "0.0.1",
     "rimraf": "2.6.2",
     "sinon": "1.17.7",
@@ -150,22 +151,27 @@
     "@parity/plugin-signer-hardware": "paritytech/plugin-signer-hardware",
     "@parity/plugin-signer-qr": "paritytech/plugin-signer-qr",
     "@parity/shared": "2.2.x",
-    "@parity/ui": "2.2.x",
+    "@parity/ui": "3.0.x",
     "keythereum": "1.0.2",
     "lodash.flatten": "4.4.0",
     "lodash.omitby": "4.6.0",
     "lodash.throttle": "4.1.1",
     "lodash.uniq": "4.5.0",
     "material-ui": "0.16.5",
+    "mobx": "3.3.2",
+    "mobx-react": "4.3.5",
     "prop-types": "15.5.10",
     "query-string": "5.0.1",
-    "react": "15.6.1",
-    "react-dom": "15.6.1",
-    "react-intl": "2.1.5",
-    "react-markdown": "2.5.0",
-    "react-router": "3.0.0",
-    "react-tap-event-plugin": "2.0.1",
-    "redux": "3.6.0",
+    "react": "16.1.1",
+    "react-dom": "16.1.1",
+    "react-intl": "2.4.0",
+    "react-markdown": "3.0.2",
+    "react-redux": "^5.0.6",
+    "react-router": "3.2.0",
+    "react-router-redux": "4.0.8",
+    "react-tap-event-plugin": "3.0.2",
+    "react-transition-group": "2.2.1",
+    "redux": "3.7.2",
     "solc": "ngotchac/solc-js",
     "store": "1.3.20",
     "web3": "0.17.0-beta"

js/src/Dapp/dapp.css

@@ -23,7 +23,6 @@
   opacity: 0;
   width: 100%;
   z-index: 1;
-  background: white;
 }
 
 .full {

js/src/DappRequests/dappRequests.js

@@ -15,13 +15,13 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import { observer } from 'mobx-react';
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 
 import RequestGroups from './RequestGroups';
 import Store from './store';
 import styles from './dappRequests.css';
 
-class DappRequests extends PureComponent {
+class DappRequests extends Component {
   store = Store.get();
 
   handleApproveRequestGroup = requestIds => {

js/src/index.parity.js

@@ -40,12 +40,17 @@ injectTapEventPlugin();
 
 window.React = window.React || React;
 
+// FIXME
+// Not working with React 16
+// https://reactjs.org/docs/perf.html
+/*
 if (process.env.NODE_ENV === 'development') {
   // Expose the React Performance Tools on the`window` object
   const Perf = require('react-addons-perf');
 
   window.Perf = Perf;
 }
+*/
 
 const AUTH_HASH = '#/auth?';
 

js/src/shellMiddleware.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import mobx from 'mobx';
+import * as mobx from 'mobx';
 import flatten from 'lodash.flatten';
 
 import { sha3 } from '@parity/api/lib/util/sha3';

js/test/mocha.config.js

@@ -23,6 +23,8 @@ es6Promise.polyfill();
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import chai from 'chai';
 import chaiAsPromised from 'chai-as-promised';
 import chaiEnzyme from 'chai-enzyme';
@@ -31,6 +33,7 @@ import sinonChai from 'sinon-chai';
 import { WebSocket } from 'mock-socket';
 import jsdom from 'jsdom';
 
+Enzyme.configure({ adapter: new Adapter() });
 chai.use(chaiAsPromised);
 chai.use(chaiEnzyme());
 chai.use(sinonChai);
@@ -44,7 +47,7 @@ global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
 global.window = document.defaultView;
 global.navigator = global.window.navigator;
 global.location = global.window.location;
-global.Blob = () => {};
+global.Blob = () => { };
 
 // attach mocked localStorage onto the window as exposed by jsdom
 global.window.localStorage = global.localStorage;

js/webpack/app.js

@@ -69,12 +69,12 @@ module.exports = {
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        use: [ {
+        use: [{
           loader: 'happypack/loader',
           options: {
             id: 'babel'
           }
-        } ]
+        }]
       },
       {
         test: /\.json$/,
@@ -90,7 +90,7 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        include: /semantic-ui-css/,
+        include: /semantic-ui-css|@parity\/ui/,
         use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
           use: [
@@ -105,7 +105,7 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        exclude: /semantic-ui-css/,
+        exclude: /semantic-ui-css|@parity\/ui/,
         use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
           use: [
@@ -231,17 +231,17 @@ module.exports = {
                     isProd ? null : 'dist.css.map',
                     isProd ? null : 'dist.js.map'
                   ]
-                  .filter((file) => file)
-                  .map((file) => path.join(dir, file))
-                  .filter((from) => fs.existsSync(from))
-                  .map((from) => ({
-                    from,
-                    to: `dapps/${destination}/`
-                  }))
-                  .concat({
-                    from: path.join(dir, 'dist'),
-                    to: `dapps/${destination}/dist/`
-                  });
+                    .filter((file) => file)
+                    .map((file) => path.join(dir, file))
+                    .filter((from) => fs.existsSync(from))
+                    .map((from) => ({
+                      from,
+                      to: `dapps/${destination}/`
+                    }))
+                    .concat({
+                      from: path.join(dir, 'dist'),
+                      to: `dapps/${destination}/dist/`
+                    });
                 })
                 .filter((copy) => copy)
             )