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

# React walkthrough

> 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 i @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. Verification takes a Partner JWT signed on your server with `scope: "verify"` and the verification program ID:

```ts theme={null}
const service = airWallet.airService;

const { token } = await fetch("/api/verification-token", { method: "POST" }).then((r) => r.json());

const result = await service.verifyCredential({
  authToken: token,
  programId: process.env.NEXT_PUBLIC_VERIFY_PROGRAM_ID,
});

if (result.status === "COMPLIANT") {
  // unlock the gated feature
}
```

See [Verify a credential in your app](/get-started/recipes/verify-credential) for the server endpoint and result handling.

## 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](/products/money/wagmi) for the full API
* [Smart Accounts](/products/money/smart-account) for account abstraction details
* [Supported Chains](/products/money/supported-chains) for the list of available networks


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.