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.
/**
* 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
// }
// ]
// }
// ]
And that is how you fetch NFT data for any of Etherspot's supported blockchains, and for any address.
