ADA Message Signing dApp

A decentralized application (dApp) for signing messages with Cardano wallets, featuring WalletConnect v2 support for cold wallet integration.

Features

• 🔐 Secure Message Signing: Sign any text message with your Cardano wallet
• 🌐 WalletConnect v2 Support: Connect cold wallets remotely via WalletConnect protocol
• 💎 Multi-Wallet Compatible: Supports Nami, Eternl, Flint, Typhon, GeroWallet, and NuFi
• 📱 Responsive Design: Works on desktop and mobile devices
• 🔍 Signature Verification: Built-in signature verification capabilities
• 📋 Easy Copy/Export: One-click copy for signatures and JSON export

Supported Wallets

• Nami - Popular Cardano browser wallet
• Eternl - Feature-rich Cardano wallet
• Flint - Lightweight Cardano wallet
• Typhon - Advanced Cardano wallet
• GeroWallet - Multi-chain wallet with Cardano support
• NuFi - Non-custodial Cardano wallet

Technology Stack

• Frontend: React 18 + TypeScript
• Build Tool: Webpack 5
• Cardano Integration:
  • @emurgo/cardano-serialization-lib-browser
  • lucid-cardano
  • @cardano-foundation/cardano-connect-with-wallet
• WalletConnect: @walletconnect/web3wallet v2
• Styling: CSS-in-JS with responsive design

Quick Start

Option 1: Demo Version (No Installation Required)

Open demo.html in your browser to see a working demonstration of the dApp interface. This version includes:

• Interactive wallet connection simulation
• Message signing interface
• Signature result display
• Responsive design

Option 2: Full Development Setup

1. Install Node.js (version 16 or higher):

   • Download from nodejs.org
   • Verify installation: node --version and npm --version

2. Clone the repository:

   git clone <repository-url>
   cd ada-sign-dapp

3. Install dependencies:

   npm install

4. Configure WalletConnect (Optional):

   • Get a project ID from WalletConnect Cloud
   • Update WALLETCONNECT_PROJECT_ID in src/utils/constants.ts

5. Start the development server:

   npm run dev

6. Open your browser and navigate to http://localhost:3000

Usage

Basic Message Signing

1. Connect Your Wallet:

   • Click on your preferred wallet from the list
   • Approve the connection in your wallet extension

2. Sign a Message:

   • Enter your message in the text area
   • Click "Sign Message" or press Ctrl+Enter
   • Approve the signing request in your wallet

3. View Results:

   • Copy the signature, public key, or full JSON
   • Use the signature for verification purposes

WalletConnect Integration

For cold wallet support via WalletConnect v2:

1. Ensure you have a valid WalletConnect project ID configured
2. The dApp will automatically handle WalletConnect sessions
3. Cold wallets can connect by scanning QR codes or deep links

Project Structure

ada-sign-dapp/
├── public/
│   └── index.html          # HTML template
├── src/
│   ├── components/         # React components
│   │   ├── WalletConnect.tsx
│   │   ├── MessageSigner.tsx
│   │   └── SignatureResult.tsx
│   ├── hooks/              # Custom React hooks
│   │   └── useCardano.ts
│   ├── utils/              # Utility functions
│   │   ├── cardano.ts
│   │   ├── walletconnect.ts
│   │   └── constants.ts
│   ├── types/              # TypeScript definitions
│   │   └── index.ts
│   ├── App.tsx             # Main application component
│   ├── index.tsx           # Application entry point
│   └── index.css           # Global styles
├── package.json            # Dependencies and scripts
├── tsconfig.json           # TypeScript configuration
├── webpack.config.js       # Webpack configuration
└── README.md              # This file

Development

Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build for production
• npm start - Start development server

Adding New Wallets

To add support for additional Cardano wallets:

1. Add the wallet identifier to SUPPORTED_WALLETS in constants.ts
2. Add the wallet icon URL to WALLET_ICONS
3. The wallet detection will automatically pick up wallets that implement the CIP-30 standard

Customization

• Styling: Modify src/index.css or component styles
• Wallet Icons: Update WALLET_ICONS in constants.ts
• Network Configuration: Adjust CARDANO_NETWORKS for testnet/mainnet
• WalletConnect Metadata: Update WALLETCONNECT_METADATA

Security Considerations

• Message Signing: All signing operations are performed by the connected wallet
• No Private Keys: This dApp never handles or stores private keys
• Local Storage: Only wallet connection preferences are stored locally
• HTTPS Required: Use HTTPS in production for security

Browser Compatibility

• Chrome/Chromium: Full support
• Firefox: Full support
• Safari: Full support
• Edge: Full support
• Mobile Browsers: Responsive design with touch support

Troubleshooting

Common Issues

1. Wallet Not Detected:

   • Ensure the wallet extension is installed and enabled
   • Refresh the page after installing a wallet
   • Check if the wallet supports CIP-30 standard

2. Connection Failed:

   • Disable other wallet extensions temporarily
   • Clear browser cache and cookies
   • Try connecting in an incognito/private window

3. Signing Failed:

   • Ensure the wallet is unlocked
   • Check if the wallet has sufficient permissions
   • Verify the message format is supported

Development Issues

1. TypeScript Errors:

   • Run npm install to ensure all dependencies are installed
   • Check that all required type definitions are available

2. Build Errors:

   • Clear node_modules and reinstall: rm -rf node_modules && npm install
   • Ensure Node.js version compatibility (Node 16+ recommended)

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Make your changes and test thoroughly
4. Commit your changes: git commit -m 'Add feature'
5. Push to the branch: git push origin feature-name
6. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Cardano Foundation for the excellent developer tools
• Emurgo for the Cardano serialization library
• WalletConnect for the v2 protocol implementation
• Cardano Community for wallet standards and best practices

Support

For support and questions:

• Create an issue in the GitHub repository
• Check the troubleshooting section above
• Review Cardano developer documentation

---

Note: This dApp is for educational and development purposes. Always verify signatures independently in production applications.