fix: cleanup

package.json

@@ -31,6 +31,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-use-promise": "^0.2.0",
+    "use-interval": "^1.1.0",
     "victory": "^31.3.0"
   },
   "devDependencies": {

src/App.tsx

@@ -1,6 +1,5 @@
-import * as React from "react";
-
 import { AppBar, Card, CardContent, CardHeader, Toolbar, Typography } from "@material-ui/core";
+import * as React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import Address from "./containers/Address";
 import Block from "./containers/Block";
@@ -18,35 +17,33 @@ const routes = [
   { path: "/address/:address", component: Address, title: "Address Details" },
 ];
 
-class App extends React.Component {
-  public render() {
-    return (
-      <>
-        <AppBar position="static" color="default" elevation={0}>
-          <Toolbar>
-            <Typography>Jade Block Explorer</Typography>
-          </Toolbar>
-        </AppBar>
-        <Router>
-          <Switch>
-            {
-              routes.map((routeProps, i) => {
-                const wrapped = (props: any) => (
-                  <Card>
-                    <CardHeader title={routeProps.title} />
-                    <CardContent>
-                      {routeProps.component({ ...props })}
-                    </CardContent>
-                  </Card>
-                );
-                return (<Route key={i} path={routeProps.path} component={wrapped} exact={routeProps.exact} />);
-              })
-            }
-          </Switch>
-        </Router>
-      </>
-    );
-  }
+function App(props: any) {
+  return (
+    <>
+      <AppBar position="static" color="default" elevation={0}>
+        <Toolbar>
+          <Typography>Jade Block Explorer</Typography>
+        </Toolbar>
+      </AppBar>
+      <Router>
+        <Switch>
+          {
+            routes.map((routeProps, i) => {
+              const wrapped = (p: any) => (
+                <Card>
+                  <CardHeader title={routeProps.title} />
+                  <CardContent>
+                    {routeProps.component({ ...p })}
+                  </CardContent>
+                </Card>
+              );
+              return (<Route key={i} path={routeProps.path} component={wrapped} exact={routeProps.exact} />);
+            })
+          }
+        </Switch>
+      </Router>
+    </>
+  );
 }
 
 export default App;

src/containers/Address.tsx

@@ -2,25 +2,35 @@ import * as React from "react";
 import usePromise from "react-use-promise";
 import AddressView from "../components/AddressView";
 import erpc from "../erpc";
+import { useBlockNumber } from "../helpers";
 const unit = require("ethjs-unit");
 
 export default function Address(props: any) {
   const { address } = props.match.params;
-  const [{ transactionCount, balance, code }, error, state] = usePromise(
+  const [blockNumber] = useBlockNumber();
+  const [result, error, state] = usePromise(
     async () => {
-      const blockNumber = await erpc.eth_blockNumber();
+      if (blockNumber === undefined) {
+        return;
+      }
+      const hexBlockNumber = `0x${blockNumber.toString(16)}`;
       return {
-        transactionCount: await erpc.eth_getTransactionCount(address, blockNumber),
-        balance: await erpc.eth_getBalance(address),
-        code: await erpc.eth_getCode(address),
+        transactionCount: await erpc.eth_getTransactionCount(address, hexBlockNumber),
+        balance: await erpc.eth_getBalance(address, hexBlockNumber),
+        code: await erpc.eth_getCode(address, hexBlockNumber),
       };
     },
-    [address],
+    [address, blockNumber],
   );
+  if (error) {
+    return (<div>Oops. there was an error. try again later: {error.message}</div>)
+  }
+  if (!result) {
+    return null;
+  }
+  const { transactionCount, balance, code } = result;
   return (
     <>
-      {state}
-      {error && <div> Error Displaying Balance for address: {address} </div>}
       <AddressView
         address={address}
         txCount={transactionCount ? parseInt(transactionCount, 10) : 0}

src/containers/BlockList.tsx

@@ -2,18 +2,18 @@ import * as React from "react";
 import usePromise from "react-use-promise";
 import BlockList from "../components/BlockList";
 import getBlocks from "../helpers";
+import { CircularProgress } from "@material-ui/core";
 
 interface IProps {
   from: number;
   to: number;
 }
 
-
 export default function BlockListContainer(props: IProps) {
   const { from, to } = props;
   const [blocks, error, state] = usePromise(() => getBlocks(from, to), [from, to]);
-  if (!blocks) {
-    return null;
+  if (!blocks && state === "pending") {
+    return <CircularProgress />;
   }
   return (
     <div>

src/containers/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { Button, Grid, Typography } from "@material-ui/core";
+import { Button, Grid, Typography, CircularProgress } from "@material-ui/core";
 import BigNumber from "bignumber.js";
 import * as React from "react";
 import usePromise from "react-use-promise";
@@ -7,12 +7,12 @@ import { hashesToGH, weiToGwei } from "../components/formatters";
 import HashChart from "../components/HashChart";
 import HashRate from "../components/HashRate";
 import erpc from "../erpc";
-import getBlocks from "../helpers";
+import getBlocks, { useBlockNumber } from "../helpers";
 import BlockList from "./BlockList";
 
 const config = {
   blockTime: 15, // seconds
-  blockHistoryLength: 100,
+  blockHistoryLength: 16,
   chartHeight: 200,
   chartWidth: 400,
 };
@@ -55,31 +55,44 @@ const getStyles = () => {
   };
 };
 
-export default (props: any) => {
-  const styles = getStyles();
-  const [results, error, state] = usePromise(async () => {
-    const bn = await erpc.eth_blockNumber();
-    const blockNum: number = parseInt(bn, 16);
+const useDashboardInfo = (blockNumber: number): any => {
+  const [dashboardResults, setDashboardResults] = React.useState();
+
+  const [, error, state] = usePromise(async () => {
+    if (blockNumber === undefined) {
+      return null;
+    }
     const rangeOfBlocks: any[] = await getBlocks(
-      Math.max(blockNum - config.blockHistoryLength + 1, 0),
-      blockNum,
+      Math.max(blockNumber - config.blockHistoryLength + 1, 0),
+      blockNumber,
     );
     const gp: number = parseInt(await erpc.eth_gasPrice(), 16);
-    return {
-      blockNumber: blockNum,
+    const r = {
       chainId: parseInt(await erpc.eth_chainId(), 16),
-      block: await erpc.eth_getBlockByNumber(bn, true),
+      block: await erpc.eth_getBlockByNumber(`0x${blockNumber.toString(16)}`, true),
       blocks: rangeOfBlocks,
       gasPrice: gp,
       syncing: await erpc.eth_syncing(),
       peerCount: parseInt(await erpc.net_peerCount(), 16),
     };
-  }, []);
-  if (!results) {
-    return null;
+    setDashboardResults(r);
+    return r;
+  }, [blockNumber]);
+  return [dashboardResults, error, state];
+};
+
+export default (props: any) => {
+  const styles = getStyles();
+  const [blockNumber] = useBlockNumber();
+  const [results, error, state] = useDashboardInfo(blockNumber);
+  if (error && !results) {
+    return (<div>Oops. Something went wrong. Please try again. <br /><br /><code>{error.message}</code></div>);
+  }
+  if (state && !results) {
+    return (<CircularProgress />);
   }
-  const { block, blocks, gasPrice, peerCount, blockNumber, chainId, syncing } = results;
 
+  const { block, blocks, gasPrice, peerCount, chainId, syncing } = results;
   return (
     <div>
       <Grid container={true} spacing={24}>

src/containers/NodeView.tsx

@@ -7,6 +7,6 @@ import erpc from "../erpc";
 export default function NodeView(props: any) {
   const [blockNumber, error, state] = usePromise(() => erpc.eth_blockNumber(), []);
   return (
-    <BlockList key={1} from={Math.max(parseInt(blockNumber, 16) - 15, 0)} to={parseInt(blockNumber, 16)} />
+    <BlockList from={Math.max(parseInt(blockNumber, 16) - 15, 0)} to={parseInt(blockNumber, 16)} />
   );
 }

src/erpc.ts

@@ -4,6 +4,6 @@ export default new ERPC({
     transport: {
         type: "http",
         host: "localhost",
-        port: 58578,
+        port: 60178,
     },
 });

src/helpers.tsx

@@ -1,11 +1,23 @@
+import * as React from "react";
+import useInterval from "use-interval";
 import erpc from "./erpc";
 
-const getBlocks = (from: number, to: number): Promise<any> => {
+export const getBlocks = (from: number, to: number): Promise<any> => {
     const promises: any[] = [];
     for (let i = from; i < to; i++) {
         promises.push(erpc.eth_getBlockByNumber(`0x${i.toString(16)}`, true));
     }
     return Promise.all(promises);
 };
 
+export const useBlockNumber = () => {
+    const [blockNumber, setBlockNumber] = React.useState();
+    useInterval(() => {
+        erpc.eth_blockNumber().then((bn: string) => {
+            setBlockNumber(parseInt(bn, 16));
+        });
+    }, 1000, true);
+    return [blockNumber];
+};
+
 export default getBlocks;