Installation

Install RabbyKit and its peer dependencies (@wagmi/core (opens in a new tab) and viem (opens in a new tab)).

npm i @rabby-wallet/rabbykit @wagmi/core viem@2.x

API Keys

  1. RabbyKit utilises https://walletconnect.com/'s SDK to help with connecting wallets. WalletConnect 2.0 requires a projectId which you can create quickly and easily for free over at WalletConnect Cloud (opens in a new tab).
  2. wagmi (opens in a new tab) recommends using other provider packages such as Infura (opens in a new tab) or Alchemy (opens in a new tab) depending on the specific network requirements of your dApp. These providers offer reliable infrastructure and can be chosen based on your specific needs.

Config

create a config using wagmi's createConfig and create a RabbyKit config;

app.ts
import { createModal, getDefaultConfig } from "@rabby-wallet/rabbykit";
import { createConfig, http } from "@wagmi/core";
import { arbitrum, bsc, mainnet, optimism, polygon } from "@wagmi/core/chains";
 
export const config = createConfig(
  getDefaultConfig({
    appName: "RabbyKit example",
    projectId: "58a22d2bc1c793fc31c117ad9ceba8d9",
    chains: [mainnet, arbitrum, bsc, optimism, polygon],
    transports: {
      [mainnet.id]: http(),
      [arbitrum.id]: http(),
      [bsc.id]: http(),
      [optimism.id]: http(),
      [polygon.id]: http(),
    },
  })
);
 
export const rabbykit = createModal({
  wagmi: config,
});
 
rabbykit.open();
 
console.log("current rabbykit modal open status:", rabbykit.getOpenState());
 
rabbykit.close();

MigrateActions