project screenshot 1

Out of the Ether

One-click NFT minting from 'screesnhot' of animated Canvas. Animation is an Ethereum logo silhouette with scaling rectangles from within it.

Out of the Ether

Created At

HackFS 2021

Project Description

One-click NFT minter from a 'screenshot' of what's on the screen. It is a Canvas animation of an Ethereum logo silhouette with progressively scaling rectangles growing out of the logo. User can inject their wallet and one-click mint the current Canvas animation. The canvas will be converted to a dataURI, which will be used as the image for an IPFS upload. The result IPFS token URI will then be used to mint an NFT. The animation on the page never stops throughout the process. At any point the user can toggle a 'wallet' which shows all their NFTs, including those which were minted using this application in 'real-time' / blockchain time. That's about it. It's my first DApp. Am refreshing my front-end so wanted to implement canvas with requestAnimationFrame in React, which haven't done before. Am more capable with Solidity than this DApp really shows but it is deployed, any sensitive information should be hidden, and struggled through some of the integration even though was using Scaffold-Eth to start, so considering it a win. Next time I'd like to get more Solidity heavy and start playing around more with math and logic than front-end work and integration pain-points. Happy this more or less works. Wanted music as part of the animation however just learned about the new browser restrictions in place there so that's fine for now.

How it's Made

Starting with Scaffold-Eth - so using React, EthersJS, Hardhat. Started by clearing out some unused boilerplate, something tried to continue doing throughout. Am not completely familiar with every bit of the Scaffold just yet but familiarity of all the parts is growing. Created an HTML5 Canvas using with requestAnimationFrame() in React to create the drawing and animation. The layout and Canvas should be somewhat responsive, and the logo moderately proportioned and responsive. Wallet defaults to first Hardhat account address as per the Scaffolding, and users can inject their wallet. Minting will convert the canvas to a DataURI - something didn't even know existed to be honest - thought would have to use an external commercial API of some sort etc - very happy unnecessary, especially considering thought would have to use AWS - very happy that's not necessary either. The DataURI is used in the metadata for the upload to IPFS, and the tokenURI then used to mint the NFT. The contract is extended OpenZeppelin contracts, so ERC721 here. Not much contract work was required here sadly, am capable of more, but still learning it as well as the full DApp integration, so am happy to get something deployed and moderately functioning. The Scaffold makes many RPC calls, haven't explored how to slow that down just yet. With some of the deployment pain-points now out of the way, would like to work on a more contract-heavy DApp next time. Started a week late and worked solo, very happy to have even submitted this.

background image mobile

Join the mailing list

Get the latest news and updates