- {!fetchingBlockHeight &&
{Math.floor((lndBlockHeight / blockHeight) * 100)}%
}
+ {!fetchingBlockHeight &&
{1}%
}
syncing your lightning node to the blockchain
diff --git a/app/reducers/lnd.js b/app/reducers/lnd.js
index 2a0cecdf..776985e7 100644
--- a/app/reducers/lnd.js
+++ b/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]
diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js
index f6bce51c..837bba83 100644
--- a/app/routes/app/components/App.js
+++ b/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
}
+ if (lnd.syncing) {
+ return (
+
+ )
+ }
+
if (!currentTicker) { return
}
return (
diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js
index 743710ac..185070ca 100644
--- a/app/routes/app/containers/AppContainer.js
+++ b/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) => {