@one_deploy/sdk 1.0.6 → 1.2.0

package/src/components/ai/OneForexCapitalSplit.tsx

@@ -0,0 +1,112 @@
+/**
+ * OneForexCapitalSplit - Displays 50/50 capital allocation split
+ * Part of ONE Ecosystem SDK
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, ViewStyle } from 'react-native';
+import { FOREX_CAPITAL_SPLIT, FOREX_POOL_DEFAULTS, computePoolAllocations } from '../../types/forex';
+
+export interface OneForexCapitalSplitProps {
+  /** Total investment amount */
+  amount: number;
+  /** Labels (provide translated strings) */
+  labels?: {
+    title?: string;
+    tradingCapital?: string;
+    poolReserves?: string;
+    clearing?: string;
+    hedging?: string;
+    insurance?: string;
+  };
+  /** Show pool breakdown within reserves */
+  showPoolBreakdown?: boolean;
+  /** Custom container style */
+  style?: ViewStyle;
+  /** Dark mode */
+  dark?: boolean;
+}
+
+export const OneForexCapitalSplit: React.FC<OneForexCapitalSplitProps> = ({
+  amount,
+  labels = {},
+  showPoolBreakdown = true,
+  style,
+  dark = false,
+}) => {
+  const allocs = computePoolAllocations(amount);
+  const bg = dark ? '#111111' : '#ffffff';
+  const border = dark ? '#1a1a1a' : '#e5e5e5';
+  const textPrimary = dark ? '#ffffff' : '#1a1a1a';
+  const textSecondary = dark ? '#9ca3af' : '#666666';
+  const itemBg = dark ? '#0a0a0a' : '#f5f5f5';
+
+  return (
+    <View style={[styles.container, { backgroundColor: bg, borderColor: border }, style]}>
+      {labels.title && <Text style={[styles.title, { color: textPrimary }]}>{labels.title}</Text>}
+
+      <View style={styles.splitRow}>
+        <View style={[styles.splitItem, { backgroundColor: itemBg }]}>
+          <View style={[styles.dot, { backgroundColor: '#0EA5E9' }]} />
+          <Text style={[styles.splitLabel, { color: textSecondary }]}>
+            {labels.tradingCapital || 'Active Trading (RFQ)'}
+          </Text>
+          <Text style={[styles.splitPct, { color: textSecondary }]}>50%</Text>
+          <Text style={[styles.splitAmt, { color: textPrimary }]}>
+            ${allocs.tradingCapital.toLocaleString()}
+          </Text>
+        </View>
+        <View style={[styles.splitItem, { backgroundColor: itemBg }]}>
+          <View style={[styles.dot, { backgroundColor: '#8B5CF6' }]} />
+          <Text style={[styles.splitLabel, { color: textSecondary }]}>
+            {labels.poolReserves || 'Pool Reserves'}
+          </Text>
+          <Text style={[styles.splitPct, { color: textSecondary }]}>50%</Text>
+          <Text style={[styles.splitAmt, { color: textPrimary }]}>
+            ${allocs.totalPoolReserves.toLocaleString()}
+          </Text>
+        </View>
+      </View>
+
+      {showPoolBreakdown && amount > 0 && (
+        <View style={[styles.breakdown, { borderTopColor: border }]}>
+          {FOREX_POOL_DEFAULTS.map(pool => {
+            const poolAmt = allocs[pool.id as keyof typeof allocs] as number;
+            return (
+              <View key={pool.id} style={styles.poolRow}>
+                <View style={[styles.poolDot, { backgroundColor: pool.color }]} />
+                <Text style={[styles.poolName, { color: textSecondary }]}>
+                  {(labels as any)?.[pool.id] || pool.nameKey}
+                </Text>
+                <View style={[styles.poolBar, { backgroundColor: dark ? '#1a1a1a' : '#e5e5e5' }]}>
+                  <View style={[styles.poolBarFill, { width: `${pool.allocation * 100}%`, backgroundColor: pool.color }]} />
+                </View>
+                <Text style={[styles.poolAmt, { color: textPrimary }]}>
+                  ${poolAmt.toLocaleString()}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { borderRadius: 8, borderWidth: 1, padding: 14 },
+  title: { fontSize: 14, fontWeight: '600', marginBottom: 12 },
+  splitRow: { gap: 8 },
+  splitItem: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, paddingHorizontal: 12, borderRadius: 8 },
+  dot: { width: 10, height: 10, borderRadius: 5, marginRight: 8 },
+  splitLabel: { flex: 1, fontSize: 13, fontWeight: '500' },
+  splitPct: { fontSize: 12, fontWeight: '600', marginRight: 12 },
+  splitAmt: { fontSize: 14, fontWeight: '700' },
+  breakdown: { marginTop: 12, paddingTop: 12, borderTopWidth: 1 },
+  poolRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 8 },
+  poolDot: { width: 8, height: 8, borderRadius: 4, marginRight: 8 },
+  poolName: { width: 80, fontSize: 12 },
+  poolBar: { flex: 1, height: 6, borderRadius: 3, overflow: 'hidden', marginHorizontal: 8 },
+  poolBarFill: { height: '100%', borderRadius: 3 },
+  poolAmt: { width: 70, fontSize: 12, fontWeight: '600', textAlign: 'right' },
+});

package/src/components/ai/OneForexConsoleView.tsx

@@ -0,0 +1,90 @@
+/**
+ * OneForexConsoleView - Displays live forex trading console log feed
+ * Part of ONE Ecosystem SDK
+ */
+
+import React, { useRef, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, ViewStyle, Platform } from 'react-native';
+import type { ForexLogEntry } from '../../types/forex';
+import { FOREX_LOG_COLORS } from '../../types/console';
+
+const MONO = Platform.OS === 'ios' ? 'Courier New' : 'monospace';
+
+export interface OneForexConsoleViewProps {
+  /** Array of log entries to display */
+  logs: ForexLogEntry[];
+  /** Maximum visible entries */
+  maxItems?: number;
+  /** Auto-scroll to bottom */
+  autoScroll?: boolean;
+  /** Custom container style */
+  style?: ViewStyle;
+  /** Console height */
+  height?: number;
+}
+
+export const OneForexConsoleView: React.FC<OneForexConsoleViewProps> = ({
+  logs,
+  maxItems = 100,
+  autoScroll = true,
+  style,
+  height = 400,
+}) => {
+  const scrollRef = useRef<ScrollView>(null);
+  const visibleLogs = logs.slice(-maxItems);
+
+  useEffect(() => {
+    if (autoScroll && scrollRef.current) {
+      setTimeout(() => scrollRef.current?.scrollToEnd({ animated: true }), 50);
+    }
+  }, [logs.length, autoScroll]);
+
+  const formatTime = (ts: number) => {
+    const d = new Date(ts);
+    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <View style={[styles.container, { height }, style]}>
+      <ScrollView ref={scrollRef} style={styles.scroll} contentContainerStyle={styles.scrollContent}>
+        {visibleLogs.map((log) => (
+          <View key={log.id} style={styles.logRow}>
+            <Text style={styles.timestamp}>{formatTime(log.timestamp)}</Text>
+            <Text style={[styles.type, { color: FOREX_LOG_COLORS[log.type] || '#9CA3AF' }]}>
+              {log.type.padEnd(8)}
+            </Text>
+            <Text style={[
+              styles.message,
+              log.importance === 'high' && styles.messageHigh,
+            ]} numberOfLines={2}>
+              {log.message}
+            </Text>
+          </View>
+        ))}
+        {visibleLogs.length === 0 && (
+          <Text style={styles.emptyText}>Waiting for trading activity...</Text>
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+// Terminal palette – always dark regardless of app theme
+const T = {
+  base: '#0A0A0C',
+  border: '#2A2A35',
+  muted: '#555560',
+  secondary: '#9CA3AF',
+};
+
+const styles = StyleSheet.create({
+  container: { backgroundColor: T.base, borderRadius: 8, borderWidth: 1, borderColor: T.border, overflow: 'hidden' },
+  scroll: { flex: 1 },
+  scrollContent: { padding: 8 },
+  logRow: { flexDirection: 'row', paddingVertical: 3 },
+  timestamp: { fontFamily: MONO, fontSize: 10, color: T.muted, width: 60, marginRight: 6 },
+  type: { fontFamily: MONO, fontSize: 10, fontWeight: '700', width: 65, marginRight: 6 },
+  message: { fontFamily: MONO, fontSize: 10, color: T.secondary, flex: 1 },
+  messageHigh: { color: '#ffffff', fontWeight: '600' },
+  emptyText: { fontFamily: MONO, fontSize: 11, color: T.muted, textAlign: 'center', paddingVertical: 40 },
+});

package/src/components/ai/OneForexPairSelector.tsx

@@ -0,0 +1,101 @@
+/**
+ * OneForexPairSelector - Stablecoin FX pair selection for forex trading
+ * Part of ONE Ecosystem SDK
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
+import { FOREX_CURRENCY_PAIRS } from '../../types/forex';
+import type { ForexCurrencyPair } from '../../types/forex';
+
+export interface OneForexPairSelectorProps {
+  /** Currently selected pair IDs */
+  selectedPairs: string[];
+  /** Callback when a pair is toggled */
+  onTogglePair: (pairId: string) => void;
+  /** Accent color for selected state */
+  accentColor?: string;
+  /** Section title */
+  title?: string;
+  /** Section subtitle */
+  subtitle?: string;
+  /** Custom pairs list (defaults to FOREX_CURRENCY_PAIRS) */
+  pairs?: ForexCurrencyPair[];
+  /** Custom container style */
+  style?: ViewStyle;
+}
+
+export const OneForexPairSelector: React.FC<OneForexPairSelectorProps> = ({
+  selectedPairs,
+  onTogglePair,
+  accentColor = '#0EA5E9',
+  title,
+  subtitle,
+  pairs = FOREX_CURRENCY_PAIRS,
+  style,
+}) => {
+  const handleToggle = (pairId: string) => {
+    if (selectedPairs.includes(pairId) && selectedPairs.length <= 1) return;
+    onTogglePair(pairId);
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      {title && <Text style={styles.title}>{title}</Text>}
+      {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+
+      <View style={styles.pairGrid}>
+        {pairs.map((pair) => {
+          const isSelected = selectedPairs.includes(pair.id);
+          return (
+            <TouchableOpacity
+              key={pair.id}
+              style={[
+                styles.pairBtn,
+                isSelected && styles.pairBtnActive,
+                isSelected && { borderColor: accentColor, backgroundColor: accentColor + '08' },
+              ]}
+              onPress={() => handleToggle(pair.id)}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.pairFlag}>{pair.flag}</Text>
+              <View style={styles.pairInfo}>
+                <Text style={[styles.pairSymbol, isSelected && { color: accentColor, fontWeight: '600' }]}>
+                  {pair.symbol}
+                </Text>
+                <Text style={styles.pairName}>{pair.name}</Text>
+              </View>
+              {isSelected && (
+                <Text style={[styles.check, { color: accentColor }]}>{'\u2713'}</Text>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+
+      <Text style={styles.selectedInfo}>
+        {selectedPairs.length} pair{selectedPairs.length !== 1 ? 's' : ''} selected (min: 1)
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { marginBottom: 16 },
+  title: { fontSize: 16, fontWeight: '600', color: '#1a1a1a', marginBottom: 4 },
+  subtitle: { fontSize: 12, color: '#666', marginBottom: 12 },
+  pairGrid: { gap: 8 },
+  pairBtn: {
+    flexDirection: 'row', alignItems: 'center',
+    paddingHorizontal: 12, paddingVertical: 12,
+    borderRadius: 8, borderWidth: 1.5, borderColor: '#e5e5e5',
+    backgroundColor: '#fff', gap: 10,
+  },
+  pairBtnActive: { borderWidth: 2 },
+  pairFlag: { fontSize: 20 },
+  pairInfo: { flex: 1 },
+  pairSymbol: { fontSize: 14, color: '#666' },
+  pairName: { fontSize: 11, color: '#999' },
+  check: { fontSize: 16, fontWeight: '700' },
+  selectedInfo: { fontSize: 12, color: '#888', marginTop: 8 },
+});

package/src/components/ai/OneForexPoolCard.tsx

@@ -0,0 +1,105 @@
+/**
+ * OneForexPoolCard - Displays a forex liquidity pool with metrics
+ * Part of ONE Ecosystem SDK
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, ViewStyle } from 'react-native';
+import type { ForexPool } from '../../types/forex';
+
+export interface OneForexPoolCardProps {
+  /** Pool data object */
+  pool: ForexPool;
+  /** Pool display name (provide translated string) */
+  poolName?: string;
+  /** Whether to show enhanced metrics (APY, flow, tx count) */
+  showMetrics?: boolean;
+  /** Custom accent color override */
+  accentColor?: string;
+  /** Custom container style */
+  style?: ViewStyle;
+  /** Dark mode */
+  dark?: boolean;
+}
+
+export const OneForexPoolCard: React.FC<OneForexPoolCardProps> = ({
+  pool,
+  poolName,
+  showMetrics = true,
+  accentColor,
+  style,
+  dark = true,
+}) => {
+  const color = accentColor || pool.color;
+  const bg = dark ? '#111111' : '#ffffff';
+  const border = dark ? '#1a1a1a' : '#e5e5e5';
+  const textPrimary = dark ? '#ffffff' : '#1a1a1a';
+  const textSecondary = dark ? '#9ca3af' : '#666666';
+  const textMuted = dark ? '#666666' : '#999999';
+  const barBg = dark ? '#1a1a1a' : '#e5e5e5';
+
+  return (
+    <View style={[styles.container, { backgroundColor: bg, borderColor: border }, style]}>
+      <View style={styles.header}>
+        <View style={[styles.dot, { backgroundColor: color }]} />
+        <Text style={[styles.name, { color: textPrimary }]}>
+          {poolName || pool.nameKey}
+        </Text>
+        <Text style={[styles.alloc, { color: textSecondary }]}>
+          {(pool.allocation * 100).toFixed(0)}%
+        </Text>
+      </View>
+
+      <View style={[styles.barOuter, { backgroundColor: barBg }]}>
+        <View style={[styles.barFill, { width: `${pool.utilization * 100}%`, backgroundColor: color }]} />
+      </View>
+
+      <View style={styles.statsRow}>
+        <Text style={[styles.statValue, { color: textSecondary }]}>
+          ${(pool.totalSize / 1_000_000).toFixed(1)}M
+        </Text>
+        <Text style={[styles.statLabel, { color: textMuted }]}>
+          {(pool.utilization * 100).toFixed(1)}% util
+        </Text>
+      </View>
+
+      {showMetrics && (
+        <View style={[styles.metricsRow, { borderTopColor: border }]}>
+          <View style={styles.metricItem}>
+            <Text style={[styles.metricLabel, { color: textMuted }]}>APY 7d</Text>
+            <Text style={[styles.metricValue, { color: '#10B981' }]}>
+              {pool.apy7d.toFixed(1)}%
+            </Text>
+          </View>
+          <View style={styles.metricItem}>
+            <Text style={[styles.metricLabel, { color: textMuted }]}>24h Flow</Text>
+            <Text style={[styles.metricValue, { color: pool.netFlow24h >= 0 ? '#10B981' : '#EF4444' }]}>
+              {pool.netFlow24h >= 0 ? '+' : ''}${(pool.netFlow24h / 1000).toFixed(0)}K
+            </Text>
+          </View>
+          <View style={styles.metricItem}>
+            <Text style={[styles.metricLabel, { color: textMuted }]}>Txs</Text>
+            <Text style={[styles.metricValue, { color: textPrimary }]}>{pool.txCount24h}</Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { borderRadius: 8, borderWidth: 1, padding: 14 },
+  header: { flexDirection: 'row', alignItems: 'center', marginBottom: 8, gap: 8 },
+  dot: { width: 8, height: 8, borderRadius: 4 },
+  name: { fontSize: 13, fontWeight: '600', flex: 1 },
+  alloc: { fontSize: 12 },
+  barOuter: { height: 6, borderRadius: 3, overflow: 'hidden', marginBottom: 6 },
+  barFill: { height: '100%', borderRadius: 3 },
+  statsRow: { flexDirection: 'row', justifyContent: 'space-between' },
+  statValue: { fontSize: 12, fontWeight: '600' },
+  statLabel: { fontSize: 11 },
+  metricsRow: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 8, marginTop: 8, borderTopWidth: 1 },
+  metricItem: { alignItems: 'center', flex: 1 },
+  metricLabel: { fontSize: 9, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 2 },
+  metricValue: { fontSize: 12, fontWeight: '600' },
+});

package/src/components/ai/OneForexTradeHistory.tsx

@@ -0,0 +1,107 @@
+/**
+ * OneForexTradeHistory - Displays trade history with settlement details
+ * Part of ONE Ecosystem SDK
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, ViewStyle, Platform } from 'react-native';
+import type { ForexTradeRecord } from '../../types/forex';
+
+const MONO = Platform.OS === 'ios' ? 'Courier New' : 'monospace';
+
+export interface OneForexTradeHistoryProps {
+  /** Trade records to display */
+  trades: ForexTradeRecord[];
+  /** Maximum trades to show */
+  maxItems?: number;
+  /** Show settlement details (clearing/hedging/insurance fees) */
+  showSettlementDetails?: boolean;
+  /** Show transaction hash */
+  showTxHash?: boolean;
+  /** Empty state text */
+  emptyText?: string;
+  /** Custom container style */
+  style?: ViewStyle;
+}
+
+export const OneForexTradeHistory: React.FC<OneForexTradeHistoryProps> = ({
+  trades,
+  maxItems = 50,
+  showSettlementDetails = true,
+  showTxHash = true,
+  emptyText = 'No trade history yet',
+  style,
+}) => {
+  const visibleTrades = trades.slice(-maxItems).reverse();
+
+  if (visibleTrades.length === 0) {
+    return (
+      <View style={[styles.empty, style]}>
+        <Text style={styles.emptyText}>{emptyText}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={[styles.container, style]} contentContainerStyle={styles.scrollContent}>
+      {visibleTrades.map((trade) => (
+        <View key={trade.id} style={styles.card}>
+          <View style={styles.header}>
+            <Text style={styles.pair}>{trade.pairSymbol}</Text>
+            <View style={[
+              styles.sideBadge,
+              { backgroundColor: trade.side === 'BUY' ? '#10B98118' : '#EF444418', borderColor: trade.side === 'BUY' ? '#10B98140' : '#EF444440' },
+            ]}>
+              <Text style={[styles.sideText, { color: trade.side === 'BUY' ? '#10B981' : '#EF4444' }]}>
+                {trade.side}
+              </Text>
+            </View>
+            <Text style={[styles.pnl, { color: trade.pnl >= 0 ? '#10B981' : '#EF4444' }]}>
+              {trade.pnl >= 0 ? '+' : ''}${trade.pnl.toFixed(2)}
+            </Text>
+          </View>
+
+          <View style={styles.details}>
+            <Text style={styles.detail}>
+              {trade.lots.toFixed(2)} lots | {trade.pips >= 0 ? '+' : ''}{trade.pips.toFixed(1)} pips
+            </Text>
+            <Text style={styles.time}>{new Date(trade.timestamp).toLocaleString()}</Text>
+          </View>
+
+          {showSettlementDetails && trade.clearingFee !== undefined && (
+            <View style={styles.settlement}>
+              <Text style={styles.settlementText}>
+                CLR: ${trade.clearingFee.toFixed(2)} | HDG: ${(trade.hedgingCost || 0).toFixed(2)} | INS: ${(trade.insuranceReserve || 0).toFixed(2)}
+              </Text>
+            </View>
+          )}
+
+          {showTxHash && trade.txHash && (
+            <Text style={styles.txHash}>
+              {trade.txHash.slice(0, 10)}...{trade.txHash.slice(-6)}
+            </Text>
+          )}
+        </View>
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  scrollContent: { paddingBottom: 16 },
+  empty: { alignItems: 'center', justifyContent: 'center', padding: 40 },
+  emptyText: { fontSize: 14, color: '#666' },
+  card: { backgroundColor: '#111111', borderRadius: 6, borderWidth: 1, borderColor: '#1a1a1a', padding: 12, marginBottom: 8 },
+  header: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  pair: { fontSize: 13, fontWeight: '600', color: '#ffffff' },
+  sideBadge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 3, borderWidth: 1 },
+  sideText: { fontSize: 9, fontWeight: '700', letterSpacing: 0.5 },
+  pnl: { fontFamily: MONO, marginLeft: 'auto', fontSize: 13, fontWeight: '700' },
+  details: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 6 },
+  detail: { fontFamily: MONO, fontSize: 11, color: '#9ca3af' },
+  time: { fontSize: 11, color: '#666' },
+  settlement: { marginTop: 6, paddingTop: 6, borderTopWidth: 1, borderTopColor: '#1a1a1a' },
+  settlementText: { fontFamily: MONO, fontSize: 10, color: '#666' },
+  txHash: { fontFamily: MONO, fontSize: 9, color: '#444', marginTop: 2 },
+});