Ethereum Identity Kit

Complete your dapp with the Ethereum identity stack.

Ethereum Ideintity Kit allows you to easily implement Ethereum identity stack into your application.

How to get started with Ethereum Identity Kit:

Install

Install the library using your package manager.

npm install ethereum-identity-kit @tanstack/react-query

Setup

Library uses Tanstack Query for data fetching, Wagmi for wallet connection and handling onchain transactions, and a Transaction provider so you need to setup a query client and provider, Wagmi provider with your Wagmi config, and add Transaction Provider to your app.

import { WagmiProvider } from 'wagmi'
import { wagmiConfig } from '#/lib/wagmi'
import { TransactionProvider } from 'ethereum-identity-kit'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

export default function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={wagmiConfig}>
        <TransactionProvider>
          <Component {...pageProps} />
        </TransactionProvider>
      </WagmiProvider>
    </QueryClientProvider>
  )
}

Apply Styles

Add the following to your layout.tsx or _app.tsx file:

import 'ethereum-identity-kit/css'

You're all set!

Library is typed with TypeScript, which allows for autocompletion and type safety.

import { ProfileCard } from 'ethereum-identity-kit'

export default function Home() {
  return <ProfileCard addressOrName="vitalik.eth" />
  // or 0xd8da6bf26964af9d7eed9e03e53415d37aa96045
}

Documentation is available at ethidentitykit.com.