feature(suggestedNodes): style the component and render the nodes

app/api/index.js

@@ -24,3 +24,13 @@ export function requestBlockHeight() {
     .then(response => response.data)
     .catch(error => error)
 }
+
+export function requestSuggestedNodes() {
+  const BASE_URL = 'http://zap.jackmallers.com/suggested-peers'
+  return axios({
+    method: 'get',
+    url: BASE_URL
+  })
+    .then(response => response.data)
+    .catch(error => error)
+}

app/components/Contacts/Network.js

@@ -49,7 +49,9 @@ class Network extends Component {
 
       setSelectedChannel,
 
-      closeChannel
+      closeChannel,
+
+      suggestedNodesProps
     } = this.props
 
 
@@ -142,7 +144,7 @@ class Network extends Component {
         <div className={styles.channels}>
         {
           !loadingChannelPubkeys.length && !currentChannels.length &&
-          <SuggestedNodes />
+          <SuggestedNodes {...suggestedNodesProps} />
         }
 
         {

app/components/Contacts/SubmitChannelForm.scss

@@ -1,6 +1,5 @@
 @import '../../variables.scss';
 
-
 .content {
   padding: 0 40px;
   font-family: Roboto;

app/components/Contacts/SuggestedNodes.js

@@ -2,13 +2,46 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './SuggestedNodes.scss'
 
-const SuggestedNodes = ({}) => {
-  console.log('yo')
+const SuggestedNodes = ({ suggestedNodesLoading, suggestedNodes }) => {
+  if (suggestedNodesLoading) {
+    return (
+      <div className={styles.spinnerContainer}>
+        <span className={styles.loading}>
+          <i className={`${styles.spinner} ${styles.closing}`} />
+        </span>
+      </div>
+    )
+  }
+
   return (
-    <div>suggested nodes</div>
+    <div className={styles.container}>
+      <header>
+        Hmmm, looks like you don't have any channels yet. Here are some suggested nodes to open a channel with to get started
+      </header>
+      
+      <ul className={styles.suggestedNodes}>
+        {
+          suggestedNodes.map(node => (
+              <li key={node.pubkey}>
+                <section>
+                  <span>{node.nickname}</span>
+                  <span>{`${node.pubkey.substring(0, 30)}...`}</span>
+                </section>
+                <section>
+                  <span>Connect</span>
+                </section>
+              </li>
+            )
+          )
+        }
+      </ul>
+    </div>
   )
 }
 
-SuggestedNodes.propTypes = {}
+SuggestedNodes.propTypes = {
+  suggestedNodesLoading: PropTypes.bool.isRequired,
+  suggestedNodes: PropTypes.array.isRequired
+}
 
 export default SuggestedNodes

app/components/Contacts/SuggestedNodes.scss

@@ -0,0 +1,88 @@
+@import '../../variables.scss';
+
+.container {
+  color: $white;
+  padding: 10px;
+
+  header {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .suggestedNodes {
+    margin-top: 30px;
+
+    li {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin: 10px 0;
+      padding: 10px 0;
+
+      section span {
+        font-size: 12px;
+      }
+
+      section:nth-child(1) {
+        span {
+          display: block;
+
+          &:nth-child(2) {
+            font-size: 10px;
+            margin-top: 5px;
+          }
+        }
+      }
+
+      section:nth-child(2) {
+        span {
+          font-size: 10px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
+
+.spinnerContainer {
+  text-align: center;
+}
+
+.spinner {
+  height: 25px;
+  width: 25px;
+  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/reducers/channels.js

@@ -3,6 +3,7 @@ import { ipcRenderer } from 'electron'
 import filter from 'lodash/filter'
 import { btc } from 'utils'
 import { showNotification } from 'notifications'
+import { requestSuggestedNodes } from '../api'
 import { setError } from './error'
 // ------------------------------------
 // Constants
@@ -40,6 +41,9 @@ export const CLOSE_CONTACT_MODAL = 'CLOSE_CONTACT_MODAL'
 
 export const SET_SELECTED_CHANNEL = 'SET_SELECTED_CHANNEL'
 
+export const GET_SUGGESTED_NODES = 'GET_SUGGESTED_NODES'
+export const RECEIVE_SUGGESTED_NODES = 'RECEIVE_SUGGESTED_NODES'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -150,6 +154,26 @@ export function setSelectedChannel(selectedChannel) {
   }
 }
 
+export function getSuggestedNodes() {
+  return {
+    type: GET_SUGGESTED_NODES
+  }
+}
+
+export function receiveSuggestedNodes(suggestedNodes) {
+  return {
+    type: RECEIVE_SUGGESTED_NODES,
+    suggestedNodes
+  }
+}
+
+export const fetchSuggestedNodes = () => async (dispatch) => {
+  dispatch(getSuggestedNodes())
+  const suggestedNodes = await requestSuggestedNodes()
+  
+  dispatch(receiveSuggestedNodes(suggestedNodes))
+}
+
 // Send IPC event for peers
 export const fetchChannels = () => async (dispatch) => {
   dispatch(getChannels())
@@ -344,7 +368,10 @@ const ACTION_HANDLERS = {
   [OPEN_CONTACT_MODAL]: (state, { channel }) => ({ ...state, contactModal: { isOpen: true, channel } }),
   [CLOSE_CONTACT_MODAL]: state => ({ ...state, contactModal: { isOpen: false, channel: null } }),
 
-  [SET_SELECTED_CHANNEL]: (state, { selectedChannel }) => ({ ...state, selectedChannel })
+  [SET_SELECTED_CHANNEL]: (state, { selectedChannel }) => ({ ...state, selectedChannel }),
+  
+  [GET_SUGGESTED_NODES]: state => ({ ...state, suggestedNodesLoading: true }),
+  [RECEIVE_SUGGESTED_NODES]: (state, { suggestedNodes }) => ({ ...state, suggestedNodesLoading: false, suggestedNodes })
 }
 
 const channelsSelectors = {}
@@ -534,7 +561,25 @@ const initialState = {
     channel: null
   },
 
-  selectedChannel: null
+  selectedChannel: null,
+
+  // nodes stored at zap.jackmallers.com/suggested-peers manages by JimmyMow
+  // we store this node list here and if the user doesnt have any channels 
+  // we show them this list in case they wanna use our suggestions to connect 
+  // to the network and get started
+  // **** Example ****
+  // {
+  //   pubkey: "02212d3ec887188b284dbb7b2e6eb40629a6e14fb049673f22d2a0aa05f902090e",
+  //   host: "testnet-lnd.yalls.org",
+  //   nickname: "Yalls",
+  //   description: "Top up prepaid mobile phones with bitcoin and altcoins in USA and around the world"
+  // }
+  // ****
+  suggestedNodes: {
+    mainnet: [],
+    testnet: []
+  },
+  suggestedNodesLoading: false
 }
 
 export default function channelsReducer(state = initialState, action) {

app/routes/app/components/App.js

@@ -24,6 +24,7 @@ class App extends Component {
       fetchInfo,
       newAddress,
       fetchChannels,
+      fetchSuggestedNodes,
       fetchBalance,
       fetchDescribeNetwork
     } = this.props
@@ -36,6 +37,8 @@ class App extends Component {
     newAddress('np2wkh')
     // fetch nodes channels
     fetchChannels()
+    // fetch suggested nodes list from zap.jackmallers.com/suggested-peers
+    fetchSuggestedNodes()
     // fetch nodes balance
     fetchBalance()
     // fetch LN network from nides POV

app/routes/app/containers/AppContainer.js

@@ -27,6 +27,7 @@ import { fetchBlockHeight, lndSelectors } from 'reducers/lnd'
 
 import {
   fetchChannels,
+  fetchSuggestedNodes,
   openChannel,
   closeChannel,
   channelsSelectors,
@@ -105,6 +106,7 @@ const mapDispatchToProps = {
   fetchBalance,
 
   fetchChannels,
+  fetchSuggestedNodes,
   openChannel,
   closeChannel,
   toggleFilterPulldown,
@@ -135,6 +137,7 @@ const mapDispatchToProps = {
 }
 
 const mapStateToProps = state => ({
+  info: state.info,
   activity: state.activity,
 
   lnd: state.lnd,
@@ -312,7 +315,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     changeFilter: dispatchProps.changeFilter,
     updateChannelSearchQuery: dispatchProps.updateChannelSearchQuery,
     setSelectedChannel: dispatchProps.setSelectedChannel,
-    closeChannel: dispatchProps.closeChannel
+    closeChannel: dispatchProps.closeChannel,
+
+    suggestedNodesProps: {
+      suggestedNodesLoading: stateProps.channels.suggestedNodesLoading,
+      suggestedNodes: stateProps.info.data.testnet ? stateProps.channels.suggestedNodes.testnet : stateProps.channels.suggestedNodes.mainnet
+    }
   }
 
   const contactsFormProps = {