Sync Grid Visualizer with PaymentRail enum

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/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}

components/grid-visualizer/src/data/currencies.ts

@@ -14,15 +14,47 @@ export interface FiatCurrency {
   examplePerson: ExamplePerson;
 }
 
+// Rail values above are PaymentRail enum members, which is what the API expects.
+// These are the human-readable forms for UI text only — never send them to the API.
+const railDisplayNames: Record<string, string> = {
+  ACH: 'ACH',
+  ACH_COLOMBIA: 'ACH Colombia',
+  BANK_TRANSFER: 'Bank Transfer',
+  BRE_B: 'Bre-B',
+  CIPS: 'CIPS',
+  FAST: 'FAST',
+  FASTER_PAYMENTS: 'Faster Payments',
+  FEDNOW: 'FedNow',
+  INSTAPAY: 'InstaPay',
+  MOBILE_MONEY: 'Mobile Money',
+  NEFT: 'NEFT',
+  PAYNOW: 'PayNow',
+  PESONET: 'PESONet',
+  PIX: 'PIX',
+  RTGS: 'RTGS',
+  RTP: 'RTP',
+  SEPA: 'SEPA',
+  SEPA_INSTANT: 'SEPA Instant',
+  SPEI: 'SPEI',
+  SWIFT: 'SWIFT',
+  UNIONPAY: 'UnionPay',
+  UPI: 'UPI',
+  WIRE: 'Wire',
+};
+
+export function railDisplayName(rail: string): string {
+  return railDisplayNames[rail] ?? rail.replace(/_/g, ' ');
+}
+
 export const currencies: FiatCurrency[] = [
   {
     code: 'USD',
     name: 'United States Dollar',
     countryCode: 'us',
     accountType: 'USD_ACCOUNT',
     accountLabel: 'US Bank Account',
-    instantRails: ['RTP', 'FedNow'],
-    allRails: ['ACH', 'Wire', 'RTP', 'FedNow'],
+    instantRails: ['RTP', 'FEDNOW'],
+    allRails: ['ACH', 'WIRE', 'RTP', 'FEDNOW'],
     examplePerson: { fullName: 'Jane Doe', nationality: 'US' },
   },
   {
@@ -31,8 +63,8 @@ export const currencies: FiatCurrency[] = [
     countryCode: 'eu',
     accountType: 'EUR_ACCOUNT',
     accountLabel: 'IBAN',
-    instantRails: ['SEPA Instant'],
-    allRails: ['SEPA', 'SEPA Instant'],
+    instantRails: ['SEPA_INSTANT'],
+    allRails: ['SEPA', 'SEPA_INSTANT'],
     examplePerson: { fullName: 'Anna Müller', nationality: 'DE' },
   },
   {
@@ -41,8 +73,8 @@ export const currencies: FiatCurrency[] = [
     countryCode: 'gb',
     accountType: 'GBP_ACCOUNT',
     accountLabel: 'UK Bank Account',
-    instantRails: ['Faster Payments'],
-    allRails: ['Faster Payments'],
+    instantRails: ['FASTER_PAYMENTS'],
+    allRails: ['FASTER_PAYMENTS'],
     examplePerson: { fullName: 'James Wilson', nationality: 'GB' },
   },
   {
@@ -81,8 +113,8 @@ export const currencies: FiatCurrency[] = [
     countryCode: 'dk',
     accountType: 'DKK_ACCOUNT',
     accountLabel: 'IBAN',
-    instantRails: ['SEPA Instant'],
-    allRails: ['SEPA', 'SEPA Instant'],
+    instantRails: ['SEPA_INSTANT'],
+    allRails: ['SEPA', 'SEPA_INSTANT'],
     examplePerson: { fullName: 'Lars Jensen', nationality: 'DK' },
   },
   {
@@ -92,7 +124,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'NGN_ACCOUNT',
     accountLabel: 'Nigerian Bank Account',
     instantRails: [],
-    allRails: ['Bank Transfer'],
+    allRails: ['BANK_TRANSFER'],
     examplePerson: { fullName: 'Chioma Okafor', nationality: 'NG' },
   },
   {
@@ -102,7 +134,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'CAD_ACCOUNT',
     accountLabel: 'Canadian Bank Account',
     instantRails: [],
-    allRails: ['Bank Transfer'],
+    allRails: ['BANK_TRANSFER'],
     examplePerson: { fullName: 'Sophie Tremblay', nationality: 'CA' },
   },
   {
@@ -112,7 +144,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'PHP_ACCOUNT',
     accountLabel: 'Philippine Bank Account',
     instantRails: [],
-    allRails: ['Bank Transfer'],
+    allRails: ['BANK_TRANSFER'],
     examplePerson: { fullName: 'Maria Santos', nationality: 'PH' },
   },
   {
@@ -121,8 +153,8 @@ export const currencies: FiatCurrency[] = [
     countryCode: 'sg',
     accountType: 'SGD_ACCOUNT',
     accountLabel: 'Singapore Bank Account',
-    instantRails: ['PayNow', 'FAST'],
-    allRails: ['PayNow', 'FAST', 'Bank Transfer'],
+    instantRails: ['PAYNOW', 'FAST'],
+    allRails: ['PAYNOW', 'FAST', 'BANK_TRANSFER'],
     examplePerson: { fullName: 'Wei Lin Tan', nationality: 'SG' },
   },
   {
@@ -132,7 +164,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'HKD_ACCOUNT',
     accountLabel: 'Hong Kong Bank Account',
     instantRails: [],
-    allRails: ['Bank Transfer'],
+    allRails: ['BANK_TRANSFER'],
     examplePerson: { fullName: 'Emily Chan', nationality: 'HK' },
   },
   {
@@ -142,7 +174,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'IDR_ACCOUNT',
     accountLabel: 'Indonesian Bank Account',
     instantRails: [],
-    allRails: ['Bank Transfer'],
+    allRails: ['BANK_TRANSFER'],
     examplePerson: { fullName: 'Siti Rahayu', nationality: 'ID' },
   },
   {
@@ -152,7 +184,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'KES_ACCOUNT',
     accountLabel: 'M-Pesa',
     instantRails: [],
-    allRails: ['Mobile Money'],
+    allRails: ['MOBILE_MONEY'],
     examplePerson: { fullName: 'Wanjiku Kamau', nationality: 'KE' },
   },
   {
@@ -162,7 +194,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'MYR_ACCOUNT',
     accountLabel: 'Malaysian Bank Account',
     instantRails: [],
-    allRails: ['Bank Transfer'],
+    allRails: ['BANK_TRANSFER'],
     examplePerson: { fullName: 'Nurul Aisyah', nationality: 'MY' },
   },
   {
@@ -172,7 +204,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'RWF_ACCOUNT',
     accountLabel: 'Mobile Money',
     instantRails: [],
-    allRails: ['Mobile Money'],
+    allRails: ['MOBILE_MONEY'],
     examplePerson: { fullName: 'Jean Uwimana', nationality: 'RW' },
   },
   {
@@ -182,7 +214,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'THB_ACCOUNT',
     accountLabel: 'Thai Bank Account',
     instantRails: [],
-    allRails: ['Bank Transfer'],
+    allRails: ['BANK_TRANSFER'],
     examplePerson: { fullName: 'Somchai Prasert', nationality: 'TH' },
   },
   {
@@ -192,7 +224,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'TZS_ACCOUNT',
     accountLabel: 'Mobile Money',
     instantRails: [],
-    allRails: ['Mobile Money'],
+    allRails: ['MOBILE_MONEY'],
     examplePerson: { fullName: 'Halima Mwanga', nationality: 'TZ' },
   },
   {
@@ -202,7 +234,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'VND_ACCOUNT',
     accountLabel: 'Vietnamese Bank Account',
     instantRails: [],
-    allRails: ['Bank Transfer'],
+    allRails: ['BANK_TRANSFER'],
     examplePerson: { fullName: 'Nguyen Thi Lan', nationality: 'VN' },
   },
   {
@@ -212,7 +244,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'ZAR_ACCOUNT',
     accountLabel: 'South African Bank Account',
     instantRails: [],
-    allRails: ['Bank Transfer'],
+    allRails: ['BANK_TRANSFER'],
     examplePerson: { fullName: 'Thabo Nkosi', nationality: 'ZA' },
   },
   {
@@ -222,7 +254,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'ZMW_ACCOUNT',
     accountLabel: 'Mobile Money',
     instantRails: [],
-    allRails: ['Mobile Money'],
+    allRails: ['MOBILE_MONEY'],
     examplePerson: { fullName: 'Mwila Tembo', nationality: 'ZM' },
   },
   {
@@ -232,7 +264,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'MWK_ACCOUNT',
     accountLabel: 'Mobile Money',
     instantRails: [],
-    allRails: ['Mobile Money'],
+    allRails: ['MOBILE_MONEY'],
     examplePerson: { fullName: 'Chimwemwe Banda', nationality: 'MW' },
   },
   {
@@ -242,7 +274,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'UGX_ACCOUNT',
     accountLabel: 'Mobile Money',
     instantRails: [],
-    allRails: ['Mobile Money'],
+    allRails: ['MOBILE_MONEY'],
     examplePerson: { fullName: 'Grace Namugga', nationality: 'UG' },
   },
   {
@@ -252,7 +284,7 @@ export const currencies: FiatCurrency[] = [
     accountType: 'XOF_ACCOUNT',
     accountLabel: 'Mobile Money',
     instantRails: [],
-    allRails: ['Mobile Money'],
+    allRails: ['MOBILE_MONEY'],
     examplePerson: { fullName: 'Amadou Diallo', nationality: 'SN' },
   },
 ];

components/grid-visualizer/src/lib/code-generator.ts

@@ -1,5 +1,5 @@
 import { accountTypeSpecs } from '@/data/account-types';
-import { currencies } from '@/data/currencies';
+import { currencies, railDisplayName } from '@/data/currencies';
 
 export interface ExamplePerson {
   fullName: string;
@@ -66,11 +66,11 @@ function getJitPaymentMethod(source: CurrencySelection, sourceRail: string | nul
     return 'crypto transfer';
   }
   if (sourceRail) {
-    return `${sourceRail} transfer`;
+    return `${railDisplayName(sourceRail)} transfer`;
   }
   const fiat = currencies.find((c) => c.code === source.code);
   if (fiat && fiat.instantRails.length > 0) {
-    return `${fiat.instantRails[0]} transfer`;
+    return `${railDisplayName(fiat.instantRails[0])} transfer`;
   }
   return 'bank transfer';
 }

components/grid-visualizer/src/lib/flow-path.ts

@@ -1,5 +1,5 @@
 import type { CurrencySelection } from './code-generator';
-import { currencies } from '@/data/currencies';
+import { currencies, railDisplayName } from '@/data/currencies';
 
 export type ActionColor = 'fiat' | 'btc' | 'stable';
 
@@ -232,15 +232,19 @@ export function buildFlowPath(
 
     if (curr.type === 'endpoint' && !curr.isInternal && next.type === 'switch') {
       const srcFiatData = source.type === 'fiat' ? currencies.find((c) => c.code === source.code) : null;
-      const srcRail = sourceRail
-        ?? (srcFiatData
-          ? (srcFiatData.instantRails[0] ?? srcFiatData.allRails[0] ?? source.accountLabel)
-          : (source.network ?? source.accountLabel));
+      const srcRailValue = sourceRail
+        ?? (srcFiatData ? (srcFiatData.instantRails[0] ?? srcFiatData.allRails[0]) : null);
+      const srcRail = srcRailValue
+        ? railDisplayName(srcRailValue)
+        : (source.network ?? source.accountLabel);
       text = `Funds in via ${srcRail}`;
     } else if (curr.type === 'switch' && next.type === 'endpoint' && !next.isInternal) {
       const dstFiatData = destination.type === 'fiat' ? currencies.find((c) => c.code === destination.code) : null;
-      const dstRail = dstFiatData
-        ? (dstFiatData.instantRails[0] ?? dstFiatData.allRails[0] ?? destination.accountLabel)
+      const dstRailValue = dstFiatData
+        ? (dstFiatData.instantRails[0] ?? dstFiatData.allRails[0])
+        : null;
+      const dstRail = dstRailValue
+        ? railDisplayName(dstRailValue)
         : (destination.network ?? destination.accountLabel);
       text = `Funds out via ${dstRail}`;
     } else if (curr.type === 'switch' && next.type === 'switch') {