Getting Started with OmiseGO Plasma on MultiBaas

For a less technical treatment, please check out our OmiseGO Plasma overview blog post.

MultiBaas provides a simple interface for interacting with smart contracts on the Ethereum network, and it can also simplify building on OmiseGO's Plasma network. In this post, we'll take you through a demo application that can be used as a starting point for building a DApp on OmiseGO with MultiBaas.

The MultiBaas omisego-demo-app is built on Vue.js, with custom JavaScript for interacting with the MultiBaas blockchain middleware and OmiseGO Plasma child chain. At this point, composing transactions requires the omg-js library, which the front-end calls. In the near future, MultiBaas will add back-end support for composing OmiseGO Plasma child chain transactions directly, much as it does for Ethereum.

MultiBaas requires TLS/SSL (HTTPS), and so we use a basic HTTP-to-HTTPS proxy for development purposes on localhost. The MultiBaas API key sits in the proxy server.

Setup

Start by cloning the repository and running yarn install in both the server and web directories. Before you can launch the application, you must provide a valid API key to connect with a MultiBaas deployment on the Ropsten Ethereum test network. This walkthrough assumes you have a MultiBaas deployment setup on the Ropsten test network, and have created an API key for interacting with MultiBaas. Please see our introduction to MultiBaas blog post for how to get up and running for free.

Once you have your MultiBaas deployment setup and have created an API key, add those details to the server/config/config.json file. In the host field enter the URL of your MultiBaas deployment, and in the apiKey field enter the key as it appeared on the API key creation page.

Before interacting with the OmiseGO smart contracts via the sample application, you must link the OmiseGO contracts to their appropriate Ropsten addresses in your MultiBaas deployment. The smart contract are pre-loaded on the MultiBaas contracts page.

Navigate to the deploy/link page for each contract, and link the contracts with their respective Ropsten addresses.

Erc20Vault: 0x18E15C2cDc003b845B056f8D6b6a91ab33d3F182

EthVault: 0x895Cc6F20D386f5C0deae08B08cCFeC9f821E7D9

PaymentExitGame: 0x08C569c5774110EB84A80B292e6d6f039E18915A

PlasmaFramework: 0x96d5D8bc539694e5fa1ec0dAb0e6327CA9E680F9

With those details configured, open a terminal and start a local proxy server by running yarn start in the server directory.

$ yarn start
yarn run v1.21.1
$ node app.js
MultiBaas Proxy Server running at http://127.0.0.1:3000/

‍

In order to access the front-end of the application, in a separate terminal run yarn serve in the web directory. Once the latter command completes, the terminal window will display the URL where the front-end can be accessed. By default, it is http://localhost:8080/.

$ yarn serve
yarn run v1.21.1
$ vue-cli-service serve
 INFO  Starting development server...

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.10.0.2:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

‍

Open a web browser to http://localhost:8080/ (or whatever is displayed in the terminal). If the top of the OmiseGO application displays the Ropsten addresses as shown in the screenshot below, then you know that the sample application has successfully connected to your MultiBaas deployment.

OmiseGO Flow

Let's deposit some Ether into the OmiseGO network. In the Deposit tab, expand the Ether section and enter 10000000000000000 as the Amount in Wei (equivalent to 0.01 Ether). Once you press the Deposit button, the application will send an API request to your MultiBaas deployment saying that you wish to call the deposit method of the ethvault contract with the arguments you specified. MultiBaas will process the request and return an unsigned transaction.

Review the returned transaction in the MetaMask (or other web3 browser) popup and confirm it.

Wait for the transaction to be mined. Once it is mined, we must wait for another 10 blocks to be mined on the Ethereum network before the deposit is reflected on the OmiseGO network.

Use the Balance section of the OmiseGO application to confirm that your deposit was successful.

Now that we have Ether on the OmiseGO network, let's send it to another address. In the Transact tab, expand the method and fill in the details. In order to send half of our deposited amount to another address, we will enter 5000000000000000 as the Amount. Select Ether as the currency in the dropdown. Enter another Ethereum address in the recipient field. If you wish to be able to withdraw these funds, please ensure that the recipient address is one that you control. Optionally, you may include some text in the Metadata field.

Click the Transact button, and confirm the transaction in the MetaMask window.

Once the transaction is confirmed, use the Balance section to once again confirm that the transaction was successful. There is a slight delay before the new balance is reflected.

Now that we have transacted on the OmiseGO network, let's withdraw our remaining funds back out to the Ethereum network. Switch to the Withdraw tab, and expand the method. Since we have spent some of our Ether, it is helpful to refresh the UTXO (unspent transaction output) list before attempting to start the standard exit. Click the refresh button to the right of the the UTXO To Exit dropdown, and select the UTXO you wish to withdraw. Click the Start Standard Exit button.

In the MetaMask window, you will notice that the transaction includes a value of 0.014 Ether. This Ether is temporarily held as a bond to ensure the security of the OmiseGO network. The withdrawal will be pending for the duration of the challenge period, during which other parties on the network may dispute your withdrawal if they can prove that it is non-canonical.

Once the transaction is confirmed and the challenge period has passed, you may process your withdrawal from the OmiseGO network by calling the processExits method of the plasmaframework contract. This functionality is not included in the OmiseGO sample application and is left as an exercise for the reader. Hint: try it out on the Contracts page for the PlasmaFramework contract in MultiBaas.

Once the exit is processed, the withdrawn funds as well as the exit bond will be returned to the withdrawing address on the Ethereum network.

The above process may be repeated with an ERC-20 token with two caveats:

1. Before calling the deposit method of the erc20vault contract, you must call the approve method of your ERC-20 contract. The spender address is the address of erc20vault contract, and the specified amount is the cumulative amount you wish to approve for future deposits.
2. Before calling the startStandardExit method of the paymentexitgame contract with an ERC-20 UTXO selected, you must ensure that a withdrawal queue for the specified ERC-20 token has been created. You may check if an exit queue already exists by calling the hasExitQueue method of the plasmaframework contract. The ethvault has a vault ID of 1, while the erc20vault has a vault ID of 2. If an exit queue does not exist for your ERC-20 token, you must create one by calling the addExitQueue method of the plasmaframework contract. This must be done only once per ERC-20 token.

As with all interactions with smart contracts, the above method calls may be performed via the web UI of your MultiBaas deployment, or via the MultiBaas API directly.

Conclusion

We hope  this walkthrough was helpful in demonstrating interaction with the OmiseGO Plasma network, and how to build a DApp on MultiBaas and OmiseGO Plasma. Happy BUIDLing!

‍