feat: add Workerpool details and deals functionality with GraphQL queries and components

Author: ErwanDecoster

src/graphql/gql.ts

@@ -29,6 +29,9 @@ type Documents = {
     "\n  query NextTasks($length: Int = 20, $skip: Int = 0) {\n    tasks(\n      first: $length\n      skip: $skip\n      orderBy: timestamp\n      orderDirection: desc\n    ) {\n      taskid: id\n    }\n  }\n": typeof types.NextTasksDocument,
     "\n  query Tasks($length: Int = 20, $skip: Int = 0) {\n    tasks(\n      first: $length\n      skip: $skip\n      orderBy: timestamp\n      orderDirection: desc\n    ) {\n      taskid: id\n      index\n      finalDeadline\n      status\n      timestamp\n      deal {\n        requester {\n          address: id\n        }\n        beneficiary {\n          address: id\n        }\n        app {\n          address: id\n        }\n        dataset {\n          address: id\n        }\n        workerpool {\n          address: id\n        }\n        category {\n          catid: id\n          workClockTimeRef\n        }\n      }\n    }\n  }\n": typeof types.TasksDocument,
     "\n  query NextWorkerpools($length: Int = 20, $skip: Int = 0) {\n    workerpools(\n      first: $length\n      skip: $skip\n      orderBy: timestamp\n      orderDirection: desc\n    ) {\n      address: id\n    }\n  }\n": typeof types.NextWorkerpoolsDocument,
+    "\n  query NextWorkerpoolDeals(\n    $length: Int = 20\n    $skip: Int = 0\n    $workerpoolAddress: ID!\n  ) {\n    workerpool(id: $workerpoolAddress) {\n      address: id\n      deals: usages(\n        first: $length\n        skip: $skip\n        orderBy: timestamp\n        orderDirection: desc\n      ) {\n        dealid: id\n      }\n    }\n  }\n": typeof types.NextWorkerpoolDealsDocument,
+    "\n  query WorkerpoolDeals(\n    $length: Int = 20\n    $skip: Int = 0\n    $workerpoolAddress: ID!\n  ) {\n    workerpool(id: $workerpoolAddress) {\n      address: id\n      deals: usages(\n        orderBy: timestamp\n        orderDirection: desc\n        first: $length\n        skip: $skip\n      ) {\n        dealid: id\n        timestamp\n        requester {\n          address: id\n        }\n        beneficiary {\n          address: id\n        }\n        callback {\n          address: id\n        }\n        app {\n          address: id\n          name\n        }\n        dataset {\n          address: id\n          name\n        }\n        workerpool {\n          address: id\n          description\n        }\n        category {\n          catid: id\n          workClockTimeRef\n        }\n        startTime\n        appPrice\n        datasetPrice\n        workerpoolPrice\n        botSize\n        trust\n        completedTasksCount\n        claimedTasksCount\n      }\n    }\n  }\n": typeof types.WorkerpoolDealsDocument,
+    "\n  query Workerpool($workerpoolAddress: ID!, $workerpoolAddressString: String!) {\n    workerpool(id: $workerpoolAddress) {\n      address: id\n      owner {\n        address: id\n      }\n      description\n      transfers(\n        where: { workerpool: $workerpoolAddressString }\n        orderBy: timestamp\n        orderDirection: asc\n      ) {\n        workerpool {\n          address: id\n        }\n        from {\n          address: id\n        }\n        to {\n          address: id\n        }\n        transaction {\n          txHash: id\n          timestamp\n          blockNumber\n        }\n      }\n    }\n  }\n": typeof types.WorkerpoolDocument,
     "\n  query Workerpools($length: Int = 20, $skip: Int = 0) {\n    workerpools(\n      first: $length\n      skip: $skip\n      orderBy: timestamp\n      orderDirection: desc\n    ) {\n      address: id\n      owner {\n        address: id\n      }\n      timestamp\n      description\n      workerStakeRatio\n      schedulerRewardRatio\n      transfers(orderBy: timestamp, orderDirection: desc) {\n        transaction {\n          txHash: id\n          timestamp\n          blockNumber\n        }\n      }\n    }\n  }\n": typeof types.WorkerpoolsDocument,
 };
 const documents: Documents = {
@@ -46,6 +49,9 @@ const documents: Documents = {
     "\n  query NextTasks($length: Int = 20, $skip: Int = 0) {\n    tasks(\n      first: $length\n      skip: $skip\n      orderBy: timestamp\n      orderDirection: desc\n    ) {\n      taskid: id\n    }\n  }\n": types.NextTasksDocument,
     "\n  query Tasks($length: Int = 20, $skip: Int = 0) {\n    tasks(\n      first: $length\n      skip: $skip\n      orderBy: timestamp\n      orderDirection: desc\n    ) {\n      taskid: id\n      index\n      finalDeadline\n      status\n      timestamp\n      deal {\n        requester {\n          address: id\n        }\n        beneficiary {\n          address: id\n        }\n        app {\n          address: id\n        }\n        dataset {\n          address: id\n        }\n        workerpool {\n          address: id\n        }\n        category {\n          catid: id\n          workClockTimeRef\n        }\n      }\n    }\n  }\n": types.TasksDocument,
     "\n  query NextWorkerpools($length: Int = 20, $skip: Int = 0) {\n    workerpools(\n      first: $length\n      skip: $skip\n      orderBy: timestamp\n      orderDirection: desc\n    ) {\n      address: id\n    }\n  }\n": types.NextWorkerpoolsDocument,
+    "\n  query NextWorkerpoolDeals(\n    $length: Int = 20\n    $skip: Int = 0\n    $workerpoolAddress: ID!\n  ) {\n    workerpool(id: $workerpoolAddress) {\n      address: id\n      deals: usages(\n        first: $length\n        skip: $skip\n        orderBy: timestamp\n        orderDirection: desc\n      ) {\n        dealid: id\n      }\n    }\n  }\n": types.NextWorkerpoolDealsDocument,
+    "\n  query WorkerpoolDeals(\n    $length: Int = 20\n    $skip: Int = 0\n    $workerpoolAddress: ID!\n  ) {\n    workerpool(id: $workerpoolAddress) {\n      address: id\n      deals: usages(\n        orderBy: timestamp\n        orderDirection: desc\n        first: $length\n        skip: $skip\n      ) {\n        dealid: id\n        timestamp\n        requester {\n          address: id\n        }\n        beneficiary {\n          address: id\n        }\n        callback {\n          address: id\n        }\n        app {\n          address: id\n          name\n        }\n        dataset {\n          address: id\n          name\n        }\n        workerpool {\n          address: id\n          description\n        }\n        category {\n          catid: id\n          workClockTimeRef\n        }\n        startTime\n        appPrice\n        datasetPrice\n        workerpoolPrice\n        botSize\n        trust\n        completedTasksCount\n        claimedTasksCount\n      }\n    }\n  }\n": types.WorkerpoolDealsDocument,
+    "\n  query Workerpool($workerpoolAddress: ID!, $workerpoolAddressString: String!) {\n    workerpool(id: $workerpoolAddress) {\n      address: id\n      owner {\n        address: id\n      }\n      description\n      transfers(\n        where: { workerpool: $workerpoolAddressString }\n        orderBy: timestamp\n        orderDirection: asc\n      ) {\n        workerpool {\n          address: id\n        }\n        from {\n          address: id\n        }\n        to {\n          address: id\n        }\n        transaction {\n          txHash: id\n          timestamp\n          blockNumber\n        }\n      }\n    }\n  }\n": types.WorkerpoolDocument,
     "\n  query Workerpools($length: Int = 20, $skip: Int = 0) {\n    workerpools(\n      first: $length\n      skip: $skip\n      orderBy: timestamp\n      orderDirection: desc\n    ) {\n      address: id\n      owner {\n        address: id\n      }\n      timestamp\n      description\n      workerStakeRatio\n      schedulerRewardRatio\n      transfers(orderBy: timestamp, orderDirection: desc) {\n        transaction {\n          txHash: id\n          timestamp\n          blockNumber\n        }\n      }\n    }\n  }\n": types.WorkerpoolsDocument,
 };
 
@@ -105,6 +111,18 @@ export function graphql(source: "\n  query Tasks($length: Int = 20, $skip: Int =
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  query NextWorkerpools($length: Int = 20, $skip: Int = 0) {\n    workerpools(\n      first: $length\n      skip: $skip\n      orderBy: timestamp\n      orderDirection: desc\n    ) {\n      address: id\n    }\n  }\n"): typeof import('./graphql').NextWorkerpoolsDocument;
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query NextWorkerpoolDeals(\n    $length: Int = 20\n    $skip: Int = 0\n    $workerpoolAddress: ID!\n  ) {\n    workerpool(id: $workerpoolAddress) {\n      address: id\n      deals: usages(\n        first: $length\n        skip: $skip\n        orderBy: timestamp\n        orderDirection: desc\n      ) {\n        dealid: id\n      }\n    }\n  }\n"): typeof import('./graphql').NextWorkerpoolDealsDocument;
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query WorkerpoolDeals(\n    $length: Int = 20\n    $skip: Int = 0\n    $workerpoolAddress: ID!\n  ) {\n    workerpool(id: $workerpoolAddress) {\n      address: id\n      deals: usages(\n        orderBy: timestamp\n        orderDirection: desc\n        first: $length\n        skip: $skip\n      ) {\n        dealid: id\n        timestamp\n        requester {\n          address: id\n        }\n        beneficiary {\n          address: id\n        }\n        callback {\n          address: id\n        }\n        app {\n          address: id\n          name\n        }\n        dataset {\n          address: id\n          name\n        }\n        workerpool {\n          address: id\n          description\n        }\n        category {\n          catid: id\n          workClockTimeRef\n        }\n        startTime\n        appPrice\n        datasetPrice\n        workerpoolPrice\n        botSize\n        trust\n        completedTasksCount\n        claimedTasksCount\n      }\n    }\n  }\n"): typeof import('./graphql').WorkerpoolDealsDocument;
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Workerpool($workerpoolAddress: ID!, $workerpoolAddressString: String!) {\n    workerpool(id: $workerpoolAddress) {\n      address: id\n      owner {\n        address: id\n      }\n      description\n      transfers(\n        where: { workerpool: $workerpoolAddressString }\n        orderBy: timestamp\n        orderDirection: asc\n      ) {\n        workerpool {\n          address: id\n        }\n        from {\n          address: id\n        }\n        to {\n          address: id\n        }\n        transaction {\n          txHash: id\n          timestamp\n          blockNumber\n        }\n      }\n    }\n  }\n"): typeof import('./graphql').WorkerpoolDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

src/graphql/graphql.ts

@@ -8468,6 +8468,32 @@ export type NextWorkerpoolsQueryVariables = Exact<{
 
 export type NextWorkerpoolsQuery = { __typename?: 'Query', workerpools: Array<{ __typename?: 'Workerpool', address: string }> };
 
+export type NextWorkerpoolDealsQueryVariables = Exact<{
+  length?: InputMaybe<Scalars['Int']['input']>;
+  skip?: InputMaybe<Scalars['Int']['input']>;
+  workerpoolAddress: Scalars['ID']['input'];
+}>;
+
+
+export type NextWorkerpoolDealsQuery = { __typename?: 'Query', workerpool?: { __typename?: 'Workerpool', address: string, deals: Array<{ __typename?: 'Deal', dealid: string }> } | null };
+
+export type WorkerpoolDealsQueryVariables = Exact<{
+  length?: InputMaybe<Scalars['Int']['input']>;
+  skip?: InputMaybe<Scalars['Int']['input']>;
+  workerpoolAddress: Scalars['ID']['input'];
+}>;
+
+
+export type WorkerpoolDealsQuery = { __typename?: 'Query', workerpool?: { __typename?: 'Workerpool', address: string, deals: Array<{ __typename?: 'Deal', timestamp: any, startTime: any, appPrice: any, datasetPrice: any, workerpoolPrice: any, botSize: any, trust: any, completedTasksCount: any, claimedTasksCount: any, dealid: string, requester: { __typename?: 'Account', address: string }, beneficiary: { __typename?: 'Account', address: string }, callback: { __typename?: 'Account', address: string }, app: { __typename?: 'App', name: string, address: string }, dataset?: { __typename?: 'Dataset', name: string, address: string } | null, workerpool: { __typename?: 'Workerpool', description: string, address: string }, category: { __typename?: 'Category', workClockTimeRef: any, catid: string } }> } | null };
+
+export type WorkerpoolQueryVariables = Exact<{
+  workerpoolAddress: Scalars['ID']['input'];
+  workerpoolAddressString: Scalars['String']['input'];
+}>;
+
+
+export type WorkerpoolQuery = { __typename?: 'Query', workerpool?: { __typename?: 'Workerpool', description: string, address: string, owner: { __typename?: 'Account', address: string }, transfers: Array<{ __typename?: 'WorkerpoolTransfer', workerpool: { __typename?: 'Workerpool', address: string }, from: { __typename?: 'Account', address: string }, to: { __typename?: 'Account', address: string }, transaction: { __typename?: 'Transaction', timestamp: any, blockNumber: any, txHash: string } }> } | null };
+
 export type WorkerpoolsQueryVariables = Exact<{
   length?: InputMaybe<Scalars['Int']['input']>;
   skip?: InputMaybe<Scalars['Int']['input']>;
@@ -8812,6 +8838,101 @@ export const NextWorkerpoolsDocument = new TypedDocumentString(`
   }
 }
     `) as unknown as TypedDocumentString<NextWorkerpoolsQuery, NextWorkerpoolsQueryVariables>;
+export const NextWorkerpoolDealsDocument = new TypedDocumentString(`
+    query NextWorkerpoolDeals($length: Int = 20, $skip: Int = 0, $workerpoolAddress: ID!) {
+  workerpool(id: $workerpoolAddress) {
+    address: id
+    deals: usages(
+      first: $length
+      skip: $skip
+      orderBy: timestamp
+      orderDirection: desc
+    ) {
+      dealid: id
+    }
+  }
+}
+    `) as unknown as TypedDocumentString<NextWorkerpoolDealsQuery, NextWorkerpoolDealsQueryVariables>;
+export const WorkerpoolDealsDocument = new TypedDocumentString(`
+    query WorkerpoolDeals($length: Int = 20, $skip: Int = 0, $workerpoolAddress: ID!) {
+  workerpool(id: $workerpoolAddress) {
+    address: id
+    deals: usages(
+      orderBy: timestamp
+      orderDirection: desc
+      first: $length
+      skip: $skip
+    ) {
+      dealid: id
+      timestamp
+      requester {
+        address: id
+      }
+      beneficiary {
+        address: id
+      }
+      callback {
+        address: id
+      }
+      app {
+        address: id
+        name
+      }
+      dataset {
+        address: id
+        name
+      }
+      workerpool {
+        address: id
+        description
+      }
+      category {
+        catid: id
+        workClockTimeRef
+      }
+      startTime
+      appPrice
+      datasetPrice
+      workerpoolPrice
+      botSize
+      trust
+      completedTasksCount
+      claimedTasksCount
+    }
+  }
+}
+    `) as unknown as TypedDocumentString<WorkerpoolDealsQuery, WorkerpoolDealsQueryVariables>;
+export const WorkerpoolDocument = new TypedDocumentString(`
+    query Workerpool($workerpoolAddress: ID!, $workerpoolAddressString: String!) {
+  workerpool(id: $workerpoolAddress) {
+    address: id
+    owner {
+      address: id
+    }
+    description
+    transfers(
+      where: {workerpool: $workerpoolAddressString}
+      orderBy: timestamp
+      orderDirection: asc
+    ) {
+      workerpool {
+        address: id
+      }
+      from {
+        address: id
+      }
+      to {
+        address: id
+      }
+      transaction {
+        txHash: id
+        timestamp
+        blockNumber
+      }
+    }
+  }
+}
+    `) as unknown as TypedDocumentString<WorkerpoolQuery, WorkerpoolQueryVariables>;
 export const WorkerpoolsDocument = new TypedDocumentString(`
     query Workerpools($length: Int = 20, $skip: Int = 0) {
   workerpools(

src/modules/workerpools/workerpool/WorkerpoolDealsTable.tsx

@@ -0,0 +1,116 @@
+import { DETAIL_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 { ErrorAlert } from '@/modules/ErrorAlert';
+import { columns } from '@/modules/deals/dealsTable/columns';
+import useUserStore from '@/stores/useUser.store';
+import { nextWorkerpoolDealsQuery } from './nextWorkerpoolDealsQuery';
+import { workerpoolDealsQuery } from './workerpoolDealsQuery';
+
+function useWorkerpoolDealsData({
+  workerpoolAddress,
+  currentPage,
+}: {
+  workerpoolAddress: string;
+  currentPage: number;
+}) {
+  const { chainId } = useUserStore();
+  const skip = currentPage * DETAIL_TABLE_LENGTH;
+
+  const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
+    {
+      queryKey: ['workerpool', 'deals', workerpoolAddress],
+      queryFn: () =>
+        execute(workerpoolDealsQuery, chainId, {
+          length: DETAIL_TABLE_LENGTH,
+          skip,
+          workerpoolAddress,
+        }),
+      refetchInterval: TABLE_REFETCH_INTERVAL,
+    }
+  );
+
+  const { data: nextData } = useQuery({
+    queryKey: [chainId, 'deals-next', currentPage],
+    queryFn: () =>
+      execute(nextWorkerpoolDealsQuery, chainId, {
+        length: DETAIL_TABLE_LENGTH * 2,
+        skip: (currentPage + 1) * DETAIL_TABLE_LENGTH,
+        workerpoolAddress,
+      }),
+    refetchInterval: TABLE_REFETCH_INTERVAL,
+  });
+
+  const nextDeals = nextData?.workerpool?.deals ?? [];
+
+  const additionalPages = Math.ceil(nextDeals.length / DETAIL_TABLE_LENGTH);
+
+  const formattedDeal =
+    data?.workerpool?.deals.map((deal) => ({
+      ...deal,
+      destination: `/deal/${deal.dealid}`,
+    })) ?? [];
+
+  return {
+    data: formattedDeal,
+    isLoading,
+    isRefetching,
+    isError,
+    additionalPages,
+    hasPastError: isError || errorUpdateCount > 0,
+  };
+}
+
+export function WorkerpoolDealsTable({
+  workerpoolAddress,
+}: {
+  workerpoolAddress: string;
+}) {
+  const [currentPage, setCurrentPage] = useState(0);
+  const {
+    data: deals,
+    isError,
+    isLoading,
+    isRefetching,
+    additionalPages,
+    hasPastError,
+  } = useWorkerpoolDealsData({ workerpoolAddress, currentPage });
+
+  const filteredColumns = columns.filter(
+    (col) => col.accessorKey !== 'dataset.address'
+  );
+
+  return (
+    <div className="space-y-6">
+      <h2 className="flex items-center gap-2 font-extrabold">
+        Latests deals
+        {!deals && isError && (
+          <span className="text-muted-foreground text-sm font-light">
+            (outdated)
+          </span>
+        )}
+        {(isLoading || isRefetching) && (
+          <LoaderCircle className="animate-spin" />
+        )}
+      </h2>
+      {hasPastError && !deals.length ? (
+        <ErrorAlert message="A error occurred during workerpool deals loading." />
+      ) : (
+        <DataTable
+          columns={filteredColumns}
+          data={deals}
+          tableLength={DETAIL_TABLE_LENGTH}
+        />
+      )}
+      <PaginatedNavigation
+        currentPage={currentPage + 1}
+        totalPages={currentPage + 1 + additionalPages}
+        onPageChange={(newPage) => setCurrentPage(newPage - 1)}
+      />
+    </div>
+  );
+}