Road to Web3 Week7 tutorial on building an NFT Marketplace from Scratch
This code is for the Tutorial Build your own NFT Marketplace from Scratch built by alchemy.com
To set up the repository and run the marketplace locally, run the below
git clone https://github.com/OMGWINNING/NFT-Marketplace-Tutorial
cd NFT-Marketplace-Tutorial
npm install
npm start
Hi All,
I've followed the course successfully but somehow the app stopped working successfully and I am now getting an axis error which appears to be coming from the axios get request in Marketplace.js let meta = await axios.get(tokenURI);
I am getting the below error:
I have been looking for a solution for two days and can not figure out why it is not working anymore.
Any assistance would be greatly appreciated.
https://gateway.pinata.cloud/ipfs/QmVEA6DxgG6QiPB56E6gP6V7AfeF5D82TXrNML7fzSFPV5
Marketplace.js:69
xhr.js:220 GET https://gateway.pinata.cloud/ipfs/QmVEA6DxgG6QiPB56E6gP6V7AfeF5D82TXrNML7fzSFPV5 400
dispatchXhrRequest @ xhr.js:220
xhrAdapter @ xhr.js:16
dispatchRequest @ dispatchRequest.js:58
request @ Axios.js:109
Axios.<computed> @ Axios.js:131
wrap @ bind.js:9
(anonymous) @ Marketplace.js:70
await in (anonymous) (async)
getAllNFTs @ Marketplace.js:63
await in getAllNFTs (async)
Marketplace @ Marketplace.js:95
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
Marketplace.js:91 Uncaught (in promise) AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
getAllNFTs @ Marketplace.js:91
await in getAllNFTs (async)
Marketplace @ Marketplace.js:95
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
xhr.js:220 GET https://gateway.pinata.cloud/ipfs/QmVEA6DxgG6QiPB56E6gP6V7AfeF5D82TXrNML7fzSFPV5 400
dispatchXhrRequest @ xhr.js:220
xhrAdapter @ xhr.js:16
dispatchRequest @ dispatchRequest.js:58
request @ Axios.js:109
Axios.<computed> @ Axios.js:131
wrap @ bind.js:9
(anonymous) @ Marketplace.js:70
await in (anonymous) (async)
getAllNFTs @ Marketplace.js:63
await in getAllNFTs (async)
Marketplace @ Marketplace.js:95
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20145
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
Marketplace.js:91 Uncaught (in promise) AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
See below the code from the Marketplace.js file:
import Navbar from "./Navbar";
import NFTTile from "./NFTTile";
// import MarketplaceJSON from "../Marketplace_goerli.json";
import MarketplaceJSON from "../Marketplace_localhost.json";
import axios from "axios";
import { useState } from "react";
export default function Marketplace() {
const sampleData = [
{
name: "NFT#1",
description: "Alchemy's First NFT",
website: "http://axieinfinity.io",
image:
"https://gateway.pinata.cloud/ipfs/QmTsRJX7r5gyubjkdmzFrKQhHv74p5wT9LdeF1m3RTqrE5",
price: "0.03ETH",
currentlySelling: "True",
address: "0xe81Bf5A757CB4f7F82a2F23b1e59bE45c33c5b13",
},
{
name: "NFT#2",
description: "Alchemy's Second NFT",
website: "http://axieinfinity.io",
image:
"https://gateway.pinata.cloud/ipfs/QmdhoL9K8my2vi3fej97foiqGmJ389SMs55oC5EdkrxF2M",
price: "0.03ETH",
currentlySelling: "True",
address: "0xe81Bf5A757C4f7F82a2F23b1e59bE45c33c5b13",
},
{
name: "NFT#3",
description: "Alchemy's Third NFT",
website: "http://axieinfinity.io",
image:
"https://gateway.pinata.cloud/ipfs/QmTsRJX7r5gyubjkdmzFrKQhHv74p5wT9LdeF1m3RTqrE5",
price: "0.03ETH",
currentlySelling: "True",
address: "0xe81Bf5A757C4f7F82a2F23b1e59bE45c33c5b13",
},
];
const [data, updateData] = useState(sampleData);
const [dataFetched, updateFetched] = useState(false);
async function getAllNFTs() {
const ethers = require("ethers");
//After adding your Hardhat network to your metamask, this code will get providers and signers
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
//Pull the deployed contract instance
let contract = new ethers.Contract(
MarketplaceJSON.address,
MarketplaceJSON.abi,
signer
);
//create an NFT Token
let transaction = await contract.getAllNFTs();
//Fetch all the details of every NFT from the contract and display
const items = await Promise.all(
transaction.map(async (i) => {
const tokenURI = await contract.tokenURI(i.tokenId);
console.log(tokenURI);
let meta = await axios.get(tokenURI);
meta = meta.data;
console.log(` The tokenURI metadata are: ${meta}`);
let price = ethers.utils.formatUnits(i.price.toString(), "ether");
let item = {
price,
tokenId: i.tokenId.toNumber(),
seller: i.seller,
owner: i.owner,
image: meta.image,
name: meta.name,
description: meta.description,
};
return item;
})
);
updateFetched(true);
updateData(items);
}
if (!dataFetched) getAllNFTs();
return (
<div>
<Navbar></Navbar>
<div className="flex flex-col place-items-center mt-20">
<div className="md:text-xl font-bold text-white">Top NFTs</div>
<div className="flex mt-5 justify-between flex-wrap max-w-screen-xl text-center">
{data.map((value, index) => {
return <NFTTile data={value} key={index}></NFTTile>;
})}
</div>
</div>
</div>
);
}
when i am trying to upload an nft it is showing an error it is showing cannot read the properties of undefined length and in the console it is showing error 401 bad request error pls help
The connect metamask button not work
Nothing happened et no error in console
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.