Compressed NFT Viewer

View Compressed NFT

Lookup and display information of compressed NFTs on Solana

Installation

Install dependencies

Start by installing required Metaplex Bubblegum dependencies

pnpm add @solana/web3.js @solana/wallet-adapter-react @metaplex-foundation/umi-bundle-defaults @metaplex-foundation/umi-signer-wallet-adapters @metaplex-foundation/mpl-bubblegum @metaplex-foundation/umi

Add Wallet Provider

Make sure you have added the Wallet Provider to your application. If not, follow the steps in the Connect Wallet Button guide first.

Add Compressed NFT Viewer

pnpm dlx shadcn@canary add https://www.murphyai.dev/r/compressed-nft-viewer.json

Basic Usage

import { CompressedNFTViewer } from "@/components/ui/murphy/compressed-nft-viewer";

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

Features

Dual Search Methods: Search by Asset ID or Tree Address + Leaf Index
Tabbed Interface: Clean tabbed UI for different search methods
Compressed NFT Details: Display comprehensive compressed NFT information
Metadata Loading: Automatic metadata fetching and display
Tree Information: Show merkle tree details and leaf position
Owner Information: Display current owner and creator details
Attributes Display: Show NFT attributes and properties
Explorer Links: Direct links to view assets and trees on Solana explorers
Copy to Clipboard: Easy copying of addresses and IDs
Network Detection: Automatically detects devnet/mainnet
Error Handling: Comprehensive error handling with retry capability
CORS Fallback: Graceful handling of metadata CORS issues

Advanced Usage

You can pre-populate the form with known values:

export default function MyPage() {
  return (
    <div>
      <h1 className="text-xl font-bold mb-2">View Compressed NFT</h1>
      <CompressedNFTViewer
        className="max-w-md"
        assetId="YourCompressedNFTAssetID"
      />
    </div>
  );
}

Or search by tree and leaf index:

export default function MyPage() {
  return (
    <div>
      <h1 className="text-xl font-bold mb-2">View Compressed NFT</h1>
      <CompressedNFTViewer
        className="max-w-md"
        treeAddress="YourMerkleTreeAddress"
        leafIndex={0}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`assetId`	`string`	`undefined`	Pre-populate asset ID field
`treeAddress`	`string`	`undefined`	Pre-populate tree address field
`leafIndex`	`number`	`undefined`	Pre-populate leaf index field
`className`	`string`	`undefined`	Additional CSS classes