Skip to content

I
interface
Commit 1a79bac8 authored by lynn's avatar lynn Committed by GitHub
Browse files
Options

feat: add additional mini portfolio events (#6233) 

* add events

* update nft logging

* fix lint

* mikes comments
parent bbf49b04
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 90 deletions
src/components/WalletDropdown/MiniPortfolio/Activity/index.tsx
View file @ 1a79bac8
import { t } from '@lingui/macro' import { t } from '@lingui/macro'
import { TraceEvent } from '@uniswap/analytics'
import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
import Column from 'components/Column' import Column from 'components/Column'
import AlertTriangleFilled from 'components/Icons/AlertTriangleFilled' import AlertTriangleFilled from 'components/Icons/AlertTriangleFilled'
import { LoaderV2 } from 'components/Icons/LoadingSpinner' import { LoaderV2 } from 'components/Icons/LoadingSpinner'
...@@ -178,29 +180,36 @@ function ActivityRow({ activity }: { activity: Activity }) { ...@@ -178,29 +180,36 @@ function ActivityRow({ activity }: { activity: Activity }) {
const timeSince = useTimeSince(activity.timestamp) const timeSince = useTimeSince(activity.timestamp)
return ( return (
<PortfolioRow <TraceEvent
left={ events={[BrowserEvent.onClick]}
<Column> name={SharedEventName.ELEMENT_CLICKED}
<PortfolioLogo chainId={chainId} currencies={currencies} images={logos} accountAddress={otherAccount} /> element={InterfaceElementName.MINI_PORTFOLIO_ACTIVITY_ROW}
</Column> properties={{ hash: activity.hash, chain_id: chainId, explorer_url: explorerUrl }}
} >
title={<ThemedText.SubHeader fontWeight={500}>{title}</ThemedText.SubHeader>} <PortfolioRow
descriptor={ left={
<StyledDescriptor color="textSecondary"> <Column>
{descriptor} <PortfolioLogo chainId={chainId} currencies={currencies} images={logos} accountAddress={otherAccount} />
{ENSName ?? otherAccount} </Column>
</StyledDescriptor> }
} title={<ThemedText.SubHeader fontWeight={500}>{title}</ThemedText.SubHeader>}
right={ descriptor={
status === TransactionStatus.Pending ? ( <StyledDescriptor color="textSecondary">
<LoaderV2 /> {descriptor}
) : status === TransactionStatus.Confirmed ? ( {ENSName ?? otherAccount}
<StyledTimestamp>{timeSince}</StyledTimestamp> </StyledDescriptor>
) : ( }
<AlertTriangleFilled /> right={
) status === TransactionStatus.Pending ? (
} <LoaderV2 />
onClick={() => window.open(explorerUrl, '_blank')} ) : status === TransactionStatus.Confirmed ? (
/> <StyledTimestamp>{timeSince}</StyledTimestamp>
) : (
<AlertTriangleFilled />
)
}
onClick={() => window.open(explorerUrl, '_blank')}
/>
</TraceEvent>
) )
} }
src/components/WalletDropdown/MiniPortfolio/NFT.tsx
View file @ 1a79bac8
import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
import { InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
import Column from 'components/Column' import Column from 'components/Column'
import Row from 'components/Row' import Row from 'components/Row'
import { useToggleWalletDrawer } from 'components/WalletDropdown' import { useToggleWalletDrawer } from 'components/WalletDropdown'
...@@ -45,6 +47,7 @@ export function NFT({ ...@@ -45,6 +47,7 @@ export function NFT({
}) { }) {
const toggleWalletDrawer = useToggleWalletDrawer() const toggleWalletDrawer = useToggleWalletDrawer()
const navigate = useNavigate() const navigate = useNavigate()
const trace = useTrace()
const navigateToNFTDetails = () => { const navigateToNFTDetails = () => {
navigate(`/nfts/asset/${asset.asset_contract.address}/${asset.tokenId}`) navigate(`/nfts/asset/${asset.asset_contract.address}/${asset.tokenId}`)
...@@ -63,6 +66,15 @@ export function NFT({ ...@@ -63,6 +66,15 @@ export function NFT({
unselectAsset={() => { 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} mediaShouldBePlaying={mediaShouldBePlaying}
setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
/> />
......
src/components/WalletDropdown/MiniPortfolio/Pools/index.tsx
View file @ 1a79bac8
import { t } from '@lingui/macro' 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 { formatNumber, NumberType } from '@uniswap/conedison/format'
import { Position } from '@uniswap/v3-sdk' import { Position } from '@uniswap/v3-sdk'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
...@@ -112,43 +114,50 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) { ...@@ -112,43 +114,50 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
} }
return ( return (
<PortfolioRow <TraceEvent
onClick={onClick} events={[BrowserEvent.onClick]}
left={<PortfolioLogo chainId={chainId} currencies={[pool.token0, pool.token1]} />} name={SharedEventName.ELEMENT_CLICKED}
title={ element={InterfaceElementName.MINI_PORTFOLIO_POOLS_ROW}
<Row> properties={{ chain_id: chainId, pool_token_0: pool.token0, pool_token_1: pool.token1 }}
<ThemedText.SubHeader fontWeight={500}> >
{pool.token0.symbol} / {pool.token1?.symbol} <PortfolioRow
</ThemedText.SubHeader> onClick={onClick}
</Row> left={<PortfolioLogo chainId={chainId} currencies={[pool.token0, pool.token1]} />}
} title={
descriptor={<ThemedText.Caption>{`${pool.fee / 10000}%`}</ThemedText.Caption>} <Row>
right={
<>
<MouseoverTooltip
placement="left"
text={
<div style={{ padding: '4px 0px' }}>
<ThemedText.Caption>{`${formatNumber(
liquidityValue,
NumberType.PortfolioBalance
)} (liquidity) + ${formatNumber(feeValue, NumberType.PortfolioBalance)} (fees)`}</ThemedText.Caption>
</div>
}
>
<ThemedText.SubHeader fontWeight={500}> <ThemedText.SubHeader fontWeight={500}>
{formatNumber((liquidityValue ?? 0) + (feeValue ?? 0), NumberType.PortfolioBalance)} {pool.token0.symbol} / {pool.token1?.symbol}
</ThemedText.SubHeader> </ThemedText.SubHeader>
</MouseoverTooltip>
<Row justify="flex-end">
<ThemedText.Caption color="textSecondary">
{closed ? t`Closed` : inRange ? t`In range` : t`Out of range`}
</ThemedText.Caption>
<ActiveDot closed={closed} outOfRange={!inRange} />
</Row> </Row>
</> }
} descriptor={<ThemedText.Caption>{`${pool.fee / 10000}%`}</ThemedText.Caption>}
/> right={
<>
<MouseoverTooltip
placement="left"
text={
<div style={{ padding: '4px 0px' }}>
<ThemedText.Caption>{`${formatNumber(
liquidityValue,
NumberType.PortfolioBalance
)} (liquidity) + ${formatNumber(feeValue, NumberType.PortfolioBalance)} (fees)`}</ThemedText.Caption>
</div>
}
>
<ThemedText.SubHeader fontWeight={500}>
{formatNumber((liquidityValue ?? 0) + (feeValue ?? 0), NumberType.PortfolioBalance)}
</ThemedText.SubHeader>
</MouseoverTooltip>
<Row justify="flex-end">
<ThemedText.Caption color="textSecondary">
{closed ? t`Closed` : inRange ? t`In range` : t`Out of range`}
</ThemedText.Caption>
<ActiveDot closed={closed} outOfRange={!inRange} />
</Row>
</>
}
/>
</TraceEvent>
) )
} }
src/components/WalletDropdown/MiniPortfolio/Tokens.tsx
View file @ 1a79bac8
import { TraceEvent } from '@uniswap/analytics'
import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
import { formatNumber, NumberType } from '@uniswap/conedison/format' import { formatNumber, NumberType } from '@uniswap/conedison/format'
import Row from 'components/Row' import Row from 'components/Row'
import { formatDelta } from 'components/Tokens/TokenDetails/PriceChart' import { formatDelta } from 'components/Tokens/TokenDetails/PriceChart'
...@@ -102,28 +104,35 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok ...@@ -102,28 +104,35 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok
const currency = gqlToCurrency(token) const currency = gqlToCurrency(token)
return ( return (
<PortfolioRow <TraceEvent
left={<PortfolioLogo chainId={currency.chainId} currencies={[currency]} size="40px" />} events={[BrowserEvent.onClick]}
title={<ThemedText.SubHeader fontWeight={500}>{token?.name}</ThemedText.SubHeader>} name={SharedEventName.ELEMENT_CLICKED}
descriptor={ element={InterfaceElementName.MINI_PORTFOLIO_TOKEN_ROW}
<TokenBalanceText> properties={{ chain_id: currency.chainId, token_name: token?.name, address: token?.address }}
{formatNumber(quantity, NumberType.TokenNonTx)} {token?.symbol} >
</TokenBalanceText> <PortfolioRow
} left={<PortfolioLogo chainId={currency.chainId} currencies={[currency]} size="40px" />}
onClick={navigateToTokenDetails} title={<ThemedText.SubHeader fontWeight={500}>{token?.name}</ThemedText.SubHeader>}
right={ descriptor={
denominatedValue && ( <TokenBalanceText>
<> {formatNumber(quantity, NumberType.TokenNonTx)} {token?.symbol}
<ThemedText.SubHeader fontWeight={500}> </TokenBalanceText>
{formatNumber(denominatedValue?.value, NumberType.PortfolioBalance)} }
</ThemedText.SubHeader> onClick={navigateToTokenDetails}
<Row justify="flex-end"> right={
<PortfolioArrow change={percentChange} size={20} strokeWidth={1.75} /> denominatedValue && (
<ThemedText.BodySecondary>{formatDelta(percentChange)}</ThemedText.BodySecondary> <>
</Row> <ThemedText.SubHeader fontWeight={500}>
</> {formatNumber(denominatedValue?.value, NumberType.PortfolioBalance)}
) </ThemedText.SubHeader>
} <Row justify="flex-end">
/> <PortfolioArrow change={percentChange} size={20} strokeWidth={1.75} />
<ThemedText.BodySecondary>{formatDelta(percentChange)}</ThemedText.BodySecondary>
</Row>
</>
)
}
/>
</TraceEvent>
) )
} }
src/components/WalletDropdown/MiniPortfolio/index.tsx
View file @ 1a79bac8
...@@ -47,7 +47,7 @@ const PageWrapper = styled.div` ...@@ -47,7 +47,7 @@ const PageWrapper = styled.div`
interface Page { interface Page {
title: React.ReactNode title: React.ReactNode
component: ({ account }: { account: string }) => JSX.Element component: ({ account }: { account: string }) => JSX.Element
loggingElementName?: string loggingElementName: string
} }
const Pages: Array<Page> = [ const Pages: Array<Page> = [
...@@ -58,7 +58,11 @@ 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>NFTs</Trans>, component: NFTs, loggingElementName: InterfaceElementName.MINI_PORTFOLIO_NFT_TAB },
{ title: <Trans>Pools</Trans>, component: Pools, loggingElementName: InterfaceElementName.MINI_PORTFOLIO_POOLS_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 }) { function MiniPortfolio({ account }: { account: string }) {
...@@ -74,7 +78,6 @@ function MiniPortfolio({ account }: { account: string }) { ...@@ -74,7 +78,6 @@ function MiniPortfolio({ account }: { account: string }) {
events={[BrowserEvent.onClick]} events={[BrowserEvent.onClick]}
name={SharedEventName.NAVBAR_CLICKED} name={SharedEventName.NAVBAR_CLICKED}
element={Pages[index].loggingElementName} element={Pages[index].loggingElementName}
shouldLogImpression={!!Pages[index].loggingElementName}
key={index} key={index}
> >
<NavItem <NavItem
......
src/nft/components/card/index.tsx
View file @ 1a79bac8
...@@ -16,6 +16,7 @@ interface NftCardProps { ...@@ -16,6 +16,7 @@ interface NftCardProps {
selectAsset: () => void selectAsset: () => void
unselectAsset: () => void unselectAsset: () => void
onClick?: () => void onClick?: () => void
sendAnalyticsEvent?: () => void
doNotLinkToDetails?: boolean doNotLinkToDetails?: boolean
mediaShouldBePlaying: boolean mediaShouldBePlaying: boolean
uniformAspectRatio?: UniformAspectRatio uniformAspectRatio?: UniformAspectRatio
...@@ -45,6 +46,7 @@ export const NftCard = ({ ...@@ -45,6 +46,7 @@ export const NftCard = ({
unselectAsset, unselectAsset,
isDisabled, isDisabled,
onClick, onClick,
sendAnalyticsEvent,
doNotLinkToDetails = false, doNotLinkToDetails = false,
mediaShouldBePlaying, mediaShouldBePlaying,
uniformAspectRatio = UniformAspectRatios.square, uniformAspectRatio = UniformAspectRatios.square,
...@@ -80,6 +82,7 @@ export const NftCard = ({ ...@@ -80,6 +82,7 @@ export const NftCard = ({
testId={testId} testId={testId}
onClick={() => { onClick={() => {
if (bagExpanded) setBagExpanded({ bagExpanded: false }) if (bagExpanded) setBagExpanded({ bagExpanded: false })
sendAnalyticsEvent?.()
}} }}
> >
<MediaContainer isDisabled={isDisabled}> <MediaContainer isDisabled={isDisabled}>
......
yarn.lock
View file @ 1a79bac8
...@@ -4530,10 +4530,10 @@ ...@@ -4530,10 +4530,10 @@
"@typescript-eslint/types" "5.47.0" "@typescript-eslint/types" "5.47.0"
eslint-visitor-keys "^3.3.0" eslint-visitor-keys "^3.3.0"
"@uniswap/analytics-events@^2.7.0": "@uniswap/analytics-events@^2.8.0":
version "2.7.0" version "2.8.0"
resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.7.0.tgz#bfee1519a0d3d999054a009301a3b95d87d65ac8" resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.8.0.tgz#651eb08913b1a47c79814f0536b46cd91a6102d3"
integrity sha512-+v8NcV0+FvCpBasfq/R9RQ03IYyAVJiHBMwMifOrrq5bDctEb1j340YprQ/dd/A/kSd9scqBaiiQ+L96gEtPEQ== integrity sha512-unaNUxPYGoaPsPS+j6UuQRnxikha6Dr9Knv9jBVY/vIj03f8AOisVM7Zw9493QZP14lq2guARddkN3NzlttuwQ==
"@uniswap/analytics@^1.3.1": "@uniswap/analytics@^1.3.1":
version "1.3.1" version "1.3.1"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment