feature: fix balance failed "retry" load state (#2027)

* Fixes translation typo and refactors FailedPanel.jsx * lint * snapshots * Revert testing changes to balancesActions.js * revert changes to AssetBalancesPanel/index.js
CityOfZion · Nov 29, 2020 · 6befd56 · 6befd56
1 parent 6c040f4
commit 6befd56
Show file tree

Hide file tree

Showing 22 changed files with 69 additions and 37 deletions.
diff --git a/__tests__/components/__snapshots__/NetworkConfigurationTooltip.test.js.snap b/__tests__/components/__snapshots__/NetworkConfigurationTooltip.test.js.snap
@@ -178,10 +178,10 @@ exports[`Sidebar renders without crashing 1`] = `
             "nodeSelectSelectAutomatically": "Select automatically",
             "nodeSelectionInstructions": "If you’re experiencing performance issues, try selecting a custom node below",
             "nothingToSeeHere": "Nothing to see here!",
+            "notifications.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
             "notifications.success.accountSaved": "Account saved!",
             "notifications.success.receivedBlockchainInfo": "Received latest blockchain information.",
             "notifications.success.updatedWalletName": "Succesfully updated wallet name.",
-            "notificiations.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
             "numberofTransactionsPending": "{transferCount, number} {transferCount, plural, one {Transfer} other {Transfers}} pending",
             "previousStep": "Previous Step",
             "print": "Print",
@@ -825,10 +825,10 @@ exports[`Sidebar renders without crashing 1`] = `
                                             "nodeSelectSelectAutomatically": "Select automatically",
                                             "nodeSelectionInstructions": "If you’re experiencing performance issues, try selecting a custom node below",
                                             "nothingToSeeHere": "Nothing to see here!",
+                                            "notifications.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
                                             "notifications.success.accountSaved": "Account saved!",
                                             "notifications.success.receivedBlockchainInfo": "Received latest blockchain information.",
                                             "notifications.success.updatedWalletName": "Succesfully updated wallet name.",
-                                            "notificiations.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
                                             "numberofTransactionsPending": "{transferCount, number} {transferCount, plural, one {Transfer} other {Transfers}} pending",
                                             "previousStep": "Previous Step",
                                             "print": "Print",

diff --git a/__tests__/components/__snapshots__/NetworkSwitch.test.js.snap b/__tests__/components/__snapshots__/NetworkSwitch.test.js.snap
@@ -157,10 +157,10 @@ exports[`NetworkSwitch renders without crashing 1`] = `
       "nodeSelectSelectAutomatically": "Select automatically",
       "nodeSelectionInstructions": "If you’re experiencing performance issues, try selecting a custom node below",
       "nothingToSeeHere": "Nothing to see here!",
+      "notifications.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
       "notifications.success.accountSaved": "Account saved!",
       "notifications.success.receivedBlockchainInfo": "Received latest blockchain information.",
       "notifications.success.updatedWalletName": "Succesfully updated wallet name.",
-      "notificiations.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
       "numberofTransactionsPending": "{transferCount, number} {transferCount, plural, one {Transfer} other {Transfers}} pending",
       "previousStep": "Previous Step",
       "print": "Print",

diff --git a/__tests__/components/__snapshots__/News.test.js.snap b/__tests__/components/__snapshots__/News.test.js.snap
@@ -175,10 +175,10 @@ exports[`News renders without crashing 1`] = `
             "nodeSelectSelectAutomatically": "Select automatically",
             "nodeSelectionInstructions": "If you’re experiencing performance issues, try selecting a custom node below",
             "nothingToSeeHere": "Nothing to see here!",
+            "notifications.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
             "notifications.success.accountSaved": "Account saved!",
             "notifications.success.receivedBlockchainInfo": "Received latest blockchain information.",
             "notifications.success.updatedWalletName": "Succesfully updated wallet name.",
-            "notificiations.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
             "numberofTransactionsPending": "{transferCount, number} {transferCount, plural, one {Transfer} other {Transfers}} pending",
             "previousStep": "Previous Step",
             "print": "Print",

diff --git a/__tests__/components/__snapshots__/Settings.test.js.snap b/__tests__/components/__snapshots__/Settings.test.js.snap
@@ -175,10 +175,10 @@ exports[`Settings renders without crashing 1`] = `
             "nodeSelectSelectAutomatically": "Select automatically",
             "nodeSelectionInstructions": "If you’re experiencing performance issues, try selecting a custom node below",
             "nothingToSeeHere": "Nothing to see here!",
+            "notifications.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
             "notifications.success.accountSaved": "Account saved!",
             "notifications.success.receivedBlockchainInfo": "Received latest blockchain information.",
             "notifications.success.updatedWalletName": "Succesfully updated wallet name.",
-            "notificiations.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
             "numberofTransactionsPending": "{transferCount, number} {transferCount, plural, one {Transfer} other {Transfers}} pending",
             "previousStep": "Previous Step",
             "print": "Print",

diff --git a/__tests__/components/__snapshots__/Sidebar.test.js.snap b/__tests__/components/__snapshots__/Sidebar.test.js.snap
@@ -175,10 +175,10 @@ exports[`Sidebar renders without crashing 1`] = `
             "nodeSelectSelectAutomatically": "Select automatically",
             "nodeSelectionInstructions": "If you’re experiencing performance issues, try selecting a custom node below",
             "nothingToSeeHere": "Nothing to see here!",
+            "notifications.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
             "notifications.success.accountSaved": "Account saved!",
             "notifications.success.receivedBlockchainInfo": "Received latest blockchain information.",
             "notifications.success.updatedWalletName": "Succesfully updated wallet name.",
-            "notificiations.failure.blockchainInfoFailure": "Failed to retrieve blockchain information.",
             "numberofTransactionsPending": "{transferCount, number} {transferCount, plural, one {Transfer} other {Transfers}} pending",
             "previousStep": "Previous Step",
             "print": "Print",

diff --git a/app/components/FailedPanel/FailedPanel.jsx b/app/components/FailedPanel/FailedPanel.jsx
@@ -6,35 +6,49 @@ import { Link } from 'react-router-dom'
 import Panel from '../Panel'
 import styles from './FailedPanel.scss'
 import { ROUTES } from '../../core/constants'
+import Loader from '../Loader'
 
 type Props = {
   className: ?string,
   title: ?string,
   onRetry: ?Function,
+  loading: boolean,
 }
 
 export default class LoadingPanel extends React.Component<Props> {
   static defaultProps = {
     title: 'Failed',
     onRetry: null,
+    loading: false,
   }
 
   render() {
+    const { loading, className } = this.props
+
     return (
       <Panel
-        className={classNames(styles.loadingPanel, this.props.className)}
-        contentClassName={styles.content}
+        className={className}
+        contentClassName={classNames([
+          styles.content,
+          { [styles.loadingContent]: loading },
+        ])}
         renderHeader={this.renderHeader}
       >
-        Failed to load. {this.renderRetry()} or{' '}
-        <Link
-          to={{
-            pathname: ROUTES.NODE_SELECT,
-          }}
-          className={styles.settingsDonations}
-        >
-          select a different node.
-        </Link>
+        {loading ? (
+          <Loader />
+        ) : (
+          <React.Fragment>
+            Failed to load. {this.renderRetry()} or{' '}
+            <Link
+              to={{
+                pathname: ROUTES.NODE_SELECT,
+              }}
+              className={styles.settingsDonations}
+            >
+              select a different node.
+            </Link>
+          </React.Fragment>
+        )}
       </Panel>
     )
   }

diff --git a/app/components/FailedPanel/FailedPanel.scss b/app/components/FailedPanel/FailedPanel.scss
@@ -1,6 +1,8 @@
-.failedPanel {
-  .content {
-    text-align: center;
-    vertical-align: middle;
-  }
+.loadingContent {
+  text-align: center;
+  vertical-align: middle;
+  position: relative;
+  min-height: 100px;
+  text-align: center;
+  vertical-align: middle;
 }
diff --git a/app/components/FailedPanel/index.js b/app/components/FailedPanel/index.js
@@ -1 +1,17 @@
-export { default } from './FailedPanel'
+// @flow
+import { compose } from 'recompose'
+
+import FailedPanel from './FailedPanel'
+import balancesActions from '../../actions/balancesActions'
+import withLoadingProp from '../../hocs/withLoadingProp'
+import withFailureNotification from '../../hocs/withFailureNotification'
+
+export default compose(
+  withLoadingProp(balancesActions),
+  withFailureNotification(
+    balancesActions,
+    'notifications.failure.blockchainInfoFailure',
+    {},
+    true,
+  ),
+)(FailedPanel)
diff --git a/app/containers/Receive/index.js b/app/containers/Receive/index.js
@@ -112,7 +112,7 @@ export default compose(
   ),
   withFailureNotification(
     balancesActions,
-    'notificiations.failure.blockchainInfoFailure',
+    'notifications.failure.blockchainInfoFailure',
     {},
     true,
   ),

diff --git a/app/containers/Send/index.js b/app/containers/Send/index.js
@@ -98,7 +98,7 @@ export default compose(
   ),
   withFailureNotification(
     balancesActions,
-    'notificiations.failure.blockchainInfoFailure',
+    'notifications.failure.blockchainInfoFailure',
     {},
     true,
   ),

diff --git a/app/containers/TransactionHistory/index.js b/app/containers/TransactionHistory/index.js
@@ -46,7 +46,7 @@ export default compose(
   ),
   withFailureNotification(
     balancesActions,
-    'notificiations.failure.blockchainInfoFailure',
+    'notifications.failure.blockchainInfoFailure',
     {},
     true,
   ),

diff --git a/app/translations/arabic.js b/app/translations/arabic.js
@@ -138,7 +138,7 @@ const NOTIFICATIONS = {
     'تلقي أحدث معلومات blockchain.',
   'notifications.success.accountSaved': 'تم حفظ الحساب!',
   'notifications.success.updatedWalletName': 'تم تحديث اسم المحفظة بنجاح.',
-  'notificiations.failure.blockchainInfoFailure':
+  'notifications.failure.blockchainInfoFailure':
     'فشل في استعادة معلومات blockchain.',
 }
 

diff --git a/app/translations/chinese.js b/app/translations/chinese.js
@@ -128,7 +128,7 @@ const NOTIFICATIONS = {
   'notifications.success.receivedBlockchainInfo': '收到最新的区块链信息。',
   'notifications.success.accountSaved': '帐户已保存!',
   'notifications.success.updatedWalletName': '成功更新了钱包名称.',
-  'notificiations.failure.blockchainInfoFailure': '检索区块链信息失败。',
+  'notifications.failure.blockchainInfoFailure': '检索区块链信息失败。',
 }
 
 const AUTH = {

diff --git a/app/translations/english.js b/app/translations/english.js
@@ -141,7 +141,7 @@ const NOTIFICATIONS = {
     'Received latest blockchain information.',
   'notifications.success.accountSaved': 'Account saved!',
   'notifications.success.updatedWalletName': 'Succesfully updated wallet name.',
-  'notificiations.failure.blockchainInfoFailure':
+  'notifications.failure.blockchainInfoFailure':
     'Failed to retrieve blockchain information.',
 }
 

diff --git a/app/translations/french.js b/app/translations/french.js
@@ -133,7 +133,7 @@ const NOTIFICATIONS = {
   'notifications.success.accountSaved': 'Compte enregistré!',
   'notifications.success.updatedWalletName':
     'Nom du portefeuille mis à jour avec succès.',
-  'notificiations.failure.blockchainInfoFailure':
+  'notifications.failure.blockchainInfoFailure':
     'Échec de la récupération des informations de la chaîne de blocs.',
 }
 

diff --git a/app/translations/german.js b/app/translations/german.js
@@ -141,7 +141,7 @@ const NOTIFICATIONS = {
   'notifications.success.accountSaved': 'Konto gespeichert!',
   'notifications.success.updatedWalletName':
     'Erfolgreich aktualisierter Brieftaschenname.',
-  'notificiations.failure.blockchainInfoFailure':
+  'notifications.failure.blockchainInfoFailure':
     'Fehler beim Abrufen der Blockchain-Informationen.',
 }
 

diff --git a/app/translations/italian.js b/app/translations/italian.js
@@ -136,7 +136,7 @@ const NOTIFICATIONS = {
   'notifications.success.accountSaved': 'Account salvato!',
   'notifications.success.updatedWalletName':
     'Nome del portafoglio aggiornato con successo.',
-  'notificiations.failure.blockchainInfoFailure':
+  'notifications.failure.blockchainInfoFailure':
     'Impossibile recuperare le informazioni sulla blockchain.',
 }
 

diff --git a/app/translations/korean.js b/app/translations/korean.js
@@ -124,7 +124,7 @@ const NOTIFICATIONS = {
   'notifications.success.accountSaved': '계정이 저장되었습니다!',
   'notifications.success.updatedWalletName':
     '지갑 이름이 성공적으로 업데이트되었습니다.',
-  'notificiations.failure.blockchainInfoFailure':
+  'notifications.failure.blockchainInfoFailure':
     '블록 체인 정보를 검색하지 못했습니다.',
 }
 

diff --git a/app/translations/portuguese.js b/app/translations/portuguese.js
@@ -143,7 +143,7 @@ const NOTIFICATIONS = {
   'notifications.success.accountSaved': 'Conta salva!',
   'notifications.success.updatedWalletName':
     'Nome do portfólio atualizado com sucesso.',
-  'notificiations.failure.blockchainInfoFailure':
+  'notifications.failure.blockchainInfoFailure':
     'Falha ao recuperar as informações da blockchain.',
 }
 

diff --git a/app/translations/russian.js b/app/translations/russian.js
@@ -142,7 +142,7 @@ const NOTIFICATIONS = {
   'notifications.success.accountSaved': 'Аккаунт сохранен!',
   'notifications.success.updatedWalletName':
     'Название кошелька успешно обновлено.',
-  'notificiations.failure.blockchainInfoFailure':
+  'notifications.failure.blockchainInfoFailure':
     'В процессе получения информации о блокчейне произошла ошибка.',
 }
 

diff --git a/app/translations/turkish.js b/app/translations/turkish.js
@@ -137,7 +137,7 @@ const NOTIFICATIONS = {
   'notifications.success.accountSaved': 'Hesap kaydedildi!',
   'notifications.success.updatedWalletName':
     'Cüzdan adı başarıyla güncellendi.',
-  'notificiations.failure.blockchainInfoFailure':
+  'notifications.failure.blockchainInfoFailure':
     'Blockchain bilgileri alınamadı.',
 }
 

diff --git a/app/translations/vietnamese.js b/app/translations/vietnamese.js
@@ -133,7 +133,7 @@ const NOTIFICATIONS = {
     'Nhận được thông tin blockchain mới nhất.',
   'notifications.success.accountSaved': 'Tài khoản đã được lưu!',
   'notifications.success.updatedWalletName': 'Tên ví được cập nhật thành công.',
-  'notificiations.failure.blockchainInfoFailure':
+  'notifications.failure.blockchainInfoFailure':
     'Không thể truy xuất thông tin blockchain.',
 }