前言

继上一篇《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代码

  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的相关信息

  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格式说明：

  
  { 
  
     "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" }
                ]//关于属性的设置
              }

  效果图

<div style="display:flex; gap:8px;flex-wrap:wrap;"> <img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/5b37a49cb9d946cf9b49d9eea69a490a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyo6KW_:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMjQzNjE3MzQ5Njg0NTU0OSJ9&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1756651832&x-orig-sign=8fEarL9qnd9LnBXRFD7rMREsUPA%3D" alt="图1转存失败，建议直接上传图片文件" width="200"> <img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/32c848be99864d1bac8bb8721114e948~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyo6KW_:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMjQzNjE3MzQ5Njg0NTU0OSJ9&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1756651888&x-orig-sign=UhIcWXmHowy0ssiHhf0j0WoWue8%3D" alt="图1转存失败，建议直接上传图片文件" width="200"> <img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/c2b633f852a742b8a01c2f9b01c64946~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pyo6KW_:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMjQzNjE3MzQ5Njg0NTU0OSJ9&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1756652094&x-orig-sign=05QqI7ziJNz%2B3Wsm5kLheaRJpcU%3D" alt="图1转存失败，建议直接上传图片文件" width="200"> </div>

总结

NFT「铸造」模块（合约 + 前端）已 100 % 完成并通过测试，正式封板。\ 接下来无缝进入下一功能模块的开发，继续按「合约先行 → 测试覆盖 → 前端接入」的节奏推进。