Quick Start

Installation

Install the packages

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

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

Setup

Import and configure QuirksConfig context provider inside your app.tsx or root file.

import { ,  } from "@nabla-studio/chain-registry";
import {  } from "@quirks/react";
import { Config } from "@quirks/store";
import { ,  } from "@quirks/wallets";
import type {  } from "react";
 
// 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
};
 
export const  = ({  }: <unknown>) => {
  // Use the component
  return < ={}>{}</>;
};

Connect a wallet

Provide the button for connecting/disconnecting a wallet.

import {  } from "@quirks/react";
 
export const  = () => {
  const { , ,  } = ();
 
  // If user is connected, provide a disconnect button
  if () {
    return < ={}>Disconnect</>;
  }
 
  // Create button for specific wallet connection (e.g. for the keplr one)
  return < ={() => ("keplrextension")}>Connect</>;
};

Allow user to choose a wallet

Provide the user with a multiple choice of wallets.

import { ,  } from "@quirks/react";
 
export const  = () => {
  // Get the list of wallets
  const {  } = ();
  const { , ,  } = ();
 
  if () {
    return < ={}>Disconnect</>;
  }
 
  return .(() => (
    < ={..}>
      <
        ={() => {
          (..);
        }}
      >
        <
          ={.}
          ={..}
          ="48px"
          ="48px"
        />
      </>
 
      {!. ? (
        <
          ={
            .. && ... > 0
              ? ..[0].
              : "#"
          }
          ="_blank"
        >
          Install
        </>
      ) : null}
    </>
  ));
};

Available Hooks