📖NFTMarket

介绍

启动项目

准备工作

1. npx hardhat init
(JS project)

2. 删除自带的Lock.sol，创建新的NFTstore.sol

3. 许可证明：

1. npm install @openzeppelin/contracts

编写智能合约

测试智能合约

1. 删除test目录下的Lock.js，并创建NFTStoreTest.js

2. 编译智能合约：npx hardhat compile

部署Sepolia测试网

1. 创建.env文件，添加代码：

1. 打开alchemy网站：https://www.alchemy.com/；
登录后点击create new app；
选择以太坊sepolia测试；

1. npm install dotenv
在hardhat.config.js顶部添加：
networks下添加：

2. ignition\modules下的Lock.js改名为Token.js；
删掉除第一行外所有代码

1. npx hardhat ignition deploy ./ignition/module/Token.js --network sepolia
（需要一些sepoliaETH）

设置next.js项目

1. npx create-next-app

1. 在my-app\src\app\page.js中删除return()中的代码
添加测试代码：

2. 终端进入my-app

3. npm run dev
可以在localhost:3000中看到此项目页面

4. 在my-app\src\app下新建文件夹components\header，然后header下新建Header.js和Header.module.css

连接账户钱包

1. my-app\src下新建文件夹context，然后context下新建wallet.js

2. wallet.js

1. my-app\src\app下的layout.js中添加：

1. 在my-app下终端中npm install ethers

2. Header.js

1. Header.module.css

1. my-app\src\components下新建文件夹footer，然后新建Footer.js和Footer.module.css

2. Footer.js

1. 删除my-app\public下的next.svg和vercel.svg，换成以下图片https://github.com/priyanshuthakur2002/NFTSTORE/tree/main/client/public

2. page.js

1. page.module.css

建立Listing Page

1. 进入pinata页面，https://app.pinata.cloud/developers/api-keys；
新建 API-Key；



再copy all；

2. 在.\my-app目录下新建.env文件

1. 进入my-app目录，npm install axios

2. my-app\src\app下新建pinata.js

1. app\sellNFT\page.js

1. app\下新建market.json。
将artifacts\contracts\NFTStore\NFTStore.json的内容复制到market.json；
上部添加
然后把.env文件中的NFTStore地址粘贴到此处

1. sellNFT.module.css

建立Market Page

1. app\下新建文件夹market，新建page.js和market.module.css。
app\components下新建nftCard文件夹，新建NFTCard.js和NFTCard.module.css

2. NFTCard.js

1. app\下新建utils.js

1. market\page.js

1. next.config.mjs添加

1. NFTCard.module.css

1. market.module.css

建立个人页面

1. app\下新建profile文件夹，包含page.js和profile.module.css

2. profile\page.js

1. profile\profile.module.css

建立NFT page

1. 新建app\nft\tokenId文件夹，包含page.js 和 nft.module.css

2. page.js

1. nft.module.css