Free Ethereum Address EIP-55 Checksum Converter & Validator

Project Overview

A lightweight, single-file browser application designed to convert standard hexadecimal Ethereum addresses into their EIP-55 checksummed, mixed-case equivalents. The tool acts as a critical validation utility for developers and cryptocurrency users, helping to prevent catastrophic transaction errors.

Technical Specification

1. Core Functionality

• Input Validation: Automatically detects if the input is a valid 42-character Ethereum address (starts with 0x).
• Checksum Conversion: Implements the EIP-55 algorithm using a lightweight Keccak-256 implementation (via CDN library) to calculate the correct capitalization.
• Real-time Feedback: Provides instant visual feedback on whether the provided address is valid or malformed.
• Clipboard Interaction: One-click "Copy to Clipboard" functionality with visual success feedback.

2. UI/UX Design

• Aesthetic: A minimalist, clean, SaaS-inspired interface. Use a color palette of soft whites (#F9FAFB), crisp grays (#374151), and a vibrant primary action color (e.g., #2563EB for buttons).
• Layout:
  • Header: Simple, centered title and a one-sentence descriptive subtitle.
  • Main Interaction: A prominent, large text area for input, auto-expanding to fit addresses.
  • Results Area: A clear display section where the checksummed address is presented in a monospace font with a copy button integrated directly into the result card.
  • Status Indicator: Small colored pills to show "Valid," "Invalid," or "Awaiting Input" states.
• Animations: Subtle fade-in transitions when results appear. The "Copy" button should show a temporary "Copied!" success state with a smooth CSS transition.

3. Implementation Requirements

• Single File Architecture: All HTML, CSS, and JavaScript must reside in one file. No external folders or assets.
• Library Usage: Use CDN links for the Keccak-256 hashing function (e.g., js-sha3) to keep the file size minimal.
• Sandboxed Compatibility:
  • No localStorage or session persistence. All state management is handled by JS variables.
  • No alert() or prompt() calls; use a custom DOM-based modal or dynamic text updates for user notifications.
  • All links must use rel="noopener noreferrer".
• Responsive: Fluid layout using Flexbox/Grid to ensure the text area and buttons scale properly from mobile screens to desktop monitors.

4. Color Palette

• Background: #FFFFFF (White)
• Primary Surface: #F3F4F6 (Light Gray)
• Text: #111827 (Dark Gray/Black)
• Accent/Button: #2563EB (Primary Blue)
• Success Indicator: #059669 (Emerald)
• Error Indicator: #DC2626 (Red)

5. Developer Directives

• Use box-shadow carefully to provide depth to the input/result cards.
• Ensure the font stack is modern (Inter, sans-serif) for high readability.
• Focus on accessibility; ensure inputs have clear labels and focus states.