feat: Hide swarm expiry date when it is not configured (#414)

* feat: Hide swarm expiry date when it is not configured * style(web): resolve ts issue * chore(web): add missing changeset --------- Co-authored-by: PJColombo <[email protected]>
Blobscan · Jun 20, 2024 · dcbd95f · dcbd95f
1 parent 49455b8
commit dcbd95f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/.changeset/gold-houses-greet.md b/.changeset/gold-houses-greet.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Hidden swarm data expiration metric when swarm is not set
diff --git a/apps/web/src/components/ExplorerDetails.tsx b/apps/web/src/components/ExplorerDetails.tsx
@@ -9,7 +9,7 @@ import { env } from "~/env.mjs";
 import { capitalize, formatNumber, formatTtl } from "~/utils";
 
 type ExplorerDetailsItemProps = {
-  name: React.ReactNode;
+  name: string;
   value: React.ReactNode;
   icon?: React.ReactNode;
 };
@@ -35,24 +35,23 @@ function ExplorerDetailsItem({
 export function ExplorerDetails() {
   const { data: syncStateData } = api.syncState.getState.useQuery();
   const { data: blobStoragesState } = api.blobStoragesState.getState.useQuery();
-  const explorerDetailsItems = [
+  const explorerDetailsItems: ExplorerDetailsItemProps[] = [
     { name: "Network", value: capitalize(env.NEXT_PUBLIC_NETWORK_NAME) },
     {
       name: "Last synced slot",
       value: syncStateData
         ? formatNumber(syncStateData.lastUpperSyncedSlot ?? 0)
         : undefined,
     },
-    {
+  ];
+
+  if (blobStoragesState && blobStoragesState.swarmDataTTL) {
+    explorerDetailsItems.push({
       name: "Swarm blob data expiry",
-      value: blobStoragesState
-        ? blobStoragesState.swarmDataTTL
-          ? formatTtl(blobStoragesState.swarmDataTTL)
-          : null
-        : undefined,
+      value: formatTtl(blobStoragesState.swarmDataTTL),
       icon: <ClockIcon className="h-4 w-4" />,
-    },
-  ];
+    });
+  }
 
   return (
     <div className="sm:fle flex w-full flex-wrap items-center justify-center gap-2 align-middle text-xs text-contentSecondary-light dark:text-contentSecondary-dark sm:h-4 sm:justify-start">