Token Metadata Viewer

Installation

Basic Usage

import { TokenMetadataViewer } from "@/components/ui/murphy/token-metadata-viewer";

export default function MyPage() {
  return (
    <div>
      <h1 className="text-xl font-bold mb-2">View Token Metadata</h1>
      <TokenMetadataViewer className="max-w-md" />
    </div>
  );
}

Features

• Metaplex Token-Metadata Standard: Uses the official Metaplex Token-Metadata standard
• Comprehensive Metadata Display: Shows all on-chain metadata including name, symbol, URI, creators, and collection info
• Network Detection: Automatically detects and adapts to devnet/mainnet
• Copy to Clipboard: Easy copying of addresses and other data
• Explorer Integration: Direct links to view tokens in Solana Explorer or Solscan
• Error Handling: Robust error handling with retry capability
• Multi-stage UI: Clean interface with loading, success, and error states

Advanced Usage

You can specify a mint address to view metadata for a specific token:

export default function MyPage() {
  return (
    <div>
      <h1 className="text-xl font-bold mb-2">NFT Metadata</h1>
      <TokenMetadataViewer
        className="max-w-md"
        mintAddress="DUSTawucrTsGU8hcqRdHDCbuYhCPADMLM2VcCb8VnFnQ"
      />
    </div>
  );
}

Props

Displayed Information

The component displays comprehensive metadata information:

Basic Information

• Name: Token name from metadata
• Symbol: Token symbol
• Mint Address: The mint address of the token
• Update Authority: Address authorized to update metadata

Metadata Details

• URI: Link to off-chain metadata JSON
• Seller Fee Basis Points: Royalty percentage for secondary sales
• Primary Sale Happened: Whether initial sale has occurred
• Is Mutable: Whether metadata can be updated

Collection (if applicable)

• Collection Address: Parent collection mint address
• Verified: Whether collection verification is confirmed

Creators (if applicable)

• Creator Addresses: List of creator wallet addresses
• Shares: Percentage share for each creator
• Verified Status: Verification status for each creator

Usage Examples

View NFT Metadata

<TokenMetadataViewer 
  mintAddress="CKfatsPMUf8SkiURsDXs7eK6GWb4Jsd6UDbs7twMCWxo"
  className="max-w-lg"
/>

Search Any Token

<TokenMetadataViewer className="w-full max-w-2xl" />

Technical Notes

• Uses Metaplex UMI framework for blockchain interactions
• Fetches metadata directly from on-chain program accounts
• Supports both fungible tokens and NFTs
• Automatically handles network switching between devnet and mainnet
• Implements proper error boundaries and retry logic

Performance

• Efficient data fetching with minimal RPC calls
• Caches metadata to prevent unnecessary re-fetching
• Optimized rendering with skeleton loading states
• Responsive design works on all screen sizes

Notes

• The component fetches metadata from the Metaplex Token-Metadata program
• Works with any token that has metadata created via Metaplex standards
• For tokens without metadata, appropriate error messages are displayed
• URI links may require CORS configuration for off-chain metadata viewing

Related Components

• Mint NFT Form - Create NFTs with metadata
• Get NFT Form - View NFT details
• Create Collection Form - Create NFT collections
• Update Collection Form - Update collection metadata