Collections — Collection metadata

A collection (or contract-level) metadata is used by marketplaces and dApp when listing or showing your collection on their interface. Main information in a collection metadata are Name of the collection, Logo or primary Image of the collection, description, website, and any additional fields.

Some marketplaces like OpenSea, expect additional information such as royalty fees and receiver, which are not standard across the whole space.

Flair takes care of these details, and helps you create a compatible collection metadata with a simple interface.

Dashboard

Easiest way to configure your collection metadata is via Dashboard.

Recommended

Using dashboard is the preferred approach for management operations, as it's a one-time operation and it is not a good investment to work with React hooks or REST APIs if you only plan to launch one or two collections.

React Hooks

Alternatively you can manage collection metadata using hooks exported in flair-sdk.

useCollectionMetadata

Get current collection metadata by first fetching the URI from contract, then fetching the metadata JSON from IPFS.

import { useCollectionMetadata, normalizeIpfsUrl } from "flair-sdk";

const App = () => {
  const { data, error, isLoading } = useCollectionMetadata({
    contractAddress: "0x123412341234123412341234123412341234",
  });

  return (
    <div>
      Name: {data.name}
      Description: {data.description}
      Image: {data.image}
      -----
      <span>
        Image is most likely uploaded to IPFS, so you can convert to a "http"
        URL like:
        {normalizeIpfsUrl(data.image)}
      </span>
    </div>
  );
};

useCollectionMetadataUri

Get current collection metadata URI.

import { useCollectionMetadata, normalizeIpfsUrl } from "flair-sdk";

const App = () => {
  const { data, error, isLoading } = useCollectionMetadataUri({
    contractAddress: "0x123412341234123412341234123412341234",
  });

  return <div>Contract Metadata URI: {data}</div>;
};