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.

`sh npm2yarn npm install ethereum-identity-kit @tanstack/react-query

### Setup

Library uses [Tanstack Query](https://tanstack.com/query) for data fetching, [Wagmi](https://wagmi.sh/) for wallet connection and handling onchain transactions, and a [Transaction provider](https://ethidentitykit.com/docs/transaction-provider) so you need to setup a query client and provider, [Wagmi provider](https://wagmi.sh/react/api/WagmiProvider) with your [Wagmi config](https://wagmi.sh/react/api/createConfig), and add Transaction Provider to your app.

```tsx copy
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:

`tsx copy import 'ethereum-identity-kit/css'

### You're all set!

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

```tsx copy
import { ProfileCard } from 'ethereum-identity-kit'

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

Documentation is available at ethidentitykit.com.