Improve UX of unavailable ledger balance

Fix #3778 Fix #3785 or at least a gentle fallback
brave · Sep 8, 2016 · 3e1f025 · 3e1f025
1 parent 8d0dd96
commit 3e1f025
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 10 deletions.
diff --git 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
@@ -744,7 +744,14 @@ var ledgerInfo = {
 
   hasBitcoinHandler: false,
 
-  _internal: {}
+  _internal: {},
+
+  // if the last updateLedgerInfo happened concurrently with an error, this
+  // saves it for UI or debugging
+  error: null // {
+    // caller: function in which error was handled
+    // error: error object returned
+  // }
 }
 
 var updateLedgerInfo = () => {
@@ -1013,6 +1020,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 +1049,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/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>