From 6a214c8f5beb100eb800ea6186c5ea949b95979d Mon Sep 17 00:00:00 2001 From: karooolis Date: Fri, 27 Sep 2024 17:48:59 +0300 Subject: [PATCH] confirmations, move helper components outside --- .../transactions/BlockExplorerLink.tsx | 16 ++++++ .../transactions/Confirmations.tsx | 27 ++++++++++ .../transactions/TransactionTableRow.tsx | 54 +++++-------------- .../transactions/TransactionsTable.tsx | 50 ++++++++++++++++- .../[worldAddress]/transactions/columns.tsx | 53 ------------------ .../explorer/src/components/ElapsedTime.tsx | 25 --------- 6 files changed, 105 insertions(+), 120 deletions(-) create mode 100644 packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/BlockExplorerLink.tsx create mode 100644 packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/Confirmations.tsx delete mode 100644 packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/columns.tsx delete mode 100644 packages/explorer/src/components/ElapsedTime.tsx diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/BlockExplorerLink.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/BlockExplorerLink.tsx new file mode 100644 index 0000000000..6b9cfbb22e --- /dev/null +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/BlockExplorerLink.tsx @@ -0,0 +1,16 @@ +import { ExternalLinkIcon } from "lucide-react"; +import { Hex } from "viem"; +import { useChain } from "../../../../hooks/useChain"; +import { explorerForChainId } from "../../../../utils/explorerForChainId"; + +export function BlockExplorerLink({ hash }: { hash?: Hex }) { + const { id: chainId } = useChain(); + const explorerUrl = explorerForChainId({ hash, chainId }); + if (!explorerUrl) return null; + + return ( + + Link + + ); +} diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/Confirmations.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/Confirmations.tsx new file mode 100644 index 0000000000..c7f128310f --- /dev/null +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/Confirmations.tsx @@ -0,0 +1,27 @@ +import { Hex } from "viem"; +import { useTransactionConfirmations } from "wagmi"; +import { useChain } from "../../../../hooks/useChain"; + +export function Confirmations({ hash }: { hash?: Hex }) { + const { id: chainId } = useChain(); + const { data: confirmations } = useTransactionConfirmations({ + hash, + chainId, + query: { + refetchInterval: 1000, + }, + }); + + if (!confirmations) return null; + return ( + + + {confirmations.toString()} + + ); +} diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionTableRow.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionTableRow.tsx index 2984f159a2..24b8ba067e 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionTableRow.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionTableRow.tsx @@ -1,13 +1,11 @@ -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 { BlockExplorerLink } from "./BlockExplorerLink"; +import { Confirmations } from "./Confirmations"; import { WatchedTransaction } from "./TransactionsTable"; -import { columns } from "./columns"; +import { columns } from "./TransactionsTable"; function TranctionTableRowDataCell({ label, children }: { label: string; children: React.ReactNode }) { return ( @@ -18,18 +16,7 @@ function TranctionTableRowDataCell({ label, children }: { label: string; childre ); } -function BlockExplorerLink({ hash, chainId }: { hash?: Hex; chainId: number }) { - const explorerUrl = explorerForChainId({ hash, chainId }); - if (!explorerUrl) return null; - - return ( - - Link - - ); -} export function TransactionTableRow({ row }: { row: Row }) { - const { id: chainId } = useChain(); const data = row?.original; return ( <> @@ -54,35 +41,19 @@ export function TransactionTableRow({ row }: { row: Row }) { {data?.transaction?.from && } - - + + {data.transaction?.value?.toString()} - - {data?.receipt?.gasUsed.toString()} - - - {data?.transaction?.maxFeePerGas?.toString()} - - - {data?.transaction?.maxFeePerGas?.toString()} - - - {data.receipt?.effectiveGasPrice.toString()} + + -
-

Errors:

-

{data.status === "success" ? "No errors" : "Transaction failed"}

-
- - -

Inputs:

@@ -103,18 +74,21 @@ export function TransactionTableRow({ row }: { row: Row }) {
{Array.isArray(data.logs) && data.logs.length > 0 && (
    - {data.logs.map((eventLog, idx) => ( + {data.logs.map((log, idx) => (
  • - {eventLog.eventName}: + {/* @ts-expect-error TODO: types needs fixing */} + {log.eventName}:
      - {Object.entries(eventLog.args).map(([key, value]) => ( + {/* @ts-expect-error TODO: types needs fixing */} + {Object.entries(log.args as never).map(([key, value]) => (
    • {key}: - {value} + {value as never}
      • ))}
    + {/* @ts-expect-error TODO: types needs fixing */} {idx < data.logs.length - 1 && }
    • ))} diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionsTable.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionsTable.tsx index e2b756d9e3..73ccb2cfcf 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionsTable.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/TransactionsTable.tsx @@ -13,12 +13,15 @@ import { import { useConfig, useWatchBlocks } from "wagmi"; import React, { useState } from "react"; import { ExpandedState, flexRender, getCoreRowModel, getExpandedRowModel, useReactTable } from "@tanstack/react-table"; +import { createColumnHelper } from "@tanstack/react-table"; import { getTransaction, getTransactionReceipt } from "@wagmi/core"; +import { Badge } from "../../../../../../components/ui/Badge"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../../components/ui/Table"; +import { TruncatedHex } from "../../../../../../components/ui/TruncatedHex"; import { useChain } from "../../../../hooks/useChain"; import { useWorldAbiQuery } from "../../../../queries/useWorldAbiQuery"; +import { TimeAgoCell } from "./TimeAgoCell"; import { TransactionTableRow } from "./TransactionTableRow"; -import { columns } from "./columns"; export type WatchedTransaction = { hash: Hex; @@ -30,6 +33,49 @@ export type WatchedTransaction = { status: "pending" | "success" | "failed"; }; +const columnHelper = createColumnHelper(); +export const columns = [ + columnHelper.accessor("transaction.blockNumber", { + header: "", + cell: (row) => #{row.getValue()?.toString()}, + }), + columnHelper.accessor("hash", { + header: "tx hash:", + cell: (row) => , + }), + columnHelper.accessor("functionData.functionName", { + header: "function:", + cell: (row) => {row.getValue()}, + }), + columnHelper.accessor("transaction.from", { + header: "from:", + cell: (row) => { + const from = row.getValue(); + if (!from) return null; + return ; + }, + }), + columnHelper.accessor("status", { + header: "status:", + cell: (row) => { + const status = row.getValue(); + if (status === "success") { + return success; + } else if (status === "failed") { + return failed; + } + return pending; + }, + }), + columnHelper.accessor("timestamp", { + header: "time ago:", + cell: (row) => { + const timestamp = row.getValue(); + return ; + }, + }), +]; + export function TransactionsTable() { const { id: chainId } = useChain(); const { worldAddress } = useParams(); @@ -107,7 +153,7 @@ export function TransactionsTable() { {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ) + table.getRowModel().rows.map((row) => ) ) : ( diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/columns.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/columns.tsx deleted file mode 100644 index 3132fc9050..0000000000 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/transactions/columns.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { ChevronsUpDownIcon } from "lucide-react"; -import { createColumnHelper } from "@tanstack/react-table"; -import { Badge } from "../../../../../../components/ui/Badge"; -import { TruncatedHex } from "../../../../../../components/ui/TruncatedHex"; -import { TimeAgoCell } from "./TimeAgoCell"; -import { WatchedTransaction } from "./TransactionsTable"; - -const columnHelper = createColumnHelper(); -export const columns = [ - columnHelper.accessor("transaction.blockNumber", { - header: "", - cell: (row) => #{row.getValue()?.toString()}, - }), - columnHelper.accessor("hash", { - header: "tx hash:", - cell: (row) => , - }), - columnHelper.accessor("functionData.functionName", { - header: "function:", - cell: (row) => {row.getValue()}, - }), - columnHelper.accessor("transaction.from", { - header: "from:", - cell: (row) => { - const from = row.getValue(); - if (!from) return null; - return ; - }, - }), - columnHelper.accessor("status", { - header: "status:", - cell: (row) => { - const status = row.getValue(); - if (status === "success") { - return success; - } else if (status === "failed") { - return failed; - } - return pending; - }, - }), - columnHelper.accessor("timestamp", { - header: "time ago:", - cell: (row) => { - const timestamp = row.getValue(); - return ; - }, - }), - columnHelper.accessor("expand", { - header: "", - cell: () => , - }), -]; diff --git a/packages/explorer/src/components/ElapsedTime.tsx b/packages/explorer/src/components/ElapsedTime.tsx deleted file mode 100644 index b6949ad692..0000000000 --- a/packages/explorer/src/components/ElapsedTime.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useEffect, useState } from "react"; -import { timeSince } from "../lib/utils"; - -type Props = { - timestamp: number; -}; - -export function ElapsedTime({ timestamp }: Props) { - const [elapsedTime, setElapsedTime] = useState(timeSince(new Date(timestamp))); - - useEffect(() => { - let animationFrameId: number; - - const updateElapsedTime = () => { - setElapsedTime(timeSince(new Date(timestamp))); - animationFrameId = requestAnimationFrame(updateElapsedTime); - }; - - animationFrameId = requestAnimationFrame(updateElapsedTime); - - return () => cancelAnimationFrame(animationFrameId); - }, [timestamp]); - - return <>{elapsedTime}; -}