Fix console errors (#894)

src/components/Table/GeneralTableRow.tsx

@@ -34,6 +34,7 @@ export default function GeneralTableRow({
         },
   };
 
+  // Note: This will give validateDOMNesting errors, but still work correctly
   if (to) {
     return <TableRow component={Link} to={to} sx={sx} {...props} />;
   }

src/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import {createRoot} from "react-dom/client";
 import {BrowserRouter} from "react-router-dom";
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import ExplorerRoutes from "./ExplorerRoutes";
@@ -51,7 +51,9 @@ declare global {
 
 const queryClient = new QueryClient();
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(
   <React.StrictMode>
     <StatsigProvider
       sdkKey={
@@ -71,5 +73,4 @@ ReactDOM.render(
       </QueryClientProvider>
     </StatsigProvider>
   </React.StrictMode>,
-  document.getElementById("root"),
 );

src/pages/Blocks/Table.tsx

@@ -26,11 +26,7 @@ type BlockCellProps = {
 function BlockHeightCell({block}: BlockCellProps) {
   return (
     <GeneralTableCell sx={{textAlign: "left"}}>
-      <Link
-        to={`/block/${block.block_height}`}
-        target="_blank"
-        underline="none"
-      >
+      <Link to={`/block/${block.block_height}`} underline="none">
         {block.block_height}
       </Link>
     </GeneralTableCell>
@@ -56,7 +52,7 @@ function BlockHashCell({block}: BlockCellProps) {
 function FirstVersionCell({block}: BlockCellProps) {
   return (
     <GeneralTableCell sx={{textAlign: "right"}}>
-      <Link to={`/txn/${block.first_version}`} target="_blank" underline="none">
+      <Link to={`/txn/${block.first_version}`} underline="none">
         {block.first_version}
       </Link>
     </GeneralTableCell>
@@ -66,7 +62,7 @@ function FirstVersionCell({block}: BlockCellProps) {
 function LastVersionCell({block}: BlockCellProps) {
   return (
     <GeneralTableCell sx={{textAlign: "right"}}>
-      <Link to={`/txn/${block.last_version}`} target="_blank" underline="none">
+      <Link to={`/txn/${block.last_version}`} underline="none">
         {block.last_version}
       </Link>
     </GeneralTableCell>

src/pages/Transactions/Components/TransactionTypeTooltip.tsx

@@ -12,7 +12,7 @@ export default function TransactionTypeTooltip() {
     <TableTooltip title="Transaction Types">
       <Stack spacing={2}>
         {Object.values(TransactionTypeName).map((type) => (
-          <TooltipTransactionType type={type} />
+          <TooltipTransactionType type={type} key={`ttt-${type}`} />
         ))}
       </Stack>
     </TableTooltip>

src/pages/Transactions/TransactionsTable.tsx

@@ -113,7 +113,7 @@ function TransactionReceiverOrCounterPartyCell({
   return (
     <GeneralTableCell>
       {counterparty && (
-        <Typography
+        <Box
           sx={{display: "flex", fontSize: "inherit", alignItems: "row", gap: 1}}
         >
           {counterparty.role === "smartContract" ? (
@@ -128,7 +128,7 @@ function TransactionReceiverOrCounterPartyCell({
           <span>
             <HashButton hash={counterparty.address} type={HashType.ACCOUNT} />
           </span>
-        </Typography>
+        </Box>
       )}
     </GeneralTableCell>
   );

src/utils.ts

@@ -103,12 +103,15 @@ export const standardizeAddress = (address: AccountAddressInput): string => {
 
 export const tryStandardizeAddress = (
   address: AccountAddressInput | null | undefined,
+  logError?: boolean,
 ): string | undefined => {
   if (address) {
     try {
       return standardizeAddress(address);
     } catch (e) {
-      console.log("Failed to standardize address", address, e);
+      if (logError) {
+        console.log("Failed to standardize address", address, e);
+      }
       return undefined;
     }
   }