OneChainSelector

The OneChainSelector component renders a list of supported blockchain networks and lets the user select one for their AI trading order. It displays chain logos, names, and network types, and filters based on the strategy's supported chains.

React Native Only

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

Props Table

Prop	Type	Required	Default	Description
supportedChains	number[]	Yes	--	Chain IDs to display
selectedChainId	number	No	--	Currently selected chain
onSelect	(chainId: number) => void	Yes	--	Selection callback
showNetworkType	boolean	No	true	Show Mainnet/Testnet label
showLogos	boolean	No	true	Show chain logos
chainConfig	Partial<Record<number, ChainDisplayConfig>>	No	--	Custom chain display data
style	ViewStyle	No	--	Container style
itemStyle	ViewStyle	No	--	Individual item style
selectedItemStyle	ViewStyle	No	--	Selected item style
testID	string	No	--	Test ID

CHAIN_CONFIG Constant

The CHAIN_CONFIG constant provides display metadata for all supported chains.

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 Type

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

Supported Chains

Chain	Chain ID	Name
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

Usage Examples

With Strategy-Filtered Chains

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

With Custom Styling

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

With Custom Chain Config

Override the display data for a specific chain or add a custom chain.

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

Controlled Selection

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

Next Steps

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