Web3 Beginner Series: Upgrade @solana/web3.js 2.x Now To Use Functional Programming

Solana Web3.js is a highly feature-rich JavaScript library, and the 2.x version was officially released this November. Compared to version 1.x, the new version has undergone significant changes. This article attempts to summarize the main differences.

Currently, since the 2.x version has just been released, its usage is not very high, and many widely-used libraries have not yet transitioned. However, we can familiarize ourselves with it now to prepare for future migration.

Version comparison

I have to admit, the old version is actually easier to use. Firstly, the old version essentially has only one package: @solana/web3.js, which contains everything. It is also class-based, encapsulating a large number of common operations. For example, the Connection class comes with dozens of methods that cover almost all the functions a developer might need. Moreover, the Solana cookbook provides a plethora of example codes, so developers can always find what they need there.

However, this also causes some other issues: although developers often only use a small portion of the functionality, the entire code library ends up being downloaded to the user’s device. Since the whole library is quite large, this process can take a short while.

In contrast, the 2.x version has been broken down by the official team into several smaller modules, such as @solana/accounts, @solana/codecs, @solana/rpc, @solana/signers, @solana/transactions, etc. They abandoned the class-based implementation in favor of using more individual functions, which aids in optimization during JavaScript code construction. Code that isn’t used by the dapp will be eliminated and won’t actually be downloaded to the user’s device. According to the statistics in the official documentation, dapps using the new version can achieve a size reduction of about 30%. If only a small portion of the functionality is used, even higher optimization rates can be achieved (https://solana-labs.github.io/solana-web3.js/#statistics).

This puts the Solana team’s documentation skills to the test, as enabling developers to quickly find the functions they need will be an important task. However, for now, it seems that at least the package names are quite semantically meaningful, providing a general idea of what they can be used for. This should, to some extent, reduce the difficulty for developers transitioning to the new version.

Of course, since it was only recently released, many projects have not yet made the transition. On the Solana Cookbook, there are also relatively few examples for the 2.x version. Additionally, because the new version tends to use built-in runtime functions (such as generating key pairs), the lack of descriptions in the documentation can leave developers somewhat at a loss in certain areas.

Another important feature of the 2.x version is zero dependencies. This aspect might not be crucial for many users, but considering the supply chain attack that occurred on versions 1.95.5 and 1.95.6 of @solana/web3.js in early December of this year, more external inputs and dependencies can significantly increase the likelihood of security incidents. With the release of the 2.x version, the Web3.js development team decided to rely more on native features and eliminate external dependencies and polyfills. Although there might be changes in the future, for now, the 2.x version has removed all external dependencies.

Key changes

Connection

As mentioned above, the 1.x version provides a large number of methods through the Connection class. However, its main function is still to create a request sender by configuring the RPC request address and then use it to send various requests.

In the 2.x version, this is implemented in a more functional manner:

const rpc = createSolanaRpc(HTTPS);
const rpcSubscriptions = createSolanaRpcSubscriptions(WSS);

const sendAndConfirmTransaction = sendAndConfirmTransactionFactory({
  rpc,
  rpcSubscriptions,
});

In the code above, when we call sendAndConfirmTransaction to send a transaction, it automatically initiates an HTTPS request and establishes a WSS connection to subscribe to the transaction status. Once the transaction is confirmed, it returns the transaction hash.

Keypair

There are also significant changes related to public and private keys. In the 1.x version, the commonly used Keypair and PublicKey classes no longer exist and have been replaced by several functions.

For instance, you can use await generateKeyPair() to generate a key pair, whereas previously you would directly use Keypair.generate() to create a key pair.

You might notice that the new generateKeyPair function returns a Promise, unlike the previous implementation that directly returned the key pair. This is because the new implementation makes extensive use of JavaScript's Web Crypto API, leveraging the native Ed25519 implementation. Many methods in the Web Crypto API are asynchronous. However, this change is quite acceptable, as by the end of 2024, JavaScript developers have become very familiar with Promises and consider them as a well-known tool.

Send Transaction

Users of the 1.x version are likely familiar with the Transaction and VersionedTransaction classes. When I first started learning about Solana, the relationship between these two classes was quite confusing to me as well.

In the 2.x version, these two classes are also no longer present.

Since classes are no longer provided, Web3.js offers functional programming capabilities commonly used in the form of pipes. Below is an example of using the pipe function to implement the transfer functionality that was originally available in 1.x:

const LAMPORTS_PER_SOL = BigInt(1_000_000_000);
const rpc = createSolanaRpc(`https://api.zan.top/node/v1/solana/devnet/${YOUR_ZAN_API_KEY}`);
const rpcSubscriptions = createSolanaRpcSubscriptions(`wss://api.zan.top/node/v1/solana/devnet/${YOUR_ZAN_API_KEY}`);

const sendAndConfirmTransaction = sendAndConfirmTransactionFactory({
  rpc,
  rpcSubscriptions,
});

const onTransfer = async () => {
  const keypair = await createKeyPairFromPrivateKeyBytes(YOUR_PRIV_KEY_BYTES);
  const signer = await createSignerFromKeyPair(theKeypair);

  const toAddress = address("4Nu34Lrv9Wv4fX1zA7xTNy8Z4bTKcB9oL8ZMbZV9CNUz");

  const { value: blockhashValue } = await rpc.getLatestBlockhash().send();

  const transactionMessage = pipe(
    createTransactionMessage({ version: 0 }),
    (tx) => setTransactionMessageFeePayer(signer.address, tx),
    (tx) => setTransactionMessageLifetimeUsingBlockhash(blockhashValue, tx),
    (tx) =>
      appendTransactionMessageInstruction(
        getTransferSolInstruction({
          source: signer,
          destination: toAddress,
          amount: lamports(LAMPORTS_PER_SOL / BigInt(10)),
        }),
        tx
      )
  );

  const signedTx = await signTransactionMessageWithSigners(
    transactionMessage
  );
  const signature = getSignatureFromTransaction(signedTx);
  console.log('transaction signature:', signature);

  await sendAndConfirmTransaction(signedTx, { commitment: "confirmed" });
};

You’ll notice that transactions are no longer initiated through the Connection class but rather through a custom-defined RPC Provider. This approach involves generating a specific function and then calling it to initiate the transaction. Compared to the 1.x version, this method may result in slightly more code, but it offers the advantage of increased customizability.

Transactions are initiated via HTTPS RPC and then confirmed by subscribing to WSS RPC. This new approach heavily relies on WSS, and it’s likely that the use of WSS will become increasingly widespread in the future. This indeed places higher demands on the service stability of RPC providers. If you’re looking for a reliable WSS node provider, ZAN Node (https://zan.top/home/node-service?chInfo=ch_Event) is a great option. As a leading service provider for Solana in the Asia-Pacific region, ZAN Node is committed to providing stable and efficient connection performance. In addition to popular chains like Ethereum and Solana, they support RPC services for over 20 major blockchains, catering to various needs.

React

Interestingly, the @solana/web3.js project also includes a library called @solana/react, which provides some React hooks with built-in functionalities such as signIn. These hooks can be particularly useful for developers building React applications that interact with Solana, offering a more streamlined and React-friendly way to integrate Solana's blockchain features into their apps.

Keep BUIDL

The release of the @solana/web3.js 2.x version clearly demonstrates the Solana team's commitment to continuous development and improvement. By offering developers an efficient, flexible, and customizable way to interact with the Solana network, this update facilitates the adoption and growth of the platform. These enhancements not only improve the developer experience but also position Solana as a more robust and adaptable blockchain solution, encouraging wider use and innovation within its ecosystem.