# Air Kit

This SDK is part of the [Moca Network](https://moca.network/) offering and provides a convenient way to add Air Account Login, Air Id Minting and Air Account Management to your DApp.

## ⚡ Quick Start

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

### Initialize & Login

```ts
import AirService, { BUILD_ENV } from "@mocanetwork/airkit";

const service = new AirService({
  partnerId: YOUR_PARTNER_ID,
});
await service.init({
  buildEnv: BUILD_ENV.SANDBOX,
  enableLogging: true,
});
await embed.login();
```

The AirService creates an iframe that loads the login flow and sets up communication streams between
the iframe and the DApp's javascript context.

## 🔗 Installation

### Bundling

This module is distributed in 3 formats

- `esm` build `dist/airkit.esm.js` is es6 format
- `commonjs` build `dist/airkit.cjs.js` in es5 format
- `umd` build `dist/airkit.umd.min.js` in es5 format without polyfilling corejs minified

By default, the appropriate format is used for your specified use case.
You can use a different format (if you know what you're doing) by referencing the correct file.

### Dynamic Import

If not already, some node libraries need to be polyfilled.

<details>
  <summary>Webpack</summary>
  Install dev packages:

```shell
npm install --save-dev node-polyfill-webpack-plugin
```
Add following to your Webpack config:

```js
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = {
  webpack: {
    plugins: [
      new NodePolyfillPlugin({
        additionalAliases: [
          "buffer",
          "crypto",
          "assert",
          "http",
          "https",
          "os",
          "url",
          "zlib",
          "stream",
          "_stream_duplex",
          "_stream_passthrough",
          "_stream_readable",
          "_stream_writable",
          "_stream_transform",
          "process",
        ],
      }),
    ],
  },
};
```
</details>

<details>
  <summary>Vite</summary>
Install dev packages:

```shell
npm install --save-dev vite-plugin-node-polyfills
```
Add following to your Vite config:

```js
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { nodePolyfills } from "vite-plugin-node-polyfills";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    nodePolyfills({
      include: [
        "buffer",
        "crypto",
        "assert",
        "http",
        "https",
        "os",
        "url",
        "zlib",
        "stream",
        "_stream_duplex",
        "_stream_passthrough",
        "_stream_readable",
        "_stream_writable",
        "_stream_transform",
      ],
    }),
  ],
});
```
</details>

## Usage
Once the SDK is installed and the `AirService` successfully initialized, it can be used to authenticate users. Further, the native provider given by the embed instance can be used to let users interact with the blockchain.

### Live Examples

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

### Signing Example

<details open>
  <summary>Using ethers</summary>

```ts
const ethProvider = new BrowserProvider(service.provider, 'any');
const signer = await ethProvider.getSigner();
const signedMessage = await signer.signMessage('Your message');
```
</details>

<details>
  <summary>Using web3</summary>

```ts
const web3 = new Web3(service.provider);
const signedMessage = await web3.eth.personal.sign(
    'Your message',
    eoaAccount,
    'password',
);
```
</details>

### Sending Transaction Example

<details open>
  <summary>Using ethers</summary>

```ts
const transactionParams: TransactionRequest = {...};
const ethProvider = new BrowserProvider(service.provider, 'any');
const signer = await ethProvider.getSigner();
const response = signer.sendTransaction(transactionParams);
```
</details>

<details>
  <summary>Using web3</summary>

```ts
const transactionParams: Transaction = {...};
const web3 = new Web3(service.provider);
const response = await web3.eth.sendTransaction(transactionParams);
```
</details>