TheCryptoWall —Technical Overview

In this article, I will introduce the architecture of #TheCryptoWall and provide a step-by-step explanation on how a user/player will interact with the web app and smart contract in order to draw it’s own crypto art!

What’s the #TheCryptoWall again ?

It allows users to contribute and truly own an Internet-wise piece of art.

A small teaser of #TheCryptoWall

(you can also think of it as a community-driven NFT factory but I’ll talk about that in another time … yes, you will be able to own a dated version of the world’s biggest NFT)

What is the $BRICK token ? How is is related to #TheCryptoWall ?

Architecture overview

  • A smart contract called CryptoWall
  • An other smart contract (BEP-20), called CryptoBrick
  • A JavaScript API, CryptoWallAPI.js
  • A web page to see and draw onto #TheCryptoWall
Architecture overview

The CryptoWall smart contract is where the magic happens. It tracks pixels along with their owner, color and location. It handle the game logic. 16 colors are defined within it, no others colors can be used to draw. Users must lock their $BRICK token onto the CryptoWall contract before being able to do any drawing. A user can unlock his $BRICK from the wall at any given time.

The CryptoBrick smart contract is the actual $BRICK token used as the in-game currency. One cannot draw without owning some $BRICK first.

The JavaScript API is made and used by #TheCryptoBricks team in order to interact easily with the CryptoWall contract. In the future, we plan to releasing it to the public in order for anyone to be able to create their own visualization. (Why not a 3D an integration of #TheCryptoWall within a Metaverse such as Decentraland ?)

The webpage is simply our own implementation of a web UI for #TheCryptoWall. This is the 2D space where you will be able to see and contribute to the world’s biggest NFT, directly in your web browser!

Userflow overview

Consider the figure 1, a player along with it’s Metamask wallet wants to draw a red BRICK at location (x:55, y:47). He cannot do so if he hasn’t any $BRICKs locked into the CryptoWall smart contract. So the first step is to buy some on a DEX or CEX. Let’s say he already did purchase 500 $BRICKs.

Figure 1
| Player's Wallet | CryptoWall |
| 500 BRICKs | 0 BRICKs |

As explained earlier, a player must transfer (lock) some $BRICKs into the smart contract before being able to do any drawing. (We chose to go that way in order to limit the number of transactions). The contract has a method to do so, which we’ll be easily used by the player through the web UI. Let’s say he locks 250 $BRICKs into the CryptoWall contract.

Figure 2

As depicted by the figure 2, the player now has 250 $BRICKs remaining in it’s Metamask wallet and 250 $BRICKs locked into the CryptoWall.

| Player's Wallet | CryptoWall |
| 250 BRICKs| 250 BRICKs|

With those ready-to-use, the player can now use the drawing method of the CryptoWall contract in order to specify a location and a color of a BRICK. Again, this is easily done with the web UI. This will result in a transaction (with a small blockchain fee) and the newly added BRICK will be propagated into the blockchain.

Using events, every other clients get updated and players are able to see modification on the #CryptoWall at near block-time.

The same logic apply for removing or editing a BRICK. In a following article, I’ll be talking about the gravity mechanic.

Thanks for reading, stay tuned!




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store