Use Bubble To Read Data From The Ethereum Blockchain

What if you could use a rest-like API to interface with the data on the Ethereum Blockchain? That would cool, right? In fact, it would likely make development on Ethereum a lot more accessible.

Well, it turns out that there are services providing just such an interface. One major player is Infura.io.

In this article we will walk through how to read the balance on an Ethereum address using just an Infura.io account and the Bubble API connector.

Pre-requisites

This article is not an introduction to blockchain. We do expect that you have just a bit of experience with Ethereum such as having bought or sold Ether.

It’s also expected that you have an Ether wallet that can connect to both the Main network (“mainnet”) and at least one test network.

Finally, you should have a bit of experience using the Bubble API connector – this is the primary tool that will be used to connect to the REST API Ethereum bridge.

Setup An Infura.io Account

The first thing you’re going to need is access to an Ethereum REST API bridge – which you can get for free by setting up an Infura.io account.

Once you’ve signed up, you’ll be thrown into your dashboard where you can create a project. A project is simply a set of credentials along with statistics related to those credentials and security that you tighten down. You can also set which network the credentials will connect you to – the main production network (“mainnet”) or one of the test networks.

For this article I suggest you configure a project for the Rinkeby test network. Your screen should look something like this:

You’ll notice that you have some ENDPOINTS listed – you’ll need the one for HTTPS.

Create A New App and Install the Bubble API Plugin

Next we need to create a new Bubble.io application and then navigate to the PLUGINS tab in the Bubble IDE. Search for “Bubble API” – the API connector will likely be the first item in the list. Just install it.

Configure General API parameters

Now we need to give our API configuration in Bubble a name and set up a few other housekeeping items – this is what those items should look like:

  • We have named our api configuration “infura.io”.
  • HTTP Basic Authentication is turned on.
  • The user name is your Infura.io PROJECT ID and your password is your Infura.io PROJECT SECRET.
  • A shared header is defined for Content-Type – this will be sent with every api call, regardless of the type of call.

Setup the API call: eth_getBalance

Next we need to configure the API call to get the balance for an Ethereum address. It should look something like this:

Lets breakdown what we’re looking at here:

In AREA 1, we have given the API call the eth_getBalance name. This could have been any name but we are giving it the same name as the RPC call in Infura.

The type of call is POST and the URL is taken from your Infura.io project settings.

In AREA 2, we defined the structure of the data we’re sending when making the API call. Replaceable PARAMETERS to the call are specified between “<>”. You’ll notice that we have three of them:

  • <id>,
  • <address> and
  • <version>

When you paste that text into the BODY field, the body parameters in AREA 3 are automatically created by extracting the parameters specified between the “<>”.

You’ll notice that we’ve modified the ADDRESS parameter in AREA 3 by unchecking the PRIVATE option. This means that when we use this API call in a formula we’ll be able to dynamically replace its value before the API call is sent to the Infura servers. And, we’ve given the ID and VERSION parameters fixed values – these values cannot be changed when using the API call in forumulas.

Here is the JSON to paste into the BODY field:

{
  "id": <id>,
  "jsonrpc": "2.0",
  "method": "eth_getBalance",
  "params": [
    "<address>",
    "<version>"
  ]
}

Using the API To Get The Balance From An Address

Now, your API call is accessible from any place where a Bubble API call can be used:

Using The Returned Data

There is just one problem – the balance that is returned is in HEXADECIMAL format:

So, the first thing you will need to do is to convert the returned data to a decimal string. You can do that using the technique outlined in our Convert Hexadecimal To Decimal article.

However, in the example in the image above, that still returns “18760220673000000000”. This is because the balance is returned in ‘wei’, a unit of measure substantially lower than 1 “ether”.

One Ether is 1,000,000,000,000,000,000 wei (10^18).

So, you’ll need to convert the 18760220673000000000 to Ether by dividing the returned balance by 1,000,000,000,000,000,000. This will return a value of 18.760220673 Ether, which is the balance in the address.

Wrap Up

Infura.io offers RPC calls for many different functions that can be performed on the blockchain – even deploying custom contracts (written in Solidity) and executing contract functions. Check out the links in the Resources section below to learn more.

Additionally, you can use a Bubble METAMASK plugin but that restricts you and your customers to using only the Metamask wallet for Web3 interaction. Learning to use the API Connector will be a much more powerful tool in your arsenal in the long run!

Resources

Learn more about Infura’s API and Ethereum:

Getting Started With Infura

Introduction to Ethereum RPC methods

Other

Metamask Plugin

Ready To Build Something?

Check out our no-code calculator - it can help you understand your all-in costs for your project.  It takes into account factors that most others forget or just ignore!

Posted in ,