diff --git a/site/docs/components/NFTComponents.tsx b/site/docs/components/NFTComponents.tsx new file mode 100644 index 0000000000..d6f01e04dd --- /dev/null +++ b/site/docs/components/NFTComponents.tsx @@ -0,0 +1,222 @@ +import { NFTCard, NFTMintCard } from '@coinbase/onchainkit/nft'; +import { + NFTAssetCost, + NFTCollectionTitle, + NFTCreator, + NFTMintButton, + NFTQuantitySelector, +} from '@coinbase/onchainkit/nft/mint'; +import { + NFTLastSoldPrice, + NFTMedia, + NFTNetwork, + NFTOwner, + NFTTitle, +} from '@coinbase/onchainkit/nft/view'; +import App from './App.tsx'; + +export function MintCardMain() { + return ( + +
+ ({ + name: 'OCK Mint Component', + description: 'OnchainKit highlights', + imageUrl: + 'https://ipfs.io/ipfs/bafybeifbnyvwfrbdr4r3nn7joi5eznbype27fynyat7rr52ckmqnz3camm', + animationUrl: + 'https://ipfs.io/ipfs/bafybeia7fmwmyvxxmx6cnokvhyeyafa7gzpkhildz2keu6ca2ln3dlsxum', + mimeType: 'video/mp4', + contractType: 'ERC1155', + price: { + amount: '0.000111', + currency: 'ETH', + amountUSD: '0.264674505', + }, + mintFee: { + amount: '0.0001', + currency: 'ETH', + amountUSD: '0.2384455', + }, + maxMintsPerWallet: 1, + isEligibleToMint: true, + creatorAddress: '0xb4e741b761d8b69103cc986f1b7cd71ed627f8cc', + network: 'networks/base-mainnet', + totalTokens: '1', + totalOwners: '1', + })} + buildMintTransaction={() => Promise.resolve([{ callData: '0x' }])} + > + + + + + + + +
+
+ ); +} + +export function MintCardTitleAbove() { + return ( + +
+ ({ + name: "Job's Not Finished", + imageUrl: + 'https://ipfs.io/ipfs/bafybeibozzie5uy6tc2adpklc5rygchjgw5uqrgnmspzzpoveibwpqnbwy', + mimeType: 'image/png', + })} + > + + + +
+
+ ); +} + +export function MintCardScaled({ square }: { square: boolean }) { + return ( + + ({ + name: 'Videos', + animationUrl: + 'https://ipfs.io/ipfs/bafybeigg7e2m2ubmntg4z7uvqzatpnkxs6w5celjky5o32uakskkrwyqpi', + mimeType: 'video/mp4', + })} + > + + + + ); +} + +export function MintCardOverrideStyles() { + return ( + +
+ ({ + name: "Job's Not Finished", + imageUrl: + 'https://ipfs.io/ipfs/bafybeibozzie5uy6tc2adpklc5rygchjgw5uqrgnmspzzpoveibwpqnbwy', + mimeType: 'image/png', + })} + > + + + +
+
+ ); +} + +export function ViewCardMain() { + return ( + +
+ ({ + collectionName: 'Base Around The World 2024 Recap Video', + collectionDescription: + 'Get ready for a fast-paced journey as BASE goes global! šŸŒ This recap takes you through regional buildathons across Africa, India, Southeast Asia, and Latin America, where builders came together to innovate, create, and solve local challengesā€”all for a chance to win from a massive 100 ETH prize pool. With a mission to onboard a billion users onchain, watch how these visionaries are shaping the future, one solution at a time!', + name: 'Base Around The World 2024 Recap Video #1', + description: + 'Get ready for a fast-paced journey as BASE goes global! šŸŒ This recap takes you through regional buildathons across Africa, India, Southeast Asia, and Latin America, where builders came together to innovate, create, and solve local challengesā€”all for a chance to win from a massive 100 ETH prize pool. With a mission to onboard a billion users onchain, watch how these visionaries are shaping the future, one solution at a time!', + imageUrl: '', + animationUrl: + 'https://ipfs.io/ipfs/QmfAGdrbm48zie8BRjfkbc5yN8DGyM9nt9dozvAsNHGmFo/nft-gallery-1mp4', + ownerAddress: '0x2f21f94e1e57543f4663b722b6b1bed97c576bd4', + lastSoldPrice: { + amount: '0.0004', + currency: 'ETH', + amountUSD: '0.982512', + }, + mimeType: 'video/quicktime', + contractType: 'ERC721', + })} + > + + + + + + +
+
+ ); +} + +export function ViewCardTitleAbove() { + return ( + +
+ ({ + name: "Job's Not Finished", + imageUrl: + 'https://ipfs.io/ipfs/bafybeibozzie5uy6tc2adpklc5rygchjgw5uqrgnmspzzpoveibwpqnbwy', + mimeType: 'image/png', + })} + > + + + +
+
+ ); +} + +export function ViewCardScaled({ square }: { square: boolean }) { + return ( + + ({ + name: 'Videos', + animationUrl: + 'https://ipfs.io/ipfs/bafybeigg7e2m2ubmntg4z7uvqzatpnkxs6w5celjky5o32uakskkrwyqpi', + mimeType: 'video/mp4', + })} + > + + + + ); +} + +export function ViewCardOverrideStyles() { + return ( + +
+ ({ + name: "Job's Not Finished", + imageUrl: + 'https://ipfs.io/ipfs/bafybeibozzie5uy6tc2adpklc5rygchjgw5uqrgnmspzzpoveibwpqnbwy', + mimeType: 'image/png', + })} + > + + + +
+
+ ); +} diff --git a/site/docs/components/StartBuilding.tsx b/site/docs/components/StartBuilding.tsx index fbed3141bd..67dc1cbd18 100644 --- a/site/docs/components/StartBuilding.tsx +++ b/site/docs/components/StartBuilding.tsx @@ -165,6 +165,33 @@ export default function StartBuilding() { in your app. +
  • + + + + Mint + + {' '} + -{' '} + + View + {' '} + and{' '} + + Mint + {' '} + NFTs in yoru app. + +
  • `](/api/types#buildminttransactionresponse) + +## Parameters + +[`BuildMintTransactionParams`](/api/types#buildminttransactionparams) diff --git a/site/docs/pages/api/get-mint-details.mdx b/site/docs/pages/api/get-mint-details.mdx new file mode 100644 index 0000000000..be25c3de20 --- /dev/null +++ b/site/docs/pages/api/get-mint-details.mdx @@ -0,0 +1,57 @@ +# `getMintDetails` + +The `getMintDetails` function returns data required to view an NFT to be minted + +Before using them, make sure to obtain a [Client API Key](https://portal.cdp.coinbase.com/projects/project-id/api-keys/client-key) from Coinbase Developer Platform. + +## Usage + +:::code-group + +```tsx twoslash [code] +import { setOnchainKitConfig } from '@coinbase/onchainkit'; +import { getMintDetails } from '@coinbase/onchainkit/api'; + +const response = await getMintDetails({ + 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 + +[`Promise`](/api/types#getmintdetailsresponse) + +## Parameters + +[`GetMintDetailsParams`](/api/types#getmintdetailsparams) diff --git a/site/docs/pages/api/get-token-details.mdx b/site/docs/pages/api/get-token-details.mdx new file mode 100644 index 0000000000..ceae553a5d --- /dev/null +++ b/site/docs/pages/api/get-token-details.mdx @@ -0,0 +1,46 @@ +# `getTokenDetails` + +The `getTokenDetails` function returns data required to view an NFT + +Before using them, make sure to obtain a [Client API Key](https://portal.cdp.coinbase.com/projects/project-id/api-keys/client-key) from Coinbase Developer Platform. + +## Usage + +:::code-group + +```tsx twoslash [code] +import { setOnchainKitConfig } from '@coinbase/onchainkit'; +import { getTokenDetails } from '@coinbase/onchainkit/api'; + +const response = await getTokenDetails({ + 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 + +[`Promise`](/api/types#gettokendetailsresponse) + +## Parameters + +[`GetTokenDetailsParams`](/api/types#gettokendetailsparams) diff --git a/site/docs/pages/api/types.mdx b/site/docs/pages/api/types.mdx index 541431a6b3..ac69f3d8d8 100644 --- a/site/docs/pages/api/types.mdx +++ b/site/docs/pages/api/types.mdx @@ -92,3 +92,50 @@ type GetTokensOptions = { ```ts type GetTokensResponse = Token[] | APIError; ``` + +## `GetTokenDetailsParams` + +```ts +type GetTokenDetailsParams = { + contractAddress: Address; + tokenId?: string; +}; +``` + +## `GetTokenDetailsResponse` + +```ts +type GetTokenDetailsResponse = TokenDetails | APIError; +``` + +## `GetMintDetailsParams` + +```ts +type GetMintDetailsParams = { + contractAddress: Address; + takerAddress?: Address; + tokenId?: string; +}; +``` + +## `GetMintDetailsResponse` +type GetMintDetailsResponse = MintDetails | APIError; +```ts + +## `BuildMintTransactionParams` + +```ts +type BuildMintTransactionParams = { + mintAddress: Address; + takerAddress: Address; + tokenId?: string; + quantity: number; + network?: string; +}; +``` + +## `BuildMintTransactionResponse` + +```ts +type BuildMintTransactionResponse = MintTransaction | APIError; +``` \ No newline at end of file diff --git a/site/docs/pages/getting-started.mdx b/site/docs/pages/getting-started.mdx index c07b04ed23..96bab4b779 100644 --- a/site/docs/pages/getting-started.mdx +++ b/site/docs/pages/getting-started.mdx @@ -37,7 +37,7 @@ After the prompts, `create onchain` will create a folder with your project name You can also checkout our pre-built templates: - [Onchain Commerce](https://onchain-commerce-template.vercel.app/) -- [NFT minting](https://github.com/coinbase/onchain-app-template) +- [NFT minting](https://ock-mint.vercel.app/) - [Funding flow](https://github.com/fakepixels/fund-component) - [Social profile](https://github.com/fakepixels/ock-identity) diff --git a/site/docs/pages/mint/nft-card.mdx b/site/docs/pages/mint/nft-card.mdx new file mode 100644 index 0000000000..1f1314da3a --- /dev/null +++ b/site/docs/pages/mint/nft-card.mdx @@ -0,0 +1,276 @@ +--- +title: Ā· OnchainKit +description: View NFTs with OnchainKit +--- + +import { + ViewCardMain, + ViewCardTitleAbove, + ViewCardScaled, + ViewCardOverrideStyles +} from '../../components/NFTComponents'; + +# `` + +The `NFTCard` component provides an easy way to view any NFT. Just enter the NFT contract address and token Id and include the child components you want to render. + +Checkout + +## Prerequisites + +Before using the `NFTCard` component, ensure you've completed the [Getting Started](/getting-started) steps. + +To use the `NFTCard` component, you'll need to provide an API Key in `OnchainKitProvider`. You can get one following our [Getting Started](/getting-started#get-your-public-api-key) steps. + +### Starting a new project + +If you're starting a new project, we recommend using `create onchain` to scaffold your project. + +```bash +npm create onchain@latest +``` + +### Adding to an existing project + +If you're adding `NFTCard` to an existing project, simply install OnchainKit. + +:::code-group + +```bash [npm] +npm install @coinbase/onchainkit +``` + +```bash [yarn] +yarn add @coinbase/onchainkit +``` + +```bash [pnpm] +pnpm add @coinbase/onchainkit +``` + +```bash [bun] +bun add @coinbase/onchainkit +``` + +::: + +Wrap the `` around your app, following the steps in [Getting Started](/getting-started#add-providers). + +## Quickstart + +::::steps + +### Add the NFTCard + +```tsx twoslash +// @noErrors: 2741 - Property children missing in type +import { NFTCard } from '@coinbase/onchainkit/nft'; // [!code focus] + + + +``` + +### Add the NFTCard components + +```tsx twoslash +import { NFTCard } from '@coinbase/onchainkit/nft'; +import { + NFTLastSoldPrice, // [!code ++] + NFTMedia, // [!code ++] + NFTNetwork, // [!code ++] + NFTOwner, // [!code ++] + NFTTitle, // [!code ++] +} from '@coinbase/onchainkit/nft/view'; // [!code ++] + + + // [!code ++] + // [!code ++] + // [!code ++] + // [!code ++] + // [!code ++] + +``` + + + +:::: + +That's it! You've now created an NFT card. + +## Customization + +### Add the NFTCard components in any order + +If you prefer to have the title above the media, you can easily change the order of the children components and they will render in the new order. + +```tsx twoslash +import { NFTCard } from '@coinbase/onchainkit/nft'; +import { + NFTMedia, + NFTTitle, +} from '@coinbase/onchainkit/nft/view'; +// ---cut-before--- + + // [!code ++] + + // [!code --] + +// ---cut-after--- +``` + + + +### Customize the `` aspect ratio + +By default, we display all media scaled to fit the card. If you would prefer to show the media at its original aspect ratio you can set `square={false}` on the `` component. + +```tsx twoslash +import { NFTCard } from '@coinbase/onchainkit/nft'; +import { + NFTMedia, +} from '@coinbase/onchainkit/nft/view'; +// ---cut-before--- + + // [!code focus] + +// ---cut-after--- +``` + +| Scaled to fit (default) | Original Aspect Ratio | +|-----------------|------------| +| | | + +### Override styles + +We recommend style customization by setting a custom [OnchainKit theme](/guides/themes#custom-theme). You can also override individual component styles using `className`. + +```tsx twoslash +import { NFTCard } from '@coinbase/onchainkit/nft'; +import { + NFTMedia, + NFTTitle, +} from '@coinbase/onchainkit/nft/view'; +export default function NFTComponent() { + return ( +// ---cut-before--- + + + // [!code focus] + +// ---cut-after--- +); +} +``` + + + +## Advanced Usage + +### Bring your own data + +The default `NFTCard` implementation uses Coinbase Developer Platform to provide the data and requires an API key. If you would like to use your own data, you can use the `useNFTData` prop to pass in a hook which fetches the NFT data from a source of your choice. As long as this hook returns an object with the same shape as the [`NFTData`](/mint/types#nftdata) type, the NFTCard will render. + +```tsx twoslash +import { NFTCard } from '@coinbase/onchainkit/nft'; +import { + NFTMedia, + NFTTitle, +} from '@coinbase/onchainkit/nft/view'; +// ---cut-before--- + +function useNFTData() { // [!code focus] + return { // [!code focus] + title: 'My NFT', // [!code focus] + imageUrl: 'https://example.com/image.png', // [!code focus] + } // [!code focus] +} // [!code focus] + +export default function NFTComponent() { + return ( + + + + + ); +} +``` + +### Listening to the component lifecycle + +You can use our NFT [`LifecycleStatus`](/mint/types#lifecyclestatus) and the `onStatus` prop to listen to transaction states. + +NFTCard has 4 lifecycle states: +* `init` - The component is initialized +* `error` - The component has encountered an error +* `mediaLoading` - The media is loading +* `success` - The media has been loaded + +```tsx twoslash +import { NFTCard } from '@coinbase/onchainkit/nft'; +import { NFTMedia } from '@coinbase/onchainkit/nft/view'; +// ---cut-before--- +import type { LifecycleStatus } from '@coinbase/onchainkit/nft'; // [!code focus] + +const statusHandler = (status: LifecycleStatus) => { // [!code focus] + const { statusName, statusData } = status; // [!code focus] + switch (statusName) { // [!code focus] + case 'success': // [!code focus] + // handle success + case 'error': // [!code focus] + // handle error + default: // [!code focus] + // handle 'init' state + } // [!code focus] +} // [!code focus] + + + + +// ---cut-after--- +``` + +## Example use cases +- **Display your favorite NFT:** Create your own gallery showcasing your favorite NFTs +- **Display a minted in game avatar:** Allow your users to mint and then view a minted avatar + +## Components + +The `NFTCard` component can be customized with the following components: + +- `` - The media for the NFT, this includes support for images, videos and audio NFTs. +- `` - The title of the NFT. +- `` - Displays the Owners Avatar, name or address and badge (if applicable). +- `` - The last sold price of the NFT in native currency and USD. +- `` - The network the NFT is on, currently only BASE NFTs are supported. + +## Props + +- [`LifecycleStatus`](/mint/types#lifecyclestatus) +- [`NFTCardReact`](/mint/types#nftcardreact) +- [`NFTData`](/mint/types#nftdata) \ No newline at end of file diff --git a/site/docs/pages/mint/nft-mint-card.mdx b/site/docs/pages/mint/nft-mint-card.mdx new file mode 100644 index 0000000000..3f5e5ff9d0 --- /dev/null +++ b/site/docs/pages/mint/nft-mint-card.mdx @@ -0,0 +1,285 @@ +--- +title: Ā· OnchainKit +description: Mint NFTs with OnchainKit +--- + +import { + MintCardMain, + MintCardTitleAbove, + MintCardScaled, + MintCardOverrideStyles +} from '../../components/NFTComponents'; + +# `` + +The `NFTMintCard` component provides an easy way to mint an NFT. Just enter the NFT contract address and token Id (for ERC1155 contracts) and include the child components you want to render. + +Checkout + +## Prerequisites + +Before using the `NFTMintCard` component, ensure you've completed the [Getting Started](/getting-started) steps. + +To use the `NFTMintCard` component, you'll need to provide an API Key in `OnchainKitProvider`. You can get one following our [Getting Started](/getting-started#get-your-public-api-key) steps. + +### Starting a new project + +If you're starting a new project, we recommend using `create onchain` to scaffold your project. + +```bash +npm create onchain@latest +``` + +### Adding to an existing project + +If you're adding `NFTMintCard` to an existing project, simply install OnchainKit. + +:::code-group + +```bash [npm] +npm install @coinbase/onchainkit +``` + +```bash [yarn] +yarn add @coinbase/onchainkit +``` + +```bash [pnpm] +pnpm add @coinbase/onchainkit +``` + +```bash [bun] +bun add @coinbase/onchainkit +``` + +::: + +Wrap the `` around your app, following the steps in [Getting Started](/getting-started#add-providers). + +## Quickstart + +::::steps + +### Add the NFTMintCard + +```tsx twoslash +// @noErrors: 2741 - Property children missing in type +import { NFTMintCard } from '@coinbase/onchainkit/nft'; // [!code focus] + + + +``` + +### Add the NFTMintCard components + +```tsx twoslash +import { NFTMintCard } from '@coinbase/onchainkit/nft'; +import { NFTMedia } from '@coinbase/onchainkit/nft/view'; // [!code ++] +import { + NFTCreator, // [!code ++] + NFTCollectionTitle, // [!code ++] + NFTQuantitySelector, // [!code ++] + NFTAssetCost, // [!code ++] + NFTMintButton, // [!code ++] +} from '@coinbase/onchainkit/nft/mint'; // [!code ++] + + + // [!code ++] + // [!code ++] + // [!code ++] + // [!code ++] + // [!code ++] + // [!code ++] + +``` + + + +:::: + +That's it! You've now created an NFT mint card. + +## Not sure what to mint? + +You can create your own NFT to mint at [Coinbase Wallets create a Mint flow](https://wallet.coinbase.com/home/create). Just follow the instructions to create your NFT and then copy the contract address out of the url into an NFTMintCard. + +## Customization + +### Add the NFTMintCard components in any order + +If you prefer to have the collection title above the media, you can easily change the order of the children components and they will render in the new order. + +```tsx twoslash +import { NFTMintCard } from '@coinbase/onchainkit/nft'; +import { NFTMedia } from '@coinbase/onchainkit/nft/view'; +import { NFTCollectionTitle } from '@coinbase/onchainkit/nft/mint'; +// ---cut-before--- + + // [!code ++] + + // [!code --] + +// ---cut-after--- +``` + + + +### Customize the `` aspect ratio + +By default, we display all media scaled to fit the card. If you would prefer to show the media at its original aspect ratio you can set `square={false}` on the `` component. + +```tsx twoslash +import { NFTMintCard } from '@coinbase/onchainkit/nft'; +import { + NFTMedia, +} from '@coinbase/onchainkit/nft/view'; +// ---cut-before--- + + // [!code focus] + +// ---cut-after--- +``` + +| Scaled to fit (default) | Original Aspect Ratio | +|-----------------|------------| +| | | + +### Override styles + +We recommend style customization by setting a custom [OnchainKit theme](/guides/themes#custom-theme). You can also override individual component styles using `className`. + +```tsx twoslash +import { NFTMintCard } from '@coinbase/onchainkit/nft'; +import { + NFTMedia, +} from '@coinbase/onchainkit/nft/view'; +import { NFTCollectionTitle } from '@coinbase/onchainkit/nft/mint'; +export default function NFTComponent() { + return ( +// ---cut-before--- + + + // [!code focus] + +// ---cut-after--- +); +} +``` + + + +## Advanced Usage + +### Bring your own data + +The default `NFTMintCard` implementation uses Coinbase Developer Platform to provide the data and requires an API key. You can use the `useNFTData` prop to pass in a hook which fetches the NFT data from a source of your choice. As long as this hook returns an object with the same shape as the [`NFTData`](/mint/types#nftdata) type, the NFTMintCard will render. + +You can also use a custom `buildMintTransaction` function to create your own Mint transaction. + +```tsx twoslash +import { NFTMintCard } from '@coinbase/onchainkit/nft'; +import { NFTMedia } from '@coinbase/onchainkit/nft/view'; +import { NFTCollectionTitle, NFTMintButton } from '@coinbase/onchainkit/nft/mint'; +// ---cut-before--- + +function useNFTData() { // [!code focus] + return { // [!code focus] + title: 'My NFT', // [!code focus] + imageUrl: 'https://example.com/image.png', // [!code focus] + } // [!code focus] +} // [!code focus] + +async function buildMintTransaction() { // [!code focus] + const response = await fetch('https://api.minttransaction.com'); // [!code focus] + return await response.json(); // [!code focus] +} // [!code focus] + +export default function NFTComponent() { + return ( + + + + + + ); +} +``` + +### Listening to the component lifecycle + +You can use our NFT [`LifecycleStatus`](/mint/types#lifecyclestatus) and the `onStatus` prop to listen to transaction states. + +NFTMintCard has 6 lifecycle states: +* `init` - The component is initialized +* `error` - The component has encountered an error +* `mediaLoading` - The media is loading +* `mediaLoaded` - The media has been loaded +* `transactionPending` - The mint transaction is pending +* `transactionLegacyExecuted` - The mint transaction has been executed +* `success` - The mint transaction has been successful + +```tsx twoslash +import { NFTMintCard } from '@coinbase/onchainkit/nft'; +import { NFTMedia } from '@coinbase/onchainkit/nft/view'; +// ---cut-before--- +import type { LifecycleStatus } from '@coinbase/onchainkit/nft'; // [!code focus] + +const statusHandler = (status: LifecycleStatus) => { // [!code focus] + const { statusName, statusData } = status; // [!code focus] + switch (statusName) { // [!code focus] + case 'success': // [!code focus] + // handle success + case 'error': // [!code focus] + // handle error + default: // [!code focus] + // handle 'init' state + } // [!code focus] +} // [!code focus] + + + + +// ---cut-after--- +``` + +## Example use cases +- **Create a gallery of your mintable NFTs:** Create a gallery of NFTs you created for users to mint +- **Minted in game avatar:** Allow your users to mint and then view a minted avatar + +## Components + +The `NFTMintCard` component can be customized with the following components: + +- `` - The creator of the NFT. +- `` - The media for the NFT, this includes support for images, videos and audio NFTs. +- `` - The title of the NFT collection. +- `` - The quantity selector for the NFT. +- `` - The cost of the NFT in native currency and USD. +- `` - The mint button for the NFT. + +## Props + +- [`LifecycleStatus`](/mint/types#lifecyclestatus) +- [`NFTMintCardReact`](/mint/types#nftmintcardreact) +- [`NFTData`](/mint/types#nftdata) \ No newline at end of file diff --git a/site/docs/pages/mint/types.mdx b/site/docs/pages/mint/types.mdx new file mode 100644 index 0000000000..bbe9e2643d --- /dev/null +++ b/site/docs/pages/mint/types.mdx @@ -0,0 +1,144 @@ +--- +title: Checkout components & utilities Types +description: Glossary of Types in NFT components & utilities. +--- + +# Types [Glossary of Types in NFT components & utilities.] + + +## `LifecycleStatus` + +```ts +export type LifecycleStatus = + | { + statusName: 'init'; + statusData: null; + } + | { + statusName: 'error'; + statusData: NFTError; + } + | { + statusName: 'mediaLoading'; + statusData: { + mediaType: MediaType; + mediaUrl: string; + }; + } + | { + statusName: 'mediaLoaded'; + statusData: null; + } + | { + statusName: 'transactionPending'; + statusData: null; + } + | { + statusName: 'transactionLegacyExecuted'; + statusData: { + transactionHashList: Address[]; + }; + } + | { + // NFTCard success state represents media loaded + // NFTMintCard success state represents successful Mint + statusName: 'success'; + statusData: { + transactionReceipts?: TransactionReceipt[]; + }; + }; +``` + +## `NFTCardReact` + +```ts +type NFTCardReact = { + children: React.ReactNode; + + // Optional className override for top div element. + className?: string; + + // Contract address of the NFT + contractAddress: Hex; + + // Required Token ID of the NFT + tokenId: string; + + // Optional hook to override the default useNftData hook + useNFTData?: UseNFTData; + + // An optional callback function that handles errors within the provider. + onError?: (error: NFTError) => void; + + // An optional callback function that exposes the component lifecycle state + onStatus?: (lifecycleStatus: LifecycleStatus) => void; + + // card will not pass transactionReceipt + onSuccess?: (transactionReceipt?: TransactionReceipt) => void; +}; +``` + +## `NFTMintCardReact` +```ts +type NFTMintCardReact = { + children: ReactNode; + + // Optional className override for top div element. + className?: string; + + // Contract address of the NFT + contractAddress: Hex; + + // Token ID of the NFT only required for ERC1155 + tokenId?: string; + + // Optional boolean to determine if the mint is sponsored by paymaster + isSponsored?: boolean; + + // Optional hook to override the default useNFTData hook + useNFTData?: UseNFTData; + + // Optional function to override the default function that builds the mint transaction + buildMintTransaction?: BuildMintTransaction; + + // An optional callback function that handles errors within the provider. + onError?: (error: NFTError) => void; + + // An optional callback function that exposes the component lifecycle state + onStatus?: (lifecycleStatus: LifecycleStatus) => void; + + // MintCard will pass transactionReceipt + onSuccess?: (transactionReceipt?: TransactionReceipt) => void; +}; +``` + +## `NFTData` +```ts +type NFTData = { + // card components + name?: string; // required for NFTTitle and NFTCollectionTitle + description?: string; // not currently used + imageUrl?: string; // required for NFTMedia + animationUrl?: string; // required for NFTMedia (audio and video types) + /* supported mimeTypes: + * image = image/* + * video = video/* + * audio = audio/* | application/* + */ + lastSoldPrice?: NFTPrice; // required for NFTLastSoldPrice + mimeType?: string; // required for NFTMedia (falls back to image) + + // mint components + ownerAddress?: `0x${string}`; // required for NFTOwner + contractType?: ContractType; + mintDate?: Date; // required for NFTMintDate + price?: NFTPrice; // required for NFTAssetCost, NftTotalCost + mintFee?: NFTPrice; // required for NFTTotalCost + creatorAddress?: Hex; // required for NFTCreator + maxMintsPerWallet?: number; // required for NFTMintButton + isEligibleToMint?: boolean; // required for NFTMintButton + totalOwners?: string; // required for NFTMinters + recentOwners?: Address[]; // required for NFTMinters + network?: string; // required for default BuildMintTransaction implementation +}; +``` diff --git a/site/docs/public/assets/NFTCard.gif b/site/docs/public/assets/NFTCard.gif new file mode 100644 index 0000000000..a9ab980ead Binary files /dev/null and b/site/docs/public/assets/NFTCard.gif differ diff --git a/site/docs/public/assets/NFTMintCard.gif b/site/docs/public/assets/NFTMintCard.gif new file mode 100644 index 0000000000..15c3c697e5 Binary files /dev/null and b/site/docs/public/assets/NFTMintCard.gif differ diff --git a/site/sidebar.ts b/site/sidebar.ts index 70bf2fb7f9..d52e27cc2e 100644 --- a/site/sidebar.ts +++ b/site/sidebar.ts @@ -53,7 +53,7 @@ export const sidebar = [ items: [ { text: 'Onchain NFT App', - link: 'https://github.com/coinbase/onchain-app-template', + link: 'https://ock-mint.vercel.app/', }, { text: 'Onchain Commerce App', @@ -128,6 +128,19 @@ export const sidebar = [ }, ], }, + { + text: 'Mint', + items: [ + { + text: 'NFTCard', + link: '/mint/nft-card', + }, + { + text: 'NFTMintCard', + link: '/mint/nft-mint-card', + }, + ], + }, { text: 'Swap', items: [ @@ -205,6 +218,23 @@ export const sidebar = [ { text: 'API', items: [ + { + text: 'Mint', + items: [ + { + text: 'getTokenDetails', + link: '/api/get-token-details', + }, + { + text: 'getMintDetails', + link: '/api/get-mint-details', + }, + { + text: 'buildMintTransaction', + link: '/api/build-mint-transaction', + }, + ], + }, { text: 'Swap', items: [ @@ -349,6 +379,10 @@ export const sidebar = [ text: 'API', link: '/api/types', }, + { + text: 'Checkout', + link: '/checkout/types', + }, { text: 'Config', link: '/config/types', @@ -370,8 +404,8 @@ export const sidebar = [ link: '/identity/types', }, { - text: 'Checkout', - link: '/checkout/types', + text: 'Mint', + link: '/mint/types', }, { text: 'Swap',