feat: Log NFT explore events (#4997)

* Add page event and constant for NFT Explore

* Log trending row event

* Add chainID to table row log properties

src/analytics/constants.ts

@@ -17,6 +17,7 @@ export enum EventName {
   NFT_ACTIVITY_SELECTED = 'NFT Activity Selected',
   NFT_FILTER_OPENED = 'NFT Collection Filter Opened',
   NFT_FILTER_SELECTED = 'NFT Filter Selected',
+  NFT_TRENDING_ROW_SELECTED = 'Trending Row Selected',
   SWAP_AUTOROUTER_VISUALIZATION_EXPANDED = 'Swap Autorouter Visualization Expanded',
   SWAP_DETAILS_EXPANDED = 'Swap Details Expanded',
   SWAP_MAX_TOKEN_AMOUNT_SELECTED = 'Swap Max Token Amount Selected',
@@ -79,6 +80,7 @@ export enum SWAP_PRICE_UPDATE_USER_RESPONSE {
 export enum PageName {
   NFT_COLLECTION_PAGE = 'nft-collection-page',
   NFT_DETAILS_PAGE = 'nft-details-page',
+  NFT_EXPLORE_PAGE = 'nft-explore-page',
   TOKEN_DETAILS_PAGE = 'token-details',
   TOKENS_PAGE = 'tokens-page',
   POOL_PAGE = 'pool-page',
@@ -123,6 +125,7 @@ export enum ElementName {
   NFT_ACTIVITY_TAB = 'nft-activity-tab',
   NFT_FILTER_BUTTON = 'nft-filter-button',
   NFT_FILTER_OPTION = 'nft-filter-option',
+  NFT_TRENDING_ROW = 'nft-trending-row',
   PRICE_UPDATE_ACCEPT_BUTTON = 'price-update-accept-button',
   SWAP_BUTTON = 'swap-button',
   SWAP_DETAILS_DROPDOWN = 'swap-details-dropdown',

src/nft/components/explore/Table.tsx

@@ -1,3 +1,6 @@
+import { useWeb3React } from '@web3-react/core'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import clsx from 'clsx'
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -26,6 +29,7 @@ export function Table<D extends Record<string, unknown>>({
   classNames,
   ...props
 }: TableProps<D>) {
+  const { chainId } = useWeb3React()
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, setHiddenColumns } = useTable(
     {
       columns,
@@ -94,6 +98,13 @@ export function Table<D extends Record<string, unknown>>({
           prepareRow(row)
 
           return (
+            <TraceEvent
+              events={[Event.onClick]}
+              name={EventName.NFT_TRENDING_ROW_SELECTED}
+              properties={{ collection_address: row.original.collection.address, chain_id: chainId }}
+              element={ElementName.NFT_TRENDING_ROW}
+              key={i}
+            >
               <tr
                 className={styles.tr}
                 {...row.getRowProps()}
@@ -109,6 +120,7 @@ export function Table<D extends Record<string, unknown>>({
                   )
                 })}
               </tr>
+            </TraceEvent>
           )
         })}
       </tbody>

src/nft/pages/explore/index.tsx

@@ -1,11 +1,15 @@
+import { PageName } from 'analytics/constants'
+import { Trace } from 'analytics/Trace'
 import Banner from 'nft/components/explore/Banner'
 import TrendingCollections from 'nft/components/explore/TrendingCollections'
 
 const NftExplore = () => {
   return (
     <>
+      <Trace page={PageName.NFT_EXPLORE_PAGE} shouldLogImpression>
         <Banner />
         <TrendingCollections />
+      </Trace>
     </>
   )
 }