How to build a Solana Portfolio Viewer with Next.js and Helius's DAS API
In this tutorial, we'll build a front-end application to display the contents of a Solana wallet using the DAS API from Helius. We'll showcase various token types and their detailed information, including metadata, collection info, and fungible token prices.
This tutorial will guide you through the process of building something similar to Galleria, by breaking down the necessary steps involved.
- Helius API key.
- Familiarity with React.
- Experience with Next.js.
Overview of Technologies Used
- Next.js: A React framework for building server-side rendered applications.
- DAS API from Helius: A comprehensive API for accessing Solana token data.
- Vercel: A platform for hosting Next.js applications.
- Tailwind CSS: A utility-first CSS framework for styling.
Setting up the Project
The DAS API
The DAS API is an open-source specification and system offered by Helius. The API provides a simple interface for interacting with digital assets on the Solana blockchain. It supports various token types, including fungible tokens, regular NFTs, and compressed NFTs, and offers features like indexing off-chain metadata.
API Key Setup
To obtain a Helius API key, visit Helius Developer Portal. Here's how to get started:
- Create an account using a Solana wallet, Google account, or GitHub account.
- Once logged in, you'll be prompted to create an API key.
- Store this key securely, as we will be using this to make our API calls.
Building the Next.js Application
Step 1: Setting Up Your Next.js Project
Create a New Next.js App with Tailwind
Use the following configurations:
This will allow us to use Tailwind CSS for styling as well as use the new App router.
Step 2: Creating Components
Creating a folder for components:Create a
components folder in the app directory to maintain an organized structure.
- SearchBar Component (
- This component handles user input for wallet addresses.
- It utilizes the
useStatehook for managing the address state and
useRouterfor navigation upon form submission.
- The form is styled using Tailwind CSS classes for a sleek look.
- TokenCard Component (
- Designed to display token information.
- Conditionally renders different layouts for fungible and non-fungible tokens.
- Utilizes the
This component parses the token data from the API and shows relevant information on each token card. In the example below, we show some basic information such as the image, symbol, amount, and value of each fungible token. For Non-fungible Tokens, we show the image, name, description, and attributes. You can extract any of the information that is provided by the API and display this on the card. An example would be to show compression-specific information for cNFTs or inscription info for inscribed assets. To explore more about the specific information you can work with you can check out the DAS docs: https://docs.helius.dev/compression-and-das-api/digital-asset-standard-das-api
Step 3: Fetching Data from DAS
We'll use the
searchAssets method from the DAS API to fetch token data. This method is flexible, allowing us to specify criteria like wallet addresses and token types.
- Make a
libfolder in the app directory for the API call.
- Create a
searchAssets.tsfile inside it.
API Call Function (
- This function fetches tokens based on the wallet address.
- It handles potential errors and logs responses for debugging
- Set up the token type
We will need to set up a type for the response from the DAS API. This is good practice when working with Typescript. You can create a folder called types and create a file called
Step 4: Displaying Token Info
We'll categorize the API response into fungible and non-fungible tokens. Using the Token Card component, these tokens will be displayed. A toggle button allows users to switch between the two token types.
Integrating Components on the Search Page
- Search Page (pages/index.ts)
- The landing page features a Search Bar where users can enter wallet addresses.
- It's styled with Tailwind CSS for a clean and responsive design.
Setting Up the Token Page
We'll utilize dynamic routes in Next.js for individual wallet addresses. This enhances user experience by allowing easy navigation and URL sharing.
- Set up a directory called
[wallet], the brackets enable dynamic routing. Once done, create a file called
page.tsxthat will contain all the business logic for all dynamically loaded pages
- Token Page Setup (
- This page displays tokens associated with the wallet address in the URL.
- It makes an API call to fetch token data and displays it using the Token Card component.
After all of this has been set up your project directory should look like this:
Step 5: Styling the Application
Tailwind CSS will be our styling framework. Its utility-first approach enables us to quickly style components while ensuring a consistent and responsive design. You can use Tailwind to customize your application in any way you wish.
Step 6: Testing the Application
- Run your Next.js app:
- Test by entering different wallet addresses and ensure the correct data is displayed.
We will deploy our application using Vercel. Vercel offers free hosting and provides valuable analytics and insights, making it an ideal choice for hosting Next.js applications. You can set this up at https://vercel.com/.
Congratulations on finishing this tutorial! We hope that you found it informative. The DAS API is a very powerful and speedy tool that enables you to retrieve token data from the chain. This portfolio viewer is an excellent example of what the API is capable of. We hope that you can take the basic site that was created and turn it into something great. If you have any questions, please do not hesitate to join our Discord and ask us directly!
You can find the complete code here: https://github.com/helius-labs/galleria
Further Learning Resources
To deepen your understanding of Next.js, Solana blockchain, and API integration, explore these resources:
This guide provides a solid foundation for building blockchain-based applications with Next.js and interacting with the Solana blockchain using the DAS API.