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@1 viem@1

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 { configureChains, createConfig } from "@wagmi/core";
import { mainnet, arbitrum, bsc, optimism, polygon } from "@wagmi/core/chains";
import { publicProvider } from "@wagmi/core/providers/public";
import { alchemyProvider } from "@wagmi/core/providers/alchemy";
import { infuraProvider } from "@wagmi/core/providers/infura";
import { createModal } from "@rabby-wallet/rabbykit";
 
const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet, arbitrum, bsc, optimism, polygon],
  [
    alchemyProvider({ apiKey: "yourAlchemyApiKey" }),
    infuraProvider({ apiKey: "yourInfuraApiKey" }),
    publicProvider(),
  ]
);
 
const config = createConfig({
  autoConnect: true,
  publicClient,
  webSocketPublicClient,
});
 
export const rabbyKit = createModal({
  chains,
  wagmi: config,
  projectId: "yourProjectId",
  appName: "RabbyKit",
});
 
rabbykit.open();
 
console.log("current rabbykit modal open status:", rabbyKit.getOpenState());
 
rabbykit.close();
IntroductionActions