Make rows in contract table actual links to allow opening in new tab with cmd click

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/DeployedContractsPageHeader.tsx

@@ -1,9 +1,9 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import { DownloadIcon, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import { Button } from "../../../../../@/components/ui/button";
 import { ImportModal } from "../../../../../components/contract-components/import-contract/modal";
 
 export function DeployedContractsPageHeader() {

apps/dashboard/src/components/contract-components/tables/cells.tsx

@@ -3,6 +3,7 @@
 import { Badge } from "@/components/ui/badge";
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { cn } from "@/lib/utils";
 import { useDashboardContractMetadata } from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata";
 import type { BasicContract } from "contract-ui/types/types";
 import { useChainSlug } from "hooks/chains/chainSlug";
@@ -16,13 +17,14 @@ import { usePublishedContractsFromDeploy } from "../hooks";
 
 interface AsyncContractNameCellProps {
   cell: BasicContract;
+  linkOverlay?: boolean;
 }
 
 // The row components for the contract table, in the <Your contracts> page
 // url: /dashboard/contracts/deploy
 
 export const AsyncContractNameCell = memo(
-  ({ cell }: AsyncContractNameCellProps) => {
+  ({ cell, linkOverlay }: AsyncContractNameCellProps) => {
     const chainSlug = useChainSlug(cell.chainId);
     const chain = useV5DashboardChain(cell.chainId);
     const client = useThirdwebClient();
@@ -46,7 +48,10 @@ export const AsyncContractNameCell = memo(
             <Link
               href={`/${chainSlug}/${cell.address}`}
               passHref
-              className="text-foreground"
+              className={cn(
+                "text-foreground",
+                linkOverlay && "before:absolute before:inset-0",
+              )}
             >
               {v || shortenIfAddress(cell.address)}
             </Link>

apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx

@@ -19,7 +19,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
 import {
   type useAllContractList,
   useRemoveContractMutation,
@@ -38,7 +37,6 @@ import {
   useTable,
 } from "react-table";
 import { useAllChainsData } from "../../../hooks/chains/allChains";
-import { useChainSlug } from "../../../hooks/chains/chainSlug";
 import { AsyncContractNameCell, AsyncContractTypeCell } from "./cells";
 import { ShowMoreButton } from "./show-more-button";
 
@@ -174,7 +172,7 @@ const ContractTable: React.FC<ContractTableProps> = ({
         accessor: (row) => row.address,
         // biome-ignore lint/suspicious/noExplicitAny: FIXME
         Cell: (cell: any) => {
-          return <AsyncContractNameCell cell={cell.row.original} />;
+          return <AsyncContractNameCell cell={cell.row.original} linkOverlay />;
         },
       },
       {
@@ -231,6 +229,7 @@ const ContractTable: React.FC<ContractTableProps> = ({
               copyIconPosition="left"
               address={cell.row.original.address}
               variant="ghost"
+              className="relative z-10"
             />
           );
         },
@@ -245,6 +244,7 @@ const ContractTable: React.FC<ContractTableProps> = ({
                 <Button
                   size="icon"
                   variant="ghost"
+                  className="relative z-10"
                   onClick={(e) => e.stopPropagation()}
                 >
                   <EllipsisVerticalIcon className="size-4" />
@@ -367,20 +367,14 @@ const ContractTable: React.FC<ContractTableProps> = ({
 };
 
 const ContractTableRow = memo(({ row }: { row: Row<BasicContract> }) => {
-  const chainSlug = useChainSlug(row.original.chainId);
-  const router = useDashboardRouter();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { key, ...rowProps } = row.getRowProps();
 
   return (
     <TableRow
       {...rowProps}
       role="group"
-      className="cursor-pointer hover:bg-muted/50"
-      // TODO - replace this with before:absolute thing
-      onClick={() => {
-        router.push(`/${chainSlug}/${row.original.address}`);
-      }}
+      className="relative cursor-pointer hover:bg-muted/50"
     >
       {row.cells.map((cell, cellIndex) => {
         return (