Merge pull request #230 from meowsbits/dev/isaac

experimental: isaac's hacks
etclabscore · Jan 10, 2020 · 8062f68 · 8062f68
2 parents 96e603e + 4125a35
commit 8062f68
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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) {
       <Table>
         <TableHead>
           <TableRow>
+            <TableCell><Typography>{t("Author")}</Typography></TableCell>
             <TableCell><Typography>{t("Block Number")}</Typography></TableCell>
-            <TableCell><Typography>{t("Hash")}</Typography></TableCell>
             <TableCell><Typography>{t("Timestamp")}</Typography></TableCell>
-            <TableCell><Typography>{t("Transactions")}</Typography></TableCell>
+            <TableCell><Typography>{t("#Txs")}</Typography></TableCell>
             <TableCell><Typography>{t("Gas Usage")}</Typography></TableCell>
+            <TableCell><Typography>{t("Gas Limit")}</Typography></TableCell>
+            <TableCell><Typography>{t("Uncles")}</Typography></TableCell>
+            <TableCell><Typography>{t("Hash")}</Typography></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {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 (
-              <TableRow key={b.number}>
-                <TableCell component="th" scope="row"><Typography>{parseInt(b.number, 16)}</Typography></TableCell>
+              <TableRow key={b.number} style={authorHashStyle}>
                 <TableCell style={rightPaddingFix}>
-                  <Link
+                <Typography>
+                <Link
                     component={({ className, children }: { children: any, className: string }) => (
-                      <RouterLink className={className} to={`/block/${b.hash}`} >
+                      <RouterLink className={className} to={`/address/${b.miner}`} >
                         {children}
                       </RouterLink>
                     )}>
-                    {b.hash}
+                    {authorHashShort}
                   </Link>
+                  &nbsp;<sup>{hexToString(b.extraData).substring(0,20)}</sup>
+                  </Typography>
                 </TableCell>
+                <TableCell component="th" scope="row"><Typography>{parseInt(b.number, 16)}</Typography></TableCell>
                 <TableCell style={rightPaddingFix}>
-                  <Typography>{t("Timestamp Date", { date: hexToDate(b.timestamp) })}</Typography>
+                  <Typography>{t("Timestamp Date", { date: hexToDate(b.timestamp) })}&nbsp;<sub>({+timeDifferenceFromParent > 0 ? `+${timeDifferenceFromParent}` : `-${timeDifferenceFromParent}`}s)</sub></Typography>
                 </TableCell>
                 <TableCell style={rightPaddingFix}>
-                  <Typography>{b.transactions.length}</Typography>
+                  <Typography><sub>{txTypes.transact}</sub><sup>{txTypes.create === 0 ? "" : txTypes.create}</sup></Typography>
                 </TableCell>
                 <TableCell style={rightPaddingFix}>
                   <LinearProgress value={filledPercent} variant="determinate" />
                 </TableCell>
+                <TableCell>
+                  <Typography>{hexToNumber(b.gasLimit)}</Typography>
+                </TableCell>
+                <TableCell>
+                  <Typography>{b.uncles.length === 0 ? '' : b.uncles.length}</Typography>
+                </TableCell>
+                <TableCell style={rightPaddingFix}>
+                  <Link
+                    component={({ className, children }: { children: any, className: string }) => (
+                      <RouterLink className={className} to={`/block/${b.hash}`} >
+                        {children}
+                      </RouterLink>
+                    )}>
+                    {blockHashShort}
+                  </Link>
+                </TableCell>
               </TableRow>
             );
           })}

diff --git 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) => {
       </Grid>
       <br />
 
-      <BlockCardListContainer from={Math.max(blockNumber - 2, 0)} to={blockNumber} />
       <BlockListContainer
-        from={Math.max((blockNumber - 3) - 11, 0)}
+        from={Math.max(blockNumber - 14, 0)}
         to={blockNumber - 3}
         disablePrev={true}
         disableNext={blockNumber === 0}