feat: add GrantAccessModal

Author: ErwanDecoster

src/config/config.ts

@@ -0,0 +1,11 @@
+export const ITEMS_PER_PAGE = 6;
+
+/**
+ * See smart-contract transactions:
+ * https://blockscout-bellecour.iex.ec/address/0x781482C39CcE25546583EaC4957Fb7Bf04C277D2
+ *
+ * See all idapps in the whitelist:
+ * https://explorer.iex.ec/bellecour/address/0x0c6c77a11068db9fadfba25182e02863361f58da
+ */
+export const WEB3MAIL_IDAPPS_WHITELIST_SC =
+  '0x781482c39cce25546583eac4957fb7bf04c277d2';

src/modules/myData/protectedData/GrantAccessModal.tsx

@@ -1,22 +1,31 @@
+import { WEB3MAIL_IDAPPS_WHITELIST_SC } from '@/config/config';
+import { Address } from '@/types';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Alert } from '@/components/Alert';
 import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogFooter,
-} from '@/components/ui/dialog.tsx';
+import { Dialog, DialogTitle, DialogContent } from '@/components/ui/dialog.tsx';
+import { toast } from '@/components/ui/use-toast';
+import { getDataProtectorCoreClient } from '@/externals/iexecSdkClient';
+import useUserStore from '@/stores/useUser.store';
 
 export default function GrantAccessModal({
   isSwitchingModalOpen,
   setSwitchingModalOpen,
+  protectedDataAddress,
 }: {
   isSwitchingModalOpen: boolean;
   setSwitchingModalOpen: (openState: boolean) => void;
+  protectedDataAddress: Address;
 }) {
+  const { address: userAddress } = useUserStore();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
   const [formData, setFormData] = useState({
     userAddress: '',
-    accessNumber: '',
+    accessNumber: undefined,
   });
 
   const handleChange = (e: { target: { name: string; value: string } }) => {
@@ -27,12 +36,65 @@ export default function GrantAccessModal({
     });
   };
 
+  const validateFormData = () => {
+    if (!formData.userAddress) {
+      return 'Please enter a user address';
+    }
+    if (!formData.accessNumber) {
+      return 'Please enter a number of access';
+    }
+    return null;
+  };
+
+  const handleGrantAccess = async () => {
+    const errorMessage = validateFormData();
+    if (errorMessage) {
+      toast({ variant: 'danger', title: 'Error', description: errorMessage });
+      throw new Error(errorMessage);
+    } else {
+      grantAccessMutation.mutate();
+    }
+  };
+
+  const grantAccessMutation = useMutation({
+    mutationKey: ['grantAccess', protectedDataAddress],
+    mutationFn: async () => {
+      const dataProtectorCore = await getDataProtectorCoreClient();
+      const grantedAccess = await dataProtectorCore.grantAccess({
+        protectedData: protectedDataAddress,
+        authorizedUser: formData.userAddress,
+        authorizedApp: WEB3MAIL_IDAPPS_WHITELIST_SC,
+        pricePerAccess: 0,
+        numberOfAccess: formData.accessNumber,
+      });
+
+      return grantedAccess;
+    },
+    onError: (err) => {
+      console.error(err);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['granted access', protectedDataAddress, userAddress],
+      });
+      navigate(`/my-data/protected-data/${protectedDataAddress}`);
+      toast({
+        title: 'You have successfully authorized a new user.',
+        variant: 'success',
+      });
+      resetForm();
+    },
+  });
+
+  const resetForm = () => {
+    setFormData({ userAddress: '', accessNumber: undefined });
+  };
+
   return (
     <Dialog
       open={isSwitchingModalOpen}
       onOpenChange={(openState: boolean) => (
-        setSwitchingModalOpen(openState),
-        setFormData({ userAddress: '', accessNumber: '' })
+        setSwitchingModalOpen(openState), resetForm()
       )}
     >
       <DialogContent>
@@ -43,6 +105,7 @@ export default function GrantAccessModal({
           className="mt-4 flex flex-col gap-4"
           onSubmit={(e) => {
             e.preventDefault();
+            handleGrantAccess();
           }}
         >
           <div className="grid gap-2">
@@ -64,7 +127,7 @@ export default function GrantAccessModal({
             <Button
               variant="text"
               size="none"
-              className="inline max-w-full justify-normal overflow-hidden text-ellipsis text-yellow-300"
+              className="inline max-w-full justify-normal overflow-hidden text-base text-ellipsis text-yellow-300"
               onClick={() => {
                 setFormData((prevData) => ({
                   ...prevData,
@@ -76,19 +139,19 @@ export default function GrantAccessModal({
             </Button>
           </div>
           <div>
-            Authorize any user :{' '}
+            Authorize myself :{' '}
             <Button
               variant="text"
               size="none"
-              className="inline max-w-full justify-normal overflow-hidden text-ellipsis text-yellow-300"
+              className="inline max-w-full justify-normal overflow-hidden text-base text-ellipsis text-yellow-300"
               onClick={() => {
                 setFormData((prevData) => ({
                   ...prevData,
-                  userAddress: '0xa55513ac50fa0198c7fcd14f284229ddb8d357e6',
+                  userAddress: userAddress || '',
                 }));
               }}
             >
-              0xa55513ac50fa0198c7fcd14f284229ddb8d357e6
+              {userAddress}
             </Button>
           </div>
           <div className="grid gap-2">
@@ -102,16 +165,66 @@ export default function GrantAccessModal({
               id="access_number"
             />
           </div>
+          {/* <div className="flex w-full max-w-[550px] flex-col gap-y-0.5 text-sm">
+            {Object.keys(statuses).length > 0 && (
+              <div className="mt-6">
+                {Object.entries(statuses).map(
+                  ([message, { isDone, isError }]) => (
+                    <StatusMessage
+                      key={message}
+                      message={message}
+                      isDone={isDone}
+                      isError={isError}
+                    />
+                  )
+                )}
+              </div>
+            )}
+          </div> */}
+          {grantAccessMutation.isError &&
+          grantAccessMutation.error.message === 'Failed to sign data access' &&
+          !(grantAccessMutation.error.cause as Error).message.startsWith(
+            'ethers-user-denied'
+          ) ? (
+            <Alert variant="error">
+              <p>Oops, something went wrong while adding an authorized user.</p>
+              <p>
+                {grantAccessMutation.error.cause
+                  ? grantAccessMutation.error.cause.toString()
+                  : grantAccessMutation.error.toString()}
+              </p>
+              <p>
+                Are you sure your protected data was created in the same
+                environment?'
+              </p>
+            </Alert>
+          ) : (
+            grantAccessMutation.isError && (
+              <Alert variant="error">
+
+                <p>
+                  Oops, something went wrong while adding an authorized user.
+                </p>
+                <p>
+                  {grantAccessMutation.error.cause
+                    ? grantAccessMutation.error.cause.message.toString()
+                    : grantAccessMutation.error.toString()}
+                </p>
+              </Alert>
+            )
+          )}
+          <div className="mt-2 flex justify-center gap-5">
+            <Button
+              variant="outline"
+              onClick={() => setSwitchingModalOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" isLoading={grantAccessMutation.isPending}>
+              Add User
+            </Button>
+          </div>
         </form>
-        <DialogFooter className="mt-2 flex !justify-center gap-5">
-          <Button
-            variant="outline"
-            onClick={() => setSwitchingModalOpen(false)}
-          >
-            Cancel
-          </Button>
-          <Button>Add User</Button>
-        </DialogFooter>
       </DialogContent>
     </Dialog>
   );