DEV Community

Cover image for Building a Full Stack NFT Marketplace on Ethereum with Polygon

Building a Full Stack NFT Marketplace on Ethereum with Polygon

Nader Dabit on July 06, 2021

Building a digital marketplace with Polygon, Next.js, Tailwind, Solidity, Hardhat, Ethers.js, and IPFS To view the video course for thi...
Collapse
btandayamo profile image
Bertil Tandayamo • Edited

I had same issue with JsonRpcProvider, so I did

//index.js
const provider = new ethers.providers.JsonRpcProvider('https://rpc-mainnet.maticvigil.com')
Enter fullscreen mode Exit fullscreen mode

Deploy again on mumbai test net, copy new contract address to config file and voila
PSD. Remember to have same url in metamask wallet, hardhat config file and index.js

Collapse
gooseophocles profile image
Goose Gordon

Has anyone received the following error? Ran into it while trying out the UI locally after running the deploy script for the first time - have tried to look around the web for answers with minimal success so far:

Error: call revert exception (method="fetchMarketItems()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.4.0)

All of my code is the same as the source code currently, please let me know if anyone has any ideas as to why this is happening!

Collapse
iidajun profile image
JI

I had the same problem.

The problem was solved by resetting the saved data by executing the following command described in the GitHub repository> README.

npx hardhat node
npx hardhat run scripts/deploy.js --network localhost
npm run dev
Enter fullscreen mode Exit fullscreen mode

Probably the error is due to some problem with the saved data.

Collapse
binstonsukhaelcardoza profile image
Binston-sukhael-cardoza

Delete artifacts folder and compile hardhat

Collapse
legendaryphoenixicarus profile image
legendaryphoenixicarus • Edited

Hi folks, I think I found the solution.
You can find loadNFTs function in pages/index.js. We use the JsonRpcProvider to get the provider. That's the point. You must provide RPC url of the testnet where you want to deploy NFT contracts. In my case, I targeted the bsctestnet, so I provide the RPC url of the bsctestnet to JsonRpcProvider constructor. Maybe you can keep the url in the config.js file. That's all. Cheers~

Thread Thread
theindianappguy profile image
Sanskar Tiwari

can you share code how? i am not clear

Thread Thread
legendaryphoenixicarus profile image
legendaryphoenixicarus • Edited

export default function Home() {
const [nfts, setNfts] = useState([])
const [loadingState, setLoadingState] = useState('not-loaded')
useEffect(() => {
loadNFTs()
}, [])
async function loadNFTs() {

const provider = new ethers.providers.JsonRpcProvider("data-seed-prebsc-1-s1.binance.org:...)
const tokenContract = new ethers.Contract(nftaddress, NFT.abi, provider)
const marketContract = new ethers.Contract(nftmarketaddress, Market.abi, provider)
const data = await marketContract.fetchMarketItems()
const items = await Promise.all(data.map(async i => {
const tokenUri = await tokenContract.tokenURI(i.tokenId)
const meta = await axios.get(tokenUri)
let price = ethers.utils.formatUnits(i.price.toString(), 'ether')
let item = {
price,
tokenId: i.tokenId.toNumber(),
seller: i.seller,
owner: i.owner,
image: meta.data.image,
name: meta.data.name,
description: meta.data.description,
}
return item
}))
setNfts(items)
setLoadingState('loaded')
}

Please see the attached image. Cheers!
dev-to-uploads.s3.amazonaws.com/up...

Collapse
theindianappguy profile image
Sanskar Tiwari

"Delete artifacts folder and compile hardhat" this does not solved it for me

Collapse
nan141979 profile image
Skrillx

Nader, I'm having this problem after having a lot of Nft No market place...

Error: call revert exception (method="fetchMarketItems()", errorArgs=[{"type":"BigNumber","hex":"0x32"}], errorName="Panic", errorSignature="Panic(uint256)" , reason=null, code=CALL_EXCEPTION, version=abi/5.4.0)

It's a new mistake I've never seen anything like it. What can it be?

Collapse
amo profile image
amo

Hi, did you find a solution to this error?
I am having the same issue. 😥

Collapse
theindianappguy profile image
Sanskar Tiwari

i am facing the same if found solution please share

Collapse
ayumirage profile image
Ayumirage • Edited

im stuck on this error:

./pages/index.js:10:0
Module not found: Can't resolve '../artifacts/contracts/Market.sol/NFTMarket.json'
8 |
9 | import NFT from "../artifacts/contracts/NFT.sol/NFT.json";

10 | import Market from "../artifacts/contracts/Market.sol/NFTMarket.json";
11 |
12 | export default function Home() {
13 | const [nfts, setNfts] = useState([]);

Collapse
sumeetchawla profile image
Sumeet Chawla

If you are running on local, you haven't compiled or tested your code and hence the artifacts are not generated.

If you are trying to build on vercel, this will come cause again the artifacts are missing. The general practice is not to commit those. Add a compile (or test) command to your build script before building nextjs.

Collapse
barryhewitt profile image
Baz-Cloud

Hi, please could you help me with this, i've been following this course for days now and I'm totally stuck on this.

Once i type npm run dev this is what i get

BarryH@EPT-LT23 MINGW64 ~/digital-marketplace (main)
$ npm run dev

digital-marketplace@0.1.0 dev
next dev

ready - started server on 0.0.0.0:3000, url: localhost:3000
info - Using webpack 5. Reason: Enabled by default nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /
wait - compiling...
error - ./pages/index.js:11:0
Module not found: Can't resolve '../artifacts/contracts/Market.sol/NFTMarket.json'
9 |
10 | import NFT from '../artifacts/contracts/NFT.sol/NFT.json'

11 | import Market from '../artifacts/contracts/Market.sol/NFTMarket.json'
12 |
13 | export default function Home() {
14 | const [nfts, setNfts] = useState([])

Import trace for requested module:

nextjs.org/docs/messages/module-no...
event - build page: /next/dist/pages/_error
wait - compiling...
error - ./pages/index.js:11:0
Module not found: Can't resolve '../artifacts/contracts/Market.sol/NFTMarket.json'
9 |
10 | import NFT from '../artifacts/contracts/NFT.sol/NFT.json'

11 | import Market from '../artifacts/contracts/Market.sol/NFTMarket.json'
12 |
13 | export default function Home() {
14 | const [nfts, setNfts] = useState([])

Import trace for requested module:

nextjs.org/docs/messages/module-no...
wait - compiling...
event - compiled successfully

Collapse
vitustockholm profile image
Vitus

change => '../artifacts/contracts/Market.sol/NFTMarket.json' to ...... '../artifacts/contracts/NFTMarket.sol/NFTMarket.json'

Collapse
barryhewitt profile image
Baz-Cloud

Hi, i'm really stuck on this and have been trying to figure it out for hours, did you manage to figure it out?

Collapse
btandayamo profile image
Bertil Tandayamo

Please elaborate

Collapse
giuseppecrj profile image
G.

Amazing article as always @dabit3

One small error I found is on sample-test.js instead of:

        tokenId: i.price.toString(),
Enter fullscreen mode Exit fullscreen mode

it should be

        tokenId: i.tokenId.toString(),
Enter fullscreen mode Exit fullscreen mode
Collapse
dabit3 profile image
Nader Dabit Author

Thank you! And thanks for the heads up, fixing this now!

Collapse
arcticmatt profile image
Matt Lim

For this part

let tx = await transaction.wait()
let event = tx.events[0]
let value = event.args[2]
Enter fullscreen mode Exit fullscreen mode

it seems like the intention is to get the MarketItemCreated event (otherwise I think that event goes unused)? But it actually gets the Transfer event. Functionally it's equivalent because both have tokenId as their third arg, but it's a little unclear what the intention is.

Collapse
chaun profile image
Chaun

Hi Matt,

Did you manage to find a solution to this error?

Hope to hear from you

Collapse
amo profile image
amo • Edited

Hi, I had the same error it was because I wasn't connected to the correct account in Metamask.

Make sure your metamask local network is on the same port provided when you run "npx hardhat node" probably " 127.0.0.1:8545/" and then import the an account to metamask using any of the private keys given and test it again

Collapse
thapelo505 profile image
thapelo505

someone please help me sove these, i ran npm audit and got the same message
is it the package versions?

44 vulnerabilities (11 low, 4 moderate, 29 high)

To address issues that do not require attention, run:
npm audit fix

Some issues need review, and may require choosing
a different dependency.

digital-marketplace>npm list
digital-marketplace@0.1.0 C:\Users\Monnosi\Music\typebeats\projects\digital-marketplace
+-- @nomiclabs/hardhat-ethers@2.0.2
+-- @nomiclabs/hardhat-waffle@2.0.1
+-- @openzeppelin/contracts@4.3.1
+-- autoprefixer@10.3.4
+-- axios@0.21.4
+-- chai@4.3.4
+-- ethereum-waffle@3.4.0
+-- ethers@5.4.6
+-- ipfs-http-client@52.0.3
+-- next@11.1.2
+-- postcss@8.3.6
+-- react-dom@17.0.2
+-- react@17.0.2
+-- tailwindcss@2.2.10
`-- web3modal@1.9.4

Collapse
chaun profile image
Chaun

Run npm audit fix

Collapse
thapelo505 profile image
thapelo505

i tried it but it still gives me the same

Thread Thread
shinobi_242 profile image
Eric

use yarn instead

Collapse
genie_anabelle profile image
Genie Anabelle • Edited

Hi, I'm having a runtime error in create-item.js when clicking to create the listing! Would appreciate any help, thank you!

The error is regarding: let value = event.args[2]

Collapse
ksteigerwald profile image
Kris Steigerwald • Edited

Restart your hardhat node, Redeploy your contracts, update your config.js with new contract addresses. Set MetaMask custom nounce to 0 (I had to do this to deal w/ another error) and then update the nounce with each following transaction.

hth

Collapse
chaun profile image
Chaun

Hi also have the same issue, any solutions?

Collapse
cryptobeginner profile image
CryptoBeginner

Hi i having this same event.args[2] you found any solution?

Collapse
baart1989 profile image
baart1989 • Edited

I had similar in my case it was that i had to re-run deploy.js command.

Collapse
sumeetchawla profile image
Sumeet Chawla

Hey Nader! This is such a brilliant article and a youtube video. I tried my hands at it and am falling in love with Blockchain.

So, if I am understanding it right, the listing fees should reflect in the owner's account when a certain sale happens right? But I am unable to see it. I will try to revisit the code and figure out why it isn't happening.

Collapse
dabit3 profile image
Nader Dabit Author

Amazing to hear! Yes! This should be the case. Maybe consider bumping the listing fee up high to see it show up, maybe something like equivalent of 100 or 1000 Matic

Collapse
sumeetchawla profile image
Sumeet Chawla

Thank you so much for replying. Yes, I did try it with 1000 matic. But it was still not working. It was a very stupid mistake from my end. Out of the three accounts on metamask, one was actually not imported using the keys generated in the hardhat node command 😅 I used that account's private key to initialise the market contract lol.

I was tearing my hair in trying to figure out why it wasn't working as the code made perfect sense.

Great work though. Looking forward to the next article. :D How to create a yield farm 🙈

Collapse
kritzheng profile image
KritzHeng

I'm stuck on this error

Unhandled Runtime Error
Error: could not detect network (event="noNetwork", code=NETWORK_ERROR, version=providers/5.3.1)

Source
.next\static\chunks\pages\index.js (173:0) @ Logger.makeError

171 | }
172 | // @todo : Any??

173 | const error = new Error(message);
174 | error.reason = reason;
175 | error.code = code;
176 | Object.keys(params).forEach(function (key) {
Call Stack
Logger.throwError
/_next/static/chunks/pages/index.js (7889:20)
JsonRpcProvider.
.next\static\chunks\pages\index.js (334:0)
Generator.throw

rejected
/_next/static/chunks/pages/index.js (12104:65)

Collapse
bleedingeffigy profile image
Alex Hernandez

The issue may be because of this line:
const provider = new ethers.providers.JsonRpcProvider()

I read the ethers docs, and they recommend JsonRpcProvider() for local nodes, for others they recommend getDefaultProvider() or Web3Provider(web3.currentProvider).
The other pages use Web3Provider, it's only index.js that uses the bad one.
So the fix for me was to make this change to index.js:
const provider = new ethers.providers.Web3Provider(web3.currentProvider)
And now I'm connected to and playing with the network!

Collapse
hoangsonsky profile image
hoangsonsky

Thanks. I try to deploy to the ropsten network but I have a mistake.
It is Error: call revert exception (method="fetchMarketItems()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.4.0)
How can I fix it?

Collapse
theindianappguy profile image
Sanskar Tiwari • Edited

i am facing the same if you have solution please share solution

Collapse
barryhewitt profile image
Baz-Cloud

Hi, i hope you're well

Firstly thank you for putting this together it's really amazing!

I've spent a few days going through it slowly and using your code examples above to avoid any syntax errors and i'm nearly at the end but am getting the following error and wondered if you could help?

error - ./pages/create-item.js:14:0
Module not found: Can't resolve '../artifacts/contracts/Market.sol/NFTMarket.json'
12 |
13 | import NFT from '../artifacts/contracts/NFT.sol/NFT.json'

14 | import Market from '../artifacts/contracts/Market.sol/NFTMarket.json'

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
chaun profile image
Chaun

You need to add NFT -> /NFTMarket.sol/NFTMarket.json'

Collapse
chaun profile image
Chaun

You need to add NFT -> /NFTMarket.sol/NFTMarket.json'

Collapse
lsbyerley profile image
lsbyerley

Awesome tutorial! I've noticed when you create a market item with createMarketItem() on the create-item page, the item.owner and item.seller values are not the same. Is this on purpose or should these values be the same? If they are the same, the item would show up on the my-assets page. Is the creator of the item not initially the owner?

Collapse
thapelo505 profile image
thapelo505

i have really tried everything

npm audit report

elliptic <6.5.4
Severity: moderate
Use of a Broken or Risky Cryptographic Algorithm - npmjs.com/advisories/1648
fix available via npm audit fix
node_modules/ganache-core/node_modules/elliptic
@ethersproject/signing-key <=5.0.9
Depends on vulnerable versions of elliptic
node_modules/ganache-core/node_modules/@ethersproject/signing-key

lodash <4.17.21
Severity: high
Command Injection - https://npmjs.com/advisories/1673
No fix available
node_modules/ganache-core/node_modules/lodash
ganache-core *
Depends on vulnerable versions of lodash
Depends on vulnerable versions of web3
Depends on vulnerable versions of web3-provider-engine
node_modules/ganache-core
@ethereum-waffle/provider *
Depends on vulnerable versions of @ethereum-waffle/ens
Depends on vulnerable versions of ganache-core
node_modules/@ethereum-waffle/provider
@ethereum-waffle/chai >=2.5.0
Depends on vulnerable versions of @ethereum-waffle/provider
node_modules/@ethereum-waffle/chai
ethereum-waffle >=2.3.0-istanbul.0
Depends on vulnerable versions of @ethereum-waffle/chai
Depends on vulnerable versions of @ethereum-waffle/provider
node_modules/ethereum-waffle
@nomiclabs/hardhat-waffle *
Depends on vulnerable versions of ethereum-waffle
node_modules/@nomiclabs/hardhat-waffle

node-fetch <=2.6.0 || 3.0.0-beta.1 - 3.0.0-beta.8
Denial of Service - npmjs.com/advisories/1556
No fix available
node_modules/ganache-core/node_modules/fetch-ponyfill/node_modules/node-fetch
node_modules/ganache-core/node_modules/node-fetch
cross-fetch <=2.2.3 || 3.0.0 - 3.0.5
Depends on vulnerable versions of node-fetch
node_modules/ganache-core/node_modules/cross-fetch
fetch-ponyfill 1.0.0 - 6.0.2
Depends on vulnerable versions of node-fetch
node_modules/ganache-core/node_modules/fetch-ponyfill
eth-json-rpc-middleware 1.1.0 - 5.0.2
Depends on vulnerable versions of fetch-ponyfill
node_modules/ganache-core/node_modules/eth-json-rpc-middleware
eth-json-rpc-infura <=5.0.0
Depends on vulnerable versions of eth-json-rpc-middleware
node_modules/ganache-core/node_modules/eth-json-rpc-infura
web3-provider-engine 14.0.0 - 15.0.12
Depends on vulnerable versions of eth-json-rpc-infura
node_modules/ganache-core/node_modules/web3-provider-engine
ganache-core *
Depends on vulnerable versions of lodash
Depends on vulnerable versions of web3
Depends on vulnerable versions of web3-provider-engine
node_modules/ganache-core
@ethereum-waffle/provider *
Depends on vulnerable versions of @ethereum-waffle/ens
Depends on vulnerable versions of ganache-core
node_modules/@ethereum-waffle/provider
@ethereum-waffle/chai >=2.5.0
Depends on vulnerable versions of @ethereum-waffle/provider
node_modules/@ethereum-waffle/chai
ethereum-waffle >=2.3.0-istanbul.0
Depends on vulnerable versions of @ethereum-waffle/chai
Depends on vulnerable versions of @ethereum-waffle/provider
node_modules/ethereum-waffle
@nomiclabs/hardhat-waffle *
Depends on vulnerable versions of ethereum-waffle
node_modules/@nomiclabs/hardhat-waffle

normalize-url 4.3.0 - 4.5.0 || 5.0.0 - 5.3.0 || 6.0.0
Severity: high
Regular Expression Denial of Service - npmjs.com/advisories/1755
fix available via npm audit fix
node_modules/ganache-core/node_modules/normalize-url

path-parse <1.0.7
Severity: moderate
Regular Expression Denial of Service in path-parse - npmjs.com/advisories/1773
fix available via npm audit fix
node_modules/ganache-core/node_modules/path-parse

tar <=4.4.17 || 5.0.0 - 5.0.9 || 6.0.0 - 6.1.8
Severity: high
Arbitrary File Creation/Overwrite due to insufficient absolute path sanitization - npmjs.com/advisories/1770
Arbitrary File Creation/Overwrite via insufficient symlink protection due to directory cache poisoning - npmjs.com/advisories/1771
Arbitrary File Creation/Overwrite via insufficient symlink protection due to directory cache poisoning using symbolic links - npmjs.com/advisories/1779
Arbitrary File Creation/Overwrite on Windows via insufficient relative path sanitization - npmjs.com/advisories/1781
fix available via npm audit fix
node_modules/ganache-core/node_modules/tar

underscore 1.3.2 - 1.12.0
Severity: high
Arbitrary Code Execution - npmjs.com/advisories/1674
No fix available
node_modules/ganache-core/node_modules/underscore
web3-bzz <=1.3.5
Depends on vulnerable versions of underscore
node_modules/ganache-core/node_modules/web3-bzz
web3 *
Depends on vulnerable versions of web3-bzz
Depends on vulnerable versions of web3-eth
node_modules/ganache-core/node_modules/web3
ganache-core *
Depends on vulnerable versions of lodash
Depends on vulnerable versions of web3
Depends on vulnerable versions of web3-provider-engine
node_modules/ganache-core
@ethereum-waffle/provider *
Depends on vulnerable versions of @ethereum-waffle/ens
Depends on vulnerable versions of ganache-core
node_modules/@ethereum-waffle/provider
@ethereum-waffle/chai >=2.5.0
Depends on vulnerable versions of @ethereum-waffle/provider
node_modules/@ethereum-waffle/chai
ethereum-waffle >=2.3.0-istanbul.0
Depends on vulnerable versions of @ethereum-waffle/chai
Depends on vulnerable versions of @ethereum-waffle/provider
node_modules/ethereum-waffle
@nomiclabs/hardhat-waffle *
Depends on vulnerable versions of ethereum-waffle
node_modules/@nomiclabs/hardhat-waffle
web3-core-helpers <=1.3.6-rc.2 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of underscore
Depends on vulnerable versions of web3-utils
node_modules/ganache-core/node_modules/web3-core-helpers
web3-core <=1.3.5 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of web3-core-helpers
node_modules/ganache-core/node_modules/web3-core
web3-eth-ens <=1.3.6-rc.2 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of underscore
Depends on vulnerable versions of web3-core
Depends on vulnerable versions of web3-core-helpers
node_modules/ganache-core/node_modules/web3-eth-ens
web3-eth <=1.3.6-rc.2 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of underscore
Depends on vulnerable versions of web3-core-helpers
Depends on vulnerable versions of web3-eth-ens
node_modules/ganache-core/node_modules/web3-eth
web3-core-method <=1.3.6-rc.2 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of underscore
Depends on vulnerable versions of web3-core-helpers
node_modules/ganache-core/node_modules/web3-core-method
web3-net 1.2.0 - 1.3.5 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of web3-core-method
node_modules/ganache-core/node_modules/web3-net
web3-eth-personal <=1.3.5 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of web3-core-helpers
Depends on vulnerable versions of web3-net
node_modules/ganache-core/node_modules/web3-eth-personal
web3-shh <=1.3.5
Depends on vulnerable versions of web3-core-method
Depends on vulnerable versions of web3-net
node_modules/ganache-core/node_modules/web3-shh
web3-core-subscriptions <=1.3.6-rc.2 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of underscore
Depends on vulnerable versions of web3-core-helpers
node_modules/ganache-core/node_modules/web3-core-subscriptions
web3-eth-contract <=1.3.6-rc.2 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of underscore
Depends on vulnerable versions of web3-core-helpers
node_modules/ganache-core/node_modules/web3-eth-contract
web3-providers-http <=1.0.0 || 1.2.0 - 1.3.5 || 3.0.0-rc.0 - 3.0.0-rc.4
Depends on vulnerable versions of web3-core-helpers
node_modules/ganache-core/node_modules/web3-providers-http
web3-providers-ipc <=1.3.6-rc.2 || >=3.0.0-rc.0
Depends on vulnerable versions of underscore
Depends on vulnerable versions of web3-core-helpers
node_modules/ganache-core/node_modules/web3-providers-ipc
web3-providers-ws <=1.3.6-rc.2 || 3.0.0-rc.0 - 3.0.0-rc.4
Depends on vulnerable versions of underscore
Depends on vulnerable versions of web3-core-helpers
node_modules/ganache-core/node_modules/web3-providers-ws
web3-core-requestmanager <=1.3.5 || 3.0.0-rc.0 - 3.0.0-rc.4
Depends on vulnerable versions of underscore
node_modules/ganache-core/node_modules/web3-core-requestmanager
web3-eth-abi <=1.3.6-rc.2 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of underscore
Depends on vulnerable versions of web3-utils
node_modules/ganache-core/node_modules/web3-eth-abi
web3-eth-accounts <=1.3.5 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of underscore
node_modules/ganache-core/node_modules/web3-eth-accounts
web3-utils 1.0.0-beta.8 - 1.3.5 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of underscore
node_modules/ganache-core/node_modules/web3-utils
web3-eth-iban <=1.3.5 || 2.0.0-alpha - 3.0.0-rc.4
Depends on vulnerable versions of web3-utils
node_modules/ganache-core/node_modules/web3-eth-iban

web3 *
Severity: high
Insecure Credential Storage - npmjs.com/advisories/877
Depends on vulnerable versions of web3-bzz
Depends on vulnerable versions of web3-eth
No fix available
node_modules/ganache-core/node_modules/web3
ganache-core *
Depends on vulnerable versions of lodash
Depends on vulnerable versions of web3
Depends on vulnerable versions of web3-provider-engine
node_modules/ganache-core
@ethereum-waffle/provider *
Depends on vulnerable versions of @ethereum-waffle/ens
Depends on vulnerable versions of ganache-core
node_modules/@ethereum-waffle/provider
@ethereum-waffle/chai >=2.5.0
Depends on vulnerable versions of @ethereum-waffle/provider
node_modules/@ethereum-waffle/chai
ethereum-waffle >=2.3.0-istanbul.0
Depends on vulnerable versions of @ethereum-waffle/chai
Depends on vulnerable versions of @ethereum-waffle/provider
node_modules/ethereum-waffle
@nomiclabs/hardhat-waffle *
Depends on vulnerable versions of ethereum-waffle
node_modules/@nomiclabs/hardhat-waffle

ws 5.0.0 - 5.2.2 || 6.0.0 - 6.2.1 || 7.0.0 - 7.4.5
Severity: moderate
Regular Expression Denial of Service - npmjs.com/advisories/1748
fix available via npm audit fix
node_modules/ganache-core/node_modules/web3-provider-engine/node_modules/ws

yargs-parser <=13.1.1 || 14.0.0 - 15.0.0 || 16.0.0 - 18.1.1
Prototype Pollution - npmjs.com/advisories/1500
No fix available
node_modules/@ensdomains/ens/node_modules/yargs-parser
yargs 4.0.0-alpha1 - 12.0.5 || 14.1.0 || 15.0.0 - 15.2.0
Depends on vulnerable versions of yargs-parser
node_modules/@ensdomains/ens/node_modules/yargs
solc 0.3.6 - 0.5.10
Depends on vulnerable versions of yargs
node_modules/@ensdomains/ens/node_modules/solc
@ensdomains/ens *
Depends on vulnerable versions of solc
node_modules/@ensdomains/ens
@ethereum-waffle/ens *
Depends on vulnerable versions of @ensdomains/ens
node_modules/@ethereum-waffle/ens
@ethereum-waffle/provider *
Depends on vulnerable versions of @ethereum-waffle/ens
Depends on vulnerable versions of ganache-core
node_modules/@ethereum-waffle/provider
@ethereum-waffle/chai >=2.5.0
Depends on vulnerable versions of @ethereum-waffle/provider
node_modules/@ethereum-waffle/chai
ethereum-waffle >=2.3.0-istanbul.0
Depends on vulnerable versions of @ethereum-waffle/chai
Depends on vulnerable versions of @ethereum-waffle/provider
node_modules/ethereum-waffle
@nomiclabs/hardhat-waffle *
Depends on vulnerable versions of ethereum-waffle
node_modules/@nomiclabs/hardhat-waffle

44 vulnerabilities (11 low, 4 moderate, 29 high)

To address issues that do not require attention, run:
npm audit fix

Collapse
zhaluza profile image
Zac Haluza

I'm getting the following error when I enter pragma solidity ^0.8.3 at the top of my smart contracts:

Source file requires different compiler version (current compiler is 0.7.3+commit.9bfce1f6.Emscripten.clang) - note that nightly builds are considered to be strictly less than the released version
Enter fullscreen mode Exit fullscreen mode

Even after reinstalling my dependencies, my yarn.lock file still lists solc "0.7.3" as a dependency of hardhat@^2.5.0. Right now I'm using 0.7.3 as the Solidity version of my smart contracts - doubt it'll cause any issues for a smaller project like this, but I'm curious about how to get around it, or if that's even necessary.

Looking forward to finishing this project! Wrapping my head about how to build apps in the Web 3.0 paradigm has been both challenging and exciting, and I appreciate you putting such a huge effort into creating this type of much-needed content.

Collapse
emmanuelmartinez profile image
Emaxnuel

Hello everyone :)

I have this error in my-assets.js:

Unhandled Runtime Error

Error: call revert exception (method="fetchMyNFTs()", errorSignature=null, errorArgs=[null], reason=null, code=CALL_EXCEPTION, version=abi/5.0.0-beta.156)

I copied and pasted the code from Github, I already looked everywhere on the Web but I can't figure it out because I don't fully understand what it is

I feel so desperate and frustrated, so useless :(

Collapse
sumeetchawla profile image
Sumeet Chawla • Edited

You are calling the JsonRpcProvider but initialising it with a public rpc url while running a local node. Remove that and it should work fine. 👍🏼

const provider = new ethers.providers.JsonRpcProvider() in index page

Collapse
btandayamo profile image
Bertil Tandayamo
Collapse
oxamyy profile image
0xamyy • Edited

Hi I am following this article and sadly my test does not run successfully right now, does anyone know what this error is?
when i run npx hardhat test in the terminal , it fails at the function :
0 passing (717ms)
1 failing

1) NFTMarket
should create and describe and execute market sales:
Error: missing argument: in Contract constructor (count=0, expectedCount=1, code=MISSING_ARGUMENT, version=contracts/5.4.1)
at Logger.makeError (node_modules/@ethersproject/logger/src.ts/index.ts:225:28)
at Logger.throwError (node_modules/@ethersproject/logger/src.ts/index.ts:237:20)
at Logger.checkArgumentCount (node_modules/@ethersproject/logger/src.ts/index.ts:296:18)
at ContractFactory. (node_modules/@ethersproject/contracts/src.ts/index.ts:1201:16)
at step (node_modules/@ethersproject/contracts/lib/index.js:48:23)
at Object.next (node_modules/@ethersproject/contracts/lib/index.js:29:53)
at /home/nft-marketplace/node_modules/@ethersproject/contracts/lib/index.js:23:71
at new Promise ()
at __awaiter (node_modules/@ethersproject/contracts/lib/index.js:19:12)
at ContractFactory.deploy (node_modules/@ethersproject/contracts/lib/index.js:1111:16)

thanks!

Collapse
spaceh3ad profile image
spaceh3ad

Got same error while testing contracts. This error happens as i try to call function that takes bool as parameter.

Collapse
frankismartinez profile image
frank martinez

Superb walkthrough Nader, gracias!

Had to change import web3 from 'web3' to import web3 from 'web3-utils' in create-item.js

Otherwise very easy to get it up/running.

Collapse
dabit3 profile image
Nader Dabit Author

Hey, thanks, I actually meant to remove web completely and just use ethers, just updated to do so!

Collapse
jujumimi19 profile image
Frangipad

I would like to code something similar for supply chain track application with nft token, somebody said that it is cheaper with tezos, i am a newbie and iwould like to know the best way to follow, any suggest?

Collapse
nan141979 profile image
Skrillx

Hey Nader, I wanted to thank you so much for this post and for this wonderful job!

I'm learning a lot and demonstrating to my close friends... Do you have any complete courses?

I was able to run perfectly and execute, I wanted to know how I could implement it so that the assets that were bought can have their prices changed and sell again.

From what I understand after you buy the NFT you have nothing to do with it anymore.

That's right??

Collapse
chaun profile image
Chaun

Any solutions for this error?

Unhandled Runtime Error
TypeError: Cannot read property '2' of undefined

Source
.next\static\chunks\pages\create-item.js (65:27) @ _callee3$

63 | let tx = await transaction.wait()
64 | let event = tx.events[0]

65 | let value = event.args[2]
| ^
66 | let tokenId = value.toNumber()
67 |
68 | const price = ethers.utils.parseUnits(formInput.price, 'ether')
Call Stack
Generator.invoke [as _invoke]
.next\static\chunks\main.js (293:0)
asyncGeneratorStep

Collapse
hellosongi profile image
HelloSongi

HOW DO I FIX THIS PLEASE?

./pages/index.js:12:0
Module not found: Can't resolve '../artifacts/contracts/Market.sol/NFTMarket.json'
10 |
11 | import NFT from '../artifacts/contracts/NFT.sol/NFT.json'

12 | import Market from '../artifacts/contracts/Market.sol/NFTMarket.json'
13 |
14 | export default function Home() {
15 | const [nfts, setNfts] = useState([])

Import trace for requested module:

nextjs.org/docs/messages/module-no...

Collapse
chaun profile image
Chaun

You need to add NFT -> /NFTMarket.sol/NFTMarket.json'

Collapse
chaun profile image
Chaun

Has anyone managed to solve this?

63 | let tx = await transaction.wait()
64 | let event = tx.events[0]

65 | let value = event.args[2]
| ^
66 | let tokenId = value.toNumber()
67 |
68 | const price = ethers.utils.parseUnits(formInput.price, 'ether')

????

Collapse
amo profile image
amo

Hi, I had the same error it was because I wasn't connected to the correct account in Metamask.

Make sure your metamask local network is on the same port provided when you run "npx hardhat node" probably "127.0.0.1:8545/" and then import the an account to metamask using any of the private keys given and test it again

Collapse
jamesonhill profile image
Jameson Hill

This is awesome, thanks @dabit3 ! Question. In the deploy script, what's the difference between deploying the NFTMarket contract and NFT contract? The former calls deploy() with no args, whereas the later calls deploy(NFTMarket.address).

Collapse
sumeetchawla profile image
Sumeet Chawla

If you look at the constructor for NFT smart contract, it requires the NFTMarket address.

Collapse
3y3net profile image
3y3net

Hello,
thanks a lot for this super-interesting article. I have a question:
How do you disconnect the wallet?
I've connect the wallet for the first hardhat account but I don't know how to disconnect metamask to log with another account.
Thanks

Collapse
echtcipher profile image
Ashish Singh • Edited

I'm getting this error in "create-item.js", it would be appreciable if someone could give some leads regarding this ASAP.

index.js:318 Uncaught TypeError: debug_default.default is not a function
at Object../node_modules/ipfs-http-client/cjs/src/lib/core.js (core.js:22)
at Object.options.factory (react refresh:8)
at __webpack_require
_ (bootstrap:25)
at fn (hot module replacement:61)
at Object../node_modules/ipfs-http-client/cjs/src/lib/configure.js (configure.js:5)
at Object.options.factory (react refresh:8)
at webpack_require (bootstrap:25)
at fn (hot module replacement:61)
at Object../node_modules/ipfs-http-client/cjs/src/bitswap/wantlist.js (wantlist.js:6)
at Object.options.factory (react refresh:8)
at webpack_require (bootstrap:25)
at fn (hot module replacement:61)
at Object../node_modules/ipfs-http-client/cjs/src/bitswap/index.js (index.js:5)
at Object.options.factory (react refresh:8)
at webpack_require (bootstrap:25)
at fn (hot module replacement:61)
at Object../node_modules/ipfs-http-client/cjs/src/index.js (index.js:12)
at Object.options.factory (react refresh:8)
at webpack_require (bootstrap:25)
at fn (hot module replacement:61)
at Module../node_modules/ipfs-http-client/esm/src/index.js (id.js:23)
at Module.options.factory (react refresh:8)
at webpack_require (bootstrap:25)
at fn (hot module replacement:61)
at Module../pages/create-item.js (utils.js:122)
at Module.options.factory (react refresh:8)
at webpack_require (bootstrap:25)
at fn (hot module replacement:61)
at ?bbf9:5
at route-loader.js:207

Collapse
mnitchov profile image
mnitchov

Were you able to resolve this? I'm having the same issue @dabit3

Collapse
lpatipat profile image
lpatipat

Getting a json rpc error on the creator-dashboard after deploying to mumbai. Worked perfectly in localhost though. Do I need to change the arguments to web3modal there too?

It looks like this

inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error.
{code: -32603, message: "Internal JSON-RPC error.", data: {…}}
code: -32603
data: {code: 3, data: "0x08c379a00000000000000000000000000000000000000000…4656e7420746f6b656e000000000000000000000000000000", message: "execution reverted: ERC721URIStorage: URI query for nonexistent token"}
message: "Internal JSON-RPC error."

Collapse
coderbang1 profile image
coderbang1 • Edited

i can create items, but when i try to buy nothing happens.

console shows this error: MetaMask - RPC Error: Internal JSON-RPC error.
Object { code: -32603, message: "Internal JSON-RPC error.
(code: 3, message: "execution reverted: Please submit the asking price in order to complete the purchase")

and this one: Uncaught (in promise)

[Note that: its not on matic. i have deploy it to bsc testnet. ]

Collapse
x777 profile image
YD

Any solution?

Collapse
ravencode profile image
Bharat Kharbanda

Please help I'm stuck at this.

error - ./pages/index.js:11:0
Module not found: Can't resolve '../artifacts/contracts/Market.sol/NFTMarket.json'
9 |
10 | import NFT from '../artifacts/contracts/NFT.sol/NFT.json'

11 | import Market from '../artifacts/contracts/Market.sol/NFTMarket.json'
12 |
13 | export default function Home() {
14 | const [nfts, setNfts] = useState([])

Collapse
chaun profile image
Chaun

You need to add NFT -> /NFTMarket.sol/NFTMarket.json'

Collapse
nezzrx profile image
Nezzar Kefif

Amazing ! Juste went though it today. Now if we were to use Polygon, the contracts would need to handle both tokens right ? Because having the prices in ETH on Polygon would not work right ? Or I guess the entire market place would need to be on Polygon. Either way amazing work !

PS: I had some trouble with the JsonRpcProvider function which would still return localhost. Make sure you update .secret BEFORE deploying the Smart Contracts to the Mumbai testnet. (Already stated in the article, but I tend to read diagonally... )

Collapse
coderbang1 profile image
coderbang1

i can create items , but when i try to sell nothing happens.

i got this errors on console:
MetaMask - RPC Error: Internal JSON-RPC error.
Object { code: -32603, message: "Internal JSON-RPC error.
data: Object { code: 3, message: "execution reverted: Please submit the asking price in order to complete the purchase.
and: uncaught in promise

P:S: its not on matic, i have deploy it to bsc testnet.

Collapse
thejuju profile image
Julien Gabriel

This is crazy. Wonderful post @dabit3 !

Collapse
drrh12 profile image
Flávio Andrade

Hello! I followed the tutorial along until 1:56. The difference is that I'm only not using NextJS.
However, when I try to createItem, my Metamask wallet doesn't open after clicking in the button.

CreateDigital asset

Anyone had a similar error?

Collapse
mansijoshi17 profile image
Mansi Joshi

Hello! I have followed the tutorial till the last. But I am facing issue in getting list of item which user just buy. I am able to successfully buy items but I am not getting those item in my items by calling fetchMyNFTs function.

Collapse
thapelo505 profile image
thapelo505

I'm trying to build a marketplace like opensea, does anyone know how I could alter the code to be able to facilitate categorizing the nft by type using the graph, and is ipfs able to render a 3d object directly into an html canvas?

Collapse
arcticmatt profile image
Matt Lim

Not sure why address(0) is used instead of address(this) to represent that the market owns the NFT? address(this) is passed to transferFrom, so I think they should be consistent.

Collapse
rich1n profile image
Richard Rodrigues

Hey @dabit3 nice article but the NFT.sol is a JavaScript code (the same as pages/index.js)

Collapse
rich1n profile image
Richard Rodrigues

here's the code for NFT.sol

Collapse
dabit3 profile image
Nader Dabit Author

Hey, do you mind double checking that, it looks fine to me. I have noticed that Dev.to sometimes renders gist incorrectly, so wondering if you ran into that bug.

Thread Thread
dabit3 profile image
Nader Dabit Author

Just confirmed the bug: loom.com/share/c8d473bef6224087ac8...

Try refreshing the page. Reporting this now.

Collapse
frankismartinez profile image
frank martinez

Superb walkthrough Nader, gracias!

Had to change import web3 from 'web3' to import web3 from 'web3-utils' in create-item.js

Collapse
frankismartinez profile image
frank martinez

Superb walkthrough Nader, gracias!

Had to change import web3 from 'web3' to import web3 from 'web3-utils' in create-item.js

Otherwise very easy to get it up/running.

Collapse
nan141979 profile image
Skrillx

How can I program to pay with some other erc 20 token besides eth?

Collapse
nan141979 profile image
Skrillx • Edited

Hey I'm trying to deploy to ropsten's network and I get this error:
dev-to-uploads.s3.amazonaws.com/up...

where am I going wrong?

Collapse
lot8 profile image
lot8

Hi,
Thank u for the nice Project! Everything works fine, but pages/my-assets.... syntax error: unexpected token (1:0) Any ideas?

Collapse
lot8 profile image
lot8

Fixed it : / pages/my-assets.js */ to / pages/my-assets.js */ :)

Collapse
vorcigernix profile image
Adam Sobotka

Nice article, thanks. I am getting
reason: 'could not detect network',
code: 'NETWORK_ERROR',
event: 'noNetwork',
when I try to deploy to mumbai. Any idea what could be wrong?

Collapse
vorcigernix profile image
Adam Sobotka • Edited

Also getting a weird metamask RPC errors, like
message: "NetworkError when attempting to fetch resource." or similar with empty message. I found some related reports, could be caused by some metamask/firefox combination. Weird is that it works fine on localhost. Could be some Matic issue? Also tried to switch to infura RPC, didn't help. Any idea what can I try?

Collapse
johnrigler profile image
John Rigler

I had to change to this network: matic-mumbai.chainstacklabs.com

Collapse
csellis profile image
Chris Ellis

It looks like Infura requires an account for the IPFS now

Collapse
farhadrahmani profile image
Farhad Rahmani

Thank you dear Sir but can i make it this in React JS?

Collapse
meekaphro profile image
Quentin

learned so much, thanks for this

Collapse
srtkp2009 profile image
sarthak pujari

Invalid JSON-RPC response received: invalid project id

this is the error i get when i run
npx hardhat run scripts/deploy.js --network mumbai

Collapse
srtkp2009 profile image
sarthak pujari

i have checked the project id as well it is correct

Collapse
farhadrahmani profile image
Farhad Rahmani

when i want to create item that is not publishing in app because the etherium price is showing 0, how to fix this?

Collapse
mosesibe profile image
moze

Thank you for this

Collapse
lgs profile image
Luca G. Soave • Edited

Super !!!

For the future, why not SvelteKit instead of Next.js ?

Collapse
dabit3 profile image
Nader Dabit Author

No huge reason really other than that I am already really experienced with Next.js. Will try using SvelteKit next time :)

Collapse
bellomi profile image
Lívia Bellomi

Is it possible to create all this in a Mobile environment instead of web?

Collapse
marc_nahas profile image
Marc Nahas

Hi Nader,
This content is amazing but I keep having the following error and I don't get how to fix it.
Thank you forward for your help :)
Have a good day !

Collapse
huudyy profile image
PabloHoudini

Hi, I was wondering if deploying to Solana would be just changing the url in hardhat.config? @dabit3 : any idea if solana mainnet open for developers?

Collapse
izuchukwueric profile image
Izuchukwu Onukwube • Edited