React Native DApp 开发全栈实战·从 0 到 1 系列（铸造NFT-前端部分）

前言

继上一篇《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 % 完成并通过测试，正式封板。

接下来无缝进入下一功能模块的开发，继续按「合约先行 → 测试覆盖 → 前端接入」的节奏推进。