feature(SubmitChannel): wire up backend to new submit channel form + loading pubkeys UI

app/components/Contacts/AddChannel.js

@@ -15,7 +15,7 @@ const AddChannel = ({
   updateContactFormSearchQuery,
   updateManualFormSearchQuery,
   updateContactCapacity,
-  setPubkey,
+  setNode,
   openChannel,
   updateManualFormErrors,
   activeChannelPubkeys,
@@ -24,7 +24,8 @@ const AddChannel = ({
   filteredNetworkNodes,
   loadingChannelPubkeys,
   showManualForm,
-  manualFormIsValid
+  manualFormIsValid,
+  openManualForm
 }) => {
 
   const renderRightSide = (node) => {
@@ -75,7 +76,7 @@ const AddChannel = ({
         className={styles.connect}
         onClick={() => {
           // set the node public key for the submit form
-          setPubkey(node.pub_key)
+          setNode(node)
           // open the submit form
           openSubmitChannelForm()
         }}
@@ -102,7 +103,7 @@ const AddChannel = ({
           className={styles.searchInput}
           value={contactsform.searchQuery}
           onChange={event => searchUpdated(event.target.value)}
-          ref={input => input && input.focus()}
+          // ref={input => input && input.focus()}
         />
         <span onClick={closeContactsForm} className={styles.closeIcon}>
           <Isvg src={x} />
@@ -140,7 +141,7 @@ const AddChannel = ({
         showManualForm &&
         <section className={styles.manualForm}>
           <p>Hm, looks like we can't see that node from here, wanna try to manually connect?</p>
-          <div className={styles.manualConnectButton}>Connect Manually</div>
+          <div className={styles.manualConnectButton} onClick={openManualForm}>Connect Manually</div>
         </section>
       }
     </div>

app/components/Contacts/ChannelForm.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Isvg from 'react-inlinesvg'
+import x from 'icons/x.svg'
+
+import ConnectManually from './ConnectManually'
+import SubmitChannelForm from './SubmitChannelForm'
+
+import styles from './ChannelForm.scss'
+
+const FORM_TYPES = {
+  MANUAL_FORM: ConnectManually,
+  SUBMIT_CHANNEL_FORM: SubmitChannelForm
+}
+
+const ChannelForm = ({ formType, formProps, closeForm }) => {
+  console.log('formType: ', formType)
+  if (!formType) { return null }
+
+  const FormComponent = FORM_TYPES[formType]
+  console.log('FormComponent: ', FormComponent)
+  return (
+    <div className={styles.container}>
+      <div className={styles.closeContainer}>
+        <span onClick={closeForm}>
+          <Isvg src={x} />
+        </span>
+      </div>
+      <FormComponent {...formProps} />
+    </div>
+  )
+}
+
+
+ChannelForm.propTypes = {
+  formType: PropTypes.string,
+  formProps: PropTypes.object.isRequired,
+  closeForm: PropTypes.func.isRequired
+}
+
+export default ChannelForm

app/components/Contacts/ChannelForm.scss

@@ -0,0 +1,29 @@
+@import '../../variables.scss';
+
+.container {
+  position: absolute;
+  top: 0;
+  z-index: 10;
+  height: 100vh;
+  width: 100%;
+  background: #31343F;
+}
+
+.closeContainer {
+  text-align: right;
+  padding: 20px 40px 0px;
+
+  span {
+    cursor: pointer;
+    opacity: 1.0;
+    transition: 0.25s all;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+
+  svg {
+    color: $white;
+  }
+}

app/components/Contacts/ConnectManually.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { FaAngleDown } from 'react-icons/lib/fa'
+import Isvg from 'react-inlinesvg'
+import x from 'icons/x.svg'
+
+import styles from './ConnectManually.scss'
+
+class ConnectManually extends React.Component {
+  render() {
+    const {
+      manualFormOpen,
+      manualSearchQuery,
+
+      closeManualForm,
+      updateManualFormSearchQuery
+    } = this.props
+
+    console.log('props: ', this.props)
+
+    return (
+      <div className={styles.content}>
+        <header className={styles.header}>
+          <h1>Connect Manually</h1>
+          <p>Please enter the peer's pubkey@host</p>
+        </header>
+
+        <section className={styles.peer}>
+          <div className={styles.input}>
+            <input
+              type='text'
+              placeholder='pubkey@host'
+              value={manualSearchQuery}
+              onChange={event => updateManualFormSearchQuery(event.target.value)}
+            />
+          </div>
+        </section>
+      </div>
+    )
+  }
+}
+
+ConnectManually.propTypes = {}
+
+export default ConnectManually

app/components/Contacts/ConnectManually.scss

@@ -0,0 +1,102 @@
+@import '../../variables.scss';
+
+.container {
+  position: absolute;
+  top: 0;
+  z-index: 10;
+  height: 100vh;
+  width: 100%;
+  background: #31343F;
+}
+
+.closeContainer {
+  text-align: right;
+  padding: 20px 40px 0px;
+
+  span {
+    cursor: pointer;
+    opacity: 1.0;
+    transition: 0.25s all;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+
+  svg {
+    color: $white;
+  }
+}
+
+
+.content {
+  padding: 0 40px;
+  font-family: Roboto;
+  color: $white;
+
+  .header {
+    padding: 20px 100px;
+
+    h1 {
+      margin-bottom: 15px;
+      font-size: 20px;
+    }
+
+    p {
+      text-align: center;
+      line-height: 1.3;
+      font-size: 14px;
+    }
+  }
+}
+
+.header {
+  text-align: center;
+  padding-bottom: 20px;
+  border-bottom: 1px solid $spaceborder;
+
+  h1 {
+    font-size: 22px;
+    font-weight: 100;
+    margin-top: 10px;
+    letter-spacing: 1.5px;
+  }
+}
+
+.title {
+  margin: 50px 0;
+
+  h2 {
+    font-size: 14px;
+    background: $spaceblue;
+    padding: 10px;
+    border-radius: 17.5px;
+    display: inline;
+  }
+}
+
+.input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 50px;
+
+  input {
+    font-size: 25px;
+  }
+}
+
+.input input {
+  background: transparent;
+  outline: none;
+  border: 0;
+  color: $gold;
+  -webkit-text-fill-color: $white;
+  width: 100%;
+  font-weight: 200;
+}
+
+.input input::-webkit-input-placeholder, ::-webkit-input-placeholder {
+  text-shadow: none;
+  -webkit-text-fill-color: initial;
+}

app/components/Contacts/Network.js

@@ -23,8 +23,8 @@ class Network extends Component {
       channels: {
         searchQuery,
         filterPulldown,
-        filter
+        filter,
-        // loadingChannelPubkeys,
+        loadingChannelPubkeys,
         // closingChannelIds
       },
       currentChannels,
@@ -82,10 +82,16 @@ class Network extends Component {
     }
 
     const channelStatus = (channel) => {
+      // if the channel has a confirmation_height property that means it's pending
       if (Object.prototype.hasOwnProperty.call(channel, 'confirmation_height')) { return 'pending' }
+
+      // if the channel has a closing tx that means it's closing
       if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) { return 'closing' }
+
+      // if the channel isn't active that means the remote peer isn't online
       if (!channel.active) { return 'offline' }
 
+      // if all of the above conditionals fail we can assume the node is online :)
       return 'online'
     }
 
@@ -137,6 +143,26 @@ class Network extends Component {
           </header>
 
           <ul className={filterPulldown && styles.fade}>
+            {
+              loadingChannelPubkeys.map(loadingPubkey => {
+                // TODO(jimmymow): refactor this out. same logic is in displayNodeName above
+                const node = find(nodes, n => loadingPubkey === n.pub_key)
+                const nodeDisplay = () => {
+                  if (node && node.alias.length) { return node.alias }
+
+                  return loadingPubkey.substring(0, 10)
+                }
+
+                return (
+                  <li key={loadingPubkey} className={styles.channel}>
+                    <span>{nodeDisplay()}</span>
+                    <span className={`${styles.loading} hint--left`} data-hint='loading'>
+                      <i className={styles.spinner} />
+                    </span>
+                  </li>
+                )
+              })
+            }
             {
               currentChannels.length > 0 && currentChannels.map((channelObj, index) => {
                 const channel = Object.prototype.hasOwnProperty.call(channelObj, 'channel') ? channelObj.channel : channelObj

app/components/Contacts/Network.scss

@@ -195,3 +195,42 @@
     color: $white;
   }
 }
+
+.spinner {
+  height: 10px;
+  width: 10px;
+  border: 1px solid rgba(235, 184, 100, 0.1);
+  border-left-color: rgba(235, 184, 100, 0.4);
+  -webkit-border-radius: 999px;
+  -moz-border-radius: 999px;
+  border-radius: 999px;
+  -webkit-animation: animation-rotate 1000ms linear infinite;
+  -moz-animation: animation-rotate 1000ms linear infinite;
+  -o-animation: animation-rotate 1000ms linear infinite;
+  animation: animation-rotate 1000ms linear infinite;
+  display: inline-block;
+}
+
+@-webkit-keyframes animation-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes animation-rotate {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes animation-rotate {
+  100% {
+    -o-transform: rotate(360deg);
+  }
+}
+
+@keyframes animation-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}

app/components/Contacts/SubmitChannelForm.js

@@ -11,11 +11,13 @@ class SubmitChannelForm extends React.Component {
   render() {
     const {
       submitChannelFormOpen,
-      closeSubmitChannelForm,
+      closeChannelForm,
+      closeContactsForm,
 
-      pubkey,
+      node,
       contactCapacity,
       updateContactCapacity,
+      openChannel,
 
       toggleCurrencyProps: {
         setContactsCurrencyFilters,
@@ -28,16 +30,28 @@ class SubmitChannelForm extends React.Component {
       }
     } = this.props
 
-    if (!submitChannelFormOpen) { return null }
+    const renderTitle = () => {
+      // if the node has an alias set we will show that with the pubkey in parens
+      // if not, just show the pubkey (would look ugly with rando parens)
+      if (node.alias && node.alias.length) {
+        return `${node.alias} (${node.pub_key})`
+      } else {
+        return node.addresses
+      }
+    }
 
-    return (
+    const formSubmitted = () => {
-      <div className={styles.container}>
+      // submit the channel to LND
-        <div className={styles.closeContainer}>
+      openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: contactCapacity })
-          <span onClick={closeSubmitChannelForm}>
+
-            <Isvg src={x} />
+      // close the ChannelForm component
-          </span>
+      closeChannelForm()
-        </div>
 
+      // close the AddChannel component
+      closeContactsForm()
+    }
+
+    return (
       <div className={styles.content}>
         <header className={styles.header}>
           <h1>Add Funds to Network</h1>
@@ -45,7 +59,7 @@ class SubmitChannelForm extends React.Component {
         </header>
 
         <section className={styles.title}>
-            <h2>{pubkey}</h2>
+          <h2>{renderTitle()}</h2>
         </section>
 
         <section className={styles.amount}>
@@ -53,12 +67,10 @@ class SubmitChannelForm extends React.Component {
             <input
               type='number'
               min='0'
-                ref={(input) => { this.amountInput = input }}
               size=''
               placeholder='0.00000000'
               value={contactCapacity || ''}
               onChange={event => updateContactCapacity(event.target.value)}
-                // onBlur={onPayAmountBlur}
               id='amount'
             />
             <div className={styles.currency}>
@@ -78,7 +90,15 @@ class SubmitChannelForm extends React.Component {
             {`≈ ${contactFormUsdAmount || 0} USD`}
           </div>
         </section>
+
+        <section className={styles.submit}>
+          <div
+            className={`${styles.button} ${contactCapacity > 0 && styles.active}`}
+            onClick={formSubmitted}
+          >
+            Submit
           </div>
+        </section>
       </div>
     )
   }

app/components/Contacts/SubmitChannelForm.scss

@@ -1,33 +1,5 @@
 @import '../../variables.scss';
 
-.container {
-  position: absolute;
-  top: 0;
-  z-index: 10;
-  height: 100vh;
-  width: 100%;
-  background: #31343F;
-}
-
-.closeContainer {
-  text-align: right;
-  padding: 20px 40px 0px;
-
-  span {
-    cursor: pointer;
-    opacity: 1.0;
-    transition: 0.25s all;
-
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-
-  svg {
-    color: $white;
-  }
-}
-
 
 .content {
   padding: 0 40px;
@@ -43,7 +15,7 @@
     }
 
     p {
-      text-align: left;
+      text-align: center;
       line-height: 1.3;
       font-size: 12px;
     }
@@ -152,3 +124,27 @@
   margin-top: 20px;
   opacity: 0.5;
 }
+
+.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/Form/Form.scss

@@ -1,8 +1,11 @@
 @import '../../variables.scss';
 
 .container {
-  position: relative;
+  position: absolute;
+  top: 0;
+  z-index: 10;
   height: 100vh;
+  width: 100%;
   background: $spaceblue;
 }
 

app/reducers/channels.js

@@ -521,7 +521,9 @@ const initialState = {
     { key: 'CLOSING_PENDING_CHANNELS', name: 'Closing' }
   ],
 
-  loadingChannelPubkeys: [],
+  loadingChannelPubkeys: [
+    '039cc950286a8fa99218283d1adc2456e0d5e81be558da77dd6e85ba9a1fff5ad3'
+  ],
   closingChannelIds: [],
 
   contactModal: {

app/reducers/contactsform.js

@@ -7,11 +7,18 @@ import { btc } from '../utils'
 
 // Initial State
 const initialState = {
+  // this determines whether or not the network side bar is in search state for a peer or not
   isOpen: false,
+  // this determines what form (manual or submit) the user currently has open
+  // if this is not null the ChannelForm component will be open
+  formType: null,
+
   searchQuery: '',
   manualSearchQuery: '',
   contactCapacity: 0.1,
   pubkey: '',
+  host: '',
+  node: {},
   showErrors: {
     manualInput: false
   },
@@ -27,6 +34,11 @@ const initialState = {
 export const OPEN_CONTACTS_FORM = 'OPEN_CONTACTS_FORM'
 export const CLOSE_CONTACTS_FORM = 'CLOSE_CONTACTS_FORM'
 
+export const OPEN_CHANNEL_FORM_FORM = 'OPEN_CHANNEL_FORM_FORM'
+export const CLOSE_CHANNEL_FORM_FORM = 'CLOSE_CHANNEL_FORM_FORM'
+
+export const SET_CHANNEL_FORM_TYPE = 'SET_CHANNEL_FORM_TYPE'
+
 export const OPEN_MANUAL_FORM = 'OPEN_MANUAL_FORM'
 export const CLOSE_MANUAL_FORM = 'CLOSE_MANUAL_FORM'
 
@@ -34,6 +46,8 @@ export const OPEN_SUBMIT_CHANNEL_FORM = 'OPEN_SUBMIT_CHANNEL_FORM'
 export const CLOSE_SUBMIT_CHANNEL_FORM = 'CLOSE_SUBMIT_CHANNEL_FORM'
 
 export const SET_PUBKEY = 'SET_PUBKEY'
+export const SET_HOST = 'SET_HOST'
+export const SET_NODE = 'SET_NODE'
 
 export const UPDATE_CONTACT_FORM_SEARCH_QUERY = 'UPDATE_CONTACT_FORM_SEARCH_QUERY'
 
@@ -60,6 +74,25 @@ export function closeContactsForm() {
   }
 }
 
+export function openChannelForm() {
+  return {
+    type: OPEN_CONTACTS_FORM
+  }
+}
+
+export function closeChannelForm() {
+  return {
+    type: CLOSE_CONTACTS_FORM
+  }
+}
+
+export function setChannelFormType(formType) {
+  return {
+    type: SET_CHANNEL_FORM_TYPE,
+    formType
+  }
+}
+
 export function openManualForm() {
   return {
     type: OPEN_MANUAL_FORM
@@ -112,6 +145,20 @@ export function setPubkey(pubkey) {
   }
 }
 
+export function setHost(host) {
+  return {
+    type: SET_HOST,
+    host
+  }
+}
+
+export function setNode(node) {
+  return {
+    type: SET_NODE,
+    node
+  }
+}
+
 export function updateManualFormErrors(errorsObject) {
   return {
     type: UPDATE_MANUAL_FORM_ERRORS,
@@ -133,6 +180,8 @@ const ACTION_HANDLERS = {
   [OPEN_CONTACTS_FORM]: state => ({ ...state, isOpen: true }),
   [CLOSE_CONTACTS_FORM]: state => ({ ...state, isOpen: false }),
   
+  [SET_CHANNEL_FORM_TYPE]: (state, { formType }) => ({ ...state, formType }),
+
   [OPEN_MANUAL_FORM]: state => ({ ...state, manualFormOpen: true }),
   [CLOSE_MANUAL_FORM]: state => ({ ...state, manualFormOpen: false }),
 
@@ -146,6 +195,8 @@ const ACTION_HANDLERS = {
   [UPDATE_CONTACT_CAPACITY]: (state, { contactCapacity }) => ({ ...state, contactCapacity }),
   
   [SET_PUBKEY]: (state, { pubkey }) => ({ ...state, pubkey }),
+  [SET_HOST]: (state, { host }) => ({ ...state, host }),
+  [SET_NODE]: (state, { node }) => ({ ...state, node }),
 
   [UPDATE_MANUAL_FORM_ERRORS]: (state, { errorsObject }) => ({ ...state, showErrors: Object.assign(state.showErrors, errorsObject) }),
 

app/routes/app/components/App.js

@@ -5,6 +5,7 @@ import GlobalError from 'components/GlobalError'
 import LoadingBolt from 'components/LoadingBolt'
 
 import Form from 'components/Form'
+import ChannelForm from 'components/Contacts/ChannelForm'
 import ModalRoot from 'components/ModalRoot'
 
 import Network from 'components/Contacts/Network'
@@ -13,6 +14,7 @@ import ContactModal from 'components/Contacts/ContactModal'
 import ContactsForm from 'components/Contacts/ContactsForm'
 
 import SubmitChannelForm from 'components/Contacts/SubmitChannelForm'
+import ConnectManually from 'components/Contacts/ConnectManually'
 
 import ReceiveModal from 'components/Wallet/ReceiveModal'
 import ActivityModal from 'components/Activity/ActivityModal'
@@ -64,6 +66,10 @@ class App extends Component {
       receiveModalProps,
       activityModalProps,
       submitChannelFormProps,
+      connectManuallyProps,
+      channelFormProps,
+
+      contactsform,
 
       children
     } = this.props
@@ -85,7 +91,7 @@ class App extends Component {
         <ContactModal {...contactModalProps} />
 
         <Form formType={form.formType} formProps={formProps} closeForm={closeForm} />
-        <SubmitChannelForm {...submitChannelFormProps} />
+        <ChannelForm {...channelFormProps} />
 
         <ReceiveModal {...receiveModalProps} />
         <ActivityModal {...activityModalProps} />

app/routes/app/containers/AppContainer.js

@@ -42,13 +42,18 @@ import {
   openContactsForm,
   closeContactsForm,
 
+  setChannelFormType,
+
+  openManualForm,
+  closeManualForm,
+
   openSubmitChannelForm,
   closeSubmitChannelForm,
 
   updateContactFormSearchQuery,
   updateManualFormSearchQuery,
   updateContactCapacity,
-  setPubkey,
+  setNode,
 
   contactFormSelectors,
   updateManualFormErrors,
@@ -112,13 +117,16 @@ const mapDispatchToProps = {
   closeContactsForm,
   openSubmitChannelForm,
   closeSubmitChannelForm,
+  openManualForm,
+  closeManualForm,
   updateContactFormSearchQuery,
   updateManualFormSearchQuery,
   updateContactCapacity,
-  setPubkey,
+  setNode,
   contactFormSelectors,
   updateManualFormErrors,
   setContactsCurrencyFilters,
+  setChannelFormType,
 
   fetchDescribeNetwork,
 
@@ -307,13 +315,14 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
   const contactsFormProps = {
     closeContactsForm: dispatchProps.closeContactsForm,
-    openSubmitChannelForm: dispatchProps.openSubmitChannelForm,
+    openSubmitChannelForm: () => dispatchProps.setChannelFormType('SUBMIT_CHANNEL_FORM'),
     updateContactFormSearchQuery: dispatchProps.updateContactFormSearchQuery,
     updateManualFormSearchQuery: dispatchProps.updateManualFormSearchQuery,
     updateContactCapacity: dispatchProps.updateContactCapacity,
-    setPubkey: dispatchProps.setPubkey,
+    setNode: dispatchProps.setNode,
     openChannel: dispatchProps.openChannel,
     updateManualFormErrors: dispatchProps.updateManualFormErrors,
+    openManualForm: () => dispatchProps.setChannelFormType('MANUAL_FORM'),
 
     contactsform: stateProps.contactsform,
     filteredNetworkNodes: stateProps.filteredNetworkNodes,
@@ -367,12 +376,16 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
   const submitChannelFormProps = {
     submitChannelFormOpen: stateProps.contactsform.submitChannelFormOpen,
-    pubkey: stateProps.contactsform.pubkey,
+    node: stateProps.contactsform.node,
     contactCapacity: stateProps.contactsform.contactCapacity,
 
-    closeSubmitChannelForm: dispatchProps.closeSubmitChannelForm,
     updateContactCapacity: dispatchProps.updateContactCapacity,
     
+    closeChannelForm: () => dispatchProps.setChannelFormType(null),
+    closeContactsForm: dispatchProps.closeContactsForm,
+
+    openChannel: dispatchProps.openChannel,
+
     toggleCurrencyProps: {
       currentCurrencyFilters: stateProps.currentCurrencyFilters,
       currencyName: stateProps.currencyName,
@@ -389,6 +402,29 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     }
   }
 
+  const connectManuallyProps = {
+    closeManualForm: dispatchProps.closeManualForm,
+    updateManualFormSearchQuery: dispatchProps.updateManualFormSearchQuery,
+    closeChannelForm: () => dispatchProps.setChannelFormType(null),
+    
+    manualFormOpen: stateProps.contactsform.manualFormOpen,
+    manualSearchQuery: stateProps.contactsform.manualSearchQuery
+  }
+
+  const calcChannelFormProps = (formType) => {
+    if (formType === 'MANUAL_FORM') { return connectManuallyProps }
+    if (formType === 'SUBMIT_CHANNEL_FORM') { return submitChannelFormProps }
+
+    return {}
+  }
+
+  const channelFormProps = {
+    formType: stateProps.contactsform.formType,
+    formProps: calcChannelFormProps(stateProps.contactsform.formType),
+    closeForm: () => dispatchProps.setChannelFormType(null)
+  }
+
+
   return {
     ...stateProps,
     ...dispatchProps,
@@ -404,8 +440,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     receiveModalProps,
     // props for the activity modals
     activityModalProps,
-    // props for the for to open a channel
+    // props for the form to open a channel
     submitChannelFormProps,
+    // props for the form to connect manually to a peer
+    connectManuallyProps,
+    // props for the channel form wrapper
+    channelFormProps,
     // Props to pass to the pay form
     formProps: formProps(stateProps.form.formType),
     // action to close form