Vue components to interact with the Archway network
Please note that this library only supports Vue 3.
npm install @archway-kit/vue
It also requires the Vue project to have the following tools installed:
- Tailwind CSS (https://tailwindcss.com/docs/guides/vite or https://tailwindcss.com/docs/guides/nuxtjs)
Then you have to add the following value to the content array in your tailwind.config.js
file:
content: [
// ...
"./node_modules/@archway-kit/vue/dist/*.js"
],
plugins: [
// ...
require('@archway-kit/tailwind-plugin')({
// ...plugin config
}),
]
See details about configuring the Archway tailwind plugin here.
Shows a button to connect your wallet (Keplr, Cosmostation, Leap, WalletConnect) and after a successful connection, it displays the connected account info and a disconnect button.
<script setup>
import { ConstantineChainInfo } from '@archway-kit/wallet';
</script>
<template>
<UserToolbar :chain-info="ConstantineChainInfo" />
</template>
Then the connected account can be accessed from the useWallet()
composable:
<script setup>
import { useWallet } from '@archway-kit/vue';
const { isAuthenticated, address, name, connectedWallet, isLoading, disconnect } = useWallet();
</script>
To enable WalletConnect wallets in UserToolbar
, install walletconnectVuePlugin
from this package, providing you WalletConnect Project ID (you can create one here), along with some additional app-level config:
vueApp.use(walletconnectVuePlugin, {
// required
projectId: yourProjectId,
// optional
/** Custom WalletConnect relay URL */
relayUrl: 'wss://relay.walletconnect.com',
/** Your dapp metadata to show when connecting to a wallet */
appMetadata: {
name: 'MyDapp',
description: 'Your brand new super dapp on Archway!',
url: 'https://mydapp.com'
icons: ['https://mydapp.com/logo.png']
},
/** Methods to ask permission from wallet to call */
methods: ['cosmos_signDirect', 'cosmos_signAmino', 'cosmos_getAccounts'],
/** Enable additional console.log messages from WalletConnect */
debug: true,
});
For full documentation about the Archway Network and its ecosystem, visit Archway Docs.
For help, discussion about best practices, or any other conversation that would benefit from being searchable: