@vue-solana/vue 0.1.3 → 0.2.0

package/README.md

@@ -9,8 +9,8 @@ New to Solana? Start with the official docs and the project concepts guide:
 - [Solana Documentation](https://solana.com/docs)
 - [Solana RPC Methods](https://solana.com/docs/rpc)
 - [Solana Clusters](https://solana.com/docs/references/clusters)
-- [Vue Solana Concepts Guide](https://github.com/vue-solana/vue-solana/tree/main/apps/docs/content/concepts/solana-for-vue-developers.md)
-- [`@vue-solana/vue` docs](https://github.com/vue-solana/vue-solana/tree/main/apps/docs/content/packages/vue.md)
+- [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)
 
 ## Install
 
@@ -104,23 +104,36 @@ const { balance, loading, error, refresh } = useBalance(address);
 
 ```vue
 <script setup lang="ts">
-import { useWallet } from "@vue-solana/vue";
+import { useWallet, useWallets } from "@vue-solana/vue";
 
+const { wallets, selectedWallet, selectWallet, refreshWallets } = useWallets();
 const { publicKey, connected, connecting, connect, disconnect } = useWallet();
 </script>
 
 <template>
   <section>
+    <button type="button" @click="refreshWallets">Refresh Wallets</button>
+    <button
+      v-for="wallet in wallets"
+      :key="wallet.name"
+      type="button"
+      @click="selectWallet(wallet)"
+    >
+      {{ wallet.name }}
+    </button>
+    <p>Selected: {{ selectedWallet?.name ?? "None" }}</p>
     <p>Connected: {{ connected }}</p>
     <p>Public key: {{ publicKey?.toBase58() }}</p>
     <p v-if="connecting">Connecting...</p>
-    <button type="button" @click="connect">Connect</button>
-    <button type="button" @click="disconnect">Disconnect</button>
+    <button type="button" :disabled="!selectedWallet || connected || connecting" @click="connect">
+      Connect
+    </button>
+    <button type="button" :disabled="!connected" @click="disconnect">Disconnect</button>
   </section>
 </template>
 ```
 
-Browser wallet discovery is not included yet. `connect()` works only after you configure a wallet object that implements `SolanaWallet`.
+Browser wallets are discovered through the Solana Wallet Standard. `connect()` works after selecting a discovered wallet or configuring a custom `SolanaWallet`.
 
 ## Transaction State
 
@@ -144,7 +157,7 @@ This README includes small snippets for quick reference. For a complete runnable
 pnpm dev:vue
 ```
 
-Source: [`examples/vue-vite`](https://github.com/vue-solana/vue-solana/tree/main/examples/vue-vite)
+Docs: [`examples/vue-vite`](https://vue-solana-docs.vercel.app/examples/vue-vite)
 
 ## API
 
@@ -183,4 +196,4 @@ Make sure your `tsconfig.json` includes `types/**/*.d.ts` or another pattern tha
 
 ## Status
 
-This package is early-stage. RPC and balance reads are usable; first-class browser wallet adapter support is planned.
+This package is early-stage. RPC, balance, wallet, and transaction composables are usable.

package/dist/index.cjs

@@ -74,14 +74,63 @@ function useBalance(address, commitment) {
 function useWallet() {
   const solana = useSolana();
   const wallet = solana.wallet;
+  const connecting = vue.ref(false);
+  const disconnecting = vue.ref(false);
+  async function connect() {
+    const activeWallet = wallet.value;
+    if (!activeWallet) {
+      throw new Error("No Solana wallet is configured");
+    }
+    connecting.value = true;
+    try {
+      const connection = activeWallet.connect();
+      vue.triggerRef(wallet);
+      await connection;
+      vue.triggerRef(wallet);
+      console.info("[Vue Solana] Wallet connected", {
+        publicKey: activeWallet.publicKey?.toBase58() ?? null
+      });
+    } catch (error) {
+      vue.triggerRef(wallet);
+      console.error("[Vue Solana] Wallet connection failed", error);
+      throw error;
+    } finally {
+      connecting.value = false;
+    }
+  }
+  async function disconnect() {
+    const activeWallet = wallet.value;
+    if (!activeWallet) {
+      return;
+    }
+    const publicKey = activeWallet.publicKey?.toBase58() ?? null;
+    disconnecting.value = true;
+    try {
+      await activeWallet.disconnect();
+      vue.triggerRef(wallet);
+      console.info("[Vue Solana] Wallet disconnected", { publicKey });
+    } catch (error) {
+      vue.triggerRef(wallet);
+      console.error("[Vue Solana] Wallet disconnection failed", error);
+      throw error;
+    } finally {
+      disconnecting.value = false;
+    }
+  }
+  const isConnecting = vue.computed(() => Boolean(connecting.value || wallet.value?.connecting));
+  const isDisconnecting = vue.computed(
+    () => Boolean(disconnecting.value || wallet.value?.disconnecting)
+  );
   return {
     wallet,
     publicKey: vue.computed(() => wallet.value?.publicKey ?? null),
     connected: vue.computed(() => Boolean(wallet.value?.connected && wallet.value.publicKey)),
-    connecting: vue.computed(() => Boolean(wallet.value?.connecting)),
+    connecting: isConnecting,
+    disconnecting: isDisconnecting,
+    loading: vue.computed(() => isConnecting.value || isDisconnecting.value),
     setWallet: solana.setWallet,
-    connect: () => wallet.value?.connect() ?? Promise.reject(new Error("No Solana wallet is configured")),
-    disconnect: () => wallet.value?.disconnect() ?? Promise.resolve()
+    connect,
+    disconnect
   };
 }
 
@@ -121,14 +170,27 @@ function useSignAndSendTransaction() {
   });
 }
 
+function useWallets() {
+  const solana = useSolana();
+  return {
+    wallets: solana.wallets,
+    selectedWallet: solana.selectedWallet,
+    refreshWallets: solana.refreshWallets,
+    selectWallet: solana.selectWallet
+  };
+}
+
 function createSolanaPlugin(options = {}) {
   return {
     install(app) {
       const context = core.createSolanaContext(options);
       const wallet = vue.shallowRef(options.wallet ?? null);
+      const wallets = vue.shallowRef([]);
+      const selectedWallet = vue.shallowRef(null);
       const status = vue.ref("idle");
       const error = vue.ref(null);
       const latestBlockhash = vue.ref(null);
+      let unsubscribeWallets = null;
       async function checkConnection() {
         status.value = "checking";
         error.value = null;
@@ -153,14 +215,36 @@ function createSolanaPlugin(options = {}) {
           console.error("[Vue Solana] Connection failed", cause);
         }
       }
+      function refreshWallets() {
+        unsubscribeWallets ??= core.subscribeSolanaWallets(refreshWallets);
+        wallets.value = core.getRegisteredSolanaWallets();
+        if (selectedWallet.value) {
+          selectedWallet.value = wallets.value.find((nextWallet) => nextWallet.name === selectedWallet.value?.name) ?? null;
+          if (!selectedWallet.value) {
+            wallet.value = options.wallet ?? null;
+          }
+        }
+      }
+      function selectWallet(nextWallet) {
+        selectedWallet.value = nextWallet;
+        wallet.value = nextWallet ? core.adaptSolanaStandardWallet(nextWallet, {
+          chain: core.getSolanaChain(context.cluster),
+          onChange: () => vue.triggerRef(wallet)
+        }) : options.wallet ?? null;
+      }
       const vueContext = {
         ...context,
         wallet,
         status,
         error,
         latestBlockhash,
+        wallets,
+        selectedWallet,
         checkConnection,
+        refreshWallets,
+        selectWallet,
         setWallet(nextWallet) {
+          selectedWallet.value = null;
           wallet.value = nextWallet;
         }
       };
@@ -181,3 +265,4 @@ exports.useSignAndSendTransaction = useSignAndSendTransaction;
 exports.useSolana = useSolana;
 exports.useTransaction = useTransaction;
 exports.useWallet = useWallet;
+exports.useWallets = useWallets;

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as vue from 'vue';
 import { MaybeRefOrGetter, Ref, InjectionKey, App } from 'vue';
 import { PublicKey, Commitment, TransactionSignature } from '@solana/web3-compat';
 import * as _vue_solana_core from '@vue-solana/core';
-import { SendTransactionOptions, SolanaContext, SolanaWallet, SolanaConfig } from '@vue-solana/core';
+import { SendTransactionOptions, SolanaContext, SolanaWallet, SolanaWalletInfo, SolanaConfig } from '@vue-solana/core';
 
 declare function useBalance(address: MaybeRefOrGetter<PublicKey | string | null | undefined>, commitment?: Commitment): {
     balance: vue.Ref<number | null, number | null>;
@@ -45,19 +45,32 @@ declare function useWallet(): {
     publicKey: vue.ComputedRef<any>;
     connected: vue.ComputedRef<boolean>;
     connecting: vue.ComputedRef<boolean>;
+    disconnecting: vue.ComputedRef<boolean>;
+    loading: vue.ComputedRef<boolean>;
     setWallet: (wallet: _vue_solana_core.SolanaWallet | null) => void;
     connect: () => Promise<void>;
     disconnect: () => Promise<void>;
 };
 
+declare function useWallets(): {
+    wallets: vue.Ref<_vue_solana_core.SolanaWalletInfo[], _vue_solana_core.SolanaWalletInfo[]>;
+    selectedWallet: vue.Ref<_vue_solana_core.SolanaWalletInfo | null, _vue_solana_core.SolanaWalletInfo | null>;
+    refreshWallets: () => void;
+    selectWallet: (wallet: _vue_solana_core.SolanaWalletInfo | null) => void;
+};
+
 type SolanaConnectionStatus = "idle" | "checking" | "connected" | "error";
 interface VueSolanaContext extends SolanaContext {
     wallet: Ref<SolanaWallet | null>;
     status: Ref<SolanaConnectionStatus>;
     error: Ref<string | null>;
     latestBlockhash: Ref<string | null>;
+    wallets: Ref<SolanaWalletInfo[]>;
+    selectedWallet: Ref<SolanaWalletInfo | null>;
     checkConnection: () => Promise<void>;
     setWallet: (wallet: SolanaWallet | null) => void;
+    refreshWallets: () => void;
+    selectWallet: (wallet: SolanaWalletInfo | null) => void;
 }
 declare const solanaInjectionKey: InjectionKey<VueSolanaContext>;
 
@@ -69,5 +82,5 @@ declare function createSolanaPlugin(options?: VueSolanaPluginOptions): {
 };
 declare const VueSolana: typeof createSolanaPlugin;
 
-export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet };
+export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet, useWallets };
 export type { SolanaConnectionStatus, VueSolanaContext, VueSolanaPluginOptions };

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as vue from 'vue';
 import { MaybeRefOrGetter, Ref, InjectionKey, App } from 'vue';
 import { PublicKey, Commitment, TransactionSignature } from '@solana/web3-compat';
 import * as _vue_solana_core from '@vue-solana/core';
-import { SendTransactionOptions, SolanaContext, SolanaWallet, SolanaConfig } from '@vue-solana/core';
+import { SendTransactionOptions, SolanaContext, SolanaWallet, SolanaWalletInfo, SolanaConfig } from '@vue-solana/core';
 
 declare function useBalance(address: MaybeRefOrGetter<PublicKey | string | null | undefined>, commitment?: Commitment): {
     balance: vue.Ref<number | null, number | null>;
@@ -45,19 +45,32 @@ declare function useWallet(): {
     publicKey: vue.ComputedRef<any>;
     connected: vue.ComputedRef<boolean>;
     connecting: vue.ComputedRef<boolean>;
+    disconnecting: vue.ComputedRef<boolean>;
+    loading: vue.ComputedRef<boolean>;
     setWallet: (wallet: _vue_solana_core.SolanaWallet | null) => void;
     connect: () => Promise<void>;
     disconnect: () => Promise<void>;
 };
 
+declare function useWallets(): {
+    wallets: vue.Ref<_vue_solana_core.SolanaWalletInfo[], _vue_solana_core.SolanaWalletInfo[]>;
+    selectedWallet: vue.Ref<_vue_solana_core.SolanaWalletInfo | null, _vue_solana_core.SolanaWalletInfo | null>;
+    refreshWallets: () => void;
+    selectWallet: (wallet: _vue_solana_core.SolanaWalletInfo | null) => void;
+};
+
 type SolanaConnectionStatus = "idle" | "checking" | "connected" | "error";
 interface VueSolanaContext extends SolanaContext {
     wallet: Ref<SolanaWallet | null>;
     status: Ref<SolanaConnectionStatus>;
     error: Ref<string | null>;
     latestBlockhash: Ref<string | null>;
+    wallets: Ref<SolanaWalletInfo[]>;
+    selectedWallet: Ref<SolanaWalletInfo | null>;
     checkConnection: () => Promise<void>;
     setWallet: (wallet: SolanaWallet | null) => void;
+    refreshWallets: () => void;
+    selectWallet: (wallet: SolanaWalletInfo | null) => void;
 }
 declare const solanaInjectionKey: InjectionKey<VueSolanaContext>;
 
@@ -69,5 +82,5 @@ declare function createSolanaPlugin(options?: VueSolanaPluginOptions): {
 };
 declare const VueSolana: typeof createSolanaPlugin;
 
-export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet };
+export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet, useWallets };
 export type { SolanaConnectionStatus, VueSolanaContext, VueSolanaPluginOptions };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as vue from 'vue';
 import { MaybeRefOrGetter, Ref, InjectionKey, App } from 'vue';
 import { PublicKey, Commitment, TransactionSignature } from '@solana/web3-compat';
 import * as _vue_solana_core from '@vue-solana/core';
-import { SendTransactionOptions, SolanaContext, SolanaWallet, SolanaConfig } from '@vue-solana/core';
+import { SendTransactionOptions, SolanaContext, SolanaWallet, SolanaWalletInfo, SolanaConfig } from '@vue-solana/core';
 
 declare function useBalance(address: MaybeRefOrGetter<PublicKey | string | null | undefined>, commitment?: Commitment): {
     balance: vue.Ref<number | null, number | null>;
@@ -45,19 +45,32 @@ declare function useWallet(): {
     publicKey: vue.ComputedRef<any>;
     connected: vue.ComputedRef<boolean>;
     connecting: vue.ComputedRef<boolean>;
+    disconnecting: vue.ComputedRef<boolean>;
+    loading: vue.ComputedRef<boolean>;
     setWallet: (wallet: _vue_solana_core.SolanaWallet | null) => void;
     connect: () => Promise<void>;
     disconnect: () => Promise<void>;
 };
 
+declare function useWallets(): {
+    wallets: vue.Ref<_vue_solana_core.SolanaWalletInfo[], _vue_solana_core.SolanaWalletInfo[]>;
+    selectedWallet: vue.Ref<_vue_solana_core.SolanaWalletInfo | null, _vue_solana_core.SolanaWalletInfo | null>;
+    refreshWallets: () => void;
+    selectWallet: (wallet: _vue_solana_core.SolanaWalletInfo | null) => void;
+};
+
 type SolanaConnectionStatus = "idle" | "checking" | "connected" | "error";
 interface VueSolanaContext extends SolanaContext {
     wallet: Ref<SolanaWallet | null>;
     status: Ref<SolanaConnectionStatus>;
     error: Ref<string | null>;
     latestBlockhash: Ref<string | null>;
+    wallets: Ref<SolanaWalletInfo[]>;
+    selectedWallet: Ref<SolanaWalletInfo | null>;
     checkConnection: () => Promise<void>;
     setWallet: (wallet: SolanaWallet | null) => void;
+    refreshWallets: () => void;
+    selectWallet: (wallet: SolanaWalletInfo | null) => void;
 }
 declare const solanaInjectionKey: InjectionKey<VueSolanaContext>;
 
@@ -69,5 +82,5 @@ declare function createSolanaPlugin(options?: VueSolanaPluginOptions): {
 };
 declare const VueSolana: typeof createSolanaPlugin;
 
-export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet };
+export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet, useWallets };
 export type { SolanaConnectionStatus, VueSolanaContext, VueSolanaPluginOptions };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { PublicKey } from '@solana/web3-compat';
-import { inject, computed, ref, watch, toValue, shallowRef } from 'vue';
-import { signAndSendTransaction, createSolanaContext } from '@vue-solana/core';
+import { inject, computed, ref, watch, toValue, triggerRef, shallowRef } from 'vue';
+import { signAndSendTransaction, createSolanaContext, adaptSolanaStandardWallet, getSolanaChain, subscribeSolanaWallets, getRegisteredSolanaWallets } from '@vue-solana/core';
 
 const solanaInjectionKey = Symbol("VueSolana");
 
@@ -72,14 +72,63 @@ function useBalance(address, commitment) {
 function useWallet() {
   const solana = useSolana();
   const wallet = solana.wallet;
+  const connecting = ref(false);
+  const disconnecting = ref(false);
+  async function connect() {
+    const activeWallet = wallet.value;
+    if (!activeWallet) {
+      throw new Error("No Solana wallet is configured");
+    }
+    connecting.value = true;
+    try {
+      const connection = activeWallet.connect();
+      triggerRef(wallet);
+      await connection;
+      triggerRef(wallet);
+      console.info("[Vue Solana] Wallet connected", {
+        publicKey: activeWallet.publicKey?.toBase58() ?? null
+      });
+    } catch (error) {
+      triggerRef(wallet);
+      console.error("[Vue Solana] Wallet connection failed", error);
+      throw error;
+    } finally {
+      connecting.value = false;
+    }
+  }
+  async function disconnect() {
+    const activeWallet = wallet.value;
+    if (!activeWallet) {
+      return;
+    }
+    const publicKey = activeWallet.publicKey?.toBase58() ?? null;
+    disconnecting.value = true;
+    try {
+      await activeWallet.disconnect();
+      triggerRef(wallet);
+      console.info("[Vue Solana] Wallet disconnected", { publicKey });
+    } catch (error) {
+      triggerRef(wallet);
+      console.error("[Vue Solana] Wallet disconnection failed", error);
+      throw error;
+    } finally {
+      disconnecting.value = false;
+    }
+  }
+  const isConnecting = computed(() => Boolean(connecting.value || wallet.value?.connecting));
+  const isDisconnecting = computed(
+    () => Boolean(disconnecting.value || wallet.value?.disconnecting)
+  );
   return {
     wallet,
     publicKey: computed(() => wallet.value?.publicKey ?? null),
     connected: computed(() => Boolean(wallet.value?.connected && wallet.value.publicKey)),
-    connecting: computed(() => Boolean(wallet.value?.connecting)),
+    connecting: isConnecting,
+    disconnecting: isDisconnecting,
+    loading: computed(() => isConnecting.value || isDisconnecting.value),
     setWallet: solana.setWallet,
-    connect: () => wallet.value?.connect() ?? Promise.reject(new Error("No Solana wallet is configured")),
-    disconnect: () => wallet.value?.disconnect() ?? Promise.resolve()
+    connect,
+    disconnect
   };
 }
 
@@ -119,14 +168,27 @@ function useSignAndSendTransaction() {
   });
 }
 
+function useWallets() {
+  const solana = useSolana();
+  return {
+    wallets: solana.wallets,
+    selectedWallet: solana.selectedWallet,
+    refreshWallets: solana.refreshWallets,
+    selectWallet: solana.selectWallet
+  };
+}
+
 function createSolanaPlugin(options = {}) {
   return {
     install(app) {
       const context = createSolanaContext(options);
       const wallet = shallowRef(options.wallet ?? null);
+      const wallets = shallowRef([]);
+      const selectedWallet = shallowRef(null);
       const status = ref("idle");
       const error = ref(null);
       const latestBlockhash = ref(null);
+      let unsubscribeWallets = null;
       async function checkConnection() {
         status.value = "checking";
         error.value = null;
@@ -151,14 +213,36 @@ function createSolanaPlugin(options = {}) {
           console.error("[Vue Solana] Connection failed", cause);
         }
       }
+      function refreshWallets() {
+        unsubscribeWallets ??= subscribeSolanaWallets(refreshWallets);
+        wallets.value = getRegisteredSolanaWallets();
+        if (selectedWallet.value) {
+          selectedWallet.value = wallets.value.find((nextWallet) => nextWallet.name === selectedWallet.value?.name) ?? null;
+          if (!selectedWallet.value) {
+            wallet.value = options.wallet ?? null;
+          }
+        }
+      }
+      function selectWallet(nextWallet) {
+        selectedWallet.value = nextWallet;
+        wallet.value = nextWallet ? adaptSolanaStandardWallet(nextWallet, {
+          chain: getSolanaChain(context.cluster),
+          onChange: () => triggerRef(wallet)
+        }) : options.wallet ?? null;
+      }
       const vueContext = {
         ...context,
         wallet,
         status,
         error,
         latestBlockhash,
+        wallets,
+        selectedWallet,
         checkConnection,
+        refreshWallets,
+        selectWallet,
         setWallet(nextWallet) {
+          selectedWallet.value = null;
           wallet.value = nextWallet;
         }
       };
@@ -169,4 +253,4 @@ function createSolanaPlugin(options = {}) {
 }
 const VueSolana = createSolanaPlugin;
 
-export { VueSolana, createSolanaPlugin, solanaInjectionKey, useBalance, useConnection, useRpc, useSignAndSendTransaction, useSolana, useTransaction, useWallet };
+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.1.3",
+  "version": "0.2.0",
   "description": "Vue plugin and composables for Solana applications.",
   "license": "MIT",
   "keywords": [
@@ -38,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@vue-solana/core": "0.1.2"
+    "@vue-solana/core": "0.2.0"
   },
   "peerDependencies": {
     "@solana/web3-compat": "^0.0.21",