Add React and Redux DevTools (#6793)

* Add React and Redux DevTools

* Conditionally load react-devtools

* Add start:dev npm script to run the app with devtools

Co-Authored-By: Mark Stacey <markjstacey@gmail.com>

README.md

@@ -19,6 +19,8 @@ To learn how to contribute to the MetaMask project itself, visit our [Internal D
     - If you have issues with node-sass compilation, try `npm rebuild node-sass`
 - Build the project to the `./dist/` folder with `npm run dist`.
 - Optionally, to start a development build (e.g. with logging and file watching) run `npm start` instead.
+    - To start the [React DevTools](https://github.com/facebook/react-devtools) and [Redux DevTools Extension](http://extension.remotedev.io)
+      alongside the app, use `npm run start:dev`. You'll need to install the Redux DevTools to access Redux state logs.
 
 Uncompressed builds can be found in `/dist`, compressed builds can be found in `/builds` once they're built.
 

development/require-react-devtools.js

@@ -0,0 +1 @@
+require('react-devtools')

gulpfile.js

@@ -485,8 +485,12 @@ function generateBundler (opts, performBundle) {
   })
 
   if (!opts.buildLib) {
+    if (opts.devMode && opts.filename === 'ui.js') {
+      browserifyOpts['entries'] = ['./development/require-react-devtools.js', opts.filepath]
+    } else {
       browserifyOpts['entries'] = [opts.filepath]
     }
+  }
 
   let bundler = browserify(browserifyOpts)
     .transform('babelify')

package.json

@@ -36,6 +36,9 @@
     "lint:fix": "eslint . --fix",
     "mozilla-lint": "addons-linter dist/firefox",
     "watch": "cross-env METAMASK_ENV=test mocha --watch --require test/setup.js --reporter min --recursive \"test/unit/**/*.js\" \"ui/app/**/*.test.js\"",
+    "devtools:react": "react-devtools",
+    "devtools:redux": "remotedev --hostname=localhost --port=8000",
+    "start:dev": "concurrently -k -n build,react,redux npm:start npm:devtools:react npm:devtools:redux",
     "announce": "node development/announcer.js",
     "version:bump": "node development/run-version-bump.js",
     "storybook": "start-storybook -p 6006 -c .storybook",
@@ -248,9 +251,12 @@
     "qs": "^6.2.0",
     "qunitjs": "^2.4.1",
     "radgrad-jsdoc-template": "^1.1.3",
+    "react-devtools": "^3.6.1",
     "react-test-renderer": "^15.6.2",
     "redux-mock-store": "^1.5.3",
     "redux-test-utils": "^0.2.2",
+    "remote-redux-devtools": "^0.5.16",
+    "remotedev-server": "^0.3.1",
     "resolve-url-loader": "^2.3.0",
     "rimraf": "^2.6.2",
     "sass-loader": "^7.0.1",

ui/app/store/store.js

@@ -1,21 +1,18 @@
-const createStore = require('redux').createStore
-const applyMiddleware = require('redux').applyMiddleware
-const thunkMiddleware = require('redux-thunk').default
+const { createStore, applyMiddleware } = require('redux')
+const { default: thunkMiddleware } = require('redux-thunk')
+const { composeWithDevTools } = require('remote-redux-devtools')
 const rootReducer = require('../ducks')
-const createLogger = require('redux-logger').createLogger
 
-global.METAMASK_DEBUG = process.env.METAMASK_DEBUG
-
-module.exports = configureStore
-
-const loggerMiddleware = createLogger({
-  predicate: () => global.METAMASK_DEBUG,
-})
-
-const middlewares = [thunkMiddleware, loggerMiddleware]
-
-const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore)
-
-function configureStore (initialState) {
-  return createStoreWithMiddleware(rootReducer, initialState)
+module.exports = function configureStore (initialState) {
+  const composeEnhancers = composeWithDevTools({
+    name: 'MetaMask',
+    hostname: 'localhost',
+    port: 8000,
+    realtime: Boolean(process.env.METAMASK_DEBUG),
+  })
+  return createStore(rootReducer, initialState, composeEnhancers(
+    applyMiddleware(
+      thunkMiddleware,
+    ),
+  ))
 }