Frontend integration

Integrate Mooni into your app

Mooni widget allows to quickly add Mooni into any web app in minutes.

The widget can either appear as a modal on top of an app, or included inside an HTML element.

If the hosting app already has a connected user with web3, this wallet can be forwarded to the widget.

🎁 Quick start

Install

yarn add @mooni/widget

NPM package

Start widget

// Import package
import MooniWidget from '@mooni/widget';
// Instanciate the widget
const mooni = new MooniWidget();
// Open the widget as a modal when you want it
mooni.open();

📺 Example apps

An example app including Mooni widget have been published to let you try it out, or check the code.

🎛 Reference

Instanciation

  • new MooniWidget(options = {})

    Instanciate a Mooni widget.

options.containerElement: Include Mooni inside of an HTML element on your website. If not set, the widget will appear as a modal.

options.ethereum: A standard JSON-RPC provider. This is useful if the hosting app already authenticated the web3 wallet of the user, so he doesn't have to login again on Mooni.

options.token: Automatically select a token to sell in Mooni. Must be an ERC20 contract address.

If used as a modal:

  • mooni.open()

    Opens the Mooni widget modal.

  • mooni.close()

    Closes the Mooni widget modal. Not mandatory, a button is present to enable the user to close it.

Advanced example

// Import package
import MooniWidget from '@mooni/widget';
// Instanciate the widget
const mooni = new MooniWidget({
token: '0xb683D83a532e2Cb7DFa5275eED3698436371cc9f',
ethereum: window.ethereum, // JSON-RPC provider
});
// Open the widget as a modal when you want it
mooni.open();

Additional information

Import on different module systems

ES6

import MooniWidget from '@mooni/widget';

CommonJS

const MooniWidget = require('@mooni/widget');

UMD

<script src="https://unpkg.com/@mooni/widget"></script>
<script>
MooniWidget.open()
</script>