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 (
-
-