Viewport adapter

Adapters do not need to know the site markup to work with it. Some of them may simply insert pop-ups, floating buttons, or something else onto the screen. We can call them viewport, universal or common adapters.

Task: change the Twitter Adapter to a Common Adapter and check it on Twitter, YouTube, Instagram and Dapplets.org.

The initial code for this example is in master.

Change twitter-config.dapplet-base.eth to a common-config.dapplet-base.eth adapter in /dapplet.json with a right version:

1{
2 ...
3
4 "contextIds": ["common-config.dapplet-base.eth"],
5 ...
6 "dependencies": {
7 "common-config.dapplet-base.eth": "0.1.1"
8 }
9}

In src/index.ts change injected adapter:

@Inject('common-config.dapplet-base.eth') public adapter: any;

and set the right insertion point:

1activate() {
2 const { button } = this.adapter.exports
3 this.adapter.attachConfig({
4 BODY: () =>
5 button({
6 DEFAULT: {
7 label: 'Injected Button',
8 img: EXAMPLE_IMG,
9 exec: () => Core.alert('Hello, World!'),
10 },
11 }),
12 })
13}

Here is the result code of the example: ex06-viewport-adapter.

Run the dapplet:

npm i
npm start

video