Ex09: New 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 that in structure is similar to the adapter in the previous exercise.

1adapter
2├── .gitignore
3├── dapplet.json
4├── package-lock.json
5├── package.json
6├── rollup.config.js
7├── src
8|  ├── button.ts
9|  ├── close_cross.svg
10|  ├── globals.d.ts
11|  ├── index.ts
12|  └── popup.ts
13└── tsconfig.json

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

1{
...
"contextIds": [
  "dapplets.org",
  "127.0.0.1",
  "forum.dapplets.org",
  "youtube.com",
  "www.youtube.com",
  "twitter.com",
  "mobile.twitter.com",
  "google.com",
  "www.google.com",
  "www.instagram.com",
  "instagram.com"
],
...
17}

Implement communication between dapplets and pages in /adapter/src/index.ts:

1public config = {
BODY: {
  containerSelector: 'html',
  contextSelector: 'body',
  insPoints: {
    BODY: {},
  },
  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
  contextBuilder: (): ContextBuilder => ({
    id: document.location.href,
  }),
},
13};

Implement the button markup with image and tooltip in /adapter/src/button.ts:

1// class Button
2// LP: 2. implement the button markup with "image" and "tooltip".
3const { img, tooltip } = this.state;
4const htmlString = `
5    <div style="
6        position:fixed;
7        width:60px;
8        height:60px;
9        bottom:40px;
10        left:40px;
11        color:#FFF;
12        border-radius:99em;
13        text-align:center;
14        box-shadow: 2px 2px 3px #999;
15        cursor: pointer;
16        display: block;
17        box-sizing: content-box;
18        background: no-repeat center/100% url(${img}) #d4e0e9;
19    ">
20    </div>
21`;
22this.el.title = tooltip ?? '';
23this.el.innerHTML = htmlString;
24// LP end

Define contextInsPoints for the button

public static contextInsPoints = {
  BODY: 'BODY'
}

Implement the popup markup with text, link, img and closed:

1// LP: 3. Implement the popup markup with "text", "link", "img" and "closed".
2const { text, link, img, closed } = this.state;
3const htmlString = `
<style>
  .dapplet-widget-basic-container {
    position: absolute;
    overflow-wrap: break-word;
    width: 380px;
    min-height: 60px;
    top: 80px;
    left: 50%;
    margin-left: -212px;
    padding: 20px;
    background-color: #fff;
    color: #d10019;
    border: 2px solid #d10019;
    border-radius: 15px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    box-sizing: content-box;
    font-size: 19px;
    font-weight: 600;
    font-family: system-ui, -apple-system, sans-serif, BlinkMacSystemFont, Roboto, Ubuntu;
    z-index: 9998;
  }
  .dapplet-widget-close {
    position: initial;
  }
  .dapplet-widget-close-icon {
    width: 18px;
    height: 18px;
    position: absolute;
    right: 12px;
    top: 12px;
    cursor: pointer;
  }
  .dapplet-widget-mascot-img {
    position: initial;
  }
  .dapplet-widget-mascot-img img {
    width: 18px;
    height: 18px;
    position: absolute;
    left: 12px;
    top: 12px;
    cursor: pointer;
  }
  .dapplet-widget-basic-container a {
    text-decoration: none;
    color: #d10019;
  }
  .dapplet-widget-basic-container a:active {
    text-decoration: none;
    color: #d10019;
  }
  .dapplet-widget-basic-container a:visited {
    text-decoration: none;
    color: #d10019;
  }
  .displayed {
    display: block;
  }
  .no-displayed {
    display: none;
  }
</style>
<div class='dapplet-widget-basic-container ${closed ? 'no-displayed' : 'displayed'} '>  
  <div class='dapplet-widget-close'>
    <img src="${CLOSE_ICON}" class='dapplet-widget-close-icon' alt='close icon'>
  </div>
  <div class='dapplet-widget-mascot-img'>
    <img src='${img}' alt='CLOSE'>
  </div>
  <div>
    <a href='${link}' target='_blank'>${text}</a>
  </div>
</div>
78`;
79this.el.innerHTML = htmlString;
80// LP end

Define contextInsPoints for the popup

public static contextInsPoints = {
  BODY: 'BODY'
}

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

1{
...
"contextIds": ["example-viewport-adapter.dapplet-base.eth"],
...
"dependencies": {
  "example-viewport-adapter.dapplet-base.eth": "0.2.0"
}
8}

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

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

Add popup with text, image and some link from the page in BODY:

1popup({
id: 'popup',
initial: 'DEFAULT',
DEFAULT: {
  text: 'The link opens this page in a new tab',
  img: EXAMPLE_IMG,
  init: (_, me) => (me.link = ctx.id),
},
9}),

On button click show the popup:

1button({
...
DEFAULT: {
  ...
  exec: () => ($(ctx, 'popup').closed = false),
},
7}),

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

Run the dapplet:

npm i
npm start

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.