Merge pull request #3687 from mrfelton/feat/probe-route

Show payment route on probe summary

renderer/components/Activity/PaymentModal/Htlc.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Flex } from 'rebass/styled-components'
+import { useIntl } from 'react-intl'
+import { CoinBig } from '@zap/utils/coin'
+import { getDisplayNodeName } from 'reducers/payment/utils'
+import { Truncate } from 'components/Util'
+import { Text } from 'components/UI'
+import { CryptoSelector, CryptoValue } from 'containers/UI'
+import ArrowRight from 'components/Icon/ArrowRight'
+import messages from './messages'
+
+const HtlcHops = ({ hops, ...rest }) => {
+  const { formatMessage, formatNumber } = useIntl()
+  return (
+    <Flex {...rest} flexDirection="column">
+      {hops.map(hop => {
+        const displayName = getDisplayNodeName(hop)
+        const hasFee = CoinBig(hop.feeMsat).gt(0)
+        return (
+          <Flex
+            key={hop.pubKey}
+            alignItems="center"
+            className="hint--top-left"
+            data-hint={formatMessage(
+              { ...messages[hasFee ? 'htlc_hop_fee' : 'htlc_hop_no_fee'] },
+              { hopFee: formatNumber(hop.feeMsat), cryptoUnitName: 'msat' }
+            )}
+            justifyContent="flex-end"
+            my={1}
+          >
+            <Flex alignItems="center" color="gray" mx={2}>
+              <ArrowRight />
+            </Flex>
+            <Truncate maxlen={50} text={displayName} />
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}
+
+HtlcHops.propTypes = {
+  hops: PropTypes.array.isRequired,
+}
+
+const Htlc = ({ route, isAmountVisible = true, ...rest }) => {
+  const amountExcludingFees = CoinBig(route.totalAmt)
+    .minus(route.totalFees)
+    .toString()
+  return (
+    <Flex alignItems="center" justifyContent="space-between" {...rest}>
+      {isAmountVisible && (
+        <Text fontWeight="normal">
+          <CryptoValue value={amountExcludingFees} />
+          <CryptoSelector ml={2} />
+        </Text>
+      )}
+      <HtlcHops hops={route.hops} />
+    </Flex>
+  )
+}
+
+Htlc.propTypes = {
+  isAmountVisible: PropTypes.bool,
+  route: PropTypes.object.isRequired,
+}
+
+export default Htlc

renderer/components/Activity/PaymentModal/PaymentModal.js

@@ -22,8 +22,6 @@ class PaymentModal extends React.PureComponent {
     const { item, intl, ...rest } = this.props
     const memo = item && getTag(item.paymentRequest, 'description')
     const htlcs = item.htlcs.filter(htlc => htlc.status === 'SUCCEEDED')
-    const isMpp = htlcs.length > 1
-    const isRouted = htlcs.filter(htlc => htlc.route.hops.length > 1).length > 0
 
     return (
       <Panel {...rest}>
@@ -111,16 +109,12 @@ class PaymentModal extends React.PureComponent {
             }
           />
 
-          {(isMpp || isRouted) && (
-            <>
-              <Bar variant="light" />
+          <Bar variant="light" />
 
-              <DataRow
-                left={<FormattedMessage {...messages.htlc_title} />}
-                right={<Route htlcs={htlcs} />}
-              />
-            </>
-          )}
+          <DataRow
+            left={<FormattedMessage {...messages.htlc_title} />}
+            right={<Route htlcs={htlcs} />}
+          />
         </Panel.Body>
       </Panel>
     )

renderer/components/Activity/PaymentModal/Route.js

@@ -1,70 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Box, Flex } from 'rebass/styled-components'
-import { useIntl } from 'react-intl'
-import { CoinBig } from '@zap/utils/coin'
-import { getDisplayNodeName } from 'reducers/payment/utils'
-import { Truncate } from 'components/Util'
-import { CryptoSelector, CryptoValue } from 'containers/UI'
-import { Bar, Text } from 'components/UI'
-import ArrowRight from 'components/Icon/ArrowRight'
-import messages from './messages'
-
-const HtlcHops = ({ hops, ...rest }) => {
-  const { formatMessage, formatNumber } = useIntl()
-  return (
-    <Flex {...rest} flexDirection="column">
-      {hops.map(hop => {
-        const displayName = getDisplayNodeName(hop)
-        const hasFee = CoinBig(hop.feeMsat).gt(0)
-        return (
-          <Flex
-            key={hop.pubKey}
-            alignItems="center"
-            className="hint--top-left"
-            data-hint={formatMessage(
-              { ...messages[hasFee ? 'htlc_hop_fee' : 'htlc_hop_no_fee'] },
-              { hopFee: formatNumber(hop.feeMsat), cryptoUnitName: 'msat' }
-            )}
-            justifyContent="flex-end"
-            my={1}
-          >
-            <Flex alignItems="center" color="gray" mx={2}>
-              <ArrowRight />
-            </Flex>
-            <Truncate maxlen={50} text={displayName} />
-          </Flex>
-        )
-      })}
-    </Flex>
-  )
-}
-
-HtlcHops.propTypes = {
-  hops: PropTypes.array.isRequired,
-}
-
-const Htlc = ({ htlc, isAmountVisible = true, ...rest }) => {
-  const amountExcludingFees = CoinBig(htlc.route.totalAmt)
-    .minus(htlc.route.totalFees)
-    .toString()
-  return (
-    <Flex alignItems="center" justifyContent="space-between" {...rest}>
-      {isAmountVisible && (
-        <Text fontWeight="normal">
-          <CryptoValue value={amountExcludingFees} />
-          <CryptoSelector ml={2} />
-        </Text>
-      )}
-      <HtlcHops hops={htlc.route.hops} />
-    </Flex>
-  )
-}
-
-Htlc.propTypes = {
-  htlc: PropTypes.object.isRequired,
-  isAmountVisible: PropTypes.bool.isRequired,
-}
+import { Box } from 'rebass/styled-components'
+import { Bar } from 'components/UI'
+import Htlc from './Htlc'
 
 const Route = ({ htlcs, ...rest }) => {
   return (
@@ -75,7 +13,7 @@ const Route = ({ htlcs, ...rest }) => {
         return (
           <React.Fragment key={htlc.attemptTimeNs + htlc.resolveTimeNs}>
             {!isFirst && <Bar my={2} opacity={0.2} variant="light" />}
-            <Htlc htlc={htlc} isAmountVisible={isMpp} />
+            <Htlc isAmountVisible={isMpp} route={htlc.route} />
           </React.Fragment>
         )
       })}

renderer/components/Activity/PaymentModal/index.js

@@ -1 +1,3 @@
 export PaymentModal from './PaymentModal'
+export Route from './Route'
+export Htlc from './Htlc'

renderer/components/Pay/PaySummary.js

@@ -38,6 +38,7 @@ const PaySummary = props => {
       minFee={getMinFee(routes)}
       mt={-3}
       payReq={payReq}
+      route={routes[0]}
     />
   )
 }

renderer/components/Pay/PaySummaryLightning.js

@@ -9,6 +9,7 @@ import BigArrowRight from 'components/Icon/BigArrowRight'
 import { Bar, DataRow, Link, Spinner, Text, Tooltip } from 'components/UI'
 import { CryptoSelector, CryptoValue, FiatValue } from 'containers/UI'
 import { Truncate } from 'components/Util'
+import { Htlc } from 'components/Activity/PaymentModal'
 import messages from './messages'
 
 const ConfigLink = ({ feeLimit, openModal, ...rest }) => (
@@ -34,6 +35,7 @@ class PaySummaryLightning extends React.Component {
     nodes: PropTypes.array,
     openModal: PropTypes.func.isRequired,
     payReq: PropTypes.string.isRequired,
+    route: PropTypes.object,
   }
 
   static defaultProps = {
@@ -110,6 +112,7 @@ class PaySummaryLightning extends React.Component {
       minFee,
       nodes,
       payReq,
+      route,
       ...rest
     } = this.props
 
@@ -157,9 +160,13 @@ class PaySummaryLightning extends React.Component {
               </Text>
             </Box>
             <Box width={5 / 11}>
-              <Text className="hint--bottom-left" data-hint={payeeNodeKey} textAlign="right">
-                <Truncate maxlen={nodeAlias ? 30 : 15} text={nodeAlias || payeeNodeKey} />
-              </Text>
+              {route ? (
+                <Htlc route={route} />
+              ) : (
+                <Text className="hint--bottom-left" data-hint={payeeNodeKey} textAlign="right">
+                  <Truncate maxlen={nodeAlias ? 30 : 15} text={nodeAlias || payeeNodeKey} />
+                </Text>
+              )}
             </Box>
           </Flex>
         </Box>

renderer/containers/App/App.js

@@ -15,6 +15,7 @@ import {
 } from 'reducers/lnurl'
 import { initBackupService } from 'reducers/backup'
 import { infoSelectors } from 'reducers/info'
+import { paySelectors } from 'reducers/pay'
 import { setModals, modalSelectors } from 'reducers/modal'
 import { fetchSuggestedNodes } from 'reducers/channels'
 import { initTickers } from 'reducers/ticker'
@@ -26,7 +27,7 @@ const mapStateToProps = state => ({
   activeWalletSettings: walletSelectors.activeWalletSettings(state),
   isAppReady: appSelectors.isAppReady(state),
   isSyncedToGraph: infoSelectors.isSyncedToGraph(),
-  redirectPayReq: state.pay.redirectPayReq,
+  redirectPayReq: paySelectors.redirectPayReq(state),
   modals: modalSelectors.getModalState(state),
   lnurlWithdrawParams: lnurlSelectors.lnurlWithdrawParams(state),
   willShowLnurlAuthPrompt: lnurlSelectors.willShowLnurlAuthPrompt(state),

renderer/containers/Channels/ChannelCreateForm.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux'
 import ChannelCreateForm from 'components/Channels/ChannelCreateForm'
 import { fetchTickers, tickerSelectors } from 'reducers/ticker'
 import { openChannel } from 'reducers/channels'
-import { queryFees } from 'reducers/pay'
+import { queryFees, paySelectors } from 'reducers/pay'
 import { balanceSelectors } from 'reducers/balance'
 import { updateContactFormSearchQuery, contactFormSelectors } from 'reducers/contactsform'
 import { walletSelectors } from 'reducers/wallet'
@@ -15,8 +15,8 @@ const mapStateToProps = state => ({
   cryptoUnit: tickerSelectors.cryptoUnit(state),
   walletBalance: balanceSelectors.walletBalanceConfirmed(state),
   cryptoUnitName: tickerSelectors.cryptoUnitName(state),
-  isQueryingFees: state.pay.isQueryingFees,
-  onchainFees: state.pay.onchainFees,
+  isQueryingFees: paySelectors.isQueryingFees(state),
+  onchainFees: paySelectors.onchainFees(state),
   lndTargetConfirmations: settingsSelectors.currentConfig(state).lndTargetConfirmations,
 })
 

renderer/containers/Pay.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
 import { Pay } from 'components/Pay'
 import { fetchTickers, tickerSelectors } from 'reducers/ticker'
-import { setRedirectPayReq, queryFees, queryRoutes } from 'reducers/pay'
+import { setRedirectPayReq, queryFees, queryRoutes, paySelectors } from 'reducers/pay'
 import { balanceSelectors } from 'reducers/balance'
 import { addFilter } from 'reducers/activity'
 import { channelsSelectors } from 'reducers/channels'
@@ -18,11 +18,11 @@ const mapStateToProps = state => ({
   channelBalance: balanceSelectors.channelBalance(state),
   cryptoUnit: tickerSelectors.cryptoUnit(state),
   cryptoUnitName: tickerSelectors.cryptoUnitName(state),
-  isQueryingFees: state.pay.isQueryingFees,
+  isQueryingFees: paySelectors.isQueryingFees(state),
   lndTargetConfirmations: settingsSelectors.currentConfig(state).lndTargetConfirmations,
-  redirectPayReq: state.pay.redirectPayReq,
-  onchainFees: state.pay.onchainFees,
-  routes: state.pay.routes,
+  redirectPayReq: paySelectors.redirectPayReq(state),
+  onchainFees: paySelectors.onchainFees(state),
+  routes: paySelectors.routes(state),
   maxOneTimeSend: channelsSelectors.maxOneTimeSend(state),
   walletBalanceConfirmed: balanceSelectors.walletBalanceConfirmed(state),
 })

renderer/containers/Pay/PaySummaryLightning.js

@@ -1,13 +1,14 @@
 import { connect } from 'react-redux'
 import PaySummaryLightning from 'components/Pay/PaySummaryLightning'
+import { paySelectors } from 'reducers/pay'
 import { settingsSelectors } from 'reducers/settings'
 import { tickerSelectors } from 'reducers/ticker'
 import { networkSelectors } from 'reducers/network'
 import { openModal } from 'reducers/modal'
 
 const mapStateToProps = state => ({
   cryptoUnitName: tickerSelectors.cryptoUnitName(state),
-  isQueryingRoutes: state.pay.isQueryingRoutes,
+  isQueryingRoutes: paySelectors.isQueryingRoutes(state),
   nodes: networkSelectors.nodes(state),
   feeLimit: settingsSelectors.currentConfig(state).payments.feeLimit,
 })

renderer/containers/Pay/PaySummaryOnChain.js

@@ -1,14 +1,14 @@
 import { connect } from 'react-redux'
 import PaySummaryOnChain from 'components/Pay/PaySummaryOnChain'
 import { tickerSelectors } from 'reducers/ticker'
-import { queryFees } from 'reducers/pay'
+import { queryFees, paySelectors } from 'reducers/pay'
 import { networkSelectors } from 'reducers/network'
 
 const mapStateToProps = state => ({
   cryptoUnitName: tickerSelectors.cryptoUnitName(state),
-  isQueryingFees: state.pay.isQueryingFees,
+  isQueryingFees: paySelectors.isQueryingFees(state),
   nodes: networkSelectors.nodes(state),
-  onchainFees: state.pay.onchainFees,
+  onchainFees: paySelectors.onchainFees(state),
 })
 
 const mapDispatchToProps = {

renderer/reducers/index.js

@@ -44,6 +44,7 @@ import lnurl from './lnurl'
  * @property {import('./invoice').State} invoice Invoice reducer.
  * @property {import('./lnurl').State} lnurl Lnurl reducer.
  * @property {import('./network').State} network Network reducer.
+ * @property {import('./pay').State} pay Pay reducer.
  * @property {import('./payment').State} payment Payment reducer.
  * @property {import('./settings').State} settings Settings reducer.
  * @property {import('./transaction').State} transaction Transaction reducer.

renderer/reducers/pay/index.js

@@ -1,6 +1,7 @@
 import payReducer from './reducer'
 
 export default payReducer
+export paySelectors from './selectors'
 export * from './constants'
 export * from './reducer'
 export * from './ipc'

renderer/reducers/pay/reducer.js

@@ -22,10 +22,22 @@ const {
   SET_REDIRECT_PAY_REQ,
 } = constants
 
+/**
+ * @typedef State
+ * @property {boolean} isQueryingRoutes Boolean indicating if routes are being probed
+ * @property {boolean} isQueryingFees Boolean indicating if fees are being queried
+ * @property {{fast:string|null, medium:string|null, slow:string|null}} onchainFees Onchain fee rates
+ * @property {string|null} queryFeesError Query fees error message
+ * @property {string|null} queryRoutesError Query routes error message
+ * @property {string|null} redirectPayReq Payrequest injected from external source
+ * @property {object[]} routes Routes from last probe attempt
+ */
+
 // ------------------------------------
 // Initial State
 // ------------------------------------
 
+/** @type {State} */
 const initialState = {
   isQueryingRoutes: false,
   isQueryingFees: false,