@amax/amaxwallet-adapter-vue-hooks provides a useWallet() hook which will make it easy to "Connect Wallet" and listen to the state change for developers.
npm install @amax/amaxwallet-adapter-vue-hooks @amax/abstract-adapter @amax/amaxwallet-adapters
# or pnpm install @amax/amaxwallet-adapter-vue-hooks @amax/abstract-adapter @amax/amaxwallet-adapters
# or yarn install @amax/amaxwallet-adapter-vue-hooks @amax/abstract-adapter @amax/amaxwallet-adapters@amax/amaxwallet-adapter-vue-hooks uses Provide / Inject in Vue to maintain a shared data. So developers need to wrap App content within the WalletProvider.
You can provide a onError callback to handle various errors such as WalletConnectionError, WalletNotFoundError.
Here is a Demo project;
<script setup>
import { defineComponent, h } from 'vue';
import { WalletProvider, useWallet } from '@amax/amaxwallet-adapter-vue-hooks';
import { ArmodilloAdapter } from '@amax/amaxwallet-adapters';
const armodilloAdapter = new ArmodilloAdapter();
const adapters = [armodilloAdapter];
function onConnect(address) {
console.log('[wallet hooks] onConnect: ', address);
}
function onDisconnect() {
console.log('[wallet hooks] onDisconnect');
}
const VueComponent = defineComponent({
setup() {
// Here you can use `useWallet` API
const { wallet, connect, signMessage, signTransaction } = useWallet();
return () =>
h('div', [
h('div', { style: 'color: #222;' }, `Current Adapter: ${(wallet && wallet.adapter.name) || ''}`),
]);
},
});
</script>
<template>
<WalletProvider :adapters="adapters" @connect="onConnect" @disconnect="onDisconnect">
<VueComponent />
</WalletProvider>
</template>WalletProvider and useWallet work together. WalletProvider use provide() in Vue to provide a shared state. useWallet use inject() to get the shared state. Developers need to wrap application components with WalletProvider.
<html>
<WalletProvider>/* here is application components */</WalletProvider>
</html>
<script setup>
import { useWallet, WalletProvider } from '@amax/amaxwallet-adapter-vue-hooks';
</script>- Required:
false - Type:
Adapter[] - Default:
[ new ArmodilloAdapter() ]
Used to specify what wallet adapters are supported. All wallet adapters can be imported from @amax/amaxwallet-adapters package or their standalone package.
- Example
<template> <WalletProvider :adapters="adapters">/* here is application components */</WalletProvider> </template> <script setup> import { useWallet, WalletProvider } from '@amax/amaxwallet-adapter-vue-hooks'; import { ArmodilloAdapter } from '@amax/amaxwallet-adapters'; const adapters = [new ArmodilloAdapter()]; </script>
- Required:
false - Type:
boolean - Default:
true
Whether connect to the specified wallet automatically after a wallet is selected.
- Required:
false - Type:
boolean - Default:
false
Whether automatically connect to current selected wallet after the page is loaded when autoConnect enabled.
If you don't want to connect the wallet when page is first loaded, set disableAutoConnectOnLoad: true.
- Required:
false - Type:
string - Default:
amaxAdapterName
Specified the key used to cache wallet name in localStorage. When user select a wallet, applications will cache the wallet name to localStorage.
You can provide event handlers for listen adapter events, such as connect,disconnect,accountsChanged. Available events and their types are as follows:
-
readyStateChanged: (readyState: 'Found' | 'NotFound') => void: Emits when current adapter emitsreadyStateChangedevent. -
connect: (address: string) => void: Emits when current adapter emitsconnectevent. -
disconnect: () => void: Emits when current adapter emitsdisconnectevent. -
accountsChanged: (newAddress: string; preAddress?: string) => void: Emits when current adapter emitsaccountsChangedevent. -
error: (error) => void: Emits when occurs error in methods calls.
An event named adapterChanged is also avaliable to get noticed when selected adapter is changed.
-
adapterChanged: (adapter: Adapter | undefined) => void: Called when current adapter is changed.
Here is an example:
```html
<template>
<WalletProvider :adapters="adapters" @accountsChanged="onAccountsChanged">/* here is application components */</WalletProvider>
</template>
<script setup>
import { useWallet, WalletProvider } from '@amax/amaxwallet-adapter-vue-hooks';
import { ArmodilloAdapter } from '@amax/amaxwallet-adapters';
const adapters = [new ArmodilloAdapter()];
function onAccountsChanged(curAddress, preAddress) {}
</script>
```
useWallet is a Vue hook providing a set of properties and methods which can be used to select and connect wallet, get wallet state and so on.
useWallet()must be used in the descendant components ofWalletProvider!
- Type:
ComputedRef<boolean>Synchronous withautoConnectproperty passed toWalletProvider.
- Type:
ComputedRef<boolean>Synchronous withdisableAutoConnectOnLoadproperty passed toWalletProvider.
- Type:
ComputedRef<Wallet | null>The wallet current selected. If no wallet is selected, the value isnull.
Wallet is defined as follow:
interface Wallet {
adapter: Adapter; // wallet adapter
state: AdapterState;
}
enum AdapterState {
NotFound = 'NotFound',
Disconnect = 'Disconnected',
Connected = 'Connected',
}- Type:
ComputedRef<Account | null>Account of current selected wallet. If no wallet is selected, the value isnull.
- Type:
Ref<Wallet[]>Wallet list based on current used adapters when initialWalletProvider.
- Type:
Ref<boolean>Indicate if is connecting to the wallet.
- Type:
Ref<boolean>Indicate if is connected with the wallet.
- Type:
Ref<boolean>Indicate if is connecting to the wallet.
- Type:
(walletAdapterName: AdapterName) => voidSelect a wallet by walletAdapterName.
- Type:
() => Promise<void>Connect to current selected wallet.
- Type:
() => Promise<void>Disconnect from current selected wallet.
- Type: `(actions: Actions[]) => Promise; Push a transaction.
- Type:
(message: string) => Promise<string>Sign a message.
<template>
<div>
<button type="button" @click="() => select('Armodillo')">Select Armodillo</button>
<button type="button" :disabled="connected" @click="connect">Connect</button>
<button type="button" :disabled="!connected" @click="disconnect">Disconnect</button>
</div>
</template>
<script setup>
import { useWallet } from '@amax/amaxwallet-adapter-vue-hooks';
import { AdapterName } from '@amax/abstract-adapter';
const { connect, disconnect, select, connected } = useWallet();
</script>