Ex18: 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.

  1. Open src/index.ts. Add the Overlay adapter in addition to the context adapter.
@Inject('overlay-adapter.dapplet-base.eth') public adapterAction: any
  1. Import widget button as buttonAction from Overlay adapter.
const { button: buttonAction } = this.adapterAction.exports
  1. 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({
2 authMethods: ['ethereum/goerli', 'near/testnet'],
3})
4const ex18_button = buttonAction({
5 initial: 'ex18',
6 ex18: {
7 icon: EXAMPLE_IMG,
8 title: 'title',
9 pinnedID: 'ex18-title',
10 action: (_, me) => {
11 me.title = 'ex18 new title'
12 },
13 },
14})
15this.adapterAction.attachConfig({
16 MENU_ACTION: () => [
17 ex18_button,
18 buttonAction({
19 initial: 'CONNECT',
20 CONNECT: {
21 icon: EXAMPLE_IMG_2,
22 title: 'connect',
23 pinnedID: 'ex18-connect',
24 action: async () => {
25 try {
26 await wallet.connect()
27 } catch (err) {
28 console.log('Disconnect ERROR:', err)
29 }
30 },
31 },
32 }),
33 ],
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