feat: Buy Bag events (#5062)

* Add activity boolean to Collection page event

* Log add-to-bag events

* WIP

* Bag update events

* Log pay event

* Bag success event

* Add bag signed event

* Move formatting function out to util

* Format event properties with utility function

* Remove console log and fix event on details page

* Remove commented code

* Fix event names to follow convention

* Move priceChangedAssets logging to useEffect

* Add modal constant and useTrace

* Fix typo

src/analytics/constants.ts

@@ -16,6 +16,12 @@ export enum EventName {
   NAVBAR_SEARCH_SELECTED = 'Navbar Search Selected',
   NAVBAR_SEARCH_EXITED = 'Navbar Search Exited',
   NFT_ACTIVITY_SELECTED = 'NFT Activity Selected',
+  NFT_BUY_ADDED = 'NFT Buy Bag Added',
+  NFT_BUY_BAG_CHANGED = 'NFT Buy Bag Changed',
+  NFT_BUY_BAG_PAY = 'NFT Buy Bag Pay Clicked',
+  NFT_BUY_BAG_REFUNDED = 'NFT Buy Bag Refunded',
+  NFT_BUY_BAG_SIGNED = 'NFT Buy Bag Signed',
+  NFT_BUY_BAG_SUCCEEDED = 'NFT Buy Bag Succeeded',
   NFT_FILTER_OPENED = 'NFT Collection Filter Opened',
   NFT_FILTER_SELECTED = 'NFT Filter Selected',
   NFT_TRENDING_ROW_SELECTED = 'Trending Row Selected',
@@ -106,6 +112,7 @@ export enum SectionName {
 /** Known modals for analytics purposes. */
 export enum ModalName {
   CONFIRM_SWAP = 'confirm-swap-modal',
+  NFT_TX_COMPLETE = 'nft-tx-complete-modal',
   TOKEN_SELECTOR = 'token-selector-modal',
   // alphabetize additional modal names.
 }
@@ -125,6 +132,7 @@ export enum ElementName {
   MAX_TOKEN_AMOUNT_BUTTON = 'max-token-amount-button',
   NAVBAR_SEARCH_INPUT = 'navbar-search-input',
   NFT_ACTIVITY_TAB = 'nft-activity-tab',
+  NFT_BUY_BAG_PAY_BUTTON = 'nft-buy-bag-pay-button',
   NFT_FILTER_BUTTON = 'nft-filter-button',
   NFT_FILTER_OPTION = 'nft-filter-option',
   NFT_TRENDING_ROW = 'nft-trending-row',

src/nft/components/bag/Bag.tsx

@@ -20,11 +20,14 @@ import {
 } from 'nft/hooks'
 import { fetchRoute } from 'nft/queries'
 import { BagItemStatus, BagStatus, ProfilePageStateType, RouteResponse, TxStateType } from 'nft/types'
-import { buildSellObject } from 'nft/utils/buildSellObject'
-import { recalculateBagUsingPooledAssets } from 'nft/utils/calcPoolPrice'
-import { fetchPrice } from 'nft/utils/fetchPrice'
+import {
+  buildSellObject,
+  fetchPrice,
+  formatAssetEventProperties,
+  recalculateBagUsingPooledAssets,
+  sortUpdatedAssets,
+} from 'nft/utils'
 import { combineBuyItemsWithTxRoute } from 'nft/utils/txRoute/combineItemsWithTxRoute'
-import { sortUpdatedAssets } from 'nft/utils/updatedAssets'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useQuery, useQueryClient } from 'react-query'
 import { useLocation } from 'react-router-dom'
@@ -283,6 +286,10 @@ const Bag = () => {
                     bagStatus={bagStatus}
                     fetchAssets={fetchAssets}
                     assetsAreInReview={itemsInBag.some((item) => item.status === BagItemStatus.REVIEWING_PRICE_CHANGE)}
+                    eventProperties={{
+                      usd_value: totalUsdPrice,
+                      ...formatAssetEventProperties(itemsInBag.map((item) => item.asset)),
+                    }}
                   />
                 )}
                 {isSellingAssets && isProfilePage && (

src/nft/components/bag/BagContent.tsx

+import { sendAnalyticsEvent } from 'analytics'
+import { EventName } from 'analytics/constants'
+import { Trace } from 'analytics/Trace'
 import { BagRow, PriceChangeBagRow, UnavailableAssetsHeaderRow } from 'nft/components/bag/BagRow'
 import { Column } from 'nft/components/Flex'
 import { useBag, useIsMobile } from 'nft/hooks'
 import { BagItemStatus, BagStatus } from 'nft/types'
 import { recalculateBagUsingPooledAssets } from 'nft/utils/calcPoolPrice'
 import { fetchPrice } from 'nft/utils/fetchPrice'
+import { formatAssetEventProperties } from 'nft/utils/formatEventProperties'
 import { useEffect, useMemo } from 'react'
 import { useQuery } from 'react-query'
 
@@ -44,24 +48,41 @@ export const BagContent = () => {
     const hasAssetsInReview = priceChangedAssets.length > 0
     const hasAssets = itemsInBag.length > 0
 
+    if (hasAssetsInReview)
+      sendAnalyticsEvent(EventName.NFT_BUY_BAG_CHANGED, {
+        usd_value: fetchedPriceData,
+        bag_quantity: itemsInBag,
+        ...formatAssetEventProperties(priceChangedAssets),
+      })
+
     if (bagStatus === BagStatus.IN_REVIEW && !hasAssetsInReview) {
       if (hasAssets) setBagStatus(BagStatus.CONFIRM_REVIEW)
       else setBagStatus(BagStatus.ADDING_TO_BAG)
     }
-  }, [bagStatus, itemsInBag, priceChangedAssets, setBagStatus])
+  }, [bagStatus, itemsInBag, priceChangedAssets, setBagStatus, fetchedPriceData])
 
   return (
     <>
       <Column display={priceChangedAssets.length > 0 || unavailableAssets.length > 0 ? 'flex' : 'none'}>
         {unavailableAssets.length > 0 && (
-          <UnavailableAssetsHeaderRow
-            assets={unavailableAssets}
-            usdPrice={fetchedPriceData}
-            clearUnavailableAssets={() => setItemsInBag(availableItems)}
-            didOpenUnavailableAssets={didOpenUnavailableAssets}
-            setDidOpenUnavailableAssets={setDidOpenUnavailableAssets}
-            isMobile={isMobile}
-          />
+          <Trace
+            name={EventName.NFT_BUY_BAG_CHANGED}
+            properties={{
+              usd_value: fetchedPriceData,
+              bag_quantity: itemsInBag,
+              ...formatAssetEventProperties(unavailableAssets),
+            }}
+            shouldLogImpression
+          >
+            <UnavailableAssetsHeaderRow
+              assets={unavailableAssets}
+              usdPrice={fetchedPriceData}
+              clearUnavailableAssets={() => setItemsInBag(availableItems)}
+              didOpenUnavailableAssets={didOpenUnavailableAssets}
+              setDidOpenUnavailableAssets={setDidOpenUnavailableAssets}
+              isMobile={isMobile}
+            />
+          </Trace>
         )}
         {priceChangedAssets.map((asset, index) => (
           <PriceChangeBagRow

src/nft/components/bag/BagFooter.tsx

 import { BigNumber } from '@ethersproject/bignumber'
 import { Trans } from '@lingui/macro'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import Loader from 'components/Loader'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -48,6 +50,7 @@ interface BagFooterProps {
   bagStatus: BagStatus
   fetchAssets: () => void
   assetsAreInReview: boolean
+  eventProperties: Record<string, unknown>
 }
 
 const PENDING_BAG_STATUSES = [
@@ -65,6 +68,7 @@ export const BagFooter = ({
   bagStatus,
   fetchAssets,
   assetsAreInReview,
+  eventProperties,
 }: BagFooterProps) => {
   const toggleWalletModal = useToggleWalletModal()
   const walletModalIsOpen = useModalIsOpen(ApplicationModal.WALLET)
@@ -102,28 +106,36 @@ export const BagFooter = ({
             )}
           </WarningText>
         )}
-        <Row
-          as="button"
-          color="explicitWhite"
-          className={styles.payButton}
-          disabled={isDisabled}
-          onClick={() => {
-            if (!isConnected) {
-              toggleWalletModal()
-            } else {
-              fetchAssets()
-            }
-          }}
+        <TraceEvent
+          events={[Event.onClick]}
+          name={EventName.NFT_BUY_BAG_PAY}
+          element={ElementName.NFT_BUY_BAG_PAY_BUTTON}
+          properties={{ ...eventProperties }}
+          shouldLogImpression={isConnected && !isDisabled}
         >
-          {isPending && <Loader size="20px" stroke="white" />}
-          {!isConnected || walletModalIsOpen
-            ? 'Connect wallet'
-            : bagStatus === BagStatus.FETCHING_FINAL_ROUTE || bagStatus === BagStatus.CONFIRMING_IN_WALLET
-            ? 'Proceed in wallet'
-            : bagStatus === BagStatus.PROCESSING_TRANSACTION
-            ? 'Transaction pending'
-            : 'Pay'}
-        </Row>
+          <Row
+            as="button"
+            color="explicitWhite"
+            className={styles.payButton}
+            disabled={isDisabled}
+            onClick={() => {
+              if (!isConnected) {
+                toggleWalletModal()
+              } else {
+                fetchAssets()
+              }
+            }}
+          >
+            {isPending && <Loader size="20px" stroke="white" />}
+            {!isConnected || walletModalIsOpen
+              ? 'Connect wallet'
+              : bagStatus === BagStatus.FETCHING_FINAL_ROUTE || bagStatus === BagStatus.CONFIRMING_IN_WALLET
+              ? 'Proceed in wallet'
+              : bagStatus === BagStatus.PROCESSING_TRANSACTION
+              ? 'Transaction pending'
+              : 'Pay'}
+          </Row>
+        </TraceEvent>
       </Footer>
     </Column>
   )

src/nft/components/collection/ActivityCells.tsx

 import { ChainId } from '@uniswap/smart-order-router'
+import { sendAnalyticsEvent } from 'analytics'
+import { EventName, PageName } from 'analytics/constants'
+import { useTrace } from 'analytics/Trace'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -96,6 +99,15 @@ export const BuyCell = ({
     return itemsInBag.some((item) => asset.tokenId === item.asset.tokenId && asset.address === item.asset.address)
   }, [asset, itemsInBag])
 
+  const trace = useTrace({ page: PageName.NFT_COLLECTION_PAGE })
+
+  const eventProperties = {
+    collection_address: asset.address,
+    token_id: asset.tokenId,
+    token_type: asset.tokenType,
+    ...trace,
+  }
+
   return (
     <Column display={{ sm: 'none', lg: 'flex' }} height="full" justifyContent="center" marginX="auto">
       {event.eventType === ActivityEventType.Listing && event.orderStatus ? (
@@ -106,6 +118,7 @@ export const BuyCell = ({
             e.preventDefault()
             isSelected ? removeAsset([asset]) : selectAsset([asset])
             !isSelected && !cartExpanded && !isMobile && toggleCart()
+            !isSelected && sendAnalyticsEvent(EventName.NFT_BUY_ADDED, { eventProperties })
           }}
           disabled={event.orderStatus !== OrderStatus.VALID}
         >

src/nft/components/collection/CollectionAsset.tsx

 import { BigNumber } from '@ethersproject/bignumber'
+import { sendAnalyticsEvent } from 'analytics'
+import { EventName, PageName } from 'analytics/constants'
+import { useTrace } from 'analytics/Trace'
 import { useBag } from 'nft/hooks'
 import { GenieAsset, Markets, UniformHeight } from 'nft/types'
 import { formatWeiToDecimal, isAudio, isVideo, rarityProviderLogo } from 'nft/utils'
@@ -36,6 +39,7 @@ export const CollectionAsset = ({
   const itemsInBag = useBag((state) => state.itemsInBag)
   const bagExpanded = useBag((state) => state.bagExpanded)
   const toggleBag = useBag((state) => state.toggleBag)
+  const trace = useTrace({ page: PageName.NFT_COLLECTION_PAGE })
 
   const { quantity, isSelected } = useMemo(() => {
     return {
@@ -72,6 +76,13 @@ export const CollectionAsset = ({
     }
   }, [asset])
 
+  const eventProperties = {
+    collection_address: asset.address,
+    token_id: asset.tokenId,
+    token_type: asset.tokenType,
+    ...trace,
+  }
+
   return (
     <Card.Container
       asset={asset}
@@ -79,6 +90,7 @@ export const CollectionAsset = ({
       addAssetToBag={() => {
         addAssetsToBag([asset])
         !bagExpanded && !isMobile && toggleBag()
+        sendAnalyticsEvent(EventName.NFT_BUY_ADDED, { ...eventProperties })
       }}
       removeAssetFromBag={() => {
         removeAssetsFromBag([asset])

src/nft/components/collection/TransactionCompleteModal.tsx

+import { EventName, ModalName } from 'analytics/constants'
+import { Trace } from 'analytics/Trace'
+import { useTrace } from 'analytics/Trace'
 import clsx from 'clsx'
 import { Box } from 'nft/components/Box'
 import { Portal } from 'nft/components/common/Portal'
@@ -16,6 +19,7 @@ import {
   parseTransactionResponse,
   shortenTxHash,
 } from 'nft/utils'
+import { formatAssetEventProperties } from 'nft/utils/formatEventProperties'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
@@ -33,6 +37,7 @@ const TxCompleteModal = () => {
   const isMobile = useIsMobile()
   const txHashUrl = getExplorerLink(1, txHash, ExplorerDataType.TRANSACTION)
   const shouldShowModal = (txState === TxStateType.Success || txState === TxStateType.Failed) && txState
+  const trace = useTrace({ modal: ModalName.NFT_TX_COMPLETE })
   const {
     nftsPurchased,
     nftsNotPurchased,
@@ -73,229 +78,264 @@ const TxCompleteModal = () => {
           <Box className={styles.modalContainer} onClick={closeTxCompleteScreen}>
             {/* Successfully purchased NFTs */}
             {showPurchasedModal && (
-              <Box className={styles.successModal} onClick={stopPropagation}>
-                <UniIcon color={vars.color.pink400} width="36" height="36" className={styles.uniLogo} />
-                <Box display="flex" flexWrap="wrap" width="full" height="min">
-                  <h1 className={styles.title}>Complete!</h1>
-                  <p className={styles.subHeading}>Uniswap has granted your wish!</p>
-                </Box>
-                <Box
-                  className={styles.successAssetsContainer}
-                  style={{
-                    maxHeight: nftsPurchased.length > 32 ? (isMobile ? '172px' : '292px') : 'min-content',
-                  }}
-                >
-                  {[...nftsPurchased].map((nft, index) => (
-                    <img
-                      className={clsx(
-                        styles.successAssetImage,
-                        nftsPurchased.length > 1 && styles.successAssetImageGrid
-                      )}
-                      style={{
-                        maxHeight: `${getSuccessfulImageSize(nftsPurchased.length, isMobile)}px`,
-                        maxWidth: `${getSuccessfulImageSize(nftsPurchased.length, isMobile)}px`,
-                      }}
-                      src={nft.imageUrl}
-                      alt={nft.name}
-                      key={index}
-                    />
-                  ))}
-                </Box>
-                {nftsPurchased.length > 32 && <Box className={styles.overflowFade} />}
-                <Box
-                  display="flex"
-                  width="full"
-                  height="min"
-                  flexDirection="row"
-                  marginTop={{ sm: '20', md: '20' }}
-                  flexWrap={{ sm: 'wrap', md: 'nowrap' }}
-                  alignItems="center"
-                  paddingRight={'40'}
-                  paddingLeft={'40'}
-                  className={styles.bottomBar}
-                  justifyContent="space-between"
-                >
-                  <Row>
-                    <Box marginRight="16">
-                      {nftsPurchased.length} NFT{nftsPurchased.length === 1 ? '' : 's'}
-                    </Box>
-                    <Box>{formatEthPrice(totalPurchaseValue.toString())} ETH</Box>
-                  </Row>
-                  <a href={txHashUrl} target="_blank" rel="noreferrer">
-                    <Box color="textPrimary" fontWeight="normal">
-                      {shortenTxHash(txHash, 2, 2)}
-                    </Box>
-                  </a>
+              <Trace
+                name={EventName.NFT_BUY_BAG_SUCCEEDED}
+                properties={{
+                  buy_quantity: nftsPurchased.length,
+                  usd_value: totalPurchaseValue,
+                  transaction_hash: txHash,
+                  ...formatAssetEventProperties(nftsPurchased),
+                  ...trace,
+                }}
+                shouldLogImpression
+              >
+                <Box className={styles.successModal} onClick={stopPropagation}>
+                  <UniIcon color={vars.color.pink400} width="36" height="36" className={styles.uniLogo} />
+                  <Box display="flex" flexWrap="wrap" width="full" height="min">
+                    <h1 className={styles.title}>Complete!</h1>
+                    <p className={styles.subHeading}>Uniswap has granted your wish!</p>
+                  </Box>
+                  <Box
+                    className={styles.successAssetsContainer}
+                    style={{
+                      maxHeight: nftsPurchased.length > 32 ? (isMobile ? '172px' : '292px') : 'min-content',
+                    }}
+                  >
+                    {[...nftsPurchased].map((nft, index) => (
+                      <img
+                        className={clsx(
+                          styles.successAssetImage,
+                          nftsPurchased.length > 1 && styles.successAssetImageGrid
+                        )}
+                        style={{
+                          maxHeight: `${getSuccessfulImageSize(nftsPurchased.length, isMobile)}px`,
+                          maxWidth: `${getSuccessfulImageSize(nftsPurchased.length, isMobile)}px`,
+                        }}
+                        src={nft.imageUrl}
+                        alt={nft.name}
+                        key={index}
+                      />
+                    ))}
+                  </Box>
+                  {nftsPurchased.length > 32 && <Box className={styles.overflowFade} />}
+                  <Box
+                    display="flex"
+                    width="full"
+                    height="min"
+                    flexDirection="row"
+                    marginTop={{ sm: '20', md: '20' }}
+                    flexWrap={{ sm: 'wrap', md: 'nowrap' }}
+                    alignItems="center"
+                    paddingRight={'40'}
+                    paddingLeft={'40'}
+                    className={styles.bottomBar}
+                    justifyContent="space-between"
+                  >
+                    <Row>
+                      <Box marginRight="16">
+                        {nftsPurchased.length} NFT{nftsPurchased.length === 1 ? '' : 's'}
+                      </Box>
+                      <Box>{formatEthPrice(totalPurchaseValue.toString())} ETH</Box>
+                    </Row>
+                    <a href={txHashUrl} target="_blank" rel="noreferrer">
+                      <Box color="textPrimary" fontWeight="normal">
+                        {shortenTxHash(txHash, 2, 2)}
+                      </Box>
+                    </a>
+                  </Box>
                 </Box>
-              </Box>
+              </Trace>
             )}
             {/* NFTs that were not purchased ie Refunds */}
             {showRefundModal &&
               /* Showing both purchases & refunds */
               (showPurchasedModal ? (
-                <Box className={styles.mixedRefundModal} onClick={stopPropagation}>
-                  <Box
-                    height="full"
-                    display="inline-flex"
-                    flexWrap="wrap"
-                    width={{ sm: 'full', md: 'half' }}
-                    paddingRight={{ sm: '0', md: '32' }}
-                  >
-                    <LightningBoltIcon color="pink" />
-                    <p className={styles.subtitle}>Instant Refund</p>
-                    <p className={styles.interStd}>
-                      Uniswap returned{' '}
-                      <span style={{ fontWeight: '700' }}>{formatEthPrice(totalRefundValue.toString())} ETH</span> back
-                      to your wallet for unavailable items.
-                    </p>
+                <Trace
+                  name={EventName.NFT_BUY_BAG_REFUNDED}
+                  properties={{
+                    buy_quantity: nftsPurchased.length,
+                    fail_quantity: nftsNotPurchased.length,
+                    refund_amount_usd: totalUSDRefund,
+                    transaction_hash: txHash,
+                    ...trace,
+                  }}
+                  shouldLogImpression
+                >
+                  <Box className={styles.mixedRefundModal} onClick={stopPropagation}>
                     <Box
-                      display="flex"
+                      height="full"
+                      display="inline-flex"
                       flexWrap="wrap"
-                      bottom="24"
-                      width="full"
-                      alignSelf="flex-end"
-                      position={{ sm: 'absolute', md: 'static' }}
+                      width={{ sm: 'full', md: 'half' }}
+                      paddingRight={{ sm: '0', md: '32' }}
                     >
-                      <p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
-                        {formatEthPrice(totalRefundValue.toString())} ETH
-                      </p>
-                      <p className={styles.totalUsdRefund}>{formatUSDPriceWithCommas(totalUSDRefund)}</p>
-                      <p className={styles.totalEthCost} style={{ width: '100%' }}>
-                        for {nftsNotPurchased.length} unavailable item
-                        {nftsNotPurchased.length === 1 ? '' : 's'}.
+                      <LightningBoltIcon color="pink" />
+                      <p className={styles.subtitle}>Instant Refund</p>
+                      <p className={styles.interStd}>
+                        Uniswap returned{' '}
+                        <span style={{ fontWeight: '700' }}>{formatEthPrice(totalRefundValue.toString())} ETH</span>{' '}
+                        back to your wallet for unavailable items.
                       </p>
                       <Box
-                        position={{ sm: 'absolute', md: 'relative' }}
-                        right={{ sm: '0', md: 'auto' }}
-                        bottom={{ sm: '0', md: 'auto' }}
-                        justifyContent={{ sm: 'flex-end', md: 'flex-start' }}
-                        textAlign={{ sm: 'right', md: 'left' }}
-                        flexShrink="0"
-                        marginRight={{ sm: '40', md: '24' }}
-                        width={{ sm: 'half', md: 'auto' }}
+                        display="flex"
+                        flexWrap="wrap"
+                        bottom="24"
+                        width="full"
+                        alignSelf="flex-end"
+                        position={{ sm: 'absolute', md: 'static' }}
                       >
-                        <a href={txHashUrl} target="_blank" rel="noreferrer">
-                          <Box fontWeight="normal" marginTop="16" className={styles.totalEthCost}>
-                            {shortenTxHash(txHash, 2, 2)}
-                          </Box>
-                        </a>
+                        <p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
+                          {formatEthPrice(totalRefundValue.toString())} ETH
+                        </p>
+                        <p className={styles.totalUsdRefund}>{formatUSDPriceWithCommas(totalUSDRefund)}</p>
+                        <p className={styles.totalEthCost} style={{ width: '100%' }}>
+                          for {nftsNotPurchased.length} unavailable item
+                          {nftsNotPurchased.length === 1 ? '' : 's'}.
+                        </p>
+                        <Box
+                          position={{ sm: 'absolute', md: 'relative' }}
+                          right={{ sm: '0', md: 'auto' }}
+                          bottom={{ sm: '0', md: 'auto' }}
+                          justifyContent={{ sm: 'flex-end', md: 'flex-start' }}
+                          textAlign={{ sm: 'right', md: 'left' }}
+                          flexShrink="0"
+                          marginRight={{ sm: '40', md: '24' }}
+                          width={{ sm: 'half', md: 'auto' }}
+                        >
+                          <a href={txHashUrl} target="_blank" rel="noreferrer">
+                            <Box fontWeight="normal" marginTop="16" className={styles.totalEthCost}>
+                              {shortenTxHash(txHash, 2, 2)}
+                            </Box>
+                          </a>
+                        </Box>
                       </Box>
                     </Box>
+                    <Box className={styles.refundAssetsContainer}>
+                      {nftsNotPurchased.map((nft, index) => (
+                        <Box display="flex" flexWrap="wrap" height="min" width="52" key={index}>
+                          <img className={styles.refundAssetImage} src={nft.imageUrl} alt={nft.name} key={index} />
+                        </Box>
+                      ))}
+                    </Box>
+                    <Box className={styles.refundOverflowFade} />
                   </Box>
-                  <Box className={styles.refundAssetsContainer}>
-                    {nftsNotPurchased.map((nft, index) => (
-                      <Box display="flex" flexWrap="wrap" height="min" width="52" key={index}>
-                        <img className={styles.refundAssetImage} src={nft.imageUrl} alt={nft.name} key={index} />
-                      </Box>
-                    ))}
-                  </Box>
-                  <Box className={styles.refundOverflowFade} />
-                </Box>
+                </Trace>
               ) : (
                 // Only showing when all assets are unavailable
-                <Box className={styles.fullRefundModal} onClick={stopPropagation}>
-                  <Box marginLeft="auto" marginRight="auto" display="flex">
-                    {txState === TxStateType.Success ? (
-                      <>
-                        <LightningBoltIcon />
-                        <h1 className={styles.title}>Instant Refund</h1>
-                      </>
-                    ) : (
-                      <h1 className={styles.title}>Failed Transaction</h1>
-                    )}
-                  </Box>
-                  <p className={styles.bodySmall}>
-                    {txState === TxStateType.Success &&
-                      `Selected item${
-                        nftsPurchased.length === 1 ? ' is' : 's are'
-                      } no longer available. Uniswap instantly refunded you for this incomplete transaction. `}
-                    {formatUsdPrice(txFeeFiat)} was used for gas in attempt to complete this transaction. For support,
-                    please visit our <a href="https://discord.gg/FCfyBSbCU5">Discord</a>
-                  </p>
-                  <Box className={styles.allUnavailableAssets}>
-                    {nftsNotPurchased.length >= 3 && (
-                      <Box className={styles.toggleUnavailable} onClick={() => toggleShowUnavailable()}>
-                        {!showUnavailable && (
-                          <Box paddingLeft="20" paddingTop="8" paddingBottom="8">
-                            {nftsNotPurchased.slice(0, 3).map((asset, index) => (
-                              <img
-                                style={{ zIndex: 2 - index }}
-                                className={styles.unavailableAssetPreview}
-                                src={asset.imageUrl}
-                                alt={asset.name}
-                                key={index}
-                              />
-                            ))}
-                          </Box>
-                        )}
-                        <Box
-                          color={showUnavailable ? 'textPrimary' : 'textSecondary'}
-                          className={styles.unavailableText}
-                        >
-                          Unavailable
-                          <Box className={styles.unavailableItems}>
-                            {nftsNotPurchased.length} item{nftsNotPurchased.length === 1 ? '' : 's'}
+                <Trace
+                  name={EventName.NFT_BUY_BAG_REFUNDED}
+                  properties={{
+                    buy_quantity: 0,
+                    fail_quantity: nftsNotPurchased.length,
+                    refund_amount_usd: totalUSDRefund,
+                    ...trace,
+                  }}
+                  shouldLogImpression
+                >
+                  <Box className={styles.fullRefundModal} onClick={stopPropagation}>
+                    <Box marginLeft="auto" marginRight="auto" display="flex">
+                      {txState === TxStateType.Success ? (
+                        <>
+                          <LightningBoltIcon />
+                          <h1 className={styles.title}>Instant Refund</h1>
+                        </>
+                      ) : (
+                        <h1 className={styles.title}>Failed Transaction</h1>
+                      )}
+                    </Box>
+                    <p className={styles.bodySmall}>
+                      {txState === TxStateType.Success &&
+                        `Selected item${
+                          nftsPurchased.length === 1 ? ' is' : 's are'
+                        } no longer available. Uniswap instantly refunded you for this incomplete transaction. `}
+                      {formatUsdPrice(txFeeFiat)} was used for gas in attempt to complete this transaction. For support,
+                      please visit our <a href="https://discord.gg/FCfyBSbCU5">Discord</a>
+                    </p>
+                    <Box className={styles.allUnavailableAssets}>
+                      {nftsNotPurchased.length >= 3 && (
+                        <Box className={styles.toggleUnavailable} onClick={() => toggleShowUnavailable()}>
+                          {!showUnavailable && (
+                            <Box paddingLeft="20" paddingTop="8" paddingBottom="8">
+                              {nftsNotPurchased.slice(0, 3).map((asset, index) => (
+                                <img
+                                  style={{ zIndex: 2 - index }}
+                                  className={styles.unavailableAssetPreview}
+                                  src={asset.imageUrl}
+                                  alt={asset.name}
+                                  key={index}
+                                />
+                              ))}
+                            </Box>
+                          )}
+                          <Box
+                            color={showUnavailable ? 'textPrimary' : 'textSecondary'}
+                            className={styles.unavailableText}
+                          >
+                            Unavailable
+                            <Box className={styles.unavailableItems}>
+                              {nftsNotPurchased.length} item{nftsNotPurchased.length === 1 ? '' : 's'}
+                            </Box>
                           </Box>
+                          <ChevronUpIcon className={`${!showUnavailable && styles.chevronDown} ${styles.chevron}`} />
                         </Box>
-                        <ChevronUpIcon className={`${!showUnavailable && styles.chevronDown} ${styles.chevron}`} />
-                      </Box>
-                    )}
-                    {(showUnavailable || nftsNotPurchased.length < 3) &&
-                      nftsNotPurchased.map((asset, index) => (
-                        <Box
-                          backgroundColor="backgroundSurface"
-                          display="flex"
-                          padding="4"
-                          marginBottom="1"
-                          borderRadius="8"
-                          key={index}
-                        >
-                          <Box className={styles.assetContainer}>
-                            <img className={styles.fullRefundImage} src={asset.imageUrl} alt={asset.name} />
-                          </Box>
-                          <Box flexWrap="wrap" marginTop="4">
-                            <Box marginLeft="4" width="full" display="flex">
-                              <p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
-                                {formatEthPrice(
-                                  asset.updatedPriceInfo ? asset.updatedPriceInfo.ETHPrice : asset.priceInfo.ETHPrice
-                                )}{' '}
-                                ETH
-                              </p>
+                      )}
+                      {(showUnavailable || nftsNotPurchased.length < 3) &&
+                        nftsNotPurchased.map((asset, index) => (
+                          <Box
+                            backgroundColor="backgroundSurface"
+                            display="flex"
+                            padding="4"
+                            marginBottom="1"
+                            borderRadius="8"
+                            key={index}
+                          >
+                            <Box className={styles.assetContainer}>
+                              <img className={styles.fullRefundImage} src={asset.imageUrl} alt={asset.name} />
                             </Box>
-                            <Box color="textPrimary" className={styles.totalUsdRefund}>
-                              {txState === TxStateType.Success ? 'Refunded' : asset.name}
+                            <Box flexWrap="wrap" marginTop="4">
+                              <Box marginLeft="4" width="full" display="flex">
+                                <p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
+                                  {formatEthPrice(
+                                    asset.updatedPriceInfo ? asset.updatedPriceInfo.ETHPrice : asset.priceInfo.ETHPrice
+                                  )}{' '}
+                                  ETH
+                                </p>
+                              </Box>
+                              <Box color="textPrimary" className={styles.totalUsdRefund}>
+                                {txState === TxStateType.Success ? 'Refunded' : asset.name}
+                              </Box>
                             </Box>
                           </Box>
-                        </Box>
-                      ))}
-                  </Box>
-                  {showUnavailable && <Box className={styles.fullRefundOverflowFade} />}
-                  <p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
-                    {formatEthPrice(totalRefundValue.toString())} ETH
-                  </p>
-                  <p className={styles.totalUsdRefund}>{formatUSDPriceWithCommas(totalUSDRefund)}</p>
-                  <Box className={styles.walletAddress} marginLeft="auto" marginRight="0">
-                    <a href={txHashUrl} target="_blank" rel="noreferrer">
-                      <Box className={styles.addressHash}>{shortenTxHash(txHash, 2, 2)}</Box>
-                    </a>
-                  </Box>
-                  <p className={styles.totalEthCost}>
-                    for {nftsNotPurchased.length} unavailable item
-                    {nftsNotPurchased.length === 1 ? '' : 's'}.
-                  </p>
-                  <Box
-                    as="button"
-                    border="none"
-                    backgroundColor="genieBlue"
-                    cursor="pointer"
-                    className={styles.returnButton}
-                    type="button"
-                    onClick={() => closeTxCompleteScreen()}
-                  >
-                    <BackArrowIcon className={styles.fullRefundBackArrow} />
-                    Return to Marketplace
+                        ))}
+                    </Box>
+                    {showUnavailable && <Box className={styles.fullRefundOverflowFade} />}
+                    <p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
+                      {formatEthPrice(totalRefundValue.toString())} ETH
+                    </p>
+                    <p className={styles.totalUsdRefund}>{formatUSDPriceWithCommas(totalUSDRefund)}</p>
+                    <Box className={styles.walletAddress} marginLeft="auto" marginRight="0">
+                      <a href={txHashUrl} target="_blank" rel="noreferrer">
+                        <Box className={styles.addressHash}>{shortenTxHash(txHash, 2, 2)}</Box>
+                      </a>
+                    </Box>
+                    <p className={styles.totalEthCost}>
+                      for {nftsNotPurchased.length} unavailable item
+                      {nftsNotPurchased.length === 1 ? '' : 's'}.
+                    </p>
+                    <Box
+                      as="button"
+                      border="none"
+                      backgroundColor="genieBlue"
+                      cursor="pointer"
+                      className={styles.returnButton}
+                      type="button"
+                      onClick={() => closeTxCompleteScreen()}
+                    >
+                      <BackArrowIcon className={styles.fullRefundBackArrow} />
+                      Return to Marketplace
+                    </Box>
                   </Box>
-                </Box>
+                </Trace>
               ))}
           </Box>
         </Portal>

src/nft/components/details/AssetDetails.tsx

 import { useWeb3React } from '@web3-react/core'
+import { sendAnalyticsEvent } from 'analytics'
+import { EventName, PageName } from 'analytics/constants'
+import { useTrace } from 'analytics/Trace'
 import clsx from 'clsx'
 import { MouseoverTooltip } from 'components/Tooltip/index'
 import useENSName from 'hooks/useENSName'
@@ -132,6 +135,15 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
   const [isOwned, setIsOwned] = useState(false)
   const { account: address, provider } = useWeb3React()
 
+  const trace = useTrace({ page: PageName.NFT_DETAILS_PAGE })
+
+  const eventProperties = {
+    collection_address: asset.address,
+    token_id: asset.tokenId,
+    token_type: asset.tokenType,
+    ...trace,
+  }
+
   const { rarityProvider, rarityLogo } = useMemo(
     () =>
       asset.rarity
@@ -394,7 +406,10 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
                 onClick={() => {
                   if (isSelected) {
                     removeAssetsFromBag([asset])
-                  } else addAssetsToBag([asset])
+                  } else {
+                    addAssetsToBag([asset])
+                    sendAnalyticsEvent(EventName.NFT_BUY_ADDED, { ...eventProperties })
+                  }
                   setSelected((x) => !x)
                 }}
               >

src/nft/components/details/AssetPriceDetails.tsx

 import { useWeb3React } from '@web3-react/core'
+import { sendAnalyticsEvent } from 'analytics'
+import { EventName, PageName } from 'analytics/constants'
+import { useTrace } from 'analytics/Trace'
 import { CancelListingIcon, MinusIcon, PlusIcon } from 'nft/components/icons'
 import { useBag } from 'nft/hooks'
 import { CollectionInfoForAsset, GenieAsset, TokenType } from 'nft/types'
@@ -196,6 +199,14 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
   const USDPrice = useUsdPrice(asset)
   const isErc1555 = asset.tokenType === TokenType.ERC1155
 
+  const trace = useTrace({ page: PageName.NFT_DETAILS_PAGE })
+  const eventProperties = {
+    collection_address: asset.address,
+    token_id: asset.tokenId,
+    token_type: asset.tokenType,
+    ...trace,
+  }
+
   const { quantity, assetInBag } = useMemo(() => {
     return {
       quantity: itemsInBag.filter(
@@ -242,7 +253,10 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
               assetInBag={assetInBag}
               margin={true}
               useAccentColor={true}
-              onClick={() => (assetInBag ? removeAssetsFromBag([asset]) : addAssetsToBag([asset]))}
+              onClick={() => {
+                assetInBag ? removeAssetsFromBag([asset]) : addAssetsToBag([asset])
+                !assetInBag && sendAnalyticsEvent(EventName.NFT_BUY_ADDED, { ...eventProperties })
+              }}
             >
               <ThemedText.SubHeader lineHeight={'20px'}>{assetInBag ? 'Remove' : 'Buy Now'}</ThemedText.SubHeader>
             </BuyNowButton>

src/nft/hooks/useSendTransaction.ts

@@ -3,6 +3,8 @@ import { BigNumber } from '@ethersproject/bignumber'
 import { hexStripZeros } from '@ethersproject/bytes'
 import { ContractReceipt } from '@ethersproject/contracts'
 import type { JsonRpcSigner } from '@ethersproject/providers'
+import { sendAnalyticsEvent } from 'analytics'
+import { EventName } from 'analytics/constants'
 import create from 'zustand'
 import { devtools } from 'zustand/middleware'
 
@@ -48,6 +50,7 @@ export const useSendTransaction = create<TxState>()(
           const res = await signer.sendTransaction(tx)
           set({ state: TxStateType.Confirming })
           set({ txHash: res.hash })
+          sendAnalyticsEvent(EventName.NFT_BUY_BAG_SIGNED, { transaction_hash: res.hash })
 
           const txReceipt = await res.wait()
 

src/nft/pages/collection/index.tsx

@@ -91,7 +91,7 @@ const Collection = () => {
     <>
       <Trace
         page={PageName.NFT_COLLECTION_PAGE}
-        properties={{ collection_address: contractAddress, chain_id: chainId }}
+        properties={{ collection_address: contractAddress, chain_id: chainId, is_activity_view: isActivityToggled }}
         shouldLogImpression
       >
         <Column width="full">

src/nft/utils/formatEventProperties.ts

+import { GenieAsset } from 'nft/types'
+
+export const formatAssetEventProperties = (assets: GenieAsset[]) => ({
+  collection_addresses: assets.map((asset) => asset.address),
+  token_ids: assets.map((asset) => asset.tokenId),
+  token_types: assets.map((asset) => asset.tokenType),
+})

src/nft/utils/index.ts

@@ -5,6 +5,7 @@ export * from './calcPoolPrice'
 export * from './carousel'
 export * from './currency'
 export * from './fetchPrice'
+export * from './formatEventProperties'
 export * from './isAudio'
 export * from './isVideo'
 export * from './listNfts'