web3.js調(diào)用鏈上的方法操作NFT區(qū)塊鏈MetaMask詳解

更新時間：2022年08月24日 09:32:13 作者：何明暄

這篇文章主要為大家介紹了web3.js調(diào)用鏈上的方法操作NFT區(qū)塊鏈MetaMask詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

實例化鏈上方法

公司的項目全是區(qū)塊鏈項目，最近這個項目是要構(gòu)建一個鏈上的游戲社區(qū)，目前這個功能是用戶可以質(zhì)押NFT到游戲的鏈上，然后游戲那邊就可以有人去參加競賽，然后質(zhì)押人可以贖回NFT。

MetaMask

web3.js

MetaMask

瀏覽器插件用的是小狐貍MetaMask

網(wǎng)絡(luò)用的是測試網(wǎng)絡(luò)Rinkeby，記得切換網(wǎng)絡(luò)，把設(shè)置 > 高級 > 顯示測試網(wǎng)絡(luò) 打開

let hexChainId = window.web3.utils.toHex(4) // 4就是Rinkeby測試網(wǎng)絡(luò)
await window.ethereum.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: hexChainId }],
})

首先要初始化web3

yarn add web3

import Web3 from 'web3'
export const web3Init = () => {
    // web3初始化
    let web3 = window.web3
    if (typeof web3 !== 'undefined') {
        // web3.currentProvider
        web3 = new Web3(window.ethereum) // 取小狐貍的地址
    } else {
        web3 = new Web3(
            new Web3.providers.HttpProvider(‘項目鏈接')
        )
    }
    window.web3 = web3 // web3鏈接
}

現(xiàn)在就把web3掛載到window上了鏈接小狐貍 await ethereum.request({ method: 'eth_requestAccounts' })這一句代碼就可以，返回的是錢包地址組成的字符串

實例化鏈

之后就是實例化鏈了，我是存在vuex里進項目第一步是初始化游戲鏈，游戲鏈是固定的

const texasPokerContract = new window.web3.eth.Contract(
    texasPokerJson,
    import.meta.env.VITE_TEXASPOKER_ADDRESS
)

第一個參數(shù)就是鏈的ABI

第二個參數(shù)就是項目鏈上地址

還需要實例一個NFT，但是NFT是不固定的，我們操作哪個NFT就用哪個NFT的鏈上鏈接調(diào)用這個方法實例，把這兩個都存在store里。

調(diào)用鏈上方法授權(quán)

export function approve(tokenId) {
    // 授權(quán)德州撲克鏈
    return new Promise((resolve, reject) => {
        const texasPokerContract = store.state.texasPokerContract // 獲取德州撲克合約
        const nftContract = store.state.nftContract // 獲取當(dāng)前操作nft的合約
        let optionsData = nftContract.methods.approve(texasPokerContract.options.address, tokenId).encodeABI()
        callContractMethod(optionsData, nftContract, 0, (res) => {
            resolve(res)
        })
    })
}
async function callContractMethod(optionsData, contractExample, values = 0, callback) {
    // 調(diào)用合約上的方法
    /**
     * @param optionsData 發(fā)送方法的對象
     * @param contractExample 要操作的合約實例
     * @param values value值默認是0
     * @param callback 回調(diào)函數(shù)
     */
    const account = store.state.persistence.assets // 當(dāng)前錢包地址
    if (!account) {
        return
    }
    const gasPrice = await window.web3.eth.getGasPrice() // 獲取gas費
    let options = {
        from: account,
        to: contractExample.options.address,
        value: values,
        data: optionsData,
        gasPrice: gasPrice,
    }
    window.web3.eth
        .sendTransaction(options)
        .on('error', function (error) {
            console.error('error', error)
            callback && callback(false)
        })
        .then(function () {
            callback && callback(true)
        })
}

這段代碼業(yè)務(wù)性很強，但是根本上也就是調(diào)用了window.web3.eth .sendTransaction(options)這個方法

let options = {
    from: account, // 你的當(dāng)前地址
    to: contractExample.options.address, // 你要操作的鏈上地址
    value: values, // 方法要帶的參數(shù)，默認填0
    data: optionsData, // *關(guān)鍵 要調(diào)用的方法nftContract.methods.approve(要帶的參數(shù)).encodeABI()
    gasPrice: gasPrice, // 此次操作的gas費也就是手續(xù)費
}

不出意外就可以調(diào)起小狐貍進行授權(quán)了

調(diào)用游戲鏈上方法質(zhì)押NFT

這一步跟上一步類似只是之前調(diào)用的是NFT鏈上的方法，現(xiàn)在調(diào)用的是我們自己游戲鏈上的方法

export function pledgeNFT(tokenId, amountp, timer) {
    // 質(zhì)押NFT
    /**
     * @param tokenId tokenId
     * @param amountp 質(zhì)押價格
     * @param timer 質(zhì)押天數(shù)的時間戳
     */
    return new Promise(async (resolve, reject) => {
        const texasPokerContract = store.state.texasPokerContract // 獲取德州撲克合約
        const getBlockTimes = await texasPokerContract.methods.getBlockTime().call() // 獲取區(qū)塊鏈時間
        const nftContract = store.state.nftContract // 獲取當(dāng)前操作nft的合約
        const token = nftContract.options.address
        const amount = window.web3.utils.toWei(amountp.toString(), 'ether')
        const unlockTime = Number(getBlockTimes) + Number(timer)
        let optionsData = texasPokerContract.methods.pledgeNFT(token, tokenId, amount, unlockTime).encodeABI()
        callContractMethod(optionsData, texasPokerContract, 0, (res) => {
            resolve(res)
        })
    })
}

最后發(fā)送的時候記得把to改成對應(yīng)的地址

在授權(quán)之前我們還需要判斷這個NFT是否已經(jīng)授權(quán)給了我們，不然用戶將支付多份手續(xù)費

export async function getApproved(tokenId) {
    // 查詢該NFT tokenId 是否已授權(quán)給Game合約
    const nftContract = store.state.nftContract // 獲取當(dāng)前操作nft的合約
    return await nftContract.methods.getApproved(tokenId).call()
}

這次調(diào)用的是call方法，這個就相當(dāng)于前端的get，是直接回調(diào)的，會返回這個NFT已經(jīng)授權(quán)的鏈地址，我們直接進行判斷就好

現(xiàn)在從查詢，到授權(quán)，到質(zhì)押NFT這一套流程就走完了，以上就是web3.js調(diào)用鏈上的方法操作NFT區(qū)塊鏈MetaMask詳解的詳細內(nèi)容，更多關(guān)于web3.js操作NFT區(qū)塊鏈MetaMask的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: