web3.js調(diào)用鏈上的方法操作NFT區(qū)塊鏈MetaMask詳解
實(shí)例化鏈上方法
公司的項(xiàng)目全是區(qū)塊鏈項(xiàng)目,最近這個(gè)項(xiàng)目是要構(gòu)建一個(gè)鏈上的游戲社區(qū),目前這個(gè)功能是用戶可以質(zhì)押NFT到游戲的鏈上,然后游戲那邊就可以有人去參加競(jìng)賽,然后質(zhì)押人可以贖回NFT。
MetaMask
瀏覽器插件用的是小狐貍MetaMask
網(wǎng)絡(luò)用的是測(cè)試網(wǎng)絡(luò)Rinkeby,記得切換網(wǎng)絡(luò),把設(shè)置 > 高級(jí) > 顯示測(cè)試網(wǎng)絡(luò) 打開(kāi)
let hexChainId = window.web3.utils.toHex(4) // 4就是Rinkeby測(cè)試網(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(‘項(xiàng)目鏈接') ) } window.web3 = web3 // web3鏈接 }
現(xiàn)在就把web3掛載到window上了 鏈接小狐貍 await ethereum.request({ method: 'eth_requestAccounts' })
這一句代碼就可以,返回的是錢包地址組成的字符串
實(shí)例化鏈
之后就是實(shí)例化鏈了,我是存在vuex里進(jìn)項(xiàng)目第一步是初始化游戲鏈,游戲鏈?zhǔn)枪潭ǖ?/p>
const texasPokerContract = new window.web3.eth.Contract( texasPokerJson, import.meta.env.VITE_TEXASPOKER_ADDRESS )
第一個(gè)參數(shù)就是鏈的ABI
第二個(gè)參數(shù)就是項(xiàng)目鏈上地址
還需要實(shí)例一個(gè)NFT,但是NFT是不固定的,我們操作哪個(gè)NFT就用哪個(gè)NFT的鏈上鏈接調(diào)用這個(gè)方法實(shí)例,把這兩個(gè)都存在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ā)送方法的對(duì)象 * @param contractExample 要操作的合約實(shí)例 * @param values value值默認(rèn)是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費(fèi) 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ù)性很強(qiáng),但是根本上也就是調(diào)用了window.web3.eth .sendTransaction(options)
這個(gè)方法
let options = { from: account, // 你的當(dāng)前地址 to: contractExample.options.address, // 你要操作的鏈上地址 value: values, // 方法要帶的參數(shù),默認(rèn)填0 data: optionsData, // *關(guān)鍵 要調(diào)用的方法nftContract.methods.approve(要帶的參數(shù)).encodeABI() gasPrice: gasPrice, // 此次操作的gas費(fèi)也就是手續(xù)費(fèi) }
不出意外就可以調(diào)起小狐貍進(jìn)行授權(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ì)押價(jià)格 * @param timer 質(zhì)押天數(shù)的時(shí)間戳 */ return new Promise(async (resolve, reject) => { const texasPokerContract = store.state.texasPokerContract // 獲取德州撲克合約 const getBlockTimes = await texasPokerContract.methods.getBlockTime().call() // 獲取區(qū)塊鏈時(shí)間 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ā)送的時(shí)候記得把to改成對(duì)應(yīng)的地址
在授權(quán)之前我們還需要判斷這個(gè)NFT是否已經(jīng)授權(quán)給了我們,不然用戶將支付多份手續(xù)費(fèi)
export async function getApproved(tokenId) { // 查詢?cè)揘FT tokenId 是否已授權(quán)給Game合約 const nftContract = store.state.nftContract // 獲取當(dāng)前操作nft的合約 return await nftContract.methods.getApproved(tokenId).call() }
這次調(diào)用的是call方法,這個(gè)就相當(dāng)于前端的get,是直接回調(diào)的,會(huì)返回這個(gè)NFT已經(jīng)授權(quán)的鏈地址,我們直接進(jìn)行判斷就好
現(xiàn)在從查詢,到授權(quán),到質(zhì)押NFT這一套流程就走完了,以上就是web3.js調(diào)用鏈上的方法操作NFT區(qū)塊鏈MetaMask詳解的詳細(xì)內(nèi)容,更多關(guān)于web3.js操作NFT區(qū)塊鏈MetaMask的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript HTML DOM元素 節(jié)點(diǎn)操作匯總
這篇文章主要介紹了JavaScript HTML DOM元素 節(jié)點(diǎn)操作匯總,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07js回調(diào)函數(shù)仿360開(kāi)機(jī)
這篇文章主要為大家詳細(xì)介紹了js回調(diào)函數(shù)仿360開(kāi)機(jī),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12JavaScript中極易出錯(cuò)的操作符運(yùn)算總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中極易出錯(cuò)的操作符運(yùn)算的相關(guān)資料,包括了算術(shù)運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、賦值運(yùn)算符、一元運(yùn)算符以及運(yùn)算優(yōu)先級(jí)等問(wèn)題,需要的朋友可以參考下2021-08-08JS簡(jiǎn)單實(shí)現(xiàn)多級(jí)Select聯(lián)動(dòng)菜單效果代碼
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)多級(jí)Select聯(lián)動(dòng)菜單效果代碼,涉及JavaScript數(shù)組元素的遍歷及動(dòng)態(tài)設(shè)置select的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09ES6知識(shí)點(diǎn)整理之?dāng)?shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用示例
這篇文章主要介紹了ES6知識(shí)點(diǎn)整理之?dāng)?shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用,結(jié)合實(shí)例形式分析了ES6數(shù)組解構(gòu)和字符串解構(gòu)的實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-04-04模擬javascript中的sort排序(簡(jiǎn)單實(shí)例)
下面小編就為大家?guī)?lái)一篇模擬javascript中的sort排序(簡(jiǎn)單實(shí)例)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08