[#23]: Initial search screen shows an error message

.gitignore

@@ -42,3 +42,4 @@ package-lock.json
 .vs/
 bin/
 .idea/
+*.iml

app/components/ens/nameLookup.js

@@ -36,12 +36,12 @@ import DisplayBox from './DisplayBox';
 
 const normalizer = new IDNANormalizer();
 const invalidSuffix = '0000000000000000000000000000000000000000'
-const validAddress = address => address != nullAddress;
+const validAddress = address => address !== nullAddress;
 const validStatusAddress = address => !address.includes(invalidSuffix);
 const formatName = domainName => domainName.includes('.') ? normalizer.normalize(domainName) : normalizer.normalize(`${domainName}.stateofus.eth`);
 const getDomain = fullDomain => formatName(fullDomain).split('.').slice(1).join('.');
 const hashedDomain = domainName => hash(getDomain(domainName));
-const registryIsOwner = address => address == UsernameRegistrar._address;
+const registryIsOwner = address => address === UsernameRegistrar._address;
 const { soliditySha3, fromWei } = web3.utils;
 
 
@@ -70,7 +70,7 @@ const pastReleaseDate = timestamp => new Date > new Date(timestamp * 1000);
 
 const MobileAddressDisplay = ({ domainName, address, statusAccount, expirationTime, creationTime, defaultAccount, isOwner, edit, onSubmit, handleChange, values, handleSubmit }) => (
   <Fragment>
-    <LookupForm {...{ handleSubmit, values, handleChange }} justSearch />
+    <LookupForm {...{ handleSubmit, values, handleChange }} />
     <Info background={isOwner ? '#44D058' : '#000000'} style={{ margin: '0.4em', boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.2)' }}>
       <Typography variant="title" style={
         { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '10%' }
@@ -109,10 +109,10 @@ class RenderAddresses extends PureComponent {
   state = { copied: false, editMenu: false, editAction: false }
 
   render() {
-    const { domainName, address, statusAccount, expirationTime, defaultAccount, ownerAddress, setStatus, registryOwnsDomain } = this.props
+    const { domainName, address, statusAccount, expirationTime, defaultAccount, ownerAddress, setStatus, registryOwnsDomain } = this.props;
     const { copied, editMenu, editAction, submitted } = this.state
     const markCopied = (v) => { this.setState({ copied: v }) }
-    const isCopied = address => address == copied;
+    const isCopied = address => address === copied;
     const renderCopied = address => isCopied(address) && <span style={{ color: theme.positive }}><IconCheck/>Copied!</span>;
     const onClose = value => { this.setState({ editAction: value, editMenu: false }) }
     const onClickEdit = () => { validAddress(address) ? this.setState({ editMenu: true }) : this.setState({ editAction: 'edit' }) }
@@ -120,7 +120,7 @@ class RenderAddresses extends PureComponent {
     const canBeReleased = validTimestamp(expirationTime) && pastReleaseDate(expirationTime);
     const closeReleaseAlert = value => {
       if (!isNil(value)) {
-        this.setState({ submitted: true })
+        this.setState({ submitted: true });
         release(
           soliditySha3(domainName)
         )
@@ -186,7 +186,7 @@ const RegisterInfoCard = ({ formattedDomain, domainPrice, registryOwnsDomain })
       </Typography>
     </Hidden>
   </Fragment>
-)
+);
 
 const TransactionComplete = ({ type, setStatus }) => (
   <div style={{ textAlign: 'center', margin: '40% 15 10' }}>
@@ -269,7 +269,7 @@ const DisplayAddress = connect(mapStateToProps)((props) => (
   </Fragment>
 ))
 
-const LookupForm = ({ handleSubmit, values, handleChange, justSearch }) => (
+const LookupForm = ({ handleSubmit, values, handleChange, isWarningDisplayed }) => (
   <Fragment>
     <form onSubmit={handleSubmit} onBlur={handleSubmit} >
       <Hidden mdDown>
@@ -291,7 +291,7 @@ const LookupForm = ({ handleSubmit, values, handleChange, justSearch }) => (
           onChange={handleChange}
           required
           wide />
-        {!justSearch && <Warning>Names are made with<br/>letters and numbers only</Warning>}
+        {isWarningDisplayed && <Warning>Names are made with<br/>letters and numbers only</Warning>}
       </Hidden>
       <Hidden mdDown>
         <Button mode="strong" type="submit" style={{ marginLeft: '3%', maxWidth: '95%' }} wide>
@@ -318,58 +318,75 @@ const InnerForm = ({
     <Hidden mdDown>
       <span style={{ display: 'flex', justifyContent: 'space-evenly', margin: '50 0 10 0' }}>
         <StatusLogo />
-        <img  style={{ maxWidth: '150px', alignSelf: 'center' }} src={EnsLogo} alt="Ens Logo"/>
+        <img style={{maxWidth: '150px', alignSelf: 'center'}} src={EnsLogo} alt="Ens Logo"/>
       </span>
      </Hidden>
-    {!status
+    {!status|| !status.address ?
-     ? <LookupForm {...{ handleSubmit, values, handleChange }} />
+      <LookupForm {...{ handleSubmit, values, handleChange }} isWarningDisplayed={status && status.isInvalidDomain}/>
-     : validAddress(status.address) || defaultAccount === status.ownerAddress ?
+      :
+      validAddress(status.address) || defaultAccount === status.ownerAddress ?
      <DisplayAddress
        {...{ handleSubmit, values, handleChange }}
-       domainName={status.resolvedDomainName}
+       domainName={status.domainName}
        address={status.address}
        statusAccount={status.statusAccount}
        expirationTime={status.expirationTime}
-       creationTime={status.creationTime}
+       creationTime={status.creationTime}ownerAddress={status.ownerAddress}
-       ownerAddress={status.ownerAddress}
        registryOwnsDomain={status.registryOwnsDomain}
        setStatus={setStatus} /> :
      <div>
-       <LookupForm {...{ handleSubmit, values, handleChange }} justSearch />
+       <LookupForm {...{ handleSubmit, values, handleChange }} isWarningDisplayed={false} />
        <ConnectedRegister
          style={{ position: 'relative' }}
          setStatus={setStatus}
          registryOwnsDomain={status.registryOwnsDomain}
          ownerAddress={status.ownerAddress}
-         domainName={status.resolvedDomainName}  />
+         domainName={status.domainName}  />
      </div>
     }
   </div>
-)
+);
+
+const isValidDomainName = val => /^([a-z0-9]+)$/.test(val.toLowerCase());
 
 const NameLookup = withFormik({
   mapPropsToValues: props => ({ domainName: '' }),
+
   async handleSubmit(values, { status, setSubmitting, setStatus }) {
     const { domainName } = values;
-    const { methods: { owner, resolver } } = ENSRegistry;
+
-    const lookupHash = hash(formatName(domainName));
+    if (isValidDomainName(domainName)) {
-    const subdomainHash = soliditySha3(domainName);
+      const { methods: { owner, resolver } } = ENSRegistry;
-    const resolverContract = await getResolver(lookupHash);
+      const lookupHash = hash(formatName(domainName));
-    const { addr, pubkey } = resolverContract.methods;
+      const subdomainHash = soliditySha3(domainName);
-    const address = addr(lookupHash).call();
+      const resolverContract = await getResolver(lookupHash);
-    const keys = pubkey(lookupHash).call();
+      const { addr, pubkey } = resolverContract.methods;
-    const ownerAddress = owner(lookupHash).call();
+      const address = addr(lookupHash).call();
-    const suffixOwner = owner(hash(getDomain(domainName))).call();
+      const keys = pubkey(lookupHash).call();
-    const expirationTime = getExpirationTime(subdomainHash).call();
+      const ownerAddress = owner(lookupHash).call();
-    const creationTime = getCreationTime(subdomainHash).call();
+      const suffixOwner = owner(hash(getDomain(domainName))).call();
-    Promise.all([address, keys, ownerAddress, expirationTime, creationTime, suffixOwner])
+      const expirationTime = getExpirationTime(subdomainHash).call();
-           .then(([ address, keys, ownerAddress, expirationTime, creationTime, suffixOwner ]) => {
+      const creationTime = getCreationTime(subdomainHash).call();
-             const statusAccount = keyFromXY(keys[0], keys[1]);
+
-             const registryOwnsDomain = registryIsOwner(suffixOwner)
+      Promise.all([address, keys, ownerAddress, expirationTime, creationTime,suffixOwner])
-             const resolvedDomainName = domainName;
+        .then(([ address, keys, ownerAddress, expirationTime, creationTime, suffixOwner ]) => {
-             setStatus({ address, statusAccount, expirationTime, creationTime, ownerAddress, registryOwnsDomain, resolvedDomainName });
+          const statusAccount = keyFromXY(keys[0], keys[1]);
-           })
+          const registryOwnsDomain = registryIsOwner(suffixOwner);
+
+          setStatus({
+            address,
+            statusAccount,
+            expirationTime,
+            creationTime,
+            ownerAddress,
+            registryOwnsDomain,
+            domainName
+          });
+        });
+    } else {
+      setStatus({isInvalidDomain: true });
+    }
   }
-})(InnerForm)
+})(InnerForm);
 
 export default connect(mapStateToProps)(NameLookup);