Git Product home page Git Product logo

test-rep's Introduction

Getting Started

Open in Gitpod!

To run the simpliest dapplet, follow these steps.

1. Clone Dapplet Template repository locally.

git clone [email protected]: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/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 and are injected in the dapplet's index.ts file.

The Twitter adapter is used by default.

The list of our adapters are available now:

See for more here.

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. Specify the argument of @Inject decorator with chosen adapter in the /src/index.ts module and add method activate() with the simple dapplet code.

import {} from '@dapplets/dapplet-extension';
import EXAMPLE_IMG from './icons/icon19.png';

@Injectable
export default class TwitterFeature {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any,  @typescript-eslint/explicit-module-boundary-types
  @Inject('twitter-adapter.dapplet-base.eth') public adapter: any;
  
  activate() {
    const { button } = this.adapter.exports;
    this.adapter.attachConfig({
      POST_SOUTH: [
        button({
          initial: 'DEFAULT',
          DEFAULT: {
            label: 'Injected Button',
            img: EXAMPLE_IMG,
            exec: () => alert('Hello, World!'),
          },
        }),
      ],
    });
  }
}

9. Install the Dapplet Extension for you 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 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 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 module. Here you can start deployment process.

Developer tab of Extension

12. Run your dapplet in the website.

Developer tab of Extension

Here is an example:

ex00-2-master

test-rep's People

Contributors

dilman78 avatar

Watchers

 avatar

test-rep's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.