Hands on for Astar Network Beginners

Motivation

I sometimes forget that Astar Network is still difficult for web3 newbies to understand. that’s a problem. As one of the ambassadors, I need to demystify Astar Network. And I need to write more beginner articles.

I think that among the people who are interested in Astar Network, there are people who have great ideas that only they can come up with. I need to do our best to make it easy for such people to clear the initial implementation hurdles and prepare an environment that brings them closer to the completion of their amazing dApp implementations.

Table Of Contents

1. Create the development environment of smart contract
2. How to develop your first EVM dApp [ERC20]
3. How to develop your first WASM Contract dApp [Flipper]

1. Create the development environment of smart contract

For creating a development environment, please refer to the article below that I wrote before.
[Note]: If there is something that does not work, please contact us from the Discord open channel.

Environment Construction for Astar Network

2. How to develop your first EVM dApp [ERC20]

Here are the steps

1. Run Astar’s local node.
2. Transfer token to EVM Account.
3. Start remix and connect.
4. Implement the program using OpenZeppelin’s ERC20 implementation.
5. Test.

Now let’s start.

1. Run Astar’s local node

Launch your terminal & execute the command as following

./astar-collator --dev --tmp

2. Transfer token to EVM account.

This method is written in the article on building the development environment, so please refer to it.

If you don’t understand Astar’s multi VM, read this article.

Cross-Virtual Machine: Creating a Portal to the Future of Smart Contracts

3. Start remix and connect.

Then start remix and move to the Deploy screen. Please select as shown in the screen below.

• “ENVIRONMENT”:”injected web3"
• “Account”:<Account that sent the token>

Make sure your network is connected to 4369 & you have a balance.

4. Implement the program using OpenZeppelin’s ERC20 implementation

Implement the contract using OpenZeppelin as below.

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.9;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract TestErc20 is ERC20 {

  constructor(uint256 initial_supply, string memory name, string memory symbol ) 
    ERC20(name, symbol) {
    _mint(msg.sender, initial_supply);
  }
}

5. Test

Compile after the implementation is complete.

Once it’s compiled, just like before, make sure you’re connecting to the correct network, account, and contract, and then deploy.

Please confirm that metamask will start when deploying.
Once the deployment is complete, the address will be added to the “Deployed Contract”.
Open it and you’ll see a list of functions that you can call.

The image above checks the balance with the “balanceOf” function. Please check that other functions such as “transfer” work as expected.

Please refer to OpenZeppelin’s official Github for the specifications of each function.

OpenZeppelin | Contracts

3. How to develop your first WASM Contract dApp [Flipper]

Here are the steps

1. Run Astar’s local node.
2. Clone the test contract source code & the frontend source code.
3. Compile the test contract.
4. Configuration frontend.
5. Test

Now let’s start.

[Note]: 1. will be repeated, so I will omit it. If you don’t understand, look at the EVM side.

2. Clone the test contract source code & the frontend source code

Clone the contract and frontend source code I’m building for testing.

git clone https://github.com/realtakahashi/polkadot_js_examples.git

Inside this repository is a “flipper” contract and a web ui “flipper_nextjs” that calls it.

3. Compile the test contract

At the time of writing this article, openbrush, the standard implementation of ink!, is not available for the latest ink! version, so I’m assuming “cargo-contract 2.0.0” here.

cd flipper
cargo +nightly-2023-01-10 contract build

4. Configuration frontend

• In order to deploy the contract from the front end, wasm binary code is required, so copy the contract file created when compiling the contract with the json extension.

cd ../flipper_nextjs
cp -p ../flipper/target/ink/flipper.contract ../flipper_nextjs/flipper.contract.json

• Install the required libraries.

yarn install

• Start in test mode.

yarn dev

5. Test

• Access the launched frontend from a browser.
• http://localhost:3000

It’s for testing, so I’m sorry if it’s very hard to understand.

• First click on “Seup Account” and you will see a list of polkadot.js accounts in the dropdown at the bottom of the screen.
• Then select the account you want to use for testing from the dropdown.
• Please confirm that the address is displayed in “Account Account”.
• [Note]: Make sure the account you choose has a native token balance.

• Then press the “Deploy Flipper Contract” button to deploy the contract.
• When you press the button, the transaction signature dialog will be output, so please sign.
• If successful, the contract address will be displayed as shown in the above screen, and the function name of the contract will be displayed.

• After calling “Get Flip Value” to make sure it’s “false”, call “Change Flip Value” to make sure the value changes.

Astar Official Site

Astar Docs | Astar Docs