OneChainSelector

OneChainSelector 组件渲染支持的区块链网络列表，允许用户为其 AI 交易订单选择一条链。它显示链的 logo、名称和网络类型，并根据策略支持的链进行筛选。

仅限 React Native

OneChainSelector 从 @one_deploy/sdk 的 React Native 入口导出，不适用于 Web。

快速开始

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

function ChainStep() {
  const [chainId, setChainId] = useState<number | null>(null);

  return (
    <OneChainSelector
      supportedChains={[8453, 1, 137, 42161]}
      onSelect={(id) => {
        setChainId(id);
        console.log('Selected chain:', id);
      }}
    />
  );
}

OneChainSelectorProps

interface OneChainSelectorProps {
  /** Array of chain IDs the strategy supports. Only these chains are shown. */
  supportedChains: number[];

  /** Currently selected chain ID. */
  selectedChainId?: number;

  /** Callback fired when the user selects a chain. */
  onSelect: (chainId: number) => void;

  /** Whether to show the network type label (Mainnet/Testnet). Defaults to true. */
  showNetworkType?: boolean;

  /** Whether to show chain logos. Defaults to true. */
  showLogos?: boolean;

  /** Override chain display data. Merged with CHAIN_CONFIG. */
  chainConfig?: Partial<Record<number, ChainDisplayConfig>>;

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

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

  /** Style applied to the selected chain item. */
  selectedItemStyle?: ViewStyle;

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

属性表

属性	类型	必填	默认值	描述
supportedChains	number[]	是	--	要显示的链 ID
selectedChainId	number	否	--	当前选中的链
onSelect	(chainId: number) => void	是	--	选择回调
showNetworkType	boolean	否	true	显示主网/测试网标签
showLogos	boolean	否	true	显示链 logo
chainConfig	Partial<Record<number, ChainDisplayConfig>>	否	--	自定义链显示数据
style	ViewStyle	否	--	容器样式
itemStyle	ViewStyle	否	--	单个链项样式
selectedItemStyle	ViewStyle	否	--	选中项样式
testID	string	否	--	测试 ID

CHAIN_CONFIG 常量

CHAIN_CONFIG 常量提供所有支持链的显示元数据。

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

// CHAIN_CONFIG is a Record<number, ChainDisplayConfig>
console.log(CHAIN_CONFIG[8453]);
// {
//   chainId: 8453,
//   name: 'Base',
//   shortName: 'Base',
//   logoUri: 'https://assets.one23.io/chains/base.png',
//   nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
//   networkType: 'mainnet',
//   explorerUrl: 'https://basescan.org',
//   rpcUrl: 'https://mainnet.base.org',
// }

ChainDisplayConfig 类型

interface ChainDisplayConfig {
  /** Chain ID. */
  chainId: number;

  /** Full chain name, e.g. "Ethereum Mainnet". */
  name: string;

  /** Short name for compact UIs, e.g. "ETH". */
  shortName: string;

  /** URI to the chain logo image. */
  logoUri: string;

  /** Native currency of the chain. */
  nativeCurrency: {
    name: string;
    symbol: string;
    decimals: number;
  };

  /** Whether this is a mainnet or testnet. */
  networkType: 'mainnet' | 'testnet';

  /** Block explorer base URL. */
  explorerUrl: string;

  /** Default RPC endpoint. */
  rpcUrl: string;
}

支持的链

链	链 ID	名称
Ethereum	1	Ethereum Mainnet
Polygon	137	Polygon PoS
Arbitrum	42161	Arbitrum One
Optimism	10	Optimism
Base	8453	Base
BSC	56	BNB Smart Chain
Avalanche	43114	Avalanche C-Chain
Ethereum Sepolia	11155111	Sepolia Testnet
Base Sepolia	84532	Base Sepolia Testnet
Polygon Amoy	80002	Polygon Amoy Testnet
Arbitrum Sepolia	421614	Arbitrum Sepolia Testnet

使用示例

根据策略筛选链

import { OneChainSelector, useAIStrategies } from '@one_deploy/sdk';

function ChainSelection({ strategyId }: { strategyId: string }) {
  const { strategies } = useAIStrategies();
  const strategy = strategies.find((s) => s.id === strategyId);

  if (!strategy) return null;

  return (
    <OneChainSelector
      supportedChains={strategy.supportedChains}
      onSelect={(chainId) => console.log('Chain:', chainId)}
    />
  );
}

自定义样式

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

function StyledChainSelector() {
  return (
    <OneChainSelector
      supportedChains={[8453, 1, 137]}
      showNetworkType={true}
      showLogos={true}
      style={{
        backgroundColor: '#0f0f1a',
        borderRadius: 16,
        padding: 12,
      }}
      itemStyle={{
        paddingVertical: 14,
        paddingHorizontal: 16,
        borderRadius: 10,
        marginBottom: 8,
        backgroundColor: '#1a1a2e',
      }}
      selectedItemStyle={{
        backgroundColor: '#2d2d5e',
        borderWidth: 1,
        borderColor: '#6366f1',
      }}
      onSelect={(chainId) => console.log('Selected:', chainId)}
    />
  );
}

自定义链配置

覆盖特定链的显示数据或添加自定义链。

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

function CustomChainSelector() {
  return (
    <OneChainSelector
      supportedChains={[8453, 1, 99999]}
      chainConfig={{
        8453: {
          chainId: 8453,
          name: 'Base (Recommended)',
          shortName: 'Base',
          logoUri: 'https://my-cdn.com/base-logo.png',
          nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
          networkType: 'mainnet',
          explorerUrl: 'https://basescan.org',
          rpcUrl: 'https://mainnet.base.org',
        },
        99999: {
          chainId: 99999,
          name: 'My Custom Chain',
          shortName: 'MCC',
          logoUri: 'https://my-cdn.com/custom-chain.png',
          nativeCurrency: { name: 'Custom Token', symbol: 'CTK', decimals: 18 },
          networkType: 'mainnet',
          explorerUrl: 'https://explorer.mychain.io',
          rpcUrl: 'https://rpc.mychain.io',
        },
      }}
      onSelect={(chainId) => console.log('Selected:', chainId)}
    />
  );
}

受控选择

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

function ControlledChainSelector() {
  const [selectedChainId, setSelectedChainId] = useState<number | undefined>();

  const chainName = selectedChainId
    ? CHAIN_CONFIG[selectedChainId]?.name ?? 'Unknown'
    : 'None';

  return (
    <View>
      <Text>Selected: {chainName}</Text>

      <OneChainSelector
        supportedChains={[8453, 1, 137, 42161, 10]}
        selectedChainId={selectedChainId}
        onSelect={setSelectedChainId}
      />
    </View>
  );
}

后续步骤

• OneTierSelector -- 选择链之后选择等级。
• 创建订单 -- 了解链选择器如何融入完整的构建流程。