Overlays

In this example we will add an overlay to a POST. This overlay will be opened with a button click.

Here are two examples of an overlay:

• Pure HTML page
• React based example

First we implement an overlay written on HTML with pure JavaScript. Second - the React based component.

tip

We recommend using an overlay written on the React based component. When implement an overlay written on HTML with pure JavaScript, some functions such as Share State HOC are not available.

Here is the initial code for this example, including both of the above overlays: ex04-overlays-exercise.

Now let's create overlays.

HTML with JavaScript overlay

1. In pure-html-page/index.html import Bridge class from https://unpkg.com/@dapplets/dapplet-overlay-bridge@0.1.1 package.

import Bridge from 'https://unpkg.com/@dapplets/dapplet-overlay-bridge@0.1.1'

2. Create Bridge class instance and subscribe it to the data event.

1const bridge = new Bridge()

2

3bridge.on('data', ({ message, counter }) => {

4 document.querySelector('.dappletMessage').innerText = message

5 document.querySelector('.dappletCounter').innerText = counter ?? 0

6})

3. Add an event handler to the button click.

1let isTick = true

2const button = document.querySelector('.ch-state-btn')

3button.addEventListener('click', async () => {

4 const counter = await bridge.increaseCounterAndToggleLabel(isTick)

5 document.querySelector('.dappletCounter').innerText = counter

6 isTick = !isTick

7})

tip

To publish a dapplet with an overlay, you need assets-manifest.json. When overlay is written in React, webpack or another module bundler builds it on its own. As you will see, if you create a React based overlay from the example, the manifest will have the following structure:

1{

2 "index.html": "index.html",

3 "main.js": "main.js"

4}

Here we create manually the same manifest but without main.js module.

React based overlay

First install Dapplet-Overlay Bridge: in /overlayWithReact module.

cd overlayWithReact

npm i @dapplets/dapplet-overlay-bridge

cd ..

1. In /overlayWithReact/src/App.tsx import Bridge class from @dapplets/dapplet-overlay-bridge package.

2. Create IDappletApi interface and Bridge class instance typing with the inteface.

1interface IDappletApi {

2 increaseCounterAndToggleLabel: (isTick: boolean) => Promise<number>

3}

4

5const bridge = new Bridge<IDappletApi>()

3. Add a listener to the 'data' event.

componentDidMount() {

bridge.on('data', ({ message, counter }: { message: string, counter: number }) => this.setState({ message, counter }));

}

4. Add an event handler to the button click.

1handleClick = async () => {

2 const counter = await bridge.increaseCounterAndToggleLabel(this.state.isTick)

3 this.setState({ isTick: !this.state.isTick, counter })

4}

Change the dapplet

1. Implement the IDappletApi interface, the same as in the React-based overlay.

interface IDappletApi {

increaseCounterAndToggleLabel: (isTick: boolean) => number

}

2. Create an overlay object using Core API: Core.overlay({ name: string, title: string }).

const overlay = Core.overlay({ name: 'example-04-overlay', title: 'Example 4' })

3. Create an object that implements the interface. Write increaseCounterAndToggleLabel function. Declare the API in the overlay.

1const dappletApi: IDappletApi = {

2 increaseCounterAndToggleLabel: (isTick: boolean) => {

3 this.currentContext.counter =

4 this.currentContext.counter === undefined ? 1 : this.currentContext.counter + 1

5 this._currentProxy.label = `${isTick ? 'tick' : 'tock'} ${this.currentContext.counter}`

6 return this.currentContext.counter

7 },

8}

9overlay.declare(dappletApi)

4. Save current context and proxy to the global variables to use them in increaseCounterAndToggleLabel function.

this.currentContext = ctx

this._currentProxy = proxy

5. By click open the overlay using send() method. Send 'Hello, World!' message and ctx.counter to the overlay using 'data' event.

overlay.send('data', { message: 'Hello, World!', counter: ctx.counter })

6. Add to the dapplet.json manifest the following option:

1{

2 ...

3 "overlays": {

4 "example-04-overlay": "http://localhost:3000"

5 }

6}

Dependencies must be installed before running:

npm i

Run the dapplet

npm start

To run the dapplet with React overlay, change start script to the following:

"start": "npm run start:react",

Here is the result code of the example: ex04-overlays-solution.