OneKeyHQ · erikzou · Jul 18, 2026 · Jul 18, 2026 · Jul 18, 2026 · Jul 18, 2026
@@ -15,6 +15,10 @@ interface IHeaderColumnProps<T> {
   selectedColumnName: string;
   onChangeSelectedName: (columnName: string) => void;
   onHeaderRow?: ITableProps<T>['onHeaderRow'];
+  // Controlled mode: the order comes from the parent and no internal sort
+  // state is kept, so external sort actions stay reflected in the arrows.
+  isSortControlled?: boolean;
+  controlledOrder?: ETableSortType;
 }
 
 function HeaderColumn<T>({
@@ -23,6 +27,8 @@ function HeaderColumn<T>({
   onHeaderRow,
   selectedColumnName,
   onChangeSelectedName,
+  isSortControlled,
+  controlledOrder,
 }: IHeaderColumnProps<T>) {
   const {
     title,
@@ -39,19 +45,36 @@ function HeaderColumn<T>({
     events?.initialSortOrder,
   );
 
+  let currentSortOrder: ETableSortType | undefined;
+  if (isSortControlled) {
+    currentSortOrder = controlledOrder;
+  } else if (dataIndex === selectedColumnName) {
+    currentSortOrder = sortOrder;
+  }
+
   useEffect(() => {
+    if (isSortControlled) {
+      return;
+    }
     if (selectedColumnName !== dataIndex) {
       setSortOrder(undefined);
     }
-  }, [dataIndex, selectedColumnName]);
+  }, [dataIndex, selectedColumnName, isSortControlled]);
 
   const handleColumnPress = useCallback(() => {
     events?.onPress?.();
     if (!enableSortType) {
       return;
     }
     const disabledSorts = events?.disableSort || [];
-    const order = getNextSortOrder(sortOrder, disabledSorts);
+    const order = getNextSortOrder(currentSortOrder, disabledSorts);
+
+    // Controlled mode owns no local state: just report the next order and let
+    // the parent's re-render drive the arrow.
+    if (isSortControlled) {
+      events?.onSortTypeChange?.(order);
+      return;
+    }
 
     // When resetting to undefined, clear the selected column to allow default sorting
     if (order === undefined) {
@@ -68,12 +91,17 @@ function HeaderColumn<T>({
     setTimeout(() => {
       events?.onSortTypeChange?.(order);
     });
-  }, [dataIndex, enableSortType, events, onChangeSelectedName, sortOrder]);
+  }, [
+    dataIndex,
+    enableSortType,
+    events,
+    onChangeSelectedName,
+    currentSortOrder,
+    isSortControlled,
+  ]);
 
   const cursor = enableSortType ? 'pointer' : undefined;
   const showSortIcon = enableSortType && !renderTitle;
-  const currentSortOrder =
-    dataIndex === selectedColumnName ? sortOrder : undefined;
 
   const { renderSortIcon: renderInlineSortIcon } = useSortIcon({
     showSortIcon: enableSortType && !!renderTitle,
@@ -91,7 +119,12 @@ function HeaderColumn<T>({
 
   let titleContent;
   if (renderTitle) {
-    titleContent = renderTitle(renderInlineSortIcon());
+    titleContent = renderTitle(renderInlineSortIcon(), {
+      order: currentSortOrder,
+      onSortPress: enableSortType
+        ? (handleColumnPress as () => void)
+        : undefined,
+    });
   } else if (typeof title === 'string') {
     titleContent = (
       <SizableText

@@ -306,12 +306,15 @@ function TableHeaderRow<T>({
   onHeaderRow,
   rowProps,
   headerRowProps,
+  controlledSort,
 }: {
   columns: ITableProps<T>['columns'];
   onHeaderRow?: ITableProps<T>['onHeaderRow'];
   rowProps?: ITableProps<T>['rowProps'];
   headerRowProps?: ITableProps<T>['headerRowProps'];
+  controlledSort?: ITableProps<T>['controlledSort'];
 }) {
+  const isSortControlled = controlledSort !== undefined;
   const initialSelectedColumn = useMemo(() => {
     if (!onHeaderRow) return '';
     for (let i = 0; i < columns.length; i += 1) {
@@ -328,6 +331,9 @@ function TableHeaderRow<T>({
   const [selectedColumnName, setSelectedColumnName] = useState(
     initialSelectedColumn,
   );
+  const activeColumnName = isSortControlled
+    ? (controlledSort?.dataIndex ?? '')
+    : selectedColumnName;
   return (
     <XStack
       {...(rowProps as IXStackProps)}
@@ -337,11 +343,17 @@ function TableHeaderRow<T>({
         column ? (
           <MemoHeaderColumn
             key={column.dataIndex}
-            selectedColumnName={selectedColumnName}
+            selectedColumnName={activeColumnName}
             onChangeSelectedName={setSelectedColumnName}
             column={column as any}
             index={index}
             onHeaderRow={onHeaderRow}
+            isSortControlled={isSortControlled}
+            controlledOrder={
+              controlledSort?.dataIndex === column.dataIndex
+                ? controlledSort.order
+                : undefined
+            }
           />
         ) : null,
       )}
@@ -358,6 +370,7 @@ function BasicTable<T>({
   TableFooterComponent,
   TableEmptyComponent,
   onHeaderRow,
+  controlledSort,
   onRow,
   rowProps,
   keyExtractor,
@@ -445,9 +458,17 @@ function BasicTable<T>({
           rowProps={rowProps}
           headerRowProps={headerRowProps}
           onHeaderRow={onHeaderRow}
+          controlledSort={controlledSort}
         />
       ) : null,
-    [columns, headerRowProps, onHeaderRow, rowProps, showHeader],
+    [
+      columns,
+      headerRowProps,
+      onHeaderRow,
+      controlledSort,
+      rowProps,
+      showHeader,
+    ],
   );
 
   const renderPlaceholder = useCallback(
@@ -810,5 +831,10 @@ export const Table = withStaticProperties(BasicTable, {
 });
 
 // Export types
-export type { ITableProps, ITableColumn } from './types';
+export type {
+  ITableProps,
+  ITableColumn,
+  ITableColumnSortContext,
+  ITableControlledSort,
+} from './types';
 export { ETableSortType } from './types';
@@ -9,11 +9,30 @@ export enum ETableSortType {
   DESC = 'desc',
 }
 
+// Sort state handed to renderTitle so a custom header can draw its own sort
+// affordance and make the whole title (text + icon) the click target.
+export interface ITableColumnSortContext {
+  order?: ETableSortType;
+  onSortPress?: () => void;
+}
+
+// Externally-owned sort state. `null` means "nothing sorted". Passing this
+// switches the header from its internal per-column state to controlled mode,
+// which is what lets an outside control (e.g. a sort shortcut chip) and the
+// header arrows stay on one source of truth.
+export type ITableControlledSort = {
+  dataIndex: string;
+  order: ETableSortType;
+} | null;
+
 export interface ITableColumn<T> {
   title: ReactNode;
   // When provided, renders the title with an inline sort icon instead of
   // the default external sort icon rendered by Column.
-  renderTitle?: (sortIcon: ReactNode) => ReactNode;
+  renderTitle?: (
+    sortIcon: ReactNode,
+    sortContext: ITableColumnSortContext,
+  ) => ReactNode;
   dataIndex: string;
   titleProps?: ISizableTextProps;
   columnProps?: Omit<IStackProps, 'onPress' | 'onLongPress'>;
@@ -55,6 +74,8 @@ export interface ITableProps<T> {
   onDragBegin?: ISortableListViewProps<T>['onDragBegin'];
   onDragEnd?: ISortableListViewProps<T>['onDragEnd'];
   keyExtractor: (item: T, index: number) => string;
+  // Opt into controlled header sort; omit to keep the internal state behavior.
+  controlledSort?: ITableControlledSort;
   onHeaderRow?: (
     column: ITableColumn<T>,
     index: number,

@@ -67,6 +67,9 @@ type IMarketTokenListRequestParams = {
   type?: string;
   category?: string;
   timeFrame?: string;
+  // hot-token v6 filter params (marketCapMin, liquidityMin, volumeMin, ...),
+  // already flattened by buildHotTokenFilterParams on the caller side.
+  filterParams?: Record<string, number>;
 };
 
 type INormalizedMarketTokenListRequestParams = IMarketTokenListRequestParams & {
@@ -184,6 +187,7 @@ class ServiceMarketV2 extends ServiceBase {
     type,
     category,
     timeFrame,
+    filterParams,
   }: INormalizedMarketTokenListRequestParams) {
     const client = await this.getClient(EServiceEndpointEnum.Utility);
     const response = await client.get<{
@@ -202,6 +206,7 @@ class ServiceMarketV2 extends ServiceBase {
         type,
         category,
         timeFrame,
+        ...filterParams,
         currency: 'usd',
       },
     });
@@ -341,6 +346,7 @@ class ServiceMarketV2 extends ServiceBase {
       type,
       category,
       timeFrame,
+      filterParams,
     }: IMarketTokenListRequestParams,
     options?: IFetchMarketTokenListOptions,
   ) {
@@ -355,6 +361,7 @@ class ServiceMarketV2 extends ServiceBase {
       type,
       category,
       timeFrame,
+      filterParams,
     });
     if (options?.forceRemote) {
       return this._fetchMarketTokenListFromApi(normalizedParams);

@@ -37,8 +37,8 @@ export function BannerDetailListColumnHeader({
         <SizableText color="$textSubdued" size="$bodySmMedium" py="$2">
           {`${intl.formatMessage({
             id: ETranslations.global_name,
-          })} / ${intl.formatMessage({
-            id: ETranslations.dexmarket_turnover,
+          })} / 24h ${intl.formatMessage({
+            id: ETranslations.perp_token_selector_volume,
           })}`}
         </SizableText>
       </XStack>

@@ -4,6 +4,7 @@ import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/background
 import { usePromiseResult } from '@onekeyhq/kit/src/hooks/usePromiseResult';
 import { useMarketBannerListSortAtom } from '@onekeyhq/kit-bg/src/states/jotai/atoms';
 
+import { MARKET_CLIENT_SORT_FIELD_MAP } from '../../MarketHomeV2/components/MarketTokenList/utils/marketListClientSort';
 import {
   getNetworkLogoUri,
   transformApiItemToToken,
@@ -12,12 +13,13 @@ import {
 import type { IMarketTokenListResult } from '../../MarketHomeV2/components/MarketTokenList/MarketTokenListBase';
 
 const BANNER_DETAIL_CHANGE_SORT_BY = 'change24h';
-type IBannerDetailSortBy = typeof BANNER_DETAIL_CHANGE_SORT_BY;
 
-function isBannerDetailSortBy(
-  sortBy: string | undefined,
-): sortBy is IBannerDetailSortBy {
-  return sortBy === BANNER_DETAIL_CHANGE_SORT_BY;
+// Any column the shared client sort can express is accepted, so the desktop
+// table's headers all sort here like they do on the home lists. The mobile
+// change toggle still reads `changeSortType` below, which narrows back to the
+// change column on its own.
+function isBannerDetailSortBy(sortBy: string | undefined): sortBy is string {
+  return Boolean(sortBy && MARKET_CLIENT_SORT_FIELD_MAP[sortBy]);
 }
 
 type IUseMarketBannerDetailParams = {
@@ -89,7 +91,7 @@ export function useMarketBannerDetail({
   );
 
   const toggleSort = useCallback(
-    (sortBy: IBannerDetailSortBy) => {
+    (sortBy: string) => {
       const activeSortType =
         sortRef.current.sortBy === sortBy
           ? sortRef.current.sortType

@@ -315,7 +315,11 @@ const MarketTokenSelectorList = memo(
             size="$bodySm"
             color="$textSubdued"
           >
-            {intl.formatMessage({ id: ETranslations.dexmarket_turnover })}
+            {/* The selector requests a fixed 1h window (MarketTokenSelector
+                passes timeRange="1h"), so the header names that window. */}
+            {`1h ${intl.formatMessage({
+              id: ETranslations.perp_token_selector_volume,
+            })}`}
           </SizableText>
         </XStack>
 

@@ -1,10 +1,15 @@
 import { XStack, YStack } from '@onekeyhq/components';
 
+import { MarketFiltersIconTrigger } from '../MarketFilterChipsBar';
 import { MobileNetworkDropdown } from '../MobileNetworkDropdown';
 import { TimeRangeDropdown } from '../TimeRangeDropdown';
 
 import type { ITimeRangeSelectorValue } from '../TimeRangeSelector';
 
+// Figma 25169-43731: the time-range dropdown and the filters trigger form one
+// right-aligned group.
+const TRAILING_CONTROLS_GAP = 10;
+
 export interface IMarketFilterBarSmallProps {
   selectedNetworkId?: string;
   timeRange?: ITimeRangeSelectorValue;
@@ -31,13 +36,25 @@ function MarketFilterBarSmall({
           selectedNetworkId={selectedNetworkId}
           onNetworkIdChange={onNetworkIdChange}
         />
-        {onTimeRangeChange ? (
-          <TimeRangeDropdown
-            value={timeRange}
-            onChange={onTimeRangeChange}
-            compact
-          />
-        ) : null}
+        <XStack
+          alignItems="center"
+          justifyContent="flex-end"
+          gap={TRAILING_CONTROLS_GAP}
+        >
+          {onTimeRangeChange ? (
+            <TimeRangeDropdown
+              value={timeRange}
+              onChange={onTimeRangeChange}
+              compact
+            />
+          ) : null}
+          {onTimeRangeChange ? (
+            <MarketFiltersIconTrigger
+              timeRange={timeRange}
+              onTimeRangeChange={onTimeRangeChange}
+            />
+          ) : null}
+        </XStack>
       </XStack>
     </YStack>
   );