Solidity Hot Loader with the Tutorial Starter Kit

Introduction

The Solidity Hot Loader brings the web developer experience to Solidity to help you develop your smart contracts and dapps faster.

The easiest way to get started using Solidity Hot Loader is using a Starter Kit.
In this guide we walk through using Solidity Hot Loader with the Tutorial Starter Kit. The Starter Kit includes a Counter dapp, which displays the value of a Counter that can be increased/decreased. We will update the code in the smart contract to show the power of the Solidity Hot Loader.

The Solidity Hot Loader watches your smart contract .sol files you’re using. Once there’s a change, it compiles them, updates the local blockchain using the OpenZeppelin SDK, and refreshes your app in the browser while preserving your blockchain state. Compare this against the existing Solidity development cycle.

The Solidity Hot Loader development cycle:

  1. Make a change to your smart contract .sol file and save it
  2. Wait a bit
  3. Done

The existing (slow) Solidity development cycle:

  1. Make a change to your smart contract .sol file and save it
  2. Compile your contract
  3. Deploy your contract
  4. Restore the state
  5. Restart dapp to get new contract

Video

If you enjoy video :video_camera: , watch @ylv-io’s Devcon presentation: Devcon Delightful Developer Experience With Solidity Hot Loader.

Setup

First we need a local blockchain to develop on.
We use ganache-cli, so go ahead and install (if you haven’t already) and then run a local blockchain using ganache-cli

$ npm install -g ganache-cli
$ ganache-cli --deterministic

Next we need a project directory to develop our project in. In a separate terminal create the project directory.

$ mkdir myproject && cd myproject

Unpack the Tutorial Starter Kit (this could take a little while so maybe make a cup of tea, or start watching the video)

$ npx @openzeppelin/cli unpack tutorial

Initialize the project with OpenZeppelin.

$ npx openzeppelin init
? Welcome to the OpenZeppelin SDK! Choose a name for your project myproject
? Initial project version 1.0.2
Project initialized. Write a new contract in the contracts folder and run 'openzeppelin create' to deploy it.

Enable the Solidity Hot Loader in client/config/webpack.js by setting disabled: false in your favorite editor. We can disable this when we need.

const solidityLoaderOptions = {
  network: 'development',
  // you can stop loader from automatic compile/push/upgrade
  // action by setting disabled flag to true, but it will still
  // serve .json files from file system
  disabled: false,
};

module.exports = {
  solidityLoader: {
    test: /\.sol$/,
    use: [
      { loader: 'json-loader' },
      {
        loader: '@openzeppelin/solidity-loader',
        options: solidityLoaderOptions,
      },
    ],
  },
  solidityLoaderOptions,
};

Counter contract

Compile the Counter contract with OpenZeppelin CLI

$ npx oz compile
✓ Compiled contracts with solc 0.5.13 (commit.5b0b510c)

Deploy the Counter contract to our local blockchain.

Run npx oz create and use the interactive commands to deploy the Counter contract to the development network and initialize to a value e.g. 23.

$ npx oz create
Nothing to compile, all contracts are up to date.
? Pick a contract to instantiate Counter
? Pick a network development
✓ Added contract Counter
✓ Contract Counter deployed
All contracts have been deployed
? Call a function to initialize the instance after creating it? Yes
? Select which function * initialize(num: uint256)
? num (uint256): 23
✓ Setting everything up to create contract instances
✓ Instance created at 0xCfEB869F69431e42cdB54A4F4f105C19C080A601
0xCfEB869F69431e42cdB54A4F4f105C19C080A601

App

We will now start the app

$ cd client
$ npm run start

The app will open in a browser on http://localhost:3000/

Click on Counter to go to http://localhost:3000/counter

In MetaMask change your network to Localhost:8545 to connect to ganache-cli.

Fund MetaMask account

If you need to fund your MetaMask account (e.g. it has a balance of 0 test Ether)

From your project directory in another terminal, call npx oz transfer to transfer 0.5 (test) ether to your account in MetaMask.

$ npx oz transfer
? Pick a network development
? Choose the account to send transactions from (0) 0xF983502f33E2c9E62d0465557446B86C595C4919
? Enter the receiver account 0x77737a65C296012C67F8c7f656d1Df81827c9541
? Enter an amount to transfer 0.5 ether
✓ Funds sent. Transaction hash: 0x69a0ecc17b325a0e4cd414ca9d197a59e88a466c8d3b4d7a0a518ca384526af4

Use the app

In the app, press Increase Counter by 1 button.
Confirm the transaction in MetaMask and once the transaction is confirmed the app will have the updated counter value.

Update the Counter contract

In an editor, modify the Counter contract to change the calculation in the increaseCounter function to add 3.

  function increaseCounter(uint256 amount) public {
    count = count + 3;
  }

The Solidity Hot Loader will recompile the contract and upgrade it on the development network and update the artifacts. We can see in the terminal when it is compiling.

In the app, notice that the state doesn’t change.
Then press Increase Counter by 1 button.
Confirm the transaction in MetaMask and once the transaction is confirmed the app will have the updated counter value.
The value should increase by 3.


Let’s take a moment and go over the Solidity Hot Loader development cycle again:

  1. Make a change to your smart contract .sol file and save it
  2. Wait a bit
  3. Done

We didn’t have to manually do any of the following:

  • Compile your contract
  • Deploy your contract
  • Restore the state
  • Restart dapp to get new contract

This is a big improvement to the developer experience, and allows us to develop faster using the Solidity Hot Loader.

Please note, that Solidity Hot Loader under the covers uses OpenZeppelin SDK upgradeable contracts, so is limited to contracts that can be upgradeable: https://docs.openzeppelin.com/sdk/2.6/writing-contracts

3 Likes