standardize onboarding / adding wallet ux

src/components/BackButton.tsx

@@ -31,6 +31,8 @@ const BackButton = ({
       alignItems="center"
       flexDirection="row"
       hitSlop={hitSlop}
+      minWidth={44}
+      minHeight={44}
       {...props}
     >
       <IconPressedContainer

src/features/home/addNewAccount/AddNewAccountScreen.tsx

@@ -1,93 +1,12 @@
 import { useNavigation } from '@react-navigation/native'
-import React, { memo, useCallback, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ScrollView } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import Box from '@components/Box'
-import FadeInOut from '@components/FadeInOut'
-import TabBar from '@components/TabBar'
-import Text from '@components/Text'
-import globalStyles from '@theme/globalStyles'
-import ConnectKeystoneStart from '../../keystone/ConnectKeystoneStartScreen'
-import PairStart from '../../ledger/PairStart'
-import AccountCreateStart from '../../onboarding/create/AccountCreateStart'
-import AccountImportStartScreen from '../../onboarding/import/AccountImportStartScreen'
-import { OnboardingOpt } from '../../onboarding/onboardingTypes'
+import React, { memo } from 'react'
+import CreateImportAccountScreen from '../../onboarding/CreateImportAccountScreen'
 import { AddNewAccountNavigationProp } from './addNewAccountTypes'
 
 const AddNewAccountScreen = () => {
-  const { t } = useTranslation()
-  const insets = useSafeAreaInsets()
   const navigation = useNavigation<AddNewAccountNavigationProp>()
 
-  const tabData = useMemo((): Array<{
-    value: OnboardingOpt
-    title: string
-  }> => {
-    return [
-      { value: 'create', title: t('onboarding.create') },
-      { value: 'import', title: t('onboarding.import') },
-      { value: 'ledger', title: t('onboarding.ledger') },
-      { value: 'keystone', title: t('onboarding.keystone') },
-    ]
-  }, [t])
-
-  const [selectedOption, setSelectedOption] = useState(tabData[0].value)
-
-  const contentContainerStyle = useMemo(
-    () => ({ flex: 1, paddingBottom: insets.bottom }),
-    [insets.bottom],
-  )
-
-  const handleItemSelected = useCallback((value: string) => {
-    setSelectedOption(value as OnboardingOpt)
-  }, [])
-
-  const handleCreate = useCallback(() => {
-    navigation.navigate('CreateAccount')
-  }, [navigation])
-
-  return (
-    <Box flex={1} backgroundColor="secondaryBackground">
-      <Box backgroundColor="surfaceSecondary">
-        <Box flexDirection="row" paddingVertical="m">
-          <Box flex={1} />
-          <Text variant="subtitle1">{t('addNewAccount.title')}</Text>
-          <Box flex={1} />
-        </Box>
-        <TabBar
-          tabBarOptions={tabData}
-          selectedValue={selectedOption}
-          onItemSelected={handleItemSelected}
-        />
-      </Box>
-
-      <ScrollView contentContainerStyle={contentContainerStyle}>
-        <Box flex={1}>
-          {selectedOption === 'create' && (
-            <FadeInOut style={globalStyles.container}>
-              <AccountCreateStart onCreate={handleCreate} inline />
-            </FadeInOut>
-          )}
-          {selectedOption === 'import' && (
-            <FadeInOut style={globalStyles.container}>
-              <AccountImportStartScreen inline />
-            </FadeInOut>
-          )}
-          {selectedOption === 'ledger' && (
-            <FadeInOut style={globalStyles.container}>
-              <PairStart />
-            </FadeInOut>
-          )}
-          {selectedOption === 'keystone' && (
-            <FadeInOut style={globalStyles.container}>
-              <ConnectKeystoneStart />
-            </FadeInOut>
-          )}
-        </Box>
-      </ScrollView>
-    </Box>
-  )
+  return <CreateImportAccountScreen navigation={navigation} />
 }
 
 export default memo(AddNewAccountScreen)

src/features/home/addNewAccount/addNewAccountTypes.ts

@@ -15,7 +15,6 @@ export type AddNewAccountParamList = {
   LedgerNavigator: undefined
   KeystoneNavigator: undefined
   CLIAccountNavigator: undefined
-  VoteNavigator: undefined
 }
 
 export type AddNewAccountNavigationProp =

src/features/ledger/DeviceScan.tsx

@@ -138,7 +138,8 @@ const DeviceScan = () => {
       <Box flex={1} backgroundColor="secondary" paddingHorizontal="l">
         <BackButton
           marginTop="m"
-          paddingHorizontal="s"
+          paddingHorizontal="l"
+          color="primaryText"
           onPress={navigation.goBack}
         />
         <Box

src/features/ledger/DeviceShow.tsx

@@ -146,8 +146,9 @@
       <>
         <BackButton
           marginVertical="m"
-          paddingHorizontal="m"
+          paddingHorizontal="l"
           marginHorizontal="s"
+          color="primaryText"
           onPress={navigation.goBack}
         />
         <Box
@@ -215,7 +216,7 @@
           </Text>
 
           {index === 0 && (
             <TouchableOpacity onPress={onSelectAll}>
               <Text variant="body2" fontWeight="bold">
                 {selectAll
                   ? t('ledger.show.deselectAll')

src/features/onboarding/CreateImportAccountScreen.tsx

@@ -5,6 +5,7 @@ import Plus from '@assets/images/plus.svg'
 import DownArrow from '@assets/images/importIcon.svg'
 import Ledger from '@assets/images/ledger.svg'
 import Keystone from '@assets/images/keystoneLogo.svg'
+import Terminal from '@assets/images/terminal.svg'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import Box from '@components/Box'
 import Text from '@components/Text'
@@ -16,9 +17,16 @@ import FinePrint from '@components/FinePrint'
 import NetTypeSegment from './NetTypeSegment'
 import { OnboardingNavigationProp } from './onboardingTypes'
 
-const CreateImportAccountScreen = () => {
+type NavigationProp = OnboardingNavigationProp | any
+
+type Props = {
+  navigation?: NavigationProp
+}
+
+const CreateImportAccountScreen = ({ navigation: propNavigation }: Props) => {
   const { t } = useTranslation()
-  const navigation = useNavigation<OnboardingNavigationProp>()
+  const defaultNavigation = useNavigation<OnboardingNavigationProp>()
+  const navigation = propNavigation || defaultNavigation
   const colors = useColors()
   const { bottom } = useSafeAreaInsets()
 
@@ -38,6 +46,10 @@ const CreateImportAccountScreen = () => {
     navigation.navigate('KeystoneNavigator')
   }, [navigation])
 
+  const connectCLI = useCallback(() => {
+    navigation.navigate('CLIAccountNavigator')
+  }, [navigation])
+
   return (
     <SafeAreaBox flex={1} paddingHorizontal="l" justifyContent="center">
       <NetTypeSegment marginBottom="l" marginTop="n_xxl" />
@@ -79,6 +91,15 @@ const CreateImportAccountScreen = () => {
             <Ledger height={20} width={20} color={colors.primaryText} />
           </Box>
         </TouchableOpacityBox>
+        <Box height={1} backgroundColor="primaryBackground" />
+        <TouchableOpacityBox onPress={connectCLI} padding="lm">
+          <Box flexDirection="row" alignItems="center">
+            <Text variant="subtitle1" flex={1}>
+              {t('accountSetup.createImport.cli')}
+            </Text>
+            <Terminal height={20} width={20} color={colors.primaryText} />
+          </Box>
+        </TouchableOpacityBox>
       </Box>
       <FinePrint
         position="absolute"

src/features/onboarding/OnboardingNavigator.tsx

@@ -9,6 +9,7 @@ import CreateImportAccountScreen from './CreateImportAccountScreen'
 import CreateAccountNavigator from './create/CreateAccountNavigator'
 import ImportAccountNavigator from './import/ImportAccountNavigator'
 import ImportPrivateKey from './import/ImportPrivateKey'
+import CLIAccountNavigator from './cli-import/CLIAccountNavigator'
 import { OnboardingStackParamList } from './onboardingTypes'
 import KeystoneNavigator from '../keystone/KeystoneNavigator'
 
@@ -56,6 +57,11 @@ const OnboardingNavigator = () => {
         component={KeystoneNavigator}
         options={subScreenOptions}
       />
+      <OnboardingStack.Screen
+        name="CLIAccountNavigator"
+        component={CLIAccountNavigator}
+        options={subScreenOptions}
+      />
       <OnboardingStack.Screen
         name="ImportPrivateKey"
         component={ImportPrivateKey}

src/features/onboarding/cli-import/CLIAccountImportStartScreen.tsx

@@ -7,7 +7,7 @@ import Text from '@components/Text'
 import SafeAreaBox from '@components/SafeAreaBox'
 import ButtonPressable from '@components/ButtonPressable'
 import Box from '@components/Box'
-import CloseButton from '@components/CloseButton'
+import BackButton from '@components/BackButton'
 import TextTransform from '@components/TextTransform'
 import { CLIAccountNavigationProp } from './CLIAccountNavigatorTypes'
 
@@ -27,8 +27,8 @@ const CLIAccountImportStartScreen = () => {
   return (
     <SafeAreaBox flex={1} edges={edges} backgroundColor="secondary">
       <Box flex={1} marginHorizontal="l">
-        <Box width="100%" alignItems="flex-end" paddingTop="l">
-          <CloseButton onPress={onClose} />
+        <Box width="100%" alignItems="flex-start" paddingTop="l">
+          <BackButton onPress={onClose} />
         </Box>
         <Box flexGrow={1} alignItems="center">
           <Terminal width={98} height={98} />

src/features/onboarding/cli-import/CLIPasswordScreen.tsx

@@ -1,7 +1,7 @@
 import Terminal from '@assets/images/terminal.svg'
 import Box from '@components/Box'
 import ButtonPressable from '@components/ButtonPressable'
-import CloseButton from '@components/CloseButton'
+import BackButton from '@components/BackButton'
 import SafeAreaBox from '@components/SafeAreaBox'
 import Text from '@components/Text'
 import TextInput from '@components/TextInput'
@@ -88,8 +88,8 @@ const CLIPasswordScreen = () => {
 
   return (
     <SafeAreaBox marginHorizontal="l" flex={1} edges={edges}>
-      <Box width="100%" alignItems="flex-end" paddingVertical="l">
-        <CloseButton onPress={onClose} />
+      <Box width="100%" alignItems="flex-start" paddingVertical="l">
+        <BackButton onPress={onClose} />
       </Box>
       <Box flexGrow={1} alignItems="center">
         <Terminal width={98} height={98} />

src/features/onboarding/create/AccountCreatePassphraseScreen.tsx

@@ -1,10 +1,10 @@
-import Close from '@assets/images/close.svg'
 import InfoError from '@assets/images/infoError.svg'
 import Box from '@components/Box'
 import CircleLoader from '@components/CircleLoader'
 import RevealWords from '@components/RevealWords'
 import Text from '@components/Text'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
+import BackButton from '@components/BackButton'
 import { useNavigation } from '@react-navigation/native'
 import { useAccountStorage } from '@storage/AccountStorageProvider'
 import { DEFAULT_DERIVATION_PATH, createKeypair } from '@storage/secureStorage'
@@ -61,13 +61,7 @@
   const ListHeaderComponent = useMemo(() => {
     return (
       <>
-        <TouchableOpacityBox
-          padding="l"
-          onPress={navToTop}
-          alignItems="flex-end"
-        >
-          <Close color={colors.primaryText} height={16} width={16} />
-        </TouchableOpacityBox>
+        <BackButton onPress={navToTop} paddingHorizontal="l" />
         <Box justifyContent="center" alignItems="center" marginBottom="xl">
           <InfoError />
         </Box>
@@ -94,7 +88,7 @@
         </Text>
       </>
     )
   }, [colors.primaryText, navToTop, t])
 
   return (
     <Box flex={1} backgroundColor="secondaryBackground">

src/features/onboarding/create/AccountCreateStart.tsx

@@ -5,7 +5,7 @@ import { useNavigation } from '@react-navigation/native'
 import Box from '@components/Box'
 import Text from '@components/Text'
 import ButtonPressable from '@components/ButtonPressable'
-import CloseButton from '@components/CloseButton'
+import BackButton from '@components/BackButton'
 import SafeAreaBox from '@components/SafeAreaBox'
 import { useAccountStorage } from '../../../storage/AccountStorageProvider'
 import { CreateAccountNavigationProp } from './createAccountNavTypes'
@@ -26,8 +26,8 @@ const AccountCreateStart = ({ onCreate, inline }: Props) => {
       backgroundColor="secondaryBackground"
       paddingHorizontal="l"
     >
-      <Box width="100%" alignItems="flex-end" visible={!inline}>
-        <CloseButton onPress={onClose} />
+      <Box width="100%" alignItems="flex-start" visible={!inline}>
+        <BackButton onPress={onClose} />
       </Box>
       <Box justifyContent="center" alignItems="center" flex={1}>
         <CreateAccount />

src/features/onboarding/create/ConfirmWordsScreen.tsx

@@ -5,7 +5,7 @@ import { Animated, FlatList } from 'react-native'
 import Box from '@components/Box'
 import Text from '@components/Text'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
-import CloseButton from '@components/CloseButton'
+import BackButton from '@components/BackButton'
 import { Color } from '@theme/theme'
 import { useColors, usePaddingStyle } from '@theme/themeHooks'
 import { upperCase } from 'lodash'
@@ -194,8 +194,8 @@ const ConfirmWordsScreen: React.FC<Props> = ({
 
   return (
     <Box flex={1} backgroundColor="secondaryBackground">
-      <Box width="100%" alignItems="flex-end">
-        <CloseButton onPress={onClose} />
+      <Box width="100%" alignItems="flex-start">
+        <BackButton onPress={onClose} />
       </Box>
       <KeyboardAwareScrollView
         extraScrollHeight={80}

src/features/onboarding/import/AccountImportScreen.tsx

@@ -1,7 +1,7 @@
-import Close from '@assets/images/close.svg'
 import Box from '@components/Box'
 import Text from '@components/Text'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
+import BackButton from '@components/BackButton'
 import useAlert from '@hooks/useAlert'
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import { Color } from '@theme/theme'
@@ -47,7 +47,7 @@ const AccountImportScreen = () => {
   const parentNav = useNavigation<OnboardingNavigationProp>()
   const flatlistRef = useRef<FlatList>(null)
   const {
-    params: { restoringAccount, accountAddress },
+    params: { restoringAccount = false, accountAddress = undefined } = {},
   } = useRoute<Route>()
   const [wordCount, setWordCount] = useState(12)
   const colors = useColors()
@@ -291,9 +291,7 @@ const AccountImportScreen = () => {
 
   return (
     <Box flex={1} backgroundColor="secondaryBackground">
-      <TouchableOpacityBox padding="l" onPress={navToTop} alignItems="flex-end">
-        <Close color={colors.primaryText} height={16} width={16} />
-      </TouchableOpacityBox>
+      <BackButton onPress={navToTop} paddingHorizontal="l" />
       <KeyboardAwareScrollView
         extraScrollHeight={80}
         enableOnAndroid

src/features/onboarding/import/AccountImportStartScreen.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useEffect, useMemo } from 'react'
-import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import { useNavigation } from '@react-navigation/native'
 import { useTranslation } from 'react-i18next'
 import { Image } from 'react-native'
 import { Edge } from 'react-native-safe-area-context'
@@ -8,24 +8,20 @@
 import ButtonPressable from '@components/ButtonPressable'
 import TextTransform from '@components/TextTransform'
 import SafeAreaBox from '@components/SafeAreaBox'
-import CloseButton from '@components/CloseButton'
+import BackButton from '@components/BackButton'
 import { ImportAccountNavigationProp } from './importAccountNavTypes'
 import { useAccountStorage } from '../../../storage/AccountStorageProvider'
 import { useOnboarding } from '../OnboardingProvider'
-import { MultiAccountStackParamList } from '../multiAccount/MultiAccountNavigatorTypes'
 import { AddNewAccountNavigationProp } from '../../home/addNewAccount/addNewAccountTypes'
 import { RootNavigationProp } from '../../../navigation/rootTypes'
 
-type Route = RouteProp<MultiAccountStackParamList, 'AccountImportStartScreen'>
-
 const AccountImportStartScreen = ({ inline }: { inline?: boolean }) => {
   const { setOnboardingData } = useOnboarding()
   const navigation = useNavigation<ImportAccountNavigationProp>()
   const rootNav = useNavigation<RootNavigationProp>()
   const addNewAcctNav = useNavigation<AddNewAccountNavigationProp>()
   const { hasAccounts, reachedAccountLimit } = useAccountStorage()
   const { t } = useTranslation()
-  const { params } = useRoute<Route>()
 
   useEffect(() => {
     return navigation.addListener('focus', () => {
@@ -71,8 +67,8 @@
   const edges = useMemo((): Edge[] => ['bottom'], [])
 
   const isInline = useMemo(() => {
-    return inline || params?.inline
-  }, [inline, params])
+    return inline
+  }, [inline])
 
   return (
     <SafeAreaBox
@@ -81,8 +77,8 @@
       edges={edges}
       backgroundColor="secondaryBackground"
     >
       {isInline ? null : (
-        <CloseButton alignSelf="flex-end" padding="l" onPress={onClose} />
+        <BackButton onPress={onClose} paddingHorizontal="l" />
       )}
       <Box
         flex={1}