From 46a3648007813a2558445dfe8bf69097a8b1daeb Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Tue, 3 Dec 2024 16:51:09 -0400 Subject: [PATCH 1/9] feat: Adds Option to Toggle Between Relative Time and Date-Time Format --- apps/web/src/components/TimestampToggle.tsx | 32 +++++++ apps/web/src/pages/blobs.tsx | 86 ++++++++++-------- apps/web/src/pages/blocks.tsx | 93 +++++++++++--------- apps/web/src/pages/txs.tsx | 97 +++++++++++---------- 4 files changed, 184 insertions(+), 124 deletions(-) create mode 100644 apps/web/src/components/TimestampToggle.tsx diff --git a/apps/web/src/components/TimestampToggle.tsx b/apps/web/src/components/TimestampToggle.tsx new file mode 100644 index 000000000..d7c4be39c --- /dev/null +++ b/apps/web/src/components/TimestampToggle.tsx @@ -0,0 +1,32 @@ +import type { Dispatch, FC, SetStateAction } from "react"; + +import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/Tooltip"; + +export type TimestampFormat = "relative" | "absolute"; + +type TimestampProps = { + format: TimestampFormat; + setFormat: Dispatch>; +}; + +export const TimestampToggle: FC = ({ format, setFormat }) => { + return ( + + + {format === "relative" + ? "Click to show absolute timestamp" + : "Click to show relative timestamp"} + + + setFormat((format) => + format === "relative" ? "absolute" : "relative" + ) + } + > +
Timestamp
+ + + ); +}; diff --git a/apps/web/src/pages/blobs.tsx b/apps/web/src/pages/blobs.tsx index 137348d3f..ae240cf08 100644 --- a/apps/web/src/pages/blobs.tsx +++ b/apps/web/src/pages/blobs.tsx @@ -1,7 +1,9 @@ -import { useMemo } from "react"; +import { useMemo, useState } from "react"; import type { NextPage } from "next"; import NextError from "next/error"; +import dayjs from "@blobscan/dayjs"; + import { Copyable } from "~/components/Copyable"; import { Filters } from "~/components/Filters"; import { Header } from "~/components/Header"; @@ -10,6 +12,8 @@ import { PaginatedTable } from "~/components/PaginatedTable"; import { RollupIcon } from "~/components/RollupIcon"; import { Skeleton } from "~/components/Skeleton"; import { StorageIcon } from "~/components/StorageIcon"; +import { TimestampToggle } from "~/components/TimestampToggle"; +import type { TimestampFormat } from "~/components/TimestampToggle"; import { api } from "~/api-client"; import { useQueryParams } from "~/hooks/useQueryParams"; import { @@ -22,41 +26,6 @@ import { shortenAddress, } from "~/utils"; -const BLOBS_TABLE_HEADERS = [ - { - cells: [ - { - item: "", - className: "w-[40px]", - }, - { - item: "Versioned Hash", - className: "2xl:w-[312px] xl:w-[276px] lg:w-[215px] w-[170px]", - }, - { - item: "Transaction Hash", - className: "2xl:w-[318px] xl:w-[276px] lg:w-[218px] w-[172px]", - }, - { - item: "Block Number", - className: "2xl:w-[221px] xl:w-[191px] lg:w-[152px] w-[120px]", - }, - { - item: "Timestamp", - className: "2xl:w-[185px] xl:w-[160px] lg:w-[127px] w-[100px]", - }, - { - item: "Size", - className: "2xl:w-[178px] xl:w-[145px] lg:w-[101px] w-[66px]", - }, - { - item: "Storage", - className: "w-[86px]", - }, - ], - }, -]; - const Blobs: NextPage = function () { const { paginationParams, filterParams } = useQueryParams(); @@ -79,6 +48,45 @@ const Blobs: NextPage = function () { const { blobs } = blobsData || {}; const { totalBlobs } = countData || {}; + const [timeFormat, setTimeFormat] = useState("relative"); + + const BLOBS_TABLE_HEADERS = [ + { + cells: [ + { + item: "", + className: "w-[40px]", + }, + { + item: "Versioned Hash", + className: "2xl:w-[312px] xl:w-[276px] lg:w-[215px] w-[170px]", + }, + { + item: "Transaction Hash", + className: "2xl:w-[318px] xl:w-[276px] lg:w-[218px] w-[172px]", + }, + { + item: "Block Number", + className: "2xl:w-[221px] xl:w-[191px] lg:w-[152px] w-[120px]", + }, + { + item: ( + + ), + className: "2xl:w-[185px] xl:w-[160px] lg:w-[127px] w-[100px]", + }, + { + item: "Size", + className: "2xl:w-[178px] xl:w-[145px] lg:w-[101px] w-[66px]", + }, + { + item: "Storage", + className: "w-[86px]", + }, + ], + }, + ]; + const blobRows = useMemo(() => { return blobs ? blobs.map( @@ -138,7 +146,9 @@ const Blobs: NextPage = function () { { item: (
- {formatTimestamp(blockTimestamp, true)} + {timeFormat === "relative" + ? formatTimestamp(blockTimestamp, true) + : dayjs(blockTimestamp).format("YYYY-MM-DD HH:mm:ss")}
), }, @@ -167,7 +177,7 @@ const Blobs: NextPage = function () { }) ) : undefined; - }, [blobs]); + }, [blobs, timeFormat]); if (error) { return ( diff --git a/apps/web/src/pages/blocks.tsx b/apps/web/src/pages/blocks.tsx index 81c21f438..610c9d2fa 100644 --- a/apps/web/src/pages/blocks.tsx +++ b/apps/web/src/pages/blocks.tsx @@ -1,4 +1,4 @@ -import { useMemo } from "react"; +import { useMemo, useState } from "react"; import type { NextPage } from "next"; import { Copyable } from "~/components/Copyable"; @@ -11,6 +11,8 @@ import { PaginatedTable } from "~/components/PaginatedTable"; import { RollupIcon } from "~/components/RollupIcon"; import { Skeleton } from "~/components/Skeleton"; import { Table } from "~/components/Table"; +import type { TimestampFormat } from "~/components/TimestampToggle"; +import { TimestampToggle } from "~/components/TimestampToggle"; import { api } from "~/api-client"; import { useQueryParams } from "~/hooks/useQueryParams"; import NextError from "~/pages/_error"; @@ -24,45 +26,6 @@ import { formatNumber, } from "~/utils"; -export const BLOCKS_TABLE_HEADERS = [ - { - cells: [ - { - item: "", - className: "w-[100px]", - }, - { - item: "Block number", - className: "2xl:w-[187px] lg:w-[158px] w-[118px]", - }, - { - item: "Timestamp", - className: "2xl:w-[237px] lg:w-[200px] w-[158px]", - }, - { - item: "Slot", - className: "2xl:w-[136px] lg:w-[115px] w-[96px]", - }, - { - item: "Txs", - className: "2xl:w-[77px] w-[66px]", - }, - { - item: "Blobs", - className: "2xl:w-[98px] w-[83px]", - }, - { - item: "Blob Gas Price", - className: "2xl:w-[195px] w-[165px]", - }, - { - item: "Blob Gas Used", - className: "2xl:w-full w-[240px]", - }, - ], - }, -]; - const Blocks: NextPage = function () { const { filterParams, paginationParams } = useQueryParams(); const { @@ -93,6 +56,49 @@ const Blocks: NextPage = function () { const { totalBlocks } = countData || {}; const error = blocksError || countError; + const [timeFormat, setTimeFormat] = useState("relative"); + + const BLOCKS_TABLE_HEADERS = [ + { + cells: [ + { + item: "", + className: "w-[100px]", + }, + { + item: "Block number", + className: "2xl:w-[187px] lg:w-[158px] w-[118px]", + }, + { + item: ( + + ), + className: "2xl:w-[237px] lg:w-[200px] w-[158px]", + }, + { + item: "Slot", + className: "2xl:w-[136px] lg:w-[115px] w-[96px]", + }, + { + item: "Txs", + className: "2xl:w-[77px] w-[66px]", + }, + { + item: "Blobs", + className: "2xl:w-[98px] w-[83px]", + }, + { + item: "Blob Gas Price", + className: "2xl:w-[195px] w-[165px]", + }, + { + item: "Blob Gas Used", + className: "2xl:w-full w-[240px]", + }, + ], + }, + ]; + const blocksRows = useMemo(() => { return blocks ? blocks.map((block: DeserializedBlock) => { @@ -216,7 +222,10 @@ const Blocks: NextPage = function () { ), }, { - item: timestamp.fromNow(), + item: + timeFormat === "relative" + ? timestamp.fromNow() + : timestamp.format("YYYY-MM-DD HH:mm:ss"), }, { item: ( @@ -250,7 +259,7 @@ const Blocks: NextPage = function () { }; }) : undefined; - }, [blocks]); + }, [blocks, timeFormat]); if (error) { return ( diff --git a/apps/web/src/pages/txs.tsx b/apps/web/src/pages/txs.tsx index 079b4a599..235769928 100644 --- a/apps/web/src/pages/txs.tsx +++ b/apps/web/src/pages/txs.tsx @@ -1,6 +1,8 @@ -import { useMemo } from "react"; +import { useMemo, useState } from "react"; import type { NextPage } from "next"; +import dayjs from "@blobscan/dayjs"; + import { Copyable } from "~/components/Copyable"; import { EtherUnitDisplay } from "~/components/Displays/EtherUnitDisplay"; import { Filters } from "~/components/Filters"; @@ -10,6 +12,8 @@ import { PaginatedTable } from "~/components/PaginatedTable"; import { RollupIcon } from "~/components/RollupIcon"; import { Skeleton } from "~/components/Skeleton"; import { Table } from "~/components/Table"; +import type { TimestampFormat } from "~/components/TimestampToggle"; +import { TimestampToggle } from "~/components/TimestampToggle"; import { api } from "~/api-client"; import { useQueryParams } from "~/hooks/useQueryParams"; import NextError from "~/pages/_error"; @@ -42,47 +46,6 @@ type Transaction = Pick< | "category" > & { blobsLength?: number }; -export const TRANSACTIONS_TABLE_HEADERS = [ - { - cells: [ - { item: "", className: "w-[40px]" }, - { - item: "Hash", - className: "w-[150px]", - }, - { - item: "Block number", - className: "w-[127px]", - }, - { - item: "Timestamp", - className: "w-[160px]", - }, - { - item: "From", - className: "w-[150px]", - }, - { - item: "To", - className: "w-[148px]", - }, - - { - item: "Blob Base Fee", - className: "w-[172px]", - }, - { - item: "Blob Max Fee", - className: "w-[162px]", - }, - { - item: "Blob Gas Price", - className: "2xl:w-full w-[180px]", - }, - ], - }, -]; - const Txs: NextPage = function () { const { filterParams, paginationParams } = useQueryParams(); const { @@ -117,6 +80,50 @@ const Txs: NextPage = function () { const { transactions } = txsData || {}; const { totalTransactions } = countData || {}; const error = txsError ?? countError; + const [timeFormat, setTimeFormat] = useState("relative"); + + const TRANSACTIONS_TABLE_HEADERS = [ + { + cells: [ + { item: "", className: "w-[40px]" }, + { + item: "Hash", + className: "w-[150px]", + }, + { + item: "Block number", + className: "w-[127px]", + }, + { + item: ( + + ), + className: "w-[160px]", + }, + { + item: "From", + className: "w-[150px]", + }, + { + item: "To", + className: "w-[148px]", + }, + + { + item: "Blob Base Fee", + className: "w-[172px]", + }, + { + item: "Blob Max Fee", + className: "w-[162px]", + }, + { + item: "Blob Gas Price", + className: "2xl:w-full w-[180px]", + }, + ], + }, + ]; const transactionRows = useMemo(() => { return transactions @@ -227,7 +234,9 @@ const Txs: NextPage = function () { { item: (
- {formatTimestamp(blockTimestamp, true)} + {timeFormat === "relative" + ? formatTimestamp(blockTimestamp, true) + : dayjs(blockTimestamp).format("YYYY-MM-DD HH:mm:ss")}
), }, @@ -281,7 +290,7 @@ const Txs: NextPage = function () { }; }) : undefined; - }, [transactions]); + }, [transactions, timeFormat]); if (error) { return ( From b9e61eb39ac54b882e2191e2d535b26a022c66e8 Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Tue, 3 Dec 2024 16:52:12 -0400 Subject: [PATCH 2/9] chore: added changeset --- .changeset/slimy-fishes-roll.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/slimy-fishes-roll.md diff --git a/.changeset/slimy-fishes-roll.md b/.changeset/slimy-fishes-roll.md new file mode 100644 index 000000000..a2a67024d --- /dev/null +++ b/.changeset/slimy-fishes-roll.md @@ -0,0 +1,5 @@ +--- +"@blobscan/web": patch +--- + +Added button to toggle between relative time and date-time format From 8c790b1a949aa8f39c28f843f372de26cd1827bd Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Wed, 4 Dec 2024 11:08:16 -0400 Subject: [PATCH 3/9] Update apps/web/src/components/TimestampToggle.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Francisco Jiménez --- apps/web/src/components/TimestampToggle.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/web/src/components/TimestampToggle.tsx b/apps/web/src/components/TimestampToggle.tsx index d7c4be39c..44de3e644 100644 --- a/apps/web/src/components/TimestampToggle.tsx +++ b/apps/web/src/components/TimestampToggle.tsx @@ -13,9 +13,7 @@ export const TimestampToggle: FC = ({ format, setFormat }) => { return ( - {format === "relative" - ? "Click to show absolute timestamp" - : "Click to show relative timestamp"} + {`Click to show ${format} timestamp`} Date: Wed, 4 Dec 2024 11:10:15 -0400 Subject: [PATCH 4/9] fix: Simplify Tooltip content in TimestampToggle component --- apps/web/src/components/TimestampToggle.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/web/src/components/TimestampToggle.tsx b/apps/web/src/components/TimestampToggle.tsx index 44de3e644..58a214c8f 100644 --- a/apps/web/src/components/TimestampToggle.tsx +++ b/apps/web/src/components/TimestampToggle.tsx @@ -12,9 +12,7 @@ type TimestampProps = { export const TimestampToggle: FC = ({ format, setFormat }) => { return ( - - {`Click to show ${format} timestamp`} - + Click to show {format} timestamp From 6d700f51cb33bc7489e6896808a39fd528f51971 Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Wed, 4 Dec 2024 11:17:01 -0400 Subject: [PATCH 5/9] fix: Refactor TooltipTrigger class and simplify Timestamp display --- apps/web/src/components/TimestampToggle.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/components/TimestampToggle.tsx b/apps/web/src/components/TimestampToggle.tsx index 58a214c8f..c3840705f 100644 --- a/apps/web/src/components/TimestampToggle.tsx +++ b/apps/web/src/components/TimestampToggle.tsx @@ -14,14 +14,14 @@ export const TimestampToggle: FC = ({ format, setFormat }) => { Click to show {format} timestamp setFormat((format) => format === "relative" ? "absolute" : "relative" ) } > -
Timestamp
+ Timestamp ); From fdeb50501dece889c835d7f095be879009c7ff5b Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Sat, 7 Dec 2024 11:01:01 -0400 Subject: [PATCH 6/9] Update .changeset/slimy-fishes-roll.md Co-authored-by: 0xelessar.eth --- .changeset/slimy-fishes-roll.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/slimy-fishes-roll.md b/.changeset/slimy-fishes-roll.md index a2a67024d..e11297e96 100644 --- a/.changeset/slimy-fishes-roll.md +++ b/.changeset/slimy-fishes-roll.md @@ -1,5 +1,5 @@ --- -"@blobscan/web": patch +"@blobscan/web": minor --- Added button to toggle between relative time and date-time format From d186d43079f3992bd394be83aec7b42649e1f346 Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Sat, 7 Dec 2024 11:01:21 -0400 Subject: [PATCH 7/9] Update .changeset/slimy-fishes-roll.md Co-authored-by: 0xelessar.eth --- .changeset/slimy-fishes-roll.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/slimy-fishes-roll.md b/.changeset/slimy-fishes-roll.md index e11297e96..8fdaf155a 100644 --- a/.changeset/slimy-fishes-roll.md +++ b/.changeset/slimy-fishes-roll.md @@ -2,4 +2,4 @@ "@blobscan/web": minor --- -Added button to toggle between relative time and date-time format +Allowed to toggle the timestamp column between relative time and date-time format in blobs, blocks and txs pages. From e9f4ba2f39c641f2302074b3071acfc833e45a9c Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Sat, 7 Dec 2024 11:10:33 -0400 Subject: [PATCH 8/9] fix: Refactor TimestampToggle to use onChange prop instead of setFormat --- apps/web/src/components/TimestampToggle.tsx | 10 ++++------ apps/web/src/pages/blobs.tsx | 2 +- apps/web/src/pages/blocks.tsx | 2 +- apps/web/src/pages/txs.tsx | 2 +- 4 files changed, 7 insertions(+), 9 deletions(-) diff --git a/apps/web/src/components/TimestampToggle.tsx b/apps/web/src/components/TimestampToggle.tsx index c3840705f..868d6e8e8 100644 --- a/apps/web/src/components/TimestampToggle.tsx +++ b/apps/web/src/components/TimestampToggle.tsx @@ -1,4 +1,4 @@ -import type { Dispatch, FC, SetStateAction } from "react"; +import type { FC } from "react"; import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/Tooltip"; @@ -6,19 +6,17 @@ export type TimestampFormat = "relative" | "absolute"; type TimestampProps = { format: TimestampFormat; - setFormat: Dispatch>; + onChange: (timestampFormat: TimestampFormat) => void; }; -export const TimestampToggle: FC = ({ format, setFormat }) => { +export const TimestampToggle: FC = ({ format, onChange }) => { return ( Click to show {format} timestamp - setFormat((format) => - format === "relative" ? "absolute" : "relative" - ) + onChange(format === "relative" ? "absolute" : "relative") } > Timestamp diff --git a/apps/web/src/pages/blobs.tsx b/apps/web/src/pages/blobs.tsx index ae240cf08..84a99be20 100644 --- a/apps/web/src/pages/blobs.tsx +++ b/apps/web/src/pages/blobs.tsx @@ -71,7 +71,7 @@ const Blobs: NextPage = function () { }, { item: ( - + ), className: "2xl:w-[185px] xl:w-[160px] lg:w-[127px] w-[100px]", }, diff --git a/apps/web/src/pages/blocks.tsx b/apps/web/src/pages/blocks.tsx index 610c9d2fa..3fb70b616 100644 --- a/apps/web/src/pages/blocks.tsx +++ b/apps/web/src/pages/blocks.tsx @@ -71,7 +71,7 @@ const Blocks: NextPage = function () { }, { item: ( - + ), className: "2xl:w-[237px] lg:w-[200px] w-[158px]", }, diff --git a/apps/web/src/pages/txs.tsx b/apps/web/src/pages/txs.tsx index 235769928..256d395e3 100644 --- a/apps/web/src/pages/txs.tsx +++ b/apps/web/src/pages/txs.tsx @@ -96,7 +96,7 @@ const Txs: NextPage = function () { }, { item: ( - + ), className: "w-[160px]", }, From fd2acfdf3116f016b73b4e1b1e98fd2621744447 Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Sat, 7 Dec 2024 12:13:44 -0400 Subject: [PATCH 9/9] fix: fix timestamp table cell height --- apps/web/src/components/PaginatedTable/index.tsx | 1 - apps/web/src/pages/blobs.tsx | 11 ++++------- apps/web/src/pages/txs.tsx | 11 ++++------- 3 files changed, 8 insertions(+), 15 deletions(-) diff --git a/apps/web/src/components/PaginatedTable/index.tsx b/apps/web/src/components/PaginatedTable/index.tsx index 957bf41e9..7419783d0 100644 --- a/apps/web/src/components/PaginatedTable/index.tsx +++ b/apps/web/src/components/PaginatedTable/index.tsx @@ -132,7 +132,6 @@ export const PaginatedTable: FC = function ({ >
- {timeFormat === "relative" - ? formatTimestamp(blockTimestamp, true) - : dayjs(blockTimestamp).format("YYYY-MM-DD HH:mm:ss")} - - ), + item: + timeFormat === "relative" + ? formatTimestamp(blockTimestamp, true) + : dayjs(blockTimestamp).format("YYYY-MM-DD HH:mm:ss"), }, { item: ( diff --git a/apps/web/src/pages/txs.tsx b/apps/web/src/pages/txs.tsx index 256d395e3..4e1313202 100644 --- a/apps/web/src/pages/txs.tsx +++ b/apps/web/src/pages/txs.tsx @@ -232,13 +232,10 @@ const Txs: NextPage = function () { ), }, { - item: ( -
- {timeFormat === "relative" - ? formatTimestamp(blockTimestamp, true) - : dayjs(blockTimestamp).format("YYYY-MM-DD HH:mm:ss")} -
- ), + item: + timeFormat === "relative" + ? formatTimestamp(blockTimestamp, true) + : dayjs(blockTimestamp).format("YYYY-MM-DD HH:mm:ss"), }, { item: (