Get Started

To run a basic dapplet, follow these steps.

1. Clone Dapplet Template repository locally.#

git clone git@github.com:dapplets/dapplet-template.git

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/dapplet-icon.png is used for the injected button in source code src/index.ts and for display in the Dapplets store. The link to this icon is defined in dapplet.json manifest.

5. Edit necessary Dapplet settings in the config/schema.json file.#

The default setting values 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 and are injected in the dapplet's index.ts file.

The Twitter adapter is used by default.

Our list of adapters available at the moment:

See for more here.

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

ContextId is an 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 creating a dapplet (e.g. twitter.com);
  • the identifier of a dynamic context (e.g. twitter.com/1346093004537425927).

8. Specify the argument of @Inject decorator with chosen adapter in the /src/index.ts module and add method activate() with a simple dapplet code.#

1import {} from '@dapplets/dapplet-extension';
2import EXAMPLE_IMG from './icons/dapplet-icon.png';
3
4@Injectable
5export default class TwitterFeature {
6 // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
7 @Inject('twitter-adapter.dapplet-base.eth') public adapter: any;
8
9 activate() {
10 const { button } = this.adapter.exports;
11 this.adapter.attachConfig({
12 POST: () =>
13 button({
14 initial: 'DEFAULT',
15 DEFAULT: {
16 label: 'Injected Button',
17 img: EXAMPLE_IMG,
18 exec: () => alert('Hello, World!'),
19 }
20 })
21 });
22 }
23}

9. Install the Dapplet Extension for your Chrome browser (if not installed) - follow the Installation steps.#

10. Install dependencies and run the code:#

npm i
npm start

You will see a message like this:

1rollup v2.38.3
2bundles src/index.ts → lib\index.js...
3Current registry address: http://localhost:3001/dapplet.json
4created lib\index.js in 783ms
5[2021-02-01 13:58:36] waiting for changes...

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

11. Connect the development server to Dapplet Extension.#

Paste URL to Developer tab of Dapplet Extension's popup and click Add.

Developer tab of Extension

You will see your module in the list of development modules. Here you can start the deployment process.

Developer tab of Extension

12. Run your dapplet on the website.#

Developer tab of Extension

Here is an example:#

video

Edit this page