Adds vue solana composables

Author: arch1995

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

@@ -18,6 +18,7 @@
     "@toruslabs/tweetnacl-js": "^1.0.4",
     "@toruslabs/vue-components": "^8.0.6",
     "@toruslabs/vue-icons": "^8.0.2",
+    "@wagmi/vue": "^0.1.15",
     "@web3auth/auth": "^10.4.0",
     "@web3auth/modal": "file:../../packages/modal",
     "@web3auth/no-modal": "file:../../packages/no-modal",

demo/vue-app-new/package.json

@@ -5,6 +5,8 @@ import { useCheckout, useEnableMFA, useIdentityToken, useManageMFA, useSwitchCha
 import { CustomChainConfig, type NFTCheckoutPluginType, type WalletServicesPluginType } from "@web3auth/no-modal";
 import { useI18n } from "petite-vue-i18n";
 
+import { useAccount } from "@wagmi/vue";
+
 import { Connection } from "@solana/web3.js";
 import { ProviderConfig } from "@toruslabs/base-controllers";
 import { SUPPORTED_NETWORKS } from "@toruslabs/ethereum-controllers";
@@ -58,6 +60,7 @@ const { showWalletUI, loading: showWalletUILoading } = useWalletUI();
 const { showWalletConnectScanner, loading: showWalletConnectScannerLoading } = useWalletConnectScanner();
 const { showCheckout, loading: showCheckoutLoading } = useCheckout();
 const { authenticateUser, loading: authenticateUserLoading } = useIdentityToken();
+const { status } = useAccount();
 
 const currentChainId = ref<string | undefined>(web3Auth.value?.currentChain?.chainId);
 const currentChainConfig = computed(() => supportedNetworks[currentChainId.value as keyof typeof supportedNetworks]);
@@ -142,6 +145,10 @@ const printToConsole = (...args: unknown[]) => {
   }
 };
 
+watch(status, (newStatus) => {
+  console.log("status", newStatus);
+}, { immediate: true });
+
 // const onWalletSignPersonalMessage = async () => {
 //   const walletPlugin = web3Auth.value?.getPlugin(WALLET_PLUGINS.WALLET_SERVICES) as WalletServicesPluginType;
 //   await walletSignPersonalMessage(walletPlugin.wsEmbedInstance.provider, printToConsole);

demo/vue-app-new/src/components/AppDashboard.vue

@@ -3,6 +3,6 @@ import toruslabsReact from "@toruslabs/eslint-config-react";
 export default [
   ...toruslabsReact,
   {
-    ignores: ["./src/vue"],
+    ignores: ["src/vue/WalletServicesInnerProvider.vue"],
   },
 ];

package-lock.json

@@ -46,13 +46,20 @@
     },
     "wagmi": {
       "optional": true
+    },
+    "@wagmi/core": {
+      "optional": true
+    },
+    "@wagmi/vue": {
+      "optional": true
     }
   },
   "peerDependencies": {
     "@babel/runtime": "^7.x",
     "@coinbase/wallet-sdk": "^4.3.x",
     "@solana/web3.js": ">=1.98",
-    "@tanstack/react-query": "^5.72.x",
+    "@wagmi/core": ">=2.16",
+    "@wagmi/vue": ">=0.1.x",
     "react": ">=18",
     "react-dom": ">=18",
     "viem": "^2.23.x",
@@ -76,6 +83,8 @@
     "@toruslabs/vue-components": "^8.0.6",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "@wagmi/core": "^2.16.1",
+    "@wagmi/vue": "^0.1.15",
     "autoprefixer": "^10.4.21",
     "css-loader": "^7.1.2",
     "live-server": "^1.2.2",
@@ -133,6 +142,16 @@
       "import": "./dist/lib.esm/packages/modal/src/vue/index.js",
       "require": "./dist/lib.cjs/packages/modal/src/vue/index.js",
       "types": "./dist/lib.cjs/types/vue/index.d.ts"
+    },
+    "./vue/solana": {
+      "import": "./dist/lib.esm/packages/modal/src/vue/solana/index.js",
+      "require": "./dist/lib.cjs/packages/modal/src/vue/solana/index.js",
+      "types": "./dist/lib.cjs/types/vue/solana/index.d.ts"
+    },
+    "./vue/wagmi": {
+      "import": "./dist/lib.esm/packages/modal/src/vue/wagmi/index.js",
+      "require": "./dist/lib.cjs/packages/modal/src/vue/wagmi/index.js",
+      "types": "./dist/lib.cjs/types/vue/wagmi/index.d.ts"
     }
   },
   "typesVersions": {
@@ -148,6 +167,12 @@
       ],
       "vue": [
         "./dist/lib.cjs/types/vue/index.d.ts"
+      ],
+      "vue/solana": [
+        "./dist/lib.cjs/types/vue/solana/index.d.ts"
+      ],
+      "vue/wagmi": [
+        "./dist/lib.cjs/types/vue/wagmi/index.d.ts"
       ]
     }
   },

packages/modal/eslint.config.mjs

@@ -11,7 +11,15 @@ const pkg = await readJSONFile(path.resolve("./package.json"));
 // TODO: use ssr module for cjs build
 
 export const baseConfig = {
-  input: ["./src/index.ts", "./src/react/index.ts", "./src/vue/index.ts", "./src/react/wagmi/index.ts", "./src/react/solana/index.ts"],
+  input: [
+    "./src/index.ts",
+    "./src/react/index.ts",
+    "./src/vue/index.ts",
+    "./src/react/wagmi/index.ts",
+    "./src/react/solana/index.ts",
+    "./src/vue/solana/index.ts",
+    "./src/vue/wagmi/index.ts",
+  ],
   plugins: [
     replace({
       "process.env.WEB3AUTH_VERSION": `"${pkg.version}"`,

packages/modal/package.json

@@ -1,4 +1,4 @@
-import { TransactionOrVersionedTransaction, Web3AuthError } from "@web3auth/no-modal";
+import { TransactionOrVersionedTransaction, WalletInitializationError, Web3AuthError } from "@web3auth/no-modal";
 import { useCallback, useState } from "react";
 
 import { useSolanaWallet } from "./useSolanaWallet";
@@ -21,7 +21,7 @@ export const useSignAndSendTransaction = (): IUseSignAndSendTransaction => {
       setLoading(true);
       setError(null);
       try {
-        if (!solanaWallet) throw new Error("Solana wallet not found");
+        if (!solanaWallet) throw WalletInitializationError.notReady();
         const signature = await solanaWallet.signAndSendTransaction(transaction);
         setData(signature);
         return signature;

packages/modal/rollup.config.mjs

@@ -1,4 +1,4 @@
-import { Web3AuthError } from "@web3auth/no-modal";
+import { WalletInitializationError, Web3AuthError } from "@web3auth/no-modal";
 import { useCallback, useState } from "react";
 
 import { useSolanaWallet } from "./useSolanaWallet";
@@ -21,7 +21,7 @@ export const useSignMessage = (): IUseSignMessage => {
       setLoading(true);
       setError(null);
       try {
-        if (!solanaWallet) throw new Error("Solana wallet not found");
+        if (!solanaWallet) throw WalletInitializationError.notReady();
         const signature = await solanaWallet.signMessage(message, from ?? accounts?.[0]);
         setData(signature);
         return signature;

packages/modal/src/react/solana/hooks/useSignAndSendTransaction.ts

@@ -1,4 +1,4 @@
-import { TransactionOrVersionedTransaction, Web3AuthError } from "@web3auth/no-modal";
+import { type TransactionOrVersionedTransaction, WalletInitializationError, Web3AuthError } from "@web3auth/no-modal";
 import { useCallback, useState } from "react";
 
 import { useSolanaWallet } from "./useSolanaWallet";
@@ -21,6 +21,7 @@ export const useSignTransaction = () => {
       setLoading(true);
       setError(null);
       try {
+        if (!solanaWallet) throw WalletInitializationError.notReady();
         const signedTransaction = await solanaWallet.signTransaction(transaction);
         setData(signedTransaction);
         return signedTransaction;