Creating a Customizable NFT Component in React with Basement's A…

Creating a Customizable NFT Component in React with Basement's APIs and UI Kit

December 5th, 2022

Today we are releasing our free UI kit for NFT display components. These components allow you to easily display and showcase NFT collections in a visually appealing way. This UI kit contains many variations, allowing builders to easily customize it to their needs.

Get the UI Kit here →

Basement's customizable component in action!

In this post, we'll show you how to use the Basement SDK to build a customizable NFT display component in React. To get started, use our starter template on CodeSandbox, this template does not contain any real world data yet. In this post we’ll help you fetch up-to-date data about the token’s name, image and owner.

Let’s import the BasementSDK class from the @basementdev/sdk package and create a new instance. This instance can be used to fetch data from Basement’s API, completely for up to free up to 30 requests per minute.

Need more bandwidth? You can get an API key here →

import { BasementSDK, NonFungibleToken } from "@basementdev/sdk";

const sdk = new BasementSDK();

NFTs can be referenced by their smart contract address, where the token’s code is hosted, and its specific token ID, referencing a piece of metadata defined by the creators.

To get the information from an NFT, we use the token function, passing in the contract and token ID for this NFT. The include option allows you to specify which data to return. In this case, we want to get the token's owner, their ENS reverse record, and the token's media.

const getToken = (contract: string, id: string) => {
  return sdk.token({
    contract,
    tokenId: id,
    include: {
      owner: {
        reverseProfile: true
      },
      media: true
    }
  }) as any;
};

Now that we have our getToken function set up, we can use it to fetch data about the NFT in our component. We will use the useEffect hook to call getToken when the contract and id props change, updating our token state variable with the latest data about this NFT.

...

export const TokenComponent: React.FC<TokenComponentProps> = (props) => {
  const { contract, id } = props;
  const [token, setToken] = useState<NonFungibleToken>();

	useEffect(() => {
    getToken(contract, id).then((token: NonFungibleToken) => {
      setToken(token);
    });
  }, [contract, id, setToken]);

If the token is found, the token state now contains information about the image, owner and name of this token. All that’s left is adding these values to the pre-existing layout in the starter template, and you should have a beautiful component, ready to go!

return (
  <Frame>
    <Image src={token.image?.largeUrl || ""} />
    <TitleContainer>
      <Title>{token.name || "Unnamed Token"}</Title>
      <Title style={{ fontWeight: "normal" }}>
        {token.owner?.reverseProfile?.name || token.owner?.address}
      </Title>
    </TitleContainer>
  </Frame>
);

The finished product – an NFT component in React.

💡 We’re assuming a name and image exist for this NFT component. However, NFT metadata standards are loosely defined, so the provided data may be incomplete or incorrect. We will do our best to provide a complete set of data, but some may be missing.

If it looks like metadata is missing, or outdated, you can request an update using the nonFungibleTokenRefresh function.

You can now use this component in your react app:

    <TokenComponent
      contract={"0x5180db8f5c931aae63c74266b211f580155ecac8"}
      id={"243"}
    />

Further reading