diff --git a/packages/checkout/src/components/SequenceCheckoutProvider/ForteController.tsx b/packages/checkout/src/components/SequenceCheckoutProvider/ForteController.tsx index 38d823d62..1c5cb2bc9 100644 --- a/packages/checkout/src/components/SequenceCheckoutProvider/ForteController.tsx +++ b/packages/checkout/src/components/SequenceCheckoutProvider/ForteController.tsx @@ -1,12 +1,15 @@ +import { useAnalyticsContext } from '@0xsequence/connect' import { useConfig } from '@0xsequence/hooks' import { useEffect, useState } from 'react' import { fetchFortePaymentStatus } from '../../api/data.js' +import { EVENT_SOURCE } from '../../constants/index.js' import { FortePaymentControllerProvider, useEnvironmentContext, type FortePaymentData } from '../../contexts/index.js' const POLLING_TIME = 10 * 1000 export const ForteController = ({ children }: { children: React.ReactNode }) => { + const { analytics } = useAnalyticsContext() const [fortePaymentData, setFortePaymentData] = useState() const { forteWidgetUrl } = useEnvironmentContext() const [isSuccess, setIsSuccess] = useState(false) @@ -56,6 +59,34 @@ export const ForteController = ({ children }: { children: React.ReactNode }) => } }, [widgetInitialized, fortePaymentData]) + const trackSuccessEvent = () => { + const creditCardCheckout = fortePaymentData?.creditCardCheckout + + if (!creditCardCheckout || !analytics) { + return + } + + analytics?.track({ + event: 'SEND_TRANSACTION_REQUEST', + props: { + ...creditCardCheckout.supplementaryAnalyticsInfo, + type: 'credit_card', + provider: 'forte', + source: EVENT_SOURCE, + chainId: String(creditCardCheckout.chainId), + purchasedCurrencySymbol: creditCardCheckout.currencySymbol, + 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: 'unavailable', + paymentIntentId: fortePaymentData?.paymentIntentId || 'unavailable' + } + }) + } + useEffect(() => { let interval: NodeJS.Timeout | undefined let eventFortePaymentsWidgetClosedListener: (e: Event) => void @@ -77,13 +108,11 @@ export const ForteController = ({ children }: { children: React.ReactNode }) => eventFortePaymentsBuyNftMintSuccessListener = (e: Event) => { fortePaymentData?.creditCardCheckout?.forteConfig?.onFortePaymentsBuyNftMintSuccess?.(e) fortePaymentData.creditCardCheckout?.onClose?.() - setIsSuccess(true) } eventFortePaymentsBuyNftSuccessListener = (e: Event) => { fortePaymentData?.creditCardCheckout?.forteConfig?.onFortePaymentsBuyNftSuccess?.(e) fortePaymentData.creditCardCheckout?.onClose?.() - setIsSuccess(true) } // Note: these events are mutually exclusive. ie they won't trigger at the same time @@ -135,6 +164,7 @@ export const ForteController = ({ children }: { children: React.ReactNode }) => if (status === 'Approved' && !isSuccess) { fortePaymentData.creditCardCheckout?.onSuccess?.() + trackSuccessEvent() setIsSuccess(true) } diff --git a/packages/checkout/src/views/PendingCreditCardTransaction.tsx b/packages/checkout/src/views/PendingCreditCardTransaction.tsx index 3f806af06..429f23bb1 100644 --- a/packages/checkout/src/views/PendingCreditCardTransaction.tsx +++ b/packages/checkout/src/views/PendingCreditCardTransaction.tsx @@ -151,7 +151,7 @@ export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: Pen provider: 'transak', source: EVENT_SOURCE, chainId: String(creditCardCheckout.chainId), - listedCurrency: creditCardCheckout.currencyAddress, + purchasedCurrencySymbol: creditCardCheckout.currencySymbol, purchasedCurrency: creditCardCheckout.currencyAddress, origin: window.location.origin, from: creditCardCheckout.recipientAddress, @@ -330,7 +330,7 @@ export const PendingCreditCardTransactionSardine = ({ skipOnCloseCallback }: Pen provider: 'sardine', source: EVENT_SOURCE, chainId: String(creditCardCheckout.chainId), - listedCurrency: creditCardCheckout.currencyAddress, + purchasedCurrencySymbol: creditCardCheckout.currencySymbol, purchasedCurrency: creditCardCheckout.currencyAddress, origin: window.location.origin, from: creditCardCheckout.recipientAddress, diff --git a/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx b/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx index b50ce1201..7690c558a 100644 --- a/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx +++ b/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx @@ -1,10 +1,9 @@ 'use client' -import { sequence } from '0xsequence' import { Button, Card, Modal, ModalPrimitive, Text, type Theme } from '@0xsequence/design-system' import { SequenceHooksProvider } from '@0xsequence/hooks' import { ChainId } from '@0xsequence/network' -import { SequenceClient } from '@0xsequence/provider' +import { SequenceClient, setupAnalytics, type Analytics } from '@0xsequence/provider' import { GoogleOAuthProvider } from '@react-oauth/google' import { AnimatePresence } from 'motion/react' import React, { useEffect, useState } from 'react' @@ -102,25 +101,23 @@ export const SequenceConnectProvider = (props: SequenceConnectProviderProps) => ) as ExtendedConnector | undefined const googleClientId: string = (googleWaasConnector as any)?.params?.googleClientId || '' - const setupAnalytics = (projectAccessKey: string) => { - const s = sequence.initWallet(projectAccessKey) - const sequenceAnalytics = s.client.analytics - - if (sequenceAnalytics) { - type TrackArgs = Parameters - const originalTrack = sequenceAnalytics.track.bind(sequenceAnalytics) - - sequenceAnalytics.track = (...args: TrackArgs) => { - const [event] = args - if (event && typeof event === 'object' && 'props' in event) { - event.props = { - ...event.props, - sdkType: 'sequence web sdk', - version: WEB_SDK_VERSION - } + const getAnalyticsClient = (projectAccessKey: string) => { + // @ts-ignore-next-line + const sequenceAnalytics = setupAnalytics(projectAccessKey) as Analytics + + type TrackArgs = Parameters + const originalTrack = sequenceAnalytics.track.bind(sequenceAnalytics) + + sequenceAnalytics.track = (...args: TrackArgs) => { + const [event] = args + if (event && typeof event === 'object' && 'props' in event) { + event.props = { + ...event.props, + sdkType: 'sequence web sdk', + version: WEB_SDK_VERSION } - return originalTrack?.(...args) } + return originalTrack?.(...args) } setAnalytics(sequenceAnalytics) } @@ -138,7 +135,7 @@ export const SequenceConnectProvider = (props: SequenceConnectProviderProps) => useEffect(() => { if (!disableAnalytics) { - setupAnalytics(config.projectAccessKey) + getAnalyticsClient(config.projectAccessKey) } }, [])