Package Exports

waku-trollbox
waku-trollbox/dist/index.esm.js
waku-trollbox/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (waku-trollbox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

waku-trollbox

A decentralized chat component built with React, Web3 wallet integration, and Waku messaging protocol.

Features

🧌 Real-time decentralized messaging via Waku protocol
🔗 Web3 wallet integration (MetaMask and compatible wallets)
🏷️ ENS name resolution for user display names
✅ Message signing and verification
🎨 Fully customizable with Tailwind CSS
📱 Responsive design with resizable chat window
🔒 Privacy-focused with no central server dependency

Installation

npm install waku-trollbox

Usage

import { Trollbox } from 'waku-trollbox';

function App() {
  return (
    <div className="App">
      <Trollbox />
    </div>
  );
}

Requirements

React 16.8+
Tailwind CSS (for styling)
A Web3 wallet (MetaMask recommended)

Styling

The component uses Tailwind CSS classes. Make sure Tailwind CSS is installed and configured in your project.

Configuration

The trollbox automatically generates a unique content topic based on your domain, ensuring isolated chat rooms per website.

API

Services

The package exports several services that can be used independently:

import { walletService, wakuService, ensService } from 'waku-trollbox';

// Connect wallet
const wallet = await walletService.connectWallet();

// Send a message
await wakuService.sendMessage({
  id: 'unique-id',
  text: 'Hello world!',
  timestamp: Date.now(),
  author: 'username'
});

// Resolve ENS name
const displayName = await ensService.getDisplayName(address, fallbackFormatter);

License

MIT