Iām building a project where the PFP artwork is assembled by the user in real-time. You can play around with the canvas here and build the pfp
I went through the Moralis docs and the 2 videos which show how to setup the event listener in the Moralis dashboard, and how to write the cloud function. So far so good.
However I have some queries:
-
I will setup to listen to the
Transfer(address from, address to, uint256 tokenId)event from my smart contract when a user mints the NFT they have built on the front-end. -
Then I can use this tokenID and use the Filebase (SIA decentralized storage) APIs in a cloud function and upload the json metadata file to Filebase. This json will also have the PNG image url (https://s3.filebase.com/Mybucket/tokenID.png).
But how do I send my PNG which is on my React Canvas (front-end) to Filebase now? And save it as tokenID.png?
I understand Cloud function has Nodejs support but not external libraries. Or else I would have re-created the canvas & image inside the cloud function.
function saveImage() {
let imageToSave = new Image();
imageToSave.src = hiddenCanvas.current.toDataURL('image/png', 1.0);
setSavedImage(imageToSave.src)
}
Should I send the image to Moralis server too?
OR should I forget the cloud function completely and obtain the tokenID stored on Moralis server on event emission and use it to send json/PNG from my front-end itself? I assume there is a security risk in this approach? But if I have to do this what hook should I use to obtain this tokenID saved in my Moralis dashboard column?
@DappThatApp @PatrickAlphaC since you all have addressed event listeners in other threads perhaps you could share insights?
