Ink! Playground, Browser IDE for Substrate’s smart contract, is released

Introduction

Stake Technologies has finished building the Ink! Playground, a browser-based IDE. Ink! is a Rust-based eDSL for writing Wasm smart contracts, which can be deployed on any Substrate-based blockchain that includes the Smart Contract pallet.

Ink! playground allows developers to compile Ink! contracts easily just by writing the code into the browser. No installation required! Our playground makes life easier for developers as it removes the need for a powerful machine or the need to keep the compiler up-to-date.

It is also possible to execute the contracts, which are compiled to Wasm bytecode. Developers no longer have to download and run Substrate locally just to test out their contracts. Ink! Playground allows anyone to write and compile the contract inside the browser.

This project was supported by a Web3 Foundation grant.

What is ink?

ink! is an eDSL to write WebAssembly based smart contracts using the Rust programming language targeting Substrate blockchains.

For further information about ink!, check the links below.

• Tutorial
• GitHub
• Document

How to use ink! playground

Testing the ink! playground is easy. Here is a brief summary of the required steps:

1. Write ink! code directly in the browser.
2. Compile the ink! code into WebAssembly (Wasm), a JSON metadata file is then created.
3. Connect to a Substrate node and access to the contract module. Ink! playground also supports the Plasm chain (developed by Stake Technologies).
4. Send your compiled code on the connected chain.
5. Deploy the instance of the contract.
6. Call a contract method.
7. Test the compiled Wasm file in your local browser.

Playground instructions

The following describes each step in greater detail.

Compile ink! code

Write your ink! code into the text area on the left side, and click “COMPILE CODE” button.

You can find the example code here:

paritytech/ink

After compiling, a WebAssembly file and a metadata file are built. These can be downloaded by clicking on the respectively labelled buttons (this is optional).

Access to the Substrate chain

In order to run the code it is important to have the Wasm and metadata files inside the playground. If you compiled the code inside the playground already then you can proceed to connect to the chain. Otherwise, if you created the files locally on your machine, you will need to upload them to the playground.

To use files hosted locally press the “SELECT LOCAL” button.

Next, open the “SELECT CHAIN” tab. Choose which node you wish to connect to and click the “SET AND CONNECT” button to start connecting to the chosen Substrate node.

NOTE: See this article on how to run a local node.

https://substrate.dev/docs/en/tutorials/creating-your-first-substrate-chain/setup

If you choose “Plasm Testnet V3” in the “Default Chains” dropdown, you can connect to Plasm Testnet. If you want to connect to a local Plasm node, change the input of “ws_provider” to “ws://localhost:9944”.

Click on the “PUT CODE” button to open the popup window. Then select the Account to use, set gas limit, and set the code name (used in the web application). Once complete click the “SEND” button to send the Wasm code to the connected chain.

Press the “INSTANTIATE” button, now in the popup window select which Account to use, select Wasm code, and set gas limit, set a new instance name (used in the web application), select constructor (and the parameters if required). Click the “SEND” button, and then the contract instance is created on the connected chain.

To call a contract, press the “CALL CONTRACT” button. Once open you should select the necessary settings (as before). Select the Account, select deployed instance, set gas limit, select method (and the parameters if it is required). Click “SEND” button, and then you can call the contract method.

Test compiled Wasm code on a local virtual machine.

If you would prefer to test the code locally rather than in the hosted version of the playground then follow you should note the following.

First you have to send the Wasm and metadata to the ink! playground web application.

You have two ways of doing this:

1. Compile from rust code in ink! playground.
2. Set local WASM and metadata files by clicking “SELECT LOCAL”.

Click “TEST WASM IN LOCAL” button to open the popup window. You can test deploying and calling the contract from this popup, and the results are shown in the console in the right area.