fix(ui): cleanup route summary display

renderer/components/Activity/PaymentModal/Htlc.js

@@ -1,48 +1,10 @@
 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,
-}
+import HtlcHops from './HtlcHops'
 
 const Htlc = ({ route, isAmountVisible = true, ...rest }) => {
   const amountExcludingFees = CoinBig(route.totalAmt)

renderer/components/Activity/PaymentModal/HtlcHops.js

@@ -0,0 +1,50 @@
+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 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, index) => {
+        const displayName = getDisplayNodeName(hop)
+        const hasFee = CoinBig(hop.feeMsat).gt(0)
+        const isLast = index === hops.length - 1
+        const multiHop = hops.length > 1
+        return (
+          <Flex
+            key={hop.pubKey}
+            alignItems="center"
+            className="hint--top-left"
+            color={isLast ? null : 'grey'}
+            data-hint={formatMessage(
+              { ...messages[hasFee ? 'htlc_hop_fee' : 'htlc_hop_no_fee'] },
+              { hopFee: formatNumber(hop.feeMsat), cryptoUnitName: 'msat' }
+            )}
+            justifyContent="flex-end"
+            my={1}
+          >
+            {multiHop && (
+              <Flex alignItems="center" color="gray" mx={2} opacity={isLast ? 1 : 0.5}>
+                <ArrowRight />
+              </Flex>
+            )}
+            <Truncate maxlen={50} text={displayName} />
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}
+
+HtlcHops.propTypes = {
+  hops: PropTypes.array.isRequired,
+}
+
+export default HtlcHops

renderer/components/Activity/PaymentModal/PaymentModal.js

@@ -22,6 +22,8 @@ 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}>
@@ -109,12 +111,16 @@ class PaymentModal extends React.PureComponent {
             }
           />
 
-          <Bar variant="light" />
+          {(isMpp || isRouted) && (
+            <>
+              <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/index.js

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

renderer/components/Pay/PaySummaryLightning.js

@@ -9,7 +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 { HtlcHops } from 'components/Activity/PaymentModal'
 import messages from './messages'
 
 const ConfigLink = ({ feeLimit, openModal, ...rest }) => (
@@ -161,7 +161,7 @@ class PaySummaryLightning extends React.Component {
             </Box>
             <Box width={5 / 11}>
               {route ? (
-                <Htlc route={route} />
+                <HtlcHops hops={route.hops} isAmountVisible={false} />
               ) : (
                 <Text className="hint--bottom-left" data-hint={payeeNodeKey} textAlign="right">
                   <Truncate maxlen={nodeAlias ? 30 : 15} text={nodeAlias || payeeNodeKey} />