Blockchain App, from the outside world

Research and Development
1

By Gauthier Sebille

In the first part of our tutorial, we have seen how to interact with the VM state of our sidechain Deku-P.

The goal of this article is to create a front web application using this state!

Prerequisites

  1. Read and do the first blog article
  2. Having an up & running Deku-P Cluster (explained in the first blog article)
  3. Having a working front application

Steps

We assume you have front web development skills or experiences. Hence, we will only focus on the mandatory tasks to interact with Deku-P from the outside world.

You already interacted with the VM state using deku-cli in the previous blog post. On a front web application, we have to do some actions before submitting:

  1. Retrieve the actual state of the Deku VM
  2. Retrieve the current height
  3. Create the operation we want to submit
  4. Submit the operation

We will explain in detail how to perform each of these actions.

A naive working front

Before going deeper into how to create and submit our operation, we create a simple front web with several buttons, one per action:

  • One button to mint cookies
  • One button to mint cursor
  • One button to mint grandma

We will also display several useful information saved in our state, like:

  • Current amount of cookies
  • Current “cookies per second”
  • Current amount of cursors
  • Current amount of grandma
  • Next cost for Cursor
  • Next cost for Grandma

Here is the current front we have on Decookies:

1600×1156 192 KB

I think you guessed it:

  • if we click on the cookie, it mints a cookie.
  • If we click on the cursor, it will mint a cursor.
  • And if we click on the beautiful grandma… It will mint a Grandma!

Of course, you need sufficient funds to buy Cursors, Grandmas and the other buildings.

Defining our state

The first thing to do is to have an equivalent of the State we defined in our VM.

Remember how it is in the end of the first blog article:

export type cookieBaker = {
    cookies: bigint,
    cursors: bigint,
    grandmas: bigint,

    cursorCost: bigint,
    grandmaCost: bigint,

    cursorCps: bigint,
    grandmaCps: bigint
}

Let’s define the exact same on our front web application.

In our case, we decided to use the reducer pattern. Hence, the cookieBaker type will be wrapped in a state type, containing other useful information.
‍

Minting your first cookie

Now that we have defined our state and created our reducer to perform the correct actions regarding the clicked button, our reducer kinda looks like:

export const reducer = (state: state, action: action): state => {
   switch (action.type) {
       case "FULL_UPDATE_COOKIE_BAKER": {
           return { ...state, cookieBaker: action.payload }
       }
    }
}

You can have a look at the defined actions, this is not the purpose of this article, and I won’t explain the details. You are free not to use the reducer pattern.

‍
If you want to learn more about this tutorial, please read our blogpost on Marigold website :point_right: Blockchain App, from the outside world