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