move noMetamask check into useNetworkCheck

unicrowio · Mar 6, 2023 · 8e3ef12 · 8e3ef12
1 parent a8b6ed8
commit 8e3ef12
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 22 deletions.
diff --git a/src/ui/internal/components/ScopedModal.tsx b/src/ui/internal/components/ScopedModal.tsx
@@ -9,9 +9,6 @@ import {
 } from "../../../ui/internal/components/Modal";
 import { CloseIcon } from "../assets/CloseIcon";
 import { useNetworkCheck } from "../hooks/useNetworkCheck";
-import { isWeb3WalletInstalled } from "../../../wallet";
-import { ModalError } from "./ModalError";
-import { metamaskUrl } from "../../../helpers/constants";
 import { Forbidden } from "./Forbidden";
 import { ModalBodySkeleton } from "./ModalBodySkeleton";
 import { stopAsync } from "../hooks/useAsync";
@@ -30,7 +27,6 @@ export const ScopedModal: React.FunctionComponent<ScopedModalProps> = (
   props,
 ): JSX.Element => {
   const { WithNetworkCheck } = useNetworkCheck();
-  const metamaskInstalled = isWeb3WalletInstalled();
   const { isForbidden = false, reason } = props.modalAction || {};
   const [bodyIsEmpty, setBodyIsEmpty] = React.useState(true);
 
@@ -52,13 +48,8 @@ export const ScopedModal: React.FunctionComponent<ScopedModalProps> = (
           {isForbidden && (
             <Forbidden description={reason} onClose={props.onClose} />
           )}
-          {!metamaskInstalled && (
-            <ModalError
-              onClick={() => window.open(metamaskUrl)}
-              type="noMetaMask"
-            />
-          )}
-          {!isForbidden && metamaskInstalled && (
+
+          {!isForbidden && (
             <ModalBody>
               {bodyIsEmpty && <ModalBodySkeleton />}
               {!bodyIsEmpty && (
@@ -73,14 +64,7 @@ export const ScopedModal: React.FunctionComponent<ScopedModalProps> = (
           )}
         </>,
       ),
-    [
-      props.body,
-      props.footer,
-      WithNetworkCheck,
-      metamaskInstalled,
-      isForbidden,
-      reason,
-    ],
+    [props.body, props.footer, WithNetworkCheck, isForbidden, reason],
   );
 
   return (

diff --git a/src/ui/internal/hooks/useNetworkCheck.tsx b/src/ui/internal/hooks/useNetworkCheck.tsx
@@ -1,14 +1,17 @@
 import React from "react";
 import {
   isCorrectNetworkConnected,
+  isWeb3WalletInstalled,
   startListeningNetwork,
   stopListeningNetwork,
   switchNetwork,
 } from "wallet";
 import { ModalError } from "ui/internal/components/ModalError";
 import { DefaultNetwork } from "typing";
+import { metamaskUrl } from "../../../helpers/constants";
 
 export const useNetworkCheck = () => {
+  const metamaskInstalled = isWeb3WalletInstalled();
   const [isCorrectNetwork, setIsCorrectNetwork] = React.useState<
     boolean | undefined
   >(undefined);
@@ -41,14 +44,17 @@ export const useNetworkCheck = () => {
 
   const WithNetworkCheck = React.useCallback(
     (Body: JSX.Element) =>
-      isCorrectNetwork === undefined ? (
-        <></>
+      !metamaskInstalled ? (
+        <ModalError
+          onClick={() => window.open(metamaskUrl)}
+          type="noMetaMask"
+        />
       ) : isCorrectNetwork ? (
         Body
       ) : (
         <ModalError type="wrongNetwork" onClick={onNetworkSwitch} />
       ),
-    [isCorrectNetwork],
+    [isCorrectNetwork, metamaskInstalled],
   );
 
   return {