From 31d441cd5d93857bc2be7100e82c7d223e50dec6 Mon Sep 17 00:00:00 2001
From: Adam Lessey <alessey@gmail.com>
Date: Fri, 17 Jan 2025 16:59:21 -0500
Subject: [PATCH] docs: nft hooks docs

---
 site/docs/pages/hooks/use-mint-details.mdx  | 59 +++++++++++++++++++++
 site/docs/pages/hooks/use-token-details.mdx | 48 +++++++++++++++++
 site/sidebar.ts                             | 18 +++++++
 3 files changed, 125 insertions(+)
 create mode 100644 site/docs/pages/hooks/use-mint-details.mdx
 create mode 100644 site/docs/pages/hooks/use-token-details.mdx

diff --git a/site/docs/pages/hooks/use-mint-details.mdx b/site/docs/pages/hooks/use-mint-details.mdx
new file mode 100644
index 0000000000..983dea4ad9
--- /dev/null
+++ b/site/docs/pages/hooks/use-mint-details.mdx
@@ -0,0 +1,59 @@
+# `useMintDetails`
+
+The `useMintDetails` hook implements the `getMintDetails` API, returning the data required to view an NFT to be minted.
+
+It is implemented with [useQuery](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery) from `@tanstack/react-query`, and returns a `UseQueryResult` object.  Allowing you to pass through all the `@tanstack/react-query` options.
+
+Before using them, make sure to obtain a [Client API Key](https://portal.cdp.coinbase.com/projects/api-keys/client-key) from Coinbase Developer Platform.
+
+## Usage
+
+:::code-group
+
+```tsx twoslash [code]
+import { setOnchainKitConfig } from '@coinbase/onchainkit';
+import { useMintDetails } from '@coinbase/onchainkit/nft';
+
+const response = useMintDetails({
+  contractAddress: '0x...',
+  takerAddress: '0x...',
+  tokenId: '1',
+});
+```
+
+```json [return value]
+{
+  "name": "NFT Name",
+  "description": "NFT description",
+  "imageUrl": "https://example.com/image.png",
+  "animationUrl": "",
+  "mimeType": "image/png",
+  "contractType": "ERC721",
+  "price": {
+    "amount": "0.0001",
+    "currency": "ETH",
+    "amountUSD": "0.242271"
+  },
+  "mintFee": {
+    "amount": "0",
+    "currency": "ETH",
+    "amountUSD": "0"
+  },
+  "maxMintsPerWallet": 100,
+  "isEligibleToMint": true,
+  "creatorAddress": "0x...",
+  "network": "",
+  "totalTokens": "300",
+  "totalOwners": "200"
+}
+```
+
+:::
+
+## Returns
+
+[`UseQueryResult<MintDetails>`](/api/types#getmintdetailsresponse)
+
+## Parameters
+
+[`GetMintDetailsParams`](/api/types#getmintdetailsparams)
diff --git a/site/docs/pages/hooks/use-token-details.mdx b/site/docs/pages/hooks/use-token-details.mdx
new file mode 100644
index 0000000000..87e50868d0
--- /dev/null
+++ b/site/docs/pages/hooks/use-token-details.mdx
@@ -0,0 +1,48 @@
+# `useTokenDetails`
+
+The `useTokenDetails` hook implements the `getTokenDetails` API, returning the data required to view an NFT.
+
+It is implemented with [useQuery](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery) from `@tanstack/react-query`, and returns a `UseQueryResult` object.  Allowing you to pass through all the `@tanstack/react-query` options.
+
+Before using them, make sure to obtain a [Client API Key](https://portal.cdp.coinbase.com/projects/api-keys/client-key) from Coinbase Developer Platform.
+
+## Usage
+
+:::code-group
+
+```tsx twoslash [code]
+import { setOnchainKitConfig } from '@coinbase/onchainkit';
+import { useTokenDetails } from '@coinbase/onchainkit/nft';
+
+const response = useTokenDetails({
+  contractAddress: '0x...',
+  tokenId: '1',
+});
+```
+
+```json [return value]
+  "collectionName": "NFT Collection Name",
+  "collectionDescription": "NFT Collection Description",
+  "name": "NFT Name",
+  "description": "NFT Description",
+  "imageUrl": "https://example.com/image.png",
+  "animationUrl": "",
+  "ownerAddress": "0x...",
+  "lastSoldPrice": {
+    "amount": "0.0001",
+    "currency": "ETH",
+    "amountUSD": "0.242271"
+  },
+  "mimeType": "image/png",
+  "contractType": "ERC721"
+```
+
+:::
+
+## Returns
+
+[`UseQueryResult<TokenDetails>`](/api/types#gettokendetailsresponse)
+
+## Parameters
+
+[`GetTokenDetailsParams`](/api/types#gettokendetailsparams)
diff --git a/site/sidebar.ts b/site/sidebar.ts
index 967ad21068..538ca6ec6a 100644
--- a/site/sidebar.ts
+++ b/site/sidebar.ts
@@ -239,6 +239,24 @@ export const sidebar = [
       },
     ],
   },
+  {
+    text: 'Hooks',
+    items: [
+      {
+        text: 'Mint',
+        items: [
+          {
+            text: 'useTokenDetails',
+            link: '/hooks/use-token-details',
+          },
+          {
+            text: 'useMintDetails',
+            link: '/hooks/use-mint-details',
+          },
+        ],
+      },
+    ],
+  },  
   {
     text: 'API',
     items: [