ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Buy Bag events (#5062)

Browse Source 
* 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
This commit is contained in:
Greg Bugyis 2022-11-02 23:21:02 +02:00 committed by GitHub
parent fda9d29d5e
commit d400b9094d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 395 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/analytics/constants.ts
View File

@ -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',

15
src/nft/components/bag/Bag.tsx
View File

@ -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 && (

39
src/nft/components/bag/BagContent.tsx
View File

@ -1,9 +1,13 @@
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

54
src/nft/components/bag/BagFooter.tsx
View File

@ -1,5 +1,7 @@
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>
)

13
src/nft/components/collection/ActivityCells.tsx
View File

@ -1,4 +1,7 @@
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}
>

12
src/nft/components/collection/CollectionAsset.tsx
View File

@ -1,4 +1,7 @@
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])

450
src/nft/components/collection/TransactionCompleteModal.tsx
View File

@ -1,3 +1,6 @@
import { EventName, ModalName } from 'analytics/constants'
import { Trace } from 'analytics/Trace'
import { useTrace } from 'analytics/Trace'
import clsx from 'clsx'
import { Box } from 'nft/components/Box'
import { Portal } from 'nft/components/common/Portal'
@ -16,6 +19,7 @@ import {
parseTransactionResponse,
shortenTxHash,
} from 'nft/utils'
import { formatAssetEventProperties } from 'nft/utils/formatEventProperties'
import { useEffect, useMemo, useRef, useState } from 'react'
import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
@ -33,6 +37,7 @@ const TxCompleteModal = () => {
const isMobile = useIsMobile()
const txHashUrl = getExplorerLink(1, txHash, ExplorerDataType.TRANSACTION)
const shouldShowModal = (txState === TxStateType.Success || txState === TxStateType.Failed) && txState
const trace = useTrace({ modal: ModalName.NFT_TX_COMPLETE })
const {
nftsPurchased,
nftsNotPurchased,
@ -73,229 +78,264 @@ const TxCompleteModal = () => {
<Box className={styles.modalContainer} onClick={closeTxCompleteScreen}>
{/* Successfully purchased NFTs */}
{showPurchasedModal && (
<Box className={styles.successModal} onClick={stopPropagation}>
<UniIcon color={vars.color.pink400} width="36" height="36" className={styles.uniLogo} />
<Box display="flex" flexWrap="wrap" width="full" height="min">
<h1 className={styles.title}>Complete!</h1>
<p className={styles.subHeading}>Uniswap has granted your wish!</p>
<Trace
name={EventName.NFT_BUY_BAG_SUCCEEDED}
properties={{
buy_quantity: nftsPurchased.length,
usd_value: totalPurchaseValue,
transaction_hash: txHash,
...formatAssetEventProperties(nftsPurchased),
...trace,
}}
shouldLogImpression
>
<Box className={styles.successModal} onClick={stopPropagation}>
<UniIcon color={vars.color.pink400} width="36" height="36" className={styles.uniLogo} />
<Box display="flex" flexWrap="wrap" width="full" height="min">
<h1 className={styles.title}>Complete!</h1>
<p className={styles.subHeading}>Uniswap has granted your wish!</p>
</Box>
<Box
className={styles.successAssetsContainer}
style={{
maxHeight: nftsPurchased.length > 32 ? (isMobile ? '172px' : '292px') : 'min-content',
}}
>
{[...nftsPurchased].map((nft, index) => (
<img
className={clsx(
styles.successAssetImage,
nftsPurchased.length > 1 && styles.successAssetImageGrid
)}
style={{
maxHeight: `${getSuccessfulImageSize(nftsPurchased.length, isMobile)}px`,
maxWidth: `${getSuccessfulImageSize(nftsPurchased.length, isMobile)}px`,
}}
src={nft.imageUrl}
alt={nft.name}
key={index}
/>
))}
</Box>
{nftsPurchased.length > 32 && <Box className={styles.overflowFade} />}
<Box
display="flex"
width="full"
height="min"
flexDirection="row"
marginTop={{ sm: '20', md: '20' }}
flexWrap={{ sm: 'wrap', md: 'nowrap' }}
alignItems="center"
paddingRight={'40'}
paddingLeft={'40'}
className={styles.bottomBar}
justifyContent="space-between"
>
<Row>
<Box marginRight="16">
{nftsPurchased.length} NFT{nftsPurchased.length === 1 ? '' : 's'}
</Box>
<Box>{formatEthPrice(totalPurchaseValue.toString())} ETH</Box>
</Row>
<a href={txHashUrl} target="_blank" rel="noreferrer">
<Box color="textPrimary" fontWeight="normal">
{shortenTxHash(txHash, 2, 2)}
</Box>
</a>
</Box>
</Box>
<Box
className={styles.successAssetsContainer}
style={{
maxHeight: nftsPurchased.length > 32 ? (isMobile ? '172px' : '292px') : 'min-content',
}}
>
{[...nftsPurchased].map((nft, index) => (
<img
className={clsx(
styles.successAssetImage,
nftsPurchased.length > 1 && styles.successAssetImageGrid
)}
style={{
maxHeight: `${getSuccessfulImageSize(nftsPurchased.length, isMobile)}px`,
maxWidth: `${getSuccessfulImageSize(nftsPurchased.length, isMobile)}px`,
}}
src={nft.imageUrl}
alt={nft.name}
key={index}
/>
))}
</Box>
{nftsPurchased.length > 32 && <Box className={styles.overflowFade} />}
<Box
display="flex"
width="full"
height="min"
flexDirection="row"
marginTop={{ sm: '20', md: '20' }}
flexWrap={{ sm: 'wrap', md: 'nowrap' }}
alignItems="center"
paddingRight={'40'}
paddingLeft={'40'}
className={styles.bottomBar}
justifyContent="space-between"
>
<Row>
<Box marginRight="16">
{nftsPurchased.length} NFT{nftsPurchased.length === 1 ? '' : 's'}
</Box>
<Box>{formatEthPrice(totalPurchaseValue.toString())} ETH</Box>
</Row>
<a href={txHashUrl} target="_blank" rel="noreferrer">
<Box color="textPrimary" fontWeight="normal">
{shortenTxHash(txHash, 2, 2)}
</Box>
</a>
</Box>
</Box>
</Trace>
)}
{/* NFTs that were not purchased ie Refunds */}
{showRefundModal &&
/* Showing both purchases & refunds */
(showPurchasedModal ? (
<Box className={styles.mixedRefundModal} onClick={stopPropagation}>
<Box
height="full"
display="inline-flex"
flexWrap="wrap"
width={{ sm: 'full', md: 'half' }}
paddingRight={{ sm: '0', md: '32' }}
>
<LightningBoltIcon color="pink" />
<p className={styles.subtitle}>Instant Refund</p>
<p className={styles.interStd}>
Uniswap returned{' '}
<span style={{ fontWeight: '700' }}>{formatEthPrice(totalRefundValue.toString())} ETH</span> back
to your wallet for unavailable items.
</p>
<Trace
name={EventName.NFT_BUY_BAG_REFUNDED}
properties={{
buy_quantity: nftsPurchased.length,
fail_quantity: nftsNotPurchased.length,
refund_amount_usd: totalUSDRefund,
transaction_hash: txHash,
...trace,
}}
shouldLogImpression
>
<Box className={styles.mixedRefundModal} onClick={stopPropagation}>
<Box
display="flex"
height="full"
display="inline-flex"
flexWrap="wrap"
bottom="24"
width="full"
alignSelf="flex-end"
position={{ sm: 'absolute', md: 'static' }}
width={{ sm: 'full', md: 'half' }}
paddingRight={{ sm: '0', md: '32' }}
>
<p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
{formatEthPrice(totalRefundValue.toString())} ETH
</p>
<p className={styles.totalUsdRefund}>{formatUSDPriceWithCommas(totalUSDRefund)}</p>
<p className={styles.totalEthCost} style={{ width: '100%' }}>
for {nftsNotPurchased.length} unavailable item
{nftsNotPurchased.length === 1 ? '' : 's'}.
<LightningBoltIcon color="pink" />
<p className={styles.subtitle}>Instant Refund</p>
<p className={styles.interStd}>
Uniswap returned{' '}
<span style={{ fontWeight: '700' }}>{formatEthPrice(totalRefundValue.toString())} ETH</span>{' '}
back to your wallet for unavailable items.
</p>
<Box
position={{ sm: 'absolute', md: 'relative' }}
right={{ sm: '0', md: 'auto' }}
bottom={{ sm: '0', md: 'auto' }}
justifyContent={{ sm: 'flex-end', md: 'flex-start' }}
textAlign={{ sm: 'right', md: 'left' }}
flexShrink="0"
marginRight={{ sm: '40', md: '24' }}
width={{ sm: 'half', md: 'auto' }}
display="flex"
flexWrap="wrap"
bottom="24"
width="full"
alignSelf="flex-end"
position={{ sm: 'absolute', md: 'static' }}
>
<a href={txHashUrl} target="_blank" rel="noreferrer">
<Box fontWeight="normal" marginTop="16" className={styles.totalEthCost}>
{shortenTxHash(txHash, 2, 2)}
</Box>
</a>
<p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
{formatEthPrice(totalRefundValue.toString())} ETH
</p>
<p className={styles.totalUsdRefund}>{formatUSDPriceWithCommas(totalUSDRefund)}</p>
<p className={styles.totalEthCost} style={{ width: '100%' }}>
for {nftsNotPurchased.length} unavailable item
{nftsNotPurchased.length === 1 ? '' : 's'}.
</p>
<Box
position={{ sm: 'absolute', md: 'relative' }}
right={{ sm: '0', md: 'auto' }}
bottom={{ sm: '0', md: 'auto' }}
justifyContent={{ sm: 'flex-end', md: 'flex-start' }}
textAlign={{ sm: 'right', md: 'left' }}
flexShrink="0"
marginRight={{ sm: '40', md: '24' }}
width={{ sm: 'half', md: 'auto' }}
>
<a href={txHashUrl} target="_blank" rel="noreferrer">
<Box fontWeight="normal" marginTop="16" className={styles.totalEthCost}>
{shortenTxHash(txHash, 2, 2)}
</Box>
</a>
</Box>
</Box>
</Box>
</Box>
<Box className={styles.refundAssetsContainer}>
{nftsNotPurchased.map((nft, index) => (
<Box display="flex" flexWrap="wrap" height="min" width="52" key={index}>
<img className={styles.refundAssetImage} src={nft.imageUrl} alt={nft.name} key={index} />
</Box>
))}
</Box>
<Box className={styles.refundOverflowFade} />
</Box>
) : (
// Only showing when all assets are unavailable
<Box className={styles.fullRefundModal} onClick={stopPropagation}>
<Box marginLeft="auto" marginRight="auto" display="flex">
{txState === TxStateType.Success ? (
<>
<LightningBoltIcon />
<h1 className={styles.title}>Instant Refund</h1>
</>
) : (
<h1 className={styles.title}>Failed Transaction</h1>
)}
</Box>
<p className={styles.bodySmall}>
{txState === TxStateType.Success &&
`Selected item${
nftsPurchased.length === 1 ? ' is' : 's are'
} no longer available. Uniswap instantly refunded you for this incomplete transaction. `}
{formatUsdPrice(txFeeFiat)} was used for gas in attempt to complete this transaction. For support,
please visit our <a href="https://discord.gg/FCfyBSbCU5">Discord</a>
</p>
<Box className={styles.allUnavailableAssets}>
{nftsNotPurchased.length >= 3 && (
<Box className={styles.toggleUnavailable} onClick={() => toggleShowUnavailable()}>
{!showUnavailable && (
<Box paddingLeft="20" paddingTop="8" paddingBottom="8">
{nftsNotPurchased.slice(0, 3).map((asset, index) => (
<img
style={{ zIndex: 2 - index }}
className={styles.unavailableAssetPreview}
src={asset.imageUrl}
alt={asset.name}
key={index}
/>
))}
</Box>
)}
<Box
color={showUnavailable ? 'textPrimary' : 'textSecondary'}
className={styles.unavailableText}
>
Unavailable
<Box className={styles.unavailableItems}>
{nftsNotPurchased.length} item{nftsNotPurchased.length === 1 ? '' : 's'}
</Box>
</Box>
<ChevronUpIcon className={`${!showUnavailable && styles.chevronDown} ${styles.chevron}`} />
</Box>
)}
{(showUnavailable || nftsNotPurchased.length < 3) &&
nftsNotPurchased.map((asset, index) => (
<Box
backgroundColor="backgroundSurface"
display="flex"
padding="4"
marginBottom="1"
borderRadius="8"
key={index}
>
<Box className={styles.assetContainer}>
<img className={styles.fullRefundImage} src={asset.imageUrl} alt={asset.name} />
</Box>
<Box flexWrap="wrap" marginTop="4">
<Box marginLeft="4" width="full" display="flex">
<p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
{formatEthPrice(
asset.updatedPriceInfo ? asset.updatedPriceInfo.ETHPrice : asset.priceInfo.ETHPrice
)}{' '}
ETH
</p>
</Box>
<Box color="textPrimary" className={styles.totalUsdRefund}>
{txState === TxStateType.Success ? 'Refunded' : asset.name}
</Box>
</Box>
<Box className={styles.refundAssetsContainer}>
{nftsNotPurchased.map((nft, index) => (
<Box display="flex" flexWrap="wrap" height="min" width="52" key={index}>
<img className={styles.refundAssetImage} src={nft.imageUrl} alt={nft.name} key={index} />
</Box>
))}
</Box>
<Box className={styles.refundOverflowFade} />
</Box>
{showUnavailable && <Box className={styles.fullRefundOverflowFade} />}
<p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
{formatEthPrice(totalRefundValue.toString())} ETH
</p>
<p className={styles.totalUsdRefund}>{formatUSDPriceWithCommas(totalUSDRefund)}</p>
<Box className={styles.walletAddress} marginLeft="auto" marginRight="0">
<a href={txHashUrl} target="_blank" rel="noreferrer">
<Box className={styles.addressHash}>{shortenTxHash(txHash, 2, 2)}</Box>
</a>
</Trace>
) : (
// Only showing when all assets are unavailable
<Trace
name={EventName.NFT_BUY_BAG_REFUNDED}
properties={{
buy_quantity: 0,
fail_quantity: nftsNotPurchased.length,
refund_amount_usd: totalUSDRefund,
...trace,
}}
shouldLogImpression
>
<Box className={styles.fullRefundModal} onClick={stopPropagation}>
<Box marginLeft="auto" marginRight="auto" display="flex">
{txState === TxStateType.Success ? (
<>
<LightningBoltIcon />
<h1 className={styles.title}>Instant Refund</h1>
</>
) : (
<h1 className={styles.title}>Failed Transaction</h1>
)}
</Box>
<p className={styles.bodySmall}>
{txState === TxStateType.Success &&
`Selected item${
nftsPurchased.length === 1 ? ' is' : 's are'
} no longer available. Uniswap instantly refunded you for this incomplete transaction. `}
{formatUsdPrice(txFeeFiat)} was used for gas in attempt to complete this transaction. For support,
please visit our <a href="https://discord.gg/FCfyBSbCU5">Discord</a>
</p>
<Box className={styles.allUnavailableAssets}>
{nftsNotPurchased.length >= 3 && (
<Box className={styles.toggleUnavailable} onClick={() => toggleShowUnavailable()}>
{!showUnavailable && (
<Box paddingLeft="20" paddingTop="8" paddingBottom="8">
{nftsNotPurchased.slice(0, 3).map((asset, index) => (
<img
style={{ zIndex: 2 - index }}
className={styles.unavailableAssetPreview}
src={asset.imageUrl}
alt={asset.name}
key={index}
/>
))}
</Box>
)}
<Box
color={showUnavailable ? 'textPrimary' : 'textSecondary'}
className={styles.unavailableText}
>
Unavailable
<Box className={styles.unavailableItems}>
{nftsNotPurchased.length} item{nftsNotPurchased.length === 1 ? '' : 's'}
</Box>
</Box>
<ChevronUpIcon className={`${!showUnavailable && styles.chevronDown} ${styles.chevron}`} />
</Box>
)}
{(showUnavailable || nftsNotPurchased.length < 3) &&
nftsNotPurchased.map((asset, index) => (
<Box
backgroundColor="backgroundSurface"
display="flex"
padding="4"
marginBottom="1"
borderRadius="8"
key={index}
>
<Box className={styles.assetContainer}>
<img className={styles.fullRefundImage} src={asset.imageUrl} alt={asset.name} />
</Box>
<Box flexWrap="wrap" marginTop="4">
<Box marginLeft="4" width="full" display="flex">
<p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
{formatEthPrice(
asset.updatedPriceInfo ? asset.updatedPriceInfo.ETHPrice : asset.priceInfo.ETHPrice
)}{' '}
ETH
</p>
</Box>
<Box color="textPrimary" className={styles.totalUsdRefund}>
{txState === TxStateType.Success ? 'Refunded' : asset.name}
</Box>
</Box>
</Box>
))}
</Box>
{showUnavailable && <Box className={styles.fullRefundOverflowFade} />}
<p className={styles.totalEthCost} style={{ marginBottom: '2px' }}>
{formatEthPrice(totalRefundValue.toString())} ETH
</p>
<p className={styles.totalUsdRefund}>{formatUSDPriceWithCommas(totalUSDRefund)}</p>
<Box className={styles.walletAddress} marginLeft="auto" marginRight="0">
<a href={txHashUrl} target="_blank" rel="noreferrer">
<Box className={styles.addressHash}>{shortenTxHash(txHash, 2, 2)}</Box>
</a>
</Box>
<p className={styles.totalEthCost}>
for {nftsNotPurchased.length} unavailable item
{nftsNotPurchased.length === 1 ? '' : 's'}.
</p>
<Box
as="button"
border="none"
backgroundColor="genieBlue"
cursor="pointer"
className={styles.returnButton}
type="button"
onClick={() => closeTxCompleteScreen()}
>
<BackArrowIcon className={styles.fullRefundBackArrow} />
Return to Marketplace
</Box>
</Box>
<p className={styles.totalEthCost}>
for {nftsNotPurchased.length} unavailable item
{nftsNotPurchased.length === 1 ? '' : 's'}.
</p>
<Box
as="button"
border="none"
backgroundColor="genieBlue"
cursor="pointer"
className={styles.returnButton}
type="button"
onClick={() => closeTxCompleteScreen()}
>
<BackArrowIcon className={styles.fullRefundBackArrow} />
Return to Marketplace
</Box>
</Box>
</Trace>
))}
</Box>
</Portal>

17
src/nft/components/details/AssetDetails.tsx
View File

@ -1,4 +1,7 @@
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)
}}
>

16
src/nft/components/details/AssetPriceDetails.tsx
View File

@ -1,4 +1,7 @@
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>

3
src/nft/hooks/useSendTransaction.ts
View File

@ -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()

2
src/nft/pages/collection/index.tsx
View File

@ -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">

7
src/nft/utils/formatEventProperties.ts Normal file
View File

@ -0,0 +1,7 @@
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),
})

1
src/nft/utils/index.ts
View File

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