2c:null 2d:["$","title",null,{"children":"Ethereum Block Explorer | Geoff Lamperd | Observable"}] 32:T1087,blockChart = { const t = svg.transition().duration(1000); const newBlock = selection => { console.log("enter", selection.nodes().length); // Start the new block group at the centre, but invisible const selg = selection .append("g") .attr("class", "block") .attr( "transform", (d, i) => `translate(${blockRect.x + blockRect.width / 2},${scaleY(i) + blockRect.height / 2}) scale(0.1)` ) .attr("opacity", "0") .on("click", d => showDetail(d)); selg .append("rect") .attr("x", 0) .attr("y", 0) .attr("height", blockRect.height) .attr("width", blockRect.width) .attr("rx", "5") .attr("fill", "steelblue"); selg .append("text") .attr("id", "number") .text(d => '#' + d.number) .attr("fill", "white") .attr("font-family", "Helvetica, sans-serif") .attr("font-size", "8") .attr("x", 5) .attr("y", 10); selg .append("text") .attr("id", "time") .text(d => moment(d.time).fromNow()) .attr("fill", "white") .attr("font-family", "Helvetica, sans-serif") .attr("font-size", "6") .attr("x", 5) .attr("dy", 18); selg .append("text") .text(d => `${web3.utils.hexToNumberString(d.transactions.length)} tx`) .attr("fill", "white") .attr("font-family", "Helvetica, sans-serif") .attr("font-size", "6") .attr("x", 60) .attr("y", 16); selg .append("text") .text(d => { const gas = web3.utils.hexToNumber(d.gasUsed); const gasStr = gas > 1000000 ? (gas / 1000000).toFixed(2) + 'M' : (gas / 1000).toFixed(0) + 'k'; return `${gasStr} gas`; }) .attr("fill", "white") .attr("font-family", "Helvetica, sans-serif") .attr("font-size", "6") .attr("x", 50) .attr("y", 8); // Transition it to full size and the top block's opacity. selg.call( sel => sel .interrupt() .transition(t) .delay(2000) .attr( "transform", (d, i) => `translate(${blockRect.x},${scaleY(i)}) scale(1)` ) .attr("opacity", "0.3") //.each("end", console.log("enter tr end")) ); return selg; }; const updateBlock = selection => { console.log("update", selection.nodes().length); const updateSel = selection .on("click", d => showDetail(d)) .call(sel => { //console.log('in update call ', sel.nodes()); sel .interrupt() .selectAll('*') .interrupt(); // Transition to the next position sel .transition(t) .delay((d, i) => (20 - i) * 100) .attr("transform", (d, i) => `translate(${blockRect.x},${scaleY(i)})`) .attr("opacity", (d, i) => 0.3 + i / (20 * 0.7)) // Update time text .select("#time") .text(d => moment(d.time).fromNow()); }); return updateSel; }; // Remove old blocks const removeBlock = selection => { console.log('remove', selection.nodes().length); return ( selection .interrupt() // .transition(t) // .attr("opacity", 0) .remove() ); }; // Main loop to collect blocks as they arise svg .append("text") .text("Blocks") .attr("x", margins.left) .attr("y", margins.top - 5) .style("font-size", "6") .attr("fill", "white"); const blocks = []; for await (const blkPromise of getBlocks()) { const blk = await blkPromise; //console.log('xgenerator input', blk); if (blk) { console.log('generator input', blk.number); if (blocks.unshift(blk) > 20) { blocks.pop; } console.log('animate ', blocks.length); const blox = svg.selectAll(".block"); const blocData = blox.data(blocks, d => d.number); blocData.join( enter => newBlock(enter), update => updateBlock(update), exit => removeBlock(exit) ); yield svg.node(); //await t.end(); await Promises.tick(100); } yield svg.node(); } }33:T93c,showAccounts = selection => { const newAccount = selection => { //console.log("accs enter", selection.nodes().length); // Start the new block group at the centre, but invisible const selg = selection .append("g") .attr("class", "account") .attr( "transform", (d, i) => `translate(${(i % 4) * accBox.xseparation},${Math.floor(i / 4) * accBox.yseparation})` ); //.on("click", d => console.log('acc...', d)); selg .append("rect") .attr("x", 0) .attr("y", 0) .attr("height", accBox.height) .attr("width", accBox.width) .attr("rx", "5") .attr("fill", "#189AB4"); const bal = selg .append("text") .attr("class", "balance") .text(d => d3.format('.4s')(d.balance)) .attr("fill", "white") .attr("font-family", "Helvetica, sans-serif") .attr("font-size", "10") .attr("text-anchor", "middle") .attr("x", 40) .attr("y", 18); selg .append("text") .text(d => d.address.substring(0, 20) + '...') .attr("fill", "white") .attr("font-family", "Helvetica, sans-serif") .attr("font-size", "6") .attr("x", 5) .attr("y", 8); return selg; }; const updateAccount = selection => { //console.log("update", selection.nodes().length); const updateSel = selection; selection.select(".balance").text(d => d3.format('.4s')(d.balance)); return selection; }; // Remove old accs const removeAccount = selection => { //console.log('remove', selection.nodes().length); return selection.remove(); }; var accGrp = selection.select('#accountg'); if (accGrp.nodes().length == 0) { accGrp = selection .append("g") .attr("id", "accountg") .attr("transform", `translate(120, ${margins.top})`) .style("color", "white"); accGrp .append("text") .text("Account Balances") .attr("x", "0") .attr("y", "-5") .style("font-size", "6") .attr("fill", "white"); } //console.log('accountsData', accountsData.length); const acc = accGrp.selectAll(".account"); const accData = acc.data(accountsData, d => d.address); accData.join( enter => newAccount(enter), update => updateAccount(update), exit => removeAccount(exit) ); //return svg.node(); }34:T5bd,// Show detail for a block/address/transaction showDetail = d => { console.log("show detail data for ", d); const enterData = sel => { // Top group is same for all types const grp = sel .append("g") .classed("detail", true) .attr("transform", "translate(120, 110)") .style("fill", "white") .style("font-family", "Helvetica, sans-serif") .style("font-size", "8") .attr("dy", "20"); const rect = grp .append("rect") .attr("width", "350") .attr("height", "500") .attr("cr", "10") .style("fill", backgroundColour.darker(1.5)) .attr("opacity", "0.25"); if (d.type === "block") { grp.call(addBlockText); } else if (d.type === "account") { grp.call(addAccountText); } else if (d.type === 'transaction') { grp.call(addTransactionText); } }; //const updateData = sel => {}; const updateData = selection => { if (d.type === 'account') { selection.select("#balance").text(d => `Balance: ${d.balance} eth`); selection.select("#nonce").text(d => `Transaction Count: ${d.txCount}`); } }; const details = svg .selectAll(".detail") .data([d], d => d.id) // All types must have an id and type .join( enter => enterData(enter), update => updateData(update), exit => { //console.log('detail exit', exit.nodes().length); return exit.remove(); } ); return svg.node(); }35:T44a,addBlockText = grp => { console.log("show block data for "); const text = grp.append("text").attr("x", 5); text .append("tspan") .text(d => `Block Number ${d.number}`) .style("font-size", "12") .attr("dy", "20"); text .append("tspan") .text(d => `Hash: ${d.hash}`) .attr("x", "5") .attr("dy", "20"); text .append("tspan") .text(d => `Time: ${moment(d.time).format()}`) .attr("x", "5") .attr("dy", "18"); text .append("tspan") .text( d => `${d.transactions.length} Transaction${ d.transactions.length > 1 ? 's' : '' }` ) .attr("x", "5") .attr("dy", "18"); text .append("tspan") .text(d => `Size: ${web3.utils.toDecimal(d.size)}`) .attr("x", "100"); text .append("tspan") .text(d => `Gas Limit: ${web3.utils.toDecimal(d.gasLimit)}`) .attr("x", "5") .attr("dy", "18"); text .append("tspan") .text(d => `Gas Used: ${web3.utils.toDecimal(d.gasUsed)}`) .attr("x", "100"); // Transactions transactionsTable(grp, grp.datum().transactions); }36:T59a,addTransactionText = grp => { console.log('showTx '); const text = grp.append("text").attr("x", 5); text .append("tspan") .text(d => `Transaction Hash ${d.hash}`) .style("font-size", "12") .attr("dy", "20"); text .append("tspan") .text(d => `Block: ${web3.utils.hexToNumberString(d.blockNumber)}`) .attr("x", "5") .attr("dy", "20"); text .append("tspan") .text(d => `From: ${d.from}`) .attr("x", "5") .attr("dy", "18"); text .append("tspan") .text(d => `Nonce: ${web3.utils.hexToNumberString(d.nonce)}`) .attr("x", "220"); text .append("tspan") .text(d => `To: ${d.to}`) .attr("x", "5") .attr("dy", "18"); text .append("tspan") .text(d => `Value: ${web3.utils.fromWei(d.value)} eth`) .attr("x", "5") .attr("dy", "18"); text .append("tspan") .text( d => `Gas Used: ${d3.format(",")(web3.utils.hexToNumberString(d.gas))}` ) .attr("x", "5") .attr("dy", "18"); text .append("tspan") .text(d => `Gas Price: ${web3.utils.fromWei(d.gasPrice, 'gwei')} gwei`) .attr("x", "80"); text .append("tspan") .text(d => { const gasCost = (d.gas * d.gasPrice) / 10e+12; return `Gas Cost: ${d3.format(',')(gasCost)} microether`; }) .attr("x", "160"); text .append("tspan") .text(d => `Input: ${d.input}`) .attr("x", "5") .attr("dy", "18"); return grp; }37:Td20,transactionsTable = async (grp, tx) => { // Transactions //console.log("tx ", tx); const txTable = grp .append("svg:foreignObject") .attr("x", 5) .attr("y", 100) .attr("width", 330) .attr("height", 400) .append("xhtml:body") .append("table") .style("color", "white") .style("font-family", "Helvetica, sans-serif") .style("font-size", "8px") //.style("table-layout", "fixed") .style("text-overflow", "ellipsis") .style("overflow", "hidden") .style("white-space", "pre-wrap") .style("bottom-border", "none"); const tHead = txTable.append("thead"); tHead .append("tr") //.attr("background-color", backgroundColour.brighter(2)) .append("th") .attr("colspan", "3") .style("bottom-border", "0px") .append("text") .text("Transactions"); const tBody = txTable.append("tbody"); tx.forEach((trx, j) => { const tRow = tBody.append("tr").data([{ hash: trx }]); // expand indicator const expand = tRow .append("td") .style("vertical-align", "baseline") .append("svg") .attr("width", "6") .attr("height", "6") .append("path") .attr("d", d => { console.log('txd ', d); return "M0 0 L3 3 L0 6 Z"; }) .attr("fill", "white") .attr("stroke", "white"); // index tRow .append("td") .text(j + ':') .style("vertical-align", "baseline"); // tx hash const dataCell = tRow.append("td").style("nowrap", ""); dataCell .append("g") .append("text") .text(trx); tRow.on("click", async (d, k) => { d3.event.stopPropagation(); console.log('tx click', k); var txData = tRow.datum(); txData.isExpanded = !txData.isExpanded; if (txData.isExpanded) { expand.attr("d", "M0 0 H6 L3 3 Z"); dataCell.style("background-color", backgroundColour.brighter(0.5)); if (!txData.isRetrieved) { txData.tx = await getTransaction(txData.hash); console.log('tx', txData.tx); txData.isRetrieved = true; } const detail = dataCell .append("g") .classed("detail", true) .attr("id", (d, i) => "txdetail" + i); const gasCost = ( web3.utils.fromWei(txData.tx.gasPrice, 'micro') * web3.utils.hexToNumber(txData.tx.gas) ).toFixed(0); detail.html( `
From: ${txData.tx.from}
` + `To: ${txData.tx.to}
` + `Value: ${web3.utils.fromWei( txData.tx.value )} eth Nonce: ${web3.utils.hexToNumberString( txData.tx.nonce )}
` + `Gas: ${web3.utils.hexToNumberString( txData.tx.gas )} ` + `Gas Price: ${web3.utils.fromWei( txData.tx.gasPrice, 'gwei' )} gwei ` + `Gas Cost: ${gasCost} microether
` + `Input: ${txData.tx.input}` ); } else { // Remove detail elements expand.attr("d", "M0 0 L3 3 L0 6 Z"); dataCell.select(".detail").remove(); dataCell.style("background-color", backgroundColour); } tRow.datum(txData); }); }); }38:[] 30:{"id":"b84e2b29290f9c1a","slug":"ethereum-block-explorer","title":"Ethereum Block Explorer","thumbnail":"9c4e2b89cda41e64159bb13fb6a4133932ad657bfead3cdc505e3e32ba1a0a88","access_level":"public","create_time":"$D2020-03-15T23:10:44.520Z","update_time":"$D2020-03-25T02:43:35.533Z","view_time":null,"first_public_time":"$D2020-03-25T02:34:41.513Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"af8c329ba897d13b","login":"dalaillaama","name":"Geoff Lamperd","avatar_url":"https://avatars-next.observableusercontent.com/7245a8f6a4ddeeba4031d86f35399fb06ce947c86fba74c8ce58c2137ab0bb02","tier":"starter_2024","bio":"Full-stack developer: Ethereum"},"version":1131,"publish_version":1131,"role":null,"authored":false,"authors":[{"type":"individual","id":"720eaba439794657","login":"dalaillaama","name":"Geoff Lamperd","avatar_url":"https://avatars-next.observableusercontent.com/7245a8f6a4ddeeba4031d86f35399fb06ce947c86fba74c8ce58c2137ab0bb02","tier":null,"bio":"Full-stack developer: Ethereum"}],"members":[{"type":"individual","id":"720eaba439794657","login":"dalaillaama","name":"Geoff Lamperd","avatar_url":"https://avatars-next.observableusercontent.com/7245a8f6a4ddeeba4031d86f35399fb06ce947c86fba74c8ce58c2137ab0bb02","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ethereum Block Explorer","cells":[{"id":0,"value":"md`# Ethereum Block Explorer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"viewof settingsGui = wrapGUI(\n State({\n search: State.Section(\n {\n Address_TxHash_BlockNum: '',\n Search: () => {\n console.log(\n 'Search',\n document.getElementsByName('search.Address_TxHash_BlockNum')[0]\n .value\n );\n mutable searchClicked = true;\n }\n },\n { label: 'Search' }\n ),\n\n nodeUrl: 'http://localhost:8545'\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"addAccountText = grp => {\n console.log('showAccount ');\n\n const text = grp.append(\"text\").attr(\"x\", 5);\n text\n .append(\"tspan\")\n .text(d => `Address ${d.address}`)\n .style(\"font-size\", \"12\")\n .attr(\"dy\", \"20\");\n text\n .append(\"tspan\")\n .attr(\"id\", \"balance\")\n .text(d => `Balance: ${d3.format(',')(d.balance)}`)\n .attr(\"x\", \"5\")\n .attr(\"dy\", \"20\");\n text\n .append(\"tspan\")\n .attr(\"id\", \"nonce\")\n .text(d => `Transaction Count: ${d.txCount}`)\n .attr(\"x\", \"5\")\n .attr(\"dy\", \"18\");\n grp.call(d => {\n if (d.isContract) {\n text\n .append(\"tspan\")\n .text(d => `Contract Code: ${d.contractCode}`)\n .attr(\"x\", \"5\")\n .attr(\"dy\", \"18\");\n }\n });\n return grp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"doSearch = async searchString => {\n console.log(searchString);\n if (searchString.startsWith('0x')) {\n // Does the string look like an address?\n if (searchString.length == 42) {\n console.log('address', searchString);\n const acc = await getAccount(searchString);\n showDetail(acc);\n } else {\n // Does the string look like a tx hash?\n console.log('tx hash ', searchString);\n const tx = await getTransaction(searchString);\n showDetail(tx);\n }\n } else {\n // Does the string look like a block number?\n const blkNum = parseInt(searchString);\n if (!Number.isNaN(blkNum)) {\n // Get block and display it\n console.log('blkNum', blkNum);\n const blk = await getBlock(blkNum);\n showDetail(blk);\n } else {\n console.log('Could not recognise search string ', searchString);\n }\n mutable searchClicked = false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"header = sel => {\n var group = svg.selectAll(\".header\");\n\n if (group.empty()) {\n group = sel\n .append(\"g\")\n .classed(\"header\", true)\n .attr(\"transform\", \"translate(20, 10)\");\n\n group\n .append(\"circle\")\n .attr(\"cx\", 0)\n .attr(\"cy\", -3)\n .attr(\"r\", 3)\n .attr(\"fill\", isConnected ? \"lightgreen\" : \"red\");\n group\n .append(\"text\")\n .text(`Node URL: ${url} Network ID: ${nodeVersionResponse.result}`)\n .attr(\"fill\", \"white\")\n .attr(\"font-size\", 8)\n .attr(\"x\", 10)\n .attr(\"y\", 0);\n } else {\n group\n .select(\"text\")\n .text(`Node URL: ${url} Network ID: ${nodeVersionResponse.result}`);\n group.select(\"circle\").attr(\"fill\", isConnected ? \"lightgreen\" : \"red\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"getAccount = async address => {\n const acc = { address, balance: 0, txCount: 0, id: address, type: 'account' };\n acc.balance = await accountBalance(address);\n acc.txCount = await accountTxCount(address);\n acc.contractCode = await accountContractCode(address);\n acc.isContract = acc.contractCode.length > 2;\n return acc;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"{\n svg.call(header);\n svg.call(showAccounts);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"// Search - wait for click to go\n{\n if (settingsGui.search.Address_TxHash_BlockNum) {\n console.log('have search term');\n if (searchClicked) {\n doSearch(settingsGui.search.Address_TxHash_BlockNum);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"mutable searchClicked = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"font\", \"10px sans-serif\")\n .style(\"user-select\", \"none\")\n .style(\"background-color\", backgroundColour)\n .style(\"color\", \"#ffffff\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"backgroundColour = d3.rgb(\"#023770\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"getTransaction = async hash => {\n const tx = await rpcCallResult(\"eth_getTransactionByHash\", [hash]);\n tx.id = tx.hash;\n tx.type = 'transaction';\n return tx;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"async function* getBlocks() {\n // Initial fetch - last 20 blocks\n console.log('block ', blockNumber, Math.max(blockNumber - 20, 0));\n for (var i = Math.max(blockNumber - 19, 0); i <= blockNumber; i++) {\n //console.log('loop ', i);\n yield getBlock(i);\n }\n\n // Get a filter for new blocks\n // TODO - resolve why it sometimes returns the 2nd last block retrieved earlier\n const filterId = await rpcCallResult('eth_newBlockFilter');\n\n var restart = false;\n //invalidation().then(() => (restart = true));\n while (!restart) {\n //console.log('waiting');\n await Promises.delay(10000);\n const newBlks = await rpcCallResult('eth_getFilterChanges', [filterId]);\n //console.log('new blocks', newBlks.length);\n for (var i = 0; i < newBlks.length; i++) {\n const hash = newBlks[i];\n console.log('new block hash', hash);\n yield getBlockByHash(hash);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"//latestBlock = getLatestBlock()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"getBlock = async blkNum => {\n const blkParam =\n blkNum === 'latest' ? blkNum : web3.utils.fromDecimal(blkNum);\n const blockData = await rpcCallResult(\"eth_getBlockByNumber\", [\n blkParam,\n false\n ]);\n return addBlockMetadata(blockData);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"getBlockByHash = async hash => {\n const blockData = await rpcCallResult(\"eth_getBlockByHash\", [hash, false]);\n return addBlockMetadata(blockData);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"addBlockMetadata = block => {\n return {\n ...block,\n number: parseInt(block.number, 16),\n time: parseInt(block.timestamp, 16) * 1000,\n id: block.hash,\n type: 'block'\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"getLatestBlock = async () => {\n return getBlock('latest');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"//accountBalance(coinbase)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"accountContractCode = async address => {\n const params = [address, 'latest'];\n const resp = await rpcCallResult(\"eth_getCode\", params);\n return resp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"accountTxCount = async address => {\n const params = [address, 'latest'];\n const resp = await rpcCallResult(\"eth_getTransactionCount\", params);\n return web3.utils.hexToNumber(resp);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"accountBalance = async address => {\n const params = [address, 'latest'];\n const resp = await rpcCallResult(\"eth_getBalance\", params);\n return web3.utils.fromWei(resp);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"blockNumber = parseInt(await rpcCallResult(\"eth_blockNumber\"), 16)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"accountsData = {\n var data = [];\n accountsList.forEach(async i => {\n var account = { address: i };\n account.balance = await accountBalance(i);\n data.push(account);\n });\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"accountsList = rpcCallResult(\"eth_accounts\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"//coinbase = rpcCallResult(\"eth_coinbase\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"nodeVersionResponse = rpcCall(\"net_version\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"mutable initialFetch = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"rpcCallResult = async (method, params = []) => {\n const resp = await rpcCall(method, params);\n if (resp.result) {\n mutable isConnected = true;\n return resp.result;\n }\n mutable isConnected = false;\n return resp.error;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"rpcCall = async (requestMethod, params) => {\n return d3.json(url, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n jsonrpc: \"2.0\",\n method: requestMethod,\n params: params,\n id: 1\n })\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"mutable isConnected = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"mutable displayTab = 'blocks'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"scaleY = d3.scaleLinear([0, 20], [margins.top, height - margins.bottom])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"scaleX = d3.scaleLinear([0, 100], [margins.left, width - margins.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"accBox = ({ width: 80, height: 20, xseparation: 85, yseparation: 25 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"blockRect = ({ x: 20, width: 80, height: 20 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"margins = ({ top: 30, bottom: 10, left: 20, right: 20 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"width = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"url = settingsGui.nodeUrl","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"import { wrapGUI } from '@rreusser/control-panel-2-prototype-test'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"State = require('https://unpkg.com/controls-state@2.0.0/dist/controls-state.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"moment = require(\"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"web3 = require(\"https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"md`## License\n\nThe code in this notebook is MIT Licensed.\n\nCopyright (c) 2020 Stonebell Consulting Pty Ltd`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"