Create your first dashboard to retrieve balances on Stellar without writing code

Create your first dashboard to retrieve balances on Stellar without writing code

Introduction

Assessing your financial situation can be quite a task, often involving sifting through various online resources, which can occasionally result in overlooking some of your assets.

In the world of Web3, individuals less involved in online activities may find it challenging to consolidate their digital assets into one cohesive overview.

Moreover, you'll soon recognize the convenience offered by QuickNode and FlipSide.

This guide is designed to help you streamline the process of gathering your balance information efficiently.

What We Will Do

What You Will Need

What is QuickNode?

QuickNode makes it easy for you to be creative without all the fuss of dealing with complicated web3 stuff.

You won't have to stress about things like making sure your transactions are safe or keeping track of different blockchains.

QuickNode handles all that tricky stuff for you, so you can concentrate on doing what you love – working on important tasks and exciting projects! 😊

Creating our powerful integration with QuickNode and FlipSide.

To access details about our wallet, it is necessary to establish an RPC connection. This RPC acts as the conduit through which we can interact with the blockchain.

To accomplish this, please proceed to the QuickNode dashboard.
https://dashboard.quicknode.com/endpoints

As a result, you should click on the "Create Endpoint" button.

Screenshot of the QuickNode platform for creating your RPC endpoint

Choose the Stellar blockchain.

Select the mainnet network,and after that click on Continue.

Screenshot of the QuickNode platform to select the desired blockchain to obtain our RPC

After clicking the “Continue" and "Create Endpoint” button, you will see this panel:

Screenshot of the QuickNode platform to copy our RPC from the desired blockchain

After that you need to create an account on Flipside LiveQuery .

As a result, you will be presented with a sign-up form where you can enter your account details.

Flipside SignUp Form

Click on the "Accept" button.

Flipside SignIn Form

Afterward, you'll see the Flipside LiveQuery dashboard. On the left, you will see three tabs. Click on the 'API' tab.

Flipside Dashboard

In consequence, you will the services from QuickNode!

Flipside Dashboard API Integrations

After seeing all the services from QuickNode, we need to create the data to retrieve later on our Dashboard. Click on the "Create" button.

Flipside Dashboard

Please select the "Query" option.

Flipside Dashboard provides an option where we can create queries or dashboards

As a result, you will see an empty query. After that, you will create the query to retrieve balances from a specific wallet.

Please copy this code and paste it into your query:

WITH json_response AS (
  SELECT
    PARSE_JSON(response) AS json_data
  FROM
    (
      SELECT
        live.udf_api(
          'https://Your Stellar QuickNode RPC/accounts/{{param_1O8u}}'
        ) as response
    )
),

processed_assets AS (
  SELECT 
   asset.value:asset_code::STRING AS asset_code,
   asset.value:asset_type::STRING AS asset_type,
   asset.value:balance::STRING AS balance,
   asset.value:limit::STRING AS limit,
   asset.value:buying_liabilities::STRING AS buying_liabilities,
   asset.value:is_authorized::STRING AS is_authorized,
   asset.value:is_authorized_to_maintain_liabilities::STRING AS is_authorized_to_maintain_liabilities,
   asset.value:is_clawback_enabled::STRING AS is_clawback_enabled,
   asset.value:last_modified_ledger::STRING AS last_modified_ledger,
   asset.value:selling_liabilities::STRING AS selling_liabilities
    FROM json_response,
    LATERAL FLATTEN(input => json_data:data:balances) AS asset
)

SELECT
  COALESCE(asset_code, 'native') as asset_code,
  asset_type,
  balance,
  COALESCE(limit,'na') as limit,
  buying_liabilities,
  is_authorized,
  is_authorized_to_maintain_liabilities,
  is_clawback_enabled,
  selling_liabilities

FROM processed_assets;

You will have something like this:

Flipside Dashboard where we created our query

After that, you will notice these parameters:

  • Wallet - Your desired wallet.

Please fill in these values with the data you want to be displayed.

Flipside Dashboard where we created our query with parameters

After that click the ">" button to run the query.

In the Flipside Dashboard, we are locating the run query button.

Also, you can change the title about your query.

Change of title on our Flipside query

When the query is in progress, you will see something like this:

In the Flipside Dashboard, here we are running our query.

Now you have the information related to your wallet where you have your balances.

Query to get balances from Stellar Blockchain

Creating our dashboard

After creating the queries, you need to create the dashboard. To do this, click on the "+" button, and then select the "dashboard" option.

How to create a FlipSide Dashboard

In our dashboard, we can organize our information into tabs. In this step, we will create a new tab.

We are creating a tab in our FlipSide Dashboard

Additionally, you can personalize it with your preferred name.

We can edit our tab name in our FlipSide Dashboard

In my case, I will name this tab NFT's.

Updating the tab name in our FlipSide Dashboard.

Afterward, we need to add a table to retrieve the data from our NFT query.

As a result, you will need the previously created query to retrieve balances.

Adding a table to display our information from query on our Flipside Dashboard

Now you can see the balance information associated from your wallet.

Displaying our query on our Flipside Dashboard

You will notice the appearance of parameters with default values. You can dynamically change this information with another wallet.
Also, you can add a title and description for your dashboard.

Displaying our query on our Flipside Dashboard

To make our dashboard public, click on the "Publish" button.

Making public available our Flipside Dashboard

Finally, you have created your first dashboard with valuable information from Stellar.

We can share our flipside dashboard

Here is my dashboard:

Final result about our Flipside Dashboard

Conclusion

Great job! You've made your first Stellar dashboard without needing to know how to code.

I encourage you to try and make it do even more.

Remember, small steps can lead to big results 🚀.

We ❤️ Feedback!

If you have any feedback or questions on this guide, let us know.
Or, feel free to reach out to us via Twitter or our Discord community server.

We’d love to hear from you!

Author: Irwing Tello

Discord: discord.com/invite/ADjtsHVreT

Twitter: twitter.com/irwingtello

LinkedIn: linkedin.com/in/irwingtello

Email:

Website: dfhcommunity.com

Youtube: youtube.com/@irwingtellomx

You can support my work here:

buymeacoffee.com/irwingtello

BTC: 34kXK9CpTJP1PyHKw2kUD2bt6rtGcG5CHY

EVM Address: 0x8B98F8Ff69d2A720120eD6C71A9Bc5072b8Eb46D

Solana: Ey9oVFHW79giacRZaKxigYjeihMsY7ox8jxc7Hp1sJmS

Did you find this article valuable?

Support Irwing Tello by becoming a sponsor. Any amount is appreciated!