# 百亿项目Alchemy Road to Web3 第七周NFT获取教程

By [tantan](https://paragraph.com/@tantan) · 2022-09-20

---

2019年12月，Alchemy完成**1500万美元A轮融资**，资方为Pantera Capital，斯坦福大学，Coinbase，三星等。

2021年4月，Alchemy以5.05亿美元估值完成**8000万美元B轮融资**，Coatue和Addition领投，DFJ Growth、K5 Global、Chainsmokers（烟鬼组合）、演员Jared Leto和Glazer家族参投。

2021年10月，Alchemy以35亿美元估值完成**2.5亿美元C轮融资**，由a16z领投的。

2022年2月，Alchemy以102亿美元估值完成**2亿美元融资**，Lightspeed与Silver Lake领投。

**Alchemy是一个**背景强大、经费充足、踏实做事、没有发币的团队，这样的项目不刷，难道去刷土狗吗？

并且，Alchemy计划将新资金用于推广Web3采用，这方面的一些举措包括推出Web3 University，就是现在的 Road to Web3 活动，活动为期10周，每周一个NFT。看了下nft数量极少，估计由于任务难度大，很多小伙伴直接放弃，这样的项目若是空投，绝对是大毛。

手把手第七周教程开始：如何从零开始构建 NFT 市场
--------------------------

![](https://storage.googleapis.com/papyrus_images/3bdf3e239dcfc737725f4c4b068c56d1344e91fc1ce755cf183df9afbfa5cfaa.png)

### step1 注册一个 Alchemy 帐户并创建一个新应用程序

1.注册一个 [Alchemy](https://alchemy.com/?a=cn-road-to-week-two)帐户。进入dashboard，点击create app。注册一个 [Alchemy](https://alchemy.com/?a=cn-road-to-week-two)帐户。进入dashboard，点击create app。

![](https://storage.googleapis.com/papyrus_images/15e7f4e45c167abdfe801355453fff50519f494ed30ef9ada6b5316e41409c5a.png)

然后如下设置，点击create app。

![](https://storage.googleapis.com/papyrus_images/27f2083e9669cb5ed9c16702f6aea738dbcfd5a0bbd1e4290d801162583c95e3.png)

点击view key

![](https://storage.googleapis.com/papyrus_images/93c65584d5ceecaceef76eb918f4138989e8d73bb10155638c7621c7383b18b4.png)

复制HTTPS的框内内容。

![](https://storage.googleapis.com/papyrus_images/30863156f55702e9ef4590aef80522f9c474b7c25fb5050bf7e4c5f022012246.png)

### step2 设置您的 MetaMask 钱包以进行开发

1\. 将 MetaMask 连接到 Goerli 网络 ，然后 [使用 Goerli 水龙头请求 Goerli ETH](https://goerlifaucet.com/) 。 您将需要 Goerli ETH 来部署智能合约并将 NFT 上传到您的 NFT 市场。

![](https://storage.googleapis.com/papyrus_images/ff60fa3c85649229a8a913eb886e65e5fc2e6470cc751434dceb4b808e5e96dc.png)

2.点击添加Goerli网络，如图填写（其中RPC URL为step1获取的链接），点击保存即可。

![](https://storage.googleapis.com/papyrus_images/2ce76eaec562e13975fb08c97319e9817b7344db778ee1c4111dfec28d25e43d.png)

![](https://storage.googleapis.com/papyrus_images/5cb9bb323b4a3072f41fb679dfdcb3e99c3296cb2a06297f6efddc0e56f38559.png)

### step3 设置存储库

1.为方便起见，官方已将基本代码上传到 GitHub 存储库。 此代码已编写所有前端，但没有智能合约或与前端的集成。要克隆存储库，请在控制台一步一步运行以下命令：

    git clone https://github.com/alchemyplatform/RTW3-Week7-NFT-Marketplace.git
    
    cd RTW3-Week7-NFT-Marketplace
    
    npm install
    
    npm start
    

![](https://storage.googleapis.com/papyrus_images/cacb53982aaea7ffdeb7ac821bd46af05aaa7aebe06a33fb14dd2779525c02d1.png)

![](https://storage.googleapis.com/papyrus_images/1074861d56b88288332f3bb9f9db14c4442b39223afbd653d606663bf4b318a8.png)

![](https://storage.googleapis.com/papyrus_images/c6a3c8fffecbaccf66bf474c34855c86b00be56e2e9da26a352e56a07d532202.png)

2.运行上面四个指令完毕之后，会跳出这个。

（下面这个图由于我的3000端口还在用，所以是3001端口，大家的估计还是3000啊）

![](https://storage.googleapis.com/papyrus_images/dcec6bc2f4e4f53724bd6c0ca475053db50f1fba840d582ebe55e61f1aa2af12.png)

### step4 设置环境变量和 Hardhat 配置

1.打开vscode，找到您刚才创建的文件夹，点击选择文件夹。

![](https://storage.googleapis.com/papyrus_images/cfae8e9ebae5a29164927257673452fc0f8056b1c6f8f1068bcfc09a0303d811.png)

2.再打开一个控制台，cd进入RTW3-Week7-NFT-Marketplace文件夹，然后输入echo test>.env 创建一个.env文件。

![](https://storage.googleapis.com/papyrus_images/032886316cd6de340db51ee2b290334a49967efd81ec9b9c32a4ca1869ee7162.png)

3.回到vscode，可以看到env文件，在其中粘贴如下代码

    REACT_APP_ALCHEMY_API_URL="<YOUR_API_URL>"（这个是step1中最后得到的HTTPS）
    REACT_APP_PRIVATE_KEY="<YOUR_PRIVATE_KEY>" (这个是您将用于开发的小狐狸钱包的私钥 )       
    

复制这个替换第一行等号后的内容。

![](https://storage.googleapis.com/papyrus_images/70f62dee7fb2cf0107a6e4f76b80936616602e4a92e3afcf033e0bb3cbd747f2.png)

复制私钥替换第二行等号后的内容

![](https://storage.googleapis.com/papyrus_images/7277da7ad86aedd3f4b5603f4506411d56a021acee4ab131475aad60514473f5.png)

![](https://storage.googleapis.com/papyrus_images/d618384374eecd3bb1943e6d0ec2aea7e9a9357fbf641bf1f0a41d6620db4410.png)

4.如果尚未安装，请在控制台输入npm install dotenv --save

![](https://storage.googleapis.com/papyrus_images/f4c9f5029fe5d3a35196142d2f224b8b11be8c146940837896581bdc6a3141bd.png)

5.在您的主目录中，确保将以下代码添加到您的 `hardhat.config.js`文件：（其实就改了env相关的两行代码）

    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://storage.googleapis.com/papyrus_images/cfac6c5bf5a5c013374746a91290d141171f62a9db83938db7bd2a5624c6ce2b.png)

### step5 使用 Piñata 将数据上传到 IPFS

1.进入[pinata官网](https://pinata.cloud/keys) ，选择顶部的“new key”按钮，如图设置，点击create key。

![](https://storage.googleapis.com/papyrus_images/c5460edf8621490786eb7466e2f97f88781bfd8343a0cf5345a7ab8a67c88635.png)

2.然后，您将看到一个包含您的 API 信息的弹出窗口。 将其复制到安全的地方。

![](https://storage.googleapis.com/papyrus_images/715778fb891a1687a5b0c81c184d26861698642555a29afe4c8d84ea91973a8d.png)

3.回到vscode，点开.env文件，在后面加入如下代码。

    REACT_APP_PINATA_KEY="<YOUR_PINATA_KEY>"
    REACT_APP_PINATA_SECRET="<YOUR_PINATA_SECRET>"
    

第一行第二行分别填图示中内容。

![](https://storage.googleapis.com/papyrus_images/d45a0504a5ac83385d89443b793687d4b97acfd839501d2d9c1a025ad7ba96df.png)

填完后如图所示：

![](https://storage.googleapis.com/papyrus_images/5c7ea36969ae571b79ddcaff244f3a46aacaccf2b0273ecd37d805d787f17b80.png)

### step6 编写智能合约

1.在vscode中找到NFTMarketplace.sol文件（在contracts下面），将其中的代码更换为下面的，注意保存。官方有对每一步的解释，可以了解下。

    //SPDX-License-Identifier: Unlicense
    pragma solidity ^0.8.0;
    
    import "hardhat/console.sol";
    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;
        //_tokenIds variable has the most recent minted tokenId
        Counters.Counter private _tokenIds;
        //Keeps track of the number of items sold on the marketplace
        Counters.Counter private _itemsSold;
        //owner is the contract address that created the smart contract
        address payable owner;
        //The fee charged by the marketplace to be allowed to list an NFT
        uint256 listPrice = 0.01 ether;
    
        //The structure to store info about a listed token
        struct ListedToken {
            uint256 tokenId;
            address payable owner;
            address payable seller;
            uint256 price;
            bool currentlyListed;
        }
    
        //the event emitted when a token is successfully listed
        event TokenListedSuccess (
            uint256 indexed tokenId,
            address owner,
            address seller,
            uint256 price,
            bool currentlyListed
        );
    
        //This mapping maps tokenId to token info and is helpful when retrieving details about a tokenId
        mapping(uint256 => ListedToken) private idToListedToken;
    
        constructor() ERC721("NFTMarketplace", "NFTM") {
            owner = payable(msg.sender);
        }
    
        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();
        }
    
        //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
            );
        }
        
        //This will return all the NFTs currently listed to be sold on the marketplace
        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;
        }
        
        //Returns all the NFTs that the current user is owner or seller in
        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;
        }
    
        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);
        }
    
        //We might add a resell token function in the future
        //In that case, tokens won't be listed by default but users can send a request to actually list a token
        //Currently NFTs are listed by default
    }
    

![](https://storage.googleapis.com/papyrus_images/a2f99fdf302be5ad4cbf694c0b44401d9de3759c6356bb7c751b346d9494df45.png)

### step7 在 Goerli 上部署智能合约

1.还是在vscode中，在scripts下面找到一个名为 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);
      });
    

2.然后打开控制台并执行以下命令：npx hardhat run --network goerli scripts/deploy.js

![](https://storage.googleapis.com/papyrus_images/ef7950a2545d2e9bf956f8dafda08e1a8200fc7af3c6bb306fc0a668853587cf.png)

### step8 添加将 NFT 元数据上传到 Piñata 的功能

1.在src中，在名为 `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,
                }
    
        });
    };
    

![](https://storage.googleapis.com/papyrus_images/e8d322e126c27c5aa4020d9c48ece40e70f9871305e166f49411a1afaeb1111a.png)

### step9 将前端与智能合约集成

1.将以下代码添加到您的 src/components/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>
        )
    }
    

![](https://storage.googleapis.com/papyrus_images/a448b5c6d949b7f68584e44ef583e14ab5bcbc633ca5e9afe442926b53c26455.png)

2.将下面的代码粘贴到src/components/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>
    );
    
    }
    

![](https://storage.googleapis.com/papyrus_images/9d205963a66dc0b744190fde16c820ef5d96c27aa59bdf4170bdc55b7f5d16ff.png)

3.将下面的代码粘贴到src/components/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 [dataFetched, updateFetched] = useState(false);
        const [address, updateAddress] = useState("0x");
        const [totalPrice, updateTotalPrice] = useState("0");
    
        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);
            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>
        )
    };
    

![](https://storage.googleapis.com/papyrus_images/1d4e7100783f203752aaecd9612d5f6d88dbc44c94ec09aeb1762c9331f5f022.png)

4.将下面的代码粘贴到src/components/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>
        )
    }
    

![](https://storage.googleapis.com/papyrus_images/3b3f0725f80e0c4ccebecd91a2c0703b97d1b84e4eddfa589ffe61717a7d70c9.png)

上述步骤记得保存。

### step10 测试您的代码

1.在控制台输入npm start，可以看到成功了。可以试一下上传nft和购买nft功能，也可以直接提交。

![](https://storage.googleapis.com/papyrus_images/ca1ea7bbedd56189af584717ba746338b48c3180d67df97c467ba4952085becb.png)

![](https://storage.googleapis.com/papyrus_images/54182ffa932e4c488e55f254bd8c121f26c258f5fc3e49a3712492cb52147560.png)

### step11 提交项目

可以提交项目github，具体方式见第六周教程最后

也可以提交部署的合约地址，在这里

![](https://storage.googleapis.com/papyrus_images/244f13f274edf8c35ed5832128349c8fb3c18c9f6369791ed4a86384b589bbfb.png)

### step12 领取nft

---

*Originally published on [tantan](https://paragraph.com/@tantan/alchemy-road-to-web3-nft)*