How to connect a dapplet to an adapter?

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

npm i -D @dapplets/dapplet-extension

Then create the manifest /dapplet.json:

1{
2 "name": { "$ref": "package.json#/name" },
3 "branch": "default",
4 "version": { "$ref": "package.json#/version" },
5 "type": "FEATURE",
6 "title": "YOUR_TITLE",
7 "description": { "$ref": "package.json#/description" },
8 "main": { "$ref": "package.json#/main" },
9 "icon": "src/icons/YOUR_ICON.png",
10 "contextIds": ["twitter-adapter.dapplet-base.eth"],
11 "config": {
12 "schema": "config/schema.json",
13 "default": "config/default.json"
14 },
15 "dependencies": {
16 "twitter-adapter.dapplet-base.eth": "0.9.0"
17 }
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-adapter.dapplet-base.eth". The last field specifies which version should be used.

Add the /config directory with the following structure:

config
├── default.json
└── schema.json

In the schema.json we specify the settings for the dapplet, which will be available in a browser through the extension. default.json contains defaults for the schema for three environments: main, test and dev.

1// /config/schema.json
2{
3 "type": "object",
4 "required": ["exampleString", "exampleHiddenString"],
5 "properties": {
6 "exampleString": {
7 "type": "string",
8 "title": "Example of string property"
9 },
10 "exampleHiddenString": {
11 "type": "string",
12 "title": "Example of hidden string property",
13 "hidden": true
14 }
15 }
16}
1// /config/default.json
2{
3 "main": {
4 "exampleString": "some string value",
5 "exampleHiddenString": "some string value"
6 },
7 "test": {
8 "exampleString": "some string value",
9 "exampleHiddenString": "some string value"
10 },
11 "dev": {
12 "exampleString": "some string value",
13 "exampleHiddenString": "some string value"
14 }
15}

Dapplet Settings

Finally, implement the dapplet’s /src/index.ts according to the example:

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

Using widgets#

Widgets are taken from the adapter's exports:

const { button, popup } = this.adapter.exports;

and then used in the attachConfig() function:

1const { $ } = this.adapter.attachConfig({
2 BODY: (ctx) => [
3 button({
4 ...
5 }),
6 popup({
7 id: 'popup',
8 ...
9 }),
10 ],
11});

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({
2 initial: 'FIRST',
3 FIRST: {
4 ...
5 },
6 SECOND: {
7 ...
8 },
9 ...
10}),

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

Using events#

Adapters provide a number of events for different contexts that dapplets can listen to. They are used in the attachConfig function near the insertion points:

1// /src/index.ts > TwitterFeature > activate
2
3this.adapter.attachConfig({
4 events: {
5 like: async (ctx) => {
6 ...
7 },
8 },
9 ...
10});