@turtleclub/ui 0.7.0-beta.33 → 0.7.0-beta.35

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

@@ -1,87 +0,0 @@
-import { useMemo } from "react";
-import { Asset } from "../asset-list";
-import { WidgetListGroup } from "../../widget-list-items";
-
-interface UseAssetGroupingProps {
-  assets: Asset[];
-  groupByChain: boolean;
-}
-
-const CHAIN_ICONS: Record<number, string> = {
-  1: "https://storage.googleapis.com/turtle-assets/tokens/eth.png",
-  747474:
-    "https://storage.googleapis.com/turtle-assets/partners/polygon/katana.svg",
-};
-
-export function useAssetGrouping({
-  assets,
-  groupByChain,
-}: UseAssetGroupingProps): WidgetListGroup<Asset>[] {
-  return useMemo(() => {
-    // First, sort all assets by balance (USD value) in descending order
-    const sortedAssets = [...assets].sort((a, b) => {
-      // Parse balance USD values, removing $ and commas
-      const balanceA = parseFloat(a.balanceUSD.replace(/[$,]/g, "") || "0");
-      const balanceB = parseFloat(b.balanceUSD.replace(/[$,]/g, "") || "0");
-      return balanceB - balanceA;
-    });
-
-    if (!groupByChain) {
-      return [
-        {
-          id: "all-assets",
-          items: sortedAssets,
-        },
-      ];
-    }
-
-    // Group by chain
-    const chainGroups = sortedAssets.reduce(
-      (acc, asset) => {
-        if (!acc[asset.chainId]) {
-          acc[asset.chainId] = {
-            id: asset.chainId,
-            title: asset.chainName,
-            // Improve this adding chain icon to balances data
-            icon: CHAIN_ICONS[Number(asset.chainId)],
-            items: [],
-          };
-        }
-        acc[asset.chainId].items.push(asset);
-        return acc;
-      },
-      {} as Record<string, WidgetListGroup<Asset>>,
-    );
-
-    console.log("chainGroups", chainGroups);
-
-    // Sort groups by: 1) highest balance in group, 2) number of tokens with balance
-    const groupsArray = Object.values(chainGroups);
-    groupsArray.sort((a, b) => {
-      // Get the highest balance in each group (items are already sorted)
-      const maxBalanceA =
-        a.items.length > 0
-          ? parseFloat(a.items[0].balanceUSD.replace(/[$,]/g, "") || "0")
-          : 0;
-      const maxBalanceB =
-        b.items.length > 0
-          ? parseFloat(b.items[0].balanceUSD.replace(/[$,]/g, "") || "0")
-          : 0;
-
-      // If highest balances are equal, sort by number of tokens with non-zero balance
-      if (maxBalanceA === maxBalanceB) {
-        const nonZeroCountA = a.items.filter(
-          (asset) => parseFloat(asset.balance) > 0,
-        ).length;
-        const nonZeroCountB = b.items.filter(
-          (asset) => parseFloat(asset.balance) > 0,
-        ).length;
-        return nonZeroCountB - nonZeroCountA;
-      }
-
-      return maxBalanceB - maxBalanceA;
-    });
-
-    return groupsArray;
-  }, [assets, groupByChain]);
-}

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

@@ -1,3 +0,0 @@
-export * from "./asset-list";
-export * from "./asset-row";
-export * from "./asset-filters";

package/src/components/molecules/widget/base-selector.tsx

@@ -1,121 +0,0 @@
-"use client";
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import type { ReactNode } from "react";
-
-// Minimal Token type - only the fields we need
-interface TokenLike {
-  symbol: string;
-  logoUrl?: string;
-}
-
-interface BaseSelectorProps {
-  icon?: React.ReactNode;
-  text: string;
-  onClick?: () => void;
-  className?: string;
-  variant?: "default" | "bordered";
-  size?: "xs" | "sm" | "default";
-  placeholder?: string;
-  showIcon?: boolean;
-  // New: Accept token directly
-  token?: TokenLike;
-}
-
-// Utility convert icon url to img element
-const iconUrlToImg = (iconUrl?: string, alt: string = ""): ReactNode => {
-  return iconUrl ? (
-    <img src={iconUrl} alt={alt} className="h-4 w-4 rounded-full" />
-  ) : (
-    <div className="bg-muted flex h-4 w-4 items-center justify-center rounded-full text-xs">
-      {alt.charAt(0)}
-    </div>
-  );
-};
-
-// Generate icon from token
-const getTokenIcon = (token: TokenLike): ReactNode => {
-  return iconUrlToImg(token.logoUrl, token.symbol);
-};
-
-const BaseSelector = ({
-  icon,
-  text,
-  onClick,
-  className,
-  variant = "bordered",
-  size = "default",
-  placeholder = "Select",
-  showIcon = true,
-  token,
-}: BaseSelectorProps) => {
-  // Determine the actual icon to display
-  const displayIcon = token ? getTokenIcon(token) : icon;
-  const displayText = token?.symbol || text;
-  const hasContent = displayText || displayIcon;
-
-  return (
-    <div
-      onClick={onClick}
-      className={cn(
-        "bg-muted hover:bg-accent/70 text-foreground inline-flex w-auto min-w-[80px] cursor-pointer items-center justify-between rounded-full font-medium",
-        "focus:ring-primary/20 transition-colors focus:ring-2 focus:outline-none",
-        variant === "bordered" && "border-border border",
-        size === "xs" && "h-7 min-w-[80px] gap-2 px-2.5 py-1",
-        size === "sm" && "h-8 min-w-[75px] gap-1.5 px-3 py-1.5",
-        size === "default" && "h-10 min-w-[80px] gap-1.5 px-3 py-2",
-        className,
-      )}
-      role="button"
-      tabIndex={0}
-    >
-      {hasContent ? (
-        <div
-          className={cn(
-            "flex items-center",
-            size === "xs" && "gap-2",
-            size === "sm" && "gap-1.5",
-            size === "default" && "gap-1.5",
-          )}
-        >
-          {showIcon && displayIcon && (
-            <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",
-              )}
-            >
-              {displayIcon}
-            </span>
-          )}
-          <span
-            className={cn(
-              "font-medium",
-              size === "xs" && "text-xs",
-              size === "sm" && "text-sm",
-              size === "default" && "text-sm",
-            )}
-          >
-            {displayText}
-          </span>
-        </div>
-      ) : (
-        <span
-          className={cn(
-            "text-muted-foreground",
-            size === "xs" && "text-xs",
-            size === "sm" && "text-sm",
-            size === "default" && "text-sm",
-          )}
-        >
-          {placeholder}
-        </span>
-      )}
-    </div>
-  );
-};
-
-export { BaseSelector, iconUrlToImg, getTokenIcon };
-export type { BaseSelectorProps, TokenLike };

package/src/components/molecules/widget/campaign-item.tsx

@@ -1,82 +0,0 @@
-import * as React from "react";
-import { LabelWithIcon } from "@/components/ui/label-with-icon";
-import {
-  WidgetItem,
-  WidgetItemTop,
-  WidgetItemBottom,
-  WidgetItemLeft,
-  WidgetItemRight,
-} from "./widget-item";
-import { IconList, IconListItem } from "@/components/ui/icon-list";
-import { WidgetItemStats } from "./widget-item-stats";
-
-interface CampaignItemValue {
-  icon: string; // icon url
-  name: string;
-  aprRange: string;
-  tvl: string;
-  participants?: string;
-  rewards?: IconListItem[];
-  chains?: IconListItem[];
-}
-
-interface CampaignItemProps extends React.ComponentProps<"div"> {
-  value: CampaignItemValue;
-  onSelect?: () => void;
-  selected?: boolean;
-}
-
-const CampaignItem = React.forwardRef<HTMLDivElement, CampaignItemProps>(
-  ({ value, onSelect, selected = false, ...props }, ref) => {
-    const { icon, name, tvl, participants, aprRange, rewards, chains } = value;
-
-    // TODO: Refactor and add default icon here, maybe turtle icon?
-    const defaultIcon = (
-      <div className="bg-primary/20 flex h-6 w-6 items-center justify-center rounded-full">
-        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z" />
-        </svg>
-      </div>
-    );
-
-    const stats = [
-      { label: "TVL", value: tvl },
-      { label: "Participants", value: participants || "" },
-    ];
-
-    return (
-      <WidgetItem ref={ref} onSelect={onSelect} selected={selected} {...props}>
-        <WidgetItemTop>
-          <WidgetItemLeft>
-            <LabelWithIcon
-              icon={icon || defaultIcon}
-              textSize="base"
-              iconSize="lg"
-            >
-              {name}
-            </LabelWithIcon>
-          </WidgetItemLeft>
-          <WidgetItemRight>
-            <span className="text-md text-foreground font-semibold">
-              {aprRange || "N/A"}
-            </span>
-          </WidgetItemRight>
-        </WidgetItemTop>
-        <WidgetItemBottom>
-          <WidgetItemLeft>
-            {chains && <IconList items={chains} label="Chains" size="sm" />}
-            <WidgetItemStats stats={stats} />
-          </WidgetItemLeft>
-          <WidgetItemRight className="flex flex-col items-end gap-1">
-            {rewards && <IconList items={rewards} label="Rewards" size="sm" />}
-          </WidgetItemRight>
-        </WidgetItemBottom>
-      </WidgetItem>
-    );
-  },
-);
-
-CampaignItem.displayName = "CampaignItem";
-
-export { CampaignItem };
-export type { CampaignItemProps, CampaignItemValue };

package/src/components/molecules/widget/deal-item.tsx

@@ -1,92 +0,0 @@
-import * as React from "react";
-import { LabelWithIcon } from "@/components/ui/label-with-icon";
-import {
-  WidgetItem,
-  WidgetItemTop,
-  WidgetItemBottom,
-  WidgetItemLeft,
-  WidgetItemRight,
-} from "./widget-item";
-import { IconList, IconListItem } from "@/components/ui/icon-list";
-import { WidgetItemStats } from "./widget-item-stats";
-import { OpportunityType } from "../opportunity";
-import { SparkleIcon, SparklesIcon } from "lucide-react";
-
-interface DealItemValue {
-  icon: string;
-  name: string;
-  apr: string;
-  tvl: string;
-  turtleBoost: string;
-  chains?: IconListItem[];
-  category: string;
-}
-
-interface DealItemProps extends React.ComponentProps<"div"> {
-  value: DealItemValue;
-  onSelect?: () => void;
-  selected?: boolean;
-}
-
-const DealItem = React.forwardRef<HTMLDivElement, DealItemProps>(
-  ({ value, onSelect, selected = false, ...props }, ref) => {
-    const { icon, name, chains, tvl, turtleBoost, category } = value;
-
-    const defaultIcon = (
-      <div className="bg-primary/20 flex h-6 w-6 items-center justify-center rounded-full">
-        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z" />
-        </svg>
-      </div>
-    );
-
-    const stats = React.useMemo(
-      () => [
-        { label: "TVL", value: tvl },
-        {
-          label: "Turtle Boost",
-          value: turtleBoost,
-          icon: <SparklesIcon size={12} />,
-        },
-      ],
-      [tvl, turtleBoost],
-    );
-
-    return (
-      <WidgetItem ref={ref} onSelect={onSelect} selected={selected} {...props}>
-        <WidgetItemTop>
-          <WidgetItemLeft>
-            <LabelWithIcon
-              icon={icon || defaultIcon}
-              textSize="base"
-              iconSize="lg"
-            >
-              {name}
-            </LabelWithIcon>
-          </WidgetItemLeft>
-          <WidgetItemRight>
-            <span className="text-md text-foreground font-semibold">
-              {turtleBoost}
-            </span>
-          </WidgetItemRight>
-        </WidgetItemTop>
-        <WidgetItemBottom>
-          <WidgetItemLeft>
-            <WidgetItemStats stats={stats} />
-            {/* <OpportunityType type={"Boosted Deal"} /> */}
-          </WidgetItemLeft>
-          <WidgetItemRight>
-            {chains && (
-              <IconList items={chains} label="Available on" size="sm" />
-            )}
-          </WidgetItemRight>
-        </WidgetItemBottom>
-      </WidgetItem>
-    );
-  },
-);
-
-DealItem.displayName = "DealItem";
-
-export { DealItem };
-export type { DealItemProps };

package/src/components/molecules/widget/index.ts

@@ -1,36 +0,0 @@
-export * from "./base-selector";
-export * from "./widget-list-items";
-export * from "./asset-list";
-
-// Base components
-export {
-  WidgetItem,
-  WidgetItemTop,
-  WidgetItemBottom,
-  WidgetItemLeft,
-  WidgetItemRight,
-} from "./widget-item";
-export type {
-  WidgetItemProps,
-  WidgetItemTopProps,
-  WidgetItemBottomProps,
-  WidgetItemLeftProps,
-  WidgetItemRightProps,
-} from "./widget-item";
-
-// Helper components
-export { WidgetItemStats } from "./widget-item-stats";
-export type { WidgetItemStatsProps, Stat } from "./widget-item-stats";
-
-// Item components
-export { OpportunityItem } from "./opportunity-item";
-export type {
-  OpportunityItemProps,
-  OpportunityItemValue,
-} from "./opportunity-item";
-
-export { CampaignItem } from "./campaign-item";
-export type { CampaignItemProps, CampaignItemValue } from "./campaign-item";
-
-export { DealItem } from "./deal-item";
-export type { DealItemProps } from "./deal-item";

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

@@ -1,105 +0,0 @@
-import * as React from "react";
-import { LabelWithIcon } from "@/components/ui/label-with-icon";
-import {
-  WidgetItem,
-  WidgetItemTop,
-  WidgetItemBottom,
-  WidgetItemLeft,
-  WidgetItemRight,
-} from "./widget-item";
-import { IconList, IconListItem } from "@/components/ui/icon-list";
-import { WidgetItemStats } from "./widget-item-stats";
-import { SparklesIcon } from "lucide-react";
-
-interface OpportunityItemValue {
-  icon: string;
-  name: string;
-  tvl: string;
-  apr: string;
-  incentives: string[] | IconListItem[];
-  aprBreakdown: {
-    name: string;
-    apr: number;
-    description: string;
-    iconUrl: string;
-    boost: boolean;
-  }[];
-  chain: IconListItem;
-  turtleBoost: string | null;
-  partner: { icon: string; name: string } | null;
-}
-
-interface OpportunityItemProps extends React.ComponentProps<"div"> {
-  value: OpportunityItemValue;
-  incentives?: string[] | IconListItem[];
-  chains?: IconListItem[];
-  onSelect?: () => void;
-  selected?: boolean;
-}
-
-const OpportunityItem = React.forwardRef<HTMLDivElement, OpportunityItemProps>(
-  ({ value, onSelect, selected = false, ...props }, ref) => {
-    const { icon, name, tvl, apr, incentives, chain, turtleBoost } = value;
-
-    const defaultIcon = (
-      <div className="bg-primary/20 flex h-6 w-6 items-center justify-center rounded-full">
-        <svg className="h-4 w-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 stats = React.useMemo(() => {
-      if (!turtleBoost) return [{ label: "TVL", value: tvl || "" }];
-      return [
-        { label: "TVL", value: tvl || "" },
-        {
-          label: "Turtle Boost",
-          value: turtleBoost,
-          icon: <SparklesIcon size={12} />,
-        },
-      ];
-    }, []);
-
-    return (
-      <WidgetItem ref={ref} onSelect={onSelect} selected={selected} {...props}>
-        <WidgetItemTop>
-          <WidgetItemLeft>
-            <LabelWithIcon
-              icon={icon || defaultIcon}
-              textSize="base"
-              iconSize="lg"
-            >
-              {name}
-            </LabelWithIcon>
-          </WidgetItemLeft>
-          <WidgetItemRight>
-            {apr && (
-              <span className="text-md text-foreground font-semibold">
-                {apr}
-              </span>
-            )}
-          </WidgetItemRight>
-        </WidgetItemTop>
-        <WidgetItemBottom>
-          <WidgetItemLeft>
-            {chain && <IconList items={[chain]} label="Chains" size="sm" />}
-            <WidgetItemStats stats={stats} />
-          </WidgetItemLeft>
-          <WidgetItemRight>
-            <div className="flex flex-col items-end gap-1">
-              {incentives && (
-                <IconList items={incentives} label="Rewards" size="sm" />
-              )}
-            </div>
-          </WidgetItemRight>
-        </WidgetItemBottom>
-      </WidgetItem>
-    );
-  },
-);
-
-OpportunityItem.displayName = "OpportunityItem";
-
-export { OpportunityItem };
-export type { OpportunityItemProps, OpportunityItemValue };

package/src/components/molecules/widget/widget-item-stats.tsx

@@ -1,50 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-interface Stat {
-  label: string;
-  value: string;
-  icon?: React.ReactNode;
-}
-
-interface WidgetItemStatsProps extends React.ComponentProps<"div"> {
-  stats: Stat[];
-  separator?: string;
-}
-
-const WidgetItemStats = React.forwardRef<HTMLDivElement, WidgetItemStatsProps>(
-  ({ className, stats, separator = " | ", ...props }, ref) => {
-    const validStats = stats.filter((stat) => stat.value);
-
-    if (validStats.length === 0) return null;
-
-    return (
-      <div
-        ref={ref}
-        className={cn("text-muted-foreground flex gap-2 text-xs", className)}
-        {...props}
-      >
-        {validStats.map((stat, index) => (
-          <React.Fragment key={stat.label}>
-            {index > 0 && <span>{separator}</span>}
-            <span className="flex items-center justify-center gap-1">
-              <span>{stat.label}: </span>
-              {stat.icon ? (
-                <span className="flex gap-1">
-                  {stat.icon} {stat.value}
-                </span>
-              ) : (
-                <span>{stat.value}</span>
-              )}
-            </span>
-          </React.Fragment>
-        ))}
-      </div>
-    );
-  },
-);
-
-WidgetItemStats.displayName = "WidgetItemStats";
-
-export { WidgetItemStats };
-export type { WidgetItemStatsProps, Stat };