Full-Stack Web3 App: Dynamic.xyz Headless Wallet Auth with Message Signing & Verification

[minato32]

PR Description

This PR implements a full-stack Web3 application featuring headless wallet authentication via Dynamic.xyz, message signing, and backend signature verification.

Frontend (React 18+)

• Integrated Dynamic.xyz Embedded Wallet headless authentication (not the widget).

• Users can:

  • Authenticate and connect their wallet
  • View connected wallet address
  • Input custom messages
  • Sign messages and submit them to the backend
  • Maintain a local signing history (component state + localStorage)

• React architecture:

  • Functional components with hooks
  • Context API for wallet/session state management
  • Modular, reusable components

Backend (Node.js + Express)

• REST API endpoint: POST /verify-signature

• Accepts { message: string, signature: string }

• Uses ethers.js to:

  • Recover the signer from the signature
  • Validate the signature against the original message

• Returns { isValid: boolean, signer: string, originalMessage: string }

• Session and message history are stored in-memory (no DB required)

Features & Notes

• Supports signing multiple messages with local history

• Proper error handling and responsive feedback on the frontend

• Written with readable, modular, and extensible code

• Trade-offs:

  • No database; message history is local only
  • Headless MFA not implemented (bonus opportunity)

Setup Instructions

• Frontend:

cd frontend
npm install
npm start

• Backend:

cd backend
npm install
npm start

Test Coverage

• Included test suite for backend signature validation
• All tests passing

---

Focus of this PR:

• Clean React architecture and state management
• Correct Dynamic.xyz headless wallet integration
• Robust backend signature verification
• Intuitive user experience with signing history