@one_deploy/sdk 1.0.7 → 1.2.0

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