Redirect to NFT gallery when NFT can not be found

src/NftDetails/NftDetails.tsx

@@ -1,28 +1,47 @@
 import {RouteProp, useRoute} from '@react-navigation/native'
 import React, {ReactNode, useState} from 'react'
+import {ErrorBoundary} from 'react-error-boundary'
 import {defineMessages, useIntl} from 'react-intl'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {ScrollView} from 'react-native-gesture-handler'
 
-import {CopyButton, FadeIn, Icon, Link, Spacer, Text} from '../components'
+import {CopyButton, FadeIn, FullErrorFallback, Icon, Link, Spacer, Text} from '../components'
 import {NftPreview} from '../components/NftPreview/NftPreview'
 import {Tab, TabPanel, TabPanels, Tabs} from '../components/Tabs'
 import {features} from '../features'
-import {NftRoutes} from '../navigation'
+import {NftRoutes, useWalletNavigation} from '../navigation'
 import {useModeratedNftImage} from '../Nfts/hooks'
 import {useNavigateTo} from '../Nfts/navigation'
 import {useSelectedWallet} from '../SelectedWallet'
 import {COLORS} from '../theme'
 import {isEmptyString} from '../utils'
-import {useNft} from '../yoroi-wallets'
+import {NftNotFoundError, useNft} from '../yoroi-wallets'
 import {YoroiNft} from '../yoroi-wallets/types'
 
 export const NftDetails = () => {
+  const navigation = useWalletNavigation()
+  const handleError = (error: Error) => {
+    if (error instanceof NftNotFoundError) {
+      navigation.navigateToNftGallery()
+    }
+  }
+  return (
+    <ErrorBoundary
+      onError={handleError}
+      fallbackRender={({error}) => (
+        <FullErrorFallback error={error} resetErrorBoundary={() => navigation.navigateToNftGallery()} />
+      )}
+    >
+      <Details />
+    </ErrorBoundary>
+  )
+}
+
+const Details = () => {
   const {id} = useRoute<RouteProp<NftRoutes, 'nft-details'>>().params
   const strings = useStrings()
   const wallet = useSelectedWallet()
   const nft = useNft(wallet, {id})
-
   const [activeTab, setActiveTab] = useState<'overview' | 'metadata'>('overview')
 
   return (

src/NftDetails/NftDetailsImage.tsx

@@ -1,15 +1,35 @@
 import {RouteProp, useRoute} from '@react-navigation/native'
 import React from 'react'
+import {ErrorBoundary} from 'react-error-boundary'
 import {Dimensions, StyleSheet, View} from 'react-native'
 import ViewTransformer from 'react-native-easy-view-transformer'
 
-import {FadeIn} from '../components'
+import {FadeIn, FullErrorFallback} from '../components'
 import {NftPreview} from '../components/NftPreview/NftPreview'
-import {NftRoutes} from '../navigation'
+import {NftRoutes, useWalletNavigation} from '../navigation'
 import {useSelectedWallet} from '../SelectedWallet'
-import {useNft} from '../yoroi-wallets'
+import {NftNotFoundError, useNft} from '../yoroi-wallets'
 
 export const NftDetailsImage = () => {
+  const navigation = useWalletNavigation()
+  const handleError = (error: Error) => {
+    if (error instanceof NftNotFoundError) {
+      navigation.navigateToNftGallery()
+    }
+  }
+  return (
+    <ErrorBoundary
+      onError={handleError}
+      fallbackRender={({error}) => (
+        <FullErrorFallback error={error} resetErrorBoundary={() => navigation.navigateToNftGallery()} />
+      )}
+    >
+      <ImageZoom />
+    </ErrorBoundary>
+  )
+}
+
+const ImageZoom = () => {
   const {id} = useRoute<RouteProp<NftRoutes, 'nft-details'>>().params
   const wallet = useSelectedWallet()
   const nft = useNft(wallet, {id})

src/navigation.ts

@@ -326,11 +326,24 @@ export const useWalletNavigation = () => {
     })
   }
 
+  const navigateToNftGallery = () => {
+    navigation.navigate('app-root', {
+      screen: 'main-wallet-routes',
+      params: {
+        screen: 'nfts',
+        params: {
+          screen: 'nft-gallery',
+        },
+      },
+    })
+  }
+
   return {
     navigation,
     resetToTxHistory,
     resetToWalletSelection,
     navigateToSettings,
     navigateToTxHistory,
+    navigateToNftGallery,
   }
 }

src/yoroi-wallets/hooks/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import AsyncStorage, {AsyncStorageStatic} from '@react-native-async-storage/async-storage'
 import {delay} from 'bluebird'
+import ExtendableError from 'es6-error'
 import * as React from 'react'
 import {useCallback, useMemo} from 'react'
 import {
@@ -893,12 +894,14 @@ export const useNfts = (wallet: YoroiWallet, options: UseQueryOptions<YoroiNft[]
   return {...rest, refetch, nfts: data ?? []}
 }
 
+export class NftNotFoundError extends ExtendableError {}
+
 export const useNft = (wallet: YoroiWallet, {id}: {id: string}): YoroiNft => {
   const {nfts} = useNfts(wallet, {suspense: true})
   const nft = nfts.find((nft) => nft.id === id)
 
   if (!nft) {
-    throw new Error(`Invalid id used "${id}" to get NFT`)
+    throw new NftNotFoundError(`Invalid id used "${id}" to get NFT`)
   }
   return nft
 }