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..db867363b0 --- /dev/null +++ b/site/docs/pages/hooks/use-mint-details.mdx @@ -0,0 +1,84 @@ +# `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 `@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 { useMintDetails } from '@coinbase/onchainkit/nft'; + +const Component = () => { + const { data, isLoading, error } = useMintDetails({ + contractAddress: '0x...', + takerAddress: '0x...', + tokenId: '1', + }); + + if (isLoading) return
Loading...
; + + return
{JSON.stringify(data)}
; +}; +``` + +```tsx [scaffolding] +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { OnchainKitProvider } from '@coinbase/onchainkit'; +import { useTokenDetails } from '@coinbase/onchainkit/nft'; + +const queryClient = new QueryClient(); + + + + + + +``` + + +```json [return value] +{ + "data": { + "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`](/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..893725215a --- /dev/null +++ b/site/docs/pages/hooks/use-token-details.mdx @@ -0,0 +1,74 @@ +# `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 `@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 { useTokenDetails } from '@coinbase/onchainkit/nft'; + +const Component = () => { + const { data, isLoading, error } = useTokenDetails({ + contractAddress: '0x...', + tokenId: '1', + }); + + if (isLoading) return
Loading...
; + + return
{JSON.stringify(data)}
; +}; +``` + +```tsx [scaffolding] +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { OnchainKitProvider } from '@coinbase/onchainkit'; +import { useTokenDetails } from '@coinbase/onchainkit/nft'; + +const queryClient = new QueryClient(); + + + + + + +``` + +```json [return value] +{ + "data": { + "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`](/api/types#gettokendetailsresponse) + +## Parameters + +[`GetTokenDetailsParams`](/api/types#gettokendetailsparams) diff --git a/site/sidebar.ts b/site/sidebar.ts index 967ad21068..6b89416fc8 100644 --- a/site/sidebar.ts +++ b/site/sidebar.ts @@ -300,6 +300,19 @@ export const sidebar = [ }, ], }, + { + text: 'Mint', + items: [ + { + text: 'useTokenDetails', + link: '/hooks/use-token-details', + }, + { + text: 'useMintDetails', + link: '/hooks/use-mint-details', + }, + ], + }, { text: 'Fund', items: [