From 95fba50de1c646fe0e4d38086d259e60294ce487 Mon Sep 17 00:00:00 2001 From: Ganesh Suresh Patra Date: Wed, 26 Nov 2025 13:08:10 +0530 Subject: [PATCH 01/26] feat: added connect sign ui bottom sheet and created circular loader --- demo/vue-app-new/package-lock.json | 65 +++++++---- .../ui/components/BottomSheet/BottomSheet.tsx | 43 ++++---- .../BottomSheet/BottomSheet.type.ts | 2 + .../CircularLoader/CircularLoader.tsx | 103 ++++++++++++++++++ .../CircularLoader/CircularLoader.type.ts | 20 ++++ .../src/ui/components/CircularLoader/index.ts | 2 + .../ConnectWalletChainNamespaceSelect.tsx | 6 +- .../modal/src/ui/components/Root/Root.tsx | 36 ++++++ 8 files changed, 236 insertions(+), 41 deletions(-) create mode 100644 packages/modal/src/ui/components/CircularLoader/CircularLoader.tsx create mode 100644 packages/modal/src/ui/components/CircularLoader/CircularLoader.type.ts create mode 100644 packages/modal/src/ui/components/CircularLoader/index.ts diff --git a/demo/vue-app-new/package-lock.json b/demo/vue-app-new/package-lock.json index 0c1004386..4d9be1f71 100644 --- a/demo/vue-app-new/package-lock.json +++ b/demo/vue-app-new/package-lock.json @@ -49,13 +49,13 @@ }, "../../packages/modal": { "name": "@web3auth/modal", - "version": "10.7.0", + "version": "10.8.0", "dependencies": { "@hcaptcha/react-hcaptcha": "^1.14.0", "@toruslabs/base-controllers": "^8.9.0", "@toruslabs/http-helpers": "^8.1.1", "@web3auth/auth": "^10.7.0", - "@web3auth/no-modal": "^10.7.0", + "@web3auth/no-modal": "^10.8.0", "bowser": "^2.12.1", "classnames": "^2.5.1", "clsx": "^2.1.1", @@ -129,7 +129,7 @@ }, "../../packages/no-modal": { "name": "@web3auth/no-modal", - "version": "10.7.0", + "version": "10.8.0", "license": "ISC", "dependencies": { "@ethereumjs/util": "^10.1.0", @@ -264,6 +264,7 @@ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=6.9.0" } @@ -2227,6 +2228,7 @@ "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.1.0.tgz", "integrity": "sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw==", "license": "MIT", + "peer": true, "dependencies": { "node-fetch": "^2.7.0" } @@ -2378,6 +2380,7 @@ "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.2.1.tgz", "integrity": "sha512-rONPWMC7PeExE077uLE4oqWrZ1IvAfz3oH9LibVAcVCopJiA9R62uavnbEzdkVmJYI6M6Zgkbeb07+tWjlq2XA==", "license": "MIT", + "peer": true, "engines": { "node": "^14.21.3 || >=16" }, @@ -2819,6 +2822,7 @@ "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", "license": "MIT", + "peer": true, "engines": { "node": ">=10.0.0" }, @@ -3185,6 +3189,7 @@ "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", "license": "MIT", + "peer": true, "engines": { "node": ">=10.0.0" }, @@ -3494,6 +3499,7 @@ "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", "license": "MIT", + "peer": true, "engines": { "node": ">=10.0.0" }, @@ -3922,6 +3928,7 @@ "resolved": "https://registry.npmjs.org/@solana/buffer-layout/-/buffer-layout-4.0.1.tgz", "integrity": "sha512-E1ImOIAD1tBZFRdjeM4/pzTiTApC0AOBGwyAMS4fwIodCWArzJ3DWdoh8cKxeFM2fElkxBh2Aqts1BPC373rHA==", "license": "MIT", + "peer": true, "dependencies": { "buffer": "~6.0.3" }, @@ -3934,6 +3941,7 @@ "resolved": "https://registry.npmjs.org/@solana/buffer-layout-utils/-/buffer-layout-utils-0.2.0.tgz", "integrity": "sha512-szG4sxgJGktbuZYDg2FfNmkMi0DYQoVjN2h7ta1W1hPrwzarcFLBq9UpX1UjNXsNpT9dn+chgprtWGioUAr4/g==", "license": "Apache-2.0", + "peer": true, "dependencies": { "@solana/buffer-layout": "^4.0.0", "@solana/web3.js": "^1.32.0", @@ -4592,6 +4600,7 @@ "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-1.98.4.tgz", "integrity": "sha512-vv9lfnvjUsRiq//+j5pBdXig0IQdtzA0BRZ3bXEP4KaIyF1CcaydWqgyzQgfZMNIsWNWmG+AUHwPy4AHOD6gpw==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.25.0", "@noble/curves": "^1.4.2", @@ -5338,6 +5347,7 @@ "integrity": "sha512-tK3GPFWbirvNgsNKto+UmB/cRtn6TZfyw0D6IKrW55n6Vbs7KJoZtI//kpTKzE/DUmmnAFD8/Ca46s7Obs92/w==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.46.4", "@typescript-eslint/types": "8.46.4", @@ -6152,6 +6162,7 @@ "resolved": "https://registry.npmjs.org/@wagmi/core/-/core-2.22.1.tgz", "integrity": "sha512-cG/xwQWsBEcKgRTkQVhH29cbpbs/TdcUJVFXCyri3ZknxhMyGv0YEjTcrNpRgt2SaswL1KrvslSNYKKo+5YEAg==", "license": "MIT", + "peer": true, "dependencies": { "eventemitter3": "5.0.1", "mipd": "0.0.7", @@ -6750,6 +6761,7 @@ "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", "license": "MIT", + "peer": true, "engines": { "node": ">=10.0.0" }, @@ -6968,6 +6980,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -7265,6 +7278,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "browserslist": "^4.27.0", "caniuse-lite": "^1.0.30001754", @@ -7494,6 +7508,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -7556,6 +7571,7 @@ "integrity": "sha512-WDtdLmJvAuNNPzByAYpRo2rF1Mmradw6gvWsQKf63476DDXmomT9zUiGypLcG4ibIM67vhAj8jJRdbmEws2Aqw==", "hasInstallScript": true, "license": "MIT", + "peer": true, "dependencies": { "node-gyp-build": "^4.3.0" }, @@ -7881,7 +7897,6 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-3.1.2.tgz", "integrity": "sha512-UNqkvCDXstVck3kdowtOTWROIJQwafjOfXSmddoDrXo4cewMKmusCeF22Q24zvjR8nwWib/3S/dfyzPItPEiJg==", "license": "MIT", - "peer": true, "dependencies": { "color-name": "^2.0.0" }, @@ -7894,7 +7909,6 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.1.0.tgz", "integrity": "sha512-1bPaDNFm0axzE4MEAzKPuqKWeRaT43U/hyxKPBdqTfmPF+d6n7FSoTFxLVULUJOmiLp01KjhIPPH+HrXZJN4Rg==", "license": "MIT", - "peer": true, "engines": { "node": ">=12.20" } @@ -7904,7 +7918,6 @@ "resolved": "https://registry.npmjs.org/color-string/-/color-string-2.1.2.tgz", "integrity": "sha512-RxmjYxbWemV9gKu4zPgiZagUxbH3RQpEIO77XoSSX0ivgABDZ+h8Zuash/EMFLTI4N9QgFPOJ6JQpPZKFxa+dA==", "license": "MIT", - "peer": true, "dependencies": { "color-name": "^2.0.0" }, @@ -8308,6 +8321,7 @@ "resolved": "https://registry.npmjs.org/eciesjs/-/eciesjs-0.4.16.tgz", "integrity": "sha512-dS5cbA9rA2VR4Ybuvhg6jvdmp46ubLn3E+px8cG/35aEDNclrqoCjg6mt0HYZ/M+OoESS3jSkCrqk1kWAEhWAw==", "license": "MIT", + "peer": true, "dependencies": { "@ecies/ciphers": "^0.2.4", "@noble/ciphers": "^1.3.0", @@ -8721,6 +8735,7 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -8797,6 +8812,7 @@ "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", "dev": true, "license": "MIT", + "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -8923,6 +8939,7 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -9081,6 +9098,7 @@ "integrity": "sha512-SbR9ZBUFKgvWAbq3RrdCtWaW0IKm6wwUiApxf3BVTNfqUIo4IQQmreMg2iHFJJ6C/0wss3LXURBJ1OwS/MhFcQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "natural-compare": "^1.4.0", @@ -9518,7 +9536,8 @@ "version": "6.4.9", "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.9.tgz", "integrity": "sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/eventemitter3": { "version": "4.0.7", @@ -10844,6 +10863,7 @@ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", "license": "MIT", + "peer": true, "bin": { "jiti": "bin/jiti.js" } @@ -10958,7 +10978,6 @@ "integrity": "sha512-uuPNLJkKN8NXAlZlQ6kmUF9qO+T6Kyd7oV4+/7yy8Jz6+MZNyhPq8EdLpdfnPVzUC8qSf1b4j1azKaGnFsjmsw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "acorn": "^8.5.0", "eslint-visitor-keys": "^3.0.0", @@ -10978,7 +10997,6 @@ "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -10992,7 +11010,6 @@ "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "acorn": "^8.9.0", "acorn-jsx": "^5.3.2", @@ -11715,7 +11732,6 @@ ], "license": "MIT", "optional": true, - "peer": true, "dependencies": { "@adraffy/ens-normalize": "^1.11.0", "@noble/ciphers": "^1.3.0", @@ -11740,8 +11756,7 @@ "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.11.1.tgz", "integrity": "sha512-nhCBV3quEgesuf7c7KYfperqSS14T8bYuvJ8PcLJp6znkZpFc0AuW4qBtr8eKVyPPe/8RSr7sglCWPU5eaxwKQ==", "license": "MIT", - "optional": true, - "peer": true + "optional": true }, "node_modules/ox/node_modules/@noble/ciphers": { "version": "1.3.0", @@ -11749,7 +11764,6 @@ "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==", "license": "MIT", "optional": true, - "peer": true, "engines": { "node": "^14.21.3 || >=16" }, @@ -11762,8 +11776,7 @@ "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==", "license": "MIT", - "optional": true, - "peer": true + "optional": true }, "node_modules/p-limit": { "version": "3.1.0", @@ -12163,6 +12176,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -12326,6 +12340,7 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -12508,6 +12523,7 @@ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", "license": "MIT", + "peer": true, "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", @@ -13095,6 +13111,7 @@ "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz", "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==", "license": "MIT", + "peer": true, "dependencies": { "@socket.io/component-emitter": "~3.1.0", "debug": "~4.3.2", @@ -13537,6 +13554,7 @@ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz", "integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==", "license": "MIT", + "peer": true, "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -13645,6 +13663,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -13863,6 +13882,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -13957,6 +13977,7 @@ "dev": true, "hasInstallScript": true, "license": "MIT", + "peer": true, "dependencies": { "napi-postinstall": "^0.3.0" }, @@ -14164,6 +14185,7 @@ "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==", "hasInstallScript": true, "license": "MIT", + "peer": true, "dependencies": { "node-gyp-build": "^4.3.0" }, @@ -14213,6 +14235,7 @@ "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.13.2.tgz", "integrity": "sha512-Qik0o+DSy741TmkqmRfjq+0xpZBXi/Y6+fXZLn0xNF1z/waFMbE3rkivv5Zcf9RrMUp6zswf2J7sbh2KBlba5A==", "license": "MIT", + "peer": true, "dependencies": { "derive-valtio": "0.1.0", "proxy-compare": "2.6.0", @@ -14245,6 +14268,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "@noble/curves": "1.9.1", "@noble/hashes": "1.8.0", @@ -14381,6 +14405,7 @@ "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -14474,6 +14499,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -14493,6 +14519,7 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.24.tgz", "integrity": "sha512-uTHDOpVQTMjcGgrqFPSb8iO2m1DUvo+WbGqoXQz8Y1CeBYQ0FXf2z1gLRaBtHjlRz7zZUBHxjVB5VTLzYkvftg==", "license": "MIT", + "peer": true, "dependencies": { "@vue/compiler-dom": "3.5.24", "@vue/compiler-sfc": "3.5.24", @@ -14515,6 +14542,7 @@ "integrity": "sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "debug": "^4.4.0", "eslint-scope": "^8.2.0", @@ -14827,6 +14855,7 @@ "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=8.3.0" }, @@ -14882,7 +14911,6 @@ "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", "devOptional": true, "license": "ISC", - "peer": true, "bin": { "yaml": "bin.mjs" }, @@ -14896,7 +14924,6 @@ "integrity": "sha512-E/+VitOorXSLiAqtTd7Yqax0/pAS3xaYMP+AUUJGOK1OZG3rhcj9fcJOM5HJ2VrP1FrStVCWr1muTfQCdj4tAA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "eslint-visitor-keys": "^3.0.0", "yaml": "^2.0.0" @@ -14914,7 +14941,6 @@ "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true, "license": "Apache-2.0", - "peer": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -15077,6 +15103,7 @@ "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz", "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==", "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx b/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx index f001d6c0e..ab37aa60a 100644 --- a/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx +++ b/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx @@ -4,7 +4,7 @@ import { BottomSheetProps } from "./BottomSheet.type"; * BottomSheet component * @returns BottomSheet component */ -function BottomSheet({ isShown, onClose, children, uiConfig }: BottomSheetProps) { +function BottomSheet({ isShown, onClose, children, uiConfig, sheetClassName, showCloseButton = true }: BottomSheetProps) { const { borderRadiusType = "large" } = uiConfig; return ( <> @@ -30,27 +30,30 @@ function BottomSheet({ isShown, onClose, children, uiConfig }: BottomSheetProps) "w3a--rounded-[30px]": borderRadiusType === "large", "w3a--rounded-2xl": borderRadiusType === "medium", "w3a--rounded-none": borderRadiusType === "small", - } + }, + sheetClassName )} > -
- - - -
+ {showCloseButton && ( +
+ + + +
+ )} {children} diff --git a/packages/modal/src/ui/components/BottomSheet/BottomSheet.type.ts b/packages/modal/src/ui/components/BottomSheet/BottomSheet.type.ts index a60d4a8d0..7a3c38ed1 100644 --- a/packages/modal/src/ui/components/BottomSheet/BottomSheet.type.ts +++ b/packages/modal/src/ui/components/BottomSheet/BottomSheet.type.ts @@ -5,4 +5,6 @@ export interface BottomSheetProps { uiConfig: UIConfig; onClose: () => void; children: React.ReactNode; + sheetClassName?: string; + showCloseButton?: boolean; } diff --git a/packages/modal/src/ui/components/CircularLoader/CircularLoader.tsx b/packages/modal/src/ui/components/CircularLoader/CircularLoader.tsx new file mode 100644 index 000000000..40a2729aa --- /dev/null +++ b/packages/modal/src/ui/components/CircularLoader/CircularLoader.tsx @@ -0,0 +1,103 @@ +import { cn } from "../../utils"; +import type { CircularLoaderProps } from "./CircularLoader.type"; + +function toSize(value?: number | string, fallback = 160): number | string { + return value ?? fallback; +} + +const CircularLoader = (props: CircularLoaderProps) => { + const { + width, + height, + thickness = 12, + className = "", + children, + showChildren = true, + trackColor = "rgba(226, 232, 240, 1)", // Tailwind slate-200 equivalent + gradient, + arcSizeDeg = 36, + arcColors, + } = props; + + const w = toSize(width, 160); + const h = toSize(height, 160); + const ringMask = `radial-gradient(farthest-side, transparent calc(100% - ${thickness}px), #000 calc(100% - ${thickness}px))`; + + function hexToRgba(hex: string, alpha: number) { + const normalized = hex.replace("#", ""); + const full = + normalized.length === 3 + ? normalized + .split("") + .map((c) => c + c) + .join("") + : normalized; + const r = parseInt(full.substring(0, 2), 16); + const g = parseInt(full.substring(2, 4), 16); + const b = parseInt(full.substring(4, 6), 16); + return `rgba(${r}, ${g}, ${b}, ${alpha})`; + } + + function withAlpha(color: string, alpha: number) { + if (!color) return color; + const c = color.trim().toLowerCase(); + if (c.startsWith("#")) return hexToRgba(c, alpha); + if (c.startsWith("rgba(")) return color; + if (c.startsWith("rgb(")) { + const nums = c.slice(4, -1); + return `rgba(${nums}, ${alpha})`; + } + // Fallback: return the same color (alpha may be ignored by browser) + return color; + } + + const arcColorGradient = + gradient || + (arcColors + ? `radial-gradient(210.91% 85.29% at 14.56% 18.67%, ${withAlpha(arcColors[0], 0)} 9.5%, ${arcColors[1]} 41.82%, ${arcColors[1]} 64.83%, ${withAlpha( + arcColors[0], + 0.44 + )} 100%)` + : "radial-gradient(210.91% 85.29% at 14.56% 18.67%, rgba(255, 98, 58, 0.00) 9.5%, #FF623A 41.82%, #FF623A 64.83%, rgba(255, 98, 58, 0.44) 100%)"); + const wedgeMask = `conic-gradient(#000 0deg ${arcSizeDeg}deg, transparent ${arcSizeDeg}deg 360deg)`; + + return ( +
+
+ +
+
+
+ + {showChildren && children ?
{children}
: null} +
+ ); +}; + +export default CircularLoader; diff --git a/packages/modal/src/ui/components/CircularLoader/CircularLoader.type.ts b/packages/modal/src/ui/components/CircularLoader/CircularLoader.type.ts new file mode 100644 index 000000000..5237f525a --- /dev/null +++ b/packages/modal/src/ui/components/CircularLoader/CircularLoader.type.ts @@ -0,0 +1,20 @@ +import type { ReactNode } from "react"; + +export interface CircularLoaderProps { + width?: number | string; + height?: number | string; + thickness?: number; + showChildren?: boolean; + children?: ReactNode; + className?: string; + trackColor?: string; + /** Size of the colored arc in degrees (0-360). Default: 40 */ + arcSizeDeg?: number; + /** Two colors for the orange arc gradient [start, end]. */ + arcColors?: [string, string]; + /** + * CSS color stops for conic-gradient. Example: + * "conic-gradient(#f97316, #fdba74 320deg, transparent 320deg)" + */ + gradient?: string; +} diff --git a/packages/modal/src/ui/components/CircularLoader/index.ts b/packages/modal/src/ui/components/CircularLoader/index.ts new file mode 100644 index 000000000..1a427f4ec --- /dev/null +++ b/packages/modal/src/ui/components/CircularLoader/index.ts @@ -0,0 +1,2 @@ +export { default } from "./CircularLoader"; +export type { CircularLoaderProps } from "./CircularLoader.type"; diff --git a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.tsx b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.tsx index 7869d1cfd..da3202d58 100644 --- a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.tsx +++ b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.tsx @@ -40,7 +40,7 @@ const ConnectWalletChainNamespaceSelect = (props: ConnectWalletChainNamespaceSel
{/* Description */} -

+

{t("modal.external.select-chain-description", { wallet: wallet.displayName })}

@@ -55,7 +55,9 @@ const ConnectWalletChainNamespaceSelect = (props: ConnectWalletChainNamespaceSel >
-

{displayName}

+

+ {displayName} +

)} + + { + setBodyState({ ...bodyState, installLinks: { show: false, wallet: null } })} + sheetClassName="!w3a--px-8 !w3a--py-4" + showCloseButton={false} + > +
+

+ Verify on MetaMask +

+
+ + + +
+

+ We’ve sent a request to your wallet. Verify on your wallet to confirm that you own this wallet. +

+ +
+ + }
From 82e8a9765b9b80542b5f5ee882fd37745c2a390d Mon Sep 17 00:00:00 2001 From: Ganesh Suresh Patra Date: Wed, 26 Nov 2025 16:26:00 +0530 Subject: [PATCH 02/26] feat: Updated IWeb3AuthCoreOptions with initialAuthenticationMode property. Also added authorized and authorizing for connector events. --- packages/no-modal/src/base/connector/constants.ts | 2 ++ packages/no-modal/src/base/core/IWeb3Auth.ts | 8 ++++++++ 2 files changed, 10 insertions(+) diff --git a/packages/no-modal/src/base/connector/constants.ts b/packages/no-modal/src/base/connector/constants.ts index 7b41b50d3..9666fcff0 100644 --- a/packages/no-modal/src/base/connector/constants.ts +++ b/packages/no-modal/src/base/connector/constants.ts @@ -15,6 +15,8 @@ export const CONNECTOR_EVENTS = { CONNECTORS_UPDATED: "connectors_updated", MFA_ENABLED: "mfa_enabled", REHYDRATION_ERROR: "rehydration_error", + AUTHORIZED: "authorized", + AUTHORIZING: "authorizing", } as const; export const CONNECTOR_CATEGORY = { diff --git a/packages/no-modal/src/base/core/IWeb3Auth.ts b/packages/no-modal/src/base/core/IWeb3Auth.ts index a496fb2f1..394c272a5 100644 --- a/packages/no-modal/src/base/core/IWeb3Auth.ts +++ b/packages/no-modal/src/base/core/IWeb3Auth.ts @@ -62,6 +62,8 @@ export interface UIConfig extends WhiteLabelData { uxMode?: UX_MODE_TYPE; } +export type InitialAuthenticationModeType = "connect-only" | "connect-and-sign"; + export interface IWeb3AuthCoreOptions { /** * Client id for web3auth. @@ -178,6 +180,12 @@ export interface IWeb3AuthCoreOptions { * MFA level for the auth connector */ mfaLevel?: MfaLevelType; + + /** + * Initial authentication mode for the auth connector. + * @defaultValue "connect-only" + */ + initialAuthenticationMode?: InitialAuthenticationModeType; } export type LoginParamMap = { From 344746d684272f8c780d708a6dd521f2adccbe8e Mon Sep 17 00:00:00 2001 From: Ganesh Suresh Patra Date: Wed, 26 Nov 2025 18:20:31 +0530 Subject: [PATCH 03/26] feat: updated event emits --- packages/no-modal/src/base/connector/constants.ts | 4 ++-- packages/no-modal/src/base/connector/interfaces.ts | 2 ++ .../no-modal/src/connectors/auth-connector/authConnector.ts | 4 ++++ packages/no-modal/src/noModal.ts | 6 +++++- 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/no-modal/src/base/connector/constants.ts b/packages/no-modal/src/base/connector/constants.ts index 9666fcff0..c5a873aac 100644 --- a/packages/no-modal/src/base/connector/constants.ts +++ b/packages/no-modal/src/base/connector/constants.ts @@ -6,6 +6,8 @@ export const CONNECTOR_STATUS = { DISCONNECTING: "disconnecting", DISCONNECTED: "disconnected", ERRORED: "errored", + AUTHORIZED: "authorized", + AUTHORIZING: "authorizing", } as const; export const CONNECTOR_EVENTS = { @@ -15,8 +17,6 @@ export const CONNECTOR_EVENTS = { CONNECTORS_UPDATED: "connectors_updated", MFA_ENABLED: "mfa_enabled", REHYDRATION_ERROR: "rehydration_error", - AUTHORIZED: "authorized", - AUTHORIZING: "authorizing", } as const; export const CONNECTOR_CATEGORY = { diff --git a/packages/no-modal/src/base/connector/interfaces.ts b/packages/no-modal/src/base/connector/interfaces.ts index d2ca30f65..b18be22d0 100644 --- a/packages/no-modal/src/base/connector/interfaces.ts +++ b/packages/no-modal/src/base/connector/interfaces.ts @@ -118,6 +118,8 @@ export type ConnectorEvents = { [CONNECTOR_EVENTS.CONNECTED]: (data: CONNECTED_EVENT_DATA) => void; [CONNECTOR_EVENTS.DISCONNECTED]: () => void; [CONNECTOR_EVENTS.CONNECTING]: (data: { connector: string }) => void; + [CONNECTOR_EVENTS.AUTHORIZING]: (data: { connector: string }) => void; + [CONNECTOR_EVENTS.AUTHORIZED]: (data: { connector: string }) => void; [CONNECTOR_EVENTS.ERRORED]: (error: Web3AuthError) => void; [CONNECTOR_EVENTS.REHYDRATION_ERROR]: (error: Web3AuthError) => void; [CONNECTOR_EVENTS.CONNECTOR_DATA_UPDATED]: (data: IConnectorDataEvent) => void; diff --git a/packages/no-modal/src/connectors/auth-connector/authConnector.ts b/packages/no-modal/src/connectors/auth-connector/authConnector.ts index 1b30c2d33..a7be117c9 100644 --- a/packages/no-modal/src/connectors/auth-connector/authConnector.ts +++ b/packages/no-modal/src/connectors/auth-connector/authConnector.ts @@ -401,7 +401,11 @@ class AuthConnector extends BaseConnector { // No need to get the identity token for auth connector as it is already handled let identityTokenInfo: IdentityTokenInfo | undefined; if (params.getIdentityToken) { + this.status = CONNECTOR_STATUS.AUTHORIZING; + this.emit(CONNECTOR_EVENTS.AUTHORIZING, { connector: WALLET_CONNECTORS.AUTH }); identityTokenInfo = await this.getIdentityToken(); + this.status = CONNECTOR_STATUS.AUTHORIZED; + this.emit(CONNECTOR_EVENTS.AUTHORIZED, { connector: WALLET_CONNECTORS.AUTH }); } this.status = CONNECTOR_STATUS.CONNECTED; this.emit(CONNECTOR_EVENTS.CONNECTED, { diff --git a/packages/no-modal/src/noModal.ts b/packages/no-modal/src/noModal.ts index aa7bff1bb..3e75ddb14 100644 --- a/packages/no-modal/src/noModal.ts +++ b/packages/no-modal/src/noModal.ts @@ -302,7 +302,11 @@ export class Web3AuthNoModal extends SafeEventEmitter imp throw WalletInitializationError.notFound(`Please add wallet connector for ${connectorName} wallet, before connecting`); const initialChain = this.getInitialChainIdForConnector(connector); - const finalLoginParams = { ...loginParams, chainId: initialChain.chainId }; + const finalLoginParams = { + ...loginParams, + chainId: initialChain.chainId, + getIdentityToken: this.coreOptions.initialAuthenticationMode === "connect-and-sign", + }; // track connection started event const startTime = Date.now(); From b15697e3eb46cb97cbac1505900f1a46291e24d1 Mon Sep 17 00:00:00 2001 From: Ganesh Suresh Patra Date: Thu, 27 Nov 2025 13:33:51 +0530 Subject: [PATCH 04/26] feat: initial setup for connect sign on injected evm connectors --- demo/vue-app-new/src/MainView.vue | 1 + packages/modal/src/modalManager.ts | 1 + .../modal/src/ui/components/Loader/Loader.tsx | 43 +++++++++++++++++-- .../src/ui/components/Loader/Loader.type.ts | 1 + .../modal/src/ui/components/Root/Root.tsx | 38 +--------------- .../modal/src/ui/components/Root/Root.type.ts | 1 + .../modal/src/ui/components/Widget/Widget.tsx | 12 ++++++ .../src/ui/components/Widget/Widget.type.ts | 3 +- packages/modal/src/ui/interfaces.ts | 4 ++ packages/modal/src/ui/loginModal.tsx | 8 ++++ .../auth-connector/authConnector.ts | 15 ++++--- .../base-evm-connector/baseEvmConnector.ts | 4 +- .../injectedEvmConnector.ts | 13 ++++-- packages/no-modal/src/noModal.ts | 18 +++++++- 14 files changed, 110 insertions(+), 52 deletions(-) diff --git a/demo/vue-app-new/src/MainView.vue b/demo/vue-app-new/src/MainView.vue index 67de8d03b..4ebc715c4 100644 --- a/demo/vue-app-new/src/MainView.vue +++ b/demo/vue-app-new/src/MainView.vue @@ -139,6 +139,7 @@ const options = computed((): Web3AuthOptions => { connectors: modalParams.value, hideWalletDiscovery: !formData.showWalletDiscovery, }, + initialAuthenticationMode: "connect-and-sign", }; }); diff --git a/packages/modal/src/modalManager.ts b/packages/modal/src/modalManager.ts index 77ffcd022..fafa832be 100644 --- a/packages/modal/src/modalManager.ts +++ b/packages/modal/src/modalManager.ts @@ -116,6 +116,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal { chainNamespaces: this.getChainNamespaces(), walletRegistry: filteredWalletRegistry, analytics: this.analytics, + initialAuthenticationMode: this.options.initialAuthenticationMode, }, { onInitExternalWallets: this.onInitExternalWallets, diff --git a/packages/modal/src/ui/components/Loader/Loader.tsx b/packages/modal/src/ui/components/Loader/Loader.tsx index 500d94325..38cec27c8 100644 --- a/packages/modal/src/ui/components/Loader/Loader.tsx +++ b/packages/modal/src/ui/components/Loader/Loader.tsx @@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"; import { MODAL_STATUS } from "../../interfaces"; import i18n from "../../localeImport"; +import CircularLoader from "../CircularLoader"; import Image from "../Image"; import PulseLoader from "../PulseLoader"; import { ConnectedStatusType, ConnectingStatusType, ErroredStatusType, LoaderProps } from "./Loader.type"; @@ -88,13 +89,42 @@ function ErroredStatus(props: ErroredStatusType) { ); } +function AuthorizingStatus() { + return ( +
+

+ Verify on MetaMask +

+
+ + + +
+

+ We’ve sent a request to your wallet. Verify on your wallet to confirm that you own this wallet. +

+ +
+ ); +} + /** * Loader component * @param props - LoaderProps * @returns Loader component */ function Loader(props: LoaderProps) { - const { connector, connectorName, modalStatus, onClose, appLogo, message } = props; + const { connector, connectorName, modalStatus, onClose, appLogo, message, isConnectAndSignAuthenticationMode } = props; useEffect(() => { if (modalStatus === MODAL_STATUS.CONNECTED) { @@ -102,15 +132,22 @@ function Loader(props: LoaderProps) { onClose(); }, 1000); } - }, [modalStatus, onClose]); + if (isConnectAndSignAuthenticationMode && modalStatus === MODAL_STATUS.AUTHORIZED) { + setTimeout(() => { + onClose(); + }, 1000); + } + }, [modalStatus, onClose, isConnectAndSignAuthenticationMode]); return (
{modalStatus === MODAL_STATUS.CONNECTING && } - {modalStatus === MODAL_STATUS.CONNECTED && } + {(modalStatus === MODAL_STATUS.CONNECTED || modalStatus === MODAL_STATUS.AUTHORIZED) && } {modalStatus === MODAL_STATUS.ERRORED && } + + {modalStatus === MODAL_STATUS.AUTHORIZING && }
); } diff --git a/packages/modal/src/ui/components/Loader/Loader.type.ts b/packages/modal/src/ui/components/Loader/Loader.type.ts index d43cb36f1..f1c855bd3 100644 --- a/packages/modal/src/ui/components/Loader/Loader.type.ts +++ b/packages/modal/src/ui/components/Loader/Loader.type.ts @@ -7,6 +7,7 @@ export interface LoaderProps { connectorName: string; modalStatus: ModalStatusType; onClose: () => void; + isConnectAndSignAuthenticationMode: boolean; } export type ConnectingStatusType = Pick; diff --git a/packages/modal/src/ui/components/Root/Root.tsx b/packages/modal/src/ui/components/Root/Root.tsx index e35b46ca7..8d45a3beb 100644 --- a/packages/modal/src/ui/components/Root/Root.tsx +++ b/packages/modal/src/ui/components/Root/Root.tsx @@ -9,7 +9,6 @@ import { ExternalButton, mobileOs, MODAL_STATUS, TOAST_TYPE, ToastType } from ". import i18n from "../../localeImport"; import { cn, getBrowserExtensionUrl, getBrowserName, getIcons, getMobileInstallLink, getOsName } from "../../utils"; import BottomSheet from "../BottomSheet"; -import CircularLoader from "../CircularLoader"; import ConnectWallet from "../ConnectWallet"; import ConnectWalletChainNamespaceSelect from "../ConnectWallet/ConnectWalletChainNamespaceSelect"; import ConnectWalletHeader from "../ConnectWallet/ConnectWalletHeader"; @@ -43,6 +42,7 @@ function Root(props: RootProps) { preHandleExternalWalletClick, uiConfig, deviceDetails, + isConnectAndSignAuthenticationMode, } = props; const { @@ -441,6 +441,7 @@ function Root(props: RootProps) { modalStatus={modalState.status} onClose={onCloseLoader} appLogo={appLogo} + isConnectAndSignAuthenticationMode={isConnectAndSignAuthenticationMode} /> ) : ( <> @@ -564,41 +565,6 @@ function Root(props: RootProps) { )} - - { - setBodyState({ ...bodyState, installLinks: { show: false, wallet: null } })} - sheetClassName="!w3a--px-8 !w3a--py-4" - showCloseButton={false} - > -
-

- Verify on MetaMask -

-
- - - -
-

- We’ve sent a request to your wallet. Verify on your wallet to confirm that you own this wallet. -

- -
- - } diff --git a/packages/modal/src/ui/components/Root/Root.type.ts b/packages/modal/src/ui/components/Root/Root.type.ts index fcd969196..5fac72482 100644 --- a/packages/modal/src/ui/components/Root/Root.type.ts +++ b/packages/modal/src/ui/components/Root/Root.type.ts @@ -24,4 +24,5 @@ export interface RootProps { preHandleExternalWalletClick: (params: { connector: string; chainNamespace?: ChainNamespaceType }) => void; setModalState: (state: ModalState) => void; onCloseLoader: () => void; + isConnectAndSignAuthenticationMode: boolean; } diff --git a/packages/modal/src/ui/components/Widget/Widget.tsx b/packages/modal/src/ui/components/Widget/Widget.tsx index a9598bf33..56ab9e5c8 100644 --- a/packages/modal/src/ui/components/Widget/Widget.tsx +++ b/packages/modal/src/ui/components/Widget/Widget.tsx @@ -23,6 +23,7 @@ function Widget(props: WidgetProps) { walletRegistry, uiConfig, deviceDetails, + initialAuthenticationMode, } = props; const { widgetType } = uiConfig; @@ -55,6 +56,8 @@ function Widget(props: WidgetProps) { authBuildEnv: BUILD_ENV.PRODUCTION, }); + const isConnectAndSignAuthenticationMode = useMemo(() => initialAuthenticationMode === "connect-and-sign", [initialAuthenticationMode]); + useEffect(() => { setModalState((prev) => ({ ...prev, modalVisibility: visible })); }, [visible]); @@ -162,6 +165,13 @@ function Widget(props: WidgetProps) { externalWalletsVisibility: false, }); } + if (isConnectAndSignAuthenticationMode && modalState.status === MODAL_STATUS.AUTHORIZED) { + setModalState({ + ...modalState, + modalVisibility: false, + externalWalletsVisibility: false, + }); + } if (modalState.status === MODAL_STATUS.ERRORED) { setModalState({ ...modalState, @@ -223,6 +233,7 @@ function Widget(props: WidgetProps) { isSmsPasswordLessLoginVisible={isSmsPasswordLessLoginVisible} uiConfig={uiConfig} deviceDetails={deviceDetails} + isConnectAndSignAuthenticationMode={isConnectAndSignAuthenticationMode} /> )} @@ -255,6 +266,7 @@ function Widget(props: WidgetProps) { isSmsPasswordLessLoginVisible={isSmsPasswordLessLoginVisible} uiConfig={uiConfig} deviceDetails={deviceDetails} + isConnectAndSignAuthenticationMode={isConnectAndSignAuthenticationMode} /> )} diff --git a/packages/modal/src/ui/components/Widget/Widget.type.ts b/packages/modal/src/ui/components/Widget/Widget.type.ts index 5a57636fd..1fb4f1076 100644 --- a/packages/modal/src/ui/components/Widget/Widget.type.ts +++ b/packages/modal/src/ui/components/Widget/Widget.type.ts @@ -1,5 +1,5 @@ import { SafeEventEmitter } from "@web3auth/auth"; -import { ChainNamespaceType, WalletRegistry } from "@web3auth/no-modal"; +import { ChainNamespaceType, InitialAuthenticationModeType, WalletRegistry } from "@web3auth/no-modal"; import { browser, ExternalWalletEventType, os, platform, SocialLoginEventType, StateEmitterEvents, UIConfig } from "../../interfaces"; @@ -10,6 +10,7 @@ export interface WidgetProps { chainNamespaces: ChainNamespaceType[]; walletRegistry?: WalletRegistry; uiConfig: UIConfig; + initialAuthenticationMode: InitialAuthenticationModeType; deviceDetails: { platform: platform; browser: browser; os: os }; handleSocialLoginClick: (params: SocialLoginEventType) => void; handleExternalWalletClick: (params: ExternalWalletEventType) => void; diff --git a/packages/modal/src/ui/interfaces.ts b/packages/modal/src/ui/interfaces.ts index d1f4020e0..17afa7b59 100644 --- a/packages/modal/src/ui/interfaces.ts +++ b/packages/modal/src/ui/interfaces.ts @@ -13,6 +13,7 @@ import { type AuthLoginParams, type BaseConnectorConfig, type ChainNamespaceType, + InitialAuthenticationModeType, type LoginMethodConfig, type LoginModalConfig, type UIConfig as CoreUIConfig, @@ -76,6 +77,7 @@ export type ModalLoginParams = Pick< }; export interface LoginModalProps extends UIConfig { + initialAuthenticationMode: InitialAuthenticationModeType; chainNamespaces: ChainNamespaceType[]; walletRegistry: WalletRegistry; web3authClientId: string; @@ -109,6 +111,8 @@ export const MODAL_STATUS = { CONNECTED: "connected", CONNECTING: "connecting", ERRORED: "errored", + AUTHORIZING: "authorizing", + AUTHORIZED: "authorized", } as const; export type ModalStatusType = (typeof MODAL_STATUS)[keyof typeof MODAL_STATUS]; diff --git a/packages/modal/src/ui/loginModal.tsx b/packages/modal/src/ui/loginModal.tsx index 212f43b5e..43b09ad0a 100644 --- a/packages/modal/src/ui/loginModal.tsx +++ b/packages/modal/src/ui/loginModal.tsx @@ -98,6 +98,7 @@ export class LoginModal { if (!uiConfig.primaryButton) this.uiConfig.primaryButton = "socialLogin"; if (!uiConfig.defaultLanguage) this.uiConfig.defaultLanguage = getUserLanguage(uiConfig.defaultLanguage); if (!uiConfig.widgetType) this.uiConfig.widgetType = WIDGET_TYPE.MODAL; + if (!uiConfig.initialAuthenticationMode) this.uiConfig.initialAuthenticationMode = "connect-only"; if (uiConfig.widgetType === WIDGET_TYPE.EMBED && !uiConfig.targetId) { log.error("targetId is required for embed widget"); @@ -269,6 +270,7 @@ export class LoginModal { handleSocialLoginClick={this.handleSocialLoginClick} closeModal={this.closeModal} uiConfig={this.uiConfig} + initialAuthenticationMode={this.uiConfig.initialAuthenticationMode} /> @@ -458,5 +460,11 @@ export class LoginModal { listener.on(CONNECTOR_EVENTS.CONNECTOR_DATA_UPDATED, (connectorData: IConnectorDataEvent) => { this.handleConnectorData(connectorData); }); + listener.on(CONNECTOR_EVENTS.AUTHORIZING, () => { + this.setState({ status: MODAL_STATUS.AUTHORIZING }); + }); + listener.on(CONNECTOR_EVENTS.AUTHORIZED, () => { + this.setState({ status: MODAL_STATUS.AUTHORIZED }); + }); }; } diff --git a/packages/no-modal/src/connectors/auth-connector/authConnector.ts b/packages/no-modal/src/connectors/auth-connector/authConnector.ts index a7be117c9..dcb31ffdc 100644 --- a/packages/no-modal/src/connectors/auth-connector/authConnector.ts +++ b/packages/no-modal/src/connectors/auth-connector/authConnector.ts @@ -400,13 +400,6 @@ class AuthConnector extends BaseConnector { // if getIdentityToken is true, then get the identity token // No need to get the identity token for auth connector as it is already handled let identityTokenInfo: IdentityTokenInfo | undefined; - if (params.getIdentityToken) { - this.status = CONNECTOR_STATUS.AUTHORIZING; - this.emit(CONNECTOR_EVENTS.AUTHORIZING, { connector: WALLET_CONNECTORS.AUTH }); - identityTokenInfo = await this.getIdentityToken(); - this.status = CONNECTOR_STATUS.AUTHORIZED; - this.emit(CONNECTOR_EVENTS.AUTHORIZED, { connector: WALLET_CONNECTORS.AUTH }); - } this.status = CONNECTOR_STATUS.CONNECTED; this.emit(CONNECTOR_EVENTS.CONNECTED, { connector: WALLET_CONNECTORS.AUTH, @@ -414,6 +407,14 @@ class AuthConnector extends BaseConnector { provider: this.provider, identityTokenInfo, } as CONNECTED_EVENT_DATA); + + if (params.getIdentityToken) { + this.status = CONNECTOR_STATUS.AUTHORIZING; + this.emit(CONNECTOR_EVENTS.AUTHORIZING, { connector: WALLET_CONNECTORS.AUTH }); + identityTokenInfo = await this.getIdentityToken(); + this.status = CONNECTOR_STATUS.AUTHORIZED; + this.emit(CONNECTOR_EVENTS.AUTHORIZED, { connector: WALLET_CONNECTORS.AUTH }); + } // handle disconnect from ws embed this.wsEmbedInstance?.provider.on("accountsChanged", (accounts: unknown[] = []) => { if ((accounts as string[]).length === 0 && this.status === CONNECTOR_STATUS.CONNECTED) this.disconnect({ cleanup: false }); diff --git a/packages/no-modal/src/connectors/base-evm-connector/baseEvmConnector.ts b/packages/no-modal/src/connectors/base-evm-connector/baseEvmConnector.ts index 490fefd5b..ecdc0f8aa 100644 --- a/packages/no-modal/src/connectors/base-evm-connector/baseEvmConnector.ts +++ b/packages/no-modal/src/connectors/base-evm-connector/baseEvmConnector.ts @@ -7,6 +7,7 @@ import { clearToken, CONNECTOR_EVENTS, CONNECTOR_STATUS, + CONNECTOR_STATUS_TYPE, ConnectorInitOptions, getSavedToken, IdentityTokenInfo, @@ -19,7 +20,8 @@ export abstract class BaseEvmConnector extends BaseConnector { async init(_?: ConnectorInitOptions): Promise {} async getIdentityToken(): Promise { - if (!this.provider || this.status !== CONNECTOR_STATUS.CONNECTED) throw WalletLoginError.notConnectedError(); + if (!this.provider || !([CONNECTOR_STATUS.CONNECTED, CONNECTOR_STATUS.AUTHORIZING] as CONNECTOR_STATUS_TYPE[]).includes(this.status)) + throw WalletLoginError.notConnectedError(); if (!this.coreOptions) throw WalletInitializationError.invalidParams("Please initialize Web3Auth with valid options"); const accounts = await this.provider.request({ method: EVM_METHOD_TYPES.GET_ACCOUNTS }); diff --git a/packages/no-modal/src/connectors/injected-evm-connector/injectedEvmConnector.ts b/packages/no-modal/src/connectors/injected-evm-connector/injectedEvmConnector.ts index 59dc3d5db..2667ba8d2 100644 --- a/packages/no-modal/src/connectors/injected-evm-connector/injectedEvmConnector.ts +++ b/packages/no-modal/src/connectors/injected-evm-connector/injectedEvmConnector.ts @@ -110,15 +110,22 @@ class InjectedEvmConnector extends BaseEvmConnector { }; this.injectedProvider.on("accountsChanged", accountDisconnectHandler); let identityTokenInfo: IdentityTokenInfo | undefined; - if (getIdentityToken) { - identityTokenInfo = await this.getIdentityToken(); - } + this.emit(CONNECTOR_EVENTS.CONNECTED, { connector: this.name, reconnected: this.rehydrated, provider: this.injectedProvider, identityTokenInfo, } as CONNECTED_EVENT_DATA); + + if (getIdentityToken) { + this.status = CONNECTOR_STATUS.AUTHORIZING; + this.emit(CONNECTOR_EVENTS.AUTHORIZING, { connector: this.name }); + identityTokenInfo = await this.getIdentityToken(); + this.status = CONNECTOR_STATUS.AUTHORIZED; + this.emit(CONNECTOR_EVENTS.AUTHORIZED, { connector: this.name }); + } + return this.injectedProvider; } catch (error) { // ready again to be connected diff --git a/packages/no-modal/src/noModal.ts b/packages/no-modal/src/noModal.ts index 3e75ddb14..df96d4857 100644 --- a/packages/no-modal/src/noModal.ts +++ b/packages/no-modal/src/noModal.ts @@ -377,7 +377,12 @@ export class Web3AuthNoModal extends SafeEventEmitter imp cleanup(); reject(err); }; - this.once(CONNECTOR_EVENTS.CONNECTED, onConnected); + + if (finalLoginParams.getIdentityToken) { + this.once(CONNECTOR_EVENTS.AUTHORIZED, onConnected); + } else { + this.once(CONNECTOR_EVENTS.CONNECTED, onConnected); + } this.once(CONNECTOR_EVENTS.ERRORED, onErrored); connector.connect(finalLoginParams); this.setCurrentChain(initialChain.chainId); @@ -911,6 +916,17 @@ export class Web3AuthNoModal extends SafeEventEmitter imp }); this.emit(CONNECTOR_EVENTS.MFA_ENABLED, isMFAEnabled); }); + + connector.on(CONNECTOR_EVENTS.AUTHORIZING, (data) => { + this.status = CONNECTOR_STATUS.AUTHORIZING; + this.emit(CONNECTOR_EVENTS.AUTHORIZING, data); + log.debug("authorizing", this.status, this.connectedConnectorName); + }); + connector.on(CONNECTOR_EVENTS.AUTHORIZED, (data) => { + this.status = CONNECTOR_STATUS.AUTHORIZED; + this.emit(CONNECTOR_EVENTS.AUTHORIZED, data); + log.debug("authorized", this.status, this.connectedConnectorName); + }); } protected checkInitRequirements(): void { From 3aa18f7db966078223dabb9a1eaf7b20509ff79a Mon Sep 17 00:00:00 2001 From: Ganesh Suresh Patra Date: Sat, 29 Nov 2025 18:44:38 +0530 Subject: [PATCH 05/26] feat: updated other connectors --- .../modal/src/ui/components/Loader/Loader.tsx | 33 ++++++++++--------- .../src/ui/components/Loader/Loader.type.ts | 5 +++ .../modal/src/ui/components/Root/Root.tsx | 1 + .../baseSolanaConnector.ts | 4 ++- .../coinbase-connector/coinbaseConnector.ts | 14 ++++++-- .../walletStandardConnector.ts | 13 ++++++-- .../metamask-connector/metamaskConnector.ts | 12 +++++-- 7 files changed, 56 insertions(+), 26 deletions(-) diff --git a/packages/modal/src/ui/components/Loader/Loader.tsx b/packages/modal/src/ui/components/Loader/Loader.tsx index 38cec27c8..1bce51943 100644 --- a/packages/modal/src/ui/components/Loader/Loader.tsx +++ b/packages/modal/src/ui/components/Loader/Loader.tsx @@ -6,7 +6,7 @@ import i18n from "../../localeImport"; import CircularLoader from "../CircularLoader"; import Image from "../Image"; import PulseLoader from "../PulseLoader"; -import { ConnectedStatusType, ConnectingStatusType, ErroredStatusType, LoaderProps } from "./Loader.type"; +import { AuthorizingStatusType, ConnectedStatusType, ConnectingStatusType, ErroredStatusType, LoaderProps } from "./Loader.type"; /** * ConnectingStatus component @@ -89,29 +89,27 @@ function ErroredStatus(props: ErroredStatusType) { ); } -function AuthorizingStatus() { +function AuthorizingStatus(props: AuthorizingStatusType) { + // const [t] = useTranslation(undefined, { i18n }); + const { connector, externalWalletsConfig } = props; + + // eslint-disable-next-line no-console + console.log("externalWalletsConfig", externalWalletsConfig); + return ( -
+

- Verify on MetaMask + Verify on {externalWalletsConfig[connector].label}

- +

We’ve sent a request to your wallet. Verify on your wallet to confirm that you own this wallet.

-
@@ -124,7 +122,10 @@ function AuthorizingStatus() { * @returns Loader component */ function Loader(props: LoaderProps) { - const { connector, connectorName, modalStatus, onClose, appLogo, message, isConnectAndSignAuthenticationMode } = props; + const { connector, connectorName, modalStatus, onClose, appLogo, message, isConnectAndSignAuthenticationMode, externalWalletsConfig } = props; + + // eslint-disable-next-line no-console + console.log("connectorName", connectorName); useEffect(() => { if (modalStatus === MODAL_STATUS.CONNECTED) { @@ -147,7 +148,7 @@ function Loader(props: LoaderProps) { {modalStatus === MODAL_STATUS.ERRORED && } - {modalStatus === MODAL_STATUS.AUTHORIZING && } + {modalStatus === MODAL_STATUS.AUTHORIZING && }
); } diff --git a/packages/modal/src/ui/components/Loader/Loader.type.ts b/packages/modal/src/ui/components/Loader/Loader.type.ts index f1c855bd3..6577719e1 100644 --- a/packages/modal/src/ui/components/Loader/Loader.type.ts +++ b/packages/modal/src/ui/components/Loader/Loader.type.ts @@ -1,6 +1,9 @@ +import { BaseConnectorConfig } from "@web3auth/no-modal"; + import type { ModalStatusType } from "../../interfaces"; export interface LoaderProps { + externalWalletsConfig: Record; message?: string; appLogo?: string; connector: string; @@ -15,3 +18,5 @@ export type ConnectingStatusType = Pick; export type ErroredStatusType = Pick; + +export type AuthorizingStatusType = Pick; diff --git a/packages/modal/src/ui/components/Root/Root.tsx b/packages/modal/src/ui/components/Root/Root.tsx index 8d45a3beb..d757a70db 100644 --- a/packages/modal/src/ui/components/Root/Root.tsx +++ b/packages/modal/src/ui/components/Root/Root.tsx @@ -442,6 +442,7 @@ function Root(props: RootProps) { onClose={onCloseLoader} appLogo={appLogo} isConnectAndSignAuthenticationMode={isConnectAndSignAuthenticationMode} + externalWalletsConfig={modalState.externalWalletsConfig} /> ) : ( <> diff --git a/packages/no-modal/src/connectors/base-solana-connector/baseSolanaConnector.ts b/packages/no-modal/src/connectors/base-solana-connector/baseSolanaConnector.ts index c9bdb23a5..b71485e0c 100644 --- a/packages/no-modal/src/connectors/base-solana-connector/baseSolanaConnector.ts +++ b/packages/no-modal/src/connectors/base-solana-connector/baseSolanaConnector.ts @@ -7,6 +7,7 @@ import { clearToken, CONNECTOR_EVENTS, CONNECTOR_STATUS, + CONNECTOR_STATUS_TYPE, ConnectorInitOptions, getSavedToken, IdentityTokenInfo, @@ -19,7 +20,8 @@ export abstract class BaseSolanaConnector extends BaseConnector { async init(_?: ConnectorInitOptions): Promise {} async getIdentityToken(): Promise { - if (!this.provider || this.status !== CONNECTOR_STATUS.CONNECTED) throw WalletLoginError.notConnectedError(); + if (!this.provider || !([CONNECTOR_STATUS.CONNECTED, CONNECTOR_STATUS.AUTHORIZING] as CONNECTOR_STATUS_TYPE[]).includes(this.status)) + throw WalletLoginError.notConnectedError(); if (!this.coreOptions) throw WalletInitializationError.invalidParams("Please initialize Web3Auth with a valid options"); const accounts = await this.provider.request({ method: SOLANA_METHOD_TYPES.GET_ACCOUNTS }); diff --git a/packages/no-modal/src/connectors/coinbase-connector/coinbaseConnector.ts b/packages/no-modal/src/connectors/coinbase-connector/coinbaseConnector.ts index 6da28b76d..ec7871dd7 100644 --- a/packages/no-modal/src/connectors/coinbase-connector/coinbaseConnector.ts +++ b/packages/no-modal/src/connectors/coinbase-connector/coinbaseConnector.ts @@ -114,16 +114,24 @@ class CoinbaseConnector extends BaseEvmConnector { // ready to be connected again this.disconnect(); }); + let identityTokenInfo: IdentityTokenInfo | undefined; - if (getIdentityToken) { - identityTokenInfo = await this.getIdentityToken(); - } + this.emit(CONNECTOR_EVENTS.CONNECTED, { connector: WALLET_CONNECTORS.COINBASE, reconnected: this.rehydrated, provider: this.provider, identityTokenInfo, } as CONNECTED_EVENT_DATA); + + if (getIdentityToken) { + this.status = CONNECTOR_STATUS.AUTHORIZING; + this.emit(CONNECTOR_EVENTS.AUTHORIZING, { connector: WALLET_CONNECTORS.COINBASE }); + identityTokenInfo = await this.getIdentityToken(); + this.status = CONNECTOR_STATUS.AUTHORIZED; + this.emit(CONNECTOR_EVENTS.AUTHORIZED, { connector: WALLET_CONNECTORS.COINBASE }); + } + return this.provider; } catch (error) { // ready again to be connected diff --git a/packages/no-modal/src/connectors/injected-solana-connector/walletStandardConnector.ts b/packages/no-modal/src/connectors/injected-solana-connector/walletStandardConnector.ts index e49d16748..0db2de10b 100644 --- a/packages/no-modal/src/connectors/injected-solana-connector/walletStandardConnector.ts +++ b/packages/no-modal/src/connectors/injected-solana-connector/walletStandardConnector.ts @@ -112,15 +112,22 @@ export class WalletStandardConnector extends BaseSolanaConnector { this.status = CONNECTOR_STATUS.CONNECTED; let identityTokenInfo: IdentityTokenInfo | undefined; - if (getIdentityToken) { - identityTokenInfo = await this.getIdentityToken(); - } + this.emit(CONNECTOR_EVENTS.CONNECTED, { connector: this.name, reconnected: this.rehydrated, provider: this.provider, identityTokenInfo, } as CONNECTED_EVENT_DATA); + + if (getIdentityToken) { + this.status = CONNECTOR_STATUS.AUTHORIZING; + this.emit(CONNECTOR_EVENTS.AUTHORIZING, { connector: this.name }); + identityTokenInfo = await this.getIdentityToken(); + this.status = CONNECTOR_STATUS.AUTHORIZED; + this.emit(CONNECTOR_EVENTS.AUTHORIZED, { connector: this.name }); + } + return this.provider; } catch (error: unknown) { // ready again to be connected diff --git a/packages/no-modal/src/connectors/metamask-connector/metamaskConnector.ts b/packages/no-modal/src/connectors/metamask-connector/metamaskConnector.ts index eb55e0c6d..11d0768b7 100644 --- a/packages/no-modal/src/connectors/metamask-connector/metamaskConnector.ts +++ b/packages/no-modal/src/connectors/metamask-connector/metamaskConnector.ts @@ -179,9 +179,6 @@ class MetaMaskConnector extends BaseEvmConnector { } let identityTokenInfo: IdentityTokenInfo | undefined; - if (getIdentityToken) { - identityTokenInfo = await this.getIdentityToken(); - } this.emit(CONNECTOR_EVENTS.CONNECTED, { connector: WALLET_CONNECTORS.METAMASK, @@ -189,6 +186,15 @@ class MetaMaskConnector extends BaseEvmConnector { provider: this.metamaskProvider, identityTokenInfo, } as CONNECTED_EVENT_DATA); + + if (getIdentityToken) { + this.status = CONNECTOR_STATUS.AUTHORIZING; + this.emit(CONNECTOR_EVENTS.AUTHORIZING, { connector: WALLET_CONNECTORS.METAMASK }); + identityTokenInfo = await this.getIdentityToken(); + this.status = CONNECTOR_STATUS.AUTHORIZED; + this.emit(CONNECTOR_EVENTS.AUTHORIZED, { connector: WALLET_CONNECTORS.METAMASK }); + } + return this.metamaskProvider; } catch (error) { // ready again to be connected From cf9826bb8db5683dc44b7d5fc3e0540c7f173ae4 Mon Sep 17 00:00:00 2001 From: Ganesh Suresh Patra Date: Mon, 1 Dec 2025 13:32:40 +0530 Subject: [PATCH 06/26] feat: got the connector color for loader --- .../modal/src/ui/components/Loader/Loader.tsx | 47 ++++++++++++++----- .../src/ui/components/Loader/Loader.type.ts | 5 +- .../modal/src/ui/components/Root/Root.tsx | 1 + 3 files changed, 39 insertions(+), 14 deletions(-) diff --git a/packages/modal/src/ui/components/Loader/Loader.tsx b/packages/modal/src/ui/components/Loader/Loader.tsx index 1bce51943..71cde9a87 100644 --- a/packages/modal/src/ui/components/Loader/Loader.tsx +++ b/packages/modal/src/ui/components/Loader/Loader.tsx @@ -90,28 +90,37 @@ function ErroredStatus(props: ErroredStatusType) { } function AuthorizingStatus(props: AuthorizingStatusType) { - // const [t] = useTranslation(undefined, { i18n }); - const { connector, externalWalletsConfig } = props; + const [t] = useTranslation(undefined, { i18n }); + const { connector, externalWalletsConfig, walletRegistry } = props; // eslint-disable-next-line no-console console.log("externalWalletsConfig", externalWalletsConfig); + const registryItem = walletRegistry?.default?.[connector] || walletRegistry?.others?.[connector]; + const primaryColor = registryItem?.primaryColor || ""; + + // eslint-disable-next-line no-console + console.log("registryItem", registryItem); + return (

- Verify on {externalWalletsConfig[connector].label} + {t("modal.loader.authorizing-header", { connector: externalWalletsConfig[connector].label })}

- +
-

- We’ve sent a request to your wallet. Verify on your wallet to confirm that you own this wallet. -

- +

{t("modal.loader.authorizing-message")}

+ + {t("modal.loader.authorizing-verify-btn")} +
); } @@ -122,7 +131,19 @@ function AuthorizingStatus(props: AuthorizingStatusType) { * @returns Loader component */ function Loader(props: LoaderProps) { - const { connector, connectorName, modalStatus, onClose, appLogo, message, isConnectAndSignAuthenticationMode, externalWalletsConfig } = props; + const { + connector, + connectorName, + modalStatus, + onClose, + appLogo, + message, + isConnectAndSignAuthenticationMode, + externalWalletsConfig, + walletRegistry, + walletConnectUri, + metamaskConnectUri, + } = props; // eslint-disable-next-line no-console console.log("connectorName", connectorName); @@ -148,7 +169,9 @@ function Loader(props: LoaderProps) { {modalStatus === MODAL_STATUS.ERRORED && } - {modalStatus === MODAL_STATUS.AUTHORIZING && } + {modalStatus === MODAL_STATUS.AUTHORIZING && ( + + )} ); } diff --git a/packages/modal/src/ui/components/Loader/Loader.type.ts b/packages/modal/src/ui/components/Loader/Loader.type.ts index 6577719e1..f04115e39 100644 --- a/packages/modal/src/ui/components/Loader/Loader.type.ts +++ b/packages/modal/src/ui/components/Loader/Loader.type.ts @@ -1,9 +1,10 @@ -import { BaseConnectorConfig } from "@web3auth/no-modal"; +import { BaseConnectorConfig, WalletRegistry } from "@web3auth/no-modal"; import type { ModalStatusType } from "../../interfaces"; export interface LoaderProps { externalWalletsConfig: Record; + walletRegistry?: WalletRegistry; message?: string; appLogo?: string; connector: string; @@ -19,4 +20,4 @@ export type ConnectedStatusType = Pick; export type ErroredStatusType = Pick; -export type AuthorizingStatusType = Pick; +export type AuthorizingStatusType = Pick; diff --git a/packages/modal/src/ui/components/Root/Root.tsx b/packages/modal/src/ui/components/Root/Root.tsx index d757a70db..68fa661a2 100644 --- a/packages/modal/src/ui/components/Root/Root.tsx +++ b/packages/modal/src/ui/components/Root/Root.tsx @@ -443,6 +443,7 @@ function Root(props: RootProps) { appLogo={appLogo} isConnectAndSignAuthenticationMode={isConnectAndSignAuthenticationMode} externalWalletsConfig={modalState.externalWalletsConfig} + walletRegistry={walletRegistry} /> ) : ( <> From e74ac8ba7f1f0e9a3d43b593299807d2f7ae7cef Mon Sep 17 00:00:00 2001 From: Ganesh Suresh Patra Date: Tue, 2 Dec 2025 16:59:23 +0530 Subject: [PATCH 07/26] feat: updated hooks for isAuthorized status --- demo/vue-app-new/src/MainView.vue | 2 +- .../src/components/AppDashboard.vue | 4 +-- demo/vue-app-new/src/components/AppHeader.vue | 8 +++-- .../src/components/AppSettings.vue | 12 ++++++++ demo/vue-app-new/src/config.ts | 2 ++ demo/vue-app-new/src/store/form.ts | 1 + demo/vue-app-new/src/translations/en.json | 1 + packages/modal/src/modalManager.ts | 10 +++++++ .../src/react/context/Web3AuthInnerContext.ts | 11 +++++++ .../modal/src/ui/components/Loader/Loader.tsx | 29 ++++++++++--------- .../src/ui/components/Loader/Loader.type.ts | 5 ++-- .../modal/src/ui/components/Root/Root.tsx | 2 ++ .../modal/src/ui/components/Root/Root.type.ts | 3 +- .../modal/src/ui/components/Widget/Widget.tsx | 3 ++ .../src/ui/components/Widget/Widget.type.ts | 3 +- packages/modal/src/ui/i18n/english.json | 3 ++ packages/modal/src/ui/i18n/french.json | 3 ++ packages/modal/src/ui/i18n/german.json | 3 ++ packages/modal/src/ui/i18n/japanese.json | 3 ++ packages/modal/src/ui/i18n/korean.json | 3 ++ packages/modal/src/ui/i18n/mandarin.json | 3 ++ packages/modal/src/ui/i18n/portuguese.json | 3 ++ packages/modal/src/ui/i18n/spanish.json | 3 ++ packages/modal/src/ui/i18n/turkish.json | 3 ++ packages/modal/src/ui/interfaces.ts | 1 + packages/modal/src/ui/loginModal.tsx | 9 ++++++ packages/modal/src/vue/Web3AuthProvider.ts | 15 ++++++++-- packages/modal/src/vue/interfaces.ts | 1 + packages/no-modal/src/base/hooks/index.ts | 1 + .../walletConnectV2Connector.ts | 12 +++++--- packages/no-modal/src/vue/Web3AuthProvider.ts | 13 +++++++++ packages/no-modal/src/vue/interfaces.ts | 1 + 32 files changed, 145 insertions(+), 31 deletions(-) diff --git a/demo/vue-app-new/src/MainView.vue b/demo/vue-app-new/src/MainView.vue index 4ebc715c4..17a1a72a5 100644 --- a/demo/vue-app-new/src/MainView.vue +++ b/demo/vue-app-new/src/MainView.vue @@ -139,7 +139,7 @@ const options = computed((): Web3AuthOptions => { connectors: modalParams.value, hideWalletDiscovery: !formData.showWalletDiscovery, }, - initialAuthenticationMode: "connect-and-sign", + initialAuthenticationMode: formData.initialAuthenticationMode, }; }); diff --git a/demo/vue-app-new/src/components/AppDashboard.vue b/demo/vue-app-new/src/components/AppDashboard.vue index 7b6d507f4..575b8998e 100644 --- a/demo/vue-app-new/src/components/AppDashboard.vue +++ b/demo/vue-app-new/src/components/AppDashboard.vue @@ -40,7 +40,7 @@ const props = defineProps<{ chains: CustomChainConfig[]; }>(); -const { isConnected, provider, web3Auth, isMFAEnabled } = useWeb3Auth(); +const { isConnected, provider, web3Auth, isMFAEnabled, isAuthorized } = useWeb3Auth(); const { userInfo, loading: userInfoLoading } = useWeb3AuthUser(); const { enableMFA } = useEnableMFA(); const { manageMFA } = useManageMFA(); @@ -92,7 +92,7 @@ const isDisplay = (name: "dashboard" | "ethServices" | "solServices" | "walletSe const chainNamespace = currentChainNamespace.value; switch (name) { case "dashboard": - return isConnected.value; + return formData.initialAuthenticationMode === "connect-and-sign" ? isAuthorized.value : isConnected.value; case "ethServices": return chainNamespace === CHAIN_NAMESPACES.EIP155; diff --git a/demo/vue-app-new/src/components/AppHeader.vue b/demo/vue-app-new/src/components/AppHeader.vue index 93d902919..d22d47f22 100644 --- a/demo/vue-app-new/src/components/AppHeader.vue +++ b/demo/vue-app-new/src/components/AppHeader.vue @@ -3,20 +3,22 @@ import { Button } from "@toruslabs/vue-components"; import { useWeb3Auth, useWeb3AuthDisconnect } from "@web3auth/modal/vue"; import { useI18n } from "petite-vue-i18n"; import { watch } from "vue"; +import { formDataStore } from "../store/form"; const { log } = console; const { t } = useI18n({ useScope: "global" }); -const { status, isConnected } = useWeb3Auth(); +const { status, isConnected, isAuthorized } = useWeb3Auth(); const { disconnect } = useWeb3AuthDisconnect(); +const formData = formDataStore; const isDisplay = (name: string): boolean => { switch (name) { case "btnLogout": - return isConnected.value; + return formData.initialAuthenticationMode === "connect-and-sign" ? isAuthorized.value : isConnected.value; case "appHeading": - return isConnected.value; + return formData.initialAuthenticationMode === "connect-and-sign" ? isAuthorized.value : isConnected.value; default: { return false; diff --git a/demo/vue-app-new/src/components/AppSettings.vue b/demo/vue-app-new/src/components/AppSettings.vue index 08c927a73..b972d8dfd 100644 --- a/demo/vue-app-new/src/components/AppSettings.vue +++ b/demo/vue-app-new/src/components/AppSettings.vue @@ -229,6 +229,18 @@ const onSmartAccountChainChange = (chainIds: string[]) => { matchParentsWidth :show-check-box="true" /> +