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>

1 files changed, 15 insertions, 18 deletions

diff --git a/ui/app/store/store.js b/ui/app/store/store.js
index 9f12f469e..2edb6a7d3 100644
--- a/ui/app/store/store.js
+++ b/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,
+    ),
+  ))
 }