Use the `help` command to obtain help on the CLI's available commands:

```shell
solui help
```

This will output something like:

```
solui

  Develop and publish Dapps for smart contracts. For more information
  see https://solui.dev.

Usage

  $ solui <command> [options]

Commands

  login     Login to the solUI cloud and obtain an authentication token.
  publish   Publish a Dapo to the solUI cloud.
  version   Display solUI version.
  view      Render a Dapp and interact with it in your browser.
  help      Print this usage guide. Use "help <command>" for help on a specific command.
```

To get help on an individual command use:

```shell
solui help <command name>
```


Command: help

![Dapp mockup](../../images/RootLayout.png)

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](../../CommandLine).

## Structure

The general structure of a spec is as follows:

```js
{
  "version": ...,
  "title": "...",
  "description": "...",
  "image": { ... },
  "aboutUrl": "...",
  "production": "...",
  "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:

```js
{
  "version": 1,
}
```

**title**

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

Example:

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

**description** _(optional)_

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

Example:

```js
{
  "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:

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

Base-64 `data:` URLs are also supported:

```js
{
  "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](../../images/AboutApp.png)

Example:

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


**production** _(optional)_

By default a Dapp is considered unsafe for production use and when used against the Ethereum mainnet a
warning will be displayed as such:

![Warning](../../images/Warning.png)

To disable this warning and mark a Dapp as safe for production use on Mainnet, set this property to `true`:

```js
{
  "production": true
}
```


**constants** _(optional)_

The list of [named constants](../Constants).

Example:

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


**panels**

Interface [panels](../Panels) which define the actual layout.

Example:

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


Overview

Named constants provide a method of re-using and sharing fixed string values throughout your Dapp. A named constant can be referenced as the initial value of an [input field](../Inputs) and also contract [execution](../Execs) parameters.

## Structure

```js
{
  ...,
  "constants": {
    "name1": {
      "default": "value1"
    },
    "name2": {
      "default": "value2-default",
      "4": "value2-rinkeby",
      "3": "value2-ropsten",
      ...
    },
    ...
  },
}
```

## Reference

**How naming works**

Constants are specified as a mapping of key-value pairs contained within the top-level `constants` key.

The _key_ is the name of the constants. For example, given:

```js
"constants": {
  "firstName": {
    "default": "John"
  }
}
```

The above constant can referenced anywhere within the Dapp spec using `@constant[firstName]`.

**How values are specified**

The _value_ of a constant must be specified as a mapping of network ids to a value:

```js
"constants": {
  /*
    If on the Rinkeby (network id = 4) the value will be `100`. On Ropsten (network id = 3) its value will be `200`. And all other
    networks (i.e. the `default`) the value will be `10`.
  */
  "supply": {
    "default": "10",
    "4": "100",
    "3": "200"
  },
  /*
    If on the Rinkeby (network id = 4) the value will be `[5, 6]`. On Ropsten (network id = 3) its value will be `[10]`. And all other
    networks (i.e. the `default`) the value will be `[1, 2, 3]`.
  */
  "intervals": {
    "default": [ 1, 2, 3 ],
    "4": [ 5, 6 ],
    "3": [ 10 ],
  }
}
```

**How to use**

To refer to a constant, use the `@constants[name]` syntax, where `name` is the the actual constant name. For example:

```js
{
  "constants": {
    "supply": {
      "default": "100"
    }
  }
  ,
  "panels": [
    {
      ...,
      "execs": [
        {
          ...,
          "supply": "@constant[supply]"
        }
      ]
    }
  ]
}
```

If the value of a constants is an object then _subscripts_ can be used to refer to nested values:

```js
{
  "constants": {
    "base": {
      "default": {
        "supply": "10",
        "name": "yin"
      }
    }
  },
  "panels": [
    {
      ...,
      "execs": [
        {
          ...,
          "supply": "@constant[base][supply]",
          "name": "@constant[base][name]"
        }
      ]
    }
  ]
}
```


Constants

Panels are user interfaces which perform execution tasks.

<mockup here>

A panel display a single button to execute all the tasks and obtain the result.
It may also have user [input fields](../Inputs) to pass input arguments to the
[execution tasks](../Execs).

## Structure

```js
{
  ...,
  "panels": [
    {
      "id": "...",
      "title": "...",
      "inputs": [ ... ],
      "execs": [ ... ],
      "outputs": [ ... ]
    }
  ]
}
```

## Reference

**id**

This should be a human-readable and identifier for the panel, e.g. `deploy-token`. The supported characters are: `A-Z`, `a-z`, `0-9` and `-`. It must be between 3 and 64 characters in length.

This id must be unique amongst all the other panels in the spec.

Example:

```js
{
  "id": "create-token",
}
```

**title**

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

Example:

```js
{
  "title": "Create new token",
}
```

**inputs** _(optional)_

User [input fields](../Inputs) which define input arguments to pass to the
[execution tasks](../Execs).

```js
{
  "inputs": [
    { ... },
    { ... },
    ...,
  ]
}
```

**execs**

The [execution tasks](../Execs) to perform the when the panel gets executed.

The tasks are executed in sequence, one after another. This allows for earlier
tasks' outputs to be re-used as later tasks' inputs.

```js
{
  "execs": [
    { ... },
    { ... },
    ...,
  ]
}
```

**outputs** _(optional)_

The [outputs](../Outputs) to display to the user once panel tasks are successfully
executed.

Each output refers to the result of an [execution task](../Execs).

```js
{
  "outputs": [
    { ... },
    { ... },
    ...,
  ]
}
```


Panels

Inputs define the input fields that show in a panel.

Inputs have types, optional validation checks and ultimately feed into contract method arguments. By default
inputs are rendered in the order in which they're defined in a panel.

## Structure

```js
{
  ...,
  "panels": [
    {
      ...,
      "inputs": [
        {
          "name": "...",
          "title": "...",
          "initialValue": "...",
          "options": "...",
          "type": "...",
          "placeholder": "...",
          "helpText": "...",
          "unit": "...",
          "scale": "...",
          "validation": [ ... ]
        },
        ...
      ]
    }
  ]
}
```

## Reference

**name**

The name of the input. This is not shown to the user but is instead the canonical internal name of the input. It must be unique in the list of input names for its parent panel.

Example:

```js
{
  "name": "tokenName"
}
```

The above example's input value can be referenced elsewhere in the Dapp using `@input[tokenName]`.

**title**

The user-friendly name of the input. This is shown the user as the label for the input.

Example:

```js
{
  "title": "Token name"
}
```

**type**

The input type. At present this must be one of:

* `address`
* `bool`
* `bytes32`
* `int`
* `string`
* `int[]`
* `bytes32[]`
* `address[]`

Example:

```js
{
  "type": "bytes32"
}
```

The types suffixed with `[]` are [list input types](../ListInputs) and specify lists of values.



**placeholder** _(optional)_

The placholder text.

Example:

```js
{
  "placeholder": "A non-zero number"
}
```


**helpText** _(optional)_

Help text to be displayed next to the input field to help clarify its use.

Example:

```js
{
  "helpText": "Please enter the desired totaly supply of your token."
}
```


**initialValue** _(optional)_

Initial value to display in the input field, specified as one of.

  * A named [constant](../Constants).
  * An [environment variable](../EnvVars).
  * A fixed string value.

Example using a fixed value:

```js
{
  "initialValue": "100"
}
```

Example using a named constant:

```js
{
  "initialValue": "@constant[contractAddress]"
}
```

Example using an environment variable:

```js
{
  "initialValue": "@env[account]"
}
```

**options** _(optional)_

Display a dropdown of values for the user to select from, though they can still edit the input field
manually.

![Options](../../images/Options.png)

Options are specifed as one of:

  * A named [constant](../Constants).
  * An array of labels and values.

Example using an array of labels and values:

```js
{
  "options": [
    {
      "label": "Token 1",
      "value": "TOK1"
    },
    {
      "label": "Token 2",
      "value": "TOK2"
    }
  ]
}
```

Example using a constant:

```js
{
  "constants": {
    "tokenNames": {
      "default": [
        {
          "label": "Token 1",
          "value": "TOK1"
        },
        {
          "label": "Token 2",
          "value": "TOK2"
        }
      ]
    }
  },
  "panels": [
    ...,
    {
      ...,
      "inputs": [
        ...,
        {
          ...,
          "options": "@constant[tokenNames]"
        }
      ]
    }
  ]
}
```

**unit** _(optional)_

Applies to `type`: `int`

This is user-friendly text that gets shown in the tooltip
popup next to the input label:

![Field unit](../../images/FieldUnit.png)

Example:

```js
{
  "unit": "TOKEN"
}
```

**scale** _(optional)_

Applies to `type`: `int`

This is how to much to scale the input value by to obtain the real integer value. This
means multiplying the input value by `10^scale` to obtain the real value.

For example, if inputting an ETH value then the scale should be set to 18 to
ensure that the real value sent to the contract is measured in WEI.

Example:

```js
{
  "scale": 18
}
```

**validation** _(optional)_

List of [validation checks](../InputValidation) for this input field.

Example:

```js
{
  "validation": [
    {
      ...
      "type": "..."
    },
    ...
  ]
}
```



Inputs

Input validations define validation checks to be performed on input field values.

## Structure

```js
{
  ...,
  "panels": [
    {
      ...,
      "inputs": [
        {
          ...,
          "validation": [
            {
              "type": "length",
              "min": "2",
              "max": "10"
            },
            ...
          ]
        },
        ...
      ]
    }
  ]
}
```
## Reference

The `type` parameter specifies the input validation type:

* `length`
* `range`
* `allowedTypes`
* `compareToField`
* `matchesBytecode`
* `listSize`

Example:

```js
{
  "type": "length"
}
```

Additional attributes depend on this parameter.

**Validation: length**

The `length` validation checks the length of the input string to ensure its
within the range specified by `min` and `max`.

Example:

```js
{
  /* string must be between 1 and 23 characters in length */
  "type": "length",
  "min": "1",
  "max": "23"
}
```

Example with just `min`:

```js
{
  /* string must be atleast 5 characters in length */
  "type": "length",
  "min": "5"
}
```

Example with just `max`:

```js
{
  /* string must be no more than 17 characters in length */
  "type": "length",
  "max": "17"
}
```

**Validation: range**

The `range` validation checks that the input string represents a number between
`min` and `max` boundary values. The boundary values can be positive or negative 256-bit integer values.

Example :

```js
{
  /* string must represent a number between -10 and 23 in value */
  "type": "range",
  "min": "-10",
  "max": "23"
}
```

Example with just `min`:

```js
{
  /* string must represent a number greater than or equal to 2 in value */
  "type": "range",
  "min": "2"
}
```

Example with just `max`:

```js
{
  /* string must represent a number less than or equal to -20 in value */
  "type": "range",
  "max": "-20"
}
```

**Validation: allowedTypes**

If the input type is `address` then this validation check specifies what types of
Ethereum addresses are allowed. Specifically there are two address types:

* `contract` - an on-chain contract address.
* `eoa` - an "externally-owned account", i.e. a standard Ethereum address that isn't an on-chain contract.

Examples:

```js
{
  /* address must be a contract address, not an eoa */
  "type": "allowedTypes",
  "contract": true
}
```

```js
{
  /* address can be either an eoa or contract address */
  "type": "allowedTypes",
  "contract": true,
  "eoa": true
}
```

**Validation: compareToField**

This validation specifies how the value of the input must relate to the value of another input in the
same panel.

It requires two config parameters:

* `field` - name of other input field within the same panel.
* `operation` - the type of comparision to make. Must be one of:
  - `notEqual`: _input value must NOT equal other input field's value_

Example:

```js
{
  "type": "compareToField",
  "field": "field1",
  "operation": "notEqual",
}
```

**Validation: matchesBytecode**

This validation specifies that the value should be the address of an on-chain contract which has the same
bytecode as the contract specified in the validation config.

This is useful in Dapps where e.g. a user may deploys a contract via one panel and then interacts with
the deployed contract from another panel.

It requires one parameter:

* `contract` - canonical name of contract from the artifacts list.

Example:

```js
{
  "type": "matchesBytecode",
  "contract": "ERC20"
}
```

**Validation: listSize**

This validation only applies to [list inputs](../ListInputs). It works the same as the `length`
validator in that it can be used to specify a minimum and/or maximim array size.

Example:

```js
{
  /* list must be between 1 and 23 items in length */
  "type": "listSize",
  "min": "1",
  "max": "23"
}
```

Example with just `min`:

```js
{
  /* list must be atleast 5 items in length */
  "type": "listSize",
  "min": "5"
}
```

Example with just `max`:

```js
{
  /* list must be no more than 17 items in length */
  "type": "listSize",
  "max": "17"
}
```



Input validation

List inputs define fields which hold a list of items. They are specified by using of the following input types:

* `int[]`
* `bytes32[]`
* `address[]`

The UI will render a list input field as follows:

![List input](../../images/ListInput.png)

By default a list input accepts comma-separated input. However, an expanded input modal is always
available, through which one can choose to input items one-per-line or comma-separated and easily
switch between the two:

![List input modal](../../images/ListInputModal.png)

## Referencing items

When defining [execution tasks](../Execs) it's possible to refer to individual items within a list using _subscripts_:

```js
{
  "inputs": [
    {
      name: "premiumPayments",
      type: "int[]", ...
    },
    ...
  ],
  "execs": [
    {
      ...,
      "payment1": "@input[premiumPayments][0]"
      "payment2": "@input[premiumPayments][1]"
    }
  ]
}
```

## Validation

The standard [validation](../InputValidation) rules also apply to list items.

For example, to specify a list of 3 numbers where each number must be between 10 and 20, configure
the input as follows:

```js
{
  "type": "int[]",
  "validation": [
    {
      /* list must contain exactly 3 items */
      "type": "listSize",
      "min": 3,
      "max": 3
    },
    {
      /* numbers must be between 10 and 20 */
      "type": "range",
      "min": 10,
      "max": 20
    }
  ]
}
```

Here is how the validation errors for this may typically look:

![List input errors](../../images/ListInputErrors.png)

Another example: to configure a list of no more than 10 addresses where each address is a
contract address:

```js
{
  "type": "address[]",
  "validation": [
    {
      /* list must not contain more than 10 items */
      "type": "listSize",
      "max": 10
    },
    {
      /* addresses must be "contract" addresses */
      "type": "allowedTypes",
      "contract": true
    }
  ]
}
```


List inputs

Execution tasks define what contract methods get called with what arguments.

If a [panel](../Panels) defines more than one execution task they are
executed in _sequence_, not parallel.
This allows for the output of an earlier task to be re-used as the input argument of a later task.

## Structure

```js
{
  ...,
  "panels": [
    {
      ...,
      "execs": [
        {
          "type": "...",
          "contract": "...",
          "address": "...",
          "method": "...",
          "args": { ... },
          "transferAmount": "...",
          "saveResultAsInput": "..."
          "successMessage": "...",
          "failureMessage": "..."
        }
      ]
    }
  ]
}
```

## Reference

**type**

The type of contract call to make. Can be one of:

* `deploy` - deploy a contract. _Note: The `method` property is
ignored in this case_.
* `call` - call a read-only method on a contract without creating a
transaction (equivalent to [eth_call](https://github.com/ethereum/wiki/wiki/JSON-RPC#eth_call)).
* `send` - call a method on a contract by creating a
transaction (equivalent to [eth_sendTransaction](https://github.com/ethereum/wiki/wiki/JSON-RPC#eth_call)).

Example:

```js
{
  "type": "send"
}
```

**contract**

The name of the contract, present in the list of [contract artifacts](../../CommandLine/View).

Example:

```js
{
  "name": "ERC20"
}
```

**address**

The on-chain address of the contract, specified as one of:

  * Name of a panel [input field](../Inputs).
  * A named [constant](../Constants).
  * An [environment variable](../EnvVars).
  * The result of a previous execution task (see `saveResultAs` below).
  * A fixed value.

Example (address is specified as a user input field):

```js
{
  "inputs": [
    { name: "contractAddress", ... },
    ...
  ],
  "execs": [
    {
      ...,
      "address": "@input[contractAddress]"
    }
  ]
}
```


Example (referring to the first item in [list input](../ListInputs) field):

```js
{
  "inputs": [
    { name: "premiumPayments", type: "int[]", ... },
    ...
  ],
  "execs": [
    {
      ...,
      "address": "@input[premiumPayments][0]"
    }
  ]
}
```

Example (address is specified as a named constant):

```js
{
  "execs": [
    {
      ...,
      "address": "@constant[contractAddress]"
    }
  ]
}
```

Example (address is specified as result of earlier task):

```js
{
  "execs": [
    /* this gets executed first */
    {
      ...,
      "saveResultAsInput": "contractAddress"
    },
    /* this gets executed second */
    {
      ...,
      "address": "@input[contractAddress]"
    }
  ]
}
```

**method**

The method to call on the contract. The method must be externally callable.

Example:

```js
{
  "method": "transfer"
}
```

_Note: If execution `type` equals `deploy` then this property is ignored_.

**args** _(optional)_

The arguments to pass to the contract method.

This is specified as key-value pairs, where the key is the name of contract
method argument and corresponding value is one of:

  * Name of a panel [input field](../Inputs).
  * A named [constant](../Constants).
  * An [environment variable](../EnvVars).
  * The named result of a previous execution task (see `saveResultAs` below).
  * A fixed value.

Example:

```js
{
  "inputs": [
    { name: "name", ... },
    { name: "symbol", ... },
    { name: "initialSupply", ... }
  ],
  "execs": [
   {
     "type": "deploy",
     "contract": "ERC20",
     "args": {
       "_name": "@constant[tokenName]",
       "_symbol": "@input[symbol]",
       "_initialSupply": "1000000"
     }
   }
  ]
}
```

Example using an environment variable:

```js
{
  "execs": [
    {
      "type": "call",
      "method": "balanceOf",
      "args": {
        "_address": "@env[account]",
      }
      ...,
    }
  ]
}
```

Example mapping from result of previous execution:

```js
{
  "execs": [
    {
      "type": "deploy",
      ...,
      "saveResultAsInput": "newContractAddress",
    },
    {
      "type": "send",
      "method": "setTokenContract",
      "args": {
        "_address": "@input[newContractAddress]",
      }
      ...,
    }
  ]
}
```

**transferAmount** _(optional)_

The amount of ETH to send along with a transaction (equivalent to [msg.value](https://ethereum.stackexchange.com/questions/43362/what-is-msg-value)).

This property only applies when the execution `type` is `send` and should only be used when calling [payable](https://medium.com/@rsripathi781/6-payable-functions-in-solidity-smartcontract-ethereum-d2535e346dc1) functions.

It can be specified as one of:

  * Name of a panel [input field](../Inputs).
  * A named [constant](../Constants).
  * An [environment variable](../EnvVars).
  * The result of a previous execution task (see `saveResultAs` below).
  * A fixed value.

_Note: The processor will automatically convert the resolved value to its final hexadecimal representation prior to sending the transaction_.

Example (specified as a user input field):

```js
{
  "inputs": [
    { name: "amount", ... },
    ...
  ],
  "execs": [
    {
      ...,
      "transferAmount": "@input[amount]"
    }
  ]
}
```

**saveResultAsInput** _(optional)_

Save the result of the execution as a named variable to used as an input later
on.

Example:

```js
{
  "execs": [
    {
      "type": "call",
      ...,
      "saveResultAsInput": "currentBalance",
    },
    {
      "type": "send",
      "method": "transfer",
      "args": {
        "_amount": "@input[currentBalance]",
      }
      ...,
    }
  ]
}
```

**successMessage** _(optional)_

A message to be shown to the user if the transaction succeeds. This property thus only applies to
contract execution tasks of types `deploy` and `send`.

Note that this message will be shown _in addition_ to what is normally shown.

Example:

```js
{
  "execs": [
    {
      "type": "deploy",
      "contract": "ERC20",
      "args": {
        "_name": "@input[name]",
        "_symbol": "@input[symbol]",
        "_initialSupply": "@input[initialSupply]"
      },
      "saveResultAsInput": "contractAddress",
      "successMessage": "Now try interacting with your new contract using the panels below!"
    }
  ]
}
```

The displayed message will look something like this:

![Success message](../../images/SuccessMessage.png)

**failureMessage** _(optional)_

A message to be shown to the user if the transaction fails. This property thus only applies to
contract execution tasks of types `deploy` and `send`.

Note that this message will be shown _in addition_ to what is normally shown.

Example:

```js
{
  "execs": [
    {
      "type": "deploy",
      "contract": "ERC20",
      "args": {
        "_name": "@input[name]",
        "_symbol": "@input[symbol]",
        "_initialSupply": "@input[initialSupply]"
      },
      "saveResultAsInput": "contractAddress",
      "failureMessage": "Uh oh, something went wrong!"
    }
  ]
}
```

The displayed message will look something like this:

![Failure message](../../images/FailureMessage.png)


Execs

Outputs specify results to display to the user once panel has succesfully executed. If no outputs are defined then the Dapp will not display any results but will simply show a success status.

![Outputs](../../images/Outputs.png)

## Structure

```js
{
  ...,
  "panels": [
    {
      ...,
      "outputs": [
        {
          "title": "...",
          "type": "...",
          "value": "...",
          "transform": [ ... ]
        },
        ...
      ]
    }
  ]
}
```

Note that outputs are only displayed once all [Execution steps](../Execs) have been completed.

## Reference

**type**

The output type. This is to help the renderer figure out how best to display the output value. At present this must be one of:

* `address`
* `bool`
* `bytes32`
* `int`
* `string`
* `address[]`
* `bytes32[]`
* `int[]`

Example:

```js
{
  "type": "string"
}
```

If you specify an array type (i.e. with the `[]` suffix) then the each value within the
returned list will be rendered one after another, and the other output formatting options
will be applied to each and every value in turn:

![Array output](../../images/ArrayOutputValue.png)

Also, if you are applying [transformations](../Transformations) then the type specified here must
reflect the type of the final transformed value instead of the initial type. For example:

```js
{
  "type": "string", // initial type is "int", but final transformed type is "string"
  "transform": [
    {
      //
      "type": "...converts ints to strings..."
    }
  ]
}
```

**title**

The user-friendly label for this output value.

Example:

```js
{
  "title": "Balance"
}
```

**value**

The value to display, specified as one of:

* Reference to a panel [input field](../Inputs).
* Reference to a previous [execution result](../Execs)
* A fixed value.

Examples:

```js
{
  "value": "@input[tokenSymbol]"
}
```

```js
{
  "value": "A fixed value"
}
```


**transform** _(optional)_

One or more [transformations](../Transformations) to apply to the output value prior to rendering it. If using this then
note that the `type` parameter must reflect the type of the final transformed value.

Example:

```js
{
  "transform": [
    {
      "type": "...",
      ...
    },
    {
      "type": "...",
      ...
    },
    ...
  ]
}
```

If transformations are set set then the output value becomes clickable so that the user is able to
view both transformed and untransformed values:

![Output value](../../images/OutputValue.png)

## Deprecated properties

**scale** _(optional)_

_(This has been replaced by the `intToScaledIntString` [transformation](../Transformations))_.

Applies to `type`: `int`

This is how to much to scale the output value by to obtain the displayable value. This
means multiplying the input value by `10^scale` to obtain the real value.

For example, if outputting an ETH value (which gets returned as WEI from a contract call)
then the scale should be set to -18.

Example:

```js
{
  "scale": "-18"
}
```

**unit** _(optional)_

_(This has been replaced by the `stringToSpacedSuffixedString` [transformation](../Transformations))_.

Applies to `type`: `int`

This is user-friendly text that gets shown next to the output value when `scale` is also set.

Example:

```js
{
  "unit": "Tokens"
}
```


Outputs

Transformations allow you to transform an [output value](../Outputs) into other formats prior to display. For example, you may
wish to treat a returned integer as a timestamp and display it as user-friendly datetime string.

Multiple transformations can be specified for a given value, in which case they are _chained_ together,
i.e. the output of a given transformation in the chain becomes the input of the next transformation, and so on.

## Structure

```js
{
  ...,
  "panels": [
    {
      ...,
      "outputs": [
        {
          "transform": [
            {
              "type": "...",
              ...
            },
            {
              "type": "...",
              ...
            },
            ...
          ]
        },
        ...
      ]
    }
  ]
}
```


## Reference

The `type` parameter specifies the transformation type:

* `intToDateString`
* `intToScaledIntString`
* `intToHexString`
* `intToBinaryString`
* `stringToSpacedSuffixedString`
* `toMappedString`

_Note: transformations are named in the format _`<inputType>...<outputType>`_ for ease of use_.

Example:

```js
{
  "type": "intToDateString"
}
```

Additional attributes depend on this parameter.

**Transformation: intToDateString**

This treats a number value as a [blockchain-generated timestamp](https://solidity.readthedocs.io/en/v0.5.3/units-and-global-variables.html)
and converts it to its string representation.

Example:

```js
{
  "type": "intToDateString"
}
```

The string formatting is performed by the [date-fns library](https://date-fns.org/v1.30.1/docs/format) and the default
format pattern is `MMM d, yyyy`. For example, the value `1585167477` would be transformed to `Mar 25, 2020`.

To change the pattern use the `format` parameter:

```js
{
  "type": "intToDateString",
  "format": "HH:mm"
}
```

The value `1585167477` would now be transformed to `20:17`.

_Note: full pattern information is available in the [date-fns/format]([date-fns library](https://date-fns.org/v1.30.1/docs/format)) docs_.

**Transformation: intToScaledIntString**

This scales a number value by the given scaling amount and returns a base-10 string representation. This means
multiplying the input value by `10^scale` to obtain the final value.

Example (`10` -> `"10000"`):

```js
{
  "type": "intToScaledIntString",
  "scale": "3"
}
```

If outputting an ETH value (which gets returned as WEI from a contract call) then the scale should be set to `-18`.

**Transformation: intToHexString**

This converts a number value to its hexadecimal string representation.

Example (`255` -> `"FF"`):

```js
{
  "type": "intToHexString"
}
```

**Transformation: intToBinaryString**

This converts a number value to its binary string representation.

Example (`4` -> `"100"`):

```js
{
  "type": "intToBinaryString"
}
```

**Transformation: stringToSpacedSuffixedString**

This adds a suffix to a string value, leaving a space in between.

Example (`"10"` -> `"10 eth"`):

```js
{
  "type": "stringToSpacedSuffixedString",
  "suffix": "eth"
}
```


**Transformation: toMappedString**

This maps the value to an output string. The value is first stringified before the map lookup. Thus the map keys must be strings.

Example (mapping ints to strings):

```js
{
  "type": "toMappedString",
  "options": {
    "0": "Created",
    "1": "Initial sale",
    "2": "Active",
    "3": "Matured",
    "4": "Cancelled"
  }
}
```








Transformations

Some built-in environment variables are available for use in a Dapp spec. They function in a similar way to [constants](../Constants) in that they are constant, unchange-able values. The difference is that they are automatically available and do not have to be explicitly declared.


## Reference

At present the following environment variables are available:

* `account` - the user's account address, i.e. the active Metamask account or the active address in their connected wallet

**How to use**

To refer to a constant, use the `@env[name]` syntax, where `name` is the the actual constant name. See the docs for [inputs](../Inputs) for examples.


Environment

Specification

Use the `version` command to obtain the current solui package version:

```shell
solui version
```
