[BLD-108] Dashboard: Update Claim conditions UI to handle very large snapshots

Author: MananTank

apps/dashboard/package.json

@@ -43,7 +43,6 @@
     "next-themes": "^0.4.6",
     "nextjs-toploader": "^1.6.12",
     "nuqs": "^2.4.3",
-    "p-limit": "^6.2.0",
     "papaparse": "^5.5.3",
     "pluralize": "^8.0.0",
     "posthog-js": "1.256.1",

apps/dashboard/src/@/hooks/useCsvUpload.ts

@@ -1,5 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
-import pLimit from "p-limit";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import Papa from "papaparse";
 import { useCallback, useState } from "react";
 import { isAddress, type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
@@ -95,6 +94,7 @@ export function useCsvUpload<
   // Always gonna need the wallet address
   T extends { address: string },
 >(props: Props<T>) {
+  const queryClient = useQueryClient();
   const [rawData, setRawData] = useState<
     T[] | Array<T & { [key in string]: unknown }>
   >(props.defaultRawData || []);
@@ -132,16 +132,29 @@ export function useCsvUpload<
     [props.csvParser],
   );
 
+  const [normalizeProgress, setNormalizeProgress] = useState({
+    total: 0,
+    current: 0,
+  });
+
   const normalizeQuery = useQuery({
     queryFn: async () => {
-      const limit = pLimit(50);
-      const results = await Promise.all(
-        rawData.map((item) => {
-          return limit(() =>
+      const batchSize = 50;
+      const results = [];
+      for (let i = 0; i < rawData.length; i += batchSize) {
+        const batch = rawData.slice(i, i + batchSize);
+        setNormalizeProgress({
+          total: rawData.length,
+          current: i,
+        });
+        const batchResults = await Promise.all(
+          batch.map((item) =>
             checkIsAddress({ item: item, thirdwebClient: props.client }),
-          );
-        }),
-      );
+          ),
+        );
+        results.push(...batchResults);
+      }
+
       return {
         invalidFound: !!results.find((item) => !item?.isValid),
         result: processAirdropData(results),
@@ -153,12 +166,18 @@ export function useCsvUpload<
 
   const removeInvalid = useCallback(() => {
     const filteredData = normalizeQuery.data?.result.filter(
-      ({ isValid }) => isValid,
+      (d) => d.isValid && d.resolvedAddress !== ZERO_ADDRESS,
     );
-    // double type assertion is save here because we don't really use this variable (only check for its length)
-    // Also filteredData's type is the superset of T[]
-    setRawData(filteredData as unknown as T[]);
-  }, [normalizeQuery.data?.result]);
+
+    if (filteredData && normalizeQuery.data) {
+      // Directly update the query result instead of setting new state to avoid triggering refetch
+      queryClient.setQueryData(["snapshot-check-isAddress", rawData], {
+        ...normalizeQuery.data,
+        result: filteredData,
+        invalidFound: false, // Since we removed all invalid items
+      });
+    }
+  }, [normalizeQuery.data, queryClient, rawData]);
 
   const processData = useCallback(
     (data: T[]) => {
@@ -181,5 +200,6 @@ export function useCsvUpload<
     removeInvalid,
     reset,
     setFiles,
+    normalizeProgress,
   };
 }

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx

@@ -27,28 +27,31 @@ export const ClaimerSelection = () => {
     setOpenSnapshotIndex: setOpenIndex,
     isAdmin,
     claimConditionType,
+    phaseSnapshots,
+    setPhaseSnapshot,
   } = useClaimConditionsFormContext();
 
   const handleClaimerChange = (value: string) => {
     const val = value as "any" | "specific" | "overrides";
 
     if (val === "any") {
-      form.setValue(`phases.${phaseIndex}.snapshot`, undefined);
+      setPhaseSnapshot(phaseIndex, undefined);
     } else {
       if (val === "specific") {
         form.setValue(`phases.${phaseIndex}.maxClaimablePerWallet`, 0);
       }
       if (val === "overrides" && field.maxClaimablePerWallet !== 1) {
         form.setValue(`phases.${phaseIndex}.maxClaimablePerWallet`, 1);
       }
-      form.setValue(`phases.${phaseIndex}.snapshot`, []);
+      setPhaseSnapshot(phaseIndex, []);
       setOpenIndex(phaseIndex);
     }
   };
 
   let helperText: React.ReactNode;
 
   const disabledSnapshotButton = isAdmin && formDisabled;
+  const snapshot = phaseSnapshots[phaseIndex];
 
   if (dropType === "specific") {
     helperText = (
@@ -87,10 +90,7 @@ export const ClaimerSelection = () => {
 
   return (
     <FormFieldSetup
-      errorMessage={
-        form.getFieldState(`phases.${phaseIndex}.snapshot`, form.formState)
-          ?.error?.message
-      }
+      errorMessage={undefined}
       helperText={helperText}
       label={label}
       isRequired={false}
@@ -117,7 +117,7 @@ export const ClaimerSelection = () => {
         )}
 
         {/* Edit or See Snapshot */}
-        {field.snapshot ? (
+        {snapshot ? (
           <div className="flex items-center gap-3">
             {/* disable the "Edit" button when form is disabled, but not when it's a "See" button */}
             <Button
@@ -133,17 +133,16 @@ export const ClaimerSelection = () => {
             <div
               className={cn(
                 "flex gap-2 items-center",
-                field.snapshot?.length === 0
+                snapshot?.length === 0
                   ? "text-muted-foreground"
                   : "text-green-600 dark:text-green-500",
                 disabledSnapshotButton ? "opacity-50" : "",
               )}
             >
               <div className="size-2 bg-current rounded-full" />
               <span className="text-sm">
-                {field.snapshot?.length}{" "}
-                {field.snapshot?.length === 1 ? "address" : "addresses"} in
-                snapshot
+                {snapshot?.length}{" "}
+                {snapshot?.length === 1 ? "address" : "addresses"} in snapshot
               </span>
             </div>
           </div>