feat: enhance SmartLinkGroup to conditionally display address or ID and label; update access details functions to include app, dataset, and workerpool information

Author: ErwanDecoster

src/components/SmartLinkGroup.tsx

@@ -30,13 +30,15 @@ interface SmartLinkGroupProps {
   addressOrId: string;
   label?: string;
   isCurrentPage?: boolean;
+  showAddressOrIdAndLabel?: boolean;
 }
 
 export default function SmartLinkGroup({
   type,
   addressOrId,
   label,
   isCurrentPage = false,
+  showAddressOrIdAndLabel = false,
 }: SmartLinkGroupProps) {
   const { chainId, isConnected } = useUserStore();
   const basePath = {
@@ -80,12 +82,15 @@ export default function SmartLinkGroup({
           <Link
             to={`/${getChainFromId(chainId)?.slug}/${basePath[type]}/${addressOrId}`}
           >
-            <span className="hidden md:inline">{label ?? addressOrId}</span>
+            <span className="hidden md:inline">
+              {label && !showAddressOrIdAndLabel ? label : addressOrId}
+            </span>
             <span className="inline md:hidden">
               {(label
                 ? truncateAddress(label)
                 : truncateAddress(addressOrId)) ?? addressOrId}
             </span>
+            {showAddressOrIdAndLabel ? `(${label})` : ''}
             {ens ? `(${ens})` : ''}
           </Link>
         </Button>

src/modules/access/access/buildAccessDetails.tsx

@@ -1,8 +1,11 @@
+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,
@@ -12,8 +15,14 @@ import { nrlcToRlc } from '@/utils/nrlcToRlc';
 
 export function buildAccessDetails({
   access,
+  dataset,
+  app,
+  workerpool,
 }: {
   access: PublishedApporder | PublishedDatasetorder | PublishedWorkerpoolorder;
+  dataset?: Dataset;
+  app?: App;
+  workerpool?: Workerpool;
 }) {
   if (!access) return {};
 
@@ -36,7 +45,8 @@ export function buildAccessDetails({
           <SmartLinkGroup
             type="dataset"
             addressOrId={order.dataset.toLowerCase()}
-            label={order.dataset.toLowerCase()}
+            label={dataset?.datasetName}
+            showAddressOrIdAndLabel={true}
           />
         ),
       }),
@@ -50,7 +60,8 @@ export function buildAccessDetails({
           <SmartLinkGroup
             type="app"
             addressOrId={order.app.toLowerCase()}
-            label={order.app.toLowerCase()}
+            label={app?.appName}
+            showAddressOrIdAndLabel={true}
           />
         ),
       }),
@@ -64,7 +75,8 @@ export function buildAccessDetails({
           <SmartLinkGroup
             type="workerpool"
             addressOrId={order.workerpool.toLowerCase()}
-            label={order.workerpool.toLowerCase()}
+            label={workerpool?.workerpoolDescription}
+            showAddressOrIdAndLabel={true}
           />
         ),
       }),

src/routes/$chainSlug/_layout/access/app/$accessHash.tsx

@@ -30,14 +30,15 @@ function useAccessData(accessHash: string, chainId: number) {
       queryFn: async () => {
         const iexec = await getIExec();
         const access = await iexec.orderbook.fetchApporder(accessHash);
-        return { access };
+        const { app } = await iexec.app.showApp(access.order.app);
+        return { access, app };
       },
       placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
     });
 
   return {
-    data: data?.access,
-    accessType: 'App' as const,
+    access: data?.access,
+    app: data?.app,
     isLoading,
     isRefetching,
     isError,
@@ -51,8 +52,8 @@ function AppAccessRoute() {
   const { chainId } = useUserStore();
   const { accessHash } = Route.useParams();
   const {
-    data: access,
-    accessType,
+    access,
+    app,
     isLoading,
     isRefetching,
     isError,
@@ -61,7 +62,9 @@ function AppAccessRoute() {
     error,
   } = useAccessData((accessHash as string).toLowerCase(), chainId!);
 
-  const accessDetails = access ? buildAccessDetails({ access }) : undefined;
+  const accessDetails = access
+    ? buildAccessDetails({ access, app })
+    : undefined;
 
   if (!isValid) {
     return <ErrorAlert className="my-16" message="Invalid access address." />;
@@ -78,7 +81,7 @@ function AppAccessRoute() {
         <div className="space-y-2">
           <h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
             <AccessIcon size={24} />
-            {accessType} access details
+            App access details
             {!access && isError && (
               <span className="text-muted-foreground text-sm font-light">
                 (outdated)

src/routes/$chainSlug/_layout/access/dataset/$accessHash.tsx

@@ -30,14 +30,17 @@ function useAccessData(accessHash: string, chainId: number) {
       queryFn: async () => {
         const iexec = await getIExec();
         const access = await iexec.orderbook.fetchDatasetorder(accessHash);
-        return { access };
+        const { dataset } = await iexec.dataset.showDataset(
+          access.order.dataset
+        );
+        return { access, dataset };
       },
       placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
     });
 
   return {
-    data: data?.access,
-    accessType: 'Dataset' as const,
+    access: data?.access,
+    dataset: data?.dataset,
     isLoading,
     isRefetching,
     isError,
@@ -51,8 +54,8 @@ function DatasetAccessRoute() {
   const { chainId } = useUserStore();
   const { accessHash } = Route.useParams();
   const {
-    data: access,
-    accessType,
+    access,
+    dataset,
     isLoading,
     isRefetching,
     isError,
@@ -61,7 +64,9 @@ function DatasetAccessRoute() {
     error,
   } = useAccessData((accessHash as string).toLowerCase(), chainId!);
 
-  const accessDetails = access ? buildAccessDetails({ access }) : undefined;
+  const accessDetails = access
+    ? buildAccessDetails({ access, dataset })
+    : undefined;
 
   if (!isValid) {
     return <ErrorAlert className="my-16" message="Invalid access address." />;
@@ -78,7 +83,7 @@ function DatasetAccessRoute() {
         <div className="space-y-2">
           <h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
             <AccessIcon size={24} />
-            {accessType} access details
+            Dataset access details
             {!access && isError && (
               <span className="text-muted-foreground text-sm font-light">
                 (outdated)

src/routes/$chainSlug/_layout/access/workerpool/$accessHash.tsx

@@ -30,14 +30,17 @@ function useAccessData(accessHash: string, chainId: number) {
       queryFn: async () => {
         const iexec = await getIExec();
         const access = await iexec.orderbook.fetchWorkerpoolorder(accessHash);
-        return { access };
+        const { workerpool } = await iexec.workerpool.showWorkerpool(
+          access.order.workerpool
+        );
+        return { access, workerpool };
       },
       placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
     });
 
   return {
-    data: data?.access,
-    accessType: 'Workerpool' as const,
+    access: data?.access,
+    workerpool: data?.workerpool,
     isLoading,
     isRefetching,
     isError,
@@ -51,8 +54,8 @@ function WorkerpoolAccessRoute() {
   const { chainId } = useUserStore();
   const { accessHash } = Route.useParams();
   const {
-    data: access,
-    accessType,
+    access,
+    workerpool,
     isLoading,
     isRefetching,
     isError,
@@ -61,7 +64,9 @@ function WorkerpoolAccessRoute() {
     error,
   } = useAccessData((accessHash as string).toLowerCase(), chainId!);
 
-  const accessDetails = access ? buildAccessDetails({ access }) : undefined;
+  const accessDetails = access
+    ? buildAccessDetails({ access, workerpool })
+    : undefined;
 
   if (!isValid) {
     return <ErrorAlert className="my-16" message="Invalid access address." />;
@@ -78,7 +83,7 @@ function WorkerpoolAccessRoute() {
         <div className="space-y-2">
           <h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
             <AccessIcon size={24} />
-            {accessType} access details
+            Workerpool access details
             {!access && isError && (
               <span className="text-muted-foreground text-sm font-light">
                 (outdated)