@didit-sdk/js

v1.0.13

Published

a month ago

Downloads

0High
0Medium
0Low

keddib

alejandrorosas

sdk didit web3 crypto siwe walletconnect gamium ethereum

Didit-SDK

The easiest way to connect to Didit protocol

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

✅ Didit User Authentication flow
🎉 Support for multiple frameworks. Easily integrate with React and vanilla JavaScript. Vue and Svelte are comming soon...
🔥 Out-of-the-box wallet management
🚀 EIP-6963. support for browser extension wallets.
🎨 Easily customizable UI. light/dark or make it match your brand
🦄 Built on top of wagmi

Repository

Didit SDK Github Repo

Try it out

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

with js // TODO: setup example on codesandbox
with react // TODO: setup example on codesandbox
with nextjs // TODO: setup example on codesandbox

Installation

install didit-sdk and its peer dependencies, @wagmi/core, viem and @wagmi/connectors. check how install wagmi/core for more

npm i @didit-sdk/js @wagmi/connectors @wagmi/core viem

Configure your didit app

Create an app at Business Console and obtain your clientid and client secret

Implementation

For a quick integration you can use defaultWagmiConfig function which wraps Wagmi's createConfig function with a predefined configuration. This includes WalletConnect, Coinbase and Injected connectors

In your main.ts file set up the following configuration.

import { arbitrum, mainnet } from '@wagmi/core/chains'
import { createDiditSdk, defaultWagmiConfig } from '@didit-sdk/js'
import { reconnect } from '@wagmi/core'

// Get cleintId from https://business.didit.me
export const clientId = 'k234y324hjsds'

// 1. Create wagmiConfig
const wagmiConfig = defaultWagmiConfig({
  chains: [mainnet, arbitrum],
  metadata: {
    name: 'Js Example',
    url: 'https://didit.me'
  }
})

reconnect(wagmiConfig)

// 2. Create didit sdk
const diditSDk = createDiditSdk({
  wagmiConfig,
  clientId,
  themeMode: 'dark'
})

Trigger the modal

To open didit-sdk modal you can use our web component or build your own button with the sdk actions. In this example we are going to use the <didit-button> component.

Web components are global html elements that don't require importing.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Example</title>
  </head>
  <body>
    <didit-button></didit-button>
    <didit-callback></didit-callback>
    <script type="module" src="main.ts"></script>
  </body>
</html>

<didit-callback> component is essential for socials auth to work check components for more

Actions

Actions are functions that will help you control the modal, subscribe to status change

Open and close the modal

const diditSdk = createDiditSdk({ wagmiConfig, clienId })

diditSdk.open()

diditSdk.close()

Signout

diditSDk.signOut()

Didit State

authentication state

diditSDk.subscribeDiditState(({ isAuthenticated, accessToken, user }) => {
  console.log({
    isAuthenticated,
    accessToken,
    user
  })
})

// or

const { isAuthenticated, accessToken, user } = diditSDk.getDiditState()

Didit state is an object of the following properties:

Ethereum Library

You can use Wagmi actions to sign messages, interact with smart contracts, and much more.

signMessage

Action for signing messages with connected account

import { signMessage } from '@wagmi/core'
import { wagmiConfig } from './main'

await signMessage(wagmiConfig, { message: 'hello world' })

Check more on wagmi docs

Modal State

Get the current value of the modal's state

diditSDk.subscribeDiditModalState(({ isLoading, isOpen }) => {
  console.log({
    isLoading,
    isOpen
  })
})

// or

const { isLoading, isOpen } = diditSDk.getDiditModalState()

The modal state is an object of two properties:

ThemeMode

Set the themeMode after creating the sdk instance

const diditSDk = createDiditSdk({ wagmiConfig, clientId })

diditSDk.setThemeMode('dark')

Get the current themeMode value by calling the getThemeMode function

const diditSDk = createDiditSdk({ wagmiConfig, clientId })

const themeMode = diditSDk.getThemeMode()

themeVariables

Set the themeVariables after creating the sdk instance

const diditSdk = createDiditSdk({ wagmiConfig, projectId })

diditSdk.setThemeVariables({ ... })

Get the current themeVariables value by calling the getThemeVariables function

const diditSdk = createDiditSdk({ wagmiConfig, projectId })

const themeMode = diditSdk.getThemeVariables()

Subscribe to theme changes

const unsubscribe = diditSdk.subscribeTheme(newTheme => console.log(newTheme))

For more readt Didit Sdk docs