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>