eth/place

This project is inspired by the Million Dollar Homepage and the popular r/Place where users color individual pixels on a blank website to showcase logos, memes, and original art. We decided to create a Web3 version of this concept by creating an NFT on a blank canvas. Users can rent individual pixels on the canvas and set them to the colors they want. The renting mechanism is achieved through SuperFluid, which allows users to send continuous streams of money from their wallets to our smart contract address. These streams can be terminated by the user any time, and the pixels only show the users' selected pixels for the duration the money streams are active.

The first part of our project comprises of the front-end where we use React to render a canvas on the screen. After connecting their Metamask wallet to the frontend UI, users can select the available pixels from the canvas grid and set the colors. They can then click on a "start stream" button, which triggers a new money stream to be created via the Superfluid API. The money stream is directly towards our smart contract on the Polygon testnet chain, which modifies the selected pixels on the blank canvas NFT in real time. The user can click another "stop stream" button to cancel the existing stream at any time and forfeit their possession of the pixels, which revert back to the default color (e.g. white). Our smart contract makes use of a Superfluid Superapp to get the callbacks for the money stream events, i.e., starting or ending a stream, and change the pixels on the canvas accordingly. The canvas NFT is initially minted by our smart contract which is built on ERC721. We used Hardhat as our Ethereum development platform, and the contracts are written in Solidity. For testing, we used the Polygon Mumbai testnet and DAIx as the wrapped supertoken for the money streams.