ui: detail pages mobile friendly (#143)

aztlan-labs · Oct 17, 2024 · a40adf6 · a40adf6
1 parent 9223ef6
commit a40adf6
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 64 deletions.
diff --git a/services/explorer-ui/src/components/blocks/block-table-columns.tsx b/services/explorer-ui/src/components/blocks/block-table-columns.tsx
@@ -4,6 +4,7 @@ import { DataTableColumnHeader } from "~/components/data-table";
 import { formatTimeSince } from "~/lib/utils";
 import { routes } from "~/routes/__root";
 import type { BlockTableSchema } from "./blocks-schema";
+import { truncateHashString } from "~/lib/create-hash-string";
 
 const text = {
   height: "BLOCK HEIGHT",
@@ -49,12 +50,9 @@ export const BlockTableColumns: ColumnDef<BlockTableSchema>[] = [
       const blockHash = row.getValue("blockHash");
       if (typeof blockHash !== "string") return null;
       const r = `${routes.blocks.route}/${blockHash}`;
-      const truncatedBlockHash = `${blockHash.slice(0, 6)}...${blockHash.slice(
-        -4
-      )}`;
       return (
         <div className="text-purple-light font-mono font-bold">
-          <Link to={r}>{truncatedBlockHash}</Link>
+          <Link to={r}>{truncateHashString(blockHash)}</Link>
         </div>
       );
     },
@@ -103,7 +101,7 @@ export const BlockTableColumns: ColumnDef<BlockTableSchema>[] = [
     cell: ({ row }) => {
       const formattedTime = formatTimeSince(
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-        (row.getValue("timestamp") as unknown as number)
+        row.getValue("timestamp") as unknown as number,
       );
       return <div className="text-purple-dark">{formattedTime}</div>;
     },

diff --git a/services/explorer-ui/src/components/contracts/classes/columns.tsx b/services/explorer-ui/src/components/contracts/classes/columns.tsx
@@ -3,6 +3,7 @@ import { Link } from "@tanstack/react-router";
 import { routes } from "~/routes/__root";
 import { DataTableColumnHeader } from "~/components/data-table";
 import { type ContractClass } from "./schema";
+import { truncateHashString } from "~/lib/create-hash-string";
 
 const text = {
   blockHash: "BLOCK HASH",
@@ -26,13 +27,9 @@ export const contractsTableColumns: ColumnDef<ContractClass>[] = [
       const contractClassId = row.getValue("contractClassId");
       if (typeof contractClassId !== "string") return null;
       const r = `${routes.contracts.route}/${routes.contracts.children.classes.route}/${contractClassId}`;
-      const truncatedContractClassId = `${contractClassId.slice(
-        0,
-        6
-      )}...${contractClassId.slice(-4)}`;
       return (
         <div className="text-purple-light font-mono font-bold">
-          <Link to={r}>{truncatedContractClassId}</Link>
+          <Link to={r}>{truncateHashString(contractClassId)}</Link>
         </div>
       );
     },

diff --git a/services/explorer-ui/src/components/header.tsx b/services/explorer-ui/src/components/header.tsx
@@ -1,4 +1,4 @@
-import { Link, useLocation, useNavigate } from "@tanstack/react-router";
+import { Link, useNavigate } from "@tanstack/react-router";
 import { Input } from "~/components/ui/input";
 import { routes } from "~/routes/__root.tsx";
 import {
@@ -12,22 +12,13 @@ import { ChicmozHomeLink } from "./ui/chicmoz-home-link";
 
 export const Header = () => {
   const navigate = useNavigate();
-  const location = useLocation();
 
   const getSelectedItem = (value: string) => {
     void navigate({
       to: value,
     });
   };
 
-  const getPlaceholder = () => {
-    const array = Object.values(routes);
-    const route = location.pathname;
-    return array.find((item) => {
-      if (item.route === route) return item.title;
-    });
-  };
-
   return (
     <div className="mx-auto px-4 mt-10 max-w-[1440px] md:px-[70px]">
       <div className="flex flex-row w-full items-center bg-purple-light rounded-[40px] pl-7 py-4 pr-4 md:pl-10">
@@ -38,7 +29,7 @@ export const Header = () => {
         <div className="md:hidden">
           <Select onValueChange={getSelectedItem}>
             <SelectTrigger className="h-8 w-40 text-gray-50">
-              <SelectValue placeholder={getPlaceholder()?.title} />
+              <SelectValue placeholder="Menu" />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value={routes.home.route}>

diff --git a/services/explorer-ui/src/components/info-display/key-value-row.tsx b/services/explorer-ui/src/components/info-display/key-value-row.tsx
@@ -1,5 +1,6 @@
 import { Link } from "@tanstack/react-router";
 import { FC } from "react";
+import { truncateHashString } from "~/lib/create-hash-string";
 
 interface KeyValueRowProps {
   label: string;
@@ -13,23 +14,31 @@ export const KeyValueRow: FC<KeyValueRowProps> = ({
   value,
   isLast,
   link,
-}) => (
-  <div
-    className={`flex items-center py-3 ${
-      !isLast ? "border-b border-gray-200" : ""
-    }`}
-  >
-    <span className="text-gray-600 w-1/5">{label}</span>
-    {link ? (
-      <Link
-        to={link}
-        className="text-sm flex-grow text-primary-600 text-primary cursor-pointer"
-      >
-        {value}
-        <span className="ml-1">🔗</span>
-      </Link>
-    ) : (
-      <span className={`text-sm flex-grow `}>{value}</span>
-    )}
-  </div>
-);
+}) => {
+  const isHashSring = value.includes("0x");
+  value = isHashSring ? truncateHashString(value) : value;
+  return (
+    <div
+      className={`flex flex-col justify-start gap-2 py-3 ${
+        !isLast ? "border-b border-gray-200" : ""
+      } md:flex-row md:items-center`}
+    >
+      <span className="text-gray-600 w-full">{label}</span>
+      {link ? (
+        <Link
+          to={link}
+          className="text-sm flex-grow text-primary-600 text-primary cursor-pointer"
+        >
+          {value}
+          <span className="ml-1">🔗</span>
+        </Link>
+      ) : (
+        <span
+          className={`text-sm flex-grow overflow-hidden md:w-1/3  md:text-end`}
+        >
+          {value}
+        </span>
+      )}
+    </div>
+  );
+};
diff --git a/services/explorer-ui/src/lib/create-hash-string.ts b/services/explorer-ui/src/lib/create-hash-string.ts
@@ -0,0 +1,5 @@
+export const truncateHashString = (value: string) => {
+  const startHash = value.substring(0, 6);
+  const endHash = value.substring(value.length - 4, value.length);
+  return `${startHash}...${endHash}`;
+};
diff --git a/services/explorer-ui/src/pages/block-details/index.tsx b/services/explorer-ui/src/pages/block-details/index.tsx
@@ -6,6 +6,7 @@ import { Button } from "~/components/ui";
 import { useGetBlockByHeight } from "~/hooks";
 import { API_URL, aztecExplorer } from "~/service/constants";
 import { getBlockDetails, getTxEffects } from "./util";
+import { truncateHashString } from "~/lib/create-hash-string";
 
 const API_ENDPOINT_URL = `${API_URL}/${aztecExplorer.getL2BlockByHash}`;
 
@@ -19,26 +20,21 @@ export const BlockDetails: FC = () => {
     error,
   } = useGetBlockByHeight(blockNumber);
 
-  let bn;
-  if (blockNumber === "latest") bn = "latest";
-  else bn = blockNumber;
-
   if (isLoading) return <p>Loading...</p>;
   if (error) return <p className="text-red-500">{error.message}</p>;
   if (!latestBlock) return <p>No data</p>;
 
-  const apiEndpointUrl = `${API_ENDPOINT_URL}${bn}`;
+  const apiEndpointUrl = `${API_ENDPOINT_URL}${blockNumber}`;
 
   return (
-    <div className="mx-auto px-[70px] max-w-[1440px]">
-      {bn ? (
+    <div className="mx-auto px-7 max-w-[1440px] md:px-[70px]">
+      <div>
         <div>
-          <div>
-            <h2>Block Details</h2>
-            <p>{bn}</p>
-            <a href={apiEndpointUrl} target="_blank" rel="noreferrer">
-              (API Endpoint)
-            </a>
+          <h2>Block Details</h2>
+          <p>{truncateHashString(latestBlock.hash)}</p>
+          <a href={apiEndpointUrl} target="_blank" rel="noreferrer">
+            (API Endpoint)
+          </a>
           </div>
           <div className="flex flex-col gap-4 mt-8">
             <div className="bg-white rounded-lg shadow-md p-4">
@@ -54,13 +50,19 @@ export const BlockDetails: FC = () => {
             </div>
             <TxEffectsTable txEffects={getTxEffects(latestBlock)} />
           </div>
+        <div className="flex flex-col gap-4 mt-8">
+          <div className="bg-white rounded-lg shadow-md p-4">
+            <KeyValueDisplay data={getBlockDetails(latestBlock)} />
+          </div>
+          <div className="flex flex-row gap-4 w-10 mb-4">
+            <Button variant={"default"}>
+              <p>View TxEffects</p>
+            </Button>
+            <Button variant={"default"}>View TxEffects</Button>
+          </div>
+          <TxEffectsTable txEffects={getTxEffects(latestBlock)} />
         </div>
-      ) : (
-        <div>
-          <h2>Invalid Block Number</h2>
-          <p>Block {blockNumber} not found</p>
-        </div>
-      )}
+      </div>
     </div>
   );
 };
diff --git a/services/explorer-ui/src/pages/tx-effect-details/index.tsx b/services/explorer-ui/src/pages/tx-effect-details/index.tsx
@@ -1,11 +1,19 @@
 import { useParams } from "@tanstack/react-router";
 import { useState, type FC } from "react";
 import { KeyValueDisplay } from "~/components/info-display/key-value-display";
-import { Button } from "~/components/ui";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui";
 import { useGetTxEffectByHash } from "~/hooks/";
 import { API_URL, aztecExplorer } from "~/service/constants";
 import { txEffectTabs, type TabId } from "./constants";
 import { getTxEffectData } from "./utils";
+import { truncateHashString } from "~/lib/create-hash-string";
 
 const API_ENDPOINT_URL = `${API_URL}/${aztecExplorer.getL2TxEffectByHash}`;
 
@@ -16,6 +24,9 @@ export const TxEffectDetails: FC = () => {
   });
   const { data: txEffects, isLoading, error } = useGetTxEffectByHash(hash);
 
+  const getSelectedItem = (value: string) => {
+    setSelectedTab(value as TabId);
+  };
   if (!hash) <div> No txEffect hash</div>;
   if (isLoading) return <div>Loading...</div>;
   if (error) return <div>Error</div>;
@@ -24,11 +35,11 @@ export const TxEffectDetails: FC = () => {
   const apiEndpointUrl = `${API_ENDPOINT_URL}${hash}`;
 
   return (
-    <div className="mx-auto px-[70px] max-w-[1440px]">
+    <div className="mx-auto px-7 max-w-[1440px] md:px-[70px]">
       <div>
         <div>
           <h2>TxEffect details</h2>
-          <p>{txEffects.hash}</p>
+          <p>{truncateHashString(txEffects.hash)}</p>
           <a href={apiEndpointUrl} target="_blank" rel="noreferrer">
             (API Endpoint)
           </a>
@@ -37,7 +48,7 @@ export const TxEffectDetails: FC = () => {
           <div className="bg-white rounded-lg shadow-md p-4">
             <KeyValueDisplay data={getTxEffectData(txEffects)} />
           </div>
-          <div className="flex flex-row gap-4 w-10 mb-4">
+          <div className="hidden lg:flex flex-row gap-4 w-10 mb-4">
             {txEffectTabs.map((tab) => (
               <Button
                 key={tab.id}
@@ -49,6 +60,20 @@ export const TxEffectDetails: FC = () => {
               </Button>
             ))}
           </div>
+          <div className="mb-1 mt-4 lg:hidden">
+            <Select onValueChange={getSelectedItem}>
+              <SelectTrigger className="h-8 w-3/5 bg-primary text-white">
+                <SelectValue placeholder="encryptedLogs" />
+              </SelectTrigger>
+              <SelectContent>
+                {txEffectTabs.map((tab) => (
+                  <SelectItem key={tab.id} value={tab.id}>
+                    {tab.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
           <div className="bg-white rounded-lg shadow-md p-4">
             {selectedTab === "ecryptedLogs" && (
               <div className="">