Added extra 'Table' component without tbody and used for transactions

apps/explorer/src/app/components/blocks/block-data.tsx

@@ -3,7 +3,7 @@ import { BlockMeta } from '../../routes/blocks/tendermint-blockchain-response';
 import { Routes } from '../../routes/router-config';
 import { Link } from 'react-router-dom';
 import { SecondsAgo } from '../seconds-ago';
-import { Table, TableRow, TableCell } from '../table';
+import { TableWithTbody, TableRow, TableCell } from '../table';
 
 interface BlockProps {
   block: BlockMeta;
@@ -12,7 +12,7 @@ interface BlockProps {
 
 export const BlockData = ({ block, className }: BlockProps) => {
   return (
-    <Table
+    <TableWithTbody
       aria-label={`Data for block ${block.header?.height}`}
       className={className}
     >
@@ -55,6 +55,6 @@ export const BlockData = ({ block, className }: BlockProps) => {
           <SecondsAgo date={block.header?.time} />
         </TableCell>
       </TableRow>
-    </Table>
+    </TableWithTbody>
   );
 };

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

@@ -25,6 +25,21 @@ interface TableCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
 }
 
 export const Table = ({ children, className, ...props }: TableProps) => {
+  const classes = classnames(className, 'overflow-x-auto whitespace-nowrap');
+  return (
+    <div className={classes}>
+      <table className="w-full" {...props}>
+        {children}
+      </table>
+    </div>
+  );
+};
+
+export const TableWithTbody = ({
+  children,
+  className,
+  ...props
+}: TableProps) => {
   const classes = classnames(className, 'overflow-x-auto whitespace-nowrap');
   return (
     <div className={classes}>
@@ -57,8 +72,7 @@ export const TableRow = ({
   ...props
 }: TableRowProps) => {
   const cellClasses = classnames(className, {
-    'border-b bg-black-40 border-black-40 dark:border-white-40':
-      modifier === 'bordered',
+    'border-b border-black-40 dark:border-white-40': modifier === 'bordered',
     'border-b-4 bg-black-40 border-b-white dark:bg-white-25 dark:border-b-black':
       modifier === 'background',
   });

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

@@ -1,15 +1,15 @@
 import { render, screen } from '@testing-library/react';
 
-import { Table, TableRow, TableHeader, TableCell } from './index';
+import { TableWithTbody, TableRow, TableHeader, TableCell } from './index';
 
 describe('Renders all table components', () => {
   render(
-    <Table data-testid="test-table">
+    <TableWithTbody data-testid="test-table">
       <TableRow data-testid="test-tr">
         <TableHeader data-testid="test-th">Title</TableHeader>
         <TableCell data-testid="test-td">Content</TableCell>
       </TableRow>
-    </Table>
+    </TableWithTbody>
   );
 
   expect(screen.getByTestId('test-table')).toBeInTheDocument();
@@ -21,11 +21,11 @@ describe('Renders all table components', () => {
 describe('Table row', () => {
   it('should include classes based on custom "modifier" prop', () => {
     render(
-      <Table>
+      <TableWithTbody>
         <TableRow data-testid="modifier-test" modifier="bordered">
           <TableCell>With modifier</TableCell>
         </TableRow>
-      </Table>
+      </TableWithTbody>
     );
 
     expect(screen.getByTestId('modifier-test')).toHaveClass('border-b');
@@ -35,13 +35,13 @@ describe('Table row', () => {
 describe('Table header', () => {
   it('should accept props i.e. scope="row"', () => {
     render(
-      <Table>
+      <TableWithTbody>
         <TableRow>
           <TableHeader data-testid="props-test" scope="row">
             Test
           </TableHeader>
         </TableRow>
-      </Table>
+      </TableWithTbody>
     );
 
     expect(screen.getByTestId('props-test')).toHaveAttribute('scope');
@@ -49,13 +49,13 @@ describe('Table header', () => {
 
   it('should include custom class based on scope="row"', () => {
     render(
-      <Table>
+      <TableWithTbody>
         <TableRow>
           <TableHeader data-testid="scope-class-test" scope="row">
             With scope attribute
           </TableHeader>
         </TableRow>
-      </Table>
+      </TableWithTbody>
     );
 
     expect(screen.getByTestId('scope-class-test')).toHaveClass('text-left');
@@ -65,13 +65,13 @@ describe('Table header', () => {
 describe('Table cell', () => {
   it('should include class based on custom "modifier" prop', () => {
     render(
-      <Table>
+      <TableWithTbody>
         <TableRow>
           <TableCell data-testid="modifier-class-test" modifier="bordered">
             With modifier
           </TableCell>
         </TableRow>
-      </Table>
+      </TableWithTbody>
     );
 
     expect(screen.getByTestId('modifier-class-test')).toHaveClass('py-4');

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

@@ -2,10 +2,10 @@ import useFetch from '../../hooks/use-fetch';
 import { ChainExplorerTxResponse } from '../../routes/types/chain-explorer-response';
 import { Routes } from '../../routes/router-config';
 import { DATA_SOURCES } from '../../config';
-import { Link } from 'react-router-dom';
 import { RenderFetched } from '../render-fetched';
-import { TruncateInline } from '../truncate/truncate';
+import { TruncatedLink } from '../truncate/truncated-link';
 import { TxOrderType } from './tx-order-type';
+import { Table, TableRow, TableCell } from '../table';
 
 interface TxsPerBlockProps {
   blockHeight: string | undefined;
@@ -33,50 +33,46 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
     <RenderFetched error={error} loading={loading} className="text-body-large">
       {decodedBlockData && decodedBlockData.length ? (
         <div className="overflow-x-auto whitespace-nowrap mb-28">
-          <table className="w-full">
+          <Table>
             <thead>
-              <tr className="font-mono">
+              <TableRow modifier="bordered" className="font-mono">
                 <td>Transaction</td>
                 <td>From</td>
                 <td>Type</td>
-              </tr>
+              </TableRow>
             </thead>
             <tbody>
               {decodedBlockData.map(({ TxHash, PubKey, Type }) => {
                 return (
-                  <tr
+                  <TableRow
+                    modifier="bordered"
                     key={TxHash}
                     data-testid="transaction-row"
-                    className="bg-black-40 dark:bg-transparent"
                   >
-                    <td className="pl-4 dark:pl-0">
-                      <Link to={`/${Routes.TX}/${TxHash}`}>
-                        <TruncateInline
-                          text={TxHash}
-                          startChars={truncateLength}
-                          endChars={truncateLength}
-                          className="text-vega-yellow font-mono"
-                        />
-                      </Link>
-                    </td>
-                    <td>
-                      <Link to={`/${Routes.PARTIES}/${PubKey}`}>
-                        <TruncateInline
-                          text={PubKey}
-                          startChars={truncateLength}
-                          endChars={truncateLength}
-                          className="text-vega-yellow font-mono"
-                        />
-                      </Link>
-                    </td>
-                    <td>
-                      <TxOrderType className="my-2" orderType={Type} />
-                    </td>
-                  </tr>
+                    <TableCell modifier="bordered">
+                      <TruncatedLink
+                        to={`/${Routes.TX}/${TxHash}`}
+                        text={TxHash}
+                        startChars={truncateLength}
+                        endChars={truncateLength}
+                      />
+                    </TableCell>
+                    <TableCell modifier="bordered">
+                      <TruncatedLink
+                        to={`/${Routes.PARTIES}/${PubKey}`}
+                        text={PubKey}
+                        startChars={truncateLength}
+                        endChars={truncateLength}
+                      />
+                    </TableCell>
+                    <TableCell modifier="bordered">
+                      <TxOrderType orderType={Type} />
+                    </TableCell>
+                  </TableRow>
                 );
               })}
             </tbody>
-          </table>
+          </Table>
         </div>
       ) : (
         <div className="font-mono mb-28">

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

@@ -6,7 +6,7 @@ import { TendermintBlocksResponse } from '../tendermint-blocks-response';
 import { RouteTitle } from '../../../components/route-title';
 import { SecondsAgo } from '../../../components/seconds-ago';
 import {
-  Table,
+  TableWithTbody,
   TableRow,
   TableHeader,
   TableCell,
@@ -56,13 +56,13 @@ const Block = () => {
               </Button>
             </Link>
           </div>
-          <Table className="mb-28">
+          <TableWithTbody className="mb-28">
             <TableRow modifier="bordered">
               <TableHeader scope="row">Mined by</TableHeader>
               <TableCell modifier="bordered">
                 <Link
                   data-testid="block-validator"
-                  className="text-vega-yellow font-mono"
+                  className="font-mono font-bold underline dark:text-vega-yellow dark:font-normal dark:no-underline"
                   to={`/${Routes.VALIDATORS}`}
                 >
                   {header.proposer_address}
@@ -75,7 +75,7 @@ const Block = () => {
                 <SecondsAgo data-testid="block-time" date={header.time} />
               </TableCell>
             </TableRow>
-          </Table>
+          </TableWithTbody>
           {blockData && blockData.result.block.data.txs.length > 0 ? (
             <TxsPerBlock blockHeight={block} />
           ) : null}

apps/explorer/src/app/routes/txs/id/tx-content.tsx

@@ -1,13 +1,13 @@
 import { StatusMessage } from '../../../components/status-message';
 import { SyntaxHighlighter } from '../../../components/syntax-highlighter';
 import {
-  Table,
+  TableWithTbody,
   TableCell,
   TableHeader,
   TableRow,
 } from '../../../components/table';
 import { TxOrderType } from '../../../components/txs';
-import { ChainExplorerTxResponse } from '../../../routes/types/chain-explorer-response';
+import { ChainExplorerTxResponse } from '../../types/chain-explorer-response';
 
 interface TxContentProps {
   data: ChainExplorerTxResponse | undefined;
@@ -22,7 +22,7 @@ export const TxContent = ({ data }: TxContentProps) => {
 
   return (
     <>
-      <Table className="mb-12">
+      <TableWithTbody className="mb-12">
         <TableRow modifier="bordered">
           <TableHeader scope="row" className="w-[160px]">
             Type
@@ -31,7 +31,7 @@ export const TxContent = ({ data }: TxContentProps) => {
             <TxOrderType orderType={data.Type} />
           </TableCell>
         </TableRow>
-      </Table>
+      </TableWithTbody>
 
       <h3 className="font-mono mb-8">Decoded transaction content</h3>
       <SyntaxHighlighter data={JSON.parse(data.Command)} />

apps/explorer/src/app/routes/txs/id/tx-details.tsx

@@ -1,13 +1,13 @@
 import { Link } from 'react-router-dom';
 import {
-  Table,
+  TableWithTbody,
   TableCell,
   TableHeader,
   TableRow,
 } from '../../../components/table';
 import { TruncateInline } from '../../../components/truncate/truncate';
-import { Routes } from '../../../routes/router-config';
-import { Result } from '../../../routes/txs/tendermint-transaction-response.d';
+import { Routes } from '../../router-config';
+import { Result } from '../tendermint-transaction-response.d';
 
 interface TxDetailsProps {
   txData: Result | undefined;
@@ -23,7 +23,7 @@ export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
   }
 
   return (
-    <Table className={className}>
+    <TableWithTbody className={className}>
       <TableRow modifier="bordered">
         <TableCell>Hash</TableCell>
         <TableCell modifier="bordered" data-testid="hash">
@@ -64,6 +64,6 @@ export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
           />
         </TableCell>
       </TableRow>
-    </Table>
+    </TableWithTbody>
   );
 };