Free Uniswap Liquidity Provider Impermanent Loss Calculator

Overview

A clean, professional, and responsive web application designed for DeFi liquidity providers to calculate impermanent loss (IL) based on price divergence. The tool compares the current value of a liquidity pool position against a simple "HODL" strategy, allowing users to assess the risk of their DeFi investments.

Technical Architecture

• Single File: The app must be contained within a single .html file. All CSS and JS must be embedded within <style> and <script> tags.
• Storage Constraints: ABSOLUTELY NO localStorage, sessionStorage, or cookies. All data must be held in volatile memory only. If the page reloads, the state is reset.
• Sandbox Compatibility: Do not use alert(), prompt(), or confirm(). If user feedback or input errors occur, render them as custom HTML overlay elements.
• CDN Usage: Use CDN-hosted libraries (e.g., Tailwind CSS for styling, Chart.js for visualization, Lucide for icons) to maintain a lightweight codebase.

Feature Set

• Live Calculation: Instant calculation as the user adjusts the price change slider or inputs.
• Visual Data Presentation: A responsive line chart (using Chart.js) illustrating the relationship between price change and impermanent loss.
• Comparison Table: A side-by-side table showing the total value in an LP position vs. the value if the tokens were held individually.
• Responsive Input Fields: Large, touch-friendly sliders and input fields for Price A, Price B, and percentage change.
• Educational Tooltips: Clean, hoverable info icons explaining terms like "Divergence," "Constant Product," and "HODL Value."

UI/UX Design

• Aesthetic: Minimalist, light-mode "SaaS" aesthetic. Use high-contrast whitespace, subtle shadows (e.g., shadow-sm, shadow-md), and rounded corners (rounded-xl).
• Color Palette:
  • Primary: blue-600 for actions and buttons.
  • Background: slate-50 for the page background, white for content cards.
  • Text: slate-900 for headings, slate-600 for body text.
  • Accents: emerald-600 for gains/positive indicators, rose-600 for losses/negative indicators.
• Typography: Use a clean, legible sans-serif stack (e.g., Inter, system-ui).

Implementation Steps

1. Setup: Create a responsive container with a centered main card.
2. Input Section: Add input groups for "Initial Price Ratio" and "New Price Ratio". Use a range slider for an interactive, smooth user experience.
3. Calculation Engine: Implement a JavaScript function that uses the formula: IL = (2 * sqrt(p)) / (1 + p) - 1, where p is the price ratio.
4. Visualization: Integrate a dynamic chart that updates its data points via chart.update() every time input values change.
5. Results Section: Display the results in a clean, high-contrast dashboard format with clear "Loss Percentage" and "Value Comparison" labels.

Directives for Developer

• Design: Ensure the layout is mobile-first. Use CSS Grid and Flexbox for all structural elements.
• Responsiveness: Test on mobile, tablet, and desktop viewports to ensure inputs do not overflow.
• Performance: Ensure the calculation script is optimized to run efficiently with no lag, even if the user slides the input rapidly.
• Safety: Verify that no data is persisted and that all external links use rel="noopener noreferrer".