前言
继上一篇《React Native DApp 开发全栈实战·从 0 到 1 系列(铸造NFT-合约部分)》,本文开始着重介绍使用ethers与合约进行交互的内容
前置准备
- hardhat启动网络节点 :npx hardhat node
- 合约编译 :npx hardhat compile 生成对应的xxx.json用获取abi等相关信息
- 合约部署 :npx hardhat deploy --tags MyNFT 获取合约地址
- 节点的私钥导入钱包 :用来与合约交互时支付对应的gas费
核心代码
- 说明 :实现铸造和预览读取相关信息
- 编译部署合约获取合约地址 :获取合约地址,以及xxxxx.json
- 铸造NFT代码
javascript
const mintNFT=async ()=>{
const provider = new ethers.providers.Web3Provider(window.ethereum);
console.log("创建NFT")
await provider.send('eth_requestAccounts', []); // 唤起钱包
const signer = await provider.getSigner();
const nft = new ethers.Contract("0xa82fF9aFd8f496c3d6ac40E2a0F282E47488CFc9",abi, signer);
console.log(nft)
const uri = "https://zygomorphic-magenta-bobolink.myfilebase.com/ipfs/QmQT8VpmWQVhUhoDCEK1mdHXaFaJ3KawkRxHm96GUhrXLB"
const price = ethers.utils.parseEther(priceV.toString());
console.log(price)
try{
const tx= await nft.create(uri,price,royalty,{value:price})
await tx.wait()
console.log(await nft.tokenURI(1))
console.log("nft的所有者",await nft.ownerOf(1))
const mintPrice=await nft.mintPrice(1)
console.log("nft的价格",ethers.utils.formatEther(mintPrice))
router.push({
pathname:"/home/nftDetails",
params:{
}
})
}catch(err){
console.log(err)
}
}
预览读取铸造NFT的相关信息
ini
const NFTDetailFn= async()=>{
const provider = new ethers.providers.Web3Provider(window.ethereum);
console.log("创建NFT")
await provider.send('eth_requestAccounts', []); // 唤起钱包
const signer = await provider.getSigner();
const nft = new ethers.Contract("0xa82fF9aFd8f496c3d6ac40E2a0F282E47488CFc9",abi, signer);
const tokenId = 3;//
const tokenURI = await nft.tokenURI(tokenId);
// console.log("tokenURI",tokenURI);
const meta= await fetch(tokenURI).then(r => r.json());//解析json文件
// console.log("meta",name,image,description,attributes);
setNftUrl(meta.image)
setNameNFT(meta.name)
setDescriptionNFT(meta.description)
const owner = await nft.ownerOf(tokenId);
setNftOwner(owner)
}
补充说明
- 本地测试的时候 :要保证自定义的网络的链id要私钥的网络id保持一致,如果不一致会导致铸造失败
- 文件上传借助filebase :上传图片和json文件,json文件主要对铸造的nft进行相关说明
- ipfs文件json格式说明:
json
{
"description": "This is the zodiac sign chicken",//关于nft的描述
"external_url":"https://openseacreatures.io/3",
"image":"ipfs://QmWH3hY6J31Hcf61aM6A9cCVArKSfh8E4mYbL9yg68kUx8",//指向的图片的url
"name":"chicken",//nft的名字
"attributes": [
{ "trait_type": "Background", "value": "Blue" },
{ "trait_type": "Eyes", "value": "Black" },
{ "trait_type": "Mouth", "value": "Smile" }
]//关于属性的设置
}
效果图
总结
NFT「铸造」模块(合约 + 前端)已 100 % 完成并通过测试,正式封板。
接下来无缝进入下一功能模块的开发,继续按「合约先行 → 测试覆盖 → 前端接入」的节奏推进。