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

package/src/components/molecules/tx-status.tsx

@@ -1,312 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import { Card } from "@/components/ui/card";
-import { IconAnimation } from "@/components/ui/icon-animation";
-import { Button } from "@/components/ui/button";
-import { CheckIcon, TurtleIcon, XIcon } from "lucide-react";
-
-interface TxStatusProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  description?: string;
-  txHash?: string;
-  explorerUrl?: string;
-  estimatedTime?: string;
-  amount?: string;
-  token?: string;
-  protocol?: string;
-  steps?: Array<{
-    label: string;
-    completed: boolean;
-    current?: boolean;
-    txHash?: string;
-  }>;
-  variant?: "default" | "compact";
-  completed?: boolean;
-  cancelled?: boolean;
-  onViewDetails?: () => void;
-  onClose?: () => void;
-  showActions?: boolean;
-}
-
-const TxStatus = React.forwardRef<HTMLDivElement, TxStatusProps>(
-  (
-    {
-      className,
-      title,
-      description,
-      txHash,
-      explorerUrl,
-      estimatedTime,
-      amount,
-      token,
-      protocol,
-      steps = [],
-      variant = "default",
-      completed = false,
-      cancelled = false,
-      onViewDetails,
-      onClose,
-      showActions = true,
-      ...props
-    },
-    ref,
-  ) => {
-    const defaultTitle = cancelled
-      ? "Transaction Cancelled"
-      : completed
-        ? "Transaction Completed"
-        : "Processing Transaction";
-    const defaultDescription = cancelled
-      ? "Transaction was cancelled by user"
-      : completed
-        ? "Your transaction has been successfully processed!"
-        : "Please wait while your transaction is being processed...";
-
-    const ExternalLinkIcon = ({ size = "w-4 h-4" }) => (
-      <svg
-        className={size}
-        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>
-    );
-
-    const StepCheckIcon = () => (
-      <svg
-        className="h-4 w-4"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M5 13l4 4L19 7"
-        />
-      </svg>
-    );
-
-    const formatTxHash = (hash: string) => {
-      if (hash.length <= 12) return hash;
-      return `${hash.slice(0, 6)}...${hash.slice(-6)}`;
-    };
-
-    return (
-      <Card
-        ref={ref}
-        className={cn(
-          "space-y-3 p-4 text-center",
-          variant === "compact" && "space-y-2 p-3",
-          className,
-        )}
-        {...props}
-      >
-        {/* Animation */}
-        <div className="flex justify-center">
-          <IconAnimation
-            spinning={!completed && !cancelled}
-            size={variant === "compact" ? "sm" : "default"}
-          >
-            {cancelled ? (
-              <XIcon
-                className={cn(
-                  variant === "compact" ? "h-5 w-5" : "h-6 w-6",
-                  "text-destructive",
-                )}
-              />
-            ) : completed ? (
-              <CheckIcon
-                className={cn(
-                  variant === "compact" ? "h-5 w-5" : "h-6 w-6",
-                  "text-primary",
-                )}
-              />
-            ) : (
-              <TurtleIcon
-                className={cn(
-                  variant === "compact" ? "h-5 w-5" : "h-6 w-6",
-                  "text-primary",
-                )}
-              />
-            )}
-          </IconAnimation>
-        </div>
-
-        {/* Title and description */}
-        <div className="space-y-1">
-          <h3
-            className={cn(
-              "text-foreground font-medium",
-              variant === "compact" ? "text-xs" : "text-sm",
-            )}
-          >
-            {title || defaultTitle}
-          </h3>
-          <p
-            className={cn(
-              "text-muted-foreground",
-              variant === "compact" ? "text-xs" : "text-xs",
-            )}
-          >
-            {description || defaultDescription}
-          </p>
-        </div>
-
-        {/* Transaction summary (completed state) */}
-        {completed && !cancelled && (amount || token || protocol) && (
-          <div className="bg-muted/50 space-y-1 rounded-lg p-2">
-            {amount && token && (
-              <div className="text-xs font-medium">
-                {amount} {token}
-              </div>
-            )}
-            {protocol && (
-              <div className="text-muted-foreground text-xs">
-                via {protocol}
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Transaction hash link */}
-        {txHash && !cancelled && (
-          <div className="space-y-1">
-            <div className="text-muted-foreground text-xs">
-              Transaction Hash
-            </div>
-            {explorerUrl ? (
-              <a
-                href={`${explorerUrl}/tx/${txHash}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:text-primary/80 inline-flex items-center gap-2 text-xs transition-colors"
-              >
-                {formatTxHash(txHash)}
-                <ExternalLinkIcon />
-              </a>
-            ) : (
-              <div className="text-foreground font-mono text-xs">
-                {formatTxHash(txHash)}
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Estimated time (pending state) */}
-        {!completed && !cancelled && estimatedTime && (
-          <div className="text-muted-foreground text-xs">
-            Estimated time: {estimatedTime}
-          </div>
-        )}
-
-        {/* Progress steps (pending state) */}
-        {!completed && !cancelled && steps.length > 0 && (
-          <div className="border-border space-y-2 border-t pt-2">
-            <div className="text-muted-foreground text-left text-xs font-medium">
-              Progress
-            </div>
-            <div className="space-y-2">
-              {steps.map((step, index) => (
-                <div key={index} className="flex items-center gap-3 text-left">
-                  <div
-                    className={cn(
-                      "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border-2",
-                      step.completed &&
-                        "bg-primary border-primary text-primary-foreground",
-                      step.current &&
-                        !step.completed &&
-                        "border-primary text-primary animate-pulse",
-                      !step.completed &&
-                        !step.current &&
-                        "border-muted-foreground/30 text-muted-foreground",
-                    )}
-                  >
-                    {step.completed ? (
-                      <StepCheckIcon />
-                    ) : step.current ? (
-                      <div className="bg-primary h-2 w-2 animate-pulse rounded-full" />
-                    ) : (
-                      <div className="bg-muted-foreground/30 h-2 w-2 rounded-full" />
-                    )}
-                  </div>
-                  <div className="flex flex-1 items-center justify-between">
-                    <span
-                      className={cn(
-                        "text-xs",
-                        step.completed && "text-foreground",
-                        step.current &&
-                          !step.completed &&
-                          "text-foreground font-medium",
-                        !step.completed &&
-                          !step.current &&
-                          "text-muted-foreground",
-                      )}
-                    >
-                      {step.label}
-                    </span>
-                    {step.txHash && explorerUrl && (
-                      <a
-                        href={`${explorerUrl}/tx/${step.txHash}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-primary hover:text-primary/80 ml-2 inline-flex items-center gap-1 text-xs transition-colors"
-                        title={`View transaction: ${step.txHash}`}
-                      >
-                        <span className="font-mono">
-                          {step.txHash.slice(0, 6)}...{step.txHash.slice(-4)}
-                        </span>
-                        <ExternalLinkIcon size="w-3 h-3" />
-                      </a>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Action buttons (completed or cancelled state) */}
-        {(completed || cancelled) &&
-          showActions &&
-          (onViewDetails || onClose) && (
-            <div
-              className={cn(
-                "flex gap-2 pt-2",
-                variant === "compact" ? "flex-col" : "flex-row justify-center",
-              )}
-            >
-              {!cancelled && onViewDetails && (
-                <Button
-                  size={variant === "compact" ? "sm" : "default"}
-                  onClick={onViewDetails}
-                >
-                  View Details
-                </Button>
-              )}
-              {onClose && (
-                <Button
-                  variant="default"
-                  size={variant === "compact" ? "sm" : "default"}
-                  onClick={onClose}
-                >
-                  {cancelled ? "Try Again" : "Done"}
-                </Button>
-              )}
-            </div>
-          )}
-      </Card>
-    );
-  },
-);
-
-TxStatus.displayName = "TxStatus";
-
-export { TxStatus };

package/src/components/molecules/widget/asset-list/asset-filters.tsx

@@ -1,113 +0,0 @@
-import React, { useCallback } from "react";
-
-import { Badge } from "@/components/ui/badge";
-import { NavigationBar, NavigationItem } from "@/components/ui/navigation-bar";
-import { SegmentControl } from "@/components/ui";
-import { SearchBar } from "@/components/features";
-
-export interface AssetFilterItem {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-}
-
-export interface AssetFiltersProps {
-  // Available filters
-  filters: AssetFilterItem[];
-  // Currently active filter IDs
-  activeFilters: string[];
-  // Callback when filters change
-  onFiltersChange: (filterIds: string[]) => void;
-  // Display variant
-  variant?: "badge" | "navigation";
-  // Allow multiple filters (only for badge variant)
-  multipleFilters?: boolean;
-  // Search functionality
-  showSearch?: boolean;
-  searchValue?: string;
-  onSearchChange?: (value: string) => void;
-  searchPlaceholder?: string;
-  searchDebounceDelay?: number;
-}
-
-export const AssetFilters: React.FC<AssetFiltersProps> = ({
-  filters,
-  activeFilters,
-  onFiltersChange,
-  variant = "badge",
-  multipleFilters = true,
-  showSearch = true,
-  searchValue = "",
-  onSearchChange,
-  searchPlaceholder = "Search tokens...",
-  searchDebounceDelay = 300,
-}) => {
-  // Handle filter toggle
-  const handleFilterToggle = useCallback(
-    (filterId: string) => {
-      if (variant === "badge" && multipleFilters) {
-        // Toggle filter in multi-select mode
-        const newFilters = activeFilters.includes(filterId)
-          ? activeFilters.filter((id) => id !== filterId)
-          : [...activeFilters, filterId];
-        onFiltersChange(newFilters);
-      } else {
-        // Single select mode (navigation or single badge)
-        const newFilters =
-          activeFilters.includes(filterId) && activeFilters.length === 1
-            ? [] // Deselect if it's the only active filter
-            : [filterId];
-        onFiltersChange(newFilters);
-      }
-    },
-    [activeFilters, onFiltersChange, variant, multipleFilters],
-  );
-
-  return (
-    <div className="space-y-3">
-      {/* Search Bar */}
-      {showSearch && onSearchChange && (
-        <SearchBar
-          value={searchValue}
-          onChange={onSearchChange}
-          placeholder={searchPlaceholder}
-          debounce={searchDebounceDelay}
-        />
-      )}
-
-      {/* Filters */}
-      {filters.length > 0 && (
-        <>
-          {variant === "badge" ? (
-            <div className="flex flex-wrap gap-2 px-2">
-              {filters.map((filter) => (
-                <Badge
-                  key={filter.id}
-                  variant={
-                    activeFilters.includes(filter.id) ? "default" : "muted"
-                  }
-                  className="bg-muted cursor-pointer rounded-full"
-                  onClick={() => handleFilterToggle(filter.id)}
-                >
-                  {filter.icon && <span className="mr-1">{filter.icon}</span>}
-                  {filter.label}
-                </Badge>
-              ))}
-            </div>
-          ) : (
-            <SegmentControl
-              variant="segment"
-              className="w-full"
-              value={activeFilters[0]}
-              onChange={(e) => handleFilterToggle(e)}
-              items={filters.map((filter) => ({
-                value: filter.id,
-                label: filter.label,
-              }))}
-            />
-          )}
-        </>
-      )}
-    </div>
-  );
-};

package/src/components/molecules/widget/asset-list/asset-list.tsx

@@ -1,178 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { WidgetListItems } from "../widget-list-items";
-import { AssetRow } from "./asset-row";
-import {
-  AssetFilters,
-  AssetFilterItem as BaseAssetFilter,
-} from "./asset-filters";
-import { useAssetFiltering, useAssetGrouping } from "./hooks";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { cn } from "@/lib/utils";
-
-export interface Asset {
-  id: string;
-  symbol: string;
-  name: string;
-  icon: React.ReactNode;
-  balance: string;
-  balanceUSD: string;
-  chainId: string;
-  chainName: string;
-  chainIcon?: React.ReactNode;
-  address?: string;
-  decimals?: number;
-}
-
-export interface AssetFilterProp extends BaseAssetFilter {
-  filterFn: (asset: Asset) => boolean;
-}
-
-export interface AssetListProps {
-  // Data
-  assets: Asset[];
-  onAssetClick?: (asset: Asset) => void;
-
-  // Display options
-  groupByChain?: boolean;
-  showChainIcon?: boolean;
-
-  // Filtering options
-  filters?: AssetFilterProp[];
-  filterVariant?: "badge" | "navigation";
-  multipleFilters?: boolean;
-
-  // Search options
-  showSearch?: boolean;
-  searchPlaceholder?: string;
-  searchDebounceDelay?: number;
-
-  // Styling
-  className?: string;
-  itemClassName?: string;
-  emptyState?: React.ReactNode;
-}
-
-// Default filters
-const defaultFilters: AssetFilterProp[] = [
-  {
-    id: "all",
-    label: "All",
-    filterFn: (asset) => parseFloat(asset.balance) > 0,
-  },
-  {
-    id: "stablecoins",
-    label: "Stables",
-    filterFn: (asset) =>
-      ["USDC", "USDT", "DAI", "USD"].includes(asset.symbol.toUpperCase()) ||
-      ["USDC", "USDT", "DAI", "USD"].includes(asset.name.toUpperCase()),
-  },
-  {
-    id: "eth",
-    label: "ETH",
-    filterFn: (asset) =>
-      ["ETH"].includes(asset.symbol.toUpperCase()) ||
-      ["ETH"].includes(asset.name.toUpperCase()),
-  },
-  {
-    id: "btc",
-    label: "BTC",
-    filterFn: (asset) =>
-      ["BTC"].includes(asset.symbol.toUpperCase()) ||
-      ["BTC"].includes(asset.name.toUpperCase()),
-  },
-];
-
-export const AssetList: React.FC<AssetListProps> = ({
-  assets,
-  onAssetClick,
-  groupByChain = true,
-  showChainIcon = false,
-  filters = defaultFilters,
-  filterVariant = "badge",
-  multipleFilters = false,
-  showSearch = true,
-  searchPlaceholder = "Search tokens...",
-  searchDebounceDelay = 300,
-  className,
-  itemClassName,
-  emptyState,
-}) => {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [activeFilterIds, setActiveFilterIds] = useState<string[]>(["all"]);
-
-  // Use custom hooks for filtering and grouping
-  const filteredAssets = useAssetFiltering({
-    assets,
-    searchQuery,
-    activeFilterIds,
-    filters,
-  });
-
-  const groups = useAssetGrouping({
-    assets: filteredAssets,
-    groupByChain,
-  });
-
-  const renderAsset = (asset: Asset) => (
-    <AssetRow
-      icon={
-        showChainIcon && asset.chainIcon ? (
-          <div className="relative">
-            {asset.icon}
-            <div className="bg-background border-border absolute -right-1 -bottom-1 flex h-4 w-4 items-center justify-center rounded-full border">
-              {asset.chainIcon}
-            </div>
-          </div>
-        ) : (
-          asset.icon
-        )
-      }
-      symbol={asset.symbol}
-      name={asset.name}
-      balance={asset.balance}
-      balanceUSD={asset.balanceUSD}
-      onClick={() => onAssetClick?.(asset)}
-      className={itemClassName}
-    />
-  );
-
-  return (
-    <div className={cn("flex h-full flex-col", className)}>
-      <div className="mb-8 flex-shrink-0">
-        <AssetFilters
-          filters={filters.map(({ filterFn, ...rest }) => rest)}
-          activeFilters={activeFilterIds}
-          onFiltersChange={setActiveFilterIds}
-          variant={filterVariant}
-          multipleFilters={multipleFilters}
-          showSearch={showSearch}
-          searchValue={searchQuery}
-          onSearchChange={setSearchQuery}
-          searchPlaceholder={searchPlaceholder}
-          searchDebounceDelay={searchDebounceDelay}
-        />
-      </div>
-
-      <ScrollArea className="flex-1">
-        <div className="pb-4">
-          <WidgetListItems
-            groups={groups}
-            renderItem={renderAsset}
-            getItemKey={(asset) => asset.id}
-            showGroupHeaders={groupByChain}
-            emptyState={
-              emptyState || (
-                <div className="text-muted-foreground py-8 text-center">
-                  {searchQuery || activeFilterIds.length > 0
-                    ? "No assets match your filters"
-                    : "No assets available"}
-                </div>
-              )
-            }
-          />
-        </div>
-      </ScrollArea>
-    </div>
-  );
-};

package/src/components/molecules/widget/asset-list/asset-row.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-import { cn } from "@/lib/utils";
-
-export interface AssetRowProps {
-  icon: React.ReactNode;
-  symbol: string;
-  name: string;
-  balance: string;
-  balanceUSD: string;
-  onClick?: () => void;
-  className?: string;
-}
-
-export const AssetRow: React.FC<AssetRowProps> = ({
-  icon,
-  symbol,
-  name,
-  balance,
-  balanceUSD,
-  onClick,
-  className,
-}) => {
-  return (
-    <div
-      onClick={onClick}
-      className={cn(
-        "flex cursor-pointer items-center justify-between rounded-lg px-3.5 py-2.5 transition-colors",
-        "hover:bg-muted-foreground/60",
-        className,
-      )}
-    >
-      <div className="flex items-center gap-3">
-        <span className="text-xl">{icon}</span>
-        <div>
-          <div className="text-sm font-medium">{symbol}</div>
-          <div className="text-muted-foreground text-xs">{name}</div>
-        </div>
-      </div>
-      <div className="text-right">
-        <div className="text-sm font-medium">{balance}</div>
-        <div className="text-muted-foreground text-xs">({balanceUSD})</div>
-      </div>
-    </div>
-  );
-};

package/src/components/molecules/widget/asset-list/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from "./use-asset-filtering";
-export * from "./use-asset-grouping";

package/src/components/molecules/widget/asset-list/hooks/use-asset-filtering.ts

@@ -1,44 +0,0 @@
-import { useMemo } from "react";
-import { Asset, AssetFilterProp } from "../asset-list";
-
-interface UseAssetFilteringProps {
-  assets: Asset[];
-  searchQuery: string;
-  activeFilterIds: string[];
-  filters: AssetFilterProp[];
-}
-
-export function useAssetFiltering({
-  assets,
-  searchQuery,
-  activeFilterIds,
-  filters,
-}: UseAssetFilteringProps): Asset[] {
-  return useMemo(() => {
-    let result = assets;
-
-    // Apply search filter
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      result = result.filter(
-        (asset) =>
-          asset.symbol.toLowerCase().includes(query) ||
-          asset.name.toLowerCase().includes(query) ||
-          asset.address?.toLowerCase().includes(query),
-      );
-    }
-
-    // Apply active filters
-    if (activeFilterIds.length > 0) {
-      const activeFilterFns = filters
-        .filter((f) => activeFilterIds.includes(f.id))
-        .map((f) => f.filterFn);
-
-      result = result.filter((asset) =>
-        activeFilterFns.every((filterFn) => filterFn(asset)),
-      );
-    }
-
-    return result;
-  }, [assets, searchQuery, activeFilterIds, filters]);
-}