feat: add multi-chain network selector stubs

CHANGELOG.md

@@ -32,3 +32,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Security
 
 - Added `docs/security-model.mdx` — re-authored security model in MDX with threat model table (15 threats, mitigations, and statuses) and explicit MVP stub callouts for stub sweep auth, missing encryption at rest, demo-only claim page, and absent CSP enforcement
+- Added multi-chain network selector UI stubs to send and claim forms 

frontend/components/accessible-claim-form.tsx

@@ -23,6 +23,36 @@ export function AccessibleClaimForm({ onSubmit, isLoading = false }: Props) {
   return (
     <form onSubmit={handleSubmit} noValidate aria-label="Claim payment form">
       <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-2">
+            Network <span aria-label="required">*</span>
+          </label>
+          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+            <label className="relative flex cursor-pointer items-center justify-center rounded-lg border border-indigo-600 bg-white p-3 shadow-sm hover:bg-slate-50">
+              <input type="radio" name="claim-network" value="stellar" defaultChecked className="sr-only" />
+              <span className="text-sm font-medium text-slate-900">Stellar</span>
+              <span className="absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-indigo-600 text-[10px] text-white">✓</span>
+            </label>
+
+            <label className="relative flex cursor-not-allowed items-center justify-center rounded-lg border border-slate-200 bg-slate-50 p-3 opacity-70">
+              <input type="radio" name="claim-network" value="base" disabled className="sr-only" />
+              <span className="text-sm font-medium text-slate-500">Base</span>
+              <span className="absolute -top-2 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-200 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-slate-600">Coming Soon</span>
+            </label>
+
+            <label className="relative flex cursor-not-allowed items-center justify-center rounded-lg border border-slate-200 bg-slate-50 p-3 opacity-70">
+              <input type="radio" name="claim-network" value="polygon" disabled className="sr-only" />
+              <span className="text-sm font-medium text-slate-500">Polygon</span>
+              <span className="absolute -top-2 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-200 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-slate-600">Coming Soon</span>
+            </label>
+
+            <label className="relative flex cursor-not-allowed items-center justify-center rounded-lg border border-slate-200 bg-slate-50 p-3 opacity-70">
+              <input type="radio" name="claim-network" value="solana" disabled className="sr-only" />
+              <span className="text-sm font-medium text-slate-500">Solana</span>
+              <span className="absolute -top-2 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-200 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-slate-600">Coming Soon</span>
+            </label>
+          </div>
+        </div>
         <div>
           <label htmlFor="stellar-address" className="block text-sm font-medium text-slate-700">
             Your Stellar wallet address <span aria-label="required">*</span>

frontend/components/send-form/steps/details-step.tsx

@@ -17,6 +17,37 @@ export function DetailsStep({ state, onChange, onBack, onNext }: DetailsStepProp
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+      <div>
+        <label className="block text-sm font-medium text-slate-900 mb-2">
+          Network
+        </label>
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+          <label className="relative flex cursor-pointer items-center justify-center rounded-lg border border-slate-900 bg-white p-3 shadow-sm hover:bg-slate-50">
+            <input type="radio" name="network" value="stellar" defaultChecked className="sr-only" />
+            <span className="text-sm font-medium text-slate-900">Stellar</span>
+            <span className="absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-slate-900 text-[10px] text-white">✓</span>
+          </label>
+
+          <label className="relative flex cursor-not-allowed items-center justify-center rounded-lg border border-slate-200 bg-slate-50 p-3 opacity-70">
+            <input type="radio" name="network" value="base" disabled className="sr-only" />
+            <span className="text-sm font-medium text-slate-500">Base</span>
+            <span className="absolute -top-2 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-200 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-slate-600">Coming Soon</span>
+          </label>
+
+          <label className="relative flex cursor-not-allowed items-center justify-center rounded-lg border border-slate-200 bg-slate-50 p-3 opacity-70">
+            <input type="radio" name="network" value="polygon" disabled className="sr-only" />
+            <span className="text-sm font-medium text-slate-500">Polygon</span>
+            <span className="absolute -top-2 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-200 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-slate-600">Coming Soon</span>
+          </label>
+
+          <label className="relative flex cursor-not-allowed items-center justify-center rounded-lg border border-slate-200 bg-slate-50 p-3 opacity-70">
+            <input type="radio" name="network" value="solana" disabled className="sr-only" />
+            <span className="text-sm font-medium text-slate-500">Solana</span>
+            <span className="absolute -top-2 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-200 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-slate-600">Coming Soon</span>
+          </label>
+        </div>
+      </div>
+
       <div>
         <label htmlFor="recipient-email" className="block text-sm font-medium text-slate-900">
           Recipient email

pr_body_152.md

@@ -0,0 +1,8 @@
+Closes #152
+
+### What does this PR do?
+This PR introduces placeholder UI stubs for future multi-chain network support (Base, Polygon, Solana) within the application's send and claim flows.
+
+### Description
+- **Send Form (`details-step.tsx`)**: Added a visual `Network` selector field at the top of the form. It cleanly highlights `Stellar` as the active choice while correctly stubbing out `Base`, `Polygon`, and `Solana` as disabled options with prominent `COMING SOON` badges.
+- **Claim Form (`accessible-claim-form.tsx`)**: Similarly implemented the disabled multi-chain selector into the claim payment form with equivalent WCAG-compliant styling, ensuring the future roadmap is visibly communicated to end-users without interfering with the current Stellar-only UX flow.