@turtleclub/ui 0.7.0-beta.32 → 0.7.0-beta.34

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

@@ -1,200 +0,0 @@
-import * as React from "react";
-import { useState, useCallback, useEffect } from "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: 50,
-} as const;
-
-const VALIDATION_REGEX = /^\d*\.?\d*$/;
-
-const ICON_SIZE = 10;
-const INPUT_WIDTH = "w-10";
-
-interface SlippageSelectorProps {
-  /** Current slippage value as percentage */
-  value: number;
-  /** Callback when slippage value changes */
-  onChange: (value: number) => void;
-  /** Additional CSS classes */
-  className?: string;
-  /** Label text for the selector */
-  label?: string;
-  /** Minimum allowed slippage value */
-  minValue?: number;
-  /** Maximum allowed slippage value */
-  maxValue?: number;
-}
-
-// Validation utilities
-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 formatSlippageValue = (value: number): string => value.toString();
-
-export function SlippageSelector({
-  value,
-  onChange,
-  className,
-  label = "Max Slippage",
-  minValue = SLIPPAGE_LIMITS.MIN,
-  maxValue = SLIPPAGE_LIMITS.MAX,
-}: SlippageSelectorProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [inputValue, setInputValue] = useState(formatSlippageValue(value));
-
-  useEffect(() => {
-    if (!isEditing) {
-      setInputValue(formatSlippageValue(value));
-    }
-  }, [value, isEditing]);
-
-  const startEditing = useCallback(() => {
-    setIsEditing(true);
-    setInputValue(formatSlippageValue(value * 100));
-  }, [value]);
-
-  const cancelEditing = useCallback(() => {
-    setInputValue(formatSlippageValue(value * 100));
-    setIsEditing(false);
-  }, [value]);
-
-  const submitValue = useCallback(() => {
-    const numValue = parseFloat(inputValue);
-
-    if (isValidSlippageValue(numValue, minValue, maxValue)) {
-      // Convert to percentage
-      onChange(numValue / 100);
-      setIsEditing(false);
-    } else {
-      // Reset to current value if invalid
-      cancelEditing();
-    }
-  }, [inputValue, minValue, maxValue, onChange, cancelEditing]);
-
-  const handleInputChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = e.target.value;
-
-      // First check if the input format is valid (regex validation)
-      if (!isValidSlippageInput(newValue)) {
-        return;
-      }
-
-      // If it's an empty string or just a decimal point, allow it for UX
-      if (newValue === "" || newValue === ".") {
-        setInputValue(newValue);
-        return;
-      }
-
-      // Check if the numeric value exceeds the maximum limit
-      const numValue = parseFloat(newValue);
-      if (!isNaN(numValue) && numValue > maxValue) {
-        return; // Block input that exceeds maxValue
-      }
-
-      setInputValue(newValue);
-    },
-    [maxValue],
-  );
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      switch (e.key) {
-        case "Enter":
-          e.preventDefault();
-          submitValue();
-          break;
-        case "Escape":
-          e.preventDefault();
-          cancelEditing();
-          break;
-      }
-    },
-    [submitValue, cancelEditing],
-  );
-
-  const handleBlur = useCallback(() => {
-    submitValue();
-  }, [submitValue]);
-
-  return (
-    <div className={cn("flex items-center justify-between", className)}>
-      <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">
-        {isEditing ? (
-          <input
-            type="text"
-            value={inputValue}
-            onChange={handleInputChange}
-            onKeyDown={handleKeyDown}
-            onBlur={handleBlur}
-            className={cn(
-              INPUT_WIDTH,
-              "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"
-            autoFocus
-            autoComplete="off"
-            spellCheck={false}
-          />
-        ) : (
-          <span
-            className="text-foreground text-xs font-medium"
-            aria-live="polite"
-          >
-            {value * 100}%
-          </span>
-        )}
-
-        <button
-          onClick={startEditing}
-          className={cn(
-            "hover:bg-muted rounded p-1 transition-colors",
-            "text-muted-foreground hover:text-foreground",
-            "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none",
-          )}
-          aria-label={`Edit slippage value. Current value: ${value * 100}%`}
-          type="button"
-        >
-          <Edit3 size={ICON_SIZE} />
-        </button>
-      </div>
-
-      {/* Screen reader helper text */}
-      <span id="slippage-range" className="sr-only">
-        Enter a value between {minValue}% and {maxValue}%
-      </span>
-    </div>
-  );
-}

package/src/components/molecules/swap-details.tsx

@@ -1,55 +0,0 @@
-import * as React from "react";
-import { SlippageSelector } from "@/index";
-
-interface SwapDetailsProps extends React.HTMLAttributes<HTMLDivElement> {
-  details: {
-    deposit?: string;
-    receive?: string;
-    equivalentInUsd?: string;
-    defaultOpen?: boolean;
-    slippage?: number;
-    setSlippage?: (slippage: number) => void;
-  };
-}
-
-const SwapDetails = React.forwardRef<HTMLDivElement, SwapDetailsProps>(
-  ({ className, details, ...props }, ref) => {
-    const { deposit, receive, equivalentInUsd, slippage, setSlippage } =
-      details;
-
-    return (
-      <div className="text-foreground animate-in fade-in-0 space-y-2 px-2 py-4 transition-all duration-300">
-        {/* Amount Out*/}
-        <div className="flex items-center justify-between text-sm">
-          <span className="text-foreground text-sm font-semibold">
-            Amount Out
-          </span>
-          <span className="font-medium">{receive}</span>
-        </div>
-
-        {/* Slippage Selector */}
-        {slippage !== undefined && setSlippage && (
-          <SlippageSelector
-            className="text-sm"
-            value={slippage}
-            onChange={setSlippage}
-          />
-        )}
-
-        {/* Amount Out in USD */}
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-medium">
-            {deposit} = {receive}
-          </span>
-          <span className="text-muted-foreground text-xs">
-            (≈ ${equivalentInUsd})
-          </span>
-        </div>
-      </div>
-    );
-  },
-);
-
-SwapDetails.displayName = "SwapDetails";
-
-export { SwapDetails };

package/src/components/molecules/swap-input.tsx

@@ -1,186 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import { Card } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Chip } from "@/components/ui/chip";
-import { TokenSelector, type Token } from "./token-selector";
-import { BaseSelector } from "./widget/base-selector";
-
-interface SwapInputProps extends Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  "onChange"
-> {
-  value?: string;
-  tokens: Token[];
-  selectedToken?: string;
-  usdValue?: string;
-  balance?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  hideTokenSelector?: boolean;
-  isWalletConnected?: boolean;
-  onChange?: (value: string) => void;
-  onMaxClick?: () => void;
-  onTokenChange?: (tokenAddress: string) => void;
-  // New props for custom token selector
-  useCustomTokenSelector?: boolean;
-  selectedTokenData?: Token | null;
-  onCustomTokenSelectorClick?: () => void;
-  showTokenSelectorBalance?: boolean;
-  showInputBalance?: boolean;
-  triggerTokenSelectorWidth?: number;
-}
-
-const SwapInput = React.forwardRef<HTMLDivElement, SwapInputProps>(
-  (
-    {
-      className,
-      value = "",
-      tokens,
-      selectedToken,
-      usdValue,
-      balance,
-      placeholder = "0",
-      disabled = false,
-      hideTokenSelector = false,
-      isWalletConnected = true,
-      onChange,
-      onMaxClick,
-      onTokenChange,
-      // New props
-      useCustomTokenSelector = false,
-      selectedTokenData,
-      onCustomTokenSelectorClick,
-      showTokenSelectorBalance = true,
-      showInputBalance = true,
-      triggerTokenSelectorWidth,
-      ...props
-    },
-    ref,
-  ) => {
-    // Find the selected token for balance display
-    const currentToken = useCustomTokenSelector
-      ? selectedTokenData
-      : tokens.find((token) => token.address === selectedToken);
-
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = e.target.value;
-      // Allow only numbers and decimal point
-      if (/^\d*\.?\d*$/.test(newValue)) {
-        onChange?.(newValue);
-      }
-    };
-
-    // If wallet is not connected, show connection message
-    if (!isWalletConnected) {
-      return (
-        <Card
-          ref={ref}
-          className={cn("flex items-center justify-center py-8", className)}
-          {...props}
-        >
-          <div className="text-center">
-            <p className="text-muted-foreground text-sm">
-              Connect your wallet to continue
-            </p>
-          </div>
-        </Card>
-      );
-    }
-
-    return (
-      <Card
-        variant="shadow"
-        ref={ref}
-        className={cn("space-y-3", disabled && "opacity-50", className)}
-        {...props}
-      >
-        {/* Main input row */}
-        <div className="flex items-center gap-6">
-          {/* Amount input */}
-          <div className="flex-1">
-            <Input
-              variant="nofocus"
-              value={value}
-              onChange={handleInputChange}
-              placeholder={placeholder}
-              disabled={disabled}
-              className="text-foreground/90 h-auto border-none bg-transparent p-0 text-4xl font-[400] shadow-none focus:ring-0"
-            />
-          </div>
-
-          {/* Token selector - conditionally rendered */}
-          {!hideTokenSelector &&
-            (useCustomTokenSelector ? (
-              <BaseSelector
-                token={currentToken ?? undefined}
-                text={currentToken?.symbol || ""}
-                onClick={onCustomTokenSelectorClick}
-                placeholder="Select token"
-                size="sm"
-                variant="bordered"
-                className={cn(
-                  "rounded-full",
-                  disabled && "cursor-not-allowed opacity-50",
-                )}
-                showIcon={true}
-              />
-            ) : (
-              <TokenSelector
-                tokens={tokens}
-                value={selectedToken}
-                onValueChange={onTokenChange}
-                disabled={disabled}
-                placeholder="Select token"
-                size="sm"
-                variant="default"
-                className="rounded-full"
-                showBalance={showTokenSelectorBalance}
-                triggerWidth={triggerTokenSelectorWidth}
-              />
-            ))}
-        </div>
-
-        {/* Bottom row: USD value and balance with MAX */}
-        {showInputBalance && (
-          <div className="text-muted-foreground flex items-center justify-between text-sm">
-            <div>
-              {usdValue ? (
-                <span>≈ {usdValue}</span>
-              ) : value ? (
-                <span className="text-destructive/50">
-                  Insufficient balance
-                </span>
-              ) : null}
-            </div>
-            <div className="flex items-center gap-2">
-              {balance && (
-                <span className="text-sm">
-                  Balance: {balance} {currentToken?.symbol || ""}
-                </span>
-              )}
-              {onMaxClick && (
-                <Chip
-                  variant="default"
-                  size="xs"
-                  onClick={onMaxClick}
-                  className={cn(
-                    "hover:bg-primary hover:text-primary-foreground h-5 cursor-pointer px-2 py-0.5 text-xs transition-colors",
-                    disabled && "cursor-not-allowed opacity-50",
-                  )}
-                >
-                  MAX
-                </Chip>
-              )}
-            </div>
-          </div>
-        )}
-      </Card>
-    );
-  },
-);
-
-SwapInput.displayName = "SwapInput";
-
-export { SwapInput };
-export type { Token, SwapInputProps };

package/src/components/molecules/tabs.tsx

@@ -1,79 +0,0 @@
-import React, { ReactNode, useMemo, useState } from "react";
-import { NavigationBar, NavigationItem } from "../ui";
-import { cn } from "@/lib/utils";
-
-interface Tab {
-  value: string;
-  label: string;
-  content: ReactNode;
-  disabled?: boolean;
-}
-
-interface TabsProps {
-  tabs: Tab[];
-  defaultValue?: string;
-  value?: string;
-  onValueChange?: (value: string) => void;
-  layout?: (content: ReactNode) => ReactNode;
-  className?: string;
-}
-
-const Tabs = ({
-  tabs,
-  defaultValue,
-  value,
-  onValueChange,
-  layout,
-  className,
-}: TabsProps) => {
-  const [internalValue, setInternalValue] = useState(
-    defaultValue ||
-      value ||
-      tabs.find((tab) => !tab.disabled)?.value ||
-      tabs[0]?.value,
-  );
-  const activeTab = value ?? internalValue;
-
-  const handleTabChange = (newValue: string) => {
-    if (value === undefined) {
-      setInternalValue(newValue);
-    }
-    onValueChange?.(newValue);
-  };
-
-  const activeTabContent = useMemo(
-    () => tabs.find((tab) => tab.value === activeTab)?.content,
-    [activeTab, tabs],
-  );
-
-  const layoutContent = useMemo(() => {
-    if (layout) {
-      return layout(activeTabContent);
-    }
-    return (
-      <div className="min-h-0 flex-1 overflow-hidden">{activeTabContent}</div>
-    );
-  }, [activeTabContent, layout]);
-
-  return (
-    <div className={cn("flex flex-col", className)}>
-      <NavigationBar variant="menuBar" activeValue={activeTab} className="mb-2">
-        {tabs.map((tab) => (
-          <NavigationItem
-            key={tab.value}
-            value={tab.value}
-            active={tab.value === activeTab}
-            onClick={() => !tab.disabled && handleTabChange(tab.value)}
-            disabled={tab.disabled}
-            variant="menuBarDefault"
-          >
-            {tab.label}
-          </NavigationItem>
-        ))}
-      </NavigationBar>
-      {layoutContent}
-    </div>
-  );
-};
-
-export { Tabs, type TabsProps, type Tab };

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

@@ -1,180 +0,0 @@
-"use client";
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-} from "@/components/ui/select";
-import { useEffect } from "react";
-
-interface Token {
-  symbol: string;
-  address: string;
-  logoUrl?: string;
-  // Optional for backwards compatibility
-  icon?: React.ReactNode;
-  balance?: string;
-}
-
-interface TokenSelectorProps {
-  tokens: Token[];
-  value?: string;
-  onValueChange?: (value: string) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-  variant?: "default" | "bordered";
-  size?: "xs" | "sm" | "default";
-  showBalance?: boolean;
-  triggerWidth?: number;
-}
-
-const TokenSelector = ({
-  tokens,
-  value,
-  onValueChange,
-  placeholder = "Select token",
-  disabled,
-  className,
-  variant = "bordered",
-  size = "default",
-  showBalance = true,
-  triggerWidth,
-}: TokenSelectorProps) => {
-  // Auto-select first token if no value is provided and tokens exist
-  const effectiveValue =
-    value || (tokens.length > 0 ? tokens[0].address : undefined);
-
-  // Find the selected token to display in the trigger
-  const selectedToken = tokens.find(
-    (token) => token.address === effectiveValue,
-  );
-
-  // Helper to get icon (either provided icon or generated from logoUrl)
-  const getTokenIcon = (token: Token) => {
-    if (token.icon) return token.icon;
-    if (token.logoUrl) {
-      return (
-        <img
-          src={token.logoUrl}
-          alt={token.symbol}
-          className="size-full rounded-full"
-        />
-      );
-    }
-    return null;
-  };
-
-  // Handle value change and auto-select first token on mount
-  useEffect(() => {
-    if (!value && tokens.length > 0 && onValueChange) {
-      onValueChange(tokens[0].address);
-    }
-  }, [value, tokens, onValueChange]);
-
-  return (
-    <Select
-      value={effectiveValue}
-      onValueChange={onValueChange}
-      disabled={disabled}
-    >
-      <SelectTrigger
-        // variant={variant}
-        // size={size}
-        style={triggerWidth ? { width: `${triggerWidth}px` } : undefined}
-        className={cn(
-          "bg-muted hover:bg-muted/80 w-auto min-w-[80px] rounded-md font-medium",
-          "focus:ring-primary/20 focus:ring-2 focus:outline-none",
-          size === "xs" && "min-w-[80px] gap-2",
-          size === "sm" && "min-w-[75px] gap-1.5",
-          size === "default" && "min-w-[80px] gap-1.5",
-          className,
-        )}
-      >
-        {selectedToken ? (
-          <div
-            className={cn(
-              "flex items-center",
-              size === "xs" && "gap-2",
-              size === "sm" && "gap-1.5",
-              size === "default" && "gap-1.5",
-            )}
-          >
-            <span
-              className={cn(
-                "flex items-center justify-center",
-                size === "xs" && "h-3 w-3.5",
-                size === "sm" && "h-3.5 w-4",
-                size === "default" && "h-4 w-5",
-              )}
-            >
-              {getTokenIcon(selectedToken)}
-            </span>
-            <span
-              className={cn(
-                "font-medium",
-                size === "xs" && "text-xs",
-                size === "sm" && "text-sm",
-                size === "default" && "text-sm",
-              )}
-            >
-              {selectedToken.symbol}
-            </span>
-          </div>
-        ) : (
-          <span
-            className={cn(
-              "text-muted-foreground",
-              size === "xs" && "text-xs",
-              size === "sm" && "text-sm",
-              size === "default" && "text-sm",
-            )}
-          >
-            {placeholder}
-          </span>
-        )}
-      </SelectTrigger>
-      <SelectContent className="border-muted gap-2 border">
-        {tokens.map((token) => (
-          <SelectItem
-            key={token.address}
-            value={token.address}
-            className="cursor-pointer py-2"
-          >
-            <div className="flex flex-col gap-2">
-              <div className="flex items-center gap-2">
-                <span
-                  className={cn(
-                    "flex items-center justify-center",
-                    size === "xs" && "h-3.5 w-3.5",
-                    size === "sm" && "h-4 w-4",
-                    size === "default" && "h-4 w-5",
-                  )}
-                >
-                  {getTokenIcon(token)}
-                </span>
-                <span
-                  className={cn(
-                    "font-medium",
-                    size === "xs" && "text-xs",
-                    size === "sm" && "text-sm",
-                    size === "default" && "text-sm",
-                  )}
-                >
-                  {token.symbol}
-                </span>
-              </div>
-              {showBalance && (
-                <span className="text-xs text-white/80">≈ {token.balance}</span>
-              )}
-            </div>
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-};
-
-export { TokenSelector, type Token };