Air kit to interact with the Moca Network
npm install @mocanetwork/airkitThis 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.
``shell`
npm install @mocanetwork/airkit
`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.
This module is distributed in 3 formats
- esm build dist/airkit.esm.js is es6 formatcommonjs
- build dist/airkit.cjs.js in es5 formatumd
- 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.
If not already, some node libraries need to be polyfilled.
Webpack
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",
],
}),
],
},
};
`
Vite
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",
],
}),
],
});
`
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.$3
- Deployed Example App - See Air Kit in action with wagmi integration
- Source Code - Complete React + TypeScript example
$3
Using ethers
`ts
const ethProvider = new BrowserProvider(service.provider, 'any');
const signer = await ethProvider.getSigner();
const signedMessage = await signer.signMessage('Your message');
`
Using web3
ts
const web3 = new Web3(service.provider);
const signedMessage = await web3.eth.personal.sign(
'Your message',
eoaAccount,
'password',
);
`
$3
Using ethers
ts
const transactionParams: TransactionRequest = {...};
const ethProvider = new BrowserProvider(service.provider, 'any');
const signer = await ethProvider.getSigner();
const response = signer.sendTransaction(transactionParams);
`
Using web3
ts
const transactionParams: Transaction = {...};
const web3 = new Web3(service.provider);
const response = await web3.eth.sendTransaction(transactionParams);
``