solui
  • Getting Started
  • Docs
  • Github
  • Twitter
  • Telegram

Overview

Dapp mockup

The specification (aka spec) is used to define your Dapp. This includes:

  • The Dapp structure and layout.
  • User input field validation settings.
  • What contract methods to call.

We recommend storing your spec as a .json file in the same folder as your smart contracts.

Full example specs can be viewed via the CLI.

Structure

The general structure of a spec is as follows:

{
  "version": ...,
  "id": "...",
  "title": "...",
  "description": "...",
  "image": { ... },
  "aboutUrl": "...",
  "constants": { ... },
  "panels": [ ... ]
}

Reference

version

The spec version must always be 1. In future we may introduce non-backwards compatible changes which will require a change to this number.

Example:

{
  "version": 1,
}

id

This should be a human-readable and identifier for your spec, e.g. erc20-manager. The supported characters are: A-Z, a-z, 0-9 and -. It must be between 3 and 32 characters in length.

If you decide to publish your spec to the solUI cloud then this id will also need to be unique relative to other Dapps you've already published.

Example:

{
  "id": "erc20-token-ui",
}

title

A user-friendly title for your Dapp. It must be between 3 and 256 characters in length.

Example:

{
  "title": "Create and manage ERC-20 tokens",
}

description (optional)

A user-friendly text-only description for your Dapp. There is no character limit.

Example:

{
  "description": "This interface is for creating and managing your own ERC-20 tokens."
}

image (optional)

An image which appears to display alongside the Dapp title.

Example:

{
  "image": {
    "url": "https://url.to/logo.png"
  }
}

Base-64 data: URLs are also supported:

{
  "image": {
    "url": "data:image/gif;base64,R0lGO..."
  }
}

aboutUrl (optional)

If set then the About this app item will show in the bottom nav bar, linking to this URL:

About app

Example:

{
  "aboutUrl": "https://github.com/solui/demo"
}

constants (optional)

The list of named constants.

Example:

{
  "constants": {
    "tokenAddress": "0x12ab....",
    ...
  }
}

panels

Interface panels which define the actual layout.

Example:

{
  "panels": [
    { ... },
    { ... },
    ...
  ]
}