Skip to main content
This recipe shows how to wire up the @mocanetwork/airkit-connector package so your React app can use wagmi hooks (useAccount, useConnect, useSendTransaction, etc.) with AIR Kit smart accounts.

​
Prerequisites

  • A React project with wagmi v2+ installed
  • AIR Kit SDK installed: npm install @mocanetwork/airkit @mocanetwork/airkit-connector
  • A Partner ID from the Developer Dashboard

​
Step 1: Create the wagmi config

import { http, createConfig } from "wagmi";
import { mainnet, sepolia } from "wagmi/chains";
import { airConnector } from "@mocanetwork/airkit-connector";

export const wagmiConfig = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  connectors: [
    airConnector({
      partnerId: "your-partner-id",
    }),
  ],
});

​
Step 2: Wrap your app with WagmiProvider

import { WagmiProvider } from "wagmi";
import { wagmiConfig } from "./config";

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      {/* your app */}
    </WagmiProvider>
  );
}

​
Step 3: Connect and use the account

import { useConnect, useAccount } from "wagmi";
import type { Connector } from "wagmi";
import type { AirConnector, AirConnectorProperties } from "@mocanetwork/airkit-connector";
import { useMemo } from "react";

function ConnectButton() {
  const { connect, connectors } = useConnect();
  const { addresses, connector, isConnected } = useAccount();

  const airWallet = useMemo<AirConnector | null>(() => {
    if ((connector as Connector & AirConnectorProperties)?.isMocaNetwork) {
      return connector as AirConnector;
    }
    return null;
  }, [connector]);

  if (isConnected && airWallet) {
    return <p>Connected: {addresses?.[0]}</p>;
  }

  return (
    <button onClick={() => connect({ connector: connectors[0] })}>
      Connect AIR Account
    </button>
  );
}

​
Step 4: Access AirService from the connector

Once connected, you can access the underlying AirService for credential operations: 
const service = airWallet.airService;

const verificationResult = await service.verifyCredentials({
  verifierDid: "did:air:id:test:YOUR_VERIFIER_DID",
  verificationId: "YOUR_VERIFICATION_PROGRAM_ID",
});

​
Step 5: Send a transaction

With the connector active, standard wagmi transaction hooks work against the user’s AIR Kit smart account: 
import { useSendTransaction } from "wagmi";
import { parseEther } from "viem";

function SendButton() {
  const { sendTransaction } = useSendTransaction();

  return (
    <button
      onClick={() =>
        sendTransaction({
          to: "0xRecipientAddress",
          value: parseEther("0.01"),
        })
      }
    >
      Send 0.01 ETH
    </button>
  );
}

​
Next steps