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,21 +98,29 @@ export function Table<D extends Record<string, unknown>>({
           prepareRow(row)
 
           return (
-            <tr
-              className={styles.tr}
-              {...row.getRowProps()}
+            <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}
-              onClick={() => navigate(`/nfts/collection/${row.original.collection.address}`)}
             >
-              {row.cells.map((cell, cellIndex) => {
-                return (
-                  <td className={clsx(styles.td, classNames?.td)} {...cell.getCellProps()} key={cellIndex}>
-                    {cellIndex === 0 ? <span className={styles.rank}>{i + 1}</span> : null}
-                    {cell.render('Cell')}
-                  </td>
-                )
-              })}
-            </tr>
+              <tr
+                className={styles.tr}
+                {...row.getRowProps()}
+                key={i}
+                onClick={() => navigate(`/nfts/collection/${row.original.collection.address}`)}
+              >
+                {row.cells.map((cell, cellIndex) => {
+                  return (
+                    <td className={clsx(styles.td, classNames?.td)} {...cell.getCellProps()} key={cellIndex}>
+                      {cellIndex === 0 ? <span className={styles.rank}>{i + 1}</span> : null}
+                      {cell.render('Cell')}
+                    </td>
+                  )
+                })}
+              </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 (
     <>
-      <Banner />
-      <TrendingCollections />
+      <Trace page={PageName.NFT_EXPLORE_PAGE} shouldLogImpression>
+        <Banner />
+        <TrendingCollections />
+      </Trace>
     </>
   )
 }