feat: add additional mini portfolio events (#6233)

* add events

* update nft logging

* fix lint

* mikes comments

package.json

@@ -135,7 +135,7 @@
     "@sentry/tracing": "^7.40.0",
     "@types/react-window-infinite-loader": "^1.0.6",
     "@uniswap/analytics": "^1.3.1",
-    "@uniswap/analytics-events": "^2.7.0",
+    "@uniswap/analytics-events": "^2.8.0",
     "@uniswap/conedison": "^1.4.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",

src/components/WalletDropdown/MiniPortfolio/Activity/index.tsx

 import { t } from '@lingui/macro'
+import { TraceEvent } from '@uniswap/analytics'
+import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
 import Column from 'components/Column'
 import AlertTriangleFilled from 'components/Icons/AlertTriangleFilled'
 import { LoaderV2 } from 'components/Icons/LoadingSpinner'
@@ -178,6 +180,12 @@ function ActivityRow({ activity }: { activity: Activity }) {
   const timeSince = useTimeSince(activity.timestamp)
 
   return (
+    <TraceEvent
+      events={[BrowserEvent.onClick]}
+      name={SharedEventName.ELEMENT_CLICKED}
+      element={InterfaceElementName.MINI_PORTFOLIO_ACTIVITY_ROW}
+      properties={{ hash: activity.hash, chain_id: chainId, explorer_url: explorerUrl }}
+    >
       <PortfolioRow
         left={
           <Column>
@@ -202,5 +210,6 @@ function ActivityRow({ activity }: { activity: Activity }) {
         }
         onClick={() => window.open(explorerUrl, '_blank')}
       />
+    </TraceEvent>
   )
 }

src/components/WalletDropdown/MiniPortfolio/NFT.tsx

+import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
+import { InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
 import Column from 'components/Column'
 import Row from 'components/Row'
 import { useToggleWalletDrawer } from 'components/WalletDropdown'
@@ -45,6 +47,7 @@ export function NFT({
 }) {
   const toggleWalletDrawer = useToggleWalletDrawer()
   const navigate = useNavigate()
+  const trace = useTrace()
 
   const navigateToNFTDetails = () => {
     navigate(`/nfts/asset/${asset.asset_contract.address}/${asset.tokenId}`)
@@ -63,6 +66,15 @@ export function NFT({
         unselectAsset={() => {
           /* */
         }}
+        sendAnalyticsEvent={() =>
+          sendAnalyticsEvent(SharedEventName.ELEMENT_CLICKED, {
+            element: InterfaceElementName.MINI_PORTFOLIO_NFT_ITEM,
+            collection_name: asset.collection?.name,
+            collection_address: asset.collection?.address,
+            token_id: asset.tokenId,
+            ...trace,
+          })
+        }
         mediaShouldBePlaying={mediaShouldBePlaying}
         setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
       />

src/components/WalletDropdown/MiniPortfolio/Pools/index.tsx

 import { t } from '@lingui/macro'
+import { TraceEvent } from '@uniswap/analytics'
+import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
 import { formatNumber, NumberType } from '@uniswap/conedison/format'
 import { Position } from '@uniswap/v3-sdk'
 import { useWeb3React } from '@web3-react/core'
@@ -112,6 +114,12 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
   }
 
   return (
+    <TraceEvent
+      events={[BrowserEvent.onClick]}
+      name={SharedEventName.ELEMENT_CLICKED}
+      element={InterfaceElementName.MINI_PORTFOLIO_POOLS_ROW}
+      properties={{ chain_id: chainId, pool_token_0: pool.token0, pool_token_1: pool.token1 }}
+    >
       <PortfolioRow
         onClick={onClick}
         left={<PortfolioLogo chainId={chainId} currencies={[pool.token0, pool.token1]} />}
@@ -150,5 +158,6 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
           </>
         }
       />
+    </TraceEvent>
   )
 }

src/components/WalletDropdown/MiniPortfolio/Tokens.tsx

+import { TraceEvent } from '@uniswap/analytics'
+import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
 import { formatNumber, NumberType } from '@uniswap/conedison/format'
 import Row from 'components/Row'
 import { formatDelta } from 'components/Tokens/TokenDetails/PriceChart'
@@ -102,6 +104,12 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok
 
   const currency = gqlToCurrency(token)
   return (
+    <TraceEvent
+      events={[BrowserEvent.onClick]}
+      name={SharedEventName.ELEMENT_CLICKED}
+      element={InterfaceElementName.MINI_PORTFOLIO_TOKEN_ROW}
+      properties={{ chain_id: currency.chainId, token_name: token?.name, address: token?.address }}
+    >
       <PortfolioRow
         left={<PortfolioLogo chainId={currency.chainId} currencies={[currency]} size="40px" />}
         title={<ThemedText.SubHeader fontWeight={500}>{token?.name}</ThemedText.SubHeader>}
@@ -125,5 +133,6 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok
           )
         }
       />
+    </TraceEvent>
   )
 }

src/components/WalletDropdown/MiniPortfolio/index.tsx

@@ -47,7 +47,7 @@ const PageWrapper = styled.div`
 interface Page {
   title: React.ReactNode
   component: ({ account }: { account: string }) => JSX.Element
-  loggingElementName?: string
+  loggingElementName: string
 }
 
 const Pages: Array<Page> = [
@@ -58,7 +58,11 @@ const Pages: Array<Page> = [
   },
   { title: <Trans>NFTs</Trans>, component: NFTs, loggingElementName: InterfaceElementName.MINI_PORTFOLIO_NFT_TAB },
   { title: <Trans>Pools</Trans>, component: Pools, loggingElementName: InterfaceElementName.MINI_PORTFOLIO_POOLS_TAB },
-  { title: <Trans>Activity</Trans>, component: Activity },
+  {
+    title: <Trans>Activity</Trans>,
+    component: Activity,
+    loggingElementName: InterfaceElementName.MINI_PORTFOLIO_ACTIVITY_TAB,
+  },
 ]
 
 function MiniPortfolio({ account }: { account: string }) {
@@ -74,7 +78,6 @@ function MiniPortfolio({ account }: { account: string }) {
             events={[BrowserEvent.onClick]}
             name={SharedEventName.NAVBAR_CLICKED}
             element={Pages[index].loggingElementName}
-            shouldLogImpression={!!Pages[index].loggingElementName}
             key={index}
           >
             <NavItem

src/nft/components/card/index.tsx

@@ -16,6 +16,7 @@ interface NftCardProps {
   selectAsset: () => void
   unselectAsset: () => void
   onClick?: () => void
+  sendAnalyticsEvent?: () => void
   doNotLinkToDetails?: boolean
   mediaShouldBePlaying: boolean
   uniformAspectRatio?: UniformAspectRatio
@@ -45,6 +46,7 @@ export const NftCard = ({
   unselectAsset,
   isDisabled,
   onClick,
+  sendAnalyticsEvent,
   doNotLinkToDetails = false,
   mediaShouldBePlaying,
   uniformAspectRatio = UniformAspectRatios.square,
@@ -80,6 +82,7 @@ export const NftCard = ({
       testId={testId}
       onClick={() => {
         if (bagExpanded) setBagExpanded({ bagExpanded: false })
+        sendAnalyticsEvent?.()
       }}
     >
       <MediaContainer isDisabled={isDisabled}>

yarn.lock

@@ -4530,10 +4530,10 @@
     "@typescript-eslint/types" "5.47.0"
     eslint-visitor-keys "^3.3.0"
 
-"@uniswap/analytics-events@^2.7.0":
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.7.0.tgz#bfee1519a0d3d999054a009301a3b95d87d65ac8"
-  integrity sha512-+v8NcV0+FvCpBasfq/R9RQ03IYyAVJiHBMwMifOrrq5bDctEb1j340YprQ/dd/A/kSd9scqBaiiQ+L96gEtPEQ==
+"@uniswap/analytics-events@^2.8.0":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.8.0.tgz#651eb08913b1a47c79814f0536b46cd91a6102d3"
+  integrity sha512-unaNUxPYGoaPsPS+j6UuQRnxikha6Dr9Knv9jBVY/vIj03f8AOisVM7Zw9493QZP14lq2guARddkN3NzlttuwQ==
 
 "@uniswap/analytics@^1.3.1":
   version "1.3.1"