fix(invoice-amt-paid): settled invoices show amt_paid

Settled invoices show the amount paid by the payee instead of the requested
value from the invoice. This involves using an updated version of the lnd rpc
protocol.

This is in response to issue #654.

amt_paid is exposed to users via invoice.finalAmount, which is constructed
via a new invoice decorator.

app/components/Activity/InvoiceModal.js

@@ -55,7 +55,7 @@ const InvoiceModal = ({
             <section className={styles.amount}>
               <h1>
                 <Value
-                  value={invoice.value}
+                  value={invoice.finalAmount}
                   currency={ticker.currency}
                   currentTicker={currentTicker}
                 />

app/lib/utils/btc.js

@@ -69,6 +69,16 @@ export function satoshisToUsd(satoshis, price) {
   return btcToUsd(satoshisToBtc(satoshis), price)
 }
 
+////////////////////////////////
+// millisatoshis to satoshis //
+////////////////////////////// 
+
+export function millisatoshisToSatoshis(millisatoshis) {
+  if (millisatoshis === undefined || millisatoshis === null || millisatoshis === '') return null
+
+  return Math.round(millisatoshis / 1000)
+}
+
 
 export function renderCurrency(currency) {
   switch (currency) {
@@ -139,6 +149,8 @@ export default {
   satoshisToBits,
   satoshisToUsd,
 
+  millisatoshisToSatoshis,
+
   renderCurrency,
 
   convert

app/reducers/invoice.js

@@ -33,6 +33,19 @@ export const INVOICE_FAILED = 'INVOICE_FAILED'
 
 export const UPDATE_INVOICE = 'UPDATE_INVOICE'
 
+// ------------------------------------
+// Helpers
+// ------------------------------------
+
+// Decorate invoice object with custom/computed properties.
+const decorateInvoice = invoice => {
+  invoice.finalAmount = invoice.value
+  if (invoice.amt_paid) {
+    invoice.finalAmount = btc.millisatoshisToSatoshis(invoice.amt_paid)
+  }
+  return invoice
+}
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -94,8 +107,10 @@ export const fetchInvoices = () => dispatch => {
 }
 
 // Receive IPC event for invoices
-export const receiveInvoices = (event, { invoices }) => dispatch =>
+export const receiveInvoices = (event, { invoices }) => dispatch => {
   dispatch({ type: RECEIVE_INVOICES, invoices })
+  invoices.forEach(decorateInvoice)
+}
 
 // Send IPC event for creating an invoice
 export const createInvoice = (amount, memo, currency) => dispatch => {
@@ -111,6 +126,8 @@ export const createdInvoice = (event, invoice) => dispatch => {
   // Close the form modal once the payment was succesful
   dispatch(setFormType(null))
 
+  decorateInvoice(invoice)
+
   // Add new invoice to invoices list
   dispatch({ type: INVOICE_SUCCESSFUL, invoice })
 
@@ -136,6 +153,8 @@ export const invoiceUpdate = (event, { invoice }) => dispatch => {
   // Fetch new balance
   dispatch(fetchBalance())
 
+  decorateInvoice(invoice)
+
   if (invoice.settled) {
     // HTML 5 desktop notification for the invoice update
     const notifTitle = "You've been Zapped"

app/routes/activity/components/components/Invoice/Invoice.js

@@ -40,11 +40,15 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
     >
       <span>
         <i className={styles.plus}>+</i>
-        <Value value={invoice.value} currency={ticker.currency} currentTicker={currentTicker} />
+        <Value
+          value={invoice.finalAmount}
+          currency={ticker.currency}
+          currentTicker={currentTicker}
+        />
         <i> {currencyName}</i>
       </span>
       <span>
-        <span>${btc.convert('sats', 'usd', invoice.value, currentTicker.price_usd)}</span>
+        <span>${btc.convert('sats', 'usd', invoice.finalAmount, currentTicker.price_usd)}</span>
       </span>
     </div>
   </div>