ETHGlobal Brussels 🛠️ Learn how to build on Vara - ETHGlobal Brussels 2024

hello my name is Eugene today I will show you how to build your first Vara application we will cover the whole process of building the Vara dap starting from the contract side then we will connect the front-end side and learn the structure and all the libraries we need to prepare our application for deployment we will start with an easy and simple application example it's basically a counter app but it is crucial to understand how messaging works what tools we should use for deploying contracts and how to act from the front-end part let's start first we prepared our example let me show you this is our example we just copy our link go to the terminal and clone our project start by opening it with our vs code file open the workshop's simple counter tutorial first let's see our contract this is a standard rust program as we can see in the cargo tol it's our package manager we can see the dependencies we are using here G meta G test GST TD gstd is a gear library for building smart contracts Gest is a library for testing smart contracts gima is a tool to generate metadata ansm Builder serves to optimize our compiled wasm file if we were using more complex types we would also use parity scale codec but in this example we are not using it let's check our source path here we can see our smart contract example this is a simple counter first we see our imported modules crates we should pay attention to message method next we Define our state and let's talk about required entry points first the init function the init function processes all code once when we initialize our smart contract in the network the next required function is handle in handle we process all messages during the program's life cycle everything that comes to the program will be processed here we use message trade load our message and decode it with the load method If the message matches our logic we just increment a counter with plus one that's all with messages we can also reply from the network like emitting a reply event the last important thing is our ui's state function State this free view function Returns the whole state of our program we provided examples of how tests work if you are interested but I will delete this part of the code let's check how to build the smart contract I open the terminal and type this command everything we operate here is with the cargo package manager cargo build flag release just wait and then our smart contract will be built it could take some time our smart contract is already built and we can check our Target the path stays in Target wasm 32 unknown unknown release Here we can see our Target file the WM file is our smart contract next to upload the smart contract one download the file two go to the Gear IDE portal it's a special developer application that interacts with RPC nodes to upload programs send messages and read program state three connect our wallet gear idea supports different wallets from the substrate ecosystem like polka. JS extension sub wallet Talisman and encrypt Etc four I use the polka dot extension I can choose from my accounts here I have a test account in the bottom left corner I can see the network State I selected the Vara Network test net if I don't have tokens for development purposes I can press this button to request tokens in my case I have enough tokens once I stay in the Vara Network my account is already connected and I have enough balance five upload the program by selecting the file path Workshop simple counter contract Target path wasm 32 unknown unknown release and naming it hamster Clicker calculate the gas by pressing the button sometimes when we initialize our program we can send a message to process it in this example we don't have any message submit the program it sends the transaction check the program status it has an ID is activated and shows the creation date code hash metadata and messages list also we can read the program's state right now it's zero next we should connect our program to the front end and learn how it works I go to the front end and install all the dependencies using yarn three open the NV file and copy the program ID then rename name it four run the application with yarn start okay this is our simple counter this is the famous hamster as you can see I connect my wallet the same way update the managed website and now I manage wallet access I will use my test account and let's see we send a message if we click we send a message and change our state let's discover how it works from the front end for this we provide a big batch of different hooks to help you send messages and read the state we can find the metadata file that we use to encode and decode messages in state the most important tools can be found in Source app hooks API here you can see all the needed functions to work with metadata and program State also we provided our custom function to read State and send program messages all these functions can be used from gear JS react hooks let's check our main app component here we also use different helpers like use account use API if the API is ready we display our application if it's not we can show the loader let's try again and check the template our template provides API all hooks wallet connection Etc let's send the message now you can see in the code that our state was incremented to+ one let's send the message that's all you need to know to start building a Vara application we will leave this link to try this example this is just a simple example to understand the basics how messaging works the contract structure which libraries to use for the front end side and how to work with metadata but Vara of course has many more advanced capabilities everything you can discover in our Wiki documentation and learn about how everything works how asynchronous programming Works how gas reservation Works how messaging works how the built-in actors work you can see all the information described there we have also prepared different examples like showcases to help you build more complex applications you can check the Vera website for daps examples about 35 different smart contracts use the full range of our features including staking delayed messages asynchronous interaction and oracles everything you might need feel free to use this example in your work so guys thank you for watching I hope my workshop will help you start building on Vara if you have any questions just use our official Telegram and Discord channels to ask our developers thank you bye-bye