fix(wallet): refetch fiat tickers when forms open

Refetch fiat ticker data every time one of our payment forms are open
in order to help ensure that conversion rates are up to date. Covers
the Pay, Request and CreateChannel forms.

Fix #1953

renderer/components/Channels/ChannelCreateForm.js

@@ -88,6 +88,7 @@ class ChannelCreateForm extends React.Component {
     }).isRequired,
     currency: PropTypes.string.isRequired,
     currencyName: PropTypes.string.isRequired,
+    fetchTickers: PropTypes.func.isRequired,
     intl: intlShape.isRequired,
     isQueryingFees: PropTypes.bool,
     onchainFees: PropTypes.shape({
@@ -110,7 +111,8 @@ class ChannelCreateForm extends React.Component {
   }
 
   componentDidMount() {
-    const { queryFees } = this.props
+    const { fetchTickers, queryFees } = this.props
+    fetchTickers()
     queryFees()
   }
 

renderer/components/Pay/Pay.js

@@ -77,6 +77,8 @@ class Pay extends React.Component {
     cryptoCurrencyTicker: PropTypes.string.isRequired,
     /** Ticker symbol of the currently selected cryptocurrency. */
     cryptoName: PropTypes.string.isRequired,
+    /** Fetch fiat ticker data. */
+    fetchTickers: PropTypes.func.isRequired,
     /** Amount value to populate the amountCrypto field with when the form first loads. */
     initialAmountCrypto: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /** Amount value to populate the amountFiat field with when the form first loads. */
@@ -134,10 +136,11 @@ class Pay extends React.Component {
 
   // Set a flag so that we can trigger form submission in componentDidUpdate once the form is loaded.
   componentDidMount() {
-    const { payReq, queryFees } = this.props
+    const { fetchTickers, payReq, queryFees } = this.props
     if (payReq) {
       this.setState({ isPayReqSetOnMount: true })
     }
+    fetchTickers()
     queryFees()
   }
 

renderer/components/Request/Request.js

@@ -25,6 +25,8 @@ class Request extends React.Component {
     cryptoCurrencyTicker: PropTypes.string.isRequired,
     /** Boolean indicating wether the form is being processed. If true, form buttons are disabled. */
     cryptoName: PropTypes.string.isRequired,
+    /** Fetch fiat ticker data. */
+    fetchTickers: PropTypes.func.isRequired,
     /** Lnd invoice object for the payment request */
     intl: intlShape.isRequired,
     /** Lightning Payment request. */
@@ -44,6 +46,8 @@ class Request extends React.Component {
   amountInput = React.createRef()
 
   componentDidMount() {
+    const { fetchTickers } = this.props
+    fetchTickers()
     this.focusAmountInput()
   }
 

renderer/containers/Channels/ChannelCreateForm.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux'
 import ChannelCreateForm from 'components/Channels/ChannelCreateForm'
-import { tickerSelectors } from 'reducers/ticker'
+import { fetchTickers, tickerSelectors } from 'reducers/ticker'
 import { openChannel } from 'reducers/channels'
 import { queryFees } from 'reducers/pay'
 import { balanceSelectors } from 'reducers/balance'
@@ -20,6 +20,7 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = {
+  fetchTickers,
   openChannel,
   queryFees,
   updateContactFormSearchQuery,

renderer/containers/Pay.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux'
 import { Pay } from 'components/Pay'
-import { tickerSelectors } from 'reducers/ticker'
+import { fetchTickers, tickerSelectors } from 'reducers/ticker'
 import { setPayReq, queryFees, queryRoutes } from 'reducers/pay'
 import { changeFilter } from 'reducers/activity'
 import { sendCoins } from 'reducers/transaction'
@@ -24,6 +24,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = {
   changeFilter,
   closeModal,
+  fetchTickers,
   payInvoice,
   setPayReq,
   sendCoins,

renderer/containers/Request.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux'
 import { Request } from 'components/Request'
-import { tickerSelectors } from 'reducers/ticker'
+import { fetchTickers, tickerSelectors } from 'reducers/ticker'
 import { createInvoice, invoiceSelectors } from 'reducers/invoice'
 import { showNotification } from 'reducers/notification'
 
@@ -15,6 +15,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = {
   createInvoice,
+  fetchTickers,
   showNotification,
 }