ui getting there

Author: FilipHarald

services/explorer-ui/.env.development

@@ -1,8 +1,8 @@
-VITE_L2_NETWORK_ID=SANDBOX
-VITE_API_URL=http://api.sandbox.chicmoz.localhost:80/v1
+VITE_L2_NETWORK_ID=SP_TESTNET
+VITE_API_URL=http://api.sp.chicmoz.localhost:80/v1
 VITE_CHICMOZ_ALL_UI_URLS=Sandbox|http://sandbox.chicmoz.localhost,S&P-testnet|http://sp.chicmoz.localhost
 VITE_API_KEY=dev-api-key
-VITE_WS_URL=ws://ws.sandbox.chicmoz.localhost:80
+VITE_WS_URL=ws://ws.sp.chicmoz.localhost:80
 VITE_DISCORD_URL=https://discord.gg/obscura-build
 VITE_X_URL=https://x.com/Obscura_Build
 VITE_GITHUB_URL=https://github.com/aztec-scan/chicmoz

services/explorer-ui/src/api/tx-effect.ts

@@ -46,4 +46,8 @@ export const TxEffectsAPI = {
     );
     return validateResponse(chicmozL2BlockSchema.shape.height, response.data);
   },
+  getLatestTxEffects: async (): Promise<ChicmozL2TxEffectDeluxe[]> => {
+    const response = await client.get(aztecExplorer.getL2TxEffects);
+    return validateResponse(z.array(chicmozL2TxEffectDeluxeSchema), response.data);
+  }
 };

services/explorer-ui/src/hooks/api/tx-effect.ts

@@ -8,7 +8,7 @@ import { TxEffectsAPI } from "~/api";
 import { queryKeyGenerator } from "./utils";
 
 export const useGetTxEffectByHash = (
-  hash: string
+  hash: string,
 ): UseQueryResult<ChicmozL2TxEffectDeluxe, Error> => {
   return useQuery<ChicmozL2TxEffectDeluxe, Error>({
     queryKey: queryKeyGenerator.txEffectByHash(hash),
@@ -17,7 +17,7 @@ export const useGetTxEffectByHash = (
 };
 
 export const useGetTxEffectsByBlockHeight = (
-  height: bigint | string | number | undefined
+  height: bigint | string | number | undefined,
 ): UseQueryResult<ChicmozL2TxEffectDeluxe[], Error> => {
   if (typeof height === "string" && height?.startsWith("0x"))
     throw new Error("Invalid block height");
@@ -32,7 +32,7 @@ export const useGetTxEffectsByBlockHeight = (
 
 export const useGetTxEffectsByBlockHeightRange = (
   from: bigint | undefined,
-  to: bigint | undefined
+  to: bigint | undefined,
 ): UseQueryResult<(ChicmozL2TxEffectDeluxe | undefined)[], Error>[] => {
   return useQueries({
     queries:
@@ -45,3 +45,13 @@ export const useGetTxEffectsByBlockHeightRange = (
           })),
   });
 };
+
+export const useGetLatestTxEffects = (): UseQueryResult<
+  ChicmozL2TxEffectDeluxe[] | undefined,
+  Error
+> => {
+  return useQuery<ChicmozL2TxEffectDeluxe[] | undefined, Error>({
+    queryKey: queryKeyGenerator.latestTxEffects,
+    queryFn: () => TxEffectsAPI.getLatestTxEffects(),
+  });
+};

services/explorer-ui/src/hooks/api/utils.ts

@@ -7,6 +7,7 @@ export const queryKeyGenerator = {
     Number(height),
   ],
   txEffectByHash: (hash: string) => ["txEffectByHash", hash],
+  latestTxEffects: ["latestTxEffects"],
   pendingTxs: ["pendingTxs"],
   latestBlock: ["latestBlock"],
   latestBlocks: ["latestBlocks"],

services/explorer-ui/src/pages/landing/index.tsx

@@ -7,7 +7,7 @@ import {
   HealthStatus,
   useAvarageBlockTime,
   useAvarageFees,
-  useGetTxEffectsByBlockHeightRange,
+  useGetLatestTxEffects,
   useLatestBlocks,
   usePendingTxs,
   useSubTitle,
@@ -19,7 +19,7 @@ import {
 } from "~/hooks";
 import { formatDuration, formatFees } from "~/lib/utils";
 import { routes } from "~/routes/__root";
-import { mapLatestBlocks, parseTxEffectsData } from "./util";
+import { mapLatestBlocks, mapLatestTxEffects } from "./util";
 
 export const Landing: FC = () => {
   const { systemHealth } = useSystemHealth();
@@ -57,23 +57,24 @@ export const Landing: FC = () => {
 
   useSubTitle(latestBlocks?.[0]?.height.toString() ?? routes.home.title);
 
-  const latestTxEffectsData = useGetTxEffectsByBlockHeightRange(
-    latestBlocks?.at(40)?.height ?? latestBlocks?.at(-1)?.height,
-    latestBlocks?.at(0)?.height
-  );
+  const {
+    data: latestTxEffectsData,
+    isLoading: isLoadingTxEffects,
+    error: txEffectsError,
+  } = useGetLatestTxEffects();
 
   const { data: pendingTxs } = usePendingTxs();
 
-  const {
-    isLoadingTxEffects,
-    txEffectsErrorMsg: txEffectsError,
-    latestTxEffects,
-  } = parseTxEffectsData(latestTxEffectsData, latestBlocks);
-
   const latestTxEffectsWithPending = useMemo(() => {
+    if (!latestTxEffectsData) {
+      return [];
+    }
+    if (!latestBlocks) {
+      return [];
+    }
     const disguisedPendingTxs =
       pendingTxs?.reduce((acc, tx) => {
-        if (!latestTxEffects.some((effect) => effect.txHash === tx.hash)) {
+        if (!latestTxEffectsData.some((effect) => effect.txHash === tx.hash)) {
           acc.push({
             txHash: tx.hash,
             transactionFee: -1,
@@ -83,12 +84,15 @@ export const Landing: FC = () => {
         }
         return acc;
       }, [] as TxEffectTableSchema[]) ?? [];
-    return [...disguisedPendingTxs, ...latestTxEffects];
-  }, [pendingTxs, latestTxEffects]);
+    return [
+      ...disguisedPendingTxs,
+      ...mapLatestTxEffects(latestTxEffectsData, latestBlocks),
+    ];
+  }, [pendingTxs, latestTxEffectsData, latestBlocks]);
 
   const averageBlockTimeFormatted = formatDuration(
     Number(avarageBlockTime) / 1000,
-    true
+    true,
   );
 
   const formattedFees = formatFees(avarageFees);

services/explorer-ui/src/pages/landing/util.ts

@@ -1,13 +1,17 @@
-import { type ChicmozL2BlockLight } from "@chicmoz-pkg/types";
+import {
+  type ChicmozL2TxEffectDeluxe,
+  type ChicmozL2BlockLight,
+} from "@chicmoz-pkg/types";
 import { blockSchema } from "~/components/blocks/blocks-schema";
 import {
-  type TxEffectTableSchema,
   getTxEffectTableObj,
+  type TxEffectTableSchema,
 } from "~/components/tx-effects/tx-effects-schema";
-import { type useGetTxEffectsByBlockHeightRange } from "~/hooks";
 
 export const mapLatestBlocks = (latestBlocks?: ChicmozL2BlockLight[]) => {
-  if (!latestBlocks) return undefined;
+  if (!latestBlocks) {
+    return undefined;
+  }
   return latestBlocks.map((block) => {
     return blockSchema.parse({
       height: block.height,
@@ -19,30 +23,17 @@ export const mapLatestBlocks = (latestBlocks?: ChicmozL2BlockLight[]) => {
   });
 };
 
-export const parseTxEffectsData = (
-  txEffectsData: ReturnType<typeof useGetTxEffectsByBlockHeightRange>,
-  latestBlocks?: ChicmozL2BlockLight[]
+export const mapLatestTxEffects = (
+  latestTxEffects: ChicmozL2TxEffectDeluxe[],
+  latestBlocks: ChicmozL2BlockLight[],
 ) => {
-  let isLoadingTxEffects = false;
-  let txEffectsErrorMsg: string | undefined = undefined;
-
-  let latestTxEffects: TxEffectTableSchema[] = [];
-  txEffectsData.forEach((data, i) => {
-    if (data.isLoading) isLoadingTxEffects = true;
-    if (data.error) txEffectsErrorMsg = data.error.message;
-    if (data.data) {
-      if (!latestBlocks) return;
-      const newTxEffects = data.data.reduce((acc, txEffect) => {
-        if (txEffect === undefined) return acc;
-        if (latestBlocks[i] === undefined) return acc;
-        return acc.concat(getTxEffectTableObj(txEffect, latestBlocks[i]));
-      }, latestTxEffects);
-      latestTxEffects = newTxEffects;
+  return latestTxEffects.reduce((acc, txEffect) => {
+    const matchingBlock = latestBlocks.find(
+      (block) => block.height === txEffect.blockHeight,
+    );
+    if (!matchingBlock) {
+      return acc;
     }
-  });
-  return {
-    isLoadingTxEffects,
-    txEffectsErrorMsg,
-    latestTxEffects,
-  };
+    return acc.concat(getTxEffectTableObj(txEffect, matchingBlock));
+  }, [] as TxEffectTableSchema[]);
 };

services/explorer-ui/src/pages/tx-effect/index.tsx

@@ -2,14 +2,14 @@ import { type FC } from "react";
 import { InfoBadge } from "~/components/info-badge";
 import { TxEffectsTable } from "~/components/tx-effects/tx-effects-table";
 import {
-  useGetTxEffectsByBlockHeightRange,
+  useGetLatestTxEffects,
   useLatestBlocks,
   useSubTitle,
   useTotalTxEffects,
   useTotalTxEffectsLast24h,
 } from "~/hooks";
 import { routes } from "~/routes/__root";
-import { parseTxEffectsData } from "../landing/util";
+import { mapLatestTxEffects } from "../landing/util";
 
 export const TxEffects: FC = () => {
   useSubTitle(routes.txEffects.children.index.title);
@@ -25,15 +25,11 @@ export const TxEffects: FC = () => {
     error: errorTotalEffects24h,
   } = useTotalTxEffectsLast24h();
 
-  const latestTxEffectsData = useGetTxEffectsByBlockHeightRange(
-    latestBlocks?.at(-1)?.height,
-    latestBlocks?.at(0)?.height
-  );
   const {
-    isLoadingTxEffects,
-    txEffectsErrorMsg: txEffectsError,
-    latestTxEffects,
-  } = parseTxEffectsData(latestTxEffectsData, latestBlocks);
+    data: latestTxEffectsData,
+    isLoading: isLoadingTxEffects,
+    error: txEffectsError,
+  } = useGetLatestTxEffects();
 
   return (
     <div className="mx-auto px-5 max-w-[1440px] md:px-[70px]">
@@ -56,11 +52,15 @@ export const TxEffects: FC = () => {
         />
       </div>
       <div className="rounded-lg shadow-lg">
-        <TxEffectsTable
-          txEffects={latestTxEffects}
-          isLoading={isLoading || isLoadingTxEffects}
-          error={error ?? txEffectsError}
-        />
+        {latestTxEffectsData && latestBlocks ? (
+          <TxEffectsTable
+            txEffects={mapLatestTxEffects(latestTxEffectsData, latestBlocks)}
+            isLoading={isLoading || isLoadingTxEffects}
+            error={error ?? txEffectsError}
+          />
+        ) : (
+          <div>No data</div>
+        )}
       </div>
     </div>
   );

services/explorer-ui/src/service/constants.ts

@@ -6,6 +6,7 @@ export const aztecExplorer = {
   getL2BlockByHash: "l2/blocks/",
   getL2BlockByHeight: "l2/blocks/",
   getL2BlocksByHeightRange: "l2/blocks",
+  getL2TxEffects: "l2/tx-effects",
   getL2TxEffectByHash: "l2/tx-effects/",
   getL2TxEffectsByHeight: (height: bigint) => `l2/blocks/${height}/tx-effects`,
   getL2TxEffectByHeightAndIndex: (height: bigint, index: number) =>