Get up and running with IdentityKit
Prerequisites
- An ICP project with a frontend canister.
- Node.js version >= 12.7.0
If you use Typescript:
- Typescript version >= 4.7
tsconfig.json
module set tonode16
ornodenext
or any other with moduleResolution set tonode16
ornodenext
{
"compilerOptions": {
"module": "node16",
// or
"moduleResolution": "node16"
}
}
Install
Install IdentityKit:
@nfid/identitykit
- A library to integrate compatible ICP wallets into your application.
React components can be imported from @nfid/identitykit/react
npm i @nfid/identitykit
The bundle needs peer dependencies, be sure that following resources are available in your project as well:
npm i @dfinity/ledger-icp @dfinity/identity @dfinity/agent @dfinity/candid @dfinity/identity @dfinity/principal @dfinity/utils @dfinity/auth-client
Note: IdentityKit is a React library and exports styles, that you need to import in your project.
Import
import "@nfid/identitykit/react/styles.css"
import { IdentityKitProvider } from "@nfid/identitykit/react"
Wrap provider
Wrap your application with IdentityKitProvider
.
const App = () => {
return (
<IdentityKitProvider>
<YourApp />
</IdentityKitProvider>
)
}
Add the connect button
Then, in your app, import and render the ConnectWallet
component.
import { ConnectWallet } from "@nfid/identitykit/react"
export const YourApp = () => {
return <ConnectWallet />;
};
IdentityKit will now handle your user’s wallet selection, display wallet information, and handle wallet switching.