Air Kit

This SDK is part of the 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

npm install @mocanetwork/airkit

Initialize & Login

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.

npm install --save-dev node-polyfill-webpack-plugin

Add following to your Webpack config:

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",
        ],
      }),
    ],
  },
};

npm install --save-dev vite-plugin-node-polyfills

Add following to your Vite config:

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",
      ],
    }),
  ],
});

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 - See Air Kit in action with wagmi integration
• Source Code - Complete React + TypeScript example

Signing Example

const ethProvider = new BrowserProvider(service.provider, 'any');
const signer = await ethProvider.getSigner();
const signedMessage = await signer.signMessage('Your message');

const web3 = new Web3(service.provider);
const signedMessage = await web3.eth.personal.sign(
    'Your message',
    eoaAccount,
    'password',
);

Sending Transaction Example

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

const transactionParams: Transaction = {...};
const web3 = new Web3(service.provider);
const response = await web3.eth.sendTransaction(transactionParams);