Connect

Connect your dapp with the JoyID which enables your dapp to interact with its users' Nervos CKB accounts. Nervos CKB is a public permissionless blockchain and the layer 1 of Nervos. See Nervos Docs ↗ (opens in a new tab) for more details.

In this integration guide, we will use @joyid/ckb SDK to connect to JoyID wallet with Nervos CKB network.

Initialization

Before writing business code, you can call the initialization function initConfig on the project entry:

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { initConfig } from "@joyid/ckb";
import App from "./App";
import "./index.css";
 
initConfig({
  name: "JoyID demo",
  logo: "https://fav.farm/🆔",
  joyidAppURL: "https://testnet.joyid.dev",
});
 
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Get Started

Let's start the journey of business code programming. Suppose you have the following code:

App.tsx

import * as React from 'react'
import './style.css'
 
export default function App() {
  return (
    <div>
      <h1>Hello JoyID!</h1>
    </div>
  )
}

To connect with JoyID, we just need to add a button element and listen to the onClick event:

App.tsx

import * as React from 'react'
import { connect } from '@joyid/ckb'
import './style.css'
 
export default function App() {
  const onConnect = async () => {
    try {
      const authData = await connect()
      console.log(`JoyID user info:`, authData)
    } catch (error) {
      console.log(error)
    }
  }
 
  return (
    <div>
      <h1>Hello JoyID!</h1>
      <button onClick={onConnect}>Connect JoyID</button>
    </div>
  )
}

Try it out

Ethereum Provider Sign Message