feat: implement access assets details

ErwanDecoster · ErwanDecoster · commit b86e485cdad7 · 2025-11-19T16:10:43.000+01:00
diff --git a/src/components/SmartLinkGroup.tsx b/src/components/SmartLinkGroup.tsx
@@ -90,7 +90,7 @@ export default function SmartLinkGroup({
                 ? truncateAddress(label)
                 : truncateAddress(addressOrId)) ?? addressOrId}
             </span>
-            {showAddressOrIdAndLabel ? `(${label})` : ''}
+            {showAddressOrIdAndLabel && label ? `(${label})` : ''}
             {ens ? `(${ens})` : ''}
           </Link>
         </Button>
diff --git a/src/modules/access/access/accessAssetsDetailsQuery.ts b/src/modules/access/access/accessAssetsDetailsQuery.ts
@@ -0,0 +1,26 @@
+import { graphql } from '@/graphql/poco/gql';
+
+export const accessAssetsDetailsQuery = graphql(`
+  query AccessAssetsDetails(
+    $datasetAddress: ID!
+    $appAddress: ID!
+    $workerpoolAddress: ID!
+    $categoryId: ID!
+  ) {
+    dataset(id: $datasetAddress) {
+      name
+    }
+    app(id: $appAddress) {
+      name
+    }
+    workerpool(id: $workerpoolAddress) {
+      description
+    }
+    category(id: $categoryId) {
+      description
+      id
+      name
+      workClockTimeRef
+    }
+  }
+`);
diff --git a/src/modules/access/access/buildAccessDetails.tsx b/src/modules/access/access/buildAccessDetails.tsx
@@ -1,11 +1,8 @@
-import { App } from 'iexec/IExecAppModule';
-import { Dataset } from 'iexec/IExecDatasetModule';
 import {
   PublishedApporder,
   PublishedDatasetorder,
   PublishedWorkerpoolorder,
 } from 'iexec/IExecOrderbookModule';
-import { Workerpool } from 'iexec/IExecWorkerpoolModule';
 import SmartLinkGroup from '@/components/SmartLinkGroup';
 import {
   formatDateCompact,
@@ -16,15 +13,23 @@ import RevokeAccess from './RevokeAccess';
 
 export function buildAccessDetails({
   access,
-  dataset,
-  app,
-  workerpool,
+  datasetName,
+  appName,
+  workerpoolDescription,
+  datasetRestrictName,
+  appRestrictName,
+  workerpoolRestrictDescription,
+  category,
   userAddress,
 }: {
   access: PublishedApporder | PublishedDatasetorder | PublishedWorkerpoolorder;
-  dataset?: Dataset;
-  app?: App;
-  workerpool?: Workerpool;
+  datasetName?: string;
+  appName?: string;
+  workerpoolDescription?: string;
+  datasetRestrictName?: string;
+  appRestrictName?: string;
+  workerpoolRestrictDescription?: string;
+  category?: { name: string; description: string; workClockTimeRef: number };
   userAddress?: string;
 }) {
   if (!access) return {};
@@ -48,7 +53,7 @@ export function buildAccessDetails({
           <SmartLinkGroup
             type="dataset"
             addressOrId={order.dataset.toLowerCase()}
-            label={dataset?.datasetName}
+            label={datasetName}
             showAddressOrIdAndLabel={true}
           />
         ),
@@ -63,7 +68,7 @@ export function buildAccessDetails({
           <SmartLinkGroup
             type="app"
             addressOrId={order.app.toLowerCase()}
-            label={app?.appName}
+            label={appName}
             showAddressOrIdAndLabel={true}
           />
         ),
@@ -78,7 +83,7 @@ export function buildAccessDetails({
           <SmartLinkGroup
             type="workerpool"
             addressOrId={order.workerpool.toLowerCase()}
-            label={workerpool?.workerpoolDescription}
+            label={workerpoolDescription}
             showAddressOrIdAndLabel={true}
           />
         ),
@@ -102,7 +107,8 @@ export function buildAccessDetails({
           <SmartLinkGroup
             type="app"
             addressOrId={order.apprestrict.toLowerCase()}
-            label={order.apprestrict.toLowerCase()}
+            label={appRestrictName}
+            showAddressOrIdAndLabel={true}
           />
         ),
       }),
@@ -115,16 +121,61 @@ export function buildAccessDetails({
         />
       ),
     }),
+    ...('datasetrestrict' in order &&
+      order.datasetrestrict && {
+        'Dataset Restrict': (
+          <SmartLinkGroup
+            type="address"
+            addressOrId={order.datasetrestrict.toLowerCase()}
+            label={datasetRestrictName}
+            showAddressOrIdAndLabel={true}
+          />
+        ),
+      }),
     ...('workerpoolrestrict' in order &&
       order.workerpoolrestrict && {
         'Workerpool Restrict': (
           <SmartLinkGroup
             type="workerpool"
             addressOrId={order.workerpoolrestrict.toLowerCase()}
-            label={order.workerpoolrestrict.toLowerCase()}
+            label={workerpoolRestrictDescription}
+            showAddressOrIdAndLabel={true}
           />
         ),
       }),
+    ...('trust' in order &&
+      order.trust && {
+        Signer: (
+          <div className="space-x-2">
+            <SmartLinkGroup
+              type="address"
+              addressOrId={access.signer.toLowerCase()}
+              label={access.signer.toLowerCase()}
+            />
+            {userAddress &&
+              access.signer?.toLowerCase() === userAddress.toLowerCase() && (
+                <RevokeAccess access={access} />
+              )}
+          </div>
+        ),
+      }),
+    ...(category && {
+      Category: {
+        tooltip: (
+          <>
+            Indicates execution parameters: includes a name, an optional
+            description, and a reference time.
+          </>
+        ),
+        value: (
+          <p>
+            {category?.name}{' '}
+            {category?.description.length > 0 ? category?.description : ''} (
+            {Number(category?.workClockTimeRef) * 10} sec)
+          </p>
+        ),
+      },
+    }),
     ...(access.signer && {
       Signer: (
         <div className="space-x-2">
diff --git a/src/routes/$chainSlug/_layout/access/app/$accessHash.tsx b/src/routes/$chainSlug/_layout/access/app/$accessHash.tsx
@@ -1,3 +1,4 @@
+import { execute } from '@/graphql/poco/execute';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
@@ -7,6 +8,7 @@ import { getIExec } from '@/externals/iexecSdkClient';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { AccessBreadcrumbs } from '@/modules/access/access/AccessBreadcrumbs';
+import { accessAssetsDetailsQuery } from '@/modules/access/access/accessAssetsDetailsQuery';
 import { buildAccessDetails } from '@/modules/access/access/buildAccessDetails';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import useUserStore from '@/stores/useUser.store';
@@ -30,15 +32,31 @@ function useAccessData(accessHash: string, chainId: number) {
       queryFn: async () => {
         const iexec = await getIExec();
         const access = await iexec.orderbook.fetchApporder(accessHash);
-        const { app } = await iexec.app.showApp(access.order.app);
-        return { access, app };
+        const datasetRestrict = access.order.datasetrestrict;
+        const workerpoolRestrict = access.order.workerpoolrestrict;
+
+        const result = await execute(accessAssetsDetailsQuery, chainId, {
+          datasetAddress: datasetRestrict.toLowerCase() || '',
+          appAddress: access.order.app.toLowerCase() || '',
+          workerpoolAddress: workerpoolRestrict.toLowerCase() || '',
+          categoryId: '',
+        });
+
+        return {
+          access,
+          app: result.app,
+          dataset: result.dataset,
+          workerpool: result.workerpool,
+        };
       },
       placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
     });
 
   return {
     access: data?.access,
     app: data?.app,
+    datasetRestrictName: data?.dataset?.name,
+    workerpoolRestrictDescription: data?.workerpool?.description,
     isLoading,
     isRefetching,
     isError,
@@ -54,6 +72,8 @@ function AppAccessRoute() {
   const {
     access,
     app,
+    datasetRestrictName,
+    workerpoolRestrictDescription,
     isLoading,
     isRefetching,
     isError,
@@ -63,7 +83,13 @@ function AppAccessRoute() {
   } = useAccessData((accessHash as string).toLowerCase(), chainId!);
 
   const accessDetails = access
-    ? buildAccessDetails({ access, app, userAddress })
+    ? buildAccessDetails({
+        access,
+        appName: app?.name,
+        datasetRestrictName,
+        workerpoolRestrictDescription,
+        userAddress,
+      })
     : undefined;
 
   if (!isValid) {
diff --git a/src/routes/$chainSlug/_layout/access/dataset/$accessHash.tsx b/src/routes/$chainSlug/_layout/access/dataset/$accessHash.tsx
@@ -1,3 +1,4 @@
+import { execute } from '@/graphql/poco/execute';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
@@ -7,6 +8,7 @@ import { getIExec } from '@/externals/iexecSdkClient';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { AccessBreadcrumbs } from '@/modules/access/access/AccessBreadcrumbs';
+import { accessAssetsDetailsQuery } from '@/modules/access/access/accessAssetsDetailsQuery';
 import { buildAccessDetails } from '@/modules/access/access/buildAccessDetails';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import useUserStore from '@/stores/useUser.store';
@@ -30,17 +32,31 @@ function useAccessData(accessHash: string, chainId: number) {
       queryFn: async () => {
         const iexec = await getIExec();
         const access = await iexec.orderbook.fetchDatasetorder(accessHash);
-        const { dataset } = await iexec.dataset.showDataset(
-          access.order.dataset
-        );
-        return { access, dataset };
+        const apprestrict = access.order.apprestrict;
+        const workerpoolrestrict = access.order.workerpoolrestrict;
+
+        const result = await execute(accessAssetsDetailsQuery, chainId, {
+          datasetAddress: access.order.dataset.toLowerCase() || '',
+          appAddress: apprestrict.toLowerCase() || '',
+          workerpoolAddress: workerpoolrestrict.toLowerCase() || '',
+          categoryId: '',
+        });
+
+        return {
+          access,
+          dataset: result.dataset,
+          app: result.app,
+          workerpool: result.workerpool,
+        };
       },
       placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
     });
 
   return {
     access: data?.access,
     dataset: data?.dataset,
+    appRestrictName: data?.app?.name,
+    workerpoolRestrictDescription: data?.workerpool?.description,
     isLoading,
     isRefetching,
     isError,
@@ -56,6 +72,8 @@ function DatasetAccessRoute() {
   const {
     access,
     dataset,
+    appRestrictName,
+    workerpoolRestrictDescription,
     isLoading,
     isRefetching,
     isError,
@@ -65,7 +83,13 @@ function DatasetAccessRoute() {
   } = useAccessData((accessHash as string).toLowerCase(), chainId!);
 
   const accessDetails = access
-    ? buildAccessDetails({ access, dataset, userAddress })
+    ? buildAccessDetails({
+        access,
+        datasetName: dataset?.name,
+        appRestrictName,
+        workerpoolRestrictDescription,
+        userAddress,
+      })
     : undefined;
 
   if (!isValid) {
diff --git a/src/routes/$chainSlug/_layout/access/workerpool/$accessHash.tsx b/src/routes/$chainSlug/_layout/access/workerpool/$accessHash.tsx
@@ -1,3 +1,4 @@
+import { execute } from '@/graphql/poco/execute';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
@@ -7,6 +8,7 @@ import { getIExec } from '@/externals/iexecSdkClient';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { AccessBreadcrumbs } from '@/modules/access/access/AccessBreadcrumbs';
+import { accessAssetsDetailsQuery } from '@/modules/access/access/accessAssetsDetailsQuery';
 import { buildAccessDetails } from '@/modules/access/access/buildAccessDetails';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import useUserStore from '@/stores/useUser.store';
@@ -30,17 +32,34 @@ function useAccessData(accessHash: string, chainId: number) {
       queryFn: async () => {
         const iexec = await getIExec();
         const access = await iexec.orderbook.fetchWorkerpoolorder(accessHash);
-        const { workerpool } = await iexec.workerpool.showWorkerpool(
-          access.order.workerpool
-        );
-        return { access, workerpool };
+        const datasetRestrict = access.order.datasetrestrict;
+        const appRestrict = access.order.apprestrict;
+        const workerpoolAddress = access.order.workerpool;
+
+        const result = await execute(accessAssetsDetailsQuery, chainId, {
+          datasetAddress: datasetRestrict.toLowerCase() || '',
+          appAddress: appRestrict.toLowerCase() || '',
+          workerpoolAddress: workerpoolAddress.toLowerCase() || '',
+          categoryId: access.order.category.toString(),
+        });
+
+        return {
+          access,
+          workerpool: result.workerpool,
+          dataset: result.dataset,
+          app: result.app,
+          category: result.category,
+        };
       },
       placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
     });
 
   return {
     access: data?.access,
     workerpool: data?.workerpool,
+    datasetRestrictName: data?.dataset?.name,
+    appRestrictName: data?.app?.name,
+    category: data?.category,
     isLoading,
     isRefetching,
     isError,
@@ -56,6 +75,9 @@ function WorkerpoolAccessRoute() {
   const {
     access,
     workerpool,
+    datasetRestrictName,
+    appRestrictName,
+    category,
     isLoading,
     isRefetching,
     isError,
@@ -65,7 +87,14 @@ function WorkerpoolAccessRoute() {
   } = useAccessData((accessHash as string).toLowerCase(), chainId!);
 
   const accessDetails = access
-    ? buildAccessDetails({ access, workerpool, userAddress })
+    ? buildAccessDetails({
+        access,
+        workerpoolDescription: workerpool?.description,
+        datasetRestrictName,
+        appRestrictName,
+        category: category,
+        userAddress,
+      })
     : undefined;
 
   if (!isValid) {
