Coffer

A professional web application for combining Chia offers with WASM-powered validation

✅ Status: Production Ready

Simple Offer Combining: Coffer provides a clean, minimal interface for combining multiple Chia offers using WASM-powered validation and global clipboard integration.

About

Coffer is a modern single-page web application that leverages the Chia Wallet SDK's WASM bindings to provide offer combination directly in your browser.

Key Features:

• Professional WASM Validation: Uses Chia Wallet SDK for accurate offer validation
• Flexible Input Options: Paste offer1... strings, 44-character offer IDs, or Dexie/MintGarden offer URLs
• API Integration: Automatically fetches full offers from Dexie and MintGarden APIs when given offer IDs or URLs
• Global Clipboard Integration: Paste offers anywhere on the page, copy combined offers with Ctrl+C
• Real-time Validation: Instant feedback with validation status indicators (✅/❌)
• Duplicate Detection: Automatically prevents adding the same offer multiple times
• Visual Feedback: Button animations show success/error states for clipboard operations
• Clean, Minimal UI: Simple input fields with clear validation states

The application uses the chia-wallet-sdk-wasm package for offer validation and combination.

Tech Stack

This project is implemented as a single-page static client side website. It uses Deno and Preact.

Build Process

• Uses standard Deno + Preact project structure
• Development Server: Custom TypeScript transpilation with esbuild for browser compatibility
• Import Resolution: Custom import mapping system for npm package resolution in browser
• Hot reloading for development
• WASM Integration: Full integration with chia-wallet-sdk-wasm package for browser use
• Production builds: Optimized static builds with esbuild and Deno plugins

Styling

• CSS Classes: Migrated from styled-components to standard CSS classes due to browser compatibility issues
• Global CSS: Uses CSS custom properties (variables) for consistent theming
• Minimalist design aesthetic with simple, effective styles
• Responsive design for desktop and mobile

Interface Design

• Global Paste Detection: Simply paste any Chia offer string anywhere on the page - it's automatically detected and added
• Flexible Input Fields:
  • Paste offer1... strings directly
  • Paste 44-character offer IDs (automatically fetched from APIs)
  • Paste Dexie or MintGarden offer URLs (ID extracted and fetched)
  • Real-time validation status (✅/❌)
  • Individual remove buttons (🗑️) for each offer
  • Clear error messages for invalid or duplicate offers
• Instant Validation: Each offer is validated immediately using WASM SDK
• Duplicate Prevention: Duplicate offers show validation errors instead of being added silently

Error Handling

• Invalid offer errors: Display detailed error in expanded box below the offer's input row
• Automatic retry when offer input changes to check if error is resolved
• Unexpected application errors: Display in error log at bottom of page
• Client-side logging: Also appears in the error display log
• Error display log hidden by accordion until opened by user or error occurs
• Strong ESLint settings and strict TypeScript compilation rules
• Comprehensive integration tests for all Wallet SDK interactions

Global Clipboard Integration

• Universal Copy: Press Ctrl+C (or Cmd+C on Mac) anywhere on the page to copy the combined offer
• Smart Context Detection: Respects normal copy behavior in input fields and text selections
• Instant Feedback: Button animations confirm successful clipboard operations
• Paste Anywhere: Paste valid offer strings, offer IDs, or URLs anywhere on the page for instant detection
• Duplicate Prevention: Automatically prevents adding the same offer twice with clear error messages

Deployment

• Builds to static files for flexible deployment options
• Support for GitHub Pages deployment
• Support for custom domain deployment

Debug Mode

For development and troubleshooting, Coffer includes a hidden application log that can be enabled via the browser console:

toggleDebug(); // Enable/disable the application log

• The application log is hidden by default for normal users
• When enabled, it displays errors, warnings, and info messages at the bottom of the page
• Toggle it on/off as needed during development or troubleshooting
• The console will show a tip message on page load about this feature

Implementation Status

✅ Production Ready: Simple Offer Combining

Core Functionality

• Professional WASM Validation: Uses Chia Wallet SDK for offer validation and combining
• Flexible Input Options: Accepts offer strings, offer IDs, and marketplace URLs
• API Integration: Fetches full offers from Dexie and MintGarden APIs
• Global Clipboard: Universal paste detection and Ctrl+C copy functionality
• Real-time Validation: Instant validation with clear status indicators
• Duplicate Detection: Prevents duplicate offers with clear error messages

User Interface

• Clean Input Fields: Simple, minimal interface with validation states
• Button Animations: Happy/sad animations for clipboard operations
• Error Messages: Clear error display for invalid or duplicate offers
• Responsive Design: Optimized for desktop and mobile devices
• Copy to Clipboard: One-click copying of combined offers

🧪 Comprehensive Testing

✅ Test Suite (WASM + API + Browser)

• WASM Offer Validation: Proper offer validation and combining using Chia SDK
• API Integration: Fetching offers from Dexie and MintGarden APIs
• Duplicate Detection: Validation prevents duplicate offers from being added
• User Interface: Button animations, clipboard operations, input validation
• Network Resilience: API failure handling with graceful fallbacks

Test Results:

✅ All tests passing
- Offer validation with WASM SDK
- API fetching from Dexie and MintGarden
- Duplicate offer detection
- E2E web UI tests

🚀 Technical Architecture

WASM Integration

• Chia Wallet SDK: Uses official chia-wallet-sdk-wasm package for offer validation
• Browser-Compatible: Full WASM integration for client-side offer combining
• No Backend Required: Entirely static, client-side application

API Integration

• Dexie API: Fetches full offers from offer IDs via Dexie API
• MintGarden API: Fallback for fetching offers via MintGarden API
• URL Support: Extracts offer IDs from Dexie and MintGarden URLs

Modern UX Design

• Zero-Click Interface: No buttons needed - paste anywhere, copy with Ctrl+C
• Flexible Inputs: Accept offer strings, IDs, or URLs
• Visual Feedback: Button animations and validation indicators
• Mobile Optimized: Touch-friendly responsive design

Getting Started

🚀 Ready to Use

Coffer is production-ready with WASM validation, API integration, and clipboard functionality.

Development

# Install dependencies
deno install

# Start development server with hot reloading
deno task dev

# Open browser to http://localhost:8000

Git Hooks (Optional)

Install pre-commit hooks to automatically run checks before each commit:

deno task hooks:install

This will run formatting, linting, and build checks automatically before each commit.

Development Workflow

Run these commands to ensure code quality:

• Auto-formatting: deno task format:fix - automatically fixes code style issues
• Linting: deno task lint - checks for code quality issues
• Build verification: deno task build - ensures the project builds successfully

Run all checks at once:

deno task format && deno task lint && deno task test:integration && deno task build

Using Coffer

Adding Offers

You can paste offers in three ways:

1. Full Offer String: Paste the complete offer1... string
2. Offer ID: Paste a 44-character base64 offer ID (automatically fetched from APIs)
3. Marketplace URL: Paste a Dexie or MintGarden offer URL (ID extracted and fetched)

Methods:

• Paste directly into an input field
• Paste anywhere on the page (global paste detection)

Managing Offers

• Validation Status: Each offer shows ✅ (valid) or ❌ (invalid/duplicate)
• Error Messages: Invalid or duplicate offers display clear error messages
• Remove Offers: Click the 🗑️ button to remove any offer
• Reset: Use the "♻️ Reset" button to remove all offers

Exporting Combined Offers

• Quick Copy: Press Ctrl+C (or Cmd+C) anywhere on the page
• Manual Copy: Click the 📋 button next to the combined offer
• Visual Feedback: Button animations confirm success/error for clipboard operations

Testing

# Run test suite
deno test tests/ --allow-all

# Test includes:
# - WASM offer validation and combining
# - API integration (Dexie and MintGarden)
# - Duplicate offer detection
# - E2E web UI tests

Production Build

# Build optimized static files
deno task build

# Deploy ./dist folder to any static hosting provider

Simple Chia Offer Combining

Coffer provides a clean, minimal interface for combining multiple Chia offers:

Core Capabilities:

• WASM Validation: Uses official Chia Wallet SDK for offer validation and combining
• Flexible Inputs: Accepts offer strings, offer IDs, or marketplace URLs
• API Integration: Automatically fetches offers from Dexie and MintGarden APIs
• Duplicate Prevention: Clear error messages prevent adding the same offer twice
• Real-time Validation: Instant feedback with validation status indicators
• Cross-Platform: Works seamlessly on Windows, macOS, and Linux browsers

Technical Architecture:

1. WASM Integration → Uses chia-wallet-sdk-wasm for client-side validation
2. API Fetching → Retrieves full offers from Dexie and MintGarden endpoints
3. Global Paste Detection → Paste anywhere on the page for instant offer addition
4. Static Deployment → No backend required, entirely client-side
5. Modern UI → Clean, minimal interface with clear validation states

✅ Production Ready

Coffer provides a straightforward solution for Chia offer combining:

• WASM Powered: Uses official Chia Wallet SDK for accurate validation
• API Integration: Fetches offers from Dexie and MintGarden marketplaces
• User-Friendly: Clear validation states and error messages
• Comprehensive Testing: E2E tests validate all functionality
• Static Deployment: Self-contained application deployable anywhere

Coffer simplifies Chia offer combining with a clean interface and robust validation.

---

Resources

• Chia Wallet SDK WASM - WASM bindings used by Coffer
• Dexie API - Offer lookup by ID
• MintGarden API - Fallback offer lookup
• Chia Offers Guide - Official documentation