CP-13334: Reuse app connection screen for add ledger account

packages/core-mobile/app/new/common/components/WalletCard.tsx

@@ -12,7 +12,7 @@ import { useManageWallet } from 'common/hooks/useManageWallet'
 import { AccountDisplayData, WalletDisplayData } from 'common/types'
 import { AccountListItem } from 'features/wallets/components/AccountListItem'
 import { WalletBalance } from 'features/wallets/components/WalletBalance'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
   FlatList,
   LayoutChangeEvent,
@@ -22,9 +22,6 @@ import {
 } from 'react-native'
 import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
 import { WalletType } from 'services/wallet/types'
-import { LedgerAppType } from 'services/ledger/types'
-import { LedgerConnectionCaption } from 'features/accountSettings/components/LedgerConnectionCaption'
-import { useObserveLedgerState } from 'common/hooks/useObserveLedgerState'
 import { DropdownMenu } from './DropdownMenu'
 import { WalletIcon } from './WalletIcon'
 
@@ -58,10 +55,12 @@ const WalletCard = ({
     isAddingAccount
   } = useManageWallet()
 
-  const { isAppOpened, isLedger } = useObserveLedgerState(
-    wallet.id,
-    LedgerAppType.AVALANCHE
-  )
+  const isLedger = useMemo(() => {
+    return (
+      wallet?.type === WalletType.LEDGER_LIVE ||
+      wallet?.type === WalletType.LEDGER
+    )
+  }, [wallet?.type])
 
   const renderExpansionIcon = useCallback(() => {
     return (
@@ -84,7 +83,7 @@ const WalletCard = ({
         />
       )
     },
-    [isRefreshing]
+    [isRefreshing, wallet.name]
   )
 
   const renderEmpty = useCallback(() => {
@@ -153,34 +152,26 @@ const WalletCard = ({
         />
 
         {wallet.type !== WalletType.PRIVATE_KEY ? (
-          <View sx={{ gap: 16 }}>
-            {((isLedger && isAppOpened) || !isLedger) && (
-              <Button
-                testID={`add_account_btn__${wallet.name}`}
-                size="medium"
-                leftIcon={
-                  isAddingAccount ? undefined : (
-                    <Icons.Content.Add
-                      color={colors.$textPrimary}
-                      width={24}
-                      height={24}
-                    />
-                  )
-                }
-                type="secondary"
-                disabled={isAddingAccount}
-                onPress={() => handleAddAccountToWallet(wallet)}>
-                {isAddingAccount ? (
-                  <ActivityIndicator size="small" color={colors.$textPrimary} />
-                ) : (
-                  'Add account'
-                )}
-              </Button>
-            )}
-            {isLedger && !isAppOpened && (
-              <LedgerConnectionCaption appType={LedgerAppType.AVALANCHE} />
+          <Button
+            size="medium"
+            leftIcon={
+              isAddingAccount ? undefined : (
+                <Icons.Content.Add
+                  color={colors.$textPrimary}
+                  width={24}
+                  height={24}
+                />
+              )
+            }
+            type="secondary"
+            disabled={isAddingAccount}
+            onPress={() => handleAddAccountToWallet(wallet)}>
+            {isAddingAccount ? (
+              <ActivityIndicator size="small" color={colors.$textPrimary} />
+            ) : (
+              'Add account'
             )}
-          </View>
+          </Button>
         ) : (
           <></>
         )}
@@ -277,7 +268,7 @@ const WalletCard = ({
               groups={[
                 {
                   key: 'wallet-actions',
-                  items: getDropdownItems(wallet, isLedger && isAppOpened)
+                  items: getDropdownItems(wallet, isLedger)
                 }
               ]}
               onPressAction={(event: { nativeEvent: { event: string } }) =>

packages/core-mobile/app/new/common/hooks/useDeleteWallet.ts

@@ -8,9 +8,9 @@ import { resetLoginAttempt } from 'store/security'
 export const useDeleteWallet = (): {
   deleteWallet: () => void
 } => {
-  const { resetLedgerWalletMap } = useLedgerWalletMap()
   const { deleteRecentAccounts } = useRecentAccounts()
   const dispatch = useDispatch()
+  const { resetLedgerWalletMap } = useLedgerWalletMap()
 
   const deleteWallet = useCallback(() => {
     dispatch(onLogOut())

packages/core-mobile/app/new/common/hooks/useManageWallet.ts

@@ -4,7 +4,7 @@ import {
   dismissAlertWithTextInput,
   showAlertWithTextInput
 } from 'common/utils/alertWithTextInput'
-import { useLedgerWalletMap } from 'features/ledger/store'
+import { useRouter } from 'expo-router'
 import { showSnackbar } from 'new/common/utils/toast'
 import { useCallback, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
@@ -22,6 +22,7 @@ import {
 import { removeWallet } from 'store/wallet/thunks'
 import { Wallet } from 'store/wallet/types'
 import Logger from 'utils/Logger'
+import { useLedgerWalletMap } from 'features/ledger/store'
 
 export const useManageWallet = (): {
   handleAddAccount: (wallet: Wallet) => void
@@ -30,6 +31,7 @@ export const useManageWallet = (): {
   isAddingAccount: boolean
 } => {
   const { removeLedgerWallet } = useLedgerWalletMap()
+  const { navigate } = useRouter()
   const [isAddingAccount, setIsAddingAccount] = useState(false)
   const dispatch = useDispatch<AppThunkDispatch>()
   const walletsCount = useSelector(selectWalletsCount)
@@ -115,14 +117,26 @@ export const useManageWallet = (): {
         ]
       })
     },
-    [dispatch, walletsCount, removeLedgerWallet]
+    [dispatch, removeLedgerWallet, walletsCount]
   )
 
   const handleAddAccount = useCallback(
     async (wallet: Wallet): Promise<void> => {
       if (isAddingAccount) return
 
       try {
+        if (
+          wallet.type === WalletType.LEDGER ||
+          wallet.type === WalletType.LEDGER_LIVE
+        ) {
+          navigate({
+            // @ts-ignore TODO: make routes typesafe
+            pathname: '/addAccountAppConnection',
+            params: { walletId: wallet.id }
+          })
+          return
+        }
+
         AnalyticsService.capture('AccountSelectorAddAccount', {
           accountNumber: Object.keys(accounts).length + 1
         })
@@ -142,7 +156,7 @@ export const useManageWallet = (): {
         setIsAddingAccount(false)
       }
     },
-    [isAddingAccount, accounts, dispatch]
+    [isAddingAccount, accounts, dispatch, navigate]
   )
 
   const canRemoveWallet = useCallback(

packages/core-mobile/app/new/features/accountSettings/components/accountAddresses.tsx

@@ -21,8 +21,6 @@ import { WalletType } from 'services/wallet/types'
 import { useSelector } from 'react-redux'
 import { selectIsSolanaSupportBlocked } from 'store/posthog'
 import { useRouter } from 'expo-router'
-import { LedgerAppType } from 'services/ledger/types'
-import { LedgerConnectionCaption } from './LedgerConnectionCaption'
 
 export const AccountAddresses = ({
   account
@@ -94,7 +92,7 @@ export const AccountAddresses = ({
           value:
             isLedger &&
             network.vmName === NetworkVMType.SVM &&
-            (address === undefined || address === '') &&
+            isMissingSolanaAddress &&
             !isSolanaSupportBlocked ? (
               <SolanaEnableButton accountId={account.id} />
             ) : (
@@ -140,9 +138,6 @@ export const AccountAddresses = ({
           lineHeight: 22
         }}
       />
-      {isMissingSolanaAddress && !isSolanaSupportBlocked && (
-        <LedgerConnectionCaption appType={LedgerAppType.SOLANA} />
-      )}
     </View>
   )
 }