chore: clean up for prod

Author: ElasticBottle

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

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { THIRDWEB_EWS_API_HOST } from "constants/urls";
 import type { WalletUser } from "thirdweb/wallets";
 import { embeddedWalletsKeys } from "../cache-keys";
@@ -17,8 +17,7 @@ export function useEmbeddedWallets(clientId: string, page: number) {
       const url = new URL(
         `${THIRDWEB_EWS_API_HOST}/api/2024-05-05/account/list`,
       );
-      // TODO: replace this with the real thing
-      url.searchParams.append("clientId", "5574e050c33e91d4526218dc7c7d2af0");
+      url.searchParams.append("clientId", clientId);
       url.searchParams.append("page", page.toString());
 
       const res = await fetch(url.href, {
@@ -33,12 +32,12 @@ export function useEmbeddedWallets(clientId: string, page: number) {
       }
 
       const json = await res.json();
-
       return json as {
         users: WalletUser[];
         totalPages: number;
       };
     },
+    placeholderData: keepPreviousData,
     enabled: !!user?.address && isLoggedIn && !!clientId,
   });
 }

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

@@ -10,14 +10,14 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useEmbeddedWallets } from "@3rdweb-sdk/react/hooks/useEmbeddedWallets";
+import { Spinner } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { TWTable } from "components/shared/TWTable";
 import { format } from "date-fns/format";
 import Papa from "papaparse";
 import { useCallback, useState } from "react";
 import type { WalletUser } from "thirdweb/wallets";
 
-const ACTIVE_THRESHOLD_DAYS = 30;
 const getUserIdentifier = (accounts: WalletUser["linkedAccounts"]) => {
   const mainDetail = accounts[0]?.details;
   return (
@@ -144,16 +144,20 @@ export const InAppWalletUsersPageContent = (props: {
             Download as .csv
           </Button>
 
-          {/* <div className="flex items-center justify-end gap-2">
-            <p className="text-muted-foreground text-sm">
-              Active last {ACTIVE_THRESHOLD_DAYS} days
-            </p>
-            <Switch checked={true} disabled={wallets.length === 0} />
-          </div> */}
+          <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="active in-app wallets"
+          title="in-app wallets"
           data={wallets}
           columns={columns}
           isPending={walletsQuery.isPending}