Giter Site home page Giter Site logo

net2devcrypto / n2d-nft-marketplace Goto Github PK

View Code? Open in Web Editor NEW
45.0 6.0 31.0 4.28 MB

๐Ÿš€๐Ÿ‘ฉโ€๐Ÿš€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!

Solidity 11.47% JavaScript 88.53%
axios blockchain dapp ipfs nextjs nft react solidity staking tutorial

n2d-nft-marketplace's Introduction

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.

n2d-nft-marketplace's People

Contributors

net2devcrypto avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

n2d-nft-marketplace's Issues

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.

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.
แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-05 แ„‹แ…ฉแ„’แ…ฎ 10 32 42

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

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

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.

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.