handle case when walletconnect is not configured

blockscout · Dec 18, 2023 · e79a50d · e79a50d
1 parent 3308d9b
commit e79a50d
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/ui/shared/Web3ModalProvider.tsx b/ui/shared/Web3ModalProvider.tsx
@@ -84,18 +84,21 @@ interface Props {
   fallback?: JSX.Element | (() => JSX.Element);
 }
 
-const Web3ModalProvider = ({ children, fallback }: Props) => {
+const Fallback = ({ children, fallback }: Props) => {
+  return typeof fallback === 'function' ? fallback() : (fallback || <>{ children }</>); // eslint-disable-line react/jsx-no-useless-fragment
+};
+
+const Provider = ({ children, fallback }: Props) => {
   const { colorMode } = useColorMode();
   const { setThemeMode } = useWeb3ModalTheme();
 
   React.useEffect(() => {
-    if (wagmiConfig && feature.isEnabled) {
-      setThemeMode(colorMode);
-    }
+    setThemeMode(colorMode);
   }, [ colorMode, setThemeMode ]);
 
+  // not really necessary, but we have to make typescript happy
   if (!wagmiConfig || !feature.isEnabled) {
-    return typeof fallback === 'function' ? fallback() : (fallback || <>{ children }</>); // eslint-disable-line react/jsx-no-useless-fragment
+    return <Fallback fallback={ fallback }>{ children }</Fallback>;
   }
 
   return (
@@ -105,4 +108,6 @@ const Web3ModalProvider = ({ children, fallback }: Props) => {
   );
 };
 
+const Web3ModalProvider = wagmiConfig && feature.isEnabled ? Provider : Fallback;
+
 export default Web3ModalProvider;