@vue-solana/vue 0.2.0 → 0.2.1

package/README.md

@@ -11,6 +11,7 @@ New to Solana? Start with the official docs and the project concepts guide:
 - [Solana Clusters](https://solana.com/docs/references/clusters)
 - [Vue Solana Concepts Guide](https://vue-solana-docs.vercel.app/concepts/solana-for-vue-developers)
 - [`@vue-solana/vue` docs](https://vue-solana-docs.vercel.app/packages/vue)
+- [Live demo](https://vue-solana-docs.vercel.app/demo)
 
 ## Install
 
@@ -157,7 +158,9 @@ This README includes small snippets for quick reference. For a complete runnable
 pnpm dev:vue
 ```
 
-Docs: [`examples/vue-vite`](https://vue-solana-docs.vercel.app/examples/vue-vite)
+Docs: <a href="https://vue-solana-docs.vercel.app/examples/vue-vite" target="_blank" rel="noopener noreferrer"><code>examples/vue-vite</code></a>
+
+Live demo: [vue-solana-docs.vercel.app/demo](https://vue-solana-docs.vercel.app/demo)
 
 ## API
 

package/dist/index.cjs

@@ -180,6 +180,7 @@ function useWallets() {
   };
 }
 
+const RPC_CHECK_TIMEOUT_MS = 1e4;
 function createSolanaPlugin(options = {}) {
   return {
     install(app) {
@@ -191,7 +192,9 @@ function createSolanaPlugin(options = {}) {
       const error = vue.ref(null);
       const latestBlockhash = vue.ref(null);
       let unsubscribeWallets = null;
+      let rpcCheckId = 0;
       async function checkConnection() {
+        const checkId = ++rpcCheckId;
         status.value = "checking";
         error.value = null;
         console.info("[Vue Solana] Checking RPC connection", {
@@ -200,7 +203,14 @@ function createSolanaPlugin(options = {}) {
           wsEndpoint: context.wsEndpoint
         });
         try {
-          const blockhash = await context.connection.getLatestBlockhash();
+          const blockhash = await withTimeout(
+            context.connection.getLatestBlockhash(),
+            RPC_CHECK_TIMEOUT_MS,
+            `RPC connection check timed out after ${RPC_CHECK_TIMEOUT_MS / 1e3} seconds.`
+          );
+          if (checkId !== rpcCheckId) {
+            return;
+          }
           latestBlockhash.value = blockhash.blockhash;
           status.value = "connected";
           console.info("[Vue Solana] Connected", {
@@ -210,6 +220,9 @@ function createSolanaPlugin(options = {}) {
             blockhash
           });
         } catch (cause) {
+          if (checkId !== rpcCheckId) {
+            return;
+          }
           status.value = "error";
           error.value = cause instanceof Error ? cause.message : String(cause);
           console.error("[Vue Solana] Connection failed", cause);
@@ -254,6 +267,19 @@ function createSolanaPlugin(options = {}) {
   };
 }
 const VueSolana = createSolanaPlugin;
+function withTimeout(promise, timeoutMs, message) {
+  let timeoutId;
+  const timeout = new Promise((_, reject) => {
+    timeoutId = setTimeout(() => {
+      reject(new Error(message));
+    }, timeoutMs);
+  });
+  return Promise.race([promise, timeout]).finally(() => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  });
+}
 
 exports.VueSolana = VueSolana;
 exports.createSolanaPlugin = createSolanaPlugin;

package/dist/index.mjs

@@ -178,6 +178,7 @@ function useWallets() {
   };
 }
 
+const RPC_CHECK_TIMEOUT_MS = 1e4;
 function createSolanaPlugin(options = {}) {
   return {
     install(app) {
@@ -189,7 +190,9 @@ function createSolanaPlugin(options = {}) {
       const error = ref(null);
       const latestBlockhash = ref(null);
       let unsubscribeWallets = null;
+      let rpcCheckId = 0;
       async function checkConnection() {
+        const checkId = ++rpcCheckId;
         status.value = "checking";
         error.value = null;
         console.info("[Vue Solana] Checking RPC connection", {
@@ -198,7 +201,14 @@ function createSolanaPlugin(options = {}) {
           wsEndpoint: context.wsEndpoint
         });
         try {
-          const blockhash = await context.connection.getLatestBlockhash();
+          const blockhash = await withTimeout(
+            context.connection.getLatestBlockhash(),
+            RPC_CHECK_TIMEOUT_MS,
+            `RPC connection check timed out after ${RPC_CHECK_TIMEOUT_MS / 1e3} seconds.`
+          );
+          if (checkId !== rpcCheckId) {
+            return;
+          }
           latestBlockhash.value = blockhash.blockhash;
           status.value = "connected";
           console.info("[Vue Solana] Connected", {
@@ -208,6 +218,9 @@ function createSolanaPlugin(options = {}) {
             blockhash
           });
         } catch (cause) {
+          if (checkId !== rpcCheckId) {
+            return;
+          }
           status.value = "error";
           error.value = cause instanceof Error ? cause.message : String(cause);
           console.error("[Vue Solana] Connection failed", cause);
@@ -252,5 +265,18 @@ function createSolanaPlugin(options = {}) {
   };
 }
 const VueSolana = createSolanaPlugin;
+function withTimeout(promise, timeoutMs, message) {
+  let timeoutId;
+  const timeout = new Promise((_, reject) => {
+    timeoutId = setTimeout(() => {
+      reject(new Error(message));
+    }, timeoutMs);
+  });
+  return Promise.race([promise, timeout]).finally(() => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  });
+}
 
 export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet, useWallets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-solana/vue",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Vue plugin and composables for Solana applications.",
   "license": "MIT",
   "keywords": [
@@ -38,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@vue-solana/core": "0.2.0"
+    "@vue-solana/core": "0.2.1"
   },
   "peerDependencies": {
     "@solana/web3-compat": "^0.0.21",