feature(ConnectManually): wire up ConnectManually component

app/components/Contacts/ConnectManually.js

@@ -13,11 +13,43 @@ class ConnectManually extends React.Component {
       manualFormOpen,
       manualSearchQuery,
 
-      closeManualForm,
-      updateManualFormSearchQuery
+      manualFormIsValid,
+      updateManualFormErrors,
+
+      openSubmitChannelForm,
+      updateManualFormSearchQuery,
+
+      setNode,
+
+      showErrors
     } = this.props
 
-    console.log('props: ', this.props)
+    const formSubmitted = () => {
+      if (!manualFormIsValid.isValid) {
+        updateManualFormErrors(manualFormIsValid.errors)
+        
+        return
+      }
+        // clear any existing errors
+        updateManualFormErrors({ manualInput: null })
+
+        const [pub_key, addr] = manualSearchQuery && manualSearchQuery.split('@')
+
+        // the SubmitChannel component is expecting a node object that looks like the following
+        // {
+          // pub_key: 'some_string',
+          // addresses: [
+            // {
+              // addr: 'some_host_address' 
+            // }
+          // ]
+        // }
+        // knowing this we will set the node object with the known format and plug in the pubkey + host accordingly
+        setNode({ pub_key, addresses: [{ addr }] })
+
+        // now we close the ConnectManually form and open the SubmitChannel form by chaning the channelFormType
+        openSubmitChannelForm()
+    }
 
     return (
       <div className={styles.content}>
@@ -36,6 +68,21 @@ class ConnectManually extends React.Component {
             />
           </div>
         </section>
+
+        <section className={`${styles.errorMessage} ${showErrors.manualInput && styles.active}`}>
+          {showErrors.manualInput &&
+            <span>{manualFormIsValid && manualFormIsValid.errors.manualInput}</span>
+          }
+        </section>
+
+        <section className={styles.submit}>
+          <div
+            className={`${styles.button} ${manualFormIsValid.isValid && styles.active}`}
+            onClick={formSubmitted}
+          >
+            Submit
+          </div>
+        </section>
       </div>
     )
   }

app/components/Contacts/ConnectManually.scss

@@ -82,7 +82,7 @@
   margin-top: 50px;
 
   input {
-    font-size: 25px;
+    font-size: 20px;
   }
 }
 
@@ -100,3 +100,40 @@
   text-shadow: none;
   -webkit-text-fill-color: initial;
 }
+
+.errorMessage {
+  margin-top: 20px;
+  font-size: 12px;
+  color: $red;
+  min-height: 12px;
+  visibility: hidden;
+
+  &.active {
+    visibility: visible;
+  }
+}
+
+.submit {
+  margin-top: 50px;
+  text-align: center;
+
+  .button {
+    width: 235px;
+    margin: 0 auto;
+    padding: 20px 10px;
+    background: #31343f;
+    opacity: 0.5;
+    cursor: pointer;
+    transition: 0.25s all;
+
+    &.active {
+      background: $gold;
+      opacity: 1.0;
+
+      &:hover {
+        background: darken($gold, 5%);
+      }
+    }
+  }
+}
+

app/components/Contacts/SubmitChannelForm.js

@@ -36,7 +36,7 @@ class SubmitChannelForm extends React.Component {
       if (node.alias && node.alias.length) {
         return `${node.alias} (${node.pub_key})`
       } else {
-        return node.addresses
+        return node.pub_key
       }
     }
 

app/routes/app/containers/AppContainer.js

@@ -405,10 +405,14 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const connectManuallyProps = {
     closeManualForm: dispatchProps.closeManualForm,
     updateManualFormSearchQuery: dispatchProps.updateManualFormSearchQuery,
-    closeChannelForm: () => dispatchProps.setChannelFormType(null),
+    updateManualFormErrors: dispatchProps.updateManualFormErrors,
+    setNode: dispatchProps.setNode,
+    openSubmitChannelForm: () => dispatchProps.setChannelFormType('SUBMIT_CHANNEL_FORM'),
     
     manualFormOpen: stateProps.contactsform.manualFormOpen,
-    manualSearchQuery: stateProps.contactsform.manualSearchQuery
+    manualSearchQuery: stateProps.contactsform.manualSearchQuery,
+    manualFormIsValid: stateProps.manualFormIsValid,
+    showErrors: stateProps.contactsform.showErrors
   }
 
   const calcChannelFormProps = (formType) => {