add both fields to register an address and paste button

app/components/ens/registerSubDomain.js

@@ -1,7 +1,8 @@
 import web3 from "Embark/web3"
 import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
 import React from 'react';
-import { Button } from '../../ui/components';
+import Hidden from '@material-ui/core/Hidden';
+import { Button, MobileSearch } from '../../ui/components';
 import { withFormik } from 'formik';
 import { hash } from 'eth-ens-namehash';
 import { zeroAddress, zeroBytes32, formatPrice } from './utils';
@@ -47,12 +48,12 @@ const InnerForm = ({
        button={
          <Button
            mode="strong"
-           style={{ marginTop: '5px' }}
+                 style={{ marginTop: '5px' }}
            onClick={() => {
-              ENSSubdomainRegistry.methods.getPrice(hash(values.domainName))
-                                  .call()
-                                  .then((res) => { setFieldValue('price', fromWei(res)); });
-          }}
+               ENSSubdomainRegistry.methods.getPrice(hash(values.domainName))
+                                   .call()
+                                   .then((res) => { setFieldValue('price', fromWei(res)); });
+           }}
            >
            Get Price
          </Button>
@@ -65,29 +66,50 @@ const InnerForm = ({
        label="Domain Price"
        disabled
        value={values.price ? `${formatPrice(values.price)} SNT` : ''} />}
-    <FieldGroup
-      id="statusAddress"
-      name="statusAddress"
-      type="text"
-      label="Status messenger address domain resolves to"
-      onChange={handleChange}
-      onBlur={handleBlur}
-      value={values.statusAddress}
-      error={errors.statusAddress}
-      wide="true"
-    />
-    <FieldGroup
-      id="address"
-      name="address"
-      type="text"
-      label="Ethereum address domain resolves to"
-      onChange={handleChange}
-      onBlur={handleBlur}
-      value={values.address}
-      error={errors.address}
-      button={<Button mode="strong" style={{ padding: '5px 15px 5px 15px', marginTop: '5px' }} onClick={() => setFieldValue('address', web3.eth.defaultAccount)}>Use My Primary Address</Button>}
-    />
-    {!isSubmitting ? <Button wide mode="strong" type="submit" disabled={isSubmitting || !!Object.keys(errors).length}>{!isSubmitting ? 'Submit' : 'Submitting to the Blockchain - (this may take awhile)'}</Button> : <LinearProgress />}
+    <Hidden mdDown>
+      <FieldGroup
+        id="statusAddress"
+        name="statusAddress"
+        type="text"
+        label="Status messenger address domain resolves to"
+        onChange={handleChange}
+        onBlur={handleBlur}
+        value={values.statusAddress}
+        error={errors.statusAddress}
+        wide="true"
+      />
+      <FieldGroup
+        id="address"
+        name="address"
+        type="text"
+        label="Ethereum address domain resolves to"
+        onChange={handleChange}
+        onBlur={handleBlur}
+        value={values.address}
+        error={errors.address}
+        button={<Button mode="strong" style={{ padding: '5px 15px 5px 15px', marginTop: '5px' }} onClick={() => setFieldValue('address', web3.eth.defaultAccount)}>Use My Primary Address</Button>}
+      />
+      {!isSubmitting ? <Button wide mode="strong" type="submit" disabled={isSubmitting || !!Object.keys(errors).length}>{!isSubmitting ? 'Submit' : 'Submitting to the Blockchain - (this may take awhile)'}</Button> : <LinearProgress />}
+    </Hidden>
+    <Hidden mdUp>
+      <MobileSearch
+        name="statusAddress"
+        style={{ marginTop: '10px' }}
+        placeholder="Status Messenger Address"
+        value={values.statusAddress}
+        onChange={handleChange}
+        required
+        wide />
+      <MobileSearch
+        name="address"
+        style={{ marginTop: '10px' }}
+        placeholder="Ethereum Address"
+        value={values.address}
+        onChange={handleChange}
+        paste={() => setFieldValue('address', web3.eth.defaultAccount)}
+        required
+        wide />
+    </Hidden>
   </form>
 );
 

app/ui/components/MobileSearch.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import theme from '../theme';
 import SearchIcon from '@material-ui/icons/Search';
+import Button from '@material-ui/core/Button';
 
 const searchWrapper = {
   width: '100%',
@@ -14,13 +15,19 @@ const searchWrapper = {
   paddingLeft: '11px',
 };
 
+const pasteStyle = {
+  ...searchWrapper,
+  paddingLeft: '17em',
+  color: theme.accent
+};
+
 const MobileInput = styled.input`
   display: block;
   border-radius: 4px;
   background-color: #eef2f5;
   font-size: 16px;
   border: none;
-  height: 7%;
+  height: 3.5em;
   width: ${({ wide }) => (wide ? '100%' : 'auto')};
   appearance: none;
   box-shadow: none;
@@ -36,7 +43,10 @@ const MobileSearch = props => (
     {props.search && <div style={searchWrapper}>
       <SearchIcon />
     </div>}
-    <MobileInput {...props} />
+    <div style={{ display: 'flex' }}>
+      <MobileInput {...props} />
+      {!props.value && props.paste && <Button style={{ color: theme.accent }} onClick={props.paste}>Paste</Button>}
+    </div>
   </div>
 );