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:

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: "JoyID demo",
  logo: "https://fav.farm/🆔",
  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

Introduction Sign Message