Air Kit Wagmi Connector

This connector is part of the Moca Network offering and provides seamless integration between the Air Kit SDK and the popular wagmi library for React applications.

⚡ Quick Start

npm install @mocanetwork/airkit-connector

Initialize & Connect

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:

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

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

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

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:

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 and the wagmi documentation.

Live Example

• Deployed Example App - See the Air Kit Connector in action
• Source Code - Complete React + TypeScript example with wagmi integration

🔗 Related

• Air Kit SDK - The main Air Kit SDK
• wagmi - React Hooks for Ethereum
• Moca Network - Learn more about Moca Network