Grid Visualizer: design overhaul and UX improvements (#271)

Major design and UX overhaul of the Grid Visualizer (flow builder). Redesigned input cards, funding model section, and keyboard navigation. Incorporates PR #241 (new currencies/account types) and PR #270 (human-readable rail names). Fixes: SWAP funding mode bug, RailDropdown state drift, JIT eligibility guard, flow diagram rail labels, missing DKK/RWF flags and region labels.

Author: patcapulong

components/grid-visualizer/.gitignore

@@ -7,3 +7,4 @@ out/
 .vercel
 refs/
 experiments/
+.env*.local

components/grid-visualizer/package-lock.json

@@ -7,11 +7,13 @@
 :root {
   --action-bg: rgba(17, 169, 103, 0.08);
   --action-text: #118453;
+  --surface-hover: var(--color-alpha-black-04);
 }
 
 [data-theme='dark'] {
   --action-bg: rgba(17, 169, 103, 0.15);
   --action-text: #11a967;
+  --surface-hover: var(--color-alpha-white-06);
 }
 
 * {
@@ -61,6 +63,26 @@ body {
   }
 }
 
+// Command modal height
+[role='dialog'] {
+  max-height: min(588px, 70vh) !important;
+}
+
+// base-ui Autocomplete: seamless mouse ↔ keyboard highlight handoff
+// Mouse mode (default): hover wins, keyboard highlight suppressed on non-hovered items
+[role='dialog']:not([data-keyboard-nav]) [role='option']:hover {
+  background-color: var(--surface-hover) !important;
+}
+
+[role='dialog']:not([data-keyboard-nav]) [role='listbox']:hover [role='option'][data-highlighted]:not(:hover) {
+  background-color: transparent !important;
+}
+
+// Keyboard mode: data-highlighted wins, hover suppressed on non-highlighted items
+[role='dialog'][data-keyboard-nav] [role='option']:hover:not([data-highlighted]) {
+  background-color: transparent !important;
+}
+
 // Mobile: prevent iOS zoom on input focus (requires font-size >= 16px)
 @media (max-width: 767px) {
   [role='dialog'] input {

components/grid-visualizer/public/flags/dk.svg

@@ -49,18 +49,17 @@
 .sidebarContent {
   flex: 1;
   display: flex;
-  align-items: center;
-  justify-content: center;
   padding: var(--spacing-4xl);
   overflow-y: auto;
+  overscroll-behavior: contain;
   min-height: 0;
 }
 
 .sidebarContentInner {
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2xl);
+  margin: auto 0;
 }
 
 .sidebarFooter {
@@ -234,6 +233,7 @@
   // Inline "View flow and code" button in wizard view
   .mobileViewBtn {
     @include label;
+    margin-top: 22px;
     display: flex;
     align-items: center;
     justify-content: center;

components/grid-visualizer/public/flags/rw.svg

@@ -5,8 +5,8 @@ import { useTheme } from '@/hooks/useTheme';
 import { usePanelCollapse } from '@/hooks/usePanelCollapse';
 import { Header } from '@/components/Header/Header';
 import { InputCard, CardChevron } from '@/components/InputCard/InputCard';
+import { FundingModelSection } from '@/components/FundingModelSection/FundingModelSection';
 import { RegionPicker } from '@/components/RegionPicker/RegionPicker';
-import { FundingToggle } from '@/components/FundingToggle/FundingToggle';
 import { PopularFlows } from '@/components/PopularFlows/PopularFlows';
 import { CurrencyPicker } from '@/components/CurrencyPicker/CurrencyPicker';
 import { EmptyCanvas } from '@/components/EmptyCanvas/EmptyCanvas';
@@ -17,8 +17,7 @@ import { Agentation } from 'agentation';
 
 import { IconArrowLeft } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconArrowLeft';
 import { IconArrowRight } from '@central-icons-react/round-outlined-radius-3-stroke-1.5/IconArrowRight';
-import { currencies } from '@/data/currencies';
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import clsx from 'clsx';
 import styles from './page.module.scss';
 
@@ -31,8 +30,8 @@ export default function Home() {
     setReceive,
     setSendNetwork,
     setReceiveNetwork,
-    toggleSendInternal,
-    toggleReceiveInternal,
+    setSourceFundingMode,
+    setSourceRail,
     swap,
     setSourceRegion,
     setDestRegion,
@@ -41,12 +40,10 @@ export default function Home() {
     closePicker,
   } = useFlowBuilder();
 
-  // Region picker state — opens after crypto source is selected.
-  // We hold the pending selection until the user picks a region, then commit both together.
+  // Region picker state — opened from the inline Region row on crypto cards
   const [regionTarget, setRegionTarget] = useState<'send' | 'receive' | null>(null);
-  const [pendingCryptoSend, setPendingCryptoSend] = useState<ReturnType<typeof lookupCurrency>>(null);
-  const regionCryptoCode = pendingCryptoSend?.code
-    ?? (regionTarget === 'send' ? state.send?.code : undefined);
+  const regionCryptoCode = regionTarget === 'send' ? state.send?.code : undefined;
+
   const [showAgentation, setShowAgentation] = useState(false);
   const [isEmbed, setIsEmbed] = useState(false);
   useEffect(() => {
@@ -90,15 +87,13 @@ export default function Home() {
 
   const { theme, setTheme } = useTheme();
 
-  // Theme change handler: also posts to parent when embedded
   const handleThemeChange = useCallback((t: 'light' | 'dark') => {
     setTheme(t);
     if (isEmbed) {
       window.parent.postMessage({ type: 'theme-sync', theme: t }, '*');
     }
   }, [setTheme, isEmbed]);
 
-  // Listen for theme sync from parent frame when embedded
   useEffect(() => {
     if (!isEmbed) return;
     const handler = (e: MessageEvent) => {
@@ -107,7 +102,6 @@ export default function Home() {
       }
     };
     window.addEventListener('message', handler);
-    // Tell parent we're ready to receive theme
     window.parent.postMessage({ type: 'theme-request' }, '*');
     return () => window.removeEventListener('message', handler);
   }, [isEmbed, setTheme]);
@@ -122,39 +116,14 @@ export default function Home() {
       : (isDark ? style.getPropertyValue('--color-gray-950') : style.getPropertyValue('--surface-primary'));
     const trimmed = color.trim();
     if (!trimmed) return;
-    // Update both media-specific meta tags so the correct one applies
     document.querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]').forEach(meta => {
       meta.content = trimmed;
     });
   }, [mobileView, theme]);
+
   const { flowExpanded, codeExpanded, toggleFlow, toggleCode } =
     usePanelCollapse();
 
-  const [overrideFunding, setOverrideFunding] = useState<'jit' | 'pre-funded' | null>(null);
-
-  const effectiveFundingModel = overrideFunding ?? fundingModel;
-
-  const handleFundingToggle = useCallback(() => {
-    setOverrideFunding((prev) => {
-      if (prev === null) {
-        // First toggle: flip from inferred value
-        return fundingModel === 'jit' ? 'pre-funded' : 'jit';
-      }
-      return prev === 'jit' ? 'pre-funded' : 'jit';
-    });
-  }, [fundingModel]);
-
-  // Reset funding override when source currency changes (not on internal toggle — it hides anyway)
-  useEffect(() => {
-    setOverrideFunding(null);
-  }, [state.send?.code]);
-
-  const sourceInstantRails = useMemo(() => {
-    if (!state.send || state.send.type !== 'fiat') return [];
-    const fiat = currencies.find((c) => c.code === state.send!.code);
-    return fiat?.instantRails ?? [];
-  }, [state.send]);
-
   return (
     <main className={styles.layout} data-mobile-view={mobileView}>
       {/* Left sidebar */}
@@ -182,18 +151,20 @@ export default function Home() {
         )}
 
         <div className={styles.sidebarContent}>
-          <div className={styles.sidebarContentInner}>
+            <div className={styles.sidebarContentInner}>
             <Header />
 
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
-              <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-md)' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', isolation: 'isolate' }}>
                 <InputCard
                   label="Source"
                   selection={state.send}
                   region={state.sourceRegion}
+                  rail={state.sourceRail}
                   onCardClick={() => openPicker('send')}
-                  onToggleInternal={toggleSendInternal}
                   onNetworkChange={setSendNetwork}
+                  onRailChange={setSourceRail}
+                  onRegionClick={() => setRegionTarget('send')}
                 />
                 <div style={{ position: 'relative', height: '8px' }}>
                   <CardChevron onSwap={state.send || state.receive ? swap : undefined} />
@@ -202,18 +173,15 @@ export default function Home() {
                   label="Destination"
                   selection={state.receive}
                   onCardClick={() => openPicker('receive')}
-                  onToggleInternal={toggleReceiveInternal}
                   onNetworkChange={setReceiveNetwork}
                 />
               </div>
 
-              {state.send && (
-                <FundingToggle
-                  fundingModel={effectiveFundingModel}
-                  jitEligible={state.send.jitEligible}
-                  isInternal={state.send.isInternal}
-                  onToggle={handleFundingToggle}
-                  instantRails={sourceInstantRails}
+              {state.send && state.receive && (
+                <FundingModelSection
+                  source={state.send}
+                  selectedMode={state.sourceFundingMode}
+                  onModeChange={setSourceFundingMode}
                 />
               )}
             </div>
@@ -239,12 +207,14 @@ export default function Home() {
               </button>
             )}
 
-            <PopularFlows onSelect={(sendCode, receiveCode) => {
-              const s = lookupCurrency(sendCode);
-              const r = lookupCurrency(receiveCode);
-              if (s) setSend(s);
-              if (r) setReceive(r);
-            }} />
+            <div style={{ marginTop: isComplete ? '10px' : '24px' }}>
+              <PopularFlows onSelect={(sendCode, receiveCode) => {
+                const s = lookupCurrency(sendCode);
+                const r = lookupCurrency(receiveCode);
+                if (s) setSend(s);
+                if (r) setReceive(r);
+              }} />
+            </div>
           </div>
         </div>
 
@@ -264,13 +234,15 @@ export default function Home() {
               receive={state.receive!}
               sourceRegion={state.sourceRegion}
               destRegion={state.destRegion}
+              sourceRail={state.sourceRail}
               expanded={flowExpanded}
               onToggle={toggleFlow}
             />
             <CodePanel
               send={state.send!}
               receive={state.receive!}
-              fundingModel={effectiveFundingModel}
+              fundingModel={fundingModel}
+              sourceRail={state.sourceRail}
               audience={state.audience}
               onAudienceChange={setAudience}
               expanded={codeExpanded}
@@ -287,13 +259,7 @@ export default function Home() {
         onSelect={(sel) => {
           const target = state.pickerTarget;
           if (target === 'send') {
-            if (sel.type === 'crypto') {
-              // Don't commit yet — need region first
-              setPendingCryptoSend(sel);
-              setRegionTarget('send');
-            } else {
-              setSend(sel);
-            }
+            setSend(sel);
           } else {
             setReceive(sel);
           }
@@ -307,22 +273,17 @@ export default function Home() {
         }
       />
 
-      {/* Region picker modal — opens after crypto source is selected */}
+      {/* Region picker modal — opens from crypto card Region row */}
       <RegionPicker
         open={regionTarget !== null}
         cryptoCode={regionCryptoCode}
-        onClose={() => {
-          // User dismissed without picking — discard pending selection
-          setPendingCryptoSend(null);
-          setRegionTarget(null);
-        }}
+        onClose={() => setRegionTarget(null)}
         onSelect={(regionCode) => {
-          // Commit the pending crypto selection + region together
-          if (pendingCryptoSend) {
-            setSend(pendingCryptoSend);
+          if (regionTarget === 'send') {
+            setSourceRegion(regionCode);
+          } else if (regionTarget === 'receive') {
+            setDestRegion(regionCode);
           }
-          setSourceRegion(regionCode);
-          setPendingCryptoSend(null);
           setRegionTarget(null);
         }}
       />
@@ -338,7 +299,7 @@ export default function Home() {
         </div>
       )}
 
-      {/* Mobile results view: floating pill — hides on scroll down, shows on scroll up */}
+      {/* Mobile results view: floating pill */}
       {isComplete && mobileView === 'results' && (
         <button
           className={clsx(