Environment

• use npm. DON'T USE yarn!
• gulp 4.0 — checkout package.json
  • both local/global
  • gulp 4.0 is out, so you would not run into issues like before
• reduce gulpfile to dev on "chrome"-only: git apply gulpfile.js.git-diff
• gulp dev, gulp build
• drop dist/chrome in Chrome extension page (dev mode). When it needs reloading, invoke location.refresh() in console.
• Workaround for npm failure, cb() never called: npm opens too many file descriptors during installing deps. The limit (e.g. 1024 on Linux) should be raised by a command sudo prlimit -n65536 -p $$.

Redux devtool injection

also remove UPDATE_METAMASK_STATE in case of frequent various updates. In ui/app/store.js:

import { composeWithDevTools } from 'remote-redux-devtools'

const composeEnhancers = composeWithDevTools({
  realtime: true,
  port: 55555,
  host: 'localhost',
  actionsBlacklist: [
    'UPDATE_METAMASK_STATE',
  ]
})

const middlewares = [thunkMiddleware, loggerMiddleware]

// const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore)
const createStoreWithMiddleware = composeEnhancers(applyMiddleware(...middlewares))(createStore)

Here, a local RemoteDev server is used instead of the default server (on Heroku, btw), which tends to be slow. It is launched by remotedev --hostname=localhost --port=55555.

PoC

Here are some early results of tweaking the code.

app/scripts/

• contentscript.js: duplex stream to communicate with FE
• controllers/: main controllers and states

Quick example: auto enter password

ui/app/components/pages/unlock-page/unlock-page-component.js

  constructor (props) {
    super(props)

    this.state = {
-     password: '',
+     password: '12345678',
      error: null,
    }

    this.submitting = false
    this.animationEventEmitter = new EventEmitter()
  }

Ref. Redux, immutable