5. Creating a Setup Wizard for your package

Setup Wizard

The wizard helps users configure the package. You can declare the different configuration variables that the user must or should set. You can also add a description and validation logic to them. This component is built on top of https://github.com/rjsf-team/react-jsonschema-form and requires three distinct files:

• setup.schema.json: Declares which parameters should be shown in the setup wizard form, their name, description and validation options. For all description fields you can use markdown, which will be rendered by https://github.com/rexxars/react-markdown.
• setup-ui.json (optional): Adds custom options affecting the display of setup.schema.json's fields. See https://react-jsonschema-form.readthedocs.io for more details.
• setup-target.json: Tells the DAppNode installer what configuration parameter is each field referring too. See below for available options

setup.schema.json

Declare which parameters should be shown in the setup wizard form, their name, description and validation options. For all description fields you can use markdown which will be rendered by https://github.com/rexxars/react-markdown.

{
  "description": "This setup wizard will help you start. In case of problems: https://github.com/dappnode/DAppNodePackage-vipnode#installing-and-setting-up-vipnode",
  "type": "object",
  "required": ["payoutAddress"],
  "properties": {
    "payoutAddress": {
      "type": "string",
      "title": "Payout address",
      "description": "Define an Ethereum mainnet address to get rewards to",
      "pattern": "^0x[a-fA-F0-9]{40}$"
    }
  }
}

setup-ui.json

Add custom options affecting the display of setup.schema.json's fields. See https://react-jsonschema-form.readthedocs.io for more details.

{
  "payoutAddress": {
    "ui:help": "Don't use your main address",
    "errorMessages": {
      "pattern": "Must be a valid address (0x1fd16a...)"
    }
  }
}

setup-target.json

Tell the DAppNode installer what configuration parameter is each field referring too. See below for available options

{
  "payoutAddress": {
    "type": "environment",
    "name": "PAYOUT_ADDRESS"
  }
}

Available setup-target.json options:

• environment target an environment variable. Must be declared also in the docker-compose in the environment section as empty or with a default value.

{
  "type": "environment",
  "name": "PAYOUT_ADDRESS"
}

• portMapping targets a port mapping. Must be declared also in the docker-compose in the ports section.

{
  "type": "portMapping",
  "containerPort": "8080"
}

• namedVolumeMountpoint target a docker named volume mountpoint. If you expect a volume of your package to have a considerable size (i.e. public blockchains) you can use this option to allow users to select a different mountpoint for the volume, such as an external SSD drive.

{
  "type": "namedVolumeMountpoint",
  "volumeName": "bitcoin_data"
}

• fileUpload allows users to upload a file to the provided path. Use this option if your package requires a keystore or a very specific configuration file that is easier to upload as a whole than with single environment variables. If you use this option, users will see a file uploader in the Admin UI during the installation process. The file contents will be copied and available to the docker container before starting it for the first time.

{
  "type": "fileUpload",
  "path": "/usr/config/keystore.json"
}

Avatar

To show this DAppNode package in the Admin UI it's mandatory to add an avatar to the package. This avatar will show up in the DApp store, and in the list of installed packages. For optimal presentation make sure:

• The avatar is a .png with transparency and no background (if applicable)
• It has an aspect ratio of 1:1 and a size of 300px x 300px
• It is maximized to the edges since margin will be provided in the UI

To add an avatar to your DAppNode package, just add the .png file to the root of the project. The dappnodesdk will automatically find it and add it to the release. For consistency, we recommend naming the file as avatar-${package_name}.png but it's not necessary.