Fix multiple wallet connect issues

Author: chaitanyapotti

examples/vue-app/vue.config.js

@@ -29,7 +29,13 @@ module.exports = {
   },
   chainWebpack: (config) => {
     if (process.env.NODE_ENV !== "production") {
-      config.module.rule("sourcemap").test(/\.js$/).enforce("pre").use("source-map-loader").loader("source-map-loader").end();
+      config.module
+        .rule("sourcemap")
+        .test(/\.${js,ts}$/)
+        .enforce("pre")
+        .use("source-map-loader")
+        .loader("source-map-loader")
+        .end();
     }
     const svgRule = config.module.rule("svg");
 

packages/adapters/wallet-connect-v1-adapter/src/walletConnectV1adapter.ts

@@ -13,7 +13,6 @@ import {
   CONNECTED_EVENT_DATA,
   CustomChainConfig,
   getChainConfig,
-  isHexStrict,
   log,
   SafeEventEmitterProvider,
   UserInfo,
@@ -77,13 +76,13 @@ class WalletConnectV1Adapter extends BaseAdapter<void> {
     }
     // Create a connector
     this.connector = this.getWalletConnectInstance();
-    this.wcProvider = new WalletConnectProvider({ config: { chainConfig: this.chainConfig as CustomChainConfig } });
+    this.wcProvider = new WalletConnectProvider({ config: { chainConfig: this.chainConfig as CustomChainConfig }, connector: this.connector });
 
     this.emit(ADAPTER_EVENTS.READY, WALLET_ADAPTERS.WALLET_CONNECT_V1);
     this.status = ADAPTER_STATUS.READY;
     if (this.connector.connected) {
       this.rehydrated = true;
-      await this.onConnectHandler({ accounts: this.connector.accounts, chainId: this.connector.chainId.toString() });
+      await this.onConnectHandler({ accounts: this.connector.accounts, chainId: this.connector.chainId });
     }
   }
 
@@ -92,7 +91,7 @@ class WalletConnectV1Adapter extends BaseAdapter<void> {
     if (!this.connector) throw WalletInitializationError.notReady("Wallet adapter is not ready yet");
 
     if (this.connected) {
-      await this.onConnectHandler({ accounts: this.connector.accounts, chainId: this.connector.chainId.toString() });
+      await this.onConnectHandler({ accounts: this.connector.accounts, chainId: this.connector.chainId });
       return this.provider;
     }
 
@@ -116,7 +115,7 @@ class WalletConnectV1Adapter extends BaseAdapter<void> {
       });
       try {
         // Subscribe to session connection
-        this.connector.on("connect", async (error: Error | null, payload: { params: { accounts: string[]; chainId: string }[] }) => {
+        this.connector.on("connect", async (error: Error | null, payload: { params: { accounts: string[]; chainId: number }[] }) => {
           if (error) {
             this.emit(ADAPTER_EVENTS.ERRORED, error);
           }
@@ -194,25 +193,32 @@ class WalletConnectV1Adapter extends BaseAdapter<void> {
     });
   }
 
-  private async onConnectHandler(params: { accounts: string[]; chainId: string }) {
+  private async onConnectHandler(params: { accounts: string[]; chainId: number }) {
     if (!this.connector || !this.wcProvider) throw WalletInitializationError.notReady("Wallet adapter is not ready yet");
     if (!this.chainConfig) throw WalletInitializationError.invalidParams("Chain config is not set");
 
     const { chainId } = params;
-    log.debug("connected chainId", chainId);
-    const connectedChainId = parseInt(chainId, isHexStrict(chainId) ? 16 : 10);
-    if (connectedChainId !== parseInt(this.chainConfig.chainId, 16)) {
-      // we need to create a new session since old session is already used and
-      // user needs to login again with correct chain with new qr code.
-      await this.createNewSession({ forceNewSession: true });
-      this.emit(
-        ADAPTER_EVENTS.ERRORED,
-        WalletInitializationError.fromCode(
-          5000,
-          `Not connected to correct chainId. Expected: ${this.chainConfig.chainId}, Current: ${connectedChainId}, Please switch to correct chain from wallet`
-        )
-      );
-      return;
+    log.debug("connected chainId in hex", chainId);
+    if (chainId !== parseInt(this.chainConfig.chainId, 16)) {
+      try {
+        await this.wcProvider.switchChain({ chainId: this.chainConfig.chainId, lookup: false });
+      } catch (error) {
+        log.error(error);
+        // we need to create a new session since old session is already used and
+        // user needs to login again with correct chain with new qr code.
+        await this.createNewSession({ forceNewSession: true });
+        const connectedChainConfig = getChainConfig(CHAIN_NAMESPACES.EIP155, chainId);
+        this.emit(
+          ADAPTER_EVENTS.ERRORED,
+          WalletInitializationError.fromCode(
+            5000,
+            `Not connected to correct network. Expected: ${this.chainConfig.displayName}, Current: ${
+              connectedChainConfig?.displayName || chainId
+            }, Please switch to correct network from wallet`
+          )
+        );
+        return;
+      }
     }
     await this.wcProvider.setupProvider(this.connector);
     this.subscribeEvents(this.connector);

packages/providers/ethereum-provider/src/providers/injectedProviders/WalletConnectProvider.ts

@@ -1,7 +1,7 @@
 import { providerFromEngine } from "@toruslabs/base-controllers";
 import { JRPCEngine } from "@toruslabs/openlogin-jrpc";
 import type { IConnector } from "@walletconnect/types";
-import { CHAIN_NAMESPACES, CustomChainConfig, isHexStrict, WalletInitializationError, WalletLoginError } from "@web3auth/base";
+import { CHAIN_NAMESPACES, CustomChainConfig, getChainConfig, isHexStrict, log, WalletInitializationError, WalletLoginError } from "@web3auth/base";
 import { BaseProvider, BaseProviderConfig, BaseProviderState } from "@web3auth/base-provider";
 import { ethErrors } from "eth-rpc-errors";
 
@@ -49,23 +49,39 @@ export class WalletConnectProvider extends BaseProvider<BaseProviderConfig, Wall
     await this.setupEngine(connector);
   }
 
-  public async switchChain({ chainId }: { chainId: string }): Promise<void> {
+  public async switchChain({ chainId, lookup = true }: { chainId: string; lookup?: boolean }): Promise<void> {
+    if (!this.connector)
+      throw ethErrors.provider.custom({ message: "Connector is not initialized, pass wallet connect connector in constructor", code: 4902 });
     const currentChainConfig = this.getChainConfig(chainId);
-    const { ticker, tickerName, rpcTarget } = currentChainConfig;
+    const { rpcTarget, displayName } = currentChainConfig;
     this.update({
       chainId: "loading",
     });
-    await this.connector.updateChain({
-      chainId: Number.parseInt(chainId, 16),
-      nativeCurrency: {
-        name: tickerName,
-        symbol: ticker,
-      },
-      networkId: Number.parseInt(chainId, 10),
-      rpcUrl: rpcTarget,
-    });
+    try {
+      await this.connector.sendCustomRequest({
+        method: "wallet_addEthereumChain",
+        params: [{ chainId, chainName: displayName, rpcUrls: [rpcTarget] }],
+      });
+    } catch (error) {
+      log.error(error);
+    }
+
+    try {
+      await this.connector.sendCustomRequest({
+        method: "wallet_switchEthereumChain",
+        params: [{ chainId }],
+      });
+    } catch (error) {
+      log.error(error);
+      // ignore this error because metamask & others return provider.result as null
+      // wallet connect thinks this is wrong
+      if (error.message !== "JSON RPC response format is invalid") {
+        throw error;
+      }
+    }
+
     this.configure({ chainConfig: currentChainConfig });
-    await this.lookupNetwork(this.connector);
+    if (lookup) await this.lookupNetwork(this.connector);
   }
 
   protected async lookupNetwork(connector: IConnector): Promise<string> {
@@ -104,7 +120,7 @@ export class WalletConnectProvider extends BaseProvider<BaseProviderConfig, Wall
         this.provider.emit("error", error);
         return;
       }
-      const { accounts, chainId: connectedChainId, rpcUrl } = payload;
+      const { accounts, chainId: connectedChainId, rpcUrl }: { accounts?: string[]; chainId?: number; rpcUrl?: string } = payload.params[0];
       // Check if accounts changed and trigger event
       if (accounts?.length && this.state.accounts[0] !== accounts[0]) {
         this.update({
@@ -113,12 +129,13 @@ export class WalletConnectProvider extends BaseProvider<BaseProviderConfig, Wall
         // await this.setupEngine(connector);
         this.provider.emit("accountsChanged", accounts);
       }
-      const connectedHexChainId = isHexStrict(connectedChainId) ? connectedChainId : `0x${connectedChainId.toString(16)}`;
+      const connectedHexChainId = `0x${connectedChainId.toString(16)}`;
       // Check if chainId changed and trigger event
       if (connectedChainId && this.state.chainId !== connectedHexChainId) {
+        const maybeConfig = getChainConfig(CHAIN_NAMESPACES.EIP155, connectedChainId) || {};
         // Handle rpcUrl update
         this.configure({
-          chainConfig: { ...this.config.chainConfig, chainId: connectedHexChainId, rpcTarget: rpcUrl },
+          chainConfig: { ...maybeConfig, chainId: connectedHexChainId, rpcTarget: rpcUrl, chainNamespace: CHAIN_NAMESPACES.EIP155 },
         });
         await this.setupEngine(connector);
       }

packages/ui/src/interfaces.ts

@@ -7,6 +7,7 @@ export interface UIConfig {
   adapterListener: SafeEventEmitter;
   theme?: "light" | "dark";
   loginMethodsOrder?: string[];
+  displayErrorsOnModal?: boolean;
 }
 
 export const LOGIN_MODAL_EVENTS = {

packages/ui/src/loginModal.tsx

@@ -39,13 +39,16 @@ export default class LoginModal extends SafeEventEmitter {
 
   private stateEmitter: SafeEventEmitter;
 
-  constructor({ appLogo, version, adapterListener, theme = "light" }: UIConfig) {
+  private displayErrorsOnModal = true;
+
+  constructor({ appLogo, version, adapterListener, theme = "light", displayErrorsOnModal = true }: UIConfig) {
     super();
     this.appLogo = appLogo || DEFAULT_LOGO_URL;
     this.version = version;
     this.isDark = theme === "dark";
     this.wrapper = createWrapper();
     this.stateEmitter = new SafeEventEmitter();
+    this.displayErrorsOnModal = displayErrorsOnModal;
     this.subscribeCoreEvents(adapterListener);
   }
 
@@ -188,11 +191,16 @@ export default class LoginModal extends SafeEventEmitter {
     listener.on(ADAPTER_EVENTS.ERRORED, (error: Web3AuthError) => {
       log.error("error", error, error.message);
       if (error.code === 5000) {
-        this.setState({
-          modalVisibility: true,
-          postLoadingMessage: error.message || "Something went wrong!",
-          status: MODAL_STATUS.ERRORED,
-        });
+        if (this.displayErrorsOnModal)
+          this.setState({
+            modalVisibility: true,
+            postLoadingMessage: error.message || "Something went wrong!",
+            status: MODAL_STATUS.ERRORED,
+          });
+        else
+          this.setState({
+            modalVisibility: false,
+          });
       } else {
         this.setState({
           modalVisibility: true,