add block explorer url

latticexyz · Sep 27, 2024 · 4f396bc · 4f396bc
1 parent 41f4ad4
commit 4f396bc
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/...src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionTableRow.tsx b/...src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionTableRow.tsx
@@ -1,8 +1,11 @@
-import { Abi } from "viem";
+import { ExternalLinkIcon } from "lucide-react";
+import { Hex } from "viem";
 import { Row, flexRender } from "@tanstack/react-table";
 import { Separator } from "../../../../../../components/ui/Separator";
 import { TableCell, TableRow } from "../../../../../../components/ui/Table";
 import { TruncatedHex } from "../../../../../../components/ui/TruncatedHex";
+import { useChain } from "../../../../hooks/useChain";
+import { explorerForChainId } from "../../../../utils/explorerForChainId";
 import { WatchedTransaction } from "./TransactionsTable";
 import { columns } from "./columns";
 
@@ -15,9 +18,19 @@ function TranctionTableRowDataCell({ label, children }: { label: string; childre
   );
 }
 
-export function TransactionTableRow({ row }: { row: Row<WatchedTransaction>; abi: Abi }) {
-  const data = row.original;
+function BlockExplorerLink({ hash, chainId }: { hash?: Hex; chainId: number }) {
+  const explorerUrl = explorerForChainId({ hash, chainId });
+  if (!explorerUrl) return null;
 
+  return (
+    <a href={`${explorerUrl}/tx/${hash}`} target="_blank" rel="noopener noreferrer" className="flex hover:underline">
+      <ExternalLinkIcon className="mr-2 h-3 w-3" /> Link
+    </a>
+  );
+}
+export function TransactionTableRow({ row }: { row: Row<WatchedTransaction> }) {
+  const { id: chainId } = useChain();
+  const data = row?.original;
   return (
     <>
       <TableRow className="cursor-pointer" onClick={() => row.toggleExpanded()}>
@@ -41,6 +54,9 @@ export function TransactionTableRow({ row }: { row: Row<WatchedTransaction>; abi
                   <TranctionTableRowDataCell label="From">
                     {data?.transaction?.from && <TruncatedHex hex={data.transaction.from} />}
                   </TranctionTableRowDataCell>
+                  <TranctionTableRowDataCell label="Explorer URL">
+                    <BlockExplorerLink hash={data.transaction?.hash} chainId={chainId} />
+                  </TranctionTableRowDataCell>
                   <TranctionTableRowDataCell label="Tx value">
                     {data.transaction?.value?.toString()}
                   </TranctionTableRowDataCell>
@@ -56,7 +72,6 @@ export function TransactionTableRow({ row }: { row: Row<WatchedTransaction>; abi
                   <TranctionTableRowDataCell label="Gas price">
                     {data.receipt?.effectiveGasPrice.toString()}
                   </TranctionTableRowDataCell>
-                  <TranctionTableRowDataCell label="Total fee">TODO:</TranctionTableRowDataCell>
                 </div>
 
                 <Separator className="mt-6" />

diff --git a/...r/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionsTable.tsx b/...r/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionsTable.tsx
@@ -22,6 +22,7 @@ import { columns } from "./columns";
 
 export type WatchedTransaction = {
   hash: Hex;
+  timestamp: bigint;
   transaction?: Transaction;
   functionData?: DecodeFunctionDataReturnType;
   receipt?: TransactionReceipt;

diff --git a/packages/explorer/src/app/(explorer)/utils/explorerForChainId.ts b/packages/explorer/src/app/(explorer)/utils/explorerForChainId.ts
@@ -0,0 +1,13 @@
+import { Hex } from "viem";
+import { chainIdToName, supportedChains, validateChainId } from "../../../common";
+
+export function explorerForChainId({ hash, chainId }: { hash: Hex | undefined; chainId: number }): string | undefined {
+  if (!hash) return undefined;
+  validateChainId(chainId);
+
+  const chainName = chainIdToName[chainId];
+  const chain = supportedChains[chainName];
+  const explorerUrl = chain.blockExplorers?.default.url;
+  if (!explorerUrl) return undefined;
+  return explorerUrl;
+}