diff --git a/package-lock.json b/package-lock.json index 4e47ec9b..06dc2704 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1114,7 +1114,7 @@ } }, "@etclabscore/ethereum-json-rpc-specification": { - "version": "git+https://github.com/etclabscore/ethereum-json-rpc-specification.git#4fc0e8749176cab05778c8e8619bc4a5a3c80d14", + "version": "git+https://github.com/etclabscore/ethereum-json-rpc-specification.git#9afdecaed30c181efb176749881279492069a7d6", "from": "git+https://github.com/etclabscore/ethereum-json-rpc-specification.git" }, "@etclabscore/jade-service-runner": { diff --git a/src/components/BlockList/BlockList.tsx b/src/components/BlockList/BlockList.tsx index 69b70833..fa93cb49 100644 --- a/src/components/BlockList/BlockList.tsx +++ b/src/components/BlockList/BlockList.tsx @@ -1,7 +1,7 @@ import { Table, TableBody, TableCell, TableHead, TableRow, Typography, LinearProgress } from "@material-ui/core"; import * as React from "react"; import Link from "@material-ui/core/Link"; -import { hexToDate, hexToNumber } from "@etclabscore/eserialize"; +import { hexToDate, hexToNumber, hexToString } from "@etclabscore/eserialize"; import { Link as RouterLink } from "react-router-dom"; import { useTranslation } from "react-i18next"; @@ -22,38 +22,87 @@ function BlockList({ blocks }: any) { + {t("Author")} {t("Block Number")} - {t("Hash")} {t("Timestamp")} - {t("Transactions")} + {t("#Txs")} {t("Gas Usage")} + {t("Gas Limit")} + {t("Uncles")} + {t("Hash")} - {sortedBlocks.map((b: any) => { + {sortedBlocks.map((b: any, index: number) => { const filledPercent = (hexToNumber(b.gasUsed) / hexToNumber(b.gasLimit)) * 100; + + // Shorten hash views by concatenating first and last 4 chars. + const blockHashShort = b.hash.substring(2, 6) + '—' + b.hash.substring(b.hash.length - 5, b.hash.length - 1); + const authorHashShort = b.miner.substring(2, 6) + '—' + b.miner.substring(b.miner.length - 5, b.miner.length - 1); + + // Colorize left border derived from author credit account. + const authorHashStyle = { + borderLeft: `1em solid #${b.miner.substring(2, 8)}`, + }; + + // Tally transactions which create contracts vs transactions with addresses. + var txTypes = { + create: 0, + transact: 0, + }; + + for (var i = 0; i < b.transactions.length; i++) { + if (b.transactions[i].to !== null) { + txTypes.transact++; + } else { + txTypes.create++; + } + } + + // Calculate difference of block timestamp from that of parent. + const timeDifferenceFromParent = (index === sortedBlocks.length-1) ? 0 : hexToNumber(b.timestamp) - hexToNumber(sortedBlocks[index+1].timestamp); + return ( - - {parseInt(b.number, 16)} + - + ( - + {children} )}> - {b.hash} + {authorHashShort} +  {hexToString(b.extraData).substring(0,20)} + + {parseInt(b.number, 16)} - {t("Timestamp Date", { date: hexToDate(b.timestamp) })} + {t("Timestamp Date", { date: hexToDate(b.timestamp) })} ({+timeDifferenceFromParent > 0 ? `+${timeDifferenceFromParent}` : `-${timeDifferenceFromParent}`}s) - {b.transactions.length} + {txTypes.transact}{txTypes.create === 0 ? "" : txTypes.create} + + {hexToNumber(b.gasLimit)} + + + {b.uncles.length === 0 ? '' : b.uncles.length} + + + ( + + {children} + + )}> + {blockHashShort} + + ); })} diff --git a/src/containers/Dashboard.tsx b/src/containers/Dashboard.tsx index 0cf3e3bd..7faa1c59 100644 --- a/src/containers/Dashboard.tsx +++ b/src/containers/Dashboard.tsx @@ -10,7 +10,6 @@ import useInterval from "use-interval"; import { useTheme } from "@material-ui/styles"; import getTheme from "../themes/victoryTheme"; import ChartCard from "../components/ChartCard"; -import BlockCardListContainer from "./BlockCardList"; import BlockListContainer from "./BlockList"; import { hexToNumber } from "@etclabscore/eserialize"; import EthereumJSONRPC from "@etclabscore/ethereum-json-rpc"; @@ -208,9 +207,8 @@ export default (props: any) => {
-