Tutorial: publish a decentralized social media post

Complete this tutorial and share your own message on social media. People have to pay you to comment on your post -- no spam!

Today’s big tech social media are plagued by the twin evil of censorship and hate speech. Is there a way to make it easy for everyone to express themselves, but also make it hard to spam and bully? Blockchain technology is here to rescue. Public blockchains, like the Oasis network, are censorship-resistant and have built-in economic incentives to punish bad behaviors.

In this tutorial, we will show you how to publish your opinions and thoughts on the Oasis Ethereum ParaTime blockchain. While anyone can comment on your publishes messages, they will have to pay you a price you ask for in order to have their message recorded. Complete this tutorial and share your own message on social media.

Intrigued? Let’s get started.

Load the IDE

You can load the web-based IDE by going to the link below. There is no software to download!

http://oasiseth.org/dev/hackoasiseth.org

Start the IDE in your browser. No software download is needed!

Now you can see two sample projects. The first one is a simple “hello world” to show you the very basics of an Ethereum smart contract and Dapp. For the purpose of this tutorial, select the second sample app called OasisTweet.

Figure 1. Select the OasisTweet project

Get some OETH from a faucet

Since this is the first time you start this IDE, it creates several new Ethereum account addresses for you to use. You will need to have some OETH tokens in those accounts so that you can pay “gas” to deploy and use your smart contracts. Click on the Accounts tab on the IDE and copy the selected default address.

Figure 2. The auto-generated addresses

Next, go to the OETH developer faucet below, and paste your address. It takes about 10 seconds for the OETH to be deposited into your account.

http://faucet.oasiseth.org/faucet.oasiseth.org

The Oasis ETH (OETH) faucet for developers

Figure 3. Get 0.01 OETH for your account address

Solidity smart contract

Now, let's go back to the IDE, and review the smart contract. As you can see, it has data fields for an URL to an image and text message. The image and the message will be recorded on the blockchain and displayed on the Dapp web page you create later.

It also has an array called comments. It allows any user to leave a comment on your Dapp web page. However, it is important to notice the price field and the addComment() function. The user must pay the price amount of OETH to YOU in order to leave a comment on your page!

contract OasisTweet {
    address owner;
    string public message;
    string public image;
    uint256 public price;
    struct Comment {
        string name;
        string comment;
        bool isValue;
    }
    mapping (address => Comment) comments;

    ... ...

    function OasisTweet (string _message, string _image, uint256 _price) public {
        owner = msg.sender;
        message = _message;
        image = _image;
        price = _price;
    }

    function addComment (string _name, string _comment) public payable {
        require(msg.value >= price);
        if (!comments[msg.sender].isValue) {
            addrs.push(msg.sender);
        }
        comments[msg.sender] = Comment(_name, _comment, true);
    }
}

Deploy the smart contract

Click on the Compile button and the IDE compiles the smart contract into Ethereum bytecode.

Figure 4. Compile the smart contract

Before you deploy the contract to the blockchain, fill out your message, image URL, and price you demand for each comment. Those will be stored on the blockchain with the contract.

Figure 5. Populate your message, image URL, and price before deploying the contract.

Then click on the Deploy on the chain button to deploy the smart contract to the Oasis Ethereum ParaTime blockchain. It will take about 10 seconds to confirm the contract by Oasis blockchain validators. You will see a success message in the log panel. If you encounter an error at this point, make sure that your default account has an OETH balance!

Figure 6. Successful deployment of the contract. You must have OETH in your default address.

Web app

Next, let’s build a web UI that interacts with the on-chain smart contract we just deployed. Switch over to the Dapp tab. The HTML section is the web page. All the data fields such as image URL, message, and comments are HTML placeholders and will be filled in by JavaScript in the JS tab.

Figure 7. The web app has HTML and JS sections

The reload() function in the JavaScript loads data from the blockchain contract and populates them on the HTML page. Pay attention to the instance.addComment() function. It takes a user comment from the web form and sends it to the contract in a transaction. In the transaction, the user pays price OETH to the contract in addition to gas fees to the network.

var contract = web3.ss.contract(abi);
instance = contract.at(cAddr);

instance.message(function (e, r) {
    $("#message").html(r);
});
instance.image(function (e, r) {
    $("#image").prop("src", r);
});
instance.price(function (e, r) {
    price = r;
    $("#pricealert").html("Requires " + price + " wei to comment");
});

instance.addComment ($("#name").val(), $("#comment").val(), {
    value: price,
    gas: 499000,
    gasPrice: 1
}

Try the web app

Click on the Run button on the IDE to run the web app. You will see the web page in the right panel of the IDE. You can now interact with it by paying and leaving a comment.

Figure 8. Run the Dapp web UI in the IDE

Publish it

Finally, you are ready to publish your Dapp! You can take the HTML and JS content and put them on any static web page host. Or, you can click on the Publish button on the IDE.

Figure 9. Publish the Dapp web page

The published web page is a link you can share anywhere. For users who want to leave a comment, they will need a MetaMask wallet connected to Oasis Ethereum, or fund OETH in their default address on the web page.

Figure 10. The Dapp web page is accessible to all. But commenters need to pay OETHs.

Next, create and deploy an ERC-20 contract, and add the ERC-20 tokens to Oasis Uniswap for trading!

Happy coding!