Entering the MultiversX JavaScript Universe

Ready to launch into the MultiversX blockchain world? In this guide, we’re going to suit up, grab our toolkit, and send a transaction to the MultiversX galaxy using JavaScript. Let's dive into each step, like prepping our rocket for liftoff. 🛸

Step 1: Building the Launch Pad (Set Up Your Node.js Project)

• Create a directory for your project, the “command center” for your mission.
• Initialize the project with npm init. You’ll answer a few questions (name, version, etc.) to create a package.json file.

npm init

This file will keep your project organized and ready for takeoff!

Step 2: Equip Your Rocket (Install MultiversX SDK Libraries)

Next, we need some special tools to interact with the MultiversX blockchain:

npm install @multiversx/sdk-core @multiversx/sdk-network-providers @multiversx/sdk-wallet

Here’s what each one does:

• sdk-core: The brains for transaction handling.
• sdk-network-providers: Our direct line to the MultiversX network.
• sdk-wallet: Your very own wallet wizard to sign transactions. 🪄

Step 3: Prepare Your Fuel (Create a Wallet)

• Create a wallet on the Devnet Web Wallet. Store your Keystore file, seed phrase, and password somewhere safe.
• Request test tokens (EGLD) from the faucet to power your rocket (your transactions).

Step 4: Mission Control Setup (Configure the Project)

Next, we'll create a setup.js file to configure the necessary tools. Your project directory should now look like this:

node_modules/

package.json

erd....json (Keystore file)

setup.js

In setup.js, we'll set up the user wallet, synchronize the account with the network, and initialize the network provider for sending transactions:

import { promises } from "node:fs";

import { Address, Account } from "@multiversx/sdk-core";

import { ApiNetworkProvider } from "@multiversx/sdk-network-providers";

import { UserSigner } from "@multiversx/sdk-wallet";

export const senderAddress = "erd10dgr4hshjgkv6wxgmzs9gaxk5q27cq2sntgwugu87ah5pelknegqc6suj6";

export const receiverAddress = "erd176ddeqqde20rhgej35taa5jl828n9z4pur52x3lnfnj75w4v2qyqa230vx";

const keyFilePath = `./${senderAddress}.json`;

// Demo password, replace with your real one and keep private

const password = "Ab!12345678";

// API provider for the devnet

export const apiNetworkProvider = new ApiNetworkProvider("<https://devnet-api.multiversx.com>");

export const syncAndGetAccount = async () =&gt; {

  const address = new Address(senderAddress);

  const userAccount = new Account(address);

  const userAccountOnNetwork = await apiNetworkProvider.getAccount(address);

  userAccount.update(userAccountOnNetwork);

  return userAccount;

};

const getKeyFileObject = async () =&gt; {

  const fileContents = await promises.readFile(keyFilePath, { encoding: "utf-8" });

  return fileContents;

};

export const getSigner = async () =&gt; {

  const wallet = await getKeyFileObject();

  return UserSigner.fromWallet(JSON.parse(wallet), password);

};

Explanation

• apiNetworkProvider: Connects you to the MultiversX devnet.
• syncAndGetAccount(): Syncs your account so you’re all set to send transactions.
• getSigner(): Allows you to sign transactions with your wallet.

Step 5: Blast Off! (Send Your First Transaction)

With everything in place, it’s time to send a transaction. In a new file, set up the following code to prepare and send an EGLD transaction:

import { Transaction, TransactionComputer } from "@multiversx/sdk-core";

import { receiverAddress, syncAndGetAccount, senderAddress, getSigner, apiNetworkProvider } from "./setup.js";

const sendEgld = async () => {

  const user = await syncAndGetAccount();

  const transaction = new Transaction({

    data: Buffer.from("This is the demo transaction!"),

    gasLimit: 100000n,

    sender: senderAddress,

    receiver: receiverAddress,

    value: 1000000000000000n, // 0.001 EGLD

    chainID: "D",

  });

  transaction.nonce = user.getNonceThenIncrement();

  const computer = new TransactionComputer();

  const serializedTransaction = computer.computeBytesForSigning(transaction);

  const signer = await getSigner();

  transaction.signature = await signer.sign(serializedTransaction);

  const txHash = await apiNetworkProvider.sendTransaction(transaction);

  console.log("Check in the explorer: ", `https://devnet-explorer.multiversx.com/transactions/${txHash}`);

};

sendEgld();

Mission Complete!

And there you have it! You’ve sent your first transaction on the MultiversX network. For the full mission log and more quests, check out the official docs.

Reference: https://www.julian.io/articles/multiversx-js-sdk-intro.html