zkEVM Research & Prototyping - [Delta Edge Dev]

[Alex_ADEdge]

For this topic I’ll be posting progress following my research/dev journey with Taiko zkEVM.

Currently I am developing some foundational elements for zkEVM-enabled dApps & Interactive/Gaming NFTs! Its about time I started sharing some of this work.

Lets get into it:

---

Early Development Screenshots: Retro Console Terminal ‘research’, EVMachina Prealpha Menu

---

Introductions

If you’ve seen my work in the Loopring space you’ll know I’ve been experimenting with & actively creating interactive experiences (ie interactive NFTs) for a while now!

I’ve been enjoying working on digital art and game ideas in the web3 space which people can connect and interact with. There is a lot of room for innovation in this space. My main focus has been here on Ethereum Layer 2 with Loopring (and now Taiko as well!). This of course involves a mix of app/web development, game development and digital art - areas I have experience in from outside the web3 space.

However - developing interactive NFTs and web3 projects has had its limitations so far on Layer 2. Without the ability to utilize EVM/Smart Contracts (and not wanting to substitute with in web2 solutions) its meant developers have had to hold off on various features and project ideas. These are limitations which I am very excited to see Taiko/zkEVM overcoming currently.

---

Some Digital Art Examples

These past couple of years I’ve found myself diving deeper into my web3 projects. With zkEVM now coming into play my focus has turned to bringing Taiko into these projects to utilize Smart Contracts to enable new and exciting features.

Some relevant & recent examples of my digital art/web3 work to check out:
◆ Loopy/Loopette Drop #03 - Heart Example
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ [Interactive NFT prototyping with 2D elements]
◆ Retro Console App /with AI
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ [Interactive NFT with retro gaming, video, AI experiments]
◆ Metaboy #3173
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ [Rebuilding one of my Metaboy NFTs as a 3D Interactive NFT & developing a 3D NFT pipeline]
◆ ‘LoopBlaster’ (Tournament) / Test Run / Semi Finals / Final Round
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ [NFT giveaways with a competitive twist, Unity Game with web3 potential]
◆ Delta Visual Render
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ [Recent digital art, 3D scanned elements, visual rendering + development thread]
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ [imgur version]

---

The Road Ahead: Prototype EVMachina

I have a real passion for many things retro!
This has lead me to creating an ‘Interactive Retro Console’ (as seen in the GIFs at the start of this thread). So far this Retro Console has been my place to prototype and experiment with web3 ideas (and yes the console itself and apps & games within can be all be minted as NFTs).

As mentioned, this retro console has several games built-in (ie demos of my own versions of Pacman or Snake) but this next game I am developing (EVMachina) will by my first real web3 game, and will therefore require zkEVM for the more advanced functions.

This early prototype will be a multiplayer RTS battle-game (tournament style) with web3 functionality.

The main goal here is to develop and test web3 functionality utilizing Taiko/zkEVM​:warning:
There are many directions development here could take, and various other ideas I have for web3 projects - so it is worth keeping in mind from the start that this is a prototype project, and is currently in an early prealpha stage, please don’t expect the next halo game but rather an experimental indie experience - which could develop in any number of directions & include perks for supporters and alpha testers

Getting into the specifics of that web3 functionality, and what I am working to utilize zkEVM/Taiko to enable:

◆ Modular Player Characters - Player ownership (via NFTs) of your character(s)
◆ Item & Asset Customization - The same ideas of ownership apply for items also, and these items will ‘plug in’ and customize your player character, enabling new/enhanced abilities and unique aesthetics. There will of course also be rarity levels for items.
◆ Portable-Gaming - I am experimenting with building these gaming experiences (or user interface components) into NFTs - which means you can take the game and items/characters anywhere your wallet goes
◆ Much more TBD/TBA - From smart contract enabled scoreboards & progress tracking (achievement/rewards), these are just the immediate examples of ideas I am working towards. There are many other areas to delve into here (too many options, not enough dev time!)

I will be posting more about the game itself in upcoming updates as development progresses.
Stay tuned!

---

Why? What? Web3?

I am seeing some exciting potential and benefits in having zkEVM/Smart Contracts in web3 gaming & dApps. There are many elements to be explored and developed moving forward, including:

◆ Ownership - Owning & controlling your own in-game items/assets & being able to openly trade/invest those items whenever and however you want, external to any in-game system or economy
◆ Security - Utilizing ETH for player/item validation & hacker-proofing of gaming systems
◆ Cryptocurrency Integration - web3 is of course a part of the crypto industry overall, enabling token/coin integration and an overall ability to adopt and work alongside digital & decentralized currencies + grow along side these expanding industries and projects
◆ Decentralization - More power into the hands of players, automated systems which work for gamers. More gaming, more fun, less centralized sources of power to get in the way
◆ Transparency - Blockchain tech is immutable and public, this keeps gamers and games more honest and open
◆ Global Accessibility - Web3 is accessible around the world, and can serve as a distribution platform for games and gaming assets
◆ Scarcity, Rarity, Opportunity - Players can earn in-game or win items of real value and the potential to find rare items of high value adds another level of excitement and fun!

---

End Notes

It is also worth noting here that - I aim to share this knowledge with you all as well!

There are some great developers here in the Taiko community and also new developers wondering how to get started. As I continue this dev-journey I want to provide educational/tutorial content to show others how to start their own web3 projects on Taiko/Layer2. I want to do my part in making web3 easier to access + connect with other likeminded developers or crypto enthusiasts as we march towards that Taiko mainnet launch & beyond

The tsunami of DeFi & dApps being built on or moving to Layer 2 is coming - lets be a part of it!

-Alex_ADEdge

---

To follow my projects/digital art → Find me on Twitter or jump into my Discord!

[Alex_ADEdge]

TODO/Progress Tracking:

Console/NFT Foundation
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ Dynamic Frame Template (05/10/22)
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ Revamp/Refactor Interactive Console (19/06/23)
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ Finalize ‘Interactive Console’ features

Smart Contract Development
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ Test-deploy contract via Taiko Alpha-3 testnet [deployment test] (11/06/23)
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ Develop test contract (basic functionality)
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ NFT → zkEVM contract interface

EVMachina Demo - Alpha Prototype
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ Menu Graphics v1 (11/05/23)
‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ Basic gameplay mechanics (more details TBA)
‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ Basic gameplay graphics (more details TBA)
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ [alpha] Player-Character v1 (more details TBA)
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ Player-Character → Demo integration
‏‏
Alpha Test [Round 1]
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ Call for alpha testers
‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ First round of alpha testing

---

- Todo
- In Progress
- Complete

---

Last updated 31/08/2023

[Alex_ADEdge]

1st update, for 2024!

Lots of work with Taiko Alpha testnets & smart contracts through the end of 2023 until now, which has been an interesting area of programming to be able to dive into. I would like to share here some of the behind the scenes dev I’ve been working on (this will be a long post, but this thread is meant to be a bit of a dev-log anyway, fair warning!)

Lets get into it:

1) Alpha-3 Testing Begins, zkEVM Foundations

https://twitter.com/Alex_ADEdge/status/1696890359773585723

I jumped into testing Taiko (for the first time) during the Alpha-3 Testnet (Grímsvötn).

Pretty early on I working on a simple web interface. This web interface allowed me to monitor & debug making contract calls as I developed them, and display information in a more user/dev-friendly way. I also needed to find the best library to interface with smart contracts using javascript. After a bit of research and chatting with other devs, the best library for this purpose ended up being web3.js.

Here is an early GIF of the first iteration of this web application/console:

The top half of this GIF is my WIP custom web3 interface, you can see it makes a call here to a ‘contractFunctionSetMutable()’ function. This function sends a specified string to my smart contract to be stored in a ‘mutable’ variable on the blockchain (this all of course happens via Taiko zkEVM). Think of it as a simple ‘write’ (SET) request. The string specified in this test (and which I was attempting to store on the blockchain) is ‘hello_TAIKO’

At this point I was wanting to test mutable and immutable (static and dynamic) variables in smart contracts and see how data can be stored within contracts. So I deployed a contract to allow strings and numbers to be sent to be stored on-blockchain. There is also an immutable string which is set when the contract deploys (and can therefore never be changed). With web3 game development in mind, storing data and states on the blockchain (say for a character, or NFT) is at the core of what I am building, and so I need to learn how to do this best.

In GIF above, you can see a transaction hash is returned right away, and we await the receipt from Taiko which will confirm the request has been processed and gas fee has been paid (this can be rejected for various reasons at this point, whether the gas fee limit of the contract call was too low, the contract call was invalid, or simply some condition required to interface with the smart contract failed). You can see in this GIF, towards the end, that the contract call passes and the receipt is received: “Contract Call Complete” → The smart contract has received and processed the string, and this string is now stored on the blockchain (ie within this smart contract). Note that the gas fee here seems to be around ~4c-7c, but will increase as more data is sent (ie if a longer string of data is sent to be stored) and depending of course on network traffic. For the Alpha testnets, this average gas price has for the most part remained constant around 1.5 Gwei.

The lower half of the GIF shows the Taiko explorer view for the contract address (in realtime!!). Its pretty exciting to watch contract calls generating in realtime as the web app makes its requests. We can literally watch the changes being made to a smart contract as they happen, and then watch the data received by the web app and displayed in the interface - very neat!

A quick look at some of the code involved.
From the web interface side of things, using web3.js - this is what we call to initiate a contract method call.

And the smart contract side - the methods of the contract which execute some very simple changes.
_{(Smart contracts can be so elegant!):}

I then make a new request to the smart contract to view (GET) the data currently stored in the contract:

This request - ‘contractFunctionGetMutable()’ - makes a simple (and gas-free) read request to the smart contract. And you can see the string we sent in the previous command is returned - “hello_TAIKO” - which is exactly what we want to see! The string is now stored in the smart contract, and we can view this data as needed.

Some tweets covering this further:
https://twitter.com/Alex_ADEdge/status/1698013398280413457

2) Alpha-4 (Layer3), Tinkering with Layers

The Alpha-4 testnet (Eldfell) then launched, on top of the Alpha-3 as a Layer 3, so I of course took the opportunity here to test deploying to Layer3 as well. The thing about Taiko, even with these testnets, is that this stuff just works. It was a painless exercise to just switch to Layer3 and deploy there instead. I tested the same script as the Alpha-3 (Layer2), and all was well.

Note here that the gas fee on the contract call was 4c for Layer 2 (Alpha-3) and 7c for Layer 3 (Alpha-4). I have no idea if this is relevant at all, these are testnets afterall. It will be interesting to test price differences between layers in the future when mainnet kicks off, there will be a lot of interesting elements to compare, working between different layers and finding the best place to deploy projects.

I also updated my web app a bit here, a bit cleaner, and with the Taiko logo and layer mentioned, now that I needed to handle multiple different layers and alpha testnets.

Tweets about this, over on twitter:
https://twitter.com/Alex_ADEdge/status/1698723934043304342

3) Alpha-5, The Deployments Continue …

I didn’t deploy too much overall with the Alpha-5 testnet (Jólnir). The end of 2023 got a bit busy with life stuff. But I did at least deploy some contracts and made sure to keep the ball rolling - if not just for the sake of history and staying active and in the loop with the latest Alpha testnet. At this point I was also working moreso on the NFT/asset side of this project too (updates which I will share in the next post), so smart contracts took a bit of a back seat.

4) Alpha-6 - Current Developments, heading into 2024

And finally, we are caught up to where I am up to as of Jan/Feb 2024.

When the Alpha-6 testnet launched I jumped right in and started testing some other areas of smart contract development. For starters, I needed to set proper ownership over smart contract functions. This locks down function calls to certain specified wallets (either the wallet which deployed the contract, or white-listed wallets stored in the smart contract itself) so contracts aren’t exposed in a public manner, where anyone can make calls to the contract and change the data stored within.

I also managed to get the web app file size down from 163mb to 1.2mb, with file size being a critical factor with upcoming dev goals this was a great optimization. The web app interface also got another overhaul, with an animated ‘Taiko’ element when smart contract calls are made - purely to help visualize when the web app is waiting for data or contract calls to complete.

You might also notice here the ‘0xWallet’, which is a smart contract I deployed which mimics a (very!) simple wallet:

You can send ETH to the address of the contract, and the ETH gets stored at that location (and there is also a function to withdraw that ETH again too, so it doesnt get locked up).
Note that this isn’t a smart wallet, or self custodial wallet - its just a very simple implementation of the beginnings of a wallet I started tinkering with out of interest. I would certainly like to dive into other elements of smart wallets, there’s a lot to learn here - but it is not the main focus currently.

Some tweets about this ‘wallet’: https://twitter.com/Alex_ADEdge/status/1748559445410631915

So that’s a lot of text! But many months of dev to cover. I hope it was at least an interesting read for anyone following my web3 dev, or just interested in this stuff in general.

Next up, I am keen to share some progress on the NFT side of this project - stay tuned Taikonauts.

*and dont forget to jump on the discord or follow me on twitter!!

[oneofthenfts]

very interesting reading bro, I think when this has a completed interface it can become a full-fledged application in the Taiko ecosystem, keep it up buddy, well done

[Alex_ADEdge]

Thankyou @oneofthenfts! I’m glad you found it an interesting read.

The web app certainly can become a full-fledged application on Taiko. I am currently developing it from a perspective of being a simple ‘template’ for devs to get started with, for either myself or others to use as an initial framework for developing DeFi apps or simply debugging contracts during development.

But I do have ideas on specific apps I can create with these components I am putting together too. Lets see where it goes