ZeroKit
ZeroKit is a React library that enables Dapps to authenticate with traditional or social wallets. It's a wrapper around RainbowKit with support for account abstraction "Smart Contract Wallets".
For more information, refer to our docs: https://docs.zerodev.app
Getting started
Install
Install ZeroKit and its peer dependencies, wagmi and ethers.
npm install wagmi ethers zerokit
Register
Register at https://dashboard.zerodev.app. Create a new project and save the project ID for the next step.
Configure
In your React tree, configure ZeroKit. Here is a sample configuration:
index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {
connectorsForWallets,
GoogleConnector,
TwitchConnector,
ZeroKitProvider,
} from 'zerokit';
import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { polygonMumbai } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
// Add enabled chains here, include an Alchemy API key if desired
const { chains, provider, webSocketProvider } = configureChains(
[polygonMumbai],
[
// alchemyProvider({ apiKey: '' }),
publicProvider(),
]
);
// Add your ZeroDev project ID to the social connectors
const connectors = connectorsForWallets([
{
groupName: 'Social',
wallets: [
GoogleConnector({
chains,
// zerodevProjectId: '',
}),
TwitchConnector({
chains,
// zerodevProjectId: '',
}),
],
},
]);
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
webSocketProvider,
});
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<WagmiConfig client={wagmiClient}>
<ZeroKitProvider chains={chains}>
<App />
</ZeroKitProvider>
</WagmiConfig>
</React.StrictMode>
);If you'd like more information on configuration, check out the RainbowKit docs and Wagmi docs.
Usage
You can use ZeroKit in the same way you use RainbowKit:
import { ConnectButton } from 'zerokit';
export const YourApp = () => {
return <ConnectButton />;
};