feature(lndSyncing): MVP for loading component while LND is syncing

app/components/LndSyncing/LndSyncing.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import styles from './LndSyncing.scss'
+
+const LndSyncing = ({ lines }) => (
+  <div className={styles.container}>
+    <h3>zap</h3>
+    <div className={styles.loading}>
+      <div className={styles.spinner}></div>
+      <h1>syncing your lightning node to the blockchain</h1>
+    </div>
+  </div>
+)
+
+export default LndSyncing

app/components/LndSyncing/LndSyncing.scss

@@ -0,0 +1,61 @@
+@import '../../variables.scss';
+
+.container {
+  height: 100vh;
+  padding: 100px;
+
+  h3 {
+    font-size: 50px;
+  }
+
+  .loading {
+    text-align: center;
+    margin-top: 100px;
+
+    h1 {
+      margin-top: 25px;
+    }
+  }
+}
+
+.spinner {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-left-color: rgba(0, 0, 0, 0.4);
+  -webkit-border-radius: 999px;
+  -moz-border-radius: 999px;
+  border-radius: 999px;
+}
+
+.spinner {
+  margin: 0 auto;
+  height: 100px;
+  width: 100px;
+  -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;
+}
+
+@-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/LndSyncing/index.js

@@ -0,0 +1,3 @@
+import LndSyncing from './LndSyncing'
+
+export default LndSyncing

app/main.dev.js

@@ -22,6 +22,7 @@ import lnd from './lnd'
 
 let mainWindow = null
 let neutrino = null
+let syncing = false
 
 
 if (process.env.NODE_ENV === 'production') {
@@ -84,22 +85,23 @@ app.on('ready', async () => {
   //        https://github.com/electron/electron/blob/master/docs/api/browser-window.md#using-ready-to-show-event
   mainWindow.webContents.on('did-finish-load', () => {
     if (!mainWindow) {
-      throw new Error('"mainWindow" is not defined');
+      throw new Error('"mainWindow" is not defined')
     }
     
-    mainWindow.show();
+    mainWindow.show()
-    mainWindow.focus();
+    mainWindow.focus()
-  });
+
+    if (syncing) {
+      mainWindow.webContents.send('lndSyncing')
+    }
+  })
 
   mainWindow.on('closed', () => {
     mainWindow = null;
-  });
+  })
 
   const menuBuilder = new MenuBuilder(mainWindow);
-  menuBuilder.buildMenu();
+  menuBuilder.buildMenu()
-
-  // Where we will store the neutrino process if need be
-  let neutrino = null
 
   // Check to see if and LND process is running
   lookup({ command: 'lnd' }, (err, results) => {
@@ -128,12 +130,17 @@ app.on('ready', async () => {
       )
         .on('close', code => console.log(`lnd shutting down ${code}`))
 
+      // Let the front end know we have started syncing LND
+      syncing = true
+
       // Listen for when neutrino prints out data
       neutrino.stdout.on('data', data => {
         // Data stored in variable line, log line to the console
         let line = data.toString('utf8')
         console.log(line)
 
+        // Pass line to front end for loading state UX
+        // mainWindow.webContents.send('lndStdout', line)
         // When LND is all caught up to the blockchain
         if (line.includes('Done catching up block hashes')) {
           // Log that LND is caught up to the current block height
@@ -147,6 +154,10 @@ app.on('ready', async () => {
             ipcMain.on('lnd', (event, { msg, data }) => {
               lndMethods(event, msg, data)
             })
+
+            // Let the front end know we have stopped syncing LND
+            syncing = false
+            mainWindow.webContents.send('lndSynced')
           })
         }
       })
@@ -165,18 +176,4 @@ app.on('ready', async () => {
       })
     }
   })
-  
+})
-  // let neutrino = null
-  // spawn('lnd')
-  // lnd func
-  // const lnd = lnd((lndSubscribe, lndMethods) => {
-  // })
-  // Subscribe to LND events
-
-  // lndSubscribe(mainWindow)
-
-  // // LND CRUD methods
-  // ipcMain.on('lnd', (event, { msg, data }) => {
-  //   lndMethods(event, msg, data)
-  // })
-});

app/reducers/index.js

@@ -1,6 +1,7 @@
 // @flow
 import { combineReducers } from 'redux'
 import { routerReducer as router } from 'react-router-redux'
+import lnd from './lnd'
 import ticker from './ticker'
 import info from './info'
 import balance from './balance'
@@ -20,6 +21,7 @@ import activity from './activity'
 
 const rootReducer = combineReducers({
   router,
+  lnd,
   ticker,
   info,
   balance,

app/reducers/ipc.js

@@ -1,4 +1,5 @@
 import createIpc from 'redux-electron-ipc'
+import { lndSyncing, lndSynced, lndStdout } from './lnd'
 import { receiveInfo } from './info'
 import { receiveAddress } from './address'
 import { receiveCryptocurrency } from './ticker'
@@ -31,6 +32,10 @@ import {
 
 // Import all receiving IPC event handlers and pass them into createIpc
 const ipc = createIpc({
+  lndSyncing,
+  lndSynced,
+  lndStdout,
+  
   receiveInfo,
 
   receivePeers,

app/reducers/lnd.js

@@ -0,0 +1,54 @@
+import { fetchTicker } from './ticker'
+import { fetchBalance } from './balance'
+import { fetchInfo } from './info'
+// ------------------------------------
+// Constants
+// ------------------------------------
+export const START_SYNCING = 'START_SYNCING'
+export const STOP_SYNCING = 'STOP_SYNCING'
+
+export const RECEIVE_LINE = 'RECEIVE_LINE'
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+
+// Receive IPC event for LND starting its syncing process
+export const lndSyncing = () => dispatch => dispatch({ type: START_SYNCING })
+
+// Receive IPC event for LND stoping sync
+export const lndSynced = () => dispatch => {
+  // Fetch data now that we know LND is synced
+  fetchTicker()
+  fetchBalance()
+  fetchInfo()
+
+  dispatch({ type: STOP_SYNCING })
+}
+
+// Receive IPC event for LND streaming a line
+export const lndStdout = (event, line) => dispatch => dispatch({ type: RECEIVE_LINE, line })
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+  [START_SYNCING]: state => ({ ...state, syncing: true }),
+  [STOP_SYNCING]: state => ({ ...state, syncing: false }),
+  
+  [RECEIVE_LINE]: (state, { line }) => ({ ...state, lines: [...state.lines, line] }),
+}
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+const initialState = {
+  syncing: false,
+  lines: []
+}
+
+export default function lndReducer(state = initialState, action) {
+  const handler = ACTION_HANDLERS[action.type]
+
+  return handler ? handler(state, action) : state
+}

app/routes/app/components/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import LndSyncing from 'components/LndSyncing'
 import LoadingBolt from 'components/LoadingBolt'
 import Form from 'components/Form'
 import ModalRoot from 'components/ModalRoot'
@@ -8,15 +9,19 @@ import styles from './App.scss'
 
 class App extends Component {
   componentWillMount() {
-    const { fetchTicker, fetchBalance, fetchInfo } = this.props
+    const { fetchTicker, fetchBalance, fetchInfo, lnd: { syncing } } = this.props
 
-    fetchTicker()
+    if (!syncing) {
-    fetchBalance()
+      fetchTicker()
-    fetchInfo()
+      fetchBalance()
+      fetchInfo()
+    }
   }
 
   render() {
     const {
+      lnd,
+
       modal: { modalType, modalProps },
       hideModal,
       ticker,
@@ -33,6 +38,9 @@ class App extends Component {
       children
     } = this.props
 
+    // if (lnd.syncing) { return <LndSyncing lines={lnd.lines} /> }
+    if (true) { return <LndSyncing lines={[]} /> }
+
     if (!currentTicker) { return <LoadingBolt /> }
 
     return (

app/routes/app/containers/AppContainer.js

@@ -44,6 +44,8 @@ const mapDispatchToProps = {
 }
 
 const mapStateToProps = state => ({
+  lnd: state.lnd,
+
   ticker: state.ticker,
   balance: state.balance,
   payment: state.payment,

gang.txt

@@ -1 +1,11 @@
 
+
+
+
+
+
+
+
+
+
+