Ex03: Widgets interaction

In this exercise we will add two interactive widgets to POST context.

Here is the initial code for this example: ex03-widgets-interaction-exercise.

Here is src/index.ts:

1import {} from '@dapplets/dapplet-extension';
2import EXAMPLE_IMG from './icons/ex03.png';
3//import STAMP_IMG from './icons/fakeStamp.png';
4
5@Injectable
6export default class TwitterFeature {
7 // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
8 @Inject('twitter-adapter.dapplet-base.eth') public adapter: any;
9
10 activate() {
11 // LP: 1. Get the element 'picture' from adapter
12 const { button } = this.adapter.exports;
13 // LP end
14 const { $ } = this.adapter.attachConfig({
15 POST: () => [
16 button({
17 id: 'button',
18 initial: 'DEFAULT',
19 DEFAULT: {
20 label: 'Injected Button',
21 img: EXAMPLE_IMG,
22 // LP: 3. Toggle the state “hidden/shown” of the picture on button click
23
24 // LP end
25 },
26 }),
27
28 // LP: 2. Add extra picture to POST and make it hidden by default
29
30 // LP end
31 ],
32 });
33 }
34}
tip

There is a $ Function used to access to an existing widget on the website.

It receives two parameters:

  • ctx — parsed context of the block in which the desired widget is located;
  • id — the widget ID that needs to be specified manually.

$(ctx, 'element_id') returns the me object we used in the previous exercises, but for the desired widget.

Use it to change the state or parameters.

1// Changing the state
2exec: () => $(ctx, 'another_el_id').state = 'SECOND';
3
4// Changing the label
5exec: () => $(ctx, 'another_el_id').label = 'Hello';

Let's get the widget picture from the adapter

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

Add an extra picture to POST and make it hidden by default.

1POST: () => [
2 ...
3
4 picture({
5 id: 'pic',
6 initial: 'DEFAULT',
7 DEFAULT: {
8 img: STAMP_IMG,
9 hidden: true,
10 },
11 }),
12],

With a button click, toggle the picture’s state - "hidden/shown".

exec: () => {
$(ctx, 'pic').hidden = !$(ctx, 'pic').hidden;
},

Result:

1import {} from '@dapplets/dapplet-extension';
2import EXAMPLE_IMG from './icons/ex03.png';
3import STAMP_IMG from './icons/fakeStamp.png';
4
5@Injectable
6export default class TwitterFeature {
7 // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
8 @Inject('twitter-adapter.dapplet-base.eth') public adapter: any;
9
10 activate() {
11 // LP: 1. Get the element 'picture' from adapter
12 const { button, picture } = this.adapter.exports;
13 // LP end
14 const { $ } = this.adapter.attachConfig({
15 POST: (ctx) => [
16 button({
17 id: 'button',
18 initial: 'DEFAULT',
19 DEFAULT: {
20 label: 'FAKE',
21 img: EXAMPLE_IMG,
22 // LP: 3. Toggle the state “hidden/shown” of the picture on button click
23 exec: () => {
24 $(ctx, 'pic').hidden = !$(ctx, 'pic').hidden;
25 },
26 // LP end
27 },
28 }),
29
30 // LP: 2. Add extra picture to POST and make it hidden by default
31 picture({
32 id: 'pic',
33 initial: 'DEFAULT',
34 DEFAULT: {
35 img: STAMP_IMG,
36 hidden: true,
37 },
38 }),
39 // LP end
40 ],
41 });
42 }
43}

Here is the result code of the example: ex03-widgets-interaction-solution.

Run the dapplet:

npm i
npm start

In the browser:

video

If you don't know how to run a dapplet in your browser, see Get Started.