From 62155a84deda234fd9b03790be62cbc04528fbc7 Mon Sep 17 00:00:00 2001
From: Maharshi Mishra <maharshi@tor.us>
Date: Thu, 29 Feb 2024 07:40:49 +0530
Subject: [PATCH] Fixed vue-app to work with v8

---
 demo/vue-app/package-lock.json              | 151 ++++++++++----------
 demo/vue-app/package.json                   |   2 +-
 demo/vue-app/src/chains/binance.vue         |  70 +++++----
 demo/vue-app/src/chains/ethereum.vue        |  94 ++++--------
 demo/vue-app/src/chains/matic.vue           |  66 ++++++---
 demo/vue-app/src/chains/solana.vue          |  70 ++++-----
 demo/vue-app/src/customUi/openlogin.vue     |  50 +++++--
 demo/vue-app/src/customUi/walletConnect.vue |  48 ++++++-
 demo/vue-app/src/default/defaultModal.vue   |  49 +++++--
 demo/vue-app/src/whitelabel/whitelabel.vue  |  26 +++-
 10 files changed, 367 insertions(+), 259 deletions(-)

diff --git a/demo/vue-app/package-lock.json b/demo/vue-app/package-lock.json
index ab804680c..bb7b720be 100644
--- a/demo/vue-app/package-lock.json
+++ b/demo/vue-app/package-lock.json
@@ -62,11 +62,11 @@
     },
     "../../packages/adapters/base-evm-adapter": {
       "name": "@web3auth/base-evm-adapter",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^5.4.0",
-        "@web3auth/base": "^8.0.0-alpha.15"
+        "@toruslabs/base-controllers": "^5.5.0",
+        "@web3auth/base": "^8.0.0"
       },
       "engines": {
         "node": ">=18.x",
@@ -78,11 +78,11 @@
     },
     "../../packages/adapters/base-solana-adapter": {
       "name": "@web3auth/base-solana-adapter",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^5.4.0",
-        "@web3auth/base": "^8.0.0-alpha.15",
+        "@toruslabs/base-controllers": "^5.5.0",
+        "@web3auth/base": "^8.0.0",
         "bs58": "^5.0.0"
       },
       "devDependencies": {
@@ -98,12 +98,12 @@
     },
     "../../packages/adapters/metamask-adapter": {
       "name": "@web3auth/metamask-adapter",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
         "@metamask/detect-provider": "^2.0.0",
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-evm-adapter": "^8.0.0-alpha.15"
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-evm-adapter": "^8.0.0"
       },
       "engines": {
         "node": ">=18.x",
@@ -115,13 +115,13 @@
     },
     "../../packages/adapters/openlogin-adapter": {
       "name": "@web3auth/openlogin-adapter",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/openlogin": "^7.0.3",
-        "@toruslabs/openlogin-utils": "^7.0.3",
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-provider": "^8.0.0-alpha.15",
+        "@toruslabs/openlogin": "^7.0.4",
+        "@toruslabs/openlogin-utils": "^7.0.4",
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-provider": "^8.0.0",
         "lodash.merge": "^4.6.2"
       },
       "devDependencies": {
@@ -153,13 +153,13 @@
     },
     "../../packages/adapters/phantom-adapter": {
       "name": "@web3auth/phantom-adapter",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-provider": "^8.0.0-alpha.15",
-        "@web3auth/base-solana-adapter": "^8.0.0-alpha.15",
-        "@web3auth/solana-provider": "^8.0.0-alpha.15",
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-provider": "^8.0.0",
+        "@web3auth/base-solana-adapter": "^8.0.0",
+        "@web3auth/solana-provider": "^8.0.0",
         "bn.js": "^5.2.1"
       },
       "engines": {
@@ -173,13 +173,13 @@
     },
     "../../packages/adapters/slope-adapter": {
       "name": "@web3auth/slope-adapter",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-provider": "^8.0.0-alpha.15",
-        "@web3auth/base-solana-adapter": "^8.0.0-alpha.15",
-        "@web3auth/solana-provider": "^8.0.0-alpha.15",
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-provider": "^8.0.0",
+        "@web3auth/base-solana-adapter": "^8.0.0",
+        "@web3auth/solana-provider": "^8.0.0",
         "bn.js": "^5.2.1"
       },
       "engines": {
@@ -193,13 +193,13 @@
     },
     "../../packages/adapters/solflare-adapter": {
       "name": "@web3auth/solflare-adapter",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-provider": "^8.0.0-alpha.15",
-        "@web3auth/base-solana-adapter": "^8.0.0-alpha.15",
-        "@web3auth/solana-provider": "^8.0.0-alpha.15",
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-provider": "^8.0.0",
+        "@web3auth/base-solana-adapter": "^8.0.0",
+        "@web3auth/solana-provider": "^8.0.0",
         "bn.js": "^5.2.1"
       },
       "devDependencies": {
@@ -218,12 +218,12 @@
     },
     "../../packages/adapters/torus-evm-adapter": {
       "name": "@web3auth/torus-evm-adapter",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
         "@toruslabs/torus-embed": "^4.1.3",
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-evm-adapter": "^8.0.0-alpha.15"
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-evm-adapter": "^8.0.0"
       },
       "engines": {
         "node": ">=18.x",
@@ -235,14 +235,14 @@
     },
     "../../packages/adapters/torus-solana-adapter": {
       "name": "@web3auth/torus-solana-adapter",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
         "@toruslabs/solana-embed": "^2.0.0",
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-provider": "^8.0.0-alpha.15",
-        "@web3auth/base-solana-adapter": "^8.0.0-alpha.15",
-        "@web3auth/solana-provider": "^8.0.0-alpha.15"
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-provider": "^8.0.0",
+        "@web3auth/base-solana-adapter": "^8.0.0",
+        "@web3auth/solana-provider": "^8.0.0"
       },
       "engines": {
         "node": ">=18.x",
@@ -256,12 +256,12 @@
     "../../packages/adapters/wallet-connect-v1-adapter": {},
     "../../packages/adapters/wallet-connect-v2-adapter": {
       "name": "@web3auth/wallet-connect-v2-adapter",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-evm-adapter": "^8.0.0-alpha.15",
-        "@web3auth/ethereum-provider": "^8.0.0-alpha.15",
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-evm-adapter": "^8.0.0",
+        "@web3auth/ethereum-provider": "^8.0.0",
         "lodash.merge": "^4.6.2"
       },
       "devDependencies": {
@@ -283,13 +283,13 @@
     },
     "../../packages/base": {
       "name": "@web3auth/base",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
         "@toruslabs/http-helpers": "^6.0.0",
-        "@toruslabs/openlogin": "^7.0.3",
+        "@toruslabs/openlogin": "^7.0.4",
         "@toruslabs/openlogin-jrpc": "^7.0.0",
-        "@toruslabs/openlogin-utils": "^7.0.3",
+        "@toruslabs/openlogin-utils": "^7.0.4",
         "jwt-decode": "^4.0.0",
         "loglevel": "^1.9.1",
         "ts-custom-error": "^3.3.1"
@@ -354,24 +354,23 @@
     },
     "../../packages/modal": {
       "name": "@web3auth/modal",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-provider": "^8.0.0-alpha.15",
-        "@web3auth/no-modal": "^8.0.0-alpha.15",
-        "@web3auth/openlogin-adapter": "^8.0.0-alpha.15",
-        "@web3auth/ui": "^8.0.0-alpha.15"
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-provider": "^8.0.0",
+        "@web3auth/no-modal": "^8.0.0",
+        "@web3auth/openlogin-adapter": "^8.0.0",
+        "@web3auth/ui": "^8.0.0"
       },
       "devDependencies": {
         "@svgr/webpack": "^8.1.0",
         "@toruslabs/isomorphic-style-loader": "^5.3.3",
-        "@toruslabs/openlogin-utils": "^7.0.3",
-        "@web3auth/wallet-connect-v2-adapter": "^8.0.0-alpha.15",
+        "@toruslabs/openlogin-utils": "^7.0.4",
+        "@web3auth/wallet-connect-v2-adapter": "^8.0.0",
         "css-loader": "^6.10.0",
         "postcss-prefix-selector": "^1.16.0",
         "style-loader": "^3.3.4",
-        "tailwindcss": "^3.4.1",
         "url-loader": "^4.1.1"
       },
       "engines": {
@@ -407,19 +406,19 @@
     },
     "../../packages/no-modal": {
       "name": "@web3auth/no-modal",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/openlogin": "^7.0.3",
+        "@toruslabs/openlogin": "^7.0.4",
         "@toruslabs/openlogin-jrpc": "^7.0.0",
-        "@toruslabs/openlogin-utils": "^7.0.3",
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-plugin": "^8.0.0-alpha.15",
-        "@web3auth/base-provider": "^8.0.0-alpha.15"
+        "@toruslabs/openlogin-utils": "^7.0.4",
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-plugin": "^8.0.0",
+        "@web3auth/base-provider": "^8.0.0"
       },
       "devDependencies": {
-        "@web3auth/openlogin-adapter": "^8.0.0-alpha.15",
-        "@web3auth/wallet-connect-v2-adapter": "^8.0.0-alpha.15"
+        "@web3auth/openlogin-adapter": "^8.0.0",
+        "@web3auth/wallet-connect-v2-adapter": "^8.0.0"
       },
       "engines": {
         "node": ">=18.x",
@@ -491,13 +490,13 @@
     },
     "../../packages/plugins/solana-wallet-connector-plugin": {
       "name": "@web3auth/solana-wallet-connector-plugin",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
         "@toruslabs/solana-embed": "^2.0.0",
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-plugin": "^8.0.0-alpha.15",
-        "@web3auth/no-modal": "^8.0.0-alpha.15",
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-plugin": "^8.0.0",
+        "@web3auth/no-modal": "^8.0.0",
         "loglevel": "^1.9.1"
       },
       "devDependencies": {
@@ -515,20 +514,20 @@
     "../../packages/plugins/wallet-services-connector-plugin": {},
     "../../packages/providers/ethereum-provider": {
       "name": "@web3auth/ethereum-provider",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
-        "@ethereumjs/common": "^4.1.0",
-        "@ethereumjs/tx": "^5.1.0",
-        "@ethereumjs/util": "^9.0.1",
+        "@ethereumjs/common": "^4.2.0",
+        "@ethereumjs/tx": "^5.2.1",
+        "@ethereumjs/util": "^9.0.2",
         "@metamask/eth-sig-util": "^7.0.1",
         "@metamask/rpc-errors": "^6.1.0",
-        "@toruslabs/base-controllers": "^5.4.0",
+        "@toruslabs/base-controllers": "^5.5.0",
         "@toruslabs/http-helpers": "^6.0.0",
         "@toruslabs/openlogin-jrpc": "^7.0.0",
         "@walletconnect/utils": "^2.11.1",
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-provider": "^8.0.0-alpha.15",
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-provider": "^8.0.0",
         "assert": "^2.1.0",
         "bignumber.js": "^9.1.2",
         "bn.js": "^5.2.1",
@@ -583,16 +582,16 @@
     },
     "../../packages/providers/solana-provider": {
       "name": "@web3auth/solana-provider",
-      "version": "8.0.0-alpha.15",
+      "version": "8.0.0",
       "license": "ISC",
       "dependencies": {
         "@metamask/rpc-errors": "^6.1.0",
-        "@toruslabs/base-controllers": "^5.4.0",
+        "@toruslabs/base-controllers": "^5.5.0",
         "@toruslabs/openlogin-ed25519": "^7.0.0",
         "@toruslabs/openlogin-jrpc": "^7.0.0",
         "@toruslabs/tweetnacl-js": "^1.0.4",
-        "@web3auth/base": "^8.0.0-alpha.15",
-        "@web3auth/base-provider": "^8.0.0-alpha.15",
+        "@web3auth/base": "^8.0.0",
+        "@web3auth/base-provider": "^8.0.0",
         "bn.js": "^5.2.1",
         "bs58": "^5.0.0",
         "json-rpc-random-id": "^1.0.1"
diff --git a/demo/vue-app/package.json b/demo/vue-app/package.json
index 0b1da1632..da02573f0 100644
--- a/demo/vue-app/package.json
+++ b/demo/vue-app/package.json
@@ -16,6 +16,7 @@
     "@web3auth/base": "file:../../packages/base",
     "@web3auth/base-evm-adapter": "file:../../packages/adapters/base-evm-adapter",
     "@web3auth/base-solana-adapter": "file:../../packages/adapters/base-solana-adapter",
+    "@web3auth/ethereum-provider": "file:../../packages/providers/ethereum-provider",
     "@web3auth/metamask-adapter": "file:../../packages/adapters/metamask-adapter",
     "@web3auth/modal": "file:../../packages/modal",
     "@web3auth/no-modal": "file:../../packages/no-modal",
@@ -31,7 +32,6 @@
     "@web3auth/wallet-connect-v1-adapter": "file:../../packages/adapters/wallet-connect-v1-adapter",
     "@web3auth/wallet-connect-v2-adapter": "file:../../packages/adapters/wallet-connect-v2-adapter",
     "@web3auth/wallet-services-connector-plugin": "file:../../packages/plugins/wallet-services-connector-plugin",
-    "@web3auth/ethereum-provider": "file:../../packages/providers/ethereum-provider",
     "lodash.merge": "^4.6.2",
     "ts-custom-error": "^3.3.1",
     "vue": "^3.3.13",
diff --git a/demo/vue-app/src/chains/binance.vue b/demo/vue-app/src/chains/binance.vue
index 7fd61be04..17997f251 100644
--- a/demo/vue-app/src/chains/binance.vue
+++ b/demo/vue-app/src/chains/binance.vue
@@ -17,10 +17,12 @@
 
 <script lang="ts">
 import { OPENLOGIN_NETWORK_TYPE } from "@toruslabs/openlogin-utils";
-import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA, CustomChainConfig, LoginMethodConfig } from "@web3auth/base";
-import { Web3Auth } from "@web3auth/modal";
+import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA, LoginMethodConfig } from "@web3auth/base";
+import { getDefaultExternalAdapters } from "@web3auth/default-evm-adapter";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import { Web3Auth, Web3AuthOptions } from "@web3auth/modal";
 import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
-import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";
+import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
 import { defineComponent } from "vue";
 
 import Loader from "@/components/loader.vue";
@@ -28,16 +30,43 @@ import Loader from "@/components/loader.vue";
 import config from "../config";
 import EthRpc from "../rpc/ethRpc.vue";
 
-const binanceChainConfig: CustomChainConfig = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const binanceChainConfig: any = {
   chainNamespace: CHAIN_NAMESPACES.EIP155,
   rpcTarget: "https://data-seed-prebsc-2-s3.binance.org:8545",
-  blockExplorer: "https://testnet.bscscan.com",
+  blockExplorerUrl: "https://testnet.bscscan.com",
+  logo: "https://cryptologos.cc/logos/binance-coin-bnb-logo.png",
   chainId: "0x61",
   displayName: "Binance SmartChain Testnet",
   ticker: "BNB",
   tickerName: "BNB",
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ethereumChainConfig: any = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  rpcTarget: "https://rpc.ankr.com/eth",
+  blockExplorerUrl: "https://etherscan.io",
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+  chainId: "0x1",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};
+
+const binanceWeb3AuthOptions: Web3AuthOptions = {
+  chainConfig: binanceChainConfig,
+  clientId: config.clientId["testnet"],
+  privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: binanceChainConfig } }),
+  enableLogging: true,
+};
+
+const ethWeb3AuthOptions: Web3AuthOptions = {
+  chainConfig: ethereumChainConfig,
+  clientId: config.clientId["mainnet"],
+  privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: ethereumChainConfig } }),
+  enableLogging: true,
+};
+
 export default defineComponent({
   name: "BinanceChain",
   props: {
@@ -59,7 +88,7 @@ export default defineComponent({
       loading: false,
       loginButtonStatus: "",
       provider: undefined,
-      web3auth: new Web3Auth({ chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 }, clientId: config.clientId[this.openloginNetwork] }),
+      web3auth: new Web3Auth(ethWeb3AuthOptions),
     };
   },
   watch: {
@@ -100,12 +129,7 @@ export default defineComponent({
       try {
         this.parseConfig();
         this.loading = true;
-        this.web3auth = new Web3Auth({
-          chainConfig: binanceChainConfig,
-          clientId: config.clientId[this.openloginNetwork],
-          authMode: "DAPP",
-          enableLogging: true,
-        });
+        this.web3auth = new Web3Auth(binanceWeb3AuthOptions);
         const openloginAdapter = new OpenloginAdapter({
           adapterSettings: {
             network: this.openloginNetwork as OPENLOGIN_NETWORK_TYPE,
@@ -115,22 +139,18 @@ export default defineComponent({
 
         this.web3auth.configureAdapter(openloginAdapter);
 
-        if (this.plugins["torusWallet"]) {
-          const torusPlugin = new TorusWalletConnectorPlugin({
-            torusWalletOpts: {},
-            walletInitOptions: {
-              whiteLabel: {
-                theme: { isDark: true, colors: { primary: "#00a8ff" } },
-                logoDark: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-                logoLight: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-              },
-              useWalletConnect: true,
-              enableLogging: true,
-            },
+        if (this.plugins["walletServices"]) {
+          const walletServicesPlugin = new WalletServicesPlugin({
+            wsEmbedOpts: {},
+            walletInitOptions: { whiteLabel: { showWidgetButton: true } },
           });
-          await this.web3auth.addPlugin(torusPlugin);
+          await this.web3auth.addPlugin(walletServicesPlugin);
         }
         this.subscribeAuthEvents(this.web3auth);
+        const adapters = await getDefaultExternalAdapters({ options: this.web3auth.options });
+        adapters.forEach((adapter) => {
+          this.web3auth.configureAdapter(adapter);
+        });
         await this.web3auth.initModal({ modalConfig: this.modalConfig });
       } catch (error) {
         console.log("error", error);
diff --git a/demo/vue-app/src/chains/ethereum.vue b/demo/vue-app/src/chains/ethereum.vue
index 26ef86994..76f59a7b6 100644
--- a/demo/vue-app/src/chains/ethereum.vue
+++ b/demo/vue-app/src/chains/ethereum.vue
@@ -30,14 +30,13 @@
 
 <script lang="ts">
 import { OPENLOGIN_NETWORK_TYPE } from "@toruslabs/openlogin-utils";
-import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA, CustomChainConfig, LoginMethodConfig } from "@web3auth/base";
+import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA, LoginMethodConfig } from "@web3auth/base";
 import { WALLET_ADAPTERS } from "@web3auth/base";
-// import { LOGIN_MODAL_EVENTS } from "@web3auth/ui";
-import { Web3Auth } from "@web3auth/modal";
+import { getDefaultExternalAdapters } from "@web3auth/default-evm-adapter";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import { Web3Auth, Web3AuthOptions } from "@web3auth/modal";
 import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
-import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";
-import { getWalletConnectV2Settings, WalletConnectV2Adapter } from "@web3auth/wallet-connect-v2-adapter";
-import { WalletServicesConnectorPlugin } from "@web3auth/wallet-services-connector-plugin";
+import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
 import { defineComponent } from "vue";
 
 import Loader from "@/components/loader.vue";
@@ -45,13 +44,24 @@ import Loader from "@/components/loader.vue";
 import config from "../config";
 import EthRpc from "../rpc/ethRpc.vue";
 
-const ethChainConfig: Partial<CustomChainConfig> & Pick<CustomChainConfig, "chainNamespace"> = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ethereumChainConfig: any = {
   chainNamespace: CHAIN_NAMESPACES.EIP155,
+  rpcTarget: "https://rpc.ankr.com/eth",
+  blockExplorerUrl: "https://etherscan.io",
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
   chainId: "0x1",
   ticker: "ETH",
   tickerName: "Ethereum",
 };
 
+const ethWeb3AuthOptions: Web3AuthOptions = {
+  chainConfig: ethereumChainConfig,
+  enableLogging: true,
+  clientId: config.clientId["mainnet"],
+  privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: ethereumChainConfig } }),
+};
+
 export default defineComponent({
   name: "EthereumChain",
   props: {
@@ -86,12 +96,7 @@ export default defineComponent({
       loginButtonStatus: "",
       connecting: false,
       provider: undefined,
-      web3auth: new Web3Auth({
-        chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
-        clientId: config.clientId[this.openloginNetwork],
-        enableLogging: true,
-        web3AuthNetwork: this.openloginNetwork as OPENLOGIN_NETWORK_TYPE,
-      }),
+      web3auth: new Web3Auth(ethWeb3AuthOptions),
     };
   },
   components: {
@@ -128,13 +133,7 @@ export default defineComponent({
       try {
         this.parseConfig();
         this.loading = true;
-        this.web3auth = new Web3Auth({
-          chainConfig: ethChainConfig,
-          clientId: config.clientId[this.openloginNetwork],
-          authMode: "DAPP",
-          enableLogging: true,
-          web3AuthNetwork: this.openloginNetwork,
-        });
+        this.web3auth = new Web3Auth(ethWeb3AuthOptions);
         const openloginAdapter = new OpenloginAdapter({
           adapterSettings: {
             network: this.openloginNetwork as OPENLOGIN_NETWORK_TYPE,
@@ -142,59 +141,18 @@ export default defineComponent({
             buildEnv: "testing",
           },
         });
-        const defaultadapters = getDefaultAdapters("evm");
-        Web3Auth.configureAdapter(...defaultadapters);
-
-        // by default, web3auth modal uses wallet connect v1,
-        // if you want to use wallet connect v2, configure wallet-connect-v2-adapter
-        // as shown below.
-        // NOTE: if you will configure both wc1 and wc2, precedence will be given to wc2
-        const defaultWcSettings = await getWalletConnectV2Settings(
-          ethChainConfig.chainNamespace,
-          [ethChainConfig.chainId, "0x89", "0x5"],
-          "04309ed1007e77d1f119b85205bb779d",
-        );
-        console.log("defaultWcSettings", JSON.stringify(defaultWcSettings));
-        const wc2Adapter = new WalletConnectV2Adapter({
-          adapterSettings: { ...defaultWcSettings.adapterSettings },
-          chainConfig: ethChainConfig,
-          loginSettings: defaultWcSettings.loginSettings,
+        // Only when you want to add External default adapters, which includes WalletConnect, Metamask, Torus EVM Wallet
+        const adapters = await getDefaultExternalAdapters({ options: ethWeb3AuthOptions });
+        adapters.forEach((adapter) => {
+          this.web3auth.configureAdapter(adapter);
         });
 
-        this.web3auth.configureAdapter(wc2Adapter);
-
         this.web3auth.configureAdapter(openloginAdapter);
-        if (this.plugins["torusWallet"]) {
-          const torusPlugin = new TorusWalletConnectorPlugin({
-            torusWalletOpts: {},
-            walletInitOptions: {
-              whiteLabel: {
-                theme: { isDark: true, colors: { primary: "#00a8ff" } },
-                logoDark: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-                logoLight: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-              },
-              useWalletConnect: true,
-              enableLogging: true,
-            },
-          });
-          await this.web3auth.addPlugin(torusPlugin);
-        }
 
         if (this.plugins["walletServices"]) {
-          const walletServicesPlugin = new WalletServicesConnectorPlugin({
-            wsEmbedOpts: {
-              web3AuthClientId: config.clientId[this.openloginNetwork],
-              web3AuthNetwork: this.openloginNetwork as OPENLOGIN_NETWORK_TYPE,
-            },
-            walletInitOptions: {
-              whiteLabel: {
-                logoDark: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-                logoLight: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-                showWidgetButton: true,
-              },
-              enableLogging: true,
-              buildEnv: "development",
-            },
+          const walletServicesPlugin = new WalletServicesPlugin({
+            wsEmbedOpts: {},
+            walletInitOptions: { whiteLabel: { showWidgetButton: true } },
           });
 
           await this.web3auth.addPlugin(walletServicesPlugin);
diff --git a/demo/vue-app/src/chains/matic.vue b/demo/vue-app/src/chains/matic.vue
index 68de98f1c..39443fc05 100644
--- a/demo/vue-app/src/chains/matic.vue
+++ b/demo/vue-app/src/chains/matic.vue
@@ -23,26 +23,56 @@
 
 <script lang="ts">
 import { OPENLOGIN_NETWORK_TYPE } from "@toruslabs/openlogin-utils";
-import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA, CustomChainConfig, LoginMethodConfig } from "@web3auth/base";
-import { Web3Auth } from "@web3auth/modal";
+import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA, LoginMethodConfig } from "@web3auth/base";
+import { getDefaultExternalAdapters } from "@web3auth/default-evm-adapter";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import { Web3Auth, Web3AuthOptions } from "@web3auth/modal";
 import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
-import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";
+import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
 import { defineComponent } from "vue";
 
 import Loader from "@/components/loader.vue";
 import EthRpc from "@/rpc/ethRpc.vue";
 
 import config from "../config";
-const polygonMumbaiConfig: CustomChainConfig = {
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const polygonMumbaiConfig: any = {
   chainNamespace: CHAIN_NAMESPACES.EIP155,
   rpcTarget: "https://rpc-mumbai.maticvigil.com",
-  blockExplorer: "https://mumbai-explorer.matic.today",
+  blockExplorerUrl: "https://mumbai-explorer.matic.today",
+  logo: "https://cryptologos.cc/logos/polygon-matic-logo.png",
   chainId: "0x13881",
   displayName: "Polygon Mumbai Testnet",
   ticker: "matic",
   tickerName: "matic",
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ethereumChainConfig: any = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  rpcTarget: "https://rpc.ankr.com/eth",
+  blockExplorerUrl: "https://etherscan.io",
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+  chainId: "0x1",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};
+
+const polygonWeb3AuthOptions: Web3AuthOptions = {
+  chainConfig: polygonMumbaiConfig,
+  clientId: config.clientId["testnet"],
+  privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: polygonMumbaiConfig } }),
+  enableLogging: true,
+};
+
+const ethWeb3AuthOptions: Web3AuthOptions = {
+  chainConfig: ethereumChainConfig,
+  clientId: config.clientId["mainnet"],
+  privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: ethereumChainConfig } }),
+  enableLogging: true,
+};
+
 export default defineComponent({
   name: "PolygonChain",
   props: {
@@ -76,7 +106,7 @@ export default defineComponent({
       loading: false,
       loginButtonStatus: "",
       provider: undefined,
-      web3auth: new Web3Auth({ chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 }, clientId: config.clientId[this.openloginNetwork] }),
+      web3auth: new Web3Auth(ethWeb3AuthOptions),
     };
   },
   components: {
@@ -115,7 +145,7 @@ export default defineComponent({
       try {
         this.loading = true;
 
-        this.web3auth = new Web3Auth({ chainConfig: polygonMumbaiConfig, clientId: config.clientId[this.openloginNetwork], authMode: "DAPP" });
+        this.web3auth = new Web3Auth(polygonWeb3AuthOptions);
         const openloginAdapter = new OpenloginAdapter({
           adapterSettings: {
             network: this.openloginNetwork as OPENLOGIN_NETWORK_TYPE,
@@ -124,22 +154,18 @@ export default defineComponent({
         });
 
         this.web3auth.configureAdapter(openloginAdapter);
-        if (this.plugins["torusWallet"]) {
-          const torusPlugin = new TorusWalletConnectorPlugin({
-            torusWalletOpts: {},
-            walletInitOptions: {
-              whiteLabel: {
-                theme: { isDark: true, colors: { primary: "#00a8ff" } },
-                logoDark: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-                logoLight: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-              },
-              useWalletConnect: true,
-              enableLogging: true,
-            },
+        if (this.plugins["walletServices"]) {
+          const walletServicesPlugin = new WalletServicesPlugin({
+            wsEmbedOpts: {},
+            walletInitOptions: { whiteLabel: { showWidgetButton: true } },
           });
-          await this.web3auth.addPlugin(torusPlugin);
+          await this.web3auth.addPlugin(walletServicesPlugin);
         }
         this.subscribeAuthEvents(this.web3auth);
+        const adapters = await getDefaultExternalAdapters({ options: this.web3auth.options });
+        adapters.forEach((adapter) => {
+          this.web3auth.configureAdapter(adapter);
+        });
         await this.web3auth.initModal({ modalConfig: this.modalConfig });
       } catch (error) {
         console.log("error", error);
diff --git a/demo/vue-app/src/chains/solana.vue b/demo/vue-app/src/chains/solana.vue
index e63df62da..f87703223 100644
--- a/demo/vue-app/src/chains/solana.vue
+++ b/demo/vue-app/src/chains/solana.vue
@@ -22,35 +22,35 @@
 
 <script lang="ts">
 import { OPENLOGIN_NETWORK_TYPE } from "@toruslabs/openlogin-utils";
-import {
-  ADAPTER_STATUS,
-  CHAIN_NAMESPACES,
-  CONNECTED_EVENT_DATA,
-  CustomChainConfig,
-  LoginMethodConfig,
-  SafeEventEmitterProvider,
-  WALLET_ADAPTERS,
-} from "@web3auth/base";
-import { Web3Auth } from "@web3auth/modal";
+import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA, LoginMethodConfig, SafeEventEmitterProvider, WALLET_ADAPTERS } from "@web3auth/base";
+import { getDefaultExternalAdapters } from "@web3auth/default-solana-adapter";
+import { Web3Auth, Web3AuthOptions } from "@web3auth/modal";
 import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
 import { SlopeAdapter } from "@web3auth/slope-adapter";
-import { SolanaWalletConnectorPlugin } from "@web3auth/solana-wallet-connector-plugin";
-import { SolflareAdapter } from "@web3auth/solflare-adapter";
-import { SolanaWalletAdapter } from "@web3auth/torus-solana-adapter";
+import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
 import { defineComponent } from "vue";
 
 import Loader from "@/components/loader.vue";
 
 import config from "../config";
 import SolanaRpc from "../rpc/solanaRpc.vue";
-const solanaChainConfig: CustomChainConfig = {
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const solanaChainConfig: any = {
   chainNamespace: CHAIN_NAMESPACES.SOLANA,
-  rpcTarget: "https://api.devnet.solana.com",
-  blockExplorer: "https://explorer.solana.com?cluster=devnet",
+  rpcTarget: "https://rpc.ankr.com/solana_devnet",
+  blockExplorerUrl: "https://solscan.io",
+  logo: "https://cryptologos.cc/logos/solana-sol-logo.png",
   chainId: "0x3",
-  displayName: "devnet",
   ticker: "SOL",
-  tickerName: "solana",
+  tickerName: "Solana",
+};
+
+const solanaWeb3AuthOptions: Web3AuthOptions = {
+  chainConfig: solanaChainConfig,
+  enableLogging: true,
+  clientId: config.clientId["mainnet"],
+  privateKeyProvider: new SolanaPrivateKeyProvider({ config: { chainConfig: solanaChainConfig } }),
 };
 
 export default defineComponent({
@@ -81,11 +81,7 @@ export default defineComponent({
       loading: false,
       loginButtonStatus: "",
       provider: undefined,
-      web3auth: new Web3Auth({
-        chainConfig: { chainNamespace: CHAIN_NAMESPACES.SOLANA },
-        clientId: config.clientId[this.openloginNetwork],
-        enableLogging: true,
-      }),
+      web3auth: new Web3Auth(solanaWeb3AuthOptions),
     };
   },
   components: {
@@ -122,12 +118,7 @@ export default defineComponent({
         this.parseConfig();
 
         this.loading = true;
-        this.web3auth = new Web3Auth({
-          chainConfig: solanaChainConfig,
-          clientId: config.clientId[this.openloginNetwork],
-          authMode: "DAPP",
-          enableLogging: true,
-        });
+        this.web3auth = new Web3Auth(solanaWeb3AuthOptions);
         const openloginAdapter = new OpenloginAdapter({
           adapterSettings: {
             network: this.openloginNetwork as OPENLOGIN_NETWORK_TYPE,
@@ -135,21 +126,12 @@ export default defineComponent({
           },
         });
         const slopeAdapter = new SlopeAdapter();
-        const solflareAdapter = new SolflareAdapter();
-        const solAdapter = new SolanaWalletAdapter({ initParams: { buildEnv: "testing" } });
-        this.web3auth.configureAdapter(solAdapter);
-        this.web3auth.configureAdapter(solflareAdapter);
         this.web3auth.configureAdapter(slopeAdapter);
         this.web3auth.configureAdapter(openloginAdapter);
-        if (this.plugins["torusWallet"]) {
-          const torusPlugin = new SolanaWalletConnectorPlugin({
-            torusWalletOpts: {},
-            walletInitOptions: {
-              enableLogging: true,
-            },
-          });
-          await this.web3auth.addPlugin(torusPlugin);
-        }
+        const adapters = await getDefaultExternalAdapters({ options: this.web3auth.options });
+        adapters.forEach((adapter) => {
+          this.web3auth.configureAdapter(adapter);
+        });
         this.subscribeAuthEvents(this.web3auth);
         await this.web3auth.initModal({
           modalConfig: {
@@ -198,8 +180,8 @@ export default defineComponent({
     },
     async connect() {
       try {
-        const provider = await this.web3auth.connect();
-        await this.setupProvider(provider);
+        await this.web3auth.connect();
+        await this.setupProvider(this.web3auth.provider);
       } catch (error) {
         console.error(error);
         this.uiConsole("error", error);
diff --git a/demo/vue-app/src/customUi/openlogin.vue b/demo/vue-app/src/customUi/openlogin.vue
index b080a34b4..f06a58bcb 100644
--- a/demo/vue-app/src/customUi/openlogin.vue
+++ b/demo/vue-app/src/customUi/openlogin.vue
@@ -27,7 +27,8 @@
 </template>
 
 <script lang="ts">
-import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA, WALLET_ADAPTERS } from "@web3auth/base";
+import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA, WALLET_ADAPTERS, Web3AuthNoModalOptions } from "@web3auth/base";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 import { Web3AuthNoModal } from "@web3auth/no-modal";
 import { OpenloginAdapter, OpenloginLoginParams } from "@web3auth/openlogin-adapter";
 import { defineComponent } from "vue";
@@ -36,6 +37,44 @@ import Loader from "../components/loader.vue";
 import config from "../config";
 import EthRpc from "../rpc/ethRpc.vue";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ethereumChainConfig: any = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  rpcTarget: "https://rpc.ankr.com/eth",
+  blockExplorerUrl: "https://etherscan.io",
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+  chainId: "0x1",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const sepoliaChainConfig: any = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  chainId: "0xaa36a7", // hex for 11155111
+  displayName: "Ethereum Sepolia",
+  tickerName: "Ethereum",
+  ticker: "ETH",
+  decimals: 18,
+  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
+  blockExplorerUrl: "https://sepolia.etherscan.io",
+  logo: "https://images.toruswallet.io/eth.svg",
+};
+
+const ethWeb3AuthOptions: Web3AuthNoModalOptions = {
+  chainConfig: ethereumChainConfig,
+  enableLogging: true,
+  clientId: config.clientId["mainnet"],
+  privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: ethereumChainConfig } }),
+};
+
+const sepoliaWeb3AuthOptions: Web3AuthNoModalOptions = {
+  chainConfig: sepoliaChainConfig,
+  enableLogging: true,
+  clientId: config.clientId["mainnet"],
+  privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: sepoliaChainConfig } }),
+};
+
 export default defineComponent({
   name: "BeginnerExampleMode",
   data() {
@@ -45,7 +84,7 @@ export default defineComponent({
       connected: false,
       provider: undefined,
       namespace: undefined,
-      web3auth: new Web3AuthNoModal({ chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 }, clientId: config.clientId["testnet"] }),
+      web3auth: new Web3AuthNoModal(ethWeb3AuthOptions),
     };
   },
   components: {
@@ -58,15 +97,10 @@ export default defineComponent({
   methods: {
     async initWeb3Auth() {
       try {
-        this.web3auth = new Web3AuthNoModal({
-          chainConfig: { chainId: "0x3", chainNamespace: CHAIN_NAMESPACES.EIP155 },
-          clientId: config.clientId["testnet"],
-        });
+        this.web3auth = new Web3AuthNoModal(sepoliaWeb3AuthOptions);
         this.subscribeAuthEvents(this.web3auth);
         const openloginAdapter = new OpenloginAdapter({
           adapterSettings: {
-            network: "testnet",
-            clientId: config.clientId["testnet"],
             uxMode: "redirect",
           },
         });
diff --git a/demo/vue-app/src/customUi/walletConnect.vue b/demo/vue-app/src/customUi/walletConnect.vue
index f96d93148..71ce6ced3 100644
--- a/demo/vue-app/src/customUi/walletConnect.vue
+++ b/demo/vue-app/src/customUi/walletConnect.vue
@@ -27,7 +27,8 @@
 
 <script lang="ts">
 import { WalletConnectModal } from "@walletconnect/modal";
-import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA, WALLET_ADAPTERS } from "@web3auth/base";
+import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA, WALLET_ADAPTERS, Web3AuthNoModalOptions } from "@web3auth/base";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 import { Web3AuthNoModal } from "@web3auth/no-modal";
 import { WalletConnectV2Adapter } from "@web3auth/wallet-connect-v2-adapter";
 import { defineComponent } from "vue";
@@ -36,6 +37,44 @@ import Loader from "../components/loader.vue";
 import config from "../config";
 import EthRpc from "../rpc/ethRpc.vue";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ethereumChainConfig: any = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  rpcTarget: "https://rpc.ankr.com/eth",
+  blockExplorerUrl: "https://etherscan.io",
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+  chainId: "0x1",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const sepoliaChainConfig: any = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  chainId: "0xaa36a7", // hex for 11155111
+  displayName: "Ethereum Sepolia",
+  tickerName: "Ethereum",
+  ticker: "ETH",
+  decimals: 18,
+  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
+  blockExplorerUrl: "https://sepolia.etherscan.io",
+  logo: "https://images.toruswallet.io/eth.svg",
+};
+
+const ethWeb3AuthOptions: Web3AuthNoModalOptions = {
+  chainConfig: ethereumChainConfig,
+  enableLogging: true,
+  clientId: config.clientId["mainnet"],
+  privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: ethereumChainConfig } }),
+};
+
+const sepoliaWeb3AuthOptions: Web3AuthNoModalOptions = {
+  chainConfig: sepoliaChainConfig,
+  enableLogging: true,
+  clientId: config.clientId["mainnet"],
+  privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: sepoliaChainConfig } }),
+};
+
 export default defineComponent({
   name: "BeginnerExampleMode",
   data() {
@@ -45,7 +84,7 @@ export default defineComponent({
       connected: false,
       provider: undefined,
       namespace: undefined,
-      web3auth: new Web3AuthNoModal({ chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 }, clientId: config.clientId["mainnet"] }),
+      web3auth: new Web3AuthNoModal(ethWeb3AuthOptions),
     };
   },
   components: {
@@ -58,10 +97,7 @@ export default defineComponent({
   methods: {
     async initWeb3Auth() {
       try {
-        this.web3auth = new Web3AuthNoModal({
-          chainConfig: { chainId: "0x3", chainNamespace: CHAIN_NAMESPACES.EIP155 },
-          clientId: config.clientId["mainnet"],
-        });
+        this.web3auth = new Web3AuthNoModal(sepoliaWeb3AuthOptions);
         this.subscribeAuthEvents(this.web3auth);
         const adapter = new WalletConnectV2Adapter({
           adapterSettings: { qrcodeModal: new WalletConnectModal({ projectId: "d3c63f19f9582f8ba48e982057eb096b" }) },
diff --git a/demo/vue-app/src/default/defaultModal.vue b/demo/vue-app/src/default/defaultModal.vue
index 68c2359b2..767c28ccb 100644
--- a/demo/vue-app/src/default/defaultModal.vue
+++ b/demo/vue-app/src/default/defaultModal.vue
@@ -26,7 +26,9 @@
 
 <script lang="ts">
 import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA } from "@web3auth/base";
-import { Web3Auth } from "@web3auth/modal";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import { Web3Auth, Web3AuthOptions } from "@web3auth/modal";
+import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
 import { defineComponent } from "vue";
 
 import config from "@/config";
@@ -35,6 +37,41 @@ import Loader from "../components/loader.vue";
 import EthRpc from "../rpc/ethRpc.vue";
 import SolRpc from "../rpc/solanaRpc.vue";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ethereumChainConfig: any = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  rpcTarget: "https://rpc.ankr.com/eth",
+  blockExplorerUrl: "https://etherscan.io",
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+  chainId: "0x1",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const solanaChainConfig: any = {
+  chainNamespace: CHAIN_NAMESPACES.SOLANA,
+  rpcTarget: "https://rpc.ankr.com/solana_devnet",
+  blockExplorerUrl: "https://solscan.io",
+  logo: "https://cryptologos.cc/logos/solana-sol-logo.png",
+  chainId: "0x3",
+  ticker: "SOL",
+  tickerName: "Solana",
+};
+
+const ethWeb3AuthOptions: Web3AuthOptions = {
+  chainConfig: ethereumChainConfig,
+  enableLogging: true,
+  clientId: config.clientId["mainnet"],
+  privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: ethereumChainConfig } }),
+};
+
+const solanaWeb3AuthOptions: Web3AuthOptions = {
+  chainConfig: solanaChainConfig,
+  clientId: config.clientId["mainnet"],
+  privateKeyProvider: new SolanaPrivateKeyProvider({ config: { chainConfig: solanaChainConfig } }),
+};
+
 export default defineComponent({
   name: "BeginnerExampleMode",
   data() {
@@ -44,7 +81,7 @@ export default defineComponent({
       connected: false,
       provider: undefined,
       namespace: undefined,
-      web3auth: new Web3Auth({ chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 }, clientId: config.clientId["mainnet"] }),
+      web3auth: new Web3Auth(ethWeb3AuthOptions),
     };
   },
   components: {
@@ -68,11 +105,7 @@ export default defineComponent({
   methods: {
     async initSolanaAuth() {
       try {
-        this.web3auth = new Web3Auth({
-          chainConfig: { chainId: "0x3", chainNamespace: CHAIN_NAMESPACES.SOLANA },
-          clientId: config.clientId["mainnet"],
-          authMode: "DAPP",
-        });
+        this.web3auth = new Web3Auth(solanaWeb3AuthOptions);
         this.subscribeAuthEvents(this.web3auth);
         await this.web3auth.initModal();
         console.log("web3auth", this.web3auth);
@@ -83,7 +116,7 @@ export default defineComponent({
     },
     async initEthAuth() {
       try {
-        this.web3auth = new Web3Auth({ chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 }, clientId: config.clientId["mainnet"] });
+        this.web3auth = new Web3Auth(ethWeb3AuthOptions);
         this.subscribeAuthEvents(this.web3auth);
         await (this.web3auth as Web3Auth).initModal();
       } catch (error) {
diff --git a/demo/vue-app/src/whitelabel/whitelabel.vue b/demo/vue-app/src/whitelabel/whitelabel.vue
index 5b0e67637..b03f7f5bc 100644
--- a/demo/vue-app/src/whitelabel/whitelabel.vue
+++ b/demo/vue-app/src/whitelabel/whitelabel.vue
@@ -29,13 +29,32 @@
 
 <script lang="ts">
 import { ADAPTER_STATUS, CHAIN_NAMESPACES, CONNECTED_EVENT_DATA } from "@web3auth/base";
-import { Web3Auth } from "@web3auth/modal";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import { Web3Auth, Web3AuthOptions } from "@web3auth/modal";
 import { defineComponent } from "vue";
 
 import Loader from "../components/loader.vue";
 import config from "../config";
 import EthRpc from "../rpc/ethRpc.vue";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ethereumChainConfig: any = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  rpcTarget: "https://rpc.ankr.com/eth",
+  blockExplorerUrl: "https://etherscan.io",
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+  chainId: "0x1",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};
+
+const ethWeb3AuthOptions: Web3AuthOptions = {
+  chainConfig: ethereumChainConfig,
+  enableLogging: true,
+  clientId: config.clientId["mainnet"],
+  privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: ethereumChainConfig } }),
+};
+
 export default defineComponent({
   name: "WhitelabelExample",
   props: {
@@ -61,7 +80,7 @@ export default defineComponent({
       connected: false,
       provider: undefined,
       namespace: undefined,
-      web3auth: new Web3Auth({ chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 }, clientId: config.clientId["mainnet"] }),
+      web3auth: new Web3Auth(ethWeb3AuthOptions),
     };
   },
   components: {
@@ -76,6 +95,7 @@ export default defineComponent({
       try {
         this.loading = true;
         this.web3auth = new Web3Auth({
+          privateKeyProvider: new EthereumPrivateKeyProvider({ config: { chainConfig: ethereumChainConfig } }),
           uiConfig: {
             logoLight: this.uiConfig.logoUrl,
             logoDark: this.uiConfig.logoUrl,
@@ -84,7 +104,7 @@ export default defineComponent({
             defaultLanguage: this.uiConfig.defaultLanguage,
           },
           web3AuthNetwork: "testnet",
-          chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
+          chainConfig: ethereumChainConfig,
           clientId: config.clientId["mainnet"],
         });
         this.subscribeAuthEvents(this.web3auth);