feat: option remove pending txs from table

services/explorer-ui/package.json

@@ -13,7 +13,7 @@
     "@chicmoz-pkg/types": "workspace:^",
     "@radix-ui/react-accordion": "1.1.2",
     "@radix-ui/react-alert-dialog": "1.1.1",
-    "@radix-ui/react-checkbox": "1.0.4",
+    "@radix-ui/react-checkbox": "1.1.4",
     "@radix-ui/react-dialog": "1.1.1",
     "@radix-ui/react-dropdown-menu": "2.1.1",
     "@radix-ui/react-icons": "1.3.0",

services/explorer-ui/src/components/blocks/blocks-table.tsx

@@ -19,17 +19,19 @@ export const BlocksTable: FC<Props> = ({
   error,
   disableSizeSelector,
 }) => {
-  if (error) return <p className="text-red-500">{error.message}</p>;
+  if (error) { return <p className="text-red-500">{error.message}</p>; }
 
   return (
     <section className="relative mx-0 w-full transition-all">
-      <DataTable
-        isLoading={isLoading}
-        title={title}
-        data={blocks ?? []}
-        columns={BlockTableColumns}
-        disableSizeSelector={disableSizeSelector}
-      />
+      <div className="space-y-4 bg-white rounded-lg p-5">
+        {title && <h3 className="ml-0.5">{title}</h3>}
+        <DataTable
+          isLoading={isLoading}
+          data={blocks ?? []}
+          columns={BlockTableColumns}
+          disableSizeSelector={disableSizeSelector}
+        />
+      </div>
     </section>
   );
 };

services/explorer-ui/src/components/contracts/classes/table.tsx

@@ -18,8 +18,8 @@ export const ContractClassesTable: FC<Props> = ({
   error,
   showContractVersions,
 }) => {
-  if (!contracts) return <div>No data</div>;
-  if (error) return <p className="text-red-500">{error.message}</p>;
+  if (!contracts) { return <div>No data</div>; }
+  if (error) { return <p className="text-red-500">{error.message}</p>; }
   let cols = contractsTableColumns;
   if (!showContractVersions) {
     cols = contractsTableColumns.filter((column) => {
@@ -29,12 +29,14 @@ export const ContractClassesTable: FC<Props> = ({
 
   return (
     <section className="relative mx-auto w-full transition-all">
-      <DataTable
-        isLoading={isLoading}
-        title={title}
-        data={contracts}
-        columns={cols}
-      />
+      <div className="space-y-4 bg-white rounded-lg p-5">
+        {title && <h3 className="ml-0.5">{title}</h3>}
+        <DataTable
+          isLoading={isLoading}
+          data={contracts}
+          columns={cols}
+        />
+      </div>
     </section>
   );
 };

services/explorer-ui/src/components/contracts/instances/table.tsx

@@ -18,8 +18,8 @@ export const ContractInstancesTable: FC<Props> = ({
   error,
   showContractVersions,
 }) => {
-  if (!contracts) return <div>No data</div>;
-  if (error) return <p className="text-red-500">{error.message}</p>;
+  if (!contracts) { return <div>No data</div>; }
+  if (error) { return <p className="text-red-500">{error.message}</p>; }
   let cols = contractsTableColumns;
   if (!showContractVersions) {
     cols = contractsTableColumns.filter((column) => {
@@ -28,12 +28,14 @@ export const ContractInstancesTable: FC<Props> = ({
   }
   return (
     <section className="relative mx-auto w-full transition-all">
-      <DataTable
-        isLoading={isLoading}
-        title={title}
-        data={contracts}
-        columns={cols}
-      />
+      <div className="space-y-4 bg-white rounded-lg p-5">
+        {title && <h3 className="ml-0.5">{title}</h3>}
+        <DataTable
+          isLoading={isLoading}
+          data={contracts}
+          columns={cols}
+        />
+      </div>
     </section>
   );
 };

services/explorer-ui/src/components/data-table/data-table.tsx

@@ -31,14 +31,12 @@ import { Loader } from "../loader";
 
 interface DataTableProps<TData, TValue> {
   isLoading?: boolean;
-  title?: string;
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   disableSizeSelector?: boolean;
 }
 export function DataTable<TData, TValue>({
   isLoading,
-  title,
   columns,
   data,
   disableSizeSelector,
@@ -82,8 +80,7 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <div className="space-y-4 bg-white rounded-lg p-5">
-      {title && <h3 className="ml-0.5">{title}</h3>}
+    <>
       <div className="min-w-full">
         {isLoading && <Loader amount={10} />}
         {!isLoading && (
@@ -98,7 +95,7 @@ export function DataTable<TData, TValue>({
         table={table}
         disableSizeSelector={disableSizeSelector}
       />
-    </div>
+    </>
   );
 }
 

services/explorer-ui/src/components/tx-effects/tx-effects-table.tsx

@@ -2,13 +2,15 @@ import { type FC } from "react";
 import { DataTable } from "~/components/data-table";
 import { TxEffectsTableColumns } from "./tx-effects-columns";
 import { type TxEffectTableSchema } from "./tx-effects-schema";
+import { Checkbox } from "../ui/checkbox";
 
 interface Props {
   title?: string;
   txEffects?: TxEffectTableSchema[];
   isLoading: boolean;
   error?: Error | null;
   disableSizeSelector?: boolean;
+  handleDisablePendingTx?: (checked: boolean) => void;
 }
 
 export const TxEffectsTable: FC<Props> = ({
@@ -17,18 +19,36 @@ export const TxEffectsTable: FC<Props> = ({
   isLoading,
   error,
   disableSizeSelector,
+  handleDisablePendingTx
 }) => {
-  if (!txEffects) return <div>No data</div>;
-  if (error) return <p className="text-red-500">{error.message}</p>;
+  if (!txEffects) { return <div>No data</div>; }
+  if (error) { return <p className="text-red-500">{error.message}</p>; }
   return (
     <section className="relative mx-0 w-full transition-all">
-      <DataTable
-        isLoading={isLoading}
-        title={title}
-        data={txEffects}
-        columns={TxEffectsTableColumns}
-        disableSizeSelector={disableSizeSelector}
-      />
+      <div className="space-y-4 bg-white rounded-lg p-5">
+        {title &&
+          <div className="flex flex-row justify-between">
+            <h3 className="ml-0.5">{title}</h3>
+            {handleDisablePendingTx &&
+              <div className="flex items-center space-x-2">
+                <Checkbox id="terms2" onCheckedChange={(checked) => handleDisablePendingTx(Boolean(checked))} defaultChecked={true} />
+                <label
+                  htmlFor="terms2"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  Show pending
+                </label>
+              </div>}
+          </div>
+        }
+
+        <DataTable
+          isLoading={isLoading}
+          data={txEffects}
+          columns={TxEffectsTableColumns}
+          disableSizeSelector={disableSizeSelector}
+        />
+      </div>
     </section>
   );
 };

services/explorer-ui/src/components/ui/checkbox.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { cn } from "~/lib/utils"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-[2px] border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

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

@@ -1,25 +1,22 @@
-import { useMemo, type FC } from "react";
+import { type FC } from "react";
 import { BlocksTable } from "~/components/blocks/blocks-table";
 import { InfoBadge } from "~/components/info-badge";
-import { type TxEffectTableSchema } from "~/components/tx-effects/tx-effects-schema";
-import { TxEffectsTable } from "~/components/tx-effects/tx-effects-table";
 import {
   HealthStatus,
   useAvarageBlockTime,
   useAvarageFees,
-  useGetLatestTxEffects,
   useLatestBlocks,
-  usePendingTxs,
   useSubTitle,
   useSystemHealth,
   useTotalContracts,
   useTotalContractsLast24h,
   useTotalTxEffects,
   useTotalTxEffectsLast24h,
 } from "~/hooks";
-import { mapLatestBlocks, mapLatestTxEffects } from "~/lib/map-for-table";
+import { mapLatestBlocks } from "~/lib/map-for-table";
 import { formatDuration, formatFees } from "~/lib/utils";
 import { routes } from "~/routes/__root";
+import { TxEffectTableLanding } from "./tx-effect-table-landing";
 
 export const Landing: FC = () => {
   const { systemHealth } = useSystemHealth();
@@ -57,38 +54,6 @@ export const Landing: FC = () => {
 
   useSubTitle(latestBlocks?.[0]?.height.toString() ?? routes.home.title);
 
-  const {
-    data: latestTxEffectsData,
-    isLoading: isLoadingTxEffects,
-    error: txEffectsError,
-  } = useGetLatestTxEffects();
-
-  const { data: pendingTxs } = usePendingTxs();
-
-  const latestTxEffectsWithPending = useMemo(() => {
-    if (!latestTxEffectsData) {
-      return [];
-    }
-    if (!latestBlocks) {
-      return [];
-    }
-    const disguisedPendingTxs =
-      pendingTxs?.reduce((acc, tx) => {
-        if (!latestTxEffectsData.some((effect) => effect.txHash === tx.hash)) {
-          acc.push({
-            txHash: tx.hash,
-            transactionFee: -1,
-            blockNumber: -1,
-            timestamp: tx.birthTimestamp ?? 0,
-          });
-        }
-        return acc;
-      }, [] as TxEffectTableSchema[]) ?? [];
-    return [
-      ...disguisedPendingTxs,
-      ...mapLatestTxEffects(latestTxEffectsData, latestBlocks),
-    ];
-  }, [pendingTxs, latestTxEffectsData, latestBlocks]);
 
   const averageBlockTimeFormatted = formatDuration(
     Number(avarageBlockTime) / 1000,
@@ -104,8 +69,8 @@ export const Landing: FC = () => {
     loadingAvarageFees ||
     loadingAmountContracts ||
     loadingAmountContracts24h ||
-    loadingAvarageBlockTime ||
-    isLoadingTxEffects;
+    loadingAvarageBlockTime;
+
   const isThereAnyComponentData =
     (latestBlocks?.length ?? 0) > 0 ||
     !!totalTxEffects ||
@@ -183,13 +148,7 @@ export const Landing: FC = () => {
               />
             </div>
             <div className="bg-white rounded-lg shadow-lg w-full md:w-1/2">
-              <TxEffectsTable
-                title="Latest TX-Effects"
-                txEffects={latestTxEffectsWithPending}
-                isLoading={isLoadingTxEffects}
-                error={txEffectsError}
-                disableSizeSelector={true}
-              />
+              <TxEffectTableLanding latestBlocks={latestBlocks} />
             </div>
           </div>
         </>

services/explorer-ui/src/pages/landing/tx-effect-table-landing.tsx

@@ -0,0 +1,63 @@
+import { type ChicmozL2BlockLight } from "@chicmoz-pkg/types"
+import { useMemo, useState, type FC } from "react"
+import { type TxEffectTableSchema } from "~/components/tx-effects/tx-effects-schema"
+import { TxEffectsTable } from "~/components/tx-effects/tx-effects-table"
+import { useGetLatestTxEffects, usePendingTxs } from "~/hooks"
+import { mapLatestTxEffects } from "~/lib/map-for-table"
+
+interface TxEffectTableLandingProps {
+  latestBlocks?: ChicmozL2BlockLight[];
+}
+
+export const TxEffectTableLanding: FC<TxEffectTableLandingProps> = ({ latestBlocks }) => {
+  const [showPendingTxs, setShowPendingTxs] = useState(true)
+  const { data: pendingTxs } = usePendingTxs();
+  const {
+    data: latestTxEffectsData,
+    isLoading: isLoadingTxEffects,
+    error: txEffectsError,
+  } = useGetLatestTxEffects();
+
+  const toggleShowPendingTx = (checked: boolean) => {
+    setShowPendingTxs(checked);
+  }
+
+  const latestTxEffectsWithPending = useMemo(() => {
+    if (!latestTxEffectsData) {
+      return [];
+    }
+    if (!latestBlocks) {
+      return [];
+    }
+    const disguisedPendingTxs =
+      pendingTxs?.reduce((acc, tx) => {
+        if (!latestTxEffectsData.some((effect) => effect.txHash === tx.hash)) {
+          acc.push({
+            txHash: tx.hash,
+            transactionFee: -1,
+            blockNumber: -1,
+            timestamp: tx.birthTimestamp ?? 0,
+          });
+        }
+        return acc;
+      }, [] as TxEffectTableSchema[]) ?? [];
+    return [
+      ...disguisedPendingTxs,
+      ...mapLatestTxEffects(latestTxEffectsData, latestBlocks),
+    ];
+  }, [pendingTxs, latestTxEffectsData, latestBlocks]);
+
+  const txEffectData = showPendingTxs ? latestTxEffectsWithPending : mapLatestTxEffects(latestTxEffectsData ?? [], latestBlocks ?? []);
+
+  return (
+    <>
+      <TxEffectsTable
+        txEffects={txEffectData}
+        isLoading={isLoadingTxEffects}
+        title="Latest Tx Effects"
+        error={txEffectsError}
+        disableSizeSelector={true}
+        handleDisablePendingTx={toggleShowPendingTx}
+      />
+    </>)
+}