Fix route; style other components

embark-ui/src/components/Contract.js

@@ -1,26 +1,37 @@
 import React from 'react';
+import {
+  Page,
+  Grid,
+  Card,
+  Table
+} from "tabler-react";
 import {Link} from 'react-router-dom';
 
 const Contract = ({contract}) => (
-  <React.Fragment>
-    <h1>Contract</h1>
-    <table>
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Address</th>
-          <th>State</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>{contract.name || contract.className}</td>
-          <td>{contract.address || contract.deployedAddress}}</td>
-          <td>{contract.deploy.toString()}</td>
-        </tr>
-      </tbody>
-    </table>
-  </React.Fragment>
+  <Page.Content title="Contract">
+    <Grid.Row>
+      <Grid.Col>
+        <Card>
+          <Table
+            responsive
+            className="card-table table-vcenter text-nowrap"
+            headerItems={[
+              {content: "Name"},
+              {content: "Address"},
+              {content: "State"}
+            ]}
+            bodyItems={[
+              [
+                {content: (contract.name || contract.className)},
+                {content: (contract.address || contract.deployedAddress)},
+                {content: contract.deploy.toString()}
+              ]
+            ]}
+          />
+        </Card>
+      </Grid.Col>
+    </Grid.Row>
+  </Page.Content>
 );
 
 export default Contract;

embark-ui/src/components/ContractLayout.js

@@ -17,7 +17,7 @@ const ContractLayout = (props) => (
         <List.Group transparent={true}>
           <List.GroupItem
             className="d-flex align-items-center"
-            to="/embark/explorer/accounts"
+            to={`/embark/contracts/${props.match.params.contractName}/deployment`}
             icon="users"
             RootComponent={withRouter(NavLink)}
           >
@@ -25,7 +25,7 @@ const ContractLayout = (props) => (
           </List.GroupItem>
           <List.GroupItem
             className="d-flex align-items-center"
-            to="/embark/explorer/blocks"
+            to={`/embark/contracts/${props.match.params.contractName}/functions`}
             icon="book-open"
             RootComponent={withRouter(NavLink)}
           >
@@ -33,7 +33,7 @@ const ContractLayout = (props) => (
           </List.GroupItem>
           <List.GroupItem
             className="d-flex align-items-center"
-            to="/embark/explorer/transactions"
+            to={`/embark/contracts/${props.match.params.contractName}/source`}
             icon="activity"
             RootComponent={withRouter(NavLink)}
           >
@@ -58,7 +58,5 @@ const ContractLayout = (props) => (
     </Grid.Col>
   </Grid.Row>
 );
-        // <Route exact path="/embark/explorer/blocks" component={BlocksContainer} />
-        // <Route exact path="/embark/explorer/transactions" component={TransactionsContainer} />
 
 export default withRouter(ContractLayout);

embark-ui/src/components/ContractProfile.js

@@ -1,37 +1,46 @@
 import React from 'react';
+import {
+  Page,
+  Grid,
+  Card,
+  Table
+} from "tabler-react";
 import {Link} from 'react-router-dom';
 
 const ContractProfile = ({contract}) => (
-  <React.Fragment>
-    <h1>Profile for {contract.name}</h1>
-    <table>
-      <thead>
-        <tr>
-          <th>Function</th>
-          <th>Payable</th>
-          <th>Mutability</th>
-          <th>Inputs</th>
-          <th>Ouputs</th>
-          <th>Gas Estimates</th>
-        </tr>
-      </thead>
-      <tbody>
-        {contract.methods.map((method) => {
-          return (
-            <tr>
-              <td>{method.name}</td>
-              <td>{(method.payable == true).toString()}</td>
-              <td>{method.mutability}</td>
-              <td>({method.inputs.map((x) => x.type).join(',')})</td>
-              <td>({method.outputs.map((x) => x.type).join(',')})</td>
-              <td>{method.gasEstimates}</td>
-            </tr>
-          )
-        })}
-      </tbody>
-    </table>
-  </React.Fragment>
-);
+  <Page.Content title={contract.name}>
+    <Grid.Row>
+      <Grid.Col>
+        <Card>
+          <Table
+            responsive
+            className="card-table table-vcenter text-nowrap"
+            headerItems={[
+              {content: "Function"},
+              {content: "Payable"},
+              {content: "Mutability"},
+              {content: "Inputs"},
+              {content: "Outputs"},
+              {content: "Gas Estimates"}
+            ]}
+            bodyItems={
+              contract.methods.map((method) => {
+                return ([
+                  {content: method.name},
+                  {content: (method.payable == true).toString()},
+                  {content: method.mutability},
+                  {content: `(${method.inputs.map((x) => x.type).join(',')})`},
+                  {content: `(${method.outputs.map((x) => x.type).join(',')})`},
+                  {content: method.gasEstimates},
+                ]);
+              })
+            }
+          />
+        </Card>
+      </Grid.Col>
+    </Grid.Row>
+  </Page.Content>
+)
 
 export default ContractProfile;
 

embark-ui/src/components/Contracts.js

@@ -1,30 +1,39 @@
 import React from 'react';
+import {
+  Page,
+  Grid,
+  Card,
+  Table
+} from "tabler-react";
 import {Link} from 'react-router-dom';
 
 const Contracts = ({contracts}) => (
-  <React.Fragment>
-    <h1>Contracts</h1>
-    <table>
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Address</th>
-          <th>State</th>
-        </tr>
-      </thead>
-      <tbody>
-        {contracts.map((contract) => {
-          return (
-            <tr>
-              <td><Link to={`contracts/${contract.name}`}>{contract.name}</Link></td>
-              <td>{contract.address}</td>
-              <td>{contract.deploy}</td>
-            </tr>
-          )
-        })}
-      </tbody>
-    </table>
-  </React.Fragment>
+  <Page.Content title="Contracts">
+    <Grid.Row>
+      <Grid.Col>
+        <Card>
+          <Table
+            responsive
+            className="card-table table-vcenter text-nowrap"
+            headerItems={[
+              {content: "Name"},
+              {content: "Address"},
+              {content: "State"}
+            ]}
+            bodyItems={
+              contracts.map((contract) => {
+                return ([
+                  {content: <Link to={`contracts/${contract.name}`}>{contract.name}</Link>},
+                  {content: contract.address},
+                  {content: contract.deploy}
+                ]);
+              })
+            }
+          />
+        </Card>
+      </Grid.Col>
+    </Grid.Row>
+  </Page.Content>
 );
 
 export default Contracts;

embark-ui/src/containers/ContractProfileContainer.js

@@ -24,7 +24,7 @@ class ContractProfileContainer extends Component {
       )
     }
 
-    if (contract.error) {
+    if (contract.data.error) {
       return (
         <h1>
           <i>Error API...</i>

embark-ui/src/routes.js

@@ -19,7 +19,6 @@ const routes = (
       <Route path="/embark/processes/" component={ProcessesLayout} />
       <Route path="/embark/explorer/accounts" component={AccountsContainer} />
       <Route path="/embark/processes" component={ProcessesContainer} />
-      <Route path="/embark/contracts/:contractName/profiler" component={ContractProfileContainer} />
       <Route path="/embark/contracts/:contractName" component={ContractLayout} />
       <Route path="/embark/contracts" component={ContractsContainer} />
       <Route component={NoMatch} />