feature(%): lnd syncing shows progress %

app/api/index.js

@@ -14,3 +14,14 @@ export function requestTickers(ids) {
   return axios.all(ids.map(id => requestTicker(id)))
     .then(axios.spread((btcTicker, ltcTicker) => ({ btcTicker: btcTicker[0], ltcTicker: ltcTicker[0] })))
 }
+
+
+export function requestBlockHeight(id) {
+  const BASE_URL = `https://testnet-api.smartbit.com.au/v1/blockchain/blocks?limit=1`
+  return axios({
+    method: 'get',
+    url: BASE_URL
+  })
+    .then(response => response.data)
+    .catch(error => error)
+}

app/components/LndSyncing/LndSyncing.js

@@ -27,15 +27,26 @@ class LndSyncing extends Component {
     }
   }
 
+  componentWillMount() {
+    this.props.fetchBlockHeight()
+  }
+
   render() {
+    const {
+      lnd: { fetchingBlockHeight, blockHeight, lndBlockHeight }
+    } = this.props
     const { facts, currentFact } = this.state
     const renderCurrentFact = facts[currentFact]
 
+    console.log('PROPS: ', this.props)
+
     return (
       <div className={styles.container}>
         <h3>zap</h3>
         <div className={styles.loading}>
-          <div className={styles.spinner}></div>
+          {!fetchingBlockHeight && <h4>{Math.floor((lndBlockHeight / blockHeight) * 100)}%</h4>}
+          <div className={styles.spinner}>
+          </div>
           <h1>syncing your lightning node to the blockchain</h1>
         </div>
         <div className={styles.facts}>

app/components/LndSyncing/LndSyncing.scss

@@ -11,6 +11,14 @@
   .loading {
     text-align: center;
     margin-top: 100px;
+    position: relative;
+
+    h4 {
+      position: absolute;
+      min-width: 100px;
+      top: calc(50% - 30px);
+      left: calc(50% - 50px);
+    }
 
     h1 {
       margin-top: 25px;

app/main.dev.js

@@ -116,9 +116,8 @@ app.on('ready', async () => {
       
       // After the certs are generated, it's time to start LND
       console.log('STARTING LND')
-      console.log('BINARY: ', path.join(__dirname, 'bin', 'darwin', 'lnd'))
-      neutrino = spawn(
-        `${path.join(__dirname, 'bin', 'darwin', 'lnd')}`,
+      const lndPath = path.join(__dirname, '..', 'resources', 'binaries', 'darwin', 'lnd')
+      neutrino = spawn(lndPath,
         [
           '--bitcoin.active',
           '--bitcoin.testnet',
@@ -141,8 +140,13 @@ app.on('ready', async () => {
         let line = data.toString('utf8')
         console.log(line)
 
-        // Pass line to front end for loading state UX
-        // mainWindow.webContents.send('lndStdout', line)
+        // Pass current clock height progress to front end for loading state UX
+        if (line.includes('Difficulty retarget at block height')) {
+          console.log('LINELINE LINE: ', line)
+          const blockHeight = line.slice(line.indexOf('Difficulty retarget at block height') + 'Difficulty retarget at block height'.length).trim()
+          console.log('BLOCKHEIGHT: ', blockHeight)
+          mainWindow.webContents.send('lndStdout', blockHeight)
+        }
         // 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
@@ -150,16 +154,10 @@ app.on('ready', async () => {
           // Call lnd
           lnd((lndSubscribe, lndMethods) => {
             // Subscribe to bi-directional streams
-            console.log('lndSubscribe: ', lndSubscribe)
-            console.log('lndMethods: ', lndMethods)
-            console.log('mainWindow: ', mainWindow)
             lndSubscribe(mainWindow)
 
             // Listen for all gRPC restful methods
             ipcMain.on('lnd', (event, { msg, data }) => {
-              console.log('yoooooo!!!!!!')
-              console.log('msg: ', msg)
-              console.log('data: ', data)
               lndMethods(event, msg, data)
             })
 

app/package.json

@@ -16,6 +16,7 @@
   "license": "MIT",
   "dependencies": {
     "grpc": "^1.6.6",
+    "ps-node": "^0.1.6",
     "react-icons": "^2.2.5"
   },
   "devDependencies": {

app/reducers/lnd.js

@@ -1,6 +1,7 @@
 import { fetchTicker } from './ticker'
 import { fetchBalance } from './balance'
 import { fetchInfo } from './info'
+import { requestBlockHeight } from '../api'
 // ------------------------------------
 // Constants
 // ------------------------------------
@@ -9,6 +10,9 @@ export const STOP_SYNCING = 'STOP_SYNCING'
 
 export const RECEIVE_LINE = 'RECEIVE_LINE'
 
+export const GET_BLOCK_HEIGHT = 'GET_BLOCK_HEIGHT'
+export const RECEIVE_BLOCK_HEIGHT = 'RECEIVE_BLOCK_HEIGHT'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -27,7 +31,30 @@ export const lndSynced = () => dispatch => {
 }
 
 // Receive IPC event for LND streaming a line
-export const lndStdout = (event, line) => dispatch => dispatch({ type: RECEIVE_LINE, line })
+export const lndStdout = (event, lndBlockHeight) => dispatch => {
+  dispatch({ type: RECEIVE_LINE, lndBlockHeight: lndBlockHeight.split(' ')[0].split(/(\r\n|\n|\r)/gm)[0] })
+}
+
+export function getBlockHeight() {
+  return {
+    type: GET_BLOCK_HEIGHT
+  }
+}
+
+export function receiveBlockHeight(blockHeight) {
+  return {
+    type: RECEIVE_BLOCK_HEIGHT,
+    blockHeight
+  }
+}
+
+// Fetch current block height
+export const fetchBlockHeight = () => async (dispatch) => {
+  dispatch(getBlockHeight())
+  const blockData = await requestBlockHeight()
+  console.log('blockHeight: ', blockData.blocks[0].height)
+  dispatch(receiveBlockHeight(blockData.blocks[0].height))
+}
 
 // ------------------------------------
 // Action Handlers
@@ -36,7 +63,10 @@ const ACTION_HANDLERS = {
   [START_SYNCING]: state => ({ ...state, syncing: true }),
   [STOP_SYNCING]: state => ({ ...state, syncing: false }),
   
-  [RECEIVE_LINE]: (state, { line }) => ({ ...state, lines: [...state.lines, line] }),
+  [RECEIVE_LINE]: (state, { lndBlockHeight }) => ({ ...state, lndBlockHeight }),
+  
+  [GET_BLOCK_HEIGHT]: state => ({ ...state, fetchingBlockHeight: true }),
+  [RECEIVE_BLOCK_HEIGHT]: (state, { blockHeight }) => ({ ...state, blockHeight, fetchingBlockHeight: false }),
 }
 
 // ------------------------------------
@@ -44,7 +74,10 @@ const ACTION_HANDLERS = {
 // ------------------------------------
 const initialState = {
   syncing: false,
-  lines: []
+  fetchingBlockHeight: false,
+  lines: [],
+  blockHeight: 0,
+  lndBlockHeight: 0
 }
 
 export default function lndReducer(state = initialState, action) {

app/routes/app/components/App.js

@@ -11,6 +11,10 @@ class App extends Component {
   componentWillMount() {
     const { fetchTicker, fetchBalance, fetchInfo, lnd: { syncing } } = this.props
 
+    if (syncing) {
+      fetchBlockHeight()
+    }
+
     if (!syncing) {
       fetchTicker()
       fetchBalance()
@@ -21,6 +25,7 @@ class App extends Component {
   render() {
     const {
       lnd,
+      fetchBlockHeight,
 
       modal: { modalType, modalProps },
       hideModal,
@@ -38,7 +43,7 @@ class App extends Component {
       children
     } = this.props
 
-    if (lnd.syncing) { return <LndSyncing /> }
+    if (lnd.syncing) {return <LndSyncing fetchBlockHeight={fetchBlockHeight} lnd={lnd} /> }
     if (!currentTicker) { return <LoadingBolt /> }
 
     return (

app/routes/app/containers/AppContainer.js

@@ -15,6 +15,8 @@ import { sendCoins } from 'reducers/transaction'
 import { payInvoice } from 'reducers/payment'
 import { createInvoice, fetchInvoice } from 'reducers/invoice'
 
+import { fetchBlockHeight } from 'reducers/lnd'
+
 
 import App from '../components/App'
 
@@ -41,7 +43,9 @@ const mapDispatchToProps = {
   sendCoins,
   payInvoice,
   createInvoice,
-  fetchInvoice
+  fetchInvoice,
+
+  fetchBlockHeight
 }
 
 const mapStateToProps = state => ({

app/store/configureStore.dev.js

@@ -43,7 +43,6 @@ const configureStore = (initialState?: counterStateType) => {
 
   // Apply Middleware & Compose Enhancers
   enhancers.push(applyMiddleware(...middleware, ipc));
-  console.log('ENHANCERS: ', enhancers)
   const enhancer = composeEnhancers(...enhancers);
 
   // Create Store

app/yarn.lock

@@ -201,6 +201,10 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
+connected-domain@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/connected-domain/-/connected-domain-1.0.0.tgz#bfe77238c74be453a79f0cb6058deeb4f2358e93"
+
 console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
@@ -896,6 +900,12 @@ protobufjs@^5.0.2:
     glob "^7.0.5"
     yargs "^3.10.0"
 
+ps-node@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/ps-node/-/ps-node-0.1.6.tgz#9af67a99d7b1d0132e51a503099d38a8d2ace2c3"
+  dependencies:
+    table-parser "^0.1.3"
+
 punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
@@ -1151,6 +1161,12 @@ symbol-observable@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
 
+table-parser@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/table-parser/-/table-parser-0.1.3.tgz#0441cfce16a59481684c27d1b5a67ff15a43c7b0"
+  dependencies:
+    connected-domain "^1.0.0"
+
 tar-pack@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"

package.json

@@ -37,6 +37,7 @@
     "files": [
       "dist/",
       "node_modules/",
+      "resources/",
       "app.html",
       "main.prod.js",
       "main.prod.js.map",
@@ -78,7 +79,7 @@
     "type": "git",
     "url": "git+https://github.com/LN-Zap/zap-desktop"
   },
-  "author": "Jack Mallers <jimmymowschess@gmail.com> (https://github.com/chentsulin)",
+  "author": "Jack Mallers <jimmymowschess@gmail.com> (https://github.com/jackmallers)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/LN-Zap/zap-desktop/issues"
@@ -196,7 +197,6 @@
     "lodash": "^4.17.4",
     "moment-timezone": "^0.5.13",
     "prop-types": "^15.5.10",
-    "ps-node": "^0.1.6",
     "qrcode.react": "^0.7.1",
     "react": "^15.6.1",
     "react-addons-css-transition-group": "^15.6.0",