example: htlc p2p board

examples/Readme.md

@@ -0,0 +1,59 @@
+# Mintlayer Connect SDK Examples
+
+This directory contains example applications demonstrating how to use the Mintlayer Connect SDK for various use cases.
+
+## Available Examples
+
+### 🌐 [Demo](./demo/)
+A comprehensive web-based demo showcasing all Mintlayer Connect SDK features including:
+- Wallet connection and management
+- Token transfers and NFT operations
+- Token issuance, minting, and burning
+- DEX order creation and filling
+- Delegation and staking operations
+- HTLC (Hash Time Locked Contracts) for atomic swaps
+- Bridge requests and transaction signing
+
+**Tech Stack:** Vanilla JavaScript + HTML + Webpack
+**Network Support:** Mainnet and Testnet
+
+### 🔄 [P2P Swap Board](./swap-board-ml-ml/)
+A peer-to-peer token swap application using HTLC atomic swaps for secure token exchanges:
+- Create and browse swap offers
+- Accept offers and execute atomic swaps
+- Real-time swap status tracking
+- Wallet integration with Mojito wallet
+
+**Tech Stack:** Next.js 14 + React + Tailwind CSS + SQLite/Prisma
+**Features:** Full-stack P2P swap marketplace with database persistence
+
+## Getting Started
+
+Each example includes its own setup instructions. Navigate to the specific example directory and follow the README instructions.
+
+### Prerequisites
+- Node.js 18+
+- pnpm (recommended) or npm
+- Mojito wallet extension (for wallet integration examples)
+
+### Quick Start
+```bash
+# Navigate to desired example
+cd demo  # or swap-board-ml-ml
+
+# Install dependencies
+pnpm install
+
+# Follow example-specific instructions in their README
+```
+
+## Example Structure
+
+- **demo/**: Interactive web demo with all SDK features
+- **swap-board-ml-ml/**: Full P2P swap application
+- **nodejs/**: (Coming soon) Node.js server examples
+- **react-app/**: (Coming soon) React application examples
+
+## Documentation
+
+For detailed SDK documentation and API reference, visit the main project documentation.

examples/swap-board-ml-ml/.env.example

@@ -0,0 +1,5 @@
+# Database
+DATABASE_URL="file:./dev.db"
+
+# Mintlayer Network (testnet or mainnet)
+NEXT_PUBLIC_MINTLAYER_NETWORK="testnet"

examples/swap-board-ml-ml/.gitignore

@@ -0,0 +1,50 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# database
+prisma/dev.db
+prisma/dev.db-journal
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+Thumbs.db

examples/swap-board-ml-ml/README.md

@@ -0,0 +1,156 @@
+# Mintlayer P2P Swap Board
+
+A minimal peer-to-peer token swap board for Mintlayer tokens using HTLC (Hash Time Locked Contracts) atomic swaps.
+
+## Features
+
+- **Create Swap Offers**: Post your intent to swap one Mintlayer token for another
+- **Browse & Accept Offers**: View available offers and accept the ones that interest you
+- **Atomic Swaps**: Secure token exchanges using HTLC contracts via mintlayer-connect-sdk
+- **Status Tracking**: Real-time monitoring of swap progress with clear status indicators
+- **Wallet Integration**: Connect with Mojito wallet for seamless transactions
+
+## Tech Stack
+
+- **Frontend**: Next.js 14 (App Router) + React + Tailwind CSS
+- **Backend**: Next.js API routes
+- **Database**: SQLite with Prisma ORM
+- **Blockchain**: Mintlayer Connect SDK for HTLC operations
+- **Package Manager**: pnpm (workspace integration)
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ 
+- pnpm
+- Mojito wallet extension
+
+### Installation
+
+1. Install dependencies:
+```bash
+cd examples/swap-board-ml-ml
+pnpm install
+```
+
+2. Set up the database:
+```bash
+pnpm db:generate
+pnpm db:push
+```
+
+3. Copy environment variables:
+```bash
+cp .env.example .env.local
+```
+
+4. Start the development server:
+```bash
+pnpm dev
+```
+
+5. Open [http://localhost:3000](http://localhost:3000) in your browser
+
+## Usage
+
+### Creating an Offer
+
+1. Navigate to `/create`
+2. Connect your Mojito wallet
+3. Fill in the swap details:
+   - Token to give (Token ID)
+   - Amount to give
+   - Token to receive (Token ID)
+   - Amount to receive
+   - Optional contact information
+4. Submit the offer
+
+### Accepting an Offer
+
+1. Browse offers at `/offers`
+2. Connect your wallet
+3. Click "Accept Offer" on any available offer
+4. You'll be redirected to the swap progress page
+
+### Monitoring Swaps
+
+1. Visit `/swap/[id]` to track swap progress
+2. The page shows:
+   - Current swap status
+   - Progress steps
+   - Next actions required
+   - HTLC details when available
+
+## Swap Process
+
+1. **Offer Created**: User posts swap intention
+2. **Offer Accepted**: Another user accepts the offer
+3. **HTLC Creation**: Creator creates initial HTLC with secret hash
+4. **Counterparty HTLC**: Taker creates matching HTLC
+5. **Token Claiming**: Both parties reveal secrets to claim tokens
+6. **Completion**: Swap finalized or manually refunded after timelock expires
+
+## Database Schema
+
+### Offer Model
+- Stores swap offers with token details and creator information
+- Tracks offer status (open, taken, completed, cancelled)
+
+### Swap Model
+- Manages active swaps linked to offers
+- Stores HTLC secrets, transaction hashes, and status updates
+- Tracks swap progress from pending to completion
+
+## API Endpoints
+
+- `GET/POST /api/offers` - List and create swap offers
+- `POST /api/swaps` - Accept an offer (creates new swap)
+- `GET/POST /api/swaps/[id]` - Get and update swap status
+
+## Development
+
+### Database Operations
+
+```bash
+# Generate Prisma client
+pnpm db:generate
+
+# Push schema changes
+pnpm db:push
+
+# Open database browser
+pnpm db:studio
+```
+
+### Building
+
+```bash
+# Build for production
+pnpm build
+
+# Start production server
+pnpm start
+```
+
+## Security Considerations
+
+- HTLC contracts provide atomic swap guarantees
+- Timelock mechanisms prevent indefinite locks - users must manually refund after expiry
+- No private keys are stored in the database
+- All transactions require wallet confirmation
+
+## Contributing
+
+This is a minimal example implementation. For production use, consider:
+
+- Enhanced error handling and validation
+- Comprehensive testing suite
+- Rate limiting and spam protection
+- Advanced UI/UX improvements
+- Mobile responsiveness optimization
+- Real-time notifications
+
+## License
+
+This project is part of the Mintlayer Connect SDK examples.

examples/swap-board-ml-ml/next.config.js

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    config.experiments = {
+      ...config.experiments,
+      asyncWebAssembly: true,
+    };
+    return config;
+  },
+}
+
+module.exports = nextConfig

examples/swap-board-ml-ml/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "swap-board-ml-ml",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "db:generate": "prisma generate",
+    "db:push": "prisma db push",
+    "db:studio": "prisma studio"
+  },
+  "dependencies": {
+    "@mintlayer/sdk": "workspace:*",
+    "@prisma/client": "^5.7.0",
+    "next": "14.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "prisma": "^5.7.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-config-next": "14.0.4",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.3.0"
+  }
+}

examples/swap-board-ml-ml/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/swap-board-ml-ml/prisma/schema.prisma

@@ -0,0 +1,45 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = "file:./dev.db"
+}
+
+model Offer {
+  id               Int      @id @default(autoincrement())
+  direction        String   // "tokenA->tokenB"
+  tokenA           String
+  tokenB           String
+  amountA          String
+  amountB          String
+  price            Float
+  creatorMLAddress String
+  contact          String?
+  status           String   @default("open") // open, taken, completed, cancelled
+  createdAt        DateTime @default(now())
+
+  swaps            Swap[]
+}
+
+model Swap {
+  id                    Int      @id @default(autoincrement())
+  offerId               Int
+  takerMLAddress        String
+  status                String   @default("pending") // pending, htlc_created, in_progress, completed, fully_completed, refunded
+  secretHash            String?
+  secret                String?
+  creatorHtlcTxHash     String?  // Creator's HTLC transaction ID
+  creatorHtlcTxHex      String?  // Creator's signed HTLC transaction hex
+  takerHtlcTxHash       String?  // Taker's HTLC transaction ID
+  takerHtlcTxHex        String?  // Taker's signed HTLC transaction hex
+  claimTxHash           String?  // Final claim transaction ID
+  claimTxHex            String?  // Final claim transaction hex (needed for secret extraction)
+  createdAt             DateTime @default(now())
+
+  offer                 Offer    @relation(fields: [offerId], references: [id])
+}