[feat] Add manage-names pagination (#2566)

* Revert fetch size, add pagination

* Remove sample data

* Cleanup

* Address PR comments, make stack based page history more clear

* Fix lint errors

Author: stevieraykatz

apps/web/app/(basenames)/api/basenames/getUsernames/route.ts

@@ -14,15 +14,20 @@ export async function GET(request: NextRequest) {
     return NextResponse.json({ error: 'Invalid network provided' }, { status: 400 });
   }
 
-  const response = await fetch(
-    `https://${cdpBaseUri}/platform/v1/networks/${network}/addresses/${address}/identity?limit=100`,
-    {
-      headers: {
-        Authorization: `Bearer ${process.env.CDP_BEARER_TOKEN}`,
-        'Content-Type': 'application/json',
-      },
+  const page = request.nextUrl.searchParams.get('page');
+
+  // Build the URL with pagination parameter if provided
+  let url = `https://${cdpBaseUri}/platform/v1/networks/${network}/addresses/${address}/identity?limit=50`;
+  if (page) {
+    url += `&page=${page}`;
+  }
+
+  const response = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${process.env.CDP_BEARER_TOKEN}`,
+      'Content-Type': 'application/json',
     },
-  );
+  });
 
   const data = (await response.json()) as ManagedAddressesResponse;
 

apps/web/src/components/Basenames/ManageNames/NamesList.tsx

@@ -30,7 +30,18 @@ function NamesLayout({ children }: { children: React.ReactNode }) {
 }
 
 export default function NamesList() {
-  const { namesData, isLoading, error, refetch } = useNameList();
+  const {
+    namesData,
+    isLoading,
+    error,
+    refetch,
+    goToNextPage,
+    goToPreviousPage,
+    hasPrevious,
+    hasNext,
+    totalCount,
+    currentPageNumber,
+  } = useNameList();
   const { logError } = useErrors();
 
   const refetchNames = useCallback(() => {
@@ -86,6 +97,45 @@ export default function NamesList() {
           />
         ))}
       </ul>
+
+      {/* Pagination Controls */}
+      {(hasPrevious || hasNext) && (
+        <div className="mt-8 flex flex-col gap-4">
+          {/* Page indicator */}
+          <div className="text-center text-sm text-palette-foregroundMuted">
+            Page {currentPageNumber} • {totalCount} total names
+          </div>
+
+          {/* Navigation buttons */}
+          <div className="flex justify-center gap-4">
+            <button
+              type="button"
+              onClick={goToPreviousPage}
+              disabled={!hasPrevious}
+              className={`flex w-20 items-center justify-center gap-1 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+                hasPrevious
+                  ? 'hover:bg-blue-700 bg-blue-600 text-white'
+                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+              }`}
+            >
+              Prev
+            </button>
+
+            <button
+              type="button"
+              onClick={goToNextPage}
+              disabled={!hasNext}
+              className={`flex w-20 items-center justify-center gap-1 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+                hasNext
+                  ? 'hover:bg-blue-700 bg-blue-600 text-white'
+                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+              }`}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
     </NamesLayout>
   );
 }

apps/web/src/components/Basenames/ManageNames/hooks.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useErrors } from 'apps/web/contexts/Errors';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useAccount, useChainId } from 'wagmi';
@@ -11,6 +11,11 @@ export function useNameList() {
   const chainId = useChainId();
   const { logError } = useErrors();
 
+  // Pagination state - need to maintain a stack of page tokens for proper back navigation
+  const [currentPage, setCurrentPage] = useState<string | null>(null);
+  const [pageStack, setPageStack] = useState<(string | null)[]>([null]); // Stack of page tokens for history
+  const [pageNumber, setPageNumber] = useState<number>(1);
+
   const network = chainId === 8453 ? 'base-mainnet' : 'base-sepolia';
 
   const {
@@ -19,12 +24,15 @@ export function useNameList() {
     error,
     refetch,
   } = useQuery<ManagedAddressesResponse>({
-    queryKey: ['usernames', address, network],
+    queryKey: ['usernames', address, network, currentPage],
     queryFn: async (): Promise<ManagedAddressesResponse> => {
       try {
-        const response = await fetch(
-          `/api/basenames/getUsernames?address=${address}&network=${network}`,
-        );
+        let url = `/api/basenames/getUsernames?address=${address}&network=${network}`;
+        if (currentPage) {
+          url += `&page=${currentPage}`;
+        }
+
+        const response = await fetch(url);
         if (!response.ok) {
           throw new Error(`Failed to fetch usernames: ${response.statusText}`);
         }
@@ -37,7 +45,61 @@ export function useNameList() {
     enabled: !!address,
   });
 
-  return { namesData, isLoading, error, refetch };
+  // Navigation functions
+  const goToNextPage = useCallback(() => {
+    if (namesData?.has_more && namesData?.next_page) {
+      // Push current page to history stack and move to next page
+      setPageStack((prev) => [...prev, currentPage]);
+      setCurrentPage(namesData.next_page);
+      setPageNumber((prev) => prev + 1);
+    }
+  }, [namesData?.has_more, namesData?.next_page, currentPage]);
+
+  const goToPreviousPage = useCallback(() => {
+    if (pageStack.length > 1) {
+      // Pop from stack to get the page token to go back to
+      const newStack = [...pageStack];
+      const targetPageToken = newStack.pop(); // This is the page we want to go back to
+
+      if (targetPageToken !== undefined) {
+        setPageStack(newStack);
+        setCurrentPage(targetPageToken);
+        setPageNumber((prev) => prev - 1);
+      }
+    }
+  }, [pageStack]);
+
+  const resetPagination = useCallback(() => {
+    setCurrentPage(null);
+    setPageStack([null]);
+    setPageNumber(1);
+  }, []);
+
+  // Pagination info
+  const totalCount = namesData?.total_count ?? 0;
+  const hasPrevious = pageStack.length > 1;
+  const hasNext = namesData?.has_more ?? false;
+  const currentPageNumber = pageNumber;
+
+  // Reset pagination when component mounts or address/network changes
+  useEffect(() => {
+    resetPagination();
+  }, [address, network, resetPagination]);
+
+  return {
+    namesData,
+    isLoading,
+    error,
+    refetch,
+    // Pagination
+    goToNextPage,
+    goToPreviousPage,
+    resetPagination,
+    hasPrevious,
+    hasNext,
+    totalCount,
+    currentPageNumber,
+  };
 }
 
 export function useRemoveNameFromUI(domain: Basename) {