Improved errors when loading ledger balance

Humanizes errors when loading ledger balance by mapping error codes to localized messages. Fix #4920 Auditors: @luixxiul Test Plan: 1. Disable internet for Brave (can disable system wide, or app specific eg w/ Little Snitch). 2. Open Brave and view Preferences > Payments. 3. Account balance should show error and details.
brave · Nov 9, 2016 · e81aa58 · e81aa58 · luixxiul · Nov 9, 2016
1 parent 08f1860
commit e81aa58
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/app/extensions/brave/about-preferences.html b/app/extensions/brave/about-preferences.html
@@ -15,6 +15,8 @@
     <link rel="localization" href="locales/{locale}/preferences.properties">
     <link rel="localization" href="locales/{locale}/common.properties">
     <link rel="localization" href="locales/{locale}/bravery.properties">
+    <link rel="localization" href="locales/{locale}/error.properties">
+    <link rel="localization" href="locales/{locale}/errorMessages.properties">
   </head>
   <body>
     <div id="appContainer"/>

diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
@@ -26,7 +26,7 @@ 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 retrieve data
+accountBalanceConnectionError=An error occurred while loading your balance.
 accountBalanceLoading=loading…
 monthlyBudget=monthly budget
 status=status

diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -21,6 +21,7 @@ const settings = require('../constants/settings')
 const coinbaseCountries = require('../constants/coinbaseCountries')
 const {passwordManagers, extensionIds} = require('../constants/passwordManagers')
 const {startsWithOption, newTabMode, bookmarksToolbarMode} = require('../../app/common/constants/settingsEnums')
+const {l10nErrorText} = require('../../app/common/lib/httpUtil')
 
 const WidevineInfo = require('../../app/renderer/components/widevineInfo')
 const aboutActions = require('./aboutActions')
@@ -1124,6 +1125,16 @@ class PaymentsTab extends ImmutableComponent {
     return <div className='nextReconcileDate' data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id='statusNextReconcileDate' />
   }
 
+  get ledgerDataErrorText () {
+    const ledgerError = this.props.ledgerData.get('error')
+    if (!ledgerError) {
+      return null
+    }
+    // 'error' here is a chromium webRequest error as returned by request.js
+    const errorCode = ledgerError.get('error').get('errorCode')
+    return l10nErrorText(errorCode)
+  }
+
   btcToCurrencyString (btc) {
     const balance = Number(btc || 0)
     const currency = this.props.ledgerData.get('currency') || 'USD'
@@ -1183,16 +1194,19 @@ class PaymentsTab extends ImmutableComponent {
               <td>
                 {
                   this.props.ledgerData.get('error') && this.props.ledgerData.get('error').get('caller') === 'getWalletProperties'
-                    ? <span data-l10n-id='accountBalanceConnectionError' />
-                    : <span>
+                    ? <div>
+                      <div data-l10n-id='accountBalanceConnectionError' />
+                      <div className='accountBalanceError' data-l10n-id={this.ledgerDataErrorText} />
+                    </div>
+                    : <div>
                       <SettingsList>
                         <SettingItem>
                           {this.fundsAmount}
                           {this.walletButton}
                           {this.paymentHistoryButton}
                         </SettingItem>
                       </SettingsList>
-                    </span>
+                    </div>
                 }
               </td>
               <td>

diff --git a/less/about/preferences.less b/less/about/preferences.less
@@ -713,7 +713,7 @@ div.nextPaymentSubmission {
       line-height: 24px;
       box-sizing: border-box;
     }
-    .nextReconcileDate {
+    .accountBalanceError, .nextReconcileDate {
       font-size: 14px;
       margin: 10px 0;
     }