Guide
EVM
EVM AA

EVM AA(Account Abstraction)

JoyID EVM AA allow you to create EVM-compatible AA(Account Abstraction) wallets easily for your users with JoyID Passkey Wallet. You can use JoyIDSigner to generate an Ethereum provider with @joyid/evm SDK quickly.

ZeroDev (opens in a new tab) is an embedded wallet powered by account abstraction (AA) and you can use ZeroDev or other AA service providers to create AA wallets or session keys with JoyID Wallet.

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.

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>
  );
}

Create AA wallets

You can easily create AA wallets with JoyID Ethereum address and JoyIDSigner.

💡

Note that to using EVM AA, you need to import function from @joyid/evm/aa instead of @joyid/evm.

App.tsx
import { JoyIDSigner } from "@joyid/evm/aa";
import { ECDSAProvider } from "@zerodev/sdk";
import { Hex } from "viem";
 
const initAAProvider = async (ethAddress: Hex) => {
  return await ECDSAProvider.init({
    projectId: ZERO_DEV_PROJECT_ID,
    owner: new JoyIDSigner(ethAddress),
  });
};
 
export default function App() {
  const [address, setAddress] = React.useState<Address | undefined>();
  const [aaAddress, setAaAddress] = React.useState<Address | undefined>();
 
  const onConnect = async () => {
    try {
      const res = await connect();
      setAddress(res);
    } catch (error) {
      console.log(error);
    }
  };
  
  useEffect(() => {
    initAAProvider(address as Hex).then(setProvider)
  }, [ethAddress]); 
 
  const createAAWallet = async () => {
    const aaAddr = await provider?.getAddress();
    updateAaAddress(aaAddr);
  };
 
  return (
    <div id="app">
      <button className="btn btn-primary" onClick={onConnect}>
        Connect JoyID
      </button>
 
      {address && (
        <button className="btn btn-primary" onClick={createAAWallet}>
          Create AA Account
        </button>
 
        {aaAddress && <div>{`AA Address: ${aaAddress}`}</div>}
      )}
    </div>
  );
}

Try it out

For a complete demo, you may want to check GitHub ↗ (opens in a new tab) and Live Demo ↗ (opens in a new tab).

Web2 LoginWagmi