OneTierSelector

The OneTierSelector component displays the available investment tiers for a strategy and lets the user pick one. Tiers define minimum and maximum investment amounts, expected returns, and any special conditions for the strategy.

React Native Only

OneTierSelector 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 { OneTierSelector } from '@one_deploy/sdk';
import type { Tier } from '@one_deploy/sdk';

function TierStep({ tiers }: { tiers: Tier[] }) {
  const [selectedTier, setSelectedTier] = useState<Tier | null>(null);

  return (
    <OneTierSelector
      tiers={tiers}
      onSelect={(tier) => {
        setSelectedTier(tier);
        console.log('Selected tier:', tier.name);
      }}
    />
  );
}

Tier Type

interface Tier {
  /** Unique tier identifier. */
  id: string;

  /** Human-readable tier name, e.g. "Bronze", "Silver", "Gold". */
  name: string;

  /** Short description of this tier's benefits. */
  description: string;

  /** Minimum investment amount in USD. */
  minInvestment: number;

  /** Maximum investment amount in USD, or null for unlimited. */
  maxInvestment: number | null;

  /** Expected annual percentage yield for this tier. */
  expectedApy: number;

  /** Additional benefits or features for this tier. */
  features: string[];

  /** Whether this tier is currently available. */
  isAvailable: boolean;

  /** Display order (lower numbers shown first). */
  sortOrder: number;
}

OneTierSelectorProps

interface OneTierSelectorProps {
  /** Array of Tier objects to display. Typically from AIStrategy.tiers. */
  tiers: Tier[];

  /** Currently selected tier ID. */
  selectedTierId?: string;

  /** Callback fired when the user selects a tier. */
  onSelect: (tier: Tier) => void;

  /** Whether to show the min/max investment range. Defaults to true. */
  showInvestmentRange?: boolean;

  /** Whether to show the expected APY. Defaults to true. */
  showExpectedApy?: boolean;

  /** Whether to show the feature list. Defaults to true. */
  showFeatures?: boolean;

  /** Whether to show unavailable tiers (greyed out). Defaults to false. */
  showUnavailable?: boolean;

  /** Layout direction. Defaults to 'vertical'. */
  layout?: 'vertical' | 'horizontal';

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

  /** Style applied to each tier card. */
  cardStyle?: ViewStyle;

  /** Style applied to the selected tier card. */
  selectedCardStyle?: ViewStyle;

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

Props Table

Prop	Type	Required	Default	Description
tiers	Tier[]	Yes	--	Tier objects to display
selectedTierId	string	No	--	Currently selected tier ID
onSelect	(tier: Tier) => void	Yes	--	Selection callback
showInvestmentRange	boolean	No	true	Show min/max amounts
showExpectedApy	boolean	No	true	Show APY on each card
showFeatures	boolean	No	true	Show feature list
showUnavailable	boolean	No	false	Show greyed-out unavailable tiers
layout	'vertical' | 'horizontal'	No	'vertical'	Card layout direction
style	ViewStyle	No	--	Container style
cardStyle	ViewStyle	No	--	Individual card style
selectedCardStyle	ViewStyle	No	--	Selected card style
testID	string	No	--	Test ID

Usage Examples

With Strategy Tiers

import { useState, useEffect } from 'react';
import { OneTierSelector, OneEngineClient } from '@one_deploy/sdk';
import type { AIStrategy, Tier } from '@one_deploy/sdk';

function TierSelection({ strategyId }: { strategyId: string }) {
  const [strategy, setStrategy] = useState<AIStrategy | null>(null);
  const [selectedTier, setSelectedTier] = useState<Tier | null>(null);

  const engine = new OneEngineClient({
    apiKey: process.env.ONE_API_KEY!,
    projectId: process.env.ONE_PROJECT_ID!,
  });

  useEffect(() => {
    engine.getAIStrategy(strategyId, { includeTiers: true }).then(setStrategy);
  }, [strategyId]);

  if (!strategy) return <ActivityIndicator />;

  return (
    <View>
      <Text style={styles.heading}>Select a Tier</Text>

      <OneTierSelector
        tiers={strategy.tiers}
        selectedTierId={selectedTier?.id}
        showInvestmentRange={true}
        showExpectedApy={true}
        showFeatures={true}
        onSelect={(tier) => {
          setSelectedTier(tier);
          console.log('Tier:', tier.name, 'Min:', tier.minInvestment);
        }}
      />

      {selectedTier && (
        <View style={styles.selected}>
          <Text>Selected: {selectedTier.name}</Text>
          <Text>
            Range: ${selectedTier.minInvestment}
            {selectedTier.maxInvestment ? ` - $${selectedTier.maxInvestment}` : '+'}
          </Text>
          <Text>APY: {selectedTier.expectedApy}%</Text>
        </View>
      )}
    </View>
  );
}

Horizontal Layout

import { OneTierSelector } from '@one_deploy/sdk';
import type { Tier } from '@one_deploy/sdk';

function HorizontalTierSelector({ tiers }: { tiers: Tier[] }) {
  return (
    <OneTierSelector
      tiers={tiers}
      layout="horizontal"
      showFeatures={false}
      cardStyle={{
        width: 160,
        marginRight: 12,
        borderRadius: 12,
        padding: 16,
        backgroundColor: '#1a1a2e',
      }}
      selectedCardStyle={{
        backgroundColor: '#2d2d5e',
        borderWidth: 2,
        borderColor: '#6366f1',
      }}
      onSelect={(tier) => console.log('Selected:', tier.id)}
    />
  );
}

Showing Unavailable Tiers

import { OneTierSelector } from '@one_deploy/sdk';
import type { Tier } from '@one_deploy/sdk';

function TierSelectorWithUnavailable({ tiers }: { tiers: Tier[] }) {
  return (
    <OneTierSelector
      tiers={tiers}
      showUnavailable={true}
      onSelect={(tier) => {
        // Only available tiers fire onSelect
        console.log('Selected available tier:', tier.name);
      }}
    />
  );
}

Custom Styled Cards

import { OneTierSelector } from '@one_deploy/sdk';
import type { Tier } from '@one_deploy/sdk';

const SAMPLE_TIERS: Tier[] = [
  {
    id: 'tier_bronze',
    name: 'Bronze',
    description: 'Entry-level tier for new investors',
    minInvestment: 100,
    maxInvestment: 999,
    expectedApy: 8,
    features: ['Basic strategy access', 'Weekly reports'],
    isAvailable: true,
    sortOrder: 1,
  },
  {
    id: 'tier_silver',
    name: 'Silver',
    description: 'Mid-range tier with enhanced features',
    minInvestment: 1000,
    maxInvestment: 9999,
    expectedApy: 12,
    features: ['All strategies', 'Daily reports', 'Priority support'],
    isAvailable: true,
    sortOrder: 2,
  },
  {
    id: 'tier_gold',
    name: 'Gold',
    description: 'Premium tier for serious investors',
    minInvestment: 10000,
    maxInvestment: null,
    expectedApy: 18,
    features: ['All strategies', 'Real-time reports', 'Dedicated support', 'Custom parameters'],
    isAvailable: true,
    sortOrder: 3,
  },
];

function StyledTierSelector() {
  return (
    <OneTierSelector
      tiers={SAMPLE_TIERS}
      showInvestmentRange={true}
      showExpectedApy={true}
      showFeatures={true}
      style={{ padding: 16 }}
      cardStyle={{
        backgroundColor: '#16213e',
        borderRadius: 16,
        padding: 20,
        marginBottom: 12,
      }}
      selectedCardStyle={{
        backgroundColor: '#1a1a3e',
        borderWidth: 2,
        borderColor: '#a78bfa',
      }}
      onSelect={(tier) => console.log('Tier:', tier.id)}
    />
  );
}

Next Steps

• OneCycleSelector -- select a cycle after choosing a tier.
• Creating Orders -- see how the tier selector fits into the full builder flow.