@one_deploy/sdk 1.0.3 → 1.0.5

package/src/components/ai/OnePairSelector.tsx

@@ -0,0 +1,181 @@
+/**
+ * OnePairSelector - Trading pair selection component for AI trading
+ * Part of ONE Ecosystem SDK - can be used by any ecosystem partner
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ViewStyle, TextStyle } from 'react-native';
+
+// Common trading pairs with icons
+export const PAIR_ICONS: Record<string, string> = {
+  'BTC/USDT': '₿',
+  'ETH/USDT': 'Ξ',
+  'SOL/USDT': '◎',
+  'BNB/USDT': '◆',
+  'XRP/USDT': '✕',
+  'DOGE/USDT': 'Ð',
+  'ADA/USDT': '◈',
+  'AVAX/USDT': '▲',
+  'DOT/USDT': '●',
+  'MATIC/USDT': '⬡',
+  'LINK/USDT': '◇',
+  'UNI/USDT': '🦄',
+  'ATOM/USDT': '⚛',
+  'LTC/USDT': 'Ł',
+  'ARB/USDT': '◆',
+  'OP/USDT': '◉',
+};
+
+export interface OnePairSelectorProps {
+  /** List of supported trading pairs */
+  supportedPairs: string[];
+  /** Currently selected pairs */
+  selectedPairs: string[];
+  /** Callback when pair selection changes */
+  onTogglePair: (pair: string) => void;
+  /** Accent color for selected state */
+  accentColor?: string;
+  /** Section title */
+  title?: string;
+  /** Section subtitle */
+  subtitle?: string;
+  /** Minimum required selections */
+  minSelections?: number;
+  /** Maximum allowed selections (0 = unlimited) */
+  maxSelections?: number;
+  /** Custom styles */
+  style?: ViewStyle;
+  /** Custom title style */
+  titleStyle?: TextStyle;
+}
+
+export const OnePairSelector: React.FC<OnePairSelectorProps> = ({
+  supportedPairs,
+  selectedPairs,
+  onTogglePair,
+  accentColor = '#188775',
+  title,
+  subtitle,
+  minSelections = 1,
+  maxSelections = 0,
+  style,
+  titleStyle,
+}) => {
+  const handleToggle = (pair: string) => {
+    const isSelected = selectedPairs.includes(pair);
+
+    // Prevent deselecting below minimum
+    if (isSelected && selectedPairs.length <= minSelections) {
+      return;
+    }
+
+    // Prevent selecting above maximum
+    if (!isSelected && maxSelections > 0 && selectedPairs.length >= maxSelections) {
+      return;
+    }
+
+    onTogglePair(pair);
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      {title && <Text style={[styles.title, titleStyle]}>{title}</Text>}
+      {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+
+      <View style={styles.pairsContainer}>
+        {supportedPairs.map((pair) => {
+          const isSelected = selectedPairs.includes(pair);
+          const icon = PAIR_ICONS[pair] || '●';
+          const baseSymbol = pair.split('/')[0];
+
+          return (
+            <TouchableOpacity
+              key={pair}
+              style={[
+                styles.pairChip,
+                isSelected && styles.pairChipSelected,
+                isSelected && { backgroundColor: accentColor + '15', borderColor: accentColor }
+              ]}
+              onPress={() => handleToggle(pair)}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.pairIcon}>{icon}</Text>
+              <Text style={[
+                styles.pairText,
+                isSelected && { color: accentColor, fontWeight: '600' }
+              ]}>
+                {baseSymbol}
+              </Text>
+              {isSelected && (
+                <Text style={[styles.checkmark, { color: accentColor }]}>✓</Text>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+
+      <View style={styles.selectedInfo}>
+        <Text style={styles.selectedText}>
+          {selectedPairs.length} pair{selectedPairs.length !== 1 ? 's' : ''} selected
+          {minSelections > 0 && ` (min: ${minSelections})`}
+          {maxSelections > 0 && ` (max: ${maxSelections})`}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1a1a1a',
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 12,
+    color: '#666',
+    marginBottom: 12,
+  },
+  pairsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  pairChip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e5e5e5',
+    gap: 6,
+  },
+  pairChipSelected: {
+    borderWidth: 2,
+  },
+  pairIcon: {
+    fontSize: 14,
+  },
+  pairText: {
+    fontSize: 14,
+    color: '#666',
+  },
+  checkmark: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  selectedInfo: {
+    marginTop: 8,
+    paddingVertical: 4,
+  },
+  selectedText: {
+    fontSize: 12,
+    color: '#888',
+  },
+});

package/src/components/ai/OneTierSelector.tsx

@@ -0,0 +1,187 @@
+/**
+ * OneTierSelector - Investment tier selection component for AI trading
+ * Part of ONE Ecosystem SDK - can be used by any ecosystem partner
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ViewStyle, TextStyle } from 'react-native';
+
+export interface Tier {
+  tier: number;
+  amount: number;
+  label: string;
+  label_zh?: string;
+}
+
+export interface OneTierSelectorProps {
+  /** Available investment tiers */
+  tiers: Tier[];
+  /** Currently selected tier */
+  selectedTier: Tier | null;
+  /** Callback when tier selection changes */
+  onSelectTier: (tier: Tier) => void;
+  /** Accent color for selected state */
+  accentColor?: string;
+  /** Section title */
+  title?: string;
+  /** Section subtitle */
+  subtitle?: string;
+  /** Show recommended badge on middle tier */
+  showRecommended?: boolean;
+  /** Recommended label text */
+  recommendedLabel?: string;
+  /** Use Chinese labels */
+  useZhLabels?: boolean;
+  /** Custom styles */
+  style?: ViewStyle;
+  /** Custom title style */
+  titleStyle?: TextStyle;
+}
+
+export const OneTierSelector: React.FC<OneTierSelectorProps> = ({
+  tiers,
+  selectedTier,
+  onSelectTier,
+  accentColor = '#188775',
+  title,
+  subtitle,
+  showRecommended = true,
+  recommendedLabel = 'Recommended',
+  useZhLabels = false,
+  style,
+  titleStyle,
+}) => {
+  // Middle tier is usually recommended
+  const recommendedTierIndex = Math.floor(tiers.length / 2);
+
+  return (
+    <View style={[styles.container, style]}>
+      {title && <Text style={[styles.title, titleStyle]}>{title}</Text>}
+      {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+
+      <View style={styles.tiersContainer}>
+        {tiers.map((tier, index) => {
+          const isSelected = selectedTier?.tier === tier.tier;
+          const isRecommended = showRecommended && index === recommendedTierIndex;
+
+          return (
+            <TouchableOpacity
+              key={tier.tier}
+              style={[
+                styles.tierCard,
+                isSelected && styles.tierCardSelected,
+                isSelected && { borderColor: accentColor }
+              ]}
+              onPress={() => onSelectTier(tier)}
+              activeOpacity={0.7}
+            >
+              {isRecommended && (
+                <View style={[styles.recommendedBadge, { backgroundColor: accentColor }]}>
+                  <Text style={styles.recommendedText}>{recommendedLabel}</Text>
+                </View>
+              )}
+
+              <Text style={[
+                styles.tierLabel,
+                isSelected && { color: accentColor },
+                isRecommended && styles.tierLabelWithBadge
+              ]}>
+                {useZhLabels && tier.label_zh ? tier.label_zh : tier.label}
+              </Text>
+
+              <Text style={[
+                styles.tierAmount,
+                isSelected && { color: accentColor }
+              ]}>
+                ${tier.amount.toLocaleString()}
+              </Text>
+
+              {isSelected && (
+                <View style={[styles.checkCircle, { backgroundColor: accentColor }]}>
+                  <Text style={styles.checkmark}>✓</Text>
+                </View>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1a1a1a',
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 12,
+    color: '#666',
+    marginBottom: 12,
+  },
+  tiersContainer: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  tierCard: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: '#e5e5e5',
+    alignItems: 'center',
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  tierCardSelected: {
+    backgroundColor: '#fff',
+  },
+  tierLabel: {
+    fontSize: 12,
+    color: '#666',
+    marginBottom: 4,
+  },
+  tierLabelWithBadge: {
+    marginTop: 16,
+  },
+  tierAmount: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#1a1a1a',
+  },
+  checkCircle: {
+    position: 'absolute',
+    top: -8,
+    right: -8,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkmark: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#fff',
+  },
+  recommendedBadge: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    paddingVertical: 4,
+    alignItems: 'center',
+  },
+  recommendedText: {
+    fontSize: 10,
+    fontWeight: '700',
+    color: '#fff',
+    textTransform: 'uppercase',
+  },
+});

package/src/components/ai/index.ts

@@ -0,0 +1,17 @@
+/**
+ * ONE AI Trading Components
+ * Reusable UI components for AI trading integration
+ * Can be used by any ecosystem partner
+ */
+
+// Chain Selection
+export * from './OneChainSelector';
+
+// Investment Tier Selection
+export * from './OneTierSelector';
+
+// Cycle Selection
+export * from './OneCycleSelector';
+
+// Trading Pair Selection
+export * from './OnePairSelector';

package/src/components/index.ts

@@ -22,3 +22,6 @@ export * from './OneNFTGallery';
 
 // Receive
 export * from './OneReceiveWidget';
+
+// AI Trading Components
+export * from './ai';

package/src/hooks/index.ts

@@ -1,2 +1,22 @@
 export { useWalletBalance } from './useWalletBalance';
 export { useTokenPrice, useTokenPrices } from './useTokenPrice';
+
+// AI Trading Hooks
+export {
+  useAIStrategies,
+  useAIStrategy,
+  useAIOrders,
+  useAIPortfolio,
+  useAIMarketData,
+  useAITrading,
+  setAITradingAccessToken,
+  clearAITradingAccessToken,
+  type UseAIStrategiesOptions,
+  type UseAIStrategiesResult,
+  type UseAIStrategyResult,
+  type UseAIOrdersOptions,
+  type UseAIOrdersResult,
+  type UseAIPortfolioResult,
+  type UseAIMarketDataResult,
+  type UseAITradingResult,
+} from './useAITrading';