From fffa9033c07ce8afdac15ddd8e96352f3fac4e6d Mon Sep 17 00:00:00 2001
From: Ayumi Yu <ayumi@ayumiyu.com>
Date: Wed, 7 Sep 2016 15:03:22 -0700
Subject: [PATCH] Improve UX of unavailable ledger balance

Fix #3778
Fix #3785 or at least a gentle fallback
---
 .../locales/en-US/preferences.properties      |  2 ++
 app/ledger.js                                 | 21 +++++++++--
 docs/state.md                                 | 10 ++++--
 js/about/preferences.js                       | 36 ++++++++++++++-----
 4 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index d75120870c4..528fb327f9a 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -24,6 +24,8 @@ paymentsSidebarText2=All transaction IP addresses are anonymized with technology
 paymentsSidebarText3=Brave Bitcoin Wallets are provided through a partnership with:
 paymentsSidebarText4=Your contributions in the form of credit cards and bank cards are handled by:
 accountBalance=account balance
+accountBalanceConnectionError=error, can't retreive data
+accountBalanceLoading=loading...
 monthlyBudget=monthly budget
 status=status
 createWallet=create wallet
diff --git a/app/ledger.js b/app/ledger.js
index 358d78a5712..d03899bb6f6 100644
--- a/app/ledger.js
+++ b/app/ledger.js
@@ -744,7 +744,8 @@ var ledgerInfo = {
 
   hasBitcoinHandler: false,
 
-  _internal: {}
+  _internal: {},
+  error: null
 }
 
 var updateLedgerInfo = () => {
@@ -1013,6 +1014,20 @@ var getBalance = () => {
   })
 }
 
+var logError = (err, caller) => {
+  if (err) {
+    ledgerInfo.error = {
+      caller: caller,
+      error: err
+    }
+    console.log('Error in %j: %j', caller, err)
+    return true
+  } else {
+    ledgerInfo.error = null
+    return false
+  }
+}
+
 var getPaymentInfo = () => {
   var amount, currency
 
@@ -1028,7 +1043,9 @@ var getPaymentInfo = () => {
     client.getWalletProperties(amount, currency, function (err, body) {
       var info = ledgerInfo._internal.paymentInfo || {}
 
-      if (err) return console.log('getWalletProperties error: ' + err.toString())
+      if (logError(err, 'getWalletProperties')) {
+        return
+      }
 
       info = underscore.extend(info, underscore.pick(body, [ 'buyURL', 'buyURLExpires', 'balance', 'unconfirmed', 'satoshis' ]))
       info.address = client.getWalletAddress()
diff --git a/docs/state.md b/docs/state.md
index 7572a0d3533..6fce9cb1d01 100644
--- a/docs/state.md
+++ b/docs/state.md
@@ -402,7 +402,7 @@ WindowStore
     reconcileStamp: number,     // timestamp for the next reconcilation
     transactions: [ {           // contributions reconciling/reconciled
       viewingId: string,        // UUIDv4 for this contribution
-      contribution: {           // 
+      contribution: {           //
         fiat: {                 // roughly-equivalent fiat amount
           amount: number,       //   e.g., 5
           currency: string      //   e.g., "USD"
@@ -411,7 +411,7 @@ WindowStore
           [currency]: number    //   e.g., { "USD": 575.45 }
         },
         satoshis: number,       // actual number of satoshis transferred
-        fee: number             // bitcoin transaction fee 
+        fee: number             // bitcoin transaction fee
       },
       submissionStamp: number,  // timestamp for this contribution
       count: number,            // total number of ballots allowed to be cast
@@ -435,7 +435,11 @@ WindowStore
       }
     },
     hasBitcoinHandler: boolean,  // brave browser has a `bitcoin:` URI handler
-    paymentIMG: string           // the QR code equivalent of `paymentURL` expressed as "data:image/...;base64,..."
+    paymentIMG: string,           // the QR code equivalent of `paymentURL` expressed as "data:image/...;base64,..."
+    error: { // non-null if the last updateLedgerInfo happened concurrently with an error
+      caller: string             // function in which error was handled
+      error: object              // error object returned
+    }
   },
   publisherInfo: [               // one entry for each publisher having a non-zero `score`
     {
diff --git a/js/about/preferences.js b/js/about/preferences.js
index e834b9faa35..7f2401be1a3 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -583,6 +583,25 @@ class PaymentsTab extends ImmutableComponent {
     return getSetting(settings.PAYMENTS_ENABLED, this.props.settings)
   }
 
+  get fundsAmount () {
+    if (!this.props.ledgerData.get('created')) {
+      return null
+    }
+
+    return <span id='fundsAmount'>
+      {
+      !(this.props.ledgerData.get('balance') === undefined || this.props.ledgerData.get('balance') === null)
+        ? <span>
+          {this.btcToCurrencyString(this.props.ledgerData.get('balance'))}
+          <a href='https://brave.com/Payments_FAQ.html' target='_blank'>
+            <span className='fa fa-question-circle fundsFAQ' />
+          </a>
+        </span>
+        : <span><span data-l10n-id='accountBalanceLoading' /></span>
+      }
+    </span>
+  }
+
   get walletButton () {
     const buttonText = this.props.ledgerData.get('created')
       ? 'addFundsTitle'
@@ -708,14 +727,15 @@ class PaymentsTab extends ImmutableComponent {
           <tbody>
             <tr>
               <td>
-                <span id='fundsAmount'>
-                  {this.btcToCurrencyString(this.props.ledgerData.get('balance'))}
-                  <a href='https://brave.com/Payments_FAQ.html' target='_blank'>
-                    <span className='fa fa-question-circle fundsFAQ' />
-                  </a>
-                </span>
-                {this.walletButton}
-                {this.paymentHistoryButton}
+                {
+                  this.props.ledgerData.get('error') && this.props.ledgerData.get('error').get('caller') === 'getWalletProperties'
+                    ? <span data-l10n-id='accountBalanceConnectionError' />
+                    : <span>
+                      {this.fundsAmount}
+                      {this.walletButton}
+                      {this.paymentHistoryButton}
+                    </span>
+                }
               </td>
               <td>
                 <SettingsList>