From d9bb26c699071a3152357a6e53749083f0b44329 Mon Sep 17 00:00:00 2001
From: shanejonas <jonas.shane@gmail.com>
Date: Tue, 14 Jan 2020 23:30:00 -0800
Subject: [PATCH] fix: add miner stats pagination by block range

fixes #223
---
 src/App.tsx                                   |  5 ++
 src/components/BlockList/BlockList.tsx        | 36 +++++---
 .../BlockPagination/BlockPagination.tsx       | 35 ++++++++
 src/components/BlockPagination/index.ts       |  2 +
 src/components/MinerStats.tsx                 |  4 +-
 src/components/StatCharts/StatCharts.tsx      | 86 +++++++++++++++++++
 src/components/StatCharts/index.ts            |  2 +
 src/containers/Dashboard.tsx                  | 64 +-------------
 src/containers/MinerStatsPage.tsx             | 65 ++++++++++++--
 src/translations/cn.ts                        | 19 ++--
 src/translations/en.ts                        | 19 ++--
 src/translations/kr.ts                        | 19 ++--
 12 files changed, 236 insertions(+), 120 deletions(-)
 create mode 100644 src/components/BlockPagination/BlockPagination.tsx
 create mode 100644 src/components/BlockPagination/index.ts
 create mode 100644 src/components/StatCharts/StatCharts.tsx
 create mode 100644 src/components/StatCharts/index.ts

diff --git a/src/App.tsx b/src/App.tsx
index 5e77a5b5..21c402da 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -88,6 +88,10 @@ function App(props: any) {
   useEffect(() => {
     if (selectedNetwork && selectedNetwork.name !== query.network) {
       setQuery({ network: selectedNetwork.name });
+      history.push({
+        pathname: history.location.pathname,
+        search: `?network=${selectedNetwork.name}`,
+      });
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedNetwork, setQuery]);
@@ -255,6 +259,7 @@ function App(props: any) {
             <Switch>
               <Route path={"/"} component={Dashboard} exact={true} />
               <Route path={"/stats/miners"} component={MinerStatsPage} exact={true} />
+              <Route path={"/stats/miners/:block"} component={MinerStatsPage} />
               <Route path={"/block/:hash/raw"} component={BlockRawContainer} />
               <Route path={"/block/:hash"} component={Block} />
               <Route path={"/blocks/:number"} component={NodeView} />
diff --git a/src/components/BlockList/BlockList.tsx b/src/components/BlockList/BlockList.tsx
index fa93cb49..963e5762 100644
--- a/src/components/BlockList/BlockList.tsx
+++ b/src/components/BlockList/BlockList.tsx
@@ -1,4 +1,4 @@
-import { Table, TableBody, TableCell, TableHead, TableRow, Typography, LinearProgress } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow, Typography, LinearProgress, Tooltip } from "@material-ui/core";
 import * as React from "react";
 import Link from "@material-ui/core/Link";
 import { hexToDate, hexToNumber, hexToString } from "@etclabscore/eserialize";
@@ -60,29 +60,41 @@ function BlockList({ blocks }: any) {
             }
 
             // Calculate difference of block timestamp from that of parent.
-            const timeDifferenceFromParent = (index === sortedBlocks.length-1) ? 0 : hexToNumber(b.timestamp) - hexToNumber(sortedBlocks[index+1].timestamp);
+            const timeDifferenceFromParent = (index === sortedBlocks.length - 1) ? 0 : hexToNumber(b.timestamp) - hexToNumber(sortedBlocks[index + 1].timestamp);
 
             return (
               <TableRow key={b.number} style={authorHashStyle}>
                 <TableCell style={rightPaddingFix}>
-                <Typography>
-                <Link
+                  <Typography>
+                    <Link
+                      component={({ className, children }: { children: any, className: string }) => (
+                        <RouterLink className={className} to={`/address/${b.miner}`} >
+                          {children}
+                        </RouterLink>
+                      )}>
+                      {authorHashShort}
+                    </Link>
+                    &nbsp;<sup>{hexToString(b.extraData).substring(0, 20)}</sup>
+                  </Typography>
+                </TableCell>
+                <TableCell component="th" scope="row">
+                  <Link
                     component={({ className, children }: { children: any, className: string }) => (
-                      <RouterLink className={className} to={`/address/${b.miner}`} >
+                      <RouterLink className={className} to={`/block/${b.hash}`} >
                         {children}
                       </RouterLink>
                     )}>
-                    {authorHashShort}
+                    {parseInt(b.number, 16)}
                   </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) })}&nbsp;<sub>({+timeDifferenceFromParent > 0 ? `+${timeDifferenceFromParent}` : `-${timeDifferenceFromParent}`}s)</sub></Typography>
+                  <Typography>{t("Timestamp Date", { date: hexToDate(b.timestamp) })}&nbsp;<sub>({timeDifferenceFromParent > 0 ? `+${timeDifferenceFromParent}` : `-${timeDifferenceFromParent}`}s)</sub></Typography>
                 </TableCell>
                 <TableCell style={rightPaddingFix}>
-                  <Typography><sub>{txTypes.transact}</sub><sup>{txTypes.create === 0 ? "" : txTypes.create}</sup></Typography>
+                  <Tooltip title={t("Create Transactions", {count: txTypes.create})} placement="top">
+                    <Typography variant="caption" color="textSecondary">{txTypes.create === 0 ? "" : txTypes.create}</Typography>
+                  </Tooltip>
+                  <Typography>{txTypes.transact}</Typography>
                 </TableCell>
                 <TableCell style={rightPaddingFix}>
                   <LinearProgress value={filledPercent} variant="determinate" />
@@ -91,7 +103,7 @@ function BlockList({ blocks }: any) {
                   <Typography>{hexToNumber(b.gasLimit)}</Typography>
                 </TableCell>
                 <TableCell>
-                  <Typography>{b.uncles.length === 0 ? '' : b.uncles.length}</Typography>
+                  <Typography>{b.uncles.length === 0 ? "" : b.uncles.length}</Typography>
                 </TableCell>
                 <TableCell style={rightPaddingFix}>
                   <Link
diff --git a/src/components/BlockPagination/BlockPagination.tsx b/src/components/BlockPagination/BlockPagination.tsx
new file mode 100644
index 00000000..137ccac3
--- /dev/null
+++ b/src/components/BlockPagination/BlockPagination.tsx
@@ -0,0 +1,35 @@
+
+import React from "react";
+import { Grid, IconButton, Typography } from "@material-ui/core";
+import { ArrowForwardIos, ArrowBackIos } from "@material-ui/icons";
+
+interface IProps {
+  from: number;
+  to: number;
+  disableNext?: boolean;
+  disablePrev?: boolean;
+  onNext?: () => void;
+  onPrev?: () => void;
+  style?: any;
+}
+
+const BlockPagination: React.FC<IProps> = (props) => {
+
+  return (
+    <Grid container>
+      <Grid container justify="flex-end">
+        <IconButton onClick={props.onPrev} disabled={props.disablePrev}>
+          <ArrowBackIos />
+        </IconButton>
+        <IconButton onClick={props.onNext} disabled={props.disableNext}>
+          <ArrowForwardIos />
+        </IconButton>
+      </Grid>
+      <Grid container justify="flex-end">
+        <Typography>Showing {(props.to - props.from) + 1} Block Range: <b>{props.to}</b> - {props.from}</Typography>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default BlockPagination;
diff --git a/src/components/BlockPagination/index.ts b/src/components/BlockPagination/index.ts
new file mode 100644
index 00000000..dc114b33
--- /dev/null
+++ b/src/components/BlockPagination/index.ts
@@ -0,0 +1,2 @@
+import BlockPagination from "./BlockPagination";
+export default BlockPagination;
diff --git a/src/components/MinerStats.tsx b/src/components/MinerStats.tsx
index 5b56a897..22b14967 100644
--- a/src/components/MinerStats.tsx
+++ b/src/components/MinerStats.tsx
@@ -54,7 +54,7 @@ const MinerStats: React.FC<IProps> = ({blocks}) => {
   return (
     <Grid container justify="space-evenly">
       <Grid key="uncles" item xs={12} md={4} lg={4}>
-        <ChartCard title={t("Top Miners last blocks by address", { count: config.blockHistoryLength })}>
+        <ChartCard title={t("Miners by address")}>
           <VictoryPie
             cornerRadius={1}
             // innerRadius={50}
@@ -82,7 +82,7 @@ const MinerStats: React.FC<IProps> = ({blocks}) => {
         </ChartCard>
       </Grid>
       <Grid key="uncles" item xs={12} md={3} lg={3}>
-        <ChartCard title={t("Top Miners last blocks by extraData", { count: config.blockHistoryLength })}>
+        <ChartCard title={t("Miners by extraData", { count: config.blockHistoryLength })}>
           <VictoryPie
             colorScale="cool"
             labelComponent={<CustomPieChartLabel />}
diff --git a/src/components/StatCharts/StatCharts.tsx b/src/components/StatCharts/StatCharts.tsx
new file mode 100644
index 00000000..7b2fd2d2
--- /dev/null
+++ b/src/components/StatCharts/StatCharts.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import BigNumber from "bignumber.js";
+import { hashesToGH } from "../formatters";
+import { hexToNumber } from "@etclabscore/eserialize";
+import { Grid } from "@material-ui/core";
+import ChartCard from "../ChartCard";
+import { VictoryLine, VictoryBar, VictoryChart } from "victory";
+import { useTranslation } from "react-i18next";
+
+const config = {
+  blockTime: 15, // seconds
+  blockHistoryLength: 100,
+  chartHeight: 200,
+  chartWidth: 400,
+};
+
+const blockMapGasUsed = (block: any) => {
+  return {
+    x: hexToNumber(block.number),
+    y: new BigNumber(block.gasUsed).dividedBy(1000000),
+  };
+};
+
+const blockMapUncles = (block: any) => {
+  return {
+    x: hexToNumber(block.number),
+    y: block.uncles.length,
+  };
+};
+
+const blockMapHashRate = (block: any) => {
+  return {
+    x: hexToNumber(block.number),
+    y: hashesToGH(new BigNumber(block.difficulty, 16).dividedBy(config.blockTime)),
+  };
+};
+
+const blockMapTransactionCount = (block: any) => {
+  return {
+    x: hexToNumber(block.number),
+    y: block.transactions.length,
+  };
+};
+
+interface IProps {
+  blocks: any[];
+  victoryTheme?: any;
+}
+
+const StatCharts: React.FC<IProps> = ({ blocks, victoryTheme }) => {
+  const { t } = useTranslation();
+  return (
+    <Grid item container>
+      <Grid key="hashChart" item xs={12} md={6} lg={3}>
+        <ChartCard title={t("Hash Rate")}>
+          <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+            <VictoryLine data={blocks.map(blockMapHashRate)} />
+          </VictoryChart>
+        </ChartCard>
+      </Grid>
+      <Grid key="txChart" item xs={12} md={6} lg={3}>
+        <ChartCard title={t("Transaction count")}>
+          <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+            <VictoryBar data={blocks.map(blockMapTransactionCount)} />
+          </VictoryChart>
+        </ChartCard>
+      </Grid>
+      <Grid key="gasUsed" item xs={12} md={6} lg={3}>
+        <ChartCard title={t("Gas Used")}>
+          <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+            <VictoryBar data={blocks.map(blockMapGasUsed)} />
+          </VictoryChart>
+        </ChartCard>
+      </Grid>
+      <Grid key="uncles" item xs={12} md={6} lg={3}>
+        <ChartCard title={t("Uncles")}>
+          <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+            <VictoryBar data={blocks.map(blockMapUncles)} />
+          </VictoryChart>
+        </ChartCard>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default StatCharts;
diff --git a/src/components/StatCharts/index.ts b/src/components/StatCharts/index.ts
new file mode 100644
index 00000000..422e8c41
--- /dev/null
+++ b/src/components/StatCharts/index.ts
@@ -0,0 +1,2 @@
+import StatCharts from "./StatCharts";
+export default StatCharts;
diff --git a/src/containers/Dashboard.tsx b/src/containers/Dashboard.tsx
index 7faa1c59..e1df9e9e 100644
--- a/src/containers/Dashboard.tsx
+++ b/src/containers/Dashboard.tsx
@@ -1,9 +1,7 @@
 import { Grid, Typography, CircularProgress, Theme, Button } from "@material-ui/core";
 import useMultiGethStore from "../stores/useMultiGethStore";
-import BigNumber from "bignumber.js";
 import * as React from "react";
-import { VictoryBar, VictoryChart, VictoryLine } from "victory";
-import { hashesToGH, weiToGwei } from "../components/formatters";
+import { weiToGwei } from "../components/formatters";
 import HashRate from "../components/HashRate";
 import getBlocks, { useBlockNumber } from "../helpers";
 import useInterval from "use-interval";
@@ -15,6 +13,7 @@ import { hexToNumber } from "@etclabscore/eserialize";
 import EthereumJSONRPC from "@etclabscore/ethereum-json-rpc";
 import { useTranslation } from "react-i18next";
 import { ArrowForwardIos } from "@material-ui/icons";
+import StatCharts from "../components/StatCharts";
 
 const useState = React.useState;
 
@@ -25,34 +24,6 @@ const config = {
   chartWidth: 400,
 };
 
-const blockMapGasUsed = (block: any) => {
-  return {
-    x: hexToNumber(block.number),
-    y: new BigNumber(block.gasUsed).dividedBy(1000000),
-  };
-};
-
-const blockMapUncles = (block: any) => {
-  return {
-    x: hexToNumber(block.number),
-    y: block.uncles.length,
-  };
-};
-
-const blockMapHashRate = (block: any) => {
-  return {
-    x: hexToNumber(block.number),
-    y: hashesToGH(new BigNumber(block.difficulty, 16).dividedBy(config.blockTime)),
-  };
-};
-
-const blockMapTransactionCount = (block: any) => {
-  return {
-    x: hexToNumber(block.number),
-    y: block.transactions.length,
-  };
-};
-
 export default (props: any) => {
   const [erpc]: [EthereumJSONRPC] = useMultiGethStore();
   const theme = useTheme<Theme>();
@@ -166,37 +137,8 @@ export default (props: any) => {
             </ChartCard>
           </Grid>
         </Grid>
-        <Grid item container>
-          <Grid key="hashChart" item xs={12} md={6} lg={3}>
-            <ChartCard title={t("Hash Rate last blocks", { count: config.blockHistoryLength })}>
-              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-                <VictoryLine data={blocks.map(blockMapHashRate)} />
-              </VictoryChart>
-            </ChartCard>
-          </Grid>
-          <Grid key="txChart" item xs={12} md={6} lg={3}>
-            <ChartCard title={t("Transaction count last blocks", { count: config.blockHistoryLength })}>
-              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-                <VictoryBar data={blocks.map(blockMapTransactionCount)} />
-              </VictoryChart>
-            </ChartCard>
-          </Grid>
-          <Grid key="gasUsed" item xs={12} md={6} lg={3}>
-            <ChartCard title={t("Gas Used last blocks", { count: config.blockHistoryLength })}>
-              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-                <VictoryBar data={blocks.map(blockMapGasUsed)} />
-              </VictoryChart>
-            </ChartCard>
-          </Grid>
-          <Grid key="uncles" item xs={12} md={6} lg={3}>
-            <ChartCard title={t("Uncles last blocks", { count: config.blockHistoryLength })}>
-              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-                <VictoryBar data={blocks.map(blockMapUncles)} />
-              </VictoryChart>
-            </ChartCard>
-          </Grid>
-        </Grid>
       </Grid>
+      <StatCharts victoryTheme={victoryTheme} blocks={blocks} />
       <Grid container justify="flex-end">
         <Button
           color="primary"
diff --git a/src/containers/MinerStatsPage.tsx b/src/containers/MinerStatsPage.tsx
index 43f3ba45..6bdc7bc6 100644
--- a/src/containers/MinerStatsPage.tsx
+++ b/src/containers/MinerStatsPage.tsx
@@ -1,11 +1,16 @@
 
-import { CircularProgress } from "@material-ui/core";
+import { CircularProgress, useTheme, Theme } from "@material-ui/core";
 import useMultiGethStore from "../stores/useMultiGethStore";
 import * as React from "react";
 import getBlocks, { useBlockNumber } from "../helpers";
 import EthereumJSONRPC from "@etclabscore/ethereum-json-rpc";
 import MinerStats from "../components/MinerStats";
 import MinerStatsTable from "../components/MinerStatsTable";
+import StatCharts from "../components/StatCharts";
+import getTheme from "../themes/victoryTheme";
+import BlockPagination from "../components/BlockPagination";
+import { History } from "history";
+import _ from "lodash";
 
 const useState = React.useState;
 
@@ -15,30 +20,72 @@ const config = {
   chartHeight: 200,
   chartWidth: 400,
 };
+interface IProps {
+  match: {
+    params: {
+      address: string,
+      block: string,
+    };
+  };
+  history: History;
+}
 
-export default (props: any) => {
+export default (props: IProps) => {
   const [erpc]: [EthereumJSONRPC] = useMultiGethStore();
   const [blockNumber] = useBlockNumber(erpc);
   const [blocks, setBlocks] = useState();
+  const theme = useTheme<Theme>();
+  const victoryTheme = getTheme(theme);
+  const { block } = props.match.params;
+  const blockNum = block !== undefined ? parseInt(block, 10) : blockNumber;
+  const from = Math.max(blockNum - 99, 0);
+  const to = blockNum;
 
   React.useEffect(() => {
-    if (!erpc || blockNumber === null) { return; }
+    if (blockNum === undefined || blockNumber === undefined) {
+      return;
+    }
+    if (blockNum > blockNumber) {
+      props.history.push(`/stats/miners/${blockNumber}`);
+    }
+    if (blockNum < 0) {
+      props.history.push(`/stats/miners/0`);
+    }
+  }, [blockNumber, blockNum, props.history]);
+
+  React.useEffect(() => {
+    if (!erpc) { return; }
     getBlocks(
-      Math.max(blockNumber - config.blockHistoryLength + 1, 0),
-      blockNumber,
+      from,
+      to,
       erpc,
     ).then((bl) => {
-      setBlocks(bl);
+      setBlocks(_.compact(bl));
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [blockNumber]);
+  }, [from, to]);
 
-  if (!blocks) {
-    return <CircularProgress />;
+  if (!blocks || blockNumber === undefined || blockNum > blockNumber) {
+    return (<CircularProgress />);
   }
 
   return (
     <>
+      <BlockPagination
+        from={from}
+        to={to}
+        disablePrev={blockNum >= blockNumber}
+        disableNext={blockNum === 0}
+        onPrev={() => {
+          const newQuery = blockNum + 100;
+          props.history.push(`/stats/miners/${newQuery}`);
+        }}
+        onNext={() => {
+          const newQuery = Math.max(blockNum - 100, 0);
+          props.history.push(`/stats/miners/${newQuery}`);
+        }}
+      ></BlockPagination>
+      <StatCharts blocks={blocks} victoryTheme={victoryTheme} />
       <MinerStats blocks={blocks} config={config} />
       <MinerStatsTable blocks={blocks} />
     </>
diff --git a/src/translations/cn.ts b/src/translations/cn.ts
index 41092c87..7d3f12ea 100644
--- a/src/translations/cn.ts
+++ b/src/translations/cn.ts
@@ -15,18 +15,13 @@ export default {
   "Network Hash Rate": "算力",
   "Pending Transactions": "等待中的交易",
   "Peers": "端点",
-  "Hash Rate last blocks": "上个区块算力",
-  "Hash Rate last blocks_plural": "前{{count}}个区块算力",
-  "Transaction count last blocks": "上个区块交易数量",
-  "Transaction count last blocks_plural": "前 {{count}}个区块交易数量",
-  "Gas Used last blocks": "上个区块Gas消耗",
-  "Gas Used last blocks_plural": "前{{count}}个区块Gas消耗",
-  "Uncles last blocks": "上个区块叔块",
-  "Uncles last blocks_plural": "前{{count}}个区块叔块",
-  "Top Miners last blocks by extraData": "Top Miners last block",
-  "Top Miners last blocks by extraData_plural": "Top Miners last {{count}} blocks",
-  "Top Miners last blocks by address": "Top Miners last block by address",
-  "Top Miners last blocks by address_plural": "Top Miners last {{count}} blocks by address",
+  "Hash Rate": "Hash Rate",
+  "Transaction Count": "Transaction Count",
+  "Gas Usage": "Gas Usage",
+  "Uncles": "Uncles",
+  "Top Miners": "Top Miners",
+  "Top Miners by extraData": "Top Miners by extraData",
+  "Top Miners by Address": "Top Miners by Address",
   // block list
   "Block Number": "区块编号",
   "Hash": "哈希",
diff --git a/src/translations/en.ts b/src/translations/en.ts
index ec9ca39e..728c1f06 100644
--- a/src/translations/en.ts
+++ b/src/translations/en.ts
@@ -13,18 +13,13 @@ export default {
   "Network Hash Rate": "Network Hash Rate",
   "Pending Transactions": "PendingTransactions",
   "Peers": "Peers",
-  "Hash Rate last blocks": "Hash Rate last block",
-  "Hash Rate last blocks_plural": "Hash Rate last {{count}} blocks",
-  "Transaction count last blocks": "Transaction count last block",
-  "Transaction count last blocks_plural": "Transaction count last {{count}} blocks",
-  "Gas Used last blocks": "Gas Used last block",
-  "Gas Used last blocks_plural": "Gas Used last {{count}} blocks",
-  "Uncles last blocks": "Uncles last block",
-  "Uncles last blocks_plural": "Uncles last {{count}} blocks",
-  "Top Miners last blocks by extraData": "Top Miners last block by extraData",
-  "Top Miners last blocks by extraData_plural": "Top Miners last {{count}} blocks by extraData",
-  "Top Miners last blocks by address": "Top Miners last block by address",
-  "Top Miners last blocks by address_plural": "Top Miners last {{count}} blocks by address",
+  "Hash Rate": "Hash Rate",
+  "Transaction Count": "Transaction Count",
+  "Gas Usage": "Gas Usage",
+  "Uncles": "Uncles",
+  "Top Miners": "Top Miners",
+  "Top Miners by extraData": "Top Miners by extraData",
+  "Top Miners by Address": "Top Miners by Address",
   "Block Number": "Block Number",
   "Hash": "Hash",
   "Timestamp": "Timestamp",
diff --git a/src/translations/kr.ts b/src/translations/kr.ts
index 11697a8f..04865da4 100644
--- a/src/translations/kr.ts
+++ b/src/translations/kr.ts
@@ -15,18 +15,13 @@ export default {
   "Network Hash Rate": "해시파워",
   "Pending Transactions": "대기인 거래",
   "Peers": "거점",
-  "Hash Rate last blocks": "이전 블록 해시파워",
-  "Hash Rate last blocks_plural": "{{count}}개 이전 블록 해시파워",
-  "Transaction count last blocks": "이전 블록 거래수량",
-  "Transaction count last blocks_plural": "{{count}}개 이전 블록 해시파워",
-  "Gas Used last blocks": "이전 블록 Gas소모",
-  "Gas Used last blocks_plural": "{{count}}개 이전 블록 Gas소모",
-  "Uncles last blocks": "이번 블록의 엉클블록",
-  "Uncles last blocks_plural": "{{count}}개 이전 블록의 엉클블록",
-  "Top Miners last blocks": "Top Miners last block",
-  "Top Miners last blocks_plural": "Top Miners last {{count}} blocks",
-  "Top Miners last blocks by address": "Top Miners last block by address",
-  "Top Miners last blocks by address_plural": "Top Miners last {{count}} blocks by address",
+  "Hash Rate": "Hash Rate",
+  "Transaction Count": "Transaction Count",
+  "Gas Usage": "Gas Usage",
+  "Uncles": "Uncles",
+  "Top Miners": "Top Miners",
+  "Top Miners by extraData": "Top Miners by extraData",
+  "Top Miners by Address": "Top Miners by Address",
   // block list
   "Block Number": "블록번호",
   "Hash": "해시",