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

coinbase · Nov 18, 2024 · 193fbff · 193fbff
2 parents 8502bc3 + dd240c6
commit 193fbff
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 44 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/components/form/checkout-options.tsx b/playground/nextjs-app-router/components/form/checkout-options.tsx
@@ -4,11 +4,10 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { useContext } from 'react';
 import { useState } from 'react';
 import { AppContext } from '../AppProvider';
-import { CheckoutTypes, OnchainKitComponent } from '@/types/onchainkit';
+import { CheckoutTypes } from '@/types/onchainkit';
 
 export function CheckoutOptions() {
   const {
-    activeComponent,
     checkoutTypes,
     setCheckoutTypes,
     checkoutOptions,
@@ -24,7 +23,7 @@ export function CheckoutOptions() {
     chargeId: '',
   });
 
-  return activeComponent === OnchainKitComponent.Checkout ? (
+  return (
     <div className="grid gap-2">
       <Label htmlFor="chain">Checkout Types</Label>
       <RadioGroup
@@ -95,7 +94,5 @@ export function CheckoutOptions() {
         </div>
       )}
     </div>
-  ) : (
-    <></>
   );
 }
diff --git a/playground/nextjs-app-router/components/form/transaction-options.tsx b/playground/nextjs-app-router/components/form/transaction-options.tsx
@@ -8,14 +8,12 @@ import {
 } from '@/components/ui/select';
 import { useContext } from 'react';
 import { AppContext } from '../AppProvider';
-import { OnchainKitComponent, TransactionTypes } from '@/types/onchainkit';
+import { TransactionTypes } from '@/types/onchainkit';
 
 export function TransactionOptions() {
-  const { activeComponent, transactionType, setTransactionType } =
-    useContext(AppContext);
+  const { transactionType, setTransactionType } = useContext(AppContext);
 
-  return activeComponent === OnchainKitComponent.Transaction ||
-    activeComponent === OnchainKitComponent.TransactionDefault ? (
+  return (
     <div className="grid gap-2">
       <Label htmlFor="chain">Transaction Options</Label>
       <Select
@@ -45,7 +43,5 @@ export function TransactionOptions() {
         </SelectContent>
       </Select>
     </div>
-  ) : (
-    <></>
   );
 }
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>
   );
 }