embark/lib/modules/scaffolding-react/templates/dapp.js.tpl

import EmbarkJS from 'Embark/EmbarkJS';
import {{contractName}} from 'Embark/contracts/{{contractName}}';

import React from 'react';
import ReactDOM from 'react-dom';
import { FormGroup, ControlLabel, FormControl, Checkbox, Button, Alert } from 'react-bootstrap';


{{#each functions}}
class {{capitalize name}}_{{@index}}_Form extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            {{#if inputs.length}}
            input: {
                {{#each inputs}}
                {{name}}: {{#ifeq type 'bool'}}false{{else}}''{{/ifeq}}{{#unless @last}},{{/unless}}
                {{/each}}
            },
            {{/if}}
            {{#ifview stateMutability}}
            output: null,
            {{/ifview}}
            error: null,
            mined: null,
            loading: false
        };
    }

    handleChange(e, name){
        this.state.input[name] = e.target.value;
        this.setState(this.state);
    }

    handleCheckbox(e, name){
        this.state.input[name] = e.target.checked;
        this.setState(this.state);
    }

    async handleClick(e){
        e.preventDefault();
        this.setState({output: null, error: null, receipt: null, loading: true});

        try {
        {{#ifview stateMutability}}
            {{../contractName}}.methods{{methodname ../functions name inputs}}({{#each inputs}}this.state.input.{{name}}{{#unless @last}}, {{/unless}}{{/each}})
                .call()
                .then((result) => {
            {{#iflengthgt outputs 1}}
                    this.setState({output: {
            {{#each outputs}}
                        {{emptyname name @index}}: result[{{@index}}]{{#unless @last}},{{/unless}}
            {{/each}}
                    }, loading: false}); 
            {{else}}
                    this.setState({output: result, loading: false});  
            {{/iflengthgt}} 
                    })
                .catch((err) => {
                    this.setState({error: err.message, loading: false});
                });
        {{else}}
            {{../contractName}}.methods{{methodname ../functions name inputs}}({{#each inputs}}this.state.input.{{name}}{{#unless @last}}, {{/unless}}{{/each}})
                .send({
                    from: web3.eth.defaultAccount
                })
                .then((_receipt) => {
                    console.log(_receipt);
                    this.setState({receipt: _receipt, loading: false})
                    })
                .catch((err) => {
                    console.log(err);
                    this.setState({error: err.message, loading: false});
                });
            // TODO payable
        {{/ifview}}
        } catch(err) {
            this.setState({error: err.message, loading: false});
        }
        
        // TODO validate
    }

    render(){
        return <div className="formSection">
            <h3>{{name}}</h3>
            <form>
            {{#if inputs.length}}
                {{#each inputs}}
                <FormGroup>
                    <ControlLabel>{{name}}</ControlLabel>
                    {{#ifeq type 'bool'}}
                    <Checkbox
                        onClick={(e) => this.handleCheckbox(e, '{{name}}')}
                    />
                    {{else}}
                    <FormControl
                        type="text"
                        defaultValue={ this.state.input.{{name}} }
                        placeholder="{{type}}"
                        onChange={(e) => this.handleChange(e, '{{name}}')}
                    />
                    {{/ifeq}}
                </FormGroup>
                {{/each}}      
            {{/if}}
            {
                this.state.error != null ?
                <Alert bsStyle="danger">{this.state.error}</Alert>
                : ''
            }
            {{#ifview stateMutability}}
                <Button disabled={this.state.loading} type="submit" bsStyle="primary" onClick={(e) => this.handleClick(e)}>Call</Button>
                {
                    this.state.output != null ?
                    <React.Fragment>
                        <h4>Results</h4>
                        {{#iflengthgt outputs 1}}
                        <ul>
                        {{#each outputs}}
                            <li>{{emptyname name @index}}: { this.state.output.{{emptyname name @index}} }</li>
                        {{/each}}
                        </ul>
                        {{else}}
                        {this.state.output.toString()}
                        {{/iflengthgt}}
                    </React.Fragment>
                    : ''
                }
            {{else}}
                <Button disabled={this.state.loading} type="submit" bsStyle="primary" onClick={(e) => this.handleClick(e)}>{this.state.loading ? 'Sending...' : 'Send'}</Button>
                {
                this.state.receipt != null ?
                <Alert bsStyle={this.state.receipt.status == "0x1" ? 'success' : 'danger'}>{this.state.receipt.status == "0x1" ? 'Success' : 'Failure / Revert'} - Transaction Hash: {this.state.receipt.transactionHash}</Alert>
                : ''
                }
            {{/ifview}}
            </form>
        </div>;
    }
}

{{/each}}


class {{contractName}}UI extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
        };
    }

    render(){
        return (<div>
            {{#each functions}}
            <{{capitalize name}}_{{@index}}_Form />
            {{/each}}
        </div>);
    }
}


ReactDOM.render(<div>
        <h1>{{title}}</h1>
        <{{contractName}}UI />
    </div>,
    document.getElementById('app')
);