Skip to main content

OneCycleSelector

The OneCycleSelector component displays investment cycle options (lock periods) and their associated share rates. Users select how long their capital will be locked while the AI agent trades.

React Native Only

OneCycleSelector is exported from the React Native entry point of @one_deploy/sdk. It is not available on web.

Quick Start​

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;
}

Props Table​

PropTypeRequiredDefaultDescription
strategyIdstringYes--Strategy ID to fetch available cycles
selectedCyclenumberNo--Currently selected cycle (days)
onSelect(cycleDays: number) => voidYes--Selection callback
showShareRatebooleanNotrueShow share rate on each option
shareRatesRecord<number, number>NoDEFAULT_SHARE_RATESOverride share rate mapping
styleViewStyleNo--Container style
itemStyleViewStyleNo--Individual option style
selectedItemStyleViewStyleNo--Selected option style
testIDstringNo--Test ID

DEFAULT_SHARE_RATES Constant​

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
// }

Usage Examples​

Basic with Share Rates​

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

Custom Share Rates​

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')}
    />
  );
}

Custom Styling​

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)}
    />
  );
}

Without Share Rate Display​

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

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

Controlled State with Navigation​

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

Next Steps​