Add external wallet filter and display (#7669)

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

Author: joaquim-verges

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

@@ -55,6 +55,7 @@ export function AdvancedSearchInput(props: {
             <SelectItem value="phone">Phone</SelectItem>
             <SelectItem value="id">ID</SelectItem>
             <SelectItem value="address">Address</SelectItem>
+            <SelectItem value="externalWallet">External Wallet</SelectItem>
           </SelectContent>
         </Select>
 

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

@@ -52,6 +52,11 @@ export function SearchResults(props: {
         const email = mainDetail?.email as string | undefined;
         const phone = mainDetail?.phone as string | undefined;
 
+        // Get external wallet addresses from linkedAccounts where type is 'siwe'
+        const externalWalletAccounts =
+          user.linkedAccounts?.filter((account) => account.type === "siwe") ||
+          [];
+
         return (
           <Card key={user.id}>
             <CardHeader>
@@ -96,6 +101,29 @@ export function SearchResults(props: {
                   </div>
                 )}
 
+                {externalWalletAccounts.length > 0 && (
+                  <div className="col-span-full">
+                    <p className="text-sm font-medium text-muted-foreground">
+                      External Wallets
+                    </p>
+                    <div className="space-y-1">
+                      {externalWalletAccounts.map((account, index) => {
+                        const address = account.details?.address as
+                          | string
+                          | undefined;
+                        return address ? (
+                          <div key={`${user.id}-external-${index}`}>
+                            <WalletAddress
+                              address={address}
+                              client={props.client}
+                            />
+                          </div>
+                        ) : null;
+                      })}
+                    </div>
+                  </div>
+                )}
+
                 {createdAt && (
                   <div>
                     <p className="text-sm font-medium text-muted-foreground">

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

@@ -36,6 +36,10 @@ const getUserIdentifier = (accounts: WalletUser["linkedAccounts"]) => {
   );
 };
 
+const getExternalWallets = (accounts: WalletUser["linkedAccounts"]) => {
+  return accounts?.filter((account) => account.type === "siwe") || [];
+};
+
 const columnHelper = createColumnHelper<WalletUser>();
 
 export function InAppWalletUsersPageContent(
@@ -69,6 +73,36 @@ export function InAppWalletUsersPageContent(
         header: "Address",
         id: "address",
       }),
+      columnHelper.accessor("linkedAccounts", {
+        cell: (cell) => {
+          const externalWallets = getExternalWallets(cell.getValue());
+          if (externalWallets.length === 0) {
+            return <span className="text-muted-foreground text-xs">None</span>;
+          }
+          return (
+            <div className="space-y-1">
+              {externalWallets.slice(0, 2).map((account) => {
+                const address = account.details?.address as string | undefined;
+                return address ? (
+                  <div
+                    key={`external-${address}-${account.details?.id}`}
+                    className="text-xs"
+                  >
+                    <WalletAddress address={address} client={props.client} />
+                  </div>
+                ) : null;
+              })}
+              {externalWallets.length > 2 && (
+                <span className="text-muted-foreground text-xs">
+                  +{externalWallets.length - 2} more
+                </span>
+              )}
+            </div>
+          );
+        },
+        header: "External Wallets",
+        id: "external_wallets",
+      }),
       columnHelper.accessor("wallets", {
         cell: (cell) => {
           const value = cell.getValue()[0]?.createdAt;
@@ -172,11 +206,18 @@ export function InAppWalletUsersPageContent(
     });
     const csv = Papa.unparse(
       usersWallets.map((row) => {
+        const externalWallets = getExternalWallets(row.linkedAccounts);
+        const externalWalletAddresses = externalWallets
+          .map((account) => account.details?.address)
+          .filter(Boolean)
+          .join(", ");
+
         return {
           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",
+          external_wallets: externalWalletAddresses || "None",
           login_methods: row.linkedAccounts.map((acc) => acc.type).join(", "),
           user_identifier: getUserIdentifier(row.linkedAccounts),
         };

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

@@ -33,6 +33,9 @@ export async function searchUsers(
     case "address":
       url.searchParams.append("address", query);
       break;
+    case "externalWallet":
+      url.searchParams.append("externalWalletAddress", query);
+      break;
   }
 
   const response = await fetch(url.toString(), {

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

@@ -1 +1,6 @@
-export type SearchType = "email" | "phone" | "id" | "address";
+export type SearchType =
+  | "email"
+  | "phone"
+  | "id"
+  | "address"
+  | "externalWallet";