embarklabs/embark
2
0
Fork 0
mirror of https://github.com/embarklabs/embark.git synced 2025-01-27 05:56:21 +00:00
Code Issues Projects Releases Wiki Activity

impore contract overview style

Browse Source
This commit is contained in:
Jonathan Rainville 2018-10-25 10:23:47 -04:00
parent 7df05fdce3
commit 92d433ff9a
2 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
embark-ui/src/components/ContractOverview.css Normal file
View File

@ -0,0 +1,9 @@
.contract-function-container .collapse.show .card-body {
min-height: 65px;
}
.contract-function-container .contract-function-button {
position: absolute;
bottom: 15px;
right: 15px;
}

74
embark-ui/src/components/ContractOverview.js
View File

@ -18,6 +18,9 @@ import {
ListGroupItem
} from "reactstrap";
import {formatContractForDisplay} from '../utils/presentation';
import FontAwesome from 'react-fontawesome';
import "./ContractOverview.css";
class ContractFunction extends Component {
constructor(props) {
@ -65,66 +68,65 @@ class ContractFunction extends Component {
toggleOptions() {
this.setState({
optionsCollapse: !this.state.optionsCollapse,
optionsCollapse: !this.state.optionsCollapse
});
}
toggleFunction() {
this.setState({
functionCollapse: !this.state.functionCollapse,
functionCollapse: !this.state.functionCollapse
});
}
render() {
return (
<Card>
<Card className="contract-function-container">
<CardHeader>
<CardTitle className="collapsable" onClick={() => this.toggleFunction()}>
{ContractFunction.isPureCall(this.props.method) &&
<button className="btn btn-warning btn-sm float-right">call</button>
}
{ContractFunction.isEvent(this.props.method) &&
<button className="btn btn-info btn-sm float-right">event</button>
<button className="btn btn-info btn-sm float-right">event</button>
}
{this.props.method.name}({this.props.method.inputs.map(input => input.name).join(', ')})
</CardTitle>
</CardHeader>
<Collapse isOpen={this.state.functionCollapse}>
<Collapse isOpen={this.state.functionCollapse} className="relative">
<CardBody>
<Form action="" method="post" inline>
{this.props.method.inputs.map(input => (
<FormGroup key={input.name} className="pr-1">
<Label for={input.name} className="pr-1">{input.name}: </Label>
<Input name={input.name} id={input.name} placeholder={input.type} onChange={(e) => this.handleChange(e, input.name)}/>
</FormGroup>
))}
<Form method="post" inline>
{this.props.method.inputs.map(input => (
<FormGroup key={input.name}>
<Label for={input.name} className="mr-2 font-weight-bold">{input.name}</Label>
<Input name={input.name} id={input.name} placeholder={input.type}
onChange={(e) => this.handleChange(e, input.name)}/>
</FormGroup>
))}
</Form>
{!ContractFunction.isPureCall(this.props.method) &&
<Col xs={12} className="my-2">
<Row>
<strong className="collapsable" onClick={() => this.toggleOptions()}>
<i className={this.state.optionsCollapse ? 'fa fa-caret-down' : 'fa fa-caret-right'}/>Advanced Options
</strong>
<Col xs={12} className="my-2">
<Row>
<Collapse isOpen={this.state.optionsCollapse}>
<Form action="" method="post" inline>
<FormGroup key="gasPrice" className="pr-1">
<Label for="gasPrice" className="pr-1">Gas Price (in GWei)(optional)</Label>
<Input name="gasPrice" id="gasPrice" onChange={(e) => this.handleChange(e, 'gasPrice')}/>
</FormGroup>
</Form>
</Collapse>
</Row>
</Col>
</Row>
</Col>
<Col xs={12} className="mt-3">
<Row>
<strong className="collapsable" onClick={() => this.toggleOptions()}>
<FontAwesome name={this.state.optionsCollapse ? 'caret-down' : 'caret-right'} className="mr-2"/>Advanced
Options
</strong>
</Row>
<Row>
<Collapse isOpen={this.state.optionsCollapse} className="pl-3">
<Form method="post" inline>
<FormGroup key="gasPrice">
<Label for="gasPrice" className="mr-2">Gas Price (in GWei)(optional)</Label>
<Input name="gasPrice" id="gasPrice" placeholder="uint256"
onChange={(e) => this.handleChange(e, 'gasPrice')}/>
</FormGroup>
</Form>
</Collapse>
</Row>
</Col>
}
<div align="right">
<Button color="primary" disabled={this.callDisabled()} onClick={(e) => this.handleCall(e)}>
{this.buttonTitle()}
</Button>
</div>
<Button className="contract-function-button" color="primary" disabled={this.callDisabled()} onClick={(e) => this.handleCall(e)}>
{this.buttonTitle()}
</Button>
</CardBody>
</Collapse>
{this.props.contractFunctions && this.props.contractFunctions.length > 0 && <CardFooter>