From 1b6c42c0310a016dc16c67d1e2cd5aa77e21f62e Mon Sep 17 00:00:00 2001
From: sam-keen <samuel.kleinmann@gmail.com>
Date: Thu, 3 Mar 2022 13:48:48 +0000
Subject: [PATCH] Updated block id page to use project components

---
 .../src/app/components/seconds-ago/index.tsx  |  2 +-
 .../components/txs/txs-per-block/index.tsx    |  2 +-
 .../src/app/routes/blocks/id/index.tsx        | 40 +++++++++----------
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/apps/explorer/src/app/components/seconds-ago/index.tsx b/apps/explorer/src/app/components/seconds-ago/index.tsx
index 14ad7abb2..6d68ba550 100644
--- a/apps/explorer/src/app/components/seconds-ago/index.tsx
+++ b/apps/explorer/src/app/components/seconds-ago/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 interface SecondsAgoProps {
-  date: string;
+  date: string | undefined;
 }
 
 export const SecondsAgo = ({ date }: SecondsAgoProps) => {
diff --git a/apps/explorer/src/app/components/txs/txs-per-block/index.tsx b/apps/explorer/src/app/components/txs/txs-per-block/index.tsx
index ff6051a52..9cee5104f 100644
--- a/apps/explorer/src/app/components/txs/txs-per-block/index.tsx
+++ b/apps/explorer/src/app/components/txs/txs-per-block/index.tsx
@@ -3,7 +3,7 @@ import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-re
 import { DATA_SOURCES } from '../../../config';
 
 interface TxsPerBlockProps {
-  blockHeight: string;
+  blockHeight: string | undefined;
 }
 
 export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
diff --git a/apps/explorer/src/app/routes/blocks/id/index.tsx b/apps/explorer/src/app/routes/blocks/id/index.tsx
index fddec098c..c93c177e9 100644
--- a/apps/explorer/src/app/routes/blocks/id/index.tsx
+++ b/apps/explorer/src/app/routes/blocks/id/index.tsx
@@ -2,26 +2,12 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import { DATA_SOURCES } from '../../../config';
 import useFetch from '../../../hooks/use-fetch';
-import { ChainExplorerTxResponse } from '../../types/chain-explorer-response';
 import { TendermintBlocksResponse } from '../tendermint-blocks-response';
+import { TxsPerBlock } from '../../../components/txs/txs-per-block';
+import { SecondsAgo } from '../../../components/seconds-ago';
 
 const Block = () => {
   const { block } = useParams<{ block: string }>();
-  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(block!),
-      node_url: `${DATA_SOURCES.tendermintUrl}/`,
-    }),
-  });
-
   const {
     state: { data: blockData },
   } = useFetch<TendermintBlocksResponse>(
@@ -30,11 +16,23 @@ const Block = () => {
 
   return (
     <section>
-      <h1>block</h1>
-      <h2>Tendermint Data</h2>
-      <pre>{JSON.stringify(blockData, null, '  ')}</pre>
-      <h2>Decoded data</h2>
-      <pre>{JSON.stringify(decodedBlockData, null, '  ')}</pre>
+      <h1>BLOCK {block}</h1>
+      <table>
+        <tbody>
+          <tr>
+            <td>Mined by</td>
+            <td>{blockData?.result.block.header?.proposer_address}</td>
+          </tr>
+          <tr>
+            <td>Time</td>
+            <td>
+              <SecondsAgo date={blockData?.result.block.header?.time} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <TxsPerBlock blockHeight={block} />
     </section>
   );
 };