Ethereum Address EIP-55 Checksum Tool

Overview

A clean, professional, and high-performance utility designed to convert standard Ethereum (Hex) addresses into the EIP-55 mixed-case checksum format. The app provides instant visual feedback on address validity.

Technical Directives

• Architecture: Single HTML file containing HTML5, Tailwind CSS (via CDN), and Vanilla JavaScript.
• Storage: NO localStorage, sessionStorage, IndexedDB, or cookies. Use only in-memory state variables.
• Sandboxing: Compatible with null-origin iframes. Use only window and document APIs.
• No External Dependencies: Do not use npm-based frameworks. All logic must be contained in a <script> tag or standard CDN libraries (e.g., ethers.js or js-sha3 for hashing if needed, though native implementations are preferred).

UI/UX Design

• Color Palette:
  • Primary Background: #f8fafc (Slate 50)
  • Card Background: #ffffff (White) with smooth shadow (shadow-lg).
  • Text Colors: #1e293b (Slate 800) for headers, #475569 (Slate 600) for body.
  • Success State: #16a34a (Green 600) for valid addresses.
  • Error State: #dc2626 (Red 600) for invalid checksums or invalid format.
• Layout:
  • Header: Simple, centered title with a clear, concise instruction sub-line.
  • Input Section: A large, centered <textarea> with modern border-radius (rounded-xl) and focus ring states. Placeholder text indicating: "Paste Ethereum address here (0x...)".
  • Results Section:
    • Real-time display of the converted address.
    • A "Copy to Clipboard" button with a brief, non-intrusive CSS animation pulse on success.
    • A status badge (e.g., "Valid", "Invalid", "Checksum Updated").
• Responsiveness: Use Tailwind's max-w-xl for the main card container to ensure readability on both mobile and widescreen desktops.

Features

1. Real-Time Parsing: The application must parse and validate the input on every keystroke (debounce optional for better performance).
2. Visual Feedback: Dynamic status icons (using SVG inline) to indicate success or error.
3. One-Click Copy: A prominent "Copy to Clipboard" button that changes text to "Copied!" temporarily using standard DOM manipulation.
4. Instructional Context: A brief "How to use" section below the main card to guide users through the validation process.
5. Clean Aesthetic: Absolutely no branding, banners, or decorative clutter. Focus strictly on function and clarity.

Animations & Micro-interactions

• Transitions: Use transition-all and duration-300 for all color and size changes.
• Focus States: Enhance inputs with ring-4 and subtle blue ring colors (ring-blue-200) to emphasize the active editing area.
• Result Reveal: Use a simple opacity fade-in (animate-fade-in) when the converted address result appears.