From 3f7d3baad60c96f95042df55e41466abbd99fc6f Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 5 Nov 2024 17:58:41 +0100
Subject: [PATCH 1/3] Add and configure new events

---
 src/contexts/events.tsx | 46 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/contexts/events.tsx b/src/contexts/events.tsx
index c429e11..1b7408e 100644
--- a/src/contexts/events.tsx
+++ b/src/contexts/events.tsx
@@ -1,9 +1,10 @@
 import { createContext } from 'preact';
 import { PropsWithChildren, useCallback, useContext, useEffect, useRef } from 'preact/compat';
+import * as Sentry from '@sentry/react';
 import { useAccount } from 'wagmi';
 import { INPUT_TOKEN_CONFIG, OUTPUT_TOKEN_CONFIG } from '../constants/tokenConfig';
 import { OfframpingState } from '../services/offrampingFlow';
-import * as Sentry from '@sentry/react';
+
 declare global {
   interface Window {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -36,6 +37,7 @@ export interface ClickDetailsEvent {
 export interface WalletConnectEvent {
   event: 'wallet_connect';
   wallet_action: 'connect' | 'disconnect' | 'change';
+  account_address: string;
 }
 
 interface OfframpingParameters {
@@ -81,6 +83,12 @@ export interface ClickSupportEvent {
   transaction_status: 'success' | 'failure';
 }
 
+export interface NetworkChangeEvent {
+  event: 'network_change';
+  from_network: number;
+  to_network: number;
+}
+
 export interface FormErrorEvent {
   event: 'form_error';
   error_message:
@@ -101,14 +109,16 @@ export type TrackableEvent =
   | EmailSubmissionEvent
   | SigningRequestedEvent
   | TransactionSignedEvent
-  | ProgressEvent;
+  | ProgressEvent
+  | NetworkChangeEvent;
 
 type EventType = TrackableEvent['event'];
 
 type UseEventsContext = ReturnType<typeof useEvents>;
 const useEvents = () => {
-  const { address } = useAccount();
+  const { address, chainId } = useAccount();
   const previousAddress = useRef<`0x${string}` | undefined>(undefined);
+  const previousChainId = useRef<number | undefined>(undefined);
   const userClickedState = useRef<boolean>(false);
 
   const trackedEventTypes = useRef<Set<EventType>>(new Set());
@@ -143,6 +153,24 @@ const useEvents = () => {
     trackedEventTypes.current = new Set();
   }, []);
 
+  useEffect(() => {
+    if (!chainId) return;
+
+    if (previousChainId.current === undefined) {
+      previousChainId.current = chainId;
+      // This means we are in the first render, so we don't want to track the event
+      return;
+    }
+
+    trackEvent({
+      event: 'network_change',
+      from_network: previousChainId.current || chainId,
+      to_network: chainId,
+    });
+
+    previousChainId.current = chainId;
+  }, [chainId, previousChainId]);
+
   useEffect(() => {
     const wasConnected = previousAddress.current !== undefined;
     const isConnected = address !== undefined;
@@ -159,9 +187,17 @@ const useEvents = () => {
     }
 
     if (!isConnected) {
-      trackEvent({ event: 'wallet_connect', wallet_action: 'disconnect' });
+      trackEvent({
+        event: 'wallet_connect',
+        wallet_action: 'disconnect',
+        account_address: previousAddress.current || '',
+      });
     } else {
-      trackEvent({ event: 'wallet_connect', wallet_action: wasConnected ? 'change' : 'connect' });
+      trackEvent({
+        event: 'wallet_connect',
+        wallet_action: wasConnected ? 'change' : 'connect',
+        account_address: address,
+      });
     }
 
     userClickedState.current = false;

From 7881fbca1150551100a0088811a41bd4af36e9d7 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 5 Nov 2024 18:17:21 +0100
Subject: [PATCH 2/3] Fix previousAddress not assigned

---
 src/contexts/events.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/contexts/events.tsx b/src/contexts/events.tsx
index 1b7408e..53efca7 100644
--- a/src/contexts/events.tsx
+++ b/src/contexts/events.tsx
@@ -175,8 +175,6 @@ const useEvents = () => {
     const wasConnected = previousAddress.current !== undefined;
     const isConnected = address !== undefined;
 
-    previousAddress.current = address;
-
     // set sentry user as wallet address
     if (address) {
       Sentry.setUser({ id: address });
@@ -200,6 +198,7 @@ const useEvents = () => {
       });
     }
 
+    previousAddress.current = address;
     userClickedState.current = false;
     // Important NOT to add userClicked to the dependencies array, otherwise logic will not work.
   }, [address, trackEvent, userClickedState]);

From 887d79ae757d4506756fe230d6863bad2eb2165d Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Fri, 8 Nov 2024 11:04:31 +0100
Subject: [PATCH 3/3] Address requested changes

---
 src/contexts/events.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/contexts/events.tsx b/src/contexts/events.tsx
index 53efca7..f718a78 100644
--- a/src/contexts/events.tsx
+++ b/src/contexts/events.tsx
@@ -164,12 +164,12 @@ const useEvents = () => {
 
     trackEvent({
       event: 'network_change',
-      from_network: previousChainId.current || chainId,
+      from_network: previousChainId.current,
       to_network: chainId,
     });
 
     previousChainId.current = chainId;
-  }, [chainId, previousChainId]);
+  }, [chainId, trackEvent]);
 
   useEffect(() => {
     const wasConnected = previousAddress.current !== undefined;