Use shared FilterButton in bridge

Author: bfullam

app/components/UI/Bridge/components/BridgeTrendingTokensSection/BridgeTrendingTokensSection.tsx

@@ -9,10 +9,6 @@ import {
   TextVariant,
   TextColor,
   FontWeight,
-  Icon,
-  IconName,
-  IconColor,
-  IconSize,
 } from '@metamask/design-system-react-native';
 import { selectNetworkConfigurationsByCaipChainId } from '../../../../../selectors/networkController';
 import {
@@ -36,6 +32,7 @@ import { getNetworkImageSource } from '../../../../../util/networks';
 import { NETWORK_TO_SHORT_NETWORK_NAME_MAP } from '../../../../../constants/bridge';
 import type { ProcessedNetwork } from '../../../../hooks/useNetworksByNamespace/useNetworksByNamespace';
 import type { CaipChainId } from '@metamask/utils';
+import { FilterButton } from '../../../Trending/components/FilterBar/FilterBar';
 
 const TOKEN_CHUNK_SIZE = 12;
 
@@ -45,46 +42,6 @@ interface BridgeTrendingTokensSectionProps {
   isNearBottom?: boolean;
 }
 
-const FilterButton = ({
-  testID,
-  onPress,
-  text,
-  twClassName: btnClass,
-}: {
-  testID: string;
-  onPress: () => void;
-  text: string;
-  twClassName?: string;
-}) => {
-  const tw = useTailwind();
-  return (
-    <Pressable
-      testID={testID}
-      onPress={onPress}
-      style={({ pressed }) =>
-        tw.style(
-          'flex-row items-center justify-center gap-1 py-2 px-3 rounded-lg bg-background-muted',
-          btnClass,
-          pressed && 'opacity-20',
-        )
-      }
-    >
-      <Text
-        variant={TextVariant.BodySm}
-        fontWeight={FontWeight.Medium}
-        color={TextColor.TextDefault}
-      >
-        {text}
-      </Text>
-      <Icon
-        name={IconName.ArrowDown}
-        color={IconColor.IconAlternative}
-        size={IconSize.Xs}
-      />
-    </Pressable>
-  );
-};
-
 const BridgeTrendingTokensSection = ({
   isNearBottom,
 }: BridgeTrendingTokensSectionProps) => {
@@ -201,19 +158,19 @@ const BridgeTrendingTokensSection = ({
           <FilterButton
             testID={BridgeViewSelectorsIDs.TRENDING_PRICE_FILTER}
             onPress={() => setActiveBottomSheet('price_change')}
-            text={priceChangeButtonText}
+            label={priceChangeButtonText}
             twClassName="flex-1"
           />
           <FilterButton
             testID={BridgeViewSelectorsIDs.TRENDING_NETWORK_FILTER}
             onPress={() => setActiveBottomSheet('network')}
-            text={selectedNetworkName}
+            label={selectedNetworkName}
             twClassName="flex-1"
           />
           <FilterButton
             testID={BridgeViewSelectorsIDs.TRENDING_TIME_FILTER}
             onPress={() => setActiveBottomSheet('time')}
-            text={selectedTimeOption}
+            label={selectedTimeOption}
             twClassName="w-[72px] shrink-0"
           />
         </Box>

app/components/UI/Trending/components/FilterBar/FilterBar.tsx

@@ -8,7 +8,7 @@ import Icon, {
 } from '../../../../../component-library/components/Icons/Icon';
 import Text from '../../../../../component-library/components/Texts/Text';
 
-interface FilterButtonProps {
+export interface FilterButtonProps {
   testID: string;
   label: string;
   onPress: () => void;
@@ -17,16 +17,19 @@ interface FilterButtonProps {
   ellipsizeMode?: 'tail' | 'head' | 'middle' | 'clip';
   /** Extra horizontal padding (px-3) vs default (p-2) */
   wide?: boolean;
+  /** Optional Tailwind class overrides for layout in custom contexts */
+  twClassName?: string;
 }
 
-const FilterButton: React.FC<FilterButtonProps> = ({
+export const FilterButton: React.FC<FilterButtonProps> = ({
   testID,
   label,
   onPress,
   disabled = false,
   numberOfLines,
   ellipsizeMode,
   wide = false,
+  twClassName,
 }) => {
   const tw = useTailwind();
 
@@ -38,6 +41,7 @@ const FilterButton: React.FC<FilterButtonProps> = ({
         'min-w-0 shrink items-center rounded-lg bg-muted',
         wide ? 'py-2 px-3' : 'p-2',
         disabled && 'opacity-50',
+        twClassName,
       )}
       activeOpacity={0.2}
       disabled={disabled}