feat(frontend): Display receipts on Block Details page (#643)

Resolves #590; Resolves #316; Resolves #303; Resolves #544 ### Test Plan: - [x] All components are unit-tested - [x] Update tests in existing componets - [x] Manually check page loading
near · Jun 8, 2021 · b471409 · b471409
1 parent 7bb87ac
commit b471409
Show file tree

Hide file tree

Showing 33 changed files with 1,703 additions and 254 deletions.
diff --git a/frontend/src/components/blocks/BlockDetails.tsx b/frontend/src/components/blocks/BlockDetails.tsx
@@ -6,11 +6,13 @@ import { Row, Col } from "react-bootstrap";
 import * as B from "../../libraries/explorer-wamp/blocks";
 import { DatabaseConsumer } from "../../context/DatabaseProvider";
 
+import AccountLink from "../utils/AccountLink";
 import BlockLink from "../utils/BlockLink";
 import CardCell from "../utils/CardCell";
 import Term from "../utils/Term";
 import Gas from "../utils/Gas";
 import GasPrice from "../utils/GasPrice";
+
 export interface Props {
   block: B.DetailedBlockInfo;
 }
@@ -23,7 +25,7 @@ const BlockDetails = ({ block }: Props) => {
           <Row noGutters>
             <Col className="block-info-container">
               <Row noGutters className="block-info-header">
-                <Col md="3">
+                <Col md="4">
                   <CardCell
                     title={
                       <Term
@@ -37,37 +39,13 @@ const BlockDetails = ({ block }: Props) => {
                     className="border-0"
                   />
                 </Col>
-                <Col md="3">
+                <Col md="4">
                   <CardCell
-                    title={
-                      <Term
-                        title={"Gas Used"}
-                        text={
-                          "Total units of gas used by transactions in this block. "
-                        }
-                        href={"https://docs.near.org/docs/concepts/gas"}
-                      />
-                    }
-                    imgLink="/static/images/icon-m-size.svg"
-                    text={<Gas gas={block.gasUsed} />}
+                    title={"Receipts"}
+                    text={block.receiptsCount.toString()}
                   />
                 </Col>
-                <Col md="3">
-                  <CardCell
-                    title={
-                      <Term
-                        title={"Gas Price"}
-                        text={
-                          "A unit of Tgas (TeraGas) is 1*10^12 units of gas. The costs of gas are very low in terms of NEAR, which is why Tgas is more commonly used. "
-                        }
-                        href={"https://docs.near.org/docs/concepts/gas"}
-                      />
-                    }
-                    imgLink="/static/images/icon-m-filter.svg"
-                    text={<GasPrice gasPrice={block.gasPrice} />}
-                  />
-                </Col>
-                <Col md="3">
+                <Col md="4">
                   <CardCell
                     title={
                       <Term
@@ -96,7 +74,46 @@ const BlockDetails = ({ block }: Props) => {
                   />
                 </Col>
               </Row>
-              <Row noGutters className="border-0">
+              <Row noGutters>
+                <Col md="4">
+                  <CardCell
+                    title={"Author"}
+                    text={<AccountLink accountId={block.authorAccountId} />}
+                    className="border-0"
+                  />
+                </Col>
+                <Col md="4">
+                  <CardCell
+                    title={
+                      <Term
+                        title={"Gas Used"}
+                        text={
+                          "Total units of gas used by transactions in this block. "
+                        }
+                        href={"https://docs.near.org/docs/concepts/gas"}
+                      />
+                    }
+                    imgLink="/static/images/icon-m-size.svg"
+                    text={<Gas gas={block.gasUsed} />}
+                  />
+                </Col>
+                <Col md="4">
+                  <CardCell
+                    title={
+                      <Term
+                        title={"Gas Price"}
+                        text={
+                          "A unit of Tgas (TeraGas) is 1*10^12 units of gas. The costs of gas are very low in terms of NEAR, which is why Tgas is more commonly used. "
+                        }
+                        href={"https://docs.near.org/docs/concepts/gas"}
+                      />
+                    }
+                    imgLink="/static/images/icon-m-filter.svg"
+                    text={<GasPrice gasPrice={block.gasPrice} />}
+                  />
+                </Col>
+              </Row>
+              <Row noGutters>
                 <Col md="4">
                   <CardCell
                     title={
@@ -120,7 +137,6 @@ const BlockDetails = ({ block }: Props) => {
                       />
                     }
                     text={block.hash}
-                    className="border-0"
                   />
                 </Col>
               </Row>
@@ -175,6 +191,12 @@ const BlockDetails = ({ block }: Props) => {
             .block-card-parent-hash {
               background-color: #f8f8f8;
             }
+
+            @media (max-width: 768px) {
+              .block-info-container .card-cell {
+                border-left: 0;
+              }
+            }
           `}</style>
         </>
       )}

diff --git a/frontend/src/components/blocks/ReceiptsInBlock.tsx b/frontend/src/components/blocks/ReceiptsInBlock.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+
+import ReceiptsApi, { Receipt } from "../../libraries/explorer-wamp/receipts";
+
+import Receipts from "../receipts/Receipts";
+import Placeholder from "../utils/Placeholder";
+import PaginationSpinner from "../utils/PaginationSpinner";
+
+interface Props {
+  blockHash: string;
+}
+
+interface State {
+  receipts: Receipt[];
+  loading: boolean;
+}
+
+class ReceiptsInBlock extends React.Component<Props, State> {
+  state = {
+    receipts: [],
+    loading: true,
+  };
+  componentDidMount() {
+    this.fetchReceiptsList(this.props.blockHash);
+  }
+
+  componentDidUpdate(prevProps: any) {
+    if (prevProps.blockHash !== this.props.blockHash) {
+      this.fetchReceiptsList(this.props.blockHash);
+    }
+  }
+
+  fetchReceiptsList = (blockHash: string): void => {
+    if (blockHash) {
+      new ReceiptsApi().queryReceiptsList(blockHash).then((receipts) => {
+        this.setState({ receipts, loading: false });
+      });
+    }
+  };
+  render() {
+    const { receipts, loading } = this.state;
+
+    return (
+      <>
+        {loading ? (
+          <PaginationSpinner hidden={false} />
+        ) : receipts.length > 0 ? (
+          <Receipts receipts={receipts} />
+        ) : (
+          <Placeholder>{"There are no receipts in this block"}</Placeholder>
+        )}
+      </>
+    );
+  }
+}
+
+export default ReceiptsInBlock;
diff --git a/frontend/src/components/blocks/__tests__/BlockDetails.test.tsx b/frontend/src/components/blocks/__tests__/BlockDetails.test.tsx
@@ -10,6 +10,7 @@ describe("<BlockDetails />", () => {
       renderer.create(
         <BlockDetails
           block={{
+            authorAccountId: "near.near",
             transactionsCount: 3,
             timestamp: Number(new Date(2019, 1, 1)),
             hash: "EVvWW1S9BFaEjY1JBNSdstb7ZTtTFjQ6cygkbw1KY4tL",
@@ -18,6 +19,7 @@ describe("<BlockDetails />", () => {
             gasPrice: new BN("5000"),
             gasUsed: new BN("1000"),
             totalSupply: new BN(10).pow(new BN(24 + 9)),
+            receiptsCount: 5,
           }}
         />
       )