diff --git a/demo/vue-app-new/package-lock.json b/demo/vue-app-new/package-lock.json
index 3d937b361..7a731b0f8 100644
--- a/demo/vue-app-new/package-lock.json
+++ b/demo/vue-app-new/package-lock.json
@@ -11,10 +11,16 @@
         "@toruslabs/vue-components": "^7.8.3",
         "@toruslabs/vue-icons": "^7.6.2",
         "@web3auth/base": "^8.8.0",
+        "@web3auth/coinbase-adapter": "file:../../packages/adapters/coinbase-adapter",
         "@web3auth/ethereum-provider": "file:../../packages/providers/ethereum-provider",
+        "@web3auth/metamask-adapter": "file:../../packages/adapters/metamask-adapter",
         "@web3auth/modal-vue-composables": "file:../../packages/composables/modal-vue-composables",
+        "@web3auth/openlogin-adapter": "file:../../packages/adapters/openlogin-adapter",
+        "@web3auth/phantom-adapter": "file:../../packages/adapters/phantom-adapter",
+        "@web3auth/solana-provider": "file:../../packages/providers/solana-provider",
         "vue": "^3.4.31",
-        "vue-i18n": "^9.13.1"
+        "vue-i18n": "^9.13.1",
+        "web3": "^4.11.1"
       },
       "devDependencies": {
         "@toruslabs/eslint-config-vue": "^3.3.1",
@@ -31,6 +37,85 @@
         "vue-tsc": "^2.0.24"
       }
     },
+    "../../packages/adapters/coinbase-adapter": {
+      "name": "@web3auth/coinbase-adapter",
+      "version": "8.12.0",
+      "license": "ISC",
+      "dependencies": {
+        "@web3auth/base": "^8.12.0",
+        "@web3auth/base-evm-adapter": "^8.12.0"
+      },
+      "devDependencies": {
+        "@coinbase/wallet-sdk": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=18.x",
+        "npm": ">=9.x"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "^7.x",
+        "@coinbase/wallet-sdk": "^4.x"
+      }
+    },
+    "../../packages/adapters/metamask-adapter": {
+      "name": "@web3auth/metamask-adapter",
+      "version": "8.12.0",
+      "license": "ISC",
+      "dependencies": {
+        "@metamask/detect-provider": "^2.0.0",
+        "@web3auth/base": "^8.12.0",
+        "@web3auth/base-evm-adapter": "^8.12.0"
+      },
+      "engines": {
+        "node": ">=18.x",
+        "npm": ">=9.x"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "^7.x"
+      }
+    },
+    "../../packages/adapters/openlogin-adapter": {
+      "name": "@web3auth/openlogin-adapter",
+      "version": "8.12.0",
+      "license": "ISC",
+      "dependencies": {
+        "@toruslabs/openlogin": "^8.2.1",
+        "@toruslabs/openlogin-utils": "^8.2.1",
+        "@web3auth/base": "^8.12.0",
+        "@web3auth/base-provider": "^8.12.0",
+        "lodash.merge": "^4.6.2"
+      },
+      "devDependencies": {
+        "@types/lodash.merge": "^4.6.9"
+      },
+      "engines": {
+        "node": ">=18.x",
+        "npm": ">=9.x"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "^7.x"
+      }
+    },
+    "../../packages/adapters/phantom-adapter": {
+      "name": "@web3auth/phantom-adapter",
+      "version": "8.12.0",
+      "license": "ISC",
+      "dependencies": {
+        "@web3auth/base": "^8.12.0",
+        "@web3auth/base-provider": "^8.12.0",
+        "@web3auth/base-solana-adapter": "^8.12.0",
+        "@web3auth/solana-provider": "^8.12.0",
+        "bn.js": "^5.2.1"
+      },
+      "engines": {
+        "node": ">=18.x",
+        "npm": ">=9.x"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "^7.x",
+        "@solana/web3.js": "^1.x"
+      }
+    },
     "../../packages/composables/modal-vue-composables": {
       "name": "@web3auth/modal-vue-composables",
       "version": "8.12.0",
@@ -88,6 +173,43 @@
         "@babel/runtime": "7.x"
       }
     },
+    "../../packages/providers/solana-provider": {
+      "name": "@web3auth/solana-provider",
+      "version": "8.12.0",
+      "license": "ISC",
+      "dependencies": {
+        "@metamask/rpc-errors": "6.2.1",
+        "@toruslabs/base-controllers": "^5.9.2",
+        "@toruslabs/openlogin-ed25519": "^8.1.0",
+        "@toruslabs/openlogin-jrpc": "^8.1.1",
+        "@toruslabs/tweetnacl-js": "^1.0.4",
+        "@web3auth/base": "^8.12.0",
+        "@web3auth/base-provider": "^8.12.0",
+        "bn.js": "^5.2.1",
+        "bs58": "^5.0.0",
+        "json-rpc-random-id": "^1.0.1"
+      },
+      "devDependencies": {
+        "@solana/web3.js": "^1.95.1",
+        "@solflare-wallet/sdk": "^1.4.2",
+        "@types/bn.js": "^5.1.5",
+        "@types/bs58": "^4.0.4",
+        "@types/json-rpc-random-id": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=18.x",
+        "npm": ">=9.x"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "^7.x",
+        "@solana/web3.js": "^1.x"
+      }
+    },
+    "node_modules/@adraffy/ens-normalize": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.10.1.tgz",
+      "integrity": "sha512-96Z2IP3mYmF1Xg2cDm8f1gWGf/HUVedQ3FMifV4kG/PQ4yEP51xDtRAEfhVNt5f/uzpNkZHwWQuUcu6D6K+Ekw=="
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -1501,12 +1623,28 @@
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
     },
+    "node_modules/@types/node": {
+      "version": "22.1.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.1.0.tgz",
+      "integrity": "sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==",
+      "dependencies": {
+        "undici-types": "~6.13.0"
+      }
+    },
     "node_modules/@types/semver": {
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
+    "node_modules/@types/ws": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
+      "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.18.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
@@ -2236,14 +2374,48 @@
         "@babel/runtime": "7.x"
       }
     },
+    "node_modules/@web3auth/coinbase-adapter": {
+      "resolved": "../../packages/adapters/coinbase-adapter",
+      "link": true
+    },
     "node_modules/@web3auth/ethereum-provider": {
       "resolved": "../../packages/providers/ethereum-provider",
       "link": true
     },
+    "node_modules/@web3auth/metamask-adapter": {
+      "resolved": "../../packages/adapters/metamask-adapter",
+      "link": true
+    },
     "node_modules/@web3auth/modal-vue-composables": {
       "resolved": "../../packages/composables/modal-vue-composables",
       "link": true
     },
+    "node_modules/@web3auth/openlogin-adapter": {
+      "resolved": "../../packages/adapters/openlogin-adapter",
+      "link": true
+    },
+    "node_modules/@web3auth/phantom-adapter": {
+      "resolved": "../../packages/adapters/phantom-adapter",
+      "link": true
+    },
+    "node_modules/@web3auth/solana-provider": {
+      "resolved": "../../packages/providers/solana-provider",
+      "link": true
+    },
+    "node_modules/abitype": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/abitype/-/abitype-0.7.1.tgz",
+      "integrity": "sha512-VBkRHTDZf9Myaek/dO3yMmOzB/y2s3Zo6nVU7yaw1G+TvCHAjwaJzNGN9yo4K5D8bU/VZXKP1EJpRhFr862PlQ==",
+      "peerDependencies": {
+        "typescript": ">=4.9.4",
+        "zod": "^3 >=3.19.1"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -2556,7 +2728,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
       "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
-      "dev": true,
       "dependencies": {
         "possible-typed-array-names": "^1.0.0"
       },
@@ -2915,6 +3086,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/cross-fetch": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+      "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -4345,6 +4524,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -4484,7 +4668,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
       "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.3"
       }
@@ -4773,7 +4956,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.3"
       },
@@ -4910,7 +5092,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
       "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -5001,7 +5182,6 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
       "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -5085,7 +5265,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
       "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
-      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -5240,7 +5419,6 @@
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
       "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
-      "dev": true,
       "dependencies": {
         "which-typed-array": "^1.1.14"
       },
@@ -5301,6 +5479,14 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "node_modules/isomorphic-ws": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
+      "integrity": "sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==",
+      "peerDependencies": {
+        "ws": "*"
+      }
+    },
     "node_modules/iterator.prototype": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
@@ -5663,6 +5849,25 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
@@ -6006,7 +6211,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
       "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -6605,6 +6809,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -7069,6 +7278,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -7213,7 +7427,6 @@
       "version": "5.5.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
       "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
-      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7263,6 +7476,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.13.0.tgz",
+      "integrity": "sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg=="
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
@@ -7301,6 +7519,18 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -7459,6 +7689,354 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/web3": {
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/web3/-/web3-4.11.1.tgz",
+      "integrity": "sha512-KUntBtnc+cj9ur/yNcdTok9MpCI9dHf8h1hRmLPVICF5wyKyHbR4t+51vqUnK5bI6UxVfRPT++qCcP7KhDACVA==",
+      "dependencies": {
+        "web3-core": "^4.5.0",
+        "web3-errors": "^1.2.1",
+        "web3-eth": "^4.8.2",
+        "web3-eth-abi": "^4.2.3",
+        "web3-eth-accounts": "^4.1.3",
+        "web3-eth-contract": "^4.6.0",
+        "web3-eth-ens": "^4.4.0",
+        "web3-eth-iban": "^4.0.7",
+        "web3-eth-personal": "^4.0.8",
+        "web3-net": "^4.1.0",
+        "web3-providers-http": "^4.1.0",
+        "web3-providers-ws": "^4.0.8",
+        "web3-rpc-methods": "^1.3.0",
+        "web3-rpc-providers": "^1.0.0-rc.1",
+        "web3-types": "^1.7.0",
+        "web3-utils": "^4.3.1",
+        "web3-validator": "^2.0.6"
+      },
+      "engines": {
+        "node": ">=14.0.0",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-core": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/web3-core/-/web3-core-4.5.0.tgz",
+      "integrity": "sha512-Q8LIAqmF7vkRydBPiU+OC7wI44nEU6JEExolFaOakqrjMtQ1CWFHRUQMNJRDsk5bRirjyShuAsuqLeYByvvXhg==",
+      "dependencies": {
+        "web3-errors": "^1.2.0",
+        "web3-eth-accounts": "^4.1.2",
+        "web3-eth-iban": "^4.0.7",
+        "web3-providers-http": "^4.1.0",
+        "web3-providers-ws": "^4.0.7",
+        "web3-types": "^1.7.0",
+        "web3-utils": "^4.3.0",
+        "web3-validator": "^2.0.6"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      },
+      "optionalDependencies": {
+        "web3-providers-ipc": "^4.0.7"
+      }
+    },
+    "node_modules/web3-errors": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/web3-errors/-/web3-errors-1.2.1.tgz",
+      "integrity": "sha512-dIsi8SFC9TCAWpPmacXeVMk/F8tDNa1Bvg8/Cc2cvJo8LRSWd099szEyb+/SiMYcLlEbwftiT9Rpukz7ql4hBg==",
+      "dependencies": {
+        "web3-types": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-eth": {
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/web3-eth/-/web3-eth-4.8.2.tgz",
+      "integrity": "sha512-DLV/fIMG6gBp/B0gv0+G4FzxZ4YCDQsY3lzqqv7avwh3uU7/O27aifCUcFd7Ye+3ixTqCjAvLEl9wYSeyG3zQw==",
+      "dependencies": {
+        "setimmediate": "^1.0.5",
+        "web3-core": "^4.5.0",
+        "web3-errors": "^1.2.1",
+        "web3-eth-abi": "^4.2.3",
+        "web3-eth-accounts": "^4.1.3",
+        "web3-net": "^4.1.0",
+        "web3-providers-ws": "^4.0.8",
+        "web3-rpc-methods": "^1.3.0",
+        "web3-types": "^1.7.0",
+        "web3-utils": "^4.3.1",
+        "web3-validator": "^2.0.6"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-eth-abi": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/web3-eth-abi/-/web3-eth-abi-4.2.3.tgz",
+      "integrity": "sha512-rPVwTn0O1CzbtfXwEfIjUP0W5Y7u1OFjugwKpSqJzPQE6+REBg6OELjomTGZBu+GThxHnv0rp15SOxvqp+tyXA==",
+      "dependencies": {
+        "abitype": "0.7.1",
+        "web3-errors": "^1.2.0",
+        "web3-types": "^1.7.0",
+        "web3-utils": "^4.3.1",
+        "web3-validator": "^2.0.6"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-eth-accounts": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/web3-eth-accounts/-/web3-eth-accounts-4.1.3.tgz",
+      "integrity": "sha512-61Nb7xCXy6Vw/6xUZMM5ITtXetXmaP0F8oKRxika4GO4fRfKZLAwBZtshMyrdAORPZYq77ENiqXJVU+hTmtUaQ==",
+      "dependencies": {
+        "@ethereumjs/rlp": "^4.0.1",
+        "crc-32": "^1.2.2",
+        "ethereum-cryptography": "^2.0.0",
+        "web3-errors": "^1.2.0",
+        "web3-types": "^1.7.0",
+        "web3-utils": "^4.3.1",
+        "web3-validator": "^2.0.6"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-eth-contract": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/web3-eth-contract/-/web3-eth-contract-4.6.0.tgz",
+      "integrity": "sha512-mgQ/WUUlgW9BVKKVGU/Q7KrQEbEGI98h8ppox7fT964wY9ITFMDuRCvYk50WTWnFMdjFtOBqt1xRJ0+B1ekCHg==",
+      "dependencies": {
+        "@ethereumjs/rlp": "^5.0.2",
+        "web3-core": "^4.5.0",
+        "web3-errors": "^1.2.0",
+        "web3-eth": "^4.8.1",
+        "web3-eth-abi": "^4.2.3",
+        "web3-types": "^1.7.0",
+        "web3-utils": "^4.3.1",
+        "web3-validator": "^2.0.6"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-eth-contract/node_modules/@ethereumjs/rlp": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@ethereumjs/rlp/-/rlp-5.0.2.tgz",
+      "integrity": "sha512-DziebCdg4JpGlEqEdGgXmjqcFoJi+JGulUXwEjsZGAscAQ7MyD/7LE/GVCP29vEQxKc7AAwjT3A2ywHp2xfoCA==",
+      "bin": {
+        "rlp": "bin/rlp.cjs"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/web3-eth-ens": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/web3-eth-ens/-/web3-eth-ens-4.4.0.tgz",
+      "integrity": "sha512-DeyVIS060hNV9g8dnTx92syqvgbvPricE3MerCxe/DquNZT3tD8aVgFfq65GATtpCgDDJffO2bVeHp3XBemnSQ==",
+      "dependencies": {
+        "@adraffy/ens-normalize": "^1.8.8",
+        "web3-core": "^4.5.0",
+        "web3-errors": "^1.2.0",
+        "web3-eth": "^4.8.0",
+        "web3-eth-contract": "^4.5.0",
+        "web3-net": "^4.1.0",
+        "web3-types": "^1.7.0",
+        "web3-utils": "^4.3.0",
+        "web3-validator": "^2.0.6"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-eth-iban": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/web3-eth-iban/-/web3-eth-iban-4.0.7.tgz",
+      "integrity": "sha512-8weKLa9KuKRzibC87vNLdkinpUE30gn0IGY027F8doeJdcPUfsa4IlBgNC4k4HLBembBB2CTU0Kr/HAOqMeYVQ==",
+      "dependencies": {
+        "web3-errors": "^1.1.3",
+        "web3-types": "^1.3.0",
+        "web3-utils": "^4.0.7",
+        "web3-validator": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-eth-personal": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/web3-eth-personal/-/web3-eth-personal-4.0.8.tgz",
+      "integrity": "sha512-sXeyLKJ7ddQdMxz1BZkAwImjqh7OmKxhXoBNF3isDmD4QDpMIwv/t237S3q4Z0sZQamPa/pHebJRWVuvP8jZdw==",
+      "dependencies": {
+        "web3-core": "^4.3.0",
+        "web3-eth": "^4.3.1",
+        "web3-rpc-methods": "^1.1.3",
+        "web3-types": "^1.3.0",
+        "web3-utils": "^4.0.7",
+        "web3-validator": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-net": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/web3-net/-/web3-net-4.1.0.tgz",
+      "integrity": "sha512-WWmfvHVIXWEoBDWdgKNYKN8rAy6SgluZ0abyRyXOL3ESr7ym7pKWbfP4fjApIHlYTh8tNqkrdPfM4Dyi6CA0SA==",
+      "dependencies": {
+        "web3-core": "^4.4.0",
+        "web3-rpc-methods": "^1.3.0",
+        "web3-types": "^1.6.0",
+        "web3-utils": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-providers-http": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/web3-providers-http/-/web3-providers-http-4.1.0.tgz",
+      "integrity": "sha512-6qRUGAhJfVQM41E5t+re5IHYmb5hSaLc02BE2MaRQsz2xKA6RjmHpOA5h/+ojJxEpI9NI2CrfDKOAgtJfoUJQg==",
+      "dependencies": {
+        "cross-fetch": "^4.0.0",
+        "web3-errors": "^1.1.3",
+        "web3-types": "^1.3.0",
+        "web3-utils": "^4.0.7"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-providers-ipc": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/web3-providers-ipc/-/web3-providers-ipc-4.0.7.tgz",
+      "integrity": "sha512-YbNqY4zUvIaK2MHr1lQFE53/8t/ejHtJchrWn9zVbFMGXlTsOAbNoIoZWROrg1v+hCBvT2c9z8xt7e/+uz5p1g==",
+      "optional": true,
+      "dependencies": {
+        "web3-errors": "^1.1.3",
+        "web3-types": "^1.3.0",
+        "web3-utils": "^4.0.7"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-providers-ws": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/web3-providers-ws/-/web3-providers-ws-4.0.8.tgz",
+      "integrity": "sha512-goJdgata7v4pyzHRsg9fSegUG4gVnHZSHODhNnn6J93ykHkBI1nz4fjlGpcQLUMi4jAMz6SHl9Ibzs2jj9xqPw==",
+      "dependencies": {
+        "@types/ws": "8.5.3",
+        "isomorphic-ws": "^5.0.0",
+        "web3-errors": "^1.2.0",
+        "web3-types": "^1.7.0",
+        "web3-utils": "^4.3.1",
+        "ws": "^8.17.1"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-rpc-methods": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/web3-rpc-methods/-/web3-rpc-methods-1.3.0.tgz",
+      "integrity": "sha512-/CHmzGN+IYgdBOme7PdqzF+FNeMleefzqs0LVOduncSaqsppeOEoskLXb2anSpzmQAP3xZJPaTrkQPWSJMORig==",
+      "dependencies": {
+        "web3-core": "^4.4.0",
+        "web3-types": "^1.6.0",
+        "web3-validator": "^2.0.6"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-rpc-providers": {
+      "version": "1.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/web3-rpc-providers/-/web3-rpc-providers-1.0.0-rc.1.tgz",
+      "integrity": "sha512-N7AgGB+ilKPFQohnlI1vNHWmQ5Wh5vlGdYKWCWJc9kisKxxGtOsqN3W8tOj6/898sHZIXU9i/IAOyreGDIybmw==",
+      "dependencies": {
+        "web3-errors": "^1.2.0",
+        "web3-providers-http": "^4.1.0",
+        "web3-providers-ws": "^4.0.8",
+        "web3-types": "^1.7.0",
+        "web3-utils": "^4.3.1",
+        "web3-validator": "^2.0.6"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-types": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/web3-types/-/web3-types-1.7.0.tgz",
+      "integrity": "sha512-nhXxDJ7a5FesRw9UG5SZdP/C/3Q2EzHGnB39hkAV+YGXDMgwxBXFWebQLfEzZzuArfHnvC0sQqkIHNwSKcVjdA==",
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-utils": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/web3-utils/-/web3-utils-4.3.1.tgz",
+      "integrity": "sha512-kGwOk8FxOLJ9DQC68yqNQc7AzN+k9YDLaW+ZjlAXs3qORhf8zXk5SxWAAGLbLykMs3vTeB0FTb1Exut4JEYfFA==",
+      "dependencies": {
+        "ethereum-cryptography": "^2.0.0",
+        "eventemitter3": "^5.0.1",
+        "web3-errors": "^1.2.0",
+        "web3-types": "^1.7.0",
+        "web3-validator": "^2.0.6"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/web3-validator": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/web3-validator/-/web3-validator-2.0.6.tgz",
+      "integrity": "sha512-qn9id0/l1bWmvH4XfnG/JtGKKwut2Vokl6YXP5Kfg424npysmtRLe9DgiNBM9Op7QL/aSiaA0TVXibuIuWcizg==",
+      "dependencies": {
+        "ethereum-cryptography": "^2.0.0",
+        "util": "^0.12.5",
+        "web3-errors": "^1.2.0",
+        "web3-types": "^1.6.0",
+        "zod": "^3.21.4"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6.12.0"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -7537,7 +8115,6 @@
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
       "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
-      "dev": true,
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
         "call-bind": "^1.0.7",
@@ -7709,6 +8286,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/demo/vue-app-new/package.json b/demo/vue-app-new/package.json
index 3b2832e60..0552bfd5d 100644
--- a/demo/vue-app-new/package.json
+++ b/demo/vue-app-new/package.json
@@ -10,20 +10,23 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@web3auth/modal-vue-composables": "file:../../packages/composables/modal-vue-composables",
     "@toruslabs/vue-components": "^7.8.3",
     "@toruslabs/vue-icons": "^7.6.2",
     "@web3auth/base": "^8.8.0",
+    "@web3auth/coinbase-adapter": "file:../../packages/adapters/coinbase-adapter",
     "@web3auth/ethereum-provider": "file:../../packages/providers/ethereum-provider",
-    "@web3auth/solana-provider": "file:../../packages/providers/solana-provider",
+    "@web3auth/metamask-adapter": "file:../../packages/adapters/metamask-adapter",
+    "@web3auth/modal-vue-composables": "file:../../packages/composables/modal-vue-composables",
     "@web3auth/openlogin-adapter": "file:../../packages/adapters/openlogin-adapter",
+    "@web3auth/phantom-adapter": "file:../../packages/adapters/phantom-adapter",
+    "@web3auth/solana-provider": "file:../../packages/providers/solana-provider",
     "vue": "^3.4.31",
-    "vue-i18n": "^9.13.1"
+    "vue-i18n": "^9.13.1",
+    "web3": "^4.11.1"
   },
   "devDependencies": {
     "@toruslabs/eslint-config-vue": "^3.3.1",
     "@vitejs/plugin-vue": "^5.0.5",
-    "typescript-eslint": "^7.18.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.54.0",
     "globals": "^15.8.0",
@@ -31,6 +34,7 @@
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.7",
     "typescript": "^5.2.2",
+    "typescript-eslint": "^7.18.0",
     "vite": "^5.3.4",
     "vue-tsc": "^2.0.24"
   }
diff --git a/demo/vue-app-new/src/App.vue b/demo/vue-app-new/src/App.vue
index 1a43c58a4..bf82cddc4 100644
--- a/demo/vue-app-new/src/App.vue
+++ b/demo/vue-app-new/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import Web3AuthProvider, { Web3AuthContextConfig, } from '@web3auth/modal-vue-composables'
-import Main from './Main.vue';
+import Main from './MainView.vue';
 import { chainOptions } from './config';
 import { EthereumPrivateKeyProvider, } from "@web3auth/ethereum-provider";
 import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from '@web3auth/base';
diff --git a/demo/vue-app-new/src/Main.vue b/demo/vue-app-new/src/MainView.vue
similarity index 52%
rename from demo/vue-app-new/src/Main.vue
rename to demo/vue-app-new/src/MainView.vue
index e359b1db4..c5059d006 100644
--- a/demo/vue-app-new/src/Main.vue
+++ b/demo/vue-app-new/src/MainView.vue
@@ -5,52 +5,41 @@ const { t } = useI18n({ useScope: "global" });
 import { Button, Card, Select, Toggle, TextField, ExpansionPanel } from '@toruslabs/vue-components';
 import {
   WhiteLabelData,
-  LANGUAGES,
-  LANGUAGE_TYPE,
   LOGIN_PROVIDER_TYPE,
   storageAvailable,
 } from "@toruslabs/openlogin-utils";
 import { Web3AuthOptions, Web3Auth } from "@web3auth/modal";
-import { CHAIN_NAMESPACES, ChainNamespaceType, IBaseProvider, WEB3AUTH_NETWORK, WEB3AUTH_NETWORK_TYPE, WALLET_ADAPTERS } from "@web3auth/base";
+import { CHAIN_NAMESPACES, ChainNamespaceType, IBaseProvider, WEB3AUTH_NETWORK, WEB3AUTH_NETWORK_TYPE, WALLET_ADAPTERS, IProvider } from "@web3auth/base";
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
-import { chainNamespaceOptions, chainOptions, clientIds, initWhiteLabel, networkOptions, loginProviderOptions } from './config';
+import { chainNamespaceOptions, chainOptions, clientIds, initWhiteLabel, networkOptions, loginProviderOptions, languageOptions } from './config';
 import { useWeb3Auth } from '@web3auth/modal-vue-composables';
 import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
+import { CoinbaseAdapter } from "@web3auth/coinbase-adapter";
+import { MetamaskAdapter } from "@web3auth/metamask-adapter";
+import { PhantomAdapter } from "@web3auth/phantom-adapter";
+import { TorusWalletAdapter } from "@web3auth/torus-evm-adapter";
+import { SolanaWalletAdapter } from "@web3auth/torus-solana-adapter";
 
-const { web3Auth, isConnected, connect, isInitialized, initModal, logout, status } = useWeb3Auth()
+const { web3Auth, isConnected, connect, isInitialized, initModal, logout, status, provider, isMFAEnabled, userInfo, enableMFA: w3EnableMFA, switchChain, addAndSwitchChain, } = useWeb3Auth()
+import { sendEth, signTransaction, signEthMessage, getAccounts, getChainId, getBalance } from './lib/eth';
+import { signAndSendTransaction, signMessage, signAllTransactions } from './lib/sol';
 
 const plugins = [
   { name: "wallet-services-plugin", value: "wallet-services-plugin" },
   { name: "solana-wallet-connector-plugin", value: "solana-wallet-connector-plugin" }
 ]
 
-
-const languages: { name: string; value: LANGUAGE_TYPE }[] = [
-  { name: "English", value: LANGUAGES.en },
-  { name: "German", value: LANGUAGES.de },
-  { name: "Japanese", value: LANGUAGES.ja },
-  { name: "Korean", value: LANGUAGES.ko },
-  { name: "Mandarin", value: LANGUAGES.zh },
-  { name: "Spanish", value: LANGUAGES.es },
-  { name: "French", value: LANGUAGES.fr },
-  { name: "Portuguese", value: LANGUAGES.pt },
-  { name: "Dutch", value: LANGUAGES.nl },
-  { name: "Turkish", value: LANGUAGES.tr },
-];
-
-
 const adapters = [
-  { name: "coinbase-adapter", value: "coinbase-adapter" },
-  { name: "metamask-adapter", value: "metamask-adapter" },
-  { name: "openlogin-adapter", value: "openlogin-adapter" },
-  { name: "phantom-adapter", value: "phantom-adapter" },
-  { name: "torus-evm-adapter", value: "torus-evm-adapter" },
-  { name: "torus-solana-adapter", value: "torus-solana-adapter" },
-  { name: "wallet-connect-v2-adapter", value: "wallet-connect-v2-adapter" },
+  { name: "coinbase-adapter", value: "coinbase" },
+  { name: "metamask-adapter", value: "metamask" },
+  { name: "openlogin-adapter", value: "openlogin" },
+  { name: "phantom-adapter", value: "phantom" },
+  { name: "torus-evm-adapter", value: "torus-evm" },
+  { name: "torus-solana-adapter", value: "torus-solana" },
+  { name: "wallet-connect-v2-adapter", value: "wallet-connect-v2" },
 ]
 
-const chainIdOptions = ref<{ name: string, value: string }[]>([])
 
 type FormData = {
   // authMode: string;
@@ -145,7 +134,7 @@ const formConfig = {
       label: t('app.defaultLanguage'),
       ariaLabel: t('app.defaultLanguage'),
       placeholder: t('app.defaultLanguage'),
-      options: languages,
+      options: languageOptions,
       class: 'max-w-xs'
     },
     logoLight: {
@@ -209,8 +198,111 @@ const formConfig = {
     multiple: true,
     showCheckBox: true
   },
+  ["buttons"]: {
+    btnGetAccounts: {
+      label: t('app.button.btnGetAccounts'),
+      ariaLabel: t('app.button.btnGetAccounts'),
+      class: '[w-full !h-auto group py-3 rounded-full flex items-center justify-center]',
+      type: 'button',
+      block: true,
+      size: 'md',
+      pill: true,
+    },
+    ["btnnGetBalance"]: {
+      label: t('app.button.xxx'),
+      ariaLabel: t('app.button.xxx'),
+      class: '[w-full !h-auto group py-3 rounded-full flex items-center justify-center]',
+      type: 'button',
+      block: true,
+      size: 'md',
+      pill: true,
+    },
+    ["btnSendEth"]: {
+      label: t('app.button.xxx'),
+      ariaLabel: t('app.button.xxx'),
+      class: '[w-full !h-auto group py-3 rounded-full flex items-center justify-center]',
+      type: 'button',
+      block: true,
+      size: 'md',
+      pill: true,
+    },
+    ["btnSignEthMessage"]: {
+      label: t('app.button.xxx'),
+      ariaLabel: t('app.button.xxx'),
+      class: '[w-full !h-auto group py-3 rounded-full flex items-center justify-center]',
+      type: 'button',
+      block: true,
+      size: 'md',
+      pill: true,
+    },
+    ["btnGetConnectedChainId"]: {
+      label: t('app.button.xxx'),
+      ariaLabel: t('app.button.xxx'),
+      class: '[w-full !h-auto group py-3 rounded-full flex items-center justify-center]',
+      type: 'button',
+      block: true,
+      size: 'md',
+      pill: true,
+    },
+    ["btnAddChain"]: {
+      label: t('app.button.xxx'),
+      ariaLabel: t('app.button.xxx'),
+      class: '[w-full !h-auto group py-3 rounded-full flex items-center justify-center]',
+      type: 'button',
+      block: true,
+      size: 'md',
+      pill: true,
+    },
+    ["btnSwitchChain"]: {
+      label: t('app.button.xxx'),
+      ariaLabel: t('app.button.xxx'),
+      class: '[[w-full !h-auto group py-3 rounded-full flex items-center justify-center]]',
+      type: 'button',
+      block: true,
+      size: 'md',
+      pill: true,
+    },
+    ["btnSignAndSendTransaction"]: {
+      label: t('app.button.xxx'),
+      ariaLabel: t('app.button.xxx'),
+      class: '[w-full !h-auto group py-3 rounded-full flex items-center justify-center]',
+      type: 'button',
+      block: true,
+      size: 'md',
+      pill: true,
+    },
+    ["btnSignTransaction"]: {
+      label: t('app.button.xxx'),
+      ariaLabel: t('app.button.xxx'),
+      class: '[w-full !h-auto group py-3 rounded-full flex items-center justify-center]',
+      type: 'button',
+      block: true,
+      size: 'md',
+      pill: true,
+    },
+    ["btnSignMessage"]: {
+      label: t('app.button.xxx'),
+      ariaLabel: t('app.button.xxx'),
+      class: '[w-full !h-auto group py-3 rounded-full flex items-center justify-center]',
+      type: 'button',
+      block: true,
+      size: 'md',
+      pill: true,
+    },
+    ["btnSignAllTransactions"]: {
+      label: t('app.button.xxx'),
+      ariaLabel: t('app.button.xxx'),
+      class: '[w-full !h-auto group py-3 rounded-full flex items-center justify-center]',
+      type: 'button',
+      block: true,
+      size: 'md',
+      pill: true,
+    },
+  },
 }
 
+const chainIdOptions = ref<{ name: string, value: string }[]>([])
+
 // Populate the private key provider based on the chain selected
 const privateKeyProvider = computed((): IBaseProvider<string> => {
 
@@ -254,28 +346,81 @@ const options = computed((): Web3AuthOptions => {
 })
 
 const modalParams = computed(() => {
+
+  const excludedProviders = loginProviderOptions.filter((x) => !formData.value.loginProviders.includes(x.value)).map((x) => x.value);
+
   const modalConfig = {
     [WALLET_ADAPTERS.OPENLOGIN]: {
       label: "openlogin",
-      loginMethods: {
-        google: {
-          name: "google login",
-          logoDark: "url to your custom logo which will shown in dark mode",
-        },
-        facebook: {
-          // it will hide the facebook option from the Web3Auth modal.
-          name: "facebook login",
-          showOnModal: false,
-        },
-      },
-      // setting it to false will hide all social login methods from modal.
-      showOnModal: false,
+      loginMethods: Object.fromEntries(excludedProviders.map((x) => ([x, { name: `${x} login`, showOnModal: false }]))),
     }
   }
+  console.log("modalConfig", modalConfig);
   return { modalConfig };
-
 })
 
+const getExternalAdapterByName = (name: string) => {
+  switch (name) {
+    case "coinbase":
+      return new CoinbaseAdapter();
+    case "metamask":
+      return new MetamaskAdapter();
+    case "openlogin":
+      return new OpenloginAdapter({
+        adapterSettings: {
+          network: formData.value.network as WEB3AUTH_NETWORK_TYPE,
+          clientId: clientIds[formData.value.network],
+        },
+      });
+    case "phantom":
+      return new PhantomAdapter();
+    case "torus-evm":
+      return new TorusWalletAdapter({
+        adapterSettings: {
+          buttonPosition: "bottom-left",
+        },
+        loginSettings: {
+          verifier: "google",
+        },
+        initParams: {
+          buildEnv: "testing",
+        },
+        chainConfig: {
+          chainNamespace: CHAIN_NAMESPACES.EIP155,
+          chainId: "0x3",
+          rpcTarget: "https://ropsten.infura.io/v3/776218ac4734478c90191dde8cae483c",
+          displayName: "ropsten",
+          blockExplorerUrl: "https://ropsten.etherscan.io/",
+          ticker: "ETH",
+          tickerName: "Ethereum",
+        },
+      });
+    case "torus-solana":
+      return new SolanaWalletAdapter({
+        adapterSettings: {
+          modalZIndex: 99999,
+        },
+        loginSettings: {
+          loginProvider: "google",
+        },
+        initParams: {
+          buildEnv: "testing",
+        },
+        chainConfig: {
+          chainNamespace: CHAIN_NAMESPACES.SOLANA,
+          rpcTarget: "https://api.testnet.solana.com",
+          blockExplorerUrl: "https://explorer.solana.com",
+          chainId: "0x2",
+          displayName: "testnet",
+          ticker: "sol",
+          tickerName: "solana",
+        },
+      })
+    default:
+      return null;
+  }
+}
+
 // Init the web3Auth object 
 const init = async () => {
   chainIdOptions.value = chainOptions[formData.value.chainNamespace as ChainNamespaceType].map((x) => ({ name: `${x.chainId} ${x.tickerName}`, value: x.chainId }))
@@ -288,24 +433,126 @@ init()
 // Every time the form data changes, reinitialize the web3Auth object
 watch(formData.value, async () => {
   chainIdOptions.value = chainOptions[formData.value.chainNamespace as ChainNamespaceType].map((x) => ({ name: `${x.chainId} ${x.tickerName}`, value: x.chainId }))
-  if (!chainIdOptions.value.find(option => option.value == formData.value.chain)) formData.value.chain = chainIdOptions.value[0].value
+  if (!chainIdOptions.value.find(option => option.value == formData.value.chain)) formData.value.chain = chainIdOptions.value[0]?.value
   if (storageAvailable("sessionStorage")) sessionStorage.setItem("state", JSON.stringify(formData.value));
+  web3Auth.value?.clearCache()
   web3Auth.value = new Web3Auth(options.value);
 
-  web3Auth.value.configureAdapter(new OpenloginAdapter({
-    adapterSettings: {
-      network: formData.value.network as WEB3AUTH_NETWORK_TYPE,
-      clientId: clientIds[formData.value.network],
-    },
-  }));
+  for(const adapter of formData.value.adapters) {
+    const externalAdapter = getExternalAdapterByName(adapter);
+    if (externalAdapter) web3Auth.value.configureAdapter(externalAdapter);
+  }
 
-  await initModal();
+  await initModal(modalParams.value);
 });
 
 watch(status, () => {
   console.log("status :::::::::::::::::::::::::::", status.value);
 })
 
+const enableMFA = async () => {
+  await w3EnableMFA();
+}
+
+const getUserInfo = async () => {
+  printToConsole("User Info", userInfo);
+};
+
+const printToConsole = (...args: unknown[]) => {
+  const el = document.querySelector("#console>pre");
+  const h1 = document.querySelector("#console>h1");
+  const consoleBtn = document.querySelector<HTMLElement>("#console>div.clear-console-btn");
+  if (h1) {
+    h1.innerHTML = args[0] as string;
+  }
+  if (el) {
+    el.innerHTML = JSON.stringify(args[1] || {}, null, 2);
+  }
+  if (consoleBtn) {
+    consoleBtn.style.display = "block";
+  }
+};
+
+const clearConsole = () => {
+  const el = document.querySelector("#console>pre");
+  const h1 = document.querySelector("#console>h1");
+  const consoleBtn = document.querySelector<HTMLElement>("#console>div.clear-console-btn");
+  if (h1) {
+    h1.innerHTML = "";
+  }
+  if (el) {
+    el.innerHTML = "";
+  }
+  if (consoleBtn) {
+    consoleBtn.style.display = "none";
+  }
+};
+
+const onSendEth = async () => {
+  await sendEth(provider.value as IProvider, printToConsole);
+}
+
+const onSignEthMessage = async () => {
+  await signEthMessage(provider.value as IProvider, printToConsole);
+}
+
+const onGetAccounts = async () => {
+  await getAccounts(provider.value as IProvider, printToConsole);
+}
+
+const getConnectedChainId = async () => {
+  await getChainId(provider.value as IProvider, printToConsole);
+}
+
+const onGetBalance = async () => {
+  await getBalance(provider.value as IProvider, printToConsole);
+}
+
+const onSwitchChain = async () => {
+  try {
+    await switchChain({ chainId: "0x89" });
+    printToConsole("switchedChain");
+  } catch (error) {
+    console.error("error while switching chain", error);
+    printToConsole("switchedChain error", error);
+  }
+}
+
+const onAddChain = async () => {
+  try {
+    await addAndSwitchChain({
+      chainId: "0x89",
+      chainNamespace: CHAIN_NAMESPACES.EIP155,
+      rpcTarget: "https://rpc-sepolia.tor.us",
+      blockExplorerUrl: "https://sepolia.etherscan.io",
+      displayName: "Sepolia",
+      ticker: "ETH",
+      tickerName: "Ethereum",
+    });
+    printToConsole("added chain");
+  } catch (error) {
+    console.error("error while adding chain", error);
+    printToConsole("add chain error", error);
+  }
+}
+
+const onSignAndSendTransaction = async () => {
+  await signAndSendTransaction(provider.value as IProvider, printToConsole);
+}
+
+const onSignTransaction = async () => {
+  await signTransaction(provider.value as IProvider, printToConsole);
+}
+
+const onSignMessage = async () => {
+  await signMessage(provider.value as IProvider, printToConsole);
+}
+
+const onSignAllTransactions = async () => {
+  await signAllTransactions(provider.value as IProvider, printToConsole);
+}
+
+
 </script>
 
 <template>
@@ -321,7 +568,7 @@ watch(status, () => {
       <div id="navbar-sticky" class="items-center justify-between w-full md:flex md:w-auto md:order-1">
         <div v-if="isConnected" class="max-sm:w-full">
           <h1 class="leading-tight text-3xl font-extrabold">{{ $t("app.title") }}</h1>
-          <p class="leading-tight text-1xl">{{ $t("app.description") }}</p>
+          <p class="leading-tight text-1xl">{{ $t("app.description") }} </p>
         </div>
       </div>
     </div>
@@ -333,19 +580,18 @@ watch(status, () => {
           <div class="text-3xl font-bold leading-tight mb-5 text-center">{{ $t("app.greeting") }}</div>
 
           <Card class="h-auto px-8 py-8 ">
-            <div class="leading-tight text-2xl font-extrabold">{{ $t("app.formHeader") }}</div>
-            <div class="text-app-gray-500 mt-2">{{ $t("app.subHeading") }} {{ isConnected }} {{ isInitialized }} {{
-              status }}</div>
+            <div class="leading-tight text-2xl font-extrabold">{{ $t("app.w3aStatus", { status }) }}</div>
+            <div class="text-app-gray-500 mt-2">{{ $t("app.isConnected", { isConnected }) }}</div>
+            <div class="text-app-gray-500 mt-2">{{ $t("app.isInitialized", { isInitialized }) }}</div>
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-5 mt-5">
 
               <!-- <Select v-model="formData.authMode" v-bind="formConfig['authMode']" /> -->
               <Select v-model="formData.network" v-bind="formConfig['network']" />
               <Select v-model="formData.chainNamespace" v-bind="formConfig['chainNamespace']" />
               <Select v-model="formData.chain" v-bind="formConfig['chain']" :options="chainIdOptions" />
-
-
-              <Select v-model="formData.plugins" v-bind="formConfig['plugins']" />
-
+              <Select v-model="formData.loginProviders" v-bind="formConfig['loginProviders']" />
+              <!-- <Select v-model="formData.plugins" v-bind="formConfig['plugins']" /> -->
+              <Select v-model="formData.adapters" v-bind="formConfig['adapters']" />
               <ExpansionPanel v-bind="formConfig['whiteLabel'].panel" v-bind:expand="formData.whiteLabel.enable">
                 <template #panelTitle>
                   <Toggle v-model="formData.whiteLabel.enable" v-bind="formConfig['whiteLabel'].enable" />
@@ -387,8 +633,6 @@ watch(status, () => {
 
                 </template>
               </ExpansionPanel>
-              <Select v-model="formData.loginProviders" v-bind="formConfig['loginProviders']" />
-              <Select v-model="formData.adapters" v-bind="formConfig['adapters']" />
             </div>
             <div class="flex justify-center mt-5">
               <Button :class="['w-full !h-auto group py-3 rounded-full flex items-center justify-center']"
@@ -400,6 +644,56 @@ watch(status, () => {
         </div>
 
       </div>
+      <div v-else class="grid gap-0">
+        <div class="grid grid-cols-8 gap-0">
+          <div class="col-span-1"></div>
+          <Card class="px-4 py-4 gird col-span-2">
+            <div class="mb-4">
+              <p class="btn-label">User info</p>
+            </div>
+            <div class="mb-4">
+              <Button :v-bind="formConfig['buttons']['btnGetAccounts']" @click="onGetAccounts" />
+            </div>
+            <div class="mb-4">
+
+              <div>
+            dsds  
+            </div><Button :v-bind="formConfig['buttons']['btnnGetBalance']" @click="onGetBalance" />
+
+
+              <Button :v-bind="formConfig['buttons']['btnSendEth']" @click="onSendEth" />
+              <Button :v-bind="formConfig['buttons']['btnSignEthMessage']" @click="onSignEthMessage" />
+              <Button :v-bind="formConfig['buttons']['btnGetConnectedChainId']" @click="getConnectedChainId" />
+              <Button :v-bind="formConfig['buttons']['btnAddChain']" @click="onAddChain" />
+              <Button :v-bind="formConfig['buttons']['btnSwitchChain']" @click="onSwitchChain" />
+
+              <Button :v-bind="formConfig['buttons']['btnSignAndSendTransaction']" @click="onSignAndSendTransaction" />
+              <Button :v-bind="formConfig['buttons']['btnSignTransaction']" @click="onSignTransaction" />
+              <Button :v-bind="formConfig['buttons']['btnSignMessage']" @click="onSignMessage" />
+              <Button :v-bind="formConfig['buttons']['btnSignAllTransactions']" @click="onSignAllTransactions" />
+
+            </div>
+          </Card>
+          <Card id="console" class="px-4 py-4 col-span-4 overflow-y-auto">
+            <pre
+              class="whitespace-pre-line overflow-x-auto font-normal text-base leading-6 text-black break-words overflow-y-auto max-h-screen"
+            ></pre>
+            <div class="absolute top-2 right-8">
+              <Button
+                :class="['w-full !h-auto group py-3 rounded-full flex items-center justify-center']"
+                type="button"
+                block
+                size="md"
+                pill
+                @click="clearConsole"
+                data-testid="btnClearConsole"
+              >
+                Clear console
+              </Button>
+            </div>
+          </Card>
+        </div>
+      </div>
     </div>
   </main>
 </template>
diff --git a/demo/vue-app-new/src/components/HelloWorld.vue b/demo/vue-app-new/src/components/HelloWorld.vue
deleted file mode 100644
index b58e52b96..000000000
--- a/demo/vue-app-new/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/demo/vue-app-new/src/config.ts b/demo/vue-app-new/src/config.ts
index 486552beb..101d9fb5c 100644
--- a/demo/vue-app-new/src/config.ts
+++ b/demo/vue-app-new/src/config.ts
@@ -1,6 +1,5 @@
 import { CHAIN_NAMESPACES, ChainNamespaceType, CustomChainConfig, WEB3AUTH_NETWORK, WEB3AUTH_NETWORK_TYPE } from "@web3auth/base";
-import { WhiteLabelData, LOGIN_PROVIDER } from "@toruslabs/openlogin-utils";
-
+import { WhiteLabelData, LOGIN_PROVIDER, LANGUAGES, LANGUAGE_TYPE } from "@toruslabs/openlogin-utils";
 export const networkOptions = Object.values(WEB3AUTH_NETWORK).map((x) => ({ name: x, value: x }));
 
 export const chainNamespaceOptions = Object.values(CHAIN_NAMESPACES).map((x) => ({ name: x, value: x }));
@@ -79,3 +78,16 @@ export const initWhiteLabel: WhiteLabelData = {
 export const loginProviderOptions = Object.values(LOGIN_PROVIDER)
   .filter((x) => x !== "jwt" && x !== "webauthn")
   .map((x) => ({ name: x.replaceAll("_", " "), value: x }));
+
+export const languageOptions: { name: string; value: LANGUAGE_TYPE }[] = [
+  { name: "English", value: LANGUAGES.en },
+  { name: "German", value: LANGUAGES.de },
+  { name: "Japanese", value: LANGUAGES.ja },
+  { name: "Korean", value: LANGUAGES.ko },
+  { name: "Mandarin", value: LANGUAGES.zh },
+  { name: "Spanish", value: LANGUAGES.es },
+  { name: "French", value: LANGUAGES.fr },
+  { name: "Portuguese", value: LANGUAGES.pt },
+  { name: "Dutch", value: LANGUAGES.nl },
+  { name: "Turkish", value: LANGUAGES.tr },
+];
diff --git a/demo/vue-app-new/src/lib/eth.ts b/demo/vue-app-new/src/lib/eth.ts
new file mode 100644
index 000000000..fcff285b1
--- /dev/null
+++ b/demo/vue-app-new/src/lib/eth.ts
@@ -0,0 +1,169 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IProvider, log } from "@web3auth/base";
+import Web3 from "web3";
+
+export const sendEth = async (provider: IProvider, uiConsole: any) => {
+  try {
+    const web3 = new Web3(provider);
+    const accounts = await web3.eth.getAccounts();
+    log.info("pubKey", accounts);
+    const txRes = await web3.eth.sendTransaction({
+      from: accounts[0],
+      to: accounts[0],
+      value: web3.utils.toWei("0.01", "ether"),
+    });
+    uiConsole("txRes", txRes);
+  } catch (error) {
+    log.info("error", error);
+    uiConsole("error", error);
+  }
+};
+
+export const signEthMessage = async (provider: IProvider, uiConsole: any) => {
+  try {
+    const web3 = new Web3();
+    web3.setProvider(provider);
+    // hex message
+    // const message = "0x47173285a8d7341e5e972fc677286384f802f8ef42a5ec5f03bbfa254cb01fad";
+    const fromAddress = (await web3.eth.getAccounts())[0];
+    log.info("fromAddress", fromAddress);
+    // const signedMessage = await provider.request({
+    //   method: "eth_sign",
+    //   params: [fromAddress, message],
+    // });
+
+    const message = "Some string";
+    const hash = web3.utils.sha3(message) as string;
+    const sig = await web3.eth.personal.sign(hash, fromAddress, "");
+    uiConsole("personal sign", sig);
+    // const originalMessage = {
+    //   types: {
+    //     EIP712Domain: [
+    //       {
+    //         name: "name",
+    //         type: "string",
+    //       },
+    //       {
+    //         name: "version",
+    //         type: "string",
+    //       },
+    //       {
+    //         name: "chainId",
+    //         type: "uint256",
+    //       },
+    //       {
+    //         name: "verifyingContract",
+    //         type: "address",
+    //       },
+    //     ],
+    //     Person: [
+    //       {
+    //         name: "name",
+    //         type: "string",
+    //       },
+    //       {
+    //         name: "wallet",
+    //         type: "address",
+    //       },
+    //     ],
+    //     Mail: [
+    //       {
+    //         name: "from",
+    //         type: "Person",
+    //       },
+    //       {
+    //         name: "to",
+    //         type: "Person",
+    //       },
+    //       {
+    //         name: "contents",
+    //         type: "string",
+    //       },
+    //     ],
+    //   },
+    //   primaryType: "Mail",
+    //   domain: {
+    //     name: "Ether Mail",
+    //     version: "1",
+    //     chainId: 1,
+    //     verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC",
+    //   },
+    //   message: {
+    //     from: {
+    //       name: "Cow",
+    //       wallet: "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826",
+    //     },
+    //     to: {
+    //       name: "Bob",
+    //       wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
+    //     },
+    //     contents: "Hello, Bob!",
+    //   },
+    // };
+    // const params = [originalMessage, fromAddress];
+    // const method = "eth_signTypedData";
+
+    // const signedMessage = await provider.request({
+    //   method,
+    //   params,
+    // });
+    // uiConsole("signedMessage orog", signedMessage);
+  } catch (error) {
+    log.error("error", error);
+    uiConsole("error", error);
+  }
+};
+
+export const getAccounts = async (provider: IProvider, uiConsole: any): Promise<string[] | undefined> => {
+  try {
+    const web3 = new Web3(provider);
+    const accounts = await web3.eth.getAccounts();
+    uiConsole("accounts", accounts);
+    return accounts;
+  } catch (error) {
+    log.error("Error", error);
+    uiConsole("error", error);
+    return [];
+  }
+};
+export const getChainId = async (provider: IProvider, uiConsole: any): Promise<string | undefined> => {
+  try {
+    const web3 = new Web3(provider);
+    const chainId = await web3.eth.getChainId();
+    uiConsole(chainId.toString());
+    return chainId.toString();
+  } catch (error) {
+    log.error("Error", error);
+    uiConsole("error", error);
+    return undefined;
+  }
+};
+export const getBalance = async (provider: IProvider, uiConsole: any) => {
+  try {
+    const web3 = new Web3(provider);
+    const accounts = await web3.eth.getAccounts();
+    const balance = await web3.eth.getBalance(accounts[0]);
+    uiConsole("balance", balance);
+  } catch (error) {
+    log.error("Error", error);
+    uiConsole("error", error);
+  }
+};
+
+export const signTransaction = async (provider: IProvider, uiConsole: any) => {
+  try {
+    const web3 = new Web3(provider);
+    const accounts = await web3.eth.getAccounts();
+
+    // only supported with social logins (openlogin adapter)
+    const txRes = await web3.eth.signTransaction({
+      from: accounts[0],
+      to: accounts[0],
+      value: web3.utils.toWei("0.01", "ether"),
+    });
+    uiConsole("txRes", txRes);
+  } catch (error) {
+    log.info("error", error);
+    uiConsole("error", error);
+  }
+};
diff --git a/demo/vue-app-new/src/lib/sol.ts b/demo/vue-app-new/src/lib/sol.ts
new file mode 100644
index 000000000..63ebbb2e5
--- /dev/null
+++ b/demo/vue-app-new/src/lib/sol.ts
@@ -0,0 +1,137 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Connection, LAMPORTS_PER_SOL, PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
+import { CustomChainConfig, IProvider, log } from "@web3auth/base";
+import { SolanaWallet } from "@web3auth/solana-provider";
+
+const getConnection = async (provider: IProvider): Promise<Connection> => {
+  const solanaWallet = new SolanaWallet(provider);
+
+  const connectionConfig = await solanaWallet.request<never, CustomChainConfig>({ method: "solana_provider_config" });
+  const conn = new Connection(connectionConfig.rpcTarget);
+  return conn;
+};
+
+function getNewTx(publicKeys, blockhash) {
+  const inst = SystemProgram.transfer({
+    fromPubkey: new PublicKey(publicKeys[0]),
+    toPubkey: new PublicKey(publicKeys[0]),
+    lamports: 0.1 * LAMPORTS_PER_SOL,
+  });
+  return new Transaction({ recentBlockhash: blockhash, feePayer: new PublicKey(publicKeys![0]) }).add(inst);
+}
+
+export const getAccounts = async (provider: IProvider, uiConsole: any): Promise<string[] | undefined> => {
+  try {
+    const solWeb3 = new SolanaWallet(provider);
+    const acc = await solWeb3.requestAccounts();
+    uiConsole("accounts", acc);
+    return acc;
+  } catch (error) {
+    log.error("Error", error);
+    uiConsole("error", error);
+    return [];
+  }
+};
+export const getBalance = async (provider: IProvider, uiConsole: any): Promise<void> => {
+  try {
+    const conn = await getConnection(provider);
+    const solanaWallet = new SolanaWallet(provider);
+    const accounts = await solanaWallet.requestAccounts();
+    const balance = await conn.getBalance(new PublicKey(accounts[0]));
+    uiConsole("balance", balance);
+  } catch (error) {
+    log.error("Error", error);
+    uiConsole("error", error);
+  }
+};
+
+export const signAndSendTransaction = async (provider: IProvider, uiConsole: any) => {
+  try {
+    const conn = await getConnection(provider);
+    const solWeb3 = new SolanaWallet(provider);
+    const pubKey = await solWeb3.requestAccounts();
+
+    const block = await conn.getLatestBlockhash("finalized");
+    const transactionInstruction = SystemProgram.transfer({
+      fromPubkey: new PublicKey(pubKey[0]),
+      toPubkey: new PublicKey(pubKey[0]),
+      lamports: 0.01 * LAMPORTS_PER_SOL,
+    });
+
+    const transaction = new Transaction({
+      blockhash: block.blockhash,
+      lastValidBlockHeight: block.lastValidBlockHeight,
+      feePayer: new PublicKey(pubKey[0]),
+    }).add(transactionInstruction);
+
+    const signature = await solWeb3.signAndSendTransaction(transaction);
+    uiConsole("signature", signature);
+  } catch (error) {
+    log.error("Error", error);
+    uiConsole("error", error);
+  }
+};
+
+export const signTransaction = async (provider: IProvider, uiConsole: any) => {
+  try {
+    const conn = await getConnection(provider);
+    const solWeb3 = new SolanaWallet(provider);
+    const pubKey = await solWeb3.requestAccounts();
+
+    const block = await conn.getLatestBlockhash("finalized");
+    const transactionInstruction = SystemProgram.transfer({
+      fromPubkey: new PublicKey(pubKey[0]),
+      toPubkey: new PublicKey(pubKey[0]),
+      lamports: 0 * LAMPORTS_PER_SOL,
+    });
+
+    const transaction = new Transaction({
+      blockhash: block.blockhash,
+      lastValidBlockHeight: block.lastValidBlockHeight,
+      feePayer: new PublicKey(pubKey[0]),
+    }).add(transactionInstruction);
+
+    const signedTx = await solWeb3.signTransaction(transaction);
+
+    // const res = await conn.sendRawTransaction(signedTx.serialize());
+    uiConsole("signature", signedTx);
+    return { signature: signedTx };
+  } catch (error) {
+    log.error("Error", error);
+    uiConsole("error", error);
+    return undefined;
+  }
+};
+
+export const signMessage = async (provider: IProvider, uiConsole: any) => {
+  try {
+    const solWeb3 = new SolanaWallet(provider);
+    const msg = Buffer.from("Test Signing Message ", "utf8");
+    const res = await solWeb3.signMessage(new Uint8Array(msg));
+    uiConsole(res);
+  } catch (error) {
+    log.error("Error", error);
+    uiConsole("error", error);
+  }
+};
+
+export const signAllTransactions = async (provider: IProvider, uiConsole: any) => {
+  try {
+    const conn = await getConnection(provider);
+    const solWeb3 = new SolanaWallet(provider);
+    const publicKeys = await solWeb3.requestAccounts();
+    const { blockhash } = await conn.getRecentBlockhash("finalized");
+    log.info("blockhash", blockhash);
+
+    const signedTx = await solWeb3.signAllTransactions([
+      getNewTx(publicKeys, blockhash),
+      getNewTx(publicKeys, blockhash),
+      getNewTx(publicKeys, blockhash),
+    ]);
+    log.info("signedTx", signedTx);
+    uiConsole("signature", signedTx);
+  } catch (error) {
+    log.error("Error", error);
+    uiConsole("error", error);
+  }
+};
diff --git a/demo/vue-app-new/src/translations/en.json b/demo/vue-app-new/src/translations/en.json
index 735bb557f..131209d0b 100644
--- a/demo/vue-app-new/src/translations/en.json
+++ b/demo/vue-app-new/src/translations/en.json
@@ -10,6 +10,21 @@
     "selectLoginProvider": "Select a login provider",
     "selectAdapters": "Select an external wallet",
     "greeting": "Let's configure Web3Auth!",
-    "whiteLabel": "White Label"
+    "whiteLabel": "White Label",
+    "selectChainNamespace": "Select a chain namespace",
+    "appName": "App Name",
+    "appUrl": "App URL",
+    "defaultLanguage": "Default Language",
+    "logoLight": "Light Logo",
+    "logoDark": "Dark Logo",
+    "useLogoLoader": "Use Logo Loader",
+    "primaryColor": "Primary Color",
+    "onPrimaryColor": "On Primary Color",
+    "w3aStatus": "Web3Auth status ::::: {status}",
+    "isConnected": "Is connected ::::: {isConnected}",
+    "isInitialized": "Is initialized ::::: {isInitialized}",
+    "buttons": {
+      "btnGetAccounts": "Get Accounts"
+    }
   }
 }
diff --git a/demo/vue-app-new/src/views/Home.vue b/demo/vue-app-new/src/views/Home.vue
deleted file mode 100644
index a1e663470..000000000
--- a/demo/vue-app-new/src/views/Home.vue
+++ /dev/null
@@ -1,631 +0,0 @@
-<template>
-	<div class="container">
-		<div class="sidebar">
-			<a href="https://github.com/Web3Auth/Web3Auth/tree/master/demo/vue-app-new" target="blank">
-				<img :src="`./assets/github-logo.png`" alt="github-logo" width="30px" />
-			</a>
-			<h2>Demo Settings</h2>
-
-			<div class="flex-vertical-center">
-				<RadioGroup
-					v-bind="{ 
-						labelPlacement: 'right', 
-						disabledAll: false, 
-						row: true, 
-						items: authModes, 
-					}"
-					v-model="authMode"
-				/>
-				<!-- <label class="form-label" for="chain">Chain</label> -->
-
-				<!-- <span class="form-label">Auth Mode</span>
-				<span class="form-control radio-group">
-					<label for="hosted" class="radio-button">
-						<input id="hosted" v-model="form.authMode" type="radio" value="hosted" />
-						Hosted
-					</label>
-					<label for="ownAuth" class="radio-button">
-						<input id="ownAuth" v-model="form.authMode" type="radio" value="ownAuth" />
-						Use Your Own Auth
-					</label>
-				</span> -->
-			</div>
-			<div class="flex-vertical-center plugins">
-
-				<!-- <span class="form-label">Plugins</span>
-				<span class="form-control radio-group">
-					<label for="torusWallet" class="radio-button">
-						<input id="torusWallet" v-model="form.plugins.torusWallet" type="checkbox" value="torus wallet plugin" />
-						Torus Wallet UI Plugin
-					</label>
-				</span>
-				<span class="form-control radio-group">
-					<label for="walletServices" class="radio-button">
-						<input id="walletServices" v-model="form.plugins.walletServices" type="checkbox"
-							value="wallet services plugin" />
-						Wallet Services Plugin
-					</label>
-				</span> -->
-			</div>
-
-			<hr />
-
-			<div v-if="authMode === 'hosted'" class="hosted">
-				<div class="ui-mode">
-					<div class="flex-vertical-center ui-mode">
-						<span class="form-label">Openlogin Network</span>
-						<span class="form-control radio-group">
-							<label for="sapphire_mainnet" class="radio-button">
-								<input type="radio" id="sapphire_mainnet" value="sapphire_mainnet" v-model="openloginNetwork" />
-								Sapphire Mainnet
-							</label>
-							<label for="sapphire_devnet" class="radio-button">
-								<input type="radio" id="sapphire_devnet" value="sapphire_devnet" v-model="openloginNetwork" />
-								Sapphire Devnet
-							</label>
-							<label for="mainnet" class="radio-button">
-								<input id="mainnet" v-model="openloginNetwork" type="radio" value="mainnet" />
-								Mainnet
-							</label>
-							<label for="testnet" class="radio-button">
-								<input id="testnet" v-model="openloginNetwork" type="radio" value="testnet" />
-								Testnet
-							</label>
-							<label for="cyan" class="radio-button">
-								<input id="cyan" v-model="openloginNetwork" type="radio" value="cyan" />
-								Cyan
-							</label>
-						</span>
-					</div>
-					<br />
-				</div>
-				<hr />
-				<div class="flex-vertical-center chain">
-					<!-- <label class="form-label" for="chain">Chain</label> -->
-
-					<span class="form-label">Select Chain</span>
-					<span class="form-control radio-group">
-						<label for="ethereum" class="radio-button">
-							<input id="ethereum" v-model="chain" type="radio" value="ethereum" />
-							Ethereum
-						</label>
-						<label for="solana" class="radio-button">
-							<input id="solana" v-model="chain" type="radio" value="solana" />
-							Solana
-						</label>
-						<label for="binance" class="radio-button">
-							<input id="binance" v-model="chain" type="radio" value="binance" />
-							Binance
-						</label>
-						<label for="polygon" class="radio-button">
-							<input id="polygon" v-model="chain" type="radio" value="polygon" />
-							Polygon
-						</label>
-					</span>
-				</div>
-				<hr />
-				<div class="ui-mode">
-					<div class="flex-vertical-center ui-mode">
-						<span class="form-label">UI</span>
-						<span class="form-control radio-group">
-							<label for="default" class="radio-button">
-								<input id="default" v-model="selectedUiMode" type="radio" value="default" />
-								Default
-							</label>
-							<!-- <label for="customUi" class="radio-button">
-                <input type="radio" id="customUi" value="customUi" v-model="form.selectedUiMode" />
-                CustomUI
-              </label> -->
-							<label for="whitelabel" class="radio-button">
-								<input id="whitelabel" v-model="selectedUiMode" type="radio" value="whitelabel" />
-								WhiteLabel
-							</label>
-						</span>
-					</div>
-					<hr />
-
-					<!-- UI MODE DEFAULT -->
-					<!-- <div v-if="form.selectedUiMode === 'default'">
-						<div class="flex-vertical-center">
-							<span class="form-label">Social Logins</span>
-							<div class="form-control">
-								<li v-for="loginType in form.uiMode.default.login" :key="loginType.id" class="list-style-none">
-									<label :for="loginType.id">
-										<input :id="loginType.id" v-model="loginType.checked" type="checkbox" />
-										<span>{{ loginType.name }}</span>
-									</label>
-								</li>
-							</div>
-						</div>
-						<hr />
-						<div class="flex-vertical-center">
-							<span class="form-label">External Wallets</span>
-							<div class="form-control">
-								<li v-for="walletType in form.uiMode.default.adapter" :key="walletType.id" class="list-style-none">
-									<label :for="walletType.id">
-										<input :id="walletType.id" v-model="walletType.checked" type="checkbox" />
-										<span>{{ walletType.name }}</span>
-									</label>
-								</li>
-							</div>
-						</div>
-					</div> -->
-
-					<!-- UI MODE YOUR OWN MODAL -->
-					<!-- <div v-if="form.selectedUiMode === 'customUi'">
-						<div class="flex-vertical-center">
-							<span class="form-label">Type</span>
-							<span class="form-control">
-								<input id="openlogin" v-model="form.uiMode.customUi.type" type="radio" name="openlogin"
-									value="openlogin" />
-								<label for="openlogin">OpenLogin</label>
-								<br />
-							</span>
-						</div>
-						<br />
-					</div> -->
-
-					<!-- UI MODE WHITELABEL -->
-					<!-- <div v-if="form.selectedUiMode === 'whitelabel'">
-						<div class="flex-vertical-center">
-							<span class="form-label">Logo URL</span>
-							<span class="form-control">
-								<input v-model="form.uiMode.whitelabel.logoUrl" type="text" class="text" aria-label="logo" />
-							</span>
-						</div>
-						<div class="flex-vertical-center">
-							<span class="form-label">Theme</span>
-							<span class="form-control">
-								<input id="light" v-model="form.uiMode.whitelabel.theme" type="radio" name="light" value="light" />
-								<label for="light">Light</label>
-								<input id="dark" v-model="form.uiMode.whitelabel.theme" type="radio" name="dark" value="dark" />
-								<label for="dark">Dark</label>
-								<input id="auto" v-model="form.uiMode.whitelabel.theme" type="radio" name="auto" value="auto" />
-								<label for="auto">Auto</label>
-							</span>
-						</div>
-						<div class="flex-vertical-center">
-							<label for="defaultLanguage" class="form-label">Default Language</label>
-							<span class="form-control">
-								<select id="defaultLanguage" v-model="form.uiMode.whitelabel.defaultLanguage">
-									<option v-for="language in languages" :key="language.value" :value="language.value">
-										{{ language.display }}
-									</option>
-								</select>
-							</span>
-						</div>
-						<div class="order-container">
-							<div class="form-label">
-								<div>Login Methods Order</div>
-								<a @click="setDefaultLoginMethodsOrder" @keydown="setDefaultLoginMethodsOrder">Set to
-									default</a>
-							</div>
-							<div>
-								<textarea v-model="tempLoginMethodsOrder" aria-label="login-order" rows="5" class="order-list" />
-							</div>
-							<div></div>
-						</div>
-					</div> -->
-				</div>
-			</div>
-
-			<div v-else-if="authMode === 'ownAuth'" class="ownAuth">
-				<!-- <CustomUiContainer :authType="config.uiMode.customUi.type" v-if="config.authMode === 'ownAuth'"></CustomUiContainer> -->
-			</div>
-
-			<div class="btn-group">
-				<button type="button" class="btn submit-btn" @click="saveConfig">Submit</button>
-			</div>
-		</div>
-		<div class="content">
-			<section>
-				<!-- hosted auth -->
-				<!-- <ConfigurableExample v-if="config.selectedUiMode === 'default' && config.authMode === 'hosted'"
-					:plugins="form.plugins" :openlogin-network="config.openloginNetwork" :adapter-config="config.uiMode.default"
-					:chain="config.chain" />
-
-				<WhitelabelExample v-else-if="config.selectedUiMode === 'whitelabel' && config.authMode === 'hosted'"
-					:ui-config="config.uiMode.whitelabel" :chain="config.chain" /> -->
-
-				<!-- Custom auth -->
-				<!-- <CustomUiContainer v-if="config.authMode === 'ownAuth'" :auth-type="config.uiMode.customUi.type">
-				</CustomUiContainer> -->
-			</section>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { RadioGroup } from "@toruslabs/vue-components";
-
-const authModes = [
-	{ label: "Hosted", id: "hosted", value: "hosted" },
-	{ label: "Own Auth", id: "ownAuth", value: "ownAuth" },
-];
-
-const authMode = ref<string>("hosted");
-const openloginNetwork = ref<string>("sapphire_mainnet");
-const chain = ref<string>("ethereum");
-const selectedUiMode = ref<string>("default");
-
-
-
-
-// import { LOGIN_PROVIDER } from "@toruslabs/openlogin-utils";
-// import { CHAIN_NAMESPACES, ChainNamespaceType, log } from "@web3auth/base";
-// import { defaultEvmDappModalConfig, defaultSolanaDappModalConfig } from "@web3auth/modal";
-// import { cloneDeep } from "lodash";
-// import merge from "lodash.merge";
-// import { defineComponent } from "vue";
-
-// import CustomUiContainer from "./customUi/customUiContainer.vue";
-// import ConfigurableExample from "./default/configurableModal.vue";
-// import WhitelabelExample from "./whitelabel/whitelabel.vue";
-
-// const DEFAULT_LOGIN_PROVIDERS = [
-// 	LOGIN_PROVIDER.GOOGLE,
-// 	LOGIN_PROVIDER.FACEBOOK,
-// 	LOGIN_PROVIDER.TWITTER,
-// 	LOGIN_PROVIDER.REDDIT,
-// 	LOGIN_PROVIDER.DISCORD,
-// 	LOGIN_PROVIDER.TWITCH,
-// 	LOGIN_PROVIDER.APPLE,
-// 	LOGIN_PROVIDER.LINE,
-// 	LOGIN_PROVIDER.GITHUB,
-// 	LOGIN_PROVIDER.KAKAO,
-// 	LOGIN_PROVIDER.LINKEDIN,
-// 	LOGIN_PROVIDER.WEIBO,
-// 	LOGIN_PROVIDER.WECHAT,
-// 	LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
-// 	LOGIN_PROVIDER.SMS_PASSWORDLESS,
-// ];
-// const defaultLoginProviders = () => {
-// 	return DEFAULT_LOGIN_PROVIDERS.map((provider) => {
-// 		return {
-// 			id: provider,
-// 			name: provider.substring(0, 1).toUpperCase() + provider.substring(1),
-// 			checked: true,
-// 		};
-// 	});
-// };
-
-// const defaultAdapters = (chainNamespace: ChainNamespaceType) => {
-// 	const adaptersConfig = chainNamespace === CHAIN_NAMESPACES.SOLANA ? defaultSolanaDappModalConfig : defaultEvmDappModalConfig;
-// 	return Object.keys(adaptersConfig.adapters).map((adapterName) => {
-// 		return {
-// 			id: adapterName,
-// 			name: adapterName.substring(0, 1).toUpperCase() + adapterName.substring(1),
-// 			checked: true,
-// 		};
-// 	});
-// };
-
-// const defaultFormConfig = {
-// 	chain: "ethereum",
-// 	authMode: "hosted",
-// 	selectedUiMode: "default",
-// 	openloginNetwork: "sapphire_mainnet",
-// 	plugins: {
-// 		torusWallet: false,
-// 		walletServices: true,
-// 	},
-// 	uiMode: {
-// 		default: {
-// 			login: [...defaultLoginProviders()],
-// 			adapter: defaultAdapters(CHAIN_NAMESPACES.EIP155),
-// 		},
-// 		customUi: {
-// 			type: "openlogin",
-// 		},
-// 		whitelabel: {
-// 			logoUrl: "https://images.web3auth.io/example-hello.svg",
-// 			theme: "light",
-// 			loginMethodsOrder: DEFAULT_LOGIN_PROVIDERS,
-// 			defaultLanguage: "en",
-// 		},
-// 	},
-// };
-
-// const configFromSessionStorage = () => {
-// 	const storedConfig = JSON.parse(sessionStorage.getItem("web3AuthExampleConfig")) ?? {};
-// 	return storedConfig;
-// };
-
-// const configFromURL = () => {
-// 	const params = new URLSearchParams(document.location.search);
-// 	const chainParams = params.get("chain");
-// 	const authModeParams = params.get("auth");
-// 	const whitelabelParams = params.get("whitelabel");
-
-// 	// prettier-ignore
-// 	return {
-// 		...(["ethereum", "solana", "binance", "polygon"].includes(chainParams) && { chain: chainParams }),
-// 		...(authModeParams === "custom" && { authMode: "ownAuth" }),
-// 		...(whitelabelParams === "yes" && { selectedUiMode: "whitelabel" }),
-// 	};
-// };
-
-// const initialFormConfig = {
-// 	...defaultFormConfig,
-// 	...configFromSessionStorage(),
-// 	...configFromURL(),
-// };
-
-// log.info(initialFormConfig);
-
-// export default defineComponent({
-// 	name: "HomeComponent",
-// 	components: {
-// 		CustomUiContainer,
-// 		ConfigurableExample,
-// 		WhitelabelExample,
-// 	},
-// 	data() {
-// 		return {
-// 			// storing config collected from user input.
-// 			form: { ...initialFormConfig },
-// 			// sending to other components
-// 			config: { ...cloneDeep(initialFormConfig) },
-// 			tempLoginMethodsOrder: initialFormConfig.uiMode?.whitelabel.loginMethodsOrder.join(",") ?? "",
-// 			languages: [
-// 				{
-// 					value: "en",
-// 					display: "English",
-// 				},
-// 				{
-// 					value: "de",
-// 					display: "German",
-// 				},
-// 				{
-// 					value: "ja",
-// 					display: "Japanese",
-// 				},
-// 				{
-// 					value: "ko",
-// 					display: "Korean",
-// 				},
-// 				{
-// 					value: "zh",
-// 					display: "Mandarin",
-// 				},
-// 				{
-// 					value: "es",
-// 					display: "Spanish",
-// 				},
-// 				{
-// 					value: "fr",
-// 					display: "French",
-// 				},
-// 				{
-// 					value: "pt",
-// 					display: "Portuguese",
-// 				},
-// 				{
-// 					value: "nl",
-// 					display: "Dutch",
-// 				},
-// 			],
-// 		};
-// 	},
-// 	watch: {
-// 		"form.authMode": function (val) {
-// 			const formValURLSearchParamMap = { ownAuth: "custom", hosted: "default" };
-// 			this.updateURL("auth", formValURLSearchParamMap[val]);
-// 		},
-// 		"form.chain": function (val) {
-// 			this.updateURL("chain", val);
-// 		},
-// 		"form.selectedUiMode": function (val) {
-// 			const formValURLSearchParamMap = { whitelabel: "yes", default: "no" };
-// 			this.updateURL("whitelabel", formValURLSearchParamMap[val]);
-// 		},
-// 	},
-// 	methods: {
-// 		saveConfig() {
-// 			this.form.uiMode.whitelabel.loginMethodsOrder = this.tempLoginMethodsOrder.split(",") as typeof DEFAULT_LOGIN_PROVIDERS;
-// 			sessionStorage.setItem("web3AuthExampleConfig", JSON.stringify(this.form || {}));
-// 			this.config = merge({}, this.form);
-// 			log.info("config saved", this.config);
-// 			// // temp hack to hide fb, todo: fix later
-// 			// this.config.uiMode.default.login.push({
-// 			//   id: "facebook",
-// 			//   name: "Facebook",
-// 			//   checked: false,
-// 			// });
-// 		},
-// 		onChainSelect(e) {
-// 			log.info("e", e.target.value);
-// 			this.form.uiMode.default.adapter =
-// 				e.target.value === "solana" ? defaultAdapters(CHAIN_NAMESPACES.SOLANA) : defaultAdapters(CHAIN_NAMESPACES.EIP155);
-// 		},
-// 		setDefaultLoginMethodsOrder() {
-// 			this.tempLoginMethodsOrder = DEFAULT_LOGIN_PROVIDERS.join(",");
-// 		},
-// 		updateURL(searchParamKey, searchParamValue) {
-// 			const url = new URL(window.location.href);
-// 			url.searchParams.set(searchParamKey, searchParamValue);
-// 			window.history.replaceState(null, null, url.toString());
-// 		},
-// 	},
-// });
-</script>
-
-<style scoped>
-html,
-body {
-	margin: 0;
-	height: 100%;
-}
-
-#app {
-	height: 100%;
-}
-
-.container {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: stretch;
-	height: 100%;
-}
-
-.sidebar {
-	flex-grow: 1;
-	flex-basis: 25rem;
-	border-right: 1px solid #ebecf0;
-	background-color: #f4f5f7;
-	padding: 20px;
-	padding-bottom: 60px;
-}
-
-.content {
-	flex-basis: 0;
-	flex-grow: 999;
-	min-width: 30%;
-	padding: 20px;
-}
-
-.flex-vertical-center {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin: 20px;
-}
-
-.form-label {
-	flex-basis: 2rem;
-	text-align: right;
-	margin-right: 10px;
-	font-weight: 800;
-}
-
-.form-control {
-	flex-basis: 60%;
-	text-align: left;
-}
-
-.dropdown {
-	width: 100%;
-	font-size: 16px;
-	padding: 6px 12px;
-	border: 1px solid #ced4da;
-	border-radius: 0.25rem;
-	box-sizing: border-box;
-}
-
-.radio-group {
-	flex-basis: 70%;
-	flex-grow: 1;
-}
-
-.radio-button {
-	display: inline-block;
-	margin-right: 10px;
-}
-
-.radio-button:last-child {
-	margin-right: 0;
-}
-
-.btn-group {
-	text-align: center;
-	position: fixed;
-	bottom: 0;
-}
-
-.btn {
-	padding: 9px 16px;
-	max-height: 40px;
-	border-radius: 6px;
-	font-size: 16px;
-	text-align: center;
-	font-weight: 500;
-	cursor: pointer;
-	min-width: 70%;
-	margin: 30px 0 10px;
-	height: 40px;
-	color: #0364ff;
-	background-color: #fff;
-	border: 3px solid #0364ff;
-	box-sizing: border-box;
-	border-radius: 6px;
-}
-
-.submit-btn {
-	width: 400px;
-}
-
-.btn:hover {
-	background-color: #f5f7fc;
-	border-color: #005cbf;
-}
-
-.rpcBtn {
-	padding: 9px 16px;
-	max-height: 80px;
-	max-width: 80px;
-	border-radius: 6px;
-	font-size: 16px;
-	text-align: center;
-	font-weight: 500;
-	cursor: pointer;
-	min-width: 60%;
-	margin-top: 10px;
-	height: 40px;
-	color: #0364ff;
-	background-color: #fff;
-	border: 1px solid #0364ff;
-	box-sizing: border-box;
-	border-radius: 6px;
-}
-
-.rpcBtn:hover {
-	background-color: #f5f7fc;
-	border-color: #005cbf;
-}
-
-.btn:focus {
-	box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 50%);
-}
-
-.chain {
-	margin-bottom: 20px;
-}
-
-.text {
-	width: 100%;
-	font-size: 16px;
-	padding: 6px 12px;
-	border: 1px solid #ced4da;
-	border-radius: 0.25rem;
-	box-sizing: border-box;
-}
-
-.list-style-none {
-	list-style: none;
-}
-
-.order-container {
-	text-align: left;
-}
-
-.order-container .form-label {
-	text-align: left;
-	display: flex;
-	width: 100%;
-	padding: 0;
-}
-
-.order-container .form-label a {
-	margin-left: auto;
-	cursor: pointer;
-	font-size: 12px;
-	color: #0364ff;
-	text-align: right;
-}
-
-.order-list {
-	width: 100%;
-}
-</style>
\ No newline at end of file