Use cards in contract deployment

embark-ui/src/components/ContractsDeployment.js

@@ -11,13 +11,15 @@ import {
   Button,
   Card,
   CardHeader,
+  CardTitle,
   CardBody
 } from 'reactstrap';
 import classNames from 'classnames';
 import {DEPLOYMENT_PIPELINES} from '../constants';
+import Description from './Description';
 
 const orderClassName = (address) => {
-  return classNames({
+  return classNames('mr-4', {
     badge: true,
     'badge-success': address,
     'badge-secondary': !address
@@ -35,15 +37,20 @@ const NoWeb3 = () => (
   </Row>
 )
 
-const LayoutContract = ({contract, children}) => (
+const LayoutContract = ({contract, children, cardTitle}) => (
-  <Row className="border-bottom border-primary pb-3 mt-4">
+  <Card>
-    <Col xs={1} className="text-center">
+    <CardHeader>
-      <h4><span className={orderClassName(contract.address)}>{contract.index + 1}</span></h4>
+      <CardTitle>
-    </Col>
+        <h4>
-    <Col xs={11}>
+          <span className={orderClassName(contract.address)}>{contract.index + 1}</span>
+          {cardTitle}
+        </h4>
+      </CardTitle>
+    </CardHeader>
+    <CardBody>
       {children}
-    </Col>
+    </CardBody>
-  </Row>
+  </Card>
 )
 
 const DeploymentResult = ({deployment}) => {
@@ -59,14 +66,9 @@ const DeploymentResult = ({deployment}) => {
     <React.Fragment>
       <p className="text-success">Deployment succeed:</p>
       <dl class="row">
-        <dt class="col-sm-3">Transaction</dt>
+        <Description label="Transaction" value={deployment.transactionHash} />
-        <dd class="col-sm-9">{deployment.transactionHash}</dd>
+        <Description label="Gas used" value={deployment.gasUsed} />
-
+        <Description label="Address" value={deployment.contractAddress} />
-        <dt class="col-sm-3">Gas used</dt>
-        <dd class="col-sm-9">{deployment.gasUsed}</dd>
-
-        <dt class="col-sm-3">Address</dt>
-        <dd class="col-sm-9">{deployment.contractAddress}</dd>
       </dl>
     </React.Fragment>
   )
@@ -111,25 +113,24 @@ class Web3Contract extends React.Component {
     const isInterface = !abiConstructor;
     const argumentsRequired = abiConstructor && abiConstructor.inputs.length > 0;
     return (
-      <LayoutContract contract={this.props.contract}>
+      <LayoutContract contract={this.props.contract} cardTitle={
+        <React.Fragment>
+          {isInterface && `${this.props.contract.className} is an interface`}
+          {!isInterface && this.props.contract.className}
+        </React.Fragment>
+      }>
         <Row>
           <Col md={6}>
-            {isInterface && <h5>{this.props.contract.className} is an interface</h5>}
-            {!isInterface && <h5>{this.props.contract.className}</h5>}
             {argumentsRequired &&
-              <Card>
+              <React.Fragment>
-                <CardHeader>
+                <h5>Arguments:</h5>
-                  <strong>Arguments:</strong>
-                </CardHeader>
-                <CardBody>
                 {abiConstructor.inputs.map(input => (
                     <FormGroup key={input.name}>
                       <Label htmlFor={input.name}>{input.name}</Label>
                       <Input id={input.name} placeholder={input.name} onChange={e => this.handleOnChange(e, input.name)} />
                     </FormGroup>
                   ))}
-                </CardBody>
+              </React.Fragment>
-              </Card>
             }
 
             {!this.props.web3 && <NoWeb3 />}
@@ -158,16 +159,13 @@ class Web3Contract extends React.Component {
 }
 
 const EmbarkContract = ({contract}) => (
-  <LayoutContract contract={contract}>
+  <LayoutContract contract={contract} cardTitle={
-    {contract.address &&
     <React.Fragment>
-        <h5>{contract.className} deployed at {contract.address}</h5>
+      {contract.address && `${contract.className} deployed at ${contract.address}`}
-        <p><strong>Arguments:</strong> {JSON.stringify(contract.args)}</p>
+      {!contract.address && `${contract.className} not deployed`}
     </React.Fragment>
-    }
+  }>
-    {!contract.address &&
+    {contract.address && <p><strong>Arguments:</strong> {JSON.stringify(contract.args)}</p>}
-      <h5>{contract.className} not deployed</h5>
-    }
     {contract.transactionHash &&
       <React.Fragment>
         <p><strong>Transaction Hash:</strong> {contract.transactionHash}</p>
@@ -182,12 +180,6 @@ const EmbarkContract = ({contract}) => (
 
 const ContractsHeader = ({deploymentPipeline, updateDeploymentPipeline}) => (
   <Row className="mt-3">
-    <Col xs={1} className="text-center">
-      <strong>Order</strong>
-    </Col>
-    <Col xs={11}>
-      <Row>
-        <strong>Contract</strong>
     <div className="ml-auto mr-5">
       <FormGroup row>
         <span className="mr-2">Deploy using</span>
@@ -220,8 +212,6 @@ const ContractsHeader = ({deploymentPipeline, updateDeploymentPipeline}) => (
       </FormGroup>
     </div>
   </Row>
-    </Col>
-  </Row>
 )
 
 const Contract = ({web3, contract, deploymentPipeline, web3Deploy, web3EstimateGas, web3Deployments, web3GasEstimates}) => {