From 7a863c4fc17da435aef39d93a4da6d5c0f6fff62 Mon Sep 17 00:00:00 2001 From: Naveed Elahi Date: Tue, 9 Jul 2024 19:33:30 +0800 Subject: [PATCH] vue composables for no-modal sdk --- package-lock.json | 238 +++++++++++------- .../no-modal-vue-composables/.gitignore | 24 ++ .../no-modal-vue-composables/README.md | 8 + .../no-modal-vue-composables/package.json | 56 +++++ .../src/Web3AuthProvider.ts | 213 ++++++++++++++++ .../src/composables/index.ts | 1 + .../src/composables/useWeb3Auth.ts | 10 + .../no-modal-vue-composables/src/index.ts | 3 + .../src/interfaces.ts | 46 ++++ .../tsconfig.build.json | 6 + .../no-modal-vue-composables/tsconfig.json | 7 + 11 files changed, 527 insertions(+), 85 deletions(-) create mode 100644 packages/composables/no-modal-vue-composables/.gitignore create mode 100644 packages/composables/no-modal-vue-composables/README.md create mode 100644 packages/composables/no-modal-vue-composables/package.json create mode 100644 packages/composables/no-modal-vue-composables/src/Web3AuthProvider.ts create mode 100644 packages/composables/no-modal-vue-composables/src/composables/index.ts create mode 100644 packages/composables/no-modal-vue-composables/src/composables/useWeb3Auth.ts create mode 100644 packages/composables/no-modal-vue-composables/src/index.ts create mode 100644 packages/composables/no-modal-vue-composables/src/interfaces.ts create mode 100644 packages/composables/no-modal-vue-composables/tsconfig.build.json create mode 100644 packages/composables/no-modal-vue-composables/tsconfig.json diff --git a/package-lock.json b/package-lock.json index f68d9d341..8bc9a9124 100644 --- a/package-lock.json +++ b/package-lock.json @@ -490,7 +490,6 @@ "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz", "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==", - "dev": true, "bin": { "parser": "bin/babel-parser.js" }, @@ -2493,8 +2492,7 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.15", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", - "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", - "dev": true + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", @@ -6547,6 +6545,106 @@ "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", "dev": true }, + "node_modules/@vue/compiler-core": { + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.31.tgz", + "integrity": "sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==", + "peer": true, + "dependencies": { + "@babel/parser": "^7.24.7", + "@vue/shared": "3.4.31", + "entities": "^4.5.0", + "estree-walker": "^2.0.2", + "source-map-js": "^1.2.0" + } + }, + "node_modules/@vue/compiler-dom": { + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz", + "integrity": "sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==", + "peer": true, + "dependencies": { + "@vue/compiler-core": "3.4.31", + "@vue/shared": "3.4.31" + } + }, + "node_modules/@vue/compiler-sfc": { + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz", + "integrity": "sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==", + "peer": true, + "dependencies": { + "@babel/parser": "^7.24.7", + "@vue/compiler-core": "3.4.31", + "@vue/compiler-dom": "3.4.31", + "@vue/compiler-ssr": "3.4.31", + "@vue/shared": "3.4.31", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.10", + "postcss": "^8.4.38", + "source-map-js": "^1.2.0" + } + }, + "node_modules/@vue/compiler-ssr": { + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz", + "integrity": "sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==", + "peer": true, + "dependencies": { + "@vue/compiler-dom": "3.4.31", + "@vue/shared": "3.4.31" + } + }, + "node_modules/@vue/reactivity": { + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz", + "integrity": "sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==", + "peer": true, + "dependencies": { + "@vue/shared": "3.4.31" + } + }, + "node_modules/@vue/runtime-core": { + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.31.tgz", + "integrity": "sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==", + "peer": true, + "dependencies": { + "@vue/reactivity": "3.4.31", + "@vue/shared": "3.4.31" + } + }, + "node_modules/@vue/runtime-dom": { + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz", + "integrity": "sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==", + "peer": true, + "dependencies": { + "@vue/reactivity": "3.4.31", + "@vue/runtime-core": "3.4.31", + "@vue/shared": "3.4.31", + "csstype": "^3.1.3" + } + }, + "node_modules/@vue/server-renderer": { + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.31.tgz", + "integrity": "sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==", + "peer": true, + "dependencies": { + "@vue/compiler-ssr": "3.4.31", + "@vue/shared": "3.4.31" + }, + "peerDependencies": { + "vue": "3.4.31" + } + }, + "node_modules/@vue/shared": { + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz", + "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==", + "peer": true + }, "node_modules/@vuelidate/core": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.3.tgz", @@ -6959,6 +7057,10 @@ "resolved": "packages/hooks/no-modal-react-hooks", "link": true }, + "node_modules/@web3auth/no-modal-vue-composables": { + "resolved": "packages/composables/no-modal-vue-composables", + "link": true + }, "node_modules/@web3auth/openlogin-adapter": { "resolved": "packages/adapters/openlogin-adapter", "link": true @@ -10719,8 +10821,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/culori": { "version": "3.3.0", @@ -11479,7 +11580,6 @@ "version": "0.1.13", "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "dev": true, "optional": true, "dependencies": { "iconv-lite": "^0.6.2" @@ -11489,7 +11589,6 @@ "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dev": true, "optional": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" @@ -11575,7 +11674,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, "engines": { "node": ">=0.12" }, @@ -12799,8 +12897,7 @@ "node_modules/estree-walker": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", - "dev": true + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" }, "node_modules/esutils": { "version": "2.0.3", @@ -16591,8 +16688,7 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "node_modules/js-yaml": { "version": "4.1.0", @@ -18327,7 +18423,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -18386,6 +18481,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/magic-string": { + "version": "0.30.10", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz", + "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==", + "peer": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.15" + } + }, "node_modules/make-dir": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", @@ -19377,7 +19481,6 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -21169,8 +21272,7 @@ "node_modules/picocolors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", - "dev": true + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -21377,7 +21479,6 @@ "version": "8.4.39", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", - "dev": true, "funding": [ { "type": "opencollective", @@ -22678,7 +22779,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -22690,7 +22790,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -24757,13 +24856,12 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true + "devOptional": true }, "node_modules/scheduler": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0" } @@ -25503,7 +25601,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -27114,7 +27211,7 @@ "version": "5.5.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz", "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==", - "dev": true, + "devOptional": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -27793,6 +27890,27 @@ "node": ">=0.10.0" } }, + "node_modules/vue": { + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz", + "integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==", + "peer": true, + "dependencies": { + "@vue/compiler-dom": "3.4.31", + "@vue/compiler-sfc": "3.4.31", + "@vue/runtime-dom": "3.4.31", + "@vue/server-renderer": "3.4.31", + "@vue/shared": "3.4.31" + }, + "peerDependencies": { + "typescript": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/walk-up-path": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/walk-up-path/-/walk-up-path-3.0.1.tgz", @@ -29133,6 +29251,7 @@ "version": "8.8.0", "resolved": "https://registry.npmjs.org/@web3auth/base-provider/-/base-provider-8.8.0.tgz", "integrity": "sha512-lrA/lwq0xSe6q9IVdm7/SsJBCzWCmMdfrk/jD8txC9VWtlHZRn5MxdrBOdy0yc/JfI7k5RBm6gdpYFj/4W6RKA==", + "dev": true, "dependencies": { "@metamask/rpc-errors": "^6.3.0", "@toruslabs/base-controllers": "^5.9.2", @@ -29148,41 +29267,11 @@ "@babel/runtime": "7.x" } }, - "packages/composables/modal-vue-composables/node_modules/@web3auth/no-modal": { - "version": "8.8.0", - "resolved": "https://registry.npmjs.org/@web3auth/no-modal/-/no-modal-8.8.0.tgz", - "integrity": "sha512-8R4jINS0iM7xeezhTXWkXTdo1pcB32c4CsjfwOENM+MyX7SJ5KIrRp3vk1k5ojRvOf0j412l1ktE+2yOOg4ftQ==", - "dependencies": { - "@toruslabs/openlogin": "^8.2.1", - "@toruslabs/openlogin-jrpc": "^8.1.1", - "@toruslabs/openlogin-utils": "^8.2.1", - "@web3auth/base": "^8.8.0", - "@web3auth/base-provider": "^8.8.0", - "lodash.clonedeep": "^4.5.0", - "lodash.merge": "^4.6.2" - }, - "engines": { - "node": ">=18.x", - "npm": ">=9.x" - }, - "peerDependencies": { - "@babel/runtime": "^7.x", - "@web3auth/openlogin-adapter": "^8.x", - "@web3auth/wallet-connect-v2-adapter": "^8.x" - }, - "peerDependenciesMeta": { - "@web3auth/openlogin-adapter": { - "optional": true - }, - "@web3auth/wallet-connect-v2-adapter": { - "optional": true - } - } - }, "packages/composables/modal-vue-composables/node_modules/@web3auth/openlogin-adapter": { "version": "8.8.0", "resolved": "https://registry.npmjs.org/@web3auth/openlogin-adapter/-/openlogin-adapter-8.8.0.tgz", "integrity": "sha512-AHXUo4sI+Ar1r9u8UEIHBvkSFfuxsjl/4fihv8tYiDE9cxlHWoDHPQ52XStmcnvsIN2H4inF0a1m6Y/WH/A+bA==", + "dev": true, "dependencies": { "@toruslabs/openlogin": "^8.2.1", "@toruslabs/openlogin-utils": "^8.2.1", @@ -29198,24 +29287,17 @@ "@babel/runtime": "^7.x" } }, - "packages/composables/modal-vue-composables/node_modules/@web3auth/ui": { - "version": "8.8.0", - "resolved": "https://registry.npmjs.org/@web3auth/ui/-/ui-8.8.0.tgz", - "integrity": "sha512-qDBdNSGMgVM1w6e2z91iQghG7ehSmrHx95dA3dYXD71I05mUeS2rHFM2irbVF35SlPvfCov3f5DVZm8l5bAqKQ==", + "packages/composables/no-modal-vue-composables": { + "name": "@web3auth/no-modal-vue-composables", + "version": "8.9.1", + "license": "ISC", "dependencies": { - "@toruslabs/http-helpers": "^6.1.1", - "@toruslabs/openlogin": "^8.2.1", - "@toruslabs/openlogin-jrpc": "^8.1.1", - "@toruslabs/openlogin-utils": "^8.2.1", "@web3auth/base": "^8.8.0", - "bowser": "^2.11.0", - "classnames": "^2.5.1", - "copy-to-clipboard": "^3.3.3", - "i18next": "^23.11.5", - "lodash.clonedeep": "^4.5.0", - "lodash.merge": "^4.6.2", - "react-i18next": "^14.1.2", - "react-qrcode-logo": "^3.0.0" + "@web3auth/no-modal": "^8.9.1" + }, + "devDependencies": { + "@toruslabs/openlogin-utils": "^8.2.1", + "@web3auth/openlogin-adapter": "^8.8.0" }, "engines": { "node": ">=18.x", @@ -29223,21 +29305,7 @@ }, "peerDependencies": { "@babel/runtime": "^7.x", - "react": "^18.x", - "react-dom": "^18.x" - } - }, - "packages/composables/modal-vue-composables/node_modules/react-qrcode-logo": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/react-qrcode-logo/-/react-qrcode-logo-3.0.0.tgz", - "integrity": "sha512-2+vZ3GNBdUpYxIKyt6SFZsDGXa0xniyUQ0wPI4O0hJTzRjttPIx1pPnH9IWQmp/4nDMoN47IBhi3Breu1KudYw==", - "dependencies": { - "lodash.isequal": "^4.5.0", - "qrcode-generator": "^1.4.4" - }, - "peerDependencies": { - "react": ">=18.0.0", - "react-dom": ">=18.0.0" + "vue": "^3.4.x" } }, "packages/hooks/modal-react-hooks": { diff --git a/packages/composables/no-modal-vue-composables/.gitignore b/packages/composables/no-modal-vue-composables/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/packages/composables/no-modal-vue-composables/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/composables/no-modal-vue-composables/README.md b/packages/composables/no-modal-vue-composables/README.md new file mode 100644 index 000000000..31ac2ee8d --- /dev/null +++ b/packages/composables/no-modal-vue-composables/README.md @@ -0,0 +1,8 @@ +# Web3Auth Modal Vue Composables +Vue composables to simplify integration with Web3Auth no-modal SDK. + +## 🔗 Installation + +```shell +npm install --save @web3auth/no-modal-vue-composables +``` \ No newline at end of file diff --git a/packages/composables/no-modal-vue-composables/package.json b/packages/composables/no-modal-vue-composables/package.json new file mode 100644 index 000000000..7096c22d3 --- /dev/null +++ b/packages/composables/no-modal-vue-composables/package.json @@ -0,0 +1,56 @@ +{ + "name": "@web3auth/no-modal-vue-composables", + "version": "8.9.1", + "description": "Vue composables to simplify integration with web3Auth no-modal SDK.", + "keywords": [ + "web3Auth/no-modal-vue-composables", + "web3Auth", + "blockchain", + "vue composables", + "web3Auth composables", + "web3Auth no-modal vue composables" + ], + "main": "dist/noModalVueComposables.cjs.js", + "module": "dist/noModalVueComposables.esm.js", + "unpkg": "dist/noModalVueComposables.umd.min.js", + "jsdelivr": "dist/noModalVueComposables.umd.min.js", + "types": "dist/types/index.d.ts", + "author": "Torus Labs", + "homepage": "https://github.com/Web3Auth/Web3Auth/tree/master/packages/composables/no-modal-vue-composables#readme", + "license": "ISC", + "scripts": { + "dev": "torus-scripts start", + "build": "torus-scripts build", + "lint": "eslint --fix 'src/**/*.ts'", + "prepack": "npm run build" + }, + "files": [ + "dist" + ], + "dependencies": { + "@web3auth/base": "^8.8.0", + "@web3auth/no-modal": "^8.9.1" + }, + "devDependencies": { + "@toruslabs/openlogin-utils": "^8.2.1", + "@web3auth/openlogin-adapter": "^8.8.0" + }, + "peerDependencies": { + "@babel/runtime": "^7.x", + "vue": "^3.4.x" + }, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Web3Auth/Web3Auth.git" + }, + "bugs": { + "url": "https://github.com/Web3Auth/Web3Auth/issues" + }, + "engines": { + "node": ">=18.x", + "npm": ">=9.x" + } +} diff --git a/packages/composables/no-modal-vue-composables/src/Web3AuthProvider.ts b/packages/composables/no-modal-vue-composables/src/Web3AuthProvider.ts new file mode 100644 index 000000000..8c4237666 --- /dev/null +++ b/packages/composables/no-modal-vue-composables/src/Web3AuthProvider.ts @@ -0,0 +1,213 @@ +import { + ADAPTER_EVENTS, + type ADAPTER_STATUS_TYPE, + type CustomChainConfig, + type IPlugin, + type IProvider, + WALLET_ADAPTER_TYPE, + WalletInitializationError, + WalletLoginError, +} from "@web3auth/base"; +import { Web3AuthNoModal } from "@web3auth/no-modal"; +import type { LoginParams, OpenloginUserInfo } from "@web3auth/openlogin-adapter"; +import { defineComponent, h, InjectionKey, PropType, provide, ref, shallowRef, triggerRef, watch } from "vue"; + +import { IWeb3AuthContext, Web3AuthContextConfig } from "./interfaces"; + +export const Web3AuthContextKey = Symbol("Web3AuthContextKey") as InjectionKey; + +export default defineComponent({ + name: "Web3AuthProvider", + props: { + config: { type: Object as PropType, required: true }, + }, + setup(props) { + const web3Auth = shallowRef(null); + const isConnected = ref(false); + const provider = ref(null); + const userInfo = ref | null>(null); + const isMFAEnabled = ref(false); + const isInitialized = ref(false); + const status = ref(null); + + const addPlugin = (plugin: IPlugin) => { + if (!web3Auth.value) throw WalletInitializationError.notReady(); + return web3Auth.value.addPlugin(plugin); + }; + + const getPlugin = (name: string) => { + if (!web3Auth.value) throw WalletInitializationError.notReady(); + return web3Auth.value.getPlugin(name); + }; + + const init = async () => { + if (!web3Auth.value) throw WalletInitializationError.notReady(); + await web3Auth.value.init(); + triggerRef(web3Auth); + }; + + const enableMFA = async (loginParams?: Partial) => { + if (!web3Auth.value) throw WalletInitializationError.notReady(); + if (!isConnected.value) throw WalletLoginError.notConnectedError(); + await web3Auth.value.enableMFA(loginParams); + triggerRef(web3Auth); + const localUserInfo = await web3Auth.value.getUserInfo(); + userInfo.value = localUserInfo; + isMFAEnabled.value = localUserInfo.isMfaEnabled || false; + }; + + const logout = async (logoutParams: { cleanup: boolean } = { cleanup: false }) => { + if (!web3Auth.value) throw WalletInitializationError.notReady(); + if (!isConnected.value) throw WalletLoginError.notConnectedError(); + await web3Auth.value.logout(logoutParams); + triggerRef(web3Auth); + }; + + const connectTo = async (walletName: WALLET_ADAPTER_TYPE, loginParams?: T) => { + if (!web3Auth.value) throw WalletInitializationError.notReady(); + const localProvider = await web3Auth.value.connectTo(walletName, loginParams); + triggerRef(web3Auth); + return localProvider; + }; + + const addAndSwitchChain = async (chainConfig: CustomChainConfig) => { + if (!web3Auth.value) throw WalletInitializationError.notReady(); + await web3Auth.value.addChain(chainConfig); + await web3Auth.value.switchChain({ chainId: chainConfig.chainId }); + }; + + const authenticateUser = async () => { + if (!web3Auth.value) throw WalletInitializationError.notReady(); + return web3Auth.value.authenticateUser(); + }; + + const addChain = async (chainConfig: CustomChainConfig) => { + if (!web3Auth.value) throw WalletInitializationError.notReady(); + return web3Auth.value.addChain(chainConfig); + }; + + const switchChain = (chainParams: { chainId: string }) => { + if (!web3Auth.value) throw WalletInitializationError.notReady(); + return web3Auth.value.switchChain(chainParams); + }; + + watch( + [web3Auth, () => props.config], + () => { + if (web3Auth.value) return; + + const resetHookState = () => { + provider.value = null; + userInfo.value = null; + isMFAEnabled.value = false; + isConnected.value = false; + status.value = null; + }; + + resetHookState(); + const { web3AuthOptions, adapters = [], plugins = [] } = props.config; + const web3AuthInstance = new Web3AuthNoModal(web3AuthOptions); + if (adapters.length) adapters.map((adapter) => web3AuthInstance.configureAdapter(adapter)); + if (plugins.length) { + plugins.forEach((plugin) => { + web3AuthInstance.addPlugin(plugin); + }); + } + + web3Auth.value = web3AuthInstance; + }, + { immediate: true } + ); + + watch([web3Auth, isConnected], () => { + if (web3Auth.value) { + const addState = async (web3AuthInstance: Web3AuthNoModal) => { + provider.value = web3AuthInstance.provider; + const userState = await web3AuthInstance.getUserInfo(); + userInfo.value = userState; + isMFAEnabled.value = userState?.isMfaEnabled || false; + }; + + const resetState = () => { + provider.value = null; + userInfo.value = null; + isMFAEnabled.value = false; + }; + + if (isConnected.value) addState(web3Auth.value as Web3AuthNoModal); + else resetState(); + } + }); + + watch( + web3Auth, + (newWeb3Auth, prevWeb3Auth) => { + const notReadyListener = () => (status.value = web3Auth.value!.status); + const readyListener = () => { + status.value = web3Auth.value!.status; + isInitialized.value = true; + }; + const connectedListener = () => { + status.value = web3Auth.value!.status; + isInitialized.value = true; + isConnected.value = true; + }; + const disconnectedListener = () => { + status.value = web3Auth.value!.status; + isConnected.value = false; + }; + const connectingListener = () => { + status.value = web3Auth.value!.status; + }; + const errorListener = () => { + status.value = ADAPTER_EVENTS.ERRORED; + }; + + // unregister previous listeners + if (prevWeb3Auth && newWeb3Auth !== prevWeb3Auth) { + prevWeb3Auth.off(ADAPTER_EVENTS.NOT_READY, notReadyListener); + prevWeb3Auth.off(ADAPTER_EVENTS.READY, readyListener); + prevWeb3Auth.off(ADAPTER_EVENTS.CONNECTED, connectedListener); + prevWeb3Auth.off(ADAPTER_EVENTS.DISCONNECTED, disconnectedListener); + prevWeb3Auth.off(ADAPTER_EVENTS.CONNECTING, connectingListener); + prevWeb3Auth.off(ADAPTER_EVENTS.ERRORED, errorListener); + } + + if (newWeb3Auth && newWeb3Auth !== prevWeb3Auth) { + status.value = newWeb3Auth.status; + // web3Auth is initialized here. + newWeb3Auth.on(ADAPTER_EVENTS.NOT_READY, notReadyListener); + newWeb3Auth.on(ADAPTER_EVENTS.READY, readyListener); + newWeb3Auth.on(ADAPTER_EVENTS.CONNECTED, connectedListener); + newWeb3Auth.on(ADAPTER_EVENTS.DISCONNECTED, disconnectedListener); + newWeb3Auth.on(ADAPTER_EVENTS.CONNECTING, connectingListener); + newWeb3Auth.on(ADAPTER_EVENTS.ERRORED, errorListener); + } + }, + { immediate: true } + ); + + provide(Web3AuthContextKey, { + web3Auth, + isConnected, + isInitialized, + provider, + userInfo, + isMFAEnabled, + status, + getPlugin, + init, + connectTo, + enableMFA, + logout, + addAndSwitchChain, + addChain, + addPlugin, + authenticateUser, + switchChain, + }); + }, + render() { + return h(this.$slots.default ?? ""); + }, +}); diff --git a/packages/composables/no-modal-vue-composables/src/composables/index.ts b/packages/composables/no-modal-vue-composables/src/composables/index.ts new file mode 100644 index 000000000..97fa2e1da --- /dev/null +++ b/packages/composables/no-modal-vue-composables/src/composables/index.ts @@ -0,0 +1 @@ +export { useWeb3Auth } from "./useWeb3Auth"; diff --git a/packages/composables/no-modal-vue-composables/src/composables/useWeb3Auth.ts b/packages/composables/no-modal-vue-composables/src/composables/useWeb3Auth.ts new file mode 100644 index 000000000..25b5ff6bf --- /dev/null +++ b/packages/composables/no-modal-vue-composables/src/composables/useWeb3Auth.ts @@ -0,0 +1,10 @@ +import { WalletInitializationError } from "@web3auth/base"; +import { inject } from "vue"; + +import { Web3AuthContextKey } from "../Web3AuthProvider"; + +export const useWeb3Auth = () => { + const context = inject(Web3AuthContextKey); + if (!context) throw WalletInitializationError.fromCode(1000, "usage of `useWeb3Auth` not wrapped in `Web3AuthProvider`."); + return context; +}; diff --git a/packages/composables/no-modal-vue-composables/src/index.ts b/packages/composables/no-modal-vue-composables/src/index.ts new file mode 100644 index 000000000..96ce3af76 --- /dev/null +++ b/packages/composables/no-modal-vue-composables/src/index.ts @@ -0,0 +1,3 @@ +export * from "./composables"; +export * from "./interfaces"; +export { default } from "./Web3AuthProvider"; diff --git a/packages/composables/no-modal-vue-composables/src/interfaces.ts b/packages/composables/no-modal-vue-composables/src/interfaces.ts new file mode 100644 index 000000000..e4dc22aab --- /dev/null +++ b/packages/composables/no-modal-vue-composables/src/interfaces.ts @@ -0,0 +1,46 @@ +import type { LoginParams, OpenloginUserInfo } from "@toruslabs/openlogin-utils"; +import type { + ADAPTER_STATUS_TYPE, + CustomChainConfig, + IAdapter, + IPlugin, + IProvider, + IWeb3AuthCoreOptions, + UserAuthInfo, + WALLET_ADAPTER_TYPE, +} from "@web3auth/base"; +import { type Web3AuthNoModal } from "@web3auth/no-modal"; +import { Ref, ShallowRef } from "vue"; + +export type Web3AuthContextConfig = { + web3AuthOptions: IWeb3AuthCoreOptions; + adapters?: IAdapter[]; + plugins?: IPlugin[]; +}; + +export interface Web3AuthProviderProps { + config: Web3AuthContextConfig; +} + +interface IBaseWeb3AuthComposableContext { + isConnected: Ref; + provider: Ref; + userInfo: Ref | null>; + isMFAEnabled: Ref; + isInitialized: Ref; + status: Ref; + enableMFA(params?: LoginParams): Promise; + logout(params?: { cleanup: boolean }): Promise; + addAndSwitchChain(chainConfig: CustomChainConfig): Promise; + addPlugin(plugin: IPlugin): void; + getPlugin(pluginName: string): IPlugin | null; + authenticateUser(): Promise; + addChain(chainConfig: CustomChainConfig): Promise; + switchChain(params: { chainId: string }): Promise; +} + +export interface IWeb3AuthContext extends IBaseWeb3AuthComposableContext { + web3Auth: ShallowRef; + init(): Promise; + connectTo(walletName: WALLET_ADAPTER_TYPE, loginParams?: T): Promise; +} diff --git a/packages/composables/no-modal-vue-composables/tsconfig.build.json b/packages/composables/no-modal-vue-composables/tsconfig.build.json new file mode 100644 index 000000000..71e48564d --- /dev/null +++ b/packages/composables/no-modal-vue-composables/tsconfig.build.json @@ -0,0 +1,6 @@ +{ + "include": ["src"], + "compilerOptions": { + "jsx": "preserve" + } +} diff --git a/packages/composables/no-modal-vue-composables/tsconfig.json b/packages/composables/no-modal-vue-composables/tsconfig.json new file mode 100644 index 000000000..cda18341e --- /dev/null +++ b/packages/composables/no-modal-vue-composables/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../../tsconfig.json", + "include": ["src", "test"], + "compilerOptions": { + "jsx": "preserve" + } +}