Create your first dashboard to retrieve NFTs on Solana without writing code

Create your first dashboard to retrieve NFTs on Solana without writing code

Introduction

It can be tough to figure out how much money you have and keep tabs on your NFTs (special digital items). This involves checking various places online, and sometimes, you might forget what you own.

In the Web3 world , if you're not super active online, it can be tricky to see all your things in one spot.

Plus, you'll discover the usefulness of QuickNode and FlipSide.

This guide is designed to help you retrieve essential information about your NFTs.

What We Will Do

What You Will Need

What is QuickNode?

QuickNode empowers individuals to express their creativity without worrying about the complicated web3 infrastructure.

Instead of getting struggling with concerns like transaction security and keeping up with different blockchains, QuickNode takes care of these challenges, allowing you to focus on more valuable tasks and projects.

Creating our powerful integration with QuickNode and FlipSide.

To access details regarding our NFTs and 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 Solana blockchain.

Select the mainnet network.

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

Search for the Flipside LiveQuery add-on.

Screenshot of the QuickNode platform where we activate plugin to create our polygon dashboard

Click on the explore button on the Flipside LiveQuery add-on and install it.

Screenshot of the QuickNode platform where we activate the flipside livequery bundle to retrieve the information from our nfts

After that search for the Solana Name Service by Bonfida add-on and install it.

As a result, you will see the Solana Name Service by Bonfida activated, along with Flipside LiveQuery.

Screenshot of the QuickNode platform where we have finished activating the plugins

After clicking the "Create Endpoint" button,you will see this dashboard:

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

In this dashboard, you need to navigate to the '"Add-ons" tab.

Screenshot of the QuickNode platform where you can see our add-ons activated

Click the three dots in the Flipside LiveQuery row.

Screenshot of the QuickNode platform where you can see our add-ons activated

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 NFTs from a specific wallet.

Please copy this code and paste it into your query:

WITH request_data AS (
  SELECT
    '{
      "jsonrpc": "2.0",
      "id": 1,
      "method": "sns_resolveDomain",
      "params": ["{{wallet}}"]
    }' AS json_data
),
parsed_response AS (
  SELECT
    COALESCE(
      PARSE_JSON(response) :data:result,
      '{{wallet}}'
    ) AS json_data
  FROM
    (
      SELECT
        livequery.live.udf_api(
          'POST',
          'Your Solana QuickNode RPC',
          { 'Content-Type': 'application/json' },
          PARSE_JSON(
            (
              SELECT
                json_data
              FROM
                request_data
            )
          )
        ) AS response
    )
),
json_response AS (
  SELECT
    PARSE_JSON(response) AS json_data
  FROM
    (
      SELECT
        quicknode_solana_nfts.fetch_nfts(
          { 'wallet': json_data,
          'omitFields': [
        'provenance',
        'traits'
      ],
          'page': {{Page}},
          'perPage':  {{ItemsPerPage}} }
        ) AS response
      FROM
        parsed_response
    )
)
SELECT
 asset.value:chain :: STRING AS chain,
 asset.value:collectionAddress :: STRING AS collectionAddress,
 asset.value:collectionName :: STRING AS collectionName,
 asset.value:description :: STRING AS description,
 asset.value:imageUrl :: STRING AS imageUrl,
 asset.value:name :: STRING AS name,
 asset.value:network :: STRING AS network,
 asset.value:tokenAddress :: STRING AS tokenAddress
FROM
  json_response,
  LATERAL FLATTEN(input => json_data:data:result:assets) AS asset;

You will have something like this:

Flipside Dashboard where we created our query

After that, you will notice these parameters:

  • Wallet - Your desired wallet (Can be .sol domain).

  • Page - When querying the services from QuickNode, we will receive a lot of information, and this information is segmented into pages.

  • ItemsPerPage - The number of items per page.

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 NFTs.

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.

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

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

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

Now you can see the nft 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 Solana.

We can share our flipside dashboard

Here is my dashboard:

Final result about our Flipside Dashboard

Conclusion

Great job! You've made your first Solana 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!