Web3 Message Signer & Verifier

A full-stack Web3 application that allows users to sign custom messages with their wallets and verify signatures on the backend.

🚀 Features

• Dynamic.xyz Headless Wallet Integration: Secure wallet authentication without widgets
• Custom Message Signing: Sign any message with your connected wallet
• Backend Verification: Verify signatures and recover signer addresses using ethers.js
• Message History: Persistent history of signed messages with verification status
• Beautiful UI: Modern glassmorphic design with smooth animations
• Responsive Design: Works seamlessly on desktop and mobile

🏗️ Architecture

Frontend (React + TypeScript)

• React 18+ with TypeScript
• Dynamic.xyz SDK for headless wallet integration
• Tailwind CSS with custom design system
• shadcn/ui components
• Local storage for message persistence

Backend (Node.js + Express)

• Express.js REST API
• ethers.js for signature verification
• CORS enabled for cross-origin requests
• In-memory storage for demonstration

🛠️ Setup Instructions

Prerequisites

• Node.js 18+ and npm
• Git

1. Clone and Install Frontend

# Clone the repository
git clone <repository-url>
cd <project-name>

# Install dependencies
npm install

# Start the development server
npm run dev

The frontend will run on http://localhost:8080

2. Setup and Start Backend

# Navigate to server directory
cd server

# Install dependencies
npm install

# Start the backend server
npm start

The backend API will run on http://localhost:3001

3. Configure Dynamic.xyz

1. Sign up at Dynamic.xyz
2. Create a new project and get your Environment ID
3. Update src/components/WalletProvider.tsx with your actual Environment ID:

environmentId: 'your_actual_environment_id_here'

📋 API Endpoints

Backend REST API

Health Check

GET /health

Returns server status and timestamp.

Verify Signature

POST /verify-signature
Content-Type: application/json

{
  "message": "Your custom message",
  "signature": "0x1234..."
}

Returns:

{
  "isValid": true,
  "signer": "0xabc123...",
  "originalMessage": "Your custom message"
}

Get All Signatures (Debug)

GET /signatures

Returns all stored signatures for debugging.

🎯 Usage Flow

1. Connect Wallet: Use Dynamic.xyz headless authentication
2. Enter Message: Type any custom message you want to sign
3. Sign Message: Wallet will prompt for signature
4. Auto Verification: Message is sent to backend for verification
5. View History: All signed messages are stored locally and displayed

🧪 Testing

Run the test suite:

npm test

🚀 Deployment

Frontend (Vercel)

1. Push to GitHub
2. Connect repository to Vercel
3. Deploy automatically

Backend (Render/Railway)

1. Create new web service
2. Connect to the /server directory
3. Set start command: npm start
4. Update frontend API URLs to production backend

🔒 Security Considerations

• Messages are signed client-side with user's private key
• Backend only receives messages and signatures (never private keys)
• Signature verification uses standard ethers.js verification
• No sensitive data is stored on the backend
• All verification is cryptographically secure

🏗️ Technical Trade-offs & Improvements

Current Implementation

• ✅ In-memory storage for simplicity
• ✅ Frontend-only message history
• ✅ Direct API calls (no API client abstraction)

Potential Improvements

• 🔄 Add database for persistent backend storage
• 🔄 Implement API client with retry logic and error handling
• 🔄 Add message encryption for sensitive content
• 🔄 Implement user authentication and message ownership
• 🔄 Add message templates and categories
• 🔄 Implement signature batching for multiple messages
• 🔄 Add multi-chain support (currently Ethereum only)
• 🔄 Add rate limiting and request validation

🎨 Design System

The app uses a custom crypto-native design system with:

• Dark theme with purple/blue gradients
• Glassmorphic cards with backdrop blur
• Semantic color tokens in HSL format
• Smooth animations and hover effects
• Responsive typography scale

📦 Tech Stack

Frontend:

• React 18+
• TypeScript
• Tailwind CSS
• Dynamic.xyz SDK
• shadcn/ui
• Vite

Backend:

• Node.js
• Express.js
• ethers.js
• CORS

📄 License

MIT License - see LICENSE file for details.