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

Every solUI Dapp has a menu at the bottom:

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

These do the following:

* `View source` - view the Dapp spec as well as contract artifacts JSON
* `Share and embed` - get the URL for sharing this Dapp with others or embedding within a webpage
* `About this app` - visit the homepage for this app (corresponds to the `aboutUrl` property in the [Dapp spec](../../Specification))



For every panel in your Dapp, solUI keeps track of all the executions (both successes and failures) that occur in a given browser session.

To view the execution history of a given panel click the history icon button on the right:

![History button](../images/HistoryButton.png)

This will trigger popup which looks something like this:

![History list](../images/HistoryList.png)

You can then expand a previous execution to see its details as well as _retry_ it:

![History details](../images/HistoryDetails.png)

Clicking _"Replay"_ will cause the input fields in the panel to be set to the selected previous execution's input values, without automatically executing the panel. This gives you a chance to modify the values prior to execution.



Execution replay

A Dapp author has to explicitly mark their Dapp as ready for production use on the Ethereum Mainnet.

Otherwise, by default, when running against the Mainnet the rendered Dapp UI will display a warning on every
panel which looks like this:

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

This is intended as a safety measure to protect users.

Marking a Dapp as ready for production use involves setting the `production` flag in the [specification](../../Specification).


Mainnet warning

Dapp interface

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"
  }
}
```






