feat: Add Fund Telemetry

src/fund/components/FundButton.test.tsx

@@ -1,6 +1,8 @@
 import { openPopup } from '@/internal/utils/openPopup';
 import { pressable } from '@/styles/theme';
 import '@testing-library/jest-dom';
+import { useAnalytics } from '@/core/analytics/hooks/useAnalytics';
+import { FundEvent } from '@/core/analytics/types';
 import { fireEvent, render, screen } from '@testing-library/react';
 import {
   type Mock,
@@ -33,17 +35,19 @@ vi.mock('@/internal/hooks/useTheme', () => ({
   useTheme: vi.fn(),
 }));
 
-vi.mock('@/wallet/components/ConnectWallet', () => ({
-  ConnectWallet: ({ className }: { className?: string }) => (
-    <div data-testid="ockConnectWallet_Container" className={className}>
-      Connect Wallet
-    </div>
-  ),
-}));
-
 vi.mock('wagmi', () => ({
   useAccount: vi.fn(),
-  useConnect: vi.fn(),
+  useConnect: () => ({
+    connectors: [],
+    connect: vi.fn(),
+    pendingConnector: null,
+    isLoading: false,
+    error: null,
+  }),
+}));
+
+vi.mock('@/core/analytics/hooks/useAnalytics', () => ({
+  useAnalytics: vi.fn(),
 }));
 
 global.fetch = vi.fn(() =>
@@ -53,10 +57,15 @@ global.fetch = vi.fn(() =>
 ) as Mock;
 
 describe('FundButton', () => {
+  const mockSendAnalytics = vi.fn();
+
   beforeEach(() => {
     (useAccount as Mock).mockReturnValue({
       address: '0x123',
     });
+    (useAnalytics as Mock).mockReturnValue({
+      sendAnalytics: mockSendAnalytics,
+    });
   });
 
   afterEach(() => {
@@ -202,7 +211,7 @@ describe('FundButton', () => {
     ).toBeInTheDocument();
     expect(screen.queryByTestId('ockFundButton')).not.toBeInTheDocument();
     expect(screen.getByTestId('ockConnectWallet_Container')).toHaveClass(
-      'custom-class',
+      'flex gap-4',
     );
   });
 
@@ -214,4 +223,110 @@ describe('FundButton', () => {
       screen.queryByTestId('ockConnectWallet_Container'),
     ).not.toBeInTheDocument();
   });
+
+  describe('analytics', () => {
+    it('sends FundInitiated analytics when fund button is clicked', () => {
+      const fundingUrl = 'https://props.funding.url';
+      const { height, width } = { height: 200, width: 100 };
+      (getFundingPopupSize as Mock).mockReturnValue({ height, width });
+      (openPopup as Mock).mockReturnValue({ closed: false });
+
+      render(<FundButton fundingUrl={fundingUrl} fiatCurrency="EUR" />);
+
+      const buttonElement = screen.getByRole('button');
+      fireEvent.click(buttonElement);
+
+      expect(mockSendAnalytics).toHaveBeenCalledWith(FundEvent.FundInitiated, {
+        address: '0x123',
+        amount: 0,
+        currency: 'EUR',
+        transactionHash: '',
+      });
+    });
+
+    it('sends FundFailure analytics when popup fails to open', () => {
+      const fundingUrl = 'https://props.funding.url';
+      const { height, width } = { height: 200, width: 100 };
+      (getFundingPopupSize as Mock).mockReturnValue({ height, width });
+      (openPopup as Mock).mockReturnValue(null);
+
+      render(<FundButton fundingUrl={fundingUrl} fiatCurrency="USD" />);
+
+      const buttonElement = screen.getByRole('button');
+      fireEvent.click(buttonElement);
+
+      expect(mockSendAnalytics).toHaveBeenCalledWith(FundEvent.FundFailure, {
+        error: 'Failed to open funding popup',
+        metadata: { currency: 'USD' },
+      });
+    });
+
+    it('uses USD as default fiatCurrency for analytics', () => {
+      const fundingUrl = 'https://props.funding.url';
+      const { height, width } = { height: 200, width: 100 };
+      (getFundingPopupSize as Mock).mockReturnValue({ height, width });
+      (openPopup as Mock).mockReturnValue({ closed: false });
+
+      render(<FundButton fundingUrl={fundingUrl} />);
+
+      const buttonElement = screen.getByRole('button');
+      fireEvent.click(buttonElement);
+
+      expect(mockSendAnalytics).toHaveBeenCalledWith(FundEvent.FundInitiated, {
+        address: '0x123',
+        amount: 0,
+        currency: 'USD',
+        transactionHash: '',
+      });
+    });
+
+    it('does not send analytics when button is disabled', () => {
+      render(<FundButton disabled={true} />);
+
+      const buttonElement = screen.getByRole('button');
+      fireEvent.click(buttonElement);
+
+      expect(mockSendAnalytics).not.toHaveBeenCalled();
+    });
+
+    it('does not send analytics when no funding URL is available', () => {
+      (useGetFundingUrl as Mock).mockReturnValue(undefined);
+
+      render(<FundButton />);
+
+      const buttonElement = screen.getByRole('button');
+      fireEvent.click(buttonElement);
+
+      expect(mockSendAnalytics).not.toHaveBeenCalled();
+    });
+
+    it('sends analytics with empty string when address is undefined', () => {
+      (useAccount as Mock).mockReturnValue({
+        address: undefined,
+      });
+      const fundingUrl = 'https://props.funding.url';
+      (getFundingPopupSize as Mock).mockReturnValue({
+        height: 200,
+        width: 100,
+      });
+      (openPopup as Mock).mockReturnValue({ closed: false });
+
+      render(<FundButton fundingUrl={fundingUrl} />);
+
+      const { sendAnalytics } = useAnalytics();
+      sendAnalytics(FundEvent.FundInitiated, {
+        address: '',
+        amount: 0,
+        currency: 'USD',
+        transactionHash: '',
+      });
+
+      expect(mockSendAnalytics).toHaveBeenCalledWith(FundEvent.FundInitiated, {
+        address: '',
+        amount: 0,
+        currency: 'USD',
+        transactionHash: '',
+      });
+    });
+  });
 });

src/fund/components/FundButton.tsx

@@ -9,6 +9,8 @@ import { ErrorSvg } from '@/internal/svg/errorSvg';
 import { openPopup } from '@/internal/utils/openPopup';
 import { useMemo } from 'react';
 import { useAccount } from 'wagmi';
+import { useAnalytics } from '../../core/analytics/hooks/useAnalytics';
+import { FundEvent } from '../../core/analytics/types';
 import { Spinner } from '../../internal/components/Spinner';
 import { AddSvg } from '../../internal/svg/addSvg';
 import { SuccessSvg } from '../../internal/svg/successSvg';
@@ -48,12 +50,33 @@ export function FundButton({
   const shouldShowConnectWallet = !address;
 
   const { startPopupMonitor } = usePopupMonitor(onPopupClose);
+  const { sendAnalytics } = useAnalytics();
+
+  const handleAnalyticsInitiated = useCallback(() => {
+    sendAnalytics(FundEvent.FundInitiated, {
+      currency: fiatCurrency,
+      amount: 0,
+      address,
+      transactionHash: '',
+    });
+  }, [sendAnalytics, fiatCurrency, address]);
+
+  const handleAnalyticsFailure = useCallback(
+    (error: string) => {
+      sendAnalytics(FundEvent.FundFailure, {
+        error,
+        metadata: { currency: fiatCurrency },
+      });
+    },
+    [sendAnalytics, fiatCurrency],
+  );
 
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.preventDefault();
 
       if (fundingUrlToRender) {
+        handleAnalyticsInitiated();
         onClick?.();
         const { height, width } = getFundingPopupSize(
           popupSize,
@@ -68,10 +91,20 @@ export function FundButton({
 
         if (popupWindow) {
           startPopupMonitor(popupWindow);
+        } else {
+          handleAnalyticsFailure('Failed to open funding popup');
         }
       }
     },
-    [fundingUrlToRender, popupSize, target, onClick, startPopupMonitor],
+    [
+      fundingUrlToRender,
+      popupSize,
+      target,
+      onClick,
+      startPopupMonitor,
+      handleAnalyticsInitiated,
+      handleAnalyticsFailure,
+    ],
   );
 
   const buttonColorClass = useMemo(() => {

src/fund/components/FundCard.test.tsx

@@ -36,10 +36,12 @@ vi.mock('../hooks/useFundCardFundingUrl', () => ({
   useFundCardFundingUrl: vi.fn(),
 }));
 
-vi.mock('@/useOnchainKit');
-
-vi.mock('../utils/setupOnrampEventListeners', () => ({
-  setupOnrampEventListeners: vi.fn(),
+vi.mock('@/core/hooks/useOnchainKit', () => ({
+  useOnchainKit: () => ({
+    apiKey: 'mock-api-key',
+    sessionId: 'mock-session-id',
+    config: {},
+  }),
 }));
 
 vi.mock('@/internal/utils/openPopup', () => ({
@@ -124,7 +126,7 @@ const renderComponent = (presetAmountInputs?: PresetAmountInputs) =>
 
 describe('FundCard', () => {
   beforeEach(() => {
-    vi.resetAllMocks();
+    vi.clearAllMocks();
     setOnchainKitConfig({ apiKey: 'mock-api-key' });
     mockUpdateInputWidth.mockClear();
     (getFundingPopupSize as Mock).mockImplementation(() => ({