@@ -42,8 +52,10 @@ const ActionPanel = ({
@@ -53,8 +65,10 @@ const ActionPanel = ({
@@ -64,8 +78,10 @@ const ActionPanel = ({
diff --git a/src/components/WalletConnectButton.tsx b/src/components/WalletConnectButton.tsx
new file mode 100644
index 0000000..a4483ea
--- /dev/null
+++ b/src/components/WalletConnectButton.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useWallet } from '@/contexts/WalletContext';
+import { truncateAddress } from '@/lib/truncateAddress';
+
+export const WalletConnectButton = () => {
+ const { address, isConnecting, error, connect, disconnect } = useWallet();
+ const [copied, setCopied] = useState(false);
+
+ const handleCopy = async () => {
+ if (address) {
+ await navigator.clipboard.writeText(address);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ }
+ };
+
+ if (error) {
+ return (
+
+
+
Connection Error
+
+
+ );
+ }
+
+ if (address) {
+ return (
+
+
+
+
+ {truncateAddress(address)}
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ );
+};
diff --git a/src/components/__tests__/WalletConnectButton.test.tsx b/src/components/__tests__/WalletConnectButton.test.tsx
new file mode 100644
index 0000000..d0da868
--- /dev/null
+++ b/src/components/__tests__/WalletConnectButton.test.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { WalletConnectButton } from '../WalletConnectButton';
+import { WalletContextType, useWallet } from '@/contexts/WalletContext';
+
+// Mock the context hook
+jest.mock('@/contexts/WalletContext', () => ({
+ useWallet: jest.fn(),
+}));
+
+const mockUseWallet = useWallet as jest.MockedFunction
;
+
+describe('WalletConnectButton', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ const defaultMockState: WalletContextType = {
+ address: null,
+ isConnecting: false,
+ error: null,
+ connect: jest.fn(),
+ disconnect: jest.fn(),
+ };
+
+ it('renders "Connect Wallet" button when not connected', () => {
+ mockUseWallet.mockReturnValue(defaultMockState);
+ render();
+ const button = screen.getByRole('button', { name: /connect wallet/i });
+ expect(button).toBeInTheDocument();
+ expect(button).not.toBeDisabled();
+ });
+
+ it('calls connect when clicked', () => {
+ const connectMock = jest.fn();
+ mockUseWallet.mockReturnValue({ ...defaultMockState, connect: connectMock });
+ render();
+ fireEvent.click(screen.getByRole('button', { name: /connect wallet/i }));
+ expect(connectMock).toHaveBeenCalledTimes(1);
+ });
+
+ it('shows loading state when connecting', () => {
+ mockUseWallet.mockReturnValue({ ...defaultMockState, isConnecting: true });
+ render();
+ const button = screen.getByRole('button', { name: /connect wallet/i });
+ expect(button).toBeDisabled();
+ expect(screen.getByText(/connecting\.\.\./i)).toBeInTheDocument();
+ });
+
+ it('shows truncated address and disconnect option when connected', () => {
+ mockUseWallet.mockReturnValue({ ...defaultMockState, address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F' });
+ render();
+
+ // address truncated as "0x71C7...8976F" maybe but logic is 6 and 4.
+ // prefix is 0x71C7, suffix is 976F -> 0x71C7...976F
+ expect(screen.getByText('0x71C7...976F')).toBeInTheDocument();
+
+ const disconnectBtn = screen.getByRole('button', { name: /disconnect wallet/i });
+ expect(disconnectBtn).toBeInTheDocument();
+ });
+
+ it('calls disconnect when disconnect button is clicked', () => {
+ const disconnectMock = jest.fn();
+ mockUseWallet.mockReturnValue({ ...defaultMockState, address: '0x123', disconnect: disconnectMock });
+ render();
+
+ fireEvent.click(screen.getByRole('button', { name: /disconnect wallet/i }));
+ expect(disconnectMock).toHaveBeenCalledTimes(1);
+ });
+
+ it('shows error state and retry option', () => {
+ const connectMock = jest.fn();
+ mockUseWallet.mockReturnValue({ ...defaultMockState, error: 'Failed to connect', connect: connectMock });
+ render();
+
+ expect(screen.getByText(/connection error/i)).toBeInTheDocument();
+ const retryBtn = screen.getByRole('button', { name: /retry wallet connection/i });
+ expect(retryBtn).toBeInTheDocument();
+
+ fireEvent.click(retryBtn);
+ expect(connectMock).toHaveBeenCalledTimes(1);
+ });
+
+ it('copies address to clipboard on copy click', async () => {
+ Object.assign(navigator, {
+ clipboard: {
+ writeText: jest.fn().mockImplementation(() => Promise.resolve()),
+ },
+ });
+
+ mockUseWallet.mockReturnValue({ ...defaultMockState, address: '0x123' });
+ render();
+
+ const copyBtn = screen.getByRole('button', { name: /copy address to clipboard/i });
+ await act(async () => {
+ fireEvent.click(copyBtn);
+ });
+
+ expect(navigator.clipboard.writeText).toHaveBeenCalledWith('0x123');
+ });
+});
diff --git a/src/contexts/WalletContext.tsx b/src/contexts/WalletContext.tsx
new file mode 100644
index 0000000..d204742
--- /dev/null
+++ b/src/contexts/WalletContext.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import React, { createContext, useContext, useState, ReactNode, useCallback } from 'react';
+
+export type WalletContextType = {
+ address: string | null;
+ isConnecting: boolean;
+ error: string | null;
+ connect: () => Promise;
+ disconnect: () => void;
+};
+
+const WalletContext = createContext(undefined);
+
+export function WalletProvider({ children }: { children: ReactNode }) {
+ const [address, setAddress] = useState(null);
+ const [isConnecting, setIsConnecting] = useState(false);
+ const [error, setError] = useState(null);
+
+ const connect = useCallback(async () => {
+ setIsConnecting(true);
+ setError(null);
+ try {
+ // Mocking wallet connection delay
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ // Mocked address
+ setAddress('0x71C7656EC7ab88b098defB751B7401B5f6d8976F');
+ } catch (err) {
+ setError('Failed to connect wallet');
+ } finally {
+ setIsConnecting(false);
+ }
+ }, []);
+
+ const disconnect = useCallback(() => {
+ setAddress(null);
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useWallet() {
+ const context = useContext(WalletContext);
+ if (context === undefined) {
+ throw new Error('useWallet must be used within a WalletProvider');
+ }
+ return context;
+}