Merge pull request #158 from status-im/feature/move-contracts-page-to-explorer

Move contracts to explorer

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 {Row, Col, Card, CardHeader, CardBody, CardTitle} from "reactstrap";
-import ContractsList from './ContractsList';
+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>
+          {
+            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 sm="5">
+                    <Col>
-              <CardTitle className="mb-0">Contracts</CardTitle>
+                      <strong>Address</strong>
+                      <div>{contract.address}</div>
+                    </Col>
+                    <Col>
+                      <strong>State</strong>
+                      <div className={contractDisplay.stateColor}>
+                        {formatContractForDisplay(contract).state}
+                      </div>
                     </Col>
                   </Row>
-          <div className="mt-5">
-           <ContractsList contracts={contracts}></ContractsList>
                 </div>
+              )
+            })
+          }
         </CardBody>
       </Card>
     </Col>
@@ -28,4 +51,3 @@ Contracts.propTypes = {
 };
 
 export default Contracts;
-

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>

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>

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: [

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} />