add error boundaries, fix lazy render of modules and fix padding in Date picker

Author: MananTank

apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx

@@ -69,14 +69,14 @@ export function DatePickerWithRange(props: {
         <DynamicHeight>
           <div>
             {!isValid && (
-              <p className="flex items-center justify-center gap-2 pt-2 text-center text-destructive-text text-sm">
+              <p className="flex items-center justify-center gap-2 py-2 text-center text-destructive-text text-sm">
                 <CalendarX2Icon className="h-4 w-4" />
                 Invalid date range
               </p>
             )}
             {props.header}
 
-            <div className="px-4">
+            <div className={cn("px-4", !props.header && "py-4")}>
               <TabButtons
                 tabClassName="!text-sm"
                 activeTabClassName="!bg-inverted !text-inverted-foreground"

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx

@@ -14,10 +14,12 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Skeleton } from "@/components/ui/skeleton";
+import * as Sentry from "@sentry/nextjs";
 import { useMutation } from "@tanstack/react-query";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { InfoIcon } from "lucide-react";
-import { Suspense, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
+import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 import { toast } from "sonner";
 import {
   type ContractOptions,
@@ -98,24 +100,30 @@ export function ModuleCard(props: ModuleCardProps) {
   return (
     <>
       <Suspense fallback={<GenericModuleLoadingSkeleton />}>
-        <ModuleInstance
-          contract={contract}
-          contractInfo={{
-            name: contractInfo.name,
-            description: contractInfo.description,
-            publisher: contractInfo.publisher,
-            version: contractInfo.version,
-          }}
-          ownerAccount={ownerAccount}
-          uninstallButton={{
-            onClick: () => {
-              setIsUninstallModalOpen(true);
-            },
-            isPending: uninstallMutation.isPending,
-          }}
-          moduleAddress={moduleAddress}
-          allModuleContractInfo={props.allModuleContractInfo}
-        />
+        <ErrorBoundary
+          FallbackComponent={(p) => (
+            <ModuleErrorBoundary moduleName={contractInfo.name} {...p} />
+          )}
+        >
+          <ModuleInstance
+            contract={contract}
+            contractInfo={{
+              name: contractInfo.name,
+              description: contractInfo.description,
+              publisher: contractInfo.publisher,
+              version: contractInfo.version,
+            }}
+            ownerAccount={ownerAccount}
+            uninstallButton={{
+              onClick: () => {
+                setIsUninstallModalOpen(true);
+              },
+              isPending: uninstallMutation.isPending,
+            }}
+            moduleAddress={moduleAddress}
+            allModuleContractInfo={props.allModuleContractInfo}
+          />
+        </ErrorBoundary>
       </Suspense>
 
       <Dialog
@@ -303,3 +311,25 @@ export function ModuleCardUI(props: ModuleCardUIProps) {
 function GenericModuleLoadingSkeleton() {
   return <Skeleton className="h-[190px] w-full border border-border" />;
 }
+
+function ModuleErrorBoundary(
+  props: FallbackProps & {
+    moduleName: string;
+  },
+) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    Sentry.withScope((scope) => {
+      scope.setTag("component-crashed", "true");
+      scope.setTag("component-crashed-boundary", "ModuleErrorBoundary");
+      scope.setLevel("fatal");
+      Sentry.captureException(props.error);
+    });
+  }, [props.error]);
+
+  return (
+    <div className="flex h-[190px] w-full items-center justify-center border border-border">
+      Failed to render {props.moduleName} module
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-instance.tsx

@@ -3,14 +3,14 @@
 import { lazy } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import type { Account } from "thirdweb/wallets";
-import BatchMetadataModule from "./BatchMetadata";
-import ClaimableModule from "./Claimable";
-import OpenEditionMetadataModule from "./OpenEditionMetadata";
 import { ModuleCardUI, type ModuleCardUIProps } from "./module-card";
 
 const MintableModule = lazy(() => import("./Mintable"));
 const TransferableModule = lazy(() => import("./Transferable"));
 const RoyaltyModule = lazy(() => import("./Royalty"));
+const BatchMetadataModule = lazy(() => import("./BatchMetadata"));
+const ClaimableModule = lazy(() => import("./Claimable"));
+const OpenEditionMetadataModule = lazy(() => import("./OpenEditionMetadata"));
 
 export type ModuleInstanceProps = Omit<
   ModuleCardUIProps,