fix: infinite render loop on connection error (#5808)

fix: infinite render loop

src/components/Web3Status/index.tsx

@@ -22,7 +22,7 @@ import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import {
   useCloseModal,
   useModalIsOpen,
-  useToggleMetamaskConnectionErrorModal,
+  useOpenMetamaskConnectionErrorModal,
   useToggleWalletDropdown,
   useToggleWalletModal,
 } from '../../state/application/hooks'
@@ -213,16 +213,16 @@ function Web3StatusInner() {
     toggleWalletDropdown()
   }, [toggleWalletDropdown])
   const toggleWalletModal = useToggleWalletModal()
-  const toggleMetamaskConnectionErrorModal = useToggleMetamaskConnectionErrorModal()
+  const openMetamaskConnectionErrorModal = useOpenMetamaskConnectionErrorModal()
   const walletIsOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN)
   const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable)
 
   const error = useAppSelector((state) => state.connection.errorByConnectionType[getConnection(connector).type])
   useEffect(() => {
     if (getIsMetaMask() && error) {
-      toggleMetamaskConnectionErrorModal()
+      openMetamaskConnectionErrorModal()
     }
-  }, [error, toggleMetamaskConnectionErrorModal])
+  }, [error, openMetamaskConnectionErrorModal])
 
   const allTransactions = useAllTransactions()
 

src/state/application/hooks.ts

@@ -97,6 +97,10 @@ export function useToggleMetamaskConnectionErrorModal(): () => void {
   return useToggleModal(ApplicationModal.METAMASK_CONNECTION_ERROR)
 }
 
+export function useOpenMetamaskConnectionErrorModal(): () => void {
+  return useOpenModal(ApplicationModal.METAMASK_CONNECTION_ERROR)
+}
+
 export function useOpenModal(modal: ApplicationModal): () => void {
   const dispatch = useAppDispatch()
   return useCallback(() => dispatch(setOpenModal(modal)), [dispatch, modal])