npm package: @mocanetwork/airkit-connector
Description: AirKit wagmi connector to connect with the AirService
Author: Moca Network
Latest version: 1.9.0-beta.3

# Air Kit Wagmi Connector

This connector is part of the [Moca Network](https://moca.network/) offering and provides seamless integration between the Air Kit SDK and the popular [wagmi](https://wagmi.sh/) library for React applications.

## ⚡ Quick Start

```shell
npm install @mocanetwork/airkit-connector
```

### Initialize & Connect

```ts
import { createConfig, http } from "wagmi";
import { mainnet, polygon } from "wagmi/chains";
import { airConnector } from "@mocanetwork/airkit-connector";
import { BUILD_ENV } from "@mocanetwork/airkit";

const config = createConfig({
  chains: [mainnet, polygon],
  transports: {
    [mainnet.id]: http(),
    [polygon.id]: http(),
  },
  connectors: [
    airConnector({
      partnerId: YOUR_PARTNER_ID,
      buildEnv: BUILD_ENV.SANDBOX,
      enableLogging: true,
    })
  ],
});
```

The `airConnector` integrates the Air Kit SDK with wagmi, providing a familiar wagmi interface while leveraging the full power of Air Account Login, Air Id Minting, and Air Account Management.

## 🔗 Installation

### Dependencies

This connector requires the following peer dependencies:

```shell
npm install @wagmi/core viem
```

### Bundling

This module is distributed in multiple formats:

- `esm` build `dist/airkitConnector.esm.js` in es6 format
- `commonjs` build `dist/airkitConnector.cjs.js` in es5 format  
- `umd` build `dist/airkitConnector.umd.min.js` in es5 format minified

By default, the appropriate format is used for your specified use case.

## Usage

Once the connector is configured with your wagmi client, you can use all standard wagmi hooks and functions while the connector handles the Air Kit integration behind the scenes.

### Basic Connection Example

```ts
import { useConnect, useAccount, useDisconnect } from "wagmi";
import { airConnector } from "@mocanetwork/airkit-connector";

function App() {
  const { connect, connectors } = useConnect();
  const { address, isConnected } = useAccount();
  const { disconnect } = useDisconnect();

  const handleConnect = () => {
    connect({ connector: connectors[0] });
  };

  return (
    <div>
      {isConnected ? (
        <div>
          <p>Connected to {address}</p>
          <button onClick={() => disconnect()}>Disconnect</button>
        </div>
      ) : (
        <button onClick={handleConnect}>Connect with Air Kit</button>
      )}
    </div>
  );
}
```

### Advanced Connection with Auth Token

```ts
import { useConnect } from "wagmi";
import { airConnector } from "@mocanetwork/airkit-connector";

function App() {
  const { connect, connectors } = useConnect();

  const handleConnectWithAuth = () => {
    // Connect with a pre-existing auth token
    connect({ 
      connector: connectors[0],
      chainId: 1, // Optional: specify chain
      authToken: "your-auth-token" // Optional: pass auth token
    });
  };

  return (
    <button onClick={handleConnectWithAuth}>
      Connect with Auth Token
    </button>
  );
}
```

### Chain Switching

```ts
import { useSwitchChain } from "wagmi";

function ChainSwitcher() {
  const { switchChain } = useSwitchChain();

  const switchToPolygon = () => {
    switchChain({ chainId: 137 }); // Polygon
  };

  return (
    <button onClick={switchToPolygon}>
      Switch to Polygon
    </button>
  );
}
```

## 🔧 Configuration

The `airConnector` accepts the following configuration parameters:

```ts
interface AirConnectorParams {
  partnerId: string;           // Required: Your Moca Network partner ID
  buildEnv: BUILD_ENV;         // Required: Environment (staging, production, etc.)
  enableLogging: boolean;      // Required: Enable/disable logging
  loginOptions?: {
    authToken?: string;        // Optional: Pre-existing auth token
  };
}
```

## 🚀 Features

- **Seamless Integration**: Works with all wagmi hooks and functions
- **Air Kit Power**: Full access to Air Account Login, Air Id Minting, and Account Management
- **Chain Support**: Automatic chain switching and network management
- **Session Management**: Handles Air Kit session lifecycle within wagmi
- **TypeScript Support**: Full TypeScript support with proper type definitions

## 📚 Examples

For complete examples and integration patterns, check out the [Air Kit documentation](https://docs.moca.network/) and the [wagmi documentation](https://wagmi.sh/).

### Live Example

- **[Deployed Example App](https://developers.sandbox.air3.com/example)** - See the Air Kit Connector in action
- **[Source Code](https://github.com/MocaNetwork/airkit-example)** - Complete React + TypeScript example with wagmi integration

## 🔗 Related

- [Air Kit SDK](https://github.com/mocanetwork/airkit) - The main Air Kit SDK
- [wagmi](https://wagmi.sh/) - React Hooks for Ethereum
- [Moca Network](https://moca.network/) - Learn more about Moca Network