diff --git a/packages/checkout/src/constants/index.ts b/packages/checkout/src/constants/index.ts index 53a11249..40523b2a 100644 --- a/packages/checkout/src/constants/index.ts +++ b/packages/checkout/src/constants/index.ts @@ -1,3 +1,4 @@ export const HEADER_HEIGHT = '54px' export const CARD_HEIGHT = '130px' export const CARD_HEIGHT_MOBILE = '180px' +export const NFT_CHECKOUT_SOURCE = 'sequence-kit/checkout/nft-checkout' diff --git a/packages/checkout/src/views/PaymentSelection/index.tsx b/packages/checkout/src/views/PaymentSelection/index.tsx index 1bdd9524..335a721d 100644 --- a/packages/checkout/src/views/PaymentSelection/index.tsx +++ b/packages/checkout/src/views/PaymentSelection/index.tsx @@ -1,5 +1,6 @@ import { Box, Button, Divider, Text } from '@0xsequence/design-system' import { + useAnalyticsContext, useBalances, useContractInfo, useSwapPrices, @@ -21,7 +22,7 @@ import { TransferFunds } from './TransferFunds' import { usePublicClient, useWalletClient, useReadContract, useAccount } from 'wagmi' -import { HEADER_HEIGHT } from '../../constants' +import { HEADER_HEIGHT, NFT_CHECKOUT_SOURCE } from '../../constants' import { NavigationHeader } from '../../shared/components/NavigationHeader' import { ERC_20_CONTRACT_ABI } from '../../constants/abi' import { useClearCachedBalances, useSelectPaymentModal, useTransactionStatusModal } from '../../hooks' @@ -42,6 +43,7 @@ export const PaymentSelectionHeader = () => { export const PaymentSelectionContent = () => { const { openTransactionStatusModal } = useTransactionStatusModal() const { selectPaymentSettings } = useSelectPaymentModal() + const { analytics } = useAnalyticsContext() const [disableButtons, setDisableButtons] = useState(false) const [isError, setIsError] = useState(false) @@ -197,6 +199,23 @@ export const PaymentSelectionContent = () => { waitConfirmationForLastTransaction: false }) + analytics?.track({ + event: 'SEND_TRANSACTION_REQUEST', + props: { + type: 'crypto', + source: NFT_CHECKOUT_SOURCE, + chainId: String(chainId), + listedCurrency: currencyAddress, + purchasedCurrency: currencyAddress, + origin: window.location.origin, + from: userAddress, + to: targetContractAddress, + item_ids: JSON.stringify(collectibles.map(c => c.tokenId)), + item_quantities: JSON.stringify(collectibles.map(c => c.quantity)), + txHash + } + }) + closeSelectPaymentModal() openTransactionStatusModal({ @@ -302,6 +321,23 @@ export const PaymentSelectionContent = () => { waitConfirmationForLastTransaction: false }) + analytics?.track({ + event: 'SEND_TRANSACTION_REQUEST', + props: { + type: 'crypto', + source: NFT_CHECKOUT_SOURCE, + chainId: String(chainId), + listedCurrency: swapPrice.price.currencyAddress, + purchasedCurrency: currencyAddress, + origin: window.location.origin, + from: userAddress, + to: targetContractAddress, + item_ids: JSON.stringify(collectibles.map(c => c.tokenId)), + item_quantities: JSON.stringify(collectibles.map(c => c.quantity)), + txHash + } + }) + closeSelectPaymentModal() openTransactionStatusModal({ diff --git a/packages/checkout/src/views/PendingCreditCardTransaction.tsx b/packages/checkout/src/views/PendingCreditCardTransaction.tsx index d6ffb2ae..4d0c841f 100644 --- a/packages/checkout/src/views/PendingCreditCardTransaction.tsx +++ b/packages/checkout/src/views/PendingCreditCardTransaction.tsx @@ -1,5 +1,5 @@ import { Box, Spinner, Text } from '@0xsequence/design-system' -import { useProjectAccessKey, useContractInfo, useTokenMetadata } from '@0xsequence/kit' +import { useProjectAccessKey, useContractInfo, useTokenMetadata, useAnalyticsContext } from '@0xsequence/kit' import { findSupportedNetwork } from '@0xsequence/network' import pako from 'pako' import { useEffect } from 'react' @@ -7,6 +7,7 @@ import { formatUnits } from 'viem' import { fetchSardineOrderStatus } from '../api' import { TransactionPendingNavigation } from '../contexts' +import { NFT_CHECKOUT_SOURCE } from '../constants' import { useNavigation, useCheckoutModal, useSardineClientToken, useTransactionStatusModal } from '../hooks' import { TRANSAK_PROXY_ADDRESS } from '../utils/transak' const POLLING_TIME = 10 * 1000 @@ -29,6 +30,7 @@ export const PendingCreditCardTransaction = () => { } export const PendingCreditCardTransactionTransak = () => { + const { analytics } = useAnalyticsContext() const { openTransactionStatusModal } = useTransactionStatusModal() const nav = useNavigation() const { settings, closeCheckout } = useCheckoutModal() @@ -114,6 +116,24 @@ export const PendingCreditCardTransactionTransak = () => { console.log('Order Data: ', message?.data?.data) const txHash = message?.data?.data?.transactionHash || '' + analytics?.track({ + event: 'SEND_TRANSACTION_REQUEST', + props: { + type: 'credit_card', + provider: 'transak', + source: NFT_CHECKOUT_SOURCE, + chainId: String(creditCardCheckout.chainId), + listedCurrency: creditCardCheckout.currencyAddress, + purchasedCurrency: creditCardCheckout.currencyAddress, + origin: window.location.origin, + from: creditCardCheckout.recipientAddress, + to: creditCardCheckout.contractAddress, + item_ids: JSON.stringify([creditCardCheckout.nftId]), + item_quantities: JSON.stringify([JSON.stringify([creditCardCheckout.nftQuantity])]), + txHash + } + }) + closeCheckout() openTransactionStatusModal({ chainId: creditCardCheckout.chainId, @@ -212,6 +232,7 @@ export const PendingCreditCardTransactionTransak = () => { } export const PendingCreditCardTransactionSardine = () => { + const { analytics } = useAnalyticsContext() const { openTransactionStatusModal } = useTransactionStatusModal() const nav = useNavigation() const { settings, closeCheckout } = useCheckoutModal() @@ -270,6 +291,24 @@ export const PendingCreditCardTransactionSardine = () => { return } if (status === 'Complete') { + analytics?.track({ + event: 'SEND_TRANSACTION_REQUEST', + props: { + type: 'credit_card', + provider: 'sardine', + source: NFT_CHECKOUT_SOURCE, + chainId: String(creditCardCheckout.chainId), + listedCurrency: creditCardCheckout.currencyAddress, + purchasedCurrency: creditCardCheckout.currencyAddress, + origin: window.location.origin, + from: creditCardCheckout.recipientAddress, + to: creditCardCheckout.contractAddress, + item_ids: JSON.stringify([creditCardCheckout.nftId]), + item_quantities: JSON.stringify([JSON.stringify([creditCardCheckout.nftQuantity])]), + txHash: transactionHash + } + }) + closeCheckout() openTransactionStatusModal({ chainId: creditCardCheckout.chainId,