use sdk chain state in provider and connector

Author: Nguyen Anh Tu

demo/vue-app-new/src/MainView.vue

@@ -59,7 +59,6 @@ const accountAbstractionProvider = computed((): IBaseProvider<IProvider> | undef
 
   return new AccountAbstractionProvider({
     config: {
-      chainConfig,
       bundlerConfig: { url: formData.bundlerUrl ?? getDefaultBundlerUrl(chainConfig.chainId) },
       paymasterConfig: formData.paymasterUrl
         ? {

packages/modal/src/modalManager.ts

@@ -73,7 +73,10 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     await this.loginModal.initModal();
 
     // setup common JRPC provider
-    this.commonJRPCProvider = await CommonJRPCProvider.getProviderInstance({ chainConfig: this.currentChain });
+    this.commonJRPCProvider = await CommonJRPCProvider.getProviderInstance({
+      getCurrentChain: this.getCurrentChain.bind(this),
+      getChain: this.getChain.bind(this),
+    });
     const { key_export_enabled: keyExportEnabled } = projectConfig;
     if (typeof keyExportEnabled === "boolean") {
       // dont know if we need to do this.

packages/no-modal/src/base/connector/interfaces.ts

@@ -13,7 +13,7 @@ import {
 } from "@web3auth/auth";
 
 import { ConnectorNamespaceType, CustomChainConfig } from "../chain/IChainInterface";
-import { IWeb3AuthCoreOptions } from "../core/IWeb3Auth";
+import { IWeb3Auth, IWeb3AuthCoreOptions } from "../core/IWeb3Auth";
 import { Web3AuthError } from "../errors";
 import { PROJECT_CONFIG_RESPONSE } from "../interfaces";
 import { ProviderEvents, SafeEventEmitterProvider } from "../provider/IProvider";
@@ -42,6 +42,8 @@ export type UserAuthInfo = { idToken: string };
 
 export interface BaseConnectorSettings {
   coreOptions: IWeb3AuthCoreOptions;
+  getCurrentChain: IWeb3Auth["getCurrentChain"];
+  getChain: IWeb3Auth["getChain"];
 }
 
 export interface IProvider extends SafeEventEmitter<ProviderEvents> {
@@ -54,8 +56,8 @@ export interface IProvider extends SafeEventEmitter<ProviderEvents> {
 
 export interface IBaseProvider<T> extends IProvider {
   provider: SafeEventEmitterProvider | null;
-  currentChainConfig: CustomChainConfig;
-  setupProvider(provider: T): Promise<void>;
+  currentChain: CustomChainConfig;
+  setupProvider(provider: T, chainId: string): Promise<void>;
   switchChain(params: { chainId: string }): Promise<void>;
   updateProviderEngineProxy(provider: SafeEventEmitterProvider): void;
   setKeyExportFlag(flag: boolean): void;
@@ -83,6 +85,8 @@ export interface IConnector<T> extends SafeEventEmitter {
 export type ConnectorParams = {
   projectConfig?: PROJECT_CONFIG_RESPONSE;
   coreOptions: IWeb3AuthCoreOptions;
+  getCurrentChain: IWeb3Auth["getCurrentChain"];
+  getChain: IWeb3Auth["getChain"];
 };
 
 export type ConnectorFn = (params: ConnectorParams) => IConnector<unknown>;

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

@@ -129,6 +129,8 @@ export interface IWeb3AuthCore extends SafeEventEmitter {
 export interface IWeb3Auth extends IWeb3AuthCore {
   connected: boolean;
   cachedConnector: string | null;
+  getCurrentChain(): CustomChainConfig;
+  getChain(chainId: string): CustomChainConfig | undefined;
   getConnector(connectorName: WALLET_CONNECTOR_TYPE): IConnector<unknown> | null;
   /**
    * Connect to a specific wallet connector

packages/no-modal/src/connectors/auth-connector/authConnector.ts

@@ -57,11 +57,18 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
 
   private wsEmbedInstance: WsEmbed | null = null;
 
+  private getCurrentChain: AuthConnectorOptions["getCurrentChain"];
+
+  private getChain: AuthConnectorOptions["getChain"];
+
   constructor(params: AuthConnectorOptions) {
     super(params);
 
     // set auth options
-    const defaultOptions = getAuthDefaultOptions();
+    const defaultOptions = getAuthDefaultOptions({
+      getCurrentChain: params.getCurrentChain,
+      getChain: params.getChain,
+    });
     log.info("setting connector settings", params.connectorSettings);
     this.authOptions = deepmerge.all([
       defaultOptions.connectorSettings,
@@ -71,6 +78,8 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
 
     this.loginSettings = params.loginSettings || { loginProvider: "" };
     this.wsSettings = params.walletServicesSettings || {};
+    this.getCurrentChain = params.getCurrentChain;
+    this.getChain = params.getChain;
   }
 
   get provider(): IProvider | null {
@@ -132,14 +141,14 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
       case CHAIN_NAMESPACES.XRPL: {
         const { XrplPrivateKeyProvider } = await import("@/core/xrpl-provider");
         this.privateKeyProvider = new XrplPrivateKeyProvider({
-          config: { chainConfig },
+          config: { getCurrentChain: this.getCurrentChain, getChain: this.getChain },
         });
         break;
       }
       default: {
         const { CommonPrivateKeyProvider } = await import("@/core/base-provider");
         this.privateKeyProvider = new CommonPrivateKeyProvider({
-          config: { chainConfig },
+          config: {},
         });
       }
     }
@@ -333,7 +342,7 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
       // setup private key provider if chainNamespace is other
       const finalPrivKey = this._getFinalPrivKey();
       if (finalPrivKey) {
-        await this.privateKeyProvider.setupProvider(finalPrivKey);
+        await this.privateKeyProvider.setupProvider(finalPrivKey, params.chainId);
         this.status = CONNECTOR_STATUS.CONNECTED;
         this.emit(CONNECTOR_EVENTS.CONNECTED, {
           connector: WALLET_CONNECTORS.AUTH,
@@ -346,7 +355,7 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
 }
 
 export const authConnector = (params?: { uxMode?: UX_MODE_TYPE }): ConnectorFn => {
-  return ({ projectConfig, coreOptions }: ConnectorParams) => {
+  return ({ projectConfig, coreOptions, getCurrentChain, getChain }: ConnectorParams) => {
     const connectorSettings: AuthConnectorOptions["connectorSettings"] = {
       network: coreOptions.web3AuthNetwork || WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
       clientId: coreOptions.clientId,
@@ -387,6 +396,8 @@ export const authConnector = (params?: { uxMode?: UX_MODE_TYPE }): ConnectorFn =
       connectorSettings,
       walletServicesSettings: finalWsSettings,
       coreOptions,
+      getCurrentChain,
+      getChain,
     };
     return new AuthConnector(connectorOptions);
   };

packages/no-modal/src/connectors/auth-connector/config.ts

@@ -1,8 +1,16 @@
 import { UX_MODE, WEB3AUTH_NETWORK } from "@web3auth/auth";
 
+import { IWeb3Auth } from "@/core/base";
+
 import { AuthConnectorOptions } from "./interface";
 
-export const getAuthDefaultOptions = (): AuthConnectorOptions => {
+export const getAuthDefaultOptions = ({
+  getCurrentChain,
+  getChain,
+}: {
+  getCurrentChain: IWeb3Auth["getCurrentChain"];
+  getChain: IWeb3Auth["getChain"];
+}): AuthConnectorOptions => {
   return {
     connectorSettings: {
       network: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
@@ -14,5 +22,7 @@ export const getAuthDefaultOptions = (): AuthConnectorOptions => {
       chains: [],
       clientId: "",
     },
+    getCurrentChain,
+    getChain,
   };
 };

packages/no-modal/src/connectors/coinbase-connector/coinbaseConnector.ts

@@ -167,10 +167,12 @@ class CoinbaseConnector extends BaseEvmConnector<void> {
 }
 
 export const coinbaseConnector = (params?: CoinbaseWalletSDKOptions): ConnectorFn => {
-  return ({ coreOptions }: ConnectorParams) => {
+  return ({ coreOptions, getCurrentChain, getChain }: ConnectorParams) => {
     return new CoinbaseConnector({
       connectorSettings: params,
       coreOptions,
+      getCurrentChain,
+      getChain,
     });
   };
 };

packages/no-modal/src/connectors/default-evm-connector/injectedEvmConnector.ts

@@ -173,11 +173,13 @@ class InjectedEvmConnector extends BaseEvmConnector<void> {
 }
 
 export const injectedEvmConnector = (providerDetail: EIP6963ProviderDetail): ConnectorFn => {
-  return ({ coreOptions }: ConnectorParams) => {
+  return ({ coreOptions, getCurrentChain, getChain }: ConnectorParams) => {
     return new InjectedEvmConnector({
       name: normalizeWalletName(providerDetail.info.name),
       provider: providerDetail.provider as IProvider,
       coreOptions,
+      getCurrentChain,
+      getChain,
     });
   };
 };

packages/no-modal/src/connectors/default-solana-connector/walletStandardConnector.ts

@@ -46,9 +46,15 @@ export class WalletStandardConnector extends BaseSolanaConnector<void> {
 
   private injectedProvider: WalletStandardProvider | null = null;
 
+  private getCurrentChain: BaseConnectorSettings["getCurrentChain"];
+
+  private getChain: BaseConnectorSettings["getChain"];
+
   constructor(options: BaseConnectorSettings & { name: string; wallet: Wallet }) {
     super(options);
     this.name = options.name;
+    this.getCurrentChain = options.getCurrentChain;
+    this.getChain = options.getChain;
     // in VueJS, for some wallets e.g. Gate, Solflare, when connecting it throws error "attempted to get private field on non-instance"
     // it seems that Vue create a Proxy object for the wallet object which causes the issue
     // ref: https://stackoverflow.com/questions/64917686/vue-array-converted-to-proxy-object
@@ -71,12 +77,12 @@ export class WalletStandardConnector extends BaseSolanaConnector<void> {
     const chainConfig = this.coreOptions.chains.find((x) => x.chainId === options.chainId);
     super.checkInitializationRequirements({ chainConfig });
 
-    this.injectedProvider = new WalletStandardProvider({ config: { chainConfig } });
+    this.injectedProvider = new WalletStandardProvider({ config: { getCurrentChain: this.getCurrentChain, getChain: this.getChain } });
     const providerHandler = new WalletStandardProviderHandler({
       wallet: this.wallet,
       getCurrentChain: () => getSolanaChainByChainConfig(chainConfig),
     });
-    this.injectedProvider.setupProvider(providerHandler);
+    this.injectedProvider.setupProvider(providerHandler, options.chainId);
 
     this.status = CONNECTOR_STATUS.READY;
     this.emit(CONNECTOR_EVENTS.READY, this.name);
@@ -159,11 +165,13 @@ export class WalletStandardConnector extends BaseSolanaConnector<void> {
 }
 
 export const walletStandardConnector = (wallet: Wallet): ConnectorFn => {
-  return ({ coreOptions }: ConnectorParams) => {
+  return ({ coreOptions, getCurrentChain, getChain }: ConnectorParams) => {
     return new WalletStandardConnector({
       name: normalizeWalletName(wallet.name),
       wallet,
       coreOptions,
+      getCurrentChain,
+      getChain,
     });
   };
 };