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 { 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,29 +180,36 @@ function ActivityRow({ activity }: { activity: Activity }) {
const timeSince = useTimeSince(activity.timestamp)
return (
<PortfolioRow
left={
<Column>
<PortfolioLogo chainId={chainId} currencies={currencies} images={logos} accountAddress={otherAccount} />
</Column>
}
title={<ThemedText.SubHeader fontWeight={500}>{title}</ThemedText.SubHeader>}
descriptor={
<StyledDescriptor color="textSecondary">
{descriptor}
{ENSName ?? otherAccount}
</StyledDescriptor>
}
right={
status === TransactionStatus.Pending ? (
<LoaderV2 />
) : status === TransactionStatus.Confirmed ? (
<StyledTimestamp>{timeSince}</StyledTimestamp>
) : (
<AlertTriangleFilled />
)
}
onClick={() => window.open(explorerUrl, '_blank')}
/>
<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>
<PortfolioLogo chainId={chainId} currencies={currencies} images={logos} accountAddress={otherAccount} />
</Column>
}
title={<ThemedText.SubHeader fontWeight={500}>{title}</ThemedText.SubHeader>}
descriptor={
<StyledDescriptor color="textSecondary">
{descriptor}
{ENSName ?? otherAccount}
</StyledDescriptor>
}
right={
status === TransactionStatus.Pending ? (
<LoaderV2 />
) : 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 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
View file @ 1a79bac8
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,43 +114,50 @@ function PositionListItem({ positionInfo }: { positionInfo: PositionInfo }) {
}
return (
<PortfolioRow
onClick={onClick}
left={<PortfolioLogo chainId={chainId} currencies={[pool.token0, pool.token1]} />}
title={
<Row>
<ThemedText.SubHeader fontWeight={500}>
{pool.token0.symbol} / {pool.token1?.symbol}
</ThemedText.SubHeader>
</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>
}
>
<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]} />}
title={
<Row>
<ThemedText.SubHeader fontWeight={500}>
{formatNumber((liquidityValue ?? 0) + (feeValue ?? 0), NumberType.PortfolioBalance)}
{pool.token0.symbol} / {pool.token1?.symbol}
</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>
</>
}
/>
}
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 Row from 'components/Row'
import { formatDelta } from 'components/Tokens/TokenDetails/PriceChart'
......@@ -102,28 +104,35 @@ function TokenRow({ token, quantity, denominatedValue, tokenProjectMarket }: Tok
const currency = gqlToCurrency(token)
return (
<PortfolioRow
left={<PortfolioLogo chainId={currency.chainId} currencies={[currency]} size="40px" />}
title={<ThemedText.SubHeader fontWeight={500}>{token?.name}</ThemedText.SubHeader>}
descriptor={
<TokenBalanceText>
{formatNumber(quantity, NumberType.TokenNonTx)} {token?.symbol}
</TokenBalanceText>
}
onClick={navigateToTokenDetails}
right={
denominatedValue && (
<>
<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
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>}
descriptor={
<TokenBalanceText>
{formatNumber(quantity, NumberType.TokenNonTx)} {token?.symbol}
</TokenBalanceText>
}
onClick={navigateToTokenDetails}
right={
denominatedValue && (
<>
<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`
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
View file @ 1a79bac8
......@@ -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
View file @ 1a79bac8
......@@ -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"
......
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