@vue-solana/vue 0.1.2 → 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
 
@@ -25,25 +25,29 @@ npm install @vue-solana/vue @vue-solana/core @solana/web3-compat
 ## Plugin Setup
 
 ```ts
-import { createApp } from 'vue'
-import { createSolanaPlugin } from '@vue-solana/vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import { createSolanaPlugin } from "@vue-solana/vue";
+import App from "./App.vue";
 
 createApp(App)
-  .use(createSolanaPlugin({
-    cluster: 'devnet'
-  }))
-  .mount('#app')
+  .use(
+    createSolanaPlugin({
+      cluster: "devnet",
+    }),
+  )
+  .mount("#app");
 ```
 
 You can also pass a custom RPC endpoint:
 
 ```ts
-createApp(App).use(createSolanaPlugin({
-  cluster: 'mainnet-beta',
-  endpoint: 'https://your-rpc.example.com',
-  commitment: 'confirmed'
-}))
+createApp(App).use(
+  createSolanaPlugin({
+    cluster: "mainnet-beta",
+    endpoint: "https://your-rpc.example.com",
+    commitment: "confirmed",
+  }),
+);
 ```
 
 Supported clusters are `mainnet-beta`, `devnet`, `testnet`, and `localnet`. Use `mainnet-beta` for Solana mainnet; this is Solana's official cluster name.
@@ -58,16 +62,9 @@ https://faucet.solana.com
 
 ```vue
 <script setup lang="ts">
-import { useRpc } from '@vue-solana/vue'
-
-const {
-  cluster,
-  endpoint,
-  status,
-  error,
-  latestBlockhash,
-  checkConnection
-} = useRpc()
+import { useRpc } from "@vue-solana/vue";
+
+const { cluster, endpoint, status, error, latestBlockhash, checkConnection } = useRpc();
 </script>
 
 <template>
@@ -86,11 +83,11 @@ const {
 
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useBalance } from '@vue-solana/vue'
+import { ref } from "vue";
+import { useBalance } from "@vue-solana/vue";
 
-const address = ref('PASTE_A_SOLANA_ADDRESS')
-const { balance, loading, error, refresh } = useBalance(address)
+const address = ref("PASTE_A_SOLANA_ADDRESS");
+const { balance, loading, error, refresh } = useBalance(address);
 </script>
 
 <template>
@@ -107,34 +104,47 @@ 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 { publicKey, connected, connecting, connect, disconnect } = useWallet()
+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
 
 ```ts
-import { useSignAndSendTransaction } from '@vue-solana/vue'
+import { useSignAndSendTransaction } from "@vue-solana/vue";
 
-const { signature, loading, error, execute } = useSignAndSendTransaction()
+const { signature, loading, error, execute } = useSignAndSendTransaction();
 
 await execute(transaction, {
-  skipPreflight: false
-})
+  skipPreflight: false,
+});
 ```
 
 The current wallet must be connected and support either `signAndSendTransaction` or `signTransaction`.
@@ -147,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
 
@@ -168,12 +178,8 @@ Source: [`examples/vue-vite`](https://github.com/vue-solana/vue-solana/tree/main
 If TypeScript cannot resolve `@solana/web3-compat`, add `types/web3-compat.d.ts` to your app:
 
 ```ts
-declare module '@solana/web3-compat' {
-  export type {
-    Commitment,
-    SendOptions,
-    TransactionSignature
-  } from '@solana/web3.js'
+declare module "@solana/web3-compat" {
+  export type { Commitment, SendOptions, TransactionSignature } from "@solana/web3.js";
   export {
     Connection,
     Keypair,
@@ -181,8 +187,8 @@ declare module '@solana/web3-compat' {
     SystemProgram,
     Transaction,
     TransactionInstruction,
-    VersionedTransaction
-  } from '@solana/web3.js'
+    VersionedTransaction,
+  } from "@solana/web3.js";
 }
 ```
 
@@ -190,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

@@ -56,9 +56,13 @@ function useBalance(address, commitment) {
       loading.value = false;
     }
   }
-  vue.watch(() => vue.toValue(address), () => {
-    void refresh();
-  }, { immediate: true });
+  vue.watch(
+    () => vue.toValue(address),
+    () => {
+      void refresh().catch(() => void 0);
+    },
+    { immediate: true }
+  );
   return {
     balance,
     loading,
@@ -70,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
   };
 }
 
@@ -117,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;
@@ -149,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;
         }
       };
@@ -177,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>;
 };
 
-type SolanaConnectionStatus = 'idle' | 'checking' | 'connected' | 'error';
+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>;
 };
 
-type SolanaConnectionStatus = 'idle' | 'checking' | 'connected' | 'error';
+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>;
 };
 
-type SolanaConnectionStatus = 'idle' | 'checking' | 'connected' | 'error';
+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");
 
@@ -54,9 +54,13 @@ function useBalance(address, commitment) {
       loading.value = false;
     }
   }
-  watch(() => toValue(address), () => {
-    void refresh();
-  }, { immediate: true });
+  watch(
+    () => toValue(address),
+    () => {
+      void refresh().catch(() => void 0);
+    },
+    { immediate: true }
+  );
   return {
     balance,
     loading,
@@ -68,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
   };
 }
 
@@ -115,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;
@@ -147,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;
         }
       };
@@ -165,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.2",
+  "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",