OnePairSelector

OnePairSelector 组件渲染一个可选择的交易对列表，按策略和链进行筛选。每个交易对都显示其图标（通过 PAIR_ICONS）、符号和订单大小限制。

仅限 React Native

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

快速入门

import { useState } from 'react';
import { OnePairSelector } from '@one_deploy/sdk';
import type { TradingPair } from '@one_deploy/sdk';

function PairStep() {
  const [selectedPair, setSelectedPair] = useState<TradingPair | null>(null);

  return (
    <OnePairSelector
      strategyId="strat_abc123"
      chainId={8453}
      onSelect={(pair) => {
        setSelectedPair(pair);
        console.log('Selected:', pair.symbol);
      }}
    />
  );
}

OnePairSelectorProps

interface OnePairSelectorProps {
  /** Strategy ID to filter pairs by the strategy's supported pairs. */
  strategyId: string;

  /** Chain ID to filter pairs available on this network. */
  chainId: number;

  /** Currently selected pair symbol. */
  selectedPair?: string;

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

  /** Whether to show pair icons from PAIR_ICONS. Defaults to true. */
  showIcons?: boolean;

  /** Whether to show inactive pairs (greyed out, not selectable). Defaults to false. */
  showInactive?: boolean;

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

  /** Style applied to each pair item. */
  itemStyle?: ViewStyle;

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

属性表

属性	类型	必填	默认值	说明
strategyId	string	是	--	用于筛选支持交易对的策略 ID
chainId	number	是	--	用于筛选链上可用交易对的链 ID
selectedPair	string	否	--	当前选中的交易对符号
onSelect	(pair: TradingPair) => void	是	--	选择回调
showIcons	boolean	否	true	显示来自 PAIR_ICONS 的图标
showInactive	boolean	否	false	显示灰色的非活跃交易对
style	ViewStyle	否	--	容器样式
itemStyle	ViewStyle	否	--	单个项目样式
testID	string	否	--	测试 ID

PAIR_ICONS 常量

PAIR_ICONS 常量将资产符号映射到其图标 URI。

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

// PAIR_ICONS: Record<string, string>
console.log(PAIR_ICONS['BTC']);
// 'https://assets.one23.io/icons/btc.png'

console.log(PAIR_ICONS['ETH']);
// 'https://assets.one23.io/icons/eth.png'

console.log(PAIR_ICONS['USDT']);
// 'https://assets.one23.io/icons/usdt.png'

console.log(PAIR_ICONS['SOL']);
// 'https://assets.one23.io/icons/sol.png'

可用图标：

资产	键名	说明
Bitcoin	BTC	Bitcoin 图标
Ethereum	ETH	Ethereum 图标
Tether	USDT	Tether USD 图标
USD Coin	USDC	USDC 图标
Solana	SOL	Solana 图标
BNB	BNB	BNB 图标
Avalanche	AVAX	Avalanche 图标
Polygon	MATIC	Polygon 图标
Chainlink	LINK	Chainlink 图标
Uniswap	UNI	Uniswap 图标

TradingPair 类型

interface TradingPair {
  /** Unique pair identifier, e.g. "BTC_USDT". */
  symbol: string;

  /** Base asset symbol, e.g. "BTC". */
  baseAsset: string;

  /** Quote asset symbol, e.g. "USDT". */
  quoteAsset: string;

  /** Chain ID where this pair is traded. */
  chainId: number;

  /** Whether the pair is currently available for new orders. */
  isActive: boolean;

  /** Minimum order size in quote currency. */
  minOrderSize: number;

  /** Maximum order size in quote currency, or null for unlimited. */
  maxOrderSize: number | null;

  /** Price precision (decimal places). */
  pricePrecision: number;

  /** Quantity precision (decimal places). */
  quantityPrecision: number;
}

使用示例

按策略和链筛选

import { useState } from 'react';
import { View, Text } from 'react-native';
import { OnePairSelector } from '@one_deploy/sdk';
import type { TradingPair } from '@one_deploy/sdk';

function PairSelection({
  strategyId,
  chainId,
}: {
  strategyId: string;
  chainId: number;
}) {
  const [selectedPair, setSelectedPair] = useState<TradingPair | null>(null);

  return (
    <View>
      <Text style={styles.heading}>Select Trading Pair</Text>

      <OnePairSelector
        strategyId={strategyId}
        chainId={chainId}
        selectedPair={selectedPair?.symbol}
        showIcons={true}
        onSelect={(pair) => setSelectedPair(pair)}
      />

      {selectedPair && (
        <View style={styles.info}>
          <Text>Pair: {selectedPair.baseAsset}/{selectedPair.quoteAsset}</Text>
          <Text>
            Order range: {selectedPair.minOrderSize}
            {selectedPair.maxOrderSize ? ` - ${selectedPair.maxOrderSize}` : '+'}
            {' '}{selectedPair.quoteAsset}
          </Text>
        </View>
      )}
    </View>
  );
}

自定义样式

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

function StyledPairSelector() {
  return (
    <OnePairSelector
      strategyId="strat_abc123"
      chainId={8453}
      showIcons={true}
      showInactive={false}
      style={{
        backgroundColor: '#0f0f1a',
        borderRadius: 16,
        padding: 12,
      }}
      itemStyle={{
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 14,
        paddingHorizontal: 16,
        borderRadius: 10,
        marginBottom: 6,
        backgroundColor: '#1a1a2e',
      }}
      onSelect={(pair) => console.log('Selected:', pair.symbol)}
    />
  );
}

包含非活跃交易对

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

function PairSelectorWithInactive() {
  return (
    <OnePairSelector
      strategyId="strat_abc123"
      chainId={8453}
      showInactive={true}
      onSelect={(pair) => {
        // Only active pairs fire onSelect
        console.log('Selected active pair:', pair.symbol);
      }}
    />
  );
}

使用 PAIR_ICONS 构建自定义交易对选择器

如果您需要完全控制交易对列表的渲染，可以直接使用 API 配合 PAIR_ICONS。

import { useState, useEffect } from 'react';
import { View, Text, Image, Pressable, FlatList } from 'react-native';
import { OneEngineClient, PAIR_ICONS } from '@one_deploy/sdk';
import type { TradingPair } from '@one_deploy/sdk';

function CustomPairSelector({
  engine,
  onSelect,
}: {
  engine: OneEngineClient;
  onSelect: (pair: TradingPair) => void;
}) {
  const [pairs, setPairs] = useState<TradingPair[]>([]);
  const [selected, setSelected] = useState<string | null>(null);

  useEffect(() => {
    engine.getTradingPairs().then((allPairs) => {
      setPairs(allPairs.filter((p) => p.isActive));
    });
  }, []);

  return (
    <FlatList
      data={pairs}
      keyExtractor={(item) => item.symbol}
      renderItem={({ item }) => (
        <Pressable
          onPress={() => {
            setSelected(item.symbol);
            onSelect(item);
          }}
          style={[
            styles.pairRow,
            selected === item.symbol && styles.selectedRow,
          ]}
        >
          <View style={styles.iconContainer}>
            <Image
              source={{ uri: PAIR_ICONS[item.baseAsset] }}
              style={styles.icon}
            />
            <Image
              source={{ uri: PAIR_ICONS[item.quoteAsset] }}
              style={[styles.icon, styles.quoteIcon]}
            />
          </View>
          <View style={styles.pairInfo}>
            <Text style={styles.pairSymbol}>
              {item.baseAsset}/{item.quoteAsset}
            </Text>
            <Text style={styles.pairDetail}>
              Min: {item.minOrderSize} {item.quoteAsset}
            </Text>
          </View>
        </Pressable>
      )}
    />
  );
}

const styles = {
  pairRow: {
    flexDirection: 'row' as const,
    alignItems: 'center' as const,
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#222',
  },
  selectedRow: {
    backgroundColor: '#1a1a3e',
  },
  iconContainer: {
    flexDirection: 'row' as const,
    width: 48,
  },
  icon: {
    width: 28,
    height: 28,
    borderRadius: 14,
  },
  quoteIcon: {
    marginLeft: -10,
  },
  pairInfo: {
    marginLeft: 12,
  },
  pairSymbol: {
    color: '#fff',
    fontWeight: '600' as const,
    fontSize: 15,
  },
  pairDetail: {
    color: '#888',
    fontSize: 12,
    marginTop: 2,
  },
};

受控状态与导航

import { useState } from 'react';
import { View, Text, Pressable } from 'react-native';
import { OnePairSelector } from '@one_deploy/sdk';
import type { TradingPair } from '@one_deploy/sdk';

function PairStepWithNav({
  strategyId,
  chainId,
  onBack,
  onNext,
}: {
  strategyId: string;
  chainId: number;
  onBack: () => void;
  onNext: (pair: TradingPair) => void;
}) {
  const [selectedPair, setSelectedPair] = useState<TradingPair | null>(null);

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Select Trading Pair</Text>
      <Text style={styles.subtext}>
        Choose the asset pair the AI agent will trade.
      </Text>

      <OnePairSelector
        strategyId={strategyId}
        chainId={chainId}
        selectedPair={selectedPair?.symbol}
        showIcons={true}
        onSelect={setSelectedPair}
      />

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

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

下一步

• 创建订单 -- 将交易对选择器与完整的构建流程结合使用。
• 交易对 -- 关于交易对和 getTradingPairs API 的完整指南。
• OneChainSelector -- 在交易对选择之前进行链选择。