add babelrc w/object rest spread + layout ens

app/components/ensSubManagement.js

@@ -0,0 +1,37 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
+import React, { Fragment } from 'react';
+import { Form, FormGroup, FormControl, HelpBlock, Button, ControlLabel } from 'react-bootstrap';
+
+const FieldGroup = ({ id, label, help, ...props }) => (
+  <FormGroup controlId={id}>
+    <ControlLabel>{label}</ControlLabel>
+    <FormControl {...props} />
+    {help && <HelpBlock>{help}</HelpBlock>}
+  </FormGroup>
+)
+
+const ENSSubManagement = (props) => (
+  <Fragment>
+    <h2> Subdomain management</h2>
+    <form>
+      <FieldGroup
+        id="updateUsername"
+        type="text"
+        label="Update Username"
+      />
+      <FieldGroup
+        id="updateAddress"
+        type="text"
+        label="Update Address"
+      />
+      <FieldGroup
+        id="updateUsername"
+        type="text"
+        label="Update Pubkey"
+      />
+    </form>
+  </Fragment>
+)
+
+export default ENSSubManagement

app/dapp.js

@@ -7,6 +7,7 @@ import TopNavbar from './components/topnavbar';
 import TestTokenUI from './components/testtoken';
 import ERC20TokenUI from './components/erc20token';
 import ENSSubdomainRegistryUI from './components/enssubdomainregistry';
+import ENSSubManagement from './components/ensSubManagement'
 
 import './dapp.css';
 
@@ -14,13 +15,11 @@ class App extends React.Component {
 
   constructor(props) {
     super(props);
-
-    
   }
 
-  componentDidMount(){ 
+  componentDidMount(){
     __embarkContext.execWhenReady(() => {
-      
+
     });
   }
 
@@ -28,7 +27,7 @@ class App extends React.Component {
   _renderStatus(title, available) {
     let className = available ? 'pull-right status-online' : 'pull-right status-offline';
     return <React.Fragment>
-      {title} 
+      {title}
       <span className={className}></span>
     </React.Fragment>;
   }
@@ -36,15 +35,18 @@ class App extends React.Component {
   render(){
     return (<div><h3>Status.im Contracts</h3>
       <Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
-      <Tab eventKey={1} title="TestToken">
+        <Tab eventKey={1} title="TestToken">
           <TestTokenUI />
-      </Tab>
-      <Tab eventKey={2} title="ERC20Token">
+        </Tab>
+        <Tab eventKey={2} title="ERC20Token">
           <ERC20TokenUI />
-      </Tab>
-      <Tab eventKey={3} title="ENSSubdomainRegistry">
+        </Tab>
+        <Tab eventKey={3} title="ENSSubdomainRegistry">
           <ENSSubdomainRegistryUI />
-      </Tab>
+        </Tab>
+        <Tab eventKey={4} title="ENS Management">
+          <ENSSubManagement />
+        </Tab>
       </Tabs>
     </div>);
   }

embark.json

@@ -14,5 +14,6 @@
     "ipfs-api": "17.2.4"
   },
   "plugins": {
+    "embark-babel": {}
   }
 }

package.json

@@ -39,5 +39,8 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.8.2"
     "web3-utils": "^1.0.0-beta.34"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.26.0"
   }
 }