Add CSV export progress for user wallets

Track and display progress while exporting all user wallets to CSV. Introduces csvExportProgress state and a csvExportLabel to show preparation/export percentage or counts. Splits useAllEmbeddedWallets usage into two instances (one for balances, one for CSV) to avoid conflating loading states. Updates downloadCSV to call getAllEmbeddedWalletsForCsv with an onProgress callback, set progress before fetching and clear it in finally. Extends useAllEmbeddedWallets/fetchAccountList to surface pagination totalCount and invoke onProgress with fetchedWallets/totalWallets during paging.

Author: 0xFirekeeper

apps/dashboard/src/@/components/in-app-wallet-users-content/user-wallets-table.tsx

@@ -104,6 +104,10 @@ export function UserWalletsTable(
     completed: 0,
     total: 0,
   });
+  const [csvExportProgress, setCsvExportProgress] = useState<{
+    fetchedWallets: number;
+    totalWallets?: number;
+  }>();
 
   const walletsQuery = useEmbeddedWallets({
     authToken: props.authToken,
@@ -113,10 +117,18 @@ export function UserWalletsTable(
     page: activePage,
   });
   const wallets = walletsQuery?.data?.users || [];
-  const { mutateAsync: getAllEmbeddedWallets, isPending: isLoadingAllWallets } =
-    useAllEmbeddedWallets({
-      authToken: props.authToken,
-    });
+  const {
+    mutateAsync: getAllEmbeddedWalletsForBalances,
+    isPending: isLoadingWalletsForBalances,
+  } = useAllEmbeddedWallets({
+    authToken: props.authToken,
+  });
+  const {
+    mutateAsync: getAllEmbeddedWalletsForCsv,
+    isPending: isLoadingWalletsForCsv,
+  } = useAllEmbeddedWallets({
+    authToken: props.authToken,
+  });
 
   const fetchPortfoliosMutation = useFetchAllPortfolios();
 
@@ -125,7 +137,7 @@ export function UserWalletsTable(
 
     try {
       // First get all wallets
-      const allWallets = await getAllEmbeddedWallets({
+      const allWallets = await getAllEmbeddedWalletsForBalances({
         clientId: props.projectClientId,
         ecosystemSlug: props.ecosystemSlug,
         teamId: props.teamId,
@@ -161,7 +173,7 @@ export function UserWalletsTable(
     }
   }, [
     selectedChains,
-    getAllEmbeddedWallets,
+    getAllEmbeddedWalletsForBalances,
     props.projectClientId,
     props.ecosystemSlug,
     props.teamId,
@@ -170,7 +182,32 @@ export function UserWalletsTable(
   ]);
 
   const isFetchingBalances =
-    isLoadingAllWallets || fetchPortfoliosMutation.isPending;
+    isLoadingWalletsForBalances || fetchPortfoliosMutation.isPending;
+
+  const csvExportLabel = useMemo(() => {
+    if (!isLoadingWalletsForCsv) {
+      return "Download as .csv";
+    }
+
+    const fetchedWallets = csvExportProgress?.fetchedWallets ?? 0;
+    const totalWallets = csvExportProgress?.totalWallets;
+
+    if (fetchedWallets === 0) {
+      return "Preparing export...";
+    }
+
+    if (totalWallets && totalWallets > 0) {
+      const cappedFetchedWallets = Math.min(fetchedWallets, totalWallets);
+      const percentage = Math.min(
+        100,
+        Math.round((cappedFetchedWallets / totalWallets) * 100),
+      );
+
+      return `Exporting ${percentage}% (${cappedFetchedWallets.toLocaleString()}/${totalWallets.toLocaleString()})`;
+    }
+
+    return `Exporting ${fetchedWallets.toLocaleString()} users...`;
+  }, [csvExportProgress, isLoadingWalletsForCsv]);
 
   const aggregatedStats = useMemo(() => {
     let fundedWallets = 0;
@@ -414,41 +451,48 @@ export function UserWalletsTable(
   };
 
   const downloadCSV = useCallback(async () => {
-    if (wallets.length === 0 || !getAllEmbeddedWallets) {
+    if (wallets.length === 0) {
       return;
     }
-    const usersWallets = await getAllEmbeddedWallets({
-      clientId: props.projectClientId,
-      ecosystemSlug: props.ecosystemSlug,
-      teamId: props.teamId,
-    });
-    const csv = Papa.unparse(
-      usersWallets.map((row) => {
-        const email = getPrimaryEmail(row.linkedAccounts);
-
-        return {
-          address: row.wallets[0]?.address || "Uninitialized",
-          created: row.wallets[0]?.createdAt
-            ? new Date(row.wallets[0].createdAt).toISOString()
-            : "Wallet not created yet",
-          email: email || "N/A",
-          login_methods: row.linkedAccounts.map((acc) => acc.type).join(", "),
-          auth_identifier: getAuthIdentifier(row.linkedAccounts) || "N/A",
-          user_identifier: row.id || "N/A",
-        };
-      }),
-    );
-    const csvUrl = URL.createObjectURL(
-      new Blob([csv], { type: "text/csv;charset=utf-8;" }),
-    );
-    const tempLink = document.createElement("a");
-    tempLink.href = csvUrl;
-    tempLink.setAttribute("download", "download.csv");
-    tempLink.click();
+    setCsvExportProgress({ fetchedWallets: 0 });
+
+    try {
+      const usersWallets = await getAllEmbeddedWalletsForCsv({
+        clientId: props.projectClientId,
+        ecosystemSlug: props.ecosystemSlug,
+        teamId: props.teamId,
+        onProgress: setCsvExportProgress,
+      });
+      const csv = Papa.unparse(
+        usersWallets.map((row) => {
+          const email = getPrimaryEmail(row.linkedAccounts);
+
+          return {
+            address: row.wallets[0]?.address || "Uninitialized",
+            created: row.wallets[0]?.createdAt
+              ? new Date(row.wallets[0].createdAt).toISOString()
+              : "Wallet not created yet",
+            email: email || "N/A",
+            login_methods: row.linkedAccounts.map((acc) => acc.type).join(", "),
+            auth_identifier: getAuthIdentifier(row.linkedAccounts) || "N/A",
+            user_identifier: row.id || "N/A",
+          };
+        }),
+      );
+      const csvUrl = URL.createObjectURL(
+        new Blob([csv], { type: "text/csv;charset=utf-8;" }),
+      );
+      const tempLink = document.createElement("a");
+      tempLink.href = csvUrl;
+      tempLink.setAttribute("download", "download.csv");
+      tempLink.click();
+    } finally {
+      setCsvExportProgress(undefined);
+    }
   }, [
     wallets,
     props.projectClientId,
-    getAllEmbeddedWallets,
+    getAllEmbeddedWalletsForCsv,
     props.teamId,
     props.ecosystemSlug,
   ]);
@@ -481,12 +525,12 @@ export function UserWalletsTable(
           </div>
           <Button
             className="gap-2 bg-background rounded-full"
-            disabled={wallets.length === 0 || isLoadingAllWallets}
+            disabled={wallets.length === 0 || isLoadingWalletsForCsv}
             onClick={downloadCSV}
             variant="outline"
           >
-            {isLoadingAllWallets && <Spinner className="size-4" />}
-            Download as .csv
+            {isLoadingWalletsForCsv && <Spinner className="size-4" />}
+            {csvExportLabel}
           </Button>
         </div>
       </div>

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

@@ -68,6 +68,7 @@ const fetchAccountList = ({
       return {
         users: response.data.result.wallets.map(transformToWalletUser),
         hasMore: response.data.result.pagination.hasMore ?? false,
+        totalCount: response.data.result.pagination.totalCount,
       };
     } catch (error) {
       console.error("Failed to fetch wallets:", error);
@@ -170,10 +171,15 @@ export function useAllEmbeddedWallets(params: { authToken: string }) {
       clientId,
       ecosystemSlug,
       teamId,
+      onProgress,
     }: {
       clientId?: string;
       ecosystemSlug?: string;
       teamId: string;
+      onProgress?: (progress: {
+        fetchedWallets: number;
+        totalWallets?: number;
+      }) => void;
     }) => {
       const responses: WalletUser[] = [];
       let page = 1;
@@ -185,6 +191,7 @@ export function useAllEmbeddedWallets(params: { authToken: string }) {
           const res = await queryClient.fetchQuery<{
             users: WalletUser[];
             hasMore: boolean;
+            totalCount?: number;
           }>({
             queryFn: fetchAccountList({
               clientId,
@@ -204,6 +211,10 @@ export function useAllEmbeddedWallets(params: { authToken: string }) {
           });
 
           responses.push(...res.users);
+          onProgress?.({
+            fetchedWallets: responses.length,
+            totalWallets: res.totalCount,
+          });
           consecutiveFailures = 0; // Reset on success
 
           if (!res.hasMore) {