alchemyplatform / cw3d-nft-explorer Goto Github PK

JavaScript 64.38% CSS 35.62%

cw3d-nft-explorer's Introduction

NFT Explorer CW3D Template

This NFT Explorer dapp is set up to be created using the create-web3-dapp npx package.

Resources

Please refer to CW3D's documentation and the following useful links for an in depth explanation of how to work with projects bootstrapped with CW3D:

Docs - Everything you need to know when using CW3D
GitHub - look at the extensive code example or start contributing
Website - Learn more about CW3D and add components to your project
Templates - Check out the pre-built project templates
Components Library - Add features directly to your project through components
Examples - See the components implemented in a real world dapp
Community - Meet other builders, get support, and give feedback!

Overview

This project contains a fully fledged Next.js based NFT Explorer capable of fetching nfts by:

Collections
External and connected wallet

Across all EVM compatible chains.

Created using Create Web3 Dapp. It is , providing you with a seamless way to get your dApp up and running in no time.

This boilerplate is built using CW3D (Create Web3 Dapp), a powerful tool developed by Alchemy that allows developers to rapidly create and deploy dApps.

What's Included?

This boilerplate has everything you need to start building a dapp:

Next.js
Wagmi Hooks
Ethers.js
Rainbowkit
Alchemy SDK

Supported Chains

The project supports all the major EVM chains:

Ethereum
Polygon
Arbitrum
Optimism

Getting Started

Prerequisites

To get started with this boilerplate, you'll need to have the following software installed on your local machine:

Installation

Run create web3 dapp in your terminal and select the NFT Explorer template:

  npx create-web3-dapp@latest

Navigate to the project directory:
```
cd my-create-web3-dapp
```

Navigate to thedocs to learn more about using cw3d to spin up your web3 applications

Running the Project

Inside the project folder, start the local development server:
```
yarn run dev
```
Open your browser and navigate to http://localhost:3000/ to view the dApp in action.

Project Structure

The boilerplate consists of one root directory:

📦root
 ┣ 📂components
 ┃ ┣ 📂navigation
 ┃ ┃ ┗ 📜navbar.jsx
 ┃ ┗ 📜nftGallery.jsx
 ┣ 📂layout
 ┃ ┗ 📜mainLayout.jsx
 ┣ 📂pages
 ┃ ┣ 📂api
 ┃ ┃ ┣ 📜getNftsForCollection.js
 ┃ ┃ ┗ 📜getNftsForOwner.js
 ┃ ┣ 📜_app.js
 ┃ ┗ 📜index.jsx
 ┣ 📂public
 ┃ ┗ 📜alchemy_logo.svg
 ┣ 📂styles
 ┃ ┣ 📜Home.module.css
 ┃ ┣ 📜Navbar.module.css
 ┃ ┣ 📜NftGallery.module.css
 ┃ ┗ 📜globals.css
 ┣ 📜.env.local
 ┣ 📜.gitignore
 ┣ 📜README.md
 ┣ 📜package-lock.json
 ┗ 📜package.json

Start editing the pages/index.jsx file in the root directory to customize the project according to your own needs!

cw3d-nft-explorer's People

Contributors

Stargazers

Watchers

cw3d-nft-explorer's Issues

[ENHANCEMENT] - Format the token balance

token balance can show as scientific notation (see photos):

Suggest to change output to be based on user's default locale (see photos for mine {US based user}):

There would need to be some sort of maximum though, as it can cause issues (see photo):

[BUG] - when mapping over NFTs, the key may not be unique causing errors in console

This happens due to many NFTS just using 0-totalCollection# for the tokenID. Need to have a unique key value for react to work properly.

[ENHANCEMENT] - Make the nft contract address an actual link in the NFT Card component

Within the NFT Gallery > NFT Card that gets created for each nft in the wallet that is searched.

The etherscan contract address and etherscan logo should be wrapped in an to create a link to it.

The css for this already has the cursor set to pointer, but it is not a link to the etherscan contract address (like it seemingly should be, as there's an etherscan logo right next to it as well.)

[BUG] - Load More button doesn't actually load more, it loads page 2

When a wallet contains too many NFTs to display on the first page of results in the NFT Gallery, it has a Load More button at the bottom of the gallery.

But when you click this button, it displays the NEXT 100 NFTs, not 100 MORE NFTs.

And there's no way to go back to the first 100.

So, solution seems to be 2 options:

actually load the next 100 NFTS below the first 100 (which Load More seems to mean/denote)
OR
load the next 100 NFTS (like it does now) but have pagination - a way to click back to page 1 and on page 1 a way to click to page 2 of these displayed NFTs.

Package.json File Missing also getting error with npx create-web3-dapp@latest nft-explorer

I am trying to set this app up but there's no package.json file for this. How can there be no package.json file for a react app? are you using something else or is the file missing?

I also used this below command

npx create-web3-dapp@latest nft-explorer

But it ends up giving error I ve been using NPM and node for years but havent seen this error

Error: spawn npm ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:478:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (node:internal/child_process:289:12)
    at onErrorNT (node:internal/child_process:478:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn npm',
  path: 'npm',
  spawnargs: [ 'install', '--color', '--no-audit', '--progress', '--verbose' ]

[ENHANCEMENT] - NFTs displayed in NFT Gallery missing a responsive breakpoint

The NFTs that are displayed in the NFT Gallery are responsive for mobile/screen sizes, but it jumps from displaying 2 across to 4 across. It cuts off the NFTs that are displayed when 4 across. There should be an option where 3 across are shown as well. Basically, it should only ever show the full NFT card, if the full NFT card doesn't fit - it shouldn't be shown.

[ENHANCEMENT] - Make all inputs/buttons on top of the displayed NFTs mobile responsive as well

The NFTs displayed in the NFT Gallery are mobile responsive per screen size, but not anything above them. The inputs, buttons, sliders, or selections are not responsive at all.

[ENHANCEMENT] - NFT card title and description needs to be cut when too long

If the title of the NFT is too long, it just overflows off the card and into next.

If the symbol is too long, it messes with the whole container and everything is misaligned and can go off the card entirely.

Within the nftGallery > NFT Card component

Update Api for nextjs

Hello in nextjs there is no pages folder anymore and the API Routes differ from the existing ones. Please update the source code to work with the new app directory system of nextjs. app -> [Foder named like api file] -> route.js