Multi-Chain NFT Marketplace

🚀👩‍🚀This repo contains all the files to follow along and implement a MultiChain NFT MarketPlace! Be sure to watch my Youtube tutorials so you can learn and follow along!

** THE FILES ATTACHED TO THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY **

** NOT FINANCIAL ADVISE **

** USE IT AT YOUR OWN RISK** **I'M NOT RESPONSIBLE FOR ANY USE, ISSUES ETC.. **

Please follow instructions for the video tutorial you are watching.

Part-1 Hardhat and EthersJS

Click for video:

Steps:

1-Create an new NextJS app:

npx create-next-app n2dmarket

2- Install hardhat in the n2dmarket project folder.

npm i hardhat

3- Create a hardhat environment.

npx hardhat

4- Refer to the Hardhat and EthersJS knowledge base and practice some info gathering using the hardhat console:

npx hardhat console

Hardhat Knowledge Base : https://hardhat.org/tutorial

EthersJS Knowledge Base: https://docs.ethers.io/v5/

Part-2 NFT Market Resell Smart Contract

Click for video:

1-Retrieve the NFT Collection Smart Contract Address.

2-Deploy the NFT Market Resell Smart Contract located in Part2 Folder.

Add the NFT Collection Address when deploying the smart contract.

Part-3 Deploy a NextJS WebFront End

Click for video:

Steps:

1- Navigate to your n2dmarket project folder and install the remaining dependencies:

npm i --save-dev "@types/react"

npm i axios @nextui-org/react sf-font

npm i simple-crypto-js web3modal

npm i @metamask/detect-provider

npm i ipfs-http-client

npm i web3

npm i --save-dev @types/canvas-confetti

2- Proceed to replace the files in your n2dmarket folder with each respective

file attached in the Part-3 Folder, Add the "engine" folder to the project root folder.

3- Deploy your test NFT Collection and NFT Market Resell Smart Contracts (refer to Part2 Vid)

and go to /engine/configuration and update the values accordingly:

export var hhresell = "YOUR NFT RESELL MARKET SMART CONTRACT";

export var hhnftcol = "YOUR NFT COLLECTION SMART CONTRACT";

var hhrpc = "YOUR MAINNET OR TESTNET RPC ADDRESS";

List of RPC Address to use depending on which testnet the contracts have been deployed:

Polygon Mumbai: https://matic-mumbai.chainstacklabs.com

BSC Testnet: https://data-seed-prebsc-1-s3.binance.org:8545

ETH Goerli: https://rpc.ankr.com/eth_goerli

CTRL + S to save configs

Run the web server and validate:

npm run dev

Watch part 3 vid for more details.

Part-4 Relist and Buy NFTs!

Click for video:

Steps:

1- New changes have been performed on the Resell SmartContract. Redeploy it on your favorite testnet and save the address.

Contract link:

https://github.com/net2devcrypto/N2D-NFT-Marketplace/tree/main/Part2-NFT-Market-Resell-Contract

2- Install NFT Carousel Dependency:

npm i --save-dev react-multi-carousel

3- Proceed to replace the files in your market project folder with each respective

file attached in the Part-4 Folder, Replace "engine" and "public" folder with all files as well.

4- Obtain your Resell Smart Contract Owner Wallet Private Key. (Wallet used to deploy contract)

Go to /engine/configuration and update the values accordingly:

Replace with your Private key in "hhraw":

const hhraw = "0xREPLACEWITHPRIVATEKEY";

Add your smart contract addresses here:

export var hhresell = "YOUR NFT RESELL MARKET SMART CONTRACT";

export var hhnftcol = "YOUR NFT COLLECTION SMART CONTRACT";

var hhrpc = "REPLACE WITH THE TESTNET RPC";

CTRL + S to save configs

Run the web server and validate:

npm run dev

Watch part 4 vid for more details.

Part-5 Create The NFT Marketplace Contract and App to upload Art and mint NFTs.

Click for video:

1-Deploy the Marketplace Contract to sell created NFTs located in Part5 Folder repo. Copy the contract address.

https://github.com/net2devcrypto/N2D-NFT-Marketplace/blob/main/Part5-Create-and-Sell-NFT-App/N2D-Market-SellCreatedNFT-SmartContract.sol

2-Deploy the NFT Smart Contract to create NFTs located in Part5 Folder, add the NFT Market smart contract to sell created NFTs when deploying and copy the contract address once deployed.

https://github.com/net2devcrypto/N2D-NFT-Marketplace/blob/main/Part5-Create-and-Sell-NFT-App/N2D-Market-CreateNFT-SmartContract.sol

3- Go to /engine/configuration and add the additional contracts accordingly:

export var hhnft = "YOUR CREATE NFT SMART CONTRACT";

export var hhmarket = "YOUR SELL CREATED NFT MARKETPLACE SMART CONTRACT";

4- From Part5 Folder, Proceed to add the NFT and Market ABI files to the engine folder. Proceed to replace the files in your project with the ones provided in the Part5 folder. Test and practice. Time to learn more!

Watch Part 5 video for more info.

Part-6 Final Video - Enable Multichain Integration!

Click for video:

1- Stop NextJS Server and Replace all files in your project with the files attached on this repo to their respective folders.

2-Deploy all required smart contracts for all networks and update the contract address in the configuration.js file located in the "engine" folder.

Deploy the contracts on all required testnets. The "nftcol" is an existing nft collection smartcontract.

resell smartcontract : https://github.com/net2devcrypto/N2D-NFT-Marketplace/blob/main/Part2-NFT-Market-Resell-Contract/N2D-Market-NFT-Resell-SmartContract.sol

nft smartcontract: https://github.com/net2devcrypto/N2D-NFT-Marketplace/blob/main/Part5-Create-and-Sell-NFT-App/N2D-Market-CreateNFT-SmartContract.sol

market smartcontract: https://github.com/net2devcrypto/N2D-NFT-Marketplace/blob/main/Part5-Create-and-Sell-NFT-App/N2D-Market-SellCreatedNFT-SmartContract.sol

Example for Goerli Testnet

export var goeresell = "YOUR CONTRACT ADDRESS";
export var goenftcol = "YOUR CONTRACT ADDRESS";
export var goenft = "YOUR CONTRACT ADDRESS";
export var goemarket = "YOUR CONTRACT ADDRESS";

Save your changes!

3- Install Metamask detect provider dependency in your project folder.

npm i @metamask/detect-provider

4- Start NextJS server and follow the video for additional testing and practice steps.