Introduction
Monitoring your NFT portfolio can be challenging when you try new EVM blockchains.Furthermore in the Web3 environment, consolidating all your assets in a single location can be difficult.
In this tutorial you'll discover the effectiveness of QuickNode and Flipside and how to access to your NFT's from any EVM blockchain.
Preview:
What We Will Do
What You Will Need
- Create an account on QuickNode.
What is QuickNode?
QuickNode offers people the freedom to unleash their creativity, relieving them from the burden of underlying web3 infrastructure concerns.
Instead of only thinking about how transactions are kept secure and staying updated with various blockchains, you can use QuickNode to handle difficult tasks and make things valuable.
QuickNode empowers individuals to fully express their creativity without the constraints of managing web3 infrastructure. With QuickNode, you're freed from worrying about securing transactions and keeping pace with evolving blockchain technologies. It takes on the complex challenges, allowing you to focus on creating value.
Creating our powerful integration with QuickNode and FlipSide.
To access details about our NFTs and Wallet, it's necessary to establish an RPC (Remote Procedure Call). This RPC acts as the communication channel that enables us to 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.
Choose your desired blockchain; in my case, I will select the Base blockchain.
Select the mainnet network, click on "Continue", and then press the "Create Endpoint" button.
You will see the following dashboard, where you can copy the RPC.
After that, you will have completed about 70% of the work. Now, we need to display the data extracted from the RPC.
Now we need to go to Flipside.
What is FlipSide? .
Flipside offers comprehensive data solutions for analysts, protocols, builders, and the entire crypto sector.
You can create an account on Flipside.
Afterward, you'll see the Flipside LiveQuery dashboard. On the left, you will see three tabs. Click on the 'Utilities' tab.
After seeing this option, we need to create the data to retrieve later on our Dashboard. Click on the "Create" button.
Please select the "Query" option.
As a result, you will see an empty query. After that, you can create a query to retrieve the balance from a specific wallet.
Please copy this code and paste it into your query:
SELECT livequery.utils.udf_hex_to_int(SELECT
'0x' || SUBSTRING(
live.udf_api(
'POST',
'{{QuickNodeRPC}}',
{},
livequery.utils.udf_json_rpc_call(
'eth_call',
[
{
'to': '{{Contract}}',
'data': CONCAT(
'0x70a08231000000000000000000000000',
-- Ensure padding is applied to the token ID before concatenation
SUBSTRING('{{Address}}', 3)
)
},
'latest'
]
)
):data:result::string,
27, 40
) AS ethereum_address
) as "Balance Of"
You will have something like this:
After that, you will notice these parameters:
Address - Your desired wallet.
QuickNodeRPC - We will use the RPC that we obtained from QuickNode for further development.
Contract - The contract from your preferred collection.
Please fill in these values with the data you want to be displayed.
After that click the ">" button to run the query.
Also you can change the title about your query.
When the query is in progress, you will see something like this:
Now you have the information related to your wallet where you have NFTs.
Furthermore, we need three queries to complete our dashboard:
TokenURI
OwnerOf
Supply
Please follow the same steps as mentioned in the previous instructions to create these queries:
TokenURI:
SELECT
REPLACE(
live.udf_api(
'POST',
'{{QuickNodeRPC}}',
{},
livequery.utils.udf_json_rpc_call(
'eth_call',
[
{
'to': '{{Contract}}',
'data': CONCAT(
'0xc87b56dd',
LPAD(SUBSTRING(utils.udf_int_to_hex({{tokenId}}), 3), 64, '0')
)
},
'latest'
]
)
):data:result::string,
'0000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000003c',
''
) AS "https://onlinestringtools.com/convert-hexadecimal-to-string"
OwnerOf:
SELECT
'0x' || SUBSTRING(
live.udf_api(
'POST',
'{{QuickNodeRPC}}',
{},
livequery.utils.udf_json_rpc_call(
'eth_call',
[
{
'to': '{{Contract}}',
'data': CONCAT(
'0x6352211e',
-- Ensure padding is applied to the token ID before concatenation
LPAD(SUBSTRING(utils.udf_int_to_hex({{tokenId}}), 3), 64, '0')
)
},
'latest'
]
)
):data:result::string,
27, 40
) AS ethereum_address
Supply:
SELECT livequery.utils.udf_hex_to_int(SELECT
'0x' || SUBSTRING(
live.udf_api(
'POST',
'{{QuickNodeRPC}}',
{},
livequery.utils.udf_json_rpc_call(
'eth_call',
[
{
'to': '{{Contract}}',
'data':'0x18160ddd'
},
'latest'
]
)
):data:result::string,
27, 40
) AS ethereum_address) as "Total Supply"
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.
In our dashboard, we can organize our information into tabs. In this step, we will create a new tab.
Additionally, you can personalize it with your preferred name.
In my case, I will name this tab BalanceOf
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 NFTs.
Now you can see the balance information associated from your wallet.
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.
To finalize this dashboard, create a table from these queries:
TokenURI
OwnerOf
Supply
You can add a personalized tab for each query.
To make our dashboard public, click on the "Publish" button.
Finally, you have created your first dashboard with valuable information from Base.
Here is my dashboard:
https://flipsidecrypto.xyz/irwingtello/evm-collection-utils-ygF78u
Conclusion
Congratulations! You have successfully created your first dashboard with information related to your preferred EVM blockchains, all without needing any programming skills.
I'd love to encourage you to explore expanding its functionality. After all, it's the little steps that set big things in motion 🚀.
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: irwing@dfhcommunity.com
Youtube: youtube.com/@irwingtellomx
You can support my work here:
BTC: 34kXK9CpTJP1PyHKw2kUD2bt6rtGcG5CHY
EVM Address: 0x8B98F8Ff69d2A720120eD6C71A9Bc5072b8Eb46D
Solana: Ey9oVFHW79giacRZaKxigYjeihMsY7ox8jxc7Hp1sJmS