Installation

React
wagmi

Create a React project

If you haven’t already, create a React project using your preferred stack. Some popular options are Vite and Next.JS.

npm create vite@latest

Install the WalletKit SDK

npm install @walletkit/react-link walletkit-js

Setup WalletKitLink & WalletKitLinkProvider

Initialize WalletKitLink with your Project ID and wrap your app with WalletKitLinkProvider, adding it as close to the root as possible.

You can get your Project ID from the API Keys page in the WalletKit dashboard.

import {WalletKitLink} from "@walletkit/react-link"

const wkLink = new WalletKitLink({
  projectId: '<WalletKit-Project-ID>',
});

export function App() {
  return (
    <WalletKitLinkProvider link={wkLink}>
      ...
    </WalletKitLinkProvider>
  )
}

This guide is for wagmi v2

Create a wagmi project

If you haven’t already, follow the steps over at wagmi.sh to create a wagmi project.

  npm init wagmi

Install the WalletKit SDK

  npm i @walletkit/wagmi-link @walletkit/react-link walletkit-js

Add WalletKit connector to wagmi config

In your wagmi config, add the WalletKit connector with your WalletKit Project ID.

You can get your Project ID from the API Keys page in the WalletKit dashboard.

import {walletKitLink} from "@walletkit/wagmi-link";

export const wagmiConfig = createConfig({
  chains: [..],
  transports: {..},
  connectors: [
    walletKitLink({
      projectId: '<WalletKit-Project-ID>',
    }),
  ]
})

Add WalletKitLinkWagmiProvider

Wrap your app in WalletKitLinkWagmiProvider, adding it right after WagmiProvider and QueryClientProvider.

  import {WalletKitLinkWagmiProvider} from "@walletkit/wagmi-link"

  export function App() {
    return (
      <WagmiProvider config={wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          <WalletKitLinkWagmiProvider>
            ...
          </WalletKitLinkWagmiProvider>
        </QueryClientProvider>
      </WagmiProvider>
    )
  }

Welcome

Link

Wallets API