Merge branch 'master' into fix/provider-re-emit

Author: tanguyenvn

demo/vue-app-new/package-lock.json

@@ -12,39 +12,39 @@
   "dependencies": {
     "@solana/web3.js": "^1.98.0",
     "@toruslabs/constants": "^14.2.0",
-    "@toruslabs/base-controllers": "^7.2.1",
-    "@toruslabs/ethereum-controllers": "^7.2.1",
-    "@toruslabs/solana-controllers": "^7.3.1",
+    "@toruslabs/base-controllers": "^7.4.0",
+    "@toruslabs/ethereum-controllers": "^7.4.0",
+    "@toruslabs/solana-controllers": "^7.4.0",
     "@toruslabs/vue-components": "^7.9.0",
     "@toruslabs/vue-icons": "^7.6.2",
     "@web3auth/auth": "^9.6.4",
     "@web3auth/modal": "file:../../packages/modal",
     "@web3auth/no-modal": "file:../../packages/no-modal",
     "@web3auth/sign-in-with-ethereum": "^4.2.2",
-    "@web3auth/ws-embed": "^4.0.4",
+    "@web3auth/ws-embed": "^4.0.14",
     "bs58": "^6.0.0",
     "ethers": "^6.13.5",
-    "petite-vue-i18n": "^11.0.1",
+    "petite-vue-i18n": "^11.1.2",
     "tweetnacl": "^1.0.3",
     "vue": "^3.5.13"
   },
   "devDependencies": {
     "@toruslabs/eslint-config-vue": "^3.3.4",
     "@types/bs58": "^4.0.4",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.20",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "autoprefixer": "^10.4.21",
     "eslint": "^8.54.0",
     "globals": "^15.14.0",
-    "postcss": "^8.5.1",
-    "prettier": "^3.4.2",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
     "stream-browserify": "^3.0.0",
     "tailwindcss": "^3.4.13",
-    "typescript": "^5.7.3",
-    "vite": "^6.0.11",
-    "vue-tsc": "^2.2.0"
+    "typescript": "^5.8.2",
+    "vite": "^6.2.2",
+    "vue-tsc": "^2.2.8"
   },
   "optionalDependencies": {
-    "@esbuild/linux-x64": "0.25.0"
+    "@esbuild/linux-x64": "0.25.1"
   },
   "lint-staged": {
     "!(*d).{js,ts}": [

demo/vue-app-new/package.json

@@ -70,8 +70,16 @@ const options = computed((): Web3AuthOptions => {
     for (const chainId of formData.chains) {
       const chain = getChainConfig(namespace, chainId, clientIds[formData.network]);
       if (!chain) continue;
-      if (namespace === CHAIN_NAMESPACES.SOLANA && chainId === "0x65") {
-        chain.rpcTarget = import.meta.env.VITE_APP_SOLANA_MAINNET_RPC || chain.rpcTarget;
+      // we need to validate chain id as legacy Solana chainIds 0x1, 0x2, 0x3 are not valid anymore
+      if (chain.chainId !== chainId) continue;
+      if (namespace === CHAIN_NAMESPACES.SOLANA) {
+        if (chainId === "0x65") {
+          chain.rpcTarget = import.meta.env.VITE_APP_SOLANA_MAINNET_RPC || chain.rpcTarget;
+        } else if (chainId === "0x66") {
+          chain.rpcTarget = import.meta.env.VITE_APP_SOLANA_TESTNET_RPC || chain.rpcTarget;
+        } else if (chainId === "0x67") {
+          chain.rpcTarget = import.meta.env.VITE_APP_SOLANA_DEVNET_RPC || chain.rpcTarget;
+        }
       }
       chains.push(chain);
     }

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

@@ -34,7 +34,7 @@ Promise.all(promises)
     });
 
     // Create json files
-    const folder = "./packages/ui/src/i18n/";
+    const folder = "./packages/modal/src/ui/i18n/";
     const folderPath = path.resolve(folder);
     if (!fs.existsSync(folderPath)) {
       fs.mkdirSync(folderPath);

locales/importLocales.mjs

@@ -73,7 +73,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     this.loginModal = new LoginModal({
       ...this.options.uiConfig,
       connectorListener: this,
-      chainNamespace: this.currentChain.chainNamespace,
+      chainNamespaces: [...new Set(this.coreOptions.chains?.map((x) => x.chainNamespace) || [])],
       walletRegistry,
     });
     this.subscribeToLoginModalEvents();

package-lock.json

@@ -0,0 +1,79 @@
+import { useTranslation } from "react-i18next";
+
+import { ExternalButton, ExternalWalletEventType } from "../../interfaces";
+import i18n from "../../localeImport";
+import Button from "../Button";
+import Image from "../Image";
+import ExternalWalletHeader from "./ExternalWalletHeader";
+
+interface ExternalWalletChainNamespaceProps {
+  button: ExternalButton;
+  handleExternalWalletClick: (params: ExternalWalletEventType) => void;
+  goBack: () => void;
+  closeModal: () => void;
+}
+
+export default function ExternalWalletChainNamespace(props: ExternalWalletChainNamespaceProps) {
+  const { button, goBack, closeModal, handleExternalWalletClick } = props;
+
+  const [t] = useTranslation(undefined, { i18n });
+
+  // chainNames should be available when selecting a chain namespace
+  const chainNamespaces = button.chainNamespaces!.map((chainNamespace) => {
+    const imageId = chainNamespace === "eip155" ? "evm" : chainNamespace;
+    const displayName = chainNamespace === "eip155" ? "EVM" : chainNamespace;
+    return {
+      chainNamespace,
+      displayName,
+      imageId: `chain-${imageId}`,
+    };
+  });
+
+  return (
+    <div>
+      {/* Header */}
+      <ExternalWalletHeader title={`${t("modal.external.select-chain")}`} goBack={goBack} closeModal={closeModal} />
+
+      {/* Wallet image */}
+      <div className="w3a--flex w3a--justify-center w3a--my-6">
+        <Image
+          imageId={`login-${button.name}`}
+          hoverImageId={`login-${button.name}`}
+          fallbackImageId="wallet"
+          height="100"
+          width="100"
+          isButton
+          extension={button.imgExtension}
+        />
+      </div>
+
+      {/* Description */}
+      <p className="w3a--text-center w3a--text-sm w3a--text-app-gray-500 w3a--my-6">
+        {t("modal.external.select-chain-description", { wallet: button.displayName })}
+      </p>
+
+      {/* Chain namespace buttons */}
+      <ul className="w3a--flex w3a--flex-col w3a--gap-3">
+        {chainNamespaces.map(({ chainNamespace, displayName, imageId }) => (
+          <li key={chainNamespace}>
+            <Button
+              variant="tertiary"
+              type="button"
+              onClick={() => handleExternalWalletClick({ connector: button.name, chainNamespace })}
+              className="w3a--w-full w3a--size-xl !w3a--justify-between w3a--items-center wallet-btn"
+              title={displayName}
+            >
+              <div className="w3a--flex w3a--items-center">
+                <Image imageId={imageId} hoverImageId={imageId} fallbackImageId="wallet" height="24" width="24" isButton extension="svg" />
+                <p className="w3a--ml-2 w3a--text-left w3a--text-sm first-letter:w3a--capitalize">{displayName}</p>
+              </div>
+              <span className="w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800">
+                {t("modal.external.installed")}
+              </span>
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

packages/modal/src/modalManager.ts

@@ -1,4 +1,5 @@
-import { ExternalButton } from "../../interfaces";
+import { ExternalButton, ExternalWalletEventType } from "../../interfaces";
+import ExternalWalletChainNamespace from "./ExternalWalletChainNamespace";
 import ExternalWalletConnect from "./ExternalWalletConnect";
 import ExternalWalletInstall from "./ExternalWalletInstall";
 
@@ -7,10 +8,23 @@ interface ExternalWalletDetailProps {
   walletConnectUri: string;
   goBack: () => void;
   closeModal: () => void;
+  handleExternalWalletClick: (params: ExternalWalletEventType) => void;
 }
 
 export default function ExternalWalletDetail(props: ExternalWalletDetailProps) {
-  const { connectButton, walletConnectUri, goBack, closeModal } = props;
+  const { connectButton, walletConnectUri, goBack, closeModal, handleExternalWalletClick } = props;
+
+  // Select chain namespace for injected wallets
+  if (connectButton.hasInjectedWallet) {
+    return (
+      <ExternalWalletChainNamespace
+        handleExternalWalletClick={handleExternalWalletClick}
+        button={connectButton}
+        goBack={goBack}
+        closeModal={closeModal}
+      />
+    );
+  }
 
   return (
     <div>