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

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

相关推荐
木西7 小时前
React Native DApp 开发全栈实战·从 0 到 1 系列(铸造NFT-合约部分)
web3·智能合约·solidity
yzzzzzzzzzzzzzzzzz7 小时前
ES6/ES2015 - ES16/ES2025
前端·ecmascript·es6
Bling_Bling_17 小时前
Vue2 与 Vue3 路由钩子的区别及用法详解
开发语言·前端·vue
IT_陈寒8 小时前
SpringBoot性能翻倍秘籍:5个90%开发者不知道的JVM调优实战技巧
前端·人工智能·后端
前端灵派派9 小时前
openlayer源码转cesium
前端
Jacob02349 小时前
JavaScript 的进化之旅 Part 2:现代特性与算法优化实战
前端·javascript·性能优化
qb9 小时前
vue3.5.18源码:深入watch api底层实现
前端·vue.js·架构
OEC小胖胖9 小时前
掌握表单:React中的受控组件与表单处理
前端·javascript·react.js·前端框架·react·web
coding随想9 小时前
手机旋转也能触发代码?揭秘前端DeviceOrientation事件的神奇力量!
前端