Skip to content

Commit

Permalink
fix navigation weirdness in Send
Browse files Browse the repository at this point in the history
  • Loading branch information
jorbuedo committed Oct 18, 2024
1 parent 1c18498 commit deae174
Show file tree
Hide file tree
Showing 6 changed files with 16 additions and 95 deletions.
16 changes: 5 additions & 11 deletions apps/wallet-mobile/src/features/Send/common/navigation.ts
Original file line number Diff line number Diff line change
@@ -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: (removePrevious?: boolean) => {
if (removePrevious) 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'}),
Expand Down Expand Up @@ -48,7 +46,3 @@ export const useNavigateTo = () => {
}),
}).current
}

export const useOverridePreviousSendTxRoute = (routeName: keyof TxHistoryRoutes) => {
useOverridePreviousRoute(routeName)
}
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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')), [])
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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())
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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])
Expand Down Expand Up @@ -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(true)
}
amountRemoved(tokenId)
}
Expand Down
68 changes: 2 additions & 66 deletions apps/wallet-mobile/src/kernel/navigation.tsx
Original file line number Diff line number Diff line change
@@ -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, >() => {
Expand Down Expand Up @@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
]

0 comments on commit deae174

Please sign in to comment.