fix: allow setting up Solana hooks and composables

Author: tanguyenvn

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

@@ -272,7 +272,7 @@ const configs = computed<Web3AuthContextConfig>(() => {
         <div class="flex flex-col items-center justify-center">
           <main class="relative flex flex-col lg:h-[calc(100dvh_-_110px)]">
             <AppSettings />
-            <AppDashboard :chains="options.chains || []" />
+            <AppDashboard />
           </main>
         </div>
       </SolanaProvider>

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

@@ -14,7 +14,7 @@ import {
   useWeb3AuthUser,
 
 } from "@web3auth/modal/vue";
-import { CONNECTOR_INITIAL_AUTHENTICATION_MODE, type CustomChainConfig } from "@web3auth/no-modal";
+import { CONNECTOR_INITIAL_AUTHENTICATION_MODE } from "@web3auth/no-modal";
 import { useI18n } from "petite-vue-i18n";
 
 import { useSignMessage as useSolanaSignMessage, useSolanaWallet, useSolanaClient } from "@web3auth/modal/vue/solana";
@@ -30,7 +30,7 @@ import {
 import { getCapabilities, getCallsStatus, sendCalls, showCallsStatus } from "@wagmi/core";
 import { parseEther } from "viem";
 import { createWalletTransactionSigner, toAddress } from "@solana/client";
-import { address as solanaAddress,  } from "@solana/kit";
+import { address as solanaAddress } from "@solana/kit";
 import { getTransferSolInstruction } from "@solana-program/system";
 import { computed, ref, watch } from "vue";
 import { getPrivateKey, sendEth, sendEthWithSmartAccount, signTransaction as signEthTransaction } from "../services/ethHandlers";
@@ -40,10 +40,6 @@ const { t } = useI18n({ useScope: "global" });
 
 const formData = formDataStore;
 
-const props = defineProps<{
-  chains: CustomChainConfig[];
-}>();
-
 const { isConnected, connection, web3Auth, isMFAEnabled, isAuthorized } = useWeb3Auth();
 const { userInfo, loading: userInfoLoading } = useWeb3AuthUser();
 const { enableMFA } = useEnableMFA();
@@ -68,7 +64,7 @@ const balance = useBalance({
 const config = useConfig();
 const trackedCallsId = ref<string | undefined>();
 
-const { accounts: solanaAccounts, getPrivateKey: getSolanaPrivateKey } = useSolanaWallet();
+const { accounts: solanaAccounts, getPrivateKey: getSolanaPrivateKey, solanaWallet } = useSolanaWallet();
 const solanaClient = useSolanaClient();
 const { signMessage: signSolanaMessage } = useSolanaSignMessage();
 
@@ -350,7 +346,7 @@ const onSignSolMessage = async () => {
 const onGetSolBalance = async () => {
   const client = solanaClient.value;
   if (!client) throw new Error("Solana client not available");
-  const account = solanaAccounts.value?.[0];
+  const account = solanaWallet.value?.accounts[0]?.address;
   if (!account) throw new Error("No account connected");
 
   try {
@@ -362,6 +358,20 @@ const onGetSolBalance = async () => {
   }
 };
 
+const onGetSolChain = async () => {
+  const w3a = web3Auth.value;
+  if (!w3a) {
+    printToConsole("Solana chain", "Web3Auth not initialized");
+    return;
+  }
+  const current = w3a.currentChain;
+  const chain =
+    current?.chainNamespace === CHAIN_NAMESPACES.SOLANA
+      ? current
+      : w3a.coreOptions.chains?.find((c) => c.chainNamespace === CHAIN_NAMESPACES.SOLANA);
+  printToConsole("Solana chain", chain ?? null);
+};
+
 const onGetSolPrivateKey = async () => {
   try {
     const privateKey = await getSolanaPrivateKey();
@@ -372,7 +382,7 @@ const onGetSolPrivateKey = async () => {
 };
 
 // EVM-only: wagmi switchChain does not change Solana cluster; only show when multiple EIP-155 chains are configured.
-const eip155Chains = computed(() => props.chains.filter((c) => c.chainNamespace === CHAIN_NAMESPACES.EIP155));
+const eip155Chains = computed(() => web3Auth.value?.coreOptions.chains?.filter((c) => c.chainNamespace === CHAIN_NAMESPACES.EIP155) || []);
 
 const canSwitchEvmChain = computed(() => {
   if (eip155Chains.value.length < 2) return false;
@@ -515,6 +525,7 @@ const onSwitchChain = async () => {
           <div class="mb-2 text-xl font-bold leading-tight text-left">Solana Transaction</div>
           <Button block size="xs" pill class="mb-2" @click="onGetSolPrivateKey">{{ t("app.buttons.btnGetPrivateKey") }}</Button>
           <Button block size="xs" pill class="mb-2" @click="onGetSolBalance">{{ t("app.buttons.btnGetBalance") }}</Button>
+          <Button block size="xs" pill class="mb-2" @click="onGetSolChain">{{ t("app.buttons.btnGetCurrentSolanaChain") }}</Button>
           <Button block size="xs" pill class="mb-2" @click="onSignSolMessage">{{ t("app.buttons.btnSignMessage") }}</Button>
           <Button block size="xs" pill class="mb-2" @click="onSignAndSendTransaction">
             {{ t("app.buttons.btnSignAndSendTransaction") }}

demo/vue-app-new/src/translations/en.json

@@ -66,8 +66,11 @@
       "btnSendAATx": "Send ETH with Smart Account",
       "btnSignEthMessage": "Sign ETH Message",
       "btnGetConnectedChainId": "Get Connected Chain ID",
+      "btnGetCurrentSolanaChain": "Get Current Chain",
       "btnAddChain": "Add Chain",
       "btnSwitchChain": "Switch Chain",
+      "btnSwitchToSolana": "Switch to Solana",
+      "btnSwitchToEvm": "Switch to EVM",
       "btnSwitchChainNamespace": "Switch Chain Namespace",
       "btnSignAndSendTransaction": "Sign and Send Transaction",
       "btnSignTransaction": "Sign Transaction",

packages/modal/src/vue/solana/composables/useSolanaWallet.ts

@@ -1,10 +1,10 @@
 import { createSolanaRpc, type Rpc, type SolanaRpcApi } from "@solana/kit";
 import type { Wallet } from "@wallet-standard/base";
-import { CHAIN_NAMESPACES, WALLET_CONNECTORS } from "@web3auth/no-modal";
+import { WALLET_CONNECTORS } from "@web3auth/no-modal";
 import { SOLANA_METHOD_TYPES } from "@web3auth/ws-embed";
-import { computed, Ref, ref, ShallowRef, shallowRef, watch } from "vue";
+import { Ref, ref, ShallowRef, shallowRef, watch } from "vue";
 
-import { useChain, useWeb3Auth } from "../../composables";
+import { useWeb3Auth } from "../../composables";
 
 export type IUseSolanaWallet = {
   accounts: Ref<string[] | null>;
@@ -27,15 +27,11 @@ export type IUseSolanaWallet = {
 
 export const useSolanaWallet = (): IUseSolanaWallet => {
   const { connection, web3Auth } = useWeb3Auth();
-  const { chainNamespace } = useChain();
   const accounts = ref<string[] | null>(null);
   const solanaWallet = shallowRef<Wallet | null>(null);
   const rpc = shallowRef<Rpc<SolanaRpcApi> | null>(null);
 
-  const isSolana = computed(() => chainNamespace.value === CHAIN_NAMESPACES.SOLANA);
-
   const setupWallet = () => {
-    if (!isSolana.value) return;
     const wallet = connection.value?.solanaWallet ?? null;
     if (!wallet) return;
     solanaWallet.value = wallet;
@@ -65,9 +61,9 @@ export const useSolanaWallet = (): IUseSolanaWallet => {
   };
 
   watch(
-    [connection, chainNamespace],
-    ([newConnection, newChainNamespace]) => {
-      if (!newConnection?.solanaWallet || newChainNamespace !== CHAIN_NAMESPACES.SOLANA) {
+    [connection],
+    ([newConnection]) => {
+      if (!newConnection?.solanaWallet) {
         if (solanaWallet.value) resetWallet();
         return;
       }

packages/modal/src/vue/solana/provider.ts

@@ -40,8 +40,8 @@ export const SolanaProvider = defineComponent({
           return;
         }
 
-        const chainConfig = web3Auth.value.currentChain;
-        if (chainConfig.chainNamespace !== CHAIN_NAMESPACES.SOLANA) return;
+        const chainConfig = web3Auth.value.coreOptions.chains.find((c) => c.chainNamespace === CHAIN_NAMESPACES.SOLANA);
+        if (!chainConfig) return;
 
         const prevClient = clientRef.value;
         try {

packages/no-modal/src/connectors/metamask-connector/metamaskConnector.ts

@@ -430,11 +430,10 @@ class MetaMaskConnector extends BaseConnector<void> {
   public async switchChain(params: { chainId: string }, init = false): Promise<void> {
     super.checkSwitchChainRequirements(params, init);
 
-    const namespaces = new Set(this.coreOptions.chains.map((c) => c.chainNamespace));
-    if (namespaces.size > 1) {
-      throw WalletLoginError.unsupportedOperation(
-        "switchChain is not supported when multiple chain namespaces are configured. Use connection.ethereumProvider and connection.solanaWallet directly."
-      );
+    const targetChainConfig = this.coreOptions.chains.find((c) => c.chainId === params.chainId);
+    if (targetChainConfig?.chainNamespace === CHAIN_NAMESPACES.SOLANA) {
+      // no need to switch chain for Solana
+      return;
     }
 
     await this.ensureInitialized();

packages/no-modal/src/vue/solana/provider.ts

@@ -41,8 +41,8 @@ export const SolanaProvider = defineComponent({
           return;
         }
 
-        const chainConfig = web3Auth.value.currentChain;
-        if (chainConfig.chainNamespace !== CHAIN_NAMESPACES.SOLANA) return;
+        const chainConfig = web3Auth.value.coreOptions.chains.find((c) => c.chainNamespace === CHAIN_NAMESPACES.SOLANA);
+        if (!chainConfig) return;
 
         const prevClient = clientRef.value;
         try {