@archway-kit/vue

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:

Discuss Archway Kit on GitHub