Transactions route set up and a component to show the transactions per block

apps/explorer/src/app/components/blocks/home/blocksTable.tsx

@@ -1,13 +1,14 @@
 import { TendermintBlockchainResponse } from '../../../routes/blocks/tendermint-blockchain-response';
 import { Link } from 'react-router-dom';
 import { SecondsAgo } from '../../seconds-ago';
+import { TxsPerBlock } from '../../txs/txs-per-block';
 
 interface BlocksProps {
   data: TendermintBlockchainResponse | undefined;
-  showExpanded?: boolean;
+  showTransactions?: boolean;
 }
 
-export const BlocksTable = ({ data }: BlocksProps) => {
+export const BlocksTable = ({ data, showTransactions }: BlocksProps) => {
   if (!data?.result) {
     return <>No block data</>;
   }
@@ -17,28 +18,35 @@ export const BlocksTable = ({ data }: BlocksProps) => {
       <tbody>
         {data.result?.block_metas?.map((block) => {
           return (
-            <tr>
-              <td>
-                <Link to={`/blocks/${block.header?.height}`}>
-                  {block.header?.height}
-                </Link>
-              </td>
-              <td>
-                {block.num_txs === '1'
-                  ? '1 transaction'
-                  : `${block.num_txs} transactions`}
-              </td>
-              {block.header?.proposer_address && (
+            <>
+              <tr>
                 <td>
-                  <Link to={`/validators/${block.header.proposer_address}`}>
-                    {block.header.proposer_address}
+                  <Link to={`/blocks/${block.header?.height}`}>
+                    {block.header?.height}
                   </Link>
                 </td>
+                <td>
+                  {block.num_txs === '1'
+                    ? '1 transaction'
+                    : `${block.num_txs} transactions`}
+                </td>
+                {block.header?.proposer_address && (
+                  <td>
+                    <Link to={`/validators/${block.header.proposer_address}`}>
+                      {block.header.proposer_address}
+                    </Link>
+                  </td>
+                )}
+                <td>
+                  <SecondsAgo date={block.header?.time} />
+                </td>
+              </tr>
+              {showTransactions && (
+                <tr>
+                  <TxsPerBlock blockHeight={block.header.height} />
+                </tr>
               )}
-              <td>
-                <SecondsAgo date={block.header?.time} />
-              </td>
-            </tr>
+            </>
           );
         })}
       </tbody>

apps/explorer/src/app/components/txs/txs-per-block/index.tsx

@@ -0,0 +1,48 @@
+import useFetch from '../../../hooks/use-fetch';
+import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response';
+import { DATA_SOURCES } from '../../../config';
+
+interface TxsPerBlockProps {
+  blockHeight: string;
+}
+
+export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
+  const {
+    state: { data: decodedBlockData },
+  } = useFetch<ChainExplorerTxResponse[]>(DATA_SOURCES.chainExplorerUrl, {
+    method: 'POST',
+    mode: 'cors',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      block_height: parseInt(blockHeight!),
+      node_url: `${DATA_SOURCES.tendermintUrl}/`,
+    }),
+  });
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <td>Transaction</td>
+          <td>From</td>
+          <td>Type</td>
+        </tr>
+      </thead>
+      <tbody>
+        {decodedBlockData &&
+          decodedBlockData.map(({ TxHash, PubKey, Type }, index) => {
+            return (
+              <tr key={index}>
+                <td>{TxHash}</td>
+                <td>{PubKey}</td>
+                <td>{Type}</td>
+              </tr>
+            );
+          })}
+      </tbody>
+    </table>
+  );
+};

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -1,8 +1,27 @@
+import useFetch from '../../../hooks/use-fetch';
+import { TendermintBlockchainResponse } from '../../blocks/tendermint-blockchain-response';
+import { DATA_SOURCES } from '../../../config';
+import { BlocksTable } from '../../../components/blocks';
+import { JumpToBlock } from '../../../components/jump-to-block';
+
 const Txs = () => {
+  const {
+    state: { data },
+    refetch,
+  } = useFetch<TendermintBlockchainResponse>(
+    `${DATA_SOURCES.tendermintUrl}/blockchain`
+  );
+
   return (
-    <section>
-      <h1>Transactions</h1>
-    </section>
+    <>
+      <section>
+        <h1>Transactions</h1>
+        <button onClick={() => refetch()}>Refresh to see latest blocks</button>
+        <BlocksTable data={data} showTransactions={true} />
+      </section>
+
+      <JumpToBlock />
+    </>
   );
 };