WIP switch chain

Author: Nguyen Anh Tu

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

@@ -140,7 +140,7 @@ const options = computed((): Web3AuthOptions => {
     // sessionTime?: number;
     // useCoreKitKey?: boolean;
     // chainConfig,
-    chains: [chainConfig],
+    chains: [chainConfig, chainConfigs.eip155.find((x) => x.chainId === "0xaa36a7")!],
     enableLogging: true,
     connectors: externalConnectors.value,
     multiInjectedProviderDiscovery: formData.multiInjectedProviderDiscovery,

demo/vue-app-new/src/components/AppDashboard.vue

@@ -188,7 +188,7 @@ const onGetBalance = async () => {
 const onSwitchChain = async () => {
   log.info("switching chain");
   try {
-    await switchChain({ chainId: "0x89" });
+    await switchChain({ chainId: "0xaa36a7" });
     printToConsole("switchedChain");
   } catch (error) {
     printToConsole("switchedChain error", error);
@@ -291,6 +291,7 @@ const onSignPersonalMsg = async () => {
           <Button block size="xs" pill class="mb-2" @click="onGetBalance">
             {{ t("app.buttons.btnGetBalance") }}
           </Button>
+          <Button block size="xs" pill class="mb-2" @click="onSwitchChain">{{ t("app.buttons.btnSwitchChain") }}</Button>
           <Button block size="xs" pill class="mb-2" @click="onSendEth">{{ t("app.buttons.btnSendEth") }}</Button>
           <Button block size="xs" pill class="mb-2" @click="onSignEthTransaction">
             {{ t("app.buttons.btnSignTransaction") }}

demo/vue-app-new2/.env.sample

@@ -1,2 +1,4 @@
 VITE_APP_PIMLICO_API_KEY=""
-VITE_SOLANA_MAINNET_RPC=""
+VITE_APP_SOLANA_MAINNET_RPC=""
+VITE_APP_SOLANA_TESTNET_RPC=""
+VITE_APP_SOLANA_DEVNET_RPC=""

demo/vue-app-new2/src/config.ts

@@ -1,5 +1,14 @@
 import { LANGUAGE_TYPE, LANGUAGES, LOGIN_PROVIDER, LOGIN_PROVIDER_TYPE, WhiteLabelData } from "@web3auth/auth";
-import { CHAIN_NAMESPACES, ChainNamespaceType, CustomChainConfig, WEB3AUTH_NETWORK, WEB3AUTH_NETWORK_TYPE, SignTypedDataMessageV4, CONFIRMATION_STRATEGY, type CONFIRMATION_STRATEGY_TYPE } from "@web3auth/modal";
+import {
+  CHAIN_NAMESPACES,
+  ChainNamespaceType,
+  CustomChainConfig,
+  WEB3AUTH_NETWORK,
+  WEB3AUTH_NETWORK_TYPE,
+  SignTypedDataMessageV4,
+  CONFIRMATION_STRATEGY,
+  type CONFIRMATION_STRATEGY_TYPE,
+} from "@web3auth/modal";
 
 import { FormConfigSettings } from "./interfaces";
 
@@ -80,7 +89,7 @@ export const chainConfigs: Record<ChainNamespaceType, CustomChainConfig[]> = {
     },
     {
       chainNamespace: CHAIN_NAMESPACES.SOLANA,
-      rpcTarget: import.meta.env.VITE_SOLANA_MAINNET_RPC,
+      rpcTarget: import.meta.env.VITE_APP_SOLANA_MAINNET_RPC,
       blockExplorerUrl: "https://explorer.solana.com",
       logo: "https://cryptologos.cc/logos/solana-sol-logo.png",
       chainId: "0x1",

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

@@ -42,8 +42,8 @@ export interface IWeb3AuthCoreOptions {
   clientId: string;
 
   /**
-   * multiple chain configurations
-   * only chains provided will be used
+   * multiple chain configurations,
+   * only provided chains will be used
    */
   chains?: CustomChainConfig[];
   /**

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

@@ -323,6 +323,7 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
             reconnected: this.rehydrated,
             provider: this.provider,
           } as CONNECTED_EVENT_DATA);
+          // handle disconnect from ws embed
           this.wsEmbedInstance?.provider.on("accountsChanged", (accounts: unknown[] = []) => {
             if ((accounts as string[]).length === 0 && this.status === CONNECTOR_STATUS.CONNECTED) this.disconnect({ cleanup: false });
           });

packages/no-modal/src/noModal.ts

@@ -162,11 +162,18 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
   }
 
   public async switchChain(params: { chainId: string }): Promise<void> {
+    if (params.chainId === this.currentChain.chainId) return;
+    const newChainConfig = this.coreOptions.chains.find((x) => x.chainId === params.chainId);
+    if (!newChainConfig) throw WalletInitializationError.invalidParams("Invalid chainId");
+
     if (this.status === CONNECTOR_STATUS.CONNECTED && this.connectedConnector) {
       await this.connectedConnector.switchChain(params);
+      // only update chain state in commonJRPCProvider instead of switchChain in provider inside commonJRPCProvider
+      this.commonJRPCProvider?.updateChain(newChainConfig);
       this.setCurrentChain(params.chainId);
       return;
     }
+
     if (this.commonJRPCProvider) {
       await this.commonJRPCProvider.switchChain(params);
       this.setCurrentChain(params.chainId);

packages/no-modal/src/providers/base-provider/CommonJRPCProvider.ts

@@ -45,6 +45,13 @@ export class CommonJRPCProvider extends BaseProvider<CommonJRPCProviderConfig, C
     await this.setupProvider();
   }
 
+  public updateChain(chainConfig: CustomChainConfig) {
+    this.update({
+      chainId: chainConfig.chainId,
+    });
+    this.configure({ chainConfig });
+  }
+
   public updateProviderEngineProxy(provider: SafeEventEmitterProvider) {
     if (this._providerEngineProxy) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any