chore: Added new metrics event nft image viewed

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

@@ -1,18 +1,30 @@
-import {RouteProp, useRoute} from '@react-navigation/native'
 import React from 'react'
 import {Dimensions, StyleSheet, View} from 'react-native'
 import ViewTransformer from 'react-native-easy-view-transformer'
 
 import {FadeIn} from '../components'
 import {NftPreview} from '../components/NftPreview'
-import {NftRoutes} from '../navigation'
+import {useMetrics} from '../metrics/metricsManager'
+import {NftRoutes, useParams} from '../navigation'
 import {useSelectedWallet} from '../SelectedWallet'
+import {isEmptyString} from '../utils/utils'
 import {useNft} from '../yoroi-wallets/hooks'
 
+type Params = NftRoutes['nft-details']
+
+const isParams = (params?: Params | object | undefined): params is Params => {
+  return !!params && 'id' in params && !isEmptyString(params.id)
+}
+
 export const NftDetailsImage = () => {
-  const {id} = useRoute<RouteProp<NftRoutes, 'nft-details'>>().params
+  const {id} = useParams<Params>(isParams)
   const wallet = useSelectedWallet()
   const nft = useNft(wallet, {id})
+  const {track} = useMetrics()
+
+  React.useEffect(() => {
+    if (!isEmptyString(nft?.id)) track.nftGalleryDetailsImageViewed()
+  }, [nft?.id, track])
 
   const dimensions = Dimensions.get('window')
   const imageSize = Math.min(dimensions.width, dimensions.height)

apps/wallet-mobile/src/metrics/ampli/index.ts

@@ -605,6 +605,10 @@ export interface SwapProperties {
   to_asset: string;
 }
 
+export class NftGalleryDetailsImageViewed implements BaseEvent {
+  event_type = 'NFT Gallery Details Image Viewed';
+}
+
 export class NftGalleryDetailsPageViewed implements BaseEvent {
   event_type = 'NFT Gallery Details Page Viewed';
 }
@@ -872,6 +876,21 @@ export class Ampli {
     return this.amplitude!.flush();
   }
 
+  /**
+   * NFT Gallery Details Image Viewed
+   *
+   * [View in Tracking Plan](https://data.amplitude.com/emurgo/Yoroi/events/main/latest/NFT%20Gallery%20Details%20Image%20Viewed)
+   *
+   * This event tracks when a user views the NFT image at full screen
+   *
+   * @param options Amplitude event options.
+   */
+  nftGalleryDetailsImageViewed(
+    options?: EventOptions,
+  ) {
+    return this.track(new NftGalleryDetailsImageViewed(), options);
+  }
+
   /**
    * NFT Gallery Details Page Viewed
    *

apps/wallet-mobile/src/metrics/metricsManager.test.tsx

@@ -52,6 +52,7 @@ const mockAmpli = {
   nftGalleryPageViewed: jest.fn(),
   nftGallerySearchActivated: jest.fn(),
   nftGalleryDetailsPageViewed: jest.fn(),
+  nftGalleryDetailsImageViewed: jest.fn(),
 
   sendInitiated: jest.fn(),
   sendSelectAssetPageViewed: jest.fn(),
@@ -119,6 +120,7 @@ describe('makeMetricsManager', () => {
     metricsManager.track.nftGalleryPageViewed({nft_count: 10})
     metricsManager.track.nftGallerySearchActivated({nft_search_term: 'test', nft_count: 10})
     metricsManager.track.nftGalleryDetailsPageViewed()
+    metricsManager.track.nftGalleryDetailsImageViewed()
 
     metricsManager.track.sendInitiated()
     metricsManager.track.sendSelectAssetPageViewed()
@@ -131,6 +133,7 @@ describe('makeMetricsManager', () => {
     expect(mockAmpli.nftGalleryPageViewed).toHaveBeenCalledWith({nft_count: 10})
     expect(mockAmpli.nftGallerySearchActivated).toHaveBeenCalledWith({nft_search_term: 'test', nft_count: 10})
     expect(mockAmpli.nftGalleryDetailsPageViewed).toHaveBeenCalled()
+    expect(mockAmpli.nftGalleryDetailsImageViewed).toHaveBeenCalled()
 
     expect(mockAmpli.sendInitiated).toHaveBeenCalled()
     expect(mockAmpli.sendSelectAssetPageViewed).toHaveBeenCalled()

apps/wallet-mobile/src/metrics/metricsManager.tsx

@@ -100,6 +100,7 @@ export const makeMetricsManager = (
     nftGalleryPageViewed: metricsModule.nftGalleryPageViewed.bind(metricsModule),
     nftGallerySearchActivated: metricsModule.nftGallerySearchActivated.bind(metricsModule),
     nftGalleryDetailsPageViewed: metricsModule.nftGalleryDetailsPageViewed.bind(metricsModule),
+    nftGalleryDetailsImageViewed: metricsModule.nftGalleryDetailsImageViewed.bind(metricsModule),
 
     sendInitiated: metricsModule.sendInitiated.bind(metricsModule),
     sendSelectAssetPageViewed: metricsModule.sendSelectAssetPageViewed.bind(metricsModule),

apps/wallet-mobile/src/metrics/mocks.ts

@@ -16,6 +16,7 @@ export const mockMetricsManager = (): MetricsManager => {
     nftGalleryPageViewed: e,
     nftGallerySearchActivated: e,
     nftGalleryDetailsPageViewed: e,
+    nftGalleryDetailsImageViewed: e,
 
     sendInitiated: e,
     sendSelectAssetPageViewed: e,