diff --git a/.changeset/tricky-yaks-bake.md b/.changeset/tricky-yaks-bake.md new file mode 100644 index 000000000..0401030ad --- /dev/null +++ b/.changeset/tricky-yaks-bake.md @@ -0,0 +1,5 @@ +--- +"@blobscan/web": minor +--- + +Added copyable behavior to hashes and addresses in blob, block and transaction tables. diff --git a/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx b/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx index 110c0938b..b9479fba7 100644 --- a/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx +++ b/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx @@ -3,6 +3,7 @@ import type { FC } from "react"; import { ArrowRightIcon, ChevronDownIcon } from "@heroicons/react/24/outline"; import { Collapsable } from "~/components/Collapsable"; +import { Copyable } from "~/components/Copyable"; import { EtherUnitDisplay } from "~/components/Displays/EtherUnitDisplay"; import { IconButton } from "~/components/IconButton"; import { RollupIcon } from "~/components/RollupIcon"; @@ -219,9 +220,10 @@ const BlobTransactionCard: FC = function ({ {index} - - {versionedHash} - + {formatBytes(size)} diff --git a/apps/web/src/components/CopyToClipboard.tsx b/apps/web/src/components/CopyToClipboard.tsx index 4462f1d84..84169937f 100644 --- a/apps/web/src/components/CopyToClipboard.tsx +++ b/apps/web/src/components/CopyToClipboard.tsx @@ -1,3 +1,4 @@ +import type { FC } from "react"; import { useState } from "react"; import { CheckIcon } from "@heroicons/react/24/outline"; @@ -5,14 +6,14 @@ import Copy from "~/icons/copy.svg"; import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip"; type CopyToClipboardProps = { - label?: string; + tooltipText?: string; value: string; }; -export function CopyToClipboard({ - label = "Copy to clipboard", +export const CopyToClipboard: FC = ({ + tooltipText, value, -}: CopyToClipboardProps) { +}) => { const [isCopied, setIsCopied] = useState(false); return ( @@ -23,7 +24,9 @@ export function CopyToClipboard({ } }} > - {isCopied ? "Copied!" : label} + {(tooltipText || isCopied) && ( + {isCopied ? "Copied!" : tooltipText} + )} { @@ -36,20 +39,11 @@ export function CopyToClipboard({ }} > {isCopied ? ( - + ) : ( - + )} ); -} - -export function Copyable({ label, value }: CopyToClipboardProps) { - return ( -
-
{value}
- -
- ); -} +}; diff --git a/apps/web/src/components/Copyable.tsx b/apps/web/src/components/Copyable.tsx new file mode 100644 index 000000000..40855803d --- /dev/null +++ b/apps/web/src/components/Copyable.tsx @@ -0,0 +1,30 @@ +import type { FC } from "react"; +import React from "react"; + +import { CopyToClipboard } from "./CopyToClipboard"; +import { Link } from "./Link"; + +export interface CopyableProps { + href?: string; + value: string; + tooltipText?: string; + children?: React.ReactNode; +} + +export const Copyable: FC = ({ + href, + value, + tooltipText, + children, +}) => { + return ( +
+ {href ? ( + {children || value} + ) : ( +
{children || value}
+ )} + +
+ ); +}; diff --git a/apps/web/src/pages/blob/[hash].tsx b/apps/web/src/pages/blob/[hash].tsx index f708de735..575593d0d 100644 --- a/apps/web/src/pages/blob/[hash].tsx +++ b/apps/web/src/pages/blob/[hash].tsx @@ -11,7 +11,8 @@ import { StorageBadge } from "~/components/Badges/StorageBadge"; import { BlobViewer, DEFAULT_BLOB_VIEW_MODES } from "~/components/BlobViewer"; import type { BlobViewMode } from "~/components/BlobViewer"; import { Card } from "~/components/Cards/Card"; -import { Copyable, CopyToClipboard } from "~/components/CopyToClipboard"; +import { CopyToClipboard } from "~/components/CopyToClipboard"; +import { Copyable } from "~/components/Copyable"; import { Dropdown } from "~/components/Dropdown"; import type { DropdownProps } from "~/components/Dropdown"; import type { DetailsLayoutProps } from "~/components/Layouts/DetailsLayout"; @@ -110,11 +111,13 @@ const Blob: NextPage = function () { detailsFields.push( { name: "Commitment", - value: , + value: ( + + ), }, { name: "Proof", - value: , + value: , } ); @@ -148,7 +151,7 @@ const Blob: NextPage = function () { title={txHash} > {{txHash}} - +
@@ -176,7 +179,10 @@ const Blob: NextPage = function () {
Blob Data
{blob && (
- +
View as: diff --git a/apps/web/src/pages/blobs.tsx b/apps/web/src/pages/blobs.tsx index 053b85fe6..b2c57ed66 100644 --- a/apps/web/src/pages/blobs.tsx +++ b/apps/web/src/pages/blobs.tsx @@ -2,6 +2,7 @@ import { useMemo } from "react"; import type { NextPage } from "next"; import NextError from "next/error"; +import { Copyable } from "~/components/Copyable"; import { Filters } from "~/components/Filters"; import { Header } from "~/components/Header"; import { Link } from "~/components/Link"; @@ -39,6 +40,10 @@ const BLOBS_TABLE_HEADERS = [ item: "Timestamp", className: "2xl:w-[185px] xl:w-[160px] lg:w-[127px] w-[100px]", }, + { + item: "Category", + className: "w-[60px]", + }, { item: "Size", className: "2xl:w-[178px] xl:w-[145px] lg:w-[101px] w-[66px]", @@ -87,16 +92,24 @@ const Blobs: NextPage = function () { cells: [ { item: ( - + {shortenAddress(versionedHash, 8)} - + ), }, { item: ( - + {shortenAddress(txHash, 8)} - + ), }, { @@ -115,6 +128,9 @@ const Blobs: NextPage = function () {
), }, + { + item: , + }, { item: (
diff --git a/apps/web/src/pages/block/[id].tsx b/apps/web/src/pages/block/[id].tsx index 5507d0935..c34101fdd 100644 --- a/apps/web/src/pages/block/[id].tsx +++ b/apps/web/src/pages/block/[id].tsx @@ -5,7 +5,7 @@ import type { NextRouter } from "next/router"; import { Card } from "~/components/Cards/Card"; import { BlobTransactionCard } from "~/components/Cards/SurfaceCards/BlobTransactionCard"; -import { Copyable } from "~/components/CopyToClipboard"; +import { Copyable } from "~/components/Copyable"; import { BlobGasUsageDisplay } from "~/components/Displays/BlobGasUsageDisplay"; import { EtherUnitDisplay } from "~/components/Displays/EtherUnitDisplay"; import { DetailsLayout } from "~/components/Layouts/DetailsLayout"; @@ -113,7 +113,7 @@ const Block: NextPage = function () { { name: "Status", value: }, { name: "Hash", - value: , + value: , }, { name: "Timestamp", diff --git a/apps/web/src/pages/blocks.tsx b/apps/web/src/pages/blocks.tsx index c9afe7dc0..ae2156968 100644 --- a/apps/web/src/pages/blocks.tsx +++ b/apps/web/src/pages/blocks.tsx @@ -1,6 +1,7 @@ import { useMemo } from "react"; import type { NextPage } from "next"; +import { Copyable } from "~/components/Copyable"; import { BlobGasUsageDisplay } from "~/components/Displays/BlobGasUsageDisplay"; import { EtherUnitDisplay } from "~/components/Displays/EtherUnitDisplay"; import { Filters } from "~/components/Filters"; @@ -134,16 +135,20 @@ const Blocks: NextPage = function () { cells: [ { item: ( - - {transactionHash} - + ), }, { item: ( - - {blobVersionedHash} - + ), }, ], diff --git a/apps/web/src/pages/tx/[hash].tsx b/apps/web/src/pages/tx/[hash].tsx index fa7866831..11d462318 100644 --- a/apps/web/src/pages/tx/[hash].tsx +++ b/apps/web/src/pages/tx/[hash].tsx @@ -6,7 +6,8 @@ import { parseDecodedData } from "~/utils/decoded-transaction"; import { RollupBadge } from "~/components/Badges/RollupBadge"; import { Card } from "~/components/Cards/Card"; import { BlobCard } from "~/components/Cards/SurfaceCards/BlobCard"; -import { Copyable, CopyToClipboard } from "~/components/CopyToClipboard"; +import { CopyToClipboard } from "~/components/CopyToClipboard"; +import { Copyable } from "~/components/Copyable"; import { StandardEtherUnitDisplay } from "~/components/Displays/StandardEtherUnitDisplay"; import { InfoGrid } from "~/components/InfoGrid"; import { DetailsLayout } from "~/components/Layouts/DetailsLayout"; @@ -102,7 +103,7 @@ const Tx: NextPage = () => { detailsFields = [ { name: "Hash", - value: , + value: , }, { name: "Status", value: }, { @@ -124,19 +125,21 @@ const Tx: NextPage = () => { { name: "From", value: ( -
- {from} - -
+ ), }, { name: "To", value: ( -
- {to} - -
+ ), }, ]; @@ -288,7 +291,7 @@ const Tx: NextPage = () => {
), @@ -308,7 +311,7 @@ const Tx: NextPage = () => {
), diff --git a/apps/web/src/pages/txs.tsx b/apps/web/src/pages/txs.tsx index 170d72232..baf4a323b 100644 --- a/apps/web/src/pages/txs.tsx +++ b/apps/web/src/pages/txs.tsx @@ -1,6 +1,7 @@ import { useMemo } from "react"; import type { NextPage } from "next"; +import { Copyable } from "~/components/Copyable"; import { EtherUnitDisplay } from "~/components/Displays/EtherUnitDisplay"; import { Filters } from "~/components/Filters"; import { Header } from "~/components/Header"; @@ -166,9 +167,11 @@ const Txs: NextPage = function () { cells: [ { item: ( - - {b.versionedHash} - + ), }, { @@ -198,9 +201,13 @@ const Txs: NextPage = function () { cells: [ { item: ( - + {shortenAddress(hash, 6)} - + ), }, { @@ -217,16 +224,24 @@ const Txs: NextPage = function () { }, { item: ( - + {shortenAddress(from, 6)} - + ), }, { item: ( - + {shortenAddress(to, 6)} - + ), }, {