Send the selected destination rail as destination.paymentRail

components/grid-visualizer/src/app/page.tsx

@@ -34,6 +34,7 @@ export default function Home() {
     setReceiveNetwork,
     setSourceFundingMode,
     setSourceRail,
+    setDestRail,
     setSettlementRail,
     swap,
     setSourceRegion,
@@ -188,8 +189,10 @@ export default function Home() {
                 <InputCard
                   label="Destination"
                   selection={state.receive}
+                  rail={state.destRail}
                   onCardClick={() => openPicker('receive')}
                   onNetworkChange={setReceiveNetwork}
+                  onRailChange={setDestRail}
                 />
               </div>
 
@@ -259,6 +262,7 @@ export default function Home() {
               sourceRegion={state.sourceRegion}
               destRegion={state.destRegion}
               sourceRail={state.sourceRail}
+              destRail={state.destRail}
               settlementRail={state.settlementRail}
               expanded={flowExpanded}
               onToggle={toggleFlow}
@@ -268,6 +272,7 @@ export default function Home() {
               receive={state.receive!}
               fundingModel={fundingModel}
               sourceRail={state.sourceRail}
+              destRail={state.destRail}
               audience={state.audience}
               onAudienceChange={setAudience}
               expanded={codeExpanded}

components/grid-visualizer/src/components/CodePanel/CodePanel.tsx

@@ -19,6 +19,7 @@ interface CodePanelProps {
   receive: CurrencySelection;
   fundingModel: 'jit' | 'pre-funded';
   sourceRail?: string | null;
+  destRail?: string | null;
   audience: 'human' | 'agent';
   onAudienceChange: (audience: 'human' | 'agent') => void;
   expanded: boolean;
@@ -271,16 +272,17 @@ export function CodePanel({
   receive,
   fundingModel,
   sourceRail,
+  destRail,
   audience,
   onAudienceChange,
   expanded,
 }: CodePanelProps) {
   const steps = useMemo(
-    () => generateSteps(send, receive, fundingModel, sourceRail),
-    [send, receive, fundingModel, sourceRail],
+    () => generateSteps(send, receive, fundingModel, sourceRail, destRail),
+    [send, receive, fundingModel, sourceRail, destRail],
   );
 
-  const stepsKey = `${send.code}-${send.accountType}-${send.isInternal}-${receive.code}-${receive.accountType}-${receive.isInternal}-${fundingModel}-${sourceRail}-${audience}`;
+  const stepsKey = `${send.code}-${send.accountType}-${send.isInternal}-${receive.code}-${receive.accountType}-${receive.isInternal}-${fundingModel}-${sourceRail}-${destRail}-${audience}`;
   const isHuman = audience === 'human';
 
   return (

components/grid-visualizer/src/components/CurrencyPicker/CurrencyPicker.tsx

@@ -5,7 +5,7 @@ import { Command } from '@lightsparkdev/origin';
 import type { CommandItem, CommandGroup } from '@lightsparkdev/origin';
 import { IconMagnifyingGlass } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconMagnifyingGlass';
 import { useCommandNav } from '@/hooks/useCommandNav';
-import { currencies } from '@/data/currencies';
+import { currencies, railDisplayName } from '@/data/currencies';
 import { cryptoAssets } from '@/data/crypto';
 import type { CurrencySelection } from '@/lib/code-generator';
 import styles from './CurrencyPicker.module.scss';
@@ -63,7 +63,7 @@ function lookupSelection(id: string): CurrencySelection | null {
 function getRailsText(sel: CurrencySelection | null): string {
   if (!sel) return '';
   const fiat = currencies.find((c) => c.code === sel.code);
-  if (fiat) return fiat.allRails.join(', ');
+  if (fiat) return fiat.allRails.map(railDisplayName).join(', ');
   const crypto = cryptoAssets.find((a) => a.symbol === sel.code);
   if (crypto) return crypto.accountTypes.map((t) => t.network).join(', ');
   return '';
@@ -76,7 +76,7 @@ function buildFiatItem(
   return {
     id: c.code,
     label: c.name,
-    keywords: [c.code, c.accountType, ...c.allRails],
+    keywords: [c.code, c.accountType, ...c.allRails, ...c.allRails.map(railDisplayName)],
     icon: (
       // eslint-disable-next-line @next/next/no-img-element
       <img

components/grid-visualizer/src/components/FlowPanel/FlowPanel.tsx

@@ -22,6 +22,7 @@ interface FlowPanelProps {
   sourceRegion?: string | null;
   destRegion?: string | null;
   sourceRail?: string | null;
+  destRail?: string | null;
   settlementRail?: string | null;
   expanded: boolean;
   onToggle: () => void;
@@ -267,11 +268,12 @@ export function FlowPanel({
   sourceRegion,
   destRegion,
   sourceRail,
+  destRail,
   settlementRail,
   expanded,
   onToggle,
 }: FlowPanelProps) {
-  const path = useMemo(() => buildFlowPath(send, receive, sourceRegion, destRegion, sourceRail, settlementRail), [send, receive, sourceRegion, destRegion, sourceRail, settlementRail]);
+  const path = useMemo(() => buildFlowPath(send, receive, sourceRegion, destRegion, sourceRail, destRail, settlementRail), [send, receive, sourceRegion, destRegion, sourceRail, destRail, settlementRail]);
   const pathKey = path.nodes.map((n) => n.id + n.label + n.isInternal + n.actionCards.map((a) => a.text).join(',')).join('|');
   const contentRef = useRef<HTMLDivElement>(null);
   const flowRef = useRef<HTMLDivElement>(null);

components/grid-visualizer/src/components/InputCard/InputCard.tsx

@@ -4,7 +4,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import type { CurrencySelection } from '@/lib/code-generator';
 import { cryptoAssets, type CryptoAccountType } from '@/data/crypto';
-import { currencies } from '@/data/currencies';
+import { currencies, railDisplayName } from '@/data/currencies';
 import { IconPlusLarge } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconPlusLarge';
 import { IconChevronBottom } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconChevronBottom';
 import { IconArrowsRepeat } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconArrowsRepeat';
@@ -247,7 +247,7 @@ function RailDropdown({
       >
         <span className={styles.propertyLabel}>Rail</span>
         <span className={styles.propertyValue}>
-          <span>{selectedRail}</span>
+          <span>{railDisplayName(selectedRail)}</span>
           <span className={styles.propertyChevron}>
             <IconChevronRightSmall size={16} />
           </span>
@@ -285,7 +285,7 @@ function RailDropdown({
                     }}
                     type="button"
                   >
-                    <span>{rail}</span>
+                    <span>{railDisplayName(rail)}</span>
                   </button>
                 ))}
               </motion.div>
@@ -395,7 +395,7 @@ export function InputCard({
                 <div className={clsx(styles.propertyRow, styles.propertyRowStatic)}>
                   <span className={styles.propertyLabel}>Rail</span>
                   <span className={styles.propertyValue}>
-                    <span>{fiatRail}</span>
+                    <span>{railDisplayName(fiatRail)}</span>
                   </span>
                 </div>
               ) : null}