sync chain from commonProvider to SDK

Author: tanguyenvn

packages/modal/src/modalManager.ts

@@ -1,7 +1,6 @@
 import {
   type BaseConnectorConfig,
   cloneDeep,
-  CommonJRPCProvider,
   CONNECTOR_CATEGORY,
   CONNECTOR_EVENTS,
   CONNECTOR_NAMES,
@@ -81,15 +80,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     await this.loginModal.initModal();
 
     // setup common JRPC provider
-    this.commonJRPCProvider = await CommonJRPCProvider.getProviderInstance({
-      chain: this.currentChain,
-      chains: this.coreOptions.chains,
-    });
-    const { key_export_enabled: keyExportEnabled } = projectConfig;
-    if (typeof keyExportEnabled === "boolean") {
-      // dont know if we need to do this.
-      this.commonJRPCProvider.setKeyExportFlag(keyExportEnabled);
-    }
+    await this.setupCommonJRPCProvider(projectConfig);
 
     // initialize connectors
     this.on(CONNECTOR_EVENTS.CONNECTORS_UPDATED, ({ connectors }) => this.initConnectors({ connectors, projectConfig, modalConfig: params }));

packages/no-modal/src/base/core/IWeb3Auth.ts

@@ -121,10 +121,10 @@ export interface IWeb3AuthCoreOptions {
 export interface IWeb3AuthCore extends SafeEventEmitter {
   readonly coreOptions: IWeb3AuthCoreOptions;
   connectedConnectorName: string | null;
+  currentChain: CustomChainConfig;
   status: CONNECTOR_STATUS_TYPE;
   provider: IProvider | null;
   init(): Promise<void>;
-  getCurrentChain(): CustomChainConfig;
   getConnector(connectorName: WALLET_CONNECTOR_TYPE): IConnector<unknown> | null;
   getPlugin(pluginName: string): IPlugin | null;
   logout(options?: { cleanup: boolean }): Promise<void>;
@@ -136,9 +136,6 @@ export interface IWeb3AuthCore extends SafeEventEmitter {
 export interface IWeb3Auth extends IWeb3AuthCore {
   connected: boolean;
   cachedConnector: string | null;
-  getCurrentChain(): CustomChainConfig;
-  getChain(chainId: string): CustomChainConfig | undefined;
-  getChains(): CustomChainConfig[];
   getConnector(connectorName: WALLET_CONNECTOR_TYPE): IConnector<unknown> | null;
   /**
    * Connect to a specific wallet connector

packages/no-modal/src/noModal.ts

@@ -45,9 +45,7 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
 
   public cachedConnector: string | null = null;
 
-  public cachedCurrentChainId: string | null = null;
-
-  public currentChain: CustomChainConfig;
+  protected currentChainId: string;
 
   protected connectors: IConnector<unknown>[] = [];
 
@@ -84,11 +82,14 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
       })),
     };
 
-    // handle cached current chain
-    this.cachedCurrentChainId = storageAvailable(this.storage) ? window[this.storage].getItem(CURRENT_CHAIN_CACHE_KEY) : null;
-    // use corrected chains from coreOptions
-    const cachedChain = this.cachedCurrentChainId ? this.coreOptions.chains.find((chain) => chain.chainId === this.cachedCurrentChainId) : null;
-    this.currentChain = cachedChain || this.coreOptions.chains[0]; // use first chain in list as default chain config
+    // init chainId using cached chainId if it exists and is valid, otherwise use the first chain
+    const cachedChainId = storageAvailable(this.storage) ? window[this.storage].getItem(CURRENT_CHAIN_CACHE_KEY) : null;
+    const isCachedChainIdValid = cachedChainId && this.coreOptions.chains.some((chain) => chain.chainId === cachedChainId);
+    this.currentChainId = isCachedChainIdValid ? cachedChainId : this.coreOptions.chains[0].chainId;
+  }
+
+  get currentChain(): CustomChainConfig {
+    return this.coreOptions.chains.find((chain) => chain.chainId === this.currentChainId);
   }
 
   get connected(): boolean {
@@ -111,12 +112,6 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
   }
 
   public async init(): Promise<void> {
-    // setup common JRPC provider
-    this.commonJRPCProvider = await CommonJRPCProvider.getProviderInstance({
-      chain: this.getCurrentChain(),
-      chains: this.getChains(),
-    });
-
     // get project config
     let projectConfig: PROJECT_CONFIG_RESPONSE;
     try {
@@ -130,6 +125,9 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
       throw WalletInitializationError.notReady("failed to fetch project configurations", e);
     }
 
+    // setup common JRPC provider
+    await this.setupCommonJRPCProvider(projectConfig);
+
     // initialize connectors
     this.on(CONNECTOR_EVENTS.CONNECTORS_UPDATED, async ({ connectors }) => {
       await Promise.all(connectors.map(this.setupConnector));
@@ -223,20 +221,24 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
     return this.connectedConnector.authenticateUser();
   }
 
-  public getCurrentChain(): CustomChainConfig {
-    return this.currentChain;
+  public getPlugin(name: string): IPlugin | null {
+    return this.plugins[name] || null;
   }
 
-  public getChain(chainId: string): CustomChainConfig | undefined {
-    return this.coreOptions.chains.find((chain) => chain.chainId === chainId);
-  }
+  protected async setupCommonJRPCProvider(projectConfig: PROJECT_CONFIG_RESPONSE) {
+    this.commonJRPCProvider = await CommonJRPCProvider.getProviderInstance({
+      chain: this.currentChain,
+      chains: this.coreOptions.chains,
+    });
 
-  public getChains(): CustomChainConfig[] {
-    return this.coreOptions.chains;
-  }
+    // sync chainId
+    this.commonJRPCProvider.on("chainChanged", (chainId) => this.setCurrentChain(chainId));
 
-  public getPlugin(name: string): IPlugin | null {
-    return this.plugins[name] || null;
+    const { key_export_enabled: keyExportEnabled } = projectConfig;
+    if (typeof keyExportEnabled === "boolean") {
+      // dont know if we need to do this.
+      this.commonJRPCProvider.setKeyExportFlag(keyExportEnabled);
+    }
   }
 
   protected async setupConnector(connector: IConnector<unknown>): Promise<void> {
@@ -351,8 +353,8 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
         const aaProvider = await accountAbstractionProvider({
           accountAbstractionConfig,
           provider,
-          chain: this.getCurrentChain(),
-          chains: this.getChains(),
+          chain: this.currentChain,
+          chains: this.coreOptions.chains,
         });
         finalProvider = aaProvider;
         // TODO: when switching chains to Solana or other chains, we need to switch to the non-AA provider
@@ -433,17 +435,16 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
   }
 
   private setCurrentChain(chainId: string) {
-    if (chainId === this.currentChain.chainId) return;
+    if (chainId === this.currentChainId) return;
     const newChain = this.coreOptions.chains.find((chain) => chain.chainId === chainId);
-    if (!newChain) throw WalletInitializationError.invalidParams("Invalid chainId");
-    this.currentChain = newChain;
+    if (!newChain) throw WalletInitializationError.invalidParams(`Invalid chainId: ${chainId}`);
+    this.currentChainId = chainId;
     this.cacheCurrentChain(chainId);
   }
 
   private cacheCurrentChain(chainId: string) {
     if (!storageAvailable(this.storage)) return;
     window[this.storage].setItem(CURRENT_CHAIN_CACHE_KEY, chainId);
-    this.cachedCurrentChainId = chainId;
   }
 
   private connectToPlugins(data: { connector: WALLET_CONNECTOR_TYPE }) {

packages/no-modal/src/plugins/wallet-services-plugin/plugin.ts

@@ -49,7 +49,7 @@ class WalletServicesPlugin extends SafeEventEmitter implements IPlugin {
     if (this.isInitialized) return;
     if (!web3auth) throw WalletServicesPluginError.web3authRequired();
     if (web3auth.provider && !this.SUPPORTED_CONNECTORS.includes(web3auth.connectedConnectorName)) throw WalletServicesPluginError.notInitialized();
-    const currentChainConfig = web3auth.getCurrentChain();
+    const currentChainConfig = web3auth.currentChain;
     if (!([CHAIN_NAMESPACES.EIP155, CHAIN_NAMESPACES.SOLANA] as ChainNamespaceType[]).includes(currentChainConfig.chainNamespace))
       throw WalletServicesPluginError.unsupportedChainNamespace();