@one_deploy/sdk 1.0.7 → 1.2.0

package/src/components/ai/OneChainSelector.tsx

@@ -1,10 +1,10 @@
 /**
- * OneChainSelector - Multi-chain selection component with dropdown style
- * Part of ONE Ecosystem SDK - Responsive design for desktop and mobile
+ * OneChainSelector - Multi-chain selection component for AI trading
+ * Part of ONE Ecosystem SDK - can be used by any ecosystem partner
  */
 
-import React, { useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, ViewStyle, TextStyle, Modal, ScrollView, Pressable, Dimensions, Platform } from 'react-native';
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ViewStyle, TextStyle } from 'react-native';
 
 // Chain configuration with branding
 export const CHAIN_CONFIG: Record<string, { name: string; icon: string; color: string }> = {
@@ -37,19 +37,12 @@ export interface OneChainSelectorProps {
   subtitle?: string;
   /** Minimum required selections (for multi-select) */
   minSelections?: number;
-  /** Placeholder text */
-  placeholder?: string;
   /** Custom styles */
   style?: ViewStyle;
   /** Custom title style */
   titleStyle?: TextStyle;
 }
 
-const isDesktop = () => {
-  const { width } = Dimensions.get('window');
-  return Platform.OS === 'web' && width >= 768;
-};
-
 export const OneChainSelector: React.FC<OneChainSelectorProps> = ({
   supportedChains,
   selectedChains,
@@ -59,179 +52,69 @@ export const OneChainSelector: React.FC<OneChainSelectorProps> = ({
   title,
   subtitle,
   minSelections = 1,
-  placeholder = 'Select chains...',
   style,
   titleStyle,
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const desktop = isDesktop();
-
   const handleSelect = (chain: string) => {
     if (multiSelect) {
+      // In multi-select, prevent deselecting if at minimum
       if (selectedChains.includes(chain) && selectedChains.length <= minSelections) {
         return;
       }
       onSelectChain(chain);
     } else {
+      // Single select - always allow selection
       if (!selectedChains.includes(chain)) {
         onSelectChain(chain);
       }
-      setIsOpen(false);
     }
   };
 
-  // Desktop: Inline grid display
-  if (desktop) {
-    return (
-      <View style={[styles.container, style]}>
-        {title && <Text style={[styles.title, titleStyle]}>{title}</Text>}
-        {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
-
-        <View style={styles.desktopGrid}>
-          {supportedChains.map((chain) => {
-            const chainInfo = CHAIN_CONFIG[chain] || { name: chain, icon: '●', color: '#888' };
-            const isSelected = selectedChains.includes(chain);
-
-            return (
-              <TouchableOpacity
-                key={chain}
-                style={[
-                  styles.desktopChip,
-                  isSelected && styles.desktopChipSelected,
-                  isSelected && { borderColor: accentColor, backgroundColor: accentColor + '12' }
-                ]}
-                onPress={() => handleSelect(chain)}
-                activeOpacity={0.7}
-              >
-                <View style={[styles.desktopIconBg, { backgroundColor: chainInfo.color + '20' }]}>
-                  <Text style={[styles.desktopIcon, { color: chainInfo.color }]}>{chainInfo.icon}</Text>
-                </View>
-                <Text style={[
-                  styles.desktopChipText,
-                  isSelected && { color: accentColor, fontWeight: '600' }
-                ]}>
-                  {chainInfo.name}
-                </Text>
-                {isSelected && (
-                  <View style={[styles.desktopCheckbox, { backgroundColor: accentColor }]}>
-                    <Text style={styles.desktopCheckIcon}>✓</Text>
-                  </View>
-                )}
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-
-        {multiSelect && selectedChains.length > 0 && (
-          <Text style={[styles.selectedCount, { color: accentColor }]}>
-            {selectedChains.length} chain{selectedChains.length > 1 ? 's' : ''} selected
-          </Text>
-        )}
-      </View>
-    );
-  }
-
-  // Mobile: Dropdown modal
   return (
     <View style={[styles.container, style]}>
       {title && <Text style={[styles.title, titleStyle]}>{title}</Text>}
       {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
 
-      <TouchableOpacity
-        style={[styles.dropdownTrigger, { borderColor: isOpen ? accentColor : '#e5e5e5' }]}
-        onPress={() => setIsOpen(true)}
-        activeOpacity={0.7}
-      >
-        <View style={styles.selectedPreview}>
-          {selectedChains.slice(0, 3).map((chain) => {
-            const chainInfo = CHAIN_CONFIG[chain] || { name: chain, icon: '●', color: '#888' };
-            return (
-              <View key={chain} style={[styles.previewChip, { backgroundColor: chainInfo.color + '20' }]}>
-                <Text style={[styles.previewIcon, { color: chainInfo.color }]}>{chainInfo.icon}</Text>
+      <View style={styles.chainsContainer}>
+        {supportedChains.map((chain) => {
+          const chainInfo = CHAIN_CONFIG[chain] || { name: chain, icon: '●', color: '#888' };
+          const isSelected = selectedChains.includes(chain);
+
+          return (
+            <TouchableOpacity
+              key={chain}
+              style={[
+                styles.chainChip,
+                isSelected && styles.chainChipSelected,
+                isSelected && { borderColor: accentColor, backgroundColor: accentColor + '15' }
+              ]}
+              onPress={() => handleSelect(chain)}
+              activeOpacity={0.7}
+            >
+              <View style={[styles.chainIconBg, { backgroundColor: chainInfo.color + '20' }]}>
+                <Text style={[styles.chainIcon, { color: chainInfo.color }]}>{chainInfo.icon}</Text>
               </View>
-            );
-          })}
-          {selectedChains.length > 3 && (
-            <View style={styles.previewMore}>
-              <Text style={styles.previewMoreText}>+{selectedChains.length - 3}</Text>
-            </View>
-          )}
-          {selectedChains.length === 0 && (
-            <Text style={styles.placeholderText}>{placeholder}</Text>
-          )}
-        </View>
-        <Text style={styles.dropdownArrow}>{isOpen ? '▲' : '▼'}</Text>
-      </TouchableOpacity>
+              <Text style={[
+                styles.chainText,
+                isSelected && { color: accentColor, fontWeight: '600' }
+              ]}>
+                {chainInfo.name}
+              </Text>
+              {isSelected && (
+                <Text style={[styles.checkmark, { color: accentColor }]}>✓</Text>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
 
       {multiSelect && selectedChains.length > 0 && (
-        <Text style={[styles.selectedCount, { color: accentColor }]}>
-          {selectedChains.length} chain{selectedChains.length > 1 ? 's' : ''} selected
-        </Text>
+        <View style={styles.selectedInfo}>
+          <Text style={styles.selectedText}>
+            {selectedChains.length} chain{selectedChains.length > 1 ? 's' : ''} selected
+          </Text>
+        </View>
       )}
-
-      <Modal
-        visible={isOpen}
-        transparent
-        animationType="fade"
-        onRequestClose={() => setIsOpen(false)}
-      >
-        <Pressable style={styles.modalOverlay} onPress={() => setIsOpen(false)}>
-          <View style={styles.modalContent}>
-            <View style={styles.modalHeader}>
-              <Text style={styles.modalTitle}>{title || 'Select Chains'}</Text>
-              <TouchableOpacity onPress={() => setIsOpen(false)}>
-                <Text style={styles.modalClose}>✕</Text>
-              </TouchableOpacity>
-            </View>
-
-            <ScrollView style={styles.optionsList} showsVerticalScrollIndicator={false}>
-              {supportedChains.map((chain) => {
-                const chainInfo = CHAIN_CONFIG[chain] || { name: chain, icon: '●', color: '#888' };
-                const isSelected = selectedChains.includes(chain);
-
-                return (
-                  <TouchableOpacity
-                    key={chain}
-                    style={[
-                      styles.optionItem,
-                      isSelected && styles.optionItemSelected,
-                      isSelected && { backgroundColor: accentColor + '10', borderColor: accentColor }
-                    ]}
-                    onPress={() => handleSelect(chain)}
-                    activeOpacity={0.7}
-                  >
-                    <View style={[styles.optionIconBg, { backgroundColor: chainInfo.color + '20' }]}>
-                      <Text style={[styles.optionIcon, { color: chainInfo.color }]}>{chainInfo.icon}</Text>
-                    </View>
-                    <Text style={[
-                      styles.optionText,
-                      isSelected && { color: accentColor, fontWeight: '600' }
-                    ]}>
-                      {chainInfo.name}
-                    </Text>
-                    {isSelected ? (
-                      <View style={[styles.checkbox, { backgroundColor: accentColor }]}>
-                        <Text style={styles.checkboxIcon}>✓</Text>
-                      </View>
-                    ) : (
-                      <View style={styles.checkboxEmpty} />
-                    )}
-                  </TouchableOpacity>
-                );
-              })}
-            </ScrollView>
-
-            {multiSelect && (
-              <TouchableOpacity
-                style={[styles.doneButton, { backgroundColor: accentColor }]}
-                onPress={() => setIsOpen(false)}
-              >
-                <Text style={styles.doneButtonText}>Done ({selectedChains.length})</Text>
-              </TouchableOpacity>
-            )}
-          </View>
-        </Pressable>
-      </Modal>
     </View>
   );
 };
@@ -251,206 +134,50 @@ const styles = StyleSheet.create({
     color: '#666',
     marginBottom: 12,
   },
-  // Desktop styles
-  desktopGrid: {
+  chainsContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 10,
+    gap: 8,
   },
-  desktopChip: {
+  chainChip: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 14,
-    paddingVertical: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
     backgroundColor: '#fff',
-    borderRadius: 10,
+    borderRadius: 12,
     borderWidth: 2,
-    borderColor: '#e8e8e8',
-    gap: 10,
-    cursor: 'pointer' as any,
+    borderColor: '#e5e5e5',
+    gap: 8,
   },
-  desktopChipSelected: {
+  chainChipSelected: {
     borderWidth: 2,
   },
-  desktopIconBg: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
+  chainIconBg: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  desktopIcon: {
+  chainIcon: {
     fontSize: 14,
     fontWeight: '700',
   },
-  desktopChipText: {
+  chainText: {
     fontSize: 14,
-    color: '#444',
-  },
-  desktopCheckbox: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: 4,
-  },
-  desktopCheckIcon: {
-    fontSize: 12,
-    color: '#fff',
-    fontWeight: '700',
-  },
-  // Mobile dropdown styles
-  dropdownTrigger: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 14,
-    paddingVertical: 12,
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    borderWidth: 2,
-    borderColor: '#e5e5e5',
-    minHeight: 52,
-  },
-  selectedPreview: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-  },
-  previewChip: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
+    color: '#666',
   },
-  previewIcon: {
-    fontSize: 14,
+  checkmark: {
+    fontSize: 16,
     fontWeight: '700',
   },
-  previewMore: {
-    paddingHorizontal: 8,
+  selectedInfo: {
+    marginTop: 8,
     paddingVertical: 4,
-    backgroundColor: '#f0f0f0',
-    borderRadius: 8,
-  },
-  previewMoreText: {
-    fontSize: 12,
-    color: '#666',
-    fontWeight: '600',
-  },
-  placeholderText: {
-    fontSize: 14,
-    color: '#999',
-  },
-  dropdownArrow: {
-    fontSize: 12,
-    color: '#888',
-    marginLeft: 8,
   },
-  selectedCount: {
+  selectedText: {
     fontSize: 12,
-    marginTop: 6,
-    fontWeight: '500',
-  },
-  // Modal styles
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContent: {
-    width: '85%',
-    maxWidth: 340,
-    maxHeight: '70%',
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    overflow: 'hidden',
-  },
-  modalHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
-  },
-  modalTitle: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#1a1a1a',
-  },
-  modalClose: {
-    fontSize: 20,
     color: '#888',
-    padding: 4,
-  },
-  optionsList: {
-    padding: 8,
-  },
-  optionItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: 'transparent',
-    marginBottom: 6,
-    gap: 12,
-  },
-  optionItemSelected: {
-    borderWidth: 1,
-  },
-  optionIconBg: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  optionIcon: {
-    fontSize: 16,
-    fontWeight: '700',
-  },
-  optionText: {
-    flex: 1,
-    fontSize: 15,
-    color: '#333',
-  },
-  checkbox: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  checkboxIcon: {
-    fontSize: 14,
-    color: '#fff',
-    fontWeight: '700',
-  },
-  checkboxEmpty: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    borderColor: '#ddd',
-  },
-  doneButton: {
-    marginHorizontal: 16,
-    marginVertical: 12,
-    paddingVertical: 14,
-    borderRadius: 10,
-    alignItems: 'center',
-  },
-  doneButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#fff',
   },
 });

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