From 8cf2ae535d58d2b4ef480287345570090fae00ac Mon Sep 17 00:00:00 2001
From: Annakaee <annakaee@example.com>
Date: Mon, 27 Jul 2026 23:57:42 +0100
Subject: [PATCH] feat(frontend): add UI stubs for multi-chain support (closes
 #152)

---
 frontend/components/chain-selector.test.tsx   | 22 ++++++++
 frontend/components/chain-selector.tsx        | 55 +++++++++++++++++++
 .../send-form/steps/details-step.tsx          |  9 +++
 3 files changed, 86 insertions(+)
 create mode 100644 frontend/components/chain-selector.test.tsx
 create mode 100644 frontend/components/chain-selector.tsx

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(<ChainSelector selectedChainId="stellar" />);
+    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(<ChainSelector selectedChainId="stellar" />);
+    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
new file mode 100644
index 0000000..c65c86e
--- /dev/null
+++ b/frontend/components/chain-selector.tsx
@@ -0,0 +1,55 @@
+'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 (
+    <div className="space-y-1.5">
+      <label htmlFor="chain-selector" className="block text-sm font-medium text-slate-900">
+        {label}
+      </label>
+      <select
+        id="chain-selector"
+        value={selectedChainId}
+        onChange={(e) => onSelectChain?.(e.target.value)}
+        className="block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500"
+      >
+        {SUPPORTED_CHAINS.map((chain) => (
+          <option
+            key={chain.id}
+            value={chain.id}
+            disabled={!chain.isSupported}
+          >
+            {chain.name} ({chain.symbol}) {!chain.isSupported ? `— [${chain.badge}]` : ''}
+          </option>
+        ))}
+      </select>
+      <p className="text-xs text-slate-500">
+        Bridgelet currently operates on the <strong>Stellar</strong> network. Multi-chain EVM & Soroban support is under development.
+      </p>
+    </div>
+  );
+}
diff --git a/frontend/components/send-form/steps/details-step.tsx b/frontend/components/send-form/steps/details-step.tsx
index eb9fbe4..a8fe3a1 100644
--- a/frontend/components/send-form/steps/details-step.tsx
+++ b/frontend/components/send-form/steps/details-step.tsx
@@ -1,6 +1,8 @@
 'use client';
 
+import { useState } from 'react';
 import type { SendFormState } from '../index';
+import { ChainSelector } from '../../chain-selector';
 
 type DetailsStepProps = {
   state: SendFormState;
@@ -10,6 +12,8 @@ type DetailsStepProps = {
 };
 
 export function DetailsStep({ state, onChange, onBack, onNext }: DetailsStepProps) {
+  const [selectedChain, setSelectedChain] = useState('stellar');
+
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     onNext();
@@ -17,6 +21,11 @@ export function DetailsStep({ state, onChange, onBack, onNext }: DetailsStepProp
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+      <ChainSelector
+        selectedChainId={selectedChain}
+        onSelectChain={setSelectedChain}
+      />
+
       <div>
         <label htmlFor="recipient-email" className="block text-sm font-medium text-slate-900">
           Recipient email