@turtleclub/ui 0.0.1

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

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Card } from "@/components/ui/card";
+import { LabelWithIcon } from "@/components/ui/label-with-icon";
+
+interface DetailRow {
+  label: string;
+  value: string;
+  highlight?: boolean;
+  icon?: React.ReactNode;
+}
+
+interface OpportunityDetailsProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  titleIcon?: React.ReactNode;
+  yield?: string;
+  details?: DetailRow[];
+  badges?: Array<{
+    text: string;
+    icon?: React.ReactNode;
+    variant?: "default" | "secondary" | "outline";
+  }>;
+  externalLink?: {
+    text: string;
+    href: string;
+    icon?: React.ReactNode;
+  };
+}
+
+const OpportunityDetails = React.forwardRef<HTMLDivElement, OpportunityDetailsProps>(
+  (
+    {
+      className,
+      title,
+      titleIcon,
+      yield: yieldValue,
+      details = [],
+      badges = [],
+      externalLink,
+      ...props
+    },
+    ref
+  ) => {
+    const defaultTitleIcon = (
+      <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
+        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2L13.09 8.26L20 7L18.74 13.09L22 14L16.74 19.26L17 21L10.91 19.74L10 22L8.09 15.74L2 17L3.26 10.91L0 10L5.26 4.74L5 3L11.09 4.26L12 2Z" />
+        </svg>
+      </div>
+    );
+
+    const ExternalLinkIcon = () => (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+        />
+      </svg>
+    );
+
+    return (
+      <Card ref={ref} className={cn("p-4 space-y-4", className)} {...props}>
+        {/* Header with title and yield */}
+        {(title || titleIcon) && (
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <LabelWithIcon icon={titleIcon || defaultTitleIcon} textSize="lg" iconSize="lg">
+                {title}
+              </LabelWithIcon>
+            </div>
+            {yieldValue && (
+              <div className="text-right">
+                <div className="text-2xl font-bold text-primary">{yieldValue}</div>
+                <div className="text-xs text-muted-foreground">APY</div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Detail rows */}
+        {details.length > 0 && (
+          <div className="space-y-3">
+            {details.map((detail, index) => (
+              <div key={index} className="space-y-2">
+                <Card className="p-3">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      {detail.icon}
+                      <span className="text-sm text-muted-foreground">{detail.label}</span>
+                    </div>
+                    <span className={cn("text-sm font-medium", detail.highlight && "text-primary")}>
+                      {detail.value}
+                    </span>
+                  </div>
+                </Card>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Badges section */}
+        {badges.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {badges.map((badge, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium",
+                  badge.variant === "secondary" && "bg-secondary text-secondary-foreground",
+                  badge.variant === "outline" && "border border-border bg-background",
+                  (!badge.variant || badge.variant === "default") && "bg-primary/10 text-primary"
+                )}
+              >
+                {badge.icon}
+                {badge.text}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* External link */}
+        {externalLink && (
+          <div className="pt-2 border-t border-border">
+            <a
+              href={externalLink.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors"
+            >
+              {externalLink.icon}
+              {externalLink.text}
+              <ExternalLinkIcon />
+            </a>
+          </div>
+        )}
+      </Card>
+    );
+  }
+);
+
+OpportunityDetails.displayName = "OpportunityDetails";
+
+export { OpportunityDetails, type DetailRow };

package/src/components/molecules/opportunity-item.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Card } from "@/components/ui/card";
+import { LabelWithIcon } from "@/components/ui/label-with-icon";
+
+interface OpportunityItemProps extends React.ComponentProps<"div"> {
+  icon?: React.ReactNode | string;
+  name: string;
+  tvl?: string;
+  yield?: string;
+  onSelect?: () => void;
+  selected?: boolean;
+}
+
+const OpportunityItem = React.forwardRef<HTMLDivElement, OpportunityItemProps>(
+  (
+    { className, icon, name, tvl, yield: yieldValue, onSelect, selected = false, ...props },
+    ref
+  ) => {
+    const defaultIcon = (
+      <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center">
+        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2L13.09 8.26L20 7L18.74 13.09L22 14L16.74 19.26L17 21L10.91 19.74L10 22L8.09 15.74L2 17L3.26 10.91L0 10L5.26 4.74L5 3L11.09 4.26L12 2Z" />
+        </svg>
+      </div>
+    );
+
+    return (
+      <Card
+        ref={ref}
+        className={cn(
+          "cursor-pointer transition-all duration-200 hover:shadow-md w-full",
+          selected && "ring-2 ring-primary ring-offset-2",
+          className
+        )}
+        onClick={onSelect}
+        {...props}
+      >
+        <div className="flex gap-12 items-start justify-between">
+          {/* Left side: Name and TVL */}
+          <div className="flex flex-col min-w-0 flex-1 items-start justify-start">
+            <span className="text-sm font-medium text-foreground truncate">
+              <LabelWithIcon icon={icon || defaultIcon} textSize="2xl">
+                {name}
+              </LabelWithIcon>
+            </span>
+            {tvl && <span className="text-xs text-muted-foreground">TVL: {tvl}</span>}
+          </div>
+
+          {/* Right side: Yield */}
+          <div className="flex-shrink-0">
+            {yieldValue && <span className="text-lg font-bold text-primary">{yieldValue}</span>}
+          </div>
+        </div>
+      </Card>
+    );
+  }
+);
+
+OpportunityItem.displayName = "OpportunityItem";
+
+export { OpportunityItem };
+export type { OpportunityItemProps };

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

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Card } from "@/components/ui/card";
+import { ChevronDownIcon, ChevronsRightIcon } from "lucide-react";
+import { LabelWithIcon, ScrollArea, ScrollBar } from "../ui";
+
+interface TokenStep {
+  icon?: React.ReactNode | string;
+  symbol: string;
+  amount?: string;
+}
+
+interface RouteDetailsProps extends React.HTMLAttributes<HTMLDivElement> {
+  tokens: TokenStep[];
+  variant?: "default" | "compact";
+  defaultOpen?: boolean;
+}
+
+const RouteDetails = React.forwardRef<HTMLDivElement, RouteDetailsProps>(
+  ({ className, tokens = [], variant = "default", defaultOpen = false, ...props }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+    const defaultIcon = (symbol: string) => (
+      <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
+        <span className="text-xs font-bold text-primary">{symbol.charAt(0)}</span>
+      </div>
+    );
+
+    if (tokens.length === 0) return null;
+
+    return (
+      <Card ref={ref} className={cn("overflow-hidden", className)} {...props}>
+        {/* Collapsible header */}
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-full flex items-center justify-between p-2 hover:bg-muted/50 transition-colors"
+        >
+          <span className="text-sm font-medium">Swap Route</span>
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-xs text-muted-foreground">
+              {tokens.length} token{tokens.length > 1 ? "s" : ""}
+            </span>
+            <ChevronDownIcon className="w-4 h-4 text-primary" />
+          </div>
+        </button>
+
+        {/* Collapsible content */}
+        {isOpen && (
+          <div className="px-4 pb-4 border-t border-border">
+            {/* Route visualization */}
+            <ScrollArea className="rounded-md whitespace-nowrap">
+              <div className="flex items-center justify-between gap-2 overflow-x-auto py-3">
+                {tokens.map((token, index) => (
+                  <>
+                    <Card variant="item" className="p-2 rounded-full" key={index}>
+                      <LabelWithIcon
+                        icon={token.icon || defaultIcon(token.symbol)}
+                        textSize="xs"
+                        iconSize="sm"
+                      >
+                        <span className="gap-2">
+                          {token.amount} {token.symbol}
+                        </span>
+                      </LabelWithIcon>
+
+                      {/* Arrow between tokens */}
+                    </Card>
+                    {index < tokens.length - 1 && (
+                      <div className="flex-shrink-0 mx-1">
+                        <ChevronsRightIcon className="w-4 h-4 text-primary" />
+                      </div>
+                    )}
+                  </>
+                ))}
+              </div>
+              <ScrollBar orientation="horizontal" className="h-2" />
+            </ScrollArea>
+          </div>
+        )}
+      </Card>
+    );
+  }
+);
+
+RouteDetails.displayName = "RouteDetails";
+
+export { RouteDetails, type TokenStep };

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

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Card } from "@/components/ui/card";
+import { ChevronDownIcon } from "lucide-react";
+
+interface SwapDetailsProps extends React.HTMLAttributes<HTMLDivElement> {
+  deposit?: string;
+  receive?: string;
+  equivalentInUsd?: string;
+  slippageInUsd?: string;
+  networkFee?: string;
+  networkFeeInUsd?: string;
+  swapFee?: string;
+  showFree?: boolean;
+  defaultOpen?: boolean;
+}
+
+const SwapDetails = React.forwardRef<HTMLDivElement, SwapDetailsProps>(
+  (
+    {
+      className,
+      swapFee,
+      slippageInUsd,
+      deposit,
+      receive,
+      equivalentInUsd,
+      networkFee,
+      networkFeeInUsd,
+      showFree = false,
+      defaultOpen = false,
+      ...props
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+    return (
+      <Card ref={ref} className={cn("overflow-hidden", className)} {...props}>
+        {/* Collapsible header */}
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-full flex items-center justify-between p-1 hover:bg-muted/50 transition-colors"
+        >
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium">
+              {deposit} = {receive}
+            </span>
+            <span className="text-xs text-muted-foreground">(≈ ${equivalentInUsd})</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-xs text-muted-foreground">≈ ${slippageInUsd}</span>
+            <ChevronDownIcon className="w-4 h-4" />
+          </div>
+        </button>
+
+        {/* Collapsible content */}
+        {isOpen && (
+          <div className="transition-all animate-in fade-in-0 duration-300">
+            {/* Swap Fee */}
+
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-muted-foreground text-xs">Swap Fee</span>
+              {swapFee ? (
+                <span className="font-medium">{swapFee}%</span>
+              ) : (
+                <span className="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full font-medium">
+                  FREE
+                </span>
+              )}
+            </div>
+
+            {/* Network Fee */}
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-muted-foreground text-xs">Network Fee</span>
+              <span className="font-medium">
+                <span className="text-xs text-foreground">{networkFee}</span>
+                {networkFeeInUsd ? (
+                  <span className="text-xs text-muted-foreground">(≈ ${networkFeeInUsd})</span>
+                ) : (
+                  <span className="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full font-medium">
+                    FREE
+                  </span>
+                )}
+              </span>
+            </div>
+          </div>
+        )}
+      </Card>
+    );
+  }
+);
+
+SwapDetails.displayName = "SwapDetails";
+
+export { SwapDetails };

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

@@ -0,0 +1,115 @@
+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";
+
+interface SwapInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value?: string;
+  onChange?: (value: string) => void;
+  tokens: Token[];
+  selectedToken?: string;
+  onTokenChange?: (tokenAddress: string) => void;
+  usdValue?: string;
+  balance?: string;
+  onMaxClick?: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  hideTokenSelector?: boolean;
+}
+
+const SwapInput = React.forwardRef<HTMLDivElement, SwapInputProps>(
+  (
+    {
+      className,
+      value = "",
+      onChange,
+      tokens,
+      selectedToken,
+      onTokenChange,
+      usdValue,
+      balance,
+      onMaxClick,
+      placeholder = "0",
+      disabled = false,
+      hideTokenSelector = false,
+      ...props
+    },
+    ref
+  ) => {
+    // Find the selected token for balance display
+    const currentToken = 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);
+      }
+    };
+
+    return (
+      <Card
+        ref={ref}
+        className={cn("space-y-3", disabled && "opacity-50", className)}
+        {...props}
+      >
+        {/* Main input row */}
+        <div className="flex items-center gap-3">
+          {/* Amount input */}
+          <div className="flex-1">
+            <Input
+              variant="nofocus"
+              value={value}
+              onChange={handleInputChange}
+              placeholder={placeholder}
+              disabled={disabled}
+              className="text-2xl font-medium border-none bg-transparent p-0 h-auto focus:ring-0"
+            />
+          </div>
+
+          {/* Token selector - conditionally rendered */}
+          {!hideTokenSelector && (
+            <TokenSelector
+              tokens={tokens}
+              value={selectedToken}
+              onValueChange={onTokenChange}
+              disabled={disabled}
+              placeholder="Select token"
+            />
+          )}
+        </div>
+
+        {/* Bottom row: USD value and balance with MAX */}
+        <div className="flex items-center justify-between text-sm text-muted-foreground">
+          <div>{usdValue && <span>≈ ${usdValue}</span>}</div>
+          <div className="flex items-center gap-2">
+            {balance && (
+              <span>
+                Balance: {balance} {currentToken?.symbol || ""}
+              </span>
+            )}
+            {onMaxClick && (
+              <Chip
+                variant="default"
+                size="xs"
+                onClick={onMaxClick}
+                className={cn(
+                  "cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors text-xs",
+                  disabled && "cursor-not-allowed opacity-50"
+                )}
+              >
+                MAX
+              </Chip>
+            )}
+          </div>
+        </div>
+      </Card>
+    );
+  }
+);
+
+SwapInput.displayName = "SwapInput";
+
+export { SwapInput, type Token };

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

@@ -0,0 +1,72 @@
+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 {
+  icon: React.ReactNode;
+  symbol: string;
+  address: string;
+}
+
+interface TokenSelectorProps {
+  tokens: Token[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const TokenSelector = React.forwardRef<HTMLButtonElement, TokenSelectorProps>(
+  ({ tokens, value, onValueChange, placeholder = "Select token", disabled, className }, ref) => {
+    // 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);
+
+    // 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
+          ref={ref}
+          className={cn(
+            "w-auto min-w-[80px] h-8 px-2 py-1 bg-muted hover:bg-muted/80 border-none rounded-md text-sm font-medium",
+            "focus:ring-2 focus:ring-primary/20 focus:outline-none",
+            className
+          )}
+        >
+          {selectedToken ? (
+            <div className="flex items-center gap-1.5">
+              <span className="w-4 h-4 flex items-center justify-center">{selectedToken.icon}</span>
+              <span className="text-sm font-medium">{selectedToken.symbol}</span>
+            </div>
+          ) : (
+            <span className="text-sm text-muted-foreground">{placeholder}</span>
+          )}
+        </SelectTrigger>
+        <SelectContent>
+          {tokens.map((token) => (
+            <SelectItem key={token.address} value={token.address} className="cursor-pointer">
+              <div className="flex items-center gap-2">
+                <span className="w-4 h-4 flex items-center justify-center">{token.icon}</span>
+                <span className="text-sm font-medium">{token.symbol}</span>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  }
+);
+
+TokenSelector.displayName = "TokenSelector";
+
+export { TokenSelector, type Token };