ThetaMillion

1,000,000 pixel billboard based on the Theta blockchain
Buy a spot and change it's title, image and link as you want. The data will be stored decentralized in the blockchain.
Every spot is also an NFT! Only the owner of the NFT can change the content.
Changing the title, image URL or link only requires gas.

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. ThetaMillion implements the idea as a decentralized app where all data is stored in the Theta blockchain.

What it does

The website serves as frontend for the contract that manages the one million pixels. The data is stored in the Theta 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. Each pixel costs one TFUEL and a spot must have a minimal size of 20x20. Buying the spot 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. Here are examples for the NFT shown above:

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

Adding utility to a website like this is rather unique. While there are similar implementations on other blockchains this projects tries to feature the original experience of the one million dollar homepage like its simplicity while adding the decentralization via smart contract and NFTs to it.

What we learned

Before I started this project, I had little to no knowledge of Solidity. I've learned that it's relatively easy to write a Solidity contract but rather hard to do it properly. As mentioned in the challenges it was complicated to make the utility NFT while serving a nice looking image for the NFT. But it was a fun challenge!

What's next for ThetaMillion

First, it would be great to see people actually buying spots :) Afterwards, I'm looking forward to see whether people will trade their NFTs.

I hope ThetaMillion can serve as a first example on how utility NFTs can affect traditional websites. The concept of ThetaMillion is transferable to practical parts in the Theta network. For example, based on this concept creators could sell NFTs to serve ads on their website in a decentralized way.