Replace tabler react by new theme

embark-ui/src/components/Account.js

@@ -1,14 +1,15 @@
 import React from 'react';
-import {
-  Page
-} from "tabler-react";
+import {Row, Col} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 const Account = ({account}) => (
-  <Page.Content title={`Account ${account.address}`}>
-    <p>Balance: {account.balance}</p>
-    <p>Tx count: {account.transactionCount}</p>
-  </Page.Content>
+  <Row>
+    <Col>
+      <h1>{account.address}</h1>
+      <p>Balance: {account.balance}</p>
+      <p>Tx count: {account.transactionCount}</p>
+    </Col>
+  </Row>
 );
 
 Account.propTypes = {

embark-ui/src/components/Accounts.js

@@ -1,49 +1,38 @@
 import React from 'react';
-import {
-  Page,
-  Grid,
-  Card,
-  Table
-} from "tabler-react";
+import {Row, Col, Table} from 'reactstrap';
 import {Link} from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 const Accounts = ({accounts}) => (
-  <Page.Content title="Accounts">
-    <Grid.Row>
-      <Grid.Col>
-        <Card>
-          <Table
-            responsive
-            className="card-table table-vcenter text-nowrap"
-          >
-            <Table.Header>
-              <Table.Row>
-                <Table.ColHeader>Address</Table.ColHeader>
-                <Table.ColHeader>Balance</Table.ColHeader>
-                <Table.ColHeader>TX count</Table.ColHeader>
-                <Table.ColHeader>Index</Table.ColHeader>
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {
-                accounts.map((account) => {
-                  return (
-                    <Table.Row key={account.address}>
-                      <Table.Col><Link to={`/embark/explorer/accounts/${account.address}`}>{account.address}</Link></Table.Col>
-                      <Table.Col>{account.balance}</Table.Col>
-                      <Table.Col>{account.transactionCount}</Table.Col>
-                      <Table.Col>{account.index}</Table.Col>
-                    </Table.Row>
-                  );
-                })
-              }
-            </Table.Body>
-          </Table>
-        </Card>
-      </Grid.Col>
-    </Grid.Row>
-  </Page.Content>
+  <Row>
+    <Col>
+      <h1>Accounts</h1>
+      <Table responsive className="text-nowrap">
+        <thead>
+          <tr>
+            <th>Address</th>
+            <th>Balance</th>
+            <th>TX count</th>
+            <th>Index</th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            accounts.map((account) => {
+              return (
+                <tr key={account.address}>
+                  <td><Link to={`/embark/explorer/accounts/${account.address}`}>{account.address}</Link></td>
+                  <td>{account.balance}</td>
+                  <td>{account.transactionCount}</td>
+                  <td>{account.index}</td>
+                </tr>
+              );
+            })
+          }
+        </tbody>
+      </Table>
+    </Col>
+  </Row>
 );
 
 Accounts.propTypes = {

embark-ui/src/components/Block.js

@@ -1,14 +1,15 @@
 import React from 'react';
-import {
-  Page
-} from "tabler-react";
+import {Row, Col} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 const Block = ({block}) => (
-  <Page.Content title={`Block ${block.number}`}>
-    <p>Timestamp: {block.timestamp}</p>
-    <p>Gas used: {block.gasUsed}</p>
-  </Page.Content>
+  <Row>
+    <Col>
+      <h1>Block {block.number}</h1>
+      <p>Timestamp: {block.timestamp}</p>
+      <p>Gas used: {block.gasUsed}</p>
+    </Col>
+  </Row>
 );
 
 Block.propTypes = {

embark-ui/src/components/Blocks.js

@@ -1,50 +1,39 @@
 import React from 'react';
 import {Link} from "react-router-dom";
-import {
-  Page,
-  Grid,
-  Card,
-  Table
-} from "tabler-react";
+import {Row, Col, Table} from 'reactstrap';
+
 import PropTypes from 'prop-types';
 
 const Blocks = ({blocks}) => (
-  <Page.Content title="Blocks">
-    <Grid.Row>
-      <Grid.Col>
-        <Card>
-          <Table
-            responsive
-            cards
-            verticalAlign="center"
-            className="text-nowrap">
-            <Table.Header>
-              <Table.Row>
-                <Table.ColHeader>Number</Table.ColHeader>
-                <Table.ColHeader>Mined On</Table.ColHeader>
-                <Table.ColHeader>Gas Used</Table.ColHeader>
-                <Table.ColHeader>TX Count</Table.ColHeader>
-              </Table.Row>
-            </Table.Header>  
-            <Table.Body>
-              {
-                blocks.map((block) => {
-                  return (
-                    <Table.Row key={block.number}>
-                      <Table.Col><Link to={`/embark/explorer/blocks/${block.number}`}>{block.number}</Link></Table.Col>
-                      <Table.Col>{new Date(block.timestamp * 1000).toLocaleString()}</Table.Col>
-                      <Table.Col>{block.gasUsed}</Table.Col>
-                      <Table.Col>{block.transactions.length}</Table.Col>
-                    </Table.Row>
-                  );
-                })
-              }
-            </Table.Body>
-          </Table>
-        </Card>
-      </Grid.Col>
-    </Grid.Row>
-  </Page.Content>
+  <Row>
+    <Col>
+      <h1>Blocks</h1>
+      <Table responsive className="text-nowrap">
+        <thead>
+          <tr>
+            <th>Number</th>
+            <th>Mined On</th>
+            <th>Gas Used</th>
+            <th>TX Count</th>
+          </tr>
+        </thead>  
+        <tbody>
+          {
+            blocks.map((block) => {
+              return (
+                <tr key={block.number}>
+                  <td><Link to={`/embark/explorer/blocks/${block.number}`}>{block.number}</Link></td>
+                  <td>{new Date(block.timestamp * 1000).toLocaleString()}</td>
+                  <td>{block.gasUsed}</td>
+                  <td>{block.transactions.length}</td>
+                </tr>
+              );
+            })
+          }
+        </tbody>
+      </Table>
+    </Col>
+  </Row>
 );
 
 Blocks.propTypes = {

embark-ui/src/components/Console.js

@@ -1,17 +1,19 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
 import Convert from 'ansi-to-html';
-import {Grid, Card, Form, Tab, TabbedHeader, TabbedContainer} from 'tabler-react';
-import Logs from "./Logs";
+import { Form, Col, Row, Card, CardBody, Input, CardFooter, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import classnames from 'classnames';
 
+import Logs from "./Logs";
 import "./Console.css";
+import {EMBARK_PROCESS_NAME} from '../constants';
 
 const convert = new Convert();
 
 class Console extends Component {
   constructor(props) {
     super(props);
-    this.state = {value: ''};
+    this.state = {value: '', activeTab: EMBARK_PROCESS_NAME};
   }
 
   handleSubmit(event) {
@@ -25,55 +27,75 @@ class Console extends Component {
     this.setState({value: event.target.value});
   }
 
+  toggle(tab) {
+    if (this.state.activeTab !== tab) {
+      this.setState({
+        activeTab: tab
+      });
+      this.props.updateTab(tab);
+    }
+  }
+
+  renderNav() {
+    return (
+      <Nav tabs>
+        {this.props.processes.map((process) => (
+          <NavItem key={process.name}>
+            <NavLink
+              className={classnames({ active: this.state.activeTab === process.name })}
+              onClick={() => { this.toggle(process.name); }}
+          >
+            {process.name}
+          </NavLink>
+        </NavItem>
+        ))}
+        
+      </Nav>
+    )
+  }
+
   renderTabs() {
     const {processLogs, processes} = this.props;
-    return processes.map(process => (
-      <Tab title={process.name} key={process.name}>
-        <Logs>
-          {
-            processLogs
-              .filter((item) => item.name === process.name)
-              .reverse()
-              .map((item, i) => <p key={i} className={item.logLevel}
-                                  dangerouslySetInnerHTML={{__html: convert.toHtml(item.msg)}}></p>)
-          }
-        </Logs>
-      </Tab>
-    ));
+    
+    return (
+      <TabContent activeTab={this.state.activeTab}>
+        {processes.map(process => (
+          <TabPane key={process.name} tabId={process.name}>
+            <Logs>
+              {processLogs
+                .filter((item) => item.name === process.name)
+                .reverse()
+                .map((item, i) => <p key={i} className={item.logLevel}
+                                    dangerouslySetInnerHTML={{__html: convert.toHtml(item.msg)}}></p>)}
+            </Logs>
+          </TabPane>
+        ))}
+      </TabContent>
+    );
   }
 
   render() {
-    const tabs = this.renderTabs();
     const {value} = this.state;
 
     return (
-      <Grid.Row cards className="console">
-        <Grid.Col>
+      <Row>
+        <Col>
           <Card>
-            <Card.Body className="console-container">
-              <React.Fragment>
-                <TabbedHeader
-                  selectedTitle={this.props.activeProcess}
-                  stateCallback={this.props.updateTab}
-                >
-                  {tabs}
-                </TabbedHeader>
-                <TabbedContainer selectedTitle={this.props.activeProcess}>
-                  {tabs}
-                </TabbedContainer>
-              </React.Fragment>
-            </Card.Body>
-            {this.props.isEmbark() && <Card.Footer>
-              <form onSubmit={(event) => this.handleSubmit(event)} autoComplete="off">
-                <Form.Input value={value}
+            <CardBody className="console-container">
+              {this.renderNav()}
+              {this.renderTabs()}
+            </CardBody>
+            {this.props.isEmbark() && <CardFooter>
+              <Form onSubmit={(event) => this.handleSubmit(event)} autoComplete="off">
+                <Input value={value}
                             onChange={(event) => this.handleChange(event)}
                             name="command"
                             placeholder="Type a command (e.g help)"/>
-              </form>
-            </Card.Footer>}
+              </Form>
+            </CardFooter>}
           </Card>
-        </Grid.Col>
-      </Grid.Row>
+        </Col>
+      </Row>
     );
   }
 }

embark-ui/src/components/ContractFunctions.js

@@ -1,13 +1,20 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
 import {
-  Page,
-  Grid,
-  Form,
+  Row,
+  Col,
+  FormGroup,
+  Label,
+  Input,
   Button,
-  List,
-  Card
-} from "tabler-react";
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  CardFooter,
+  ListGroup,
+  ListGroupItem
+} from "reactstrap";
 
 class ContractFunction extends Component {
   constructor(props) {
@@ -51,40 +58,40 @@ class ContractFunction extends Component {
 
   render() {
     return (
-      <Grid.Row>
-        <Grid.Col>
-          <Card>
-            <Card.Header>
-              <Card.Title>{this.props.method.name}</Card.Title>
-            </Card.Header>
-            <Card.Body>
-              {this.props.method.inputs.map(input => (
-                <Form.Group key={input.name} label={input.name}>
-                  <Form.Input placeholder={input.type} onChange={(e) => this.handleChange(e, input.name)}/>
-                </Form.Group>
+      <Col xs={12}>
+        <Card>
+          <CardHeader>
+            <CardTitle>{this.props.method.name}</CardTitle>
+          </CardHeader>
+          <CardBody>
+            {this.props.method.inputs.map(input => (
+              <FormGroup key={input.name}>
+                <Label for={input.name}>{input.name}</Label>
+                <Input name={input.name} id={input.name} placeholder={input.type} onChange={(e) => this.handleChange(e, input.name)}/>
+              </FormGroup>
+            ))}
+            {!ContractFunction.isPureCall(this.props.method) &&
+              <FormGroup key="gasPrice">
+                <Label for="gasPrice">Gas Price (in GWei)(optional)</Label>
+                <Input name="gasPrice" id="gasPrice" onChange={(e) => this.handleChange(e, 'gasPrice')}/>
+              </FormGroup>
+            }
+            <Button color="primary" disabled={this.callDisabled()} onClick={(e) => this.handleCall(e)}>
+              {this.buttonTitle()}
+            </Button>
+          </CardBody>
+          {this.props.contractFunctions && this.props.contractFunctions.length > 0 && <CardFooter>
+            <ListGroup>
+              {this.props.contractFunctions.map(contractFunction => (
+                <ListGroupItem key={contractFunction.result}>
+                  {contractFunction.inputs.length > 0 && <p>Inputs: {contractFunction.inputs.join(', ')}</p>}
+                  <strong>Result: {contractFunction.result}</strong>
+                </ListGroupItem>
               ))}
-              {!ContractFunction.isPureCall(this.props.method) &&
-                <Form.Group key="gasPrice" label="Gas Price (in GWei)(optional)">
-                  <Form.Input onChange={(e) => this.handleChange(e, 'gasPrice')}/>
-                </Form.Group>
-              }
-              <Button color="primary" disabled={this.callDisabled()} onClick={(e) => this.handleCall(e)}>
-                {this.buttonTitle()}
-              </Button>
-            </Card.Body>
-            {this.props.contractFunctions && this.props.contractFunctions.length > 0 && <Card.Footer>
-              <List>
-                {this.props.contractFunctions.map(contractFunction => (
-                  <List.Item key={contractFunction.result}>
-                    {contractFunction.inputs.length > 0 && <p>Inputs: {contractFunction.inputs.join(', ')}</p>}
-                    <strong>Result: {contractFunction.result}</strong>
-                  </List.Item>
-                ))}
-              </List>
-            </Card.Footer>}
-          </Card>
-        </Grid.Col>
-      </Grid.Row>
+            </ListGroup>
+          </CardFooter>}
+        </Card>
+      </Col>
     );
   }
 }
@@ -106,7 +113,8 @@ const ContractFunctions = (props) => {
   const {contractProfile} = props;
 
   return (
-    <Page.Content title={contractProfile.name + ' Functions'}>
+    <Row>
+      <Col xs={12}><h1>{contractProfile.name} Functions</h1></Col>
       {contractProfile.methods
         .filter((method) => {
           return props.onlyConstructor ? method.type === 'constructor' : method.type !== 'constructor';
@@ -116,7 +124,7 @@ const ContractFunctions = (props) => {
                                          contractFunctions={filterContractFunctions(props.contractFunctions, contractProfile.name, method.name)}
                                          contractProfile={contractProfile}
                                          postContractFunction={props.postContractFunction}/>)}
-    </Page.Content>
+    </Row>
   );
 };
 

embark-ui/src/components/ContractLayout.js

@@ -23,6 +23,7 @@ class ContractLayout extends React.Component {
       });
     }
   }
+
   render() {
     return (
       <React.Fragment>

embark-ui/src/components/ContractLogger.js

@@ -14,30 +14,30 @@ const ContractLogger = ({contractName, contractLogs}) => (
           cards
           verticalAlign="center"
           className="text-nowrap">
-          <Table.Header>
-            <Table.Row>
-              <Table.ColHeader>call</Table.ColHeader>
-              <Table.ColHeader>Transaction hash</Table.ColHeader>
-              <Table.ColHeader>Gas Used</Table.ColHeader>
-              <Table.ColHeader>Block number</Table.ColHeader>
-              <Table.ColHeader>Status</Table.ColHeader>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
+          <thead>
+            <tr>
+              <th>call</th>
+              <th>Transaction hash</th>
+              <th>Gas Used</th>
+              <th>Block number</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
             {
               contractLogs.map((log, index) => {
                 return (
-                  <Table.Row key={'log-' + index}>
-                    <Table.Col>{`${log.name}.${log.functionName}(${log.paramString})`}</Table.Col>
-                    <Table.Col>{log.transactionHash}</Table.Col>
-                    <Table.Col>{log.gasUsed}</Table.Col>
-                    <Table.Col>{log.blockNumber}</Table.Col>
-                    <Table.Col>{log.status}</Table.Col>
-                  </Table.Row>
+                  <tr key={'log-' + index}>
+                    <td>{`${log.name}.${log.functionName}(${log.paramString})`}</td>
+                    <td>{log.transactionHash}</td>
+                    <td>{log.gasUsed}</td>
+                    <td>{log.blockNumber}</td>
+                    <td>{log.status}</td>
+                  </tr>
                 );
               })
             }
-          </Table.Body>
+          </tbody>
         </Table>
       </Grid.Col>
     </Grid.Row>

embark-ui/src/components/ContractOverview.js

@@ -1,60 +1,44 @@
 import PropTypes from "prop-types";
 import React from 'react';
-import {
-  Page,
-  Grid,
-  Card,
-  Table
-} from "tabler-react";
+import {Row, Col, Table} from "reactstrap";
 import JSONTree from 'react-json-tree';
 import {formatContractForDisplay} from '../utils/presentation';
 
 const Contract = ({contract, match}) => {
   const contractDisplay = formatContractForDisplay(contract);
   return (
-    <Page.Content title={contract.className + " Overview"}>
-      <Grid.Row>
-        <Grid.Col>
-          <Card>
-            <Table
-              responsive
-              className="card-table table-vcenter text-nowrap"
-            >
-              <Table.Header>
-                <Table.Row>
-                  <Table.ColHeader>Name</Table.ColHeader>
-                  <Table.ColHeader>Address</Table.ColHeader>
-                  <Table.ColHeader>State</Table.ColHeader>
-                </Table.Row>
-              </Table.Header>
-              <Table.Body>
-                <Table.Row className={contractDisplay.stateColor}>
-                  <Table.Col>{contract.className}</Table.Col>
-                  <Table.Col>{contractDisplay.address}</Table.Col>
-                  <Table.Col>{contractDisplay.state}</Table.Col>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-          </Card>
-          <Card>
-            <Card.Header>
-              <Card.Title>ABI</Card.Title>
-            </Card.Header>
-            <Card.Body>
-              {contract.abiDefinition && <JSONTree data={contract.abiDefinition} />}
-            </Card.Body>
-          </Card>
-          <Card>
-            <Card.Header>
-              <Card.Title>Bytecode</Card.Title>
-            </Card.Header>
-            <Card.Body>
-              {contract.runtimeBytecode}
-            </Card.Body>
-          </Card>
-        </Grid.Col>
-      </Grid.Row>
-    </Page.Content>
+    <Row>
+      <Col>
+        <h1>{contract.className} Overview</h1>
+        <Table
+          responsive
+          className="text-nowrap"
+        >
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Address</th>
+              <th>State</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className={contractDisplay.stateColor}>
+              <td>{contract.className}</td>
+              <td>{contractDisplay.address}</td>
+              <td>{contractDisplay.state}</td>
+            </tr>
+          </tbody>
+        </Table>
+        <h2>ABI</h2>
+        <div>
+          {contract.abiDefinition && <JSONTree data={contract.abiDefinition} />}
+        </div>
+        <h2>Bytecode</h2>
+        <div className="text-wrap">
+          {contract.runtimeBytecode}
+        </div>
+      </Col>
+    </Row>
   );
 };
 

embark-ui/src/components/Contracts.js

@@ -1,16 +1,15 @@
 import PropTypes from "prop-types";
 import React from 'react';
-import {Page, Grid} from "tabler-react";
+import {Row, Col} from "reactstrap";
 import ContractsList from './ContractsList';
 
 const Contracts = ({contracts, title = "Contracts"}) => (
-  <Page.Content title={title}>
-    <Grid.Row>
-      <Grid.Col>
+  <Row>
+    <Col>
+      <h1>{title}</h1>
         <ContractsList contracts={contracts}></ContractsList>
-      </Grid.Col>
-    </Grid.Row>
-  </Page.Content>
+    </Col>
+  </Row>
 );
 
 Contracts.propTypes = {

embark-ui/src/components/ContractsList.js

@@ -1,39 +1,33 @@
 import PropTypes from "prop-types";
 import React from 'react';
-import {Card, Table} from "tabler-react";
+import {Table} from "reactstrap";
 import {Link} from 'react-router-dom';
 import {formatContractForDisplay} from '../utils/presentation';
 
 const ContractsList = ({contracts}) => (
-  <Card>
-    <Table
-      responsive
-      cards
-      verticalAlign="center"
-      className="text-nowrap">
-      <Table.Header>
-        <Table.Row>
-          <Table.ColHeader>Name</Table.ColHeader>
-          <Table.ColHeader>Address</Table.ColHeader>
-          <Table.ColHeader>State</Table.ColHeader>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {
-          contracts.map((contract) => {
-            const contractDisplay = formatContractForDisplay(contract);
-            return (
-              <Table.Row key={contract.className} className={contractDisplay.stateColor}>
-                <Table.Col><Link to={`/embark/contracts/${contract.className}/overview`}>{contract.className}</Link></Table.Col>
-                <Table.Col>{contractDisplay.address}</Table.Col>
-                <Table.Col>{contractDisplay.state}</Table.Col>
-              </Table.Row>
-            );
-          })
-        }
-      </Table.Body>
-    </Table>
-  </Card>
+  <Table responsive className="text-nowrap">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Address</th>
+        <th>State</th>
+      </tr>
+    </thead>
+    <tbody>
+      {
+        contracts.map((contract) => {
+          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>{contractDisplay.address}</td>
+              <td>{contractDisplay.state}</td>
+            </tr>
+          );
+        })
+      }
+    </tbody>
+  </Table>
 )
 
 ContractsList.propTypes = {

embark-ui/src/components/Error.js

@@ -1,15 +1,15 @@
 import PropTypes from "prop-types";
 import React from 'react';
-import {Grid} from 'tabler-react';
+import {Row, Col} from 'reactstrap';
 
 const Error = ({error}) => (
-  <Grid.Row className="align-items-center h-100 mt-5">
-    <Grid.Col>
+  <Row className="align-items-center mt-5">
+    <Col>
       <p className="text-center alert-danger">
         {error}
       </p>
-    </Grid.Col>
-  </Grid.Row>
+    </Col>
+  </Row>
 );
 
 Error.propTypes = {

embark-ui/src/components/ExplorerLayout.js

@@ -1,10 +1,5 @@
 import React from 'react';
-import {NavLink, Route, Switch} from 'react-router-dom';
-import {
-  Page,
-  Grid,
-  List
-} from "tabler-react";
+import {Route, Switch} from 'react-router-dom';
 
 import AccountsContainer from '../containers/AccountsContainer';
 import AccountContainer from '../containers/AccountContainer';
@@ -13,45 +8,15 @@ import BlockContainer from '../containers/BlockContainer';
 import TransactionsContainer from '../containers/TransactionsContainer';
 import TransactionContainer from '../containers/TransactionContainer';
 
-const groupItems = [
-  {to: "/embark/explorer/accounts", icon: "users", value: "Accounts"},
-  {to: "/embark/explorer/blocks", icon: "book-open", value: "Blocks"},
-  {to: "/embark/explorer/transactions", icon: "activity", value: "Transactions"}
-];
-
-const className = "d-flex align-items-center";
-
 const ExplorerLayout = () => (
-  <Grid.Row>
-    <Grid.Col md={3}>
-      <Page.Title className="my-5">Explorer</Page.Title>
-      <div>
-        <List.Group transparent={true}>
-          {groupItems.map((groupItem) => (
-            <List.GroupItem
-              key={groupItem.value}
-              className={className}
-              to={groupItem.to}
-              icon={groupItem.icon}
-              RootComponent={NavLink}
-            >
-              {groupItem.value}
-            </List.GroupItem>
-          ))}
-        </List.Group>
-      </div>
-    </Grid.Col>
-    <Grid.Col md={9}>
-      <Switch>
-        <Route exact path="/embark/explorer/accounts" component={AccountsContainer} />
-        <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/transactions" component={TransactionsContainer} />
-        <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer} />
-      </Switch>
-    </Grid.Col>
-  </Grid.Row>
+  <Switch>
+    <Route exact path="/embark/explorer/accounts" component={AccountsContainer} />
+    <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/transactions" component={TransactionsContainer} />
+    <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer} />
+  </Switch>
 );
 
 export default ExplorerLayout;

embark-ui/src/components/FileExplorer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Treebeard, decorators} from 'react-treebeard';
-import {Form} from 'tabler-react';
+import {Input, Label, FormGroup} from 'reactstrap';
 
 const style = {
   tree: {
@@ -178,7 +178,12 @@ class FileExplorer extends React.Component {
   render() {
     return (
       <div className="h-100 d-flex flex-column">
-        <Form.Switch type="checkbox" name="toggle" value={true} label="Show hidden files" onChange={this.onHiddenToggle.bind(this)} />
+        <FormGroup check>
+          <Label check>
+            <Input type="checkbox" onChange={this.onHiddenToggle.bind(this)} />
+            Show hidden files
+          </Label>
+        </FormGroup>
         <Treebeard
           data={this.filterHidden(this.props.files)}
           decorators={decorators}

embark-ui/src/components/GasStation.js

@@ -1,12 +1,12 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
-import {Card, Form, Grid, StampCard, Stamp} from 'tabler-react';
+import {Card, CardBody, CardHeader, CardTitle, Row, Col, Input, Badge} from 'reactstrap';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 
 const COLORS = {
-  good: 'green',
-  medium: 'yellow',
-  bad: 'red'
+  good: 'success',
+  medium: 'warning',
+  bad: 'danger'
 };
 
 class GasStation extends Component {
@@ -89,66 +89,69 @@ class GasStation extends Component {
     if (!formattedGasOracleStats.length) {
       return '';
     }
-    return <Grid.Row>
-      <Grid.Col>
+    return <Row>
+      <Col>
         <Card>
-          <Card.Header>
-            <Card.Title>Gas Price Estimator</Card.Title>
-            <Card.Options>
+          <CardHeader>
+            <CardTitle>
+              Gas Price Estimator
               <CopyToClipboard text={currentGasStep.gasPrice / this.PRICE_UNIT_DIVIDER}
                                onCopy={() => this.setState({copied: true})}
                                title="Copy gas price to clipboard">
-                <span><Stamp color="blue" icon="copy"/></span>
+                <Badge className="p-3" color="primary"><i className="fa fa-copy"/></Badge>
               </CopyToClipboard>
-            </Card.Options>
-          </Card.Header>
+            </CardTitle>
+          </CardHeader>
 
-          <Card.Body>
+          <CardBody>
             {this.state.copied && <p>Copied Gas Price</p>}
-            <Grid.Row cards={true}>
-              <Grid.Col lg={6} md={6} sm={12}>
-                <StampCard icon="sliders" color={GasStation.getColorForPrice(currentGasStep.gasPrice)}>
+            <Row>
+              <Col lg={6} md={6} sm={12}>
+                <Badge className="p-2" color={GasStation.getColorForPrice(currentGasStep.gasPrice)}>
+                  <i className="mr-2 fa fa-adjust"/>
                   {this.getFormattedPrice(currentGasStep.gasPrice)}
-                </StampCard>
-              </Grid.Col>
-              <Grid.Col lg={6} md={6} sm={12}>
-                <StampCard icon="clock" color={GasStation.getColorForWait(currentGasStep.wait)}>
+                </Badge>
+              </Col>
+              <Col lg={6} md={6} sm={12}>
+                <Badge className="p-2" color={GasStation.getColorForWait(currentGasStep.wait)}>
+                  <i className="mr-2 fa fa-clock-o"/>
                   {this.getFormattedWait(currentGasStep.wait)}
-                </StampCard>
-              </Grid.Col>
-            </Grid.Row>
+                </Badge>
+              </Col>
+            </Row>
 
-            <Form.Group>
-              <input type="range" className="slider"
+            <Input type="range" className="slider"
                      max={formattedGasOracleStats.length - 1}
                      min={0}
                      step={1}
                      value={this.state.gasOracleSliderIndex}
                      onChange={(e) => this.gasSliderChange(e, 'gasOracleSliderIndex')}
-              />
-            </Form.Group>
+            />
 
-            <Grid.Row cards={true}>
-              <Grid.Col lg={4} md={6} sm={12}>
-                <StampCard icon="sliders" color="grey">
+            <Row>
+              <Col lg={4} md={6} sm={12}>
+                <Badge className="p-2" color="secondary">
+                  <i className="mr-2 fa fa-adjust"/>
                   Average Price: {this.getFormattedPrice(this.averagePrice)}
-                </StampCard>
-              </Grid.Col>
-              <Grid.Col lg={4} md={6} sm={12}>
-                <StampCard icon="clock" color="grey">
+                </Badge>
+              </Col>
+              <Col lg={4} md={6} sm={12}>
+                <Badge className="p-2" color="secondary">
+                  <i className="mr-2 fa fa-clock-o"/>
                   Average Wait: {this.getFormattedWait(this.averageWait)}
-                </StampCard>
-              </Grid.Col>
-              <Grid.Col lg={4} md={6} sm={12}>
-                <StampCard icon="square" color="grey">
+                </Badge>
+              </Col>
+              <Col lg={4} md={6} sm={12}>
+                <Badge className="p-2" color="secondary">
+                  <i className="mr-2 fa fa-square"/>
                   Last Block: {this.props.lastBlock.number}
-                </StampCard>
-              </Grid.Col>
-            </Grid.Row>
-          </Card.Body>
+                </Badge>
+              </Col>
+            </Row>
+          </CardBody>
         </Card>
-      </Grid.Col>
-    </Grid.Row>;
+      </Col>
+    </Row>;
   }
 }
 

embark-ui/src/components/LoadMore.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import {Grid, Button} from 'tabler-react';
+import {Row, Col, Button} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 const LoadMore = ({loadMore}) => (
-  <Grid.Row className="my-3">
-    <Grid.Col className="text-center">
+  <Row className="my-3">
+    <Col className="text-center">
       <Button onClick={loadMore} icon="plus" outline color="primary">Load More</Button>
-    </Grid.Col>
-  </Grid.Row>
+    </Col>
+  </Row>
 );
 
 LoadMore.propTypes = {

embark-ui/src/components/Loading.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import {Grid, Loader} from 'tabler-react';
+import {Row, Col} from 'reactstrap';
 
 import "./Loading.css";
 
 const Loading = () => (
-  <Grid.Row className="align-items-center h-100 mt-5">
-    <Grid.Col>
-      <Loader className="mx-auto" />
-    </Grid.Col>
-  </Grid.Row>
+  <Row className="align-items-center mt-5">
+    <Col className="text-center">
+      <i className="fa fa-spinner fa-spin fa-3x fa-fw"></i>
+    </Col>
+  </Row>
 );
 
 export default Loading;

embark-ui/src/components/Preview.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Form, Button} from 'tabler-react';
+import {Button, InputGroup, Input, InputGroupAddon} from 'reactstrap';
 
 class Preview extends React.Component {
   constructor(props) {
@@ -28,15 +28,14 @@ class Preview extends React.Component {
   render() {
     return (
       <div className='h-100 d-flex flex-column'>
-        <Form.InputGroup>
-          <Form.Input placeholder="URL"
-                      value={this.state.previewUrl}
-                      className="form-control"
-                      onChange={(e) => this.handlePreviewUrlChange(e)} />
-          <Form.InputGroupAppend>
-            <Button color="primary" onClick={(e) => this.handlePreviewGo(e)}>Go</Button>
-          </Form.InputGroupAppend>
-        </Form.InputGroup>
+        <InputGroup>
+          <Input placeholder="URL"
+                 value={this.state.previewUrl}
+                 onChange={(e) => this.handlePreviewUrlChange(e)} />
+          <InputGroupAddon addonType="append">
+            <Button className="ml-auto" color="primary" onClick={(e) => this.handlePreviewGo(e)}>Go</Button>
+          </InputGroupAddon>
+        </InputGroup>
         <iframe width="100%"
                 height="100%"
                 title="Preview"

embark-ui/src/components/Processes.js

@@ -1,36 +1,35 @@
 import PropTypes from "prop-types";
 import React from 'react';
-import {Link} from "react-router-dom";
-import {Grid, Card} from 'tabler-react';
+import {Row, Col, Card} from 'reactstrap';
 import classNames from 'classnames';
 
-function stampClasses(state){
-  return classNames('stamp stamp-md mr-3', {
-    'bg-green': state === 'running',
+function badgeClasses(state){
+  return classNames('badge p-1 mr-3', {
+    'bg-success': state === 'running',
     'bg-danger': state !== 'running'
   });
 }
 
 function iconClasses(state){
-  return classNames('fe', {
-    'fe-check-square': state === 'running',
-    'fe-x': state !== 'running'
+  return classNames('fa', {
+    'fa-check': state === 'running',
+    'fa-x': state !== 'running'
   });
 }
 
 const Process = ({process}) => (
-  <Grid.Col sm={6} lg={3}>
+  <Col sm={6} lg={3}>
     <Card className="p-3">
       <div className="d-flex align-items-center">
-        <span className={stampClasses(process.state)}>
+        <span className={badgeClasses(process.state)}>
           <i className={iconClasses(process.state)}></i>
         </span>
         <div>
-          <h4 className="text-capitalize m-0"><Link to={`/embark/processes/${process.name}`}>{process.name} ({process.state})</Link></h4>
+          <h4 className="text-capitalize m-0">{process.name} ({process.state})</h4>
         </div>
       </div>
     </Card>
-  </Grid.Col>
+  </Col>
 );
 
 Process.propTypes = {
@@ -38,9 +37,9 @@ Process.propTypes = {
 };
 
 const Processes = ({processes}) => (
-  <Grid.Row cards>
+  <Row>
     {processes.map((process) => <Process key={process.name} process={process} />)}
-  </Grid.Row>
+  </Row>
 );
 
 Processes.propTypes = {

embark-ui/src/components/TextEditorToolbar.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Grid, Button} from 'tabler-react';
+import {Col, Button} from 'reactstrap';
 
 const TextEditorToolbar = (props) => (
-  <Grid.Col md={6}>
+  <Col md={6}>
     <strong>{props.currentFile.name}</strong>
     <span className="mx-2">|</span>
     <Button color="green" size="sm" icon="save" onClick={props.save}>Save</Button>
     <span className="mx-2">|</span>
     <Button color="red" size="sm" icon="delete" onClick={props.remove}>Delete</Button>
-  </Grid.Col>
+  </Col>
 );
 
 TextEditorToolbar.propTypes = {

embark-ui/src/components/Transaction.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import {Link} from 'react-router-dom';
-import {
-  Page
-} from "tabler-react";
+import {Row, Col} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 const Transaction = ({transaction}) => (
-  <Page.Content title={`Transaction ${transaction.hash}`}>
-    <p>Block: <Link to={`/embark/explorer/blocks/${transaction.blockNumber}`}>{transaction.blockNumber}</Link></p>
-    <p>From: {transaction.from}</p>
-    <p>To: {transaction.to}</p>
-    <p>Input: {transaction.input}</p>
-    <p>Gas: {transaction.gas}</p>
-    <p>Gas Price: {transaction.gasPrice}</p>
-    <p>Nonce: {transaction.nonce}</p>
-  </Page.Content>
+  <Row>
+    <Col>
+      <h1>Transaction {transaction.hash}</h1>
+      <p>Block: <Link to={`/embark/explorer/blocks/${transaction.blockNumber}`}>{transaction.blockNumber}</Link></p>
+      <p>From: {transaction.from}</p>
+      <p>To: {transaction.to}</p>
+      <p>Input: {transaction.input}</p>
+      <p>Gas: {transaction.gas}</p>
+      <p>Gas Price: {transaction.gasPrice}</p>
+      <p>Nonce: {transaction.nonce}</p>
+    </Col>
+  </Row>
 );
 
 Transaction.propTypes = {

embark-ui/src/components/Transactions.js

@@ -1,52 +1,40 @@
 import React from 'react';
 import {Link} from "react-router-dom";
-import {
-  Page,
-  Grid,
-  Card,
-  Table
-} from "tabler-react";
+import {Row, Col, Table} from 'reactstrap';
 import PropTypes from 'prop-types';
 
 const Transactions = ({transactions}) => (
-  <Page.Content title="Transactions">
-    <Grid.Row>
-      <Grid.Col>
-        <Card>
-          <Table
-            responsive
-            cards
-            verticalAlign="center"
-            className="text-nowrap">
-            <Table.Header>
-              <Table.Row>
-                <Table.ColHeader>Hash</Table.ColHeader>
-                <Table.ColHeader>Block Number</Table.ColHeader>
-                <Table.ColHeader>From</Table.ColHeader>
-                <Table.ColHeader>To</Table.ColHeader>
-                <Table.ColHeader>Type</Table.ColHeader>
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {
-                transactions.map((transaction) => {
-                  return (
-                    <Table.Row key={transaction.hash}>
-                      <Table.Col><Link to={`/embark/explorer/transactions/${transaction.hash}`}>{transaction.hash}</Link></Table.Col>
-                      <Table.Col>{transaction.blockNumber}</Table.Col>
-                      <Table.Col>{transaction.from}</Table.Col>
-                      <Table.Col>{transaction.to}</Table.Col>
-                      <Table.Col>{transaction.to ? "Contract Call" : "Contract Creation"}</Table.Col>
-                    </Table.Row>
-                  );
-                })
-              }
-            </Table.Body>
-          </Table>
-        </Card>
-      </Grid.Col>
-    </Grid.Row>
-  </Page.Content>
+  <Row>
+    <Col>
+      <h1>Transactions</h1>
+      <Table responsive className="text-nowrap">
+        <thead>
+          <tr>
+            <th>Hash</th>
+            <th>Block Number</th>
+            <th>From</th>
+            <th>To</th>
+            <th>Type</th>
+          </tr>
+        </thead>
+      <tbody>
+        {
+          transactions.map((transaction) => {
+            return (
+              <tr key={transaction.hash}>
+                <td><Link to={`/embark/explorer/transactions/${transaction.hash}`}>{transaction.hash}</Link></td>
+                <td>{transaction.blockNumber}</td>
+                <td>{transaction.from}</td>
+                <td>{transaction.to}</td>
+                <td>{transaction.to ? "Contract Call" : "Contract Creation"}</td>
+              </tr>
+            );
+          })
+        }
+      </tbody>
+    </Table>
+    </Col>
+  </Row>
 );
 
 Transactions.propTypes = {

embark-ui/src/components/Versions.js

@@ -1,34 +0,0 @@
-import PropTypes from "prop-types";
-import React from 'react';
-import {Grid, Card} from 'tabler-react';
-
-const Version = ({version}) => (
-  <Grid.Col sm={6} lg={3}>
-    <Card className="p-3">
-      <div className="d-flex align-items-center">
-        <span className="stamp stamp-md mr-3 bg-info">
-          <i className="fe fa-cube"></i>
-        </span>
-        <div>
-          <h4 className="text-capitalize m-0">{version.name}: {version.value}</h4>
-        </div>
-      </div>
-    </Card>
-  </Grid.Col>
-);
-
-Version.propTypes = {
-  version: PropTypes.object
-};
-
-const Versions = ({versions}) => (
-  <Grid.Row cards>
-    {versions.map((version) => <Version key={version.name} version={version} />)}
-  </Grid.Row>
-);
-
-Versions.propTypes = {
-  versions: PropTypes.arrayOf(PropTypes.object)
-};
-
-export default Versions;

embark-ui/src/containers/AppContainer.js

@@ -51,7 +51,6 @@ class AppContainer extends Component {
 
     if (this.props.credentials.authenticated && !this.props.initialized) {
       this.props.fetchProcesses();
-      this.props.fetchVersions();
       this.props.fetchPlugins();
     }
   }

embark-ui/src/containers/ContractSourceContainer.js

@@ -1,53 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import PropTypes from 'prop-types';
-import {withRouter} from 'react-router-dom';
-import {Page} from "tabler-react";
-
-import {file as FileAction} from '../actions';
-import DataWrapper from "../components/DataWrapper";
-import TextEditor from "../components/TextEditor";
-import {getContract, getCurrentFile} from "../reducers/selectors";
-
-class ContractSourceContainer extends Component {
-  componentDidMount() {
-    this.props.fetchFile({path: this.props.contract.path});
-  }
-
-  render() {
-    return (
-      <Page.Content title={`${this.props.contract.className} Source`}>
-        <DataWrapper shouldRender={this.props.file !== undefined } {...this.props} render={({file}) => (
-          <TextEditor file={file} contractCompile={{}} />
-        )} />
-      </Page.Content>
-    );
-  }
-}
-
-function mapStateToProps(state, props) {
-  const contract = getContract(state, props.match.params.contractName);
-  const file = getCurrentFile(state);
-
-  return {
-    contract,
-    file,
-    error: state.errorMessage,
-    loading: state.loading
-  };
-}
-
-ContractSourceContainer.propTypes = {
-  match: PropTypes.object,
-  contract: PropTypes.object,
-  file: PropTypes.object,
-  fetchFile: PropTypes.func,
-  error: PropTypes.string
-};
-
-export default withRouter(connect(
-  mapStateToProps,
-  {
-    fetchFile: FileAction.request
-  }
-)(ContractSourceContainer));

embark-ui/src/containers/HomeContainer.js

@@ -1,7 +1,6 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
-import {Page} from "tabler-react";
 
 import {
   contracts as contractsAction,
@@ -53,14 +52,14 @@ class HomeContainer extends Component {
   render() {
     return (
       <React.Fragment>
-        <Page.Title className="my-5">Dashboard</Page.Title>
+        <h1 className="my-5">Dashboard</h1>
         <DataWrapper shouldRender={this.props.processes.length > 0 } {...this.props} render={({processes}) => (
           <Processes processes={processes} />
         )} />
         <DataWrapper shouldRender={this.props.contracts.length > 0} {...this.props} render={({contracts}) => (
-            <div style={{maxHeight: '227px', marginBottom: '1.5rem', overflow: 'auto'}}>
-                <ContractsList contracts={contracts} />
-            </div>
+          <div style={{maxHeight: '227px', marginBottom: '1.5rem', overflow: 'auto'}}>
+            <ContractsList contracts={contracts} />
+          </div>
         )} />
 
         <DataWrapper shouldRender={this.props.processes.length > 0 } {...this.props} render={({processes, postCommand, processLogs}) => (

embark-ui/src/index.css

@@ -12,4 +12,12 @@
 
 .card.warnings-card .card-options a, .card.errors-card .card-options a {
   cursor: pointer;
+}
+
+.text-wrap {
+  word-wrap: break-word; 
+}
+
+.table {
+  background: #ffffff;
 }