Add CSV export of contribution breakdown to Payment History dialog

for issue #3477
- Adds "Receipt Link" column to Payment History dialog
- Clicking link downloads CSV with 5 columns breaking down your contribution by Publisher:
  "Publisher","Votes","Fraction","BTC","USD"

auditor: @diracdeltas
test plan:
1. open payments panel
2. click 'transaction history'
3. click on receipt link in the right column
4. open the downloaded receipt and make sure it has payment info

app/ledger.js

@@ -53,6 +53,7 @@ const appStore = require('../js/stores/appStore')
 const eventStore = require('../js/stores/eventStore')
 const rulesolver = require('./extensions/brave/content/scripts/pageInformation.js')
 const ledgerUtil = require('./common/lib/ledgerUtil')
+const base64Encode = require('../js/lib/base64').encode
 
 // TBD: remove these post beta [MTR]
 const logPath = 'ledger-log.json'
@@ -286,6 +287,18 @@ if (ipc) {
     if (balanceTimeoutId) clearTimeout(balanceTimeoutId)
     balanceTimeoutId = setTimeout(getBalance, 5 * msecs.second)
   })
+
+  ipc.on(messages.OPEN_LEDGER_TRANSACTION_CSV, (event, viewingIds, csvFilename) => {
+    if (client) {
+      let txCsvText = client.getTransactionCSVText(viewingIds)
+      let txCsvTextDataURI = 'data:text/csv;base64,' + base64Encode(txCsvText)
+
+      const win = electron.BrowserWindow.getFocusedWindow()
+      if (win && win.webContents) {
+        win.webContents.downloadURL(txCsvTextDataURI)
+      }
+    }
+  })
 }
 
 /*

js/about/aboutActions.js

@@ -176,6 +176,10 @@ const AboutActions = {
     ipc.send(messages.LEDGER_CREATE_WALLET)
   },
 
+  receiptLinkClick: function (viewingId, receiptFileName) {
+    ipc.send(messages.OPEN_LEDGER_TRANSACTION_CSV, viewingId, receiptFileName)
+  },
+
   setLedgerEnabled: function (enabled) {
     ipc.send(messages.LEDGER_ENABLE, enabled)
   },

js/about/preferences.js

@@ -471,6 +471,7 @@ class PaymentHistory extends ImmutableComponent {
           <tr>
             <th className='sort-header' data-l10n-id='date' />
             <th className='sort-header' data-l10n-id='totalAmount' />
+            <th className='sort-header' data-l10n-id='receiptLink' />
           </tr>
         </thead>
         <tbody>
@@ -520,13 +521,26 @@ class PaymentHistoryRow extends ImmutableComponent {
     return (fiatAmount && typeof fiatAmount === 'number' ? fiatAmount.toFixed(2) : '0.00')
   }
 
+  get viewingId () {
+    return this.transaction.get('viewingId')
+  }
+
+  get receiptFileName () {
+    return `brave_ledger${this.numericDateStr}.csv`
+  }
+
+  onReceiptLinkClick () {
+    aboutActions.receiptLinkClick(this.viewingId, this.receiptFileName)
+  }
+
   render () {
     var date = this.formattedDate
     var totalAmountStr = `${this.totalAmount} ${this.currency}`
 
     return <tr>
-      <td data-sort={this.timestamp}>{date}</td>
-      <td data-sort={this.satoshis}>{totalAmountStr}</td>
+      <td className='narrow' data-sort={this.timestamp}>{date}</td>
+      <td className='wide' data-sort={this.satoshis}>{totalAmountStr}</td>
+      <td className='wide'><a onClick={this.onReceiptLinkClick.bind(this)}>{this.receiptFileName}</a></td>
     </tr>
   }
 }

js/constants/messages.js

@@ -152,6 +152,7 @@ const messages = {
   LEDGER_PUBLISHER: _,
   LEDGER_UPDATED: _,
   LEDGER_CREATE_WALLET: _,
+  OPEN_LEDGER_TRANSACTION_CSV: _,
   CHECK_BITCOIN_HANDLER: _,
   ADD_FUNDS_CLOSED: _
 }

less/about/preferences.less

@@ -580,7 +580,6 @@ div.nextPaymentSubmission {
 
 .modal .dialog.paymentHistory {
   padding: 0px;
-  width: 450px;
 
   .dialog-header {
     background-color: #EEE;
@@ -684,7 +683,7 @@ div.nextPaymentSubmission {
          font-weight: 500;
          border-bottom: 2px solid @lightGray;
          text-align: left;
-         width: 25%;
+         width: 18%;
        }
        td {
           text-align: left;

package.json

@@ -90,7 +90,7 @@
     "keytar": "^3.0.0",
     "l20n": "^3.5.1",
     "ledger-balance": "^0.8.60",
-    "ledger-client": "^0.8.77",
+    "ledger-client": "^0.8.78",
     "ledger-geoip": "^0.8.71",
     "ledger-publisher": "^0.8.69",
     "lru_cache": "^1.0.0",