🎉 @nfid/identitykit@0.0.4 is released.
Getting StartedInstallation

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 to node16 or nodenext or any other with moduleResolution set to node16 or nodenext
{
    "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.

WelcomeConnectWallet