Wrote on

Building something practical with Web3

When it first appeared, Web3 was a big thing. Probably this was because it was a bull market too, prices of crypto assets went up and everyone was excited to make quick and easy money.

Then a bear market came and everyone started to make fun of web3, saying that the space is toxic and you should avoid it.

I am a programmer though. I understand the technology underneath web3, the blockchain, and its use cases. Crypto is here to stay. But… let’s not forget stablecoins are also crypto.

Imagine this: what if you could sell something right on your own website, hosted on your own server, without relying on a payment processor? For me sounds like freedom.

So I started thinking about what could I build practically to learn Web3 (building the smart contract, integrating the frontend app with the smart contract and blockchain?

So here is my idea. Probably useless for now, but it is something practical that I could start building right away.

I want to create ad spaces on this blog that you can rent for 10 days for a minimum of 7 USD (the equivalent of USDC or USDT, I do not care). Once you pay the minimum of 7 USD and the smart contract assigns you as the owner of that space, you gain access to it completely: you can customize the HTML code for that space.

But there is a catch. You do indeed have access to that space for 10 days, but if someone else wants to take over that space from you and become the new owner, they can do that by paying double what you paid. So if you paid the minimum required (7 USD), anyone can take over the space from you by paying at least 14 USD.

I am 80% done with this feature and it will come up live on this website in the near future.

Let’s see it a bit in action. So you come to my blog and you see this:

You see the space (yellow background in the screenshot), and you see that the space is available (not owned by anyone yet), so you can connect with xPortal (MultiversX wallet), Ledger, or MultiversX DeFi Wallet.

Once you are logged in a new button appears that allows you to rent that space.

Work in progress: once you click the rent space button, a new modal opens up that allows you to select what token you want to use for renting the space: USDC or USDT. Each option is shown only if you have a balance in your wallet of that coin. The interface here is not done yet, but it will show you the minimum to pay to own the space and the token. Once you have everything filled in the form, you can click the rent button to sign the transaction and send it to the smart contract.

Once the transaction is confirmed by the blockchain and the smart contract, you are the owner of that space until the expiration time. You now see a blank canvas that you can customize however you want. I will make some rules like you cannot add javascript or redirect directly to other websites, and decent regulations to ensure the safety of my website.

Here is a short demo that shows how editing the space works. Notice that the content is rendered in real-time on the ad space so you can easily preview how it will look for everyone.

Now let’s see how the catch works.

Another person comes and wants to advertise in that space where someone else has ownership for another 9 days. The person can again log in with their own wallet and they have a new button: outbid this space (wording TBD).

The same modal as in the first case opens, but now the minimum required for that space is 14 USD.

The same process follows, the person signs the transaction and the smart contract transfers ownership to the new person, the initial owner can no longer edit the contents of that space.

Here’s the nice part. I could do 0 validations on the front end and live with no worries because the blockchain validates if the user actually had USDC/USDT required to pay the smart contract and the smart contract itself validates required data and payments before assigning/switching owners. Here’s an example where I tampered with the React data and tried to send 222 USDT to the smart contract when I has no USDT in the wallet at all:

The blockchain stopped the transaction and it never reached the smart contract.

There are still a couple of things left to improve in order to have this feature released here. Probably sometime next week I can publish the feature. I also worked on a couple of “admin only” features like getting funds paid by users out of the smart contract and resetting a space (if someone abused the space or something like that).

I will make the smart contract open source too, the code of my blog’s theme is also open source (link in footer), so you can take a peek at what it looks like behind the scenes.

What I can say for now is that building with Web3 technologies is FUN. easy if you know React and web technologies, Rust (the language that powers the smart contract) is super robust and not so hard to learn and features like this can power your business without a middleman like Visa or Mastercard, or Stripe that can cut you off whenever they want. Blockchain and web3 = freedom.

It is worth learning new technologies like this.

And if you rely on stablecoins, you can protect your business and users from volatility. Users paid 7 dollars for the ad and those 7 dollars will be the same value in 10 days, whereas if you would rely only on cryptocurrencies users would face the volatility and the space that cost 7 USD in X cryptocurrency at the start of the rental period would end up being 14-20-30 USD at the end of the period (or even less).

Stay tuned for updates on this matter, I will post on this blog when the feature is released.

PS: Look at how easy it is to add a “space” anywhere on my blog. Clean and easy, powered by Laravel, React, and MultiversX SDK.

Custom component x-web3-ad with a single param: Space name
Underlying component code. Each instance of the div with “data-web3-space” is replaced by a React App.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Copyright © 2024 all rights
are not
reserved. Do whatever you want, it's a free country.
Guess it's obvious, but the theme is created by myself with Tailwind CSS. You can find the source code here.
I still use WordPress 🧡. The theme is custom Laravel though 😎.