@turtleclub/ui 0.7.0-beta.0 → 0.7.0-beta.2

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

@@ -3,6 +3,12 @@ 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;
@@ -12,6 +18,8 @@ interface BaseSelectorProps {
   size?: "xs" | "sm" | "default";
   placeholder?: string;
   showIcon?: boolean;
+  // New: Accept token directly
+  token?: TokenLike;
 }
 
 // Utility convert icon url to img element
@@ -25,6 +33,11 @@ const iconUrlToImg = (iconUrl?: string, alt: string = ""): ReactNode => {
   );
 };
 
+// Generate icon from token
+const getTokenIcon = (token: TokenLike): ReactNode => {
+  return iconUrlToImg(token.logoUrl, token.symbol);
+};
+
 const BaseSelector = ({
   icon,
   text,
@@ -34,8 +47,12 @@ const BaseSelector = ({
   size = "default",
   placeholder = "Select",
   showIcon = true,
+  token,
 }: BaseSelectorProps) => {
-  const hasContent = text || icon;
+  // Determine the actual icon to display
+  const displayIcon = token ? getTokenIcon(token) : icon;
+  const displayText = token?.symbol || text;
+  const hasContent = displayText || displayIcon;
 
   return (
     <div
@@ -61,7 +78,7 @@ const BaseSelector = ({
             size === "default" && "gap-1.5",
           )}
         >
-          {showIcon && icon && (
+          {showIcon && displayIcon && (
             <span
               className={cn(
                 "flex items-center justify-center",
@@ -70,7 +87,7 @@ const BaseSelector = ({
                 size === "default" && "h-4 w-5",
               )}
             >
-              {icon}
+              {displayIcon}
             </span>
           )}
           <span
@@ -81,7 +98,7 @@ const BaseSelector = ({
               size === "default" && "text-sm",
             )}
           >
-            {text}
+            {displayText}
           </span>
         </div>
       ) : (
@@ -100,5 +117,5 @@ const BaseSelector = ({
   );
 };
 
-export { BaseSelector, iconUrlToImg };
-export type { BaseSelectorProps };
+export { BaseSelector, iconUrlToImg, getTokenIcon };
+export type { BaseSelectorProps, TokenLike };

package/src/components/ui/combobox.tsx

@@ -12,7 +12,11 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
@@ -85,7 +89,10 @@ interface ComboboxOption<T = string> {
  * />
  */
 interface ComboboxProps<T = string>
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "animationConfig" | "defaultValue"> {
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "animationConfig" | "defaultValue"
+  > {
   /**
    * An array of option objects or groups to be displayed in the multi-select component.
    */
@@ -230,7 +237,10 @@ export interface ComboboxRef {
   focus: () => void;
 }
 
-const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<ComboboxRef>) => {
+const ComboboxComponent = <T = string,>(
+  props: ComboboxProps<T>,
+  ref: React.Ref<ComboboxRef>,
+) => {
   const {
     options,
     onValueChange,
@@ -283,7 +293,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
         setTimeout(() => setPoliteMessage(""), 100);
       }
     },
-    []
+    [],
   );
 
   const multiSelectId = React.useId();
@@ -324,10 +334,12 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
         }
       },
     }),
-    [resetToDefault, selectedValue, onValueChange]
+    [resetToDefault, onValueChange],
   );
 
-  const [screenSize, setScreenSize] = React.useState<"mobile" | "tablet" | "desktop">("desktop");
+  const [screenSize, setScreenSize] = React.useState<
+    "mobile" | "tablet" | "desktop"
+  >("desktop");
 
   React.useEffect(() => {
     if (typeof window === "undefined") return;
@@ -380,30 +392,31 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
 
   const getAllOptions = React.useCallback((): ComboboxOption<T>[] => {
     if (options.length === 0) return [];
-    const allOptions: ComboboxOption<T>[] = options;
+
     const valueSet = new Set<T>();
-    const duplicates: T[] = [];
     const uniqueOptions: ComboboxOption<T>[] = [];
-    allOptions.forEach((option) => {
-      if (valueSet.has(option.value)) {
-        duplicates.push(option.value);
-      } else {
+
+    options.forEach((option) => {
+      if (!valueSet.has(option.value)) {
         valueSet.add(option.value);
         uniqueOptions.push(option);
       }
     });
-    return allOptions;
+
+    return uniqueOptions;
   }, [options]);
 
   const getOptionByValue = React.useCallback(
     (value: T): ComboboxOption<T> | undefined => {
       const option = getAllOptions().find((option) => option.value === value);
       if (!option && process.env.NODE_ENV === "development") {
-        console.warn(`Combobox: Option with value "${value}" not found in options list`);
+        console.warn(
+          `Combobox: Option with value "${value}" not found in options list`,
+        );
       }
       return option;
     },
-    [getAllOptions]
+    [getAllOptions],
   );
 
   const filteredOptions = React.useMemo(() => {
@@ -413,7 +426,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
     return options.filter(
       (option) =>
         option.label.toLowerCase().includes(searchValue.toLowerCase()) ||
-        String(option.value).toLowerCase().includes(searchValue.toLowerCase())
+        String(option.value).toLowerCase().includes(searchValue.toLowerCase()),
     );
   }, [options, searchValue, searchable]);
 
@@ -464,7 +477,9 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
 
     if (isPopoverOpen !== prevIsOpen.current) {
       if (isPopoverOpen) {
-        announce(`Dropdown opened. ${totalOptions} options available. Use arrow keys to navigate.`);
+        announce(
+          `Dropdown opened. ${totalOptions} options available. Use arrow keys to navigate.`,
+        );
       } else {
         announce("Dropdown closed.");
       }
@@ -476,11 +491,11 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
         const filteredCount = allOptions.filter(
           (opt) =>
             opt.label.toLowerCase().includes(searchValue.toLowerCase()) ||
-            String(opt.value).toLowerCase().includes(searchValue.toLowerCase())
+            String(opt.value).toLowerCase().includes(searchValue.toLowerCase()),
         ).length;
 
         announce(
-          `${filteredCount} option${filteredCount === 1 ? "" : "s"} found for "${searchValue}"`
+          `${filteredCount} option${filteredCount === 1 ? "" : "s"} found for "${searchValue}"`,
         );
       }
       prevSearchValue.current = searchValue;
@@ -498,9 +513,14 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
         </div>
       </div>
 
-      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>
+      <Popover
+        open={isPopoverOpen}
+        onOpenChange={setIsPopoverOpen}
+        modal={modalPopover}
+      >
         <div id={triggerDescriptionId} className="sr-only">
-          Multi-select dropdown. Use arrow keys to navigate, Enter to select, and Escape to close.
+          Multi-select dropdown. Use arrow keys to navigate, Enter to select,
+          and Escape to close.
         </div>
         <PopoverTrigger asChild>
           <Button
@@ -521,7 +541,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
               responsiveSettings.compactMode && "h-8 text-sm",
               screenSize === "mobile" && "h-12 text-base",
               disabled && "cursor-not-allowed opacity-50",
-              className
+              className,
             )}
             style={{
               ...widthConstraints,
@@ -532,7 +552,9 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
               <div className="mx-auto flex w-full items-center justify-between">
                 <div className="flex items-center gap-2">
                   {(() => {
-                    const selectedOption = options.find((op) => op.value === selectedValue);
+                    const selectedOption = options.find(
+                      (op) => op.value === selectedValue,
+                    );
                     return (
                       <>
                         {selectedOption?.icon && (
@@ -541,7 +563,9 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
                             aria-hidden="true"
                           />
                         )}
-                        <span className="text-foreground text-sm">{selectedOption?.label}</span>
+                        <span className="text-foreground text-sm">
+                          {selectedOption?.label}
+                        </span>
                       </>
                     );
                   })()}
@@ -565,7 +589,10 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
                   >
                     <XIcon className="size-3.5" />
                   </div>
-                  <Separator orientation="vertical" className="flex h-full min-h-6" />
+                  <Separator
+                    orientation="vertical"
+                    className="flex h-full min-h-6"
+                  />
                   <ChevronDown
                     className="text-muted-foreground mx-2 h-4 cursor-pointer"
                     aria-hidden="true"
@@ -574,7 +601,9 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
               </div>
             ) : (
               <div className="mx-auto flex w-full items-center justify-between">
-                <span className="text-muted-foreground text-sm">{placeholder}</span>
+                <span className="text-muted-foreground text-sm">
+                  {placeholder}
+                </span>
                 <ChevronDown className="text-muted-foreground mx-2 h-4 cursor-pointer" />
               </div>
             )}
@@ -590,7 +619,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
             screenSize === "mobile" && "w-[85vw] max-w-[280px]",
             screenSize === "tablet" && "w-[70vw] max-w-md",
             screenSize === "desktop" && "min-w-[300px]",
-            popoverClassName
+            popoverClassName,
           )}
           style={{
             maxWidth: `min(${widthConstraints.maxWidth}, 85vw)`,
@@ -600,7 +629,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
           align="start"
           onEscapeKeyDown={() => setIsPopoverOpen(false)}
         >
-          <Command>
+          <Command shouldFilter={false}>
             {searchable && (
               <CommandInput
                 placeholder="Search options..."
@@ -620,10 +649,12 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
               className={cn(
                 "multiselect-scrollbar max-h-[40vh] overflow-y-auto",
                 screenSize === "mobile" && "max-h-[50vh]",
-                "overscroll-behavior-y-contain"
+                "overscroll-behavior-y-contain",
               )}
             >
-              <CommandEmpty>{emptyIndicator || "No results found."}</CommandEmpty>{" "}
+              <CommandEmpty>
+                {emptyIndicator || "No results found."}
+              </CommandEmpty>{" "}
               <CommandGroup>
                 {filteredOptions.map((option) => {
                   const isSelected = selectedValue === option.value;
@@ -639,7 +670,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
                       }${option.disabled ? ", disabled" : ""}`}
                       className={cn(
                         "cursor-pointer",
-                        option.disabled && "cursor-not-allowed opacity-50"
+                        option.disabled && "cursor-not-allowed opacity-50",
                       )}
                       disabled={option.disabled}
                     >
@@ -650,7 +681,9 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
                         />
                       )}
                       <span className="grow">{option.label}</span>
-                      {isSelected ? <CheckIcon className="text-muted-foreground size-3.5" /> : null}
+                      {isSelected ? (
+                        <CheckIcon className="text-muted-foreground size-3.5" />
+                      ) : null}
                     </CommandItem>
                   );
                 })}
@@ -662,7 +695,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
           <WandSparkles
             className={cn(
               "text-foreground bg-background my-2 h-3 w-3 cursor-pointer",
-              isAnimating ? "" : "text-muted-foreground"
+              isAnimating ? "" : "text-muted-foreground",
             )}
             onClick={() => setIsAnimating(!isAnimating)}
           />
@@ -674,7 +707,7 @@ const ComboboxComponent = <T = string,>(props: ComboboxProps<T>, ref: React.Ref<
 
 // Create the forwardRef wrapper with proper generic typing
 const ComboboxForwardRef = React.forwardRef(ComboboxComponent) as <T = string>(
-  props: ComboboxProps<T> & { ref?: React.Ref<ComboboxRef> }
+  props: ComboboxProps<T> & { ref?: React.Ref<ComboboxRef> },
 ) => React.ReactElement;
 
 // Set displayName on a mutable object

package/src/components/ui/tooltip.tsx

@@ -50,7 +50,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-neutral-alpha-10 border-border z-50 origin-(--radix-tooltip-content-transform-origin) rounded-lg border p-2 backdrop-blur-lg transition-all",
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-neutral-alpha-10 border-border z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-lg border p-2 text-xs backdrop-blur-lg transition-all",
           gradient === "primary" && "border-gradient-primary",
           gradient === "white" && "border-gradient-white",
           className,

package/dist/types/components/molecules/opportunity/opportunity-list/hooks/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./use-opportunity-filtering";
-export * from "./use-opportunity-grouping";
-//# sourceMappingURL=index.d.ts.map

package/dist/types/components/molecules/opportunity/opportunity-list/hooks/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/molecules/opportunity/opportunity-list/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC"}

package/dist/types/components/molecules/opportunity/opportunity-list/hooks/use-opportunity-filtering.d.ts

@@ -1,11 +0,0 @@
-import { OpportunityFilter } from "../opportunity-list";
-import { OpportunityItemValue as Opportunity } from "../../../widget/opportunity-item";
-interface UseOpportunityFilteringProps {
-    opportunities: Opportunity[];
-    searchQuery: string;
-    activeFilterIds: string[];
-    filters: OpportunityFilter[];
-}
-export declare function useOpportunityFiltering({ opportunities, searchQuery, activeFilterIds, filters, }: UseOpportunityFilteringProps): Opportunity[];
-export {};
-//# sourceMappingURL=use-opportunity-filtering.d.ts.map

package/dist/types/components/molecules/opportunity/opportunity-list/hooks/use-opportunity-filtering.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-opportunity-filtering.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/molecules/opportunity/opportunity-list/hooks/use-opportunity-filtering.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAEvF,UAAU,4BAA4B;IACpC,aAAa,EAAE,WAAW,EAAE,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAC9B;AAED,wBAAgB,uBAAuB,CAAC,EACtC,aAAa,EACb,WAAW,EACX,eAAe,EACf,OAAO,GACR,EAAE,4BAA4B,GAAG,WAAW,EAAE,CA4B9C"}

package/dist/types/components/molecules/opportunity/opportunity-list/hooks/use-opportunity-grouping.d.ts

@@ -1,9 +0,0 @@
-import { OpportunityItemValue } from "../../../widget/opportunity-item";
-import { WidgetListGroup } from "../../../widget/widget-list-items";
-interface UseOpportunityGroupingProps {
-    opportunities: OpportunityItemValue[];
-    groupBy: "none" | "partner" | "chain";
-}
-export declare function useOpportunityGrouping({ opportunities, groupBy, }: UseOpportunityGroupingProps): WidgetListGroup<OpportunityItemValue>[];
-export {};
-//# sourceMappingURL=use-opportunity-grouping.d.ts.map

package/dist/types/components/molecules/opportunity/opportunity-list/hooks/use-opportunity-grouping.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-opportunity-grouping.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/molecules/opportunity/opportunity-list/hooks/use-opportunity-grouping.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,UAAU,2BAA2B;IACnC,aAAa,EAAE,oBAAoB,EAAE,CAAC;IACtC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;CACvC;AAED,wBAAgB,sBAAsB,CAAC,EACrC,aAAa,EACb,OAAO,GACR,EAAE,2BAA2B,GAAG,eAAe,CAAC,oBAAoB,CAAC,EAAE,CAwEvE"}

package/dist/types/components/molecules/opportunity/opportunity-list/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./opportunity-list";
-//# sourceMappingURL=index.d.ts.map

package/dist/types/components/molecules/opportunity/opportunity-list/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/molecules/opportunity/opportunity-list/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/types/components/molecules/opportunity/opportunity-list/opportunity-list.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-import { OpportunityItemValue } from "../../widget/opportunity-item";
-import { AssetFilterItem } from "../../widget/asset-list/asset-filters";
-export interface OpportunityFilter extends AssetFilterItem {
-    filterFn: (opportunity: OpportunityItemValue) => boolean;
-}
-export interface OpportunityListProps {
-    opportunities: OpportunityItemValue[];
-    onOpportunityClick?: (opportunity: OpportunityItemValue) => void;
-    groupBy?: "none" | "partner" | "chain";
-    filters?: OpportunityFilter[];
-    filterVariant?: "badge" | "navigation";
-    multipleFilters?: boolean;
-    showSearch?: boolean;
-    searchPlaceholder?: string;
-    searchDebounceDelay?: number;
-    className?: string;
-    itemClassName?: string;
-    emptyState?: React.ReactNode;
-}
-export declare const OpportunityList: React.FC<OpportunityListProps>;
-//# sourceMappingURL=opportunity-list.d.ts.map

package/dist/types/components/molecules/opportunity/opportunity-list/opportunity-list.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"opportunity-list.d.ts","sourceRoot":"","sources":["../../../../../../src/components/molecules/opportunity/opportunity-list/opportunity-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAEL,oBAAoB,EACrB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAEL,eAAe,EAChB,MAAM,uCAAuC,CAAC;AAK/C,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,QAAQ,EAAE,CAAC,WAAW,EAAE,oBAAoB,KAAK,OAAO,CAAC;CAC1D;AAED,MAAM,WAAW,oBAAoB;IAEnC,aAAa,EAAE,oBAAoB,EAAE,CAAC;IACtC,kBAAkB,CAAC,EAAE,CAAC,WAAW,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAGjE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IAGvC,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAG7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AA0BD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0E1D,CAAC"}

package/src/components/molecules/opportunity/opportunity-list/hooks/index.ts

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

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

@@ -1,45 +0,0 @@
-import { useMemo } from "react";
-import { OpportunityFilter } from "../opportunity-list";
-import { OpportunityItemValue as Opportunity } from "../../../widget/opportunity-item";
-
-interface UseOpportunityFilteringProps {
-  opportunities: Opportunity[];
-  searchQuery: string;
-  activeFilterIds: string[];
-  filters: OpportunityFilter[];
-}
-
-export function useOpportunityFiltering({
-  opportunities,
-  searchQuery,
-  activeFilterIds,
-  filters,
-}: UseOpportunityFilteringProps): Opportunity[] {
-  return useMemo(() => {
-    let result = opportunities;
-
-    // Apply search filter
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      result = result.filter(
-        (opportunity) =>
-          opportunity.name.toLowerCase().includes(query) ||
-          opportunity.partner?.name.toLowerCase().includes(query) ||
-          opportunity.chain.name.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((opportunity) =>
-        activeFilterFns.every((filterFn) => filterFn(opportunity)),
-      );
-    }
-
-    return result;
-  }, [opportunities, searchQuery, activeFilterIds, filters]);
-}

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

@@ -1,85 +0,0 @@
-import { useMemo } from "react";
-import { OpportunityItemValue } from "../../../widget/opportunity-item";
-import { WidgetListGroup } from "../../../widget/widget-list-items";
-
-interface UseOpportunityGroupingProps {
-  opportunities: OpportunityItemValue[];
-  groupBy: "none" | "partner" | "chain";
-}
-
-export function useOpportunityGrouping({
-  opportunities,
-  groupBy,
-}: UseOpportunityGroupingProps): WidgetListGroup<OpportunityItemValue>[] {
-  return useMemo(() => {
-    // First, sort all opportunities by yield (APY) in descending order
-    const sortedOpportunities = [...opportunities].sort((a, b) => {
-      const aprA = parseFloat(a.apr?.replace("%", "") || "0");
-      const aprB = parseFloat(b.apr?.replace("%", "") || "0");
-      return aprB - aprA;
-    });
-
-    if (groupBy === "none") {
-      return [
-        {
-          id: "all-opportunities",
-          items: sortedOpportunities,
-        },
-      ];
-    }
-
-    // Group by the selected field
-    const groups = sortedOpportunities.reduce(
-      (acc, opportunity) => {
-        let groupKey: string;
-        let groupTitle: string;
-        let groupIcon: string | undefined;
-
-        switch (groupBy) {
-          case "partner":
-            groupKey = opportunity.partner?.name || "other";
-            groupTitle = opportunity.partner?.name || "Other";
-            groupIcon = opportunity.partner?.icon;
-            break;
-          case "chain":
-            groupKey = opportunity.chain.name || "other";
-            groupTitle = opportunity.chain.name || "Other";
-            groupIcon = opportunity.chain.icon;
-            break;
-          default:
-            groupKey = "all";
-            groupTitle = "All";
-        }
-
-        if (!acc[groupKey]) {
-          acc[groupKey] = {
-            id: groupKey,
-            title: groupTitle,
-            icon: groupIcon,
-            items: [],
-          };
-        }
-        acc[groupKey].items.push(opportunity);
-        return acc;
-      },
-      {} as Record<string, WidgetListGroup<OpportunityItemValue>>,
-    );
-
-    // Sort groups by the highest APY in each group
-    const groupsArray = Object.values(groups);
-    groupsArray.sort((a, b) => {
-      // Get the highest APY in each group (items are already sorted)
-      const maxYieldA =
-        a.items.length > 0
-          ? parseFloat(a.items[0].apr?.replace("%", "") || "0")
-          : 0;
-      const maxYieldB =
-        b.items.length > 0
-          ? parseFloat(b.items[0].apr?.replace("%", "") || "0")
-          : 0;
-      return maxYieldB - maxYieldA;
-    });
-
-    return groupsArray;
-  }, [opportunities, groupBy]);
-}

package/src/components/molecules/opportunity/opportunity-list/index.ts

@@ -1 +0,0 @@
-export * from "./opportunity-list";