Asset Utilities
Fetching data on Solana is notoriously complex. If you are doing anything at scale you likely have your own indexing, and metadata caching systems. All SolanaUI components are designed to be data source agnostic, however a number of utility functions are provided to help you get started with fetching assets and prices from Birdeye, Helius, and Metaplex UMI.
Types
Asset fetching functions have FetchAssetsArgs or FetchWalletAssetArgs arguments and return SolAsset, and all token based components have SolAsset props. Copy the types below to src/lib/types.ts or wherever is convenient.
Constants
SolanaUI comes with a few constants for common tokens, copy them to your src/lib/consts.ts file or wherever is convenient.
fetchAssets
SolanaUI provides three implementations of the fetchAssets function, pick your desired platform and copy the utility to your project.
Birdeye
A fast and reliable API for Solana token data. Sign up for an API key, and set in your .env.local file as NEXT_PUBLIC_BIRDEYE_API_KEY.
Copy the code below to lib/assets.ts or wherever is convenient, just be sure to update the component imports.
Use the fetchAssets function in your codebase like so.
Helius
Uses the DAS API for cached token metadata. Helius also offers a proprietary DAS extension for fungible tokens with prices. Sign up for an API key, and set in your .env.local file as NEXT_PUBLIC_HELIUS_API_KEY.
Copy the code below to lib/assets.ts, or wherever is convenient, just be sure to update the component imports.
Use the fetchAssets function in your codebase like so.
On-chain (Metaplex / Pyth)
Uses the Metaplex UMI framework for fetching assets via the DAS API along with Pyth for on-chain prices.
Copy the code below to lib/assets.ts, or wherever is convenient, just be sure to update the component imports.
Use the fetchAssets function in your codebase like so.
fetchWalletAssets
The fetchWalletAssets function takes a wallet address and returns an array of SolAsset objects. SolanaUI comes withfetchWalletAssets examples using Birdeye and Helius, but you can easily hook up your own data feed.
Birdeye
Copy the code below to lib/assets.ts, or wherever is convenient, just be sure to update the component imports.
Use the fetchWalletAssets function in your codebase like so.
Helius
Copy the code below to lib/assets.ts, or wherever is convenient, just be sure to update the component imports.
Use the fetchWalletAssets function in your codebase like so.
searchAssets
The searchAssets function takes a query param and returns matching SolAsset objects. SolanaUI comes with a singlesearchAssets example using Birdeye, but you can easily hook up your own data feed.
Copy the code below to lib/assets.ts, or wherever is convenient, just be sure to update the component imports.
Use the searchAssets function in your codebase like so.