diff --git a/apps/wallet-mobile/src/NftDetails/NftDetailsImage.tsx b/apps/wallet-mobile/src/NftDetails/NftDetailsImage.tsx index 2c9f489159..f51b69f670 100644 --- a/apps/wallet-mobile/src/NftDetails/NftDetailsImage.tsx +++ b/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>().params + const {id} = useParams(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) diff --git a/apps/wallet-mobile/src/metrics/ampli/index.ts b/apps/wallet-mobile/src/metrics/ampli/index.ts index db6bd12fab..cbc32fc8df 100644 --- a/apps/wallet-mobile/src/metrics/ampli/index.ts +++ b/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 * diff --git a/apps/wallet-mobile/src/metrics/metricsManager.test.tsx b/apps/wallet-mobile/src/metrics/metricsManager.test.tsx index 14912b9e6c..879b890d65 100644 --- a/apps/wallet-mobile/src/metrics/metricsManager.test.tsx +++ b/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() diff --git a/apps/wallet-mobile/src/metrics/metricsManager.tsx b/apps/wallet-mobile/src/metrics/metricsManager.tsx index b567af2e11..5b7dffc9bb 100644 --- a/apps/wallet-mobile/src/metrics/metricsManager.tsx +++ b/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), diff --git a/apps/wallet-mobile/src/metrics/mocks.ts b/apps/wallet-mobile/src/metrics/mocks.ts index 2e4d8a4da6..3d5d539105 100644 --- a/apps/wallet-mobile/src/metrics/mocks.ts +++ b/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,