OneForexConsoleView

OneForexConsoleView is a React Native component that renders a real-time trading console. It displays streaming log entries from the StableFX engine with filtering, auto-scroll, and severity-based coloring.

React Native Only

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

Quick Start

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

function TradingConsole() {
  return (
    <OneForexConsoleView
      autoStart={true}
      maxEntries={500}
      onLogEntry={(entry) => {
        if (entry.severity === 'error') {
          console.warn('Console error:', entry.message);
        }
      }}
    />
  );
}

OneForexConsoleViewProps

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

interface OneForexConsoleViewProps {
  /** Start the log stream automatically on mount. Defaults to false. */
  autoStart?: boolean;

  /** Maximum number of log entries to keep in memory. Defaults to 1000. */
  maxEntries?: number;

  /** Log types to display. If omitted, all types are shown. */
  filterTypes?: ForexLogType[];

  /** Minimum severity to display. Defaults to "info" (shows all). */
  minSeverity?: 'info' | 'warning' | 'error';

  /** Callback fired for each new log entry received. */
  onLogEntry?: (entry: ForexLogEntry) => void;

  /** Callback fired when the simulation starts. */
  onStart?: () => void;

  /** Callback fired when the simulation stops. */
  onStop?: () => void;

  /** Callback fired on connection or simulation error. */
  onError?: (error: Error) => void;

  /** Whether to auto-scroll to new entries. Defaults to true. */
  autoScroll?: boolean;

  /** Whether to show the toolbar with start/stop/clear controls. Defaults to true. */
  showToolbar?: boolean;

  /** Whether to show the agent status bar. Defaults to true. */
  showAgentBar?: boolean;

  /** Whether to show timestamps on each log entry. Defaults to true. */
  showTimestamps?: boolean;

  /** Time format for log entry timestamps. */
  timeFormat?: 'HH:mm:ss' | 'HH:mm:ss.SSS' | 'ISO';

  /** Font size for log entries. Defaults to 12. */
  fontSize?: number;

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

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

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

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

  /** Custom color map for severity levels. */
  severityColors?: {
    info?: string;
    warning?: string;
    error?: string;
    success?: string;
  };

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

Props Reference

Prop	Type	Default	Description
autoStart	boolean	false	Start streaming on mount.
maxEntries	number	1000	Maximum log entries in memory.
filterTypes	ForexLogType[]	undefined	Whitelist of log types to display.
minSeverity	'info' | 'warning' | 'error'	'info'	Minimum severity threshold.
onLogEntry	(entry: ForexLogEntry) => void	undefined	Callback per log entry.
onStart	() => void	undefined	Called when streaming starts.
onStop	() => void	undefined	Called when streaming stops.
onError	(error: Error) => void	undefined	Called on stream error.
autoScroll	boolean	true	Auto-scroll to newest entries.
showToolbar	boolean	true	Show start/stop/clear controls.
showAgentBar	boolean	true	Show agent status indicators.
showTimestamps	boolean	true	Show timestamps per entry.
timeFormat	'HH:mm:ss' | 'HH:mm:ss.SSS' | 'ISO'	'HH:mm:ss'	Timestamp format.
fontSize	number	12	Log entry font size.
theme	'dark' | 'light'	'dark'	Visual theme.
style	ViewStyle	undefined	Custom container styles.
toolbarStyle	ViewStyle	undefined	Custom toolbar styles.
logRowStyle	ViewStyle	undefined	Custom per-row styles.
severityColors	object	See below	Custom severity color mapping.
testID	string	undefined	Test ID for testing frameworks.

Default Severity Colors

{
  info:    '#4488ff',
  warning: '#ffaa44',
  error:   '#cc4444',
  success: '#44cc88',
}

Usage Examples

Auto-Start Console

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

function LiveConsole() {
  return (
    <View style={{ flex: 1 }}>
      <OneForexConsoleView
        autoStart={true}
        maxEntries={500}
        showAgentBar={true}
        showToolbar={true}
        timeFormat="HH:mm:ss.SSS"
      />
    </View>
  );
}

Trade-Only Log View

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

function TradeOnlyConsole() {
  return (
    <OneForexConsoleView
      autoStart={true}
      filterTypes={[
        'TRADE_SUBMITTED',
        'TRADE_QUOTED',
        'TRADE_MATCHED',
        'TRADE_SETTLED',
        'TRADE_FAILED',
      ]}
      showAgentBar={false}
      style={{ flex: 1 }}
    />
  );
}

Errors and Warnings Only

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

function ErrorConsole() {
  return (
    <OneForexConsoleView
      autoStart={true}
      minSeverity="warning"
      showToolbar={true}
      showAgentBar={false}
      severityColors={{
        warning: '#f59e0b',
        error: '#ef4444',
      }}
      onLogEntry={(entry) => {
        if (entry.severity === 'error') {
          // Send to your error tracking service
          reportError(entry);
        }
      }}
    />
  );
}

Controlled Start/Stop

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

function ControlledConsole() {
  return (
    <View style={{ flex: 1 }}>
      <OneForexConsoleView
        autoStart={false}
        showToolbar={true}
        maxEntries={2000}
        onStart={() => console.log('Console streaming started')}
        onStop={() => console.log('Console streaming stopped')}
        onError={(err) => console.error('Console error:', err.message)}
      />
    </View>
  );
}

Custom Styled Console

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

function StyledConsole() {
  return (
    <OneForexConsoleView
      autoStart={true}
      theme="dark"
      fontSize={11}
      timeFormat="HH:mm:ss"
      style={{
        flex: 1,
        backgroundColor: '#0c0c1a',
        borderRadius: 12,
        overflow: 'hidden',
      }}
      toolbarStyle={{
        backgroundColor: '#14142a',
        paddingHorizontal: 16,
      }}
      logRowStyle={{
        paddingHorizontal: 12,
        paddingVertical: 3,
      }}
      severityColors={{
        info: '#818cf8',
        warning: '#fbbf24',
        error: '#f87171',
        success: '#34d399',
      }}
    />
  );
}

Full-Screen Console with External Controls

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { OneForexConsoleView } from '@one_deploy/sdk/react-native';
import type { ForexLogEntry } from '@one_deploy/sdk';

function FullScreenConsole() {
  const [entryCount, setEntryCount] = useState(0);
  const [lastError, setLastError] = useState<string | null>(null);

  return (
    <View style={styles.container}>
      {/* Status bar */}
      <View style={styles.statusBar}>
        <Text style={styles.statusText}>
          Entries: {entryCount}
        </Text>
        {lastError && (
          <Text style={styles.errorText}>
            Last error: {lastError}
          </Text>
        )}
      </View>

      {/* Console */}
      <OneForexConsoleView
        autoStart={true}
        maxEntries={1000}
        showToolbar={true}
        showAgentBar={true}
        showTimestamps={true}
        timeFormat="HH:mm:ss.SSS"
        fontSize={11}
        style={{ flex: 1 }}
        onLogEntry={(entry) => {
          setEntryCount((c) => c + 1);
          if (entry.severity === 'error') {
            setLastError(entry.message);
          }
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0a0a14' },
  statusBar: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 8,
    backgroundColor: '#14142a',
  },
  statusText: { color: '#888', fontSize: 11 },
  errorText: { color: '#cc4444', fontSize: 11 },
});

Next Steps

• Console View -- the hook and service behind this component.
• OneForexTradeHistory -- display settled trade records.
• OneForexPoolCard -- show pool metrics in cards.