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 6b62ee21..3e177f3d 100644 --- a/packages/checkout/src/views/PaymentSelection/index.tsx +++ b/packages/checkout/src/views/PaymentSelection/index.tsx @@ -1,6 +1,8 @@ import { Box, Button, Divider, Text } from '@0xsequence/design-system' import { useBalancesSummary, + useAnalyticsContext, + useBalances, useContractInfo, useSwapPrices, useSwapQuote, @@ -16,7 +18,7 @@ import { useState, useEffect } from 'react' import { encodeFunctionData, Hex, zeroAddress } from 'viem' import { usePublicClient, useWalletClient, useReadContract, useAccount } from 'wagmi' -import { HEADER_HEIGHT } from '../../constants' +import { HEADER_HEIGHT, NFT_CHECKOUT_SOURCE } from '../../constants' import { ERC_20_CONTRACT_ABI } from '../../constants/abi' import { useClearCachedBalances, useSelectPaymentModal, useTransactionStatusModal, useSkipOnCloseCallback } from '../../hooks' import { NavigationHeader } from '../../shared/components/NavigationHeader' @@ -43,6 +45,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) @@ -207,6 +210,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() skipOnCloseCallback() @@ -316,6 +336,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() skipOnCloseCallback() diff --git a/packages/checkout/src/views/PendingCreditCardTransaction.tsx b/packages/checkout/src/views/PendingCreditCardTransaction.tsx index b954ed04..ff37e4d0 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, DEBUG } from '@0xsequence/kit' +import { useAnalyticsContext, useProjectAccessKey, useContractInfo, useTokenMetadata, DEBUG } from '@0xsequence/kit' import { findSupportedNetwork } from '@0xsequence/network' import pako from 'pako' import { useEffect } from 'react' @@ -14,6 +14,7 @@ import { useTransactionStatusModal, useSkipOnCloseCallback } from '../hooks' +import { NFT_CHECKOUT_SOURCE } from '../constants' import { TRANSAK_PROXY_ADDRESS } from '../utils/transak' const POLLING_TIME = 10 * 1000 @@ -41,6 +42,7 @@ export const PendingCreditCardTransaction = () => { } export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => { + const { analytics } = useAnalyticsContext() const { openTransactionStatusModal } = useTransactionStatusModal() const nav = useNavigation() const { settings, closeCheckout } = useCheckoutModal() @@ -127,6 +129,25 @@ export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: Pen const txHash = message?.data?.data?.transactionHash || '' skipOnCloseCallback() + + 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, @@ -226,6 +247,7 @@ export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: Pen } export const PendingCreditCardTransactionSardine = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => { + const { analytics } = useAnalyticsContext() const { openTransactionStatusModal } = useTransactionStatusModal() const nav = useNavigation() const { closeCheckout } = useCheckoutModal() @@ -280,6 +302,25 @@ export const PendingCreditCardTransactionSardine = ({ skipOnCloseCallback }: Pen } if (status === 'Complete') { skipOnCloseCallback() + + 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,