continue with onboarding flow

packages/core-mobile/app/new/components/SimpleTextInput.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import {
+  Icons,
+  TextInput,
+  TouchableOpacity,
+  useTheme,
+  View
+} from '@avalabs/k2-alpine'
+
+export const SimpleTextInput = ({
+  name,
+  setName,
+  placeholder
+}: {
+  name: string
+  setName: (name: string) => void
+  placeholder?: string
+}): React.JSX.Element => {
+  const {
+    theme: { colors }
+  } = useTheme()
+  return (
+    <View
+      sx={{
+        marginTop: 27,
+        paddingHorizontal: 13,
+        backgroundColor: colors.$surfaceSecondary,
+        borderRadius: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: 44
+      }}>
+      <TextInput
+        sx={{
+          flex: 1,
+          fontFamily: 'Inter-Regular',
+          marginRight: 13,
+          height: 44,
+          fontSize: 16,
+          color: colors.$textPrimary
+        }}
+        value={name}
+        onChangeText={setName}
+        placeholder={placeholder}
+      />
+      {name.length !== 0 && (
+        <TouchableOpacity onPress={() => setName('')}>
+          <Icons.Action.Clear
+            width={16}
+            height={16}
+            color={colors.$textSecondary}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  )
+}

packages/core-mobile/app/new/components/onboarding/AddRecoveryMethods.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { View, Text, Button } from '@avalabs/k2-alpine'
+import BlurredBarsContentLayout from 'new/components/navigation/BlurredBarsContentLayout'
+import {
+  RecoveryMethod,
+  RecoveryMethods
+} from 'new/hooks/useAvailableRecoveryMethods'
+import { OidcAuth } from 'new/types'
+import { RecoveryMethodList } from '../../components/RecoveryMethodList'
+
+export const AddRecoveryMethods = ({
+  selectedMethod,
+  setSelectedMethod,
+  oidcAuth,
+  availableRecoveryMethods,
+  allowsUserToAddLater,
+  onNext,
+  onSkip
+}: {
+  selectedMethod?: RecoveryMethods
+  setSelectedMethod: (method: RecoveryMethods) => void
+  oidcAuth?: OidcAuth
+  availableRecoveryMethods: RecoveryMethod[]
+  allowsUserToAddLater: boolean
+  onNext: () => void
+  onSkip: () => void
+}): JSX.Element => {
+  return (
+    <BlurredBarsContentLayout>
+      <View
+        sx={{
+          flex: 1,
+          paddingTop: 25,
+          paddingHorizontal: 16,
+          justifyContent: 'space-between'
+        }}>
+        <View>
+          <Text variant="heading2" sx={{ marginBottom: 8 }}>
+            Add a recovery method
+          </Text>
+          <Text variant="body1" sx={{ marginBottom: 40 }}>
+            Add recovery methods to securely restore access in case you lose
+            your credentials.
+          </Text>
+          <RecoveryMethodList
+            selectedMethod={selectedMethod}
+            data={availableRecoveryMethods}
+            onPress={setSelectedMethod}
+          />
+        </View>
+        <View sx={{ gap: 16, marginBottom: 36 }}>
+          <Button
+            type="primary"
+            size="large"
+            onPress={onNext}
+            disabled={availableRecoveryMethods.length === 0}>
+            Next
+          </Button>
+          {oidcAuth === undefined && allowsUserToAddLater && (
+            <Button type="tertiary" size="large" onPress={onSkip}>
+              Skip
+            </Button>
+          )}
+        </View>
+      </View>
+    </BlurredBarsContentLayout>
+  )
+}

packages/core-mobile/app/new/routes/onboarding/analyticsConsent.tsx → packages/core-mobile/app/new/components/onboarding/AnalyticsConsent.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react'
-import { useRouter } from 'expo-router'
 import BlurredBarsContentLayout from 'new/components/navigation/BlurredBarsContentLayout'
 import {
   Button,
@@ -9,27 +8,17 @@ import {
   View
 } from '@avalabs/k2-alpine'
 import { useDispatch } from 'react-redux'
-import { useAnalyticsConsent } from 'hooks/useAnalyticsConsent'
 import { setViewOnce, ViewOnceKey } from 'store/viewOnce'
 import ScreenHeader from 'new/components/ScreenHeader'
 
-export default function AnalyticsConsent(): JSX.Element {
-  const router = useRouter()
-
+export const AnalyticsConsent = ({
+  onAcceptAnalytics,
+  onRejectAnalytics
+}: {
+  onAcceptAnalytics: () => void
+  onRejectAnalytics: () => void
+}): JSX.Element => {
   const dispatch = useDispatch()
-  const { accept, reject } = useAnalyticsConsent()
-
-  function handleAcceptAnalytics(): void {
-    accept()
-
-    router.navigate('./recoveryPhrase')
-  }
-
-  function handleRejectAnalytics(): void {
-    reject()
-
-    router.navigate('./recoveryPhrase')
-  }
 
   useEffect(() => {
     return () => {
@@ -68,10 +57,10 @@ export default function AnalyticsConsent(): JSX.Element {
             backgroundColor: '$surfacePrimary',
             gap: 16
           }}>
-          <Button size="large" type="primary" onPress={handleAcceptAnalytics}>
+          <Button size="large" type="primary" onPress={onAcceptAnalytics}>
             Unlock
           </Button>
-          <Button size="large" type="tertiary" onPress={handleRejectAnalytics}>
+          <Button size="large" type="tertiary" onPress={onRejectAnalytics}>
             No thanks
           </Button>
         </View>

packages/core-mobile/app/new/components/onboarding/Confirmation.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import BlurredBarsContentLayout from 'new/components/navigation/BlurredBarsContentLayout'
+import {
+  Avatar,
+  Button,
+  SafeAreaView,
+  ScrollView,
+  View,
+  useTheme,
+  Text
+} from '@avalabs/k2-alpine'
+import { Platform } from 'react-native'
+import { KeyboardAvoidingView } from 'react-native'
+import { AVATARS } from 'new/consts/avatars'
+
+export const Confirmation = ({
+  selectedAvatarId,
+  onNext
+}: {
+  selectedAvatarId?: string
+  onNext: () => void
+}): JSX.Element => {
+  const {
+    theme: { colors }
+  } = useTheme()
+
+  const avatar = AVATARS.find(a => a.id === selectedAvatarId)
+
+  return (
+    <BlurredBarsContentLayout>
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+        <SafeAreaView sx={{ flex: 1 }}>
+          <ScrollView sx={{ flex: 1 }} contentContainerSx={{ padding: 16 }}>
+            <View sx={{ alignItems: 'center', paddingTop: 100 }}>
+              {avatar?.source && (
+                <Avatar
+                  backgroundColor={colors.$surfacePrimary}
+                  source={avatar.source}
+                  size="large"
+                  hasBlur={true}
+                />
+              )}
+            </View>
+            <View sx={{ paddingHorizontal: 48 }}>
+              <Text
+                sx={{ marginTop: 96, textAlign: 'center' }}
+                variant="heading3">
+                That’s it!{'\n'} Enjoy your wallet
+              </Text>
+              <Text
+                variant="subtitle1"
+                sx={{ textAlign: 'center', marginTop: 20 }}>
+                You can now start buying, swapping, sending, receiving crypto
+                and collectibles with no added fees
+              </Text>
+            </View>
+          </ScrollView>
+          <View
+            sx={{
+              padding: 16,
+              backgroundColor: '$surfacePrimary'
+            }}>
+            <Button size="large" type="primary" onPress={onNext}>
+              Let’s go!
+            </Button>
+          </View>
+        </SafeAreaView>
+      </KeyboardAvoidingView>
+    </BlurredBarsContentLayout>
+  )
+}

packages/core-mobile/app/new/routes/onboarding/createPin.tsx → packages/core-mobile/app/new/components/onboarding/CreatePin.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { router, useFocusEffect } from 'expo-router'
+import React, { useEffect, useRef } from 'react'
+import { useFocusEffect } from 'expo-router'
 import BlurredBarsContentLayout from 'new/components/navigation/BlurredBarsContentLayout'
 import {
   GroupList,
@@ -14,9 +14,16 @@ import { Platform, Switch } from 'react-native'
 import { KeyboardAvoidingView } from 'react-native'
 import ScreenHeader from 'new/components/ScreenHeader'
 
-export default function CreatePin(): JSX.Element {
+export const CreatePin = ({
+  useBiometrics,
+  setUseBiometrics,
+  onEnteredValidPin
+}: {
+  useBiometrics: boolean
+  setUseBiometrics: (value: boolean) => void
+  onEnteredValidPin: () => void
+}): React.JSX.Element => {
   const ref = useRef<PinInputActions>(null)
-  const [useBiometrics, setUseBiometrics] = useState(true)
 
   const {
     onEnterChosenPin,
@@ -40,10 +47,8 @@ export default function CreatePin(): JSX.Element {
   })
 
   useEffect(() => {
-    if (validPin) {
-      router.navigate('')
-    }
-  }, [validPin])
+    validPin && onEnteredValidPin()
+  }, [onEnteredValidPin, validPin])
 
   return (
     <BlurredBarsContentLayout>
@@ -90,19 +95,21 @@ export default function CreatePin(): JSX.Element {
               backgroundColor: '$surfacePrimary',
               gap: 16
             }}>
-            <GroupList
-              data={[
-                {
-                  title: 'Unlock with Face ID',
-                  accessory: (
-                    <Switch
-                      value={useBiometrics}
-                      onValueChange={setUseBiometrics}
-                    />
-                  )
-                }
-              ]}
-            />
+            {!chosenPinEntered && (
+              <GroupList
+                data={[
+                  {
+                    title: 'Unlock with Face ID',
+                    accessory: (
+                      <Switch
+                        value={useBiometrics}
+                        onValueChange={setUseBiometrics}
+                      />
+                    )
+                  }
+                ]}
+              />
+            )}
           </View>
         </SafeAreaView>
       </KeyboardAvoidingView>