fix(wallet-mobile): nft navigation

apps/wallet-mobile/src/NftDetails/NftDetails.tsx

@@ -25,9 +25,7 @@ export const NftDetails = () => {
   const {id} = useRoute<RouteProp<NftRoutes, 'nft-details'>>().params
   const wallet = useSelectedWallet()
 
-  // TODO: revisit (missing refresh mechanism)
   // reading from the getter, there is no need to subscribe to changes
-  // until implementation of the new refresh mechanism in here
   const amount = wallet.balances.records.get(id)
 
   // record can be gone when arriving here, need a state
@@ -83,12 +81,13 @@ export const NftDetails = () => {
 
 const imageHeight = 380
 const imagePadding = 16
+const horizontalPadding = imagePadding * 2 // left and right
 
 const SelectableMedia = ({info}: {info: Portfolio.Token.Info}) => {
   const styles = useStyles()
   const navigateTo = useNavigateTo()
   const dimensions = useWindowDimensions()
-  const imageWidth = dimensions.width - imagePadding * 2
+  const imageWidth = dimensions.width - horizontalPadding
 
   return (
     <TouchableOpacity onPress={() => navigateTo.nftZoom(info.id)} style={styles.imageWrapper}>

apps/wallet-mobile/src/Nfts/NftsNavigator.tsx

@@ -1,17 +1,59 @@
 import {createStackNavigator} from '@react-navigation/stack'
 import {useTheme} from '@yoroi/theme'
 import React from 'react'
+import {defineMessages, useIntl} from 'react-intl'
 
+import {useMetrics} from '../metrics/metricsManager'
 import {defaultStackNavigationOptions, NftRoutes} from '../navigation'
+import {NftDetails} from '../NftDetails/NftDetails'
+import {NftDetailsImage} from '../NftDetails/NftDetailsImage'
 import {Nfts} from './Nfts'
 
 const Stack = createStackNavigator<NftRoutes>()
 
 export const NftsNavigator = () => {
   const {atoms, color} = useTheme()
+  const strings = useStrings()
+  const {track} = useMetrics()
+
+  const trackDetails = React.useCallback(() => {
+    return {
+      focus: () => {
+        track.nftGalleryDetailsPageViewed()
+      },
+    }
+  }, [track])
+
   return (
     <Stack.Navigator screenOptions={defaultStackNavigationOptions(atoms, color)}>
       <Stack.Screen name="nft-gallery" component={Nfts} />
+
+      <Stack.Screen
+        name="nft-details"
+        options={{
+          title: strings.title,
+          headerTitleAlign: 'center',
+        }}
+        listeners={trackDetails}
+        component={NftDetails}
+      />
+
+      <Stack.Screen name="nft-image-zoom" options={{headerTitle: () => null}} component={NftDetailsImage} />
     </Stack.Navigator>
   )
 }
+
+const messages = defineMessages({
+  title: {
+    id: 'nft.detail.title',
+    defaultMessage: '!!!NFT Details',
+  },
+})
+
+const useStrings = () => {
+  const intl = useIntl()
+
+  return {
+    title: intl.formatMessage(messages.title),
+  }
+}

apps/wallet-mobile/src/Nfts/navigation.ts

@@ -1,14 +1,12 @@
 import {useNavigation} from '@react-navigation/native'
 import {Portfolio} from '@yoroi/types'
 
-import {WalletStackRouteNavigation} from '../navigation'
+import {NftRouteNavigation} from '../navigation'
 
 export const useNavigateTo = () => {
-  const navigation = useNavigation<WalletStackRouteNavigation>()
-  const nftDetails = (id: Portfolio.Token.Id) =>
-    navigation.navigate('nft-details-routes', {screen: 'nft-details', params: {id}})
-  const nftZoom = (id: Portfolio.Token.Id) =>
-    navigation.navigate('nft-details-routes', {screen: 'image-zoom', params: {id}})
+  const navigation = useNavigation<NftRouteNavigation>()
+  const nftDetails = (id: Portfolio.Token.Id) => navigation.navigate('nft-details', {id})
+  const nftZoom = (id: Portfolio.Token.Id) => navigation.navigate('nft-image-zoom', {id})
 
   return {
     nftDetails,

apps/wallet-mobile/src/WalletNavigator.tsx

@@ -25,7 +25,6 @@ import {ToggleAnalyticsSettingsNavigator} from './features/ToggleAnalyticsSettin
 import {CONFIG} from './legacy/config'
 import {useMetrics} from './metrics/metricsManager'
 import {defaultStackNavigationOptions, hideTabBarForRoutes, WalletStackRoutes, WalletTabRoutes} from './navigation'
-import {NftDetailsNavigator} from './NftDetails/NftDetailsNavigator'
 import {NftsNavigator} from './Nfts/NftsNavigator'
 import {SearchProvider} from './Search/SearchContext'
 import {TxHistoryNavigator} from './TxHistory'
@@ -213,8 +212,6 @@ export const WalletNavigator = () => {
 
       <Stack.Screen name="main-wallet-routes" options={{headerShown: false}} component={WalletTabNavigator} />
 
-      <Stack.Screen name="nft-details-routes" options={{headerShown: false}} component={NftDetailsNavigator} />
-
       <Stack.Screen name="settings" options={{headerShown: false}} component={SettingsScreenNavigator} />
 
       <Stack.Screen name="voting-registration" options={{headerShown: false}} component={VotingRegistration} />

apps/wallet-mobile/src/features/Portfolio/common/hooks/usePortfolioTokenManager.ts

@@ -10,11 +10,9 @@ export const usePortfolioTokenManager = ({network}: {network: Chain.SupportedNet
 
 export const buildPortfolioTokenManager = ({network}: {network: Chain.SupportedNetworks}) => {
   const rootStorage = mountMMKVStorage<Portfolio.Token.Id>({path: '/', id: `${network}.token-manager`})
-  const appTokenDiscoveryStorage = rootStorage.join('token-discovery/')
   const appTokenInfoStorage = rootStorage.join('token-info/')
 
   const tokenStorage = portfolioTokenStorageMaker({
-    tokenDiscoveryStorage: observableStorageMaker(appTokenDiscoveryStorage),
     tokenInfoStorage: observableStorageMaker(appTokenInfoStorage),
   })
   const api = portfolioApiMaker({

apps/wallet-mobile/src/navigation.tsx

@@ -315,8 +315,9 @@ export type FirstRunRouteNavigation = StackNavigationProp<FirstRunRoutes>
 export type NftRoutes = {
   'nft-gallery': undefined
   'nft-details': {id: Portfolio.Token.Id}
-  'image-zoom': {id: Portfolio.Token.Id}
+  'nft-image-zoom': {id: Portfolio.Token.Id}
 }
+export type NftRouteNavigation = StackNavigationProp<NftRoutes>
 
 export type MenuRoutes = {
   menu: undefined