ArtifactDisplay

Universal content renderer for blockchain artifacts (ordinals, inscriptions, files)

A universal content renderer for blockchain artifacts including ordinals, inscriptions, and files. This component supports a wide variety of content types including images, videos, audio, HTML, text, JSON, SVG, PDF, and 3D models. It uses the bitcoin-image library for blockchain URL processing.

Demo

Basic Artifact Display

Name: Demo NFT Artwork

Type: image/png

Size: 245760 bytes

Number: #12345

Demo Note: This demonstrates various artifact types and display modes using mock data. In a real application, artifacts would be loaded from blockchain sources like ordinals or inscriptions.

API Reference

This component is a custom implementation that handles various content types and media formats. For specific media types, consider using:

Native HTML elements (img, video, audio)
SVG elements for vector graphics
Canvas API for interactive content

Installation

npx bigblocks add artifact-display

Import

import { ArtifactDisplay, ArtifactType } from 'bigblocks';

Props

Prop	Type	Required	Default	Description
artifact	`ArtifactData`	Yes	-	The artifact data object containing source and metadata
size	`number`	No	-	Display size in pixels
maxWidth	`number`	No	-	Maximum width constraint
showControls	`boolean`	No	`false`	Whether to show controls/footer
allowZoom	`boolean`	No	`false`	Whether to allow zooming on the artifact
showMetadata	`boolean`	No	`false`	Whether to show artifact metadata
loading	`boolean`	No	`false`	Loading state indicator
error	`string`	No	-	Error message to display
className	`string`	No	-	Custom CSS classes
onClick	`(artifact: ArtifactData) => void`	No	-	Click handler for the artifact
onDownload	`(artifact: ArtifactData) => void`	No	-	Download handler
onShare	`(artifact: ArtifactData) => void`	No	-	Share handler
fallback	`React.ReactNode`	No	-	Custom fallback component for unsupported types

ArtifactData Interface

interface ArtifactData {
  /** The URL or blockchain reference to the artifact */
  src: string;
  /** Content type (MIME type) */
  contentType?: string;
  /** Artifact type (auto-detected if not provided) */
  type?: ArtifactType;
  /** Size in bytes */
  size?: number;
  /** Display name */
  name?: string;
  /** Description */
  description?: string;
  /** Transaction ID (for blockchain artifacts) */
  txid?: string;
  /** Output index */
  vout?: number;
  /** Inscription number */
  number?: string | number;
  /** Additional metadata */
  metadata?: Record<string, unknown>;
}

Artifact Types

enum ArtifactType {
  Image = "image",
  Video = "video",
  Audio = "audio",
  HTML = "html",
  Text = "text",
  JSON = "json",
  SVG = "svg",
  PDF = "pdf",
  Model = "model",
  Unknown = "unknown"
}

Basic Usage

import { ArtifactDisplay } from 'bigblocks';

export default function Example() {
  const artifact = {
    src: "https://ordfs.network/abc123_0",
    contentType: "image/png",
    name: "My NFT",
    txid: "abc123",
    vout: 0
  };

  return (
    <ArtifactDisplay 
      artifact={artifact}
      showControls={true}
      showMetadata={true}
    />
  );
}

Advanced Usage

With Event Handlers

import { ArtifactDisplay, ArtifactData } from 'bigblocks';

export default function InteractiveArtifact() {
  const handleClick = (artifact: ArtifactData) => {
    console.log('Artifact clicked:', artifact.name);
  };

  const handleDownload = (artifact: ArtifactData) => {
    // Custom download logic
    console.log('Downloading:', artifact.src);
  };

  const handleShare = (artifact: ArtifactData) => {
    // Share functionality
    navigator.share({
      title: artifact.name,
      url: artifact.src
    });
  };

  const artifact = {
    src: "ordfs://abc123_0",
    contentType: "video/mp4",
    name: "Bitcoin Documentary",
    description: "A short documentary about Bitcoin",
    size: 5242880, // 5MB
    txid: "abc123",
    vout: 0,
    metadata: {
      duration: "2:30",
      creator: "Satoshi"
    }
  };

  return (
    <ArtifactDisplay 
      artifact={artifact}
      size={400}
      maxWidth={800}
      showControls={true}
      showMetadata={true}
      allowZoom={true}
      onClick={handleClick}
      onDownload={handleDownload}
      onShare={handleShare}
    />
  );
}

With Custom Fallback

import { ArtifactDisplay } from 'bigblocks';

export default function ArtifactWithFallback() {
  const artifact = {
    src: "blockchain://unknown-format",
    type: ArtifactType.Unknown,
    name: "Unknown Artifact"
  };

  const customFallback = (
    <div className="p-4 border rounded">
      <p>This artifact type is not supported</p>
      <a href={artifact.src} download>Download Raw File</a>
    </div>
  );

  return (
    <ArtifactDisplay 
      artifact={artifact}
      fallback={customFallback}
    />
  );
}

Common Patterns

Gallery Display

import { ArtifactDisplay } from 'bigblocks';

export function ArtifactGallery({ artifacts }) {
  return (
    <div className="grid grid-cols-3 gap-4">
      {artifacts.map((artifact) => (
        <ArtifactDisplay
          key={artifact.txid}
          artifact={artifact}
          size={200}
          showControls={false}
          onClick={(art) => openLightbox(art)}
        />
      ))}
    </div>
  );
}

Loading States

import { ArtifactDisplay } from 'bigblocks';
import { useState, useEffect } from 'react';

export function AsyncArtifact({ txid }) {
  const [artifact, setArtifact] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchArtifact(txid)
      .then(setArtifact)
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, [txid]);

  return (
    <ArtifactDisplay
      artifact={artifact || { src: '' }}
      loading={loading}
      error={error}
      showControls={true}
    />
  );
}

Troubleshooting

Artifact Not Displaying

Ensure the src URL is accessible
Check that the contentType is correctly set or can be auto-detected
Verify blockchain URLs are properly formatted (e.g., ordfs://txid_vout)

Performance Issues

Use the size prop to constrain large images/videos
Implement lazy loading for galleries with many artifacts
Consider thumbnails for initial display

CORS Errors

Blockchain URLs may require proxy configuration
Ensure your bitcoin-image library is properly configured
Check browser console for specific CORS error messages

BitcoinImage - Optimized image display for blockchain sources
FileImport - Import files to create artifacts
QRCodeRenderer - Display artifact URLs as QR codes

API Reference

ArtifactType Enum

The component exports an ArtifactType enum for type-safe artifact type specification.

Type Detection

If type is not provided in the artifact data, the component will attempt to auto-detect based on:

The contentType MIME type
File extension in the src URL
Blockchain metadata

Notes for Improvement

Discrepancy Alert: The original prompt for this component incorrectly described it as displaying Bitcoin transactions, blocks, and scripts. The actual implementation is a media/content renderer for blockchain artifacts. If transaction/block/script display functionality is needed, consider creating separate components like TransactionDisplay, BlockDisplay, and ScriptDisplay.

ArtifactDisplay

Basic Artifact Display

On this page