Getting Started with Umi
Tags: solana, javascript, web3, umi
Published: 2023-10-04 18:34:02

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:

1. **Create a New Directory**:

    ```sh
    mkdir my-umi-project
    cd my-umi-project
    ```

2. **Initialize with `npm`**: Once you're inside your project directory, initialize it with `npm` using the following command:

    ```sh
    npm init -y
    ```

    This command creates a `package.json` file with default values, making it quick and easy to set up your project.

![installing umi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd2qk3k14505snjpxo2o.png)


3. **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:

    ```sh
    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:

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

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

    ```

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

```javascript
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());
```

3. **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.

```javascript
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);
}
```

4. **Display Balances**

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

```javascript
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`);
}
```

5. **Execute Functions**

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

```javascript
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](https://github.com/vivekpal1/umi-tutorial)**

1. [Umi GitHub Repository](https://github.com/metaplex-foundation/umi)
2. [Umi Installation Guide](https://github.com/metaplex-foundation/umi/blob/main/docs/installation.md)
3. [Umi Interfaces Documentation](https://github.com/metaplex-foundation/umi/blob/main/docs/interfaces.md)
4. [Umi Interfaces Implementations](https://github.com/metaplex-foundation/umi/blob/main/docs/implementations.md)
5. [Solana Developer Documentation](https://docs.solana.com/)