Etherspot
These are our V1 docs and will be deprecated soon. Please visit https://etherspot.fyi/introduction to use our new version of the SDK.
  • Welcome to Etherspot
    • Chains, Bridges & DEXes
    • Social Logins
    • Web3 Logins
  • Transaction Kit
    • Introduction
    • Code Sandboxes
    • Quick Start
    • React Hooks
      • useEtherspotAssets()
      • useEtherspotNfts()
      • useEtherspotHistory()
        • getAccountTransactions()
        • getAccountTransaction()
      • useEtherspotTransactions()
        • estimate()
        • send()
      • useEtherspotAddresses()
      • useEtherspotBalances()
    • React Components
      • <EtherspotTransactionKit />
      • <EtherspotBatches />
      • <EtherspotBatch />
      • <EtherspotTransaction />
      • <EtherspotContractTransaction />
      • <EtherspotApprovalTransaction />
      • <EtherspotTokenTransferTransaction />
  • BUIDLER React Component
    • Introduction
    • Installation
    • Integrate React Component
    • Shared Sessions
    • Wallet Connectors
    • Blocks
      • Send
      • Batching Transaction
      • Multicall Transaction
      • Swaps
      • Bridges
      • Custom Contract Interactions
      • Styling
    • Build Your Own Block
      • Cross-chain KLIMA DAO Staking
  • Etherspot SDK Guides
    • Requirements
    • Install Etherspot SDK
    • Bootstrap Etherspot SDK
      • Instantiate Etherspot SDK
    • Events
    • Etherspot Block Explorer
    • Etherspot Playground
    • Social Login using Etherspot SDK
    • Sponsored Transactions
  • Use Cases & Guides
    • Crosschain Streaming
    • Token Swaps
    • Transactions
      • Historical
      • Sending
    • Multi-chain Bridges
      • ERC20 Bridge
      • DAI - xDai Bridge
      • xDai - DAI Bridge
      • Native Token Bridge
    • Custom Contract Interaction
    • Multi-chain Assets
    • Multi-chain Gas Prices
    • Peer-to-Peer Payments
  • Reference
    • Etherspot SDK API Docs
    • Etherspot SDK on Github
    • Etherspot on NPM
    • Etherspot Playground
    • Etherspot Block Explorer
    • Etherspot Architecture
    • EIP-1271
    • Etherspot/Pillar Audit
  • Brand Assets
    • Etherspot Brand Assets
  • Security
    • Security
  • Get in touch
    • ⚒️Discord
    • Twitter
    • Telegram
Powered by GitBook
On this page
  • Introduction
  • Ready-to-fork CodeSandbox available
  • Hook Parameters
  • How to use
  • Congratulations!

Was this helpful?

  1. Transaction Kit
  2. React Hooks

useEtherspotNfts()

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

PrevioususeEtherspotAssets()NextuseEtherspotHistory()

Last updated 1 year ago

Was this helpful?

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.

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
//       }
//     ]
//   }
// ]

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

Congratulations!

🎉
👉
CodeSandbox directory: Etherspot NFTs