fix(wallet-mobile): navigation weirdness in Send

apps/wallet-mobile/src/features/Send/common/navigation.ts

@@ -1,19 +1,17 @@
 import {useNavigation} from '@react-navigation/native'
 import {useRef} from 'react'
 
-import {
-  AppRouteNavigation,
-  TxHistoryRouteNavigation,
-  TxHistoryRoutes,
-  useOverridePreviousRoute,
-} from '../../../kernel/navigation'
+import {AppRouteNavigation, TxHistoryRouteNavigation} from '../../../kernel/navigation'
 
 export const useNavigateTo = () => {
   const navigation = useNavigation<TxHistoryRouteNavigation & AppRouteNavigation>()
 
   return useRef({
     selectedTokens: () => navigation.navigate('send-list-amounts-to-send'),
-    addToken: () => navigation.navigate('send-select-token-from-list'),
+    addToken: ({shouldPopPrevious}: {shouldPopPrevious: boolean} = {shouldPopPrevious: false}) => {
+      if (shouldPopPrevious) navigation.pop()
+      navigation.navigate('send-select-token-from-list')
+    },
     startTx: () => navigation.navigate('send-start-tx'),
     editAmount: () => navigation.navigate('send-edit-amount'),
     reader: () => navigation.navigate('scan-start', {insideFeature: 'send'}),
@@ -48,7 +46,3 @@ export const useNavigateTo = () => {
       }),
   }).current
 }
-
-export const useOverridePreviousSendTxRoute = (routeName: keyof TxHistoryRoutes) => {
-  useOverridePreviousRoute(routeName)
-}

apps/wallet-mobile/src/features/Send/useCases/ListAmountsToSend/AddToken/SelectTokenFromListScreen.tsx

@@ -17,7 +17,6 @@ import {TokenAmountItem} from '../../../../Portfolio/common/TokenAmountItem/Toke
 import {useSearch, useSearchOnNavBar} from '../../../../Search/SearchContext'
 import {useSelectedWallet} from '../../../../WalletManager/common/hooks/useSelectedWallet'
 import {limitOfSecondaryAmountsPerTx} from '../../../common/constants'
-import {useOverridePreviousSendTxRoute} from '../../../common/navigation'
 import {NoAssetFoundImage} from '../../../common/NoAssetFoundImage'
 import {useStrings} from '../../../common/strings'
 import {MaxAmountsPerTx} from './Show/MaxAmountsPerTx'
@@ -74,10 +73,6 @@ export const SelectTokenFromListScreen = () => {
   const secondaryAmountsCounter = currentAmountsSize - (hasPrimary ? 1 : 0)
   const canAddAmount = secondaryAmountsCounter < limitOfSecondaryAmountsPerTx
 
-  // to redirect the user automatically there is no amount added
-  const hasTokensSelected = currentAmountsSize > 0
-  useOverridePreviousSendTxRoute(hasTokensSelected ? 'send-list-amounts-to-send' : 'send-start-tx')
-
   const handleOnPressNFTs = React.useCallback(() => startTransition(() => setFungibilityFilter('nfts')), [])
   const handleOnPressFTs = React.useCallback(() => startTransition(() => setFungibilityFilter('fts')), [])
   const handleOnPressAll = React.useCallback(() => startTransition(() => setFungibilityFilter('all')), [])

apps/wallet-mobile/src/features/Send/useCases/ListAmountsToSend/EditAmount/EditAmountScreen.tsx

@@ -20,7 +20,7 @@ import {usePortfolioBalances} from '../../../../Portfolio/common/hooks/usePortfo
 import {usePortfolioPrimaryBreakdown} from '../../../../Portfolio/common/hooks/usePortfolioPrimaryBreakdown'
 import {TokenAmountItem} from '../../../../Portfolio/common/TokenAmountItem/TokenAmountItem'
 import {useSelectedWallet} from '../../../../WalletManager/common/hooks/useSelectedWallet'
-import {useNavigateTo, useOverridePreviousSendTxRoute} from '../../../common/navigation'
+import {useNavigateTo} from '../../../common/navigation'
 import {useStrings} from '../../../common/strings'
 import {NoBalance} from './ShowError/NoBalance'
 import {UnableToSpend} from './ShowError/UnableToSpend'
@@ -50,8 +50,6 @@ export const EditAmountScreen = () => {
   )
   const spendable = isPrimary ? available - primaryBreakdown.lockedAsStorageCost : available
 
-  useOverridePreviousSendTxRoute(initialQuantity === 0n ? 'send-select-token-from-list' : 'send-list-amounts-to-send')
-
   React.useEffect(() => {
     setQuantity(initialQuantity)
     setInputValue(initialQuantity === 0n ? '' : atomicBreakdown(initialQuantity, amount.info.decimals).bn.toFormat())
@@ -60,13 +58,13 @@ export const EditAmountScreen = () => {
   const isFocused = useIsFocused()
   React.useEffect(() => {
     return () => {
-      if (quantity === 0n && !isFocused) {
+      if (amount.quantity === 0n && !isFocused) {
         InteractionManager.runAfterInteractions(() => {
           amountRemoved(selectedTokenId)
         })
       }
     }
-  }, [amountRemoved, isFocused, quantity, selectedTokenId])
+  }, [amount.quantity, amountRemoved, isFocused, selectedTokenId])
 
   const hasBalance = available >= quantity
   // primary can have locked amount

apps/wallet-mobile/src/features/Send/useCases/ListAmountsToSend/ListAmountsToSendScreen.tsx

@@ -25,7 +25,7 @@ import {TokenAmountItem} from '../../../Portfolio/common/TokenAmountItem/TokenAm
 import {useReviewTx} from '../../../ReviewTx/common/ReviewTxProvider'
 import {useSearch} from '../../../Search/SearchContext'
 import {useSelectedWallet} from '../../../WalletManager/common/hooks/useSelectedWallet'
-import {useNavigateTo, useOverridePreviousSendTxRoute} from '../../common/navigation'
+import {useNavigateTo} from '../../common/navigation'
 import {toYoroiEntry} from '../../common/toYoroiEntry'
 import {AddTokenButton} from './AddToken/AddToken'
 import {RemoveAmountButton} from './RemoveAmount'
@@ -41,8 +41,6 @@ export const ListAmountsToSendScreen = () => {
   const {wallet} = useSelectedWallet()
   const {unsignedTxChanged, onSuccessChanged, onErrorChanged} = useReviewTx()
 
-  useOverridePreviousSendTxRoute('send-start-tx')
-
   useLayoutEffect(() => {
     navigation.setOptions({headerLeft: () => <ListAmountsNavigateBackButton />})
   }, [navigation])
@@ -76,7 +74,7 @@ export const ListAmountsToSendScreen = () => {
     // use case: redirect to add token screen if there is no token left
     if (selectedTokensCounter === 1) {
       clearSearch()
-      navigateTo.addToken()
+      navigateTo.addToken({shouldPopPrevious: true})
     }
     amountRemoved(tokenId)
   }

apps/wallet-mobile/src/kernel/navigation.tsx

@@ -1,16 +1,15 @@
 import {MaterialTopTabNavigationOptions} from '@react-navigation/material-top-tabs'
-import {NavigationProp, NavigationState, NavigatorScreenParams, useNavigation, useRoute} from '@react-navigation/native'
+import {NavigationState, NavigatorScreenParams, useNavigation, useRoute} from '@react-navigation/native'
 import {StackNavigationOptions, StackNavigationProp, TransitionPresets} from '@react-navigation/stack'
 import {isKeyOf} from '@yoroi/common'
 import {Atoms, ThemedPalette, useTheme} from '@yoroi/theme'
 import {Chain, Portfolio, Scan} from '@yoroi/types'
 import React from 'react'
-import {Dimensions, InteractionManager, Platform, TouchableOpacity, TouchableOpacityProps, View} from 'react-native'
+import {Dimensions, Platform, TouchableOpacity, TouchableOpacityProps, View} from 'react-native'
 
 import {Icon} from '../components/Icon'
 import {Routes as StakingGovernanceRoutes} from '../features/Staking/Governance/common/navigation'
 import {YoroiUnsignedTx} from '../yoroi-wallets/types/yoroi'
-import {compareArrays} from '../yoroi-wallets/utils/utils'
 
 // prettier-ignore
 export const useUnsafeParams = <Params, >() => {
@@ -650,66 +649,3 @@ const getFocusedRouteName = (state: Partial<NavigationState> | NavigationState['
 
   return [name]
 }
-
-function useKeepRoutesInHistory(routesToKeep: string[]) {
-  const navigation = useNavigation()
-  const [initialRouteId] = React.useState(() => getNavigationRouteId(navigation))
-
-  React.useEffect(() => {
-    const currentRouteId = getNavigationRouteId(navigation)
-
-    if (currentRouteId !== initialRouteId) {
-      return
-    }
-    const {routes} = navigation.getState()
-    const currentRouteNames = routes.map((r) => r.name)
-
-    if (compareArrays(currentRouteNames, routesToKeep)) {
-      return
-    }
-
-    const newRoutes = routes.filter((r) => routesToKeep.includes(r.name))
-
-    const task = InteractionManager.runAfterInteractions(() => {
-      const newState = {
-        index: newRoutes.length - 1,
-        routes: newRoutes.map((r) => ({...r, state: undefined})),
-        routeNames: newRoutes.map((r) => r.name),
-      }
-      navigation.reset(newState)
-    })
-
-    return () => task.cancel()
-  }, [navigation, initialRouteId, routesToKeep])
-}
-
-export function useOverridePreviousRoute<RouteName extends string>(previousRouteName: RouteName) {
-  const navigation = useNavigation()
-  const [initialRouteName] = React.useState(() => getNavigationRouteName(navigation))
-  const allRouteNames: string[] = navigation.getState().routes.map((route) => route.name)
-  const previousRouteIndex = allRouteNames.indexOf(previousRouteName)
-  const currentRouteIndex = allRouteNames.indexOf(initialRouteName)
-
-  let newRoutes = allRouteNames
-  if (previousRouteIndex < currentRouteIndex) {
-    newRoutes = allRouteNames.filter((routeName, index) => index <= previousRouteIndex || index >= currentRouteIndex)
-  }
-
-  if (previousRouteIndex > currentRouteIndex) {
-    newRoutes = allRouteNames.filter((routeName, index) => index < currentRouteIndex)
-    newRoutes.push(previousRouteName, initialRouteName)
-  }
-
-  useKeepRoutesInHistory(newRoutes)
-}
-
-function getNavigationRouteId(navigation: NavigationProp<ReactNavigation.RootParamList>) {
-  const state = navigation.getState()
-  return state.routes[state.index].key
-}
-
-function getNavigationRouteName(navigation: NavigationProp<ReactNavigation.RootParamList>) {
-  return selectRouteName(navigation.getState())
-}
-
-const selectRouteName = (state: NavigationState) => state.routes[state.index].name

apps/wallet-mobile/translations/messages/src/features/Send/useCases/ListAmountsToSend/ListAmountsToSendScreen.json

@@ -4,14 +4,14 @@
     "defaultMessage": "!!!Add token",
     "file": "src/features/Send/useCases/ListAmountsToSend/ListAmountsToSendScreen.tsx",
     "start": {
-      "line": 221,
+      "line": 219,
       "column": 12,
-      "index": 7359
+      "index": 7280
     },
     "end": {
-      "line": 224,
+      "line": 222,
       "column": 3,
-      "index": 7436
+      "index": 7357
     }
   }
 ]