[Video] Hands-On: Messenger Status.im

In this episode we are looking at the Ethereum Messenger “Status”. It’s a mobile app for Android and iOS that should bring the power of the Ethereum Blockchain to your phone. We’re going to look what it can and cannot do with hands-on and in-depth programming examples.

Link to YouTube

I have heard of status the first time during a blockchain startup contest in November 2016. It was my favorite app idea back then and they were also one of the winners. They raised over 100 million us-dollar in June 2017 during their ICO. It The idea itself of status is still extremely powerful to me, even though it’s still in alpha currently.

With status.im, you essentially get connected to an Ethereum node from your mobile phone. It means that there is a go-ethereum node running on your phone, or you get connected to one. You can browse, chat and make payments securely on the decentralized web. That also means that you should be able to open any distributed application on your phone and use it like a normal app. So, distributed apps like uPort, Gnosis, Ethlance could work from your phone from now on.

In our previous course, we were developing the game TicTacToe, so it runs directly on the blockchain. We are going to try and run this game and play one round of TicTacToe between a Chrome Browser with a MetaMask plugin and Status. Of course, I am digging deeper and show exactly why this works or doesn’t work. Let’s get started!

First, let’s see how the status messenger looks like. I’ve installed status on my iPhone via TestFlight. That means I had to sign up to be a Beta-Tester first, then the status team added me to their developer account and I was able to download status on my Apple Device. On Android it works directly from the Play Store, but Apple has some more restrictions in place.

Upon the first start of Status you are required to setup your account. Basically, what happens is: Status will create a random private key and account and encrypt it with a password of your choice. It’s very similar to creating a new account with go-ethereum or any other tool like MetaMask. If you already have an account like me here, then you just enter your password and login.

In status everything is a chatroom. You can open a browser inside the chat or talk to other people or bots. On the initial screen you are presented with your chats or dApps you recently interacted with. Very handy feature. On the bottom there are other options for the wallet, to send and receive ether. Or the profile, to change settings, logout and also change the network.

Currently status can connect to two different networks: The Test-Net Rinkeby and the Test-Net Ropsten. By default, it will connect to Ropsten via Infura, the same provider that MetaMask uses. But you can change the network to Rinkeby.

For me personally the biggest feature is the ability to run distributed applications on my phone. This is why, in theory, it shouldn’t be a problem to run our TicTacToe game on the phone, right?

First let’s check out the TicTacToe game itself. I’ve posted all the contents here on GitHub: https://github.com/tomw1808/blocktactoe

The TicTacToe game also comes with a github-page. So, you can basically reach the game on https://tomw1808.github.io/blocktactoe/

Let’s open this in status.io. You can click on the little plus-icon on the top-right side. Then go to Open DApp. And then enter the URL or your distributed application.

For reference, I am connected to the Rinkeby test-net and my address is 0xf14feb0c32e39bcf44ce00cc0bb71ab2fe6b33b8 on my iPhone. You can see that when you go to your profile in status.

If you click “Create Game” it should deploy a compiled version of our contract on the blockchain. That means internally, in the transaction-object, the “data” field of the transaction is set, but the “to” is empty. It took a while until I figured out why this is not working. Status is automatically sending the data to the address 0x000… So, deploying a new contract isn’t really working. You can also see that here in the etherscan logs: https://rinkeby.etherscan.io/address/0xf14feb0c32e39bcf44ce00cc0bb71ab2fe6b33b8

I am using standard truffle-contracts here, so I assume that this is in fact a status bug, not a problem of my source code. I haven’t tried it with pure web3. If you have tried it and you got any other results, please let me know in the comments!

All in all, creating a new game isn’t really working. Let’s join a game then and see if we can start playing TicTacToe.

In this case, let’s open the game in a Chrome browser with a MetaMask Plugin enabled. I am always on the Rinkeby test-network.

If you are interested how to get test-ether for the Rinkeby test-net, head over to the Rinkeby-Faucet: https://www.rinkeby.io/#faucet

In Chrome we create a new game with MetaMask. Then, when the transaction is mined, it will wait for the opponent to join the game.

Copying (or typing) this address into the status messenger app where we can join the game, we would have to sign a new transaction. This works perfectly fine.

So, we trigger the "joinGame" function of the Solidity contract. This in turn will trigger two events from Solidity. The PlayerJoined event and the NextPlayer event. In our JavaScript we are listening to the NextPlayer event to see who's turn it is. Turns out, the next player is the chrome browser, which also still works perfectly fine.

Let's drill this down in pictures:

Let's have a look what happens internally:

In the app.js file, when joining a game, we are triggering the function:

joinGame: function() {
    var gameAddress = prompt("Address of the Game");
    if(gameAddress != null) {
      TicTacToe.at(gameAddress).then(instance => {
        ticTacToeInstance = instance;

        App.listenToEvents();

        return ticTacToeInstance.joinGame({from:account, value:web3.toWei(0.1, "ether"), gas:3000000});
      }).then(txResult => {
        $(".in-game").show();
        $(".game-start").hide();
        $("#game-address").text(ticTacToeInstance.address);
        $("#your-turn").hide();
        ticTacToeInstance.player1.call().then(player1Address => {
          $("#opponent-address").text(player1Address);
        })
        console.log(txResult);
      })
    }
},

Let's go through this line by line:

1. We are prompting for the address, which works fine.
2. we get the game-instance at a specific address.
3. We are listening to events on this instance

The corresponding function is:

 listenToEvents: function() {
    nextPlayerEvent = ticTacToeInstance.NextPlayer();
    nextPlayerEvent.watch(App.nextPlayer);

    gameOverWithWinEvent = ticTacToeInstance.GameOverWithWin();
    gameOverWithWinEvent.watch(App.gameOver);

    gameOverWithDrawEvent = ticTacToeInstance.GameOverWithDraw();
    gameOverWithDrawEvent.watch(App.gameOver);
},

And the important part is the NextPlayer-event. Which in turn calls the function App.nextPlayer in the app.js file.

This function should determine if it's the players turn or the opponents turn.

Internally, web3 log functions and event functions are, like the truffle-contract functions, error first functions. That means, that if any error happened it will be in the first argument. In the second argument, there is the event-object. Like this:

nextPlayer: function(error, eventObj) { ...

In the case of status, this error-argument is always "EOF". Which makes the game unplayable unfortunately...

I have tried to catch this with another if-else, but it wouldn't work neither. I have no idea how Gnosis or Ethlance does this, but in case someone sees an error I made, please, by any means, let me know in the comments.

Other than that, the idea of Status is still extremely powerful to me! It's the app idea since I've heard of it. And with this amount of funding, we should definitely see some incredible updates in the next time.

This is my experience with the messenger status for iOS. If you had any different experience, or you saw any mistakes I made let me know in the comments!

If you are interested in the course how to program this TicTacToe game, grab this link https://www.udemy.com/ethereum-blockchain-game-development/?couponCode=TOMNINE and the coupon-code TOMNINE to get the course for $9.99.

Thanks for reading and I’ll see you in the next blog-entries.