@turtleclub/core 0.1.0-beta.12 → 0.1.0-beta.121

package/src/selectors/ChainSelector.tsx

@@ -30,7 +30,10 @@ export function ChainSelector({
   closeOnSelect = true,
   searchable = true,
 }: ChainSelectorProps) {
-  const { chains, isLoading } = useSupportedChains();
+  const { chains, isLoading } = useSupportedChains({
+    page: 1,
+    limit: 100, // High limit to fetch all chains
+  });
 
   const chainOptions = useMemo(() => {
     if (!chains || chains.length === 0) return [];

package/src/selectors/ChainsSelector.tsx

@@ -33,7 +33,10 @@ export function ChainsSelector({
   closeOnSelect = true,
   searchable = true,
 }: ChainSelectorProps) {
-  const { chains, isLoading } = useSupportedChains();
+  const { chains, isLoading } = useSupportedChains({
+    page: 1,
+    limit: 100, // High limit to fetch all chains
+  });
 
   const chainOptions = useMemo(() => {
     if (!chains || chains.length === 0) return [];

package/src/selectors/OpportunitiesSelector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useEffect } from "react";
+import { useMemo } from "react";
 import { MultiSelect } from "@turtleclub/ui";
 import { useOpportunities } from "@turtleclub/hooks";
 
@@ -9,8 +9,6 @@ interface OpportunitySelectorProps {
   value: string[];
   /** Callback when selection changes */
   onValueChange: (values: string[]) => void;
-  /** Selected product ID to filter opportunities */
-  productId?: string;
   /** Placeholder text */
   placeholder?: string;
   /** Whether the selector is disabled */
@@ -28,7 +26,6 @@ interface OpportunitySelectorProps {
 export function OpportunitiesSelector({
   value,
   onValueChange,
-  productId,
   placeholder = "Select opportunities",
   disabled = false,
   className,
@@ -36,14 +33,7 @@ export function OpportunitiesSelector({
   closeOnSelect = true,
   searchable = true,
 }: OpportunitySelectorProps) {
-  const isProductSelected = !!productId && productId.trim() !== "";
-
-  const { data: opportunitiesData, isLoading } = useOpportunities({
-    filters: {
-      productId,
-    },
-    enabled: isProductSelected,
-  });
+  const { data: opportunitiesData, isLoading } = useOpportunities();
 
   const opportunities = useMemo(
     () => opportunitiesData?.opportunities ?? [],
@@ -73,27 +63,14 @@ export function OpportunitiesSelector({
     }));
   }, [opportunities]);
 
-  // Clear selection when product changes
-  useEffect(() => {
-    if (!isProductSelected && value.length > 0) {
-      onValueChange([]);
-    }
-  }, [isProductSelected, value, onValueChange]);
-
   return (
     <MultiSelect
       searchable={searchable}
       options={opportunityOptions}
       value={value}
       onValueChange={onValueChange}
-      disabled={disabled || isLoading || !isProductSelected}
-      placeholder={
-        !isProductSelected
-          ? "Select a product first"
-          : isLoading
-            ? "Loading opportunities..."
-            : placeholder
-      }
+      disabled={disabled || isLoading}
+      placeholder={isLoading ? "Loading opportunities..." : placeholder}
       closeOnSelect={closeOnSelect}
       maxCount={maxCount}
       className={className}

package/src/selectors/OpportunitySelector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useEffect } from "react";
+import { useMemo } from "react";
 import { Combobox } from "@turtleclub/ui";
 import { useOpportunities } from "@turtleclub/hooks";
 
@@ -9,8 +9,6 @@ interface OpportunitySelectorProps {
   value: string;
   /** Callback when selection changes */
   onValueChange: (value: string) => void;
-  /** Selected product ID to filter opportunities */
-  productId?: string;
   /** Placeholder text */
   placeholder?: string;
   /** Whether the selector is disabled */
@@ -26,21 +24,13 @@ interface OpportunitySelectorProps {
 export function OpportunitySelector({
   value,
   onValueChange,
-  productId,
   placeholder = "Select opportunity",
   disabled = false,
   className,
   closeOnSelect = true,
   searchable = true,
 }: OpportunitySelectorProps) {
-  const isProductSelected = !!productId && productId.trim() !== "";
-
-  const { data: opportunitiesData, isLoading } = useOpportunities({
-    filters: {
-      productId,
-    },
-    enabled: isProductSelected,
-  });
+  const { data: opportunitiesData, isLoading } = useOpportunities();
 
   const opportunities = useMemo(
     () => opportunitiesData?.opportunities ?? [],
@@ -70,27 +60,14 @@ export function OpportunitySelector({
     }));
   }, [opportunities]);
 
-  // Clear selection when product changes
-  useEffect(() => {
-    if (!isProductSelected && value) {
-      onValueChange("");
-    }
-  }, [isProductSelected, value, onValueChange]);
-
   return (
     <Combobox
       searchable={searchable}
       options={opportunityOptions}
       value={value}
       onValueChange={onValueChange}
-      disabled={disabled || isLoading || !isProductSelected}
-      placeholder={
-        !isProductSelected
-          ? "Select a product first"
-          : isLoading
-            ? "Loading opportunities..."
-            : placeholder
-      }
+      disabled={disabled || isLoading}
+      placeholder={isLoading ? "Loading opportunities..." : placeholder}
       closeOnSelect={closeOnSelect}
       className={className}
     />

package/src/selectors/TokenSelector.tsx

@@ -36,8 +36,8 @@ export function TokenSelector({
   const isChainSelected = !!chainId && chainId.trim() !== "";
 
   const { tokens, isLoading } = useSupportedTokens({
-    // chainId: isChainSelected ? chainId : undefined,
-    limit: 100,
+    chainId: isChainSelected ? chainId : "",
+    limit: 9000,
     enabled: isChainSelected,
   });
 

package/src/selectors/TokensSelector.tsx

@@ -39,8 +39,8 @@ export function TokensSelector({
   const isChainSelected = !!chainId && chainId.trim() !== "";
 
   const { tokens, isLoading } = useSupportedTokens({
-    // chainId: isChainSelected ? chainId : undefined,
-    limit: 100,
+    chainId: isChainSelected ? chainId : "",
+    limit: 9000,
     enabled: isChainSelected,
   });
 

package/src/wrappers/FiltersPopover.tsx

@@ -1,17 +1,28 @@
 "use client";
 
 import React from "react";
-import { Popover, PopoverContent, PopoverTrigger, Button, cn, Label, Badge } from "@turtleclub/ui";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  buttonVariants,
+  cn,
+  Label,
+  Badge,
+} from "@turtleclub/ui";
 import { SlidersHorizontal } from "lucide-react";
 import { FilterConfig } from "./FiltersGrid";
 
 export interface FiltersPopoverProps {
   filters: FilterConfig[];
-  triggerLabel?: string;
+  triggerLabel?: React.ReactNode;
   columns?: number;
   className?: string;
   popoverClassName?: string;
   sectionClassName?: string;
+  align?: "start" | "center" | "end";
+  /** Callback function to clear all filters */
+  onClearAll?: () => void;
 }
 
 export function FiltersPopover({
@@ -21,6 +32,8 @@ export function FiltersPopover({
   className,
   popoverClassName,
   sectionClassName,
+  align = "start",
+  onClearAll,
 }: FiltersPopoverProps) {
   const enabledFilters = filters.filter((filter) => filter.enabled);
 
@@ -45,19 +58,34 @@ export function FiltersPopover({
 
   return (
     <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline" className={cn(className)}>
-          <SlidersHorizontal className="mr-2 h-4 w-4" />
-          {triggerLabel}
-        </Button>
+      <PopoverTrigger
+        className={cn(
+          buttonVariants({
+            variant: "default",
+            size: "default",
+            border: "bordered",
+          }),
+          "!bg-neutral-alpha-2",
+          className
+        )}
+      >
+        {triggerLabel}
       </PopoverTrigger>
       <PopoverContent
         className={cn("w-auto min-w-[400px] max-w-[600px]", popoverClassName)}
-        align="start"
+        align={align}
       >
         <div className="space-y-4">
           <div className="flex items-center justify-between">
             <h4 className="font-medium text-sm">Filters</h4>
+            {onClearAll && (
+              <button
+                onClick={onClearAll}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Reset all
+              </button>
+            )}
           </div>
           <div className="space-y-4">
             {sectionNames.map((sectionName, sectionIndex) => (

package/src/wrappers/FiltersWrapper.tsx

@@ -18,6 +18,12 @@ export interface FiltersWrapperProps {
   className?: string;
   /** Custom className for the active badges section */
   badgesClassName?: string;
+  /** Custom className for the slot container */
+  slotClassName?: string;
+  /** Optional content to render on the left side of filters */
+  leftSlot?: React.ReactNode;
+  /** Optional content to render on the right side of filters */
+  rightSlot?: React.ReactNode;
 
   // Grid-specific props
   /** Number of columns for grid layout (default: 3) */
@@ -32,6 +38,8 @@ export interface FiltersWrapperProps {
   popoverClassName?: string;
   /** Custom className for popover content */
   popoverContentClassName?: string;
+  /** Alignment for popover (default: "start") */
+  align?: "start" | "center" | "end";
 
   // Active badges props
   /** Label for clear all button (default: "Clear All") */
@@ -88,11 +96,15 @@ export function FiltersWrapper({
   layout,
   className,
   badgesClassName,
+  slotClassName,
+  leftSlot,
+  rightSlot,
   columns = 3,
   triggerLabel = "Filters",
   popoverColumns = 2,
   popoverClassName,
   popoverContentClassName,
+  align = "start",
   clearAllLabel = "Clear All",
   showClearAll = true,
   renderBadge,
@@ -105,17 +117,30 @@ export function FiltersWrapper({
   return (
     <div className={cn("space-y-3", className)}>
       {/* Filter Controls */}
-      {layout === "grid" ? (
-        <FiltersGrid filters={filters} columns={columns} className={popoverClassName} />
-      ) : (
-        <FiltersPopover
-          filters={filters}
-          triggerLabel={triggerLabel}
-          columns={popoverColumns}
-          className={popoverClassName}
-          popoverClassName={popoverContentClassName}
-        />
-      )}
+      <div className={cn("flex items-center gap-2", slotClassName)}>
+        {leftSlot}
+        <>
+          {layout === "grid" ? (
+            <FiltersGrid filters={filters} columns={columns} className={popoverClassName} />
+          ) : (
+            <FiltersPopover
+              filters={filters}
+              triggerLabel={triggerLabel}
+              columns={popoverColumns}
+              className={popoverClassName}
+              popoverClassName={popoverContentClassName}
+              align={align}
+              onClearAll={() => {
+                const allQueryKeys = activeFilters
+                  .map((filter) => filter.queryKeys)
+                  .filter((keys): keys is string | string[] => keys !== undefined);
+                onClearAll(allQueryKeys);
+              }}
+            />
+          )}
+        </>
+        {rightSlot}
+      </div>
 
       {/* Active Filter Badges */}
       {showActiveBadges && hasActiveFilters && (