Added Table presentational component for a little cleanup

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

@@ -2,6 +2,7 @@ import { TendermintBlockchainResponse } from '../../../routes/blocks/tendermint-
 import { Link } from 'react-router-dom';
 import { SecondsAgo } from '../../seconds-ago';
 import { TxsPerBlock } from '../../txs/txs-per-block';
+import { Table } from '../../table';
 
 interface BlocksProps {
   data: TendermintBlockchainResponse | undefined;
@@ -14,8 +15,7 @@ export const BlocksTable = ({ data, showTransactions }: BlocksProps) => {
   }
 
   return (
-    <table>
-      <tbody>
+    <Table>
       {data.result?.block_metas?.map((block) => {
         return (
           <>
@@ -49,7 +49,6 @@ export const BlocksTable = ({ data, showTransactions }: BlocksProps) => {
           </>
         );
       })}
-      </tbody>
-    </table>
+    </Table>
   );
 };

apps/explorer/src/app/components/table/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface TableProps {
+  children: React.ReactNode;
+}
+
+export const Table = ({ children }: TableProps) => {
+  return (
+    <table>
+      <tbody>{children}</tbody>
+    </table>
+  );
+};

apps/explorer/src/app/components/txs/id/txContent.tsx

@@ -1,5 +1,6 @@
 import { Codeblock } from '../../codeblock';
 import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response';
+import { Table } from '../../table';
 
 interface TxContentProps {
   data: ChainExplorerTxResponse | undefined;
@@ -21,14 +22,12 @@ export const TxContent = ({ data }: TxContentProps) => {
 
   return (
     <>
-      <table>
-        <tbody>
+      <Table>
         <tr>
           <td>Type</td>
           <td>{data.Type}</td>
         </tr>
-        </tbody>
-      </table>
+      </Table>
 
       <h3>Decoded transaction content</h3>
       <Codeblock code={displayCode} language={'javascript'} />

apps/explorer/src/app/components/txs/id/txDetails.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 import { Routes } from '../../../routes/router-config';
 import { Result } from '../../../routes/txs/tendermint-transaction-response.d';
+import { Table } from '../../table';
 
 interface TxDetailsProps {
   txData: Result | undefined;
@@ -13,8 +14,7 @@ export const TxDetails = ({ txData, pubKey }: TxDetailsProps) => {
   }
 
   return (
-    <table>
-      <tbody>
+    <Table>
       <tr>
         <td>Hash</td>
         <td>{txData.hash}</td>
@@ -42,7 +42,6 @@ export const TxDetails = ({ txData, pubKey }: TxDetailsProps) => {
         <td>Encoded tnx</td>
         <td>{txData.tx}</td>
       </tr>
-      </tbody>
-    </table>
+    </Table>
   );
 };

apps/explorer/src/app/routes/blocks/id/index.tsx

@@ -5,6 +5,7 @@ import useFetch from '../../../hooks/use-fetch';
 import { TendermintBlocksResponse } from '../tendermint-blocks-response';
 import { TxsPerBlock } from '../../../components/txs/txs-per-block';
 import { SecondsAgo } from '../../../components/seconds-ago';
+import { Table } from '../../../components/table';
 
 const Block = () => {
   const { block } = useParams<{ block: string }>();
@@ -17,8 +18,7 @@ const Block = () => {
   return (
     <section>
       <h1>BLOCK {block}</h1>
-      <table>
-        <tbody>
+      <Table>
         <tr>
           <td>Mined by</td>
           <td>{blockData?.result.block.header?.proposer_address}</td>
@@ -29,9 +29,7 @@ const Block = () => {
             <SecondsAgo date={blockData?.result.block.header?.time} />
           </td>
         </tr>
-        </tbody>
-      </table>
-
+      </Table>
       <TxsPerBlock blockHeight={block} />
     </section>
   );