This Project is a fork of Ethereum Boilerplate and demonstrates how you can build your own NFT Rarity Ranker.

Last update: May 31, 2022

Rarity-Ranking-NFT

This Project is a fork of Ethereum Boilerplate and demonstrates how you can build your own NFT Rarity Ranker.

Preview

⭐️ Star us

If this boilerplate helps you build Ethereum dapps faster - please star this project, every star makes us very happy!

🚀 Quick Start

📄 Clone or fork Rarity-Ranking-NFT:

git clone https://github.com/IAmJaysWay/Rarity-Ranking-NFT.git

🔎 Navigate to the generator folder and initialize the rarity generator and install moralis

cd Rarity-Ranking-NFT
cd generator
npm init
npm install moralis

🖼️ Provide your appId and serverUrl and desired collectionAddress and collectionName in the main.js file

const serverUrl = ""; //Moralis Server Url here
const appId = ""; //Moralis Server App ID here

const collectionAddress = ""; //Collection Address Here
const collectionName = ""; //CollectioonName Here

🏃 Run the Rarity Generator

node main.js

💿 Return to the Origin Repo and Install all dependencies:

cd -
yarn install 

Rename .env.example to .env in the main folder and provide your appId and serverUrl from Moralis (How to start Moralis Server) Example:

REACT_APP_MORALIS_APPLICATION_ID = xxxxxxxxxxxx
REACT_APP_MORALIS_SERVER_URL = https://xxxxxx.grandmoralis.com:2053/server

🎁 In /src/components/QuickStart.js Add the NFT collection as an Option(s) to the Select Input (with value corresponding to the collectionName used when running the rarity generator)

Collcetion Name ">
<Option value="YOUr COLLECTION NAME"> Collcetion Name </Option> 

🚴‍♂️ Run your App:

yarn start

GitHub

https://github.com/IAmJaysWay/Rarity-Ranking-NFT
Comments
  • 1. Error: Cannot find module 'rxjs'

    keep getting this error, everything is installed properly and looked around for solutions, I've tried npm install --save rxjs-compat but that didn't work.

    Reviewed by mattsegura at 2022-02-14 05:53
  • 2. Getting TypeError: Cannot read property 'attributes' of null error

    I keep getting a TypeError: Cannot read property 'attributes' of null error on line: let metadata = allNFTs.map((e) => JSON.parse(e.metadata).attributes);

    If I limit the i < 1500 on line 29 I do not get the error (but obviously do not get the full collection).

    any thoughts? Thanks

    Reviewed by Prker at 2022-01-04 21:43
  • 3. can we open this back up

    not sure if this thread got hidden since it's closed. curious to hear your thoughts. have a nice new year.

    https://github.com/IAmJaysWay/Rarity-Ranking-NFT/issues/1

    Reviewed by ericlam1114 at 2021-12-31 22:08
  • 4. Update script to work with the updated Moralis lib

    Moralis has removed its feature to be able to use "offset" to fetch specific data. That is changed to "cursor".

    Read more; https://docs.moralis.io/misc/rate-limit#example-of-how-to-use-cursor-nodejs

    I managed to update your script to import using cursor.

    Moralis is also limiting requests, you can easily update your cloud database settings via; https://docs.moralis.io/moralis-dapp/web3-api/rate-limit

    Reviewed by thomasansems at 2022-06-22 04:35
  • 5. Load collection when page loads

    Has anyone tried to load the collection initially when the page loads, instead of loading it using a drop down? I want to be able to call the collectionChanged(collection) function when the application starts. How can one do that?

    image

    Reviewed by tdev00 at 2022-04-11 01:50
  • 6. cannot read properties of undefined reading map:

    file:///C:/Users/josh/Downloads/sqddd/Rarity-Ranking-NFT-main/generator/main.js:56 let nftTraits = metadata[j].map((e) => e.trait_type); ^

    TypeError: Cannot read properties of undefined (reading 'map') at generateRarity (file:///C:/Users/josh/Downloads/sqddd/Rarity-Ranking-NFT-main/generator/main.js:56:29) at processTicksAndRejections (node:internal/process/task_queues:96:5)

    Reviewed by boshjerns at 2022-03-20 16:26
  • 7. Define a default collection shown when opening the page

    There should be an option / easy way to not have an empty page in the browser when opening it. Instead it would be good to show a default / pre-defined collection already.

    How can this be achieved ?

    Reviewed by rmwa at 2022-03-20 13:18
  • 8. Cannot read properties of null (reading 'attributes')

    TypeError: Cannot read properties of null (reading 'attributes') at /Users/timemachine/Downloads/Rarity-Ranking-NFT-main/generator/main.js:38:59 at Array.map (<anonymous>) at generateRarity (/Users/timemachine/Downloads/Rarity-Ranking-NFT-main/generator/main.js:38:26)

    I keep getting this error when trying to run the rarity generator.
    
    I tried the repo and watching the tutorial video, ended up with the same problem each time.
    
    Any ideas?
    
    Reviewed by coffeeclubnfts at 2022-03-18 18:12
How to mint your own NFT token with react
How to mint your own NFT token with react

Mint your own basic off chain NFT Description This project teaches you how to mint your own NFT token. Here are some important packages that we will b

May 17, 2022
Write your own version of React. Why? Because you CAN!
Write your own version of React. Why? Because you CAN!

Write your own version of React. Why? Because you CAN!

May 16, 2022
Ethereum's missing NFT swap library for web3 developers. Written in TypeScript. Powered by 0x.
Ethereum's missing NFT swap library for web3 developers. Written in TypeScript. Powered by 0x.

NFT Swap SDK _The missing NFT swap SDK for Ethereum and EVM compatible chains, powered by the 0x protocol, written in TypeScript for web3 developers.

Jun 16, 2022
Ethereum nft marketplace template using react

ethereum-marketplace-template ⭐️ Star us If this boilerplate helps you build Ethereum dapps faster - please star this project, every star makes us ver

Jun 15, 2022
React-NFT-App - NFT-Web-Application built using Third web , ReactJs and use Crypto Punks with API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Apr 25, 2022
a fork version of vitesse-webext, but with react

@aiou/webext-template a fork version of vitesse-webext, but with react A Vite powered WebExtension (Chrome, FireFox, etc.) starter template. Edit on S

May 9, 2022
A guide to building your own React stack, explaining options and tradeoffs along the way
A guide to building your own React stack, explaining options and tradeoffs along the way

Custom React Stack React has a very rich ecosystem. For anything you want to do, there is probably a library or a framework available for it. That's g

Jun 6, 2022
my-watchlist is a web application for creating your own watchlist.
my-watchlist is a web application for creating your own watchlist.

my-watchlist is a web application for creating your own watchlist. The website tracks your created watchlist, so that you can comeback anytime and pick from where you left.

Jan 6, 2022
Crypt Eye, Your very own personal crypto currancy journal.
Crypt Eye, Your very own personal crypto currancy journal.

Crypt Eye Description Crypt Eye, Your very own personal crypto currancy journal. Patch 1.0 Features: TradingView Powered Chart Widget Stay on top of y

Jun 15, 2022
Pimp my README is an open source profile builder that you can use to add some cool components to your README profile - Made with <3 by webapp.io :)
Pimp my README is an open source profile builder that you can use to add some cool components to your README profile - Made with <3 by webapp.io :)

Pimp my README This repository is the open-source project for Pimp my README. How this came to be So basically, GitHub added a feature where you can a

May 27, 2022
A plug-and-play hook that will send data about Ethereum contract interactions straight to FullStory
A plug-and-play hook that will send data about Ethereum contract interactions straight to FullStory

use-fullstory-web3 Automatically record web3 events into FullStory useFullStoryWeb3 is a plug-and-play hook that will send data about Ethereum contrac

Nov 24, 2021
Example implementation of how to implement Sign In with Ethereum
Example implementation of how to implement Sign In with Ethereum

Sign in with Ethereum authentication flow A basic example of how to create an authentication flow using Next.js, public key encryption, and an Ethereu

Jun 6, 2022
Blockchain-Cryptogram - Decentralized Social Media web app using Ethereum Blockchain
Blockchain-Cryptogram - Decentralized Social Media web app using Ethereum Blockchain

Decentralized Social Media web app using Ethereum Blockchain. Team Details Team

May 29, 2022
A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css

custom-react-cursor A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css Demo live Installi

May 17, 2022
This is used for minting NFTs and getting metadata , token owner, wallet address assigned to an NFT, just check it out and enjoy

nft-minter A Heroku web server to easily mint non-fungible tokens via an API Example Configuration: Blockchain: Ethereum Testnet: Rinkeby Contract: ER

Apr 17, 2022
NFT Marketplace prototype using Typescript, WalletConnect, Metamask, Web3, Solidity, React and Storybook

ERC721 NFT Marketplace Prototype of a NFT Marketplace based on openZeppelin abstract upgradeable ERC721 contracts and Minting/uploading images to IPFS

Jun 26, 2022
This is a proof of concept of an NFT vending machine built using Solana Pay, Metaplex, Phantom Mobile, and Next.js

Solana NFT Vending Machine This is a proof of concept of an NFT vending machine built using Solana Pay, Metaplex, Phantom Mobile, and Next.js. This wa

May 17, 2022