feat: add keyless backup into onboarding flow

locales/base/translation.json

@@ -29,6 +29,7 @@
   "dataSaver": "Data Saver",
   "enableDataSaver": "Enable Data Saver",
   "dataSaverDetail": "Data Saver mode allows you to communicate with the the network through a trusted node. You can always change this mode in app settings.",
+  "keylessBackupSetupTitle": "Create Login",
   "keylessBackupSettingsTitle": "Email & Phone Backup",
   "keylessBackupSettingsDeleteError": "Your backup was not able to be deleted, please wait & try again later.",
   "setup": "Set Up",
@@ -102,9 +103,16 @@
   },
   "signInWithEmail": {
     "title": "Sign in with email",
-    "subtitle": "Sign in with your email to set it up as a backup.\n\nYou will be prompted to sign in again if you ever lose your wallet.",
+    "subtitle": "Sign in with your email to set it up as a backup. You will be prompted to sign in again if you ever lose your wallet.",
     "subtitleRestore": "Sign in with the email you used to set up your wallet backup.",
-    "google": "Sign in with Google"
+    "google": "Sign in with Google",
+    "signInAnotherWay": "Sign in another way",
+    "bottomSheet": {
+      "title": "Save your recovery phrase to create a wallet",
+      "description": "We’re going to be supporting other email providers soon, but in the meanwhile you’ll have to save your recovery phrase to finish creating a wallet.",
+      "continue": "Continue",
+      "skip": "Skip (not recommended)"
+    }
   },
   "keylessBackupPhoneInput": {
     "setup": {

src/account/AccountKeyEducation.tsx

@@ -17,7 +17,9 @@
 export default function AccountKeyEducation(props: Props) {
   function onComplete() {
     ValoraAnalytics.track(OnboardingEvents.backup_education_complete)
-    if (props.route.params?.nextScreen) {
+    if (props.route.params?.origin === 'cabOnboarding') {
+      navigate(Screens.OnboardingRecoveryPhrase, { origin: 'cabOnboarding' })
+    } else if (props.route.params?.nextScreen) {
       navigate(props.route.params?.nextScreen)
     } else {
       navigate(Screens.BackupPhrase)

src/analytics/Events.tsx

@@ -95,9 +95,11 @@ export enum SettingsEvents {
 export enum KeylessBackupEvents {
   wallet_security_primer_get_started = 'wallet_security_primer_get_started',
   cab_setup_recovery_phrase = 'cab_setup_recovery_phrase',
+  cab_sign_in_another_way = 'cab_sign_in_another_way',
   cab_sign_in_with_google = 'cab_sign_in_with_google',
   cab_sign_in_with_google_success = 'cab_sign_in_with_google_success',
   cab_sign_in_with_email_screen_cancel = 'cab_sign_in_with_email_screen_cancel',
+  cab_sign_in_with_email_screen_skip = 'cab_sign_in_with_email_screen_skip',
   cab_get_torus_keyshare_failed = 'cab_get_torus_keyshare_failed',
   cab_enter_phone_number_continue = 'cab_enter_phone_number_continue',
   cab_enter_phone_number_cancel = 'cab_enter_phone_number_cancel',

src/analytics/Properties.tsx

@@ -253,9 +253,11 @@ interface CommonKeylessBackupProps {
 interface KeylessBackupEventsProperties {
   [KeylessBackupEvents.wallet_security_primer_get_started]: undefined
   [KeylessBackupEvents.cab_setup_recovery_phrase]: undefined
+  [KeylessBackupEvents.cab_sign_in_another_way]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_sign_in_with_google]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_sign_in_with_google_success]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_sign_in_with_email_screen_cancel]: CommonKeylessBackupProps
+  [KeylessBackupEvents.cab_sign_in_with_email_screen_skip]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_enter_phone_number_continue]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_enter_phone_number_cancel]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_intro_continue]: CommonKeylessBackupProps

src/analytics/docs.ts

@@ -126,9 +126,11 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [SettingsEvents.settings_delete_keyless_backup]: ``,
   [KeylessBackupEvents.wallet_security_primer_get_started]: ``,
   [KeylessBackupEvents.cab_setup_recovery_phrase]: `When the recovery phrase link is pressed in the setup wallet backup screen`,
+  [KeylessBackupEvents.cab_sign_in_another_way]: `When the sign in another way button is pressed in the setup wallet backup screen`,
   [KeylessBackupEvents.cab_sign_in_with_google]: ``,
   [KeylessBackupEvents.cab_sign_in_with_google_success]: ``,
   [KeylessBackupEvents.cab_sign_in_with_email_screen_cancel]: ``,
+  [KeylessBackupEvents.cab_sign_in_with_email_screen_skip]: `When the skip button is pressed on the sign in with email bottom sheet`,
   [KeylessBackupEvents.cab_get_torus_keyshare_failed]: ``,
   [KeylessBackupEvents.cab_enter_phone_number_continue]: ``,
   [KeylessBackupEvents.cab_enter_phone_number_cancel]: `When the cancel button is pressed on the phone input screen`,

src/components/header/CustomHeader.tsx

@@ -12,6 +12,7 @@ interface Props {
 function CustomHeader({ left, right, title, style }: Props) {
   const titleComponent =
     typeof title === 'string' ? <Text style={headerStyles.headerTitle}>{title}</Text> : title
+
   return (
     <View style={style ? [styles.container, style] : styles.container}>
       {!!title && <View style={styles.titleContainer}>{titleComponent}</View>}

src/images/Images.ts

@@ -20,6 +20,7 @@ export const dappListLogo = require('src/images/dapp-list-logo.png')
 export const earn1 = require('src/images/earn1.png')
 export const earn2 = require('src/images/earn2.png')
 export const earn3 = require('src/images/earn3.png')
+export const email = require('src/images/email.png')
 export const fiatExchange = require('src/images/fiat-exchange.png')
 export const getVerified = require('src/images/get-verified.png')
 export const inviteFriends = require('src/images/invite-friends.png')

src/keylessBackup/SignInWithEmail.test.tsx

@@ -1,10 +1,12 @@
 import { fireEvent, render, waitFor } from '@testing-library/react-native'
 import React from 'react'
 import { Provider } from 'react-redux'
+import { KeylessBackupEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import SignInWithEmail from 'src/keylessBackup/SignInWithEmail'
 import { googleSignInCompleted } from 'src/keylessBackup/slice'
 import { KeylessBackupFlow, KeylessBackupOrigin } from 'src/keylessBackup/types'
+import { noHeader } from 'src/navigator/Headers'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import Logger from 'src/utils/Logger'
@@ -36,7 +38,7 @@ const renderComponent = (
           keylessBackupFlow,
           origin,
         }}
-        options={SignInWithEmail.navigationOptions}
+        options={noHeader}
       />
     </Provider>
   )
@@ -175,4 +177,50 @@ describe('SignInWithEmail', () => {
     expect(logWarnSpy).not.toHaveBeenCalled()
     expect(queryByTestId('Button/Loading')).toBeNull()
   })
+
+  it("pressing 'Sign in another way' then 'continue' navigates to recovery phrase education", () => {
+    const { getByTestId, getByText } = renderComponent(
+      KeylessBackupFlow.Setup,
+      KeylessBackupOrigin.Onboarding
+    )
+    expect(getByText('signInWithEmail.title')).toBeTruthy()
+    expect(getByText('signInWithEmail.subtitle')).toBeTruthy()
+    expect(getByTestId('SignInWithEmail/Google')).toBeTruthy()
+    expect(getByTestId('SignInWithEmail/SignInAnotherWay')).toBeTruthy()
+
+    fireEvent.press(getByTestId('SignInWithEmail/SignInAnotherWay'))
+    expect(getByTestId('KeylessBackupSignInWithEmail/BottomSheet')).toBeTruthy()
+
+    fireEvent.press(getByText('signInWithEmail.bottomSheet.continue'))
+    expect(navigate).toHaveBeenCalledWith(Screens.AccountKeyEducation, {
+      origin: 'cabOnboarding',
+    })
+    expect(ValoraAnalytics.track).toHaveBeenCalledWith(
+      KeylessBackupEvents.cab_setup_recovery_phrase
+    )
+  })
+
+  it("pressing 'Sign in another way' then 'Skip (not recommended)' navigates to next onboarding screen", () => {
+    const { getByTestId, getByText } = renderComponent(
+      KeylessBackupFlow.Setup,
+      KeylessBackupOrigin.Onboarding
+    )
+    expect(getByText('signInWithEmail.title')).toBeTruthy()
+    expect(getByText('signInWithEmail.subtitle')).toBeTruthy()
+    expect(getByTestId('SignInWithEmail/Google')).toBeTruthy()
+    expect(getByTestId('SignInWithEmail/SignInAnotherWay')).toBeTruthy()
+
+    fireEvent.press(getByTestId('SignInWithEmail/SignInAnotherWay'))
+    expect(getByTestId('KeylessBackupSignInWithEmail/BottomSheet')).toBeTruthy()
+
+    fireEvent.press(getByText('signInWithEmail.bottomSheet.skip'))
+    expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen)
+    expect(ValoraAnalytics.track).toHaveBeenCalledWith(
+      KeylessBackupEvents.cab_sign_in_with_email_screen_skip,
+      {
+        keylessBackupFlow: KeylessBackupFlow.Setup,
+        origin: KeylessBackupOrigin.Onboarding,
+      }
+    )
+  })
 })