[APP-775] Add Welcome screen after account creation (#1038)

* add comments to step 1-3

* add onboarding screen

* add analytics for onboarding tracking

* fix useEffect

* change text

* change icon size

* put onboarding into bottom sheet modal instead of react navigation

* wip

* Simplify the type validation

* Fix: only trigger onboarding modal when account creation succeeds

* Add the 'session-ready' event which fires when the new session is stable

* Use the 'session-ready' event to trigger the onboarding modal

* update copy

* update copy

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 9 insertions, 2 deletions

diff --git a/src/state/models/ui/create-account.ts b/src/state/models/ui/create-account.ts
index d35b3557d..04e1554c6 100644
--- a/src/state/models/ui/create-account.ts
+++ b/src/state/models/ui/create-account.ts
@@ -108,6 +108,13 @@ export class CreateAccountModel {
     }
     this.setError('')
     this.setIsProcessing(true)
+
+    // open the onboarding modal after the session is created
+    const sessionReadySub = this.rootStore.onSessionReady(() => {
+      sessionReadySub.remove()
+      this.rootStore.shell.openModal({name: 'onboarding'})
+    })
+
     try {
       await this.rootStore.session.createAccount({
         service: this.serviceUrl,
@@ -116,7 +123,9 @@ export class CreateAccountModel {
         password: this.password,
         inviteCode: this.inviteCode,
       })
+      track('Create Account')
     } catch (e: any) {
+      sessionReadySub.remove()
       let errMsg = e.toString()
       if (e instanceof ComAtprotoServerCreateAccount.InvalidInviteCodeError) {
         errMsg =
@@ -126,8 +135,6 @@ export class CreateAccountModel {
       this.setIsProcessing(false)
       this.setError(cleanError(errMsg))
       throw e
-    } finally {
-      track('Create Account')
     }
   }