embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #162 from status-im/feature/add-contracts-overview-to-deployment 

Add function to contract deployment
This commit is contained in:
Iuri Matias 2018-10-25 06:10:44 -04:00 committed by GitHub
parent 8591923e53 7e1a6848ae
commit 767b81da63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
embark-ui/src/components/ContractsDeployment.js
View File

@ -17,6 +17,7 @@ import {
import classNames from 'classnames';
import {DEPLOYMENT_PIPELINES} from '../constants';
import Description from './Description';
import ContractOverviewContainer from '../containers/ContractOverviewContainer';
const orderClassName = (address) => {
return classNames('mr-4', {
@ -157,12 +158,12 @@ class Web3Contract extends React.Component {
}
}
const EmbarkContract = ({contract}) => (
const EmbarkContract = ({contract, toggleContractOverview}) => (
<LayoutContract contract={contract} cardTitle={
<React.Fragment>
<a href='#toggleContract' onClick={() => toggleContractOverview(contract)}>
{contract.address && `${contract.className} deployed at ${contract.address}`}
{!contract.address && `${contract.className} not deployed`}
</React.Fragment>
</a>
}>
{contract.address && <p><strong>Arguments:</strong> {JSON.stringify(contract.args)}</p>}
{contract.transactionHash &&
@ -214,12 +215,12 @@ const ContractsHeader = ({deploymentPipeline, updateDeploymentPipeline}) => (
</Row>
);
const Contract = ({web3, contract, deploymentPipeline, web3Deploy, web3EstimateGas, web3Deployments, web3GasEstimates}) => {
const Contract = ({web3, contract, deploymentPipeline, web3Deploy, web3EstimateGas, web3Deployments, web3GasEstimates, toggleContractOverview}) => {
const deployment = web3Deployments[contract.className];
const gasEstimate = web3GasEstimates[contract.className];
switch (deploymentPipeline) {
case DEPLOYMENT_PIPELINES.embark:
return <EmbarkContract contract={contract}/>;
return <EmbarkContract contract={contract} toggleContractOverview={toggleContractOverview}/>;
case DEPLOYMENT_PIPELINES.injectedWeb3:
return <Web3Contract web3={web3}
deployment={deployment}
@ -232,16 +233,52 @@ const Contract = ({web3, contract, deploymentPipeline, web3Deploy, web3EstimateG
}
};
const Contracts = (props) => (
<React.Fragment>
<ContractsHeader deploymentPipeline={props.deploymentPipeline}
updateDeploymentPipeline={props.updateDeploymentPipeline}/>
{props.contracts.sort((a, b) => a.index - b.index).map(contract => <Contract key={contract.index}
contract={contract} {...props} />)}
</React.Fragment>
);
class ContractsDeployment extends React.Component {
constructor(props) {
super(props);
this.state = { currentContractOverview: null }
}
Contracts.propTypes = {
toggleContractOverview(contract) {
if (this.state.currentContractOverview && this.state.currentContractOverview.className === contract.className) {
return this.setState({currentContractOverview: null});
}
this.setState({currentContractOverview: contract});
}
isContractOverviewOpen() {
return this.state.currentContractOverview && this.props.deploymentPipeline === DEPLOYMENT_PIPELINES.embark;
}
render() {
return (
<Row>
<Col>
<ContractsHeader deploymentPipeline={this.props.deploymentPipeline}
updateDeploymentPipeline={this.props.updateDeploymentPipeline}/>
{this.props.contracts.sort((a, b) => a.index - b.index).map(contract => (
<Contract key={contract.index}
contract={contract}
toggleContractOverview={(contract) => this.toggleContractOverview(contract)}
{...this.props} />
))}
</Col>
{this.isContractOverviewOpen() &&
<Col xs={6} md={3}>
<Card>
<CardBody>
<h2>{this.state.currentContractOverview.className} - Overview</h2>
<ContractOverviewContainer contract={this.state.currentContractOverview} />
</CardBody>
</Card>
</Col>
}
</Row>
)
}
}
ContractsDeployment.propTypes = {
contracts: PropTypes.array,
deploymentPipeline: PropTypes.string,
updateDeploymentPipeline: PropTypes.func,
@ -252,5 +289,5 @@ Contracts.propTypes = {
web3EstimateGas: PropTypes.func
};
export default Contracts;
export default ContractsDeployment;

10
embark-ui/src/containers/TextEditorAsideContainer.js
View File

@ -1,7 +1,7 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import { Card, CardBody, CardTitle } from 'reactstrap';
import {Card, CardBody} from 'reactstrap';
import Preview from '../components/Preview';
import {contracts as contractsAction} from '../actions';
@ -25,7 +25,7 @@ class TextEditorAsideContainer extends Component {
return (
<Card key={'contract-' + index}>
<CardBody>
<CardTitle style={{"fontSize": "2em"}}>{contract.className} - Details</CardTitle>
<h2>{contract.className} - Details</h2>
<ContractDebuggerContainer key={index} contract={contract} />
</CardBody>
</Card>
@ -36,7 +36,7 @@ class TextEditorAsideContainer extends Component {
return (
<Card key={'contract-' + index}>
<CardBody>
<CardTitle style={{"fontSize": "2em"}}>{contract.className} - Details</CardTitle>
<h2>{contract.className} - Details</h2>
<ContractDetail key={index} contract={contract} />
</CardBody>
</Card>
@ -47,7 +47,7 @@ class TextEditorAsideContainer extends Component {
return (
<Card key={'contract-' + index}>
<CardBody>
<CardTitle style={{"fontSize": "2em"}}>{contract.className} - Transactions</CardTitle>
<h2>{contract.className} - Transactions</h2>
<ContractLoggerContainer key={index} contract={contract} />)
</CardBody>
</Card>
@ -58,7 +58,7 @@ class TextEditorAsideContainer extends Component {
return (
<Card key={'contract-' + index}>
<CardBody>
<CardTitle style={{"fontSize": "2em"}}>{contract.className} - Overview</CardTitle>
<h2>{contract.className} - Overview</h2>
<ContractOverviewContainer key={index} contract={contract} />
</CardBody>
</Card>