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 @tanstack/react-query

Setup Query Client

Library uses Tanstack Query for data fetching, so you need to setup a query client and provider.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
const queryClient = new QueryClient()
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </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
}

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