Building a GIF Portal on Solana

In my previous article, I talked about learning how to create a Dapp on the Ethereum blockchain using Solidity. It was my first step into the Web3 world. However, I didn’t want to limit my experience to one blockchain or one language. So, I wanted to explore other competing blockchains to learn more about their comparative advantages and limitations.

This brought me to Solana, which is a fast, scalable blockchain that comes with lower network fees than Ethereum. I looked through a few tutorials on Solana and decided to use a tutorial from Buildspace, which is a huge community of passionate Web3 developers. If you’d like to expand your knowledge on Web3 development, I would highly recommend doing a tutorial or two from this site.

Overview

• Solana vs Ethereum
• Solidity vs Rust
• Environment setup
• Challenges
• Project Walkthrough
• Demo
• Next Steps

Solana vs Ethereum

Below is a comparative analysis of Solana and Ethereum.

History

Ethereum was launched in 2014, and since then, has matured into the most developed DeFi ecosystem. Throughout its lifetime, Ethereum has gone through multiple challenges that were resolved with forks, which created branches like Ethereum Classic.

Solana, on the other hand, was founded in 2017 by Anatoly Yakovenko and went live on the Mainnet in 2020.

Market Cap

As of right now, Ethereum’s market cap is roughly USD 370 billion, which is more than ten times that of Solana’s, which is at around USD 34 billion.

Consensus Mechanism

The major differences between Ethereum and Solana come from how their consensus mechanisms work. Ethereum uses Proof of Work (PoW), which is the same consensus mechanism that Bitcoin works. However, in Ethereum 2.0, they are planning to transition to Proof of Stake (PoS), a much more energy-efficient mechanism.

Solana, however, uses a consensus mechanism called Proof of History (PoH), which is much faster while maintaining a high level of security. PoH relies on a high-frequency Verifiable Delay Function (VDF) that provides a unique result that can be used to solve the issue of agreement on time.

Scalability & Transaction Speed

The Ethereum layer-one blockchain lacks scalability and can only process around 15 transactions per second. This problem is usually solved by layer-two scaling solutions, which include having sidechains, or multiple chains on different networks like Polygon. Ethereum 2.0 is expected to be a highly-scalable solution that can process up to 100,000 transactions per second.

Solana, on the other hand, is a highly scalable layer-one blockchain at the base level and doesn't require a layer-two solution to increase the scale. The Turbine block propagation protocol used in Solana breaks down data into smaller chunks, aiding easier transmission over the network. Another technology called Sealevel helps the processing of transactions across GPUs and SSDs, making Solana fast and scalable.

Solana network can process up to 60,000 transactions per second. It uses the Tower Byzantine fault-tolerance (BFT) mechanism to remove the nodes to communicate with each other in real-time, thus improving efficiency. BFT is the property of a computer system that allows reaching consensus regardless of the failure of some of the components.

Network Fees

The average transaction fee on the Ethereum blockchain is approximately $15, whereas the Solana fee is currency averaging at $0.00025 per transaction. This low price is because of the much higher block size, which makes it easier for transactions to be added to the block.

Solidity vs Rust

Solidity and Rust are both languages used for writing smart contracts, but there are several things that separate them based on their usability.

While Solidity is a specialized language designed specifically for writing smart contracts on Ethereum, Rust is a general-purpose language that can be used not just for smart contracts on Solana, but also for several other applications, a popular one being applications that were built by Google, Discord, Amazon, and many other companies.

Both of these languages are Turing-complete, meaning they can use conditional repetition, conditional jumps, variables, etc., to code any logic.

Environment Setup

For this project to work, I needed to use various dependencies as well as several tools. In this section, I’ll walk through various tools that helped me complete my project.

ReplIt

ReplIt is an online code editor that makes it very easy to run frontend applications. When using local code, normally you’d have to use a hosting service like Vercel or GitHub to get your website on a public domain. However, ReplIt has a built-in frontend service so you can instantly get a URL to your website.

Phantom Wallet

The Phantom Wallet is Solana’s top crypto wallet. I used it in this project to easily interact with the Solana blockchain from the frontend side of the application. Using the Phantom Wallet allowed me to submit GIFs to my GIF portal, as well as give tips to the submitter of each GIF.

React

React is an open-source JavaScript library you have probably heard of, and it’s used to help create frontend applications. Its design allows for web pages to be quickly loaded, and stores dynamic values, so the website can be updated in real-time.

Rust

Rust is a widely-used, Turing-complete programming language, and programmers mainly use it for creating a variety of algorithms and applications. Solana uses Rust as its main programming language for smart contracts due to its versatility and speed.

Mocha

Mocha is essentially a JavaScript testing framework that is helping us test our Rust programs to make sure they give the desired outputs.

Cargo

If you’re familiar with Node, you would know what Node Package Manager (NPM) is. It essentially helps with storing and managing certain dependencies for your project. Cargo is like that, but instead, it’s a package manager for Rust. I install all my Rust dependencies using Cargo.

Anchor

Anchor is one of those dependencies. If you know Ganache, and how it helps developers deploy smart contracts on Ethereum, then Anchor is essentially that but it’s used for, you guessed it, Solana.

Solana

I included Solana in this section because there were some CLI methods that I used with it to get test SOL for network fees.

Devnet

Like Ethereum, Solana has many different networks to fit someone’s needs. The Mainnet on Ethereum is the same as the Mainnet on Solana. Rinkeby, Ropsten, and several other test networks on Ethereum are like the Devnet and the Testnet on Solana. The Devnet is used to test my smart contracts and frontend to make sure there are no bugs before I upload to the Mainnet.

Solana Explorer

The Solana Explorer is used for viewing the status of a block to check if the transaction went through. It’s a quick and easy way to check the activity of the validators through transactions per second (TPS), and can also tell you the circulating supply of SOL, the current active stake, and the speed of the network.

Challenges

Status of the Network

At one point when I planned on working, I found that Phantom was suddenly not working, and neither was my web app. Every time I tried to submit a GIF or give a tip to the submitter, Phantom wouldn’t even open as a popup, meaning I couldn’t approve transactions that were supposed to be sent.

So, I opened Phantom up manually only to realize I kept getting this random error message, and after some investigation, I later found that the Devnet was down due to some maintenance. Eventually, this outage prevented me from working on my project that day.

Rust

Programming in Rust came as a challenge to me, as I did not have prior experience with Rust, or similar languages, such as C, Swift, Golang, etc. I kept referring to the Rust Docs to create a better understanding of the dynamic of the language.

However, there were several challenges such as understanding the use of the “Context” keyword. when trying to implement the liking system, I had to use a keyword called “Context,” and I had no idea what that meant. I had to search several times, visit many different documentation websites, and listen to various tutorials until I realized I wasn’t looking for it properly.

Essentially, Anchor is its own language, which is a little different from Rust. It is only Anchor that has the “Context” keyword available to use, not vanilla Rust. The “Context” keyword, as stated by the Rust Anchor_lang docs, provides non-argument inputs to the program.

Frontend

One thing I like about the Buildspace courses is that the creators of the courses don’t just spoonfeed everything to you. They tell you to figure out how to implement things on your own. Doing these things on our own is optional, but I wanted to do them anyway, because why would someone not want to implement a voting system, display the wallet address of the person who submitted a GIF, or implement a tipping system for those who submit awesome GIFs?

Of course, doing this would come with challenges, and I met a bunch of them along the way. There weren’t really any challenges with displaying the wallet address of the submitter of each GIF, as that was easy due to the simplicity of the map() function in JavaScript. My first real challenge came when I was trying to implement the tipping system because I had to use some code I wasn’t familiar with. Luckily, though, someone on Stack Overflow had the same problem as me and I was able to resolve it.

My biggest problem, however, was when I tried to implement the liking system, which I already explained in the previous sub-section. It wasn’t possible to implement the functionality on the frontend, because the number of likes and dislikes would reset every time I refreshed the page. This meant that I had to implement it with the smart contract on Solana.

Installation of Cargo

Currently, Solana is still an extremely new technology. Because of that, in order to install it on Windows, you have to install the Windows Subsystem for Linux (WSL), meaning you’d have to use Ubuntu to get the steps to install Solana, and there are several other steps after that. Because of the fact that I didn’t have any experience with Ubuntu or Linux at all, I decided to develop the Rust smart contracts with MacOS.

Project Walkthrough

There are two levels to this project walkthrough: the frontend and the backend.

Frontend

This side of the code was created in ReplIt.

• Our assets folder is for images, logos, etc.
• App.css is where we store all of the CSS on our web page, while index.css is all of the core CSS for the fonts used in the application.
• App.jsx is our main React file. This has all of our conditional rendering like rendering the GIFs when the user’s Phantom wallet is connected. main.jsx simply renders everything inside App.jsx.
• createKeyPair.js creates a key pair, which is kind of like an ABI file for a smart contract written in Solidity, and stores it into keypair.json
• idl.json gives us functions and their parameters on the smart contract side, which helps us with calling functions and passing values as parameters
• index.html contains all of the HTML that should be rendered by default.
• vite.config.js helps with setting up the development environment for React

Backend

The backend section of this project was made in VSCode.

• The .anchor folder contains things like program logs and a test ledger for development.
• The migrations folder contains everything we need for migrating our smart contract to the blockchain.
• The node_modules folder contains all of the dependencies we’re using for the project.
• The programs folder contains the smart contract files in Rust.
• The target folder contains things like the IDL file and .json files for deploying the smart contract.
• The tests folder is for running tests to make sure everything works smoothly before deploying to the blockchain.
• The Anchor.toml and Cargo.toml files have some settings for our project, such as where to deploy the smart contract.
• The Cargo.lock file is kind of like the package.json file. It holds some dependencies we’re using for the Rust smart contract.

Demo

The demo starts here, but feel free to watch the whole video!

Next Steps

Now that I have a good understanding of how to develop on both the Ethereum and Solana blockchains, I will try to make my own application, without using a tutorial to give me an easy way to do it.

For now, I’ll try to explore different areas that I’m passionate about, so I can use blockchain to my full advantage and create an impact in that field.