Skip to content

Latest commit

 

History

History
191 lines (106 loc) · 5.96 KB

README.md

File metadata and controls

191 lines (106 loc) · 5.96 KB
Raw

👨‍🎓 Nasus Build NFT DEMO

🎟 NFT Example 🤓

在线预览：🔗 https://nasus.surge.sh/

OpenSea 测试网：🔗 OpenSea

合约地址：🔗 https://rinkeby.etherscan.io/token/0xcd504daa3f87f2de952625ff7bcb549ebdc61e57

🎫 本项目基于 👷‍♀️ HardHat 编译并且部署智能合约.

基于 React 来编写前端界面.

🏆 最终我们的项目会发布到👷‍♀️ OpenSea，欢迎分享给朋友们体验 🚀

步骤 1: 📦 安装依赖 📚

环境准备:

(⚠️ 确保安装 npm 包 npm i -g yarn 而不是 linux package yarn)

git clone [email protected]:Wangpengli0419/NFTDemo.git

安装依赖并启动 HardHat 本地测试环境:

cd NFTDemo
yarn install
yarn chain

打开第二个命令行窗口 🛰 部署本地合约

cd NFTDemo
yarn deploy

打开第三个命令行窗口并启动前端 📱 :

cd NFTDemo
yarn start

执行 yarn deploy --reset 部署一个新的本地合约.

📱 打开 http://localhost:3000 预览前端项目

步骤 2: ⛽️ Gas & Wallets 👛

⛽️ 从水龙头获取 Gas。

image

🦊 不要 连接 MetaMask. 如果你已经连接了 MetaMask,请点击 logout:

image

🔥 本地开发请使用 burner wallets 连接钱包

👛 burner wallets打开一个新的匿名窗口地址栏导航至 http://localhost:3000.右上角有一个新的钱包地址。复制匿名浏览器的地址，并从第一个浏览器向其发送测试资金：

image

👨🏻‍🚒 关闭“匿名”窗口时，帐户将永远丢失。本地开发使用 Burner 钱包非常方便，但发布公共网络时，我们会连接其他的钱包。

步骤 3: 🖨 Mint

✏️ Mint NFTs! 点击 MINT NFT 按钮.

👀 如下图所示:

nft3

👛 打开一个新的 匿名窗口 导航至 http://localhost:3000

🎟 给匿名窗口的地址发送一个 NFT.

👀 如下图所示:

nft5

👛 尝试在 匿名窗口 Mint Nft.

你能在这个地址没有资金的情况下造出 NFT 吗？不能！！ 需要先从水龙头获取 Gas ！

🔏 NFT 智能合约逻辑 YourCollectible.sol 在 packages/hardhat-ts/contracts 目录.

💼 部署合约逻辑 00_deploy_your_collectible.ts 在 packages/hardhat-ts/deploy目录.

📝 前端逻辑入口 YourCollectible.tsx 在 packages/vite-app-ts/src/components/pages/your-collectible 目录.

步骤 4: 💾 部署到测试网! 🛰

在 packages/hardhat-ts/hardhat.config.ts 42 行 defaultNetwork修改为 rinkeby

🔐 使用 yarn generate生成一个 部署合约地址

nft7

👛 使用 yarn account 查看生成的 部署合约地址

nft8

⛽️ 水龙头 faucet.paradigm.xyz 获取测试币 deployer address.

🚀 部署 NFT 智能合约:

yarn deploy

💬 提示: 你可以将hardhat.config.ts的defaultNetwork修改为Rinkeby 也可以使用命令行 yarn deploy --network Rinkeby.

步骤 5: 🚢 启动! 🚁

✏️ (目录 packages/vite-app-ts/src/config) 修改 providersConfig.ts 第 15 行 targetNetworkInfo 为你要部署的测试网络

image

能够在前端看到正确的网络 (http://localhost:3000):

nft10

🎫 点击 MINT NFT 按钮进行 mint .

nft11

步骤 6: 📜 开源区块链浏览器的合约

将在etherscan.io申请到的 api-key 替换到packages/hardhat-ts/package.json 20 行 verify命令.

Screen Shot 2021-11-30 at 10 21 01 AM

使用命令 yarn verify --network your_network 在etherscan.io提交开源合约 🛰

🐟 Open Sea

将我们的 NFT 项目添加至 OpenSea ( create -> submit NFTs -> "or add an existing contract")

🔶 Infura

你需要从 infura.io申请自己的 apikey 并且替换到目录 packages/vite-app-ts/src/models/constants下constants.ts第 2 行:

nft13

恭喜完成 🎉!

📦 构建前端:

yarn build

💽 将前端托管至 surge:

yarn surge

🎖 浏览器输入 托管好的 surge 地址 👩‍❤️‍👨 并分享给朋友们，也可以赠送朋友们 NFT🎖

nft15

🏃 本项目基于 here.