Connect

In this guide, we will use the @joyid/ckb SDK connect() function to connect a dapp to the JoyID wallet and Nervos CKB network.

Connecting your dapp to JoyID is always the first step before you can interact with a user's Nervos CKB address. This step must be completed before any other actions can be performed.

Nervos CKB is a layer 1 public blockchain and the foundation of the Nervos Network ecosystem. For more information, please visit the Nervos Docs (opens in a new tab) website.

Initialization

You must always initialize the configuration as the first step. This is done using the initConfig() function and is normally done immediately after program 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

With the configuration initialized, we're ready to begin adding code to interact with JoyID. Next we add some basic interface 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 will add to our interface a button, and bind the onClick event to call the connect() function.

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.error(error);
    }
  }
 
  return (
    <div>
      <h1>Hello JoyID!</h1>
      <button onClick={onConnect}>Connect JoyID</button>
    </div>
  );
}

After establishing a connection, the connect() function will return the user's JoyID information.

{
    "address": "ckt1qrfrwcdnvssswdwpn3s9v8fp87emat306ctjwsm3nmlkjg8qyza2cqgqqx0r8ye9e2hqd7sc9wpxxvlul6ynzltyvqftele3",
    "ethAddress": "0x2b0586bf591CA8e96132646BD17bc86DaDc6D015",
    "keyType": "main_key",
    "alg": -7,
    "nostrPubkey": "399669b4c1802f42e4515104c7b7bcb7d1385ccc0547906cb6d5a8d0cb8d5575",
    "pubkey": "755a1bfa644d55a5914d185ea27c1f67565ccef677fbbb4750551d33f3789e89898a455599164ca2293bef50d2f5424bf97209e661a1e2f636d8e782340ccf15"
}

Try it Out

Ethereum Provider Sign Message