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.web3Provider: Use your own connected web3 provider.

options.token: Add a custom token to the list of input currencies. This must be the address of the contract and the token must be available on Uniswap.

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.

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>