features(logo, peers): update Zap logo and allow connecting and disconnecting of peers

app/main.dev.js

@@ -25,6 +25,9 @@ if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true')
   const path = require('path');
   const p = path.join(__dirname, '..', 'app', 'node_modules');
   require('module').globalPaths.push(p);
+  
+  // set icon
+  app.dock.setIcon(`${path.join(__dirname, '..', 'resources')}/zap_2.png`)
 }
 
 const installExtensions = async () => {
@@ -64,6 +67,8 @@ app.on('ready', async () => {
     frame: false
   });
 
+  mainWindow.maximize();
+
   mainWindow.loadURL(`file://${__dirname}/app.html`);
 
   // @TODO: Use 'ready-to-show' event

app/reducers/peers.js

@@ -3,6 +3,14 @@ import { callApi } from '../api'
 // ------------------------------------
 // Constants
 // ------------------------------------
+export const CONNECT_PEER = 'CONNECT_PEER'
+export const CONNECT_SUCCESS = 'CONNECT_SUCCESS'
+export const CONNECT_FAILURE = 'CONNECT_FAILURE'
+
+export const DISCONNECT_PEER = 'DISCONNECT_PEER'
+export const DISCONNECT_SUCCESS = 'DISCONNECT_SUCCESS'
+export const DISCONNECT_FAILURE = 'DISCONNECT_FAILURE'
+
 export const SET_PEER_FORM = 'SET_PEER_FORM'
 
 export const SET_PEER = 'SET_PEER'
@@ -13,10 +21,48 @@ export const RECEIVE_PEERS = 'RECEIVE_PEERS'
 // ------------------------------------
 // Actions
 // ------------------------------------
-export function setPeerForm(isOpen) {
+export function connectPeer() {
+  return {
+    type: CONNECT_PEER
+  }
+}
+
+export function connectSuccess(peer) {
+  return {
+    type: CONNECT_SUCCESS,
+    peer
+  }
+}
+
+export function connectFailure() {
+  return {
+    type: CONNECT_FAILURE
+  }
+}
+
+export function disconnectPeer() {
+  return {
+    type: DISCONNECT_PEER
+  }
+}
+
+export function disconnectSuccess(pubkey) {
+  return {
+    type: DISCONNECT_SUCCESS,
+    pubkey
+  }
+}
+
+export function disconnectFailure() {
+  return {
+    type: DISCONNECT_FAILURE
+  }
+}
+
+export function setPeerForm(form) {
   return {
     type: SET_PEER_FORM,
-    isOpen
+    form
   }
 }
 
@@ -46,11 +92,36 @@ export const fetchPeers = () => async (dispatch) => {
   dispatch(receivePeers(peers.data))
 }
 
+export const connectRequest = ({ pubkey, host }) => async (dispatch) => {
+  dispatch(connectPeer())
+  const success = await callApi('connect', 'post', { pubkey, host })
+  success.data ? dispatch(connectSuccess({ pub_key: pubkey, address: host, peer_id: success.data.peer_id })) : dispatch(connectFailure())
+
+  return success
+}
+
+export const disconnectRequest = ({ pubkey }) => async (dispatch) => {
+  dispatch(disconnectPeer())
+  const success = await callApi('disconnect', 'post', { pubkey })
+  console.log('success: ', success)
+  success ? dispatch(disconnectSuccess(pubkey)) : dispatch(disconnectFailure())
+
+  return success
+}
+
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [SET_PEER_FORM]: (state, { isOpen }) => ({ ...state, peerForm: { ...state.form, isOpen } }),
+  [DISCONNECT_PEER]: (state) => ({ ...state, disconnecting: true }),
+  [DISCONNECT_SUCCESS]: (state, { pubkey }) => ({ ...state, disconnecting: false, peers: state.peers.filter(peer => peer.pub_key !== pubkey) }),
+  [DISCONNECT_FAILURE]: (state) => ({ ...state, disconnecting: false }),
+
+  [CONNECT_PEER]: (state) => ({ ...state, connecting: true }),
+  [CONNECT_SUCCESS]: (state, { peer }) => ({ ...state, connecting: false, peers: [...state.peers, peer] }),
+  [CONNECT_FAILURE]: (state) => ({ ...state, connecting: false }),
+
+  [SET_PEER_FORM]: (state, { form }) => ({ ...state, peerForm: Object.assign({}, state.peerForm, form) }),
 
   [SET_PEER]: (state, { peer }) => ({ ...state, peer }),
 
@@ -77,13 +148,15 @@ const initialState = {
   peer: null,
   peerForm: {
     isOpen: false,
-    pub_key: '',
-    address: ''
-  }
+    pubkey: '',
+    host: ''
+  },
+  connecting: false,
+  disconnecting: false
 }
 
 export default function peersReducer(state = initialState, action) {
   const handler = ACTION_HANDLERS[action.type]
 
   return handler ? handler(state, action) : state
-}
+}

app/routes/wallet/components/Wallet.js

@@ -25,10 +25,11 @@ class Wallet extends Component {
       peerModalOpen,
       channelModalOpen,
       setPeerForm,
-      setChannelForm
+      setChannelForm,
+      connectRequest,
+      disconnectRequest
   	} = this.props
-    console.log('setPeerForm: ', setPeerForm)
-    console.log('setChannelForm: ', setChannelForm)
+
     return (
       <div className={styles.wallet}>
         <section className={styles.header}>
@@ -44,6 +45,8 @@ class Wallet extends Component {
             peerModalOpen={peerModalOpen}
             peerForm={peerForm}
             setPeerForm={setPeerForm}
+            connect={connectRequest}
+            disconnect={disconnectRequest}
           />
           <Channels
             channelsLoading={channelsLoading}

app/routes/wallet/components/components/Peers/Peers.js

@@ -16,19 +16,21 @@ class Peers extends Component {
         modalPeer,
         peerModalOpen,
         peerForm,
-        setPeerForm
+        setPeerForm,
+        connect,
+        disconnect,
     } = this.props
 
     return (
         <div className={styles.peers}>
-            <PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={modalPeer} />
-            <PeerForm form={peerForm} setForm={setPeerForm} />
+            <PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={modalPeer} disconnect={disconnect} />
+            <PeerForm form={peerForm} setForm={setPeerForm} connect={connect} />
             <div className={styles.header}>
                 <h3>Peers</h3>
                 <div
                     className={`${styles.connectPeer} hint--top`}
                     data-hint='Connect to a peer'
-                    onClick={() => setPeerForm(true)}
+                    onClick={() => setPeerForm({ isOpen: true })}
                 >
                     <TiPlus />  
                 </div>
@@ -46,5 +48,4 @@ class Peers extends Component {
   }
 }
 
-
-export default Peers
+export default Peers

app/routes/wallet/components/components/Peers/components/PeerForm/PeerForm.js

@@ -4,8 +4,23 @@ import ReactModal from 'react-modal'
 import styles from './PeerForm.scss'
 
 class PeerForm extends Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      pubkey: '02ef6248210e27b0f0df4d11d876e63f56e04bcb0054d0d8b6ba6a1a3e90dc56e1',
+      host: 'lnd-testnet-2.mably.com'
+    }
+  }
+
   render() {
-  	const customStyles = {
+    const submit = () => {
+      const { pubkey, host } = this.state
+      this.props.connect({ pubkey, host }).then(success => {
+        if (success.data) { setForm({ isOpen: false }) }
+      })
+    }
+
+    const customStyles = {
       overlay: {
         cursor: 'pointer',
         overflowY: 'auto'
@@ -21,7 +36,8 @@ class PeerForm extends Component {
       }
     }
     
-    const { form, setForm } = this.props
+    const { form, setForm, connect } = this.props
+    const { pubkey, host } = this.state
     return (
       <div>
         <ReactModal
@@ -29,7 +45,7 @@ class PeerForm extends Component {
           contentLabel="No Overlay Click Modal"
           ariaHideApp={true}
           shouldCloseOnOverlayClick={true}
-          onRequestClose={() => setForm(false)}
+          onRequestClose={() => setForm({ isOpen: false })}
           parentSelector={() => document.body}
           style={customStyles}
         >
@@ -42,6 +58,8 @@ class PeerForm extends Component {
                 type='text'
                 size=''
                 placeholder='Public key'
+                value={form.pubkey}
+                onChange={(event) => setForm({ pubkey: event.target.value })}
               />
             </section>
             <section className={styles.local}>
@@ -50,11 +68,13 @@ class PeerForm extends Component {
                 type='text'
                 size=''
                 placeholder='Host address'
+                value={form.host}
+                onChange={(event) => setForm({ host: event.target.value })}
               />
             </section>
             
             <div className={styles.buttonGroup}>
-              <div className={styles.button}>
+              <div className={styles.button} onClick={submit}>
                 Submit
               </div>
             </div>
@@ -65,5 +85,4 @@ class PeerForm extends Component {
   }
 }
 
-
-export default PeerForm
+export default PeerForm

app/routes/wallet/components/components/Peers/components/PeerModal/PeerModal.js

@@ -5,6 +5,13 @@ import styles from './PeerModal.scss'
 
 class PeerModal extends Component {
   render() {
+    const disconnectClicked = () => {
+      const { peer, disconnect } = this.props
+
+      disconnect({ pubkey: peer.pub_key })
+      .then(success => success ? resetPeer(null) : null)
+    }
+
     const customStyles = {
       overlay: {
         cursor: 'pointer',
@@ -21,8 +28,8 @@ class PeerModal extends Component {
       }
     }
     
-    const { isOpen, resetPeer, peer } = this.props
-    console.log('peer: ', peer)
+    const { isOpen, resetPeer, peer, disconnect } = this.props
+
     return (
       <ReactModal
         isOpen={isOpen}
@@ -53,7 +60,7 @@ class PeerModal extends Component {
                   <dd>{peer.bytes_sent}</dd>
                 </dl>
               </div>
-              <div className={styles.close}>
+              <div className={styles.close} onClick={disconnectClicked}>
                 <div>Disconnect peer</div>
               </div>
             </div>

app/routes/wallet/containers/WalletContainer.js

@@ -4,7 +4,9 @@ import {
 	fetchPeers,
 	setPeer,
 	peersSelectors,
-	setPeerForm
+	setPeerForm,
+	connectRequest,
+	disconnectRequest
 } from '../../../reducers/peers'
 import {
 	fetchChannels,
@@ -19,6 +21,8 @@ const mapDispatchToProps = {
 	
 	fetchPeers,
 	setPeer,
+	connectRequest,
+	disconnectRequest,
 	
 	fetchChannels,
 	setChannel,