feat: upgrade access feature

src/components/SmartLinkGroup.tsx

@@ -22,7 +22,8 @@ type LinkType =
   | 'workerpool'
   | 'app'
   | 'address'
-  | 'transaction';
+  | 'transaction'
+  | 'order';
 
 interface SmartLinkGroupProps {
   type: LinkType;
@@ -46,6 +47,7 @@ export default function SmartLinkGroup({
     app: 'app',
     address: 'address',
     transaction: 'tx',
+    order: 'order',
   };
 
   const { data: ens } = useQuery({
@@ -98,7 +100,7 @@ export default function SmartLinkGroup({
         </div>
       )}
 
-      {type !== 'task' && (
+      {type !== 'task' && type !== 'order' && (
         <TooltipProvider delayDuration={0}>
           <Tooltip>
             <TooltipTrigger asChild>

src/components/icons/AccessIcon.tsx

@@ -0,0 +1,34 @@
+const DatasetIcon = ({ size = 20, className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M12 9.16691C16.1421 9.16691 19.5 8.04764 19.5 6.66695C19.5 5.28626 16.1421 4.16699 12 4.16699C7.85786 4.16699 4.5 5.28626 4.5 6.66695C4.5 8.04764 7.85786 9.16691 12 9.16691Z"
+      stroke="currentColor"
+      strokeWidth="2.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19.5 12.5C19.5 13.8834 16.1666 15 12 15C7.83336 15 4.5 13.8832 4.5 12.5"
+      stroke="currentColor"
+      strokeWidth="2.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4.5 6.66602V18.3327C4.5 19.716 7.83336 20.8326 12 20.8326C16.1666 20.8326 19.5 19.7159 19.5 18.3327V6.66602"
+      stroke="currentColor"
+      strokeWidth="2.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default DatasetIcon;

src/modules/Tabs.tsx

@@ -78,7 +78,7 @@ export function Tabs({
               if (!isDisabled) onTabChange(index);
             }}
             className={cn(
-              'text-foreground relative z-10 border border-transparent px-8 py-2 transition-colors duration-300 hover:no-underline',
+              'text-foreground relative z-10 border border-transparent px-4 py-2 transition-colors duration-300 hover:no-underline',
               isDisabled && 'cursor-not-allowed opacity-50',
               currentTab === index && 'text-primary'
             )}

src/modules/access/access/AccessBreadcrumbs.tsx

@@ -0,0 +1,35 @@
+import { ChainLink } from '@/components/ChainLink';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import { truncateAddress } from '@/utils/truncateAddress';
+
+type AccessBreadcrumbsProps = {
+  accessHash: string;
+};
+
+export function AccessBreadcrumbs({ accessHash }: AccessBreadcrumbsProps) {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <ChainLink to="/">Homepage</ChainLink>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>
+            Access{' '}
+            <span className="font-normal">{truncateAddress(accessHash)}</span>
+          </BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

src/modules/access/access/RevokeAccess.tsx

@@ -0,0 +1,70 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  PublishedApporder,
+  PublishedDatasetorder,
+  PublishedWorkerpoolorder,
+} from 'iexec/IExecOrderbookModule';
+import { LoaderCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { getIExec } from '@/externals/iexecSdkClient';
+import useUserStore from '@/stores/useUser.store';
+
+export default function RevokeAccess({
+  access,
+}: {
+  access: PublishedApporder | PublishedDatasetorder | PublishedWorkerpoolorder;
+}) {
+  const { chainId } = useUserStore();
+  const queryClient = useQueryClient();
+
+  const order = access.order;
+
+  const revokeAccessMutation = useMutation({
+    mutationFn: async () => {
+      const iexec = await getIExec();
+
+      if ('app' in order) {
+        return await iexec.order.cancelApporder(order);
+      } else if ('dataset' in order) {
+        return await iexec.order.cancelDatasetorder(order);
+      } else if ('workerpool' in order) {
+        return await iexec.order.cancelWorkerpoolorder(order);
+      } else {
+        throw new Error('Unknown order type');
+      }
+    },
+    onError: (err) => {
+      console.error(err);
+    },
+    onSuccess: () => {
+      let accessType = '';
+      if ('app' in order) {
+        accessType = 'App';
+      } else if ('dataset' in order) {
+        accessType = 'Dataset';
+      } else {
+        accessType = 'Workerpool';
+      }
+      queryClient.invalidateQueries({
+        queryKey: [chainId, 'address', `${accessType}sGrantedAccess`],
+      });
+    },
+  });
+
+  if (!access) return;
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => {
+        revokeAccessMutation.mutate();
+      }}
+    >
+      {revokeAccessMutation.isPending && (
+        <LoaderCircle className="animate-spin" />
+      )}
+      Revoke access
+    </Button>
+  );
+}

src/modules/access/access/buildAccessDetails.tsx

@@ -0,0 +1,137 @@
+import {
+  PublishedApporder,
+  PublishedDatasetorder,
+  PublishedWorkerpoolorder,
+} from 'iexec/IExecOrderbookModule';
+import SmartLinkGroup from '@/components/SmartLinkGroup';
+import {
+  formatDateCompact,
+  formatElapsedTime,
+} from '@/utils/formatElapsedTime';
+import { nrlcToRlc } from '@/utils/nrlcToRlc';
+
+export function buildAccessDetails({
+  access,
+}: {
+  access: PublishedApporder | PublishedDatasetorder | PublishedWorkerpoolorder;
+}) {
+  if (!access) return {};
+
+  const order = access.order || {};
+
+  return {
+    ...(access.orderHash && {
+      'Order Hash': (
+        <SmartLinkGroup
+          type="order"
+          isCurrentPage={true}
+          addressOrId={access.orderHash.toLowerCase()}
+          label={access.orderHash.toLowerCase()}
+        />
+      ),
+    }),
+    ...('dataset' in order &&
+      order.dataset && {
+        Dataset: (
+          <SmartLinkGroup
+            type="dataset"
+            addressOrId={order.dataset.toLowerCase()}
+            label={order.dataset.toLowerCase()}
+          />
+        ),
+      }),
+    ...('datasetprice' in order &&
+      order.datasetprice && {
+        'Dataset Price': <span>{nrlcToRlc(order.datasetprice)}</span>,
+      }),
+    ...('app' in order &&
+      order.app && {
+        App: (
+          <SmartLinkGroup
+            type="app"
+            addressOrId={order.app.toLowerCase()}
+            label={order.app.toLowerCase()}
+          />
+        ),
+      }),
+    ...('appprice' in order &&
+      order.appprice && {
+        'App Price': <span>{nrlcToRlc(order.appprice)}</span>,
+      }),
+    ...('workerpool' in order &&
+      order.workerpool && {
+        Workerpool: (
+          <SmartLinkGroup
+            type="workerpool"
+            addressOrId={order.workerpool.toLowerCase()}
+            label={order.workerpool.toLowerCase()}
+          />
+        ),
+      }),
+    ...('workerpoolprice' in order &&
+      order.workerpoolprice !== undefined && {
+        'Workerpool Price': <span>{nrlcToRlc(order.workerpoolprice)}</span>,
+      }),
+    ...(order.volume !== undefined && {
+      Volume: <span>{order.volume}</span>,
+    }),
+    ...(access.remaining !== undefined && {
+      Remaining: <span>{access.remaining}</span>,
+    }),
+    ...(order.salt && { Salt: <span>{order.salt}</span> }),
+    ...(order.tag && { Tag: <span>{order.tag}</span> }),
+    ...('apprestrict' in order &&
+      order.apprestrict && {
+        'App Restrict': (
+          <SmartLinkGroup
+            type="app"
+            addressOrId={order.apprestrict.toLowerCase()}
+            label={order.apprestrict.toLowerCase()}
+          />
+        ),
+      }),
+    ...(order.requesterrestrict && {
+      'Requester Restrict': (
+        <SmartLinkGroup
+          type="address"
+          addressOrId={order.requesterrestrict.toLowerCase()}
+          label={order.requesterrestrict.toLowerCase()}
+        />
+      ),
+    }),
+    ...('workerpoolrestrict' in order &&
+      order.workerpoolrestrict && {
+        'Workerpool Restrict': (
+          <SmartLinkGroup
+            type="workerpool"
+            addressOrId={order.workerpoolrestrict.toLowerCase()}
+            label={order.workerpoolrestrict.toLowerCase()}
+          />
+        ),
+      }),
+    ...(access.signer && {
+      Signer: (
+        <SmartLinkGroup
+          type="address"
+          addressOrId={access.signer.toLowerCase()}
+          label={access.signer.toLowerCase()}
+        />
+      ),
+    }),
+    ...(access.publicationTimestamp && {
+      Publication: (
+        <p>
+          {formatElapsedTime(
+            new Date(access.publicationTimestamp).getTime() / 1000
+          )}{' '}
+          (
+          {formatDateCompact(
+            new Date(access.publicationTimestamp).getTime() / 1000
+          )}
+          )
+        </p>
+      ),
+    }),
+    ...(order.sign && { Signature: <span>{order.sign}</span> }),
+  };
+}