feature(payform): add loading selector and render loading bolt if true

app/components/Form/PayForm.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 import { FaBolt, FaChain } from 'react-icons/lib/fa'
+import LoadingBolt from 'components/LoadingBolt'
 import CurrencyIcon from 'components/CurrencyIcon'
 
 import styles from './PayForm.scss'
@@ -28,6 +29,7 @@ class PayForm extends Component {
       isLn,
       currentAmount,
       inputCaption,
+      showPayLoadingScreen,
 
       setPayAmount,
       setPayInput,
@@ -37,6 +39,7 @@ class PayForm extends Component {
 
     return (
       <div className={styles.container}>
+        {showPayLoadingScreen && <LoadingBolt />}
         <section className={`${styles.amountContainer} ${isLn ? styles.ln : ''}`}>
           <label htmlFor='amount'>
             <CurrencyIcon currency={currency} crypto={crypto} />

app/reducers/payform.js

@@ -71,6 +71,14 @@ const payFormSelectors = {}
 const payAmountSelector = state => state.payform.amount
 const payInputSelector = state => state.payform.payInput
 const payInvoiceSelector = state => state.payform.invoice
+
+// transaction
+const sendingTransactionSelector = state => state.transaction.sendingTransaction
+
+// transaction
+const sendingPaymentSelector = state => state.payment.sendingPayment
+
+// ticker
 const currencySelector = state => state.ticker.currency
 
 payFormSelectors.isOnchain = createSelector(
@@ -125,6 +133,13 @@ payFormSelectors.inputCaption = createSelector(
   }
 )
 
+payFormSelectors.showPayLoadingScreen = createSelector(
+  sendingTransactionSelector,
+  sendingPaymentSelector,
+  (sendingTransaction, sendingPayment) => sendingTransaction || sendingPayment
+
+)
+
 export { payFormSelectors }
 
 // ------------------------------------

app/reducers/transaction.js

@@ -1,7 +1,7 @@
 import { ipcRenderer } from 'electron'
 import { showNotification } from '../notifications'
 import { btc, usd } from '../utils'
-import { setForm, setFormType, resetForm } from './form'
+import { setFormType, resetForm } from './form'
 import { showModal } from './modal'
 
 // ------------------------------------

app/routes/app/containers/AppContainer.js

@@ -68,6 +68,7 @@ const mapStateToProps = state => ({
   isLn: payFormSelectors.isLn(state),
   currentAmount: payFormSelectors.currentAmount(state),
   inputCaption: payFormSelectors.inputCaption(state),
+  showPayLoadingScreen: payFormSelectors.showPayLoadingScreen(state)
 })
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
@@ -80,6 +81,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     isLn: stateProps.isLn,
     currentAmount: stateProps.currentAmount,
     inputCaption: stateProps.inputCaption,
+    showPayLoadingScreen: stateProps.showPayLoadingScreen,
 
     setPayAmount: dispatchProps.setPayAmount,
     setPayInput: dispatchProps.setPayInput,