@turtleclub/ui 0.3.0 → 0.3.1-beta.0

package/src/components/molecules/slippage-selector.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { useState, useCallback, useEffect } from "react";
-import { Edit3 } from "lucide-react";
+import { Edit3, InfoIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui";
 
 const SLIPPAGE_LIMITS = {
   MIN: 0.1,
-  MAX: 100,
+  MAX: 50,
 } as const;
 
 const VALIDATION_REGEX = /^\d*\.?\d*$/;
@@ -29,10 +30,14 @@ interface SlippageSelectorProps {
 }
 
 // Validation utilities
-const isValidSlippageInput = (input: string): boolean => VALIDATION_REGEX.test(input);
+const isValidSlippageInput = (input: string): boolean =>
+  VALIDATION_REGEX.test(input);
 
-const isValidSlippageValue = (value: number, min: number, max: number): boolean =>
-  !isNaN(value) && value >= min && value <= max;
+const isValidSlippageValue = (
+  value: number,
+  min: number,
+  max: number,
+): boolean => !isNaN(value) && value >= min && value <= max;
 
 const formatSlippageValue = (value: number): string => value.toString();
 
@@ -47,7 +52,6 @@ export function SlippageSelector({
   const [isEditing, setIsEditing] = useState(false);
   const [inputValue, setInputValue] = useState(formatSlippageValue(value));
 
-  // Sync input value when prop value changes
   useEffect(() => {
     if (!isEditing) {
       setInputValue(formatSlippageValue(value));
@@ -56,11 +60,11 @@ export function SlippageSelector({
 
   const startEditing = useCallback(() => {
     setIsEditing(true);
-    setInputValue(formatSlippageValue(value));
+    setInputValue(formatSlippageValue(value * 100));
   }, [value]);
 
   const cancelEditing = useCallback(() => {
-    setInputValue(formatSlippageValue(value));
+    setInputValue(formatSlippageValue(value * 100));
     setIsEditing(false);
   }, [value]);
 
@@ -68,7 +72,8 @@ export function SlippageSelector({
     const numValue = parseFloat(inputValue);
 
     if (isValidSlippageValue(numValue, minValue, maxValue)) {
-      onChange(numValue);
+      // Convert to percentage
+      onChange(numValue / 100);
       setIsEditing(false);
     } else {
       // Reset to current value if invalid
@@ -99,7 +104,7 @@ export function SlippageSelector({
 
       setInputValue(newValue);
     },
-    [maxValue]
+    [maxValue],
   );
 
   const handleKeyDown = useCallback(
@@ -115,7 +120,7 @@ export function SlippageSelector({
           break;
       }
     },
-    [submitValue, cancelEditing]
+    [submitValue, cancelEditing],
   );
 
   const handleBlur = useCallback(() => {
@@ -124,8 +129,24 @@ export function SlippageSelector({
 
   return (
     <div className={cn("flex items-center justify-between", className)}>
-      <span className="text-xs font-medium text-muted-foreground" id="slippage-label">
-        {label}
+      <span
+        className="text-muted-foreground text-xs font-medium"
+        id="slippage-label"
+      >
+        <div className="flex items-center">
+          {label}
+          <Tooltip>
+            <TooltipTrigger>
+              <InfoIcon className="ml-1 size-3" />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className="text-xs">
+                Must be between <span className="font-bold">0.1%</span> and{" "}
+                <span className="font-bold">50%</span>
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
       </span>
 
       <div className="flex items-center gap-1">
@@ -138,8 +159,8 @@ export function SlippageSelector({
             onBlur={handleBlur}
             className={cn(
               INPUT_WIDTH,
-              "text-xs text-right bg-transparent border-none outline-none",
-              "text-foreground focus:ring-0 focus:outline-none"
+              "border-none bg-transparent text-right text-xs outline-none",
+              "text-foreground focus:ring-0 focus:outline-none",
             )}
             aria-labelledby="slippage-label"
             aria-describedby="slippage-range"
@@ -148,19 +169,22 @@ export function SlippageSelector({
             spellCheck={false}
           />
         ) : (
-          <span className="text-xs font-medium text-foreground" aria-live="polite">
-            {value}%
+          <span
+            className="text-foreground text-xs font-medium"
+            aria-live="polite"
+          >
+            {value * 100}%
           </span>
         )}
 
         <button
           onClick={startEditing}
           className={cn(
-            "p-1 hover:bg-muted rounded transition-colors",
+            "hover:bg-muted rounded p-1 transition-colors",
             "text-muted-foreground hover:text-foreground",
-            "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none",
           )}
-          aria-label={`Edit slippage value. Current value: ${value}%`}
+          aria-label={`Edit slippage value. Current value: ${value * 100}%`}
           type="button"
         >
           <Edit3 size={ICON_SIZE} />