OneCycleSelector

OneCycleSelector 组件显示投资周期选项（锁定期）及其关联的分成比例。用户选择其资金在 AI 代理交易期间被锁定的时长。

仅限 React Native

OneCycleSelector 从 @one_deploy/sdk 的 React Native 入口导出。不适用于 Web 平台。

快速入门

import { useState } from 'react';
import { OneCycleSelector } from '@one_deploy/sdk';

function CycleStep() {
  const [cycleDays, setCycleDays] = useState<number | null>(null);

  return (
    <OneCycleSelector
      strategyId="strat_abc123"
      onSelect={(days) => {
        setCycleDays(days);
        console.log('Selected cycle:', days, 'days');
      }}
    />
  );
}

OneCycleSelectorProps

interface OneCycleSelectorProps {
  /** Strategy ID to determine available cycles. */
  strategyId: string;

  /** Currently selected cycle duration in days. */
  selectedCycle?: number;

  /** Callback fired when the user selects a cycle option. */
  onSelect: (cycleDays: number) => void;

  /** Whether to display the share rate next to each option. Defaults to true. */
  showShareRate?: boolean;

  /** Custom share rates to override DEFAULT_SHARE_RATES. */
  shareRates?: Record<number, number>;

  /** Additional style applied to the container. */
  style?: ViewStyle;

  /** Style applied to each cycle option. */
  itemStyle?: ViewStyle;

  /** Style applied to the selected cycle option. */
  selectedItemStyle?: ViewStyle;

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

属性表

属性	类型	必填	默认值	说明
strategyId	string	是	--	用于获取可用周期的策略 ID
selectedCycle	number	否	--	当前选中的周期（天数）
onSelect	(cycleDays: number) => void	是	--	选择回调
showShareRate	boolean	否	true	在每个选项上显示分成比例
shareRates	Record<number, number>	否	DEFAULT_SHARE_RATES	覆盖分成比例映射
style	ViewStyle	否	--	容器样式
itemStyle	ViewStyle	否	--	单个选项样式
selectedItemStyle	ViewStyle	否	--	选中选项样式
testID	string	否	--	测试 ID

DEFAULT_SHARE_RATES 常量

import { DEFAULT_SHARE_RATES } from '@one_deploy/sdk';

// DEFAULT_SHARE_RATES: Record<number, number>
// {
//   7:   0.60,   // 7-day cycle  -> 60% investor share
//   14:  0.65,   // 14-day cycle -> 65% investor share
//   30:  0.70,   // 30-day cycle -> 70% investor share
//   60:  0.75,   // 60-day cycle -> 75% investor share
//   90:  0.80,   // 90-day cycle -> 80% investor share
//   180: 0.85,   // 180-day cycle -> 85% investor share
// }

使用示例

基本用法（带分成比例）

import { useState } from 'react';
import { View, Text } from 'react-native';
import { OneCycleSelector, DEFAULT_SHARE_RATES } from '@one_deploy/sdk';

function CycleSelection() {
  const [cycleDays, setCycleDays] = useState<number | null>(null);

  return (
    <View>
      <OneCycleSelector
        strategyId="strat_abc123"
        selectedCycle={cycleDays ?? undefined}
        showShareRate={true}
        onSelect={setCycleDays}
      />

      {cycleDays && (
        <View style={styles.info}>
          <Text style={styles.label}>Lock period:</Text>
          <Text>{cycleDays} days</Text>
          <Text style={styles.label}>Your profit share:</Text>
          <Text>{(DEFAULT_SHARE_RATES[cycleDays] * 100).toFixed(0)}%</Text>
          <Text style={styles.label}>Platform fee:</Text>
          <Text>{((1 - DEFAULT_SHARE_RATES[cycleDays]) * 100).toFixed(0)}%</Text>
        </View>
      )}
    </View>
  );
}

自定义分成比例

import { OneCycleSelector } from '@one_deploy/sdk';

const PROMOTIONAL_RATES: Record<number, number> = {
  7:  0.65,   // Promotional: 65% instead of 60%
  30: 0.75,   // Promotional: 75% instead of 70%
  90: 0.85,   // Promotional: 85% instead of 80%
};

function PromotionalCycleSelector() {
  return (
    <OneCycleSelector
      strategyId="strat_abc123"
      shareRates={PROMOTIONAL_RATES}
      showShareRate={true}
      onSelect={(days) => console.log('Cycle:', days, 'days')}
    />
  );
}

自定义样式

import { OneCycleSelector } from '@one_deploy/sdk';

function StyledCycleSelector() {
  return (
    <OneCycleSelector
      strategyId="strat_abc123"
      showShareRate={true}
      style={{
        backgroundColor: '#0f0f1a',
        borderRadius: 16,
        padding: 12,
      }}
      itemStyle={{
        backgroundColor: '#1a1a2e',
        borderRadius: 12,
        padding: 16,
        marginBottom: 8,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
      selectedItemStyle={{
        backgroundColor: '#2d2d5e',
        borderWidth: 2,
        borderColor: '#818cf8',
      }}
      onSelect={(days) => console.log('Selected:', days)}
    />
  );
}

不显示分成比例

import { OneCycleSelector } from '@one_deploy/sdk';

function SimpleCycleSelector() {
  return (
    <OneCycleSelector
      strategyId="strat_abc123"
      showShareRate={false}
      onSelect={(days) => console.log('Cycle:', days)}
    />
  );
}

受控状态与导航

import { useState } from 'react';
import { View, Text, Pressable } from 'react-native';
import { OneCycleSelector, DEFAULT_SHARE_RATES } from '@one_deploy/sdk';

function CycleStepWithNav({
  strategyId,
  onBack,
  onNext,
}: {
  strategyId: string;
  onBack: () => void;
  onNext: (cycleDays: number) => void;
}) {
  const [cycleDays, setCycleDays] = useState<number | null>(null);

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Select Lock Period</Text>
      <Text style={styles.subtext}>
        Longer lock periods earn a higher share of trading profits.
      </Text>

      <OneCycleSelector
        strategyId={strategyId}
        selectedCycle={cycleDays ?? undefined}
        showShareRate={true}
        onSelect={setCycleDays}
      />

      <View style={styles.navRow}>
        <Pressable onPress={onBack}>
          <Text>Back</Text>
        </Pressable>

        <Pressable
          onPress={() => cycleDays && onNext(cycleDays)}
          disabled={!cycleDays}
        >
          <Text style={cycleDays ? styles.nextActive : styles.nextDisabled}>
            Next
          </Text>
        </Pressable>
      </View>
    </View>
  );
}

下一步

• OnePairSelector -- 选择周期后选择交易对。
• 投资周期 -- 关于周期和分成比例工作原理的完整指南。
• 创建订单 -- 了解周期选择器如何融入完整的构建流程。