私の現在の問題は
> utf8.js:176 Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
at toUtf8Bytes (utf8.js:176)
at StringCoder.encode (string.js:12)
at array.js:49
at Array.forEach (<anonymous>)
at pack (array.js:43)
at TupleCoder.encode (tuple.js:51)
at AbiCoder.encode (abi-coder.js:87)
at Interface._encodeParams (interface.js:254)
at Interface.encodeFunctionData (interface.js:296)
at index.js:117
at Generator.next (<anonymous>)
at fulfilled (index.js:5)
toUtf8Bytes @ utf8.js:176
encode @ string.js:12
(anonymous) @ array.js:49
pack @ array.js:43
encode @ tuple.js:51
encode @ abi-coder.js:87
_encodeParams @ interface.js:254
encodeFunctionData @ interface.js:296
(anonymous) @ index.js:117
fulfilled @ index.js:5
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_mintNft @ index.js:18
mintNft @ index.js:18
onClick @ index.js:105
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
基本的に、購入が確認された後にマーケットプレイスの代替 NFT を作成するという意図で、buyNft 関数と createItem 関数を壊しました。
async function mintNft(nft, url){
const web3Modal = new Web3Modal()
const connection = await web3Modal.connect()
const provider = new ethers.providers.Web3Provider(connection)
const signer = provider.getSigner()
const tokenContract = new ethers.Contract(nftaddress, NFT.abi, signer)
const marketContract = new ethers.Contract(nftmarketaddress, NFTMarket.abi, signer)
let transaction = await tokenContract.createToken(url)
let tx = await transaction.wait()
let event = tx.events[0]
let value = event.args[2]
let tokenId = value.toNumber()
const price = ethers.utils.parseUnits(nft.price.toString(), 'ether')
mint = await marketContract.createMarketItem(
nftaddress, tokenId, price, {value: listingPrice}
)
const purchase = await marketContract.createMarketSale(nftaddress, nft.tokenId, {
value: price
})
await purchase.wait()
await mint.wait()
loadNFTs()
router.push("/")
}
これが buyNft 関数です。
async function buyNft(nft){
const web3Modal = new Web3Modal()
const connection = await web3Modal.connect()
const provider = new ethers.providers.Web3Provider(connection)
const signer = provider.getSigner()
const contract = new ethers.Contract(nftmarketaddress, NFTMarket.abi, signer)
const price = ethers.utils.parseUnits(nft.price.toString(), 'ether')
const transaction = await contract.createMarketSale(nftaddress, nft.tokenId, {
value: price
})
await transaction.wait()
loadNFTs()
}
createItem 関数は次のとおりです。
async function createItem() {
const {name, description, price} = formInput
if(!name || !description || !price || !fileUrl) return
const data = JSON.stringify({
name, description, image: fileUrl
})
try {
const added = await client.add(data)
const url = `https://ipfs.infura.io/ipfs/${added.path}`
/* after file is uploaded to IPFS, pass the URL to save it on Infura */
createSale(url)
}catch(error){
console.log('Error uploading file: ', error)
}
}
// Creates NFT and initiates sale at same time
async function createSale(url) {
const web3Modal = new Web3Modal()
const connection = await web3Modal.connect()
const provider = new ethers.providers.Web3Provider(connection)
const signer = provider.getSigner()
let contract = new ethers.Contract(nftaddress, NFT.abi, signer)
let transaction = await contract.createToken(url)
let tx = await transaction.wait()
let event = tx.events[0]
let value = event.args[2]
let tokenId = value.toNumber()
const price = ethers.utils.parseUnits(formInput.price, 'ether')
contract = new ethers.Contract(nftmarketaddress, NFTMarket.abi, signer)
let listingPrice = await contract.getListingPrice()
listingPrice = listingPrice.toString()
transaction = await contract.createMarketItem(
nftaddress, tokenId, price, {value: listingPrice}
)
await transaction.wait()
router.push('/')
}
フラグが立てられていると書かれている行は次のとおりですが、buyNft 関数だけに戻すと、この行は問題なく実行されます。
if(loadingState === 'loaded' && !nfts.length) return (
私は初心者の開発者であり、これを非常に考えすぎているように感じますが、それらを分離しておくことは機能せず、これは少なくともページの大部分を引っかかることなく実行しました。どんな助けでも大歓迎です。
これは、dabit の Polygon NFT マーケットプレイス チュートリアルを変更しています: https://dev.to/dabit3/building-scalable-full-stack-apps-on-ethereum-with-polygon-2cfb