因为之前已经创建好了，所以直接用就好，没创建的点击右上角的CREATE APP进行创建。
在小狐狸上点击添加网络，然后填入对应参数
Network Name: Goerli Test Network
RPC base URL: https://eth-goerli.alchemyapi.io/v2/你创建应用的API KEY
Chain ID: 5
Block Explorer URL: https://goerli.etherscan.io/
Symbol (Optional): ETH
添加完成后导航到下面地址领取测试代币：
GitHub地址：
https://github.com/alchemyplatform/RTW3-Week7-NFT-Marketplace
下载ZIP包，下载完成后解压
然后我们用VSCode打开此项目
选择刚才解压出来的文件夹
然后在项目中打开终端输入npm install，等待依赖下载完成
接着输入npm start ，浏览器就会弹出下面网页
我们新增一个cmd终端
在新的终端输入npm install dotenv --save，下载安装 dotenv
在根目录创建.env文件
找到hardhat.config.js文件，并将其中代码替换
替换代码（ctrl+s保存）
require("@nomiclabs/hardhat-waffle");
require("@nomiclabs/hardhat-ethers");
const fs = require('fs');
// const infuraId = fs.readFileSync(".infuraid").toString().trim() || "";
require('dotenv').config();
task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
const accounts = await hre.ethers.getSigners();
for (const account of accounts) {
console.log(account.address);
}
});
module.exports = {
defaultNetwork: "hardhat",
networks: {
hardhat: {
chainId: 1337
},
goerli: {
url: process.env.REACT_APP_ALCHEMY_API_URL,
accounts: [ process.env.REACT_APP_PRIVATE_KEY ]
}
},
solidity: {
version: "0.8.4",
settings: {
optimizer: {
enabled: true,
runs: 200
}
}
}
};
导航到下面地址注册并登录
https://app.pinata.cloud/signup
创建key
点击创建，然后会弹出一个窗口，将其中的信息复制
在.env中添加配置(记得保存)
REACT_APP_PINATA_KEY="<YOUR_PINATA_KEY>" #上图的API Key
REACT_APP_PINATA_SECRET="<YOUR_PINATA_SECRET>" #上图的API Secret
打开NFTMarketplace.sol文件，替换代码
替换代码：替换完记得保存
//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;
//Console functions to help debug the smart contract just like in Javascript
import "hardhat/console.sol";
//OpenZeppelin's NFT Standard Contracts. We will extend functions from this in our implementation
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
contract NFTMarketplace is ERC721URIStorage {
using Counters for Counters.Counter;
//对应于使用此智能合约铸造的 NFT 的最新代币 ID。tokenIDs 映射到的是包含相应 NFT 元数据的 URL
Counters.Counter private _tokenIds;
//对市场上出售的商品数量的计数
Counters.Counter private _itemsSold;
//智能合约的所有者
address payable owner;
//任何用户在市场上列出其 NFT 所需支付的价格
uint256 listPrice = 0.01 ether;
//指示 NFT 数据的存储格式
struct ListedToken {
uint256 tokenId;
address payable owner;
address payable seller;
uint256 price;
bool currentlyListed;
}
//成功列出Token时发出的事件
event TokenListedSuccess (
uint256 indexed tokenId,
address owner,
address seller,
uint256 price,
bool currentlyListed
);
//所有现有 tokenId 到对应 NFT 代币的映射
mapping(uint256 => ListedToken) private idToListedToken;
constructor() ERC721("NFTMarketplace", "NFTM") {
owner = payable(msg.sender);
}
//The first time a token is created, it is listed here
function createToken(string memory tokenURI, uint256 price) public payable returns (uint) {
//Increment the tokenId counter, which is keeping track of the number of minted NFTs
_tokenIds.increment();
uint256 newTokenId = _tokenIds.current();
//Mint the NFT with tokenId newTokenId to the address who called createToken
_safeMint(msg.sender, newTokenId);
//Map the tokenId to the tokenURI (which is an IPFS URL with the NFT metadata)
_setTokenURI(newTokenId, tokenURI);
//Helper function to update Global variables and emit an event
createListedToken(newTokenId, price);
return newTokenId;
}
function createListedToken(uint256 tokenId, uint256 price) private {
//Make sure the sender sent enough ETH to pay for listing
require(msg.value == listPrice, "Hopefully sending the correct price");
//Just sanity check
require(price > 0, "Make sure the price isn't negative");
//Update the mapping of tokenId's to Token details, useful for retrieval functions
idToListedToken[tokenId] = ListedToken(
tokenId,
payable(address(this)),
payable(msg.sender),
price,
true
);
_transfer(msg.sender, address(this), tokenId);
//Emit the event for successful transfer. The frontend parses this message and updates the end user
emit TokenListedSuccess(
tokenId,
address(this),
msg.sender,
price,
true
);
}
//获取所有 NFT
function getAllNFTs() public view returns (ListedToken[] memory) {
uint nftCount = _tokenIds.current();
ListedToken[] memory tokens = new ListedTokenUnsupported embed;
uint currentIndex = 0;
//at the moment currentlyListed is true for all, if it becomes false in the future we will
//filter out currentlyListed == false over here
for(uint i=0;i<nftCount;i++)
{
uint currentId = i + 1;
ListedToken storage currentItem = idToListedToken[currentId];
tokens[currentIndex] = currentItem;
currentIndex += 1;
}
//the array 'tokens' has the list of all NFTs in the marketplace
return tokens;
}
//获取MyNFT
function getMyNFTs() public view returns (ListedToken[] memory) {
uint totalItemCount = _tokenIds.current();
uint itemCount = 0;
uint currentIndex = 0;
//Important to get a count of all the NFTs that belong to the user before we can make an array for them
for(uint i=0; i < totalItemCount; i++)
{
if(idToListedToken[i+1].owner == msg.sender || idToListedToken[i+1].seller == msg.sender){
itemCount += 1;
}
}
//Once you have the count of relevant NFTs, create an array then store all the NFTs in it
ListedToken[] memory items = new ListedTokenUnsupported embed;
for(uint i=0; i < totalItemCount; i++) {
if(idToListedToken[i+1].owner == msg.sender || idToListedToken[i+1].seller == msg.sender) {
uint currentId = i+1;
ListedToken storage currentItem = idToListedToken[currentId];
items[currentIndex] = currentItem;
currentIndex += 1;
}
}
return items;
}
/**
当用户在个人资料页面点击“购买此 NFT”时，该功能被触发
如果用户支付了与 NFT 价格相等的 ETH，NFT 将被转移到新地址，销售收益将发送给卖家。
*/
function executeSale(uint256 tokenId) public payable {
uint price = idToListedToken[tokenId].price;
address seller = idToListedToken[tokenId].seller;
require(msg.value == price, "Please submit the asking price in order to complete the purchase");
//update the details of the token
idToListedToken[tokenId].currentlyListed = true;
idToListedToken[tokenId].seller = payable(msg.sender);
_itemsSold.increment();
//Actually transfer the token to the new owner
_transfer(address(this), msg.sender, tokenId);
//approve the marketplace to sell NFTs on your behalf
approve(address(this), tokenId);
//Transfer the listing fee to the marketplace creator
payable(owner).transfer(listPrice);
//Transfer the proceeds from the sale to the seller of the NFT
payable(seller).transfer(msg.value);
}
//以下都为辅助函数，测试合约功能
function updateListPrice(uint256 _listPrice) public payable {
require(owner == msg.sender, "Only owner can update listing price");
listPrice = _listPrice;
}
function getListPrice() public view returns (uint256) {
return listPrice;
}
function getLatestIdToListedToken() public view returns (ListedToken memory) {
uint256 currentTokenId = _tokenIds.current();
return idToListedToken[currentTokenId];
}
function getListedTokenForId(uint256 tokenId) public view returns (ListedToken memory) {
return idToListedToken[tokenId];
}
function getCurrentToken() public view returns (uint256) {
return _tokenIds.current();
}
}
打开deploy.js文件，替换代码
替换代码：记得保存
const { ethers } = require("hardhat");
const hre = require("hardhat");
const fs = require("fs");
async function main() {
//get the signer that we will use to deploy
const [deployer] = await ethers.getSigners();
//Get the NFTMarketplace smart contract object and deploy it
const Marketplace = await hre.ethers.getContractFactory("NFTMarketplace");
const marketplace = await Marketplace.deploy();
await marketplace.deployed();
//Pull the address and ABI out while you deploy, since that will be key in interacting with the smart contract later
const data = {
address: marketplace.address,
abi: JSON.parse(marketplace.interface.format('json'))
}
//This writes the ABI and address to the marketplace.json
//This data is then used by frontend files to connect with the smart contract
fs.writeFileSync('./src/Marketplace.json', JSON.stringify(data))
}
main()
.then(() => process.exit(0))
.catch((error) => {
console.error(error);
process.exit(1);
});
先强行把私钥和url写入代码里（记得保存不然不生效）
我们输入
npx hardhat run --network goerli scripts/deploy.js
部署合约，部署完成后我们可以在marketplace.json文件中查看合约地址和ABI。
当你看到生成了一下的文件则说明你已经成功部署了
我们在部署的json文件中也可以找到合约的地址，我们去浏览器查看下帝哥部署的合约地址是：0xa8b8DF1472CC853137483DF139e0c08e7C8F5035
将pinata.js文件中的代码替换
替换代码：记得保存
//require('dotenv').config();
const key = process.env.REACT_APP_PINATA_KEY;
const secret = process.env.REACT_APP_PINATA_SECRET;
const axios = require('axios');
const FormData = require('form-data');
export const uploadJSONToIPFS = async(JSONBody) => {
const url = `https://api.pinata.cloud/pinning/pinJSONToIPFS`;
//making axios POST request to Pinata ⬇️
return axios
.post(url, JSONBody, {
headers: {
pinata_api_key: key,
pinata_secret_api_key: secret,
}
})
.then(function (response) {
return {
success: true,
pinataURL: "https://gateway.pinata.cloud/ipfs/" + response.data.IpfsHash
};
})
.catch(function (error) {
console.log(error)
return {
success: false,
message: error.message,
}
});
};
export const uploadFileToIPFS = async(file) => {
const url = `https://api.pinata.cloud/pinning/pinFileToIPFS`;
//making axios POST request to Pinata ⬇️
let data = new FormData();
data.append('file', file);
const metadata = JSON.stringify({
name: 'testname',
keyvalues: {
exampleKey: 'exampleValue'
}
});
data.append('pinataMetadata', metadata);
//pinataOptions are optional
const pinataOptions = JSON.stringify({
cidVersion: 0,
customPinPolicy: {
regions: [
{
id: 'FRA1',
desiredReplicationCount: 1
},
{
id: 'NYC1',
desiredReplicationCount: 2
}
]
}
});
data.append('pinataOptions', pinataOptions);
return axios
.post(url, data, {
maxBodyLength: 'Infinity',
headers: {
'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
pinata_api_key: key,
pinata_secret_api_key: secret,
}
})
.then(function (response) {
console.log("image uploaded", response.data.IpfsHash)
return {
success: true,
pinataURL: "https://gateway.pinata.cloud/ipfs/" + response.data.IpfsHash
};
})
.catch(function (error) {
console.log(error)
return {
success: false,
message: error.message,
}
});
};
将SellNFT.js文件代码进行替换
替换代码：记得保存
import Navbar from "./Navbar";
import { useState } from "react";
import { uploadFileToIPFS, uploadJSONToIPFS } from "../pinata";
import Marketplace from '../Marketplace.json';
import { useLocation } from "react-router";
export default function SellNFT () {
const [formParams, updateFormParams] = useState({ name: '', description: '', price: ''});
const [fileURL, setFileURL] = useState(null);
const ethers = require("ethers");
const [message, updateMessage] = useState('');
const location = useLocation();
//This function uploads the NFT image to IPFS
async function OnChangeFile(e) {
var file = e.target.files[0];
//check for file extension
try {
//upload the file to IPFS
const response = await uploadFileToIPFS(file);
if(response.success === true) {
console.log("Uploaded image to Pinata: ", response.pinataURL)
setFileURL(response.pinataURL);
}
}
catch(e) {
console.log("Error during file upload", e);
}
}
//This function uploads the metadata to IPDS
async function uploadMetadataToIPFS() {
const {name, description, price} = formParams;
//Make sure that none of the fields are empty
if( !name || !description || !price || !fileURL)
return;
const nftJSON = {
name, description, price, image: fileURL
}
try {
//upload the metadata JSON to IPFS
const response = await uploadJSONToIPFS(nftJSON);
if(response.success === true){
console.log("Uploaded JSON to Pinata: ", response)
return response.pinataURL;
}
}
catch(e) {
console.log("error uploading JSON metadata:", e)
}
}
async function listNFT(e) {
e.preventDefault();
//Upload data to IPFS
try {
const metadataURL = await uploadMetadataToIPFS();
//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();
updateMessage("Please wait.. uploading (upto 5 mins)")
//Pull the deployed contract instance
let contract = new ethers.Contract(Marketplace.address, Marketplace.abi, signer)
//massage the params to be sent to the create NFT request
const price = ethers.utils.parseUnits(formParams.price, 'ether')
let listingPrice = await contract.getListPrice()
listingPrice = listingPrice.toString()
//actually create the NFT
let transaction = await contract.createToken(metadataURL, price, { value: listingPrice })
await transaction.wait()
alert("Successfully listed your NFT!");
updateMessage("");
updateFormParams({ name: '', description: '', price: ''});
window.location.replace("/")
}
catch(e) {
alert( "Upload error"+e )
}
}
console.log("Working", process.env);
return (
<div className="">
<Navbar></Navbar>
<div className="flex flex-col place-items-center mt-10" id="nftForm">
<form className="bg-white shadow-md rounded px-8 pt-4 pb-8 mb-4">
<h3 className="text-center font-bold text-purple-500 mb-8">Upload your NFT to the marketplace</h3>
<div className="mb-4">
<label className="block text-purple-500 text-sm font-bold mb-2" htmlFor="name">NFT Name</label>
<input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Axie#4563" onChange={e => updateFormParams({...formParams, name: e.target.value})} value={formParams.name}></input>
</div>
<div className="mb-6">
<label className="block text-purple-500 text-sm font-bold mb-2" htmlFor="description">NFT Description</label>
<textarea className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" cols="40" rows="5" id="description" type="text" placeholder="Axie Infinity Collection" value={formParams.description} onChange={e => updateFormParams({...formParams, description: e.target.value})}></textarea>
</div>
<div className="mb-6">
<label className="block text-purple-500 text-sm font-bold mb-2" htmlFor="price">Price (in ETH)</label>
<input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="number" placeholder="Min 0.01 ETH" step="0.01" value={formParams.price} onChange={e => updateFormParams({...formParams, price: e.target.value})}></input>
</div>
<div>
<label className="block text-purple-500 text-sm font-bold mb-2" htmlFor="image">Upload Image</label>
<input type={"file"} onChange={OnChangeFile}></input>
</div>
<br></br>
<div className="text-green text-center">{message}</div>
<button onClick={listNFT} className="font-bold mt-10 w-full bg-purple-500 text-white rounded p-2 shadow-lg">
List NFT
</button>
</form>
</div>
</div>
)
}
将Marketplace.js代码进行替换
替换代码记得保存
import Navbar from "./Navbar";
import NFTTile from "./NFTTile";
import MarketplaceJSON from "../Marketplace.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);
let meta = await axios.get(tokenURI);
meta = meta.data;
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>
);
}
将Profile.js文件代码替换
替换代码记得保存
import Navbar from "./Navbar";
import { useLocation, useParams } from 'react-router-dom';
import MarketplaceJSON from "../Marketplace.json";
import axios from "axios";
import { useState } from "react";
import NFTTile from "./NFTTile";
export default function Profile () {
const [data, updateData] = useState([]);
const [address, updateAddress] = useState("0x");
const [totalPrice, updateTotalPrice] = useState("0");
const [dataFetched, updateFetched] = useState(false);
async function getNFTData(tokenId) {
const ethers = require("ethers");
let sumPrice = 0;
//After adding your Hardhat network to your metamask, this code will get providers and signers
const provider = new ethers.providers.Web3Provider(window.ethereum);
await provider.send('eth_requestAccounts', []);
const signer = provider.getSigner();
const addr = await signer.getAddress();
//Pull the deployed contract instance
let contract = new ethers.Contract(MarketplaceJSON.address, MarketplaceJSON.abi, signer)
//create an NFT Token
let transaction = await contract.getMyNFTs()
/*
* Below function takes the metadata from tokenURI and the data returned by getMyNFTs() contract function
* and creates an object of information that is to be displayed
*/
const items = await Promise.all(transaction.map(async i => {
const tokenURI = await contract.tokenURI(i.tokenId);
let meta = await axios.get(tokenURI);
meta = meta.data;
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,
}
sumPrice += Number(price);
return item;
}))
updateData(items);
updateFetched(true);
updateAddress(addr);
updateTotalPrice(sumPrice.toPrecision(3));
}
const params = useParams();
const tokenId = params.tokenId;
if(!dataFetched)
getNFTData(tokenId);
return (
<div className="profileClass" style={{"min-height":"100vh"}}>
<Navbar></Navbar>
<div className="profileClass">
<div className="flex text-center flex-col mt-11 md:text-2xl text-white">
<div className="mb-5">
<h2 className="font-bold">Wallet Address</h2>
{address}
</div>
</div>
<div className="flex flex-row text-center justify-center mt-10 md:text-2xl text-white">
<div>
<h2 className="font-bold">No. of NFTs</h2>
{data.length}
</div>
<div className="ml-20">
<h2 className="font-bold">Total Value</h2>
{totalPrice} ETH
</div>
</div>
<div className="flex flex-col text-center items-center mt-11 text-white">
<h2 className="font-bold">Your NFTs</h2>
<div className="flex justify-center flex-wrap max-w-screen-xl">
{data.map((value, index) => {
return <NFTTile data={value} key={index}></NFTTile>;
})}
</div>
<div className="mt-10 text-xl">
{data.length == 0 ? "Oops, No NFT data to display (Are you logged in?)":""}
</div>
</div>
</div>
</div>
)
};
将NFTPage.js文件代码替换
替换代码记得保存
import Navbar from "./Navbar";
import axie from "../tile.jpeg";
import { useLocation, useParams } from 'react-router-dom';
import MarketplaceJSON from "../Marketplace.json";
import axios from "axios";
import { useState } from "react";
export default function NFTPage (props) {
const [data, updateData] = useState({});
const [dataFetched, updateDataFetched] = useState(false);
const [message, updateMessage] = useState("");
const [currAddress, updateCurrAddress] = useState("0x");
async function getNFTData(tokenId) {
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();
const addr = await signer.getAddress();
//Pull the deployed contract instance
let contract = new ethers.Contract(MarketplaceJSON.address, MarketplaceJSON.abi, signer)
//create an NFT Token
const tokenURI = await contract.tokenURI(tokenId);
const listedToken = await contract.getListedTokenForId(tokenId);
let meta = await axios.get(tokenURI);
meta = meta.data;
console.log(listedToken);
let item = {
price: meta.price,
tokenId: tokenId,
seller: listedToken.seller,
owner: listedToken.owner,
image: meta.image,
name: meta.name,
description: meta.description,
}
console.log(item);
updateData(item);
updateDataFetched(true);
console.log("address", addr)
updateCurrAddress(addr);
}
async function buyNFT(tokenId) {
try {
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);
const salePrice = ethers.utils.parseUnits(data.price, 'ether')
updateMessage("Buying the NFT... Please Wait (Upto 5 mins)")
//run the executeSale function
let transaction = await contract.executeSale(tokenId, {value:salePrice});
await transaction.wait();
alert('You successfully bought the NFT!');
updateMessage("");
}
catch(e) {
alert("Upload Error"+e)
}
}
const params = useParams();
const tokenId = params.tokenId;
if(!dataFetched)
getNFTData(tokenId);
return(
<div style={{"min-height":"100vh"}}>
<Navbar></Navbar>
<div className="flex ml-20 mt-20">
<img src={data.image} alt="" className="w-2/5" />
<div className="text-xl ml-20 space-y-8 text-white shadow-2xl rounded-lg border-2 p-5">
<div>
Name: {data.name}
</div>
<div>
Description: {data.description}
</div>
<div>
Price: <span className="">{data.price + " ETH"}</span>
</div>
<div>
Owner: <span className="text-sm">{data.owner}</span>
</div>
<div>
Seller: <span className="text-sm">{data.seller}</span>
</div>
<div>
{ currAddress == data.owner || currAddress == data.seller ?
<button className="enableEthereumButton bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm" onClick={() => buyNFT(tokenId)}>Buy this NFT</button>
: <div className="text-emerald-700">You are the owner of this NFT</div>
}
<div className="text-green text-center mt-3">{message}</div>
</div>
</div>
</div>
</div>
)
}
将navbar.js代码替换
替换代码记得保存
import logo from '../logo_3.png';
import fullLogo from '../full_logo.png';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router';
function Navbar() {
const [connected, toggleConnect] = useState(false);
const location = useLocation();
const [currAddress, updateAddress] = useState('0x');
async function getAddress() {
const ethers = require("ethers");
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const addr = await signer.getAddress();
updateAddress(addr);
}
function updateButton() {
const ethereumButton = document.querySelector('.enableEthereumButton');
ethereumButton.textContent = "Connected";
ethereumButton.classList.remove("hover:bg-blue-70");
ethereumButton.classList.remove("bg-blue-500");
ethereumButton.classList.add("hover:bg-green-70");
ethereumButton.classList.add("bg-green-500");
}
async function connectWebsite() {
const chainId = await window.ethereum.request({ method: 'eth_chainId' });
if(chainId !== '0x5')
{
//alert('Incorrect network! Switch your metamask network to Rinkeby');
await window.ethereum.request({
method: 'wallet_switchEthereumChain',
params: [{ chainId: '0x5' }],
})
}
await window.ethereum.request({ method: 'eth_requestAccounts' })
.then(() => {
updateButton();
console.log("here");
getAddress();
window.location.replace(location.pathname)
});
}
useEffect(() => {
let val = window.ethereum.isConnected();
if(val)
{
console.log("here");
getAddress();
toggleConnect(val);
updateButton();
}
window.ethereum.on('accountsChanged', function(accounts){
window.location.replace(location.pathname)
})
});
return (
<div className="">
<nav className="w-screen">
<ul className='flex items-end justify-between py-3 bg-transparent text-white pr-5'>
<li className='flex items-end ml-5 pb-2'>
<Link to="/">
<img src={fullLogo} alt="" width={120} height={120} className="inline-block -mt-2"/>
<div className='inline-block font-bold text-xl ml-2'>
NFT Marketplace
</div>
</Link>
</li>
<li className='w-2/6'>
<ul className='lg:flex justify-between font-bold mr-10 text-lg'>
{location.pathname === "/" ?
<li className='border-b-2 hover:pb-0 p-2'>
<Link to="/">Marketplace</Link>
</li>
:
<li className='hover:border-b-2 hover:pb-0 p-2'>
<Link to="/">Marketplace</Link>
</li>
}
{location.pathname === "/sellNFT" ?
<li className='border-b-2 hover:pb-0 p-2'>
<Link to="/sellNFT">List My NFT</Link>
</li>
:
<li className='hover:border-b-2 hover:pb-0 p-2'>
<Link to="/sellNFT">List My NFT</Link>
</li>
}
{location.pathname === "/profile" ?
<li className='border-b-2 hover:pb-0 p-2'>
<Link to="/profile">Profile</Link>
</li>
:
<li className='hover:border-b-2 hover:pb-0 p-2'>
<Link to="/profile">Profile</Link>
</li>
}
<li>
<button className="enableEthereumButton bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm" onClick={connectWebsite}>{connected? "Connected":"Connect Wallet"}</button>
</li>
</ul>
</li>
</ul>
</nav>
<div className='text-white text-bold text-right mr-10 text-sm'>
{currAddress !== "0x" ? "Connected to":"Not Connected. Please login to view NFTs"} {currAddress !== "0x" ? (currAddress.substring(0,15)+'...'):""}
</div>
</div>
);
}
export default Navbar;
项目输入npm start，启动项目，连接钱包，选择list my nft目录
下图输入Y
如果下图弹出的网页不能连接钱包或者显示异常把之前的终端关闭然后在重复测试的步骤，如果还显示异常不能连接钱包请检查替换的代码
