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 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:

React
import * as React from 'react'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { initConfig } from '@joyid/ckb'
import App from './App'

const JOY_ID_URL = 'https://app.joyid.dev'
const JOY_ID_SERVER_URL = 'https://api.joyid.dev'

initConfig({
  // your app name
  name: 'JoyID Demo',
  // your app logo
  logo: 'https://fav.farm/๐Ÿ†”',
  // JoyID app url, optional
  joyidAppURL: JOY_ID_URL,
  // JoyID server url, optional
  joyidServerURL: JOY_ID_SERVER_URL,
})

const rootElement = document.getElementById('root')
const root = createRoot(rootElement)

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
)
Vue
const { createApp } = require('vue')
const { initConfig } = require('@joyid/ckb')
import App from './App'

const JOY_ID_URL = 'https://app.joyid.dev'
const JOY_ID_SERVER_URL = 'https://api.joyid.dev'

initConfig({
  // your app name
  name: 'JoyID Demo',
  // your app logo
  logo: 'https://fav.farm/๐Ÿ†”',
  // JoyID app url, optional
  joyidAppURL: JOY_ID_URL,
  // JoyID server url, optional
  joyidServerURL: JOY_ID_SERVER_URL,
})
createApp(App).mount('#app')
This initialization function call will run through the entire tutorial, and will not be explained separately in the future.

Get Started

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

React
import * as React from 'react'
import './style.css'

export default function App() {
  return (
    <div>
      <h1>Hello JoyID!</h1>
    </div>
  )
}
Vue
<template>
  <div id="app">
    <h1>Hello JoyID!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

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

React
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>
  )
}
Vue
<template>
  <div id="app">
    <h1>Hello JoyID!</h1>
    <button @click="connect">Connect JoyID</button>
  </div>
</template>

<script>
import { connect } from '@joyid/ckb'

export default {
  name: 'App',
  methods: {
    async connect() {
      try {
        const authData = await connect()
        console.log(`JoyID user info:`, authData)
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

Try it out

Loading Sandbox...
Loading Sandbox...