[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>

src/view/com/auth/create/Step1.tsx

@@ -16,6 +16,10 @@ import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
 import {LOCAL_DEV_SERVICE, STAGING_SERVICE, PROD_SERVICE} from 'state/index'
 import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags'
 
+/** STEP 1: Your hosting provider
+ * @field Bluesky (default)
+ * @field Other (staging, local dev, your own PDS, etc.)
+ */
 export const Step1 = observer(({model}: {model: CreateAccountModel}) => {
   const pal = usePalette('default')
   const [isDefaultSelected, setIsDefaultSelected] = React.useState(true)

src/view/com/auth/create/Step2.tsx

@@ -12,6 +12,15 @@ import {Policies} from './Policies'
 import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
 import {useStores} from 'state/index'
 
+/** STEP 2: Your account
+ * @field Invite code or waitlist
+ * @field Email address
+ * @field Email address
+ * @field Email address
+ * @field Password
+ * @field Birth date
+ * @readonly Terms of service & privacy policy
+ */
 export const Step2 = observer(({model}: {model: CreateAccountModel}) => {
   const pal = usePalette('default')
   const store = useStores()

src/view/com/auth/create/Step3.tsx

@@ -10,6 +10,9 @@ import {createFullHandle} from 'lib/strings/handles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
 
+/** STEP 3: Your user handle
+ * @field User handle
+ */
 export const Step3 = observer(({model}: {model: CreateAccountModel}) => {
   const pal = usePalette('default')
   return (