Initial version of deployment manager

embark-ui/src/components/ContractsDeployment.js

@@ -0,0 +1,64 @@
+import PropTypes from "prop-types";
+import React from 'react';
+import {
+  Row,
+  Col
+} from 'reactstrap';
+import classNames from 'classnames';
+
+const orderClassName = (address) => {
+  return classNames({
+    badge: true,
+    'badge-success': address,
+    'badge-secondary': !address
+  });
+}
+
+const Contract = ({contract}) => (
+  <Row className="border-bottom border-primary pb-3 mt-4">
+    <Col xs={1} className="text-center">
+      <h4><span className={orderClassName(contract.address)}>{contract.index + 1}</span></h4>
+    </Col>
+    <Col xs={11}>
+      {contract.address &&
+        <React.Fragment>
+          <h5>{contract.className} deployed at {contract.address}</h5>
+          <p><strong>Arguments:</strong> {contract.args}</p>
+        </React.Fragment>
+      }
+      {!contract.address &&
+        <h5>{contract.className} not deployed</h5>
+      }
+      {contract.transactionHash &&
+        <React.Fragment>
+          <p><strong>Transaction Hash:</strong> {contract.transactionHash}</p>
+          <p><strong>{contract.gas}</strong> gas at <strong>{contract.gasPrice}</strong> Wei, estimated cost: <strong>{contract.gas * contract.gasPrice}</strong> Wei</p>
+        </React.Fragment>
+      }
+      {contract.address && !contract.transactionHash &&
+        <p><strong>Contract already deployed</strong></p>
+      }
+    </Col>
+  </Row>
+);
+
+const Contracts = ({contracts}) => (
+  <React.Fragment>
+    <Row className="mt-3">
+      <Col xs={1} className="text-center">
+        <strong>Order</strong>
+      </Col>
+      <Col xs={11}>
+        <strong>Contract</strong>
+      </Col>
+    </Row>
+    {contracts.sort((a, b) => a.index - b.index).map(contract => <Contract key={contract.index} contract={contract} />)}
+  </React.Fragment>
+);
+
+Contracts.propTypes = {
+  contracts: PropTypes.array,
+};
+
+export default Contracts;
+

embark-ui/src/components/Layout.js

@@ -21,6 +21,7 @@ import logo from '../images/logo.png';
 
 const sidebarNavItems = {items: [
   {name: "Dashboard", url: "/embark", icon: 'fa fa-tachometer'},
+  {name: "Deployment", url: "/embark/deployment", icon: "fa fa-arrow-up"},
   {name: "Contracts", url: "/embark/contracts", icon: "fa fa-file-text"},
   {name: "Explorer", url: "/embark/explorer/accounts", icon: "fa fa-signal", children: [
     {url: "/embark/explorer/accounts", icon: "fa fa-users", name: "Accounts"},

embark-ui/src/containers/DeploymentContainer.js

@@ -0,0 +1,40 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import {contracts as contractsAction} from "../actions";
+
+import ContractsDeployment from '../components/ContractsDeployment';
+import DataWrapper from "../components/DataWrapper";
+import {getContracts} from "../reducers/selectors";
+
+class DeploymentContainer extends Component {
+  componentDidMount() {
+    this.props.fetchContracts();
+  }
+
+  render() {
+    return (
+      <DataWrapper shouldRender={this.props.contracts.length > 0} {...this.props} render={({contracts}) => (
+        <ContractsDeployment contracts={contracts} />
+      )} />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    contracts: getContracts(state), 
+    error: state.errorMessage, 
+    loading: state.loading};
+}
+
+DeploymentContainer.propTypes = {
+  contracts: PropTypes.array,
+  fetchContracts: PropTypes.func
+};
+
+export default connect(
+  mapStateToProps,{
+    fetchContracts: contractsAction.request
+  }
+)(DeploymentContainer);

embark-ui/src/routes.js

@@ -3,7 +3,8 @@ import {Route, Switch} from 'react-router-dom';
 
 import HomeContainer from './containers/HomeContainer';
 import ContractsContainer from './containers/ContractsContainer';
-import ContractContainer from './containers/ContractLayoutContainer';
+import ContractLayoutContainer from './containers/ContractLayoutContainer';
+import DeploymentContainer from './containers/DeploymentContainer';
 import NoMatch from './components/NoMatch';
 import ExplorerLayout from './components/ExplorerLayout';
 import FiddleLayout from './components/FiddleLayout';
@@ -14,7 +15,8 @@ const routes = (
     <Switch>
       <Route exact path="/embark/" component={HomeContainer} />
       <Route path="/embark/explorer/" component={ExplorerLayout} />
-      <Route path="/embark/contracts/:contractName" component={ContractContainer} />
+      <Route path="/embark/deployment/" component={DeploymentContainer} />
+      <Route path="/embark/contracts/:contractName" component={ContractLayoutContainer} />
       <Route path="/embark/contracts" component={ContractsContainer} />
       <Route path="/embark/fiddle" component={FiddleLayout} />
       <Route path="/embark/utilities" component={UtilsLayout} />

lib/modules/contracts_manager/index.js

@@ -65,23 +65,21 @@ class ContractsManager {
     });
 
     self.events.setCommandHandler("contracts:all", (contractName, cb) => {
-      let contracts = self.listContracts();
-      let results = [];
-      let i = 0;
-      for (let className in contracts) {
-        let contract = contracts[className];
-
-        results.push({
-          index: i,
+      const contracts = self.listContracts().map((contract, index) => (
+        {
           className: contract.className,
           deploy: contract.deploy,
           error: contract.error,
           address: contract.deployedAddress,
-          isFiddle: Boolean(contract.isFiddle)
-        });
-        i += 1;
+          isFiddle: Boolean(contract.isFiddle),
+          args: contract.args,
+          transactionHash: contract.transactionHash,
+          gas: contract.gas,
+          gasPrice: contract.gasPrice,
+          index
         }
-      cb(results);
+      ));
+      cb(contracts);
     });
 
     embark.registerAPICall(