Mint NFTs with OnchainKit
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 subcomponents you want to render.
NFTMintCard
component, ensure you’ve completed the 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 steps.
create onchain
to scaffold your project.
NFTMintCard
to an existing project, simply install OnchainKit.
<OnchainKitProvider />
around your app, following the steps in Getting Started.
NFTMintCardDefault
component is a simplified version of the NFTMintCard
component, designed to streamline the integration process for developers. Instead of manually defining each subcomponent, developers can use this shorthand version which renders our suggested implementation of the component and includes NFTCreator
, NFTMedia
, NFTCollectionTitle
, NFTQuantitySelector
, NFTAssetCost
and NFTMintButton
.
Add the NFTMintCard
Add the NFTMintCard components
<NFTMedia />
aspect ratiosquare={false}
on the <NFTMedia />
component.
className
.
these supported platforms on reservoir
. If your contract is not supported, please follow the bring your own data instructions
below.
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
type, the NFTMintCard will render.
You can also use a custom buildMintTransaction
function to create your own Mint transaction.
LifecycleStatus
and the onStatus
prop to listen to transaction states.
NFTMintCard has 6 lifecycle states:
init
- The component is initializederror
- The component has encountered an errormediaLoading
- The media is loadingmediaLoaded
- The media has been loadedtransactionPending
- The mint transaction is pendingtransactionLegacyExecuted
- The mint transaction has been executedsuccess
- The mint transaction has been successfulNFTMintCard
component can be customized with the following components:
<NFTCreator />
- The creator of the NFT.<NFTMedia square={boolean}/>
- The media for the NFT, this includes support for images, videos and audio NFTs.<NFTCollectionTitle />
- The title of the NFT collection.<NFTQuantitySelector />
- The quantity selector for the NFT.<NFTAssetCost />
- The cost of the NFT in native currency and USD.<NFTMintButton />
- The mint button for the NFT.