NFT-Details

A React Component that enables you to view the details of an NFT served by the Alchemy APIs.

Install

npm :

npm install @iblcomponents/nft-details

Usage

From the client application you should:

1 . Create the configurations and inputData objects needed by the component. See the code snippet below for an example.
2 . Wrap these in a componentProps object and send it as props to the NftDetails component.
3 . The detail fields (those set "true" in configurations) of the NFT should be rendered on the component.

// NftDetails Component : Displays the details of an NFT by accessing its metadata via the Alchemy APIs.
import { getAPI } from "@iblcomponents/nft-details";

const YourComponent = () =>
{
    const NftDetails = getAPI("NftDetails").getComponent();

    const configurations = {
        "title": true,
        "image": true,
        "description": true,
        "currentOwner": true,
        "creator": true,
        "contract": true,
        "tokenId": true,
        "tokenStandard": true,
        "blockchain": true
    };

    const inputData = {
        "contractAddress": "a contract address",
        "owner": "wallet address of the NFT's current owner",
        "tokenId": "the token of the NFT",
        "tokenUri": "the token URI",
        "transaction": "the address of the transaction"
    };
    
    const componentProps = {
        saveOutputCallback: () => {}, // just an empty function, it is not used by the component
        configurations : configurations,
        inputData : inputData,
        componentDataFromInit: {} // just an empty object, it is not used by the component  
    }; 
    
    return <NftDetails { ...componentProps }/>
}

export default YourComponent