useEtherspotNfts()

A React hook that returns a list of NFTs for any supported blockchain and address.

Introduction

Depending on what type of app you are building, NFTs can sometimes form part of your app, or - can even be the main focus of your app entirely. The useEtherspotNfts hook will allow you to fetch NFTs per blockchain and by account address.

Ready-to-fork CodeSandbox available

There is a CodeSandbox available for this hook. Check it out to see the useEtherspotNfts hook in action action, and fork it should you want to test or change anything.

👉 CodeSandbox directory: Etherspot NFTs

Hook Parameters

/**
 * useEtherspotNfts(chainId?: number)
 */

// useEtherspotNfts takes a chain ID as
// its only parameter. For example, the following
// will fetch your NFTs for your Smart Wallet
// address on Polygon:

const { getAccountNfts } = useEtherspotNfts(137);
//                                           ^
//                                  Note the chain ID

const accountNfts = await getAccountNfts();
// By default, this fetches the NFTs of your own
// Smart Wallet account.

/**
 * getAccountNfts(accountAddress?: string)
 */
 
// The getAccountNfts function takes an account
// address as its only parameter. The function
// will fetch the NFTs for the provided address
// instead of your Smart Wallet address.
const otherAccountNfts = await getAccountNfts(
  '0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b'
);

How to use

import {
  useEtherspotNfts
} from "@etherspot/transaction-kit";

// Later in your component function...

const { getAccountNfts } = useEtherspotNfts();

// When you're ready to fetch NFTs...

const nfts = await getAccountNfts();

// `nfts` will look similar to the following...

// [
//   {
//     "contractName": null,
//     "contractSymbol": null,
//     "contractAddress": "0xa07e45a987f19e25176c877d98388878622623fa",
//     "tokenType": "Erc1155",
//     "nftVersion": null,
//     "nftDescription": null,
//     "balance": 1,
//     "items": [
//       {
//         "tokenId": "123",
//         "name": "null #123",
//         "amount": 2,
//         "image": "Dummy ERC1155",
//         "ipfsGateway": null
//       }
//     ]
//   }
// ]

🎉 Congratulations!

And that is how you fetch NFT data for any of Etherspot's supported blockchains, and for any address.