fix: enable download of all user data at once

Author: ElasticBottle

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

@@ -1,9 +1,43 @@
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import { THIRDWEB_EWS_API_HOST } from "constants/urls";
 import type { WalletUser } from "thirdweb/wallets";
 import { embeddedWalletsKeys } from "../cache-keys";
 import { useLoggedInUser } from "./useLoggedInUser";
 
+const fetchAccountList = ({
+  jwt,
+  clientId,
+  pageNumber,
+}: { jwt: string; clientId: string; pageNumber: number }) => {
+  return async () => {
+    const url = new URL(`${THIRDWEB_EWS_API_HOST}/api/2024-05-05/account/list`);
+    url.searchParams.append("clientId", clientId);
+    url.searchParams.append("page", pageNumber.toString());
+
+    const res = await fetch(url.href, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${jwt}`,
+      },
+    });
+    if (!res.ok) {
+      throw new Error(`Failed to fetch wallets: ${await res.text()}`);
+    }
+
+    const json = await res.json();
+    return json as {
+      users: WalletUser[];
+      totalPages: number;
+    };
+  };
+};
+
 export function useEmbeddedWallets(clientId: string, page: number) {
   const { user, isLoggedIn } = useLoggedInUser();
 
@@ -13,31 +47,45 @@ export function useEmbeddedWallets(clientId: string, page: number) {
       clientId,
       page,
     ),
-    queryFn: async () => {
-      const url = new URL(
-        `${THIRDWEB_EWS_API_HOST}/api/2024-05-05/account/list`,
-      );
-      url.searchParams.append("clientId", clientId);
-      url.searchParams.append("page", page.toString());
+    queryFn: fetchAccountList({
+      jwt: user?.jwt ?? "",
+      clientId,
+      pageNumber: page,
+    }),
+    placeholderData: keepPreviousData,
+    enabled: !!user?.address && isLoggedIn && !!clientId,
+  });
+}
 
-      const res = await fetch(url.href, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${user?.jwt}`,
-        },
-      });
-      if (!res.ok) {
-        throw new Error(`Failed to fetch wallets: ${await res.text()}`);
+export function useAllEmbeddedWallets() {
+  const queryClient = useQueryClient();
+  const { user } = useLoggedInUser();
+  return useMutation({
+    mutationFn: async ({
+      clientId,
+      totalPages,
+    }: { clientId: string; totalPages: number }) => {
+      const walletRes = [];
+      console.log("queryClient", queryClient);
+      for (let page = 1; page <= totalPages; page++) {
+        const res = queryClient.fetchQuery<{
+          users: WalletUser[];
+          totalPages: number;
+        }>({
+          queryKey: embeddedWalletsKeys.embeddedWallets(
+            user?.address as string,
+            clientId,
+            page,
+          ),
+          queryFn: fetchAccountList({
+            jwt: user?.jwt ?? "",
+            clientId,
+            pageNumber: page,
+          }),
+        });
+        walletRes.push(res);
       }
-
-      const json = await res.json();
-      return json as {
-        users: WalletUser[];
-        totalPages: number;
-      };
+      return (await Promise.all(walletRes)).flatMap((res) => res.users);
     },
-    placeholderData: keepPreviousData,
-    enabled: !!user?.address && isLoggedIn && !!clientId,
   });
 }

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

@@ -2,15 +2,18 @@
 
 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 {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useEmbeddedWallets } from "@3rdweb-sdk/react/hooks/useEmbeddedWallets";
-import { Spinner } from "@chakra-ui/react";
+import {
+  useAllEmbeddedWallets,
+  useEmbeddedWallets,
+} from "@3rdweb-sdk/react/hooks/useEmbeddedWallets";
 import { createColumnHelper } from "@tanstack/react-table";
 import { TWTable } from "components/shared/TWTable";
 import { format } from "date-fns/format";
@@ -104,22 +107,28 @@ export const InAppWalletUsersPageContent = (props: {
     users: [],
     totalPages: 1,
   };
+  const { mutateAsync: getAllEmbeddedWallets, isPending } =
+    useAllEmbeddedWallets();
 
-  // TODO: Make the download CSV grab all data instead of merely what's on the current page
-  const downloadCSV = useCallback(() => {
-    if (wallets.length === 0) {
+  const downloadCSV = useCallback(async () => {
+    if (wallets.length === 0 || !getAllEmbeddedWallets) {
       return;
     }
+    const usersWallets = await getAllEmbeddedWallets({
+      clientId: props.clientId,
+      totalPages,
+    });
     const csv = Papa.unparse(
-      wallets.map((row) => ({
-        user_identifier: getUserIdentifier(row.linkedAccounts),
-        address: row.wallets[0]?.address || "",
-        created: format(
-          new Date(row.wallets[0]?.createdAt ?? ""),
-          "MMM dd, yyyy",
-        ),
-        login_methods: row.linkedAccounts.map((acc) => acc.type).join(", "),
-      })),
+      usersWallets.map((row) => {
+        return {
+          user_identifier: getUserIdentifier(row.linkedAccounts),
+          address: row.wallets[0]?.address || "Uninitialized",
+          created: row.wallets[0]?.createdAt
+            ? format(new Date(row.wallets[0].createdAt), "MMM dd, yyyy")
+            : "Wallet not created yet",
+          login_methods: row.linkedAccounts.map((acc) => acc.type).join(", "),
+        };
+      }),
     );
     const csvUrl = URL.createObjectURL(
       new Blob([csv], { type: "text/csv;charset=utf-8;" }),
@@ -128,19 +137,21 @@ export const InAppWalletUsersPageContent = (props: {
     tempLink.href = csvUrl;
     tempLink.setAttribute("download", "download.csv");
     tempLink.click();
-  }, [wallets]);
+  }, [wallets, props.clientId, totalPages, getAllEmbeddedWallets]);
 
   return (
     <div>
       <div className="flex flex-col gap-6">
         {/* Top section */}
         <div className="flex items-center justify-between">
           <Button
-            disabled={wallets.length === 0}
+            disabled={wallets.length === 0 || isPending}
             variant="outline"
             onClick={downloadCSV}
             size="sm"
+            className="gap-2"
           >
+            {isPending && <Spinner className="size-4" />}
             Download as .csv
           </Button>