From b9591f19a2a188a770c01f845cb7366ff12b0df0 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Sat, 7 Nov 2020 22:10:54 +0000
Subject: [PATCH] fix(ui): cleanup route summary display

---
 .../components/Activity/PaymentModal/Htlc.js  | 40 +--------------
 .../Activity/PaymentModal/HtlcHops.js         | 50 +++++++++++++++++++
 .../Activity/PaymentModal/PaymentModal.js     | 16 ++++--
 .../components/Activity/PaymentModal/index.js |  1 +
 .../components/Pay/PaySummaryLightning.js     |  4 +-
 5 files changed, 65 insertions(+), 46 deletions(-)
 create mode 100644 renderer/components/Activity/PaymentModal/HtlcHops.js

diff --git a/renderer/components/Activity/PaymentModal/Htlc.js b/renderer/components/Activity/PaymentModal/Htlc.js
index 69a9e6b4604..f9dadb54a6f 100644
--- a/renderer/components/Activity/PaymentModal/Htlc.js
+++ b/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)
diff --git a/renderer/components/Activity/PaymentModal/HtlcHops.js b/renderer/components/Activity/PaymentModal/HtlcHops.js
new file mode 100644
index 00000000000..1b68895931c
--- /dev/null
+++ b/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
diff --git a/renderer/components/Activity/PaymentModal/PaymentModal.js b/renderer/components/Activity/PaymentModal/PaymentModal.js
index cb885e585f0..e0f8e8cdaec 100644
--- a/renderer/components/Activity/PaymentModal/PaymentModal.js
+++ b/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>
     )
diff --git a/renderer/components/Activity/PaymentModal/index.js b/renderer/components/Activity/PaymentModal/index.js
index 880f575775c..455136dbce0 100644
--- a/renderer/components/Activity/PaymentModal/index.js
+++ b/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'
diff --git a/renderer/components/Pay/PaySummaryLightning.js b/renderer/components/Pay/PaySummaryLightning.js
index df481329203..bb20bdd4b2e 100644
--- a/renderer/components/Pay/PaySummaryLightning.js
+++ b/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} />