databeat nftcheckout

0xsequence · Dec 19, 2024 · 4b6e1f8 · 4b6e1f8
1 parent 9ad2c90
commit 4b6e1f8
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 2 deletions.
diff --git 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
@@ -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<boolean>(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
@@ -1,12 +1,13 @@
 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'
 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,