[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/onboarding/Onboarding.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Welcome} from './Welcome'
+import {useStores} from 'state/index'
+import {track} from 'lib/analytics/analytics'
+
+enum OnboardingStep {
+  WELCOME = 'WELCOME',
+  // SELECT_INTERESTS = 'SELECT_INTERESTS',
+  COMPLETE = 'COMPLETE',
+}
+type OnboardingState = {
+  currentStep: OnboardingStep
+}
+type Action = {type: 'NEXT_STEP'}
+const initialState: OnboardingState = {
+  currentStep: OnboardingStep.WELCOME,
+}
+const reducer = (state: OnboardingState, action: Action): OnboardingState => {
+  switch (action.type) {
+    case 'NEXT_STEP':
+      switch (state.currentStep) {
+        case OnboardingStep.WELCOME:
+          track('Onboarding:Begin')
+          return {...state, currentStep: OnboardingStep.COMPLETE}
+        case OnboardingStep.COMPLETE:
+          track('Onboarding:Complete')
+          return state
+        default:
+          return state
+      }
+    default:
+      return state
+  }
+}
+
+export const Onboarding = () => {
+  const pal = usePalette('default')
+  const rootStore = useStores()
+  const [state, dispatch] = React.useReducer(reducer, initialState)
+  const next = React.useCallback(
+    () => dispatch({type: 'NEXT_STEP'}),
+    [dispatch],
+  )
+
+  React.useEffect(() => {
+    if (state.currentStep === OnboardingStep.COMPLETE) {
+      // navigate to home
+      rootStore.shell.closeModal()
+    }
+  }, [state.currentStep, rootStore.shell])
+
+  return (
+    <View style={[pal.view, styles.container]}>
+      {state.currentStep === OnboardingStep.WELCOME && <Welcome next={next} />}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+  },
+})