feat: subgraphs request number optimization (#38)

* fix: update favicon to use new logo and remove unused vite.svg

* fix: improve validation logic in DownloadResult component

* feat: enhance SmartLinkGroup with ENS lookup and display

* fix: simplify no dataset message in deals table

* feat: display dataset name in deal details

* fix: remove WalletConnect integration from wagmiConfig using default reown instead

* feat: add splat route for dynamic handling in chain slug layout

* feat: replace dataset and workerpool name display with CopyButton for easier copying

* feat: reorder columns; update formatElapsedTime to return 'just now' instead of 'a few second ago'

* refactor: replace inline styles with class-based color management in SuccessCell component

* fix: update Tabs component layout for better responsiveness

* feat: enhance CopyButton to display tooltip with text in various components and fix overflow

* fix: correct type for SmartLinkGroup in transaction details

* feat: add MrEnclave display in app details and implement mrEnclaveHexToHuman utility

* fix: testing corrected Buffer not found

* fix: standardize string method usage in mrEnclaveHexToHuman function

* feat: add buffer dependency and import in format utility functions

* fix: implement address contribution columns and update data handling in AddressContributionTable

* fix: enhance big time formatting in formatElapsedTime function

* feat: add custom scrollbar styles for improved UI experience

* fix: improve formatting consistency in formatElapsedTime function

* fix: remove unused finalDeadlineTimestamp from StatusCell

* fix: simplify StatusCell rendering in columns definition

* fix: update layout and styling for improved responsiveness and consistency

* feat: replace default box icon by page data corresponding icon

* fix: bad icon case in import

* docs: update README with project description, features, installation instructions, and tech stack

* feat: implement address and id validation functions, enhance error handling with NotFoundError class

* feat: enable scroll restoration in router initialization for improved navigation experience

* fix: update table body styles for improved zebra striping and hover effects

* feat: enhance CopyButton component for mobile compatibility to avoid miss click

* fix: adjust layout widths and table column spans for improved responsiveness

* refactor: streamline CopyButton component layout and improve mobile interaction

* feat: add breadcrumb components for apps, datasets, deals, tasks, and workerpools to enhance navigation

* feat: update preview tables to include specific labels for apps, datasets, deals, tasks, and workerpools for improved clarity

* feat: update layout to utilize new 3xl breakpoint for improved responsiveness of preview tables

* fix: adjust spacing in DatasetsPreviewTable and WorkerpoolsPreviewTable for improved readability

* style: update button and anchor styles to ensure consistent cursor behavior

* style: change pagination button size from default to icon for improved visual consistency

* style: update Root component layout for improved structure and spacing

* fix: prevent rendering of MrEnclave block when value is '0x' to ensure accurate display of app details

* fix: a <button> cannot be nested inside another <button>

* feat: enhance pagination fetch by combining query

* feat: enhance pagination fetch by combining query

* style: format GraphQL queries for improved readability by aligning parameters

* feat: implement usePageParam hook for consistent pagination state management and url page preservation

* refactor: replace manual pagination logic with getAdditionalPages utility for cleaner code and improved maintainability

Author: ErwanDecoster

src/hooks/usePageParam.ts

@@ -0,0 +1,23 @@
+import { useSearch, useNavigate } from '@tanstack/react-router';
+
+export function usePageParam(paramName: string, defaultValue = 1) {
+  const search = useSearch({ strict: false });
+  const navigate = useNavigate();
+
+  const page = Number(search?.[paramName]) || defaultValue;
+
+  const setPage = (newPage: number) => {
+    if (newPage !== page) {
+      navigate({
+        search: (prev) => ({
+          ...prev,
+          [paramName]: newPage,
+        }),
+        replace: true,
+        resetScroll: false,
+      });
+    }
+  };
+
+  return [page, setPage] as const;
+}

src/modules/addresses/address/apps/AddressAppsTable.tsx

@@ -2,15 +2,15 @@ import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute } from '@/graphql/execute';
 import { useQuery } from '@tanstack/react-query';
 import { LoaderCircle } from 'lucide-react';
-import { useState } from 'react';
 import { DataTable } from '@/components/DataTable';
 import { PaginatedNavigation } from '@/components/PaginatedNavigation';
+import { usePageParam } from '@/hooks/usePageParam';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { columns } from '@/modules/apps/appsTable/columns';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 import { addressAppsQuery } from './addressAppsQuery';
-import { nextAddressAppsQuery } from './nextAddressAppsQuery';
 
 function useAddressAppsData({
   addressAddress,
@@ -21,6 +21,8 @@ function useAddressAppsData({
 }) {
   const { chainId } = useUserStore();
   const skip = currentPage * PREVIEW_TABLE_LENGTH;
+  const nextSkip = skip + PREVIEW_TABLE_LENGTH;
+  const nextNextSkip = skip + 2 * PREVIEW_TABLE_LENGTH;
 
   const queryKey = [chainId, 'address', 'apps', addressAddress, currentPage];
   const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
@@ -30,44 +32,30 @@ function useAddressAppsData({
         execute(addressAppsQuery, chainId, {
           length: PREVIEW_TABLE_LENGTH,
           skip,
+          nextSkip,
+          nextNextSkip,
           address: addressAddress,
         }),
       refetchInterval: TABLE_REFETCH_INTERVAL,
       placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
     }
   );
 
-  const queryKeyNextData = [
-    chainId,
-    'address',
-    'apps-next',
-    addressAddress,
-    currentPage,
-  ];
-  const { data: nextData } = useQuery({
-    queryKey: queryKeyNextData,
-    queryFn: () =>
-      execute(nextAddressAppsQuery, chainId, {
-        length: PREVIEW_TABLE_LENGTH * 2,
-        skip: (currentPage + 1) * PREVIEW_TABLE_LENGTH,
-        address: addressAddress,
-      }),
-    refetchInterval: TABLE_REFETCH_INTERVAL,
-    placeholderData: createPlaceholderDataFnForQueryKey(queryKeyNextData),
-  });
-
-  const nextApps = nextData?.account?.apps ?? [];
-
-  const additionalPages = Math.ceil(nextApps.length / PREVIEW_TABLE_LENGTH);
+  const apps = data?.account?.apps ?? [];
+  // 0 = only current, 1 = next, 2 = next+1
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.account?.appsHasNext?.length),
+    Boolean(data?.account?.appsHasNextNext?.length)
+  );
 
-  const formattedDeal =
-    data?.account?.apps.map((app) => ({
+  const formattedApps =
+    apps.map((app) => ({
       ...app,
       destination: `/app/${app.address}`,
     })) ?? [];
 
   return {
-    data: formattedDeal,
+    data: formattedApps,
     isLoading,
     isRefetching,
     isError,
@@ -81,15 +69,15 @@ export function AddressAppsTable({
 }: {
   addressAddress: string;
 }) {
-  const [currentPage, setCurrentPage] = useState(0);
+  const [currentPage, setCurrentPage] = usePageParam('addressAppsPage');
   const {
     data: apps,
     isError,
     isLoading,
     isRefetching,
     additionalPages,
     hasPastError,
-  } = useAddressAppsData({ addressAddress, currentPage });
+  } = useAddressAppsData({ addressAddress, currentPage: currentPage - 1 });
 
   const filteredColumns = columns.filter(
     (col) => col.accessorKey !== 'owner.address'
@@ -118,9 +106,9 @@ export function AddressAppsTable({
         />
       )}
       <PaginatedNavigation
-        currentPage={currentPage + 1}
-        totalPages={currentPage + 1 + additionalPages}
-        onPageChange={(newPage) => setCurrentPage(newPage - 1)}
+        currentPage={currentPage}
+        totalPages={currentPage + additionalPages}
+        onPageChange={setCurrentPage}
       />
     </div>
   );

src/modules/addresses/address/apps/addressAppsQuery.ts

@@ -1,7 +1,13 @@
 import { graphql } from '@/graphql/gql';
 
 export const addressAppsQuery = graphql(`
-  query AddressApps($length: Int = 20, $skip: Int = 0, $address: ID!) {
+  query AddressApps(
+    $length: Int = 20
+    $skip: Int = 0
+    $nextSkip: Int = 20
+    $nextNextSkip: Int = 40
+    $address: ID!
+  ) {
     account(id: $address) {
       address: id
       # apps
@@ -20,6 +26,22 @@ export const addressAppsQuery = graphql(`
           }
         }
       }
+      appsHasNext: apps(
+        orderBy: timestamp
+        orderDirection: desc
+        first: 1
+        skip: $nextSkip
+      ) {
+        address: id
+      }
+      appsHasNextNext: apps(
+        orderBy: timestamp
+        orderDirection: desc
+        first: 1
+        skip: $nextNextSkip
+      ) {
+        address: id
+      }
     }
   }
 `);

src/modules/addresses/address/apps/nextAddressAppsQuery.ts

@@ -2,15 +2,15 @@ import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute } from '@/graphql/execute';
 import { useQuery } from '@tanstack/react-query';
 import { LoaderCircle } from 'lucide-react';
-import { useState } from 'react';
 import { DataTable } from '@/components/DataTable';
 import { PaginatedNavigation } from '@/components/PaginatedNavigation';
+import { usePageParam } from '@/hooks/usePageParam';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { columns } from '@/modules/datasets/datasetsTable/columns';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 import { addressDatasetsQuery } from './addressDatasetsQuery';
-import { nextAddressDatasetsQuery } from './nextAddressDatasetsQuery';
 
 function useAddressDatasetsData({
   addressAddress,
@@ -21,6 +21,8 @@ function useAddressDatasetsData({
 }) {
   const { chainId } = useUserStore();
   const skip = currentPage * PREVIEW_TABLE_LENGTH;
+  const nextSkip = skip + PREVIEW_TABLE_LENGTH;
+  const nextNextSkip = skip + 2 * PREVIEW_TABLE_LENGTH;
 
   const queryKey = [
     chainId,
@@ -36,44 +38,30 @@ function useAddressDatasetsData({
         execute(addressDatasetsQuery, chainId, {
           length: PREVIEW_TABLE_LENGTH,
           skip,
+          nextSkip,
+          nextNextSkip,
           address: addressAddress,
         }),
       refetchInterval: TABLE_REFETCH_INTERVAL,
       placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
     }
   );
 
-  const queryKeyNextData = [
-    chainId,
-    'address',
-    'datasets',
-    addressAddress,
-    currentPage,
-  ];
-  const { data: nextData } = useQuery({
-    queryKey: queryKeyNextData,
-    queryFn: () =>
-      execute(nextAddressDatasetsQuery, chainId, {
-        length: PREVIEW_TABLE_LENGTH * 2,
-        skip: (currentPage + 1) * PREVIEW_TABLE_LENGTH,
-        address: addressAddress,
-      }),
-    refetchInterval: TABLE_REFETCH_INTERVAL,
-    placeholderData: createPlaceholderDataFnForQueryKey(queryKeyNextData),
-  });
-
-  const nextDatasets = nextData?.account?.datasets ?? [];
-
-  const additionalPages = Math.ceil(nextDatasets.length / PREVIEW_TABLE_LENGTH);
+  const datasets = data?.account?.datasets ?? [];
+  // 0 = only current, 1 = next, 2 = next+1
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.account?.datasetsHasNext?.length),
+    Boolean(data?.account?.datasetsHasNextNext?.length)
+  );
 
-  const formattedDeal =
-    data?.account?.datasets.map((dataset) => ({
+  const datasetsDatasets =
+    datasets.map((dataset) => ({
       ...dataset,
       destination: `/dataset/${dataset.address}`,
     })) ?? [];
 
   return {
-    data: formattedDeal,
+    data: datasetsDatasets,
     isLoading,
     isRefetching,
     isError,
@@ -87,15 +75,15 @@ export function AddressDatasetsTable({
 }: {
   addressAddress: string;
 }) {
-  const [currentPage, setCurrentPage] = useState(0);
+  const [currentPage, setCurrentPage] = usePageParam('addressDatasetsPage');
   const {
     data: datasets,
     isError,
     isLoading,
     isRefetching,
     additionalPages,
     hasPastError,
-  } = useAddressDatasetsData({ addressAddress, currentPage });
+  } = useAddressDatasetsData({ addressAddress, currentPage: currentPage - 1 });
 
   const filteredColumns = columns.filter(
     (col) => col.accessorKey !== 'owner.address'
@@ -124,9 +112,9 @@ export function AddressDatasetsTable({
         />
       )}
       <PaginatedNavigation
-        currentPage={currentPage + 1}
-        totalPages={currentPage + 1 + additionalPages}
-        onPageChange={(newPage) => setCurrentPage(newPage - 1)}
+        currentPage={currentPage}
+        totalPages={currentPage + additionalPages}
+        onPageChange={setCurrentPage}
       />
     </div>
   );

src/modules/addresses/address/datasets/AddressDatasetsTable.tsx

@@ -1,7 +1,13 @@
 import { graphql } from '@/graphql/gql';
 
 export const addressDatasetsQuery = graphql(`
-  query AddressDatasets($length: Int = 20, $skip: Int = 0, $address: ID!) {
+  query AddressDatasets(
+    $length: Int = 20
+    $skip: Int = 0
+    $nextSkip: Int = 20
+    $nextNextSkip: Int = 40
+    $address: ID!
+  ) {
     account(id: $address) {
       address: id
       # datasets
@@ -20,6 +26,22 @@ export const addressDatasetsQuery = graphql(`
           }
         }
       }
+      datasetsHasNext: datasets(
+        orderBy: timestamp
+        orderDirection: desc
+        first: 1
+        skip: $nextSkip
+      ) {
+        address: id
+      }
+      datasetsHasNextNext: datasets(
+        orderBy: timestamp
+        orderDirection: desc
+        first: 1
+        skip: $nextNextSkip
+      ) {
+        address: id
+      }
     }
   }
 `);