From d02edf869b6bfc323e587b6db9e032ff951174f2 Mon Sep 17 00:00:00 2001
From: Andre Medeiros <me@andremedeiros.info>
Date: Wed, 24 Oct 2018 16:03:46 -0400
Subject: [PATCH] Move contracts to explorer

---
 embark-ui/src/components/Contracts.js      | 46 ++++++++++++++++------
 embark-ui/src/components/ContractsList.js  |  2 +-
 embark-ui/src/components/ExplorerLayout.js |  4 ++
 embark-ui/src/components/Layout.js         |  2 +-
 embark-ui/src/routes.js                    |  4 --
 5 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/embark-ui/src/components/Contracts.js b/embark-ui/src/components/Contracts.js
index 1660b0383..dc6fb8d5e 100644
--- a/embark-ui/src/components/Contracts.js
+++ b/embark-ui/src/components/Contracts.js
@@ -1,21 +1,44 @@
 import PropTypes from "prop-types";
 import React from 'react';
-import {Row, Col, Card, CardBody, CardTitle} from "reactstrap";
-import ContractsList from './ContractsList';
+import {Row, Col, Card, CardHeader, CardBody, CardTitle} from "reactstrap";
+import {Link} from 'react-router-dom';
+import {formatContractForDisplay} from '../utils/presentation';
+
+import CardTitleIdenticon from './CardTitleIdenticon';
 
 const Contracts = ({contracts, title = "Contracts"}) => (
   <Row>
-    <Col className="mt-3">
+    <Col>
       <Card>
+        <CardHeader>
+          <h2>{title}</h2>
+        </CardHeader>
         <CardBody>
-          <Row>
-            <Col sm="5">
-              <CardTitle className="mb-0">Contracts</CardTitle>
-            </Col>
-          </Row>
-          <div className="mt-5">
-           <ContractsList contracts={contracts}></ContractsList>
-          </div>
+          {
+            contracts.map(contract => {
+              const contractDisplay = formatContractForDisplay(contract);
+
+              return (
+                <div className="explorer-row border-top" key={contract.address}>
+                  <CardTitleIdenticon id={contract.className}>
+                    <Link to={`/embark/explorer/contracts/${contract.className}`}>{contract.className}</Link>
+                  </CardTitleIdenticon>
+                  <Row>
+                    <Col>
+                      <strong>Address</strong>
+                      <div>{contract.address}</div>
+                    </Col>
+                    <Col>
+                      <strong>State</strong>
+                      <div className={contractDisplay.stateColor}>
+                        {formatContractForDisplay(contract).state}
+                      </div>
+                    </Col>
+                  </Row>
+                </div>
+              )
+            })
+          }
         </CardBody>
       </Card>
     </Col>
@@ -28,4 +51,3 @@ Contracts.propTypes = {
 };
 
 export default Contracts;
-
diff --git a/embark-ui/src/components/ContractsList.js b/embark-ui/src/components/ContractsList.js
index 078cf7bd5..2b9c7880a 100644
--- a/embark-ui/src/components/ContractsList.js
+++ b/embark-ui/src/components/ContractsList.js
@@ -19,7 +19,7 @@ const ContractsList = ({contracts}) => (
           const contractDisplay = formatContractForDisplay(contract);
           return (
             <tr key={contract.className} className={contractDisplay.stateColor}>
-              <td><Link to={`/embark/contracts/${contract.className}/overview`}>{contract.className}</Link></td>
+              <td><Link to={`/embark/explorer/contracts/${contract.className}`}>{contract.className}</Link></td>
               <td>{contractDisplay.address}</td>
               <td>{contractDisplay.state}</td>
             </tr>
diff --git a/embark-ui/src/components/ExplorerLayout.js b/embark-ui/src/components/ExplorerLayout.js
index ba3975b59..59814cb8a 100644
--- a/embark-ui/src/components/ExplorerLayout.js
+++ b/embark-ui/src/components/ExplorerLayout.js
@@ -5,6 +5,8 @@ import AccountsContainer from '../containers/AccountsContainer';
 import AccountContainer from '../containers/AccountContainer';
 import BlocksContainer from '../containers/BlocksContainer';
 import BlockContainer from '../containers/BlockContainer';
+import ContractsContainer from '../containers/ContractsContainer';
+import ContractLayoutContainer from '../containers/ContractLayoutContainer';
 import TransactionsContainer from '../containers/TransactionsContainer';
 import TransactionContainer from '../containers/TransactionContainer';
 
@@ -15,6 +17,8 @@ const ExplorerLayout = () => (
       <Route exact path="/embark/explorer/accounts/:address" component={AccountContainer}/>
       <Route exact path="/embark/explorer/blocks" component={BlocksContainer}/>
       <Route exact path="/embark/explorer/blocks/:blockNumber" component={BlockContainer}/>
+      <Route exact path="/embark/explorer/contracts" component={ContractsContainer} />
+      <Route exact path="/embark/explorer/contracts/:contractName" component={ContractLayoutContainer} />
       <Route exact path="/embark/explorer/transactions" component={TransactionsContainer}/>
       <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer}/>
     </Switch>
diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index 37d5e6b7e..2dbfebf40 100644
--- a/embark-ui/src/components/Layout.js
+++ b/embark-ui/src/components/Layout.js
@@ -30,7 +30,6 @@ import logo from '../images/logo-new.svg';
 const HEADER_NAV_ITEMS = [
   {name: "Dashboard", to: "/embark", icon: 'tachometer'},
   {name: "Deployment", to: "/embark/deployment", icon: "arrow-up"},
-  {name: "Contracts", to: "/embark/contracts", icon: "file-text"},
   {name: "Explorer", to: "/embark/explorer/overview", icon: "compass"},
   {name: "Editor", to: "/embark/editor", icon: "codepen"},
   {name: "Utils", to: "/embark/utilities/converter", icon: "cog"}
@@ -41,6 +40,7 @@ const SIDEBAR_NAV_ITEMS = {
     {url: "/embark/explorer/overview", icon: "fa fa-signal", name: "Overview"},
     {url: "/embark/explorer/accounts", icon: "fa fa-users", name: "Accounts"},
     {url: "/embark/explorer/blocks", icon: "fa fa-stop", name: "Blocks"},
+    {url: "/embark/explorer/contracts", icon: "fa fa-file-code-o", name: "Contracts"},
     {url: "/embark/explorer/transactions", icon: "fa fa-tree", name: "Transactions"}
   ]},
   "/embark/utilities/": {items: [
diff --git a/embark-ui/src/routes.js b/embark-ui/src/routes.js
index 9ce0f0a46..79163566e 100644
--- a/embark-ui/src/routes.js
+++ b/embark-ui/src/routes.js
@@ -2,8 +2,6 @@ import React from 'react';
 import {Route, Switch} from 'react-router-dom';
 
 import HomeContainer from './containers/HomeContainer';
-import ContractsContainer from './containers/ContractsContainer';
-import ContractLayoutContainer from './containers/ContractLayoutContainer';
 import EditorContainer from './containers/EditorContainer';
 import DeploymentContainer from './containers/DeploymentContainer';
 import NoMatch from './components/NoMatch';
@@ -18,8 +16,6 @@ const routes = (
       <Route exact path="/embark/explorer/overview" component={ExplorerDashboardLayout} />
       <Route path="/embark/explorer" component={ExplorerLayout} />
       <Route path="/embark/deployment/" component={DeploymentContainer} />
-      <Route path="/embark/contracts/:contractName" component={ContractLayoutContainer} />
-      <Route path="/embark/contracts" component={ContractsContainer} />
       <Route path="/embark/editor" component={EditorContainer} />
       <Route path="/embark/utilities" component={UtilsLayout} />
       <Route component={NoMatch} />