OneForexTradeHistory

OneForexTradeHistory 是一个 React Native 组件，显示外汇交易记录列表，包含状态指示器、盈亏 (P&L) 和生命周期跟踪。它与 useForexTrading hook 集成以获取和显示交易数据。

仅限 React Native

OneForexTradeHistory 从 @one_deploy/sdk/react-native 导出。不适用于 Web 平台。

快速入门

import { OneForexTradeHistory } from '@one_deploy/sdk/react-native';

function TradeHistory() {
  return (
    <OneForexTradeHistory
      investmentId="inv_abc123"
      onTradePress={(trade) => {
        console.log('Selected trade:', trade.id, trade.status);
      }}
    />
  );
}

OneForexTradeHistoryProps

import type { OneForexTradeHistoryProps } from '@one_deploy/sdk';

interface OneForexTradeHistoryProps {
  /** Investment ID to fetch trades for. If omitted, shows all trades for the user. */
  investmentId?: string;

  /** Pre-loaded trade records. If provided, the component will not fetch its own data. */
  trades?: ForexTradeRecord[];

  /** Maximum number of trades to display. Defaults to 50. */
  limit?: number;

  /** Filter trades by status. If omitted, all statuses are shown. */
  statusFilter?: ForexTradeStatus[];

  /** Filter trades by currency pair. */
  pairFilter?: string;

  /** Callback fired when a trade row is pressed. */
  onTradePress?: (trade: ForexTradeRecord) => void;

  /** Callback fired when the user pulls to refresh. */
  onRefresh?: () => void;

  /** Whether to show the status lifecycle indicator. Defaults to true. */
  showStatusBar?: boolean;

  /** Whether to show P&L for settled trades. Defaults to true. */
  showPnl?: boolean;

  /** Whether to show execution price details. Defaults to true. */
  showExecutionDetails?: boolean;

  /** Whether to show timestamps. Defaults to true. */
  showTimestamps?: boolean;

  /** Whether to show the transaction hash for settled trades. Defaults to false. */
  showTxHash?: boolean;

  /** Empty state message. */
  emptyMessage?: string;

  /** Visual theme variant. */
  theme?: 'dark' | 'light';

  /** Custom styles applied to the container. */
  style?: import('react-native').ViewStyle;

  /** Custom styles applied to each trade row. */
  rowStyle?: import('react-native').ViewStyle;

  /** Custom color map for trade statuses. */
  statusColors?: {
    RFQ?: string;
    QUOTED?: string;
    MATCHED?: string;
    SETTLED?: string;
    FAILED?: string;
  };

  /** Test ID for testing frameworks. */
  testID?: string;
}

属性参考

属性	类型	默认值	说明
investmentId	string	undefined	获取特定投资的交易。
trades	ForexTradeRecord[]	undefined	预加载的交易数据（跳过内部获取）。
limit	number	50	显示的最大交易数量。
statusFilter	ForexTradeStatus[]	undefined	按交易状态筛选。
pairFilter	string	undefined	按货币对筛选。
onTradePress	(trade: ForexTradeRecord) => void	undefined	行点击回调。
onRefresh	() => void	undefined	下拉刷新回调。
showStatusBar	boolean	true	显示状态生命周期指示器。
showPnl	boolean	true	显示已结算交易的盈亏。
showExecutionDetails	boolean	true	显示执行价格和滑点。
showTimestamps	boolean	true	显示交易时间戳。
showTxHash	boolean	false	显示链上交易哈希。
emptyMessage	string	"No trades found."	没有交易时的提示信息。
theme	'dark' | 'light'	'dark'	视觉主题。
style	ViewStyle	undefined	自定义容器样式。
rowStyle	ViewStyle	undefined	自定义每行样式。
statusColors	object	见下方	自定义状态颜色映射。
testID	string	undefined	用于测试框架的测试 ID。

默认状态颜色

{
  RFQ:     '#ffaa44',
  QUOTED:  '#44aaff',
  MATCHED: '#aa88ff',
  SETTLED: '#44cc88',
  FAILED:  '#cc4444',
}

使用示例

投资交易历史

import React from 'react';
import { View, Text } from 'react-native';
import { OneForexTradeHistory } from '@one_deploy/sdk/react-native';

function InvestmentTrades({ investmentId }: { investmentId: string }) {
  return (
    <View style={{ flex: 1 }}>
      <Text style={{ color: '#fff', fontSize: 18, fontWeight: '700', padding: 16 }}>
        Trades
      </Text>
      <OneForexTradeHistory
        investmentId={investmentId}
        limit={100}
        showStatusBar={true}
        showPnl={true}
        showExecutionDetails={true}
        onTradePress={(trade) => {
          console.log('Trade details:', trade);
        }}
      />
    </View>
  );
}

按状态筛选

import { OneForexTradeHistory } from '@one_deploy/sdk/react-native';

function ActiveTrades({ investmentId }: { investmentId: string }) {
  return (
    <OneForexTradeHistory
      investmentId={investmentId}
      statusFilter={['RFQ', 'QUOTED', 'MATCHED']}
      showStatusBar={true}
      emptyMessage="No active trades."
    />
  );
}

function SettledTrades({ investmentId }: { investmentId: string }) {
  return (
    <OneForexTradeHistory
      investmentId={investmentId}
      statusFilter={['SETTLED']}
      showPnl={true}
      showTxHash={true}
      emptyMessage="No settled trades yet."
    />
  );
}

function FailedTrades({ investmentId }: { investmentId: string }) {
  return (
    <OneForexTradeHistory
      investmentId={investmentId}
      statusFilter={['FAILED']}
      showExecutionDetails={false}
      emptyMessage="No failed trades."
    />
  );
}

预加载数据

当您已经有交易数据时（例如来自父组件），可以直接传入以跳过内部数据获取：

import React from 'react';
import { View } from 'react-native';
import { OneForexTradeHistory } from '@one_deploy/sdk/react-native';
import type { ForexTradeRecord } from '@one_deploy/sdk';

function PreloadedHistory({ trades }: { trades: ForexTradeRecord[] }) {
  return (
    <OneForexTradeHistory
      trades={trades}
      showStatusBar={true}
      showPnl={true}
      showTimestamps={true}
    />
  );
}

带下拉刷新

import React, { useCallback } from 'react';
import { View } from 'react-native';
import { OneForexTradeHistory } from '@one_deploy/sdk/react-native';
import { useForexInvestments } from '@one_deploy/sdk';

function RefreshableTrades({ investmentId }: { investmentId: string }) {
  const { refetch } = useForexInvestments();

  const handleRefresh = useCallback(() => {
    refetch();
  }, [refetch]);

  return (
    <OneForexTradeHistory
      investmentId={investmentId}
      onRefresh={handleRefresh}
      limit={50}
      style={{ flex: 1 }}
    />
  );
}

按货币对筛选

import { OneForexTradeHistory } from '@one_deploy/sdk/react-native';

function EurUsdTrades() {
  return (
    <OneForexTradeHistory
      pairFilter="EUR/USD"
      limit={30}
      showStatusBar={true}
      showPnl={true}
    />
  );
}

自定义样式历史记录

import { OneForexTradeHistory } from '@one_deploy/sdk/react-native';

function StyledTradeHistory({ investmentId }: { investmentId: string }) {
  return (
    <OneForexTradeHistory
      investmentId={investmentId}
      theme="dark"
      style={{
        flex: 1,
        backgroundColor: '#0f172a',
      }}
      rowStyle={{
        paddingHorizontal: 16,
        paddingVertical: 14,
        borderBottomWidth: 1,
        borderColor: '#1e293b',
      }}
      statusColors={{
        RFQ: '#f59e0b',
        QUOTED: '#3b82f6',
        MATCHED: '#8b5cf6',
        SETTLED: '#10b981',
        FAILED: '#ef4444',
      }}
    />
  );
}

带导航到交易详情

import React from 'react';
import { View } from 'react-native';
import { OneForexTradeHistory } from '@one_deploy/sdk/react-native';
import { useNavigation } from '@react-navigation/native';

function TradeHistoryWithNavigation({ investmentId }: { investmentId: string }) {
  const navigation = useNavigation();

  return (
    <OneForexTradeHistory
      investmentId={investmentId}
      showStatusBar={true}
      showPnl={true}
      showExecutionDetails={true}
      showTxHash={true}
      onTradePress={(trade) => {
        navigation.navigate('TradeDetail', {
          tradeId: trade.id,
          investmentId: trade.investmentId,
        });
      }}
    />
  );
}

紧凑模式 -- 精简显示

import { OneForexTradeHistory } from '@one_deploy/sdk/react-native';

function CompactHistory({ investmentId }: { investmentId: string }) {
  return (
    <OneForexTradeHistory
      investmentId={investmentId}
      limit={10}
      showStatusBar={false}
      showExecutionDetails={false}
      showTimestamps={false}
      showPnl={true}
      showTxHash={false}
    />
  );
}

下一步

• 交易历史 -- 该组件背后的数据类型和生命周期。
• OneForexConsoleView -- 实时观看交易执行。
• OneForexPairSelector -- 选择货币对以筛选交易。