diff --git a/frontend/components/chain-selector.test.tsx b/frontend/components/chain-selector.test.tsx new file mode 100644 index 0000000..2b54544 --- /dev/null +++ b/frontend/components/chain-selector.test.tsx @@ -0,0 +1,22 @@ +import { render, screen } from '@testing-library/react'; +import { ChainSelector } from './chain-selector'; + +describe('ChainSelector', () => { + it('renders Stellar as supported active network', () => { + render(); + const option = screen.getByRole('option', { name: /Stellar \(XLM\)/i }); + expect(option).toBeInTheDocument(); + expect(option).not.toBeDisabled(); + }); + + it('renders future EVM and Soroban chains as disabled stubs with Coming Soon badges', () => { + render(); + const ethOption = screen.getByRole('option', { name: /Ethereum \(ETH\) — \[Coming Soon\]/i }); + expect(ethOption).toBeInTheDocument(); + expect(ethOption).toBeDisabled(); + + const polygonOption = screen.getByRole('option', { name: /Polygon \(MATIC\) — \[Coming Soon\]/i }); + expect(polygonOption).toBeInTheDocument(); + expect(polygonOption).toBeDisabled(); + }); +}); diff --git a/frontend/components/chain-selector.tsx b/frontend/components/chain-selector.tsx index 0eb1dbd..c65c86e 100644 --- a/frontend/components/chain-selector.tsx +++ b/frontend/components/chain-selector.tsx @@ -1,33 +1,55 @@ -export function ChainSelector() { +'use client'; + +export interface ChainOption { + id: string; + name: string; + symbol: string; + isSupported: boolean; + badge?: string; +} + +export const SUPPORTED_CHAINS: ChainOption[] = [ + { id: 'stellar', name: 'Stellar', symbol: 'XLM', isSupported: true }, + { id: 'ethereum', name: 'Ethereum', symbol: 'ETH', isSupported: false, badge: 'Coming Soon' }, + { id: 'polygon', name: 'Polygon', symbol: 'MATIC', isSupported: false, badge: 'Coming Soon' }, + { id: 'soroban', name: 'Soroban Smart Contracts', symbol: 'XLM', isSupported: false, badge: 'Coming Soon' }, +]; + +type ChainSelectorProps = { + selectedChainId: string; + onSelectChain?: (chainId: string) => void; + label?: string; +}; + +export function ChainSelector({ + selectedChainId = 'stellar', + onSelectChain, + label = 'Select Network / Chain', +}: ChainSelectorProps) { return ( -
-