> ## Documentation Index
> Fetch the complete documentation index at: https://docs.moca.network/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate AIR Kit With Wagmi

> Use the @mocanetwork/airkit-connector wagmi connector in React to access AIR Kit smart accounts and sign transactions with useAccount and useConnect hooks.

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](https://developers.sandbox.air3.com/dashboard)

## Step 1: Create the wagmi config

```ts theme={null}
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

```tsx theme={null}
import { WagmiProvider } from "wagmi";
import { wagmiConfig } from "./config";

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

## Step 3: Connect and use the account

```tsx theme={null}
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:

```ts theme={null}
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:

```tsx theme={null}
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

* [Wagmi Connector reference](/airkit/usage/account/wagmi) for the full API
* [Smart Accounts](/airkit/usage/account/smart-account) for account abstraction details
* [Supported Chains](/airkit/usage/account/supported-chains) for the list of available networks