/nextjs-solana-nft-viewer

NFT viewer on Solana network

Primary LanguageTypeScriptMIT LicenseMIT

NFT Viewer

Netlify Status

A simple Next application for viewing NFTs of an arbitrary public key (address) from Solana

Tech. stack: NextJS, Typescript, Recoil, ChakraUI, recoil-persist, solana/web3.js, metaplex/js, Jest

Screenshots

Desktop

Screen Shot 2022-10-07 at 11 26 33 PM

Screen Shot 2022-10-07 at 11 26 48 PM

Mobile

Screen Shot 2022-10-07 at 11 30 26 PM    Screen Shot 2022-10-07 at 11 30 53 PM

Features

  • App displays all NFTS held by inputted public key/wallet
  • NFT data is retrieved from Solana directly using Solana API (solana-web3.js) and Metaplex SDK (metaplex/js)
  • Mobile-friendly/Responsive
  • Dark mode support
  • NFT listing can be customized
    • By last transaction time
    • By creation time
    • Initially ordered by the last transaction time
  • User can bookmark NFTs
    • Bookmarked NFTs come first in the listing
    • Each bookmark can be removed individually or in group
  • Persistence: The result of the order customization or bookmarks are persisted even after reopening the window (LocalStorage)
  • When a user click a NFT card, it links them to solscan.io/token/${nft_mint_public_key}

TODOs

  • NFT ordering using drag and drop
  • Undo button for user actions
  • Test coverage using Jest

Setup Instructions

  1. Clone or download the project.
  2. cd in the project directory.
  3. Copy .env.example to .env as that file is used to load up all your environment variables.
  4. Run yarn install install all dependencies.
  5. Run yarn dev to run the project

Commands

  • yarn dev: To start a local development server.

  • yarn test: To run the entire unit test suite using jest.

  • yarn test:ci: To run tests on CI.

  • yarn lint: To run the ESLint based linter to find out the issues in the project.

  • yarn format: To autoformat all the issues.

  • yarn export: Run this after running yarn analyze to export a build copy.

  • yarn production: To export a production build. Use yarn start to serve that.

  • yarn upgrade --latest: To upgrade all packages to their latest versions (could include breaking changes).

Code Structure

All source code is located in the src/ directory:

  1. All Next.js entrypoints are housed in the src/pages directory as a default.

    • _app.tsx which bootstraps ChakraUI and Recoil within this project and sets the styling for the page.
    • index.tsx is the main search page
    • viewer page is the page that displays the nft list with dynamic route for the publicKey

  2. src/components are all stateless reusable components.

    • MainHeading component with a JEST test as a sample
    • NftList, NftItem components are used to display the nft list
    • ModeButton is the button that toggles the dark/light mode
    • etc

  3. src/styles folder is there just to house any styling.

    • It currently contains a default ChakraUI theme

  4. All env variables are available in .env files (.env file isn't committed). Whenever you update .env, please update .env.example and .env.test and next.config.js to proxy all environment variables properly.

    • You can access these variables in the app source code anywhere using process.env.<VAR_NAME>.

If you feel like changing the directory structure, please change the appropriate settings in the following files:

  • .swcrc
  • jest.config.js
  • tsconfig.json
  • The lint and the format scripts in package.json

Notes

  1. This project was bootstrapped with chakraui-react-next.js-typescript-eslint-jest-starter template
  2. This project removes the x-powered-by response header via next.config.js by marking the poweredByHeader property as false.
  3. For drag and drop functionality, I had an idea to wrap my NftItem components using React-Dnd library or using my own draggable implementation in mukanov8/draggable-task repo and useRefs