From fa0d95407d4e847137b74d17cfb09a9ba4c11d66 Mon Sep 17 00:00:00 2001 From: Adam Date: Sat, 16 Nov 2024 00:02:15 +0700 Subject: [PATCH 1/4] docs: add compatibility to nft mint card (#1629) --- site/docs/pages/mint/nft-mint-card.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/docs/pages/mint/nft-mint-card.mdx b/site/docs/pages/mint/nft-mint-card.mdx index f365fe37a9..c4d0ce29dc 100644 --- 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() { +## 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 From 26d4d6727eb5af16633a4975b03ec983ef4343c5 Mon Sep 17 00:00:00 2001 From: Daniel Schlabach <31226559+dschlabach@users.noreply.github.com> Date: Fri, 15 Nov 2024 12:53:38 -0500 Subject: [PATCH 2/4] chore: update cli version (#1631) --- create-onchain/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/create-onchain/package.json b/create-onchain/package.json index 36ea74a73f..3d1919ce0e 100644 --- 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", From 31afa2ef03f180a204372a46aa320bc135eda23f Mon Sep 17 00:00:00 2001 From: Brendan from DeFi Date: Fri, 15 Nov 2024 10:07:35 -0800 Subject: [PATCH 3/4] Feat: toast animations (#1620) --- .../nextjs-app-router/onchainkit/package.json | 2 +- src/internal/components/Toast.test.tsx | 138 ++++++++++++++++-- src/internal/components/Toast.tsx | 48 +++--- tailwind.config.js | 24 ++- 4 files changed, 182 insertions(+), 30 deletions(-) diff --git a/playground/nextjs-app-router/onchainkit/package.json b/playground/nextjs-app-router/onchainkit/package.json index 97aa5d49b3..be64781475 100644 --- 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/src/internal/components/Toast.test.tsx b/src/internal/components/Toast.test.tsx index 6de177cbaa..1151635d84 100644 --- a/src/internal/components/Toast.test.tsx +++ b/src/internal/components/Toast.test.tsx @@ -4,7 +4,7 @@ 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( @@ -12,15 +12,44 @@ describe('Toast component', () => { , ); - 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( + +
Test
+ , + ); + + 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( @@ -28,15 +57,44 @@ describe('Toast component', () => { , ); - 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( + +
Test
+ , + ); + + 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( @@ -44,15 +102,44 @@ describe('Toast component', () => { , ); - 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( + +
Test
+ , + ); + + 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( @@ -60,10 +147,39 @@ describe('Toast component', () => { , ); - 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( + +
Test
+ , + ); + + 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', () => { , ); - 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', () => {
Test
, ); - 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 index 801fba8cb2..315b3f3200 100644 --- 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 (
-
{children}
- +
{children}
+ +
); } diff --git a/tailwind.config.js b/tailwind.config.js index 6f7fd72469..db2fad346b 100644 --- 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', }, }, }, From 38806cd895f0f1f66d3f108a145adcb3b8696e34 Mon Sep 17 00:00:00 2001 From: Daniel Schlabach <31226559+dschlabach@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:20:46 -0500 Subject: [PATCH 4/4] fix: improve dev server watching configuration (#1621) --- package.json | 2 +- tsup.config.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index be64781475..309448dd4a 100644 --- 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/tsup.config.ts b/tsup.config.ts index f10a21f71d..42839a9679 100644 --- 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