> ## 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.

# Wagmi Connector

> Connect AIR Kit smart accounts to React dApps with @mocanetwork/airkit-connector for wagmi — wallet state, auto-connect, and signing hooks.

**Wagmi** is a collection of React Hooks containing everything you need to start working with Ethereum. `@mocanetwork/airkit-connector` is a connector for the popular [wagmi](https://github.com/tmm/wagmi) library to help you integrate and interact with the `AirService`.

This package can be used to initialize a [wagmi client](https://wagmi.sh/) that will seamlessly manage the interaction (wallet connection state and configuration, such as auto-connection, connectors, and ethers providers) of your dApp.

### Initialization

```ts theme={null}
import { http, createConfig, CreateConnectorFn } from "wagmi";
import { mainnet, sepolia } from "wagmi/chains";
import { airConnector, AirConnector, AirConnectorProperties } from "@mocanetwork/airkit-connector";

const wagmiConfig = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  connectors: [
    airConnector({
      partnerId: {{YOUR_PARTNER_ID}},
    }),
  ],
});
```

Inside your (root) React component you can add the wagmi provider to the component tree.

```ts theme={null}
function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      ...
    </WagmiProvider>
  );
}
```

### Usage

Now you can access the connector in any component and interact with the wagmi connector. The `AirService` itself can also be accessed by casting the `Connector` to a union type with `AirConnectorProperties` or directly to `AirConnector`.

```ts theme={null}
const { connect, connectors, error } = useConnect();
const { addresses, connector } = useAccount();

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

const service = airConnector.airService;
```