Create viewport adapter

In this example we create a new viewport adapter and a dapplet for it.

Here is the initial code for this example: ex09-new-viewport-adapter-exercise.

Our template has an adapter:

1adapter
2├── .gitignore
3├── dapplet.json
4├── index.json
5├── package.json
6├── package-lock.json
7└── styles
8    └── body
9        └── button.css

When you create an adapter don't forget to set contextIds in /adapter/dapplet.json. On these sites, the adapter will work:

1{
"contextIds": [
  "twitter.com",
  "instagram.com",
  "www.instagram.com",
  "youtube.com",
  "www.youtube.com",
  "dapplets.org",
  "github.com",
  "google.com",
  "www.google.com",
  "facebook.com",
  "www.facebook.com",
  "x.com",
  "www.x.com"
],
17}

Implement a parser configuration for the adapter in /adapter/index.json to determine widget insertion points and parse some common data for the dapplet. Let's insert a widget into the top level of the html and get the page title information. Don’t forget to set the ID for the context:

"contexts": {
  "GLOBAL": {
      "containerSelector": "html",
      "contextBuilder": {
          "id": "string('global')",
          "websiteName": "string(//title)"
      }
  },
  "BODY": {
      "containerSelector": "html",
      "contextSelector": "",
      "widgets": {
          "button": {
              "styles": "",
              "insertionPoint": "",
              "insert": ""
          }
      },
      "contextBuilder": {
          "id": "string('global')",
          "websiteName": "string(//title)"
      }
  }
24}

Specify the widget's insertion point and provide the path to its styles:

1"button": {
2    "styles": "styles/body/button.css",
3    "insertionPoint": "body",
4    "insert": "end"
5}

Change dependencies and contextIds in /dapplet-feature/dapplet.json to new adapter:

1{
2  "contextIds": ["example-viewport-adapter.dapplet-base.eth"],
3  "dependencies": {
4    "example-viewport-adapter.dapplet-base.eth": "0.2.0"
5  }
6}

Add a valid adapter in /dapplet-feature/src/index.ts:

@Inject('example-viewport-adapter.dapplet-base.eth')
public adapter: any;

Add button from the page in BODY:

1button({
initial: 'DEFAULT',
id: 'button',
DEFAULT: {
  label: 'GOOGLE_EXAMPLE',
  img: EXAMPLE_IMG,
  exec: () => {},
},
9})

On button click show the website name:

exec: () => Core.alert(ctx.websiteName)

Here is the result: ex09-new-viewport-adapter-solution.

Run the dapplet:

npm i
npm start

video

In this example we run two servers concurrently. So you have to add two registry addresses to Dapplet extension in Development tab. Click here for instructions.