feat(web): add finalized status field to block (#531)

* feat(web): add finalised status field to block * feat: Add BlockStatus component to Blob and Tx pages * chore: update changeset * chore: update how block-status is added to tx * feat: Update Badge components to use class-variance-authority * refactor: Update StatusBadge component styles * feat: Update StatusBadge component styles * refactor: Update StatusBadge component styles * refactor: Update StatusBadge component styles * fix: linter * update pnpm-lock.yaml --------- Co-authored-by: Pablo Castellano <[email protected]>
Blobscan · Sep 4, 2024 · 308db72 · 308db72
1 parent 7cd9a73
commit 308db72
Show file tree

Hide file tree

Showing 11 changed files with 215 additions and 91 deletions.
diff --git a/.changeset/sharp-rice-thank.md b/.changeset/sharp-rice-thank.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Added finalized status field to block, tx and blob views
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -15,16 +15,16 @@
     "with-env": "dotenv -e ../../.env  -v BLOB_PROPAGATOR_ENABLED=false --"
   },
   "dependencies": {
-    "@blobscan/db": "workspace:^0.9.0",
     "@blobscan/api": "workspace:^0.12.0",
     "@blobscan/blob-decoder": "workspace:^0.1.1",
     "@blobscan/dates": "workspace:*",
     "@blobscan/dayjs": "workspace:^0.0.2",
+    "@blobscan/db": "workspace:^0.9.0",
     "@blobscan/env": "workspace:^0.0.1",
     "@blobscan/eth-units": "workspace:^0.0.1",
     "@blobscan/open-telemetry": "workspace:^0.0.8",
-    "@floating-ui/react": "^0.26.23",
     "@blobscan/rollups": "workspace:^0.0.1",
+    "@floating-ui/react": "^0.26.23",
     "@fontsource/inter": "^4.5.15",
     "@fontsource/public-sans": "^4.5.12",
     "@headlessui/react": "^2.1.0",

diff --git a/apps/web/src/components/Badges/Badge.tsx b/apps/web/src/components/Badges/Badge.tsx
@@ -1,58 +1,46 @@
-import type { ReactNode } from "react";
 import React from "react";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
 
-import type { Size } from "~/types";
+const badgeVariants = cva(
+  `
+    w-fit
+    flex
+    items-center
+    gap-1.5
+    rounded-full
+    px-2.5
+    py-0.5
+    transition-colors
+  `,
+  {
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-md",
+        lg: "text-lg",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
 
-type BadgeProps = {
-  className?: string;
-  label?: ReactNode;
-  icon?: ReactNode;
-  size?: Size;
-};
-
-const BADGE_STYLES: Record<
-  Size,
-  { labelStyles: string; containerStyles?: string }
-> = {
-  xs: {
-    labelStyles: "text-xs",
-    containerStyles: "py-0.5",
-  },
-  sm: {
-    labelStyles: "text-sm",
-  },
-  md: {
-    labelStyles: "text-md",
-  },
-  lg: {
-    labelStyles: "text-lg",
-  },
-  xl: {
-    labelStyles: "text-lg",
-  },
-  "2xl": {
-    labelStyles: "text-lg",
-  },
-};
+export type BadgeProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof badgeVariants>;
 
 export const Badge: React.FC<BadgeProps> = ({
-  className = "",
-  label,
-  icon,
-  size = "md",
+  className,
+  size,
+  children,
+  ...props
 }) => {
-  const { labelStyles, containerStyles } = BADGE_STYLES[size];
-
   return (
-    <div
-      className={`flex w-fit items-center gap-1.5 rounded-full px-2.5 transition-colors ${
-        containerStyles ?? "py-0.5"
-      } ${className}`}
-    >
-      {icon && (
-        <div className="text-content-light dark:text-content-dark">{icon}</div>
-      )}
-      <div className={labelStyles}>{label}</div>
+    <div className={twMerge(badgeVariants({ size }), className)} {...props}>
+      {children}
     </div>
   );
 };
diff --git a/apps/web/src/components/Badges/RollupBadge.tsx b/apps/web/src/components/Badges/RollupBadge.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 
-import type { Rollup, Size } from "~/types";
+import type { Rollup } from "~/types";
 import { capitalize } from "~/utils";
 import { RollupIcon } from "../RollupIcon";
+import type { BadgeProps } from "./Badge";
 import { Badge } from "./Badge";
 
 const ROLLUP_CONFIG: Record<Rollup, { style: string; label?: string }> = {
@@ -67,20 +68,20 @@ const ROLLUP_CONFIG: Record<Rollup, { style: string; label?: string }> = {
   },
 };
 
-type RollupBadgeProps = {
+type RollupBadgeProps = BadgeProps & {
   rollup: Rollup;
-  size?: Size;
 };
 
-export const RollupBadge: React.FC<RollupBadgeProps> = ({ rollup, size }) => {
+export const RollupBadge: React.FC<RollupBadgeProps> = ({
+  rollup,
+  ...props
+}) => {
   const { style, label } = ROLLUP_CONFIG[rollup];
 
   return (
-    <Badge
-      className={style}
-      icon={<RollupIcon rollup={rollup} />}
-      label={label ?? capitalize(rollup)}
-      size={size}
-    />
+    <Badge className={style} {...props}>
+      <RollupIcon rollup={rollup} />
+      {label ?? capitalize(rollup)}
+    </Badge>
   );
 };
diff --git a/apps/web/src/components/Badges/StatusBadge.tsx b/apps/web/src/components/Badges/StatusBadge.tsx
@@ -0,0 +1,65 @@
+import type { FC } from "react";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+
+import { Badge } from "./Badge";
+import type { BadgeProps } from "./Badge";
+
+const statusBadgeVariants = cva(
+  `
+    rounded-lg
+    font-medium
+    text-xs
+    h-6
+    p-1.5
+    bg-opacity-10
+    dark:bg-opacity-10
+
+    border
+    border-opacity-30
+    dark:border-opacity-30
+  `,
+  {
+    variants: {
+      variant: {
+        green: `
+          bg-green-600 
+          text-green-600 
+          border-green-600 
+  
+          dark:bg-green-500 
+          dark:text-green-500 
+          dark:border-green-500 
+          `,
+        gray: `
+          bg-contentTertiary-light
+          text-warmGray-500
+          border-contentTertiary-light
+          
+          dark:bg-contentTertiary-dark
+          dark:text-contentTertiary-dark
+          dark:border-contentTertiary-dark
+          `,
+      },
+    },
+    defaultVariants: {
+      variant: "green",
+    },
+  }
+);
+
+type StatusBadgeProps = BadgeProps & VariantProps<typeof statusBadgeVariants>;
+
+export const StatusBadge: FC<StatusBadgeProps> = ({
+  className,
+  variant,
+  ...props
+}) => {
+  return (
+    <Badge
+      className={twMerge(statusBadgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+};
diff --git a/apps/web/src/components/Badges/StorageBadge.tsx b/apps/web/src/components/Badges/StorageBadge.tsx
@@ -2,9 +2,10 @@ import type { FC, HTMLAttributes, ReactNode } from "react";
 import React from "react";
 import NextLink from "next/link";
 
-import type { BlobStorage, Size } from "~/types";
+import type { BlobStorage } from "~/types";
 import { capitalize } from "~/utils";
 import { StorageIcon } from "../StorageIcon";
+import type { BadgeProps } from "./Badge";
 import { Badge } from "./Badge";
 
 type StorageConfig = {
@@ -37,23 +38,24 @@ const STORAGE_CONFIGS: Record<BlobStorage, StorageConfig> = {
   },
 };
 
-type StorageBadgeProps = {
-  size?: Size;
+type StorageBadgeProps = BadgeProps & {
   storage: BlobStorage;
   url: string;
 };
 
-export const StorageBadge: FC<StorageBadgeProps> = ({ size, storage, url }) => {
+export const StorageBadge: FC<StorageBadgeProps> = ({
+  storage,
+  url,
+  ...props
+}) => {
   const { icon, name, style } = STORAGE_CONFIGS[storage];
 
   return (
     <NextLink href={url} target={url !== "#" ? "_blank" : "_self"}>
-      <Badge
-        className={style}
-        icon={icon}
-        label={name ?? capitalize(storage)}
-        size={size}
-      />
+      <Badge className={style} {...props}>
+        {icon}
+        {name ?? capitalize(storage)}
+      </Badge>
     </NextLink>
   );
 };
diff --git a/apps/web/src/components/Status.tsx b/apps/web/src/components/Status.tsx
@@ -0,0 +1,28 @@
+import { CheckCircleIcon, ClockIcon } from "@heroicons/react/24/solid";
+
+import { api } from "~/api-client";
+import { StatusBadge } from "./Badges/StatusBadge";
+
+export function BlockStatus({ blockNumber }: { blockNumber: number }) {
+  const { data: syncState } = api.syncState.getState.useQuery();
+
+  if (!syncState || typeof syncState.lastFinalizedBlock !== "number") {
+    return;
+  }
+
+  if (blockNumber <= syncState.lastFinalizedBlock) {
+    return (
+      <StatusBadge variant="green">
+        <CheckCircleIcon className="h-4 w-4" />
+        Finalized
+      </StatusBadge>
+    );
+  }
+
+  return (
+    <StatusBadge variant="gray">
+      <ClockIcon className="h-4 w-4" />
+      Unfinalized
+    </StatusBadge>
+  );
+}
diff --git a/apps/web/src/pages/blob/[hash].tsx b/apps/web/src/pages/blob/[hash].tsx
@@ -17,6 +17,7 @@ import type { DropdownProps } from "~/components/Dropdown";
 import type { DetailsLayoutProps } from "~/components/Layouts/DetailsLayout";
 import { DetailsLayout } from "~/components/Layouts/DetailsLayout";
 import { Link } from "~/components/Link";
+import { BlockStatus } from "~/components/Status";
 import { api } from "~/api-client";
 import type { Rollup } from "~/types";
 import {
@@ -91,11 +92,22 @@ const Blob: NextPage = function () {
         )),
       });
     }
+
+    detailsFields.push({
+      name: "Versioned Hash",
+      value: <Copyable value={blob.versionedHash} />,
+    });
+
+    if (blob.transactions[0]) {
+      detailsFields.push({
+        name: "Status",
+        value: blob.transactions[0] && (
+          <BlockStatus blockNumber={blob.transactions[0].blockNumber} />
+        ),
+      });
+    }
+
     detailsFields.push(
-      {
-        name: "Versioned Hash",
-        value: <Copyable value={blob.versionedHash} />,
-      },
       {
         name: "Commitment",
         value: <Copyable value={blob.commitment} label="Copy commitment" />,

diff --git a/apps/web/src/pages/block/[id].tsx b/apps/web/src/pages/block/[id].tsx
@@ -12,6 +12,7 @@ import { DetailsLayout } from "~/components/Layouts/DetailsLayout";
 import type { DetailsLayoutProps } from "~/components/Layouts/DetailsLayout";
 import { Link } from "~/components/Link";
 import { NavArrows } from "~/components/NavArrows";
+import { BlockStatus } from "~/components/Status";
 import { getFirstBlobNumber } from "~/components/content";
 import { api } from "~/api-client";
 import NextError from "~/pages/_error";
@@ -105,6 +106,7 @@ const Block: NextPage = function () {
           </div>
         ),
       },
+      { name: "Status", value: <BlockStatus blockNumber={blockData.number} /> },
       {
         name: "Hash",
         value: <Copyable value={blockData.hash} label="Copy Hash" />,

diff --git a/apps/web/src/pages/tx/[hash].tsx b/apps/web/src/pages/tx/[hash].tsx
@@ -10,6 +10,7 @@ import { StandardEtherUnitDisplay } from "~/components/Displays/StandardEtherUni
 import { DetailsLayout } from "~/components/Layouts/DetailsLayout";
 import type { DetailsLayoutProps } from "~/components/Layouts/DetailsLayout";
 import { Link } from "~/components/Link";
+import { BlockStatus } from "~/components/Status";
 import { api } from "~/api-client";
 import NextError from "~/pages/_error";
 import type { TransactionWithExpandedBlockAndBlob } from "~/types";
@@ -83,6 +84,7 @@ const Tx: NextPage = () => {
         name: "Hash",
         value: <Copyable value={hash} label="Copy Hash" />,
       },
+      { name: "Status", value: <BlockStatus blockNumber={blockNumber} /> },
       {
         name: "Block",
         value: <Link href={buildBlockRoute(blockNumber)}>{blockNumber}</Link>,