Feat: WalletIsland mobile design

playground/nextjs-app-router/onchainkit/package.json

@@ -5,7 +5,7 @@
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
   "scripts": {
-    "build": "packemon build --addEngines --addFiles --loadConfigs --declaration && npx packemon validate --no-license --no-people --no-repo && tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
+    "build": "packemon build --addEngines --addFiles --loadConfigs --declaration && tscpaths -p tsconfig.esm.json -s ./src -o ./esm && npx packemon validate --no-license --no-people --no-repo && tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
     "check": "biome check --write .",
     "check:unsafe": "biome check . --fix --unsafe",
     "ci:check": "biome ci --formatter-enabled=false --linter-enabled=false",
@@ -77,6 +77,7 @@
     "rimraf": "^5.0.5",
     "storybook": "^8.2.9",
     "tailwindcss": "^3.4.3",
+    "tscpaths": "^0.0.9",
     "tsup": "^8.3.5",
     "typescript": "~5.3.3",
     "vite": "^5.3.3",

src/internal/components/BottomSheet.test.tsx

@@ -0,0 +1,61 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { BottomSheet } from './BottomSheet';
+
+vi.mock('../../internal/hooks/useTheme', () => ({
+  useTheme: vi.fn(),
+}));
+
+describe('BottomSheet', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: vi.fn(),
+    children: <div>Test Content</div>,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders children when open', () => {
+    render(<BottomSheet {...defaultProps} />);
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  });
+
+  it('does not render children when closed', () => {
+    render(<BottomSheet {...defaultProps} isOpen={false} />);
+    expect(screen.queryByText('Test Content')).not.toBeInTheDocument();
+  });
+
+  it('calls onClose when Escape key is pressed on overlay', () => {
+    render(<BottomSheet {...defaultProps} />);
+    fireEvent.keyDown(screen.getByTestId('ockDismissableLayer'), {
+      key: 'Escape',
+    });
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+
+  it('applies custom className when provided', () => {
+    render(<BottomSheet {...defaultProps} className="custom-class" />);
+    expect(screen.getByTestId('ockBottomSheet')).toHaveClass('custom-class');
+  });
+
+  it('sets all ARIA attributes correctly', () => {
+    render(
+      <BottomSheet
+        {...defaultProps}
+        aria-label="Test Dialog"
+        aria-describedby="desc"
+        aria-labelledby="title"
+      >
+        <div>Content</div>
+      </BottomSheet>,
+    );
+
+    const sheet = screen.getByTestId('ockBottomSheet');
+    expect(sheet).toHaveAttribute('role', 'dialog');
+    expect(sheet).toHaveAttribute('aria-label', 'Test Dialog');
+    expect(sheet).toHaveAttribute('aria-describedby', 'desc');
+    expect(sheet).toHaveAttribute('aria-labelledby', 'title');
+  });
+});

src/internal/components/BottomSheet.tsx

@@ -0,0 +1,65 @@
+import { DismissableLayer } from '@/internal/components/primitives/DismissableLayer';
+import { FocusTrap } from '@/internal/components/primitives/FocusTrap';
+import { useTheme } from '@/internal/hooks/useTheme';
+import { zIndex } from '@/styles/constants';
+import { background, cn } from '@/styles/theme';
+import { createPortal } from 'react-dom';
+
+type BottomSheetProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  triggerRef?: React.RefObject<HTMLElement>;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+};
+
+export function BottomSheet({
+  children,
+  className,
+  isOpen,
+  onClose,
+  triggerRef,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  'aria-describedby': ariaDescribedby,
+}: BottomSheetProps) {
+  const componentTheme = useTheme();
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const bottomSheet = (
+    <FocusTrap active={isOpen}>
+      <DismissableLayer
+        onDismiss={onClose}
+        triggerRef={triggerRef}
+        preventTriggerEvents={!!triggerRef}
+      >
+        <div
+          aria-describedby={ariaDescribedby}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          data-testid="ockBottomSheet"
+          role="dialog"
+          className={cn(
+            componentTheme,
+            background.default,
+            zIndex.modal,
+            'fixed right-0 bottom-0 left-0',
+            'transform rounded-t-3xl p-2 transition-transform',
+            'fade-in slide-in-from-bottom-1/2 animate-in',
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </DismissableLayer>
+    </FocusTrap>
+  );
+
+  return createPortal(bottomSheet, document.body);
+}

src/internal/components/CopyButton.tsx

@@ -1,5 +1,7 @@
+'use client';
+
 import { copyToClipboard } from '@/internal/utils/copyToClipboard';
-import type { ReactNode } from 'react';
+import { type ReactNode, useCallback } from 'react';
 
 type CopyButtonProps = {
   label: string | ReactNode;
@@ -18,12 +20,18 @@ export function CopyButton({
   className,
   'aria-label': ariaLabel,
 }: CopyButtonProps) {
+  const handleCopy = useCallback(
+    () => copyToClipboard({ copyValue, onSuccess, onError }),
+    [copyValue, onSuccess, onError],
+  );
+
   return (
     <button
       type="button"
       data-testid="ockCopyButton"
       className={className}
-      onClick={() => copyToClipboard({ copyValue, onSuccess, onError })}
+      onClick={handleCopy}
+      onKeyDown={handleCopy}
       aria-label={ariaLabel}
     >
       {label}

src/internal/components/Draggable/Draggable.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { zIndex } from '@/styles/constants';
+// import { zIndex } from '@/styles/constants';
 import { cn } from '@/styles/theme';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { getBoundedPosition } from './getBoundedPosition';
+import { useRespositionOnWindowResize } from './useRepositionOnResize';
 
 type DraggableProps = {
   children: React.ReactNode;
@@ -104,14 +105,15 @@ 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,
       )}
       style={{
         left: `${position.x}px`,

src/internal/components/Draggable/useRepositionOnResize.test.ts

@@ -0,0 +1,157 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useRespositionOnWindowResize } from './useRepositionOnResize';
+
+describe('useRespositionOnWindowResize', () => {
+  const mockRef = { current: document.createElement('div') };
+  const mockResetPosition = vi.fn();
+
+  beforeEach(() => {
+    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1024);
+    vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(768);
+    mockRef.current = document.createElement('div');
+
+    vi.clearAllMocks();
+  });
+
+  it('should not reposition when element is within viewport', () => {
+    const initialPosition = { x: 100, y: 100 };
+    mockRef.current.getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 100,
+      height: 100,
+      top: 100,
+      left: 100,
+      right: 200,
+      bottom: 200,
+    });
+
+    renderHook(() =>
+      useRespositionOnWindowResize(mockRef, initialPosition, mockResetPosition),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+
+    // Get the callback function that was passed to resetPosition
+    const callback = mockResetPosition.mock.calls[0][0];
+    // Call the callback with current position and verify it returns same position
+    expect(callback(initialPosition)).toEqual(initialPosition);
+  });
+
+  it('should not reposition when ref.current is falsey', () => {
+    const initialPosition = { x: 100, y: 100 };
+    // @ts-expect-error - we are testing the case where ref.current is falsey
+    mockRef.current = null;
+
+    renderHook(() =>
+      useRespositionOnWindowResize(mockRef, initialPosition, mockResetPosition),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+    expect(mockResetPosition).not.toHaveBeenCalled();
+  });
+
+  it('should reposition when element is outside right viewport boundary', () => {
+    mockRef.current.getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 100,
+      height: 100,
+      top: 100,
+      left: 1000,
+      right: 1100,
+      bottom: 200,
+    });
+
+    renderHook(() =>
+      useRespositionOnWindowResize(
+        mockRef,
+        { x: 1000, y: 100 },
+        mockResetPosition,
+      ),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+    const callback = mockResetPosition.mock.calls[0][0];
+    const newPosition = callback({ x: 1000, y: 100 });
+    expect(newPosition.x).toBe(914); // 1024 - 100 - 10
+    expect(newPosition.y).toBe(100); // y shouldn't change
+  });
+
+  it('should reposition when element is outside bottom viewport boundary', () => {
+    mockRef.current.getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 100,
+      height: 100,
+      top: 700,
+      left: 100,
+      right: 200,
+      bottom: 800,
+    });
+
+    renderHook(() =>
+      useRespositionOnWindowResize(
+        mockRef,
+        { x: 100, y: 700 },
+        mockResetPosition,
+      ),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+    const callback = mockResetPosition.mock.calls[0][0];
+    const newPosition = callback({ x: 100, y: 700 });
+    expect(newPosition.x).toBe(100); // x shouldn't change
+    expect(newPosition.y).toBe(658); // 768 - 100 - 10
+  });
+
+  it('should reposition when element is outside left viewport boundary', () => {
+    mockRef.current.getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 100,
+      height: 100,
+      top: 100,
+      left: -100,
+      right: 0,
+      bottom: 200,
+    });
+
+    renderHook(() =>
+      useRespositionOnWindowResize(
+        mockRef,
+        { x: -100, y: 100 },
+        mockResetPosition,
+      ),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+    const callback = mockResetPosition.mock.calls[0][0];
+    const newPosition = callback({ x: -100, y: 100 });
+    expect(newPosition.x).toBe(10); // reset to 10
+    expect(newPosition.y).toBe(100); // y shouldn't change
+  });
+
+  it('should reposition when element is outside top viewport boundary', () => {
+    // Mock viewport size
+    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(800);
+    vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(600);
+
+    mockRef.current.getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 100,
+      height: 100,
+      top: -50,
+      left: 100,
+      right: 200,
+      bottom: 50,
+    });
+
+    renderHook(() =>
+      useRespositionOnWindowResize(
+        mockRef,
+        { x: 100, y: -50 },
+        mockResetPosition,
+      ),
+    );
+
+    window.dispatchEvent(new Event('resize'));
+
+    const callback = mockResetPosition.mock.calls[0][0];
+    const newPosition = callback({ x: 100, y: -50 });
+    expect(newPosition.x).toBe(100); // x shouldn't change
+    expect(newPosition.y).toBe(10); // reset to 10
+  });
+});