[Dashboard] Improve user filtering functionality (#7572)

Co-authored-by: Cursor Agent <[email protected]>

Author: joaquim-verges

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

@@ -7,22 +7,34 @@ import { embeddedWalletsKeys } from "../query-keys/cache-keys";
 const fetchAccountList = ({
   jwt,
   clientId,
+  ecosystemSlug,
+  teamId,
   pageNumber,
 }: {
   jwt: string;
-  clientId: string;
+  clientId?: string;
+  ecosystemSlug?: string;
+  teamId: string;
   pageNumber: number;
 }) => {
   return async () => {
     const url = new URL(`${THIRDWEB_EWS_API_HOST}/api/2024-05-05/account/list`);
-    url.searchParams.append("clientId", clientId);
+
+    // Add clientId or ecosystemSlug parameter
+    if (ecosystemSlug) {
+      url.searchParams.append("ecosystemSlug", `ecosystem.${ecosystemSlug}`);
+    } else if (clientId) {
+      url.searchParams.append("clientId", clientId);
+    }
+
     url.searchParams.append("page", pageNumber.toString());
 
     const res = await fetch(url.href, {
       headers: {
         Authorization: `Bearer ${jwt}`,
         "Content-Type": "application/json",
-        "x-client-id": clientId,
+        "x-thirdweb-team-id": teamId,
+        ...(clientId && { "x-client-id": clientId }),
       },
       method: "GET",
     });
@@ -38,23 +50,27 @@ const fetchAccountList = ({
 };
 
 export function useEmbeddedWallets(params: {
-  clientId: string;
+  clientId?: string;
+  ecosystemSlug?: string;
+  teamId: string;
   page: number;
   authToken: string;
 }) {
-  const { clientId, page, authToken } = params;
+  const { clientId, ecosystemSlug, teamId, page, authToken } = params;
   const address = useActiveAccount()?.address;
 
   return useQuery({
-    enabled: !!address && !!clientId,
+    enabled: !!address && !!(clientId || ecosystemSlug),
     queryFn: fetchAccountList({
       clientId,
+      ecosystemSlug,
+      teamId,
       jwt: authToken,
       pageNumber: page,
     }),
     queryKey: embeddedWalletsKeys.embeddedWallets(
       address || "",
-      clientId,
+      clientId || ecosystemSlug || "",
       page,
     ),
   });
@@ -67,7 +83,15 @@ export function useAllEmbeddedWallets(params: { authToken: string }) {
   const address = useActiveAccount()?.address;
 
   return useMutation({
-    mutationFn: async ({ clientId }: { clientId: string }) => {
+    mutationFn: async ({
+      clientId,
+      ecosystemSlug,
+      teamId,
+    }: {
+      clientId?: string;
+      ecosystemSlug?: string;
+      teamId: string;
+    }) => {
       const responses: WalletUser[] = [];
       let page = 1;
 
@@ -77,12 +101,14 @@ export function useAllEmbeddedWallets(params: { authToken: string }) {
         }>({
           queryFn: fetchAccountList({
             clientId,
+            ecosystemSlug,
+            teamId,
             jwt: authToken,
             pageNumber: page,
           }),
           queryKey: embeddedWalletsKeys.embeddedWallets(
             address || "",
-            clientId,
+            clientId || ecosystemSlug || "",
             page,
           ),
         });

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx

@@ -62,6 +62,10 @@ export async function EcosystemLayoutSlug({
             name: "Analytics",
             path: `${ecosystemLayoutPath}/${ecosystem.slug}/analytics`,
           },
+          {
+            name: "Users",
+            path: `${ecosystemLayoutPath}/${ecosystem.slug}/users`,
+          },
           {
             name: "Design (coming soon)",
             path: `${ecosystemLayoutPath}/${ecosystem.slug}/#`,

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/users/page.tsx

@@ -0,0 +1,40 @@
+import { loginRedirect } from "@app/login/loginRedirect";
+import { InAppWalletUsersPageContent } from "@app/team/[team_slug]/[project_slug]/(sidebar)/wallets/users/components";
+import { redirect } from "next/navigation";
+import { getAuthToken } from "@/api/auth-token";
+import { fetchEcosystem } from "@/api/ecosystems";
+import { getTeamBySlug } from "@/api/team";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+
+export default async function EcosystemUsersPage(props: {
+  params: Promise<{ team_slug: string; slug: string }>;
+}) {
+  const params = await props.params;
+  const [authToken, ecosystem, team] = await Promise.all([
+    getAuthToken(),
+    fetchEcosystem(params.slug, params.team_slug),
+    getTeamBySlug(params.team_slug),
+  ]);
+
+  if (!authToken) {
+    loginRedirect(`/team/${params.team_slug}/~/ecosystem/${params.slug}/users`);
+  }
+
+  if (!ecosystem || !team) {
+    redirect(`/team/${params.team_slug}`);
+  }
+
+  const client = getClientThirdwebClient({
+    jwt: authToken,
+    teamId: team.id,
+  });
+
+  return (
+    <InAppWalletUsersPageContent
+      authToken={authToken}
+      client={client}
+      ecosystemSlug={ecosystem.slug}
+      teamId={team.id}
+    />
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/users/components/AdvancedSearchInput.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { SearchIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import type { SearchType } from "./types";
+
+export function AdvancedSearchInput(props: {
+  onSearch: (searchType: SearchType, query: string) => void;
+  onClear: () => void;
+  isLoading: boolean;
+  hasResults: boolean;
+}) {
+  const [searchType, setSearchType] = useState<SearchType>("email");
+  const [query, setQuery] = useState("");
+
+  const handleSearch = () => {
+    if (query.trim()) {
+      props.onSearch(searchType, query.trim());
+    }
+  };
+
+  const handleClear = () => {
+    setQuery("");
+    props.onClear();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-2">
+        <Select
+          value={searchType}
+          onValueChange={(value) => setSearchType(value as SearchType)}
+        >
+          <SelectTrigger className="w-[140px] bg-card">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="email">Email</SelectItem>
+            <SelectItem value="phone">Phone</SelectItem>
+            <SelectItem value="id">ID</SelectItem>
+            <SelectItem value="address">Address</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <div className="relative flex-1">
+          <Input
+            className="bg-card pl-9"
+            placeholder={`Search by ${searchType}...`}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+          <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
+        </div>
+
+        <Button
+          onClick={handleSearch}
+          disabled={!query.trim() || props.isLoading}
+          size="sm"
+        >
+          {props.isLoading ? "Searching..." : "Search"}
+        </Button>
+      </div>
+
+      {props.hasResults && (
+        <div className="flex justify-center">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleClear}
+            className="gap-2"
+          >
+            Clear Search & Return to List
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}