├── .gitignore
├── README.md
├── index.html
├── package.json
├── public
└── favicon.png
├── src
├── App.jsx
├── index.css
└── main.jsx
└── vite.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Simple NFT Indexer
2 |
3 | This is an skeleton app that uses the Alchemy SDK rigged to Alchemy's Enhanced APIs in order to display all of an address's ERC-721 tokens, including a call to any `image` attached to their metadata.
4 |
5 | ## Set Up
6 |
7 | 1. Install dependencies by running `npm install`
8 | 2. Start application by running `npm run dev`
9 |
10 | ## Challenge
11 |
12 | Fork this repo and build out more features! This is minimalistic on purpose.
13 |
14 | We purposefully built this out to be a skeleton version of what can be the next big thing so that you can practice some software development! Here are a few challenge suggestions:
15 |
16 | 1. Add Wallet integration so that any user that connects their wallet can check see their NFTs in a flash!
17 | 2. There is no indication of a request in progress... that's bad UX! Do you think you can add some sort of indication of loading?
18 | 3. Add some styling! 🎨
19 | 4. The NFT images can sometimes appear and sometimes not... can you think of ways to fix that?
20 | 5. There is no error-checking for wrongly formed requests, or really any error checking of any kind... can you add some in?
21 | 6. The images and grid display could look better... anything you can do about that?
22 | 7. There are ways to make this app faster... can you implement some of them? How can the query be made _even_ quicker?
23 | 8. Can you add ENS support for inputs?
24 | 9. The code has no commenting... bruh! Clear documentation is a clear path for other developers to understand and build on your code... think you can add clear commenting?
25 | 10. Completely open-ended!! Use this as the base for your next hackathon project, dream company or personal expedition :)
26 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nft-indexer",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@chakra-ui/react": "^2.4.6",
13 | "alchemy-sdk": "^2.2.5",
14 | "axios": "^1.2.2",
15 | "ethers": "^5.7.2",
16 | "react": "^18.2.0",
17 | "react-dom": "^18.2.0"
18 | },
19 | "devDependencies": {
20 | "@types/react": "^18.0.26",
21 | "@types/react-dom": "^18.0.9",
22 | "@vitejs/plugin-react": "^3.0.0",
23 | "vite": "^4.0.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alchemyplatform/nft-indexer/4d9600800878efeaa27954ae1c397ad299a86629/public/favicon.png
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | Box,
3 | Button,
4 | Center,
5 | Flex,
6 | Heading,
7 | Image,
8 | Input,
9 | SimpleGrid,
10 | Text,
11 | } from '@chakra-ui/react';
12 | import { Alchemy, Network } from 'alchemy-sdk';
13 | import { useState } from 'react';
14 |
15 | function App() {
16 | const [userAddress, setUserAddress] = useState('');
17 | const [results, setResults] = useState([]);
18 | const [hasQueried, setHasQueried] = useState(false);
19 | const [tokenDataObjects, setTokenDataObjects] = useState([]);
20 |
21 | async function getNFTsForOwner() {
22 | const config = {
23 | apiKey: '<-- COPY-PASTE YOUR ALCHEMY API KEY HERE -->',
24 | network: Network.ETH_MAINNET,
25 | };
26 |
27 | const alchemy = new Alchemy(config);
28 | const data = await alchemy.nft.getNftsForOwner(userAddress);
29 | setResults(data);
30 |
31 | const tokenDataPromises = [];
32 |
33 | for (let i = 0; i < data.ownedNfts.length; i++) {
34 | const tokenData = alchemy.nft.getNftMetadata(
35 | data.ownedNfts[i].contract.address,
36 | data.ownedNfts[i].tokenId
37 | );
38 | tokenDataPromises.push(tokenData);
39 | }
40 |
41 | setTokenDataObjects(await Promise.all(tokenDataPromises));
42 | setHasQueried(true);
43 | }
44 | return (
45 |
46 |
47 |
52 |
53 | NFT Indexer 🖼
54 |
55 |
56 | Plug in an address and this website will return all of its NFTs!
57 |
58 |
59 |