Dapplet Template

Getting Started

1. Fork and clone the repository.

2. Change module name from "dapplet-template.dapplet-base.eth" to yours in package.json file.

3. Fill in fields in the manifests package.json and dapplet.json.

4. Change icons to yours in src/icons folder.

The icon src/icon19.png is used for the injected button in source code src/index.ts.

The icon src/icon64.png is used for display in the store of Dapplets. The link to this icon is defined in dapplet.json manifest.

5. Edit necessary Dapplet settings in the config/schema.json file. The default values of settings are defined in config/default.json file. The schema follows the rules defined in the http://json-schema.org/. The Dapplet settings UI is generated by react-jsonschema-form.

There are three environments:

• dev - used when a module is loaded from development server;
• test - used when a module is loaded from Test Dapplet Registry;
• prod - used when a module is loaded from Production Dapplet Registry;

6. You can use another Adapter in your Dapplet.

Dependencies are defined in the dependencies section of the dapplet.json file.

The Twitter adapter is used by default.

The list of our adapters are available now:

• twitter-adapter.dapplet-base.eth - site-specific adapter for Twitter;
• instagram-adapter.dapplet-base.eth - site-specific adapter for Instagram;
• identity-adapter.dapplet-base.eth - virtual adapter (interface), which is an abstract of two adapters above;
• common-adapter.dapplet-base.eth - viewport adapter is universal adapter which contains generic insertion points and is compatible with any web-sites.

7. Fill in contextIds section of the dapplet.json file.

ContextId is the identifier of a context to which your module is bound. This is usually the same as the name of an adapter you are using. It may be:

• the name of an adapter you depend on (e.g. twitter-adapter.dapplet-base.eth);
• the domain name of a website to which you are creting a dapplet (e.g. twitter.com);
• the identifier of a dynamic context (e.g. twitter.com/1346093004537425927).

8. Install the Dapplet Extension for you Chrome browser (if not installed). You can find the lastest release here.

9. Run npm i and npm start commands to start development.

You will see a message like that:

rollup v2.38.3
bundles src/index.ts → lib\index.js...
Current registry address: http://localhost:3001/dapplet.json
created lib\index.js in 783ms

[2021-02-01 13:58:36] waiting for changes...

The address http://localhost:3001/dapplet.json is link to your dapplet manifest file. Copy it to clipboard.

10. Connect the development server to Dapplet Extension.

Paste URL to Developer tab of Dapplet Extension's popup. You will see your module in the list of development module. Here you can start deployment process.

11. Run dapplet at website.

Go to Dapplets tab of Dapplet Extension's popup and turn on your module.