Soroban Snippets: Basic of Building Dapp
Tags: soroban, stellar, javascript, web3
Published: 2023-11-23 21:47:17

Welcome to the series of many where we'll be going over building in Soroban. Soroban Snippet is an application aimed to empower developers by providing comprehensive educational and interactive examples of working and building within the Stellar Network. We strive to simplify web and Dapp development on Soroban, offering practical insights and hands-on snippets in each section. Whether you're navigating the intricacies of network connections, estimating gas costs, or submitting transactions, our goal is to equip you with the knowledge and practical snippets that seamlessly integrate into your Soroban applications. 

[Soroban Snippet](https://soroban-snippet.vercel.app/)

# 1. Setting soroban and Freighter in JavaScript/TypeScript

The first thing we need to do is set up our connections to Soroban. In order to do so, we need the network information such as **Passphrase** and **RPC**. `soroban-client` makes it easy to connect to `futurenet` *or* `testnet` with the `Server`. This guide will provide you with the necessary information to connect to all Soroban networks, and let you test out whether a connection is successful.

[Setting soroban and Freighter in JS/TS](https://soroban-snippet.vercel.app/?title=4b494b00824d6be559221ddd2e36bda315250ffea230ab4ff654ed64a7a0fa12)

**2. Getting Gas Estimation in Soroban**

**Gas** plays a pivotal role in blockchain transactions. In the context of Soroban and Stellar's smart contracts, invoking contracts or adding operations incurs a fee, commonly referred to as gas. This tutorial introduces an uncomplicated yet powerful method for estimating transaction fees by leveraging the `simulateTransaction` method. A trial run tailored for contract invocations. Developers can utilize this approach to assess gas costs comprehensively before executing methods on Soroban smart contracts, providing them with essential insights into optimizing transaction economics. The tutorial further exemplifies this technique through a practical demonstration, estimating the gas cost for invoking the "mint" method on a Soroban smart token written in Rust, thereby offering developers a practical tool to refine their gas cost considerations before actual transaction execution.

[Getting Gas Estimation in Soroban](https://soroban-snippet.vercel.app/?title=93e18ef1006d0d4c177a3a1ef2b955f186c9405e8ab8ede6907af0863f13c7c2)

**3. Practical Guide Custom Types to XDR in JavaScript/TypeScript**

In this following tutorial, we'll go through an interactive guide on structuring custom types for Soroban smart contracts. This includes practical implementation of Rust `enum` and `struct` into Soroban's `ScVal` type. The Enum section illustrates the conversion of a Rust Enum, such as `TimeBoundKind`, into its JavaScript/TypeScript counterpart using `scvVec` and `scvSymbol`. Similarly, the Struct section demonstrates the transformation of a Rust Struct, like `TimeBound`, and an unnamed struct into Soroban's `ScVal` using `scvMap` and `scvVec`. Developers can utilize these practical examples to seamlessly incorporate complex custom types into Soroban smart contract calls, enhancing the flexibility and functionality of their applications.

[Practical Guide Custom Types to XDR in JavaScript/TypeScript](https://soroban-snippet.vercel.app/?title=d657cb97956a5795d092132ac8a19d1f798dc958694daf14c2aa0e0d32e0775e)

**4. Submit Transaction Process**

When building a Blockchain Dapp, developers frequently encounter the task of submitting transactions to the network. In the context of using `soroban-client`, this involves dispatching a transaction to the `server`. It's crucial to note that the Soroban client doesn't wait for transaction completion. Instead, a socket-like approach is necessary to continuously read the transaction status until it reaches completion. Developers can then handle the response based on its **status**. The provided demonstration delves into the fundamentals of these responses, with a specific focus on the `SorobanRpc.GetTransactionResponse`. It illustrates how developers can extract relevant information from transactions within practical usage scenarios.

[Submit Transaction Process](https://soroban-snippet.vercel.app/?title=2846ef53d171ed7ad3b47031a79168b2c98ad99f55fca1548a0899f4da0ae0c3)

**5. Difference Transaction and Transaction Envelope**

In Stellar, Transactions hold operations that modify the ledger, while the concept of a Transaction Envelope comes into play when a transaction is readied for signing. Essentially, it is a transaction that encompasses not only the transaction itself but also integrates a set of signatures. Diverging from raw Transaction objects, transaction envelopes circulate throughout the network and constitute essential elements of transaction sets. This differentiation elucidates their role in the Stellar ecosystem, offering a layered approach to transaction handling. Additionally, the demo provides an illustration of unwrapping XDR into its respective transaction and Transaction Envelope, facilitating their utilization with `soroban-client` to submit to the network.

[Difference Transaction and Transaction Envelope](https://soroban-snippet.vercel.app/?title=aaea0910c61285ba61bc296cbab141728e548fdd23623bf64d888bd39bf12508)