Merge branch 'main' into dms/migrate-internals

.changeset/spotty-wasps-warn.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+-**docs**: Updated `Identity` component preview. By @cpcramer #1717

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.36.0
+
+### Minor Changes
+
+ -**feat**: Improved funding flow in `Checkout` by @0xAlec #1692 
+ -**chore**: Added `useOutsideClick` hook. By @cpcramer #1612 
+ -**chore**: Theme styling improvements. By @brendan-defi #1676 
+ -**fix**: Fixed `TokenDropdown` when parent container is larger than button. By @dschlabach #1667 
+ -**chore**: Removed `Farcaster Frames`. Deprecating `Framegear`, `Frames`, `XMTP`, and `Neynar` support. By @cpcramer #1693 
+ -**feat**: Updated `WalletModal` to support MetaMask wallet connection. By @cpcramer #1701 -**fix**: Fixed changelog generation. By @dschlabach #1680 
+ -**docs**: Documentation updates and improvements. By @brendan-defi @0xAlec @dschlabach #1690 #1685
+
+  Breaking Changes:
+
+  - `Farcaster Frames` including `Framegear`, `Frames`, `XMTP`, and `Neynar` is no longer supported.
+
 ## 0.35.8
 
 ### Patch Changes

package.json

@@ -1,11 +1,11 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.35.8",
+  "version": "0.36.0",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
   "scripts": {
-    "build": "packemon build --addEngines --addFiles --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 && 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",
@@ -63,6 +63,7 @@
     "@vitest/coverage-v8": "^2.0.5",
     "@vitest/ui": "^2.0.5",
     "autoprefixer": "^10.4.19",
+    "babel-plugin-module-resolver": "^5.0.2",
     "concurrently": "^8.0.0",
     "graphql": "^14",
     "graphql-request": "^6.1.0",

packemon.config.ts

@@ -0,0 +1,18 @@
+const config = {
+  babelInput(config) {
+    config.plugins?.push([
+      require.resolve('babel-plugin-module-resolver'),
+      {
+        root: ['./src'],
+        alias: {
+          '@/core': './src/core',
+          '@/core-react': './src/core-react',
+          '@/ui-react': './src/ui/react',
+          '@': './src',
+        },
+      },
+    ]);
+  },
+};
+
+export default config;

playground/nextjs-app-router/components/AppProvider.tsx

@@ -174,8 +174,8 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
           paymaster: paymasters?.[chainId || 8453]?.url,
           wallet: {
             display: 'modal',
-            termsUrl: 'https://www.coinbase.com/legal/cookie', // URL to the terms of service for the wallet modal
-            privacyUrl: 'https://www.coinbase.com/legal/privacy', // URL to the privacy policy for the wallet modal
+            termsUrl: 'https://www.coinbase.com/legal/cookie',
+            privacyUrl: 'https://www.coinbase.com/legal/privacy',
           },
         }}
         projectId={ENVIRONMENT_VARIABLES[ENVIRONMENT.PROJECT_ID]}

playground/nextjs-app-router/components/OnchainProviders.tsx

@@ -45,8 +45,8 @@ function OnchainProviders({ children }: { children: ReactNode }) {
             },
             wallet: {
               display: 'modal', // 'modal' || 'classic"
-              termsUrl: 'https://www.coinbase.com/legal/cookie', // URL to the terms of service for the wallet modal
-              privacyUrl: 'https://www.coinbase.com/legal/privacy', // URL to the privacy policy for the wallet modal
+              termsUrl: 'https://www.coinbase.com/legal/cookie',
+              privacyUrl: 'https://www.coinbase.com/legal/privacy',
             },
           }}
           projectId={ENVIRONMENT_VARIABLES[ENVIRONMENT.PROJECT_ID]}

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 --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 && 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",
@@ -63,6 +63,7 @@
     "@vitest/coverage-v8": "^2.0.5",
     "@vitest/ui": "^2.0.5",
     "autoprefixer": "^10.4.19",
+    "babel-plugin-module-resolver": "^5.0.2",
     "concurrently": "^8.0.0",
     "graphql": "^14",
     "graphql-request": "^6.1.0",
@@ -112,10 +113,10 @@
       "default": "./esm/index.js"
     },
     "./api": {
-      "types": "./esm/api/index.d.ts",
-      "module": "./esm/api/index.js",
-      "import": "./esm/api/index.js",
-      "default": "./esm/api/index.js"
+      "types": "./esm/core/api/index.d.ts",
+      "module": "./esm/core/api/index.js",
+      "import": "./esm/core/api/index.js",
+      "default": "./esm/core/api/index.js"
     },
     "./checkout": {
       "types": "./esm/checkout/index.d.ts",

site/docs/components/landing/ComponentPreview.tsx

@@ -1,3 +1,4 @@
+import { animate } from 'motion';
 import type { ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 import { useTheme } from '../../contexts/Theme.tsx';
@@ -8,7 +9,7 @@ import { getHighlightedCode } from './getHighlightedCode.tsx';
 // Demo components and code snippets
 import CheckoutDemo, { checkoutDemoCode } from './CheckoutDemo.tsx';
 import FundDemo, { fundDemoCode } from './FundDemo.tsx';
-import IdentityDemo, { identityDemoCode } from './IdentityDemo.tsx';
+import IdentityCardDemo, { identityCardDemoCode } from './IdentityCardDemo.tsx';
 import NftMintCardDemo, { nftMintCardDemoCode } from './NftMintCardDemo.tsx';
 import SwapDemo, { swapDemoCode } from './SwapDemo.tsx';
 import TransactionDemo, { transactionDemoCode } from './TransactionDemo.tsx';
@@ -60,11 +61,11 @@ const components: Component[] = [
     description: 'Fund wallets with a debit card or a coinbase account.',
   },
   {
-    name: 'Identity',
-    component: IdentityDemo,
-    code: identityDemoCode,
+    name: 'Identity Card',
+    component: IdentityCardDemo,
+    code: identityCardDemoCode,
     description:
-      'Display the Basename, avatar, and address associated with a wallet.',
+      'Display the Basename, avatar, address, and social media links associated with a wallet.',
   },
 ];
 
@@ -88,6 +89,10 @@ function ComponentPreview() {
     });
   };
 
+  const handleTabChange = (index: number) => {
+    setActiveTab(index);
+  };
+
   if (!isClient) {
     return <div>Loading...</div>;
   }
@@ -97,7 +102,7 @@ function ComponentPreview() {
       <div className="flex flex-col items-center gap-8 lg:flex-row lg:items-start">
         <ComponentList
           activeTab={activeTab}
-          setActiveTab={setActiveTab}
+          setActiveTab={handleTabChange}
           components={components}
         />
         <PreviewContainer
@@ -124,6 +129,24 @@ function ComponentList({
   setActiveTab,
   components,
 }: ComponentListProps) {
+  const handleClick = (index: number) => {
+    const button = document.querySelector(`button[data-index="${index}"]`);
+    if (button) {
+      animate(
+        button,
+        {
+          x: [-2, 0],
+          opacity: [0.6, 1],
+        },
+        {
+          duration: 0.15,
+          easing: 'ease-out',
+        },
+      );
+    }
+    setActiveTab(index);
+  };
+
   return (
     <div className="w-full md:w-[300px] lg:flex-shrink-0">
       <h3 className="pb-4 font-medium text-3xl text-zinc-900 dark:text-zinc-100">
@@ -137,12 +160,13 @@ function ComponentList({
           <div key={comp.name} className="mb-4">
             <button
               type="button"
+              data-index={index}
               className={`w-full px-3 py-2 text-left text-base lg:text-lg ${
                 activeTab === index
                   ? 'rounded-lg bg-zinc-100 font-semibold text-indigo-600 dark:bg-[#0F0F0F] dark:text-indigo-400'
                   : 'text-zinc-700 hover:rounded-lg hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-[#0F0F0F]'
               }`}
-              onClick={() => setActiveTab(index)}
+              onClick={() => handleClick(index)}
             >
               {comp.name}
               {activeTab === index && (
@@ -191,7 +215,7 @@ function PreviewContainer({
   }, [activeTab, theme]);
 
   return (
-    <div className="h-[600px] w-[375px] overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 sm:w-[600px] md:h-[670px] md:w-[700px] dark:border-zinc-900 dark:bg-[#0f0f0f]">
+    <div className="preview-container h-[600px] w-[375px] overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 sm:w-[600px] md:h-[670px] md:w-[700px] dark:border-zinc-900 dark:bg-[#0f0f0f]">
       <div className="mt-2 flex items-center justify-between border-zinc-200 border-b px-3 dark:border-zinc-900">
         <div className="flex">
           <TabButton
@@ -245,15 +269,34 @@ function PreviewContainer({
 }
 
 function TabButton({ isActive, onClick, children }: TabButtonProps) {
+  const handleClick = () => {
+    const button = document.querySelector(`button[data-tab="${children}"]`);
+    if (button) {
+      animate(
+        button,
+        {
+          y: [2, 0],
+          opacity: [0.7, 1],
+        },
+        {
+          duration: 0.2,
+          easing: [0.22, 1.14, 0.59, 1], // Spring-like easing
+        },
+      );
+    }
+    onClick();
+  };
+
   return (
     <button
       type="button"
+      data-tab={children}
       className={`px-4 py-2 font-medium text-sm ${
         isActive
           ? 'border-indigo-600 border-b-2 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400'
           : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100'
       }`}
-      onClick={onClick}
+      onClick={handleClick}
     >
       {children}
     </button>

site/docs/components/landing/IdentityCardDemo.tsx

@@ -0,0 +1,32 @@
+import { IdentityCard } from '@coinbase/onchainkit/identity';
+import { base } from 'viem/chains';
+import App from '../App.tsx';
+
+export const identityCardDemoCode = `
+  import { IdentityCard } from '@coinbase/onchainkit/identity';
+  import { base } from 'viem/chains';
+
+  function IdentityCardDemo() {
+    return (
+      <IdentityCard
+        address="0x849151d7D0bF1F34b70d5caD5149D28CC2308bf1"
+        chain={base}
+        schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+      />
+    )
+  }
+`;
+
+function IdentityCardDemo() {
+  return (
+    <App>
+      <IdentityCard
+        address="0x849151d7D0bF1F34b70d5caD5149D28CC2308bf1"
+        chain={base}
+        schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+      />
+    </App>
+  );
+}
+
+export default IdentityCardDemo;