Building the frontend

Now that we've created a dapp we can start building a frontend interface. Click on the "Edit" button to go to hte dapp builder.

The layout for the frontend interfaces you can build is devided into sections, blocks and items. A section can have a max of two blocks, each block can have different items like text, images and most importantly buttons that connect to your smart contracts to execute functions. In the example below we have a block with a Text item and Image item and a Button item.

For this tutotial we are going to start by adding a block and a button item inside of it.

After that, inside of block 1 on the sidebar, click on button to start customizing it. There, assing the store function to the button.

If we go ahead and try to to click this button after providing a number in the input field, we'll get an error. This is because no Metamask has been connected yet.

Go back to the block settings and add a Connect Button item. Then click on it to connect your Metamask.

After connecting your Metamask try storing a numebr again. After the function finishes executin, you'll get a success message below the button. This message can be changed to anything you want.

Next we'll add another block where we can retrieve the stored number. Add another block with a button inside of it, but connect this button to the retrieve function instead. Then click on the button to get the stored number.

There's an item that's better suited for when you want to show a fetch a value from your smart contract. It fetches the value automatically when the page loads and you can add some text before the fetched value. Delete the button item that's connected to the retrieve function and add a Dynamic Contract Data item instead. Inside the Dynamic Contract Data item settings change the default text to "Number: " and the selected function to the retrieve function.

Finally, save the dapp and go back to the dashboard. Then click on the "launch" button to launch the dapp in full screen.