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

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 0x983110309620d911731ac0932219af06091b6744
}

Documentation is available at ethidentitykit.com.