@archway-kit/vue

@archway-kit/vue

Vue components to interact with the Archway network

Installation

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.

Documentation

UserToolbar

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>

WalletConnect

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,

  /**
   * Additional Chain IDs to request connection for.
   * Useful for bridges when you may need to sign a tx on other chain using the same WalletConnect session
   */
  chainIds: [/* "cosmoshub-1", "mocha-4" etc ... */]
});

More

For full documentation about the Archway Network and its ecosystem, visit Archway Docs.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Archway Kit on GitHub