Skip to content

Commit

Permalink
docs: nft hooks docs
Browse files Browse the repository at this point in the history
  • Loading branch information
alessey committed Jan 28, 2025
1 parent 7789413 commit 03186c0
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 0 deletions.
84 changes: 84 additions & 0 deletions site/docs/pages/hooks/use-mint-details.mdx
Original file line number Diff line number Diff line change
@@ -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 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 { useMintDetails } from '@coinbase/onchainkit/nft';

const Component = () => {
const { data, isLoading, error } = useMintDetails({
contractAddress: '0x...',
takerAddress: '0x...',
tokenId: '1',
});

if (isLoading) return <div>Loading...</div>;

return <div>{JSON.stringify(data)}</div>;
};
```

```tsx [scaffolding]
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { useTokenDetails } from '@coinbase/onchainkit/nft';

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
<OnchainKitProvider
apiKey={...apiKey}
chain={base}
>
<Component />
</OnchainKitProvider>
</QueryClientProvider>
```


```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<MintDetails>`](/api/types#getmintdetailsresponse)

## Parameters

[`GetMintDetailsParams`](/api/types#getmintdetailsparams)
74 changes: 74 additions & 0 deletions site/docs/pages/hooks/use-token-details.mdx
Original file line number Diff line number Diff line change
@@ -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 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 { useTokenDetails } from '@coinbase/onchainkit/nft';

const Component = () => {
const { data, isLoading, error } = useTokenDetails({
contractAddress: '0x...',
tokenId: '1',
});

if (isLoading) return <div>Loading...</div>;

return <div>{JSON.stringify(data)}</div>;
};
```

```tsx [scaffolding]
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { useTokenDetails } from '@coinbase/onchainkit/nft';

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
<OnchainKitProvider
apiKey={...apiKey}
chain={base}
>
<Component />
</OnchainKitProvider>
</QueryClientProvider>
```

```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<TokenDetails>`](/api/types#gettokendetailsresponse)

## Parameters

[`GetTokenDetailsParams`](/api/types#gettokendetailsparams)
18 changes: 18 additions & 0 deletions site/sidebar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down

0 comments on commit 03186c0

Please sign in to comment.