[Wallet] Don't allow going back after wallet is imported successfully (…

…#6279)

### Description

After successfully restoring a wallet, it's not possible to go back anymore by swiping on iOS or using the back button on Android.

### Tested

Manually

### Related issues

- Fixes #4393

### Backwards compatibility

Yes

packages/mobile/__mocks__/src/navigator/NavigationService.ts

@@ -1,4 +1,5 @@
 export const navigate = jest.fn()
+export const navigateClearingStack = jest.fn()
 export const replace = jest.fn()
 export const navigateHome = jest.fn()
 export const navigateBack = jest.fn()

packages/mobile/src/import/saga.ts

@@ -17,7 +17,7 @@ import {
   importBackupPhraseSuccess,
 } from 'src/import/actions'
 import { redeemInviteSuccess } from 'src/invite/actions'
-import { navigate, navigateHome } from 'src/navigator/NavigationService'
+import { navigate, navigateClearingStack, navigateHome } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { fetchTokenBalanceInWeiWithRetry } from 'src/tokens/saga'
 import Logger from 'src/utils/Logger'
@@ -82,7 +82,7 @@ export function* importBackupPhraseSaga({ phrase, useEmptyWallet }: ImportBackup
       yield put(setHasSeenVerificationNux(true))
       navigateHome()
     } else {
-      navigate(Screens.VerificationEducationScreen)
+      navigateClearingStack(Screens.VerificationEducationScreen)
     }
 
     yield put(importBackupPhraseSuccess())

packages/mobile/src/navigator/NavigationService.ts

@@ -1,7 +1,7 @@
 // (https://github.com/react-navigation/react-navigation/issues/1439)
 
 import { NavigationActions, StackActions } from '@react-navigation/compat'
-import { NavigationContainerRef } from '@react-navigation/native'
+import { CommonActions, NavigationContainerRef } from '@react-navigation/native'
 import { createRef } from 'react'
 import sleep from 'sleep-promise'
 import { PincodeType } from 'src/account/reducer'
@@ -88,6 +88,24 @@ export function navigate<RouteName extends keyof StackParamList>(
     })
 }
 
+export const navigateClearingStack: SafeNavigate = (...args) => {
+  const [routeName, params] = args
+  ensureNavigator()
+    .then(() => {
+      Logger.debug(`${TAG}@navigateClearingStack`, `Dispatch ${routeName}`)
+
+      navigationRef.current?.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [{ name: routeName, params }],
+        })
+      )
+    })
+    .catch((reason) => {
+      Logger.error(`${TAG}@navigateClearingStack`, `Navigation failure: ${reason}`)
+    })
+}
+
 export async function ensurePincode(): Promise<boolean> {
   const pincodeType = pincodeTypeSelector(store.getState())
 

packages/mobile/src/onboarding/UseBackToWelcomeScreen.tsx

@@ -54,7 +54,9 @@ export function useBackToWelcomeScreen({ backAnalyticsEvents }: Props) {
     // See https://reactnavigation.org/docs/preventing-going-back
     const cancelBeforeRemove = navigation.addListener('beforeRemove', (event) => {
       const resetScreenName = (event?.data?.action?.payload as any)?.routes?.[0]?.name
-      if (resetScreenName !== Screens.DrawerNavigator) {
+      const processCanceled =
+        [Screens.VerificationEducationScreen, Screens.DrawerNavigator].indexOf(resetScreenName) < 0
+      if (processCanceled) {
         backAnalyticsEvents.forEach((analyticsEvent) => {
           ValoraAnalytics.track(analyticsEvent)
         })

packages/mobile/src/pincode/PincodeSet.test.tsx

@@ -1,7 +1,7 @@
-import { CommonActions } from '@react-navigation/native'
 import * as React from 'react'
 import { fireEvent, flushMicrotasksQueue, render } from 'react-native-testing-library'
 import { Provider } from 'react-redux'
+import { navigateClearingStack } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import PincodeSet from 'src/pincode/PincodeSet'
 import { createMockStore, getMockStackScreenProps } from 'test/utils'
@@ -56,13 +56,7 @@ describe('Pincode', () => {
     jest.runAllTimers()
     await flushMicrotasksQueue()
 
-    const dispatchAction = mockDispatch.mock.calls[0][0]()
-    expect(dispatchAction).toEqual(
-      CommonActions.reset({
-        index: 0,
-        routes: [{ name: Screens.VerificationEducationScreen }],
-      })
-    )
+    expect(navigateClearingStack).toBeCalledWith(Screens.VerificationEducationScreen)
   })
 
   it("displays an error text when the pins don't match", async () => {

packages/mobile/src/pincode/PincodeSet.tsx

@@ -2,7 +2,6 @@
  * This is a reactnavigation SCREEN, which we use to set a PIN.
  */
 import colors from '@celo/react-components/styles/colors'
-import { CommonActions } from '@react-navigation/native'
 import { StackScreenProps } from '@react-navigation/stack'
 import * as React from 'react'
 import { WithTranslation } from 'react-i18next'
@@ -16,6 +15,7 @@ import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import DevSkipButton from 'src/components/DevSkipButton'
 import { Namespaces, withTranslation } from 'src/i18n'
 import { nuxNavigationOptions } from 'src/navigator/Headers'
+import { navigate, navigateClearingStack } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
 import { DEFAULT_CACHE_ACCOUNT, isPinValid } from 'src/pincode/authentication'
@@ -60,12 +60,12 @@ export class PincodeSet extends React.Component<Props, State> {
     errorText: undefined,
   }
 
-  getNextScreen = () => {
+  navigateToNextScreen = () => {
     if (this.props.choseToRestoreAccount) {
-      return Screens.ImportWallet
+      navigate(Screens.ImportWallet)
+    } else {
+      navigateClearingStack(Screens.VerificationEducationScreen)
     }
-
-    return Screens.VerificationEducationScreen
   }
 
   onChangePin1 = (pin1: string) => {
@@ -103,13 +103,7 @@ export class PincodeSet extends React.Component<Props, State> {
       setCachedPin(DEFAULT_CACHE_ACCOUNT, pin1)
       this.props.setPincode(PincodeType.CustomPin)
       ValoraAnalytics.track(OnboardingEvents.pin_set)
-
-      this.props.navigation.dispatch(() => {
-        return CommonActions.reset({
-          index: 0,
-          routes: [{ name: this.getNextScreen() }],
-        })
-      })
+      this.navigateToNextScreen()
     } else {
       this.props.navigation.setParams({ isVerifying: false })
       ValoraAnalytics.track(OnboardingEvents.pin_invalid, { error: 'Pins do not match' })
@@ -128,7 +122,7 @@ export class PincodeSet extends React.Component<Props, State> {
 
     return (
       <SafeAreaView style={styles.container}>
-        <DevSkipButton nextScreen={this.getNextScreen()} />
+        <DevSkipButton onSkip={this.navigateToNextScreen} />
         {isVerifying ? (
           // Verify
           <Pincode