[TOOL-3528] Dasboard: Fix in-app users CSV downloads empty file (#6342)

Author: MananTank

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEmbeddedWallets.ts

@@ -1,9 +1,4 @@
-import {
-  keepPreviousData,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { THIRDWEB_EWS_API_HOST } from "constants/urls";
 import { useActiveAccount } from "thirdweb/react";
 import type { WalletUser } from "thirdweb/wallets";
@@ -33,7 +28,6 @@ const fetchAccountList = ({
     const json = await res.json();
     return json as {
       users: WalletUser[];
-      totalPages: number;
     };
   };
 };
@@ -57,11 +51,11 @@ export function useEmbeddedWallets(params: {
       clientId,
       pageNumber: page,
     }),
-    placeholderData: keepPreviousData,
     enabled: !!address && !!clientId,
   });
 }
 
+// TODO: fetching list of all users needs to be improved
 export function useAllEmbeddedWallets(params: {
   authToken: string;
 }) {
@@ -70,15 +64,13 @@ export function useAllEmbeddedWallets(params: {
   const address = useActiveAccount()?.address;
 
   return useMutation({
-    mutationFn: async ({
-      clientId,
-      totalPages,
-    }: { clientId: string; totalPages: number }) => {
-      const walletRes = [];
-      for (let page = 1; page <= totalPages; page++) {
-        const res = queryClient.fetchQuery<{
+    mutationFn: async ({ clientId }: { clientId: string }) => {
+      const responses: WalletUser[] = [];
+      let page = 1;
+
+      while (true) {
+        const res = await queryClient.fetchQuery<{
           users: WalletUser[];
-          totalPages: number;
         }>({
           queryKey: embeddedWalletsKeys.embeddedWallets(
             address || "",
@@ -91,9 +83,16 @@ export function useAllEmbeddedWallets(params: {
             pageNumber: page,
           }),
         });
-        walletRes.push(res);
+
+        if (res.users.length === 0) {
+          break;
+        }
+
+        page++;
+        responses.push(...res.users);
       }
-      return (await Promise.all(walletRes)).flatMap((res) => res.users);
+
+      return responses;
     },
   });
 }

apps/dashboard/src/components/embedded-wallets/Users/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { WalletAddress } from "@/components/blocks/wallet-address";
-import { PaginationButtons } from "@/components/pagination-buttons";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import {
@@ -17,6 +16,7 @@ import {
 import { createColumnHelper } from "@tanstack/react-table";
 import { TWTable } from "components/shared/TWTable";
 import { format } from "date-fns/format";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 import Papa from "papaparse";
 import { useCallback, useState } from "react";
 import type { WalletUser } from "thirdweb/wallets";
@@ -97,21 +97,18 @@ const columns = [
   }),
 ];
 
-export const InAppWalletUsersPageContent = (props: {
+export function InAppWalletUsersPageContent(props: {
   clientId: string;
   trackingCategory: string;
   authToken: string;
-}) => {
+}) {
   const [activePage, setActivePage] = useState(1);
   const walletsQuery = useEmbeddedWallets({
     authToken: props.authToken,
     clientId: props.clientId,
     page: activePage,
   });
-  const { users: wallets, totalPages } = walletsQuery?.data || {
-    users: [],
-    totalPages: 1,
-  };
+  const wallets = walletsQuery?.data?.users || [];
   const { mutateAsync: getAllEmbeddedWallets, isPending } =
     useAllEmbeddedWallets({
       authToken: props.authToken,
@@ -123,7 +120,6 @@ export const InAppWalletUsersPageContent = (props: {
     }
     const usersWallets = await getAllEmbeddedWallets({
       clientId: props.clientId,
-      totalPages,
     });
     const csv = Papa.unparse(
       usersWallets.map((row) => {
@@ -144,13 +140,13 @@ export const InAppWalletUsersPageContent = (props: {
     tempLink.href = csvUrl;
     tempLink.setAttribute("download", "download.csv");
     tempLink.click();
-  }, [wallets, props.clientId, totalPages, getAllEmbeddedWallets]);
+  }, [wallets, props.clientId, getAllEmbeddedWallets]);
 
   return (
     <div>
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-4">
         {/* Top section */}
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-end">
           <Button
             disabled={wallets.length === 0 || isPending}
             variant="outline"
@@ -161,35 +157,42 @@ export const InAppWalletUsersPageContent = (props: {
             {isPending && <Spinner className="size-4" />}
             Download as .csv
           </Button>
-
-          <div className="flex items-center justify-end gap-2">
-            {walletsQuery.isPlaceholderData && (
-              <>
-                <Spinner className="size-4" />
-                <p className="text-muted-foreground text-sm">
-                  Loading page {activePage} of {totalPages}
-                </p>
-              </>
-            )}
-          </div>
         </div>
 
-        <TWTable
-          title="in-app wallets"
-          data={wallets}
-          columns={columns}
-          isPending={walletsQuery.isPending}
-          isFetched={walletsQuery.isFetched}
-        />
-
-        {totalPages > 1 && (
-          <PaginationButtons
-            activePage={activePage}
-            onPageClick={setActivePage}
-            totalPages={totalPages}
+        <div>
+          <TWTable
+            title="in-app wallets"
+            data={wallets}
+            columns={columns}
+            isPending={walletsQuery.isPending}
+            isFetched={walletsQuery.isFetched}
+            tableContainerClassName="rounded-b-none"
           />
-        )}
+
+          <div className="flex justify-center gap-3 rounded-b-lg border border-t-0 bg-card p-6">
+            <Button
+              variant="outline"
+              size="sm"
+              className="gap-2 bg-background"
+              onClick={() => setActivePage((p) => Math.max(1, p - 1))}
+              disabled={activePage === 1 || walletsQuery.isPending}
+            >
+              <ArrowLeft className="size-4" />
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="gap-2 bg-background"
+              onClick={() => setActivePage((p) => p + 1)}
+              disabled={wallets.length === 0 || walletsQuery.isPending}
+            >
+              Next
+              <ArrowRight className="size-4" />
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
   );
-};
+}

apps/dashboard/src/components/shared/TWTable.tsx

@@ -252,10 +252,10 @@ export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {
       {!tableProps.isPending &&
         tableProps.data.length === 0 &&
         tableProps.isFetched && (
-          <div className="flex items-center justify-center">
+          <div className="flex items-center justify-center py-16">
             <div className="flex items-center gap-4 py-4">
               <p className="text-muted-foreground text-sm">
-                No {pluralize(tableProps.title, 0, false)} found.
+                No {pluralize(tableProps.title, 0, false)} found
               </p>
             </div>
           </div>