MetaLens Commenting System

MetaLens is a universal commenting system that enables comments on any context type - URLs, transactions, geohashes, ISBNs, and more.

Overview

MetaLens provides a complete commenting solution with:

Zero-cost transactions via Droplit integration
Full B:// and MAP protocol support
Real-time updates
Moderation capabilities
Multiple context types

Supported Context Types

url - Web pages and resources
tx - Bitcoin transactions
upc - Product barcodes
geohash - Geographic locations
ipfs - IPFS content hashes
isbn - Books and publications
doi - Digital object identifiers

Basic Usage

Simple Comments Section

import { MetaLensProvider, MetaLensComments } from 'bigblocks';

function MyPage() {
  return (
    <MetaLensProvider>
      <MetaLensComments
        context="url"
        value="https://example.com/article"
        showForm={true}
      />
    </MetaLensProvider>
  );
}

Comment Count Badge

Display comment counts inline with content:

<MetaLensBadge 
  context="url" 
  value="https://example.com/article" 
/>

Reactions

Add likes and reactions to any content:

<MetaLensReactions 
  context="url" 
  value="https://example.com/article" 
/>

Advanced Features

Threaded Discussions

Enable nested comment threads:

<MetaLensThread 
  context="isbn" 
  value="978-0123456789"
  maxDepth={3}
  sortBy="newest"
/>

Embedded Comments

Lightweight comment widget:

<MetaLensEmbed 
  context="geohash" 
  value="9q8yyk8yu"
  height={400}
  theme="light"
/>

Custom Styling

MetaLens components support custom styling:

<MetaLensComments
  context="tx"
  value="abc123..."
  className="custom-comments"
  commentClassName="custom-comment"
  formClassName="custom-form"
/>

Configuration

Provider Options

<MetaLensProvider
  config={{
    apiUrl: '/api/metalens',
    droplitUrl: 'https://droplit.example.com',
    moderationEnabled: true,
    realTimeUpdates: true,
  }}
>
  {children}
</MetaLensProvider>

Comment Options

<MetaLensComments
  context="url"
  value={url}
  showForm={true}
  showAvatar={true}
  showTimestamp={true}
  sortBy="newest"
  pageSize={20}
  onComment={(comment) => console.log('New comment:', comment)}
  onError={(error) => console.error('Comment error:', error)}
/>

Integration Examples

E-commerce Product Comments

function ProductPage({ productUPC }) {
  return (
    <MetaLensProvider>
      <div className="product-details">
        <h1>Product Name</h1>
        <MetaLensBadge context="upc" value={productUPC} />
      </div>
      
      <div className="product-comments">
        <MetaLensComments
          context="upc"
          value={productUPC}
          showForm={true}
        />
      </div>
    </MetaLensProvider>
  );
}

Transaction Explorer Comments

function TransactionDetails({ txid }) {
  return (
    <MetaLensProvider>
      <div className="tx-info">
        <h2>Transaction {txid}</h2>
        <MetaLensReactions context="tx" value={txid} />
      </div>
      
      <MetaLensThread
        context="tx"
        value={txid}
        maxDepth={2}
      />
    </MetaLensProvider>
  );
}

Location-Based Comments

function LocationComments({ latitude, longitude }) {
  const geohash = encodeGeohash(latitude, longitude);
  
  return (
    <MetaLensProvider>
      <MetaLensComments
        context="geohash"
        value={geohash}
        showForm={true}
        placeholder="Share your thoughts about this location..."
      />
    </MetaLensProvider>
  );
}

Zero-Cost Transactions

MetaLens uses Droplit integration for gasless operations:

Comments are created without requiring BSV balance
Droplit handles transaction fees
Comments are still recorded on-chain
Full ownership and immutability preserved

Data Structure

MetaLens comments follow the MAP protocol:

{
  "app": "metalens",
  "type": "comment",
  "context": "url",
  "contextValue": "https://example.com",
  "content": "This is a comment",
  "timestamp": 1704067200,
  "author": "1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa"
}

Best Practices

Choose appropriate context types - Use the most specific context for your use case
Enable moderation - For public-facing applications
Implement rate limiting - Prevent spam
Cache comment counts - For performance
Handle errors gracefully - Network issues may occur

API Integration

Backend Setup

// api/metalens/comments/route.ts
import { getMetaLensComments } from 'bigblocks/metalens';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const context = searchParams.get('context');
  const value = searchParams.get('value');
  
  const comments = await getMetaLensComments({
    context,
    value,
    limit: 50,
    offset: 0,
  });
  
  return Response.json(comments);
}

Creating Comments

import { createMetaLensComment } from 'bigblocks/metalens';

export async function POST(request: Request) {
  const { context, value, content, author } = await request.json();
  
  const comment = await createMetaLensComment({
    context,
    value,
    content,
    author,
    droplit: true, // Use gasless transaction
  });
  
  return Response.json(comment);
}

Next Steps

Explore Component Examples for more patterns
Learn about Droplit Integration
Read the MAP Protocol Guide

MetaLens Commenting System

On this page