Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toggle timestamp #664

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Toggle timestamp #664

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
46a3648
feat: Adds Option to Toggle Between Relative Time and Date-Time Format
luis-herasme Dec 3, 2024
b9e61eb
chore: added changeset
luis-herasme Dec 3, 2024
8c790b1
Update apps/web/src/components/TimestampToggle.tsx
luis-herasme Dec 4, 2024
b913467
fix: Simplify Tooltip content in TimestampToggle component
luis-herasme Dec 4, 2024
6d700f5
fix: Refactor TooltipTrigger class and simplify Timestamp display
luis-herasme Dec 4, 2024
fdeb505
Update .changeset/slimy-fishes-roll.md
luis-herasme Dec 7, 2024
d186d43
Update .changeset/slimy-fishes-roll.md
luis-herasme Dec 7, 2024
e9f4ba2
fix: Refactor TimestampToggle to use onChange prop instead of setFormat
luis-herasme Dec 7, 2024
fd2acfd
fix: fix timestamp table cell height
luis-herasme Dec 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/slimy-fishes-roll.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@blobscan/web": patch
luis-herasme marked this conversation as resolved.
Show resolved Hide resolved
---

Added button to toggle between relative time and date-time format
luis-herasme marked this conversation as resolved.
Show resolved Hide resolved
28 changes: 28 additions & 0 deletions apps/web/src/components/TimestampToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
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<SetStateAction<TimestampFormat>>;
luis-herasme marked this conversation as resolved.
Show resolved Hide resolved
};

export const TimestampToggle: FC<TimestampProps> = ({ format, setFormat }) => {
return (
<Tooltip>
<TooltipContent>Click to show {format} timestamp</TooltipContent>
<TooltipTrigger
className="text-link-light dark:text-link-dark"
onClick={() =>
setFormat((format) =>
format === "relative" ? "absolute" : "relative"
)
}
>
Timestamp
</TooltipTrigger>
</Tooltip>
);
};
86 changes: 48 additions & 38 deletions apps/web/src/pages/blobs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 {
Expand All @@ -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();

Expand All @@ -79,6 +48,45 @@ const Blobs: NextPage = function () {
const { blobs } = blobsData || {};
const { totalBlobs } = countData || {};

const [timeFormat, setTimeFormat] = useState<TimestampFormat>("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: (
<TimestampToggle format={timeFormat} setFormat={setTimeFormat} />
),
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(
Expand Down Expand Up @@ -138,7 +146,9 @@ const Blobs: NextPage = function () {
{
item: (
<div className="whitespace-break-spaces">
{formatTimestamp(blockTimestamp, true)}
{timeFormat === "relative"
? formatTimestamp(blockTimestamp, true)
: dayjs(blockTimestamp).format("YYYY-MM-DD HH:mm:ss")}
</div>
),
},
Expand Down Expand Up @@ -167,7 +177,7 @@ const Blobs: NextPage = function () {
})
)
: undefined;
}, [blobs]);
}, [blobs, timeFormat]);

if (error) {
return (
Expand Down
93 changes: 51 additions & 42 deletions apps/web/src/pages/blocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useMemo } from "react";
import { useMemo, useState } from "react";
import type { NextPage } from "next";

import { Copyable } from "~/components/Copyable";
Expand All @@ -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";
Expand All @@ -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 {
Expand Down Expand Up @@ -93,6 +56,49 @@ const Blocks: NextPage = function () {
const { totalBlocks } = countData || {};
const error = blocksError || countError;

const [timeFormat, setTimeFormat] = useState<TimestampFormat>("relative");

const BLOCKS_TABLE_HEADERS = [
{
cells: [
{
item: "",
className: "w-[100px]",
},
{
item: "Block number",
className: "2xl:w-[187px] lg:w-[158px] w-[118px]",
},
{
item: (
<TimestampToggle format={timeFormat} setFormat={setTimeFormat} />
),
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) => {
Expand Down Expand Up @@ -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: (
Expand Down Expand Up @@ -250,7 +259,7 @@ const Blocks: NextPage = function () {
};
})
: undefined;
}, [blocks]);
}, [blocks, timeFormat]);

if (error) {
return (
Expand Down
Loading
Loading