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
4@Injectable
5export default class TwitterFeature {
@Inject('twitter-config.dapplet-base.eth')
public adapter
8
activate() {
  // LP: 1. Get the widget "avatarBadge" from adapter
  const { button } = this.adapter.exports
  // LP end
  const { $ } = this.adapter.attachConfig({
    POST: (ctx) => [
      button({
        DEFAULT: {
          label: 'GOLD',
          img: EXAMPLE_IMG,
          // LP: 2. Toggle the state “hidden/shown” of the "avatarBadge" widget on button click
20
          // LP end
        },
      }),
      // LP: 1. Add extra "avatarBadge" widget and make it hidden by default
25
      // LP end
    ],
  })
}
30}

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 avatarBadge from the adapter

const { button, avatarBadge } = this.adapter.exports

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

1POST: () => [
...
3
avatarBadge({
  id: 'badge',
  initial: 'DEFAULT',
  DEFAULT: {
    img: BADGE_IMG,
    vertical: 'bottom',
    horizontal: 'right',
    hidden: true,
    exec: () => console.log(ctx),
  },
}),
15],

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

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

Result:

1import {} from '@dapplets/dapplet-extension'
2import EXAMPLE_IMG from './icons/ex03.png'
3import BADGE_IMG from './icons/gold-eth.jpg'
4
5@Injectable
6export default class TwitterFeature {
@Inject('twitter-config.dapplet-base.eth')
public adapter
9
async activate() {
  // LP: 1. Get the widget 'avatarBadge' from adapter
  const { button, avatarBadge } = this.adapter.exports
  // LP end
  const { $ } = this.adapter.attachConfig({
    POST: (ctx) => [
      button({
        DEFAULT: {
          label: 'GOLD',
          img: EXAMPLE_IMG,
          // LP: 3. Toggle the state “hidden/shown” of the "avatarBadge" widget on button click
          exec: () => {
            $(ctx, 'badge').hidden = !$(ctx, 'badge').hidden
          },
          // LP end
        },
      }),
      // LP: 2. Add extra "avatarBadge" widget and make it hidden by default
      avatarBadge({
        id: 'badge',
        initial: 'DEFAULT',
        DEFAULT: {
          img: BADGE_IMG,
          vertical: 'bottom',
          horizontal: 'right',
          hidden: true,
          exec: () => console.log(ctx),
        },
      }),
      // LP end
    ],
  })
}
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.