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);

js/webpack/app.js

@@ -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: [