Merge pull request #13960 from ryanml/recovery-loading-indicator

Adding in progress overlay/state for wallet recovery

app/browser/api/ledger.js

@@ -1157,7 +1157,7 @@ const recoverKeys = (state, useRecoveryKeyFile, key) => {
   if (typeof recoveryKey !== 'string') {
     // calling logError sets the error object
     state = logError(state, true, 'recoverKeys')
-    state = ledgerState.setRecoveryStatus(state, false)
+    state = aboutPreferencesState.setRecoveryStatus(state, false)
     return state
   }
 
@@ -1176,7 +1176,7 @@ const onWalletRecovery = (state, error, result) => {
     // if ledgerInfo.error is not null, the wallet info will not display in UI
     // logError sets ledgerInfo.error, so we must we clear it or UI will show an error
     state = logError(state, error.toString(), 'recoveryWallet')
-    state = ledgerState.setRecoveryStatus(state, false)
+    state = aboutPreferencesState.setRecoveryStatus(state, false)
   } else {
     // convert buffer to Uint8Array
     let seed = result && result.getIn(['properties', 'wallet', 'keyinfo', 'seed'])
@@ -1200,7 +1200,7 @@ const onWalletRecovery = (state, error, result) => {
       clearTimeout(balanceTimeoutId)
     }
     module.exports.getBalance(state)
-    state = ledgerState.setRecoveryStatus(state, true)
+    state = aboutPreferencesState.setRecoveryStatus(state, true)
   }
 
   return state

app/browser/reducers/ledgerReducer.js

@@ -52,6 +52,11 @@ const ledgerReducer = (state, action, immutableAction) => {
       }
     case appConstants.APP_RECOVER_WALLET:
       {
+        state = aboutPreferencesState.setPreferencesProp(
+          state,
+          'recoveryInProgress',
+          true
+        )
         state = ledgerApi.recoverKeys(
           state,
           action.get('useRecoveryKeyFile'),
@@ -321,7 +326,7 @@ const ledgerReducer = (state, action, immutableAction) => {
       }
     case appConstants.APP_ON_RESET_RECOVERY_STATUS:
       {
-        state = ledgerState.setRecoveryStatus(state, null)
+        state = aboutPreferencesState.setRecoveryStatus(state, null)
         state = ledgerState.setInfoProp(state, 'error', null)
         break
       }

app/common/state/aboutPreferencesState.js

@@ -43,6 +43,14 @@ const aboutPreferencesState = {
       return state
     }
     return state.setIn(['about', 'preferences', key], value)
+  },
+
+  setRecoveryStatus: (state, status) => {
+    state = validateState(state)
+    const date = new Date().getTime()
+    state = aboutPreferencesState.setPreferencesProp(state, 'recoveryInProgress', false)
+    state = aboutPreferencesState.setPreferencesProp(state, 'recoverySucceeded', status)
+    return aboutPreferencesState.setPreferencesProp(state, 'updatedStamp', date)
   }
 }
 module.exports = aboutPreferencesState

app/common/state/ledgerState.js

@@ -353,13 +353,6 @@ const ledgerState = {
   /**
    * OTHERS
    */
-  setRecoveryStatus: (state, status) => {
-    state = validateState(state)
-    const date = new Date().getTime()
-    state = state.setIn(['about', 'preferences', 'recoverySucceeded'], status)
-    return state.setIn(['about', 'preferences', 'updatedStamp'], date)
-  },
-
   setLedgerError: (state, error, caller) => {
     state = validateState(state)
     if (error == null && caller == null) {

app/extensions/brave/locales/en-US/preferences.properties

@@ -167,6 +167,8 @@ ledgerPaymentsShown=Brave Payments
 ledgerRecoveryContent=Note: The recovered BAT wallet will replace the current BAT wallet, which will be discarded.
 ledgerRecoveryFailedMessage=Please re-enter keys or try different keys.
 ledgerRecoveryFailedTitle=Recovery Failed
+ledgerRecoveryInProgress=Recovery in progress...
+ledgerRecoveryInProgressTitle=Recovering
 ledgerRecoveryNetworkFailedMessage=Please check your internet connection and try again.
 ledgerRecoveryNetworkFailedTitle=Network Error
 ledgerRecoverySubtitle=Enter your BAT wallet recovery key below:

app/renderer/components/preferences/payment/ledgerRecovery.js

@@ -64,6 +64,7 @@ class LedgerRecoveryContent extends ImmutableComponent {
     }
     const recoverySucceeded = this.props.ledgerData.get('recoverySucceeded')
     const recoveryError = this.props.ledgerData.getIn(['error', 'error'])
+    const recoveryInProgress = this.props.ledgerData.get('recoveryInProgress')
     const isNetworkError = typeof recoveryError === 'object'
 
     return <section>
@@ -116,6 +117,22 @@ class LedgerRecoveryContent extends ImmutableComponent {
           </section>
           : null
       }
+      {
+        recoveryInProgress === true
+          ? <section className={css(styles.recoveryOverlay)} onKeyDown={(e) => this.onEscape(e, false)} ref='ledgerRecoveryOverlay' tabIndex='0'>
+            <h1 className={css(styles.recoveryOverlay__textColor)} data-l10n-id='ledgerRecoveryInProgressTitle' />
+            <p className={css(styles.recoveryOverlay__textColor, styles.recoveryOverlay__spaceAround)}
+              data-l10n-id='ledgerRecoveryInProgress'
+              data-test-id='ledgerRecoveryInProgress'
+            />
+            <BrowserButton secondaryColor
+              l10nId='cancel'
+              testId='recoveryOverlayErrorButton'
+              onClick={this.onRecoveryOverlay.bind(this, false)}
+            />
+          </section>
+          : null
+      }
       <h4 className={css(styles.recoveryContent__h4)} data-l10n-id='ledgerRecoverySubtitle' />
       <SettingsList className={css(commonStyles.noMarginBottom)}>
         <SettingItem>

test/unit/app/browser/api/ledgerTest.js

@@ -29,6 +29,7 @@ describe('ledger api unit tests', function () {
   let request
   let walletPassphraseReturn
   let updater
+  let aboutPreferencesState
 
   // constants
   const videoId = 'youtube_kLiLOkzLetE'
@@ -198,6 +199,7 @@ describe('ledger api unit tests', function () {
     ledgerUtil = require('../../../../../app/common/lib/ledgerUtil')
     ledgerState = require('../../../../../app/common/state/ledgerState')
     updateState = require('../../../../../app/common/state/updateState')
+    aboutPreferencesState = require('../../../../../app/common/state/aboutPreferencesState')
     updater = require('../../../../../app/updater')
 
     // once everything is stubbed, load the ledger
@@ -1786,9 +1788,13 @@ describe('ledger api unit tests', function () {
         }
       }
     })
+    const stateWithAbout = defaultAppState
+      .set('about', Immutable.fromJS({
+        preferences: {}
+      }))
 
     before(function () {
-      setRecoveryStatusSpy = sinon.spy(ledgerState, 'setRecoveryStatus')
+      setRecoveryStatusSpy = sinon.spy(aboutPreferencesState, 'setRecoveryStatus')
       getBalanceSpy = sinon.spy(ledgerApi, 'getBalance')
       onLedgerCallbackSpy.reset()
       fakeClock = sinon.useFakeTimers()
@@ -1808,10 +1814,11 @@ describe('ledger api unit tests', function () {
     })
 
     it('on error', function () {
-      const result = ledgerApi.onWalletRecovery(defaultAppState, 'Wrong key')
+      const result = ledgerApi.onWalletRecovery(stateWithAbout, 'Wrong key')
       const expectedSate = defaultAppState
         .set('about', Immutable.fromJS({
           preferences: {
+            recoveryInProgress: false,
             recoverySucceeded: false,
             updatedStamp: 0
           }
@@ -1825,10 +1832,11 @@ describe('ledger api unit tests', function () {
     })
 
     it('success', function () {
-      const result = ledgerApi.onWalletRecovery(defaultAppState, null, param)
+      const result = ledgerApi.onWalletRecovery(stateWithAbout, null, param)
       const expectedSate = defaultAppState
         .set('about', Immutable.fromJS({
           preferences: {
+            recoveryInProgress: false,
             recoverySucceeded: true,
             updatedStamp: 0
           }

test/unit/app/browser/reducers/ledgerReducerTest.js

@@ -15,6 +15,7 @@ describe('ledgerReducer unit tests', function () {
   let appState
   let paymentsEnabled
   let returnedState
+  let fakeAboutPreferencesState
 
   before(function () {
     mockery.enable({
@@ -64,6 +65,7 @@ describe('ledgerReducer unit tests', function () {
     fakeLedgerState = {
       resetSynopsis: dummyModifyState,
       setRecoveryStatus: dummyModifyState,
+      setRecoveryInProgressStatus: dummyModifyState,
       setInfoProp: dummyModifyState,
       saveSynopsis: dummyModifyState,
       savePromotion: dummyModifyState,
@@ -75,9 +77,14 @@ describe('ledgerReducer unit tests', function () {
       onInterval: dummyModifyState,
       removePromotionNotification: () => {}
     }
+    fakeAboutPreferencesState = {
+      setRecoveryStatus: dummyModifyState,
+      setPreferencesProp: dummyModifyState
+    }
     mockery.registerMock('../../browser/api/ledger', fakeLedgerApi)
     mockery.registerMock('../../common/state/ledgerState', fakeLedgerState)
     mockery.registerMock('../../browser/api/ledgerNotifications', fakeLedgerNotifications)
+    mockery.registerMock('../../common/state/aboutPreferencesState', fakeAboutPreferencesState)
     mockery.registerMock('../../../js/settings', {
       getSetting: (settingKey, settingsCollection, value) => {
         if (settingKey === settings.PAYMENTS_ENABLED) {
@@ -144,8 +151,11 @@ describe('ledgerReducer unit tests', function () {
 
   describe('APP_RECOVER_WALLET', function () {
     let recoverKeysSpy
+    let modifiedState
+    let setPreferencesPropSpy
     before(function () {
       recoverKeysSpy = sinon.spy(fakeLedgerApi, 'recoverKeys')
+      setPreferencesPropSpy = sinon.spy(fakeAboutPreferencesState, 'setPreferencesProp')
       returnedState = ledgerReducer(appState, Immutable.fromJS({
         actionType: appConstants.APP_RECOVER_WALLET,
         useRecoveryKeyFile: 'useKeyFile',
@@ -154,9 +164,14 @@ describe('ledgerReducer unit tests', function () {
     })
     after(function () {
       recoverKeysSpy.restore()
+      setPreferencesPropSpy.restore()
+    })
+    it('calls aboutPreferencesState.setPreferencesProp', function () {
+      assert(setPreferencesPropSpy.withArgs(appState, 'recoveryInProgress', true).calledOnce)
     })
     it('calls ledgerApi.recoverKeys', function () {
-      assert(recoverKeysSpy.withArgs(appState, 'useKeyFile', 'firstKey').calledOnce)
+      modifiedState = fakeAboutPreferencesState.setPreferencesProp(appState, 'recoveryInProgress', true)
+      assert(recoverKeysSpy.withArgs(modifiedState, 'useKeyFile', 'firstKey').calledOnce)
     })
     it('returns a modified state', function () {
       assert.notDeepEqual(returnedState, appState)
@@ -510,17 +525,22 @@ describe('ledgerReducer unit tests', function () {
   describe('APP_ON_RESET_RECOVERY_STATUS', function () {
     let setRecoveryStatusSpy
     before(function () {
-      setRecoveryStatusSpy = sinon.spy(fakeLedgerState, 'setRecoveryStatus')
+      setRecoveryStatusSpy = sinon.spy(fakeAboutPreferencesState, 'setRecoveryStatus')
       returnedState = ledgerReducer(appState, Immutable.fromJS({
         actionType: appConstants.APP_ON_RESET_RECOVERY_STATUS
       }))
     })
     after(function () {
       setRecoveryStatusSpy.restore()
     })
+    /*
     it('calls ledgerApi.setRecoveryStatus', function () {
       assert(setRecoveryStatusSpy.withArgs(appState, null).calledOnce)
     })
+    */
+    it('calls aboutPreferencesState.setRecoveryStatus', function () {
+      assert(setRecoveryStatusSpy.withArgs(appState, null).calledOnce)
+    })
     it('returns a modified state', function () {
       assert.notDeepEqual(returnedState, appState)
     })

test/unit/app/common/state/aboutPreferencesStateTest.js

@@ -7,7 +7,7 @@ const assert = require('assert')
 const Immutable = require('immutable')
 const aboutPreferencesState = require('../../../../../app/common/state/aboutPreferencesState')
 
-describe('ledgerState unit test', function () {
+describe('aboutPreferencesState unit test', function () {
   // State
   const defaultState = Immutable.fromJS({
     about: {
@@ -61,4 +61,19 @@ describe('ledgerState unit test', function () {
       assert.notEqual(result, null)
     })
   })
+
+  describe('setRecoveryStatus', function () {
+    it('updates recoverySucceeded', function () {
+      const result = aboutPreferencesState.setRecoveryStatus(defaultState, true)
+      assert.equal(result.getIn(['about', 'preferences', 'recoverySucceeded']), true)
+    })
+    it('recoveryInProgress is false when recovery is successful', function () {
+      const result = aboutPreferencesState.setRecoveryStatus(defaultState, true)
+      assert.equal(result.getIn(['about', 'preferences', 'recoveryInProgress']), false)
+    })
+    it('recoveryInProgress is false when recovery is not successful', function () {
+      const result = aboutPreferencesState.setRecoveryStatus(defaultState, false)
+      assert.equal(result.getIn(['about', 'preferences', 'recoveryInProgress']), false)
+    })
+  })
 })