feat: page view event on NFT Details (#4995)

* Add details page to page constants

* Add page view event to details page

src/analytics/constants.ts

@@ -74,6 +74,7 @@ export enum SWAP_PRICE_UPDATE_USER_RESPONSE {
  * Known pages in the app. Highest order context.
  */
 export enum PageName {
+  NFT_DETAILS_PAGE = 'nft-details-page',
   TOKEN_DETAILS_PAGE = 'token-details',
   TOKENS_PAGE = 'tokens-page',
   POOL_PAGE = 'pool-page',

src/nft/pages/asset/Asset.tsx

+import { PageName } from 'analytics/constants'
+import { Trace } from 'analytics/Trace'
 import { AssetDetails } from 'nft/components/details/AssetDetails'
 import { AssetPriceDetails } from 'nft/components/details/AssetPriceDetails'
 import { fetchSingleAsset } from 'nft/queries'
@@ -29,14 +31,20 @@ const Asset = () => {
 
   return (
     <>
-      {asset && collection ? (
-        <AssetContainer>
-          <AssetDetails collection={collection} asset={asset} />
-          <AssetPriceDetails collection={collection} asset={asset} />
-        </AssetContainer>
-      ) : (
-        <div>Holder for loading ...</div>
-      )}
+      <Trace
+        page={PageName.NFT_DETAILS_PAGE}
+        properties={{ collection_address: contractAddress, token_id: tokenId }}
+        shouldLogImpression
+      >
+        {asset && collection ? (
+          <AssetContainer>
+            <AssetDetails collection={collection} asset={asset} />
+            <AssetPriceDetails collection={collection} asset={asset} />
+          </AssetContainer>
+        ) : (
+          <div>Holder for loading ...</div>
+        )}
+      </Trace>
     </>
   )
 }