Fix wrong chain id problem -> blank page

packages/react-app/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@1hive/1hive-ui": "^1.0.2",
     "@1hive/use-wallet": "npm:@1hive/[email protected]",
+    "@babel/runtime": "7.18.0",
     "@babel/types": "^7.15.6",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
@@ -49,11 +50,11 @@
     "node-sass": "^7.0.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-app-rewire-hot-loader": "^2.0.1",
     "react-app-rewired": "^2.1.8",
     "react-dev-utils": "^11.0.4",
     "react-device-detect": "^1.17.0",
+    "react-dom": "^17.0.2",
     "react-focus-within": "^2.0.2",
     "react-hot-loader": "^4.13.0",
     "react-icons": "^4.2.0",

packages/react-app/src/app.tsx

@@ -40,24 +40,24 @@ function App() {
   return (
     <AppStyled theme={currentTheme}>
       <PageContextProvider>
-        <WalletProvider>
-          <TransactionContextProvider>
-            <FilterContextProvider>
-              <Main
-                assetsUrl="/aragon-ui/"
-                layout={false}
-                scrollView={false}
-                theme={currentTheme ?? DEFAULT_THEME}
-              >
-                <BrowserRouter>
-                  <ErrorBoundary>
+        <TransactionContextProvider>
+          <FilterContextProvider>
+            <Main
+              assetsUrl="/aragon-ui/"
+              layout={false}
+              scrollView={false}
+              theme={currentTheme ?? DEFAULT_THEME}
+            >
+              <BrowserRouter>
+                <ErrorBoundary>
+                  <WalletProvider>
                     <Routes />
-                  </ErrorBoundary>
-                </BrowserRouter>
-              </Main>
-            </FilterContextProvider>
-          </TransactionContextProvider>
-        </WalletProvider>
+                  </WalletProvider>
+                </ErrorBoundary>
+              </BrowserRouter>
+            </Main>
+          </FilterContextProvider>
+        </TransactionContextProvider>
       </PageContextProvider>
     </AppStyled>
   );

packages/react-app/src/components/account/account-module.tsx

@@ -158,7 +158,7 @@ function AccountModule({ compact = false }: Props) {
         <Button
           icon={<IconConnect />}
           label={`Switch wallet to ${name}`}
-          onClick={() => wallet.changeNetwork()}
+          onClick={() => wallet.changeNetwork(undefined, false)}
           display={compact ? 'icon' : 'all'}
           mode="strong"
         />

packages/react-app/src/components/header/index.tsx

@@ -109,7 +109,6 @@ function Header({ children }: Props) {
                   Object.values(networks).find((network) => network.name === networkNames[i])!
                     .chainId!,
                 );
-                // window.location.reload();
               }}
             />
           )}

packages/react-app/src/components/utils/error-boundary.tsx

@@ -15,23 +15,29 @@ type Props = {
 };
 
 class ErrorBoundary extends React.Component<Props> {
-  state = { hasError: false };
+  state: { hasError: boolean; error?: string | Error } = { hasError: false };
 
   static getDerivedStateFromError() {
     // Update state so the next render will show the fallback UI.
     return { hasError: true };
   }
 
   componentDidCatch(error: Error) {
+    const { error: stateError } = this.state;
+    if (!error || stateError === error) return;
     Logger.exception(error, 'An error occured at the top level');
-    this.setState({ hasError: true });
+    this.setState({ hasError: true, error });
   }
 
   render() {
-    const { hasError } = this.state;
-    if (hasError) {
-      const { toast } = this.props;
-      toast('💣️ Oops. Something went wrong');
+    try {
+      const { hasError, error } = this.state;
+      if (hasError && error && !error.toString().includes('Unknown chain id')) {
+        const { toast } = this.props;
+        toast?.('💣️ Oops. Something went wrong');
+      }
+    } catch (error) {
+      Logger.exception(error, 'An error occured while trying to show the toast');
     }
     const { children } = this.props;
     return children;

packages/react-app/src/components/views/quest-list.tsx

@@ -75,7 +75,7 @@
 `;
 
 export default function QuestList() {
-  const { walletAddress, walletConnected } = useWallet();
+  const { walletAddress } = useWallet();
   const [quests, setQuests] = useState<QuestModel[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [newQuestLoading, setNewQuestLoading] = useState(false);
@@ -131,7 +131,7 @@
     }
   }, [transaction?.status, transaction?.type]);
 
   const searchWords = useMemo(
     () => filter.search.split(/[&|]/gm).map((x) => x.trim()),
     [filter.search],
   );
@@ -179,7 +179,6 @@
           setHasMore(res.length >= QUESTS_PAGE_SIZE);
         },
       );
-      console.log(walletAddress, walletConnected);
     }
   };
 

packages/react-app/src/contexts/wallet.context.tsx

@@ -17,7 +17,7 @@ export type WalletContextModel = {
   activatingId: string;
   isWrongNetwork: boolean;
   ethereum: any;
-  changeNetwork: (_chainId?: number) => void;
+  changeNetwork: (_chainId?: number, _forceSwitch?: boolean) => void;
   openWalletConnect: React.Dispatch<React.SetStateAction<boolean>>;
   walletConnectOpened: boolean;
 };
@@ -35,18 +35,25 @@ type Props = {
 // Adds Ethers.js to the useWallet() object
 function WalletAugmented({ children }: Props) {
   const wallet = useWallet();
-  const { ethereum } = wallet;
-  const [isWrongNetwork, setIsWrongNetwork] = useState<boolean>();
+  const ethereum = wallet?.ethereum ?? (window as any).ethereum;
+  const { chainId, networkId } = getNetwork();
+
   const [activatingId, setActivating] = useState<string>();
   const [isConnected, setIsConnected] = useState(false);
   const [walletConnectOpened, openWalletConnect] = useState<boolean>(false);
-  const { chainId, networkId } = getNetwork();
   let timeoutInstance: number | undefined;
 
+  const isWrongNetwork = useMemo(
+    () => ethereum?.chainId && +ethereum.chainId !== chainId,
+    [activatingId, ethereum?.chainId, chainId],
+  );
+
   useEffect(() => {
-    const lastWalletConnected = localStorage.getItem('LAST_WALLET_CONNECTOR');
-    if (lastWalletConnected) {
-      handleConnect(lastWalletConnected);
+    if (!isWrongNetwork) {
+      const lastWalletConnected = localStorage.getItem('LAST_WALLET_CONNECTOR');
+      if (lastWalletConnected) {
+        handleConnect(lastWalletConnected);
+      }
     }
   }, []);
 
@@ -70,13 +77,10 @@ function WalletAugmented({ children }: Props) {
 
     setActivating(undefined);
 
-    if (ethereum && +ethereum.chainId !== chainId) {
-      setIsWrongNetwork(true);
+    if (isWrongNetwork) {
       return getDefaultProvider();
     }
 
-    setIsWrongNetwork(false);
-
     if (!ethereum) {
       return getDefaultProvider();
     }
@@ -89,7 +93,7 @@ function WalletAugmented({ children }: Props) {
       chainId,
       ensAddress: ensRegistry,
     });
-  }, [ethereum, chainId]);
+  }, [(window as any).ethereum, wallet?.ethereum, chainId]);
 
   const handleConnect = async (walletId?: string) => {
     setActivating(walletId ?? activatingId);
@@ -115,14 +119,15 @@ function WalletAugmented({ children }: Props) {
     setIsConnected(false);
   }
 
-  const changeNetwork = async (newChainId?: number) => {
+  const changeNetwork = async (newChainId?: number, forceSwitch: boolean = true) => {
     if (newChainId === chainId) {
       return;
     }
 
     if (!newChainId) {
       newChainId = chainId;
     }
+
     if (ethereum && EXPECTED_CHAIN_ID.includes(newChainId) && +ethereum.chainId !== newChainId) {
       try {
         await ethereum.request({
@@ -148,7 +153,11 @@ function WalletAugmented({ children }: Props) {
           } catch (addError) {
             Logger.error(addError);
             window.location.reload();
+            return;
           }
+        } else if (error.code === 4001 && !forceSwitch) {
+          // EIP-1193 userRejectedRequest error
+          return;
         }
       }
     }

packages/react-app/src/enums/quest-play-status.enum.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 export enum QuestPlayStatus {
   Played = 'Played', // One or more players
   Unplayed = 'Unplayed', // No players yet

packages/react-app/src/queries/quests.query.ts

@@ -158,7 +158,6 @@ export const fetchQuestEntities = async (
   filter: FilterModel,
   walletAddress: string,
 ) => {
-  // const { walletAddress, walletConnected } = useWallet();
   const { questsSubgraph, networkId } = getNetwork();
   let expireTimeLowerMs = 0;
   let expireTimeUpperMs = GQL_MAX_INT_MS;

packages/react-app/tsconfig.json

@@ -4,7 +4,11 @@
     "outDir": "build/dist",
     "module": "esnext",
     "target": "es6",
-    "lib": ["es6", "dom", "ES2021"],
+    "lib": [
+      "es6",
+      "dom",
+      "ES2021"
+    ],
     "sourceMap": true,
     "allowJs": true,
     "jsx": "react-jsx",
@@ -27,7 +31,6 @@
     "noEmit": true,
     "sourceRoot": "/",
     "inlineSources": true,
-    "ignoreDeprecations": "5.0"
   },
   "exclude": [
     "node_modules",
@@ -41,4 +44,4 @@
   "include": [
     "src"
   ]
-}
+}