Dapplet Actions

Dapplet Actions widgets are used for quick user access to dapplet functions in a minimized Extension view.

The initial code for this example is in master.

Open src/index.ts. Add the Overlay adapter in addition to the context adapter.

@Inject('overlay-adapter.dapplet-base.eth') public adapterAction: any

Import widget button as buttonAction from Overlay adapter.

const { button: buttonAction } = this.adapterAction.exports

Pass the parameters of the widget described in the adapter to states, and then use it in the attachConfig() function:

1const wallet = await Core.wallet({
authMethods: ['ethereum/goerli', 'near/testnet'],
3})
4const ex18_button = buttonAction({
initial: 'ex18',
ex18: {
  icon: EXAMPLE_IMG,
  title: 'title',
  pinnedID: 'ex18-title',
  action: (_, me) => {
    me.title = 'ex18 new title'
  },
},
14})
15this.adapterAction.attachConfig({
MENU_ACTION: () => [
  ex18_button,
  buttonAction({
    initial: 'CONNECT',
    CONNECT: {
      icon: EXAMPLE_IMG_2,
      title: 'connect',
      pinnedID: 'ex18-connect',
      action: async () => {
        try {
          await wallet.connect()
        } catch (err) {
          console.log('Disconnect ERROR:', err)
        }
      },
    },
  }),
],
34})

tip

parameters of the Dapplet Actions

The widget button has options similar to the button widgets of other adapters. More about it is here.

icon - required parameter. We recommend to use images in SVG format.

pinnedID - required parameter, for the user to pin the widget in the minimized extension. Must be unique for each widget.

action - analogue of exec .

disabled - option parameter, default false.

hidden - option parameter, default false, hiding a widget.

Here is the result code of the example: ex18-dapplet-actions.

Run the dapplet:

npm i
npm

video