feat: add keyless backup into onboarding flow #5591

MuckT · 2024-06-28T21:09:40Z

Description

Adds the keyless backup flow into onboarding with a redesigned SignInWithEmail.tsx screen specifically for onboarding. Note the onboarding background colors are fixed in #5592 and the below videos use a throwaway number and seed phrase.

iOS CAB	iOS Recovery Phrase	iOS Skip
Screen.Recording.2024-07-01.at.5.09.36.PM.mov	Screen.Recording.2024-07-01.at.4.41.22.PM.mov	Screen.Recording.2024-07-01.at.4.42.31.PM.mov

Android CAB	Android Recovery Phrase	Android Skip
Screen.Recording.2024-07-02.at.5.24.17.PM.mov	Screen.Recording.2024-07-02.at.5.16.34.PM.mov	Screen.Recording.2024-07-02.at.5.18.15.PM.mov

Test plan

Tested locally on iOS
Tested locally on Android
Unit tests updated

Related issues

Fixes ACT-1219

Backwards compatibility

Yes

Network scalability

N/A

…arding

codecov · 2024-06-28T21:18:56Z

Codecov Report

Attention: Patch coverage is 87.32394% with 9 lines in your changes missing coverage. Please review.

Project coverage is 86.73%. Comparing base (2e02e91) to head (ca8a587).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5591      +/-   ##
==========================================
+ Coverage   86.72%   86.73%   +0.01%     
==========================================
  Files         773      774       +1     
  Lines       31567    31626      +59     
  Branches     5456     5182     -274     
==========================================
+ Hits        27375    27430      +55     
- Misses       3963     4151     +188     
+ Partials      229       45     -184

Files	Coverage Δ
branding/celo/src/images/email.png	`100.00% <ø> (ø)`
src/analytics/Events.tsx	`100.00% <100.00%> (ø)`
src/analytics/Properties.tsx	`100.00% <ø> (ø)`
src/images/Images.ts	`100.00% <100.00%> (ø)`
src/keylessBackup/SignInWithEmail.tsx	`98.92% <100.00%> (+0.67%)`	⬆️
...boarding/registration/OnboardingRecoveryPhrase.tsx	`86.79% <100.00%> (+0.25%)`	⬆️
test/values.ts	`100.00% <ø> (ø)`
src/account/AccountKeyEducation.tsx	`75.00% <0.00%> (-5.00%)`	⬇️
src/onboarding/steps.ts	`91.04% <62.50%> (-0.49%)`	⬇️

... and 76 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2e02e91...ca8a587. Read the comment docs.

src/navigator/types.tsx

# Conflicts: # src/keylessBackup/SignInWithEmail.test.tsx # src/keylessBackup/SignInWithEmail.tsx

src/onboarding/steps.ts

satish-ravi · 2024-07-03T17:22:25Z

src/components/header/CustomHeader.tsx

-    typeof title === 'string' ? <Text style={headerStyles.headerTitle}>{title}</Text> : title
+function CustomHeader({ left, right, title, style, subTitle }: Props) {
+  const titleComponent = subTitle ? (
+    <HeaderTitleWithSubtitle title={title} subTitle={subTitle} />


do we need the extra subtitle option here? Instead can the consumers just pass <HeaderTitleWithSubtitle title={title} subTitle={subTitle} />, since title already accepts ReactNode as a prop?

Fixed in ~~32b452a~~ 85474bc!

src/keylessBackup/types.ts

satish-ravi · 2024-07-03T17:29:52Z

src/onboarding/registration/OnboardingRecoveryPhrase.tsx

  const onboardingProps = useSelector(onboardingPropsSelector)
-  const { step, totalSteps } = getOnboardingStepValues(Screens.ProtectWallet, onboardingProps)
+  // Use a lower step count for CAB onboarding


what does "lower" mean here?

It's similar to what was done in here where we use a different screen to have a consistent step count.

src/keylessBackup/SignInWithEmail.tsx

satish-ravi · 2024-07-03T18:59:03Z

src/keylessBackup/SignInWithEmail.tsx

+  const onPressContinue = () => {
+    ValoraAnalytics.track(KeylessBackupEvents.cab_setup_recovery_phrase)
+    bottomSheetRef.current?.close()
+    goToNextOnboardingScreen({
+      firstScreenInCurrentStep: Screens.SignInWithEmail,
+      onboardingProps: { ...onboardingProps, showRecoveryPhraseEducation: true },
+    })
+  }
+
+  const onPressSkip = () => {
+    ValoraAnalytics.track(KeylessBackupEvents.cab_sign_in_with_email_screen_skip, {
+      keylessBackupFlow,
+      origin,
+    })
+    goToNextOnboardingScreen({
+      firstScreenInCurrentStep: Screens.SignInWithEmail,
+      onboardingProps,
+    })
+  }


nit: move this to the bottom sheet componet since its only used there?

Changed in 685f385!

satish-ravi · 2024-07-03T19:04:44Z

src/onboarding/steps.ts

+            finishOnboarding(Screens.ChooseYourAdventure)
+          } else {
+            // DO NOT CLEAR NAVIGATION STACK HERE - breaks restore flow on initial app open in native-stack v6
+            navigate(Screens.VerificationStartScreen)


In the videos, looks like after backup is successful, the flow navigates to home directly, is that expected? Per this, looks like it should go to phone verification / CYA?

This is fixed in #5611.

satish-ravi · 2024-07-03T19:07:53Z

src/keylessBackup/SignInWithEmail.tsx

+      forwardedRef={bottomSheetRef}
+      title={t('signInWithEmail.bottomSheet.title')}
+      titleStyle={styles.bottomSheetTitle}
+      testId="KeylessBackupSignInWithEmail/HelpInfoBottomSheet"


nit: this is not help info right? could use a better name.

Fixed in 0320f30!

satish-ravi · 2024-07-03T19:09:47Z

src/keylessBackup/SignInWithEmail.tsx

@@ -124,8 +245,15 @@ const styles = StyleSheet.create({
  scrollContainer: {
    padding: Spacing.Thick24,
  },
+  header: {
+    paddingHorizontal: variables.contentPadding,


this is 16 right? seems like the scroll container uses 24, should this be consistent?

I tried to be consistent with headers in the previous screens which appear to be 16.

src/components/header/CustomHeader.tsx

src/onboarding/steps.ts

satish-ravi · 2024-07-09T21:19:54Z

src/onboarding/steps.ts

+          if (showRecoveryPhraseEducation) {
+            navigate(Screens.AccountKeyEducation, {
+              origin: 'cabOnboarding',
+            })


I think we should remove this case and directly navigate to this screen from SignInWithEmail. Otherwise there is an edge case where our step counter fn could crash when it walks thru graph since AccountKeyEducation does not have a next step. Although practically this may never happen since showRecoveryPhraseEducation will be false, but anyways good to keep this clean.

satish-ravi · 2024-07-09T21:20:25Z

src/keylessBackup/SignInWithEmail.tsx

+    goToNextOnboardingScreen({
+      firstScreenInCurrentStep: Screens.SignInWithEmail,
+      onboardingProps: { ...onboardingProps, showRecoveryPhraseEducation: true },
+    })


per comment in steps, this can just navigate directly

Fixed in 0385484!

src/components/header/CustomHeader.tsx

MuckT added 6 commits June 28, 2024 13:43

feat: add cab in onboarding

381291e

Merge branch 'main' into tomm/act-1219

209136b

fix: handle possible undefined origin

6d56803

fix: resolve build errors

1720ed2

chore: use onboarding background in account key education during onbo…

3717f10

…arding

test: update snapshots and expected navigation

135b3ba

MuckT added 6 commits June 28, 2024 17:17

fix: remove unused styles

cde90a9

chore: remove onboarding background

e037914

chore: remove onboarding background color

aaef4c5

fix: remove hardcoded feature gate

46325cb

chore: update branding sha

cc23b26

chore: update snapshot

1b20705

MuckT commented Jun 29, 2024

View reviewed changes

src/navigator/types.tsx Outdated Show resolved Hide resolved

MuckT added 4 commits July 1, 2024 09:49

fix: use correct steps during cab in onboarding

b9d0691

Merge branch 'main' into tomm/act-1219

222e9a2

# Conflicts: # src/keylessBackup/SignInWithEmail.test.tsx # src/keylessBackup/SignInWithEmail.tsx

Merge branch 'main' into tomm/act-1219

224c95b

test: update sign in with email bottom sheet bypass

7486173

MuckT commented Jul 1, 2024

View reviewed changes

src/onboarding/steps.ts Show resolved Hide resolved

MuckT added 4 commits July 2, 2024 15:47

fix: use protect wallet steps on onboarding recovery phrase non cab flow

1aee3c9

style: remove use of nextScreen nav prop

0a40ff3

fix: onboarding nav from biometrics to cab

f6119c9

fix: headers on android sign in with email

998393f

MuckT marked this pull request as ready for review July 3, 2024 00:29

MuckT and others added 2 commits July 2, 2024 17:33

Merge branch 'main' into tomm/act-1219

5c7f752

Merge branch 'main' into tomm/act-1219

bf4648e

satish-ravi reviewed Jul 3, 2024

View reviewed changes

MuckT added 3 commits July 3, 2024 18:10

style: update test id for bottom sheet

0320f30

style: is setup in onboarding

0224ecb

style: use destructured origin and flow

a053685

MuckT and others added 7 commits July 7, 2024 23:02

style: use is setup const

c998a0d

fix: remove unneeded keyless backup origin

acb95ae

style: simplify title component of custom header

32b452a

style: move functions into bottom sheet

685f385

Merge branch 'main' into tomm/act-1219

353378a

fix: only show header title during onboarding setup

587392f

style: pass header with subtitle to title prop of custom header

85474bc

satish-ravi reviewed Jul 9, 2024

View reviewed changes

src/components/header/CustomHeader.tsx Outdated Show resolved Hide resolved

src/onboarding/steps.ts Outdated Show resolved Hide resolved

MuckT and others added 3 commits July 9, 2024 08:19

chore: remove unused subTitle prop

b93f45c

fix: remove unnecessary steps

a2a2d07

Merge branch 'main' into tomm/act-1219

ddd7cb1

satish-ravi reviewed Jul 9, 2024

View reviewed changes

MuckT added 2 commits July 9, 2024 15:09

fix: remove onboarding prop and navigate directly

0385484

style: remove extra empty line

ca8a587

satish-ravi approved these changes Jul 10, 2024

View reviewed changes

MuckT added this pull request to the merge queue Jul 10, 2024

Merged via the queue into main with commit 710b2c9 Jul 10, 2024
16 checks passed

MuckT deleted the tomm/act-1219 branch July 10, 2024 03:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add keyless backup into onboarding flow #5591

feat: add keyless backup into onboarding flow #5591

MuckT commented Jun 28, 2024 •

edited

Loading

codecov bot commented Jun 28, 2024 •

edited

Loading

satish-ravi Jul 3, 2024

MuckT Jul 8, 2024 •

edited

Loading

satish-ravi Jul 3, 2024

MuckT Jul 4, 2024

satish-ravi Jul 3, 2024

MuckT Jul 8, 2024

satish-ravi Jul 3, 2024

MuckT Jul 4, 2024

satish-ravi Jul 3, 2024

MuckT Jul 4, 2024

satish-ravi Jul 3, 2024

MuckT Jul 4, 2024

satish-ravi Jul 9, 2024

satish-ravi Jul 9, 2024

MuckT Jul 9, 2024

feat: add keyless backup into onboarding flow #5591

feat: add keyless backup into onboarding flow #5591

Conversation

MuckT commented Jun 28, 2024 • edited Loading

Description

Test plan

Related issues

Backwards compatibility

Network scalability

codecov bot commented Jun 28, 2024 • edited Loading

Codecov Report

Choose a reason for hiding this comment

MuckT Jul 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MuckT commented Jun 28, 2024 •

edited

Loading

codecov bot commented Jun 28, 2024 •

edited

Loading

MuckT Jul 8, 2024 •

edited

Loading