Token Image

Installation

Usage

Basic Usage

import { TokenImage } from "@/components/soldevkit-ui/token/token-img";

export default function Example() {
  return (
    <div className="flex items-center gap-4">
      {/* By symbol */}
      <TokenImage tokenAddressOrSymbol="SOL" size={48} />

      {/* By address */}
      <TokenImage tokenAddressOrSymbol="EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v" size={48} />
    </div>
  );
}

With Custom Styling

import { TokenImage } from "@/components/soldevkit-ui/token/token-img";

export default function Example() {
  return <TokenImage tokenAddressOrSymbol="USDC" size={64} className="border-2 border-primary" alt="USDC Token" />;
}

Features

• Token Resolution: Supports both token symbols (SOL, USDC) and mint addresses
• Jupiter Integration: Uses Jupiter's verified token list for accurate metadata
• Loading States: Shows loading spinner while fetching token data
• Fallback Handling: Displays placeholder icon when token image is unavailable
• Customizable Size: Configurable image size with responsive design
• Lazy Loading: Optimized image loading for better performance
• Error Handling: Graceful fallback for invalid or missing tokens

Props

Token Support

The component supports:

• Popular Symbols: SOL, USDC, USDT, and other verified tokens
• Mint Addresses: Full Solana token mint addresses
• Jupiter Verified: Only tokens from Jupiter's verified token list

Dependencies

{
  "lucide-react": "^0.400.0"
}

Data Source

Token metadata is fetched from Jupiter's verified token list API:

• Endpoint: https://tokens.jup.ag/tokens?tags=verified
• Updates: Real-time token information
• Verification: Only verified and trusted tokens

Built for the Solana ecosystem. Contributions welcome.