feat: pagination with caching

package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@changesets/cli": "^2.27.10",
     "@requestnetwork/currency": "0.22.0",
+    "@tanstack/svelte-query": "^5.64.2",
     "bits-ui": "^0.21.12"
   }
 }

packages/create-invoice-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@requestnetwork/create-invoice-form",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "main": "./dist/web-component.umd.cjs",
   "scripts": {
     "dev": "vite dev",
@@ -33,8 +33,8 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
-    "@requestnetwork/data-format": "0.19.5",
-    "@requestnetwork/request-client.js": "0.54.0",
+    "@requestnetwork/data-format": "0.19.7",
+    "@requestnetwork/request-client.js": "0.56.0",
     "@wagmi/core": "^2.15.2",
     "validator": "^13.12.0",
     "viem": "^2.21.53"

packages/invoice-dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@requestnetwork/invoice-dashboard",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "main": "./dist/web-component.umd.cjs",
   "scripts": {
     "dev": "vite dev",
@@ -37,9 +37,9 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@requestnetwork/payment-detection": "0.49.0",
-    "@requestnetwork/payment-processor": "0.52.0",
-    "@requestnetwork/request-client.js": "0.54.0",
+    "@requestnetwork/payment-detection": "0.51.0",
+    "@requestnetwork/payment-processor": "0.54.0",
+    "@requestnetwork/request-client.js": "0.56.0",
     "@wagmi/connectors": "^5.5.3",
     "@wagmi/core": "^2.15.2",
     "ethers": "^5.7.2",

packages/invoice-dashboard/src/lib/view-requests.svelte

@@ -53,6 +53,7 @@
   import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   import { CipherProviderTypes, CurrencyTypes } from "@requestnetwork/types";
   import { ethers } from "ethers";
+  import { queryClient } from "@requestnetwork/shared-utils/queryClient";
 
   interface CipherProvider extends CipherProviderTypes.ICipherProvider {
     getSessionSignatures: (
@@ -111,6 +112,9 @@
   let sortOrder = "desc";
   let sortColumn = "timestamp";
 
+  const itemsPerPage = 10;
+  let currentPage = 1;
+  let hasMoreRequests = false;
   let selectedNetworks: string[] = [];
   let networkOptions: { value: string; checked: boolean }[] = [];
 
@@ -190,21 +194,52 @@
     currencyManager = await initializeCurrencyManager();
   });
 
+  const getRequestsQueryKey = (address: string, currentPage: number) => ["requestsData", address, currentPage];
+
+  const fetchRequests = async (address: string, page: number, pageSize: number) => {
+    if (!address || !requestNetwork) return null;
+    try {
+      const requestsData = await requestNetwork.fromIdentity({
+        type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
+        value: address,
+      }, undefined, { 
+        page: page,
+        pageSize: pageSize,
+      });
+      return requestsData;
+    } catch (error) {
+      console.error("Failed to fetch requests:", error);
+      throw error;
+    }
+  };
+
   const getRequests = async (
     account: GetAccountReturnType,
     requestNetwork: RequestNetwork | undefined | null
   ) => {
     if (!account?.address || !requestNetwork) return;
     loading = true;
     try {
-      const requestsData = await requestNetwork?.fromIdentity({
-        type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
-        value: account?.address,
+      const data = await queryClient.fetchQuery({
+        queryKey: getRequestsQueryKey(account.address, currentPage),
+        queryFn: () => fetchRequests(account.address, currentPage, itemsPerPage)
       });
 
-      requests = requestsData
-        ?.map((request) => request.getData())
+      if (data) {
+        requests = data.requests?.map((request) => request.getData())
         .sort((a, b) => b.timestamp - a.timestamp);
+        hasMoreRequests = data?.meta?.pagination?.hasMore || false;
+      } else {
+        requests = [];
+        hasMoreRequests = false;
+      }
+
+      if (hasMoreRequests) {
+        queryClient.prefetchQuery({
+          queryKey: getRequestsQueryKey(account.address, currentPage + 1),
+          queryFn: () => fetchRequests(account.address, currentPage + 1, itemsPerPage)
+        });
+      }
 
       const uniqueNetworks = new Set<string>();
       requests?.forEach((request) => {
@@ -243,10 +278,6 @@
     }
   };
 
-  const itemsPerPage = 10;
-  let currentPage = 1;
-  let totalPages = 1;
-
   $: {
     if (sortColumn && sortOrder) {
       requests = [...(requests ?? [])].sort((a, b) => {
@@ -317,14 +348,7 @@
     return false;
   });
 
-  $: totalPages = Math.ceil(filteredRequests?.length! / itemsPerPage);
-
-  $: paginatedRequests = (filteredRequests ?? []).slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage
-  );
-
-  $: processedRequests = paginatedRequests?.map(
+  $: processedRequests = filteredRequests?.map(
     (
       request
     ): Types.IRequestDataWithEvents & {
@@ -403,8 +427,9 @@
   );
 
   const goToPage = (page: number) => {
-    if (page >= 1 && page <= totalPages) {
+    if (page >= 1) {
       currentPage = page;
+      getRequests(account, requestNetwork);
     }
   };
 
@@ -501,6 +526,9 @@
     } finally {
       loading = false;
     }
+    queryClient.invalidateQueries()
+    await getRequests(currentAccount, currentRequestNetwork);
+    loading = false;
   };
 
   $: loadRequests(sliderValueForDecryption, account, requestNetwork);
@@ -913,7 +941,7 @@
         {/if}
       </Drawer>
     </div>
-    {#if paginatedRequests.length > 0}
+    {#if processedRequests.length > 0}
       <div class="pagination">
         <button
           class="chevron-button"
@@ -925,19 +953,9 @@
           </i>
         </button>
 
-        {#each Array(totalPages).fill(null) as _, i}
-          <button
-            class={`active-page page-${currentPage === i + 1 ? "on" : "off"}`}
-            class:active={currentPage === i + 1}
-            on:click={() => goToPage(i + 1)}
-          >
-            {i + 1}
-          </button>
-        {/each}
-
         <button
           class="chevron-button"
-          disabled={currentPage === totalPages}
+          disabled={!hasMoreRequests}
           on:click={() => goToPage(currentPage + 1)}
         >
           <i>
@@ -947,7 +965,7 @@
       </div>
     {/if}
   </div>
-  {#if !loading && paginatedRequests.length === 0}
+  {#if !loading && processedRequests.length === 0}
     <div class="no-requests">
       <p>No requests found</p>
       <span>(Please connect a wallet or create a request)</span>

packages/payment-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@requestnetwork/payment-widget",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "main": "./dist/web-component.umd.cjs",
   "scripts": {
     "dev": "vite dev",
@@ -56,9 +56,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@requestnetwork/payment-processor": "0.52.0",
-    "@requestnetwork/request-client.js": "0.54.0",
-    "@requestnetwork/web3-signature": "0.8.5",
+    "@requestnetwork/payment-processor": "0.54.0",
+    "@requestnetwork/request-client.js": "0.56.0",
+    "@requestnetwork/web3-signature": "0.8.7",
     "@web3modal/ethers5": "^5.0.11",
     "ethers": "^5.7.2",
     "vite-plugin-node-polyfills": "^0.22.0"