diff --git a/.changeset/perfect-knives-draw.md b/.changeset/perfect-knives-draw.md
deleted file mode 100644
index 73171cc043..0000000000
--- a/.changeset/perfect-knives-draw.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@coinbase/onchainkit": patch
----
-
-***feat*** Added NFT data hooks. By @alessey #1838
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3fce8e4f1..b00ce034ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,11 +1,22 @@
# Changelog
+## 0.36.8
+
+### Patch Changes
+
+- **feat**: Add Popover UI Primitive. By @cpcramer #1849
+- **feat**: Added NFT data hooks. By @alessey #1838
+- **fix**: Made improvements to FundCard component. By @rustam-cb #1806 #1818 #1839
+- **fix**: Made improvements to WalletIsland component. By @brendan-cb #1842
+- **fix**: Made internal typesafety and efficiency improvements. By @dschlabach #1855 #1843
+- **fix**: Fixed typos in documentation and commments. By @youyyytrok @vipocenka #1840 #1841
+
## 0.36.7
### Patch Changes
- - **feat** Implemented `FundCard` component by @rustam-cb #1718
- - **fix** Updated client boundaries for `NFT`, `Wallet*`, and `WalletAdvanced*` components by @dschlabach #1809, #1810, #1821
+- **feat**: Implemented `FundCard` component by @rustam-cb #1718
+- **fix**: Updated client boundaries for `NFT`, `Wallet*`, and `WalletAdvanced*` components by @dschlabach #1809, #1810, #1821
## 0.36.6
diff --git a/package.json b/package.json
index 084b5a8473..876438b38a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@coinbase/onchainkit",
- "version": "0.36.7",
+ "version": "0.36.8",
"type": "module",
"repository": "https://github.com/coinbase/onchainkit.git",
"license": "MIT",
diff --git a/playground/nextjs-app-router/onchainkit/package.json b/playground/nextjs-app-router/onchainkit/package.json
index 49daea2170..425b7c2d82 100644
--- a/playground/nextjs-app-router/onchainkit/package.json
+++ b/playground/nextjs-app-router/onchainkit/package.json
@@ -116,10 +116,10 @@
"default": "./esm/index.js"
},
"./api": {
- "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"
+ "types": "./esm/api/index.d.ts",
+ "module": "./esm/api/index.js",
+ "import": "./esm/api/index.js",
+ "default": "./esm/api/index.js"
},
"./buy": {
"types": "./esm/buy/index.d.ts",
@@ -146,10 +146,10 @@
"default": "./esm/fund/index.js"
},
"./identity": {
- "types": "./esm/ui/react/identity/index.d.ts",
- "module": "./esm/ui/react/identity/index.js",
- "import": "./esm/ui/react/identity/index.js",
- "default": "./esm/ui/react/identity/index.js"
+ "types": "./esm/identity/index.d.ts",
+ "module": "./esm/identity/index.js",
+ "import": "./esm/identity/index.js",
+ "default": "./esm/identity/index.js"
},
"./nft": {
"types": "./esm/ui/react/nft/index.d.ts",
diff --git a/site/docs/pages/fund/fund-card.mdx b/site/docs/pages/fund/fund-card.mdx
new file mode 100644
index 0000000000..dfbecd4bba
--- /dev/null
+++ b/site/docs/pages/fund/fund-card.mdx
@@ -0,0 +1,234 @@
+---
+title: ยท OnchainKit
+description: The `` component provides a complete fiat onramp experience with amount input, currency switching, and payment method selection.
+---
+
+import { Avatar, Name } from '@coinbase/onchainkit/identity';
+import { FundCard } from '@coinbase/onchainkit/fund';
+import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
+import App from '../../components/App';
+import FundWrapper from '../../components/FundWrapper';
+
+# ``
+
+The `` component provides a complete fiat onramp experience within your app. It includes:
+
+- Amount input with fiat/crypto switching
+- Payment method selection (Coinbase, Apple Pay, Debit Card)
+- Automatic exchange rate updates
+- Smart handling of payment method restrictions (based on country and subdivision)
+
+:::info
+The Apple Pay and Debit Card onramp options are only available for Coinbase supported assets.
+:::
+
+## Prerequisites
+
+Before using the `FundCard` component, ensure you've completed the [Getting Started](/installation/nextjs#get-your-client-api-key) steps.
+
+::::tip
+To use the `FundCard` component, you'll need to provide a Client API Key in `OnchainKitProvider`. You can get one following our [Getting Started](/installation/nextjs#get-your-client-api-key) steps.
+:::::
+
+## Usage
+
+### Drop in the `` component
+
+```tsx
+import { FundCard } from '@coinbase/onchainkit/fund';
+
+;
+```
+
+
+
+ {({ address }) => {
+ if (address) {
+ return ;
+ }
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+ }}
+
+
+
+## Customization
+
+### Custom Header and Button Text
+
+You can customize the header and button text:
+
+```tsx
+
+```
+
+
+
+ {({ address }) => {
+ if (address) {
+ return (
+
+ );
+ }
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+ }}
+
+
+
+### Custom Currency
+
+You can specify which fiat currency to use:
+
+```tsx
+
+```
+
+### Preset Amount Inputs
+
+You can specify preset amount buttons:
+
+```tsx
+const presetAmountInputs = ['10', '20', '50'] as const;
+
+;
+```
+
+:::info
+**Note: 3 preset amount inputs are required in order to show the preset amount buttons.**
+:::
+
+### Custom Content
+
+You can provide custom children to completely customize the card content while keeping the fund button functionality:
+
+```tsx
+
+
+
Custom Header
+
+
+
+
+```
+
+You can also reuse the existing children from the default implementation and add your own custom content.
+
+```tsx
+import {
+ FundCardHeader,
+ FundCardAmountInput,
+ FundCardAmountInputTypeSwitch,
+ FundCardPresetAmountInputList,
+ FundCardPaymentMethodDropdown,
+ FundCardSubmitButton,
+ } from '@coinbase/onchainkit/fund';
+
+
+
+
Custom Header instead of the default "FundCardHeader"