add initial layout for Name Lookup

also adds additional components to the ui folder

app/components/ens/nameLookup.js

@@ -0,0 +1,13 @@
+import React, { Fragment } from 'react';
+import Field from '../../ui/components/Field'
+import TextInput from '../../ui/components/TextInput'
+
+const NameLookup = () => (
+  <div>
+    <Field label="Enter Domain or Status Name" wide>
+      <TextInput wide required />
+    </Field>
+  </div>
+)
+
+export default NameLookup;

app/components/ensSubManagement.js

@@ -1,6 +1,7 @@
 import EmbarkJS from 'Embark/EmbarkJS';
 import ENSRegistry from 'Embark/contracts/ENSRegistry';
 import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
+import PublicResolver from 'Embark/contracts/PublicResolver';
 import TestToken from 'Embark/contracts/TestToken';
 import React, { Fragment } from 'react';
 import { Form, FormGroup, FormControl, HelpBlock, Button, ControlLabel } from 'react-bootstrap';
@@ -8,6 +9,7 @@ import AddDomain from './ens/addDomain';
 import RegisterSubDomain from './ens/registerSubDomain';
 import TokenPermissions from './standard/TokenPermission';
 import SetupENS from './ens/setupENS';
+import { hash } from 'eth-ens-namehash';
 
 const FieldGroup = ({ id, label, help, ...props }) => (
   <FormGroup controlId={id}>
@@ -37,6 +39,10 @@ const ENSSubManagement = (props) => (
 setTimeout(() => ENSRegistry.getPastEvents(
   'allEvents',
   {},
-  (err, res) => { console.log(err, res) }), 2000)
+  (err, res) => {
+    PublicResolver.methods.addr(hash('bobby.stateofus.eth')).call().then(res =>{
+      console.log('addr', res);
+    });
+    console.log(err, res) }), 2000)
 
 export default ENSSubManagement;

app/dapp.js

@@ -6,7 +6,8 @@ import EmbarkJS from 'Embark/EmbarkJS';
 import TopNavbar from './components/topnavbar';
 import TestTokenUI from './components/testtoken';
 import ERC20TokenUI from './components/erc20token';
-import ENSSubManagement from './components/ensSubManagement'
+import ENSSubManagement from './components/ensSubManagement';
+import NameLookup from './components/ens/nameLookup';
 
 import './dapp.css';
 
@@ -45,6 +46,9 @@ class App extends React.Component {
         <Tab eventKey={3} title="ENS Management">
           <ENSSubManagement />
         </Tab>
+        <Tab eventKey={4} title="Name Lookup">
+          <NameLookup />
+        </Tab>
       </Tabs>
     </div>);
   }

app/ui/components/Field.js

@@ -0,0 +1,46 @@
+import { node, string } from 'prop-types'
+import React from 'react'
+import styled from 'styled-components'
+import Text from './Text'
+import theme from '../theme'
+import { unselectable } from '../utils/styles'
+
+const StyledField = styled.div`
+  margin-bottom: 20px;
+`
+
+const StyledAsterisk = styled.span`
+  color: ${theme.accent};
+  float: right;
+  padding-top: 3px;
+  font-size: 12px;
+`
+
+const StyledTextBlock = styled(Text.Block)`
+  font-weight: 400;
+  ${unselectable()};
+`
+
+const Field = ({ children, label, wide, ...props }) => {
+  const isRequired = React.Children.toArray(children).some(
+    ({ props: childProps }) => childProps.required
+  )
+  return (
+    <StyledField {...props}>
+      <label style={{ width: wide ? '100%' : 'auto' }}>
+        <StyledTextBlock color={theme.textSecondary} smallcaps>
+          {label}
+          {isRequired && <StyledAsterisk title="Required">*</StyledAsterisk>}
+        </StyledTextBlock>
+        {children}
+      </label>
+    </StyledField>
+  )
+}
+
+Field.propTypes = {
+  children: node,
+  label: string,
+}
+
+export default Field

app/ui/components/Text.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import styled from 'styled-components'
+import { font } from '../utils/styles/font'
+
+const StyledText = styled.span`
+  ${({ size, weight, smallcaps }) => (font({ size, weight, smallcaps }))};
+  ${({ color }) => (color ? `color: ${color}` : '')};
+`
+
+const Text = props => <StyledText {...props} />
+
+const createTextContainer = Element => {
+  const Container = ({
+    children,
+    color,
+    size,
+    smallcaps,
+    weight,
+    ...props
+  }) => {
+    const textProps = { color, size, smallcaps, weight }
+    return (
+      <Element {...props}>
+        <Text {...textProps}>{children}</Text>
+      </Element>
+    )
+  }
+  return Container
+}
+
+Text.Block = createTextContainer('div')
+Text.Paragraph = createTextContainer('p')
+
+export default Text

app/ui/components/TextInput.js

@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import styled, { css } from 'styled-components'
+import theme from '../theme'
+import { font } from '../utils/styles/font'
+
+const baseStyles = css`
+  ${font({ size: 'small', weight: 'normal' })};
+  width: ${({ wide }) => (wide ? '100%' : 'auto')};
+
+  padding: 5px 10px;
+  background: ${theme.contentBackground};
+  border: 1px solid ${theme.contentBorder};
+  border-radius: 3px;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
+  color: ${theme.textPrimary};
+  appearance: none;
+  &:focus {
+    outline: none;
+    border-color: ${theme.contentBorderActive};
+  }
+  &:read-only {
+    color: transparent;
+    text-shadow: 0 0 0 ${theme.textSecondary};
+  }
+`
+
+// Simple input
+const TextInput = styled.input`
+  ${baseStyles};
+`
+TextInput.propTypes = {
+  required: PropTypes.bool,
+  type: PropTypes.oneOf([
+    'email',
+    'number',
+    'password',
+    'search',
+    'tel',
+    'text',
+    'url',
+  ]),
+}
+TextInput.defaultProps = {
+  required: false,
+  type: 'text',
+}
+
+// <input type=number> (only for compat)
+const TextInputNumber = styled.input.attrs({ type: 'number' })`
+  ${baseStyles};
+`
+
+// Multiline input (textarea element)
+const TextInputMultiline = styled.textarea`
+  ${baseStyles};
+  resize: vertical;
+`
+TextInputMultiline.propTypes = {
+  required: PropTypes.bool,
+}
+TextInputMultiline.defaultProps = {
+  required: false,
+}
+
+TextInput.Number = TextInputNumber
+TextInput.Multiline = TextInputMultiline
+
+export default TextInput

app/ui/index.js

@@ -1 +1,2 @@
 export { default as Card } from './components/Card'
+export { default as Field } from './components/Field.js'

app/ui/utils/styles/font.js

@@ -0,0 +1,47 @@
+const FONT_SIZES = {
+  xxsmall: '11px',
+  xsmall: '12px',
+  small: '14px',
+  normal: '15px',
+  large: '16px',
+  xlarge: '20px',
+  xxlarge: '22px',
+  great: '37px',
+}
+
+const FONT_WEIGHTS = {
+  normal: '400',
+  bold: '600',
+  bolder: '800',
+}
+
+const fontSizeCss = size => {
+  const fontSize = FONT_SIZES[size]
+  return fontSize !== undefined
+    ? `
+      line-height: 1.5;
+      font-size: ${fontSize}
+    `
+    : ''
+}
+
+const weightCss = weight => {
+  const fontWeight = FONT_WEIGHTS[weight]
+  return fontWeight !== undefined ? `font-weight: ${fontWeight}` : ''
+}
+
+const smallcapsCss = smallcaps =>
+      smallcaps
+      ? `
+      text-transform: lowercase;
+      font-variant: small-caps;
+    `
+      : ''
+
+export const font = ({ size, weight, smallcaps = false, inherit = false }) => {
+  return `
+    ${fontSizeCss(size, inherit)};
+    ${weightCss(weight, inherit)};
+    ${smallcapsCss(smallcaps, inherit)};
+  `
+}

app/ui/utils/styles/index.js

@@ -0,0 +1,7 @@
+export const unselectable = () => `
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`