Didit-SDK

The best way to connect a wallet

Didit-SDK is a React library that makes it easy to add wallet connection to your dapp.

• ✅ Didit User Authentication flow
• 🔥 Out-of-the-box wallet management
• ✅ Easily customizable
• 🦄 Built on top of rainbowkit, wagmi and viem

Try it out

You can use the CodeSandbox links below try out Didit Sdk:

• with Vite-React // TODO: setup example on codesandbox

Examples

The following examples are provided in the examples folder of this repo.

• with-vite-react

The example contains a first view 'localhost:3030' where you can test the ConnetButton and a second view 'localhost:3030/status' where you can login, logout and check the auth status from with you own buttons and hooks!

Running examples

To run an example locally, install dependencies.

pnpm install

Then go into an example directory, eg: with-vite-react.

cd examples/with-vite-react

Then run the dev script.

pnpm run dev

Installation

integrate didit-sdk into your project.

install didit-sdk and its peer dependencies, wagmi and viem.

npm install didit-sdk didit-provider wagmi viem

Note: RainbowKit is a React library.

Import

Import didit-sdk and wagmi.

import 'didit-sdk/styles.css';

import { getDefaultWallets, DiditAuthProvider, darkTheme } from 'didit-sdk';
import { DiditProvider } from 'didit-provider';
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum, base, zora } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

Configure

Configure your desired chains and generate the required connectors. You will also need to setup a wagmi config.

Note: Every dApp that relies on WalletConnect now needs to obtain a projectId from WalletConnect Cloud. This is absolutely free and only takes a few minutes.

...
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, publicClient } = configureChains(
  [mainnet, polygon, optimism, arbitrum, base, zora],
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
    publicProvider()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'App with Didit',
  projectId: 'YOUR_PROJECT_ID',
  chains
});

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient
})

Read more about configuring chains & providers with wagmi.

Setup providers

1. Set up the DiditProvider pass clientUrl (str) URL to your backend server [i.e: 'http://127.0.0.1:8000/avatar/integrations']

  <DiditProvider clientUrl="https://apx.dev.didit.me/profile/authorizations/v1">

2. Set up DiditAuthProvider

Pass the next parameters to the provider:

• chains (str): Wagmi config of the requested chain [i.e: wagmiConfig.chains]
• theme (str): theme function to customize RainbowKit UI to match your branding. there are 3 built-in theme functions:
  • lightTheme   (default)
  • darkTheme
  • midnightTheme refer to RainbowKit Theming for more.

  <DiditAuthProvider chains={chains} theme={darkTheme()}>

Wrap providers

Wrap your application with DiditProvider, DiditAuthProvider and WagmiConfig.

const App = () => {
  return (
    <WagmiConfig config={wagmiConfig}>
      <DiditProvider clientUrl="https://apx.dev.didit.me/profile/authorizations/v1">
        <DiditAuthProvider chains={chains} theme={darkTheme()}>
          {children}
        </DiditAuthProvider>
      </DiditProvider>
    </WagmiConfig>
  );
};

Add the connect button

Then, in your app, import and render the ConnectButton component.

import { ConnectButton } from 'didit-sdk';

export const YourApp = () => {
  return <ConnectButton />;
};

Retrieve the accessToken & walletAddress

import { useDiditStatus } from 'didit-sdk';
// 'loading' | 'authenticated' | 'unauthenticated'
const Component = () => {
  const { address, token, status, error } = useDiditStatus();
  return (
    <div>
      {status === 'authenticated' && <span>token: {token}</span>}
      <span>address: {address}</span>
    </div>
  );
};

• address: connected address
• token: provided accessToken
• status: "loading" | "authenticated" | "unauthenticated"
• error: any error from within the SDK

Login & Logout functions

import { useAuthenticationAdapter, useConnectModal } from 'didit-sdk';

const Component = () => {
  const adapter = useAuthenticationAdapter();
  const { openConnectModal } = useConnectModal();
  return (
    <>
      <button onClick={() => adapter.signOut()}>LOGOUT</button>
      {openConnectModal && (
        <button onClick={() => openConnectModal()}>LOGIN</button>
      )}
    </>
  );
};