Documentation Index
Fetch the complete documentation index at: https://docs.walletkit.com/llms.txt
Use this file to discover all available pages before exploring further.
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. 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. 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>
)
}
