Quick Start

Installation

Install the packages

npm install @nabla-studio/chain-registry @quirks/vue @quirks/store @quirks/wallets

If you are using version v1 of Yarn, you need to manually install the peer dependencies as this version does not automatically resolve them.

Setup

Import and configure quirksPlugin inside your main.ts.

main.ts

import { ,  } from "@nabla-studio/chain-registry";
import {  } from "@quirks/vue";
import { Config } from "@quirks/store";
import { ,  } from "@quirks/wallets";
import {  } from "vue";
import  from "./app";
 
const  = ();
 
// Setup the configuration
const : Config = {
  : [, ], // use a list of wallet, like keplr and leap, from wallets
  : [], // use a list of chains, like osmosis, from chain-registry
  : [], // use a list of assetlist, like the osmosis one, from chain-registry
};
 
.(, ).("#root");

Connect a wallet

Provide the button for connecting/disconnecting a wallet.

<script setup lang="ts">
import { useConnect } from "@quirks/vue";
 
const { connect, disconnect, connected } = useConnect();
</script>
 
<template>
  <button @click="disconnect" v-if="connected">Disconnect</button>
  <button @click="connect('keplrextension')" v-else>Connect</button>
</template>

Allow user to choose a wallet

Provide the user with a multiple choice of wallets.

<script setup lang="ts">
import { useConnect, useConfig } from "@quirks/vue";
 
const { connect, disconnect, connected } = useConnect();
const { wallets } = useConfig();
</script>
 
<template>
  <button @click="disconnect" v-if="connected">Disconnect</button>
  <div v-else>
    <div v-for="wallet in wallets" :key="wallet.options.wallet_name">
      <button @click="connect(wallet.options.wallet_name)">
        <img
          :src="wallet.logoLight"
          :alt="wallet.options.pretty_name"
          height="48px"
          width="48px"
          :style="{ width: '48px', height: '48px' }"
        />
      </button>
 
      <a
        :href="
          wallet.options.platforms && wallet.options.platforms.length > 0
            ? wallet.options.platforms[0].install_link
            : '#'
        "
        target="_blank"
        v-if="!wallet.injected"
      >
        Install
      </a>
    </div>
  </div>
</template>

Available Hooks