databeat forte events (#539)

* added event for forte payments

* improved event tracking logic

* simplified logix related to onSuccess event and tracking

* set analytics options explicitly to true

* undefined analytics object fix

* imports cleanup

* purchase currency symbol field

Author: SamueleA

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<FortePaymentData>()
   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)
     }
 

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,

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<typeof sequenceAnalytics.track>
-      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<Analytics['track']>
+    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)
     }
   }, [])