Connect

Connect your dapp with the JoyID which enables your dapp to interact with its users' EVM accounts. JoyID Supports any EVM-compatible blockchains ↗ (opens in a new tab), such as Ethereum, Polygon, and more.

In this integration guide, we will use joyid/evm SDK to connect to JoyID wallet with Ethereum Sepolia testnet ↗ (opens in a new tab). @joyid/evm is a universal SDK, which you can pair with any Ethereum SDK you like, such as Wagmi, Ethers.js, viem.

Installation

npm install @joyid/evm

Initialization

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

The joyidAppURL parameter of initConfig() is the JoyID App URL that your app will connect to.

Testnet: https://testnet.joyid.dev (opens in a new tab)
Mainnet: https://app.joy.id (opens in a new tab)

main.tsx

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

Connect to JoyID

After initialization, you can call the connect function to connect to JoyID. The connect function returns a Promise, which will be resolved to a EVM address when the connection is successful.

💡

After a successful connection, JoyID persists the connection status to the local storage.

App.tsx

import { connect } from '@joyid/evm'
export default function App() {
  const [address, setAddress] = React.useState<Address | undefined>();
  const onConnect = async () => {
    try {
      const res = await connect();
      setAddress(res);
    } catch (error) {
      console.log(error);
    }
  };
 
  return (
    <div id="app">
      <button className="btn btn-primary" onClick={onConnect}>
        Connect JoyID
      </button>
    </div>
  );
}

Disconnect

You can call the disconnect function to disconnect from JoyID. disconnect function clear the connection status from local storage.

App.tsx

import { connect, disconnect } from '@joyid/evm'
export default function App() {
  const [address, setAddress] = React.useState<Address | null>(null);
  const onConnect = async () => {
    try {
      const res = await connect();
      setAddress(res);
    } catch (error) {
      console.log(error);
    }
  };
 
  return (
    <div id="app">
      {address ? (
        <>
          <h1 className="text-xl mb-4">{`Connected: ${address}`}</h1>
          <button
            className="btn btn-primary"
            onClick={() => {
              disconnect();
              setAddress(null);
            }}
          >
            Disconnect
          </button>
          <div className="divider" />
        </>
      ) : (
        <button className="btn btn-primary" onClick={onConnect}>
          Connect JoyID
        </button>
      )}
    </div>
  );
}

Get connected account

After connecting to JoyID, user may refresh the page or close the browser. You can call the getConnectedAddress function to get the connected account, getConnectedAddress function get the connected account from local storage.

App.tsx

import { connect, disconnect, getConnectedAddress } from '@joyid/evm'
export default function App() {
  const [address, setAddress] = React.useState<Address | null>(getConnectedAddress());
  const onConnect = async () => {
    try {
      const res = await connect();
      setAddress(res);
    } catch (error) {
      console.log(error);
    }
  };
 
  return (
    <div id="app">
      {address ? (
        <>
          <h1 className="text-xl mb-4">{`Connected: ${address}`}</h1>
          <button
            className="btn btn-primary"
            onClick={() => {
              disconnect();
              setAddress(null);
            }}
          >
            Disconnect
          </button>
          <div className="divider" />
        </>
      ) : (
        <button className="btn btn-primary" onClick={onConnect}>
          Connect JoyID
        </button>
      )}
    </div>
  );
}

API reference

Try it out

Interact with JoyID Sign Message