Connect

Connect your dapp with the JoyID which enables your dapp to interact with its users' EVM 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.

You can use @joyid/evm SDK to connect to their JoyID wallet with Axon app-chains directly and you can also use @joyid/ethers SDK to use JoyID provider to connect JoyID wallet. 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({
  name: "JoyID EVM Demo",
  logo: "https://fav.farm/🆔",
  joyidAppURL: JOY_ID_URL,
  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