@dignifiedquire @victorbjelkholm could you help me with getting a good looking webpage for the demo?

Currently I've the skeleton which looks like this:

You can get to this page by:

git clone [email protected]:diasdavid/js-ethereum-libp2p.git
cd js-ethereum-libp2p
npm i
cd examples/webui 
npm i
npm run mon
# open localhost:9001

And the inspiration is to get something close to:

With an extra column (on the left for)

• 2 buttons one for "simulation" and another for "🌟" that execute two different functions
• An accounts box - This accounts box needs to be a map of {hash: balance} and I need to be able to set and reset given the hash
• A peers box - This is where we will be showing the peers connected through libp2p. So it will be a list of multiaddrs

With regards to blocks, a block looks like this:

{ header:
   { parentHash: '0x2ce94342df186bab4165c268c43ab982d360c9474f429fec5565adfc5d1f258b',
     uncleHash: '0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347',
     coinbase: '0xdd2f1e6e498202e86d8f5442af596580a4f03c2c',
     stateRoot: '0xe208bde4aebc06bbd749674bee4b6ea7eb0c90b2bd950e2bc67f11b4669d93df',
     transactionsTrie: '0x56e81f171bcc55a6ff8345e692c0f86e5b48e01b996cadc001622fb5e363b421',
     receiptTrie: '0x56e81f171bcc55a6ff8345e692c0f86e5b48e01b996cadc001622fb5e363b421',
     bloom: '0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
     difficulty: '0x03ff7fc008',
     number: '0x09',
     gasLimit: '0x1388',
     gasUsed: '0x',
     timestamp: '0x55ba42a3',
     extraData: '0x476574682f76312e302e302d30636463373634372f6c696e75782f676f312e34',
     mixHash: '0x75588cae5e63ea1ef3cebb72b06b983b5c18c078389d4a5134ac302181fd27b4',
     nonce: '0x5b2575f3f38a1310' },
  transactions: [],
  uncleHeaders: [] }

And I want to be able to show its number, timestamp and its parentHash. Blocks should be ordered ascending by number.

As for transactions, some blocks will have transactions. Still working on getting them properly exposed, will come back later with more info.

You can see an example of where the blocks come from at: https://github.com/diasdavid/js-ethereum-libp2p/blob/master/examples/run-through-blockchain/example.js

This is what will be running in the browser (the blocks will come through libp2p, instead of being loaded by a generated pre-set)

Feel free to change the whole setup of the page to React, if that makes you more productive and able to ship it on time.

@wanderer, I'm not getting to see any Tx coming on the beforeBlock and the afterBlock only returns an object with empty values. beforeTx and afterTx never fires, but I guess that is natural since we are not issuing transactions.

I guess I can take the real transactions from the block itself. Is there a way to see "what accounts do I know and what balance do these accounts have"?

It would be nice to a link to the modified geth client in the README

@wanderer @kumavis we've managed (me and @whyrusleeping) to get transactions to come through a go-ethereum+go-libp2p build to the node.js js-ethereum-libp2p.

You can try it by running this custom go-ethereum build - https://gist.github.com/whyrusleeping/b5e6a22a1369581ae6bd22260148caa1 and then running this script https://github.com/diasdavid/js-ethereum-libp2p/blob/master/examples/rx.js

We also added a way to fetch blocks from this go-ethereum/libp2p, attaching that to the js-ethereum-libp2p tomorrow :)