Chore: WalletIsland Code Quality Fast Follows (#1842)

Author: brendan-defi

src/core/utils/copyToClipboard.test.tsx

@@ -0,0 +1,51 @@
+import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+import { copyToClipboard } from './copyToClipboard';
+
+describe('copyToClipboard', () => {
+  beforeEach(() => {
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: vi.fn(),
+      },
+    });
+  });
+
+  it('should copy text to clipboard successfully', async () => {
+    const mockSuccess = vi.fn();
+    const mockWriteText = navigator.clipboard.writeText as Mock;
+    mockWriteText.mockResolvedValueOnce(undefined);
+
+    await copyToClipboard({
+      copyValue: 'test text',
+      onSuccess: mockSuccess,
+    });
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test text');
+    expect(mockSuccess).toHaveBeenCalled();
+  });
+
+  it('should handle clipboard error', async () => {
+    const mockError = vi.fn();
+    const testError = new Error('Clipboard error');
+    const mockWriteText = navigator.clipboard.writeText as Mock;
+    mockWriteText.mockRejectedValueOnce(testError);
+
+    await copyToClipboard({
+      copyValue: 'test text',
+      onError: mockError,
+    });
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test text');
+    expect(mockError).toHaveBeenCalledWith(testError);
+  });
+
+  it('should work without callbacks', async () => {
+    const mockWriteText = navigator.clipboard.writeText as Mock;
+    mockWriteText.mockResolvedValueOnce(undefined);
+
+    await expect(
+      copyToClipboard({ copyValue: 'test text' }),
+    ).resolves.not.toThrow();
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test text');
+  });
+});

src/core/utils/copyToClipboard.ts

@@ -0,0 +1,20 @@
+'use client';
+
+type CopyToClipboardParams = {
+  copyValue: string;
+  onSuccess?: () => void;
+  onError?: (error: unknown) => void;
+};
+
+export async function copyToClipboard({
+  copyValue,
+  onSuccess,
+  onError,
+}: CopyToClipboardParams) {
+  try {
+    await navigator.clipboard.writeText(copyValue);
+    onSuccess?.();
+  } catch (err) {
+    onError?.(err);
+  }
+}

src/identity/components/Address.tsx

@@ -1,9 +1,11 @@
 'use client';
-import { useIdentityContext } from '@/identity/components/IdentityProvider';
-import type { AddressReact } from '@/identity/types';
-import { getSlicedAddress } from '@/identity/utils/getSlicedAddress';
+
+import { copyToClipboard } from '@/core/utils/copyToClipboard';
 import { useState } from 'react';
 import { border, cn, color, pressable, text } from '../../styles/theme';
+import type { AddressReact } from '../types';
+import { getSlicedAddress } from '../utils/getSlicedAddress';
+import { useIdentityContext } from './IdentityProvider';
 
 export function Address({
   address = null,
@@ -40,15 +42,18 @@ export function Address({
 
   // Interactive version with copy functionality
   const handleClick = async () => {
-    try {
-      await navigator.clipboard.writeText(accountAddress);
-      setCopyText('Copied');
-      setTimeout(() => setCopyText('Copy'), 2000);
-    } catch (err) {
-      console.error('Failed to copy address:', err);
-      setCopyText('Failed to copy');
-      setTimeout(() => setCopyText('Copy'), 2000);
-    }
+    await copyToClipboard({
+      copyValue: accountAddress,
+      onSuccess: () => {
+        setCopyText('Copied');
+        setTimeout(() => setCopyText('Copy'), 2000);
+      },
+      onError: (err: unknown) => {
+        console.error('Failed to copy address:', err);
+        setCopyText('Failed to copy');
+        setTimeout(() => setCopyText('Copy'), 2000);
+      },
+    });
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {

src/internal/components/CopyButton.tsx

@@ -0,0 +1,32 @@
+import { copyToClipboard } from '@/core/utils/copyToClipboard';
+import type { ReactNode } from 'react';
+
+type CopyButtonProps = {
+  label: string | ReactNode;
+  copyValue: string;
+  onSuccess?: () => void;
+  onError?: (error: unknown) => void;
+  className?: string;
+  'aria-label'?: string;
+};
+
+export function CopyButton({
+  label,
+  copyValue,
+  onSuccess,
+  onError,
+  className,
+  'aria-label': ariaLabel,
+}: CopyButtonProps) {
+  return (
+    <button
+      type="button"
+      data-testid="ockCopyButton"
+      className={className}
+      onClick={() => copyToClipboard({ copyValue, onSuccess, onError })}
+      aria-label={ariaLabel}
+    >
+      {label}
+    </button>
+  );
+}

src/internal/components/Draggable/Draggable.test.tsx

@@ -37,20 +37,14 @@ describe('Draggable', () => {
     expect(draggable).toHaveStyle({ left: '100px', top: '100px' });
   });
 
-  it('changes cursor style when dragging', () => {
+  it('has correct cursor styles', () => {
     render(
       <Draggable>
         <div>Drag me</div>
       </Draggable>,
     );
     const draggable = screen.getByTestId('ockDraggable');
-    expect(draggable).toHaveClass('cursor-grab');
-
-    fireEvent.pointerDown(draggable);
-    expect(draggable).toHaveClass('cursor-grabbing');
-
-    fireEvent.pointerUp(draggable);
-    expect(draggable).toHaveClass('cursor-grab');
+    expect(draggable).toHaveClass('cursor-grab active:cursor-grabbing');
   });
 
   it('snaps to grid when dragging ends if enableSnapToGrid is true', async () => {
@@ -95,29 +89,6 @@ describe('Draggable', () => {
     expect(draggable).toHaveStyle({ left: '14px', top: '16px' });
   });
 
-  it('handles touch events', () => {
-    render(
-      <Draggable>
-        <div>Drag me</div>
-      </Draggable>,
-    );
-    const draggable = screen.getByTestId('ockDraggable');
-
-    fireEvent.pointerDown(draggable, {
-      clientX: 0,
-      clientY: 0,
-    });
-    expect(draggable).toHaveClass('cursor-grabbing');
-
-    fireEvent.pointerMove(document, {
-      clientX: 50,
-      clientY: 50,
-    });
-
-    fireEvent.pointerUp(document);
-    expect(draggable).toHaveClass('cursor-grab');
-  });
-
   it('calculates drag offset correctly', async () => {
     const user = userEvent.setup();
     render(
@@ -209,7 +180,6 @@ describe('Draggable', () => {
     );
 
     const draggable = screen.getByTestId('ockDraggable');
-    expect(draggable).toHaveClass('default');
 
     // Attempt to drag
     await user.pointer([
@@ -220,6 +190,5 @@ describe('Draggable', () => {
 
     // Position should not change
     expect(draggable).toHaveStyle({ left: '0px', top: '0px' });
-    expect(draggable).toHaveClass('default');
   });
 });

src/internal/components/Draggable/Draggable.tsx

@@ -3,7 +3,7 @@
 import { zIndex } from '@/styles/constants';
 import { cn } from '@/styles/theme';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useRespositionOnWindowResize } from './useRespositionOnResize';
+import { getBoundedPosition } from './getBoundedPosition';
 
 type DraggableProps = {
   children: React.ReactNode;
@@ -24,18 +24,8 @@ export function Draggable({
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
   const [dragStartPosition, setDragStartPosition] = useState({ x: 0, y: 0 });
   const [isDragging, setIsDragging] = useState(false);
-  const [cursorDisplay, setCursorDisplay] = useState('default');
   const draggableRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (disabled) {
-      setCursorDisplay('default');
-      return;
-    }
-
-    setCursorDisplay(isDragging ? 'cursor-grabbing' : 'cursor-grab');
-  }, [disabled, isDragging]);
-
   const calculateSnapToGrid = useCallback(
     (positionValue: number) => {
       return Math.round(positionValue / gridSize) * gridSize;
@@ -65,10 +55,14 @@ export function Draggable({
     }
 
     const handleGlobalMove = (e: PointerEvent) => {
-      setPosition({
-        x: e.clientX - dragOffset.x,
-        y: e.clientY - dragOffset.y,
+      const newPosition = getBoundedPosition({
+        draggableRef,
+        position: {
+          x: e.clientX - dragOffset.x,
+          y: e.clientY - dragOffset.y,
+        },
       });
+      setPosition(newPosition);
     };
 
     const handleGlobalEnd = (e: PointerEvent) => {
@@ -110,16 +104,14 @@ export function Draggable({
     dragStartPosition,
   ]);
 
-  useRespositionOnWindowResize(draggableRef, position, setPosition);
-
   return (
     <div
       ref={draggableRef}
       data-testid="ockDraggable"
       className={cn(
         'fixed touch-none select-none',
+        'cursor-grab active:cursor-grabbing',
         zIndex.modal,
-        cursorDisplay,
       )}
       style={{
         left: `${position.x}px`,

src/internal/components/Draggable/getBoundedPosition.test.tsx

@@ -0,0 +1,87 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { getBoundedPosition } from './getBoundedPosition';
+
+describe('getBoundedPosition', () => {
+  beforeEach(() => {
+    vi.stubGlobal('window', { innerWidth: 1024, innerHeight: 768 });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it('returns the position if the window is undefined', () => {
+    vi.stubGlobal('window', undefined);
+    const position = getBoundedPosition({
+      draggableRef: { current: null },
+      position: { x: 100, y: 100 },
+    });
+    expect(position).toEqual({ x: 100, y: 100 });
+  });
+
+  it('returns the position if the draggableRef is null', () => {
+    const position = getBoundedPosition({
+      draggableRef: { current: null },
+      position: { x: 100, y: 100 },
+    });
+    expect(position).toEqual({ x: 100, y: 100 });
+  });
+
+  it('bounds position within viewport considering minGapToEdge', () => {
+    const mockElement = {
+      getBoundingClientRect: () => ({
+        width: 100,
+        height: 50,
+      }),
+    };
+
+    const cases = [
+      // Test left boundary
+      {
+        input: { x: -5, y: 100 },
+        expected: { x: 10, y: 100 },
+      },
+      // Test right boundary
+      {
+        input: { x: 1000, y: 100 },
+        expected: { x: 914, y: 100 }, // 1024 - 100 - 10
+      },
+      // Test top boundary
+      {
+        input: { x: 100, y: -5 },
+        expected: { x: 100, y: 10 },
+      },
+      // Test bottom boundary
+      {
+        input: { x: 100, y: 800 },
+        expected: { x: 100, y: 708 }, // 768 - 50 - 10
+      },
+    ];
+
+    for (const { input, expected } of cases) {
+      const position = getBoundedPosition({
+        draggableRef: { current: mockElement as HTMLDivElement },
+        position: input,
+      });
+      expect(position).toEqual(expected);
+    }
+  });
+
+  it('respects custom minGapToEdge', () => {
+    const mockElement = {
+      getBoundingClientRect: () => ({
+        width: 100,
+        height: 50,
+      }),
+    };
+
+    const position = getBoundedPosition({
+      draggableRef: { current: mockElement as HTMLDivElement },
+      position: { x: -10, y: -10 },
+      minGapToEdge: 20,
+    });
+
+    expect(position).toEqual({ x: 20, y: 20 });
+  });
+});