feat: toast component

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

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.35.3",
+  "version": "0.35.4",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",

src/internal/components/Toast.test.tsx

@@ -0,0 +1,210 @@
+import { fireEvent, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { Toast } from './Toast';
+
+describe('Toast component', () => {
+  it('should render bottom-right correctly', () => {
+    const handleClose = vi.fn();
+    const { getByTestId } = render(
+      <Toast isVisible={true} position="bottom-right" onClose={handleClose}>
+        <div>Test</div>
+      </Toast>,
+    );
+
+    const toastContainer = getByTestId('ockToast');
+    expect(toastContainer).toBeInTheDocument();
+    expect(toastContainer).toHaveClass('bottom-5 left-3/4');
+
+    const closeButton = getByTestId('ockCloseButton');
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it('should render top-right correctly', () => {
+    const handleClose = vi.fn();
+    const { getByTestId } = render(
+      <Toast isVisible={true} position="top-right" onClose={handleClose}>
+        <div>Test</div>
+      </Toast>,
+    );
+
+    const toastContainer = getByTestId('ockToast');
+    expect(toastContainer).toBeInTheDocument();
+    expect(toastContainer).toHaveClass('top-[100px] left-3/4');
+
+    const closeButton = getByTestId('ockCloseButton');
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it('should render top-center correctly', () => {
+    const handleClose = vi.fn();
+    const { getByTestId } = render(
+      <Toast isVisible={true} position="top-center" onClose={handleClose}>
+        <div>Test</div>
+      </Toast>,
+    );
+
+    const toastContainer = getByTestId('ockToast');
+    expect(toastContainer).toBeInTheDocument();
+    expect(toastContainer).toHaveClass('top-[100px] left-2/4');
+
+    const closeButton = getByTestId('ockCloseButton');
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it('should render bottom-center correctly', () => {
+    const handleClose = vi.fn();
+    const { getByTestId } = render(
+      <Toast isVisible={true} position="bottom-center" onClose={handleClose}>
+        <div>Test</div>
+      </Toast>,
+    );
+
+    const toastContainer = getByTestId('ockToast');
+    expect(toastContainer).toBeInTheDocument();
+    expect(toastContainer).toHaveClass('bottom-5 left-2/4');
+
+    const closeButton = getByTestId('ockCloseButton');
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it('should apply custom className correctly', () => {
+    const handleClose = vi.fn();
+    const { getByTestId } = render(
+      <Toast
+        isVisible={true}
+        position="bottom-right"
+        onClose={handleClose}
+        className="custom-class"
+      >
+        <div>Test</div>
+      </Toast>,
+    );
+
+    const toastContainer = getByTestId('ockToast');
+    expect(toastContainer).toHaveClass('custom-class');
+  });
+
+  it('should not be visible when isVisible is false', () => {
+    const handleClose = vi.fn();
+    const { queryByTestId } = render(
+      <Toast isVisible={false} position="bottom-right" onClose={handleClose}>
+        <div>Test</div>
+      </Toast>,
+    );
+    const toastContainer = queryByTestId('ockToast');
+    expect(toastContainer).not.toBeInTheDocument();
+  });
+
+  it('should close when close button is clicked', () => {
+    const handleClose = vi.fn();
+    const { getByTestId } = render(
+      <Toast isVisible={true} position="bottom-right" onClose={handleClose}>
+        <div>Test</div>
+      </Toast>,
+    );
+
+    const closeButton = getByTestId('ockCloseButton');
+    fireEvent.click(closeButton);
+    expect(handleClose).toHaveBeenCalled();
+  });
+
+  it('should render children correctly', () => {
+    const handleClose = vi.fn();
+    const { getByText } = render(
+      <Toast isVisible={true} position="bottom-right" onClose={handleClose}>
+        <div>Test</div>
+      </Toast>,
+    );
+
+    const text = getByText('Test');
+    expect(text).toBeInTheDocument();
+  });
+
+  it('should disappear after durationMs', async () => {
+    vi.useFakeTimers();
+    const handleClose = vi.fn();
+    const durationMs = 2000;
+
+    render(
+      <Toast
+        isVisible={true}
+        position="bottom-right"
+        onClose={handleClose}
+        durationMs={durationMs}
+      >
+        <div>Test</div>
+      </Toast>,
+    );
+
+    expect(handleClose).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(durationMs);
+
+    expect(handleClose).toHaveBeenCalled();
+
+    vi.useRealTimers();
+  });
+
+  it('should not fire timer after manual close', () => {
+    vi.useFakeTimers();
+    const handleClose = vi.fn();
+    const durationMs = 2000;
+
+    const { getByTestId, rerender } = render(
+      <Toast
+        isVisible={true}
+        position="bottom-right"
+        onClose={handleClose}
+        durationMs={durationMs}
+      >
+        <div>Test</div>
+      </Toast>,
+    );
+
+    vi.advanceTimersByTime(1000);
+
+    const closeButton = getByTestId('ockCloseButton');
+    fireEvent.click(closeButton);
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <Toast
+        isVisible={false}
+        position="bottom-right"
+        onClose={handleClose}
+        durationMs={durationMs}
+      >
+        <div>Test</div>
+      </Toast>,
+    );
+
+    vi.advanceTimersByTime(1500);
+    expect(handleClose).toHaveBeenCalledTimes(1);
+
+    vi.useRealTimers();
+  });
+
+  it('should cleanup correctly on unmount', () => {
+    vi.useFakeTimers();
+    const handleClose = vi.fn();
+
+    const { unmount } = render(
+      <Toast
+        isVisible={true}
+        position="bottom-right"
+        onClose={handleClose}
+        durationMs={2000}
+      >
+        <div>Test</div>
+      </Toast>,
+    );
+
+    unmount();
+    vi.advanceTimersByTime(2000);
+
+    expect(handleClose).not.toHaveBeenCalled();
+    vi.useRealTimers();
+  });
+});

src/internal/components/Toast.tsx

@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import { background, cn } from '../../styles/theme';
+import { closeSvg } from '../svg/closeSvg';
+import { getToastPosition } from '../utils/getToastPosition';
+
+type ToastProps = {
+  className?: string;
+  durationMs?: number;
+  position: 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';
+  isVisible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+export function Toast({
+  className,
+  durationMs = 3000,
+  position = 'bottom-center',
+  isVisible,
+  onClose,
+  children,
+}: ToastProps) {
+  const positionClass = getToastPosition(position);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (isVisible) {
+        onClose();
+      }
+    }, durationMs);
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [durationMs, isVisible, onClose]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        background.default,
+        'flex animate-enter items-center justify-between rounded-lg',
+        'p-2 shadow-[0px_8px_24px_0px_rgba(0,0,0,0.12)]',
+        '-translate-x-2/4 fixed z-20',
+        positionClass,
+        className,
+      )}
+      data-testid="ockToast"
+    >
+      <div className="flex items-center gap-4 p-2">{children}</div>
+      <button
+        className="p-2"
+        onClick={onClose}
+        type="button"
+        data-testid="ockCloseButton"
+      >
+        {closeSvg}
+      </button>
+    </div>
+  );
+}

src/internal/utils/getToastPosition.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { getToastPosition } from './getToastPosition';
 
 describe('getToastPosition', () => {

src/swap/components/SwapToast.test.tsx

@@ -31,15 +31,18 @@ describe('SwapToast', () => {
 
   it('closes when the close button is clicked', () => {
     const setIsToastVisible = vi.fn();
+    const setTransactionHash = vi.fn();
     (useSwapContext as Mock).mockReturnValue({
       isToastVisible: true,
       setIsToastVisible,
+      setTransactionHash,
     });
 
     render(<SwapToast />);
     fireEvent.click(screen.getByTestId('ockCloseButton'));
 
     expect(setIsToastVisible).toHaveBeenCalledWith(false);
+    expect(setTransactionHash).toHaveBeenCalledWith('');
   });
 
   it('displays transaction hash when available', () => {
@@ -125,48 +128,57 @@ describe('SwapToast', () => {
   it('hides toast after specified duration', () => {
     vi.useFakeTimers();
     const setIsToastVisible = vi.fn();
+    const setTransactionHash = vi.fn();
     (useSwapContext as Mock).mockReturnValue({
       isToastVisible: true,
       transactionHash: '',
       setIsToastVisible,
+      setTransactionHash,
     });
 
     render(<SwapToast durationMs={2000} />);
 
     vi.advanceTimersByTime(2000);
     expect(setIsToastVisible).toHaveBeenCalledWith(false);
+    expect(setTransactionHash).toHaveBeenCalledWith('');
     vi.useRealTimers();
   });
 
   it('resets transactionhash after specified duration', () => {
     vi.useFakeTimers();
+    const setIsToastVisible = vi.fn();
     const setTransactionHash = vi.fn();
     (useSwapContext as Mock).mockReturnValue({
       isToastVisible: true,
       transactionHash: '',
+      setIsToastVisible,
       setTransactionHash,
     });
 
     render(<SwapToast durationMs={2000} />);
 
     vi.advanceTimersByTime(2000);
-    expect(setTransactionHash).toHaveBeenCalled();
+    expect(setIsToastVisible).toHaveBeenCalledWith(false);
+    expect(setTransactionHash).toHaveBeenCalledWith('');
     vi.useRealTimers();
   });
 
   it('hides toast after specified duration when error message is present', () => {
     vi.useFakeTimers();
     const setIsToastVisible = vi.fn();
+    const setTransactionHash = vi.fn();
     (useSwapContext as Mock).mockReturnValue({
       isToastVisible: true,
       transactionHash: '',
       setIsToastVisible,
+      setTransactionHash,
     });
 
     render(<SwapToast durationMs={2000} />);
 
     vi.advanceTimersByTime(2000);
     expect(setIsToastVisible).toHaveBeenCalledWith(false);
+    expect(setTransactionHash).toHaveBeenCalledWith('');
     vi.useRealTimers();
   });
 });