feat: add revoke access button on user access granted page

Author: ErwanDecoster

src/modules/access/access/RevokeAccess.tsx

@@ -1,4 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
 import {
   PublishedApporder,
   PublishedDatasetorder,
@@ -8,14 +9,18 @@ import { LoaderCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { getIExec } from '@/externals/iexecSdkClient';
 import useUserStore from '@/stores/useUser.store';
+import { getChainFromId } from '@/utils/chain.utils';
 
 export default function RevokeAccess({
   access,
+  onRevoked,
 }: {
   access: PublishedApporder | PublishedDatasetorder | PublishedWorkerpoolorder;
+  onRevoked?: () => void;
 }) {
-  const { chainId } = useUserStore();
+  const { chainId, address: userAddress } = useUserStore();
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
 
   const order = access.order;
 
@@ -48,6 +53,18 @@ export default function RevokeAccess({
       queryClient.invalidateQueries({
         queryKey: [chainId, 'address', `${accessType}sGrantedAccess`],
       });
+      // Navigate to the user's granted access tab if we have user address
+      if (userAddress) {
+        const chainSlug = chainId ? getChainFromId(chainId)?.slug : undefined;
+        if (chainSlug) {
+          navigate({
+            to: `/${chainSlug}/address/${userAddress}`,
+            search: { addressTab: 'GRANTED ACCESS' },
+            replace: true,
+          });
+        }
+      }
+      if (onRevoked) onRevoked();
     },
   });
 
@@ -57,9 +74,8 @@ export default function RevokeAccess({
     <Button
       variant="outline"
       size="sm"
-      onClick={() => {
-        revokeAccessMutation.mutate();
-      }}
+      onClick={() => revokeAccessMutation.mutate()}
+      disabled={revokeAccessMutation.isPending}
     >
       {revokeAccessMutation.isPending && (
         <LoaderCircle className="animate-spin" />

src/modules/access/access/buildAccessDetails.tsx

@@ -12,17 +12,20 @@ import {
   formatElapsedTime,
 } from '@/utils/formatElapsedTime';
 import { nrlcToRlc } from '@/utils/nrlcToRlc';
+import RevokeAccess from './RevokeAccess';
 
 export function buildAccessDetails({
   access,
   dataset,
   app,
   workerpool,
+  userAddress,
 }: {
   access: PublishedApporder | PublishedDatasetorder | PublishedWorkerpoolorder;
   dataset?: Dataset;
   app?: App;
   workerpool?: Workerpool;
+  userAddress?: string;
 }) {
   if (!access) return {};
 
@@ -123,11 +126,17 @@ export function buildAccessDetails({
       }),
     ...(access.signer && {
       Signer: (
-        <SmartLinkGroup
-          type="address"
-          addressOrId={access.signer.toLowerCase()}
-          label={access.signer.toLowerCase()}
-        />
+        <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>
       ),
     }),
     ...(access.publicationTimestamp && {

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

@@ -49,7 +49,7 @@ function useAccessData(accessHash: string, chainId: number) {
 }
 
 function AppAccessRoute() {
-  const { chainId } = useUserStore();
+  const { chainId, address: userAddress } = useUserStore();
   const { accessHash } = Route.useParams();
   const {
     access,
@@ -63,7 +63,7 @@ function AppAccessRoute() {
   } = useAccessData((accessHash as string).toLowerCase(), chainId!);
 
   const accessDetails = access
-    ? buildAccessDetails({ access, app })
+    ? buildAccessDetails({ access, app, userAddress })
     : undefined;
 
   if (!isValid) {

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

@@ -51,7 +51,7 @@ function useAccessData(accessHash: string, chainId: number) {
 }
 
 function DatasetAccessRoute() {
-  const { chainId } = useUserStore();
+  const { chainId, address: userAddress } = useUserStore();
   const { accessHash } = Route.useParams();
   const {
     access,
@@ -65,7 +65,7 @@ function DatasetAccessRoute() {
   } = useAccessData((accessHash as string).toLowerCase(), chainId!);
 
   const accessDetails = access
-    ? buildAccessDetails({ access, dataset })
+    ? buildAccessDetails({ access, dataset, userAddress })
     : undefined;
 
   if (!isValid) {

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

@@ -51,7 +51,7 @@ function useAccessData(accessHash: string, chainId: number) {
 }
 
 function WorkerpoolAccessRoute() {
-  const { chainId } = useUserStore();
+  const { chainId, address: userAddress } = useUserStore();
   const { accessHash } = Route.useParams();
   const {
     access,
@@ -65,7 +65,7 @@ function WorkerpoolAccessRoute() {
   } = useAccessData((accessHash as string).toLowerCase(), chainId!);
 
   const accessDetails = access
-    ? buildAccessDetails({ access, workerpool })
+    ? buildAccessDetails({ access, workerpool, userAddress })
     : undefined;
 
   if (!isValid) {