Merge branch 'main' into dms/refactor-playground-2

coinbase · Nov 15, 2024 · 1420019 · 1420019
2 parents a81e59f + 38806cd
commit 1420019
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 32 deletions.
diff --git a/create-onchain/package.json b/create-onchain/package.json
@@ -1,7 +1,7 @@
 {
   "name": "create-onchain",
   "description": "Instantly create onchain applications with OnchainKit.",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "license": "MIT",
   "scripts": {
     "build": "bun run clean && bun run build:esm+types",

diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "ci:format": "biome ci --linter-enabled=false --organize-imports-enabled=false",
     "ci:lint": "biome ci --formatter-enabled=false --organize-imports-enabled=false",
     "cp": "cp -R src site/docs/pages",
-    "dev:watch": "concurrently \"tailwind -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --watch\" \"tsup --watch ./src/**/*.tsx\"",
+    "dev:watch": "concurrently \"tailwind -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --watch\" \"tsup\"",
     "format": "biome format --write .",
     "lint": "biome lint --write .",
     "lint:unsafe": "biome lint --write --unsafe .",

diff --git a/playground/nextjs-app-router/onchainkit/package.json b/playground/nextjs-app-router/onchainkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.35.4",
+  "version": "0.35.5",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",

diff --git a/site/docs/pages/mint/nft-mint-card.mdx b/site/docs/pages/mint/nft-mint-card.mdx
@@ -194,6 +194,10 @@ export default function NFTComponent() {
 
 <MintCardOverrideStyles/>
 
+## Compatibility
+
+The mint component uses a custom buildMintTransaction implementation which supports Coinbase mints as well as  [`these supported platforms on reservoir`](https://docs.reservoir.tools/docs/minting#platform-support).  If your contract is not supported, please follow the [`bring your own data instructions`](#bring-your-own-data) below.
+
 ## Advanced Usage
 
 ### Bring your own data

diff --git a/src/internal/components/Toast.test.tsx b/src/internal/components/Toast.test.tsx
@@ -4,66 +4,182 @@ import { describe, expect, it, vi } from 'vitest';
 import { Toast } from './Toast';
 
 describe('Toast component', () => {
-  it('should render bottom-right correctly', () => {
+  it('should render bottom-right with default animation correctly', () => {
     const handleClose = vi.fn();
     const { getByTestId } = render(
       <Toast isVisible={true} position="bottom-right" onClose={handleClose}>
         <div>Test</div>
       </Toast>,
     );
 
-    const toastContainer = getByTestId('ockToast');
+    const toastContainer = getByTestId('ockToastContainer');
     expect(toastContainer).toBeInTheDocument();
     expect(toastContainer).toHaveClass('bottom-5 left-3/4');
 
+    const toast = getByTestId('ockToast');
+    expect(toast).toBeInTheDocument();
+    expect(toast).toHaveClass('animate-enterRight');
+
+    const closeButton = getByTestId('ockCloseButton');
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it('should render bottom-right with custom animation correctly', () => {
+    const handleClose = vi.fn();
+    const { getByTestId } = render(
+      <Toast
+        isVisible={true}
+        position="bottom-right"
+        animation="animate-enterUp"
+        onClose={handleClose}
+      >
+        <div>Test</div>
+      </Toast>,
+    );
+
+    const toastContainer = getByTestId('ockToastContainer');
+    expect(toastContainer).toBeInTheDocument();
+    expect(toastContainer).toHaveClass('bottom-5 left-3/4');
+
+    const toast = getByTestId('ockToast');
+    expect(toast).toBeInTheDocument();
+    expect(toast).toHaveClass('animate-enterUp');
+
     const closeButton = getByTestId('ockCloseButton');
     expect(closeButton).toBeInTheDocument();
   });
 
-  it('should render top-right correctly', () => {
+  it('should render top-right with default animation correctly', () => {
     const handleClose = vi.fn();
     const { getByTestId } = render(
       <Toast isVisible={true} position="top-right" onClose={handleClose}>
         <div>Test</div>
       </Toast>,
     );
 
-    const toastContainer = getByTestId('ockToast');
+    const toastContainer = getByTestId('ockToastContainer');
     expect(toastContainer).toBeInTheDocument();
     expect(toastContainer).toHaveClass('top-[100px] left-3/4');
 
+    const toast = getByTestId('ockToast');
+    expect(toast).toBeInTheDocument();
+    expect(toast).toHaveClass('animate-enterRight');
+
+    const closeButton = getByTestId('ockCloseButton');
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it('should render top-right with custom animation correctly', () => {
+    const handleClose = vi.fn();
+    const { getByTestId } = render(
+      <Toast
+        isVisible={true}
+        position="top-right"
+        animation="animate-enterUp"
+        onClose={handleClose}
+      >
+        <div>Test</div>
+      </Toast>,
+    );
+
+    const toastContainer = getByTestId('ockToastContainer');
+    expect(toastContainer).toBeInTheDocument();
+    expect(toastContainer).toHaveClass('top-[100px] left-3/4');
+
+    const toast = getByTestId('ockToast');
+    expect(toast).toBeInTheDocument();
+    expect(toast).toHaveClass('animate-enterUp');
+
     const closeButton = getByTestId('ockCloseButton');
     expect(closeButton).toBeInTheDocument();
   });
 
-  it('should render top-center correctly', () => {
+  it('should render top-center with default animation correctly', () => {
     const handleClose = vi.fn();
     const { getByTestId } = render(
       <Toast isVisible={true} position="top-center" onClose={handleClose}>
         <div>Test</div>
       </Toast>,
     );
 
-    const toastContainer = getByTestId('ockToast');
+    const toastContainer = getByTestId('ockToastContainer');
     expect(toastContainer).toBeInTheDocument();
     expect(toastContainer).toHaveClass('top-[100px] left-2/4');
 
+    const toast = getByTestId('ockToast');
+    expect(toast).toBeInTheDocument();
+    expect(toast).toHaveClass('animate-enterDown');
+
+    const closeButton = getByTestId('ockCloseButton');
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it('should render top-center with custom animation correctly', () => {
+    const handleClose = vi.fn();
+    const { getByTestId } = render(
+      <Toast
+        isVisible={true}
+        position="top-center"
+        animation="animate-enterRight"
+        onClose={handleClose}
+      >
+        <div>Test</div>
+      </Toast>,
+    );
+
+    const toastContainer = getByTestId('ockToastContainer');
+    expect(toastContainer).toBeInTheDocument();
+    expect(toastContainer).toHaveClass('top-[100px] left-2/4');
+
+    const toast = getByTestId('ockToast');
+    expect(toast).toBeInTheDocument();
+    expect(toast).toHaveClass('animate-enterRight');
+
     const closeButton = getByTestId('ockCloseButton');
     expect(closeButton).toBeInTheDocument();
   });
 
-  it('should render bottom-center correctly', () => {
+  it('should render bottom-center with default animation correctly', () => {
     const handleClose = vi.fn();
     const { getByTestId } = render(
       <Toast isVisible={true} position="bottom-center" onClose={handleClose}>
         <div>Test</div>
       </Toast>,
     );
 
-    const toastContainer = getByTestId('ockToast');
+    const toastContainer = getByTestId('ockToastContainer');
     expect(toastContainer).toBeInTheDocument();
     expect(toastContainer).toHaveClass('bottom-5 left-2/4');
 
+    const toast = getByTestId('ockToast');
+    expect(toast).toBeInTheDocument();
+    expect(toast).toHaveClass('animate-enterUp');
+
+    const closeButton = getByTestId('ockCloseButton');
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it('should render bottom-center with custom animation correctly', () => {
+    const handleClose = vi.fn();
+    const { getByTestId } = render(
+      <Toast
+        isVisible={true}
+        position="bottom-center"
+        animation="animate-enterRight"
+        onClose={handleClose}
+      >
+        <div>Test</div>
+      </Toast>,
+    );
+
+    const toastContainer = getByTestId('ockToastContainer');
+    expect(toastContainer).toBeInTheDocument();
+    expect(toastContainer).toHaveClass('bottom-5 left-2/4');
+
+    const toast = getByTestId('ockToast');
+    expect(toast).toBeInTheDocument();
+    expect(toast).toHaveClass('animate-enterRight');
+
     const closeButton = getByTestId('ockCloseButton');
     expect(closeButton).toBeInTheDocument();
   });
@@ -81,8 +197,8 @@ describe('Toast component', () => {
       </Toast>,
     );
 
-    const toastContainer = getByTestId('ockToast');
-    expect(toastContainer).toHaveClass('custom-class');
+    const toast = getByTestId('ockToast');
+    expect(toast).toHaveClass('custom-class');
   });
 
   it('should not be visible when isVisible is false', () => {
@@ -92,7 +208,7 @@ describe('Toast component', () => {
         <div>Test</div>
       </Toast>,
     );
-    const toastContainer = queryByTestId('ockToast');
+    const toastContainer = queryByTestId('ockToastContainer');
     expect(toastContainer).not.toBeInTheDocument();
   });
 

diff --git a/src/internal/components/Toast.tsx b/src/internal/components/Toast.tsx
@@ -7,20 +7,30 @@ type ToastProps = {
   className?: string;
   durationMs?: number;
   position: 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';
+  animation?: 'animate-enterRight' | 'animate-enterUp' | 'animate-enterDown';
   isVisible: boolean;
   onClose: () => void;
   children: React.ReactNode;
 };
 
+const defaultAnimationByPosition = {
+  'top-center': 'animate-enterDown',
+  'top-right': 'animate-enterRight',
+  'bottom-center': 'animate-enterUp',
+  'bottom-right': 'animate-enterRight',
+};
+
 export function Toast({
   className,
   durationMs = 3000,
   position = 'bottom-center',
+  animation,
   isVisible,
   onClose,
   children,
 }: ToastProps) {
   const positionClass = getToastPosition(position);
+  const animationClass = animation ?? defaultAnimationByPosition[position];
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -42,25 +52,29 @@ export function Toast({
 
   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"
+      className={cn('-translate-x-2/4 fixed z-20', positionClass)}
+      data-testid="ockToastContainer"
     >
-      <div className="flex items-center gap-4 p-2">{children}</div>
-      <button
-        className="p-2"
-        onClick={onClose}
-        type="button"
-        data-testid="ockCloseButton"
+      <div
+        className={cn(
+          background.default,
+          'flex items-center justify-between rounded-lg',
+          'p-2 shadow-[0px_8px_24px_0px_rgba(0,0,0,0.12)]',
+          animationClass,
+          className,
+        )}
+        data-testid="ockToast"
       >
-        {closeSvg}
-      </button>
+        <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>
     </div>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -22,9 +22,31 @@ export default {
             transform: 'translate(0)',
           },
         },
+        fadeInUp: {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(2rem)',
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateY(0)',
+          },
+        },
+        fadeInDown: {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(-2rem)',
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateY(0)',
+          },
+        },
       },
       animation: {
-        enter: 'fadeInRight 500ms ease-out',
+        enterRight: 'fadeInRight 500ms ease-out',
+        enterUp: 'fadeInUp 500ms ease-out',
+        enterDown: 'fadeInDown 500ms ease-out',
       },
     },
   },

diff --git a/tsup.config.ts b/tsup.config.ts
@@ -4,6 +4,9 @@ import { defineConfig } from 'tsup';
 
 export default defineConfig({
   entry: ['src/**/index.ts', 'src/**/theme.ts', 'src/**/styles.css'],
+  ignoreWatch: ['**/*.test.ts', '**/*.test.tsx', '**/*.stories.tsx'],
+  // TODO: update this based on environment, once we switch to tsup for builds
+  watch: ['src/**/*.{ts,tsx}'],
   format: 'esm',
   minify: false, // Disable minification during development
   splitting: true, // Enable code splitting to properly handle React contexts