Hello World

In this section, we will deploy and interact with a Hello World smart contract onto the Zilliqa testnet using Neo-Savant web IDE and ZilPay wallet.

Create Testnet Wallet using ZilPay

ZilPay is an open source browser add-on that manages a user’s Zilliqa wallet and can be used on Chrome, Firefox and Opera browsers. It does not store any user's private keys on the server. Instead, they are password protected and stored on browser storage. It is a non-custodial wallet, meaning, only the user has full access and responsibility for their private key.

To create a ZilPay wallet:

  1. Visit ZilPay's website and download the extension for your respective browser.
  2. Open the extension, create a new wallet by verifying your 12 words recovery phrase and selecting a password for your wallet.
    note

    Please store your 12 words recovery phrase securely

  3. Click on the network change button (shown below) and select the network as testnet.
Change Network Button

Voila! You have now successfully set up a testnet ZilPay wallet.

Request Testnet $ZIL from Faucet

Deploying a contract to zilliqa's testnet will consume gas. As such you will need testnet $ZIL in your ZilPay account to pay for the gas.

To request for testnet $ZIL from the faucet,

  1. Visit Nucleus wallet testnet faucet
  2. Enter and submit your ZilPay address to the faucet, you will receive 300 testnet $ZIL shortly. This will take about 30s to 1 min, as the transactions will need to be confirmed on the blockchain.
Nucleus Wallet Faucet

Deploying Contract on Testnet

To deploy the Hello World contract on the Zilliqa testnet, we will use the Scilla web IDE, Neo-Savant IDE.

  1. Change the network to testnet and import your wallet by connecting with Zilpay.
IDE Step1
  1. Select the Hello World contract under the files tab and click on Check button to use the typechecker to check for any syntax errors in your contract.
IDE Step2
  1. Once the typechecker result is passed, click on Deploy button to deploy the contract to testnet. Use your wallet address (Base16 format) for the "owner" initialisation parameter.
IDE Step3

Yay! Your contract is now deployed on the testnet and can be accessed under the "Contracts" tab on the left side of the IDE.

tip

To convert from Bech32 address format into base16 address format, you can use the address converter in the IDE. Click on Tools > Address converter.

Understanding the Hello World Contract

The Hello World contract written in the scilla smart contract programming language essentially consists of two transitions. The transitions of a scilla contract define the public interface for the contract and are a way to define how the state of the contract may change.
The two transitions in the Hello World are:

  1. setHello() - setHello transition updates the value of the mutable variable - 'welcomeMsg' to the value of the transition parameter.
transition setHello (msg : String)
is_owner = builtin eq owner _sender;
match is_owner with
| False =>
e = {_eventname : "setHello()"; code : not_owner_code};
event e
| True =>
welcome_msg := msg;
e = {_eventname : "setHello()"; code : set_hello_code};
event e
end
end
  1. getHello() - getHello transition fetches the value of the mutable variable - 'welcomeMsg' and emits it as an entry of an emitted event.
transition getHello ()
r <- welcome_msg;
e = {_eventname: "getHello()"; msg: r};
event e
end

Front-End Contract Interaction Using zilliqa-js

Let's interact with the Hello World contract using a simple front-end.

Clone the following repository and follow the installation steps: Hello World Front-End.

git clone https://github.com/Zilliqa/dev-portal-examples.git

The above repository builds on the create-react-app starter kit. If you don't have experience working with React, this guide would still be useful for you as the zilliqa-js part of the code is VanillaJS and you can use that as it is in the framework of your choice.

Change Contract State Using ZilPay

After following the installation steps, you need to run the code locally by using the command npm start

On successfully running the web application locally on your system, enter the address of your Hello World contract deployed on the testnet and connect your ZilPay wallet with the front-end by clicking on the Connect button.

To call the transitions from the front-end using ZilPay:

  1. setHello() - Upon clicking the Set Hello button and approving the transaction via ZilPay, the setHello() transition will be called and the value of the welcomeMsg mutable variable in the contract code will be updated with the new message.

The following code snippet achieves this functionality:

async updateWelcomeMsg(){
const zilliqa = window.zilPay;
let setHelloValue = this.state.setHelloValue;
let contractAddress = localStorage.getItem("contract_address");
const CHAIN_ID = 333;
const MSG_VERSION = 1;
const VERSION = bytes.pack(CHAIN_ID, MSG_VERSION);
const myGasPrice = units.toQa('1000', units.Units.Li); // Gas Price that will be used by all transactions
contractAddress = contractAddress.substring(2);
const ftAddr = toBech32Address(contractAddress);
try {
const contract = zilliqa.contracts.at(ftAddr);
const callTx = await contract.call(
'setHello',
[
{
vname: 'msg',
type: 'String',
value: setHelloValue
}
],
{
// amount, gasPrice and gasLimit must be explicitly provided
version: VERSION,
amount: new BN(0),
gasPrice: myGasPrice,
gasLimit: Long.fromNumber(10000),
}
);
} catch (err) {
console.log(err);
}
}
  1. getHello() - Upon clicking the 'Get Hello' button and approving the transaction via ZilPay, the getHello() transition will be called and the value of the welcomeMsg mutable variable is emitted as part of a contract event.

We will use the Zilliqa WebSocket Server (ZWS) to subscribe to all new event logs generated for our Hello World contract. This allows us to update the Welcome Msg on the web application as soon as the getHello() transaction gets confirmed and an event is emitted.

The following code snippet achieves this functionality:

async getWelcomeMsg(){
const zilliqa = window.zilPay;
let contractAddress = localStorage.getItem("contract_address");
const CHAIN_ID = 333;
const MSG_VERSION = 1;
const VERSION = bytes.pack(CHAIN_ID, MSG_VERSION);
const myGasPrice = units.toQa('1000', units.Units.Li); // Gas Price that will be used by all transactions
contractAddress = contractAddress.substring(2);
const ftAddr = toBech32Address(contractAddress);
try {
const contract = zilliqa.contracts.at(ftAddr);
const callTx = await contract.call(
'getHello',
[
],
{
// amount, gasPrice and gasLimit must be explicitly provided
version: VERSION,
amount: new BN(0),
gasPrice: myGasPrice,
gasLimit: Long.fromNumber(10000),
}
);
console.log(JSON.stringify(callTx.TranID));
this.eventLogSubscription();
} catch (err) {
console.log(err);
}
}
// Code that listens to websocket and updates welcome message when getHello() gets called.
async eventLogSubscription() {
const zilliqa = new Zilliqa('https://dev-api.zilliqa.com');
const subscriber = zilliqa.subscriptionBuilder.buildEventLogSubscriptions(
'wss://dev-ws.zilliqa.com',
{
// smart contract address you want to listen on
addresses: [localStorage.getItem("contract_address")],
},
);
subscriber.emitter.on(StatusType.SUBSCRIBE_EVENT_LOG, (event) => {
// if subscribe success, it will echo the subscription info
console.log('get SubscribeEventLog echo : ', event);
});
subscriber.emitter.on(MessageType.EVENT_LOG, (event) => {
console.log('get new event log: ', JSON.stringify(event));
// updating the welcome msg when a new event log is received related to getHello() transition
if(event.hasOwnProperty("value")){
if(event.value[0].event_logs[0]._eventname =="getHello"){
let welcomeMsg = event.value[0].event_logs[0].params[0].value;
this.setState({welcomeMsg: welcomeMsg});
console.log("welcomeMsg", welcomeMsg);
}
}
});
await subscriber.start();
}

View Receipt on ViewBlock Explorer

ViewBlock explorer is a block explorer that supports both Zilliqa mainnet and testnet. It allows you to look at the status of your transaction, current status of the Zilliqa network, contract source code etc.

For example, this is the ViewBlock's transaction link for a getHello() transition transaction.

Edit this page