Skip to main content
Version: 4.x

Overview

Now after you wrote, compiled and deployed your smart contract, it is time to craft a user experience around it.

This experience can take many shapes from mobile app to interactive terminal applications. In this section we are focusing on the most prominent shape in web3 right now, web apps.

Although we love Rust, the native language of the web is JavaScript. Thereby naturally the best tools for creating web experiences are available for JavaScript. Hence, the tools for smart contract interaction with JavaScript are the most advanced as well. To be precise all JavaScript tools mentioned here, actually leverage TypeScript to offer a JavaScript and a typesafe TypeScript experience.

JavaScript/TypeScript Tools​

There are several levels of abstraction where you can start your journey creating a web frontend for your contracts. Each levels offers different advantages and disadvantages. The following list is of tools. They are sorted from the most generic no third party library way to interact with Polkadot's smart contracts to the most opinionated template using libraries and proven frontend frameworks.

Using no libraries​

  • RPC Interface (not recommended): nodes participating in the blockchain network offer an JSON RPC interface to interact with the blockchains state and capabilities.

Low level libraries​

  • @polkadot/api (not recommended): allows for most general interaction with Polkadot-SDK based blockchains from JavaScript. In order to talk to smart-contracts, one would use the pallet-contracts runtime calls.

  • @polkadot/api-contract (recommended): abstraction on top of @polkadot/api for the pallet-contracts. Makes interaction with smart contracts more comfortable and type safe.

React​

  • useInkathon (recommended): A hooks library for the popular frontend javascript framework React with focus on smart-contract interactions. Built using @polkadot/api & @polkadot/api-contract.

React and Next.js​

  • inkathon (recommended): Full Stack web app template using the popular full stack template Nextjs. Itself is using useInkathon. The fastest way to get up and running with a smart contract and a corresponding web app.

Examples​

For inspiration how to get started building your full stack dApp. Make sure to visit our Smart Contracts Examples section or repository directly. These examples not only offer the smart contract code but also have an accompanied frontend project. Checkout the README.md for details how to setup and run these frontend examples.

Other Languages​

Of course the browser and JavaScript should not be the one and only platform for smart contract frontends. It's just the most mature for smart contract frontend tooling.

The following is a list of libraries which could be used to craft smart-contract dApps on other platforms than the web.