Alchemy NFT API - Demo

Check out the badges hosted by shields.io

Deployed Heroku Link

Description

A GUI demo-ing the capability of Alchemy's NFT API SDK and endpoints

---

Table of Contents

• Installation
• Usage
• Snippets
• Caveat
• Tech Stack
• License
• Author

---

Installation

This project is hosted on a heroku eco-dyno, when it is not being actively used it requires a bit extra start up time. This can be mitigated by upgrading to the next tier on heroku.

Deployed Heroku Link

If you would like to host a version of it yourself, please follow these instructions:

to install both the client and server side dependencies: npm i

start the server: npm start

to concurrently start server and client react code w/ hotreload: npm run develop

if you are indeed hosting your own version, please ensure that there is a .env file with your Alchemy API Key set up correctly in your project!

If you would like to host a heroku version of it privately, make sure you have heroku CLI installed, and at the root of the project run heroku create app_name. After we confirmed that it has been deployed. Navigate to your heroku project page and ensure that all of your env var is set.

---

Usage

To query blockchain data using the Alchemy NFT API / SDK requires the follow params:

You are also able to connect your browser extension wallets that utilizes the EIPS-6963 which helps avoid conflict and improves user experience. See Snippets for code sample

All NFTs owned on multiple Networks /api/nft/wallet/:net/:address/(page) alchemy.nft.getNFTsForOwner()

• wallet address
• pageKey (optional)
• optional config (excludeFilters: [NftFilters.SPAM], pageSize: 30)

In addition to Alchemy's own spam filters (available in higher tiers), I also filtered out any NFTs with malformed nft image links, along with any that include stolen or spam in their description.

All NFTs from a Contract on specific Network /api/nft/collection/:net/:address alchemy.nft.getNftsForContract

• network
• collection address
• pageKey (optional)
• optional config (excludeFilters: [NftFilters.SPAM], pageSize: 30)

Singular NFT from a Contract on specific Network /api/nft/:net/:id/:address alchemy.nft.getNftMetadata()

• network
• collection address
• token Id

---

Snippets

EIPS-6963

Within the project, I had set up a useEffect that runs only when mounted to check for available wallet provider from the browser, and update the Providers state:

then another useEffect hook was used to conditionally display the connect button based on the availability of the providers state.

serachParam Context / Provider

To initiate a search, a serachParam Provider was created to handle primary search parameters like addresses / ids, and optional paramters such as pagination keys or spam toggles. This ensures all level of components would have ability to access and refresh our search parameters to initiate a new search:

Provider Setup

Provider Usage Example - Pagination

Express REST api end points + Alchemy API

A useEffect is created to fetch our express server endpoints to utilize Alchemy's NFT Endpoint everytime our searchParam is updated:

client side call

server side api

Caveat

Additional Spam Filtering

You might notice there might be a discrepency on the toal count # vs the actual returned item. I had filtered the response to ensure there are no malformed or NFTs that were clearly spams on top of Alchemy's own spam filter.

---

License

---

Author

Mari Ma

Icon credit @ Anton Kalashnyk

---

Questions

For any questions, please reach out directly or by creating an issue.