Your Blockchain, Your Web3: Configuring a Personalized Web3 Experience using the power of Saga
- Introduction
- Launching your own Chain using SagaCli
- Connecting your own chain to a block explorer and Metamask
- Connecting your own chain into your personal projects
Introduction
Web3 has made remarkable strides since its inception. Back in the early 2010s, creating a Bitcoin wallet often required navigating a Command-Line Interface (CLI). Even in the present day, it can take seasoned cryptocurrency teams several months to successfully launch their own blockchain. However, thanks to Saga, launching your very own blockchain is now achievable in less than 10 minutes!
This will be a article series covering:
- How configuring a Personalized Web3 Experience using the power of Saga (this article)
- How deploy your smart contract in your chain.
- How to create a faucet for your chain
In this guide, we will demonstrate how to configure your own blockchain built using Saga within your web3 decentralized application (dApp).
Launching your own Chain using SagaCli
While Saga already provides excellent documentation for exploration, I’ll briefly walk you through what I did to build my chain.
After downloading and configuring the SagaCLI, I utilized the following command:
sagacli chainlet launch SagaOS 0.5.2 tutorialsworld \
--genesis-account 0x8D37cb3624e1CB8480DceCC7884330a0449Dd9f0:10000000000 --denom tworld --fees 2500upsaga
Where:
sagacli chainlet launch
is the base command to launch chainletSagaOS 0.5.2
is the chainlet type and stack version to launchtutorialsworld
is your blockchain name--genesis-account <address>:<num_of_tokens>
The genesis-account flag consists of your EVM address and the desired number of full tokens in your account, separated by a colon “:”. You can directly copy the address from your Metamask wallet.--denom tworld
is the currency symbol you’ll create. (I suggest that should be between 2 and 6 characters).
I have included an image below for better clarity:
Ultimately, you should achieve all of this once you have successfully launched your own chain.
Following these steps, you can verify your setup by executing the command sagacli chainlet list
to obtain your ChainId. Then, use the command sagacli chainlet apis <your_chainId>
to retrieve all the endpoints associated with your ChainId.
In this case we have:
ws
(websocket): tutorialsworld-1699000173917438–1.ws.testnet-sp1.sagarpc.ioexplorer
: tutorialsworld-1699000173917438–1.jsonrpc.testnet-sp1.sagarpc.iojsonrpc
: tutorialsworld-1699000173917438–1.testnet-sp1.sagaexplorer.io
Copy and paste the explorer endpoint into your web browser (in this case tutorialsworld-1699000173917438–1.testnet-sp1.sagaexplorer.io).
Now, you can observe real-time updates of all the blocks being produced on your own chain.
Connecting your own chain to a block explorer and Metamask
There are two ways to add your chain to Metamask:
- You can do it directly from the explorer
- Manually add your chain in the Metamask settings
Connecting your own chain into your personal projects
Now that we have everything we need, you can connect your own chain to any project you have built.
I am going to use one of my personal project which is a simple “AddressBook” (github saga branch) and I’m going to explain how I configured my project to have access to my chain.
If you want to go into detail about this project, you can refer to this article. Essentially, you need to know that in this project, we are going to use:
- WalletConnect / WebModal V3: for wallet connectivity
- Wagmi (Viem version): for read and write call smart contract.
You can also faucet some of mine TWorld token and enjoy the Live Demo of the dApp.
To configure your dApp, set up the following configuration in your _app.tsx
file (if you're using Next.js) or main.tsx
file (if you're using Vite, as in this case). Ensure that all functions are called outside the App component.
But, most importantly, if you want to use your chain in your dApp, you need to apply this configuration.
Then add your chain to configureChains
:
In the end you should have your file _app.tsx
or main.tsx
like this:
If everything is configured correctly, you should be able to connect your wallet to the dApp and see that your dApp network is your own chain.
Conclusion
In this guide, we’ve covered the essential steps to configure and connect your own blockchain chain within your web3 decentralized application (dApp).
Starting from setting up Saga and utilizing the SagaCLI for chain creation, to integrating your chain with a block explorer and Metamask, you now have the knowledge to bring your personal chain to life.
By following the provided instructions and ensuring correct configuration, you should be able to seamlessly connect your own chain to your dApp.
This empowers you to take control of your blockchain project and leverage it for your specific needs. With these insights, you’re well on your way to realizing the full potential of your decentralized applications.
If you found the article valuable and wish to offer a gesture of encouragement:
- Clap 50 times for this article
- Leave a comment telling me what you think
- Highlight the parts in this article that you resonate with