From 105ccd2409d4ced8430d0008ce24fb239835a7fc Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Tue, 21 May 2024 16:06:23 +0100 Subject: [PATCH 01/85] ui: public transaction details --- tools/tenscan/frontend/api/transactions.ts | 10 +++ tools/tenscan/frontend/pages/tx/[hash].tsx | 65 +++++++++++++++---- .../modules/common/data-table/data-table.tsx | 4 +- .../components/modules/common/empty-state.tsx | 3 +- .../components/modules/personal/columns.tsx | 22 ++++--- .../modules/transactions/columns.tsx | 12 ++++ .../transactions/transaction-details.tsx | 48 ++++++++++++++ tools/tenscan/frontend/src/routes/index.ts | 1 + .../frontend/src/types/interfaces/index.ts | 8 +++ 9 files changed, 148 insertions(+), 25 deletions(-) create mode 100644 tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx diff --git a/tools/tenscan/frontend/api/transactions.ts b/tools/tenscan/frontend/api/transactions.ts index 19ad461fb4..7958581faf 100644 --- a/tools/tenscan/frontend/api/transactions.ts +++ b/tools/tenscan/frontend/api/transactions.ts @@ -6,6 +6,7 @@ import { TransactionCount, Price, TransactionResponse, + Transaction, } from "@/src/types/interfaces/TransactionInterfaces"; export const fetchTransactions = async ( @@ -31,3 +32,12 @@ export const fetchEtherPrice = async (): Promise => { url: apiRoutes.getEtherPrice, }); }; + +export const fetchTransactionByHash = async ( + hash: string +): Promise> => { + return await httpRequest>({ + method: "get", + url: pathToUrl(apiRoutes.getTransactionByHash, { hash }), + }); +}; diff --git a/tools/tenscan/frontend/pages/tx/[hash].tsx b/tools/tenscan/frontend/pages/tx/[hash].tsx index b1b9ea7402..f32fa046c7 100644 --- a/tools/tenscan/frontend/pages/tx/[hash].tsx +++ b/tools/tenscan/frontend/pages/tx/[hash].tsx @@ -1,23 +1,62 @@ +import { fetchBatchByHash } from "@/api/batches"; +import { fetchTransactionByHash } from "@/api/transactions"; import Layout from "@/src/components/layouts/default-layout"; +import { TransactionDetailsComponent } from "@/src/components/modules/transactions/transaction-details"; import EmptyState from "@/src/components/modules/common/empty-state"; import { Button } from "@/src/components/ui/button"; +import { + Card, + CardHeader, + CardTitle, + CardContent, + CardDescription, +} from "@/src/components/ui/card"; +import { Skeleton } from "@/src/components/ui/skeleton"; +import { useQuery } from "@tanstack/react-query"; import { useRouter } from "next/router"; -import React from "react"; -const TransactionDetails = () => { - const { push } = useRouter(); +export default function TransactionDetails() { + const router = useRouter(); + const { hash } = router.query; + + const { data, isLoading } = useQuery({ + queryKey: ["transactionDetails", hash], + queryFn: () => fetchTransactionByHash(hash as string), + }); + + const transactionDetails = data?.item; return ( - push("/")}>Go Home} - /> + {isLoading ? ( + + ) : transactionDetails ? ( + + + + Batch #{Number(transactionDetails?.BatchHeight)} + + + Overview of the batch #{Number(transactionDetails?.BatchHeight)} + + + + + + + ) : ( + router.push("/transactions")}> + Go back + + } + /> + )} ); -}; - -export default TransactionDetails; +} diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx index 477ebbd53e..079d9e01c6 100644 --- a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx +++ b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx @@ -148,7 +148,9 @@ export function DataTable({ - + {table.getRowModel().rows.length > 0 && ( + + )} ); } diff --git a/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx b/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx index ba62b14c3b..1a3a94cf9e 100644 --- a/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx +++ b/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx @@ -1,3 +1,4 @@ +import Image from "next/image"; import React from "react"; const EmptyState = ({ @@ -20,7 +21,7 @@ const EmptyState = ({
{icon &&
{icon}
} {imageSrc && ( - {imageAlt[] = [ { @@ -123,14 +125,14 @@ export const columns: ColumnDef[] = [ return value.includes(row.getValue(id)); }, }, - // { - // id: "actions", - // cell: ({ row }) => { - // return ( - // - // - // - // ); - // }, - // }, + { + id: "actions", + cell: ({ row }) => { + return ( + + + + ); + }, + }, ]; diff --git a/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx b/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx index fda982927c..340383c1e2 100644 --- a/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx +++ b/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx @@ -8,6 +8,8 @@ import { DataTableColumnHeader } from "../common/data-table/data-table-column-he import { Transaction } from "@/src/types/interfaces/TransactionInterfaces"; import TruncatedAddress from "../common/truncated-address"; import { formatNumber, formatTimeAgo } from "@/src/lib/utils"; +import Link from "next/link"; +import { EyeOpenIcon } from "@radix-ui/react-icons"; export const columns: ColumnDef[] = [ { @@ -84,4 +86,14 @@ export const columns: ColumnDef[] = [ return value.includes(row.getValue(id)); }, }, + { + id: "actions", + cell: ({ row }) => { + return ( + + + + ); + }, + }, ]; diff --git a/tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx b/tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx new file mode 100644 index 0000000000..7776b26e64 --- /dev/null +++ b/tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx @@ -0,0 +1,48 @@ +import TruncatedAddress from "../common/truncated-address"; +import KeyValueItem, { KeyValueList } from "@/src/components/ui/key-value"; +import { formatTimeAgo } from "@/src/lib/utils"; +import { Badge } from "@/src/components/ui/badge"; +import { Transaction } from "@/src/types/interfaces/TransactionInterfaces"; +import { BadgeType } from "@/src/types/interfaces"; + +export function TransactionDetailsComponent({ + transactionDetails, +}: { + transactionDetails: Transaction; +}) { + return ( +
+ + + + } + /> + + + {transactionDetails?.Finality} + + } + isLastItem + /> + +
+ ); +} diff --git a/tools/tenscan/frontend/src/routes/index.ts b/tools/tenscan/frontend/src/routes/index.ts index b0516e895a..e22ea6546b 100644 --- a/tools/tenscan/frontend/src/routes/index.ts +++ b/tools/tenscan/frontend/src/routes/index.ts @@ -16,6 +16,7 @@ export const apiRoutes = { // **** TRANSACTIONS **** getTransactions: "/items/transactions/", getTransactionCount: "/count/transactions/", + getTransactionByHash: "/items/transaction/:hash", getEtherPrice: "https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd", diff --git a/tools/tenscan/frontend/src/types/interfaces/index.ts b/tools/tenscan/frontend/src/types/interfaces/index.ts index 923786fedc..b592e7a5b1 100644 --- a/tools/tenscan/frontend/src/types/interfaces/index.ts +++ b/tools/tenscan/frontend/src/types/interfaces/index.ts @@ -79,3 +79,11 @@ export enum ToastType { DESTRUCTIVE = "destructive", DEFAULT = "default", } + +export enum BadgeType { + SUCCESS = "success", + SECONDARY = "secondary", + DESTRUCTIVE = "destructive", + DEFAULT = "default", + OUTLINE = "outline", +} From cdf8ab40d1ab575fff77c2a56369732e328ca516 Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Tue, 21 May 2024 16:17:15 +0100 Subject: [PATCH 02/85] Update label for Batch Number to Batch Height --- .../src/components/modules/transactions/transaction-details.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx b/tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx index 7776b26e64..bc1c1ebc75 100644 --- a/tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx +++ b/tools/tenscan/frontend/src/components/modules/transactions/transaction-details.tsx @@ -14,7 +14,7 @@ export function TransactionDetailsComponent({
Date: Wed, 22 May 2024 17:33:01 +0100 Subject: [PATCH 03/85] rollups: - fetch rollup - fetch rollup by hatch - fetch rollup by batch sequence --- tools/tenscan/frontend/api/rollups.ts | 33 ++++- .../tenscan/frontend/pages/rollup/[hash].tsx | 56 ++++++++ .../pages/rollup/sequence/[sequence].tsx | 55 ++++++++ .../tenscan/frontend/pages/rollups/index.tsx | 52 ++++++++ .../src/components/modules/blocks/columns.tsx | 5 +- .../data-table/data-table-pagination.tsx | 3 +- .../modules/common/data-table/data-table.tsx | 16 ++- .../components/modules/rollups/columns.tsx | 112 ++++++++++++++++ .../components/modules/rollups/constants.tsx | 45 +++++++ .../modules/rollups/rollup-details.tsx | 126 ++++++++++++++++++ tools/tenscan/frontend/src/routes/index.ts | 10 +- .../src/services/useRollupsService.ts | 30 ++++- .../src/types/interfaces/RollupInterfaces.ts | 32 +++++ 13 files changed, 566 insertions(+), 9 deletions(-) create mode 100644 tools/tenscan/frontend/pages/rollup/[hash].tsx create mode 100644 tools/tenscan/frontend/pages/rollup/sequence/[sequence].tsx create mode 100644 tools/tenscan/frontend/pages/rollups/index.tsx create mode 100644 tools/tenscan/frontend/src/components/modules/rollups/columns.tsx create mode 100644 tools/tenscan/frontend/src/components/modules/rollups/constants.tsx create mode 100644 tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx create mode 100644 tools/tenscan/frontend/src/types/interfaces/RollupInterfaces.ts diff --git a/tools/tenscan/frontend/api/rollups.ts b/tools/tenscan/frontend/api/rollups.ts index 375f0e0ecf..4fd0016009 100644 --- a/tools/tenscan/frontend/api/rollups.ts +++ b/tools/tenscan/frontend/api/rollups.ts @@ -2,8 +2,12 @@ import { httpRequest } from "."; import { apiRoutes } from "@/src/routes"; import { pathToUrl } from "@/src/routes/router"; import { ResponseDataInterface } from "@/src/types/interfaces"; +import { + Rollup, + RollupsResponse, +} from "@/src/types/interfaces/RollupInterfaces"; -export const fetchRollups = async ( +export const fetchLatestRollups = async ( payload?: Record ): Promise> => { return await httpRequest>({ @@ -13,6 +17,15 @@ export const fetchRollups = async ( }); }; +export const fetchRollups = async (): Promise< + ResponseDataInterface +> => { + return await httpRequest>({ + method: "get", + url: pathToUrl(apiRoutes.getRollups), + }); +}; + export const decryptEncryptedRollup = async ({ StrData, }: { @@ -24,3 +37,21 @@ export const decryptEncryptedRollup = async ({ data: { StrData }, }); }; + +export const fetchRollupByHash = async ( + hash: string +): Promise> => { + return await httpRequest>({ + method: "get", + url: pathToUrl(apiRoutes.getRollupByHash, { hash }), + }); +}; + +export const fetchRollupByBatchSequence = async ( + seq: string +): Promise> => { + return await httpRequest>({ + method: "get", + url: pathToUrl(apiRoutes.getRollupByBatchSequence, { seq }), + }); +}; diff --git a/tools/tenscan/frontend/pages/rollup/[hash].tsx b/tools/tenscan/frontend/pages/rollup/[hash].tsx new file mode 100644 index 0000000000..0fb1e03eba --- /dev/null +++ b/tools/tenscan/frontend/pages/rollup/[hash].tsx @@ -0,0 +1,56 @@ +import { fetchRollupByHash } from "@/api/rollups"; +import Layout from "@/src/components/layouts/default-layout"; +import { RollupDetailsComponent } from "@/src/components/modules/rollups/rollup-details"; +import EmptyState from "@/src/components/modules/common/empty-state"; +import { Button } from "@/src/components/ui/button"; +import { + Card, + CardHeader, + CardTitle, + CardContent, + CardDescription, +} from "@/src/components/ui/card"; +import { Skeleton } from "@/src/components/ui/skeleton"; +import { useQuery } from "@tanstack/react-query"; +import { useRouter } from "next/router"; + +export default function RollupDetails() { + const router = useRouter(); + const { hash } = router.query; + + const { data, isLoading } = useQuery({ + queryKey: ["rollupDetails", hash], + queryFn: () => fetchRollupByHash(hash as string), + }); + + const rollupDetails = data?.item; + console.log("🚀 ~ RollupDetails ~ rollupDetails:", rollupDetails); + + return ( + + {isLoading ? ( + + ) : rollupDetails ? ( + + + Rollup #{Number(rollupDetails?.ID)} + + Overview of the Rollup #{Number(rollupDetails?.ID)} + + + + + + + ) : ( + router.push("/rollups")}>Go back + } + /> + )} + + ); +} diff --git a/tools/tenscan/frontend/pages/rollup/sequence/[sequence].tsx b/tools/tenscan/frontend/pages/rollup/sequence/[sequence].tsx new file mode 100644 index 0000000000..72439dbf0d --- /dev/null +++ b/tools/tenscan/frontend/pages/rollup/sequence/[sequence].tsx @@ -0,0 +1,55 @@ +import { fetchRollupByBatchSequence } from "@/api/rollups"; +import Layout from "@/src/components/layouts/default-layout"; +import EmptyState from "@/src/components/modules/common/empty-state"; +import { RollupDetailsComponent } from "@/src/components/modules/rollups/rollup-details"; +import { Button } from "@/src/components/ui/button"; +import { + Card, + CardHeader, + CardTitle, + CardContent, + CardDescription, +} from "@/src/components/ui/card"; +import { Skeleton } from "@/src/components/ui/skeleton"; +import { useQuery } from "@tanstack/react-query"; +import { useRouter } from "next/router"; + +export default function RollupBatchSequenceDetails() { + const router = useRouter(); + const { sequence } = router.query; + + const { data, isLoading } = useQuery({ + queryKey: ["rollupSequenceDetails", sequence], + queryFn: () => fetchRollupByBatchSequence(sequence as string), + }); + + const rollupDetails = data?.item; + + return ( + + {isLoading ? ( + + ) : rollupDetails ? ( + + + Rollup #{Number(rollupDetails?.ID)} + + Overview of the Rollup with batch sequence #{Number(sequence)} + + + + + + + ) : ( + router.push("/rollups")}>Go back + } + /> + )} + + ); +} diff --git a/tools/tenscan/frontend/pages/rollups/index.tsx b/tools/tenscan/frontend/pages/rollups/index.tsx new file mode 100644 index 0000000000..7d6d71480e --- /dev/null +++ b/tools/tenscan/frontend/pages/rollups/index.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import { DataTable } from "@/src/components/modules/common/data-table/data-table"; +import Layout from "@/src/components/layouts/default-layout"; +import { useRollupsService } from "@/src/services/useRollupsService"; +import { Metadata } from "next"; +import { formatNumber } from "@/src/lib/utils"; +import { columns } from "@/src/components/modules/rollups/columns"; + +export const metadata: Metadata = { + title: "Rollups", + description: "A table of rollups.", +}; + +export default function Rollups() { + const { rollups, setNoPolling, isRollupsLoading, refetchRollups } = + useRollupsService(); + const { RollupsData, Total } = rollups?.result || { + RollupsData: [], + Total: 0, + }; + + React.useEffect(() => { + setNoPolling(true); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + +
+
+
+

Rollups

+

+ {formatNumber(Total)} Rollups found. +

+
+
+ {RollupsData ? ( + + ) : ( +
No rollups found.
+ )} +
+ + ); +} diff --git a/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx b/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx index 3400768554..4b15899830 100644 --- a/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx +++ b/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx @@ -10,6 +10,7 @@ import { Badge } from "../../ui/badge"; import ExternalLink from "../../ui/external-link"; import { externalLinks } from "@/src/routes"; import { EyeOpenIcon } from "@radix-ui/react-icons"; +import Link from "next/link"; export const columns: ColumnDef[] = [ { @@ -60,7 +61,9 @@ export const columns: ColumnDef[] = [ return Number(row.original.rollupHash) === 0 ? ( No rollup ) : ( - + + + ); }, enableSorting: false, diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx index 45ce947a9f..19fcd09c26 100644 --- a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx +++ b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx @@ -26,8 +26,7 @@ export function DataTablePagination({ return (
- {table.getFilteredSelectedRowModel().rows.length} of{" "} - {table.getFilteredRowModel().rows.length} row(s) selected. + Showing {table.getFilteredRowModel().rows.length} row(s)
diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx index 079d9e01c6..3eb1849e1a 100644 --- a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx +++ b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx @@ -27,6 +27,7 @@ import { import { DataTablePagination } from "./data-table-pagination"; import { DataTableToolbar } from "./data-table-toolbar"; import { useRouter } from "next/router"; +import { Skeleton } from "@/src/components/ui/skeleton"; interface DataTableProps { columns: ColumnDef[]; @@ -39,6 +40,7 @@ interface DataTableProps { updateQueryParams?: (query: any) => void; refetch?: () => void; total: number; + isLoading?: boolean; } export function DataTable({ @@ -47,6 +49,7 @@ export function DataTable({ toolbar, refetch, total, + isLoading, }: DataTableProps) { const [rowSelection, setRowSelection] = React.useState({}); const [columnVisibility, setColumnVisibility] = @@ -119,7 +122,18 @@ export function DataTable({ ))} - {table?.getRowModel()?.rows?.length && data ? ( + {isLoading ? ( + <> + + + + + + + ) : table?.getRowModel()?.rows?.length && data ? ( table.getRowModel().rows.map((row) => ( [] = [ + { + accessorKey: "ID", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ {row.getValue("ID")} +
+ ); + }, + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "Hash", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ; + }, + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "Timestamp", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + {formatTimeAgo(row.getValue("Timestamp"))} + +
+ ); + }, + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "L1Hash", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ; + }, + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "FirstSeq", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + + {row.getValue("FirstSeq")} + + +
+ ); + }, + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "LastSeq", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + {row.getValue("LastSeq")} + +
+ ); + }, + enableSorting: false, + enableHiding: false, + }, + { + id: "actions", + cell: ({ row }) => { + return ( + + + + ); + }, + }, +]; diff --git a/tools/tenscan/frontend/src/components/modules/rollups/constants.tsx b/tools/tenscan/frontend/src/components/modules/rollups/constants.tsx new file mode 100644 index 0000000000..2ab030f09f --- /dev/null +++ b/tools/tenscan/frontend/src/components/modules/rollups/constants.tsx @@ -0,0 +1,45 @@ +import { + ArrowDownIcon, + ArrowRightIcon, + ArrowUpIcon, + CheckCircledIcon, + ClockIcon, +} from "@radix-ui/react-icons"; + +export const labels = [ + { + value: "Final", + label: "Final", + }, +]; + +export const statuses = [ + { + value: "Final", + label: "Final", + icon: CheckCircledIcon, + }, + { + value: "Pending", + label: "Pending", + icon: ClockIcon, + }, +]; + +export const priorities = [ + { + label: "Low", + value: "low", + icon: ArrowDownIcon, + }, + { + label: "Medium", + value: "medium", + icon: ArrowRightIcon, + }, + { + label: "High", + value: "high", + icon: ArrowUpIcon, + }, +]; diff --git a/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx b/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx new file mode 100644 index 0000000000..f5135c691b --- /dev/null +++ b/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx @@ -0,0 +1,126 @@ +import TruncatedAddress from "../common/truncated-address"; +import KeyValueItem, { KeyValueList } from "@/src/components/ui/key-value"; +import { formatTimeAgo } from "@/src/lib/utils"; +import { Rollup } from "@/src/types/interfaces/RollupInterfaces"; +import Link from "next/link"; + +export function RollupDetailsComponent({ + rollupDetails, +}: { + rollupDetails: Rollup; +}) { + return ( +
+ + + } + /> + + } + /> + + {"#" + rollupDetails?.FirstSeq} + + } + /> + + {"#" + rollupDetails?.LastSeq} + + } + /> + + } + /> + + } + /> + + } + /> + + {"#" + rollupDetails?.Header?.LastBatchSeqNo} + + } + /> + } + /> + 0 + ? rollupDetails?.Header?.crossChainMessages?.map((msg, index) => ( +
+ + + + {"#" + msg.Sequence} + + } + /> + + + ( +
{payload}
+ ))} + /> + + +
+ )) + : "No cross chain messages found." + } + isLastItem + /> + +
+ ); +} diff --git a/tools/tenscan/frontend/src/routes/index.ts b/tools/tenscan/frontend/src/routes/index.ts index e22ea6546b..133165cb3c 100644 --- a/tools/tenscan/frontend/src/routes/index.ts +++ b/tools/tenscan/frontend/src/routes/index.ts @@ -3,7 +3,7 @@ import { NavLink } from "../types/interfaces"; export const apiRoutes = { // **** BATCHES **** getLatestBatch: "/items/batch/latest/", - getBatches: "/items/batches/", + getBatches: "/items/v2/batches/", getBatchByHash: "/items/batch/:hash", // **** BLOCKS **** @@ -24,6 +24,9 @@ export const apiRoutes = { // **** ROLLUPS **** getLatestRollup: "/items/rollup/latest/", decryptEncryptedRollup: "/actions/decryptTxBlob/", + getRollups: "/items/rollups/", + getRollupByHash: "/items/rollup/:hash", + getRollupByBatchSequence: "/items/rollup/batch/:seq", // **** INFO **** getHealthStatus: "/info/health/", @@ -66,6 +69,11 @@ export const NavLinks: NavLink[] = [ label: "Batches", isExternal: false, }, + { + href: "/rollups", + label: "Rollups", + isExternal: false, + }, ], }, { diff --git a/tools/tenscan/frontend/src/services/useRollupsService.ts b/tools/tenscan/frontend/src/services/useRollupsService.ts index e75fc02771..bc37046b72 100644 --- a/tools/tenscan/frontend/src/services/useRollupsService.ts +++ b/tools/tenscan/frontend/src/services/useRollupsService.ts @@ -1,14 +1,30 @@ -import { decryptEncryptedRollup, fetchRollups } from "@/api/rollups"; +import { + decryptEncryptedRollup, + fetchLatestRollups, + fetchRollups, +} from "@/api/rollups"; import { toast } from "@/src/components/ui/use-toast"; import { useMutation, useQuery } from "@tanstack/react-query"; import { useState } from "react"; +import { pollingInterval } from "../lib/constants"; export const useRollupsService = () => { + const [noPolling, setNoPolling] = useState(false); const [decryptedRollup, setDecryptedRollup] = useState(); - const { data: rollups, isLoading: isRollupsLoading } = useQuery({ + const { data: latestRollups } = useQuery({ + queryKey: ["latestRollups"], + queryFn: () => fetchLatestRollups(), + }); + + const { + data: rollups, + isLoading: isRollupsLoading, + refetch: refetchRollups, + } = useQuery({ queryKey: ["rollups"], queryFn: () => fetchRollups(), + refetchInterval: noPolling ? false : pollingInterval, }); const { mutate: decryptEncryptedData } = useMutation({ @@ -22,5 +38,13 @@ export const useRollupsService = () => { }, }); - return { rollups, isRollupsLoading, decryptEncryptedData, decryptedRollup }; + return { + rollups, + latestRollups, + refetchRollups, + isRollupsLoading, + decryptEncryptedData, + decryptedRollup, + setNoPolling, + }; }; diff --git a/tools/tenscan/frontend/src/types/interfaces/RollupInterfaces.ts b/tools/tenscan/frontend/src/types/interfaces/RollupInterfaces.ts new file mode 100644 index 0000000000..a72f505b62 --- /dev/null +++ b/tools/tenscan/frontend/src/types/interfaces/RollupInterfaces.ts @@ -0,0 +1,32 @@ +export interface RollupsResponse { + RollupsData: Rollup[]; + Total: number; +} + +export interface Rollup { + ID: number; + Hash: string; + FirstSeq: number; + LastSeq: number; + Timestamp: number; + Header: Header; + L1Hash: string; +} + +export interface Header { + CompressionL1Head: string; + crossChainMessages: CrossChainMessage[]; + PayloadHash: string; + Signature: string; + LastBatchSeqNo: number; + hash: string; +} + +type CrossChainMessage = { + Sender: string; + Sequence: number; + Nonce: number; + Topic: number; + Payload: string[]; + ConsistencyLevel: number; +}; From 8864dab76221332a854b90beaadda2e8b23364e5 Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Wed, 22 May 2024 18:15:25 +0100 Subject: [PATCH 04/85] Update rollup details component and add new API routes --- .../src/components/modules/rollups/rollup-details.tsx | 10 +++++----- tools/tenscan/frontend/src/routes/index.ts | 3 +++ 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx b/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx index f5135c691b..5717ceb3cd 100644 --- a/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx +++ b/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx @@ -14,7 +14,7 @@ export function RollupDetailsComponent({ } /> } /> + } + /> } /> - } - /> Date: Wed, 22 May 2024 19:12:13 +0100 Subject: [PATCH 05/85] rearrange rollup details --- .../src/components/modules/rollups/rollup-details.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx b/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx index 5717ceb3cd..6881e5124a 100644 --- a/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx +++ b/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx @@ -13,14 +13,14 @@ export function RollupDetailsComponent({
- } - /> + } + /> } From aa0fe11649017fd2a01d41d2079b87a100b67734 Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Thu, 23 May 2024 16:16:31 +0100 Subject: [PATCH 06/85] - fetch batch by hash, sequence and height - fetch rollup via block details - fetch rollup batches --- tools/tenscan/frontend/api/batches.ts | 20 +++++ tools/tenscan/frontend/api/rollups.ts | 16 +++- .../pages/{batches => batch}/[hash].tsx | 6 ++ .../frontend/pages/batch/height/[height].tsx | 53 +++++++++++++ .../frontend/pages/batch/txs/[fullHash].tsx | 70 +++++++++++++++++ .../frontend/pages/rollup/[hash]/batches.tsx | 57 ++++++++++++++ .../rollup/{[hash].tsx => [hash]/index.tsx} | 0 .../{ => batch}/sequence/[sequence].tsx | 6 ++ .../frontend/pages/transactions/index.tsx | 11 ++- .../modules/batches/batch-details.tsx | 12 ++- .../components/modules/batches/columns.tsx | 53 +++++++++---- .../modules/batches/transaction-columns.tsx | 78 +++++++++++++++++++ .../src/components/modules/blocks/columns.tsx | 5 +- .../modules/dashboard/recent-batches.tsx | 14 +++- .../modules/dashboard/recent-transactions.tsx | 16 +++- .../components/modules/rollups/columns.tsx | 28 +++++-- .../modules/rollups/rollup-details.tsx | 34 +++++--- .../modules/transactions/columns.tsx | 19 ++--- tools/tenscan/frontend/src/routes/index.ts | 4 +- .../src/services/useRollupsService.ts | 20 ++++- .../src/types/interfaces/BatchInterfaces.ts | 53 ++++++------- .../frontend/src/pages/_app.tsx | 5 +- 22 files changed, 496 insertions(+), 84 deletions(-) rename tools/tenscan/frontend/pages/{batches => batch}/[hash].tsx (93%) create mode 100644 tools/tenscan/frontend/pages/batch/height/[height].tsx create mode 100644 tools/tenscan/frontend/pages/batch/txs/[fullHash].tsx create mode 100644 tools/tenscan/frontend/pages/rollup/[hash]/batches.tsx rename tools/tenscan/frontend/pages/rollup/{[hash].tsx => [hash]/index.tsx} (100%) rename tools/tenscan/frontend/pages/rollup/{ => batch}/sequence/[sequence].tsx (95%) create mode 100644 tools/tenscan/frontend/src/components/modules/batches/transaction-columns.tsx diff --git a/tools/tenscan/frontend/api/batches.ts b/tools/tenscan/frontend/api/batches.ts index d05314b54a..cf93dda1bd 100644 --- a/tools/tenscan/frontend/api/batches.ts +++ b/tools/tenscan/frontend/api/batches.ts @@ -36,3 +36,23 @@ export const fetchBatchByHash = async ( url: pathToUrl(apiRoutes.getBatchByHash, { hash }), }); }; + +export const fetchBatchByHeight = async ( + height: string +): Promise> => { + return await httpRequest>({ + method: "get", + url: pathToUrl(apiRoutes.getBatchByHeight, { height }), + }); +}; + +export const fetchBatchTransactions = async ( + fullHash: string, + options?: Record +): Promise> => { + return await httpRequest>({ + method: "get", + url: pathToUrl(apiRoutes.getBatchTransactions, { fullHash }), + searchParams: options, + }); +}; diff --git a/tools/tenscan/frontend/api/rollups.ts b/tools/tenscan/frontend/api/rollups.ts index 4fd0016009..4ee8014bbb 100644 --- a/tools/tenscan/frontend/api/rollups.ts +++ b/tools/tenscan/frontend/api/rollups.ts @@ -2,6 +2,7 @@ import { httpRequest } from "."; import { apiRoutes } from "@/src/routes"; import { pathToUrl } from "@/src/routes/router"; import { ResponseDataInterface } from "@/src/types/interfaces"; +import { Batch, BatchResponse } from "@/src/types/interfaces/BatchInterfaces"; import { Rollup, RollupsResponse, @@ -50,8 +51,21 @@ export const fetchRollupByHash = async ( export const fetchRollupByBatchSequence = async ( seq: string ): Promise> => { - return await httpRequest>({ + const res = await httpRequest>({ method: "get", url: pathToUrl(apiRoutes.getRollupByBatchSequence, { seq }), }); + console.log(res); + return res; +}; + +export const fetchBatchesInRollups = async ( + hash: string, + options: Record +): Promise> => { + return await httpRequest>({ + method: "get", + url: pathToUrl(apiRoutes.getBatchesInRollup, { hash }), + searchParams: options, + }); }; diff --git a/tools/tenscan/frontend/pages/batches/[hash].tsx b/tools/tenscan/frontend/pages/batch/[hash].tsx similarity index 93% rename from tools/tenscan/frontend/pages/batches/[hash].tsx rename to tools/tenscan/frontend/pages/batch/[hash].tsx index 964444aa77..1118ff4cee 100644 --- a/tools/tenscan/frontend/pages/batches/[hash].tsx +++ b/tools/tenscan/frontend/pages/batch/[hash].tsx @@ -45,3 +45,9 @@ export default function Batch() { ); } + +export async function getServerSideProps(context: any) { + return { + props: {}, + }; +} diff --git a/tools/tenscan/frontend/pages/batch/height/[height].tsx b/tools/tenscan/frontend/pages/batch/height/[height].tsx new file mode 100644 index 0000000000..15195787f9 --- /dev/null +++ b/tools/tenscan/frontend/pages/batch/height/[height].tsx @@ -0,0 +1,53 @@ +import { fetchBatchByHeight } from "@/api/batches"; +import Layout from "@/src/components/layouts/default-layout"; +import { BatchDetailsComponent } from "@/src/components/modules/batches/batch-details"; +import { + Card, + CardHeader, + CardTitle, + CardContent, + CardDescription, +} from "@/src/components/ui/card"; +import { Skeleton } from "@/src/components/ui/skeleton"; +import { useQuery } from "@tanstack/react-query"; +import { useRouter } from "next/router"; + +export default function Batch() { + const router = useRouter(); + const { height } = router.query; + + const { data, isLoading } = useQuery({ + queryKey: ["batchHeight", height], + queryFn: () => fetchBatchByHeight(height as string), + }); + + const batchDetails = data?.item; + + return ( + + {isLoading ? ( + + ) : batchDetails ? ( + + + Batch #{Number(batchDetails?.Header?.number)} + + Overview of the batch #{Number(batchDetails?.Header?.number)} + + + + + + + ) : ( +
Batch not found
+ )} + + ); +} + +export async function getServerSideProps(context: any) { + return { + props: {}, + }; +} diff --git a/tools/tenscan/frontend/pages/batch/txs/[fullHash].tsx b/tools/tenscan/frontend/pages/batch/txs/[fullHash].tsx new file mode 100644 index 0000000000..1539b51d23 --- /dev/null +++ b/tools/tenscan/frontend/pages/batch/txs/[fullHash].tsx @@ -0,0 +1,70 @@ +import { fetchBatchTransactions } from "@/api/batches"; +import Layout from "@/src/components/layouts/default-layout"; +import { DataTable } from "@/src/components/modules/common/data-table/data-table"; +import EmptyState from "@/src/components/modules/common/empty-state"; +import { columns } from "@/src/components/modules/batches/transaction-columns"; +import { + Card, + CardHeader, + CardTitle, + CardContent, + CardDescription, +} from "@/src/components/ui/card"; +import { formatNumber } from "@/src/lib/utils"; +import { useQuery } from "@tanstack/react-query"; +import { useRouter } from "next/router"; +import { getOptions } from "@/src/lib/constants"; + +export default function BatchTransactions() { + const router = useRouter(); + const { fullHash } = router.query; + const options = getOptions(router.query); + + const { data, isLoading, refetch } = useQuery({ + queryKey: ["batchTransactions", { fullHash, options }], + queryFn: () => fetchBatchTransactions(fullHash as string, options), + }); + + const { TransactionsData, Total } = data?.result || { + TransactionsData: [], + Total: 0, + }; + + return ( + + {TransactionsData ? ( + + + + Batch Transactions at {"#" + TransactionsData[0]?.BatchHeight} + + + Overview of the batch transactions at{" "} + {"#" + TransactionsData[0]?.BatchHeight} + + + + + + + ) : ( + + )} + + ); +} + +export async function getServerSideProps(context: any) { + return { + props: {}, + }; +} diff --git a/tools/tenscan/frontend/pages/rollup/[hash]/batches.tsx b/tools/tenscan/frontend/pages/rollup/[hash]/batches.tsx new file mode 100644 index 0000000000..390209c0e2 --- /dev/null +++ b/tools/tenscan/frontend/pages/rollup/[hash]/batches.tsx @@ -0,0 +1,57 @@ +import React, { useEffect } from "react"; +import { columns } from "@/src/components/modules/batches/columns"; +import { DataTable } from "@/src/components/modules/common/data-table/data-table"; +import Layout from "@/src/components/layouts/default-layout"; +import { Metadata } from "next"; +import { formatNumber } from "@/src/lib/utils"; +import { fetchBatchesInRollups } from "@/api/rollups"; +import { useRouter } from "next/router"; +import { useQuery } from "@tanstack/react-query"; +import { useRollupsService } from "@/src/services/useRollupsService"; + +export const metadata: Metadata = { + title: "Batches", + description: "A table of Batches.", +}; + +export default function RollupBatches() { + const { rollupBatches, isRollupBatchesLoading, refetchRollupBatches } = + useRollupsService(); + + const { BatchesData, Total } = rollupBatches?.result || { + BatchesData: [], + Total: 0, + }; + + return ( + +
+
+
+

Batches

+

+ {formatNumber(Total)} Batches found. +

+
+
+ {BatchesData ? ( + + ) : ( +

Loading...

+ )} +
+ + ); +} + +export async function getServerSideProps(context: any) { + return { + props: {}, + }; +} diff --git a/tools/tenscan/frontend/pages/rollup/[hash].tsx b/tools/tenscan/frontend/pages/rollup/[hash]/index.tsx similarity index 100% rename from tools/tenscan/frontend/pages/rollup/[hash].tsx rename to tools/tenscan/frontend/pages/rollup/[hash]/index.tsx diff --git a/tools/tenscan/frontend/pages/rollup/sequence/[sequence].tsx b/tools/tenscan/frontend/pages/rollup/batch/sequence/[sequence].tsx similarity index 95% rename from tools/tenscan/frontend/pages/rollup/sequence/[sequence].tsx rename to tools/tenscan/frontend/pages/rollup/batch/sequence/[sequence].tsx index 72439dbf0d..eb8b2716d8 100644 --- a/tools/tenscan/frontend/pages/rollup/sequence/[sequence].tsx +++ b/tools/tenscan/frontend/pages/rollup/batch/sequence/[sequence].tsx @@ -53,3 +53,9 @@ export default function RollupBatchSequenceDetails() { ); } + +export async function getServerSideProps(context: any) { + return { + props: {}, + }; +} diff --git a/tools/tenscan/frontend/pages/transactions/index.tsx b/tools/tenscan/frontend/pages/transactions/index.tsx index 06ca008bb8..bccbf98001 100644 --- a/tools/tenscan/frontend/pages/transactions/index.tsx +++ b/tools/tenscan/frontend/pages/transactions/index.tsx @@ -12,8 +12,12 @@ export const metadata: Metadata = { }; export default function Transactions() { - const { transactions, refetchTransactions, setNoPolling } = - useTransactionsService(); + const { + transactions, + refetchTransactions, + setNoPolling, + isTransactionsLoading, + } = useTransactionsService(); const { TransactionsData, Total } = transactions?.result || { TransactionsData: [], Total: 0, @@ -41,9 +45,10 @@ export default function Transactions() { data={TransactionsData} refetch={refetchTransactions} total={+Total} + isLoading={isTransactionsLoading} /> ) : ( -

Loading...

+
No rollups found.
)}
diff --git a/tools/tenscan/frontend/src/components/modules/batches/batch-details.tsx b/tools/tenscan/frontend/src/components/modules/batches/batch-details.tsx index 430281453b..8a8b29cd6e 100644 --- a/tools/tenscan/frontend/src/components/modules/batches/batch-details.tsx +++ b/tools/tenscan/frontend/src/components/modules/batches/batch-details.tsx @@ -4,6 +4,7 @@ import KeyValueItem, { KeyValueList } from "@/src/components/ui/key-value"; import { formatNumber, formatTimeAgo } from "@/src/lib/utils"; import { Badge } from "@/src/components/ui/badge"; import { BatchDetails } from "@/src/types/interfaces/BatchInterfaces"; +import Link from "next/link"; export function BatchDetailsComponent({ batchDetails, @@ -34,9 +35,14 @@ export function BatchDetailsComponent({ + + + } /> [] = [ cell: ({ row }) => { return (
- - #{Number(row.getValue("number"))} - + + + #{Number(row.original.height)} + +
); }, @@ -37,8 +42,8 @@ export const columns: ColumnDef[] = [ return (
- {row.getValue("timestamp") - ? formatTimeAgo(row.getValue("timestamp")) + {row.original.header.timestamp + ? formatTimeAgo(row.original.header.timestamp) : "N/A"}
@@ -57,7 +62,7 @@ export const columns: ColumnDef[] = [
- {formatNumber(row.getValue("gasUsed"))} + {formatNumber(row.original?.header?.gasUsed) || "N/A"}
@@ -75,7 +80,7 @@ export const columns: ColumnDef[] = [ return (
- {formatNumber(row.getValue("gasLimit"))} + {formatNumber(row.original?.header?.gasUsed) || "N/A"}
); @@ -89,7 +94,11 @@ export const columns: ColumnDef[] = [ ), cell: ({ row }) => { - return ; + return ( + + + + ); }, enableSorting: false, enableHiding: false, @@ -106,23 +115,37 @@ export const columns: ColumnDef[] = [ enableHiding: false, }, { - accessorKey: "l1Proof", + accessorKey: "sequence", header: ({ column }) => ( - + ), cell: ({ row }) => { - return ; + return ( + + {row.original.sequence} + + ); }, enableSorting: false, enableHiding: false, }, { - accessorKey: "miner", + accessorKey: "txCount", header: ({ column }) => ( - + ), cell: ({ row }) => { - return ; + return ( + + {row.original.txCount} + + ); }, enableSorting: false, enableHiding: false, @@ -131,7 +154,7 @@ export const columns: ColumnDef[] = [ id: "actions", cell: ({ row }) => { return ( - + ); diff --git a/tools/tenscan/frontend/src/components/modules/batches/transaction-columns.tsx b/tools/tenscan/frontend/src/components/modules/batches/transaction-columns.tsx new file mode 100644 index 0000000000..1021b51ca4 --- /dev/null +++ b/tools/tenscan/frontend/src/components/modules/batches/transaction-columns.tsx @@ -0,0 +1,78 @@ +"use client"; + +import { ColumnDef } from "@tanstack/react-table"; +import { Badge } from "@/src/components/ui/badge"; + +import { statuses } from "../transactions/constants"; +import { DataTableColumnHeader } from "../common/data-table/data-table-column-header"; +import { Transaction } from "@/src/types/interfaces/TransactionInterfaces"; +import TruncatedAddress from "../common/truncated-address"; +import { formatNumber, formatTimeAgo } from "@/src/lib/utils"; +import Link from "next/link"; +import { EyeOpenIcon } from "@radix-ui/react-icons"; + +export const columns: ColumnDef[] = [ + { + accessorKey: "BatchTimestamp", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( +
+ + {formatTimeAgo(row.getValue("BatchTimestamp"))} + +
+ ); + }, + enableSorting: false, + enableHiding: false, + }, + + { + accessorKey: "TransactionHash", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ( + + + + ); + }, + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: "Finality", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const finality = statuses.find( + (finality) => finality.value === row.getValue("Finality") + ); + + if (!finality) { + return null; + } + + return ( +
+ {finality.icon && ( + + )} + {finality.label} +
+ ); + }, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)); + }, + }, +]; diff --git a/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx b/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx index 4b15899830..b37875e1f5 100644 --- a/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx +++ b/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx @@ -61,7 +61,10 @@ export const columns: ColumnDef[] = [ return Number(row.original.rollupHash) === 0 ? ( No rollup ) : ( - + ); diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/recent-batches.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/recent-batches.tsx index d2f0d68cda..f12cd11677 100644 --- a/tools/tenscan/frontend/src/components/modules/dashboard/recent-batches.tsx +++ b/tools/tenscan/frontend/src/components/modules/dashboard/recent-batches.tsx @@ -2,6 +2,7 @@ import TruncatedAddress from "../common/truncated-address"; import { formatTimeAgo } from "@/src/lib/utils"; import { Batch } from "@/src/types/interfaces/BatchInterfaces"; import { Avatar, AvatarFallback } from "@/src/components/ui/avatar"; +import Link from "next/link"; export function RecentBatches({ batches }: { batches: any }) { return ( @@ -13,14 +14,21 @@ export function RecentBatches({ batches }: { batches: any }) {

- #{Number(batch?.number)} + + #{Number(batch?.height)} +

- {formatTimeAgo(batch?.timestamp)} + {formatTimeAgo(batch?.header?.timestamp)}

- + + +
))} diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx index 9133fcbc89..21d00e4cfc 100644 --- a/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx +++ b/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx @@ -3,6 +3,7 @@ import { Avatar, AvatarFallback } from "@/src/components/ui/avatar"; import { Transaction } from "@/src/types/interfaces/TransactionInterfaces"; import { Badge } from "../../ui/badge"; import { formatTimeAgo } from "@/src/lib/utils"; +import Link from "next/link"; export function RecentTransactions({ transactions }: { transactions: any }) { return ( @@ -15,14 +16,25 @@ export function RecentTransactions({ transactions }: { transactions: any }) {

- #{Number(transaction?.BatchHeight)} + + #{Number(transaction?.BatchHeight)} +

{formatTimeAgo(transaction?.BatchTimestamp)}

- + + {" "} + +
{transaction?.Finality} diff --git a/tools/tenscan/frontend/src/components/modules/rollups/columns.tsx b/tools/tenscan/frontend/src/components/modules/rollups/columns.tsx index b7bc92257b..9975b214f3 100644 --- a/tools/tenscan/frontend/src/components/modules/rollups/columns.tsx +++ b/tools/tenscan/frontend/src/components/modules/rollups/columns.tsx @@ -30,7 +30,17 @@ export const columns: ColumnDef[] = [ ), cell: ({ row }) => { - return ; + return ( + + + + ); }, enableSorting: false, enableHiding: false, @@ -71,7 +81,10 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => { return (
- + {row.getValue("FirstSeq")} @@ -90,9 +103,14 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => { return (
- - {row.getValue("LastSeq")} - + + + {row.getValue("LastSeq")} + +
); }, diff --git a/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx b/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx index 6881e5124a..1806140820 100644 --- a/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx +++ b/tools/tenscan/frontend/src/components/modules/rollups/rollup-details.tsx @@ -18,22 +18,36 @@ export function RollupDetailsComponent({ value={formatTimeAgo(rollupDetails?.Timestamp)} /> } + label="Full Hash" + value={ + + + + } /> } + label="Rollup Header Hash" + value={ + + + + } /> } + label="L1 Hash" + value={} /> {"#" + rollupDetails?.FirstSeq} @@ -44,7 +58,7 @@ export function RollupDetailsComponent({ label="Last Sequencer" value={ {"#" + rollupDetails?.LastSeq} @@ -75,7 +89,7 @@ export function RollupDetailsComponent({ label="Last Batch Sequence No" value={ {"#" + rollupDetails?.Header?.LastBatchSeqNo} @@ -94,7 +108,7 @@ export function RollupDetailsComponent({ label="Sequence" value={ {"#" + msg.Sequence} diff --git a/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx b/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx index 340383c1e2..1d68de2269 100644 --- a/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx +++ b/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx @@ -54,7 +54,14 @@ export const columns: ColumnDef[] = [ ), cell: ({ row }) => { - return ; + return ( + + + + ); }, enableSorting: false, enableHiding: false, @@ -86,14 +93,4 @@ export const columns: ColumnDef[] = [ return value.includes(row.getValue(id)); }, }, - { - id: "actions", - cell: ({ row }) => { - return ( - - - - ); - }, - }, ]; diff --git a/tools/tenscan/frontend/src/routes/index.ts b/tools/tenscan/frontend/src/routes/index.ts index 3ba5a52525..3ac94fd3fb 100644 --- a/tools/tenscan/frontend/src/routes/index.ts +++ b/tools/tenscan/frontend/src/routes/index.ts @@ -6,8 +6,8 @@ export const apiRoutes = { getBatches: "/items/v2/batches/", getBatchByHash: "/items/batch/:hash", getBatchByHeight: "/items/batch/height/:height", - getBatchTransactions: "/items/batch/:fullHash/transactions/", - getBatchesInRollup: "/items/rollup/:hash/batches/", + getBatchTransactions: "/items/batch/:fullHash/transactions", + getBatchesInRollup: "/items/rollup/:hash/batches", // **** BLOCKS **** getBlocks: "/items/blocks/", diff --git a/tools/tenscan/frontend/src/services/useRollupsService.ts b/tools/tenscan/frontend/src/services/useRollupsService.ts index bc37046b72..78908a825b 100644 --- a/tools/tenscan/frontend/src/services/useRollupsService.ts +++ b/tools/tenscan/frontend/src/services/useRollupsService.ts @@ -1,17 +1,23 @@ import { decryptEncryptedRollup, + fetchBatchesInRollups, fetchLatestRollups, fetchRollups, } from "@/api/rollups"; import { toast } from "@/src/components/ui/use-toast"; import { useMutation, useQuery } from "@tanstack/react-query"; import { useState } from "react"; -import { pollingInterval } from "../lib/constants"; +import { getOptions, pollingInterval } from "../lib/constants"; +import { useRouter } from "next/router"; export const useRollupsService = () => { + const { query } = useRouter(); + const [noPolling, setNoPolling] = useState(false); const [decryptedRollup, setDecryptedRollup] = useState(); + const options = getOptions(query); + const { data: latestRollups } = useQuery({ queryKey: ["latestRollups"], queryFn: () => fetchLatestRollups(), @@ -38,6 +44,15 @@ export const useRollupsService = () => { }, }); + const { + data: rollupBatches, + isLoading: isRollupBatchesLoading, + refetch: refetchRollupBatches, + } = useQuery({ + queryKey: ["rollupBatches", { hash: query.hash, options }], + queryFn: () => fetchBatchesInRollups(query.hash as string, options), + }); + return { rollups, latestRollups, @@ -46,5 +61,8 @@ export const useRollupsService = () => { decryptEncryptedData, decryptedRollup, setNoPolling, + rollupBatches, + isRollupBatchesLoading, + refetchRollupBatches, }; }; diff --git a/tools/tenscan/frontend/src/types/interfaces/BatchInterfaces.ts b/tools/tenscan/frontend/src/types/interfaces/BatchInterfaces.ts index a8fa9c7717..ccc63f538f 100644 --- a/tools/tenscan/frontend/src/types/interfaces/BatchInterfaces.ts +++ b/tools/tenscan/frontend/src/types/interfaces/BatchInterfaces.ts @@ -1,31 +1,32 @@ export type Batch = { - parentHash: string; - stateRoot: string; - transactionsRoot: string; - receiptsRoot: string; - number: number; - sequencerOrderNo: number; - gasLimit: number; - gasUsed: number; - timestamp: string; - extraData: string; - baseFee: number; - coinbase: string; - l1Proof: string; - R: number; - S: number; - crossChainMessages: any[]; - inboundCrossChainHash: string; - inboundCrossChainHeight: number; - transfersTree: string; + sequence: number; hash: string; - sha3Uncles: string; - miner: string; - logsBloom: string; - difficulty: string; - nonce: string; - baseFeePerGas: number; - EncryptedTxBlob: string; + fullHash: string; + height: number; + txCount: number; + header: { + hash: string; + parentHash: string; + stateRoot: string; + transactionsRoot: string; + receiptsRoot: string; + number: string; + sequencerOrderNo: string; + gasLimit: string; + gasUsed: string; + timestamp: string; + extraData: string; + baseFeePerGas: string; + miner: string; + l1Proof: string; + signature: string; + crossChainMessages: []; + inboundCrossChainHash: string; + inboundCrossChainHeight: string; + TransfersTree: string; + crossChainTree: string; + }; + encryptedTxBlob: string; }; export type BatchDetails = { diff --git a/tools/walletextension/frontend/src/pages/_app.tsx b/tools/walletextension/frontend/src/pages/_app.tsx index 08951a549c..1dbdecef07 100644 --- a/tools/walletextension/frontend/src/pages/_app.tsx +++ b/tools/walletextension/frontend/src/pages/_app.tsx @@ -8,8 +8,11 @@ import HeadSeo from "@/components/head-seo"; import Script from "next/script"; import { GOOGLE_ANALYTICS_ID } from "@/lib/constants"; import { siteMetadata } from "@/lib/siteMetadata"; +import { useRouter } from "next/router"; export default function App({ Component, pageProps }: AppProps) { + const router = useRouter(); + return ( <>