OneForexTradeHistory

OneForexTradeHistory is a React Native component that displays a list of forex trade records with status indicators, P&L, and lifecycle tracking. It integrates with the useForexTrading hook to fetch and display trade data.

React Native Only

OneForexTradeHistory is exported from @one_deploy/sdk/react-native. It is not available on web.

Quick Start

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;
}

Props Reference

Prop	Type	Default	Description
`investmentId`	`string`	`undefined`	Fetch trades for a specific investment.
`trades`	`ForexTradeRecord[]`	`undefined`	Pre-loaded trade data (skips fetch).
`limit`	`number`	`50`	Maximum trades to display.
`statusFilter`	`ForexTradeStatus[]`	`undefined`	Filter by trade status.
`pairFilter`	`string`	`undefined`	Filter by currency pair.
`onTradePress`	`(trade: ForexTradeRecord) => void`	`undefined`	Row press callback.
`onRefresh`	`() => void`	`undefined`	Pull-to-refresh callback.
`showStatusBar`	`boolean`	`true`	Show status lifecycle indicator.
`showPnl`	`boolean`	`true`	Show P&L for settled trades.
`showExecutionDetails`	`boolean`	`true`	Show execution price and slippage.
`showTimestamps`	`boolean`	`true`	Show trade timestamps.
`showTxHash`	`boolean`	`false`	Show on-chain transaction hash.
`emptyMessage`	`string`	`"No trades found."`	Message when there are no trades.
`theme`	`'dark' \| 'light'`	`'dark'`	Visual theme.
`style`	`ViewStyle`	`undefined`	Custom container styles.
`rowStyle`	`ViewStyle`	`undefined`	Custom per-row styles.
`statusColors`	`object`	See below	Custom status color mapping.
`testID`	`string`	`undefined`	Test ID for testing frameworks.

Default Status Colors

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

Usage Examples

Investment Trade History

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>
  );
}

Filtered by Status

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."
    />
  );
}

Pre-loaded Data

When you already have trade data (for example from a parent component), pass it directly to skip the internal fetch:

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}
    />
  );
}

With Pull-to-Refresh

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 }}
    />
  );
}

Filtered by Pair

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

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

Custom Styled History

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,
        });
      }}
    />
  );
}

Compact -- Minimal Display

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}
    />
  );
}

Next Steps

Trade History -- the data types and lifecycle behind this component.
OneForexConsoleView -- watch trades execute in real time.
OneForexPairSelector -- select pairs for filtering trades.

Quick Start​

OneForexTradeHistoryProps​

Props Reference​

Default Status Colors​

Usage Examples​

Investment Trade History​

Filtered by Status​

Pre-loaded Data​

With Pull-to-Refresh​

Filtered by Pair​

Custom Styled History​

With Navigation to Trade Detail​

Compact -- Minimal Display​

Next Steps​