Merge pull request #24 from etclabscore/fix/cleanup-fields

fix: cleanup fields

src/components/AddressView/AddressView.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Typography, Card, CardContent } from "@material-ui/core";
 
 export interface IAddressViewProps {
   address: string;
@@ -10,22 +11,27 @@ export interface IAddressViewProps {
 function renderGeneral(props: IAddressViewProps) {
   const { address, balance, txCount, code } = props;
   return (
-    <div>
-      <div>Balance: {balance}</div>
-      <div>Tx count: {txCount}</div>
-      <div>{address}</div>
-      <div>Code</div>
-      <div>
-        <textarea value={code} />
-      </div>
-    </div>
+    <Card>
+      <CardContent>
+        <Typography variant="h6">Address: {address}</Typography>
+        <Typography variant="h6">Balance: {balance}</Typography>
+        <Typography variant="h6">Transactions: {txCount}</Typography>
+        <br />
+        <div>
+          <div>Code</div>
+          <pre>
+            <code>{code}</code>
+          </pre>
+        </div>
+      </CardContent>
+    </Card>
   );
 }
 
 function AddressView(props: IAddressViewProps) {
   return (
     <React.Fragment>
-        {renderGeneral(props)}
+      {renderGeneral(props)}
     </React.Fragment>
   );
 }

src/components/BlockCard/BlockCard.tsx

@@ -2,15 +2,16 @@ import * as React from "react";
 import Link from "@material-ui/core/Link";
 import { Link as RouterLink } from "react-router-dom";
 import { Card, CardHeader, CardContent, Typography, Chip } from "@material-ui/core";
-import moment from "moment";
+import hexToDate from "../../helpers/hexToDate";
+import hexToString from "../../helpers/hexToString";
+import hexToNumber from "../../helpers/hexToNumber";
 
 interface IProps {
   block: any;
 }
 
 export default function BlockCard(props: IProps) {
   const { block } = props;
-  const d = moment(new Date(parseInt(block.timestamp, 16) * 1000).toISOString()).format('MMMM Do YYYY, h:mm:ss a')
 
   return (
     <Link
@@ -20,11 +21,12 @@ export default function BlockCard(props: IProps) {
         </RouterLink>
       )}>
       <Card elevation={1}>
-        <CardHeader title={parseInt(block.number, 16)}>
+        <CardHeader title={hexToNumber(block.number)}>
         </CardHeader>
         <CardContent>
           <Typography variant="caption" style={{ fontSize: "11px" }}>{block.hash}</Typography>
-          <Typography gutterBottom>{d}</Typography>
+          <Typography gutterBottom>{hexToDate(block.timestamp)}</Typography>
+          <Typography gutterBottom>{hexToString(block.extraData)}</Typography>
           <Chip label={`${block.transactions.length} Transactions`}>
           </Chip>
         </CardContent>

src/components/BlockList/BlockList.tsx

@@ -1,6 +1,7 @@
 import { Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@material-ui/core";
 import * as React from "react";
 import Link from "@material-ui/core/Link";
+import hexToDate from "../../helpers/hexToDate";
 import { Link as RouterLink } from "react-router-dom";
 
 const rightPaddingFix = {
@@ -18,10 +19,10 @@ function BlockList({ blocks }: any) {
     <Table>
       <TableHead>
         <TableRow>
-          <TableCell><Typography>#</Typography></TableCell>
+          <TableCell><Typography>Block Number</Typography></TableCell>
           <TableCell><Typography>Hash</Typography></TableCell>
           <TableCell><Typography>Timestamp</Typography></TableCell>
-          <TableCell><Typography>Txs</Typography></TableCell>
+          <TableCell><Typography>Transactions</Typography></TableCell>
         </TableRow>
       </TableHead>
       <TableBody>
@@ -40,7 +41,7 @@ function BlockList({ blocks }: any) {
                 </Link>
               </TableCell>
               <TableCell style={rightPaddingFix}>
-                <Typography>{new Date(parseInt(b.timestamp, 16) * 1000).toISOString()}</Typography>
+                <Typography>{hexToDate(b.timestamp)}</Typography>
               </TableCell>
               <TableCell style={rightPaddingFix}>
                 <Typography>{b.transactions.length}</Typography>

src/components/BlockView/BlockView.tsx

@@ -2,6 +2,9 @@ import * as React from "react";
 import { Link as RouterLink } from "react-router-dom";
 import Link from "@material-ui/core/Link";
 import TxList from "../TxList";
+import hexToDate from "../../helpers/hexToDate";
+import hexToNumber from "../../helpers/hexToNumber";
+import hexToString from "../../helpers/hexToString";
 
 import { Table, TableBody, TableCell, TableRow } from "@material-ui/core";
 
@@ -23,12 +26,12 @@ function BlockView(props: any) {
         <TableBody>
           <TableRow>
             <TableCell>Number</TableCell>
-            <TableCell>{parseInt(block.number, 16)}</TableCell>
+            <TableCell>{hexToNumber(block.number)}</TableCell>
           </TableRow>
 
           <TableRow>
             <TableCell>Timestamp</TableCell>
-            <TableCell>{new Date(parseInt(timestamp, 16) * 1000).toString()}</TableCell>
+            <TableCell>{hexToDate(timestamp)}</TableCell>
           </TableRow>
 
           <TableRow>
@@ -53,23 +56,30 @@ function BlockView(props: any) {
           <TableRow>
             <TableCell>Miner</TableCell>
             <TableCell>
-              {miner}
+              <Link
+                component={({ className, children }: { children: any, className: string }) => (
+                  <RouterLink className={className} to={`/address/${miner}`} >
+                    {children}
+                  </RouterLink>
+                )}>
+                {miner}
+              </Link>
             </TableCell>
           </TableRow>
 
           <TableRow>
             <TableCell>Nonce</TableCell>
-            <TableCell>{nonce}</TableCell>
+            <TableCell>{hexToNumber(nonce)}</TableCell>
           </TableRow>
 
           <TableRow>
             <TableCell>Difficulty</TableCell>
-            <TableCell>{difficulty.toString()}</TableCell>
+            <TableCell>{hexToNumber(difficulty)}</TableCell>
           </TableRow>
 
           <TableRow>
             <TableCell>Extra Data</TableCell>
-            <TableCell>{extraData}</TableCell>
+            <TableCell>{hexToString(extraData)}</TableCell>
           </TableRow>
 
           <TableRow>

src/components/TxList/TxList.tsx

@@ -3,6 +3,7 @@ import { Link as RouterLink } from "react-router-dom";
 import Link from "@material-ui/core/Link";
 
 import { Table, TableBody, TableCell, TableHead, TableRow } from "@material-ui/core";
+import hexToNumber from "../../helpers/hexToNumber";
 
 export interface ITxListProps {
   transactions: any[];
@@ -46,7 +47,7 @@ function TxListItem({ tx }: { tx: any }) {
           : null}
       </TableCell>
 
-      <TableCell>{parseInt(tx.transactionIndex, 16)}</TableCell>
+      <TableCell>{hexToNumber(tx.transactionIndex)}</TableCell>
     </TableRow>
   );
 }

src/components/TxView/TxView.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { Link as RouterLink } from "react-router-dom";
 import Link from "@material-ui/core/Link";
 import { Table, TableBody, TableCell, TableRow } from "@material-ui/core";
+import hexToNumber from "../../helpers/hexToNumber";
 
 const unit = require("ethjs-unit"); //tslint:disable-line
 
@@ -37,17 +38,17 @@ function renderTxTable(tx: any, receipt: any | null) {
 
           <TableRow>
             <TableCell>Block number</TableCell>
-            <TableCell>{parseInt(tx.blockNumber, 16)}</TableCell>
+            <TableCell>{hexToNumber(tx.blockNumber)}</TableCell>
           </TableRow>
 
           <TableRow>
             <TableCell>Gas</TableCell>
-            <TableCell>{unit.fromWei(tx.gas, "ether")}</TableCell>
+            <TableCell>{hexToNumber(tx.gas)}</TableCell>
           </TableRow>
 
           <TableRow>
             <TableCell>Gas Price</TableCell>
-            <TableCell>{parseInt(tx.gasPrice, 10)}</TableCell>
+            <TableCell>{hexToNumber(tx.gasPrice)}</TableCell>
           </TableRow>
 
           <TableRow>
@@ -88,24 +89,19 @@ function renderTxTable(tx: any, receipt: any | null) {
 
           <TableRow>
             <TableCell>Nonce</TableCell>
-            <TableCell>{parseInt(tx.nonce, 16)}</TableCell>
+            <TableCell>{hexToNumber(tx.nonce)}</TableCell>
           </TableRow>
 
           <TableRow>
             <TableCell>Transaction Index</TableCell>
-            <TableCell>{parseInt(tx.transactionIndex, 16)}</TableCell>
+            <TableCell>{hexToNumber(tx.transactionIndex)}</TableCell>
           </TableRow>
 
           <TableRow>
             <TableCell>Input</TableCell>
             <TableCell>{tx.input}</TableCell>
           </TableRow>
 
-          <TableRow>
-            <TableCell>ReplayProtected</TableCell>
-            <TableCell>{tx.replayProtected && tx.replayProtected.toString()}</TableCell>
-          </TableRow>
-
           <TableRow>
             <TableCell>v</TableCell>
             <TableCell>{tx.v}</TableCell>
@@ -148,17 +144,17 @@ function renderTxTable(tx: any, receipt: any | null) {
 
             <TableRow>
               <TableCell>Block number</TableCell>
-              <TableCell>{parseInt(receipt.blockNumber, 16)}</TableCell>
+              <TableCell>{hexToNumber(receipt.blockNumber)}</TableCell>
             </TableRow>
 
             <TableRow>
               <TableCell>Gas Used</TableCell>
-              <TableCell>{parseInt(receipt.gasUsed, 16)}</TableCell>
+              <TableCell>{hexToNumber(receipt.gasUsed)}</TableCell>
             </TableRow>
 
             <TableRow>
               <TableCell>Cumulative Gas Used</TableCell>
-              <TableCell>{parseInt(receipt.cumulativeGasUsed, 16)}</TableCell>
+              <TableCell>{hexToNumber(receipt.cumulativeGasUsed)}</TableCell>
             </TableRow>
 
             <TableRow>
@@ -201,7 +197,7 @@ function renderTxTable(tx: any, receipt: any | null) {
 
             <TableRow>
               <TableCell>Transaction Index</TableCell>
-              <TableCell>{parseInt(receipt.transactionIndex, 16)}</TableCell>
+              <TableCell>{hexToNumber(receipt.transactionIndex)}</TableCell>
             </TableRow>
 
             <TableRow>

src/containers/Address.tsx

@@ -4,6 +4,7 @@ import AddressView from "../components/AddressView";
 import { useBlockNumber } from "../helpers";
 import useMultiGethStore from "../stores/useMultiGethStore";
 import EthereumJSONRPC from "@etclabscore/ethereum-json-rpc";
+import hexToNumber from "../helpers/hexToNumber";
 
 const unit = require("ethjs-unit"); //tslint:disable-line
 
@@ -32,7 +33,7 @@ export default function Address({ match }: { match: { params: { address: string
     <>
       <AddressView
         address={address}
-        txCount={transactionCount ? parseInt(transactionCount, 10) : 0}
+        txCount={transactionCount ? hexToNumber(transactionCount) : 0}
         balance={unit.fromWei(balance || 0, "ether")}
         code={code}
       />

src/containers/BlockCardList.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import getBlocks from "../helpers";
 import EthereumJSONRPC from "@etclabscore/ethereum-json-rpc";
 import BlockCard from "../components/BlockCard";
+import hexToNumber from "../helpers/hexToNumber";
 
 interface IProps {
   from: number;
@@ -27,7 +28,7 @@ export default function BlockCardListContainer(props: IProps) {
     <Grid container spacing={2} style={style}>
       {
         blocks.sort((a: any, b: any) => {
-          return parseInt(b.number, 16) - parseInt(a.number, 16);
+          return hexToNumber(a) - hexToNumber(a.number);
         }).map((block: any) => {
           return (
             <Grid item xs={12} sm={4}>

src/containers/Dashboard.tsx

@@ -12,6 +12,7 @@ import getTheme from "../themes/victoryTheme";
 import ChartCard from "../components/ChartCard";
 import BlockCardListContainer from "./BlockCardList";
 import BlockListContainer from "./BlockList";
+import hexToNumber from "../helpers/hexToNumber";
 
 const useState = React.useState;
 
@@ -24,28 +25,28 @@ const config = {
 
 const blockMapGasUsed = (block: any) => {
   return {
-    x: parseInt(block.number, 16),
+    x: hexToNumber(block.number),
     y: new BigNumber(block.gasUsed).dividedBy(1000000),
   };
 };
 
 const blockMapUncles = (block: any) => {
   return {
-    x: parseInt(block.number, 16),
+    x: hexToNumber(block.number),
     y: block.uncles.length,
   };
 };
 
 const blockMapHashRate = (block: any) => {
   return {
-    x: parseInt(block.number, 16),
+    x: hexToNumber(block.number),
     y: hashesToGH(new BigNumber(block.difficulty, 16).dividedBy(config.blockTime)),
   };
 };
 
 const blockMapTransactionCount = (block: any) => {
   return {
-    x: parseInt(block.number, 16),
+    x: hexToNumber(block.number),
     y: block.transactions.length,
   };
 };
@@ -125,22 +126,22 @@ export default (props: any) => {
           </div>
           <div key="chainId">
             <ChartCard title="Chain ID">
-              <Typography variant="h3">{parseInt(chainId, 16)}</Typography>
+              <Typography variant="h3">{hexToNumber(chainId)}</Typography>
             </ChartCard>
           </div>
           <div key="syncing">
             <ChartCard title="Syncing">
               {typeof syncing === "object" && syncing.currentBlock &&
                 <Typography variant="h3">
-                  {parseInt(syncing.currentBlock, 16)} / {parseInt(syncing.highestBlock || "0x0", 16)}
+                  {hexToNumber(syncing.currentBlock)} / {hexToNumber(syncing.highestBlock || "0x0")}
                 </Typography>
               }
               {!syncing && <Typography variant="h3">No</Typography>}
             </ChartCard>
           </div>
           <div key="gasPrice">
             <ChartCard title="Gas Price">
-              <Typography variant="h3">{weiToGwei(parseInt(gasPrice, 16))} Gwei</Typography>
+              <Typography variant="h3">{weiToGwei(hexToNumber(gasPrice))} Gwei</Typography>
             </ChartCard>
           </div>
           <div key="hRate">
@@ -154,7 +155,7 @@ export default (props: any) => {
           </div>
           <div>
             <ChartCard title="Peers">
-              <Typography variant="h3">{parseInt(peerCount, 16)}</Typography>
+              <Typography variant="h3">{hexToNumber(peerCount)}</Typography>
             </ChartCard>
           </div>
         </Grid>