pEthereum Developer Tutorials - Level: Beginner

pApp: Message Board

This document describes how to build a simple dapp and integrate it with the Incognito Broker smart contract. After the tutorial, you’ll be able to apply a similar technique to any other dapps. This tutorial will not cover privacy-protecting elements, but is a good starting point for further development as you’ll see in the next tutorial (Intermediate Level).

First, you learn how to create a “Hello World!” Message Board dapp on Ethereum. It simply takes a user message and displays it. Then you integrate the incognito Broker smart contract for the app that lets users indirectly post their messages. By the end of the tutorial, you’ll have built an unstoppable message board that will forever live on both the Ethereum and Incognito network.

Build an Ethereum message board dapp

Step 1. Create an Ethereum dapp project

Go to https://studio.ethereum.org/ and select the Hello World template.

A new project is created with two key folders:

  • /contracts. This folder consists of unstoppable smart contracts that live on Ethereum
  • /app. This folder consists of a basic web app with a simple user interface that interacts with the smart contacts

Step 2. Deploy the dapp

Click on the rocket icon to enter the deploy perspective. Then, click on the Deploy button to deploy the dapp. Click on Transactions to verify if the dapp has been deployed successfully with a contract address.

Step 3. Use the dapp

Click on Browser to start using the dapp. Enter a message and hit Send. The web app now displays the message on the top.

When you hit Send, the transaction information is permanently recorded on Ethereum. It is viewable by anyone. Anyone with an Internet connection can go to the Ethereum blockchain explorer and see that you just submitted a message. You can click on Transactions to see the transaction details. As soon as you send funds to the address 0xa4…07fd, you leave a trail for people to identify who you are.

For this dapp, the lack of privacy may hinder freedom of speech: you may not say everything you think because your identity is not protected. It becomes even a bigger problem when you use other dapps for lending, borrowing, or voting. You may not want to tell the entire world how much USDC you have, how much money you’re borrowing from Compound, or how profitable your recent trades were on Uniswap.

Integrate HelloWorld with Incognito SDK

STEP 4. Get some free ETH from Kovan

In order to integrate with Incognito’s services and contracts that have already been on testnet environment, we need to deploy the HelloWorld contract to Kovan as well.

To be able to do this, we will need some Kovan Ether (KETH) to pay gas fees on Kovan Ethereum test network. There are several ways to get KETH. A faucet might be the easiest way.

In case you do not have an Ethereum address yet, create one by using your favorite crypto/ethereum wallet, mine is MetaMask. This address is where you will receive 1 Kovan Ether after completing directions from the faucet.

Press the “Create” button and a new address named “Hello World” with 0xD057B94244041D7606137e5c1514BED73f8aB254 address will be created:

Next, go to https://faucet.kovan.network/ to make a faucet request. This requires logging in with a Github account.

After logging in, we’ll be directed to a page where we can input our Ethereum address.

Check out the balance on MetaMask.

STEP 5. Deploy HelloWorld on Kovan

Now that we have 1 ETH, the next thing to do is deploy HelloWorld contract on Kovan network.

Because Ethereum Studio doesn’t support the deployment of a contract to Ethereum test networks like Kovan, Rinkeby, etc., but only to its own private Ethereum network, we need to use another tool called Remix to do it.

Head to https://remix.ethereum.org/ and create HelloWorld.sol contract file (the file has almost the same content as one we created in Step 1 above)

Move to “Solidity Compiler” tab and compile the contract by pressing the “Compile HelloWorld.sol” button.

Once the contract is compiled, switch to “Deploy & Run Transactions” tab, this is where we configure options for our deployment:

  • ENVIRONMENT: Injected Web3 - when we choose this option, Remix will connect to an injected web3 provider. MetaMask is an example of a provider that injected web3 so we can use it along with the created address above (a.k.a 0xD057B94244041D7606137e5c1514BED73f8aB254) for this option.
  • GAS LIMIT: it’s 3000000 by default
  • VALUE: 0 by default
  • CONTRACT: our deploying contract - HelloWorld
  • INITMESSAGE: this is where we pass a value for constructor’s initMessage argument. We’re putting a “hello” string in it.

Press the “transact” button to deploy the contract to Kovan network.

Looking into the bottom console, we can see that the HelloWorld contract has been deployed successfully on Kovan network at 0xd7cd6b69d93887ff0f0ad237cece10b8abec6684 address. We can also explore the transaction in detail at https://kovan.etherscan.io/tx/0x5866d3cfdc1c0cae8e6471dcd85d7bfdf79890aee64d15cd4e62bae5b86aeb81

STEP 6. Rewire to Incognito Broker contract


Figure. app.js is calling smart contracts directly.


Figure. rewrite app.js to call Incognito SDK which comprises Incognito Broker contract

The next section will illustrate step by step how to rewire the app.js to Incognito Broker contract.

Configure your account and contract addresses (kovan testnet):

Create new HelloWorld contract instance:

Create abiencode to call the update function with your desired message in HelloWorld contract:

Create new broker contract instance:

app.js would be interacting with Broker’s Execute function which has the following params:

  • token (address): The type of token that will be transferred from broker contract to your dapp.
  • amount (uint): amount to send to the dapp.
  • destToken (address): the receiving token type
  • dappAddress (address): the dapp address which broker interacts with
  • inputData (bytes): the encoded dapp’s function call (abiencode)
  • randomData (bytes): the data to make each action on broker unique
  • signature (bytes): the signature of hash of concatenation of params above

Since we just want to update message content, so let’s leave irrelevant params to default values:

  • token (address): 0x0000000000000000000000000000000000000000
  • amount (uint): 0
  • destToken (address): 0x0000000000000000000000000000000000000000

The next thing we need to prepare prior to calling Execute function is to build dataToSign and sign it with PRIVATE_KEY where dataToSign is hash of concatenation of (dappAddress, inputData, randomData, amount)

callData to call Execute function would be built by:

At this point, we already have all the ingredients. Now we just need to create a transaction with the callData above and broadcast it to Ethereum Kovan network.

You can get the complete source code of the tutorial here.

STEP 8. Deploy web app on some server

You can use http-server module of NodeJS to host your website with this command
npx http-server. The site may be accessed at http://YOUR_IP:8080

STEP 9. Post a message through Incognito Broker

Congrats! You’ve built a global message board that is trustless and unstoppable. In the next tutorial, you’ll learn how to build a DAO pApp where the role of Incognito Broker for privacy-protection is emphasized. Stay tuned!

18 Likes

This looks like fun, I will give it a go soon and let you know how it went.

4 Likes

Wow cool! Thanks! I’ve always wanted to learn it! Still waiting for training articles?

2 Likes

On Step 4 I found it a bit unclear where to click for the menu to show up that holds the “Create Account” option.

Now I am stuck on Step 5.
I went to the remix website. The next thing to do is “create HelloWorld.sol”.
How does that work? HelloWorld.sol is not in the list, do I need to create a new file? Where does the code come from?

1 Like

Thank you for pointing these out :raised_hands:
On step 4: To get “Create account” option on your side you need MetaMask extension to be installed then click on circle, which surrounded by blue border, on the right corner.

And for step 5: you can create completely your new own version of HelloWorld.sol on remix or use the one we already deployed on kovan network https://kovan.etherscan.io/address/0x5571741ab1b6e999102476426f2d6497da9de7d1#code

1 Like

Thanks. For a beginner’s guide I think this needs more explanation.

1 Like