@archway-kit/vue/README.md

Vue components to interact with the Archway network

<h3 align="center">
  @archway-kit/vue
</h3>

<p align="center">
  Vue components to interact with the Archway network
</p>

## Installation

Please note that **this library only supports Vue 3**.

```sh
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:

```js
  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](../@archway-kit-tailwind-plugin/README.md).

## 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.

```html
<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:

```html
<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](https://cloud.walletconnect.com)), along with some additional app-level config:

```ts
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](https://docs.archway.io).

## Community

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

[Discuss Archway Kit on GitHub](https://github.com/archway-network/archway-kit/discussions)