fix: resolve Keystone QR scan button doing nothing (#1027)

* fix: resolve Keystone QR scan button doing nothing

ConnectKeystoneStartScreen navigated to ScanQrCode at the root stack
level, but the Add New Account screen is a transparentModal — so the
scanner rendered behind the modal. Navigate to KeystoneNavigator within
AddNewAccountNavigator instead, matching the Ledger flow pattern.

* refactor: extract shared KeystoneStackParamList, fix import order

Consolidate duplicated KeystoneStackParamList into a shared
keystoneNavigatorTypes.ts (matching Ledger pattern). Type the
createStackNavigator call. Fix eslint import/order violations.

Author: bryzettler

src/features/keystone/ConnectKeystoneStartScreen.tsx

@@ -20,8 +20,8 @@ import { useOpacity, useSpacing } from '@theme/themeHooks'
 import useBackHandler from '@hooks/useBackHandler'
 import { useTheme } from '@shopify/restyle'
 import { t } from 'i18next'
-import { RootNavigationProp } from 'src/navigation/rootTypes'
 import { Image, Linking, Platform } from 'react-native'
+import { AddNewAccountNavigationProp } from '../home/addNewAccount/addNewAccountTypes'
 
 type CameraPermissionBottomSheetAlertRef = {
   show: () => void
@@ -127,14 +127,14 @@ const ConnectKeystoneStart = () => {
   const { hasPermission } = useCamera()
   const cameraPermissionBottomSheetAlertRef =
     useRef<CameraPermissionBottomSheetAlertRef>(null)
-  const rootNav = useNavigation<RootNavigationProp>()
+  const navigation = useNavigation<AddNewAccountNavigationProp>()
   const handleStart = useCallback(() => {
     if (!hasPermission) {
       cameraPermissionBottomSheetAlertRef.current?.show()
     } else {
-      rootNav.navigate('ScanQrCode')
+      navigation.navigate('KeystoneNavigator')
     }
-  }, [rootNav, hasPermission])
+  }, [navigation, hasPermission])
   return (
     <SafeAreaBox
       flex={1}

src/features/keystone/KeystoneNavigator.tsx

@@ -3,8 +3,9 @@ import { createStackNavigator } from '@react-navigation/stack'
 import ScanQrCode from './ScanQrCodeScreen'
 import SelectKeystoneAccountsScreen from './SelectKeystoneAccountsScreen'
 import KeystoneAccountAssignScreen from './KeystoneAccountAssignScreen'
+import { KeystoneStackParamList } from './keystoneNavigatorTypes'
 
-const KeystoneStack = createStackNavigator()
+const KeystoneStack = createStackNavigator<KeystoneStackParamList>()
 
 const KeystoneNavigator = () => {
   return (

src/features/keystone/ScanQrCodeScreen.tsx

@@ -3,15 +3,15 @@ import DynamicQrScanner from '@components/DynamicQrScanner'
 import SafeAreaBox from '@components/SafeAreaBox'
 import { URDecoder } from '@ngraveio/bc-ur'
 import KeystoneSDK, { MultiAccounts, UR } from '@keystonehq/keystone-sdk'
-import { RootNavigationProp } from 'src/navigation/rootTypes'
 import { useNavigation } from '@react-navigation/native'
 import { Alert } from 'react-native'
 import { useTranslation } from 'react-i18next'
 import { KeystoneAccountType } from './SelectKeystoneAccountsScreen'
+import { KeystoneNavigationProp } from './keystoneNavigatorTypes'
 
 const ScanQrCodeScreen = () => {
   const { t } = useTranslation()
-  const navigation = useNavigation<RootNavigationProp>()
+  const navigation = useNavigation<KeystoneNavigationProp>()
   const [multiAccounts, setMultiAccounts] = useState<MultiAccounts>()
   const decoder = useMemo(() => new URDecoder(), [])
   const [isScanQrCodeComplete, setIsScanQrCodeComplete] = useState(false)

src/features/keystone/SelectKeystoneAccountsScreen.tsx

@@ -12,10 +12,7 @@ import TouchableContainer from '@components/TouchableContainer'
 import { humanReadable } from '@helium/spl-utils'
 import BN from 'bn.js'
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
-import {
-  RootNavigationProp,
-  RootStackParamList,
-} from 'src/navigation/rootTypes'
+import { RootNavigationProp } from 'src/navigation/rootTypes'
 import { useAccountStorage } from '@storage/AccountStorageProvider'
 import { ellipsizeAddress } from '@utils/accountUtils'
 import base58 from 'bs58'
@@ -24,6 +21,7 @@ import { PublicKey } from '@solana/web3.js'
 import { useTranslation } from 'react-i18next'
 import { useSolana } from '../../solana/SolanaProvider'
 import { useKeystoneOnboarding } from './KeystoneOnboardingProvider'
+import { KeystoneStackParamList } from './keystoneNavigatorTypes'
 
 export type KeystoneAccountType = {
   path: string
@@ -34,7 +32,7 @@ export type KeystoneAccountType = {
 }
 
 type SelectKeystoneAccountsScreenRouteProp = RouteProp<
-  RootStackParamList,
+  KeystoneStackParamList,
   'SelectKeystoneAccounts'
 >
 

src/features/keystone/keystoneNavigatorTypes.ts

@@ -0,0 +1,10 @@
+import { StackNavigationProp } from '@react-navigation/stack'
+import { KeystoneAccountType } from './SelectKeystoneAccountsScreen'
+
+export type KeystoneStackParamList = {
+  ScanQrCode: undefined
+  SelectKeystoneAccounts: { derivationAccounts: KeystoneAccountType[] }
+  KeystoneAccountAssignScreen: undefined
+}
+
+export type KeystoneNavigationProp = StackNavigationProp<KeystoneStackParamList>

src/navigation/RootNavigator.tsx

@@ -18,8 +18,6 @@ import { useAsyncCallback } from 'react-async-hook'
 import changeNavigationBarColor from 'react-native-navigation-bar-color'
 import Toast from 'react-native-simple-toast'
 import { useSelector } from 'react-redux'
-import ScanQrCodeScreen from '../features/keystone/ScanQrCodeScreen'
-import SelectKeystoneAccountsScreen from '../features/keystone/SelectKeystoneAccountsScreen'
 import ConnectedWallets, {
   ConnectedWalletsRef,
 } from '../features/account/ConnectedWallets'
@@ -181,18 +179,6 @@ const RootNavigator = () => {
           component={ImportPrivateKey}
           options={screenOptions}
         />
-        <RootStack.Screen
-          name="SelectKeystoneAccounts"
-          component={SelectKeystoneAccountsScreen}
-          options={{
-            headerShown: false,
-          }}
-        />
-        <RootStack.Screen
-          name="ScanQrCode"
-          component={ScanQrCodeScreen}
-          options={screenOptions}
-        />
       </RootStack.Navigator>
     </ConnectedWallets>
   )

src/navigation/rootTypes.ts

@@ -1,6 +1,5 @@
 import { LinkWalletRequest, SignHotspotRequest } from '@helium/wallet-link'
 import { StackNavigationProp } from '@react-navigation/stack'
-import { KeystoneAccountType } from 'src/features/keystone/SelectKeystoneAccountsScreen'
 import { PaymentRouteParam } from '../features/home/homeTypes'
 
 export type RootStackParamList = {
@@ -12,8 +11,6 @@ export type RootStackParamList = {
   RequestScreen: undefined
   DappLoginScreen: { uri: string; callback: string }
   ImportPrivateKey: { key?: string }
-  SelectKeystoneAccounts: { derivationAccounts: KeystoneAccountType[] }
-  ScanQrCode: undefined
 }
 
 export type TabBarStackParamList = {