fix(%): move % logic inot selector

app/components/LndSyncing/LndSyncing.js

@@ -32,19 +32,15 @@ class LndSyncing extends Component {
   }
 
   render() {
-    const {
-      lnd: { fetchingBlockHeight, blockHeight, lndBlockHeight }
-    } = this.props
+    const { fetchingBlockHeight, syncPercentage } = 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}>
-          {!fetchingBlockHeight && <h4>{Math.floor((lndBlockHeight / blockHeight) * 100)}%</h4>}
+          {!fetchingBlockHeight && <h4>{1}%</h4>}
           <div className={styles.spinner}>
           </div>
           <h1>syncing your lightning node to the blockchain</h1>

app/reducers/lnd.js

@@ -1,3 +1,4 @@
+import { createSelector } from 'reselect'
 import { fetchTicker } from './ticker'
 import { fetchBalance } from './balance'
 import { fetchInfo } from './info'
@@ -80,6 +81,21 @@ const initialState = {
   lndBlockHeight: 0
 }
 
+// ------------------------------------
+// Reducer
+// ------------------------------------
+const lndSelectors = {}
+const blockHeightSelector = state => state.lnd.blockHeight
+const lndBlockHeightSelector = state => state.lnd.lndBlockHeight
+
+lndSelectors.syncPercentage = createSelector(
+  blockHeightSelector,
+  lndBlockHeightSelector,
+  (blockHeight, lndBlockHeight) => (Math.floor((lndBlockHeight / blockHeight) * 100))
+)
+
+export { lndSelectors }
+
 export default function lndReducer(state = initialState, action) {
   const handler = ACTION_HANDLERS[action.type]
 

app/routes/app/components/App.js

@@ -25,6 +25,7 @@ class App extends Component {
   render() {
     const {
       lnd,
+      syncPercentage,
       fetchBlockHeight,
 
       modal: { modalType, modalProps },
@@ -43,7 +44,16 @@ class App extends Component {
       children
     } = this.props
 
-    if (lnd.syncing) {return <LndSyncing fetchBlockHeight={fetchBlockHeight} lnd={lnd} /> }
+    if (lnd.syncing) {
+      return (
+        <LndSyncing
+          fetchBlockHeight={fetchBlockHeight}
+          fetchingBlockHeight={lnd.fetchingBlockHeight}
+          syncPercentage={syncPercentage}
+        />
+      ) 
+    }
+
     if (!currentTicker) { return <LoadingBolt /> }
 
     return (

app/routes/app/containers/AppContainer.js

@@ -15,7 +15,7 @@ import { sendCoins } from 'reducers/transaction'
 import { payInvoice } from 'reducers/payment'
 import { createInvoice, fetchInvoice } from 'reducers/invoice'
 
-import { fetchBlockHeight } from 'reducers/lnd'
+import { fetchBlockHeight, lndSelectors } from 'reducers/lnd'
 
 
 import App from '../components/App'
@@ -69,7 +69,8 @@ const mapStateToProps = state => ({
   currentAmount: payFormSelectors.currentAmount(state),
   inputCaption: payFormSelectors.inputCaption(state),
   showPayLoadingScreen: payFormSelectors.showPayLoadingScreen(state),
-  payFormIsValid: payFormSelectors.payFormIsValid(state)
+  payFormIsValid: payFormSelectors.payFormIsValid(state),
+  syncPercentage: lndSelectors.syncPercentage(state)
 })
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {