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

Add function to contract deployment

embark-ui/src/components/ContractsDeployment.js

@@ -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) => (
+class ContractsDeployment extends React.Component {
-  <React.Fragment>
+  constructor(props) {
-    <ContractsHeader deploymentPipeline={props.deploymentPipeline}
+    super(props);
-                     updateDeploymentPipeline={props.updateDeploymentPipeline}/>
+    this.state = { currentContractOverview: null }
-    {props.contracts.sort((a, b) => a.index - b.index).map(contract => <Contract key={contract.index}
+  }
-                                                                                 contract={contract} {...props} />)}
-  </React.Fragment>
-);
 
-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;
 

embark-ui/src/containers/TextEditorAsideContainer.js

@@ -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>