Merge 8803ecb into cefae65

src/components/CollectionDetailPage/CollectionItem/CollectionItem.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { ethers } from 'ethers'
 import { EmoteDataADR74, Network, WearableCategory } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { Dropdown, Icon, Button, Mana, Table } from 'decentraland-ui'
 import { Link } from 'react-router-dom'
 import { locations } from 'routing/locations'
@@ -17,10 +18,13 @@ import ItemImage from 'components/ItemImage'
 import ResetItemButton from './ResetItemButton'
 import { Props } from './CollectionItem.types'
 import styles from './CollectionItem.module.css'
+import { extractThirdPartyTokenId, extractTokenId, isThirdParty } from 'lib/urn'
 
 const LENGTH_LIMIT = 25
 
 export default class CollectionItem extends React.PureComponent<Props> {
+  analytics = getAnalytics()
+
   handleEditPriceAndBeneficiary = () => {
     const { onOpenModal, item } = this.props
     onOpenModal('EditPriceAndBeneficiaryModal', { itemId: item.id })
@@ -40,6 +44,12 @@ export default class CollectionItem extends React.PureComponent<Props> {
     const { onNavigate, item, onSetItems } = this.props
     onSetItems([item])
     onNavigate(locations.itemEditor({ itemId: item.id, collectionId: item.collectionId }), { fromParam: FromParam.COLLECTIONS })
+    this.analytics.track('Preview Item', {
+      ITEM_ID: item?.urn ? (isThirdParty(item.urn) ? extractThirdPartyTokenId(item.urn) : extractTokenId(item.urn)) : null,
+      ITEM_TYPE: item.type,
+      ITEM_NAME: item.name,
+      ITEM_IS_THIRD_PARTY: isThirdParty(item.urn)
+    })
   }
 
   handleDeleteItem = () => {

src/components/ItemEditorPage/CenterPanel/CenterPanel.tsx

@@ -13,13 +13,15 @@ import {
   Button,
   WearablePreview
 } from 'decentraland-ui'
+import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Color4 } from 'lib/colors'
 import { isDevelopment } from 'lib/environment'
 import { isTPCollection } from 'modules/collection/utils'
 import { ItemType } from 'modules/item/types'
 import { toBase64, toHex } from 'modules/editor/utils'
 import { getSkinColors, getEyeColors, getHairColors } from 'modules/editor/avatar'
+import { extractThirdPartyTokenId, extractTokenId, isThirdParty } from 'lib/urn'
 import BuilderIcon from 'components/Icon'
 import { ControlOptionAction } from 'components/Modals/CreateSingleItemModal/EditThumbnailStep/EditThumbnailStep.types'
 import AvatarColorDropdown from './AvatarColorDropdown'
@@ -34,6 +36,8 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
     isLoading: false
   }
 
+  analytics = getAnalytics()
+
   componentDidMount() {
     const {
       address,
@@ -91,6 +95,16 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
       onSetAvatarAnimation(value as PreviewEmote)
     }
 
+    this.analytics.track('Play Emote', {
+      EMOTE_PLAYED_BASE: !emote,
+      EMOTE_PLAYED_ITEM_ID: emote?.urn ? extractTokenId(emote.urn) : null,
+      EMOTE_PLAYED_NAME: emote ? emote.name : value,
+      PREVIEWED_WEARABLE_ITEM_ID: visibleItems.map(item =>
+        item?.urn ? (isThirdParty(item.urn) ? extractThirdPartyTokenId(item.urn) : extractTokenId(item.urn)) : null
+      ),
+      PREVIEWED_WEARABLE_NAME: visibleItems.map(item => item.name)
+    })
+
     onSetItems(newVisibleItems)
   }
 

src/components/ItemEditorPage/LeftPanel/Items/Items.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
-import { isThirdParty } from 'lib/urn'
+import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import {
   Section,
   Loader,
@@ -17,6 +17,7 @@ import {
 import { Item, ItemType } from 'modules/item/types'
 import { hasBodyShape } from 'modules/item/utils'
 import { TP_TRESHOLD_TO_REVIEW } from 'modules/collection/constants'
+import { extractThirdPartyTokenId, extractTokenId, isThirdParty } from 'lib/urn'
 import { LEFT_PANEL_PAGE_SIZE } from '../../constants'
 import Collapsable from 'components/Collapsable'
 import Icon from 'components/Icon'
@@ -41,6 +42,8 @@ export default class Items extends React.PureComponent<Props, State> {
     doNotShowSamplesModalAgain: false
   }
 
+  analytics = getAnalytics()
+
   componentDidMount() {
     const { items, onSetReviewedItems } = this.props
     onSetReviewedItems(items)
@@ -90,6 +93,12 @@ export default class Items extends React.PureComponent<Props, State> {
 
     if (!this.isVisible(item)) {
       newVisibleItemIds.push(item)
+      this.analytics.track('Preview Item', {
+        ITEM_ID: item?.urn ? (isThirdParty(item.urn) ? extractThirdPartyTokenId(item.urn) : extractTokenId(item.urn)) : null,
+        ITEM_TYPE: item.type,
+        ITEM_NAME: item.name,
+        ITEM_IS_THIRD_PARTY: isThirdParty(item.urn)
+      })
     }
 
     onSetItems(newVisibleItemIds)

src/components/ProjectCard/ProjectCard.css

@@ -94,11 +94,14 @@
   position: absolute;
   top: 0;
   width: 100%;
-  visibility: hidden;
   padding: 8px;
 }
 
-.ProjectCard:hover .options-container {
+.ProjectCard .options-container .options-dropdown {
+  visibility: hidden;
+}
+
+.ProjectCard:hover .options-container .options-dropdown {
   visibility: visible;
 }
 

src/lib/urn.ts

@@ -152,3 +152,29 @@ export function decodeURN(urn: URN): DecodedURN {
 function getNetworkURNProtocol(network: Network) {
   return getURNProtocol(getChainIdByNetwork(network))
 }
+
+export function extractCollectionAddress(urn: URN): string {
+  const decodedURN = decodeURN(urn)
+  if (decodedURN.type !== URNType.COLLECTIONS_V2) {
+    throw new Error('URN is not a collections-v2 URN')
+  }
+
+  const { collectionAddress } = decodedURN
+
+  return collectionAddress
+}
+
+export function extractTokenId(urn: URN): string {
+  const decodedURN = decodeURN(urn)
+  if (decodedURN.type !== URNType.COLLECTIONS_V2) {
+    throw new Error('URN is not a collections-v2 URN')
+  }
+
+  const { collectionAddress, tokenId } = decodedURN
+
+  if (!tokenId) {
+    throw new Error('URN is not an Item URN')
+  }
+
+  return `${collectionAddress}:${tokenId ?? ''}`
+}