Introduce proof of concept utils tab with ether converter

embark-ui/package-lock.json

@@ -3454,6 +3454,21 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
+    "ethereumjs-units": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ethereumjs-units/-/ethereumjs-units-0.2.0.tgz",
+      "integrity": "sha1-bqMRMqq8LMe4pSkOJlWTozdof6M=",
+      "requires": {
+        "bignumber.js": "^2.3.0"
+      },
+      "dependencies": {
+        "bignumber.js": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-2.4.0.tgz",
+          "integrity": "sha1-g4qZLan51zfg9LLbC+YrsJ3Qxeg="
+        }
+      }
+    },
     "event-emitter": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",

embark-ui/package.json

@@ -9,6 +9,7 @@
     "axios": "^0.18.0",
     "classnames": "^2.2.6",
     "connected-react-router": "^4.3.0",
+    "ethereumjs-units": "0.2.0",
     "history": "^4.7.2",
     "prop-types": "^15.6.2",
     "qs": "^6.5.2",

embark-ui/src/components/Converter.js

@@ -0,0 +1,69 @@
+import React, {Component} from 'react';
+import {Page, Form} from "tabler-react";
+import Units from 'ethereumjs-units';
+
+const UNITS = [
+  { key: 'wei', name: 'Wei' },
+  { key: 'kwei', name: 'KWei' },
+  { key: 'mwei', name: 'MWei' },
+  { key: 'gwei', name: 'Szabo' },
+  { key: 'finney', name: 'Finney' },
+  { key: 'ether', name: 'Ether' },
+  { key: 'kether', name: 'KEther' },
+  { key: 'mether', name: 'MEther' },
+  { key: 'gether', name: 'GEther' },
+  { key: 'tether', namw: 'TEther' }
+];
+
+const safeConvert = (value, from, to) => {
+  try {
+    value = Units.convert(value, from, to);
+  } catch (e) {
+    value = ''
+  }
+  return value;
+}
+
+const calculateUnits = (value, from) => {
+  return UNITS.reduce((acc, unit) => {
+    acc[unit.key] = safeConvert(value, from, unit.key)
+    return acc;
+  }, {});
+}
+
+class Converter extends Component {
+
+  constructor(props) {
+    super(props);
+    const units = calculateUnits('1', 'ether')
+
+    this.state = {
+      units
+    };
+  }
+
+  calculate(value, from) {
+    const units = calculateUnits(value, from);
+    this.setState({ units })
+  }
+
+  render() {
+    return (
+      <Page.Content title="Ether Converter">
+        <Form.FieldSet>
+          {
+            UNITS.map(unit => {
+              return (
+                <Form.Group label={unit.name} key={unit.key}>
+                  <Form.Input placeholder={unit.name} value={this.state.units[unit.key]} onChange={e => this.calculate(e.target.value, unit.key)} />
+                </Form.Group>
+              )
+            })
+          }
+        </Form.FieldSet>
+      </Page.Content>
+    )
+  }
+}
+
+export default Converter;

embark-ui/src/components/Layout.js

@@ -10,7 +10,8 @@ const navBarItems = [
   {value: "Contracts", to: "/embark/contracts", icon: "box", LinkComponent: NavLink},
   {value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", LinkComponent: NavLink},
   {value: "Fiddle", to: "/embark/fiddle", icon: "codepen", LinkComponent: NavLink},
-  {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: NavLink}
+  {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: NavLink},
+  {value: "Utils", to: "/embark/utilities/converter", icon: "settings", LinkComponent: NavLink}
 ];
 
 const Layout = ({children, logout}) => (

embark-ui/src/components/UtilsLayout.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import {Page, Grid, List} from 'tabler-react'
+import {NavLink, Route, Switch} from 'react-router-dom';
+
+import Converter from '../components/Converter';
+
+const groupItems = [
+  {to: "/embark/utilities/converter", icon: "dollar-sign", value: "Ether Converter"},
+];
+
+const className = "d-flex align-items-center";
+
+class UtilsLayout extends React.Component {
+  render() {
+    return (
+      <Grid.Row>
+        <Grid.Col md={3}>
+          <Page.Title className="my-5">Utilities</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/utilities/converter" component={Converter} />
+          </Switch>
+        </Grid.Col>
+      </Grid.Row>
+    )
+  }
+}
+
+export default UtilsLayout;

embark-ui/src/routes.js

@@ -7,6 +7,7 @@ import ContractContainer from './containers/ContractLayoutContainer';
 import NoMatch from './components/NoMatch';
 import ExplorerLayout from './components/ExplorerLayout';
 import FiddleLayout from './components/FiddleLayout';
+import UtilsLayout from './components/UtilsLayout';
 
 const routes = (
   <React.Fragment>
@@ -16,6 +17,7 @@ const routes = (
       <Route path="/embark/contracts/:contractName" component={ContractContainer} />
       <Route path="/embark/contracts" component={ContractsContainer} />
       <Route path="/embark/fiddle" component={FiddleLayout} />
+      <Route path="/embark/utilities" component={UtilsLayout} />
       <Route component={NoMatch} />
     </Switch>
   </React.Fragment>