feature(contacts): add channelNodes selector

app/components/Contacts/ContactModal.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
+import find from 'lodash/find'
 import ReactModal from 'react-modal'
 import { FaClose, FaCircle } from 'react-icons/lib/fa'
 
@@ -8,8 +8,9 @@ import { btc } from 'utils'
 
 import styles from './ContactModal.scss'
 
-const ContactModal = ({ isOpen, channel, closeContactModal }) => {
-  console.log('channel: ', channel)
+const ContactModal = ({ isOpen, channel, closeContactModal, channelNodes }) => {
+  if (!channel) { return <span /> }
+
   const customStyles = {
     overlay: {
       cursor: 'pointer',
@@ -27,6 +28,9 @@ const ContactModal = ({ isOpen, channel, closeContactModal }) => {
     }
   }
 
+  // the remote node for the channel
+  const node = find(channelNodes, { pub_key: channel.remote_pubkey })
+
   return (
     <ReactModal
       isOpen={isOpen}
@@ -60,6 +64,10 @@ const ContactModal = ({ isOpen, channel, closeContactModal }) => {
           </header>
           
           <section className={styles.title}>
+            {
+              node &&
+              <h1>{node.alias}</h1>
+            }
             <h2>{channel.remote_pubkey}</h2>
           </section>
 

app/components/Contacts/ContactModal.scss

@@ -43,11 +43,18 @@
 }
 
 .title {
-
-  h2 {
+  h1 {
     color: $secondary;
     font-weight: bold;
+    font-size: 16px;
+    letter-spacing: 1.1px;
+    margin-bottom: 10px;
+  }
+
+  h2 {
     font-size: 12px;
+    color: $darkestgrey;
+    font-weight: 100;
   }
 
 }

app/reducers/channels.js

@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect'
 import { ipcRenderer } from 'electron'
+import filter from 'lodash/filter'
 import { btc } from 'utils'
 import { showNotification } from 'notifications'
 import { closeChannelForm, resetChannelForm } from './channelform'
@@ -328,6 +329,7 @@ const pendingForceClosedChannelsSelector = state => state.channels.pendingChanne
 const channelSearchQuerySelector = state => state.channels.searchQuery
 const filtersSelector = state => state.channels.filters
 const filterSelector = state => state.channels.filter
+const nodesSelector = state => state.network.nodes
 
 channelsSelectors.channelModalOpen = createSelector(
   channelSelector,
@@ -381,6 +383,16 @@ channelsSelectors.nonActiveFilters = createSelector(
   (filters, filter) => filters.filter(f => f.key !== filter.key)
 )
 
+channelsSelectors.channelNodes = createSelector(
+  channelsSelector,
+  nodesSelector,
+  (channels, nodes) => {
+    const chanPubkeys = channels.map(channel => channel.remote_pubkey)
+
+    return filter(nodes, node => chanPubkeys.includes(node.pub_key))
+  }
+)
+
 const allChannels = createSelector(
   channelsSelectors.activeChannels,
   channelsSelectors.nonActiveChannels,

app/routes/contacts/containers/ContactsContainer.js

@@ -61,6 +61,7 @@ const mapStateToProps = state => ({
   pendingOpenChannelPubkeys: channelsSelectors.pendingOpenChannelPubkeys(state),
   closingPendingChannels: channelsSelectors.closingPendingChannels(state),
   nonActiveFilters: channelsSelectors.nonActiveFilters(state),
+  channelNodes: channelsSelectors.channelNodes(state),
 
   filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state),
   showManualForm: contactFormSelectors.showManualForm(state)
@@ -71,7 +72,8 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     closeContactModal: dispatchProps.closeContactModal,
 
     isOpen: stateProps.channels.contactModal.isOpen,
-    channel: stateProps.channels.contactModal.channel
+    channel: stateProps.channels.contactModal.channel,
+    channelNodes: stateProps.channelNodes
   }
 
   const contactsFormProps = {