This package provides functionality to interact with the Pinata API and the Ethereum blockchain to upload NFTs.
Import the package
import Pinata from "react-pinata"
In your React component, use the "Pinata" component and pass in the following props:
<Pinata pinataJWT={<your_pinata_JWT>} buttonClassNames={<your_button_class_names>} formComponent={<your_form_component>} pinataOptions={<your_pinata_options>} pinataMetaData={<your_pinata_meta_data>} nftDataJson={<your_nft_data_json>} inputStyle={<your_input_style>} inputClassNames={<your_input_class_names>} buttonStyle={<your_button_style>} NFTContractInteraction={<your_NFT_contract_interaction>} setMetaDataUrl={<your_set_metadata_url>} wrapperStyle={<your_wrapper_style>} setFileURL={<your_set_file_url>} />
- Upload files and metadata to Pinata IPFS
- List NFTs on Ethereum blockchain
- Interact with NFT contract instance
This package is built using React, axios and form-data. It uses axios to make API requests to Pinata API for uploading files and metadata to IPFS. The package also interacts with an NFT contract instance to list NFTs on the Ethereum blockchain.
This package can be used by passing the following props:
-
pinataJWT
- JWT token for authentication with Pinata API -
buttonClassNames
- class name for the List NFT button -
formComponent
- a React component that will be included in the form -
pinataOptions
- options for the file upload to Pinata IPFS -
pinataMetaData
- metadata for the file upload to Pinata IPFS -
nftDataJson
- metadata in JSON format for the NFT -
inputStyle
- style for the file input -
inputClassNames
- class name for the file input -
buttonStyle
- style for the List NFT button -
NFTContractInteraction
- function to interact with the NFT contract instance -
setMetaDataUrl
- function to set the metadata URL -
wrapperStyle
- style for the wrapper component -
setFileURL
- function to set the file URL
Please make sure to have the required dependencies installed.