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 % 完成并通过测试,正式封板。

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

相关推荐
天蓝色的鱼鱼6 分钟前
低代码是“未来”还是“骗局”?前端开发者有话说
前端
答案answer37 分钟前
three.js着色器(Shader)实现数字孪生项目中常见的特效
前端·three.js
城管不管41 分钟前
SpringBoot与反射
java·开发语言·前端
JackJiang1 小时前
即时通讯安全篇(三):一文读懂常用加解密算法与网络通讯安全
前端
一直_在路上1 小时前
Go架构师实战:玩转缓存,击破医疗IT百万QPS与“三大天灾
前端·面试
早八睡不醒午觉睡不够的程序猿1 小时前
Vue DevTools 调试提示
前端·javascript·vue.js
恋猫de小郭1 小时前
基于 Dart 的 Terminal UI ,pixel_prompt 这个 TUI 库了解下
android·前端·flutter
天天向上10241 小时前
vue el-form 自定义校验, 校验用户名调接口查重
前端·javascript·vue.js
忧郁的蛋~1 小时前
前端实现网页水印防移除的实战方案
前端
喝奶茶的Blair1 小时前
PHP应用-组件框架&前端模版渲染&三方插件&富文本编辑器&CVE审计(2024小迪安全DAY30笔记)
前端·安全·php