🚀👩‍🚀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!

Last update: Jan 5, 2023

Overview

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.

Comments

I think i found a bug

There is interference when buying Nft, list sale. For example, if the itemid in the vaultiems is 4. And if I upload NFT with Tokenid 4, it seems that there is an error "it is already uploaded NFT.

i already list number 2 token it works well and i tried to upload number 1 token it make error

opened by sueun-dev 5
nftcollection.sol code

Hi, How do we create the nftcollection.sol file, I have been following your tutorial and just now completed compiling my marketresale.sol file, I see we need the address of the nftcollection contract to progress. Please help.

opened by MuskaanMunu 2
Error: invalid private key (argument="privateKey", value="[[ REDACTED ]]"

I keep getting this error whenever I click on the "My NFT Portal" button. I have been following the tutorial and writing the codes as is.

"Unhandled Runtime Error

Error: invalid private key (argument="privateKey", value="[[ REDACTED ]]", code=INVALID_ARGUMENT, version=signing-key/5.7.0) Source

pages/portal.js (38:23) @ _callee$

36 | const provider = new ethers.providers.JsonRpcProvider(mainnet) 37 | const key = simpleCrypto.decrypt(cipherHH);

38 | const wallet = new ethers.Wallet(key, provider); | ^ 39 | const contract = new ethers.Contract(hhnftcol, NFTCollection, wallet); 40 | const itemArray = []; 41 | contract.totalSupply().then(result => {

Call Stack _getWalletNFTs pages/portal.js (35:34) getWalletNFTs pages/portal.js (35:34) Sell/< pages/portal.js (21:6)"

Please help.

opened by MuskaanMunu 0
Error from the getAllNFTs from solidity
Hi first thanks for all your videos. I am working with solidity Part 5 files When create few NFT and I call getAllNFTs() function from the front It works few times then, without changes it stop working properly I get error message as return

I am on Bianance Smart Chain test net btw this is the return from the call

you can see the result here: https://nftl-trades.com/

data = {code: 3 data: "0x4e487b710000000000000000000000000000000000000000000000000000000000000032" message: "execution reverted"}

All other function works properly tho
opened by llPekoll 0
i have 4 errors i need help

hello im at ep 3 of the NFT Market place and while trying to run it keeps givig me theres errors PLEASE HELP!!!

Error 1: Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Call Stack throwOnHydrationMismatch node_modules\react-dom\cjs\react-dom.development.js (12507:0) tryToClaimNextHydratableInstance node_modules\react-dom\cjs\react-dom.development.js (12520:0) updateHostComponent node_modules\react-dom\cjs\react-dom.development.js (19902:0) beginWork node_modules\react-dom\cjs\react-dom.development.js (21618:0) HTMLUnknownElement.callCallback node_modules\react-dom\cjs\react-dom.development.js (4164:0) Object.invokeGuardedCallbackDev node_modules\react-dom\cjs\react-dom.development.js (4213:0) invokeGuardedCallback node_modules\react-dom\cjs\react-dom.development.js (4277:0) beginWork$1 node_modules\react-dom\cjs\react-dom.development.js (27451:0) performUnitOfWork node_modules\react-dom\cjs\react-dom.development.js (26557:0) workLoopSync node_modules\react-dom\cjs\react-dom.development.js (26466:0) renderRootSync node_modules\react-dom\cjs\react-dom.development.js (26434:0) performConcurrentWorkOnRoot node_modules\react-dom\cjs\react-dom.development.js (25738:0) workLoop node_modules\scheduler\cjs\scheduler.development.js (266:0) flushWork node_modules\scheduler\cjs\scheduler.development.js (239:0) MessagePort.performWorkUntilDeadline node_modules\scheduler\cjs\scheduler.development.js (533:0)

Error 2:

Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Call Stack throwOnHydrationMismatch node_modules\react-dom\cjs\react-dom.development.js (12507:0) tryToClaimNextHydratableInstance node_modules\react-dom\cjs\react-dom.development.js (12520:0) updateHostComponent node_modules\react-dom\cjs\react-dom.development.js (19902:0) beginWork node_modules\react-dom\cjs\react-dom.development.js (21618:0) beginWork$1 node_modules\react-dom\cjs\react-dom.development.js (27426:0) performUnitOfWork node_modules\react-dom\cjs\react-dom.development.js (26557:0) workLoopSync node_modules\react-dom\cjs\react-dom.development.js (26466:0) renderRootSync node_modules\react-dom\cjs\react-dom.development.js (26434:0) performConcurrentWorkOnRoot node_modules\react-dom\cjs\react-dom.development.js (25738:0) workLoop node_modules\scheduler\cjs\scheduler.development.js (266:0) flushWork node_modules\scheduler\cjs\scheduler.development.js (239:0) MessagePort.performWorkUntilDeadline node_modules\scheduler\cjs\scheduler.development.js (533:0)

error 3:

Unhandled Runtime Error Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Call Stack updateHostRoot node_modules\react-dom\cjs\react-dom.development.js (19849:0) beginWork node_modules\react-dom\cjs\react-dom.development.js (21615:0) beginWork$1 node_modules\react-dom\cjs\react-dom.development.js (27426:0) performUnitOfWork node_modules\react-dom\cjs\react-dom.development.js (26557:0) workLoopSync node_modules\react-dom\cjs\react-dom.development.js (26466:0) renderRootSync node_modules\react-dom\cjs\react-dom.development.js (26434:0) recoverFromConcurrentError node_modules\react-dom\cjs\react-dom.development.js (25850:0) performConcurrentWorkOnRoot node_modules\react-dom\cjs\react-dom.development.js (25750:0) workLoop node_modules\scheduler\cjs\scheduler.development.js (266:0) flushWork node_modules\scheduler\cjs\scheduler.development.js (239:0) MessagePort.performWorkUntilDeadline node_modules\scheduler\cjs\scheduler.development.js (533:0)

error 4:

Unhandled Runtime Error Error: could not detect network (code=NETWORK_ERROR, version=providers/5.0.0-beta.171)

Call Stack Logger.makeError node_modules\ethers\dist\ethers.umd.js (3651:0) Logger.throwError node_modules\ethers\dist\ethers.umd.js (3660:0) JsonRpcProvider.eval node_modules\ethers\dist\ethers.umd.js (20220:0) step node_modules\ethers\dist\ethers.umd.js (19932:0) Object.eval [as throw] node_modules\ethers\dist\ethers.umd.js (19913:46) rejected node_modules\ethers\dist\ethers.umd.js (19905:42)

i have copied and pasted all the code.

opened by ilanlad 2

🚀👩‍🚀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!

Related tags

Overview

Multi-Chain NFT Marketplace

Part-1 Hardhat and EthersJS

Part-2 NFT Market Resell Smart Contract

Part-3 Deploy a NextJS WebFront End

Part-4 Relist and Buy NFTs!

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

Comments

I think i found a bug

nftcollection.sol code

Error: invalid private key (argument="privateKey", value="[[ REDACTED ]]"

Error from the getAllNFTs from solidity

i have 4 errors i need help

Owner

Net2Dev

Youtube Summarizer is a web-based tool that uses ChatGPT to automatically generate summaries of YouTube videos. It lets you learn key points quickly and easily without having to watch entire lengthy videos. It is enough for users to paste the YouTube video URL into the tool and summarize the video.

Follow along with blog posts, code samples, and practical exercises to learn how to build serverless applications from your local Integrated development environment (IDE).

Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collections

Fullstack Dynamic NFT Mini Game built using 💎 Diamond Standard [EIP 2535] 🏃‍♀️Players can use Hero NFT to battle against Thanos ⚔ Heroes can be Healed by staking their NFT 🛡

Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minutes!

In this exercise, I will write a few practical tests for JavaScript functions using the Jest library. I will make sure to follow the AAA pattern to make my tests easier for other developers to read and understand. I will also try to use the TDD approach in practice.

App that allows you to control and watch YouTube videos using hand gestures. Additionally, app that allows you to search for videos, playlists, and channels.

This repo contains instructions on how to create your NFT in Solana(using Metaplex and Candy Machine) and mint it using your custom front-end Dapp

This is email scheduler made using MERN. This repo contains server code, client repo is linked in readme.

Kittos is NFT Marketplace built with Next Js, Hardhat, Solidity, Arweave + Bundlr Client and All The CSS Magic with TailwindCSS. 😺

NFTKastle is an NFT marketplace where users can mint their pictures as NFTs, list their NFTs for sale, and buy NFTs from other users.

🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar

This repo contains utility tools for manipulating files, process images and automation.

Script to fetch all NFT owners using moralis API. This script output is a data.txt file containing all owner addresses of a given NFT and their balances.

CA9.io Portal Seed Server. Makes sure the project files are always accessable.

A Multichain crypto wallet library that supports Ethereum, Solana and other EVM compatible blockchains.

Compact library for interacting with Ankr Scan Multichain API.

js-sdk for multichain storage service