Connect

Connect your dapp with the JoyID which enables your dapp to interact with its users' EVM(Axon) accounts. Axon is a Proof-of-Stake (PoS) and 100% EVM compatible framework that enables developers to build app-chains as Layer 2 of CKB network.

In this integration guide, we will use joyid/evm SDK to connect to JoyID wallet with Axon app-chains. @joyid/evm is a universal SDK, which you can pair with any Ethereum SDK you like, such as Web3.js, Ethers, and so on.

If you prefer to use Ethers, we also offer @joyid/ethers which allows you to use JoyID Wallet in the manner of Provider/Signer. See ethers adapter for more details.

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/evm'
import App from './App'

const JOY_ID_URL = 'https://app.joyid.dev'
const AXON_RPC_URL = 'https://axon-rpc.internal.joyid.dev'

initConfig({
  // your app name
  name: 'JoyID EVM Demo',
  // your app logo
  logo: 'https://fav.farm/🆔',
  // JoyID app url, optional
  joyidAppURL: JOY_ID_URL,
  // Axon RPC url, optional
  rpcURL: AXON_RPC_URL,
})

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

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

const JOY_ID_URL = 'https://app.joyid.dev'
const AXON_RPC_URL = 'https://axon-rpc.internal.joyid.dev'

initConfig({
  name: 'JoyID EVM Demo',
  logo: 'https://fav.farm/🆔',
  joyidAppURL: JOY_ID_URL,
  rpcURL: AXON_RPC_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/evm'
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/evm'

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...
Edit this page on GitHub
Table of Contents