From 8281216170f39568a383dc3d966eaea3dc6b06e0 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Fri, 29 Sep 2017 18:51:44 -0500
Subject: [PATCH] feature(payform): add loading selector and render loading
 bolt if true

---
 app/components/Form/PayForm.js            |  3 +++
 app/reducers/payform.js                   | 15 +++++++++++++++
 app/reducers/transaction.js               |  2 +-
 app/routes/app/containers/AppContainer.js |  2 ++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/components/Form/PayForm.js b/app/components/Form/PayForm.js
index 016cb702..ef10e966 100644
--- a/app/components/Form/PayForm.js
+++ b/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} />
diff --git a/app/reducers/payform.js b/app/reducers/payform.js
index f4f2dd78..bd66eb01 100644
--- a/app/reducers/payform.js
+++ b/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 }
 
 // ------------------------------------
diff --git a/app/reducers/transaction.js b/app/reducers/transaction.js
index 6b608fc4..ebf6b9b6 100644
--- a/app/reducers/transaction.js
+++ b/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'
 
 // ------------------------------------
diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js
index 0366261d..fcd32f42 100644
--- a/app/routes/app/containers/AppContainer.js
+++ b/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,