EvmosMillion

• 

  Website of the project

Inspiration

The project was inspired by the The Million Dollar Homepage. The page contains a billboard of one million pixels and each pixel was for sale for one dollar. Companies used it to advertise and individuals to become a part of history of the internet. EvmosMillion implements the idea as a decentralized app where all data is stored in the EVMOS blockchain.

The ideas is to give blockchain users a place to showcase their NFTs or other blockchain related images.

What it does

The website serves as frontend for the contract that manages the one million pixels. The data is stored in the blockchain and the dApp does not have a traditional server. All information about each spot is downloaded from the blockchain.

Users can decide to purchase a spot. Currently the contract has been published to the testnet and only a minimal amount of t(estnet)EVMOS is required to purchase as spot.

The website evmosmillion.pages.dev is fully functional. But you need to be connected to the testnet (and own TEVMOS) to mint an NFT or modify a spot.

The plan is to publish this to the mainnet after the hackathon to let people mint NFTs on the mainnet. Buying a spot mints an NFT which controls the specified space in the billboard. Owning the NFT gives the user full control about that spot allowing to change the shown title, the image and the linked URL. After buying the spot, the data can be changed for free. Only gas cost needs to be paid for updating a spot.

There is a limited number of spots available. As pixels are sold in packs of 20x20 slots, there are only 50x50=2,500 spots available at maximum. After all spots are gone, the contract will not allow any new spots.

Each bough spot is an NFT.

When buying a spot, the rights to change the area are given in form of an NFT. The contract implements the ERC-721 standard. Only the owner of the NFT can change the corresponding spot. The NFT also comes with a linked image showing which spot is bought. Here is an example image:

How we built it

All data in the frontend is downloaded directly from the blockchain (via the RPC endpoint). It is build on TypeScript, React and Next.js. It uses the Ethers.js library to connect to the blockchain and download the information.

The contract was complicated to write as I wanted to support the ERC-721 standard to manage the spots. This is a tricky situation as it's impossible to pregenerate all images of possible combinations of NFTs. Therefore, I needed to create a server which serves the JSON file with metadata and the image in SVG form. As each spot contains the information about its size and location this information is passed on to the external server which then serves the appropriate NFT data.

Note, how the URL contains the information about size and location of the spot (e.g. spot-37-11-9-8-5.json) which the server then uses to generate the correction JSON and SVG output. The SVG server was build using TypeScript and Express.

Challenges we ran into

As mentioned above, it was not easy to implement the ERC-721 standard while being able to serve correct metadata and an NFT image. It is based on a server that is able to dynamically server all kind of positions and sizes. After all spots are bought, it's possible to switch to a static backend.

Another challenge I ran into was that I tried to reduce the amount of storage needed inside the blockchain. For example, I'm using small integer sizes (like uint8 instead of uint256) for storing the height and weight. In the first iterations of the contract, I forgot to cast these integers properly which lead to errors when buying big spots. Of course, that is fixed in the final version.

Accomplishments that we're proud of

I have published the project on another blockchain and ported the code over the the Cosmos ecosystem. The adaption was rather straight forward, but I've changed the Solidity code to 1) improve the performance of the downloaded NFTs and 2) to implement a flexible payment option. The idea is to make the NFTs cheaper the more spots are still available.

I think the concept as a whole is rather interesting and I like adding utility in this way. I hope people like it.

What we learned

This was the first time, I've used the Cosmos ecosystem. It was rather easy to port the application and connect the frontend to the RPC backend.

What's next for EvmosMillion

I hope the jury likes my entry and would like to see me publish it to the mainnet. I will use the 4 month milestone time to publish it to the mainnet and make it accessible to all Evmos users. I hope people will use theirs spots to showcase NFTs or publish art on it.

Built With

• ethers.js
• javascript
• next.js
• typescript