Skip to content

jack-ht/aiza-react-hooks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Aiza ReactJS hooks helper

  • React hooks to load Aiza NFT data, metadata and content.
  • @htsoft/aiza-react-ui a library to render NFT components/pages on a ReactJS webpage.

Environment

  • NodeJS version >= v14.17.5

How to use

  1. First install by run

    yarn add @htsoft/reactjs-hooks
  2. Import and use the hooks in your react:

    import { useNFT, useNFTMetadata } from '@htsoft/reactjs-hooks';
    
    function MyNFT() {
      const { data } = useNFT('88');
      const { metadata } = useNFTMetadata(data && data.metadataURI);
    
      return (
        <div>
          <p> { metadata.description } </p>
          <p> Owned by: {data.owner.id } </p>
        </div>
      );
    }
  3. List of hooks:

    Hook Usage
    useNFT Fetches on-chain NFT data
    useAuctions Fetches list of auctions given one or more curators from the Aiza auction house
    useNFTMetadata Fetches NFT metadata from a URL
    useNFTContent Fetches text from server to render content URL
  4. Network configuration is wrapped by NFTFetchConfiguration component.

    import { NFTFetchConfiguration } from '@htsoft/reactjs-hooks';

Data is fetched from:

  1. TheGraph for auction information, NFT information and currency information
  2. Direct metadata URIs for NFT metadata
  3. Opensea tracked NFTs