feat: add (datasets, apps, workerpools) access table and enhance pagination (#88)

* feat: add tab navigation for app details and deals in AppsRoute component

* feat: add AppAccessTable component and integrate into AppsRoute

* feat: enhance AppAccessTable and AppDealsTable with loading and outdated state management

* feat: rename columns to appColumns and remove app address and price column

* feat: add tab navigation for dataset details, deals, and access in DatasetsRoute

* feat: integrate loading and outdated state management in DatasetDealsTable

* feat: add DatasetAccessTable component and integrate it into DatasetsRoute

* feat: add tab navigation for workerpool details, deals, and access

* feat: enhance WorkerpoolDealsTable with loading and outdated state management

* feat: add WorkerpoolAccessTable component and integrate it into WorkerpoolsRoute

* feat: refactor loading and outdated state management in access and deals tables using useEffect

* feat: add access tables for apps, datasets, and workerpools on address page

* fix: correct import path for WorkerpoolAccessTable component

* refactor: remove console logs from access data fetching functions

* feat: enhance pagination logic to display all pages for 7 or fewer total pages

* feat: update pagination logic to support mobile-first design and dynamic page visibility

* feat: update access data fetching logic to support pagination and total count for apps, datasets, and workerpools

* fix: prevent rendering of pagination controls for invalid states

* refactor: prettier

* fix: stabilize pagination rendering during lading state

* fix: normalize case for order restrictions in CopyButton components

* fix: useTabParam() name in dataset

Co-authored-by: Copilot <[email protected]>

* fix: correct error message wording in loading alerts across multiple tables

* feat: add price column with token symbol for app, dataset, and workerpool orders

* fix: conditionally apply cursor pointer class based on destination

* feat: format access data to include destination paths for apps, datasets, and workerpools

* fix: adjust indicator position calculation to include scroll offset

* fix: update initIExecSDKs to work without wallet connection

* fix: convert price values from NRLC to RLC across app, dataset, and workerpool access columns

* fix: update orderbook fetch calls to include 'any' for dataset, app, and workerpool parameters

* fix: improve pagination stability by updating totalPages reference condition

* fix: stabilize pagination by resetting totalPages reference on chainId change

* fix: remove debug log for provider in initIExecSDKs function

* fix: include 'requester' parameter as 'any' in access data queries for app, dataset, and workerpool

* fix: reorder AddressAppsAccessTable in AddressRoute component

---------

Co-authored-by: Copilot <[email protected]>

Author: ErwanDecoster

package-lock.json

@@ -46,7 +46,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "graphql": "^16.11.0",
-    "iexec": "^8.18.0",
+    "iexec": "^8.20.0",
     "lucide-react": "^0.536.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "react": "^19.2.0",

package.json

@@ -96,7 +96,7 @@ export function DataTable<TData, TValue>({
             <TableRow
               key={row.id}
               data-state={row.getIsSelected() && 'selected'}
-              className="cursor-pointer"
+              className={destination ? 'cursor-pointer' : ''}
               tabIndex={0}
               onClick={(e) => handleRowClick(destination, e)}
               onKeyDown={(e) => handleRowKeyDown(destination, e)}

src/components/DataTable.tsx

@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import {
   Pagination,
   PaginationContent,
@@ -7,6 +8,7 @@ import {
   PaginationNext,
   PaginationEllipsis,
 } from '@/components/ui/pagination';
+import useUserStore from '@/stores/useUser.store';
 
 type PaginationControlsProps = {
   currentPage: number;
@@ -19,24 +21,87 @@ export const PaginatedNavigation = ({
   totalPages,
   onPageChange,
 }: PaginationControlsProps) => {
+  const { chainId } = useUserStore();
+
+  const lastValidTotalPagesRef = useRef(1);
+  const lastChainIdRef = useRef<number | null>(null);
+  const chainChangeFrameRef = useRef(0);
+
+  const chainHasChanged = chainId !== lastChainIdRef.current;
+
+  if (chainHasChanged) {
+    lastChainIdRef.current = chainId ?? null;
+    chainChangeFrameRef.current = 0;
+  } else {
+    chainChangeFrameRef.current++;
+  }
+
+  let stableTotalPages = lastValidTotalPagesRef.current;
+
+  const isRecentChainChange = chainChangeFrameRef.current <= 5;
+
+  if (chainHasChanged || isRecentChainChange) {
+    stableTotalPages = Math.max(totalPages, 1);
+  } else if (totalPages > 0 && totalPages >= lastValidTotalPagesRef.current) {
+    stableTotalPages = totalPages;
+  }
+
+  lastValidTotalPagesRef.current = stableTotalPages;
+
+  // Don't render pagination if no pages or invalid state
+  if (!stableTotalPages || stableTotalPages <= 0 || currentPage <= 0) {
+    return null;
+  }
+
   const generatePages = () => {
     const pages: (number | 'ellipsis')[] = [];
 
-    if (totalPages <= 5) {
-      for (let i = 1; i <= totalPages; i++) {
+    // Mobile-first approach: show fewer pages on small screens
+    const isMobile = typeof window !== 'undefined' && window.innerWidth < 640;
+    const maxVisiblePages = isMobile ? 3 : 7;
+
+    if (stableTotalPages <= maxVisiblePages) {
+      // Show all pages if within limit
+      for (let i = 1; i <= stableTotalPages; i++) {
         pages.push(i);
       }
-    } else if (currentPage <= 3) {
-      for (let i = 1; i <= Math.min(currentPage + 2, totalPages); i++) {
-        pages.push(i);
+    } else if (isMobile) {
+      // Mobile: simplified pagination - only show current and neighbors
+      if (currentPage === 1) {
+        // At start: 1 2 ... last
+        pages.push(1, 2, 'ellipsis', stableTotalPages);
+      } else if (currentPage === stableTotalPages) {
+        // At end: 1 ... (last-1) last
+        pages.push(1, 'ellipsis', stableTotalPages - 1, stableTotalPages);
+      } else {
+        // Middle: 1 ... current ... last
+        pages.push(1, 'ellipsis', currentPage, 'ellipsis', stableTotalPages);
       }
     } else {
+      // Desktop: full pagination logic
       pages.push(1);
-      pages.push('ellipsis');
 
-      const maxPage = Math.min(currentPage + 2, totalPages);
-      for (let i = currentPage; i <= maxPage; i++) {
-        pages.push(i);
+      if (currentPage <= 3) {
+        // Near beginning: 1 2 3 4 ... last
+        for (let i = 2; i <= 4; i++) {
+          pages.push(i);
+        }
+        pages.push('ellipsis');
+        pages.push(stableTotalPages);
+      } else if (currentPage >= stableTotalPages - 2) {
+        // Near end: 1 ... (last-3) (last-2) (last-1) last
+        pages.push('ellipsis');
+        for (let i = stableTotalPages - 3; i <= stableTotalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        // In middle: 1 ... (current-1) current (current+1) ... last
+        pages.push('ellipsis');
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pages.push(i);
+        }
+        pages.push('ellipsis');
+        pages.push(stableTotalPages);
       }
     }
 
@@ -50,7 +115,7 @@ export const PaginatedNavigation = ({
   };
 
   const handleNext = () => {
-    if (currentPage < totalPages) onPageChange(currentPage + 1);
+    if (currentPage < stableTotalPages) onPageChange(currentPage + 1);
   };
 
   return (
@@ -86,7 +151,9 @@ export const PaginatedNavigation = ({
           <PaginationNext
             onClick={handleNext}
             className={
-              currentPage === totalPages ? 'pointer-events-none opacity-50' : ''
+              currentPage === stableTotalPages
+                ? 'pointer-events-none opacity-50'
+                : ''
             }
           />
         </PaginationItem>

src/components/PaginatedNavigation.tsx

@@ -14,17 +14,24 @@ export function cleanIExecSDKs() {
   readonlyIExec = null;
 }
 
-export async function initIExecSDKs({ connector }: { connector?: Connector }) {
+export async function initIExecSDKs({
+  connector,
+  chainId,
+}: {
+  connector?: Connector;
+  chainId?: number;
+}) {
+  let provider = chainId as unknown as Eip1193Provider;
   if (!connector || !connector.getProvider) {
     cleanIExecSDKs();
-    return;
+  } else {
+    provider = (await connector.getProvider()) as Eip1193Provider;
   }
-
-  const provider = (await connector.getProvider()) as Eip1193Provider;
   if (!provider) {
     cleanIExecSDKs();
     return;
   }
+
   // Initialize
   const config = new IExecConfig(
     { ethProvider: provider },

src/externals/iexecSdkClient.ts

@@ -42,11 +42,8 @@ export function ChainSyncManager() {
     if (accountChain?.id && chainId !== accountChain?.id) {
       setChainId(accountChain?.id);
     }
-    if (accountStatus === 'connected') {
-      initIExecSDKs({ connector: accountConnector });
-      return;
-    }
     cleanIExecSDKs();
+    initIExecSDKs({ connector: accountConnector, chainId });
   }, [
     accountAddress,
     accountIsConnected,

src/hooks/ChainSyncManger.ts

@@ -37,7 +37,8 @@ export function Tabs({
     const containerRect = containerRef.current.getBoundingClientRect();
     const buttonRect = activeButton.getBoundingClientRect();
 
-    const left = buttonRect.left - containerRect.left;
+    const left =
+      buttonRect.left - containerRect.left + containerRef.current.scrollLeft;
     const width = buttonRect.width;
 
     setIndicatorStyle({ left, width });

src/modules/Tabs.tsx

@@ -0,0 +1,75 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { PublishedApporder } from 'iexec/IExecOrderbookModule';
+import CopyButton from '@/components/CopyButton';
+import useUserStore from '@/stores/useUser.store';
+import { getTokenSymbol } from '@/utils/chain.utils';
+import { nrlcToRlc } from '@/utils/nrlcToRlc';
+import { truncateAddress } from '@/utils/truncateAddress';
+
+export const columns: ColumnDef<PublishedApporder>[] = [
+  {
+    accessorKey: 'order.appprice',
+    header: 'Price',
+    cell: ({ row }) => (
+      <span>
+        {nrlcToRlc(row.original.order.appprice)}{' '}
+        {getTokenSymbol(useUserStore.getState().chainId)}
+      </span>
+    ),
+  },
+  {
+    accessorKey: 'order.datasetrestrict',
+    header: 'Dataset Restriction',
+    cell: ({ row }) => (
+      <CopyButton
+        displayText={truncateAddress(
+          row.original.order.datasetrestrict.toLowerCase(),
+          {
+            startLen: 8,
+          }
+        )}
+        textToCopy={row.original.order.datasetrestrict.toLowerCase()}
+      />
+    ),
+  },
+  {
+    accessorKey: 'order.requesterrestrict',
+    header: 'Requester Restriction',
+    cell: ({ row }) => (
+      <CopyButton
+        displayText={truncateAddress(
+          row.original.order.requesterrestrict.toLowerCase(),
+          {
+            startLen: 8,
+          }
+        )}
+        textToCopy={row.original.order.requesterrestrict.toLowerCase()}
+      />
+    ),
+  },
+  {
+    accessorKey: 'order.workerpoolrestrict',
+    header: 'Workerpool Restriction',
+    cell: ({ row }) => (
+      <CopyButton
+        displayText={truncateAddress(
+          row.original.order.workerpoolrestrict.toLowerCase(),
+          {
+            startLen: 8,
+          }
+        )}
+        textToCopy={row.original.order.workerpoolrestrict.toLowerCase()}
+      />
+    ),
+  },
+  {
+    accessorKey: 'order.volume',
+    header: 'Volume',
+    cell: ({ row }) => <span>{row.original.order.volume}</span>,
+  },
+  {
+    accessorKey: 'remaining',
+    header: 'Remaining',
+    cell: ({ row }) => <span>{row.original.remaining}</span>,
+  },
+];

src/modules/access/appColumns.tsx

@@ -0,0 +1,75 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { PublishedDatasetorder } from 'iexec/IExecOrderbookModule';
+import CopyButton from '@/components/CopyButton';
+import useUserStore from '@/stores/useUser.store';
+import { getTokenSymbol } from '@/utils/chain.utils';
+import { nrlcToRlc } from '@/utils/nrlcToRlc';
+import { truncateAddress } from '@/utils/truncateAddress';
+
+export const columns: ColumnDef<PublishedDatasetorder>[] = [
+  {
+    accessorKey: 'order.datasetprice',
+    header: 'Price',
+    cell: ({ row }) => (
+      <span>
+        {nrlcToRlc(row.original.order.datasetprice)}{' '}
+        {getTokenSymbol(useUserStore.getState().chainId)}
+      </span>
+    ),
+  },
+  {
+    accessorKey: 'order.apprestrict',
+    header: 'App Restriction',
+    cell: ({ row }) => (
+      <CopyButton
+        displayText={truncateAddress(
+          row.original.order.apprestrict.toLowerCase(),
+          {
+            startLen: 8,
+          }
+        )}
+        textToCopy={row.original.order.apprestrict.toLowerCase()}
+      />
+    ),
+  },
+  {
+    accessorKey: 'order.requesterrestrict',
+    header: 'Requester Restriction',
+    cell: ({ row }) => (
+      <CopyButton
+        displayText={truncateAddress(
+          row.original.order.requesterrestrict.toLowerCase(),
+          {
+            startLen: 8,
+          }
+        )}
+        textToCopy={row.original.order.requesterrestrict.toLowerCase()}
+      />
+    ),
+  },
+  {
+    accessorKey: 'order.workerpoolrestrict',
+    header: 'Workerpool Restriction',
+    cell: ({ row }) => (
+      <CopyButton
+        displayText={truncateAddress(
+          row.original.order.workerpoolrestrict.toLowerCase(),
+          {
+            startLen: 8,
+          }
+        )}
+        textToCopy={row.original.order.workerpoolrestrict.toLowerCase()}
+      />
+    ),
+  },
+  {
+    accessorKey: 'order.volume',
+    header: 'Volume',
+    cell: ({ row }) => <span>{row.original.order.volume}</span>,
+  },
+  {
+    accessorKey: 'remaining',
+    header: 'Remaining',
+    cell: ({ row }) => <span>{row.original.remaining}</span>,
+  },
+];