chore: add banner click events

apps/evm/src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx

@@ -53,6 +53,7 @@ import {
   TransactionType
 } from '@/types';
 import { calculateAmountUSD } from '@/utils';
+import { gaEvents } from '@/lib/third-parties';
 
 const getBridgeContract = (currency: Ether | ERC20Token) =>
   currency.isToken ? bridgeContracts[currency.symbol]?.[L2_CHAIN] || bridgeContracts.Standard : bridgeContracts.ETH;
@@ -142,7 +143,7 @@ const BobBridgeForm = ({
 
     refetchBalances();
 
-    sendGAEvent('event', 'evm_bridge', {
+    sendGAEvent('event', gaEvents.evmBridge, {
       l1Token: data.l1Token,
       amount: data.amount?.toExact(),
       tx_id: JSON.stringify(data.transactionHash),

apps/evm/src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx

@@ -25,6 +25,7 @@ import { TokenData, useGetBridgeTransactions, useGetGatewayTransactions } from '
 import { gatewaySDK } from '@/lib/bob-sdk';
 import { bridgeKeys } from '@/lib/react-query';
 import { BridgeTransaction, InitBridgeTransaction, InitGatewayTransaction, TransactionDirection } from '@/types';
+import { gaEvents } from '@/lib/third-parties';
 
 type TransactionModalState = {
   isOpen: boolean;
@@ -146,7 +147,7 @@ const BridgeForm = ({
 
     setGatewayModalState({ isOpen: true, data });
 
-    sendGAEvent('event', 'btc_bridge', {
+    sendGAEvent('event', gaEvents.btcBridge, {
       asset: data.assetName,
       amount: data.amount?.toExact(),
       tx_id: data.txId,

apps/evm/src/app/[lang]/(bridge)/components/BannerCarousel/BannerCarousel.tsx

@@ -7,13 +7,16 @@ import { useCallback, useMemo } from 'react';
 import 'react-multi-carousel/lib/styles.css';
 import { useTheme } from 'styled-components';
 import { useIsClient } from 'usehooks-ts';
+import { sendGAEvent } from '@next/third-parties/google';
 
 import { StyledCarousel, StyledCarouselWrapper } from './BannerCarousel.style';
 import { FusionBanner } from './FusionBanner';
 import { XBanner } from './XBanner';
 import { HybridL2Banner } from './HybridL2Banner';
 import { BabylonBanner } from './BabylonBanner';
 
+import { gaEvents } from '@/lib/third-parties';
+
 const BannerCarousel = () => {
   const { i18n } = useLingui();
   const theme = useTheme();
@@ -42,30 +45,49 @@ const BannerCarousel = () => {
   );
 
   const onPressBabylonBanner = useCallback(
-    () =>
+    () => {
+      sendGAEvent('event', gaEvents.bannerClick, {
+        banner: 'babylon'
+      });
       window.open(
         'https://blog.gobob.xyz/posts/bob-integrates-with-babylon-to-become-a-bitcoin-secured-network-bringing-bitcoin-finality-to-the-hybrid-l2',
         '_blank',
         'noreferrer'
-      ),
+      );
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
 
   const onPressFusionBanner = useCallback(
-    () => window.open('https://blog.gobob.xyz/posts/bob-fusion-the-final-season', '_blank', 'noreferrer'),
+    () => {
+      sendGAEvent('event', gaEvents.bannerClick, {
+        banner: 'fusion'
+      });
+      window.open('https://blog.gobob.xyz/posts/bob-fusion-the-final-season', '_blank', 'noreferrer');
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
 
   const onPressXBanner = useCallback(
-    () => window.open('https://x.com/build_on_bob', '_blank', 'noreferrer'),
+    () => {
+      sendGAEvent('event', gaEvents.bannerClick, {
+        banner: 'X'
+      });
+      window.open('https://x.com/build_on_bob', '_blank', 'noreferrer');
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
 
   const onPressHybridL2Banner = useCallback(
-    () => window.open('https://blog.gobob.xyz/posts/the-hybrid-l2-paper', '_blank', 'noreferrer'),
+    () => {
+      sendGAEvent('event', gaEvents.bannerClick, {
+        banner: 'hybrid L2'
+      });
+      window.open('https://blog.gobob.xyz/posts/the-hybrid-l2-paper', '_blank', 'noreferrer');
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );

apps/evm/src/app/[lang]/(bridge)/stake/components/StrategyForm/StrategyForm.tsx

@@ -21,6 +21,7 @@ import { StrategyData } from '../../hooks';
 import { AuthButton } from '@/connect-ui';
 import { BRIDGE_RECIPIENT, BridgeFormValues } from '@/lib/form/bridge';
 import { GatewayTransactionType, InitGatewayTransaction } from '@/types';
+import { gaEvents } from '@/lib/third-parties';
 
 type GatewayTransactionModalState = {
   isOpen: boolean;
@@ -46,7 +47,7 @@ const StrategyForm = ({ strategy, isLending, onSuccess }: BtcBridgeFormProps): J
   const handleGatewaySuccess = (data: InitGatewayTransaction) => {
     onSuccess?.();
     setGatewayModalState({ isOpen: true, data });
-    sendGAEvent('event', 'btc_stake', {
+    sendGAEvent('event', gaEvents.btcStake, {
       asset: data.assetName,
       amount: data.amount?.toExact(),
       tx_id: data.txId,

apps/evm/src/connect-ui/component/ConnectModal/ConnectModal.tsx

@@ -15,6 +15,7 @@ import { BtcWalletList } from './BtcWalletList';
 import { EvmWalletList } from './EvmWalletList';
 
 import { ExternalLinks } from '@/constants';
+import { gaEvents } from '@/lib/third-parties';
 
 type ConnectEvmHandler = ({ address }: { address?: Address; connector?: Connector; isReconnected: boolean }) => void;
 
@@ -84,7 +85,7 @@ const ConnectModal = forwardRef<HTMLDivElement, ConnectModalProps>(
             connector
           });
 
-          sendGAEvent('event', 'evm_connect', {
+          sendGAEvent('event', gaEvents.evmConnect, {
             evm_address: JSON.stringify(connectData.accounts),
             evm_wallet: connector.name
           });
@@ -129,7 +130,7 @@ const ConnectModal = forwardRef<HTMLDivElement, ConnectModalProps>(
             connector: satsConnector
           });
 
-          sendGAEvent('event', 'btc_connect', {
+          sendGAEvent('event', gaEvents.btcConnect, {
             btc_address: btcAddress.address,
             btc_wallet: satsConnector?.name
           });

apps/evm/src/hooks/useLogin.ts

@@ -8,6 +8,7 @@ import { sendGAEvent } from '@next/third-parties/google';
 
 import { fusionKeys } from '@/lib/react-query';
 import { apiClient } from '@/utils';
+import { gaEvents } from '@/lib/third-parties';
 
 const useLogin = () => {
   const { signMessageAsync } = useSignMessage();
@@ -39,7 +40,7 @@ const useLogin = () => {
       await apiClient.verify(message, signature);
     },
     onSuccess: async (_, address) => {
-      sendGAEvent('event', 'login', { evm_address: JSON.stringify(address) });
+      sendGAEvent('event', gaEvents.login, { evm_address: JSON.stringify(address) });
       setTimeout(() => queryClient.refetchQueries({ queryKey: fusionKeys.user() }), 1000);
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

apps/evm/src/hooks/useSignUp.ts

@@ -11,6 +11,7 @@ import { useGetUser } from './useGetUser';
 
 import { fusionKeys } from '@/lib/react-query';
 import { apiClient } from '@/utils';
+import { gaEvents } from '@/lib/third-parties';
 
 type UseSignUpProps = {
   onSuccess?: () => void;
@@ -53,7 +54,7 @@ const useSignUp = ({ onSuccess }: UseSignUpProps = {}) => {
       await apiClient.signUp(message, turnstileToken, signature);
     },
     onSuccess: (_, { address, referralCode }) => {
-      sendGAEvent('event', 'signup', { evm_address: JSON.stringify(address), referral_code: referralCode });
+      sendGAEvent('event', gaEvents.signup, { evm_address: JSON.stringify(address), referral_code: referralCode });
       onSuccess?.();
       setTimeout(() => refetchUser(), 100);
     },

apps/evm/src/lib/third-parties/events.ts

@@ -0,0 +1,10 @@
+export const gaEvents = {
+  evmBridge: 'evm_bridge',
+  btcBridge: 'btc_bridge',
+  bannerClick: 'banner_click',
+  btcStake: 'btc_stake',
+  evmConnect: 'evm_connect',
+  btcConnect: 'btc_connect',
+  login: 'login',
+  signup: 'signup'
+};

apps/evm/src/lib/third-parties/index.ts

@@ -0,0 +1 @@
+export * from './events';