DEV Community: Vivek Pal

Getting Started with Umi

Vivek Pal — Wed, 04 Oct 2023 18:34:02 +0000

Welcome to this step-by-step guide on using Umi, a modular framework by Metaplex for building JavaScript clients for Solana programs.

In this hands-on tutorial, we will harness the power of Umi to build a simple Solana application that allows users to transfer tokens. This will showcase how to use Umi for connecting to Solana, creating accounts, and sending transactions.

Prerequisites

Before we start, make sure you have the following installed on your machine:

Node.js (version 16 or above)
Basic knowledge of JavaScript and TypeScript.
Familiarity with blockchain and Solana concepts.

Setting Up Your Environment

Let's get your development environment ready for Umi. Follow these steps:

Create a New Directory:
```
mkdir my-umi-project
cd my-umi-project
```
Initialize with npm: Once you're inside your project directory, initialize it with npm using the following command:
```
npm init -y
```
This command creates a package.json file with default values, making it quick and easy to set up your project.

Install Umi and Solana Dependencies: Now, let's install Umi and the @solana/web3.js library, both essential for your Solana development journey. Run this command:
```
npm install @metaplex-foundation/umi @metaplex-foundation/umi-bundle-defaults @solana/web3.js
```
This command installs Umi and the Solana Web3 library, equipping your project with the tools needed to interact with the Solana blockchain.

Creating Your Umi Project

Let's kickstart your Umi project with these simple steps:

Initialize Umi: Umi can be initialized by importing the required functions and setting up the connection to Solana's network.:

import { createUmi } from "@metaplex-foundation/umi-bundle-defaults";
const umi = createUmi('https://api.devnet.solana.com');

Generate Accounts: For this example, we will generate two accounts: senderAccount and receiverAccount. These represent the two participants in our token transfer.

import { Keypair } from "@solana/web3.js";

const senderAccount = Keypair.generate();
const receiverAccount = Keypair.generate();

console.log("Sender Account Public Key:", senderAccount.publicKey.toString());
console.log("Receiver Account Public Key:", receiverAccount.publicKey.toString());

Transfer Tokens

We will create a function transferTokens that takes in an amount as a parameter and uses it to transfer tokens from the sender to the receiver.

async function transferTokens(amount) {
    const { blockhash } = await umi.rpc.getLatestBlockhash();

    const transaction = new Transaction({ recentBlockhash: blockhash }).add(
        SystemProgram.transfer({
            fromPubkey: senderAccount.publicKey,
            toPubkey: receiverAccount.publicKey,
            lamports: amount,
        })
    );

    transaction.sign(senderAccount);
    const txid = await umi.rpc.sendTransaction(transaction);
    console.log("Transaction ID:", txid);
}

Display Balances

After transferring, we would want to see the updated balances of both accounts. The function showBalances does that for us.

async function showBalances() {
    const senderBalance = await umi.rpc.getBalance(senderAccount.publicKey);
    const receiverBalance = await umi.rpc.getBalance(receiverAccount.publicKey);

    console.log(`Sender Balance: ${senderBalance} lamports`);
    console.log(`Receiver Balance: ${receiverBalance} lamports`);
}

Execute Functions

To make everything work, call both functions. In this example, we're transferring 1000 lamports or 0.000001 SOL.

transferTokens(1000);  // 1000 lamports or 0.000001 SOL
showBalances();

Conclusion

Umi makes it easy for developers to integrate with blockchains. By using Umi and Solana's web3.js, we were able to quickly set up a simple token transfer application. Umi's flexibility and integrative capabilities ensure it can be an essential tool for blockchain developers. I hope this tutorial was helpful. If you have any questions or comments, feel free to leave them below.

Key Resources to Follow

To continue your journey with Umi and Solana development, consider exploring the following key resources:

GitHub Repo for this Tutorial

Beauty Of Javascript

Vivek Pal — Fri, 16 Jun 2023 18:51:53 +0000

I started learning Javascript when I was in 9th standard. But really diving into it last year. I felt love to code in it. I found JavaScript, an incredibly versatile language that is well-suited for web development, the thing I do most. Many people assume that if you love JS, then you tried no other language. But I have found that JavaScript's ability to manipulate the DOM and handle user interactions make it the best choice for web development. That being said, I recognize that every language has its own strengths and limitations.

💻 Why Javascript?

With the rise of Single Page Applications (SPAs) and the increasing demand for dynamic, interactive web experiences, JavaScript has become more important than ever. Because of its client-side execution, DOM interaction, and on-the-fly HTML and CSS manipulation capabilities, it is frequently used to create everything from basic website widgets to comprehensive web apps.
JavaScript has developed to satisfy the needs of contemporary web development, moving beyond classes and modules to include promises and arrow functions.

The Foundation of OOPs!

One of the most significant improvements in JavaScript has been the addition of classes, which provide a more structured way to work with objects. Classes are an integral concept of a mature programming language, and they make it easier to create and manage complex applications. They provide a more intuitive syntax for working with objects, including constructors, getters and setters, static members, super calls, and sub-classing.

A Native Implementation for Modular Code

For years, JavaScript developers have been working on systems that allow them to write modular code required to build complex applications at scale. Systems like CommonJS and AMD have become commonplace in the modern development environment. With ES6, the module system has a very compact syntax and supports asynchronous and configurable module loading, a system that CommonJS and AMD fans alike will love. This native implementation allows developers to write more efficient and maintainable code.

Refer - JavaScript Modules by MDN

Arrow Functions, A Shortcut to Cleaner Code

Arrow functions provide a shorthand method for writing anonymous functions, and they also provide lexical scoping inheriting from their parent. With arrow functions, JavaScript developers no longer need to hack around the issue of passing scope between contexts with bind() and apply() or this = that. Instead, they can use an arrow function as a callback and access the goodies of the parent function.

Greater Control Over the Flow of a Program

JavaScript has always had function-level scope, tripping up beginners and inflicting hacky pain on experienced developers throughout the industry. The let statement declares a block scope local variable and allows developers greater control over the flow of a program, offering respite from hoisting side effects. Put simply, a let variable declared inside of an if statement is not accessible from the outside, bringing some much-needed sanity to the language.

function exampleFunction() {
  let x = 1;

  if (true) {
    let x = 2; // declares a new variable x with block scope
    console.log(x); // outputs 2
  }

  console.log(x); // outputs 1
}

exampleFunction();

A Better Way to Handle Asynchronous Code

Promises have become one of the most popular design patterns in JavaScript. They allow us to write readable asynchronous code that’s easy to work with, ridding us of nested callback hell. With ES2015, promises are baked into the language, including all the features we’ve grown to love in earlier implementations. If you are new to Promises, now is the time to get involved.

More Natural Way to Build HTML with Template Strings

Building HTML with regular string concatenation is a nightmare with JavaScript, and it's an essential part of a language that constantly interacts with the DOM. Developers have been trying to fix this problem for years with fully fledged templating systems like Mustache, Handlebars, EJS, and others. Finally, using the new backtick operator, JavaScript developers can create template strings using variables natively in the language. String interpolation and multi-line strings are now supported, making building HTML in JavaScript a more natural and efficient process.

const firstName = "Shatoshi";
const lastName = "Nakamoto";
const age = 20;

const html = `
  <div class="person">
    <h2>${firstName} ${lastName}</h2>
    <p>Age: ${age}</p>
  </div>
`;

document.body.innerHTML = html;

Streamlining Your Code with JavaScript's Built-In Looping Mechanism

JavaScript Iterators are powerful tools that allow developers to traverse through data structures and retrieve data in a specific order. These are objects that implement the Iterator Protocol, consisting of a next() method that returns the next value in a sequence. Iterators can be used with various data structures like Arrays, Maps, Sets, and more. With the help of the for...of loop, developers can use iterators to easily iterate over these data structures and retrieve the desired values.

Unlocking Advanced Control Flow in JavaScript with Generators

Generators are an advanced feature of JavaScript that allow developers to create iterators with a simpler syntax. A generator is a function that returns an iterator, and instead of using the next() method to retrieve the next value in a sequence, developers can use the yield keyword to return a value and pause the generator. This allows developers to create iterators that can be paused and resumed at any time, making them incredibly flexible and powerful.

Refer - The Power of JS Generators by Anjana Vakil

How JavaScript's Flexible Function Parameters Can Improve Your Code

JavaScript Parameters refer to the inputs that are passed to a function when it is called. With the introduction of ES6, developers can now use new features like default parameters and rest parameters. Default parameters allow developers to set a default value for a parameter in case it is not provided when the function is called. Rest parameters, on the other hand, allow developers to pass an indefinite number of arguments to a function and store them in an array.

Refer - Function parameters from MDN Docs

Other Interesting things about Javascript

Metaprogramming

JavaScript has great support for Metaprogramming. It provides the Proxy and Reflect objects that allow you to intercept and define custom behavior to existing language operators. Definitely an advanced feature which has its own use-cases.

Refer - Eirik Vullum: JavaScript Metaprogramming - ES6 Proxy Use and Abuse

Destructuring in Javascript

The destructuring assignment syntax is an ES6 feature, that allows you to unpack values from an array or an object into separate variables.

Browser Extensions

Browser Extensions can’t be developed without JS. As extensions’ development focus on doing most of the work on the client-side.

Beginner friendly but also powerful

JavaScript is one of the easiest languages for beginners. But it is also one of the most powerful languages. If you have a web browser on your computer that is all you need to write JavaScript. One of the biggest community is available on the internet.
There is no other language that I have seen which is as versatile as JavaScript. But remember learning JavaScript is easy but becoming a good JavaScript developer is quite hard.
It can run any device, in a browser, mobile devices, server-side, Desktop apps, OS, IoT, robots, virtual reality, smartwatches, etc.

Less verbose and clean syntax

It definitely is possible to write unreadable code in JavaScript but at the same time you can write beautiful expressive code as well and I find the JS syntax more readable than many other languages.

👋🏻 Hello World

Vivek Pal — Fri, 16 Jun 2023 18:17:20 +0000

Welcome to my blogs.

Let's restart the blog journey from dev.to

I share my thoughts and experiences and weekly blog posts.

You can also follow me on my twitter @vivekpal0x for my latest tweets.

I hope you will enjoy it :)

Why I migrated from my standalone blog to Dev.to

Developer's Community
Increased Visibility
Easy Management and Writing
Social Interaction
Discoverability and Networking
Simplified Maintenance

**You can find my old blogs here archived.vivekpal.in/blog