add initial form scafold for proposal manager

This commit is contained in:
Barry Gitarts 2018-05-31 09:53:26 -04:00
parent eec4518aa3
commit 9e010a79c2
4 changed files with 158 additions and 113 deletions

4
.babelrc Normal file
View File

@ -0,0 +1,4 @@
{
"plugins": ["transform-object-rest-spread"],
"presets": ["stage-2"]
}

View File

@ -4,137 +4,155 @@ import ProposalCuration from 'Embark/contracts/ProposalCuration';
import SNT from 'Embark/contracts/SNT'; import SNT from 'Embark/contracts/SNT';
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { Form, FormGroup, FormControl, HelpBlock, Button, Alert } from 'react-bootstrap'; import { Form, FormGroup, FormControl, HelpBlock, Button, Alert } from 'react-bootstrap';
import web3 from "Embark/web3" import web3 from "Embark/web3";
import { withFormik } from 'formik';
import FieldGroup from '../standard/FieldGroup';
class ProposalManager extends Component { //TODO make innerform and wrap
class InnerForm extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
submitPrice: "Loading...", submitPrice: "Loading...",
url: "", url: "",
title: "", title: "",
description: "", description: "",
canSubmit: true canSubmit: true
}; };
} }
componentDidMount(){ componentDidMount(){
this.loadPrice(); this.loadPrice();
} }
componentWillReceiveProps(){ componentWillReceiveProps(){
this.loadPrice(); this.loadPrice();
} }
async loadPrice(){ async loadPrice(){
__embarkContext.execWhenReady(async () => { __embarkContext.execWhenReady(async () => {
try { try {
let _b = await ProposalCuration.methods.getSubmitPrice(web3.eth.defaultAccount).call(); let _b = await ProposalCuration.methods.getSubmitPrice(web3.eth.defaultAccount).call();
this.setState({ this.setState({
submitPrice: _b, submitPrice: _b,
canSubmit: true canSubmit: true
});
} catch(err){
this.setState({
canSubmit: false,
submitPrice: "-"
});
}
}); });
} } catch(err){
this.setState({
canSubmit: false,
submitPrice: "-"
});
}
});
}
async handleClick(){ async handleClick(){
let description = { let description = {
"url": this.state.url, "url": this.state.url,
"title": this.state.title, "title": this.state.title,
"description": this.state.description "description": this.state.description
}; };
EmbarkJS.Storage.saveText(JSON.stringify(description)) EmbarkJS.Storage.saveText(JSON.stringify(description))
.then(async (hash) => { .then(async (hash) => {
let hexHash = web3.utils.toHex(hash); let hexHash = web3.utils.toHex(hash);
let receipt = await SNT.methods.approve( let receipt = await SNT.methods.approve(
ProposalCuration.options.address, ProposalCuration.options.address,
this.state.submitPrice) this.state.submitPrice)
.send({from: web3.eth.defaultAccount, gasLimit: 1000000}); .send({from: web3.eth.defaultAccount, gasLimit: 1000000});
console.log(receipt); console.log(receipt);
receipt = await ProposalCuration.methods.submitProposal( receipt = await ProposalCuration.methods.submitProposal(
"0x00",
"0x0000000000000000000000000000000000000000",
0,
"0x00", "0x00",
"0x0000000000000000000000000000000000000000",
0,
"0x00",
hexHash hexHash
) )
.send({from: web3.eth.defaultAccount, gasLimit: 1000000}); .send({from: web3.eth.defaultAccount, gasLimit: 1000000});
console.log(receipt); console.log(receipt);
}) })
.catch((err) => { .catch((err) => {
if(err){ if(err){
// TODO show error // TODO show error
console.log("Storage saveText Error => " + err.message); console.log("Storage saveText Error => " + err.message);
} }
}); });
} }
render(){
return ( render(){
<Fragment> const { values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue } = this.props;
{ const { canSubmit } = this.state;
!this.state.canSubmit ? return (
<Alert bsStyle="warning"> <Fragment>
Account not allowed to submit proposals {canSubmit &&
</Alert> <Alert bsStyle="warning">
: '' Account not allowed to submit proposals
} </Alert>
<h2>Add proposal</h2> }
<p>Execute this on the console if proposal submit is not allowed</p> <h2>Add proposal</h2>
<code>await ProposalCuration.methods.setSubmitPrice(web3.eth.defaultAccount, true, 1).send();</code> <p>Execute this on the console if proposal submit is not allowed</p>
<h3>Price: {this.state.submitPrice}</h3> <code>await ProposalCuration.methods.setSubmitPrice(web3.eth.defaultAccount, true, 1).send();</code>
<Form> <h3>Price: {this.state.submitPrice}</h3>
<FormGroup> <Form>
<label> <FormGroup>
Title: <label>
<FormControl Title:
type="text" <FormControl
defaultValue={this.state.title} type="text"
onChange={(e) => this.setState({title: e.target.value }) } /> defaultValue={this.state.title}
</label> onChange={(e) => this.setState({title: e.target.value }) } />
</FormGroup> </label>
<FormGroup> </FormGroup>
<label> <FieldGroup
Description: id="title"
<FormControl name="title"
type="text" type="test"
defaultValue={this.state.description} label="Title"
onChange={(e) => this.setState({description: e.target.value }) } /> onChange={handleChange}
</label> onBlur={handleBlur}
</FormGroup> value={values.title}
<FormGroup> />
<label> <FormGroup>
URL: <label>
<FormControl Description:
type="text" <FormControl
defaultValue={this.state.url} type="text"
onChange={(e) => this.setState({url: e.target.value }) } /> defaultValue={this.state.description}
</label> onChange={(e) => this.setState({description: e.target.value }) } />
</FormGroup> </label>
{ </FormGroup>
this.state.canSubmit ? <FormGroup>
<FormGroup> <label>
<Button onClick={(e) => this.handleClick(e)}>Submit</Button> URL:
</FormGroup> <FormControl
: '' type="text"
} defaultValue={this.state.url}
</Form> onChange={(e) => this.setState({url: e.target.value }) } />
</Fragment> </label>
) </FormGroup>
} {
this.state.canSubmit ?
<FormGroup>
<Button onClick={(e) => this.handleClick(e)}>Submit</Button>
</FormGroup>
: ''
}
</Form>
</Fragment>
)
}
} }
const ProposalManager = withFormik({
mapPropsToValues: props => ({ title: '' }),
validate(values) {},
handleSubmit(values, { setSubmitting}){}
})(InnerForm)
export default ProposalManager; export default ProposalManager;

View File

@ -0,0 +1,20 @@
import React from 'react';
import { FormGroup, FormControl, HelpBlock, ControlLabel, InputGroup } from 'react-bootstrap';
const FieldGroup = ({ id, label, button, error, ...props }) => (
<FormGroup controlId={id} validationState={error ? 'error' : null}>
<ControlLabel>{label}</ControlLabel>
{button
? <InputGroup>
<InputGroup.Button>
{button}
</InputGroup.Button>
<FormControl {...props} />
</InputGroup>
: <FormControl {...props} />
}
{error && <HelpBlock>{error}</HelpBlock>}
</FormGroup>
)
export default FieldGroup;

View File

@ -17,6 +17,9 @@
}, },
"homepage": "https://github.com/status-im/contracts#readme", "homepage": "https://github.com/status-im/contracts#readme",
"dependencies": { "dependencies": {
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-stage-2": "^6.24.1",
"formik": "^0.11.11",
"jquery": "^3.3.1", "jquery": "^3.3.1",
"react": "^16.3.2", "react": "^16.3.2",
"react-blockies": "^1.3.0", "react-blockies": "^1.3.0",