add register sub-domain component

app/components/ens/addDomain.js

@@ -1,7 +1,8 @@
 import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
 import ENSRegistry from 'Embark/contracts/ENSRegistry';
 import React, { Fragment } from 'react';
-import { Form, FormGroup, FormControl, HelpBlock, Button, ControlLabel } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
+import FieldGroup from '../standard/FieldGroup'
 import { withFormik } from 'formik';
 import { hash } from 'eth-ens-namehash'
 import { debounce } from 'lodash/fp'
@@ -20,14 +21,6 @@ const getAndIsOwner = async domainName => {
 const fetchDomain = delay(getDomain);
 const setPrice = (domainFn, hashedDomain, price) => domainFn(hashedDomain, price || 0).send();
 
-const FieldGroup = ({ id, label, error, ...props }) => (
-  <FormGroup controlId={id} validationState={error ? 'error' : null}>
-    <ControlLabel>{label}</ControlLabel>
-    <FormControl {...props} />
-    {error && <HelpBlock>{error}</HelpBlock>}
-  </FormGroup>
-)
-
 const InnerForm = ({
   values,
   errors,

app/components/ens/registerSubDomain.js

@@ -0,0 +1,64 @@
+import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
+import ENSRegistry from 'Embark/contracts/ENSRegistry';
+import React, { Fragment } from 'react';
+import { Button } from 'react-bootstrap';
+import { withFormik } from 'formik';
+import { hash } from 'eth-ens-namehash'
+import { zeroAddress, zeroBytes32 } from './utils'
+import FieldGroup from '../standard/FieldGroup'
+
+const InnerForm = ({
+  values,
+  errors,
+  touched,
+  handleChange,
+  handleBlur,
+  handleSubmit,
+  isSubmitting,
+}) => (
+  <form onSubmit={handleSubmit}>
+    <FieldGroup
+      id="subDomain"
+      name="subDomain"
+      type="text"
+      label="Sub Domain"
+      onChange={handleChange}
+      onBlur={handleBlur}
+      value={values.subDomain}
+      error={errors.subDomain}
+    />
+    <FieldGroup
+      id="domainName"
+      name="domainName"
+      type="text"
+      label="Domain Name"
+      onChange={handleChange}
+      onBlur={handleBlur}
+      value={values.domainName}
+    />
+    <Button bsStyle="primary" type="submit" disabled={isSubmitting || !!Object.keys(errors).length}>{!isSubmitting ? 'Submit' : 'Submitting to the Blockchain - (this may take awhile)'}</Button>
+  </form>
+)
+
+const RegisterSubDomain = withFormik({
+  mapPropsToValues: props => ({ subDomain: '', domainName: '' }),
+  handleSubmit(values, { setSubmitting }) {
+    const { subDomain, domainName } = values;
+    const { soliditySha3 } = window.web3.utils;
+    const { methods: { register } } = ENSSubdomainRegistry;
+    register(
+      soliditySha3(subDomain),
+      hash(domainName),
+      zeroAddress,
+      zeroBytes32,
+      zeroBytes32
+    )
+      .send()
+      .then(res => {
+        setSubmitting(false);
+        console.log(res)
+      });
+  }
+})(InnerForm)
+
+export default RegisterSubDomain;

app/components/ens/utils.js

@@ -0,0 +1,3 @@
+export const zeroAddress = '0x0000000000000000000000000000000000000000';
+export const zeroBytes32 = "0x0000000000000000000000000000000000000000000000000000000000000000";
+

app/components/ensSubManagement.js

@@ -2,8 +2,9 @@ import EmbarkJS from 'Embark/EmbarkJS';
 import ENSRegistry from 'Embark/contracts/ENSRegistry';
 import React, { Fragment } from 'react';
 import { Form, FormGroup, FormControl, HelpBlock, Button, ControlLabel } from 'react-bootstrap';
-import AddDomain from './ens/addDomain'
-import SetupENS from './ens/setupENS'
+import AddDomain from './ens/addDomain';
+import RegisterSubDomain from './ens/registerSubDomain';
+import SetupENS from './ens/setupENS';
 
 const FieldGroup = ({ id, label, help, ...props }) => (
   <FormGroup controlId={id}>
@@ -16,9 +17,12 @@ const FieldGroup = ({ id, label, help, ...props }) => (
 const ENSSubManagement = (props) => (
   <Fragment>
     <h2 style={{textAlign: 'center'}}>Subdomain Management</h2>
-    <h3>Add Domain Price</h3>
+    <h3>Add/Update Domain Price</h3>
     <AddDomain />
     <hr/>
+    <h3>Register Sub-Domain</h3>
+    <RegisterSubDomain />
+    <hr/>
     <SetupENS ENSRegistry={ENSRegistry} />
   </Fragment>
 )
@@ -27,4 +31,5 @@ setTimeout(() => ENSRegistry.getPastEvents(
   'allEvents',
   {},
   (err, res) => { console.log(err, res) }), 2000)
-export default ENSSubManagement
+
+export default ENSSubManagement;

app/components/standard/FieldGroup.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FormGroup, FormControl, HelpBlock, ControlLabel } from 'react-bootstrap';
+
+const FieldGroup = ({ id, label, error, ...props }) => (
+  <FormGroup controlId={id} validationState={error ? 'error' : null}>
+    <ControlLabel>{label}</ControlLabel>
+    <FormControl {...props} />
+    {error && <HelpBlock>{error}</HelpBlock>}
+  </FormGroup>
+)
+
+export default FieldGroup;