Forem: andy_801 🔫🇺🇦

Intro to solana/web3.js 🌅

andy_801 🔫🇺🇦 — Sat, 15 Oct 2022 11:58:49 +0000

@solana/web3.js SDK is a main interface to communicate with Solana network for your JavaScript application. It is written in TypeScript and it enforces you to use TS instead of JS same as Solana in general.

It doesn't really have detailed text on each class and method and practices, so the best way to learn it might be just to research through its auto-generated docs.

This text is try to summarize things as I get to know it and a brief description web3.js main functionality. Code examples for common use-cases can be found on 📙 Solana Cookbook.

What it does?

solana/web3.js is doing 2 main things to simplify your coding life. First it handles communication with Solana nodes and second it provides useful representations & utilities to work with Solana concepts, like Account, Transaction, Instruction, SystemProgram, PublicKey, Keypair, etc.

Communication with Solana

If you want to read/write data to Solana blockchain you need to use language it understands. Communication with Solana built around nodes in form of HTTP requests using the JSON-RPC 2.0 specification. So e.g. you can fetch wallet address just using CURL:

curl https://api.devnet.solana.com -X POST -H "Content-Type: application/json" -d '
  {
    "jsonrpc": "2.0",
    "id": 1,
    "method": "getBalance",
    "params": [
      "CBBUMHRmbVUck99mTCip5sHP16kzGj3QTYB8K3XxwmQx"
    ]
  }
'

response >>>>
{
  "jsonrpc": "2.0",
  "result": {
    "context": { 
      "apiVersion": "1.13.2", 
      "slot":169434407
    },
    "value": 21087922374
  },
  "id":1
}

solana/web3.js gives a convenient interface for the RPC methods, so same request can be done with these JS code lines:

const connection = new Connection("https://api.devnet.solana.com");

const address = "CBBUMHRmbVUck99mTCip5sHP16kzGj3QTYB8K3XxwmQx";
const publicKey = new PublicKey(address);

let balance = await connection.getBalance(publicKey);

Main Functionality

Library have plenty of classes and methods, but there are some to be used from program to program and can be put to this pretty short list of classes and their methods displayed in the next mindmap graph.

Link to FigJam file

🔌 Connection

The first thing to use is Connection object. It is also the most charged with different methods.

When you create Connection object the constructor is trying establish connection with provided RPC node using HTTP or WebSockets API by your choice and setup JSON-RPC 2.0 Client to transfer your commands into json-rpc messages server can understand.

You can use one of Solana's RPC-nodes (mainnet, devnet, testnet) but them very limited in number of requests you can send, so google to find some you can use for free or for the money.

const connection = new Connection(
  "https://api.devnet.solana.com",
  "confirmed"
);

Then this object describes a bunch of methods which are wrappers over rpc methods. It also handles proper arguments passing and error handling for each such method. For example:

/**
 * Request an allocation of lamports to the specified address
 */
async requestAirdrop(
  to: PublicKey,
  lamports: number,
): Promise<TransactionSignature> {
  const unsafeRes = await this._rpcRequest('requestAirdrop', [
    to.toBase58(),
    lamports,
  ]);
  const res = create(unsafeRes, RequestAirdropRpcResult);
  if ('error' in res) {
    throw new SolanaJSONRPCError(
      res.error,
      `airdrop to ${to.toBase58()} failed`,
    );
  }
  return res.result;
}

So you can use such requestAirdrop fn with Connection to request some SOL:

const airdropSignature = await connection.requestAirdrop(
  fromKeypair.publicKey,
  LAMPORTS_PER_SOL
);

// You'll also need to confirm this TX
await connection.confirmTransaction(signature);

Overview

Connection methods can be grouped in such groups of interests.

Link to FigJam file

Useful Methods

getParsedAccountInfo() & getAccountInfo() are very useful to fetch info about accounts, like to find what tokens or NFTs hold some wallet.

getBalance() returns amount of SOL hold in the account.

confirmTransaction() & sendTransaction() are used when you have created some Transaction and want to send it to the blockchain.

getLatestBlockhash() returns info about recent blockhash which you may use while creating new TX.

const recentBlockhash = await connection.getLatestBlockhash();

const transaction = new Transaction({
  recentBlockhash: recentBlockhash.blockhash,
}).add(
  SystemProgram.transfer({
    fromPubkey: payer.publicKey,
    toPubkey: payee.publicKey,
    lamports: 10,
  })
);

getProgramAccounts() fetch all the accounts owned by the specified program id. Can be used to find NFT accounts created by Candy Machine for example.

🔐 Keypair & PublicKey

Many of the different actions you can take with the various Solana libraries require a Keypair or Wallet. You can use one from connected wallet or you can generate keypair yourself with generate() function and then using its properties publicKey & secretKey.

let keypair = Keypair.generate();

And publicKey itself returns instance of PublicKey class with some handy methods like toBase58() or toString() as well as findProgramAddress() to find available address for provided seed text.

🧾 Transaction & TransactionInstruction

Transaction object can be used to create new TX for the Solana network which you populate with exact instructions using TransactionInstruction class.

const transferTransaction = new Transaction().add(
  SystemProgram.transfer({
    fromPubkey: fromKeypair.publicKey,
    toPubkey: toKeypair.publicKey,
    lamports: 10000000,
  })
);

Useful methods:

add() will add one or more instructions to newly created TX

const modifyComputeUnits = ComputeBudgetProgram.setComputeUnitLimit({ 
  units: 1000000 
});

const transaction = new Transaction()
  .add(modifyComputeUnits)
  .add(
    SystemProgram.transfer({
      fromPubkey: payer.publicKey,
      toPubkey: toAccount,
      lamports: 10000000,
    })
  );

sign() will sign the Transaction with the specified signers.

getEstimatedFee() get the estimated fee associated with a transaction:

const fees = await transaction.getEstimatedFee(connection);

The TX can be sign, send and confirm with globally available method sendAndConfirmTransaction()

await web3.sendAndConfirmTransaction(connection, transaction, [fromWallet]);

Each TX will be populated with TX Instructions using TransactionInstruction object:

await transferTransaction.add(
  new TransactionInstruction({
    keys: [{ pubkey: fromKeypair.publicKey, isSigner: true, isWritable: true }],
    data: Buffer.from("Data to send in transaction", "utf-8"),
    programId: new PublicKey("MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr"),
  })
);

🛠 SystemProgram

SystemProgram is factory class for transactions to interact with the System program.

You might need to interact with SystemProgram when you want to transfer some SOL.

const transferTransaction = new Transaction().add(
  SystemProgram.transfer({
    fromPubkey: fromKeypair.publicKey,
    toPubkey: toKeypair.publicKey,
    lamports: lamportsToSend,
  })
);

Also, it may be useful to create new accounts with createAccount() & createAccountWithSeed():

const createAccountParams = {
  fromPubkey: fromPubkey.publicKey,
  newAccountPubkey: newAccountPubkey.publicKey,
  lamports: rentExemptionAmount,
  space,
  programId: SystemProgram.programId,
};

const createAccountTransaction = new Transaction().add(
  SystemProgram.createAccount(createAccountParams)
);

🧰 More

Examples above taken from Solana Cookbook. Check it for more.

If you want to interact with tokens on Solana network you will need to use different @solana/spl-token package additionally.

Audio Player with Wavesurfer.js & React 🏄🏽‍♂️

andy_801 🔫🇺🇦 — Sun, 26 Jul 2020 13:43:45 +0000

Recently I was in need to set a simple view that can show audio file waveform and play its audio using React.JS. After some googling, I found this Wavesurfer.js package. It has pretty exciting use examples, except it lucks of React.JS example, which as we know lives in its own virtual world, what force you write code in its specific way. So, I share my example here with some main points.

Here is the final result (with some soundcloud-like style)

Code In Details

🌊 Reference to DOM

We can import package and use the module as usual.

import WaveSurfer from "wavesurfer.js";

WaveSurfer.create({ container: someDiv });

Most tricky things happen when React rerenders component replacing DOM elements and old ones lost. WaveSurfer.js doesn't expect these changes, so we need to provide an alias to a needed HTML element within React.

We can do it setting ref to some element and passing this ref to WaveSurfer object on creating.

const waveformRef = useRef(null);

useEffect(() => {

  WaveSurfer.create({ 
    container: waveformRef.current
  });

}, []);

return <div ref={waveformRef} />;

🐟 Reference to Audio Player

A similar thing we need to do to access Wavesurfer instance from our React component. Again, because of React nature, on each rerender React component born in a new body (function) and it doesn't have access to variables from previous live. So we need to save it between rerenders with similar ref technique.

const wavesurfer = useRef(null);

useEffect(() => {

    wavesurfer.current = WaveSurfer.create(options);

    // Removes events, elements and disconnects Web Audio nodes.
    // when component unmount
    return () => wavesurfer.current.destroy();
  }, [url]);

And, when component life is over or when we want to create a new instance we need to destroy the previous one manually, otherwise, you will have multiply copies displayed on the screen and you won't have access to them.

Lastly, at this stage, we need to destroy the old instance and create a new one each time we will have url property changed. Based on docs, looks like you can use the same instance over-and-over, but for me, it wasn't updated properly so I did it this way.

useEffect(() => {
  ...
}, [url]);

🦦 That's all.

That is actually all you need to do specific to React - Wavesurfer.js communication. Next, you can follow Wavesurfer.js docs on how to use it. For example:

wavesurfer.current.load(url);

wavesurfer.current.on("ready", function() {
  // https://wavesurfer-js.org/docs/methods.html
  wavesurfer.current.setVolume(0.5);
  wavesurfer.current.play();
});

Recognize Regex Easily

andy_801 🔫🇺🇦 — Sun, 16 Feb 2020 12:45:40 +0000

Looking at docs for Regular Expressions looks like there are a lot of notations you need to learn and memorize to know it. It is a bit of overwhelming information if you don't use regex frequently or just started to use it. Here I will try to showcase basic regex parts which were important for me to know and understand to become familiar with regex. And for details, you can always check MDN Regex Docs or other sources.

Regex

Regular expressions are patterns to parse strings, the rules applied to it is universal for all languages. Regex might look like this:

Generally, It can be seen consisted of these 4 parts:

Where:

Slashes / used to enclose regex pattern in JS, similar to quotes for 'string' for example.
^, $, flags are optional anchors and flags.
Pattern is a character combination to be used in a search

So, for example, regex /x/ will search for the first occurrence of character x in a string:

If you want to find all matches for the pattern you can use /g flag at the end, which stands for global search:

There are 6 different flags that could be added at the end of regex for special settings. Most used are /g for a search for all matches and /i for case insensitive searching.

And different characters can be combined for sequence search:

Pattern

Beside of this, any pattern can be seen as a set of sequences of rules

For example, to describe pattern for time 12:00 I can write pattern like this one:

/ (should be 2 digits) (then colon) (then should be 2 digits) /

or in terms of regex:

Ofc, this is a very general time pattern, since it will also match strings like 25:00 and score is 160:740. Try it here.

Sequence

Each sequence also can be seen as a pair of Token & Quantity.

Token used to describe what character, set of characters or special symbols need to search for. And Quantity used to say how many times it occurs (number of repeats). The image above says: Any character from 0 to 9 and it occurs twice in a row. And when quantity isn't specified could be assumed that token will occur only once, like for semicolon : in the example above. Basically, it will be the same as:

You will meet plenty of quantity symbols, like +, ?, *, {n}, {n,m} all used to describe how many repetitions of preceding token should be. Like in the example below character u could be present 0 or more times:

Ranges and Groups

Frequently, you will see tokens as a set of nested sequences. These sequences could be defined as ranges and groups. The range set should be defined with brackets [set of characters] and it defines possible options rather than strong sequences. Like /cat/ one might read as could have c, a, t characters rather than just the word cat. So regex below will have 6 matches in the next string:

Back to parsing time example lets create regex for hours. Regex can parse numbers as single digits between 0 and 9. So to match 16 hours i.e. we need set rules for possible values of first and second digit in hours. We will also split it into 2 possible sets:

/ (should be number between 00-19) or (number between 20-23) /

Next regex will define match which starts with one token which rather 0 or 1 and followed by another one token which is one digit from 0 to 9.

So this way we will describe digits from 00 to 19. Now we can describe hours within the 20-23 hrs period more precisely. The rules will be like this:

In regex | pipe symbol used for OR operator and the parenthesis (group) used to group things. And combining it with rules for semicolon and minutes will have this regex for time:

You can test it here ->

Anchors

Special anchors /^ on start and $/ end of a pattern used to match the beginning and end of the string. And you can use both when you want to restrict input to only what regex rules allow. In case of time regex:

Additional Resources:

Here is few resources to play, don't forget to check community regexes from sidebar menu for some inspiration

React Context Hooks vs Redux Hooks

andy_801 🔫🇺🇦 — Fri, 13 Dec 2019 11:42:56 +0000

Here I was trying to implement the same login routine with Redux and Context Provider. Both doing it in the pretty same way and with similar syntax.

Provider

First of all, you need to provide access to the state. Redux and Context doing it with a component called Provider.

Redux Provider accepts prop called store, with current state and rules on how to update it.

const store = createStore(/* rules to set store */)

<Provider store={store}>
   <App />
</Provider>

Context Provider accepts value which can be passed down to Consumer. But you also free to rewrite this Provider to customize it (this is actually what we want).

<Provider value={/* some value, optional */}>
   <App />
</Provider>

Consumer

Get

Redux provides useSelector hook to get value from the state you interested in.

  const { isLoggedIn } = useSelector(state => ({
    isLoggedIn: state.isLoggedIn
  }));

Context provides useContext hook for this.


// import context as AuthContext

const { isLoggedIn } = useContext(AuthContext);

Set

You can also update the state.

Redux provides you with a dispatch method that triggers store updates. Ofc, you need to write these rules yourself within reducer.

const dispatch = useDispatch();
dispatch({
  type: SET_LOGIN_STATUS,
  isLoggedIn: true
});

With React Context you need to implement update method within Provider and then use it via same useContext hook;

// import context as AuthContext

const { login } = useContext(AuthContext);
login();

Business Logic

Context Provider

Here is Context Provider implementation with state and functions to update it. In the end, you need to pass it further within value property to make it available to the Consumer. Looks pretty sharp and simple to me.
Check for full code for Context on Codesandbox.

export const AuthContext = React.createContext(null);

const initialState = {
  isLoggedIn: false,
  isLoginPending: false,
  loginError: null
}

export const ContextProvider = props => {
  const [state, setState] = useState(initialState);

  const setLoginPending = (isLoginPending) => setState({
    ...state,
    isLoginPending
  });
  const setLoginSuccess = (isLoggedIn) => setState({
    ...state,
    isLoggedIn
  });
  const setLoginError = (loginError) => setState({
    ...state,
    loginError
  });

  const login = (email, password) => {
    setLoginPending(true);
    setLoginSuccess(false);
    setLoginError(null);

    fetchLogin( email, password, error => {
      setLoginPending(false);

      if (!error) {
        setLoginSuccess(true);
      } else {
        setLoginError(error);
      }
    })
  }

  return (
    <AuthContext.Provider
      value={{
        state,
        login,
        logout,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );

Redux Store

With Redux you need to write a bit more lines of code. And add thunk middleware if you want to make it work async, and most times probably you are. There are a lot of articles around on how to do it, so I will skip full codebase, you can check full code for Redux on Codesandbox.

Outro

So it looks like this Context and Redux hooks can be used interchangeably, and also it can be easily used together. Like for example, Redux for the main store and Context for some more local state management. So, you won't put all your data in same store which can become very messy at the end.