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>

@@ -16,6 +16,7 @@ import {
   type IMarketPerpsToken,
   mapServerToken,
 } from '../MarketHomeV2/components/MarketPerpsList/hooks/useMarketPerpsTokenList';
+import { usePerpsClientSort } from '../MarketHomeV2/components/MarketPerpsList/hooks/usePerpsClientSort';
 import { usePerpsColumns } from '../MarketHomeV2/components/MarketPerpsList/hooks/usePerpsColumns';
 
 import { BannerDetailTokenFlatList } from './BannerDetailTokenFlatList';
@@ -98,6 +99,14 @@ export function PerpsTokenListSection({
     [tokens],
   );
 
+  // Same header sorting the standalone perps list uses, so the two perps
+  // tables behave identically wherever they appear.
+  const {
+    sortedTokens,
+    onHeaderRow: handleHeaderRow,
+    controlledSort,
+  } = usePerpsClientSort({ tokens });
+
   const showSkeleton = Boolean(isLoading) && tokens.length === 0;
 
   const handleMobileItemPress = useCallback(
@@ -155,7 +164,9 @@ export function PerpsTokenListSection({
             <Table<IMarketPerpsToken>
               stickyHeader
               columns={perpsColumns}
-              dataSource={tokens}
+              dataSource={sortedTokens}
+              onHeaderRow={handleHeaderRow}
+              controlledSort={controlledSort}
               keyExtractor={(item) => item.name}
               estimatedItemSize="$14"
               extraData={tokens.length}

@@ -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>