DocsInstallation

Welcome to Ethereum Identity Kit

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

[!NOTE] Ethereum Identity Kit is a React component library. > Supprt for other frameworks coming soon.

Getting Started

Install

Install the library using your package manager.

npm install ethereum-identity-kit wagmi viem@2.x @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'

If you are using dark className prop to handle dark mode, componentss will automatically adapt to the color scheme of your application.

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
}

Troubleshooting

If you are hitting the following error trying to run your project:

Error: cannot use import statement outside a module

Make sure to transpile ethereum-identity-kit in your next.config.mjs:

transpilePackages: ['ethereum-identity-kit'],

Are you experiencing issues with the library? Report an issue

Profile Card