From 28e5d9d406516ca694cd4614b096ac6497671259 Mon Sep 17 00:00:00 2001
From: Mauro Eijsenring <mauro@eijsenring.com>
Date: Fri, 18 Oct 2024 11:43:36 +0200
Subject: [PATCH] ui: contract page mobile friendly (#144)

---
 .../contracts/class-and-instance-tables.tsx   | 79 ------------------
 .../explorer-ui/src/components/info-badge.tsx |  4 +-
 .../src/components/table-badge.tsx            | 28 +++++++
 .../src/pages/block-details/index.tsx         | 22 ++---
 .../explorer-ui/src/pages/block/index.tsx     |  9 ++-
 .../pages/contract-class-details/index.tsx    | 77 ++++++++++++++++++
 .../util.ts                                   |  0
 .../index.tsx                                 | 15 +---
 .../util.ts                                   |  0
 .../explorer-ui/src/pages/contract/index.tsx  | 78 ++++++++++++++++++
 .../explorer-ui/src/pages/contract/util.ts    | 36 +++++++++
 .../pages/contracts/class-details/index.tsx   | 58 -------------
 .../explorer-ui/src/pages/tx-effect/index.tsx | 54 +++++++++++++
 .../src/routes/contracts/classes.$id.lazy.tsx |  2 +-
 .../src/routes/contracts/index.lazy.tsx       | 81 +------------------
 .../contracts/instances.$address.lazy.tsx     |  2 +-
 .../src/routes/tx-effects/index.lazy.tsx      | 54 +------------
 services/explorer-ui/src/service/constants.ts |  9 ++-
 18 files changed, 302 insertions(+), 306 deletions(-)
 delete mode 100644 services/explorer-ui/src/components/contracts/class-and-instance-tables.tsx
 create mode 100644 services/explorer-ui/src/components/table-badge.tsx
 create mode 100644 services/explorer-ui/src/pages/contract-class-details/index.tsx
 rename services/explorer-ui/src/pages/{contracts/class-details => contract-class-details}/util.ts (100%)
 rename services/explorer-ui/src/pages/{contracts/instance-details => contract-instance-details}/index.tsx (84%)
 rename services/explorer-ui/src/pages/{contracts/instance-details => contract-instance-details}/util.ts (100%)
 create mode 100644 services/explorer-ui/src/pages/contract/index.tsx
 create mode 100644 services/explorer-ui/src/pages/contract/util.ts
 delete mode 100644 services/explorer-ui/src/pages/contracts/class-details/index.tsx
 create mode 100644 services/explorer-ui/src/pages/tx-effect/index.tsx

diff --git a/services/explorer-ui/src/components/contracts/class-and-instance-tables.tsx b/services/explorer-ui/src/components/contracts/class-and-instance-tables.tsx
deleted file mode 100644
index 15128d33..00000000
--- a/services/explorer-ui/src/components/contracts/class-and-instance-tables.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { ContractClassesTable } from "./classes/table";
-import { ContractInstancesTable } from "./instances/table";
-import { useContractClasses, useLatestContractInstances } from "~/hooks";
-import { contractClassSchema } from "./classes/schema";
-import { contractInstanceSchema } from "./instances/schema";
-
-export const ContractClassesAndInstancesTable = ({
-  classesTitle,
-  contractClassesData,
-  instancesTitle,
-  contractInstancesData,
-}: {
-  classesTitle: string;
-  contractClassesData: ReturnType<typeof useContractClasses>;
-  instancesTitle: string;
-  contractInstancesData: ReturnType<typeof useLatestContractInstances>;
-}) => {
-  const {
-    data: classesData,
-    isLoading: isLoadingClasses,
-    error: errorClasses,
-  } = contractClassesData;
-  const {
-    data: instancesData,
-    isLoading: isLoadingInstances,
-    error: errorInstances,
-  } = contractInstancesData;
-
-  const contractClasses = classesData?.map((contractClass) =>
-    contractClassSchema.parse({
-      blockHash: contractClass.blockHash,
-      contractClassId: contractClass.contractClassId,
-      version: contractClass.version,
-      artifactHash: contractClass.artifactHash,
-      privateFunctionsRoot: contractClass.privateFunctionsRoot,
-    })
-  );
-
-  const contractInstances = instancesData?.map((contractInstance) =>
-    contractInstanceSchema.parse({
-      address: contractInstance.address,
-      blockHash: contractInstance.blockHash,
-      blockHeight: contractInstance.blockHeight,
-      version: contractInstance.version,
-      contractClassId: contractInstance.contractClassId,
-      publicKeysHash: contractInstance.publicKeysHash,
-      deployer: contractInstance.deployer,
-    })
-  );
-
-  return (
-    <div className="flex flex-row gap-4">
-      <div className="bg-white w-1/2 rounded-lg shadow-md p-4">
-        <h2>{classesTitle}</h2>
-        {isLoadingClasses ? (
-          <p>Loading...</p>
-        ) : errorClasses ? (
-          <p className="text-red-500">{errorClasses.message}</p>
-        ) : !contractClasses ? (
-          <p>No data</p>
-        ) : (
-          <ContractClassesTable contracts={contractClasses} />
-        )}
-      </div>
-      <div className="bg-white w-1/2 rounded-lg shadow-md p-4">
-        <h2>{instancesTitle}</h2>
-        {isLoadingInstances ? (
-          <p>Loading...</p>
-        ) : errorInstances ? (
-          <p className="text-red-500">{errorInstances.message}</p>
-        ) : !contractInstances ? (
-          <p>No data</p>
-        ) : (
-          <ContractInstancesTable contracts={contractInstances} />
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/services/explorer-ui/src/components/info-badge.tsx b/services/explorer-ui/src/components/info-badge.tsx
index 6e8a7d6e..3cb3054a 100644
--- a/services/explorer-ui/src/components/info-badge.tsx
+++ b/services/explorer-ui/src/components/info-badge.tsx
@@ -21,8 +21,8 @@ export const InfoBadge: FC<InfoBadgeProps> = ({
 
   return (
     <div className="flex flex-col bg-white w-5/12 justify-between rounded-lg shadow-md p-4 md:w-96">
-      <p>{title}</p>
-      <h2 className="text-primary">{text}</h2>
+      <p className="text-sm">{title}</p>
+      <h3 className="text-primary">{text}</h3>
     </div>
   );
 };
diff --git a/services/explorer-ui/src/components/table-badge.tsx b/services/explorer-ui/src/components/table-badge.tsx
new file mode 100644
index 00000000..4a0682f7
--- /dev/null
+++ b/services/explorer-ui/src/components/table-badge.tsx
@@ -0,0 +1,28 @@
+import { FC, useMemo } from "react";
+
+interface TableBadgeProps {
+  title: string;
+  isLoading: boolean;
+  error: Error | null;
+  children: React.ReactNode;
+}
+
+export const TableBadge: FC<TableBadgeProps> = ({
+  title,
+  isLoading,
+  error,
+  children,
+}) => {
+  const text = useMemo(() => {
+    if (isLoading) return "Loading";
+    if (error) return error.message;
+    return undefined;
+  }, [isLoading, error]);
+
+  return (
+    <div className="bg-white w-full rounded-lg shadow-md p-4 md:w-1/2">
+      <h3>{title}</h3>
+      {!text ? children : <p className="text-primary-500">{text}</p>}
+    </div>
+  );
+};
diff --git a/services/explorer-ui/src/pages/block-details/index.tsx b/services/explorer-ui/src/pages/block-details/index.tsx
index b9e8d215..cabae0a3 100644
--- a/services/explorer-ui/src/pages/block-details/index.tsx
+++ b/services/explorer-ui/src/pages/block-details/index.tsx
@@ -35,30 +35,18 @@ export const BlockDetails: FC = () => {
           <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">
-              <KeyValueDisplay data={getBlockDetails(latestBlock)} />
-            </div>
-            <div className="flex flex-row gap-4 w-10 mb-4">
-              <Button
-                variant={"default"}
-                className={"shadow-[0px_0px_1px_2px_rgba(0,0,0,1)]"}
-              >
-                <p>View TxEffects</p>
-              </Button>
-            </div>
-            <TxEffectsTable txEffects={getTxEffects(latestBlock)} />
-          </div>
+        </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"}>
+            <Button
+              variant={"default"}
+              className={"shadow-[0px_0px_1px_2px_rgba(0,0,0,1)]"}
+            >
               <p>View TxEffects</p>
             </Button>
-            <Button variant={"default"}>View TxEffects</Button>
           </div>
           <TxEffectsTable txEffects={getTxEffects(latestBlock)} />
         </div>
diff --git a/services/explorer-ui/src/pages/block/index.tsx b/services/explorer-ui/src/pages/block/index.tsx
index 2ea9fa46..0904e388 100644
--- a/services/explorer-ui/src/pages/block/index.tsx
+++ b/services/explorer-ui/src/pages/block/index.tsx
@@ -23,12 +23,15 @@ export const Blocks: FC = () => {
   if (error) return <p className="text-red-500">{error.message}</p>;
   if (!latestBlocks) return <p>No data</p>;
   const averageBlockTimeFormatted = formatDuration(
-    Number(avarageBlockTime) / 1000
+    Number(avarageBlockTime) / 1000,
   );
 
   return (
-    <div className="mx-auto px-[70px] max-w-[1440px]">
-      <h1 className="mt-16">Latest Blocks</h1>
+    <div className="mx-auto px-5 max-w-[1440px] md:px-[70px]">
+      <div className="flex flex-wrap justify-center gap-3 m-5 ">
+        <h2 className="mt-2 text-primary md:hidden">Blocks</h2>
+        <h1 className="hidden md:block md:mt-16">Blocks</h1>
+      </div>
       <div className="flex flex-row justify-center gap-4 m-8">
         <InfoBadge
           title="Average fees (FPA)"
diff --git a/services/explorer-ui/src/pages/contract-class-details/index.tsx b/services/explorer-ui/src/pages/contract-class-details/index.tsx
new file mode 100644
index 00000000..09d031b7
--- /dev/null
+++ b/services/explorer-ui/src/pages/contract-class-details/index.tsx
@@ -0,0 +1,77 @@
+import { useParams } from "@tanstack/react-router";
+import { type FC } from "react";
+import { KeyValueDisplay } from "~/components/info-display/key-value-display";
+import { useContractClasses, useContractInstance } from "~/hooks";
+import { API_URL, aztecExplorer } from "~/service/constants";
+import { getContractData } from "./util";
+import { ContractInstancesTable } from "~/components/contracts/instances/table";
+import { mapContractClasses, mapContractInstances } from "../contract/util";
+import { TableBadge } from "~/components/table-badge";
+import { ContractClassesTable } from "~/components/contracts/classes/table";
+
+export const ContractClassDetails: FC = () => {
+  const { id } = useParams({
+    from: "/contracts/classes/$id",
+  });
+  const {
+    data: classesData,
+    isLoading: isLoadingClasses,
+    error: errorClasses,
+  } = useContractClasses(id);
+  const {
+    data: instancesData,
+    isLoading: isLoadingInstances,
+    error: errorInstances,
+  } = useContractInstance(id);
+
+  if (!id) return <div>No classId</div>;
+
+  const apiEndpointUrl = `${API_URL}/${aztecExplorer.getL2ContractClasses(id)}`;
+
+  return (
+    <div className="mx-auto px-[70px] max-w-[1440px]">
+      <div className="flex flex-col gap-4 mt-8">
+        <div>
+          <div>
+            <h2>Contract class details</h2>
+            <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">
+              <KeyValueDisplay
+                data={classesData ? getContractData(classesData[0]) : []}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col gap-4 md:flex-row ">
+          <TableBadge
+            title="Total Contract Instances"
+            isLoading={isLoadingClasses}
+            error={errorClasses}
+          >
+            {classesData && (
+              <ContractClassesTable
+                contracts={mapContractClasses(classesData)}
+              />
+            )}
+          </TableBadge>
+
+          <TableBadge
+            title="Total Contract Instances"
+            isLoading={isLoadingInstances}
+            error={errorInstances}
+          >
+            {instancesData && (
+              <ContractInstancesTable
+                contracts={mapContractInstances([instancesData])}
+              />
+            )}
+          </TableBadge>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/services/explorer-ui/src/pages/contracts/class-details/util.ts b/services/explorer-ui/src/pages/contract-class-details/util.ts
similarity index 100%
rename from services/explorer-ui/src/pages/contracts/class-details/util.ts
rename to services/explorer-ui/src/pages/contract-class-details/util.ts
diff --git a/services/explorer-ui/src/pages/contracts/instance-details/index.tsx b/services/explorer-ui/src/pages/contract-instance-details/index.tsx
similarity index 84%
rename from services/explorer-ui/src/pages/contracts/instance-details/index.tsx
rename to services/explorer-ui/src/pages/contract-instance-details/index.tsx
index bf470eeb..5504b1f5 100644
--- a/services/explorer-ui/src/pages/contracts/instance-details/index.tsx
+++ b/services/explorer-ui/src/pages/contract-instance-details/index.tsx
@@ -6,16 +6,9 @@ import { API_URL, aztecExplorer } from "~/service/constants";
 import { getContractData } from "./util";
 
 export const ContractInstanceDetails: FC = () => {
-  let address = "";
-  try {
-    const params = useParams({
-      from: "/contracts/instances/$address",
-    });
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    address = params.address;
-  } catch (e) {
-    // TODO
-  }
+  const { address } = useParams({
+    from: "/contracts/instances/$address",
+  });
   const {
     data: contractInstanceDetails,
     isLoading,
@@ -28,7 +21,7 @@ export const ContractInstanceDetails: FC = () => {
   if (!contractInstanceDetails) return <div>No data</div>;
 
   const apiEndpointUrl = `${API_URL}/${aztecExplorer.getL2ContractInstance(
-    address
+    address,
   )}`;
 
   return (
diff --git a/services/explorer-ui/src/pages/contracts/instance-details/util.ts b/services/explorer-ui/src/pages/contract-instance-details/util.ts
similarity index 100%
rename from services/explorer-ui/src/pages/contracts/instance-details/util.ts
rename to services/explorer-ui/src/pages/contract-instance-details/util.ts
diff --git a/services/explorer-ui/src/pages/contract/index.tsx b/services/explorer-ui/src/pages/contract/index.tsx
new file mode 100644
index 00000000..fc7d731d
--- /dev/null
+++ b/services/explorer-ui/src/pages/contract/index.tsx
@@ -0,0 +1,78 @@
+import { FC } from "react";
+import { InfoBadge } from "~/components/info-badge";
+import { useLatestContractClasses, useLatestContractInstances } from "~/hooks";
+import { useTotalContracts, useTotalContractsLast24h } from "~/hooks/stats";
+import { mapContractClasses, mapContractInstances } from "./util";
+import { ContractInstancesTable } from "~/components/contracts/instances/table";
+import { ContractClassesTable } from "~/components/contracts/classes/table";
+import { TableBadge } from "~/components/table-badge";
+
+export const Contracts: FC = () => {
+  const {
+    data: classesData,
+    isLoading: isLoadingClasses,
+    error: errorClasses,
+  } = useLatestContractClasses();
+  const {
+    data: instancesData,
+    isLoading: isLoadingInstances,
+    error: errorInstances,
+  } = useLatestContractInstances();
+  const {
+    data: totalAmountOfContracts,
+    isLoading: loadingAmountContracts,
+    error: errorAmountContracts,
+  } = useTotalContracts();
+  const {
+    data: totalAmountOfContracts24h,
+    isLoading: loadingAmountContracts24h,
+    error: errorAmountContracts24h,
+  } = useTotalContractsLast24h();
+
+  return (
+    <div className="mx-auto px-7 max-w-[1440px] md:px-[70px]">
+      <div className="flex flex-wrap justify-center gap-3 m-5 ">
+        <h2 className="mt-2 text-primary md:hidden">All contracts</h2>
+        <h1 className="hidden md:block md:mt-16">All contracts</h1>
+      </div>
+      <div className="flex flex-row justify-center gap-4 m-8">
+        <InfoBadge
+          title="Total Contract Classes"
+          isLoading={loadingAmountContracts}
+          error={errorAmountContracts}
+          data={totalAmountOfContracts}
+        />
+        <InfoBadge
+          title="Total Contract Classes last 24h"
+          isLoading={loadingAmountContracts24h}
+          error={errorAmountContracts24h}
+          data={totalAmountOfContracts24h}
+        />
+      </div>
+
+      <div className="flex flex-col gap-4 md:flex-row ">
+        <TableBadge
+          title="Total Contract Instances"
+          isLoading={isLoadingClasses}
+          error={errorClasses}
+        >
+          {classesData && (
+            <ContractClassesTable contracts={mapContractClasses(classesData)} />
+          )}
+        </TableBadge>
+
+        <TableBadge
+          title="Total Contract Instances"
+          isLoading={isLoadingInstances}
+          error={errorInstances}
+        >
+          {instancesData && (
+            <ContractInstancesTable
+              contracts={mapContractInstances(instancesData)}
+            />
+          )}
+        </TableBadge>
+      </div>
+    </div>
+  );
+};
diff --git a/services/explorer-ui/src/pages/contract/util.ts b/services/explorer-ui/src/pages/contract/util.ts
new file mode 100644
index 00000000..eafa5fe0
--- /dev/null
+++ b/services/explorer-ui/src/pages/contract/util.ts
@@ -0,0 +1,36 @@
+import {
+  ChicmozL2ContractClassRegisteredEvent,
+  ChicmozL2ContractInstanceDeluxe,
+} from "@chicmoz-pkg/types";
+import { contractClassSchema } from "~/components/contracts/classes/schema";
+import { contractInstanceSchema } from "~/components/contracts/instances/schema";
+
+export const mapContractClasses = (
+  classesData: ChicmozL2ContractClassRegisteredEvent[],
+) => {
+  return classesData.map((contractClass) =>
+    contractClassSchema.parse({
+      blockHash: contractClass.blockHash,
+      contractClassId: contractClass.contractClassId,
+      version: contractClass.version,
+      artifactHash: contractClass.artifactHash,
+      privateFunctionsRoot: contractClass.privateFunctionsRoot,
+    }),
+  );
+};
+
+export const mapContractInstances = (
+  instancesData: ChicmozL2ContractInstanceDeluxe[],
+) => {
+  return instancesData.map((contractInstance) =>
+    contractInstanceSchema.parse({
+      address: contractInstance.address,
+      blockHash: contractInstance.blockHash,
+      blockHeight: contractInstance.blockHeight,
+      version: contractInstance.version,
+      contractClassId: contractInstance.contractClassId,
+      publicKeysHash: contractInstance.publicKeysHash,
+      deployer: contractInstance.deployer,
+    }),
+  );
+};
diff --git a/services/explorer-ui/src/pages/contracts/class-details/index.tsx b/services/explorer-ui/src/pages/contracts/class-details/index.tsx
deleted file mode 100644
index 7e7ac9cd..00000000
--- a/services/explorer-ui/src/pages/contracts/class-details/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useParams } from "@tanstack/react-router";
-import { type FC } from "react";
-import { KeyValueDisplay } from "~/components/info-display/key-value-display";
-import { useContractClasses, useDeployedContractInstances } from "~/hooks";
-import { API_URL, aztecExplorer } from "~/service/constants";
-import { getContractData } from "./util";
-import { ContractClassesAndInstancesTable } from "~/components/contracts/class-and-instance-tables";
-
-export const ContractClassDetails: FC = () => {
-  let classId = "";
-  try {
-    const params = useParams({
-      from: "/contracts/classes/$id",
-    });
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    classId = params.id;
-  } catch (e) {
-    // TODO
-  }
-  const contractClassVersions = useContractClasses(classId);
-  const contractDeployedInstances = useDeployedContractInstances(classId);
-
-  if (!classId) return <div>No classId</div>;
-  if (contractClassVersions.isLoading) return <div>Loading...</div>;
-  if (contractClassVersions.error) return <div>Error</div>;
-  if (!contractClassVersions.data) return <div>No data</div>;
-
-  const apiEndpointUrl = `${API_URL}/${aztecExplorer.getL2ContractClasses(
-    classId
-  )}`;
-  return (
-    <div className="mx-auto px-[70px] max-w-[1440px]">
-      <div className="flex flex-col gap-4 mt-8">
-        <div>
-          <div>
-            <h2>Contract class details</h2>
-            <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">
-              <KeyValueDisplay
-                data={getContractData(contractClassVersions.data[0])}
-              />
-            </div>
-          </div>
-        </div>
-        <ContractClassesAndInstancesTable
-          classesTitle="Contract Class Versions"
-          contractClassesData={contractClassVersions}
-          instancesTitle="Deployed Instances"
-          contractInstancesData={contractDeployedInstances}
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/services/explorer-ui/src/pages/tx-effect/index.tsx b/services/explorer-ui/src/pages/tx-effect/index.tsx
new file mode 100644
index 00000000..4536d8b1
--- /dev/null
+++ b/services/explorer-ui/src/pages/tx-effect/index.tsx
@@ -0,0 +1,54 @@
+import { FC } from "react";
+import { InfoBadge } from "~/components/info-badge";
+import { getTxEffectTableObj } from "~/components/tx-effects/tx-effects-schema";
+import { TxEffectsTable } from "~/components/tx-effects/tx-effects-table";
+import { useLatestBlocks } from "~/hooks";
+import { useTotalTxEffects, useTotalTxEffectsLast24h } from "~/hooks/stats";
+
+export const TxEffects: FC = () => {
+  const { data: latestBlocks, isLoading, error } = useLatestBlocks();
+  const {
+    data: totalTxEffects,
+    isLoading: loadingTotalEffects,
+    error: errorTotalEffects,
+  } = useTotalTxEffects();
+  const {
+    data: totalTxEffects24h,
+    isLoading: loadingTotalEffects24h,
+    error: errorTotalEffects24h,
+  } = useTotalTxEffectsLast24h();
+
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p className="text-red-500">{error.message}</p>;
+  if (!latestBlocks) return <p>No data</p>;
+
+  const latestTxEffects = latestBlocks.flatMap((block) => {
+    return block.body.txEffects.map((txEffect) =>
+      getTxEffectTableObj(txEffect, block),
+    );
+  });
+
+  return (
+    <div className="mx-auto px-5 max-w-[1440px] md:px-[70px]">
+      <div className="flex flex-wrap justify-center gap-3 m-5 ">
+        <h2 className="mt-2 text-primary md:hidden">All tx-effects</h2>
+        <h1 className="hidden md:block md:mt-16">All tx-effects</h1>
+      </div>
+      <div className="flex flex-row justify-center gap-4 m-8">
+        <InfoBadge
+          title="Total transactions"
+          isLoading={loadingTotalEffects}
+          error={errorTotalEffects}
+          data={totalTxEffects}
+        />
+        <InfoBadge
+          title="Total transactions last 24h"
+          isLoading={loadingTotalEffects24h}
+          error={errorTotalEffects24h}
+          data={totalTxEffects24h}
+        />
+      </div>
+      <TxEffectsTable txEffects={latestTxEffects} />
+    </div>
+  );
+};
diff --git a/services/explorer-ui/src/routes/contracts/classes.$id.lazy.tsx b/services/explorer-ui/src/routes/contracts/classes.$id.lazy.tsx
index f77810da..a8c4c5ab 100644
--- a/services/explorer-ui/src/routes/contracts/classes.$id.lazy.tsx
+++ b/services/explorer-ui/src/routes/contracts/classes.$id.lazy.tsx
@@ -1,5 +1,5 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { ContractClassDetails } from "~/pages/contracts/class-details";
+import { ContractClassDetails } from "~/pages/contract-class-details";
 
 export const Route = createLazyFileRoute("/contracts/classes/$id")({
   component: ContractClassDetails,
diff --git a/services/explorer-ui/src/routes/contracts/index.lazy.tsx b/services/explorer-ui/src/routes/contracts/index.lazy.tsx
index efe29c22..08e29483 100644
--- a/services/explorer-ui/src/routes/contracts/index.lazy.tsx
+++ b/services/explorer-ui/src/routes/contracts/index.lazy.tsx
@@ -1,81 +1,6 @@
-import { Outlet, createLazyFileRoute, useParams } from "@tanstack/react-router";
-import { ContractClassesAndInstancesTable } from "~/components/contracts/class-and-instance-tables";
-import { InfoBadge } from "~/components/info-badge";
-import { useLatestContractClasses, useLatestContractInstances } from "~/hooks";
-import { useTotalContracts, useTotalContractsLast24h } from "~/hooks/stats";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { Contracts } from "~/pages/contract";
 
 export const Route = createLazyFileRoute("/contracts/")({
-  component: TxEffects,
+  component: Contracts,
 });
-
-function TxEffects() {
-  const latestClassesData = useLatestContractClasses();
-  const latestInstancesData = useLatestContractInstances();
-  const {
-    data: totalAmountOfContracts,
-    isLoading: loadingAmountContracts,
-    error: errorAmountContracts,
-  } = useTotalContracts();
-  const {
-    data: totalAmountOfContracts24h,
-    isLoading: loadingAmountContracts24h,
-    error: errorAmountContracts24h,
-  } = useTotalContractsLast24h();
-
-  let isAddress = false;
-  let isClass = false;
-  let isIndex = false;
-  try {
-    useParams({ from: "/contracts/instances/$address" });
-    isAddress = true;
-  } catch (e) {
-    // TODO
-  }
-  try {
-    useParams({ from: "/contracts/classes/$id" });
-    isClass = true;
-  } catch (e) {
-    // TODO
-  }
-  isIndex = !isAddress && !isClass;
-
-  const text = {
-    title: isIndex
-      ? "All Contracts"
-      : isClass
-        ? "Contract Class Details"
-        : "Contract Instance Details",
-  };
-  return (
-    <div className="mx-auto px-[70px] max-w-[1440px]">
-      <h1 className="mt-16">{text.title}</h1>
-      {isIndex ? (
-        <>
-          <div className="flex flex-row justify-center gap-4 m-8">
-            <InfoBadge
-              title="Total Contract Classes"
-              isLoading={loadingAmountContracts}
-              error={errorAmountContracts}
-              data={totalAmountOfContracts}
-            />
-            <InfoBadge
-              title="Total Contract Classes last 24h"
-              isLoading={loadingAmountContracts24h}
-              error={errorAmountContracts24h}
-              data={totalAmountOfContracts24h}
-            />
-          </div>
-
-          <ContractClassesAndInstancesTable
-            classesTitle="Latest Contract Classes"
-            contractClassesData={latestClassesData}
-            instancesTitle="Latest Contract Instances"
-            contractInstancesData={latestInstancesData}
-          />
-        </>
-      ) : (
-        <Outlet />
-      )}
-    </div>
-  );
-}
diff --git a/services/explorer-ui/src/routes/contracts/instances.$address.lazy.tsx b/services/explorer-ui/src/routes/contracts/instances.$address.lazy.tsx
index 2e33c72e..0d659b04 100644
--- a/services/explorer-ui/src/routes/contracts/instances.$address.lazy.tsx
+++ b/services/explorer-ui/src/routes/contracts/instances.$address.lazy.tsx
@@ -1,5 +1,5 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { ContractInstanceDetails } from "~/pages/contracts/instance-details";
+import { ContractInstanceDetails } from "~/pages/contract-instance-details";
 
 export const Route = createLazyFileRoute("/contracts/instances/$address")({
   component: ContractInstanceDetails,
diff --git a/services/explorer-ui/src/routes/tx-effects/index.lazy.tsx b/services/explorer-ui/src/routes/tx-effects/index.lazy.tsx
index 5b2c078b..cb85a629 100644
--- a/services/explorer-ui/src/routes/tx-effects/index.lazy.tsx
+++ b/services/explorer-ui/src/routes/tx-effects/index.lazy.tsx
@@ -1,58 +1,6 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { InfoBadge } from "~/components/info-badge";
-import { getTxEffectTableObj } from "~/components/tx-effects/tx-effects-schema";
-import { TxEffectsTable } from "~/components/tx-effects/tx-effects-table";
-import { useLatestBlocks } from "~/hooks";
-import { useTotalTxEffects, useTotalTxEffectsLast24h } from "~/hooks/stats";
+import { TxEffects } from "~/pages/tx-effect";
 
 export const Route = createLazyFileRoute("/tx-effects/")({
   component: TxEffects,
 });
-
-function TxEffects() {
-  const { data: latestBlocks, isLoading, error } = useLatestBlocks();
-  const {
-    data: totalTxEffects,
-    isLoading: loadingTotalEffects,
-    error: errorTotalEffects,
-  } = useTotalTxEffects();
-  const {
-    data: totalTxEffects24h,
-    isLoading: loadingTotalEffects24h,
-    error: errorTotalEffects24h,
-  } = useTotalTxEffectsLast24h();
-
-  if (isLoading) return <p>Loading...</p>;
-  if (error) return <p className="text-red-500">{error.message}</p>;
-  if (!latestBlocks) return <p>No data</p>;
-
-  const latestTxEffects = latestBlocks.flatMap((block) => {
-    return block.body.txEffects.map((txEffect) =>
-      getTxEffectTableObj(txEffect, block)
-    );
-  });
-
-  return (
-    <div className="mx-auto px-5 max-w-[1440px] md:px-[70px]">
-      <div className="flex flex-wrap justify-center gap-3 m-5 ">
-        <h2 className="mt-2 text-primary md:hidden">All tx-effects</h2>
-        <h1 className="hidden md:block md:mt-16">All tx-effects</h1>
-      </div>
-      <div className="flex flex-row justify-center gap-4 m-8">
-        <InfoBadge
-          title="Total transactions"
-          isLoading={loadingTotalEffects}
-          error={errorTotalEffects}
-          data={totalTxEffects}
-        />
-        <InfoBadge
-          title="Total transactions last 24h"
-          isLoading={loadingTotalEffects24h}
-          error={errorTotalEffects24h}
-          data={totalTxEffects24h}
-        />
-      </div>
-      <TxEffectsTable txEffects={latestTxEffects} />
-    </div>
-  );
-}
diff --git a/services/explorer-ui/src/service/constants.ts b/services/explorer-ui/src/service/constants.ts
index 821742f0..134c3486 100644
--- a/services/explorer-ui/src/service/constants.ts
+++ b/services/explorer-ui/src/service/constants.ts
@@ -9,9 +9,12 @@ export const aztecExplorer = {
   getL2TxEffectByHeightAndIndex: (height: number, index: number) =>
     `l2/blocks/${height}/txEffects/${index}`,
   getL2TxEffectsByHeightRange: "",
-  getL2ContractClassByIdAndVersion: (classId: string, version: string) => `l2/contract-classes/${classId}/versions/${version}`,
-  getL2ContractClasses: (classId?: string) => classId ? `l2/contract-classes/${classId}` : "l2/contract-classes",
-  getL2ContractInstance: (address: string) => `l2/contract-instances/${address}`,
+  getL2ContractClassByIdAndVersion: (classId: string, version: string) =>
+    `l2/contract-classes/${classId}/versions/${version}`,
+  getL2ContractClasses: (classId?: string) =>
+    classId ? `l2/contract-classes/${classId}` : "l2/contract-classes",
+  getL2ContractInstance: (address: string) =>
+    `l2/contract-instances/${address}`,
   getL2ContractInstances: "l2/contract-instances",
   getL2ContractInstancesByBlockHash: (hash: string) =>
     `l2/blocks/${hash}/contract-instances`,