Dispatch activateWalletTokens from TransactionListScene

This is to resolve an issue where the wallet state hasn't completed
checking if a newly added token is activated or not. This means the
user can enter the transaction list scene without activating the wallet.
In that case, we'll at least navigate in retrospect.

Watch for changes to the `unactivedTokenIds` property on the wallet.
If the tokenId within the transaction list appears in the
`unactivedTokenids` array, then we'll properly handle the activation
user journey.

CHANGELOG.md

@@ -9,6 +9,7 @@
 - fixed: AddressTile2 touchable area states
 - fixed: Cases where it was possible to create duplicate custom tokens
 - fixed: Clear previous swap errors when new amounts are entered or swap assets are changed in `SwapCreateScene`
+- fixed: Handle race condition when navigating to a token's transaction list which requires token activation (XRP, Algorand, etc)
 - fixed: Message about overriding a built-in token contract, which is not possible to do
 - fixed: Round Kado-provided amounts during sell
 

src/actions/WalletActions.tsx

@@ -147,9 +147,8 @@ export function updateMostRecentWalletsSelected(walletId: string, tokenId: EdgeT
   }
 }
 
-function activateWalletTokens(navigation: NavigationBase, wallet: EdgeCurrencyWallet, tokenIds?: string[]): ThunkAction<Promise<void>> {
+export function activateWalletTokens(navigation: NavigationBase, wallet: EdgeCurrencyWallet, tokenIds: EdgeTokenId[]): ThunkAction<Promise<void>> {
   return async (_dispatch, getState) => {
-    if (tokenIds == null) throw new Error('Activating mainnet wallets unsupported')
     const state = getState()
     const { account } = state.core
     const { defaultIsoFiat, defaultFiat } = state.ui.settings
@@ -168,7 +167,7 @@ function activateWalletTokens(navigation: NavigationBase, wallet: EdgeCurrencyWa
         }
       })
       const tokensText = tokenIds.map(tokenId => {
-        const { currencyCode, displayName } = getToken(wallet, tokenId) ?? {}
+        const { currencyCode, displayName } = tokenId != null ? wallet.currencyConfig.allTokens[tokenId] : wallet.currencyInfo
         return `${displayName} (${currencyCode})`
       })
       const tileTitle = tokenIds.length > 1 ? lstrings.activate_wallet_tokens_scene_tile_title : lstrings.activate_wallet_token_scene_tile_title

src/components/scenes/TransactionListScene.tsx

@@ -4,8 +4,10 @@ import { ListRenderItemInfo, Platform, RefreshControl, View } from 'react-native
 import Animated from 'react-native-reanimated'
 import { useSafeAreaFrame } from 'react-native-safe-area-context'
 
+import { activateWalletTokens } from '../../actions/WalletActions'
 import { SCROLL_INDICATOR_INSET_FIX } from '../../constants/constantSettings'
 import { SPECIAL_CURRENCY_INFO } from '../../constants/WalletAndCurrencyConstants'
+import { useAsyncEffect } from '../../hooks/useAsyncEffect'
 import { useHandler } from '../../hooks/useHandler'
 import { useIconColor } from '../../hooks/useIconColor'
 import { useTransactionList } from '../../hooks/useTransactionList'
@@ -14,7 +16,7 @@ import { lstrings } from '../../locales/strings'
 import { getExchangeDenomByCurrencyCode } from '../../selectors/DenominationSelectors'
 import { FooterRender } from '../../state/SceneFooterState'
 import { useSceneScrollHandler } from '../../state/SceneScrollState'
-import { useSelector } from '../../types/reactRedux'
+import { useDispatch, useSelector } from '../../types/reactRedux'
 import { EdgeSceneProps } from '../../types/routerTypes'
 import { infoServerData } from '../../util/network'
 import { calculateSpamThreshold, darkenHexColor, unixToLocaleDateTime, zeroString } from '../../util/utils'
@@ -47,6 +49,7 @@ function TransactionListComponent(props: Props) {
   const { navigation, route, wallet } = props
   const theme = useTheme()
   const styles = getStyles(theme)
+  const dispatch = useDispatch()
 
   const { width: screenWidth } = useSafeAreaFrame()
 
@@ -70,6 +73,7 @@ function TransactionListComponent(props: Props) {
 
   // Watchers:
   const enabledTokenIds = useWatch(wallet, 'enabledTokenIds')
+  const unactivatedTokenIds = useWatch(wallet, 'unactivatedTokenIds')
 
   // ---------------------------------------------------------------------------
   // Derived values
@@ -139,6 +143,21 @@ function TransactionListComponent(props: Props) {
     }
   }, [enabledTokenIds, navigation, tokenId])
 
+  // Automatically navigate to the token activation confirmation scene if
+  // the token appears in the unactivatedTokenIds list once the wallet loads
+  // this state.
+  useAsyncEffect(
+    async () => {
+      if (unactivatedTokenIds.length > 0) {
+        if (unactivatedTokenIds.some(unactivatedTokenId => unactivatedTokenId === tokenId)) {
+          await dispatch(activateWalletTokens(navigation, wallet, [tokenId]))
+        }
+      }
+    },
+    [unactivatedTokenIds],
+    'TransactionListScene unactivatedTokenIds check'
+  )
+
   //
   // Handlers
   //