How to connect a dapplet to an adapter?

First you need to install the Dapplet Browser Extension package to your project. Use npm for this:

npm i -D @dapplets/dapplet-extension

Then create the manifest /dapplet.json:

1{
"name": { "$ref": "package.json#/name" },
"branch": "default",
"version": { "$ref": "package.json#/version" },
"type": "FEATURE",
"title": "YOUR_TITLE",
"description": { "$ref": "package.json#/description" },
"main": { "$ref": "package.json#/main" },
"icon": "src/icons/YOUR_ICON.png",
"contextIds": ["twitter-config.dapplet-base.eth"],
"config": {
  "schema": "config/schema.json",
  "default": "config/default.json"
},
"dependencies": {
  "twitter-config.dapplet-base.eth": "0.1.8"
}
18}

Here set the title and icon and check if the other fields match your project.

As you can see "contextIds" and "dependencies" contain the name of our Twitter adapter: "twitter-config.dapplet-base.eth". The last field specifies which version should be used.

Implement the dapplet’s /src/index.ts according to the example:

1import {} from '@dapplets/dapplet-extension';
2
3@Injectable
4export default class MyDapplet {
5
6  @Inject('twitter-config.dapplet-base.ethh')
7  public adapter: any;
8
9  activate(): any {
10    // ...
11  }
12}

Using widgets#

Widgets are taken from the adapter's exports:

const { button } = this.adapter.exports

and then used in the attachConfig() function:

this.adapter.attachConfig({
    POST: () =>
      button({
      // ...
      }),
  })

attachConfig receives an object with context names as keys. The values of the object are functions which return a widget or an array of widgets. attachConfig returns the object with $(ctx, 'element_id') function, which returns the Proxy of the widget by its id.

Widgets have states. The DEFAULT (case sensitive) state is used as initial.

1button({
2  DEFAULT: {
3    // ...
4  },
5  // ...
6}),

It's possible to implement many states.

If the DEFAULT state is not presented, the initial state has to be specified explicitly.

1button({
initial: 'FIRST',
FIRST: {
  // ...
},
SECOND: {
  // ...
},
// ...
10}),

We pass parameters of the widget described in the adapter into states.