Skip to content

Commit

Permalink
asdf
Browse files Browse the repository at this point in the history
  • Loading branch information
cpcramer committed Feb 8, 2025
1 parent 8253299 commit 56876c6
Show file tree
Hide file tree
Showing 2 changed files with 201 additions and 24 deletions.
163 changes: 157 additions & 6 deletions src/wallet/components/ConnectWallet.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { fireEvent, render, screen } from '@testing-library/react';
import type { ReactNode } from 'react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { useAccount, useConnect } from 'wagmi';
import { useAnalytics } from '../../core/analytics/hooks/useAnalytics';
import { WalletEvent } from '../../core/analytics/types';
import { useOnchainKit } from '../../useOnchainKit';
import { ConnectWallet } from './ConnectWallet';
import { ConnectWalletText } from './ConnectWalletText';
Expand Down Expand Up @@ -43,7 +45,13 @@ vi.mock('@/useOnchainKit', () => ({
useOnchainKit: vi.fn(),
}));

vi.mock('../../core/analytics/hooks/useAnalytics', () => ({
useAnalytics: vi.fn(),
}));

describe('ConnectWallet', () => {
const mockSendAnalytics = vi.fn();

beforeEach(() => {
Object.defineProperty(window, 'matchMedia', {
writable: true,
Expand Down Expand Up @@ -76,6 +84,9 @@ describe('ConnectWallet', () => {
vi.mocked(useOnchainKit).mockReturnValue({
config: { wallet: { display: undefined } },
});
vi.mocked(useAnalytics).mockReturnValue({
sendAnalytics: mockSendAnalytics,
});
});

it('should render connect button when disconnected', () => {
Expand Down Expand Up @@ -116,22 +127,51 @@ describe('ConnectWallet', () => {

it('should call connect function when connect button is clicked', () => {
const connectMock = vi.fn();
const mockSendAnalytics = vi.fn();

vi.mocked(useConnect).mockReturnValue({
connectors: [{ id: 'mockConnector' }],
connectors: [{ name: 'TestConnector', id: 'mockConnector' }],
connect: connectMock,
status: 'idle',
});

vi.mocked(useAnalytics).mockReturnValue({
sendAnalytics: mockSendAnalytics,
});

render(<ConnectWallet text="Connect Wallet" />);

const button = screen.getByTestId('ockConnectButton');
fireEvent.click(button);

// Verify analytics was called first
expect(mockSendAnalytics).toHaveBeenCalledWith(
WalletEvent.ConnectInitiated,
{ connector: 'TestConnector' },
);

// Verify connect was called with correct parameters
expect(connectMock).toHaveBeenCalledWith(
{
connector: { id: 'mockConnector' },
},
{ connector: { name: 'TestConnector', id: 'mockConnector' } },
{
onSuccess: expect.any(Function),
onError: expect.any(Function),
},
);

// Test success callback
connectMock.mock.calls[0][1].onSuccess();
expect(mockSendAnalytics).toHaveBeenCalledWith(WalletEvent.ConnectSuccess, {
connector: 'TestConnector',
});

// Test error callback
const error = new Error('Test error');
connectMock.mock.calls[0][1].onError(error);
expect(mockSendAnalytics).toHaveBeenCalledWith(WalletEvent.ConnectError, {
connector: 'TestConnector',
error: 'Test error',
});
});

it('should toggle wallet modal on button click when connected', () => {
Expand Down Expand Up @@ -301,7 +341,10 @@ describe('ConnectWallet', () => {

expect(connectMock).toHaveBeenCalledWith(
{ connector: { id: 'mockConnector' } },
{ onSuccess: expect.any(Function) },
{
onSuccess: expect.any(Function),
onError: expect.any(Function),
},
);
});
});
Expand Down Expand Up @@ -345,7 +388,10 @@ describe('ConnectWallet', () => {

expect(connectMock).toHaveBeenCalledWith(
{ connector: { id: 'mockConnector' } },
{ onSuccess: expect.any(Function) },
{
onSuccess: expect.any(Function),
onError: expect.any(Function),
},
);

connectMock.mock.calls[0][1].onSuccess();
Expand Down Expand Up @@ -543,4 +589,109 @@ describe('ConnectWallet', () => {
expect(onConnectMock).toHaveBeenCalledTimes(1);
});
});

describe('analytics', () => {
it('should send analytics when connect button is clicked in modal mode', () => {
vi.mocked(useOnchainKit).mockReturnValue({
config: { wallet: { display: 'modal' } },
});

render(<ConnectWallet text="Connect Wallet" />);

const button = screen.getByTestId('ockConnectButton');
fireEvent.click(button);

expect(mockSendAnalytics).toHaveBeenCalledWith(
WalletEvent.ConnectClicked,
{ connectType: 'modal' },
);
});

it('should send analytics when direct connect is initiated', () => {
const connectMock = vi.fn();
vi.mocked(useConnect).mockReturnValue({
connectors: [{ name: 'TestConnector', id: 'mockConnector' }],
connect: connectMock,
status: 'idle',
});

render(<ConnectWallet text="Connect Wallet" />);

const button = screen.getByTestId('ockConnectButton');
fireEvent.click(button);

expect(mockSendAnalytics).toHaveBeenCalledWith(
WalletEvent.ConnectInitiated,
{ connector: 'TestConnector' },
);
});

it('should send analytics on successful connection', () => {
const connectMock = vi.fn();
vi.mocked(useConnect).mockReturnValue({
connectors: [{ name: 'TestConnector', id: 'mockConnector' }],
connect: connectMock,
status: 'idle',
});

render(<ConnectWallet text="Connect Wallet" />);

const button = screen.getByTestId('ockConnectButton');
fireEvent.click(button);

// Simulate successful connection
connectMock.mock.calls[0][1].onSuccess();

expect(mockSendAnalytics).toHaveBeenCalledWith(
WalletEvent.ConnectSuccess,
{ connector: 'TestConnector' },
);
});

it('should send analytics on connection error', () => {
const connectMock = vi.fn();
vi.mocked(useConnect).mockReturnValue({
connectors: [{ name: 'TestConnector', id: 'mockConnector' }],
connect: connectMock,
status: 'idle',
});

render(<ConnectWallet text="Connect Wallet" />);

const button = screen.getByTestId('ockConnectButton');
fireEvent.click(button);

// Simulate connection error
connectMock.mock.calls[0][1].onError(new Error('Test error'));

expect(mockSendAnalytics).toHaveBeenCalledWith(WalletEvent.ConnectError, {
connector: 'TestConnector',
error: 'Test error',
});
});

it('should send analytics when account is connected with address', () => {
const mockUseAccount = vi.mocked(useAccount);
vi.mocked(useConnect).mockReturnValue({
connectors: [{ name: 'TestConnector', id: 'mockConnector' }],
connect: vi.fn(),
status: 'idle',
});

mockUseAccount.mockReturnValue({
address: '0x123',
status: 'connected',
});

render(<ConnectWallet text="Connect Wallet" />);

expect(mockSendAnalytics).toHaveBeenCalledWith(
WalletEvent.ConnectSuccess,
{
connector: 'TestConnector',
address: '0x123',
},
);
});
});
});
62 changes: 44 additions & 18 deletions src/wallet/components/ConnectWallet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,44 @@ export function ConnectWallet({
setHasClickedConnect(true);
}, [setIsConnectModalOpen]);

const handleAnalyticsConnect = useCallback(
(connectType: string) => {
sendAnalytics(WalletEvent.ConnectClicked, {
connectType,
});
},
[sendAnalytics],
);

const handleAnalyticsInitiate = useCallback(
(connectorName: string) => {
sendAnalytics(WalletEvent.ConnectInitiated, {
connector: connectorName,
});
},
[sendAnalytics],
);

const handleAnalyticsSuccess = useCallback(
(connectorName: string, walletAddress?: string) => {
sendAnalytics(WalletEvent.ConnectSuccess, {
address: walletAddress,
connector: connectorName,
});
},
[sendAnalytics],
);

const handleAnalyticsError = useCallback(
(connectorName: string, errorMessage: string) => {
sendAnalytics(WalletEvent.ConnectError, {
connector: connectorName,
error: errorMessage,
});
},
[sendAnalytics],
);

// Effects
useEffect(() => {
if (hasClickedConnect && status === 'connected' && onConnect) {
Expand All @@ -101,12 +139,9 @@ export function ConnectWallet({

useEffect(() => {
if (status === 'connected' && accountAddress) {
sendAnalytics(WalletEvent.ConnectSuccess, {
address: accountAddress,
connector: connector.name,
});
handleAnalyticsSuccess(connector.name, accountAddress);
}
}, [status, accountAddress, connector.chains]);
}, [status, accountAddress, connector.name, handleAnalyticsSuccess]);

Check failure on line 144 in src/wallet/components/ConnectWallet.tsx

View workflow job for this annotation

GitHub Actions / build (18.x)

src/wallet/components/WalletAdvancedDefault.test.tsx > WalletAdvancedDefault > renders ConnectWallet in disconnected state

TypeError: Cannot read properties of undefined (reading 'name') ❯ ConnectWallet src/wallet/components/ConnectWallet.tsx:144:41 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20 ❯ performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:25789:22

Check failure on line 144 in src/wallet/components/ConnectWallet.tsx

View workflow job for this annotation

GitHub Actions / build (18.x)

src/wallet/components/WalletAdvancedDefault.test.tsx > WalletAdvancedDefault > renders Avatar and Name in connected state and isOpen is false

TypeError: Cannot read properties of undefined (reading 'name') ❯ ConnectWallet src/wallet/components/ConnectWallet.tsx:144:41 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20 ❯ performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:25789:22

Check failure on line 144 in src/wallet/components/ConnectWallet.tsx

View workflow job for this annotation

GitHub Actions / build (18.x)

src/wallet/components/WalletAdvancedDefault.test.tsx > WalletAdvancedDefault > renders WalletAdvancedContent in connected state and isOpen is true

TypeError: Cannot read properties of undefined (reading 'name') ❯ ConnectWallet src/wallet/components/ConnectWallet.tsx:144:41 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20 ❯ performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:25789:22

Check failure on line 144 in src/wallet/components/ConnectWallet.tsx

View workflow job for this annotation

GitHub Actions / build (18.x)

src/wallet/components/WalletDefault.test.tsx > WalletDefault Component > renders the ConnectWallet component when disconnected

TypeError: Cannot read properties of undefined (reading 'name') ❯ ConnectWallet src/wallet/components/ConnectWallet.tsx:144:41 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20 ❯ performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:25789:22

Check failure on line 144 in src/wallet/components/ConnectWallet.tsx

View workflow job for this annotation

GitHub Actions / build (18.x)

src/wallet/components/WalletDefault.test.tsx > WalletDefault Component > renders the wallet address when connected

TypeError: Cannot read properties of undefined (reading 'name') ❯ ConnectWallet src/wallet/components/ConnectWallet.tsx:144:41 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20 ❯ performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:25789:22

Check failure on line 144 in src/wallet/components/ConnectWallet.tsx

View workflow job for this annotation

GitHub Actions / build (18.x)

src/wallet/components/WalletIsland.test.tsx > WalletIsland > renders ConnectWallet in disconnected state

TypeError: Cannot read properties of undefined (reading 'name') ❯ ConnectWallet src/wallet/components/ConnectWallet.tsx:144:41 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20 ❯ performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:25789:22

Check failure on line 144 in src/wallet/components/ConnectWallet.tsx

View workflow job for this annotation

GitHub Actions / build (18.x)

src/wallet/components/WalletIsland.test.tsx > WalletIsland > renders Avatar in connected state and isSubComponentOpen is false

TypeError: Cannot read properties of undefined (reading 'name') ❯ ConnectWallet src/wallet/components/ConnectWallet.tsx:144:41 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20 ❯ performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:25789:22

Check failure on line 144 in src/wallet/components/ConnectWallet.tsx

View workflow job for this annotation

GitHub Actions / build (18.x)

src/wallet/components/WalletIsland.test.tsx > WalletIsland > renders WalletAdvancedContent in connected state and isSubComponentOpen is true

TypeError: Cannot read properties of undefined (reading 'name') ❯ ConnectWallet src/wallet/components/ConnectWallet.tsx:144:41 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20 ❯ performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:25789:22

if (status === 'disconnected') {
if (config?.wallet?.display === 'modal') {
Expand All @@ -118,9 +153,7 @@ export function ConnectWallet({
onClick={() => {
handleOpenConnectModal();
setHasClickedConnect(true);
sendAnalytics(WalletEvent.ConnectClicked, {
connectType: 'modal',
});
handleAnalyticsConnect('modal');
}}
text={text}
/>
Expand All @@ -134,24 +167,17 @@ export function ConnectWallet({
className={className}
connectWalletText={connectWalletText}
onClick={() => {
sendAnalytics(WalletEvent.ConnectInitiated, {
connector: connector.name,
});
handleAnalyticsInitiate(connector.name);

connect(
{ connector },
{
onSuccess: () => {
onConnect?.();
sendAnalytics(WalletEvent.ConnectSuccess, {
connector: connector.name,
});
handleAnalyticsSuccess(connector.name);
},
onError: (error) => {
sendAnalytics(WalletEvent.ConnectError, {
connector: connector.name,
error: error.message,
});
handleAnalyticsError(connector.name, error.message);
},
},
);
Expand Down

0 comments on commit 56876c6

Please sign in to comment.