feat: use dropdown for perps sorting

ui/pages/perps/market-list/components/dropdown/dropdown.tsx

@@ -0,0 +1,143 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import {
+  Box,
+  BoxFlexDirection,
+  Text,
+  TextVariant,
+  TextColor,
+  Icon,
+  IconName,
+  IconSize,
+  IconColor,
+  ButtonBase,
+  ButtonBaseSize,
+} from '@metamask/design-system-react';
+
+export type DropdownOption<T extends string> = {
+  id: T;
+  label: string;
+};
+
+export type DropdownProps<T extends string> = {
+  /** Available options */
+  options: DropdownOption<T>[];
+  /** Currently selected option ID */
+  selectedId: T;
+  /** Callback when selection changes */
+  onChange: (id: T) => void;
+  /** Test ID prefix for testing */
+  testId: string;
+};
+
+/**
+ * Reusable dropdown component styled like PickerNetwork
+ *
+ * @param props - Component props
+ * @param props.options - Available options to display
+ * @param props.selectedId - Currently selected option ID
+ * @param props.onChange - Callback when selection changes
+ * @param props.testId - Test ID prefix for testing
+ */
+export function Dropdown<T extends string>({
+  options,
+  selectedId,
+  onChange,
+  testId,
+}: DropdownProps<T>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const selectedOption = options.find((opt) => opt.id === selectedId);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const handleSelect = useCallback(
+    (option: DropdownOption<T>) => {
+      onChange(option.id);
+      setIsOpen(false);
+    },
+    [onChange],
+  );
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      {/* Trigger button styled like PickerNetwork */}
+      <ButtonBase
+        size={ButtonBaseSize.Sm}
+        className="flex items-center justify-start gap-1 rounded-lg bg-background-muted px-3 py-2 hover:bg-hover active:opacity-70"
+        onClick={handleToggle}
+        data-testid={`${testId}-button`}
+      >
+        <Text variant={TextVariant.BodySm} color={TextColor.TextDefault}>
+          {selectedOption?.label ?? ''}
+        </Text>
+        <Icon
+          name={isOpen ? IconName.ArrowUp : IconName.ArrowDown}
+          size={IconSize.Xs}
+          color={IconColor.IconAlternative}
+        />
+      </ButtonBase>
+
+      {/* Dropdown menu */}
+      {isOpen && (
+        <Box
+          className="absolute left-0 top-full z-10 mt-1 min-w-[120px] overflow-hidden rounded-lg border border-border-muted bg-background-default shadow-lg"
+          flexDirection={BoxFlexDirection.Column}
+          data-testid={`${testId}-menu`}
+        >
+          {options.map((option) => (
+            <button
+              key={option.id}
+              type="button"
+              onClick={() => handleSelect(option)}
+              className="flex w-full items-center justify-between px-3 py-2 text-left hover:bg-hover active:bg-pressed"
+              data-testid={`${testId}-option-${option.id}`}
+            >
+              <Text
+                variant={TextVariant.BodySm}
+                color={
+                  option.id === selectedId
+                    ? TextColor.TextDefault
+                    : TextColor.TextAlternative
+                }
+              >
+                {option.label}
+              </Text>
+              {option.id === selectedId && (
+                <Icon
+                  name={IconName.Check}
+                  size={IconSize.Sm}
+                  color={IconColor.PrimaryDefault}
+                />
+              )}
+            </button>
+          ))}
+        </Box>
+      )}
+    </div>
+  );
+}
+
+export default Dropdown;

ui/pages/perps/market-list/components/dropdown/index.ts

@@ -0,0 +1,5 @@
+export {
+  Dropdown,
+  type DropdownOption,
+  type DropdownProps,
+} from './dropdown';

ui/pages/perps/market-list/components/filter-select/filter-select.tsx

@@ -1,30 +1,9 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import {
-  Box,
-  BoxFlexDirection,
-  Text,
-  TextVariant,
-  TextColor,
-  Icon,
-  IconName,
-  IconSize,
-  IconColor,
-} from '@metamask/design-system-react';
+import React, { useMemo } from 'react';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import { Dropdown, type DropdownOption } from '../dropdown';
 
 export type MarketFilter = 'all' | 'crypto' | 'stocks';
 
-export type FilterOption = {
-  id: MarketFilter;
-  labelKey: string;
-};
-
-export const FILTER_OPTIONS: FilterOption[] = [
-  { id: 'all', labelKey: 'perpsFilterAll' },
-  { id: 'crypto', labelKey: 'perpsFilterCrypto' },
-  { id: 'stocks', labelKey: 'perpsFilterStocks' },
-];
-
 export type FilterSelectProps = {
   /** Currently selected filter */
   value: MarketFilter;
@@ -35,108 +14,32 @@ export type FilterSelectProps = {
 /**
  * FilterSelect component displays a dropdown for filtering markets by type
  *
- * @param options0 - Component props
- * @param options0.value - Currently selected filter
- * @param options0.onChange - Callback when filter changes
+ * @param props - Component props
+ * @param props.value - Currently selected filter
+ * @param props.onChange - Callback when filter changes
  */
 export const FilterSelect: React.FC<FilterSelectProps> = ({
   value,
   onChange,
 }) => {
   const t = useI18nContext();
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const selectedOption = FILTER_OPTIONS.find((option) => option.id === value);
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
 
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  const handleToggle = useCallback(() => {
-    setIsOpen((prev) => !prev);
-  }, []);
-
-  const handleOptionSelect = useCallback(
-    (option: FilterOption) => {
-      onChange(option.id);
-      setIsOpen(false);
-    },
-    [onChange],
+  const options: DropdownOption<MarketFilter>[] = useMemo(
+    () => [
+      { id: 'all', label: t('perpsFilterAll') },
+      { id: 'crypto', label: t('perpsFilterCrypto') },
+      { id: 'stocks', label: t('perpsFilterStocks') },
+    ],
+    [t],
   );
 
   return (
-    <div ref={dropdownRef} className="relative">
-      {/* Dropdown trigger button */}
-      <button
-        type="button"
-        onClick={handleToggle}
-        className="flex items-center gap-1 rounded-lg border border-border-muted bg-background-default px-3 py-2 hover:bg-hover active:bg-pressed"
-        data-testid="filter-select-button"
-      >
-        <Text variant={TextVariant.BodySm}>
-          {selectedOption ? t(selectedOption.labelKey) : ''}
-        </Text>
-        <Icon
-          name={isOpen ? IconName.ArrowUp : IconName.ArrowDown}
-          size={IconSize.Xs}
-          color={IconColor.IconAlternative}
-        />
-      </button>
-
-      {/* Dropdown menu */}
-      {isOpen && (
-        <Box
-          className="absolute left-0 top-full z-10 mt-1 min-w-[120px] overflow-hidden rounded-lg border border-border-muted bg-background-default shadow-lg"
-          flexDirection={BoxFlexDirection.Column}
-          data-testid="filter-select-menu"
-        >
-          {FILTER_OPTIONS.map((option) => (
-            <button
-              key={option.id}
-              type="button"
-              onClick={() => handleOptionSelect(option)}
-              className="flex w-full items-center justify-between px-3 py-2 text-left hover:bg-hover active:bg-pressed"
-              data-testid={`filter-option-${option.id}`}
-            >
-              <Text
-                variant={TextVariant.BodySm}
-                color={
-                  option.id === value
-                    ? TextColor.TextDefault
-                    : TextColor.TextAlternative
-                }
-              >
-                {t(option.labelKey)}
-              </Text>
-              {option.id === value && (
-                <Icon
-                  name={IconName.Check}
-                  size={IconSize.Sm}
-                  color={IconColor.PrimaryDefault}
-                />
-              )}
-            </button>
-          ))}
-        </Box>
-      )}
-    </div>
+    <Dropdown
+      options={options}
+      selectedId={value}
+      onChange={onChange}
+      testId="filter-select"
+    />
   );
 };