Add ability to view DS Blocks (#13)

* Changed Runtime Context to contain Zilliqa object

* Reformatted code so that all Pending components are together

* Added basic components for DS Blocks

* Implemented polling for most recent DS Block

* Added function to convert to Otterscan timestamp format

* Added detailed DS Block page

* Added ability to search for DS Blocks using search bar

* Added DS Block List page

src/App.tsx

@@ -10,8 +10,10 @@ import { RuntimeContext, useRuntime } from "./useRuntime";
 import { ChainInfoContext, useChainInfoFromMetadataFile } from "./useChainInfo";
 
 const Block = lazy(() => import("./execution/Block"));
-const BlockList = lazy(() => import("./execution/BlockList"));
 const BlockTransactions = lazy(() => import("./execution/BlockTransactions"));
+const DSBlock = lazy(() => import("./execution/DSBlock"));
+const BlockList = lazy(() => import("./execution/BlockList"));
+const DSBlockList = lazy(() => import("./execution/DSBlockList"));
 const Address = lazy(() => import("./execution/Address"));
 const Transaction = lazy(() => import("./execution/Transaction"));
 const AllContracts = lazy(() => import("./token/AllContracts"));
@@ -58,12 +60,19 @@ const App = () => {
                       path="block/:blockNumberOrHash"
                       element={<Block />}
                     />
+                    <Route
+                      path="block/:blockNumber/txs"
+                      element={<BlockTransactions />}
+                    />
+                    <Route
+                      path="dsblock/:dsBlockNumberOrHash"
+                      element={<DSBlock />}
+                    />
                     <Route
                       path="blocklist" element={ <BlockList/>}
                     />
                     <Route
-                      path="block/:blockNumber/txs"
-                      element={<BlockTransactions />}
+                      path="dsblocklist" element={ <DSBlockList/>}
                     />
                     <Route path="tx/:txhash/*" element={<Transaction />} />
                     <Route

src/Header.tsx

@@ -45,8 +45,8 @@ const Header: FC<HeaderProps> = ({sourcifyPresent}) => {
             <input
               className="w-full rounded-l border-t border-b border-l px-2 py-1 text-sm focus:outline-none"
               type="text"
-              size={60}
-              placeholder={`Type "/" to search by address / txn hash / block number${
+              size={80}
+              placeholder={`Type "/" to search by address / txn hash / block number / # ds block number${
                 provider?.network.ensAddress ? " / ENS name" : ""
               }`}
               onChange={handleChange}

src/Home.tsx

@@ -10,6 +10,7 @@ import { blockURL, slotURL } from "./url";
 import { useFinalizedSlotNumber, useSlotTimestamp } from "./useConsensus";
 import Header from "./Header";
 import RecentBlocks from "./execution/block/RecentBlocks";
+import RecentDSBlocks from "./execution/block/RecentDSBlocks";
 
 
 const Home: FC = () => {
@@ -24,7 +25,14 @@ const Home: FC = () => {
   return (
     <>
       <Header sourcifyPresent= {false} />
-      <RecentBlocks />
+      <div className="grid grid-cols-5 gap-x-1 mx-1">
+        <span className="col-span-2">
+          <RecentDSBlocks />
+        </span>
+        <span className="col-span-3">
+            <RecentBlocks />
+        </span>
+      </div>
       <div className="flex grow flex-col items-center pb-5 text-lg font-bold text-link-blue hover:text-link-blue-hover">
         {provider?.network.chainId !== 11155111 && (
           <NavLink to="/special/london">

src/components/BlockNotFound.tsx

@@ -7,7 +7,7 @@ type BlockNotFoundProps = {
 
 const BlockNotFound: React.FC<BlockNotFoundProps> = ({ blockNumberOrHash }) => (
   <ContentFrame>
-    <div className="py-4 text-sm">Block "{blockNumberOrHash}" not found.</div>
+    <div className="py-4 text-sm">Tx Block "{blockNumberOrHash}" not found.</div>
   </ContentFrame>
 );
 

src/components/DSBlockLink.tsx

@@ -0,0 +1,35 @@
+import { FC, memo } from "react";
+import { NavLink } from "react-router-dom";
+import { BlockTag } from "@ethersproject/abstract-provider";
+import { commify } from "@ethersproject/units";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCube } from "@fortawesome/free-solid-svg-icons";
+import { dsBlockURL } from "../url";
+
+type DSBlockLinkProps = {
+  blockTag: BlockTag;
+};
+
+const DSBlockLink: FC<DSBlockLinkProps> = ({ blockTag }) => {
+  const isNum = typeof blockTag === "number";
+  let text = blockTag;
+  if (isNum) {
+    text = commify(blockTag);
+  }
+
+  return (
+    <NavLink
+      className={`flex-inline items-baseline space-x-1 text-link-blue hover:text-link-blue-hover ${
+        isNum ? "font-blocknum" : "font-hash"
+      }`}
+      to={dsBlockURL(blockTag)}
+    >
+      <span className="text-orange-500">
+        <FontAwesomeIcon className="self-center" icon={faCube} size="1x" />
+      </span>
+      <span>{text}</span>
+    </NavLink>
+  );
+};
+
+export default memo(DSBlockLink);

src/components/DSBlockNotFound.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import ContentFrame from "./ContentFrame";
+
+type DSBlockNotFoundProps = {
+  blockNumberOrHash: string;
+};
+
+const DSBlockNotFound: React.FC<DSBlockNotFoundProps> = ({ blockNumberOrHash }) => (
+  <ContentFrame>
+    <div className="py-4 text-sm">DS Block "{blockNumberOrHash}" not found.</div>
+  </ContentFrame>
+);
+
+export default React.memo(DSBlockNotFound);

src/execution/Block.tsx

@@ -54,7 +54,7 @@ const Block: FC = () => {
     <StandardFrame>
       <StandardSubtitle>
         <div className="flex items-baseline space-x-1">
-          <span>Block</span>
+          <span>Tx Block</span>
           <span className="text-base text-gray-500">#{blockNumberOrHash}</span>
           {block && (
             <NavBlock

src/execution/BlockList.tsx

@@ -4,10 +4,10 @@ import StandardFrame from "../components/StandardFrame";
 import { PAGE_SIZE } from "../params";
 import { RuntimeContext } from "../useRuntime";
 import StandardSubtitle from "../components/StandardSubtitle";
-import { useLatestBlockHeader } from "../useLatestBlock";
+import { useLatestBlockNumber } from "../useLatestBlock";
 import { useRecentBlocks } from "../useErigonHooks";
 import BlockItem from "../search/BlockItem";
-import PendingBlockResults from "../search/PendingBlockResults";
+import { PendingBlockResults } from "../search/PendingResults";
 import StandardSelectionBoundary from "../selection/StandardSelectionBoundary";
 import { useFeeToggler } from "../search/useFeeToggler";
 import ContentFrame from "../components/ContentFrame";
@@ -18,10 +18,8 @@ import SearchResultNavBar from "../search/SearchResultNavBar";
 const BlockList: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
 
-  const latestBlock = useLatestBlockHeader(provider);
-
+  const latestBlockNum = useLatestBlockNumber(provider);
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
-  const latestBlockNum = latestBlock?.number;
 
 
   const [searchParams] = useSearchParams();
@@ -43,7 +41,7 @@ const BlockList: React.FC = () => {
   return (
     <StandardFrame>
       <StandardSubtitle>
-        <div className="flex items-baseline space-x-1">Block List</div>
+        <div className="flex items-baseline space-x-1">Tx Block List</div>
       </StandardSubtitle>
       <ContentFrame isLoading={isLoading}>
       <SearchResultNavBar

src/execution/DSBlock.tsx

@@ -0,0 +1,86 @@
+import { useMemo, useContext, FC } from "react";
+import { useParams } from "react-router-dom";
+import { commify }  from "@ethersproject/units";
+import StandardFrame from "../components/StandardFrame";
+import StandardSubtitle from "../components/StandardSubtitle";
+import NavBlock from "../components/NavBlock";
+import ContentFrame from "../components/ContentFrame";
+import BlockNotFound from "../components/BlockNotFound";
+import InfoRow from "../components/InfoRow";
+import Timestamp from "../components/Timestamp";
+import BlockLink from "../components/BlockLink";
+import DecoratedAddressLink from "./components/DecoratedAddressLink";
+import { RuntimeContext } from "../useRuntime";
+import { useLatestBlockChainInfo } from "../useLatestBlock";
+import { dsBlockURL } from "../url";
+import { useBlockPageTitle } from "../useTitle";
+import { useDSBlockData } from "../useZilliqaHooks";
+import { pubKeyToAddr, zilliqaToOtterscanTimestamp } from "../utils/utils";
+
+// TODO: Figure out what we want to do with the previous Hash field
+const DSBlock: FC = () => {
+  const { zilliqa } = useContext(RuntimeContext);
+  const { dsBlockNumberOrHash } = useParams();
+  if (dsBlockNumberOrHash === undefined) {
+    throw new Error("dsBlockNumberOrHash couldn't be undefined here");
+  }
+
+  const { data: dsBlock, isLoading } = useDSBlockData(zilliqa, dsBlockNumberOrHash);
+  useBlockPageTitle(parseInt(dsBlockNumberOrHash));
+
+  const latestBlockChainInfo = useLatestBlockChainInfo(zilliqa);
+  const latestDSBlockNum = latestBlockChainInfo?.CurrentDSEpoch;
+
+  return (
+    <StandardFrame>
+      <StandardSubtitle>
+        <div className="flex items-baseline space-x-1">
+          <span>DS Block</span>
+          <span className="text-base text-gray-500">#{dsBlockNumberOrHash}</span>
+          {dsBlock && (
+            <NavBlock
+              entityNum={parseInt(dsBlock.header.BlockNum)}
+              latestEntityNum={latestDSBlockNum !== undefined ? parseInt(latestDSBlockNum) : undefined}
+              urlBuilder={dsBlockURL}
+            />
+          )}
+        </div>
+      </StandardSubtitle>
+      {dsBlock === null && (
+        <BlockNotFound blockNumberOrHash={dsBlockNumberOrHash} />
+      )}
+      {dsBlock === undefined && (
+        <ContentFrame>
+          <InfoRow title="Block Height">Loading DS Block data...</InfoRow>
+        </ContentFrame>
+      )}
+      {dsBlock && (
+        <ContentFrame isLoading={isLoading}>
+          <InfoRow title="Block Height">
+            <span className="font-bold">{commify(dsBlock.header.BlockNum)}</span>
+          </InfoRow>
+          <InfoRow title="Timestamp">
+            <Timestamp value={zilliqaToOtterscanTimestamp(dsBlock.header.Timestamp)} />
+          </InfoRow>
+          <InfoRow title="DS Leader">
+            <DecoratedAddressLink address={pubKeyToAddr(dsBlock.header.LeaderPubKey)} miner />
+          </InfoRow>
+          <InfoRow title="Gas Used/Limit">
+            {commify(dsBlock.header.GasPrice)}
+          </InfoRow>
+          <InfoRow title="Difficulty">
+            {commify(dsBlock.header.Difficulty.toString())}
+          </InfoRow>
+          <InfoRow title="Total Difficulty">
+            {commify(dsBlock.header.DifficultyDS.toString())}
+          </InfoRow>
+          <InfoRow title="Previous Hash">
+            <BlockLink blockTag={dsBlock.header.PrevHash} />
+          </InfoRow>
+        </ContentFrame>
+      )}
+    </StandardFrame>
+  );
+};
+
+export default DSBlock;

src/execution/DSBlockList.tsx

@@ -0,0 +1,68 @@
+import React, { useContext } from "react";
+import { useSearchParams } from "react-router-dom";
+import StandardFrame from "../components/StandardFrame";
+import { PAGE_SIZE } from "../params";
+import { RuntimeContext } from "../useRuntime";
+import StandardSubtitle from "../components/StandardSubtitle";
+import { useLatestBlockChainInfo } from "../useLatestBlock";
+import { PendingRecentDSBlockResults } from "../search/PendingResults";
+import StandardSelectionBoundary from "../selection/StandardSelectionBoundary";
+import ContentFrame from "../components/ContentFrame";
+import { totalBlocksFormatter } from "../search/messages";
+import SearchResultNavBar from "../search/SearchResultNavBar";
+import { useDSBlocksData } from "../useZilliqaHooks";
+import RecentDSBlockItem from "../search/RecentDSBlockItem";
+import DSBlockResultHeader from "../search/DSBlockResultHeader";
+import DSBlockItem from "../search/DSBlockItem";
+
+const DSBlockList: React.FC = () => {
+  const { zilliqa } = useContext(RuntimeContext);
+
+  const latestBlockChainInfo = useLatestBlockChainInfo(zilliqa); 
+  const latestBlockNum = latestBlockChainInfo?.CurrentDSEpoch;
+  const latestBlockNumInt = latestBlockNum !== undefined ? parseInt(latestBlockNum, 10) : undefined;
+
+  const [searchParams] = useSearchParams();
+  let pageNumber = 1;
+  const p = searchParams.get("p");
+  if (p) {
+    try {
+      pageNumber = parseInt(p);
+    } catch (err) {}
+  }
+
+  const { data, isLoading } = useDSBlocksData(
+    zilliqa,
+    latestBlockNumInt,
+    pageNumber - 1,
+    PAGE_SIZE
+  );
+
+  return (
+    <StandardFrame>
+      <StandardSubtitle>
+        <div className="flex items-baseline space-x-1">DS Block List</div>
+      </StandardSubtitle>
+      <ContentFrame isLoading={isLoading}>
+      <SearchResultNavBar
+        pageNumber={pageNumber}
+        pageSize={PAGE_SIZE}
+        total={latestBlockNumInt}
+        totalFormatter={totalBlocksFormatter}
+      />
+      <DSBlockResultHeader/>
+      {data ? (
+        <StandardSelectionBoundary>
+          {data.map((block) => (
+            block ? <DSBlockItem key={block.header.BlockNum} block={block} /> : <></> 
+          ))}
+        </StandardSelectionBoundary>
+      ) : (
+        <PendingRecentDSBlockResults />
+      )}
+    </ContentFrame>
+    </StandardFrame>
+  );
+};
+
+export default DSBlockList;

src/execution/address/AddressTransactionResults.tsx

@@ -7,7 +7,7 @@ import NativeTokenAmountAndFiat from "../../components/NativeTokenAmountAndFiat"
 import { balancePreset } from "../../components/FiatValue";
 import TransactionAddressWithCopy from "../components/TransactionAddressWithCopy";
 import TransactionLink from "../../components/TransactionLink";
-import PendingTransactionResults from "../../search/PendingTransactionResults";
+import { PendingTransactionResults } from "../../search/PendingResults";
 import TransactionResultHeader from "../../search/TransactionResultHeader";
 import { SearchController } from "../../search/search";
 import TransactionItem from "../../search/TransactionItem";

src/execution/block/BlockTransactionResults.tsx

@@ -3,7 +3,7 @@ import ContentFrame from "../../components/ContentFrame";
 import StandardSelectionBoundary from "../../selection/StandardSelectionBoundary";
 import SearchResultNavBar from "../../search/SearchResultNavBar";
 import TransactionResultHeader from "../../search/TransactionResultHeader";
-import PendingTransactionResults from "../../search/PendingTransactionResults";
+import { PendingTransactionResults } from "../../search/PendingResults";
 import TransactionItem from "../../search/TransactionItem";
 import { useFeeToggler } from "../../search/useFeeToggler";
 import { totalTransactionsFormatter } from "../../search/messages";

src/execution/block/RecentBlocks.tsx

@@ -4,20 +4,19 @@ import StandardSelectionBoundary from "../../selection/StandardSelectionBoundary
 import { useFeeToggler } from "../../search/useFeeToggler";
 import { RuntimeContext } from "../../useRuntime";
 import { useRecentBlocks } from "../../useErigonHooks";
-import { useLatestBlockHeader } from "../../useLatestBlock";
+import { useLatestBlockNumber } from "../../useLatestBlock";
 import { RECENT_SIZE } from "../../params";
 import RecentBlockItem from "../../search/RecentBlockItem";
 import RecentBlockResultHeader from "../../search/RecentBlockResultHeader";
-import PendingBlockResults from "../../search/PendingBlockResults";
+import { PendingRecentBlockResults } from "../../search/PendingResults";
 import RecentNavBar from "../../search/RecentNavBar";
 
 
 const RecentBlocks: FC = () => {
   const { provider } = useContext(RuntimeContext);
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
 
-  const latestBlock = useLatestBlockHeader(provider);
-  const latestBlockNum = latestBlock?.number;
+  const latestBlockNum = useLatestBlockNumber(provider);
 
   // Uses hook to get the most recent blocks
   const { data, isLoading } = useRecentBlocks(
@@ -42,7 +41,7 @@ const RecentBlocks: FC = () => {
           ))}
         </StandardSelectionBoundary>
       ) : (
-        <PendingBlockResults />
+        <PendingRecentBlockResults />
       )}
     </ContentFrame>
   );