databeat nftcheckout

0xsequence · Jan 29, 2025 · 95f7c07 · 95f7c07
1 parent 16232be
commit 95f7c07
Show file tree

Hide file tree

Showing 3 changed files with 81 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,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<boolean>(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
@@ -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,