[WIP] examples(webui): convert to react

examples/webui/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "parser": "babel-eslint",
+  "extends": ["standard", "standard-react"]
+}

examples/webui/package.json

@@ -7,14 +7,14 @@
     "build-clean": "rm -r build",
     "build-assets": "cp -r src/assets build",
     "build-views": "pug src/views -o build --pretty",
-    "build-js": "aegir-build",
-    "build-css": "lessc --clean-css src/styles/page.less build/css/page.min.css",
-    "build": "npm run build-assets && npm run build-views && npm run build-js && npm run build-css",
+    "build-js": "webpack",
+    "build": "npm run build-assets && npm run build-views && npm run build-js",
     "release": "npm run build && mv build release",
     "serve": "static -p 9001 build",
     "mon": "nodemon --exec 'npm run build && npm run serve' --watch src -e js,pug,less",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "sig": "star-sig --port=20000"
+    "sig": "star-sig --port=20000",
+    "lint": "eslint src/app/**/*.js"
   },
   "keywords": [
     "libp2p",
@@ -24,13 +24,48 @@
   "author": "David Dias <daviddias@ipfs.io>",
   "license": "MIT",
   "devDependencies": {
-    "aegir": "diasdavid/aegir#f655e4ac670bbec6542f7ed561f925b07778cc6c",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.2.5",
+    "babel-polyfill": "^6.13.0",
+    "babel-preset-es2015": "^6.14.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0",
+    "brfs": "^1.4.3",
+    "browserify-zlib": "github:ipfs/browserify-zlib#master",
+    "css-loader": "^0.25.0",
+    "eslint": "^3.5.0",
+    "eslint-config-standard": "^6.0.1",
+    "eslint-config-standard-react": "^4.0.2",
+    "https-browserify": "0.0.1",
+    "json-loader": "^0.5.4",
     "less": "^2.7.1",
+    "less-loader": "^2.2.3",
     "less-plugin-clean-css": "^1.5.1",
     "libp2p-webrtc-star": "^0.4.4",
     "node-static": "^0.7.8",
     "nodemon": "^1.10.2",
     "pug": "^2.0.0-beta6",
-    "pug-cli": "^1.0.0-alpha6"
+    "pug-cli": "^1.0.0-alpha6",
+    "redux-logger": "^2.6.1",
+    "stream-http": "^2.4.0",
+    "style-loader": "^0.13.1",
+    "transform-loader": "^0.2.3",
+    "url-loader": "^0.5.7",
+    "webpack": "^2.1.0-beta.23"
+  },
+  "dependencies": {
+    "elemental": "^0.6.1",
+    "moment": "^2.15.0",
+    "react": "^15.3.2",
+    "react-addons-css-transition-group": "^15.3.2",
+    "react-addons-shallow-compare": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-redux": "^4.4.5",
+    "react-router": "^2.8.1",
+    "react-router-redux": "^4.0.5",
+    "react-tap-event-plugin": "^1.0.0",
+    "react-virtualized": "^8.0.5",
+    "redux": "^3.6.0",
+    "redux-thunk": "^2.1.0"
   }
 }

examples/webui/src/app/actions/accounts.js

@@ -0,0 +1,43 @@
+const Account = require('ethereumjs-account')
+
+export const ADD_OR_UPDATE_ACCOUNT = 'ADD_OR_UPDATE_ACCOUNT'
+
+export function received (coinbase, account) {
+  return {
+    type: ADD_OR_UPDATE_ACCOUNT,
+    id: coinbase,
+    account: account,
+    status: 'received'
+  }
+}
+
+export function processed (coinbase, account) {
+  return {
+    type: ADD_OR_UPDATE_ACCOUNT,
+    id: coinbase,
+    account: account,
+    status: 'processed'
+  }
+}
+
+export function before (node, coinbase) {
+  return (dispatch) => {
+    node.vm.trie.get(coinbase, (err, account) => {
+      if (err) {
+        return console.error(err)
+      }
+      dispatch(received(coinbase, new Account(account)))
+    })
+  }
+}
+
+export function after (node, coinbase) {
+  return (dispatch) => {
+    node.vm.trie.get(coinbase, (err, account) => {
+      if (err) {
+        return console.error(err)
+      }
+      dispatch(processed(coinbase, new Account(account)))
+    })
+  }
+}

examples/webui/src/app/actions/blocks.js

@@ -0,0 +1,17 @@
+export const ADD_BLOCK = 'ADD_BLOCK'
+
+export function addBefore (block) {
+  return {
+    type: ADD_BLOCK,
+    block: block,
+    status: 'received'
+  }
+}
+
+export function addAfter (block) {
+  return {
+    type: ADD_BLOCK,
+    block: block,
+    status: 'processed'
+  }
+}

examples/webui/src/app/actions/buttons.js

@@ -0,0 +1,144 @@
+import Block from 'ethereumjs-block'
+import blocks from '../../../../../test/data/real-chain/first-1000-blocks.json'
+import PeerId from 'peer-id'
+import PeerInfo from 'peer-info'
+import multiaddr from 'multiaddr'
+import relayPeerIdJson from '../../../../../test/data/relay-peer.json'
+
+const limitedBlocks = blocks.slice(1, 6)
+
+export const SET_CURRENT_HEAD = 'SET_CURRENT_HEAD'
+export const START = 'START_PROCESSING'
+export const STOP = 'STOP_PROCESSING'
+
+export function start (prop) {
+  return {
+    type: START,
+    prop: prop
+  }
+}
+
+export function stop (prop) {
+  return {
+    type: STOP,
+    prop: prop
+  }
+}
+
+export function setCurrentHead (head) {
+  return {
+    type: SET_CURRENT_HEAD,
+    head: head
+  }
+}
+
+export function simulate () {
+  return (dispatch, getState, getNode) => {
+    dispatch(start('simulate'))
+    return getNode.then((node) => {
+      return Promise.all(limitedBlocks.map((raw) => {
+        const block = new Block(new Buffer(raw.slice(2), 'hex'))
+        return putBlock(node, block)
+      }))
+      .then(() => runBlockchain(node))
+      .then(() => getHead(node))
+      .then(() => updateHead(dispatch, node))
+      .then(() => dispatch(stop('simulate')))
+    })
+  }
+}
+
+export function sync () {
+  return (dispatch, getState, getNode) => {
+    dispatch(start('sync'))
+    return getNode.then((node) => {
+      return callSync(node)
+      .then(() => runBlockchain(node))
+      .then(() => getHead(node))
+      .then(() => updateHead(dispatch, node))
+      .then(() => dispatch(stop('sync')))
+    })
+  }
+}
+
+export function star () {
+  return (dispatch, getState, getNode) => {
+    dispatch(start('star'))
+
+    return getNode.then((node) => {
+      return Promise.all([
+        pullBlockchain(dispatch, node),
+        callSync(node, relayInfo())
+      ])
+      .then(([i, _]) => clearInterval(i))
+      .then(() => dispatch(stop('star')))
+    })
+  }
+}
+
+function updateHead (dispatch, node) {
+  const head = '0x' + node.vm._blockchain.meta.rawHead.toString('hex')
+  dispatch(setCurrentHead(head))
+}
+
+function runBlockchain (node) {
+  return new Promise((resolve, reject) => {
+    node.vm.runBlockchain((err) => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+}
+
+function getHead (node) {
+  return new Promise((resolve, reject) => {
+    node.vm.blockchain.getHead((err, block) => {
+      if (err) return reject(err)
+      resolve(block)
+    })
+  })
+}
+
+function callSync (node, info) {
+  return new Promise((resolve, reject) => {
+    node.block.sync(info, (err) => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+}
+
+function putBlock (node, block) {
+  return new Promise((resolve, reject) => {
+    node.vm._blockchain.putBlock(block, (err) => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+}
+
+function relayInfo () {
+  const relayId = PeerId.createFromJSON(relayPeerIdJson)
+  const relayma = multiaddr('/ip4/127.0.0.1/tcp/33333/ws')
+  const relayInfo = new PeerInfo(relayId)
+  relayInfo.multiaddr.add(relayma)
+
+  return relayInfo
+}
+
+function pullBlockchain (dispatch, node) {
+  return new Promise((resolve, reject) => {
+    let running
+    setTimeout(() => {
+      resolve(setInterval(() => {
+        if (running) return
+        running = true
+
+        runBlockchain(node).then(() => {
+          running = false
+          updateHead(dispatch, node)
+        })
+      }, 2000))
+    }, 2000)
+  })
+}

examples/webui/src/app/actions/errors.js

@@ -0,0 +1,5 @@
+import {action} from './utils'
+
+export const RESET_ERROR_MESSAGE = 'RESET_ERROR_MESSAGE'
+
+export const resetErrorMessage = () => action(RESET_ERROR_MESSAGE)

examples/webui/src/app/actions/home.js

@@ -0,0 +1,39 @@
+import * as blocks from './blocks'
+import * as accounts from './accounts'
+import * as peers from './peers'
+
+export function start () {
+  return (dispatch, getState, getNode) => {
+    return getNode.then((node) => {
+      let current
+      node.vm.on('beforeBlock', (block, cb) => {
+        current = block
+        dispatch(blocks.addBefore(block))
+        dispatch(accounts.before(node, block.header.coinbase))
+        cb()
+      })
+
+      node.vm.on('afterBlock', (res, cb) => {
+        dispatch(blocks.addAfter(current))
+        dispatch(accounts.after(node, current.header.coinbase))
+        cb()
+      })
+
+      node.libp2p.swarm.on('peer-mux-established', (peer) => {
+        dispatch(peers.add(peer))
+      })
+
+      node.libp2p.swarm.on('peer-mux-closed', (peer) => {
+        dispatch(peers.remove(peer))
+      })
+    })
+  }
+}
+
+export function stop () {
+  return (dispatch, getState, getNode) => {
+    return getNode.then((node) => {
+      node.stop()
+    })
+  }
+}

examples/webui/src/app/actions/index.js

@@ -0,0 +1,26 @@
+// Broken because of https://phabricator.babeljs.io/T2877
+// export * from './pages'
+// export * from './errors'
+
+// export * from './home'
+
+// Workaround
+
+import * as errors from './errors'
+import * as router from './router'
+
+import * as home from './home'
+import * as accounts from './accounts'
+import * as blocks from './blocks'
+import * as peers from './peers'
+import * as transactions from './transactions'
+import * as buttons from './buttons'
+
+export {errors}
+export {router}
+export {home}
+export {accounts}
+export {blocks}
+export {peers}
+export {transactions}
+export {buttons}

examples/webui/src/app/actions/pages.js

@@ -0,0 +1,3 @@
+import {createPage} from './utils'
+
+export const {HOME, home} = createPage('home')

examples/webui/src/app/actions/peers.js

@@ -0,0 +1,16 @@
+export const ADD_PEER = 'ADD_PEER'
+export const REMOVE_PEER = 'REMOVE_PEER'
+
+export function add (peer) {
+  return {
+    type: ADD_PEER,
+    peer: peer
+  }
+}
+
+export function remove (peer) {
+  return {
+    type: REMOVE_PEER,
+    peer: peer
+  }
+}