ZepKit + Skale Labs: Quickly build and deploy a DApp on an elastic sidechain.

Photo by Polina Rytova on Unsplash

As developer advocate at Zeppelin I am a huge fan of our product ZepKit, it allows developers to build out ethereum backed applications very quickly by abstracting away all the boiler plate necessary to get started. I’m constantly trying out new technologies to see what they feel like, how they work, and before ZepKit a lot of the effort that went into testing new things was boilerplate.

Not fun.

This tutorial is the start of what i hope to be a series of tutorials following my own experiments in the ecosystem of building on ZepKit with other products. I’d like to show developers how easy it is to test new products and technologies using ZepKit as the base to abstract away the huge amount of boiler plate that is usually required to get a project started.

SkaleLabs and Elastic sidechains

One of the technologies I have been keeping an eye on recently is SkaleLabs. The project offers elastic sidechains, and even EVM based storage.

So naturally, I wanted to try it out with ZepKit. :-)

First you need to GET a Skale chain, for now you will need to request a custom endpoint as well as test Skale tokens.

Next get ZeppelinOS:

npm install -g zos

(You don’t have to install it globally, but you’ll need to prefix commands with npx if you install locally. I prefer global for convenience. I’m just like that.)

Create and enter your directory:

mkdir SkaleKit

cd SkaleKit

Now unpack a brand new ZepKit.

zos unpack zepkit

Enter your truffle-config.json and alter it to add the SkaleEndpoint, privateKey, and your Skale chain network config information. It should look like this: (I’ve deleted the public ethereum networks that ZepKit comes pre-populated with, as we don’t need them for this demo)

const path = require("path");require('dotenv').config();const mnemonic = process.env.MNENOMIC;const HDWalletProvider = require("truffle-hdwallet-provider");// Create your own key for Production environments (https://infura.io/)const INFURA_ID = 'd6760e62b67f4937ba1ea2691046f06d';let privateKey = "[YOUR_PRIVATE_KEY]";//Provide your SKALE endpoint addresslet skale = "[YOUR_SKALE_CHAIN_ENDPOINT]";module.exports = {// See <http://truffleframework.com/docs/advanced/configuration>// to customize your Truffle configuration!networks: {development: {host: "127.0.0.1",port: 8545,network_id: "*",},skale: {provider: () => new HDWalletProvider(privateKey, skale),gasPrice: 0,network_id: "*"}}};

Now will need your Skale endpoint, and the private key of your ethereum key pair that you will be using. Personally I normally keep a development Metamask around that I export my private key from to work with. This way once I have my project running, I can easily send/receive eth to my address without needing to use truffle console.

Lets create a simple contract:

pragma solidity ^0.5.0;contract HelloWorld {event message(string message, address user, uint timestamp);function postMessage(string memory _msg) public {emit message(_msg, msg.sender, now);}}

This is a stateless contract, all it does is emit messages in logs. It’s fine to get started. I got the idea awhile ago from Peepeth.

Lets initialize our zos project:

zos init skale

and start a session:

zos session --network skale

then we add our HelloWorld contract:

zos add HelloWorld

and push it to our Skale chain:

zos push

You should see the following output from the console: (with a different sender address)

Compiling contracts with Truffle...Compiling your contracts...
===========================
> Compiling ./contracts/HelloWorld.sol
> Artifacts written to /Users/dennison/Documents/SkaleKit/build/contracts
> Compiled successfully using:
- solc: 0.5.8+commit.23d335f2.Emscripten.clang
Using session with network skale, sender address 0xC2cE5805dDCa1287435fF41c5f2eF5ef93BaeC43, timeout 3600 seconds
Validating contract HelloWorld
Uploading HelloWorld contract as HelloWorld
Deploying logic contract for HelloWorld
Created zos.mainnet.json

Now let’s create an instance of our contract:

zos create HelloWorld

Hopefully that went well and you were like, “Whoa, easy!”. Keep a note of the address that zos returns, we will need it handy.

So now that we have an upgradable contract (thanks zos! ) published to our own Skale sidechain (cool!), let us enter truffle console to test it before we head to our front-end.

truffle console --network skale

let instance = await HelloWorld.at('<<that address you were keeping handy>>')

Lets get some accounts ready:

let accounts = await web3.eth.getAccounts()

let account = accounts[0]

So try to send a message!

let tx = await instance.postMessage("Hello World!")

Now lets look at that transaction:

tx

This will list the transaction, but lets see just our message:

tx.logs[0].args.message

The result should be:

'Hello World!'

It works! Sidechain chatting galore! (okay, maybe not just yet)

The Front End

Let’s head over to our front end. I’ve prepared basic ‘chat application’ that I use as a quick example, you can clone the entire project here:

https://github.com/crazyrabbitLTC/Skale-ZepKit

Enter into your client folder and:

npm run start

This will start up your client server. First step is to make sure MetaMask is connected to your SkaleEndpoint our sidechain is an entirely different network so we need to connect to it like it’s a new network.

Once you point MetaMask to the right network, refresh the page and you should see your application pop up.

Simple, but effective.

If you make a transaction, you’ll need to confirm with MetaMask as usual. Your MetaMask address will need to have Skale Eth however and will need to request test eth from the Skale Eth Faucet.

On the front end, I haven’t made too many changes to the stock ZepKit App.js file. I have imported the contract artifact and made sure componentDidMount creates an instance of the contract and sets it on state. Then my various component manage the interface of the chat application itself. Feel free to poke around, it’s pretty easy.

If I continue this tutorial, I’ll look into using Skale’s native EVM storage, but I’ll save that for next time!

Learn more:

Join us in the forum

Learn about Zepkit

Learn about ZeppelinOS

Learn about Skale labs

-Dennison

Professional Revolutionary and Blockchain.