EFP logo

Start new PR in StackBlitz Codeflow discord chat x account code style: prettier docs

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 ( ) } ``` ### 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 // or 0xd8da6bf26964af9d7eed9e03e53415d37aa96045 } ``` Documentation is available at [ethidentitykit.com](https://ethidentitykit.com).