feat: implement useChainChangeRedirect hook and integrate it into SendMessage and ProtectedData components

Author: ErwanDecoster

src/hooks/useChainChangeRedirect.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useUserStore from '@/stores/useUser.store';
+
+export function useChainChangeRedirect(redirectPath: string) {
+  const navigate = useNavigate();
+  const { chainId } = useUserStore();
+  const initialChainId = useRef<number | undefined>(undefined);
+  const hasInitialized = useRef(false);
+
+  useEffect(() => {
+    if (!hasInitialized.current && chainId !== undefined) {
+      initialChainId.current = chainId;
+      hasInitialized.current = true;
+      return;
+    }
+
+    if (
+      hasInitialized.current &&
+      initialChainId.current !== undefined &&
+      chainId !== undefined &&
+      chainId !== initialChainId.current
+    ) {
+      navigate(redirectPath);
+    }
+  }, [chainId, redirectPath, navigate]);
+}

src/views/contact/sendMessage.tsx

@@ -22,6 +22,7 @@ import {
   getWeb3mailClient,
   getWeb3telegramClient,
 } from '@/externals/iexecSdkClient';
+import { useChainChangeRedirect } from '@/hooks/useChainChangeRedirect';
 import { useSendMessageStore } from '@/stores/useSendMessage.store';
 import useUserStore from '@/stores/useUser.store';
 import { pluralize } from '@/utils/pluralize';
@@ -35,6 +36,8 @@ export default function SendMessage() {
     protectedDataAddress: Address;
   }>();
 
+  useChainChangeRedirect('/contacts');
+
   const [formData, setFormData] = useState({
     senderName: '',
     messageSubject: '',

src/views/myData/protectedData.tsx

@@ -8,6 +8,7 @@ import { DocLink } from '@/components/DocLink';
 import { PaginatedNavigation } from '@/components/PaginatedNavigation';
 import { Button, buttonVariants } from '@/components/ui/button';
 import { getDataProtectorCoreClient } from '@/externals/iexecSdkClient';
+import { useChainChangeRedirect } from '@/hooks/useChainChangeRedirect';
 import CheckSMSRequestSuccess from '@/modules/myData/CheckSMSRequestSuccess';
 import RevokeAccess from '@/modules/myData/RevokeAccess';
 import GrantAccessModal from '@/modules/myData/protectedData/GrantAccessModal';
@@ -49,6 +50,8 @@ export default function ProtectedData() {
   const [currentPage, setCurrentPage] = useState(0);
   const [isGrantAccessModalOpen, setIsGrantAccessModalOpen] = useState(false);
 
+  useChainChangeRedirect('/my-data');
+
   const protectedData = useQuery({
     queryKey: ['protectedData', protectedDataAddress, userAddress, chainId],
     queryFn: async () => {