Merge pull request #257 from etclabscore/feat/gasprice-monitoring

feat: add gas price average min max
etclabscore · Nov 7, 2020 · 1ec523e · 1ec523e
2 parents 0c15dad + d7b3841
commit 1ec523e
Show file tree

Hide file tree

Showing 28 changed files with 5,724 additions and 5,909 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -24,12 +24,12 @@ aliases:
 
 defaults: &defaults
   working_directory: ~/project
+  docker:
+    - image: circleci/node:12
 
 jobs:
   test:
     <<: *defaults
-    docker:
-      - image: circleci/node:10
     steps:
       - checkout
       - restore_cache: *restore-deps-cache
@@ -41,8 +41,6 @@ jobs:
 
   build:
     <<: *defaults
-    docker:
-      - image: circleci/node:10
     steps:
       - checkout
       - restore_cache: *restore-deps-cache
@@ -52,8 +50,6 @@ jobs:
 
   release:
     <<: *defaults
-    docker:
-      - image: circleci/node:10
     steps:
       - checkout
       - restore_cache: *restore-deps-cache

diff --git a/.jsbeautifyrc b/.jsbeautifyrc
@@ -0,0 +1,23 @@
+{
+  "indent_size": 2,
+  "indent_char": " ",
+  "eol": "\n",
+  "indent_level": 0,
+  "indent_with_tabs": false,
+  "preserve_newlines": true,
+  "max_preserve_newlines": 2,
+  "jslint_happy": false,
+  "space_after_anon_function": false,
+  "brace_style": "collapse",
+  "keep_array_indentation": false,
+  "keep_function_indentation": false,
+  "space_before_conditional": true,
+  "break_chained_methods": true,
+  "eval_code": false,
+  "unescape_strings": false,
+  "wrap_line_length": 80,
+  "wrap_attributes": "auto",
+  "wrap_attributes_indent_size": 2,
+  "e4x": true,
+  "end_with_newline": true
+}
diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-10.15.3
+12.18.4
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,17 +66,17 @@
     "@types/bignumber.js": "^4.0.3",
     "@types/jest": "^21.1.6",
     "@types/lodash": "^4.14.149",
-    "@types/node": "^8.10.58",
+    "@types/node": "^14.11.8",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.3",
     "@types/react-router-dom": "^5.1.1",
     "@types/victory": "^31.0.19",
-    "react-scripts": "^3.2.0",
+    "react-scripts": "^3.4.3",
     "ts-jest": "^24.1.0",
     "ts-node": "^8.5.0",
     "tslint": "^5.8.0",
     "tslint-react": "^4.1.0",
-    "typescript": "^3.7.2"
+    "typescript": "^3.9.7"
   },
   "browserslist": {
     "production": [

diff --git a/src/App.tsx b/src/App.tsx
@@ -86,11 +86,16 @@ function App(props: any) {
   }, [networks, query.network]);
 
   useEffect(() => {
-    if (selectedNetwork && selectedNetwork.name !== query.network) {
-      setQuery({ network: selectedNetwork.name });
+    if (selectedNetwork === undefined) {
+      return;
+    }
+    const { name } = selectedNetwork as any;
+
+    if (name !== query.network) {
+      setQuery({ network: name });
       history.push({
         pathname: history.location.pathname,
-        search: `?network=${selectedNetwork.name}`,
+        search: `?network=${name}`,
       });
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -132,7 +137,9 @@ function App(props: any) {
     return re.test(q);
   };
 
-  const handleSearch = async (q: string) => {
+  const handleSearch = async (query: string | undefined) => {
+    if (query === undefined) { return; }
+    const q = query.trim();
     if (isAddress(q)) {
       history.push(`/address/${q}`);
     }
@@ -202,13 +209,16 @@ function App(props: any) {
                   onKeyDown={
                     (event: KeyboardEvent<HTMLInputElement>) => {
                       if (event.keyCode === 13) {
-                        handleSearch(search.trim());
+                        handleSearch(search);
                       }
                     }
                   }
                   onChange={
                     (event: ChangeEvent<HTMLInputElement>) => {
-                      setSearch(event.target.value);
+                      if (event.target.value) {
+                        const {value} = event.target;
+                        setSearch(value as any);
+                      }
                     }
                   }
                   fullWidth
@@ -227,15 +237,15 @@ function App(props: any) {
                   selectedNetwork={selectedNetwork}
                 />
                 <LanguageMenu />
-                <Tooltip title={t("JSON-RPC API Documentation")}>
+                <Tooltip title={t("JSON-RPC API Documentation") as string}>
                   <IconButton
                     onClick={() =>
                       window.open("https://playground.open-rpc.org/?schemaUrl=https://raw.githubusercontent.com/etclabscore/ethereum-json-rpc-specification/master/openrpc.json") //tslint:disable-line
                     }>
                     <NotesIcon />
                   </IconButton>
                 </Tooltip>
-                <Tooltip title={t("Expedition Github")}>
+                <Tooltip title={t("Expedition Github") as string}>
                   <IconButton
                     onClick={() =>
                       window.open("https://github.com/etclabscore/expedition")
@@ -244,7 +254,7 @@ function App(props: any) {
                   </IconButton>
                 </Tooltip>
                 <ConfigurationMenu onChange={handleConfigurationChange} />
-                <Tooltip title={t("Toggle Dark Mode")}>
+                <Tooltip title={t("Toggle Dark Mode") as string}>
                   <IconButton onClick={darkMode.toggle}>
                     {darkMode.value ? <Brightness3Icon /> : <WbSunnyIcon />}
                   </IconButton>

diff --git a/src/components/AddressTransactions/AddressTransactions.tsx b/src/components/AddressTransactions/AddressTransactions.tsx
@@ -3,9 +3,10 @@ import { Typography, IconButton, Grid } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
 import TxList from "../TxList";
 import { ArrowBackIos, ArrowForwardIos } from "@material-ui/icons";
+import {ObjectUAh7GW7V as Transaction} from "@etclabscore/ethereum-json-rpc";
 
 export interface IProps {
-  transactions: any[];
+  transactions: Transaction[];
   from: number;
   to: number;
   disableNext?: boolean;

diff --git a/src/components/BlockCard/BlockCard.tsx b/src/components/BlockCard/BlockCard.tsx
@@ -32,8 +32,7 @@ export default function BlockCard(props: IProps) {
           <Typography variant="caption" style={{ fontSize: "11px" }}>{block.hash}</Typography>
           <Typography gutterBottom>{t("Timestamp Date", { date: hexToDate(block.timestamp!) })}</Typography>
           <Typography gutterBottom>{hexToString(block.extraData!)}</Typography>
-          <Chip label={`${block.transactions!.length} Transactions`}>
-          </Chip>
+          <Chip label={`${block.transactions!.length} Transactions`} />
         </CardContent>
       </Card>
     </Link>

diff --git a/src/components/BlockList/BlockList.tsx b/src/components/BlockList/BlockList.tsx
@@ -91,7 +91,7 @@ function BlockList({ blocks }: any) {
                   <Typography>{t("Timestamp Date", { date: hexToDate(b.timestamp) })}&nbsp;<sub>({timeDifferenceFromParent > 0 ? `+${timeDifferenceFromParent}` : `-${timeDifferenceFromParent}`}s)</sub></Typography>
                 </TableCell>
                 <TableCell style={rightPaddingFix}>
-                  <Tooltip title={t("Create Transactions", {count: txTypes.create})} placement="top">
+                  <Tooltip title={t("Create Transactions", {count: txTypes.create}) as string} placement="top">
                     <Typography variant="caption" color="textSecondary">{txTypes.create === 0 ? "" : txTypes.create}</Typography>
                   </Tooltip>
                   <Typography>{txTypes.transact}</Typography>

diff --git a/src/components/BlockView/BlockGasPrice.tsx b/src/components/BlockView/BlockGasPrice.tsx
@@ -0,0 +1,40 @@
+import * as React from "react";
+import { hexToNumber } from "@etclabscore/eserialize";
+import { useTranslation } from "react-i18next";
+import {meanBy, minBy, maxBy} from "lodash";
+
+import { TableCell, TableRow } from "@material-ui/core";
+
+function BlockGasPrice(props: any) {
+  const { t } = useTranslation();
+  const {transactions} = props.block;
+
+  if (transactions.length === 0) {return <></>;}
+
+  return (
+    <>
+      <TableRow>
+        <TableCell>{t("Average Gas Price")}</TableCell>
+        <TableCell>
+          { meanBy(transactions, (t: any) => BigInt(t.gasPrice)) }
+        </TableCell>
+      </TableRow>
+
+      <TableRow>
+        <TableCell>{t("Min Gas Price")}</TableCell>
+        <TableCell>
+          { hexToNumber(minBy(transactions, (t: any) => BigInt(t.gasPrice)).gasPrice) }
+        </TableCell>
+      </TableRow>
+
+      <TableRow>
+        <TableCell>{t("Max Gas Price")}</TableCell>
+        <TableCell>
+          { hexToNumber(maxBy(transactions, (t: any) => BigInt(t.gasPrice)).gasPrice) }
+        </TableCell>
+      </TableRow>
+    </>
+  );
+}
+
+export default BlockGasPrice;
diff --git a/src/components/BlockView/BlockView.tsx b/src/components/BlockView/BlockView.tsx
@@ -8,6 +8,8 @@ import { useHistory } from "react-router-dom";
 
 import { Table, TableBody, TableCell, TableRow, Button, LinearProgress, Typography } from "@material-ui/core";
 
+import BlockGasPrice from "./BlockGasPrice";
+
 function BlockView(props: any) {
   const { block } = props;
   const history = useHistory();
@@ -28,11 +30,11 @@ function BlockView(props: any) {
   return (
     <div>
       <Button
-        onClick={() => {
-          history.push(`/block/${block.hash}/raw`);
-        }}
+        onClick={() => { history.push(`/block/${block.hash}/raw`); }}
         style={{ position: "absolute", right: "10px", top: "75px" }}
-      >View Raw</Button>
+      >
+        View Raw
+      </Button>
       <Table>
         <TableBody>
           <TableRow>
@@ -43,14 +45,22 @@ function BlockView(props: any) {
           <TableRow>
             <TableCell>{t("Gas Usage")}</TableCell>
             <TableCell>
-              <Typography variant="caption">{hexToNumber(gasUsed)}/{hexToNumber(gasLimit)}</Typography>
-              <LinearProgress style={{width: "150px"}} value={filledPercent} variant="determinate" />
+              <Typography variant="caption">
+                {hexToNumber(gasUsed)}/{hexToNumber(gasLimit)}
+              </Typography>
+              <LinearProgress
+                style={{width: "150px"}}
+                value={filledPercent}
+                variant="determinate"
+              />
             </TableCell>
           </TableRow>
 
           <TableRow>
             <TableCell>{t("Timestamp")}</TableCell>
-            <TableCell>{t("Timestamp Date", { date: hexToDate(timestamp) })}</TableCell>
+            <TableCell>
+              {t("Timestamp Date", { date: hexToDate(timestamp) })}
+            </TableCell>
           </TableRow>
 
           <TableRow>
@@ -63,7 +73,7 @@ function BlockView(props: any) {
             <TableCell>
               <Link
                 component={({ className, children }: { children: any, className: string }) => (
-                  <RouterLink className={className} to={`/block/${parentHash}`} >
+                  <RouterLink className={className} to={`/block/${parentHash}`}>
                     {children}
                   </RouterLink>
                 )}>
@@ -77,7 +87,7 @@ function BlockView(props: any) {
             <TableCell>
               <Link
                 component={({ className, children }: { children: any, className: string }) => (
-                  <RouterLink className={className} to={`/address/${miner}`} >
+                  <RouterLink className={className} to={`/address/${miner}`}>
                     {children}
                   </RouterLink>
                 )}>
@@ -86,10 +96,7 @@ function BlockView(props: any) {
             </TableCell>
           </TableRow>
 
-          <TableRow>
-            <TableCell>{t("Gas Used")}</TableCell>
-            <TableCell>{hexToNumber(gasUsed)}</TableCell>
-          </TableRow>
+          <BlockGasPrice block={block} />
 
           <TableRow>
             <TableCell>{t("Gas Limit")}</TableCell>
@@ -134,7 +141,7 @@ function BlockView(props: any) {
       </Table>
 
       <TxList transactions={transactions} />
-    </ div >
+    </div>
   );
 }
 

diff --git a/src/components/NetworkDropdown/NetworkDropdown.tsx b/src/components/NetworkDropdown/NetworkDropdown.tsx
@@ -32,7 +32,7 @@ const NetworkDropdown: React.FC<IProps> = (props) => {
   return (
     <>
 
-      <Tooltip title={t("Change Network")}>
+      <Tooltip title={t("Change Network") as string}>
         <Button onClick={handleClick}>
           {selectedNetwork && selectedNetwork.name}
         </Button>

diff --git a/src/containers/Address.tsx b/src/containers/Address.tsx
@@ -8,11 +8,9 @@ import EthereumJSONRPC from "@etclabscore/ethereum-json-rpc";
 import { hexToNumber } from "@etclabscore/eserialize";
 import AddressTransactions from "../components/AddressTransactions";
 import { History } from "history";
-const unit = require("ethjs-unit"); //tslint:disable-line
+import {ObjectUAh7GW7V as Transaction} from "@etclabscore/ethereum-json-rpc";
 
-interface IUrlParams {
-  number: string | undefined;
-}
+const unit = require("ethjs-unit"); //tslint:disable-line
 
 interface IProps {
   match: {
@@ -26,19 +24,19 @@ interface IProps {
 
 const Address: React.FC<IProps> = ({ match, history }) => {
   const { address, block } = match.params;
-  const [erpc]: [EthereumJSONRPC] = useCoreGethStore();
+  const [erpc]: [EthereumJSONRPC, any] = useCoreGethStore();
   const [blockNumber] = useBlockNumber(erpc);
-  const [transactionCount, setTransactionCount] = React.useState();
-  const [balance, setBalance] = React.useState();
-  const [code, setCode] = React.useState();
-  const blockNum = block !== undefined ? parseInt(block, 10) : blockNumber;
-  const [transactions, setTransactions] = React.useState();
+  const [transactionCount, setTransactionCount] = React.useState<string>();
+  const [balance, setBalance] = React.useState<string>();
+  const [code, setCode] = React.useState<string>();
+  const blockNum = block === undefined ? blockNumber : parseInt(block, 10);
+  const [transactions, setTransactions] = React.useState<Transaction[]>([]);
 
-  const from = Math.max(blockNum - 99, 0);
+  const from = Math.max(blockNum ? blockNum : 0 - 99, 0);
   const to = blockNum;
 
   React.useEffect(() => {
-    if (blockNum === undefined || blockNumber === undefined) {
+    if (isNaN(blockNum) || isNaN(blockNumber)) {
       return;
     }
     if (blockNum > blockNumber) {
@@ -54,9 +52,22 @@ const Address: React.FC<IProps> = ({ match, history }) => {
       return;
     }
     const hexBlockNumber = `0x${blockNumber.toString(16)}`;
-    erpc.eth_getTransactionCount(address, hexBlockNumber).then(setTransactionCount);
-    erpc.eth_getBalance(address, hexBlockNumber).then(setBalance);
-    erpc.eth_getCode(address, hexBlockNumber).then(setCode);
+    erpc.eth_getTransactionCount(address, hexBlockNumber).then((txCount) => {
+      if (txCount === null) { return; }
+      setTransactionCount(txCount);
+      return txCount;
+    }).then((txCountRes: string | undefined) => {
+      if (txCountRes) {
+        erpc.eth_getBalance(address, hexBlockNumber).then((balance) => {
+          if (balance === null) { return; }
+          setBalance(balance);
+        });
+        erpc.eth_getCode(address, hexBlockNumber).then((code) => {
+          if (code === null) { return; }
+          setCode(code);
+        });
+      }
+    });
   }, [blockNumber, address, erpc]);
 
   React.useEffect(() => {