Using the Etherscan API and Bubble

Etherscan API

Etherscan block explorer is a web application where you can check all the transactions, blocks, and data of the blockchain in real-time. The app displays the gas prices on the Ethereum network. This is an app that I will be building on Bubble.io, a no-code platform.

Bubble

Bubble.io is a no-code visual application development platform that lets you build anything, such as a marketplace, a social network, or even a CRM.
The first step is to sign up for and create your account. Navigate to my apps and click on the new app. Make sure to give it a unique name.
You can also use the templates if you want to.
In Bubble, there are seven tabs that help you build your app.

• Design: This tab helps you define your visual appearance.

• Workflow: Workflow is for defining user interactions.

• Data: Data is for managing data your users create.

• Styles: For creating reusable designs.

• Plugins: Plugins are for adding extended functionality.

• Settings: To define app right controls and connect external services with one click.

• Logs: For monitoring app’s usage and activity.

Creating an API Key

Go to the website https://etherscan.io/ and click on sign up to register for a new account.

Log in to your account and open up your account’s dashboard. You will see a tab with the name API-KEYs. Click on that tab and you will see an “Add” option; click on that to generate a new API key. Please note that you are limited to creating only three keys with a single account.

Gas Tracker

Here we are going to track gas prices. The Ethereum network uses the gas paid in Ether to complete the transaction. With Etherscan’s gas tracker, users can determine if now is the right time to send a transaction. Low fees are beneficial to all users, but may not be possible at this time due to network activity. Adjusting the gas fee in MetaMask or other wallets through estimates of this gas tracker will help users to complete the transfer faster.

Adding External API in Bubble

When you need to add extended functionality to your app and you cannot find a suitable plugin, you can install the API connector so that you can define your own API calls directly in the Bubble editor. In this app, we are going to add an external API, Etherscan API. To do so, navigate to the plugins tab and search for the plugin API connector. Click on install to install this plugin.

Using an API connector you can easily connect to an external API.

Click on Add another API. Enter the details.
We are naming it API call and using the GET method by specifying the URL below:
https://api.etherscan.io/api?module=gastracker&action=gasoracle&apikey=YourApiKeyToken
You can visit the link https://docs.etherscan.io/ for API documentation that describes all the steps in detail to use the API.

Now, click on initialize call and you will get a popup with the result.

If you click on raw data you will get a view of the JSON format of the data as shown below:

Click on save. Now you can use this API call in your group, repeating groups, or any other element of your interface directly.

Designing Interface:

Designing a beautiful interface is a simple process, as you can easily drag and drop elements. Simply select the element, then drag and drop it anywhere on the screen. So, let us go back to the design tabs. Here, I have added buttons with different labels. Whenever you hover over a button the respective value will be displayed on the button. To add this functionality, click on edit on the button and type the name of the button in the appearance tab.

To add the functionality, click on the conditional tab and add a condition. When the button is hovered it evaluates to a text, and the text is taken from (insert dynamic data) an external API call as shown in the image below.

Similarly, I have added the buttons for

• SafeGasPrice

• ProposeGasPrice

• FastGasprice

• suggestBaseFee

• gasUsedRatio

The final look of my app is as shown below:

Click on the preview to have a look at your app.
You can view the result from the below link:
https://gasprice.bubbleapps.io/version-test/?debug_mode=true&tab=13880295

Conclusion:

In this article, you’ve learned about using Bubble. In short, Bubble is a no-code development platform that enables developers and non-developers to create apps without the need for any technical programming languages. Building apps with Bubble saves development time.