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 />;
};