Hot Potato — Having fun on the Stellar Blockchain
“You’re going to another competition after this one? ” — asked a girl I met at a Philosophy competition.
“Yes, this will be a wild weekend. ” — I said
And it was. Not just a weekend, but it took several weeks. I’ve never learned when is a good time to launch a project. Not just launch, but promote it too. This time I decided why not. What do I have to lose?
Stellar NFT Hackathon
After studying a philosophy book for the entire day, and shorting out my brain’s RAM memory from learning about a ton of philosophers, I needed a break.
Luckily for the past couple of days, a few of my friends from the Stellar Community asked me if I’d join the SXSW Stellar hackathon. People were also posting about it on Twitter and Reddit Perhaps the universe was tempting me to do this hackathon. Or not? Maybe it was predetermined. Oh no, philosophical concepts are leaking in this blog. Leave!
It was a hybrid hackathon. Most of us were online and even without physical presence, I had fun interacting with the community via Discord. Due to their short timeframe, hackathon participants are known to sleep on the desks where they are working. Since I was at home, I could work on the hackathon and sleep in my own bed instead of a desk, getting the best of both worlds. By the way, did I mention that I have an in-house video production team as well?
The event started with a workshop by the legendary mentor for all things related stellar, Tyler van der Hoeven. We got basic information on how we can code our NFT by chaining operations together. I had participated in a Stellar hackathon previously and this was fun to watch in the background.
https://medium.com/media/022949ce2a24d2566ab81b9679956643/href
Once the event started, the hacking began too. For this hackathon, I had an idea to replicate a children’s game. You can probably guess what it is, it involves potatoes. Once I settled on an idea, I started coding.
Coding a contract is easy. 🥳
Figuring out why your promises aren’t working, especially when StackOverflow is down, isn’t. 🫠
Writing quick dirty HTML and JS code is easy. 🤩
Deciphering what you wrote two hours later is not fun. 🙃
Write comments, kids.
But there was one thing that all entries must-have, a demo video. One thing that separates home video and professional video is creative freedom. Everyone at my house took part in the filming process, from designing costumes to rendering digital files. I had a blast scouting for music and catching potatoes together with my family. I can confidently say we made the best video we’ve ever shot. But the most crucial ingredient for a successful video is my brother. It wouldn’t have been as entertaining without him. 😉
No potatoes were harmed during the filming of the video. 🥔
https://medium.com/media/1ccdae0044c1104ab3335a3801a40ca2/href
The deadline was very close, and we barely made it in time to submit everything at the last minute. From here, we started playing a new game — the waiting game. So we waited and waited. We discussed the potential victors, and we explored some of the GitHub repos. We were increasingly curious about who the winner was. It was getting late and we were almost asleep when this message awoke us.
So my family and I gathered in the bedroom and streamed the video on the TV. We listened to the finalists and winners carefully. We needed to rewind to make sure we heard right. Hot Potato got 3rd prize in the Stellar NFT Hackathon!
https://medium.com/media/fe30996e5759bb64cc5f165bfb22cd30/href
That night I was so happy, I could not sleep. A couple of days later, when I was sharing my Devpost entry, this was one of the replies:
When we showed the video to friends and relatives, they loved my brother in different costumes, playing with a potato. Hearing the same thing from someone on the internet made our day.
How does Hot Potato work?
In real life, Players pass an object, which is a potato, and they have to give it to someone else. If the person doesn’t pass the potato quickly enough, or they drop it, they lose and so the game repeats
On the blockchain, a person cannot drop a potato. They can only transfer it to a different person. But that seemed dull, so I came up with another condition. The person has only 24 hours to complete the transaction.
Hot Potato requires two crucial components of the Stellar Blockchain. A Decentralized Exchange or DEX for short, and Clawbacks.
So how does it work? First, it queries the DEX to verify the existence of our Hot Potato. There are two possible scenarios for this. If an asset doesn’t exist on the blockchain, the game hasn’t started. In that case, we will issue the potato and start the game.
By default, Stellar Assets stay on the account unless clawback is enabled. Clawbacks are needed to remove the potato from the game when the timer expires. We will also limit the asset to only being traded. By using trades, I can easily follow where the potato has gone.
To make the contract faster. I’ve also encoded the holder’s public key into a data field.
Now that we have covered what happens when an asset does not exist, we will move to what happens when a potato is on the blockchain. We fetch the Issuer’s account and look up the currentAccount.
There are two requirements I added. The first one is to find the unique trade of the mentioned user and verify that the transaction didn’t take more than 24 hours. The last one is to prove that the destination address hasn’t received the potato. It does that by recursively looping through each trade and performing a check on the asset. If it’s our hot potato, the function stops and returns true, causing the contract to terminate.
If all those checks are satisfied, an XDR gets generated via an API endpoint. The only parameters are the person who possesses the potato and the destination public key. But let’s face it? Who uses curl + REST API calls to interact with a website? Nobody. I connected the API to a simple website that queries the trades to show the timeline of how the potato has moved. A timer showcasing how much time is left and a simple input box that interacts with Albedo. Albedo is a web wallet that allows interactions with the Stellar Blockchain.
The contract and its static resources get served via a fastify server. The frontend doesn’t use any fancy JS frameworks, and it’s mostly document.querySelectors connected with fetch that modify the DOM.
Why did you stay on Stellar and not move to another blockchain?
One of the most obvious answers that you might assume is I was lazy, and I’ve had most of the code written, so all I had to do was polish it. Well, you’re right on that part, but also, not the only reason why I stayed.
Let’s consider the prices for deploying a contract on Ethereum. I will base it on this tweet which raised a heated discussion on Hacker News. But depending on some requirements it can get up to 5000$.
body[data-twttr-rendered=”true”] {background-color: transparent;}.twitter-tweet {margin: auto !important;}
— @eric_khun
function notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height);resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === “#amp=1” && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: “amp”, type: “embed-size”, height: height}, “*”);}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind(‘rendered’, function (event) {notifyResize();}); twttr.events.bind(‘resize’, function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute(“width”)); if ( 500 < maxWidth) {window.frameElement.setAttribute("width", "500");}}
In comparison, launching Hot Potato at the time of writing was 0.30 cents. The only cost was creating an asset on the blockchain. The domain name, hosting, DNS, and analytics are on a free tier.
Thank you, Stellar, for saving me around 500$ for deploying a contract. Let’s consider one more factor, the fees. When I was writing this blog post, the cost for executing a transaction on Ethereum was the following:
In comparison, the fees for my contract ranged from: 0.0001 XLM to 0.002146 XLM which in USD ranges from: 0,000020$ — 0004292$. Who would be playing a game like that, when $3 goes towards fees? Would you play Chess if each move cost you $3?
Lastly, I do not know how to deploy or write contracts for Ethereum, or any other blockchains. Writing contracts to interact with the Stellar Blockchain is like building a house out of legos. You have these basic blocks called operations, and with them, you can create anything you want. Hot Potato’s main contract consists of 10 operations.
An adventure begins!
My original plan for launching Hot Potato included launching on April First, but something else happened that day, and I forgot to do that.
Reddit launched r/place, where each person was limited to placing one pixel in 5 minutes. It would have also been a bad timing to launch it when everyone was distracted. So I waited.
Hot Potato officially began on the 2nd of April, 18:22:23 UTC. It would start its journey from Skopje, North Macedonia, and travel via the internet 9004 km in a couple of seconds, settling in Florida. After arriving in Florida, it started a solo adventure around the world.
I loved Hot Potato’s diary entries from France. Not only did the potato explore the country, but it also experienced a new culture, met new friends, and tasted lovely cuisine. It also got into trouble, ouch.
body[data-twttr-rendered=”true”] {background-color: transparent;}.twitter-tweet {margin: auto !important;}
— @MatejMecka
function notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height);resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === “#amp=1” && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: “amp”, type: “embed-size”, height: height}, “*”);}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind(‘rendered’, function (event) {notifyResize();}); twttr.events.bind(‘resize’, function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute(“width”)); if ( 500 < maxWidth) {window.frameElement.setAttribute("width", "500");}}body[data-twttr-rendered=”true”] {background-color: transparent;}.twitter-tweet {margin: auto !important;}
— @vinamo_
function notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height);resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === “#amp=1” && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: “amp”, type: “embed-size”, height: height}, “*”);}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind(‘rendered’, function (event) {notifyResize();}); twttr.events.bind(‘resize’, function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute(“width”)); if ( 500 < maxWidth) {window.frameElement.setAttribute("width", "500");}}
It was also fun watching all the memes and jokes others created while waiting for the next pass. It made the time pass quicker.
body[data-twttr-rendered=”true”] {background-color: transparent;}.twitter-tweet {margin: auto !important;}
— @YavuzAyral
function notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height);resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === “#amp=1” && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: “amp”, type: “embed-size”, height: height}, “*”);}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind(‘rendered’, function (event) {notifyResize();}); twttr.events.bind(‘resize’, function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute(“width”)); if ( 500 < maxWidth) {window.frameElement.setAttribute("width", "500");}}
While Hot Potato was running, people recognized me as the person with the potato NFT. What a fun way to be remembered, Mission Successful!
The best fun I’ve had was solving spintax’s puzzle for the potato. It was a fun challenge, and this was one of the most clever ways I’ve seen so far for someone to pass a potato.
body[data-twttr-rendered=”true”] {background-color: transparent;}.twitter-tweet {margin: auto !important;}
— @spintax2
function notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height);resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === “#amp=1” && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: “amp”, type: “embed-size”, height: height}, “*”);}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind(‘rendered’, function (event) {notifyResize();}); twttr.events.bind(‘resize’, function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute(“width”)); if ( 500 < maxWidth) {window.frameElement.setAttribute("width", "500");}}
I laughed the most at when one of the holders decided, rather than searching for someone to pass the potato to, they created a website where a person can input their public key and receive a page where they can confirm the acceptance of the potato.
The website is so simple and beautiful, and I was surprised someone took the time for this. How do you recognize an extrovert over an introvert? An extrovert would message his friends to claim a potato. An introvert would create a website for someone to claim it.
One other thing I found fascinating was the following Reddit post about Hot Potato, and I’m thankful for the kind words by the author.
https://medium.com/media/e5718818ef65675d1086eaf2c944a61b/href
The craziest thing of all was when I went to sleep and opened Twitter. When you have 12 new notifications, you would probably assume you became a meme. Or something has gone wrong.
body[data-twttr-rendered=”true”] {background-color: transparent;}.twitter-tweet {margin: auto !important;}
— @StellarOrg
function notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height);resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === “#amp=1” && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: “amp”, type: “embed-size”, height: height}, “*”);}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind(‘rendered’, function (event) {notifyResize();}); twttr.events.bind(‘resize’, function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute(“width”)); if ( 500 < maxWidth) {window.frameElement.setAttribute("width", "500");}}
I was shocked, I couldn’t believe it. Stellar tweeted about my project. Of all the things, this was the least I expected. My Twitter notifications during the day are silent.
I was surprised to see all the traffic coming from that tweet. Cloudflare showed 343 unique visitors, with visitors from all around the world.
Sadly all things have to come to an end. That was inevitable. But we had fun, didn’t we? The first round of hot potato lasted for two weeks. In those two weeks, we’ve met so many new friends, explored a variety of countries, and traveled the world.
Hot Potato has met 22 new different people from the Stellar Community. You can say that the goal of Hot Potato was to bring us closer together.
Hot Potato traveled around the world between two continents, and it explored eight countries in total. Most of the players resided in the United States. Germany was the second closest.
Hot Potato also learned a couple of phrases from each country it visited. I believe those were:
🇩🇪 Vielen Dank, dass Sie mich hosten!
🇫🇷 Merci de me recevoir!
🇸🇪 Tack för att du är värd för mig!
🇳🇱 Bedankt voor het hosten van mij!
🇧🇷 Obrigado por me hospedar
🇺🇸 & 🇨🇦 Thank you for hosting me!
🇲🇰 Ви благодарам што ме угостивте!
Here are some photos of the potato while it traveled the world. Can you guess the location of each? If you recognize these photos, they’re some of the NFTs I made for the participants.
Thank you all for playing the first iteration of Hot Potato! Catch you in the next one? Possibly Soon 👀
Conclusion
Thanks to everyone who participated in passing the Hot Potato. Everyone who gave feedback and offered to help, including reporting bugs. Hot Potato would not have evolved or improved without you.
I would also like to give a special thanks to my parents and little brother, who helped develop the video, supported me through every step, and celebrated every milestone we achieved.
I’d like to also give a special thank you to the Stellar Development Foundation for organizing this hackathon, allowing us the opportunity to have fun, and for helping promote my project 🙂
Hot Potato is an Open Source project with the MIT License. You can check it out on GitHub
I hope to see you all soon, maybe at the next hackathon!
Hot Potato — Having fun on the Stellar Blockchain was originally published in Stellar Community on Medium, where people are continuing the conversation by highlighting and responding to this story.