A Builder’s Guide to Astar.js

4 min readJan 31, 2023

Astar.js is a powerful and versatile tool for interacting with the Astar blockchain. It is a TypeScript library that provides developers with a simple and intuitive interface for building decentralised applications (dApps) on top of the Astar network.

One of the key features of Astar.js is its modular design. The library is composed of several individual packages, each of which provides a specific set of functionality. This allows developers to use only the packages they need, reducing the overall size of their dApps and making them more efficient.

One of the most useful packages in Astar.js is the API package. This package provides developers with access to the Astar API, which allows them to query the blockchain for information, submit transactions, and interact with smart contracts. The API package also includes support for popular JavaScript libraries like React and Vue, making it easy to integrate with existing web applications.

Another important package in Astar.js is the Signer package. This package provides developers with a secure and user-friendly way to sign transactions on behalf of their users. The Signer package uses a combination of hardware-backed keys to ensure that only authorised users can sign transactions. This makes it ideal for dApps that need to manage sensitive information, such as financial applications or voting systems.

In addition to the API and Signer packages, Astar.js also includes several other packages that provide useful functionality for dApp developers. For example, the WsProvider package allows developers to connect to a Astar node over WebSockets, providing them with a fast and reliable way to query the blockchain. The Substrate package provides developers with access to the low-level substrate blockchain framework, allowing them to build custom blockchain solutions.

Overall, Astar.js is an essential tool for anyone looking to build dApps on the Astar network. Its modular design and comprehensive feature set make it easy for developers to create powerful and scalable decentralised applications. Whether you’re a seasoned blockchain developer or just starting out, Astar.js is a valuable tool to have in your toolkit.

Astar.js packages

Following packages are available for astar.js:

api: Contains necessary options to create a connection to API instance
api-derive: Contains utility classes and derived methods.
types-definitions: type definitions for Astar Network.
sdk-core: core api libraries
precomplies: precompiled contracts ABIs

astar.js architecture

Requirements

Following are the requirements for astar.js

node.js (https://nodejs.org/en/)
Yarn (npm install -g yarn)

Getting Started

To Start with astar.js create a project folder and initialise it.

mkdir dapp && cd dapp
npm init -y

Install the following dependencies

yarn add @polkadot/api @astar-network/astar-api

Create API instance

import { ApiPromise } from '@polkadot/api';
import { WsProvider } from '@polkadot/rpc-provider';

import { options } from '@astar-network/astar-api';async function main() {
	const provider = new WsProvider('wss://astar.api.onfinality.io/public-ws');
	const api = new ApiPromise(options({ provider }));
	await api.isReady;
	// Use the api
	// For example:
	console.log((await api.rpc.system.properties()).toHuman());
	process.exit(0);
}main()

Use API to interact with node

// query and display account data
const data = await api.query.system.account('5F98oWfz2r5rcRVnP9VCndg33DAAsky3iuoBSpaPUbgN9AJn');

console.log(data.toHuman())

Or alternatively use this template for quickstart: https://github.com/AstarNetwork/astar.js-dapp-template

Sending a Transaction

Here is how to send a transaction:

// send, just retrieving the hash, not waiting on status
  const txhash = await api.tx.balances
    .transfer(recipient, 123)
    .signAndSend(sender, { nonce });

Interacting with contracts

Astar.js can also be used to interact with WASM contract from your Dapp Frontend. Here is the documentation about it. https://docs.astar.network/docs/builder-guides/XVM and WASM/interact_with_wasm_contract/

Useful Links

Template Github Repo: https://github.com/AstarNetwork/astar.js-dapp-template
Astar.js core repo: https://github.com/AstarNetwork/astar.js
Docs: https://docs.astar.network/docs/integrations/api/astar.js
NPM: https://www.npmjs.com/package/@astar-network/astar-api

About Astar

Astar Network — The Future of Smart Contracts for Multichain.

Astar Network supports the building of dApps with EVM and WASM smart contracts and offers developers true interoperability with cross-consensus messaging (XCM). Astar’s unique Build2Earn model empowers developers to get paid through a dApp staking mechanism for their code and the dApps they build.

Astar’s vibrant ecosystem has become Polkadot’s leading Parachain globally, supported by all major exchanges and tier 1 VCs. Astar offers the flexibility of all Ethereum and WASM toolings for developers to start building their dApps. To accelerate growth on Polkadot and Kusama Networks, Astar SpaceLabs offers an Incubation Hub for top TVL dApps.