Final changes from PR:

* data-testid spread via props rather than custom prop
* more use of routes config rather than hard coded route names
* tweak to TS type for returning children prop without wrapper fragment

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

@@ -1,5 +1,6 @@
 import React from 'react';
 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';
@@ -15,21 +16,21 @@ export const BlockData = ({ block, className }: BlockProps) => {
       aria-label={`Data for block ${block.header?.height}`}
       className={className}
     >
-      <TableRow dataTestId="block-row" modifier="background">
+      <TableRow data-testid="block-row" modifier="background">
         <TableCell
-          dataTestId="block-height"
+          data-testid="block-height"
           className="pl-4 py-2"
           aria-label="Block height"
         >
           <Link
-            to={`/blocks/${block.header?.height}`}
+            to={`/${Routes.BLOCKS}/${block.header?.height}`}
             className="text-vega-yellow"
           >
             {block.header?.height}
           </Link>
         </TableCell>
         <TableCell
-          dataTestId="num-txs"
+          data-testid="num-txs"
           className="px-8 text-center"
           aria-label="Number of transactions"
         >
@@ -38,16 +39,16 @@ export const BlockData = ({ block, className }: BlockProps) => {
             : `${block.num_txs} transactions`}
         </TableCell>
         <TableCell
-          dataTestId="validator-link"
+          data-testid="validator-link"
           className="px-8 text-center"
           aria-label="Validator"
         >
-          <Link to={`/validators/${block.header?.proposer_address}`}>
+          <Link to={`/${Routes.VALIDATORS}`}>
             {block.header.proposer_address}
           </Link>
         </TableCell>
         <TableCell
-          dataTestId="block-time"
+          data-testid="block-time"
           className="text-center pr-28 text-neutral-300"
           aria-label="Block genesis"
         >

apps/explorer/src/app/components/render-fetched/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StatusMessage } from '../status-message';
 
 interface RenderFetchedProps {
-  children: React.ReactNode;
+  children: React.ReactElement;
   error: Error | undefined;
   loading: boolean | undefined;
   className?: string;
@@ -22,6 +22,5 @@ export const RenderFetched = ({
     return <StatusMessage className={className}>Error: {error}</StatusMessage>;
   }
 
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return <>{children}</>;
+  return children;
 };

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

@@ -15,14 +15,12 @@ interface TableHeaderProps
 interface TableRowProps extends ThHTMLAttributes<HTMLTableRowElement> {
   children: React.ReactNode;
   className?: string;
-  dataTestId?: string;
   modifier?: 'bordered' | 'background';
 }
 
 interface TableCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
   children: React.ReactNode;
   className?: string;
-  dataTestId?: string;
   modifier?: 'bordered' | 'background';
 }
 
@@ -55,7 +53,6 @@ export const TableHeader = ({
 export const TableRow = ({
   children,
   className,
-  dataTestId,
   modifier,
   ...props
 }: TableRowProps) => {
@@ -64,7 +61,7 @@ export const TableRow = ({
     'bg-white-25 border-b-4 border-b-black': modifier === 'background',
   });
   return (
-    <tr className={cellClasses} data-testid={dataTestId || null} {...props}>
+    <tr className={cellClasses} {...props}>
       {children}
     </tr>
   );
@@ -73,7 +70,6 @@ export const TableRow = ({
 export const TableCell = ({
   children,
   className,
-  dataTestId,
   modifier,
   ...props
 }: TableCellProps) => {
@@ -81,7 +77,7 @@ export const TableCell = ({
     'py-4': modifier === 'bordered',
   });
   return (
-    <td className={cellClasses} data-testid={dataTestId || null} {...props}>
+    <td className={cellClasses} {...props}>
       {children}
     </td>
   );

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

@@ -17,7 +17,7 @@ export const TxDetails = ({ txData, pubKey }: TxDetailsProps) => {
     <Table>
       <TableRow>
         <TableCell>Hash</TableCell>
-        <TableCell dataTestId="hash">{txData.hash}</TableCell>
+        <TableCell data-testid="hash">{txData.hash}</TableCell>
       </TableRow>
       {pubKey ? (
         <TableRow>
@@ -36,7 +36,9 @@ export const TxDetails = ({ txData, pubKey }: TxDetailsProps) => {
         <TableRow>
           <td>Block</td>
           <td data-testid="block">
-            <Link to={`/blocks/${txData.height}`}>{txData.height}</Link>
+            <Link to={`/${Routes.BLOCKS}/${txData.height}`}>
+              {txData.height}
+            </Link>
           </td>
         </TableRow>
       ) : null}

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

@@ -1,5 +1,6 @@
 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';
@@ -44,7 +45,7 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
                 return (
                   <tr key={TxHash}>
                     <td>
-                      <Link to={`/txs/${TxHash}`}>
+                      <Link to={`/${Routes.TX}/${TxHash}`}>
                         <TruncateInline
                           text={TxHash}
                           startChars={truncateLength}