OneForexPairSelector

OneForexPairSelector is a React Native component that provides a currency pair selection UI for the 6 supported StableFX pairs. It supports single selection, displays pair metadata, and integrates with the FOREX_CURRENCY_PAIRS constant.

React Native Only

OneForexPairSelector is exported from @one_deploy/sdk/react-native. It is not available on web.

Quick Start

import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function PairPicker() {
  return (
    <OneForexPairSelector
      selectedPair="EUR/USD"
      onSelectPair={(pair) => {
        console.log('Selected:', pair);
      }}
    />
  );
}

OneForexPairSelectorProps

import type { OneForexPairSelectorProps } from '@one_deploy/sdk';

interface OneForexPairSelectorProps {
  /** Currently selected pair identifier (e.g. "EUR/USD"). */
  selectedPair?: string;

  /** Callback fired when the user selects a pair. */
  onSelectPair: (pair: string) => void;

  /** Subset of pairs to display. If omitted, all 6 pairs are shown. */
  pairs?: string[];

  /** Layout mode for the pair options. */
  layout?: 'grid' | 'list' | 'chips';

  /** Whether to show the pair's display name below the identifier. Defaults to true. */
  showDisplayName?: boolean;

  /** Whether to show the min/max trade size for each pair. Defaults to false. */
  showTradeLimits?: boolean;

  /** Whether to show an active/inactive indicator. Defaults to false. */
  showStatus?: boolean;

  /** Disable interaction (read-only display). Defaults to false. */
  disabled?: boolean;

  /** Visual theme variant. */
  theme?: 'dark' | 'light';

  /** Custom styles applied to the container. */
  style?: import('react-native').ViewStyle;

  /** Custom styles applied to each pair option. */
  optionStyle?: import('react-native').ViewStyle;

  /** Custom styles applied to the selected pair option. */
  selectedOptionStyle?: import('react-native').ViewStyle;

  /** Custom styles applied to the pair text label. */
  labelStyle?: import('react-native').TextStyle;

  /** Custom styles applied to the selected pair text. */
  selectedLabelStyle?: import('react-native').TextStyle;

  /** Custom color for the selected state. */
  selectedColor?: string;

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

Props Reference

Prop	Type	Default	Description
`selectedPair`	`string`	`undefined`	Currently selected pair.
`onSelectPair`	`(pair: string) => void`	Required	Selection callback.
`pairs`	`string[]`	All 6 pairs	Subset of pairs to show.
`layout`	`'grid' \| 'list' \| 'chips'`	`'chips'`	Layout mode.
`showDisplayName`	`boolean`	`true`	Show full pair name.
`showTradeLimits`	`boolean`	`false`	Show min/max trade size.
`showStatus`	`boolean`	`false`	Show active/inactive indicator.
`disabled`	`boolean`	`false`	Disable interaction.
`theme`	`'dark' \| 'light'`	`'dark'`	Visual theme.
`style`	`ViewStyle`	`undefined`	Custom container styles.
`optionStyle`	`ViewStyle`	`undefined`	Custom option styles.
`selectedOptionStyle`	`ViewStyle`	`undefined`	Custom selected option styles.
`labelStyle`	`TextStyle`	`undefined`	Custom label text styles.
`selectedLabelStyle`	`TextStyle`	`undefined`	Custom selected label styles.
`selectedColor`	`string`	`"#4488ff"`	Accent color for selection.
`testID`	`string`	`undefined`	Test ID for testing frameworks.

Usage Examples

Chips Layout (Default)

import React, { useState } from 'react';
import { View } from 'react-native';
import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function ChipSelector() {
  const [pair, setPair] = useState('EUR/USD');

  return (
    <View style={{ padding: 16 }}>
      <OneForexPairSelector
        selectedPair={pair}
        onSelectPair={setPair}
        layout="chips"
      />
    </View>
  );
}

Grid Layout with Trade Limits

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

function GridSelector() {
  const [pair, setPair] = useState('GBP/USD');

  return (
    <View style={{ padding: 16 }}>
      <Text style={{ color: '#fff', fontSize: 16, fontWeight: '700', marginBottom: 12 }}>
        Select Pair
      </Text>
      <OneForexPairSelector
        selectedPair={pair}
        onSelectPair={setPair}
        layout="grid"
        showTradeLimits={true}
        showDisplayName={true}
      />
    </View>
  );
}

List Layout with Status

import React, { useState } from 'react';
import { View } from 'react-native';
import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function ListSelector() {
  const [pair, setPair] = useState('USD/JPY');

  return (
    <View style={{ flex: 1 }}>
      <OneForexPairSelector
        selectedPair={pair}
        onSelectPair={setPair}
        layout="list"
        showDisplayName={true}
        showStatus={true}
        showTradeLimits={true}
      />
    </View>
  );
}

Subset of Pairs

import React, { useState } from 'react';
import { View } from 'react-native';
import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function MajorPairsOnly() {
  const [pair, setPair] = useState('EUR/USD');

  return (
    <OneForexPairSelector
      selectedPair={pair}
      onSelectPair={setPair}
      pairs={['EUR/USD', 'GBP/USD', 'USD/JPY']}
      layout="chips"
    />
  );
}

Custom Styled Selector

import React, { useState } from 'react';
import { View } from 'react-native';
import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function StyledSelector() {
  const [pair, setPair] = useState('AUD/USD');

  return (
    <OneForexPairSelector
      selectedPair={pair}
      onSelectPair={setPair}
      layout="chips"
      selectedColor="#6366f1"
      theme="dark"
      style={{
        padding: 12,
        backgroundColor: '#0f172a',
        borderRadius: 12,
      }}
      optionStyle={{
        paddingHorizontal: 18,
        paddingVertical: 10,
        borderRadius: 24,
        borderWidth: 1.5,
        borderColor: '#334155',
      }}
      selectedOptionStyle={{
        borderColor: '#6366f1',
        backgroundColor: '#1e1b4b',
      }}
      labelStyle={{
        fontSize: 14,
        fontWeight: '500',
        color: '#94a3b8',
      }}
      selectedLabelStyle={{
        color: '#a5b4fc',
        fontWeight: '700',
      }}
    />
  );
}

In an Investment Form

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import { OneForexPairSelector } from '@one_deploy/sdk/react-native';
import { useForexInvestments } from '@one_deploy/sdk';

function InvestmentFormWithPairSelector() {
  const [pair, setPair] = useState('EUR/USD');
  const [amount, setAmount] = useState('');
  const { createInvestment } = useForexInvestments();

  const handleSubmit = async () => {
    const deposit = parseFloat(amount);
    if (!deposit || deposit <= 0) return;

    await createInvestment({
      amount: deposit,
      currencyPair: pair,
      cycle: '30d',
    });
  };

  return (
    <View style={styles.form}>
      <Text style={styles.label}>Currency Pair</Text>
      <OneForexPairSelector
        selectedPair={pair}
        onSelectPair={setPair}
        layout="chips"
        showDisplayName={false}
        style={{ marginBottom: 20 }}
      />

      <Text style={styles.label}>Amount (USDC)</Text>
      <TextInput
        value={amount}
        onChangeText={setAmount}
        placeholder="Enter amount"
        placeholderTextColor="#666"
        keyboardType="numeric"
        style={styles.input}
      />

      <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
        <Text style={styles.submitText}>
          Invest in {pair}
        </Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  form: { padding: 16 },
  label: { fontSize: 14, fontWeight: '600', color: '#ccc', marginBottom: 8 },
  input: {
    backgroundColor: '#1a1a2e',
    color: '#fff',
    padding: 12,
    borderRadius: 8,
    fontSize: 16,
    borderWidth: 1,
    borderColor: '#333',
    marginBottom: 20,
  },
  submitBtn: {
    backgroundColor: '#4488ff',
    padding: 14,
    borderRadius: 8,
    alignItems: 'center',
  },
  submitText: { color: '#fff', fontWeight: '600', fontSize: 15 },
});

Disabled State

import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function DisabledSelector() {
  return (
    <OneForexPairSelector
      selectedPair="EUR/USD"
      onSelectPair={() => {}}
      disabled={true}
      layout="chips"
    />
  );
}

Next Steps

Currency Pairs -- the data behind the selector.
Creating Investments -- use pair selection in investment forms.
OneForexCapitalSplit -- preview allocation after pair selection.

Quick Start​

OneForexPairSelectorProps​

Props Reference​

Usage Examples​

Chips Layout (Default)​

Grid Layout with Trade Limits​

List Layout with Status​

Subset of Pairs​

Custom Styled Selector​

In an Investment Form​

Disabled State​

Next Steps​