fix: wallet connect (#1706)

apps/token/src/app.tsx

@@ -1,6 +1,6 @@
 import './i18n';
 
-import React, { useMemo, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import { Integrations } from '@sentry/tracing';
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -15,6 +15,7 @@ import { Web3Connector } from './components/web3-connector';
 import { AppStateProvider } from './contexts/app-state/app-state-provider';
 import { ContractsProvider } from './contexts/contracts/contracts-provider';
 import { AppRouter } from './routes';
+import type { EthereumConfig } from '@vegaprotocol/web3';
 import { Web3Provider } from '@vegaprotocol/web3';
 import { VegaWalletDialogs } from './components/vega-wallet-dialogs';
 import { VegaWalletProvider } from '@vegaprotocol/wallet';
@@ -29,17 +30,51 @@ import { createClient } from './lib/apollo-client';
 import { createConnectors } from './lib/web3-connectors';
 import { ENV } from './config/env';
 
+const Web3Container = ({
+  chainId,
+  providerUrl,
+}: {
+  chainId: number;
+  providerUrl: string;
+}) => {
+  const sideBar = React.useMemo(() => {
+    return [<EthWallet />, <VegaWallet />];
+  }, []);
+  const Connectors = React.useMemo(() => {
+    return createConnectors(providerUrl, Number(chainId));
+  }, [chainId, providerUrl]);
+  return (
+    <Web3Provider connectors={Connectors}>
+      <Web3Connector connectors={Connectors} chainId={Number(chainId)}>
+        <VegaWalletProvider>
+          <ContractsProvider>
+            <AppLoader>
+              <BalanceManager>
+                <>
+                  <div className="app w-full max-w-[1300px] mx-auto grid grid-rows-[1fr_min-content] min-h-full border-neutral-700 lg:border-l lg:border-r lg:text-body-large">
+                    <TemplateSidebar sidebar={sideBar}>
+                      <AppRouter />
+                    </TemplateSidebar>
+                    <footer className="p-4 border-t border-neutral-700">
+                      <NetworkInfo />
+                    </footer>
+                  </div>
+                  <VegaWalletDialogs />
+                  <TransactionModal />
+                </>
+              </BalanceManager>
+            </AppLoader>
+          </ContractsProvider>
+        </VegaWalletProvider>
+      </Web3Connector>
+    </Web3Provider>
+  );
+};
+
 const AppContainer = () => {
-  const sideBar = React.useMemo(() => [<EthWallet />, <VegaWallet />], []);
   const { config, loading, error } = useEthereumConfig();
   const { VEGA_ENV, GIT_COMMIT_HASH, GIT_BRANCH, ETHEREUM_PROVIDER_URL } =
     useEnvironment();
-  const Connectors = useMemo(() => {
-    if (config?.chain_id) {
-      return createConnectors(ETHEREUM_PROVIDER_URL, Number(config.chain_id));
-    }
-    return undefined;
-  }, [config?.chain_id, ETHEREUM_PROVIDER_URL]);
 
   useEffect(() => {
     if (ENV.dsn) {
@@ -72,34 +107,19 @@ const AppContainer = () => {
     <Router>
       <AppStateProvider>
         <div className="grid min-h-full text-white">
-          <AsyncRenderer loading={loading} data={config} error={error}>
-            {Connectors && (
-              <Web3Provider connectors={Connectors}>
-                <Web3Connector>
-                  <VegaWalletProvider>
-                    <ContractsProvider>
-                      <AppLoader>
-                        <BalanceManager>
-                          <>
-                            <div className="app w-full max-w-[1300px] mx-auto grid grid-rows-[1fr_min-content] min-h-full border-neutral-700 lg:border-l lg:border-r lg:text-body-large">
-                              <TemplateSidebar sidebar={sideBar}>
-                                <AppRouter />
-                              </TemplateSidebar>
-                              <footer className="p-4 border-t border-neutral-700">
-                                <NetworkInfo />
-                              </footer>
-                            </div>
-                            <VegaWalletDialogs />
-                            <TransactionModal />
-                          </>
-                        </BalanceManager>
-                      </AppLoader>
-                    </ContractsProvider>
-                  </VegaWalletProvider>
-                </Web3Connector>
-              </Web3Provider>
-            )}
-          </AsyncRenderer>
+          <AsyncRenderer<EthereumConfig | null>
+            loading={loading}
+            data={config}
+            error={error}
+            render={(cnf) =>
+              cnf && (
+                <Web3Container
+                  chainId={Number(cnf.chain_id)}
+                  providerUrl={ETHEREUM_PROVIDER_URL}
+                />
+              )
+            }
+          />
         </div>
       </AppStateProvider>
     </Router>

apps/token/src/components/web3-connector/web3-connector.tsx

@@ -1,51 +1,47 @@
-import { useEnvironment } from '@vegaprotocol/environment';
 import { useEthereumConfig } from '@vegaprotocol/web3';
 import { Button, Splash, AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { Web3ConnectDialog } from '@vegaprotocol/web3';
 import { useWeb3React } from '@web3-react/core';
 import type { ReactElement } from 'react';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect } from 'react';
 import {
   AppStateActionType,
   useAppState,
 } from '../../contexts/app-state/app-state-context';
-import { createConnectors } from '../../lib/web3-connectors';
+import type { Web3ReactHooks } from '@web3-react/core';
+import type { Connector } from '@web3-react/types';
 
 interface Web3ConnectorProps {
   children: ReactElement;
+  connectors: [Connector, Web3ReactHooks][];
+  chainId: number;
 }
 
-export function Web3Connector({ children }: Web3ConnectorProps) {
+export function Web3Connector({
+  children,
+  connectors,
+  chainId,
+}: Web3ConnectorProps) {
   const { appState, appDispatch } = useAppState();
-  const { ETHEREUM_PROVIDER_URL } = useEnvironment();
-  const { config, loading, error } = useEthereumConfig();
-  const Connectors = useMemo(() => {
-    if (config?.chain_id) {
-      return createConnectors(ETHEREUM_PROVIDER_URL, Number(config.chain_id));
-    }
-    return undefined;
-  }, [config?.chain_id, ETHEREUM_PROVIDER_URL]);
   const setDialogOpen = useCallback(
     (isOpen: boolean) => {
       appDispatch({ type: AppStateActionType.SET_ETH_WALLET_OVERLAY, isOpen });
     },
     [appDispatch]
   );
-  const appChainId = Number(config?.chain_id);
+  const appChainId = Number(chainId);
   return (
-    <AsyncRenderer loading={loading} error={error} data={config}>
+    <>
       <Web3Content appChainId={appChainId} setDialogOpen={setDialogOpen}>
         {children}
       </Web3Content>
-      {Connectors && (
-        <Web3ConnectDialog
-          connectors={Connectors}
-          dialogOpen={appState.ethConnectOverlay}
-          setDialogOpen={setDialogOpen}
-          desiredChainId={appChainId}
-        />
-      )}
-    </AsyncRenderer>
+      <Web3ConnectDialog
+        connectors={connectors}
+        dialogOpen={appState.ethConnectOverlay}
+        setDialogOpen={setDialogOpen}
+        desiredChainId={appChainId}
+      />
+    </>
   );
 }
 
@@ -65,7 +61,7 @@ export const Web3Content = ({ children, appChainId }: Web3ContentProps) => {
     // wallet connect doesnt handle connectEagerly being called when connector is also in the
     // deps array.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [connector]);
+  }, []);
 
   if (error) {
     return (