fix(wallet): improve fee estimate presentation

app/components/Pay/PaySummaryLightning.js

@@ -78,6 +78,23 @@ class PaySummaryLightning extends React.PureComponent {
     const fiatAmount = satoshisToFiat(satoshis, currentTicker[fiatCurrency].last)
     const nodeAlias = getNodeAlias(payeeNodeKey, nodes)
 
+    // Select an appropriate fee message...
+    // Default to unknown.
+    let feeMessage = messages.fee_unknown
+
+    // If thex max fee is 0 or 1 then show a message like "less than 1".
+    if (maxFee === 0 || maxFee === 1) {
+      feeMessage = messages.fee_less_than_1
+    }
+    // Otherwise, if we have both a min and max fee that are different, present the fee range.
+    else if (minFee !== null && maxFee !== null && minFee !== maxFee) {
+      feeMessage = messages.fee_range
+    }
+    // Finally, if we at least have a max fee then present it as upto that amount.
+    else if (maxFee) {
+      feeMessage = messages.fee_upto
+    }
+
     return (
       <React.Fragment>
         <Box pb={2}>
@@ -108,7 +125,7 @@ class PaySummaryLightning extends React.PureComponent {
             </Box>
             <Box width={5 / 11}>
               <Text textAlign="right" className="hint--bottom-left" data-hint={payeeNodeKey}>
-                {<Truncate text={nodeAlias || payeeNodeKey} />}
+                {<Truncate text={nodeAlias || payeeNodeKey} maxlen={nodeAlias ? 30 : 15} />}
               </Text>
             </Box>
           </Flex>
@@ -127,10 +144,8 @@ class PaySummaryLightning extends React.PureComponent {
                 </Text>
                 <Spinner color="lightningOrange" />
               </Flex>
-            ) : minFee === null || maxFee === null ? (
-              <FormattedMessage {...messages.unknown} />
             ) : (
-              <FormattedMessage {...messages.fee_range} values={{ minFee, maxFee }} />
+              feeMessage && <FormattedMessage {...feeMessage} values={{ minFee, maxFee }} />
             )
           }
         />
@@ -141,13 +156,7 @@ class PaySummaryLightning extends React.PureComponent {
           left={<FormattedMessage {...messages.total} />}
           right={
             <React.Fragment>
-              <Value value={satoshis} currency={cryptoCurrency} /> {cryptoCurrencyTicker}
+              <Value value={satoshis + maxFee} currency={cryptoCurrency} /> {cryptoCurrencyTicker}
-              {!isQueryingRoutes &&
-                maxFee && (
-                  <Text fontSize="s">
-                    (+ <FormattedMessage {...messages.upto} /> {maxFee} msats)
-                  </Text>
-                )}
             </React.Fragment>
           }
         />

app/components/Pay/PaySummaryOnChain.js

@@ -122,11 +122,11 @@ class PaySummaryOnChain extends React.Component {
                 <Spinner color="lightningOrange" />
               </Flex>
             ) : !fee ? (
-              <FormattedMessage {...messages.unknown} />
+              <FormattedMessage {...messages.fee_unknown} />
             ) : (
               <React.Fragment>
                 <Text>
-                  {fee} satoshis <FormattedMessage {...messages.per_byte} />
+                  {fee} satoshis <FormattedMessage {...messages.fee_per_byte} />
                 </Text>
                 <Text fontSize="s">
                   (<FormattedMessage {...messages.next_block_confirmation} />)
@@ -143,7 +143,7 @@ class PaySummaryOnChain extends React.Component {
           right={
             <React.Fragment>
               <Value value={amount} currency={cryptoCurrency} /> {cryptoCurrencyTicker}
-              {!isQueryingFees && fee && <Text fontSize="s">(+ {fee} satoshis per byte</Text>}
+              {!isQueryingFees && fee && <Text fontSize="s">(+ {fee} satoshis per byte)</Text>}
             </React.Fragment>
           }
         />

app/components/Pay/messages.js

@@ -15,11 +15,12 @@ export default defineMessages({
   back: 'Back',
   send: 'Send',
   fee: 'Fee',
-  fee_range: 'between {minFee} and {maxFee} msat',
+  fee_less_than_1: 'less than 1 satoshi',
-  unknown: 'unknown',
+  fee_range: 'between {minFee} and {maxFee} satoshis',
+  fee_upto: 'up to {maxFee} satoshi',
+  fee_unknown: 'unknown',
+  fee_per_byte: 'per byte',
   amount: 'Amount',
-  per_byte: 'per byte',
-  upto: 'up to',
   total: 'Total',
   memo: 'Memo',
   description:

app/lib/utils/crypto.js

@@ -150,13 +150,13 @@ export const getNodeAlias = (pubkey, nodes = []) => {
 /**
  * Given a list of routest, find the minimum fee.
  * @param {QueryRoutesResponse} routes
- * @return {Number} minimum fee.
+ * @return {Number} minimum fee rounded up to the nearest satoshi.
  */
 export const getMinFee = (routes = []) => {
   if (!routes || !routes.length) {
     return null
   }
-  return routes.reduce((min, b) => Math.min(min, b.total_fees_msat), routes[0].total_fees_msat)
+  return routes.reduce((min, b) => Math.min(min, b.total_fees), routes[0].total_fees)
 }
 
 /**
@@ -168,7 +168,7 @@ export const getMaxFee = routes => {
   if (!routes || !routes.length) {
     return null
   }
-  return routes.reduce((max, b) => Math.max(max, b.total_fees_msat), routes[0].total_fees_msat)
+  return routes.reduce((max, b) => Math.max(max, b.total_fees), routes[0].total_fees)
 }
 
 /**

test/unit/components/Pay/__snapshots__/PaySummaryLightning.spec.js.snap

@@ -81,6 +81,7 @@ exports[`component.Form.PaySummaryLightning should render correctly 1`] = `
           textAlign="right"
         >
           <Truncate
+            maxlen={15}
             text="03c856d2dbec7454c48f311031f06bb99e3ca1ab15a9b9b35de14e139aa663b463"
           />
         </Text>
@@ -99,8 +100,13 @@ exports[`component.Form.PaySummaryLightning should render correctly 1`] = `
     right={
       <FormattedMessage
         defaultMessage="unknown"
-        id="components.Pay.unknown"
+        id="components.Pay.fee_unknown"
-        values={Object {}}
+        values={
+          Object {
+            "maxFee": null,
+            "minFee": null,
+          }
+        }
       />
     }
   />

test/unit/components/Pay/__snapshots__/PaySummaryOnchain.spec.js.snap

@@ -99,7 +99,7 @@ exports[`component.Form.PaySummaryOnchain should render correctly 1`] = `
     right={
       <FormattedMessage
         defaultMessage="unknown"
-        id="components.Pay.unknown"
+        id="components.Pay.fee_unknown"
         values={Object {}}
       />
     }