@dignifiedquire @victorbjelkholm could you help me with getting a good looking webpage for the demo?
Currently I've the skeleton which looks like this:
![image](https://cloud.githubusercontent.com/assets/1211152/18619770/76c471ce-7e37-11e6-837a-4f5c35af32be.png)
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:
![image](https://cloud.githubusercontent.com/assets/1211152/18619778/a5b9c79a-7e37-11e6-95e2-f7fa83c34eb3.png)
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.