solUI is an open-source project and as such all questions, bug fixes and suggestions are welcome!

Code and roadmap:

* Code - [https://github.com/solui](https://github.com/solui)
* Roadmap - [https://github.com/solui/solui/projects/1](https://github.com/solui/solui/projects/1)
* All issues - [https://github.com/solui/solui/issues](https://github.com/solui/solui/issues)

Social media channels:

* Telegram - [soluichat group](https://t.me/soluichat)
* Twitter - [@sol_ui](https://twitter.com/sol_ui)



Contributing

## Installation

We recommend the following versions of [Node](https://nodejs.org/) and [NPM](https://www.npmjs.com/):

* Node.js 12.13.0 or above
* NPM 6.12.0 or above

To start using solUI first install the command-line interface, which is a
[Node.js package](https://www.npmjs.com/package/@solui/cli). We recommend that you install it globally:

```shell
npm install -g @solui/cli
```

## Setup local network

You can use solUI on the Ethereum mainnet or any of the test networks, but for
now we'll use a local test net for development purposes. We recommend
using [ganache](https://www.trufflesuite.com/ganache) for this. Run:

```shell
npx ganache-cli
```

This will output some intialization information followed by a randomly generated
mnemonic, e.g:

![Ganache mnemonic](../images/GanacheMnemonic.png)

Note down the mnemonic pass phrase. You will need to enter this into Metamask (see below).

## Setup your Dapp browser

Ensure you have [Metamask](https://metamask.io/) installed for your browser. Login
to it using the mnemonic pass phrase you wrote down earlier:

![Metamask login](../images/MetamaskSeedPhrase.png)

You should now see your default account with 100ETH showing in it.

![Metamask balance](../images/MetamaskBalance.png)

## Run the demo

Clone the demo repository and set it up:

```shell
git clone https://github.com/solui/demo.git
cd demo
npm install
```

Compile and deploy the demo contracts to build the contract JSON artifacts:

```shell
npm run compile
npm run migrate
```

Now view the ERC-20 Dapp:

```
solui view --spec contracts/erc20/ui.json --artifacts build/contracts
```

Open up the browser to http://localhost:3001 and you will now be able to view
and use the ERC20 token Dapp:

![Demo Dapp](../images/DemoUi.png)

## Make some changes

Whenever you change the Dapp spec _or_ rebuild the contract artifacts, solUI will
[auto-reload](https://webpack.js.org/concepts/hot-module-replacement/) the Dapp in your browser.

Try this out by editing `contracts/erc20/ui.json`. Edit the root `title`
property:

```js
{
  ...
  "title": "This title has been updated!",
  ...
}
```

Switch to the browser window and notice that the Dapp title has automatically been updated without a
page reload! Changes to the contract build artifacts also get picked up automatically, so you can
compile new versions of your contracts and the Dapp will auto-reload them in.

If you any mistakes in your spec then solUI will display a friendly error
pointing out the specific issue.

Check out the [full specification documentation](../Specification) to learn about
what else you can diisplay in your new Dapp.


## Publish

Once your Dapp is ready you can publish it to the solUI cloud so that everyone can
use it!

First, login:

```shell
solui login
```

One logged in, do:

```shell
solui publish --spec contracts/erc20/ui.json --artifacts build/contracts
```

The console should output a URL where you can view your IPFS-hosted Dapp. Read the
[publishing docs](../../Publishing/Overview) for more information.

Getting started

solUI interfaces are deterministically generated from a declarative
specification. Furthermore, the underlying parsing and rendering engine is
platform agnostic.

Here are the key benefits that are realized as a result of this:

* **Dapp look and feel is consistent across platforms and contracts**
  * All Dapps can have a consistent look-and-feel.
  * No front-end programming skills required since spec is more akin to a template.
  * The spec can be checked into version control and thus evolve alongside the contract code.
* **Specification sits at a higher level than an ABI, abstracting away ugly details**
  * User-friendly labels, text and images makes things intuitive for the user.
  * A single execution can involve calls to multiple methods across multiple contracts.
  * Output from earlier method calls can be automatically be re-used as inputs to later calls.
* **Platform-agnostic rendering, validation and testing**
  * Platform-agnostic (can render to web, mobile, desktop, ...).
  * Headless execution is also supported, making [Dapp testing](../../AdvancedUsage/HeadlessTesting) a breeze.
  * Validate user input (e.g. contract addresses) with on-chain data checking.
* **Online repository for easy publishing and hosting**
  * [Publishing system](../../Publishing/Overview) to enable developers to share their Dapps with a wider audience.
  * Users can search for and immediately use Dapps within their Dapp browsers.
  * Client API to allow other tools in the wider ecosystem to fetch Dapp specs and render them locally.

