How to build your First Fuel DAPP
In the world of rollups, Ethereum acts like the hardware on which everything is built. The Rollup Operating System operates on top of this hardware thereby solving for scalability.
Fuel is designed as a purpose-built architecture which is required to enable a rollup-centric future. The architecture Fuel incorporates is the combination of all the features of other L1s, namely Bitcoin’s UTXO model, Solana’s parallelization, Ethereum’s security. Move’s Asset-Oriented design and Cosmos’s interoperability and VM customization along with state minimized execution. This kind of architecture thus provides the ultimate operating system for Ethereum Rollups. Fuel also has native account abstraction and supports transaction signing with wallets from any network. We will see step by step guide to build your first Fuel Dapp.
Although these above words are quite hard to understand but I have provided the links for diving deeper into the understanding of these words like Bitcoin’s UTXO model, Solana’s parallelization, Ethereum’s security etc..
Things to focus in the Fuel Network :
FuelVM : The Fuel Virtual Machine (VM) is the heart of the Fuel.
It offers Parallelization for the maximum performance.
It offers State Minimization for the sustainable state growth.
It offers Customization for easier integration into app specific chains.
Sway : Fuel Network has its own flexible programming language designed for blockchain environments i.e., Sway.
It is specially focused on smart contract development with all the benefits of Rust’s memory management and type safety.
It incorporates the best features of various languages without committing to specific resources.
Tooling & SDKs: Advanced set of software tools explicitly crafted to support and optimize operations within the complex ecosystem of blockchain technology.
It has streamlined processes for building, testing and deploying smart contracts, ensuring the smooth and efficient development pipeline.
It incorporates highly extensible architecture through Forc plugins, allowing customization and extension of functionality to meet diverse developer needs.
How I created my First Dapp?
I was introduced to Fuel Network during a workshop at Eth-Mumbai led by Dhaiwat Bhaiya(Dhaiwat Pandya) who is a Developer Engineer at Fuel Network. Where he delivered some knowledgeable facts about Fuel Network and some insights of how someone can contribute to the Fuel Network.
As a developer it is very easy to understand the ecosystem of Fuel Network. Fuel has their own Docs, SDKs and Developer Forum for helping the developers.
Tutorial: Creating your first Fuel Dapp
Fuel offers its own DSL (Domain Specific Language) called as Sway. Sway is based on Rust and includes syntax to leverage a blockchain VM without needlessly verbose boilerplate.
It has its own Standard Library, Sway Playground for Smart Contract testing and deployment and have some example applications too.
It provides the SDKs like Rust SDKs, Typescript SDKs, Wallet SDKs and also GraphQL API to start to build on different development environment.
Fuel also offers Developer Tooling (Forc – Fuel Orchestrator, Fuelup – Fuel Toolchain Manger) anyone can have a completely vertically integrated experience where every component, from the virtual machine to the CLI, works in harmony.
Fuel is currently live on Testnet only, latest one is beta-5.
There are 2 ways to start to work with Fuel’s Example Applications.
First way is to start Rust SDK.
And the second way is to start with Typescript SDK which I have chosen during the hackathon. It helps me to easily setup the project by running only one command and start working on one of the example applications where Fuel has provided different application’s smart contract upon which we have to build the Frontend part of the application.
Let’s see the Step-by-Step how to start with any one example application
You can make your first Full-Stack Fuel project locally with the following commands
Step 01: First, we have to go to Typescript SDK where we have to copy a command
npm create fuels
. This command will setup the whole Full-Stack Project to start with the application for frontend part.npm create fuels or npm create fuels [project-name]
This will setup a new full-stack fuel dapp locally. Then you need to follow some commands to get things running, you’ll need to install the dependencies and start the development servers
Step 02: Then add the smart contracts directly to your project in the sway-programs folder, you can also modify the smart contract according to the need basis.
Step 03: Then we have to deploy the smart contract buy running the command
npm run fuels:dev
in one terminal and we don’t have to kill the terminal. This command will run the development server locally.npm run fuels:dev
After running the development server, you will get this kind of thing in your terminal. If you will get any kind of error then please post the error on Fuel’s Developer Forum
Step 04: Then we have to open another terminal and start the frontend dev server by running the command
npm dev
npm run dev
After this start to work on the frontend part and create a basic layout where your project showcases the functionalities of that smart contract.
If you find any errors during building the application you can post those errors on the Fuel’s Developer Forum.
How Fuel Example Dapp looks like ?
Fuel have many example applications on their GitHub repo. The default example you will see after the installation is the Counter Increment application, Predicate application and Script Running application.
After clicking on an Increment Counter Button, it will take approval and signer to increment the counter :-
After approving the transaction it will Increment the Counter.
Let's move to another example Predicate application, Where we will predicate the 1000 amount from our wallet balance by clicking on the Transfer 1000 to Predicate Button and then retrieve back those 1000 amount to our wallet balance.
It will take approval and signer to approve the transaction and predicate the 1000 from our wallet balance.
After approval it will Predicate the 1000 amount.
Now Unlock the Predicate by clicking on the button Unlock Predicate and Transfer 1000 back to Wallet.
Now, Let's see another example Script Running application.
In this application we have to input a random number to print that script. So after that we will run the script by clicking on the button Run Script. It will take approval and signer to approve the transaction.
After approving it will print the script.
Here you can see how the fuel's sway smart contract is interacting with the application by incrementing the counter, predicating the amount and printing the script. Same as you just have to use their smart contracts which is available in their GitHub repo and built an MVP application with good UI for explaining what's the smart contract is doing. Their Smart Contract is awesome like we need not to search for the smart contracts, it's easily understandable and very easy to integrate.
Conclusion
While Fuel provides diversity to their users or developers to onboard in their ecosystem. If you are Rust Dev you can start with their Rust SDK and if you are not you can start with their Typescript SDK. They have their own toolchain manager, orchestrator, explorer, faucets and playground for the smart contracts.
If you are interested to contribute to the Fuel Network then you can start with their Example Applications , simply just use their smart contracts and showcase the functionalities by developing the frontend UI part. If you get stuck into any error then there is a dedicated platform Fuel’s Developer Forum, here you can ask your doubts and post your errors.
If you have any feedback or idea for the Fuel Network you can directly connect to their Discord or else you can reach out to their Twitter handle.
At last thank you Dhaiwat Pandya bhaiya for guiding, helping, reviewing and introducing this emerging blockchain.
Subscribe to my newsletter
Read articles from Aditya Kumar Singh directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by