use the pagination link directly for links.prev and links.next (#1959)

Author: jeesunikim

src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractStorage.tsx

@@ -57,7 +57,7 @@ export const ContractStorage = ({
   const { transaction } = useStore();
   const router = useRouter();
 
-  const [currentCursor, setCurrentCursor] = useState<string | undefined>();
+  const [currentHref, setCurrentHref] = useState<string | undefined>();
   const [currentPage, setCurrentPage] = useState(1);
   const [sortBy, setSortBy] = useState<string>("updated_at");
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
@@ -67,7 +67,7 @@ export const ContractStorage = ({
     isActive: isActive && !isSourceStellarExpert,
     networkId,
     contractId,
-    cursor: currentCursor,
+    paginationHref: currentHref,
     sortBy,
     order: sortOrder,
   });
@@ -82,7 +82,7 @@ export const ContractStorage = ({
 
   useEffect(() => {
     // Reset when contractId or networkId changes
-    setCurrentCursor(undefined);
+    setCurrentHref(undefined);
     setCurrentPage(1);
     setSortBy("updated_at");
     setSortOrder("desc");
@@ -148,12 +148,6 @@ export const ContractStorage = ({
     );
   }
 
-  const getCursorFromHref = (href: string) => {
-    const queryString = href.split("?")[1] || "";
-    const params = new URLSearchParams(queryString);
-    return params.get("cursor") || undefined;
-  };
-
   const parsedKeyValueData = () => {
     return storageData.map((i) => ({
       ...i,
@@ -325,7 +319,7 @@ export const ContractStorage = ({
                     setSortOrder(dir);
                   }
                   // Reset pagination on sort change
-                  setCurrentCursor(undefined);
+                  setCurrentHref(undefined);
                   setCurrentPage(1);
                 },
               }
@@ -336,7 +330,7 @@ export const ContractStorage = ({
                   prev: {
                     onClick: () => {
                       if (prevCursor) {
-                        setCurrentCursor(getCursorFromHref(prevCursor));
+                        setCurrentHref(prevCursor);
                         setCurrentPage(Math.max(currentPage - 1, 1));
                       }
                     },
@@ -346,7 +340,7 @@ export const ContractStorage = ({
                   next: {
                     onClick: () => {
                       if (nextCursor) {
-                        setCurrentCursor(getCursorFromHref(nextCursor));
+                        setCurrentHref(nextCursor);
                         setCurrentPage(currentPage + 1);
                       }
                     },

src/query/external/useBackendContractStorage.ts

@@ -8,14 +8,14 @@ export const useBackendContractStorage = ({
   isActive,
   networkId,
   contractId,
-  cursor,
+  paginationHref,
   sortBy,
   order,
 }: {
   isActive: boolean;
   networkId: NetworkType;
   contractId: string;
-  cursor?: string;
+  paginationHref?: string;
   sortBy?: string;
   order?: "asc" | "desc";
 }) => {
@@ -24,18 +24,24 @@ export const useBackendContractStorage = ({
       "useBackendContractStorage",
       networkId,
       contractId,
-      cursor,
+      paginationHref,
       { sortBy, order },
     ],
     queryFn: async () => {
-      const network = networkId === "mainnet" ? "pubnet" : networkId;
-      const params = new URLSearchParams({
-        limit: "10",
-        sort_by: sortBy ?? "updated_at",
-        order: order ?? "desc",
-      });
-      if (cursor) params.set("cursor", cursor);
-      const fetchUrl = `${BACKEND_ENDPOINT}/${network}/api/contract/${contractId}/storage?${params}`;
+      let fetchUrl: string;
+
+      if (paginationHref) {
+        const url = new URL(paginationHref, BACKEND_ENDPOINT);
+        fetchUrl = url.toString();
+      } else {
+        const network = networkId === "mainnet" ? "pubnet" : networkId;
+        const params = new URLSearchParams({
+          limit: "10",
+          sort_by: sortBy ?? "updated_at",
+          order: order ?? "desc",
+        });
+        fetchUrl = `${BACKEND_ENDPOINT}/${network}/api/contract/${contractId}/storage?${params}`;
+      }
 
       const response = await fetch(fetchUrl);