Revenant

Inspiration

As the world continues to migrate towards web3 tech, demand for decentralization and smart contracts is growing.

Despite the surge, many new developers struggle with launching their first smart contract. My inspiration was to simplify smart contract creation and enrich a growing Fantom Ecosystem with a fully functional and easy-to-use platform.

As someone who is a developer in the programming industry for over 6 years, and having his first code written using Blueprints in UE4, I remember how much easier was for me to don't need to 'understand' the code, but be guided through colors and context of connecting nodes.

I knew that the visual approach to developing smart contracts could revolutionize the way we view the development process.
So I started developing a production-ready platform for everyone to use anywhere.

What it does

NOTICE:

The video covers only basic functionally I could fit in 3 minutes, but Revenant is more than whats just visible in the video.

This platform allows developers to quickly build functional smart contracts and solidity learners to more easily have their first smart contract up and running. It also allows deploying and contract compilation through the browser, and prompts the user to learn to use the console for other development purposes in any area.

Finalization:

The final product is actually having the visual editor so robust, that users cannot make compile errors when visually building the contract.
The whole process of development is wrapped through nodes, which have their own managers which handle error logic and contract logic, making the process of development smooth.

Blockchain

I needed a way for users to not store data on their local computers, because data may get lost, not named correctly, or just be randomly lost.
Due to the time limitations of a hackathon, I needed a fast and secure solution, that will both make the lives of developers easier and yet be as simple as clicking a button for new developers.
So I thought of building a RevenantStash contract.

This contract is responsible for storing data on-chain for users to have fast access to their previous smart contract built.
The most important function issendFile where I bind the user address to the contract that he is developing.
Also, a deleteFile function, where development data can be 'cleaned-up'.
There are also utility functions for retrieving data from a RevenantStash contract.

But this was not enough. Someone would want to develop a smart contract, but not have tokens to pay for transactions to store the data on-chain. So I come up with an idea to have a meta transaction. A meta transaction is a transaction executed on behalf of a user that wants it to be executed, but the fee for the transaction is paid by someone else (even tho that transaction belongs to the fee payer, user data still belongs to him).

And I knew this will help with onboarding new developers and making their life easier. So I created another contract called Forwarder which is responsible for verifying meta transactions and preventing replay attacks. The original transaction is first sent to Forwarder and then its executed as an internal transaction on RevenantStash contract. For this to work I needed to implement a proper backend solution and have my RevenantStash inherit a BaseRelayRecipient contract from opengsn. After the simple stuff is done, it was time to move on to developing the backend for meta transactions. In the process I like to keep my smart contract code as concise and simple as possible, so time was spent decoupling interfaces, storage, structs, ... from one contract to multiple.
For development, deployment, and testing I used Truffle.

REGRETS:

because of time constraints, not implementing EIP712 for my RevenantStash contract, to make everything more intuitive and easier, in case the user wants to sign the transaction by themself.

Backend

Even tho that meta transaction is one endpoint to a backend... I like to over-engineer my backend.
So I did everything through the process of separation and decoupling.
utilities -> services -> controllers -> routes -> middleware -> server
I said to myself, ok that's enough. It's just one endpoint you silly...
Nodejs and Express, are a Godly combination.

And I started developing the process of meta-transactions. First of all, I had to provide the private key of gas-payer (relayer) and have a way to protect him from funds being drained fast.
So I decided on 2-5 requests per day per IP address.
Then the process of meta transaction is next:

Check if the signature of the sent data and the address in the request match.
Call Forwarder meta transfer function.
Sign transaction to relayer.
Send it to the blockchain.
This is a somewhat high-level overview of the process...

Once that is done I did tests to see that everything works, before I move forward.
Later in the process of developing the platform, I realized I needed some examples of how to build a contract using my platform, so I also added that on the backend. Few contract examples that my frontend app will load when needed.

But still, that's not the end.
I had to deploy my server on a cloud platform, and for that, I chose AWS. They gave me the 12-month Free Tier to use their services. So I decided to publish both my frontend and backend on their platform.
For the backend, I used EC2 instance.
Server is running on PM2 (A process manager for Nodejs apps).
It was time to buy a domain for my backend and make it HTTPS.
For that case, I used Nginx as the reverse proxy and CertBot to get free SSL for my domain.
Now my backend is fully prepared to receive and respond to requests.

REGRETS:

Not setting up CICD pipeline at the start of the project when I should have, so all I did every time was pull changes from git and pm2 restart 0 (if you know what I mean...)

Frontend

I have to say it... this was a pain to execute.
But I did it!

Making my frontend intuitive, simple, user-friendly, newbies welcome, and full of hotkeys to provide the best development experience, I had to dig deep and low at high temperatures of React library.
There were many pitfalls, workarounds, and hacks in order to make things work, just to provide the best user experience.

As I said, the frontend app is built in React, but the most important factor that helped me to execute my project was the Rete.js library. Which provided my out-of-the-box tools to create nodes and connections between them.
Even tho I had to make so many changes to adapt it to my platform, such as building different styles for different types of nodes, hacking the library to work as i want it, writing my own plugins, so many other things. The process lead me to the result I wanted.

The important utility of every developer is to have an integrated terminal when developing. So with that in mind, I created a console just like you would use in any visual editor.
Hotkeys and commands - The developer's productivity.
My frontend is full of them.
Want to open a console? try CTRL+SHIFT+`
Want to hide a code? try CTRL+B
etc...
Many hotkeys are created for generating nodes to build a contract, and they are made the most intuitively possible.
For example:
Use Left Mouse Click +
F for Function
S for a State
E for Event
etc...

Also, write 'help' in the console to get the list of available commands.
My frontend app is also deployed on AWS, using AWS Amplify. In order to make it as professional as possible, I bought another domain for my frontend app as you know it by revenant.app

Everything was set up and ready for continuous development.
In the process of developing my frontend, I moved from writing my CSS in SCSS, for the reasons of faster development because of a camelCase nature of writing SCSS. I also needed a solution to compile contracts in the browser, so I was searching the internet for possible solutions because I didn't want to have a backend server that will compile files and send them back to the frontend app.
Eventually, I found browser-solidity-compiler from rexdavinci which had some errors, as Web Worker was not implemented correctly.
So I had to fork it and change it. The problem was that the web worker was not configured to correctly listen to message events. And it worked only the first time. I Fixed it and now it works without problems, but had a small drawback because it catches only one error at a time. So if your contract has multiple errors, the first one it catches it will show up and stop there. Other needs to be fixed by trying to compile the contract again and seeing where is the problem. My frontend app is fully integrated with Metamask and ready for production usage.

REGRETS:

Not implementing every feature I wanted... There are just so many things to add, starting from additional solidity keywords such as mapping, structs, enums, ... And just making the platform overall more intuitive, because I KNOW, there is so much room to make this so better, as i have personal TODO list for Revenant where I got over 50 tasks to implement...

How we built it

After I saw the hackathon has started, I thought for some time about what to build. Many things crossed my mind, starting from decentralized esports events, different smart contracts that serve various purposes + brainstorming with ChatGPT what to build..., I asked myself. What does the web3 space lack...

After a day of thinking, i realized visual smart contract builder is what web3 needs, as i rembered my younger self, when i was starting to learn the programming, how much i appreciated no-code/visual-based editor of UE4. I started searching if there are any visual editors for solidity on the market but I found none. I knew! Time to build one. I started searching for a javascript library that provides any use case of visual editing, and I found Rete.js. I spent a days studying examples and how it works, and finally I started building my platform. But there was a big problem... how do i generate any kind of code using this library, I had to dig into documentation even further, and make my own plugins for the library, since the current ones were not providing me with enough flexibility.

This was very hard, and everything I did was "eat, sleep, build, repeat". for days...
Until the 5th of June, when I officially published my working version on the Phantom Builders telegram group I was proud to show off.
During that process, it was always on my mind that I wanted this to be a fully-fledged branded platform, so I gave a task to my friend designer who I paid to create a logo and icons to use. She was very happy to do it for me! I wanted everything to be in the spirit of 'Fantom/Phantom'. So I researched a lot of names, and thought of Spectre, Revenant, Obsidian, Wraith, Banshee, ... But in the end, it was chosen to be Revenant.

It has the spirit of the Phantom.
It has a hammer to make solidity smart contracts development easy.
It has a shield, to protect users from shooting them selfs in the foot.
It has simplicity, it's easy to develop your smart contracts on Revenant, and also everything is one click.
It has blue friendly background, to help users with their first deployment and contract verification.

While building the platform, my focus was also on responsiveness and the mobile version.
After this was done, the only thing left was to keep updating my platform with new stuff, new solidity code, and many features.
In the meantime, I was brainstorming how to enrich my product.

Due to a nature of a platform and the complexities to execute it, certain things had to be sacrificed.
Since I worked alone on a project I had no time to work on marketing, but I tried to sometimes publish new changes on Fantom Builders telegram, and Fantom Official Discord channel.
Small likes and DM's from people interested in my Revenant platform kept me going even further. I know I was developing the right thing!

Challenges we ran into

This project ranks second as one of the most demanding undertakings I have embarked on so far.
The extent of features that needs to be built, as a one-man army is overwhelming.

But I'm proud I have production-ready proof of concept platform.

The biggest challenge was how to generate solidity code from the produced JSON file that I got from Rete.js. So I started studying how the JSON file is generated, what are connections, external data, and many more things.
And things clicked. I knew what to do.
Everything I needed about what node is connected to and data that is passing to another node, I just needed to figure out how to map node to solidity code.
Many things came to mind, many examples and failed attempts. But finally, I managed to make it work.

The solution was abstracting the nodes in a given JSON file to solidity keywords, nodes inputs to keyword dependencies, and node outputs to keywords as produced as code.
So for example, if we want to define a function, our inputs would be what are function arguments, what function returns, what are modifiers, what is the name of the function, visibility, and mutability. and our output is function code packed with all the dependencies previously mentioned.

And now that I had all the nodes mapped to the corresponding solidity code, I needed a way to assemble everything into a valid Solidity code, and not just some random keywords. In that sense, I had to study the structure of solidity code.

So, first goes Licence, and that compiler version, and then contract name, then state variables, also with enums, structs, and other required things, and then coming to a function. And in that way, I structured all the nodes so the proper code was generated.

Accomplishments that we're proud of

As I said previously production ready app for this short time period. I am very proud that I continuously worked without taking a day off. In the meantime, I learned so many new things about how to structure my app, and best practices, which can help me further down the road in my software development career.

Happy to have supported fellow hackers by distributing FTM tokens for their mainnet deployments.
Addresses used as a faucet:
https://ftmscan.com/address/0xa32fCdeA035c55B42158B30D01Dfa2334E6F2Bd0
https://ftmscan.com/address/0xca532ae2c80f1abb2fc1145e508b1dd260cf8a34
so everyone who needed it can kickstart and deploy their projects ASAP.

What we learned

I have learned that consistency and hard work pay off, and that if I want to build something I can and I'm capable of doing it.
Also, expanding my knowledge in solidity as I have been trying to implement almost every feature and example given on this website: https://solidity-by-example.org/

Fairness

Even though there are many things to implement, since the deadline is July 3, I won't be working on the Revenant until the judging process is complete.

What's next for Revenant

Are you interested in reading one more essay like this one?
You are welcome, let me show you the TODO list for Revenant.

The platform has the potential for improvements and continuous development.
Many things could be coming, starting from integrating imports, linting, adding more nodes that translate to solidity code, making the platform more intuitive, using openAI API to generate automated tests for built contracts, extending the platform for multi-user editing, etc...
However, this comes with its own challenges... Working solo on such a large platform could prove to be quite demanding.

Blockchain

There is not much to be done here, once contracts are deployed they work as intended.

Backend

There is a potential to improve backend service even further, with deployments on different networks.
Also verifying smart contracts on different networks, not just Phantom.

Frontend

So many things... I just can't list them all, but trust me...
Let's just name a few big ones:

Multiuser editing.
Deployed contract UI interaction.
Browser-integrated file system for contracts.
Magnetic connections
Node synonyms to help enhance the search bar in the context menu.

Business

The business logic is still not figured out, as the platform is currently free to use, and yet pays users their gas fee to store data on the RevenantStash smart contract.
For example, potentially for professional users, that would use advanced contract functionalities and work on different networks, a small monthly fee could be implemented.

As I consider myself a programming polyglot, I tend to lean in that direction and leave business plan development to others who specialize in that area. While I take full responsibility for the technical aspects of Revenant.

Functionalities

A high-level overview of functionalities in Revenant is listed here:

Press right-click on the mouse in the editor, to open the context menu.
In this menu, there are many nodes to choose from, select the one for your use case to build your contract. There is a search bar that can help you find the node you want faster!

Press Tab, to open the Revenant menu.

In there, you can: Compile,
Deploy,
Verify
your smart contract.
Connect wallet,
Export the contract's json file,
Import the contract's json file.

There are also many hotkeys for nodes. Hold Left Mouse Click and press one of those keys: 1,2,3 ...
q,w, e, r, s, f, i, n, z, a, b, ...
And many others.

Each key has its own node.

Also, if you mistakenly removed a node, or done something you didn't want. Use CTRL+Z or CTRL+Y to UNDO and REDO your work.

press CTRL+SHIFT+` to open the console.
in there type "help" to get a list of available commands.
Commands list:

        `clear - clear console from text.`  
        `cm - open context menu.`  
        `compile - compiles current smart contract.`  
        `export - exports the contract's json file.`  
        `import - import the contract's json file.`  
        `wallet - connect your web3 wallet with editor.`  
        `contracts - shows links to Forwarder and RevenantStash contracts.`  
        `ipfs upload - uploads the contract to ipfs.`  
        `ipfs delete - deletes CID from a smart contract.`  
        `ipfs load 'cid' - loads the contract from ipfs with cid as parameter.`  
        `ipfs relay 'name' - uploads cid to a smart contract and gives it a name.`  
        `ipfs relayed load 'index' - loads a relayed smart contract by index.`

Uploading your contract's json to a RevenantStash is done by command: ipfs relay <name>
You don't have to pay for this transaction as it's processed by a relayer who stores data for you on the blockchain. The way it is actually stored is by generating CID using thirdweb storage for IPFS. When CID is successfully pinned to IPFS, a request is sent to a backend service that processes MetaTransactions. Once that is complete and successfully executed. You can access your contract's json anywhere you go. Nothing needs to be stored locally on your machine anymore.

console tab called Editor logs keeps track of errors you made while developing your contract, there is a chance you tried to make invalid connections or similar.

Sidebar.
Not all functionalities are ready, but there are a few main ones:
New - generates new blank workspace.
Wallet - connect your web3 wallet
Examples - load the examples page.

The contract's code is Read-Only and can be modified only through the editor.