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/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'