Fix theme/language selectors and add top 100 currencies with local banking options

Copilot · 0xrinegade · Copilot · commit 747280e11a92 · 2025-08-12T06:34:20.000Z
Co-authored-by: 0xrinegade &lt;101195284+0xrinegade@users.noreply.github.com&gt;
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -12,6 +12,7 @@ import { AppContext } from '@/contexts/AppContext';
 
 // Import components
 import { NetworkSelector } from '@/components/NetworkSelector';
+import LanguageSelector from '@/components/LanguageSelector';
 import OnboardingModal from '@/components/OnboardingModal';
 import PWAInstallButton from '@/components/PWAInstallButton';
 import OfflineIndicator from '@/components/OfflineIndicator';
@@ -30,6 +31,32 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
   const router = useRouter();
   const { connected, publicKey } = usePhantomWallet();
   const [showOnboarding, setShowOnboarding] = useState(false);
+  
+  // Language selector state
+  const [currentLanguage, setCurrentLanguage] = useState('en');
+  
+  // Available languages
+  const languages = [
+    { code: 'en', name: 'English', country: '🇺🇸' },
+    { code: 'es', name: 'Español', country: '🇪🇸' },
+    { code: 'fr', name: 'Français', country: '🇫🇷' },
+    { code: 'de', name: 'Deutsch', country: '🇩🇪' },
+    { code: 'ja', name: '日本語', country: '🇯🇵' },
+    { code: 'ko', name: '한국어', country: '🇰🇷' },
+    { code: 'zh', name: '中文', country: '🇨🇳' }
+  ];
+  
+  // Load language from localStorage on component mount
+  useEffect(() => {
+    const savedLanguage = localStorage.getItem('preferred-language') || 'en';
+    setCurrentLanguage(savedLanguage);
+  }, []);
+  
+  // Handle language change
+  const handleLanguageChange = (languageCode) => {
+    setCurrentLanguage(languageCode);
+    localStorage.setItem('preferred-language', languageCode);
+  };
 
   // Check if user needs onboarding
   useEffect(() => {
@@ -138,6 +165,13 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
             
             {/* Header Controls - Simplified */}
             <div className="ascii-header-controls">
+              {/* Language selector */}
+              <LanguageSelector
+                languages={languages}
+                currentLocale={currentLanguage}
+                onLanguageChange={handleLanguageChange}
+              />
+              
               {/* Network selector */}
               <NetworkSelector 
                 networks={networks} 
diff --git a/src/components/OfferCreation.js b/src/components/OfferCreation.js
@@ -17,7 +17,7 @@ import { validateSolAmount, validateFiatAmount, validateMarketRate } from '../ut
 import { createLogger } from '../utils/logger';
 import { 
   SUPPORTED_CURRENCIES, 
-  SUPPORTED_PAYMENT_METHODS,
+  getPaymentMethodsForCurrency,
   VALIDATION_CONSTRAINTS
 } from '../constants/tradingConstants';
 import { useRealPriceData, useCalculateFiatAmount } from '../hooks/usePriceData';
@@ -55,6 +55,16 @@ const OfferCreation = ({ onStartGuidedWorkflow }) => {
   const isConnectionRetrying = connectionStatus === CONNECTION_STATUS.RETRYING;
   const isConnectionConnecting = connectionStatus === CONNECTION_STATUS.CONNECTING;
   
+  // Get payment methods for selected currency
+  const availablePaymentMethods = getPaymentMethodsForCurrency(fiatCurrency);
+  
+  // Update payment method when currency changes to ensure it's valid
+  useEffect(() => {
+    if (!availablePaymentMethods.includes(paymentMethod)) {
+      setPaymentMethod(availablePaymentMethods[0] || 'Bank Transfer');
+    }
+  }, [fiatCurrency, availablePaymentMethods, paymentMethod]);
+  
   // Debug info for development
   useEffect(() => {
     console.log('[OfferCreation] Debug info:', {
@@ -448,7 +458,7 @@ const OfferCreation = ({ onStartGuidedWorkflow }) => {
                 onChange={(e) => setPaymentMethod(e.target.value)}
                 required
               >
-                {SUPPORTED_PAYMENT_METHODS.map(method => (
+                {availablePaymentMethods.map(method => (
                   <option key={method} value={method}>{method}</option>
                 ))}
               </select>
diff --git a/src/components/OfferList.js b/src/components/OfferList.js
@@ -5,7 +5,7 @@ import { LoadingSpinner, ButtonLoader, TransactionStatus, Tooltip, ConfirmationD
 import { usePhantomWallet } from '../contexts/PhantomWalletProvider';
 import { useDebounce, VirtualizedList } from '../utils/performance';
 import { useActionDebounce } from '../hooks/useActionDebounce';
-import { SUPPORTED_CURRENCIES, SUPPORTED_PAYMENT_METHODS } from '../constants/tradingConstants';
+import { SUPPORTED_CURRENCIES, getPaymentMethodsForCurrency } from '../constants/tradingConstants';
 import { useOffers } from '../hooks/useOnChainData';
 import { useRealPriceData } from '../hooks/usePriceData';
 import ConnectWalletPrompt from './ConnectWalletPrompt';
@@ -295,7 +295,17 @@ const OfferList = ({ type = 'buy', onStartGuidedWorkflow}) => {
   
   // Memoize static data
   const currencies = useMemo(() => ['', ...SUPPORTED_CURRENCIES], []);
-  const paymentMethods = useMemo(() => ['', ...SUPPORTED_PAYMENT_METHODS], []);
+  
+  // Get all unique payment methods from all currencies for filtering
+  const allPaymentMethods = useMemo(() => {
+    const methodSet = new Set();
+    SUPPORTED_CURRENCIES.forEach(currency => {
+      const methods = getPaymentMethodsForCurrency(currency);
+      methods.forEach(method => methodSet.add(method));
+    });
+    return ['', ...Array.from(methodSet).sort()];
+  }, []);
+  
   const sortOptions = useMemo(() => [
     { value: 'createdAt', label: 'Date Posted' },
     { value: 'solAmount', label: 'SOL Amount' },
@@ -838,7 +848,7 @@ const OfferList = ({ type = 'buy', onStartGuidedWorkflow}) => {
                   onChange={(e) => setSelectedPaymentMethod(e.target.value)}
                   aria-label="Select payment method"
                 >
-                  {paymentMethods.map(method => (
+                  {allPaymentMethods.map(method => (
                     <option key={method} value={method}>{method || 'All Payment Methods'}</option>
                   ))}
                 </select>
diff --git a/src/components/ThemeSelector.js b/src/components/ThemeSelector.js
@@ -1,7 +1,11 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 
-const ThemeSelector = () => {
-  const [selectedTheme, setSelectedTheme] = useState('blueprint');
+const ThemeSelector = ({ 
+  value, 
+  onChange, 
+  className = "app-dropdown-container"
+}) => {
+  const [selectedTheme, setSelectedTheme] = useState(value || 'blueprint');
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -40,11 +44,19 @@ const ThemeSelector = () => {
   }, [themes]);
 
   useEffect(() => {
-    // Load saved theme from localStorage
-    const savedTheme = localStorage.getItem('theme') || 'blueprint';
+    // Load saved theme from localStorage or use passed value
+    const savedTheme = value || localStorage.getItem('theme') || 'blueprint';
     setSelectedTheme(savedTheme);
     applyTheme(savedTheme);
-  }, [applyTheme]);
+  }, [applyTheme, value]);
+
+  // Update when external value changes
+  useEffect(() => {
+    if (value && value !== selectedTheme) {
+      setSelectedTheme(value);
+      applyTheme(value);
+    }
+  }, [value, selectedTheme, applyTheme]);
 
   // Close dropdown when clicking outside
   useEffect(() => {
@@ -65,12 +77,17 @@ const ThemeSelector = () => {
     localStorage.setItem('theme', themeKey);
     applyTheme(themeKey);
     setIsOpen(false);
+    
+    // Call external onChange if provided
+    if (onChange) {
+      onChange(themeKey);
+    }
   };
 
   const currentTheme = themes.find(theme => theme.key === selectedTheme);
 
   return (
-    <div className="app-dropdown-container" ref={dropdownRef}>
+    <div className={className} ref={dropdownRef}>
       <button 
         className="app-header-control app-dropdown-trigger"
         onClick={() => setIsOpen(!isOpen)}
diff --git a/src/components/profile/ProfileSettings.js b/src/components/profile/ProfileSettings.js
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import PropertyValueTable from '../common/PropertyValueTable';
 import ThemeSelector from '../ThemeSelector';
-import LanguageSelector from '../LanguageSelector';
 
 /**
  * ProfileSettings component allows users to customize their profile settings,
@@ -26,14 +25,11 @@ const ProfileSettings = ({ settings, onSaveSettings }) => {
   const [profileSettings, setProfileSettings] = useState(safeSettings);
   const [isEditing, setIsEditing] = useState(false);
   const [currentTheme, setCurrentTheme] = useState('blueprint');
-  const [currentLanguage, setCurrentLanguage] = useState('en');
   
-  // Load theme and language from localStorage on component mount
+  // Load theme from localStorage on component mount
   useEffect(() => {
     const savedTheme = localStorage.getItem('theme') || 'blueprint';
-    const savedLanguage = localStorage.getItem('preferred-language') || 'en';
     setCurrentTheme(savedTheme);
-    setCurrentLanguage(savedLanguage);
   }, []);
   
   // Update profileSettings when settings prop changes
@@ -65,26 +61,19 @@ const ProfileSettings = ({ settings, onSaveSettings }) => {
     // Theme will be applied by the ThemeSelector component
   };
 
-  // Handle language change
-  const handleLanguageChange = (languageCode) => {
-    setCurrentLanguage(languageCode);
-    localStorage.setItem('preferred-language', languageCode);
-  };
-
-  // Available languages
-  const languages = [
-    { code: 'en', name: 'English', country: '🇺🇸' },
-    { code: 'es', name: 'Español', country: '🇪🇸' },
-    { code: 'fr', name: 'Français', country: '🇫🇷' },
-    { code: 'de', name: 'Deutsch', country: '🇩🇪' },
-    { code: 'ja', name: '日本語', country: '🇯🇵' },
-    { code: 'ko', name: '한국어', country: '🇰🇷' },
-    { code: 'zh', name: '中文', country: '🇨🇳' }
-  ];
-
-  // Get current language name
+  // Get current language name from localStorage
   const getCurrentLanguageName = () => {
-    const lang = languages.find(l => l.code === currentLanguage);
+    const savedLanguage = localStorage.getItem('preferred-language') || 'en';
+    const languages = [
+      { code: 'en', name: 'English', country: '🇺🇸' },
+      { code: 'es', name: 'Español', country: '🇪🇸' },
+      { code: 'fr', name: 'Français', country: '🇫🇷' },
+      { code: 'de', name: 'Deutsch', country: '🇩🇪' },
+      { code: 'ja', name: '日本語', country: '🇯🇵' },
+      { code: 'ko', name: '한국어', country: '🇰🇷' },
+      { code: 'zh', name: '中文', country: '🇨🇳' }
+    ];
+    const lang = languages.find(l => l.code === savedLanguage);
     return lang ? `${lang.country} ${lang.name}` : '🇺🇸 English';
   };
 
@@ -110,12 +99,12 @@ const ProfileSettings = ({ settings, onSaveSettings }) => {
     { 
       property: 'THEME', 
       value: getCurrentThemeName(),
-      description: 'Visual appearance and styling'
+      description: 'Current visual theme - use theme selector to change'
     },
     { 
       property: 'LANGUAGE', 
       value: getCurrentLanguageName(),
-      description: 'Interface language and locale'
+      description: 'Interface language - change in header navigation'
     },
   ];
   // Prepare display preferences data
@@ -226,29 +215,72 @@ const ProfileSettings = ({ settings, onSaveSettings }) => {
             <div className="ascii-form-section">
               <div className="ascii-form-section-title">INTERFACE PREFERENCES</div>
               
-              <div className="ascii-form-row-2">
+              <div className="ascii-form-row-1">
                 <div className="ascii-field">
                   <label>THEME</label>
                   <div className="theme-selector-container">
-                    <ThemeSelector />
-                  </div>
-                  <div className="ascii-field-help">Choose your preferred visual theme</div>
-                </div>
-                
-                <div className="ascii-field">
-                  <label>LANGUAGE</label>
-                  <div className="language-selector-container">
-                    <LanguageSelector
-                      languages={languages}
-                      currentLocale={currentLanguage}
-                      onLanguageChange={handleLanguageChange}
+                    <ThemeSelector 
+                      value={currentTheme}
+                      onChange={handleThemeChange}
+                      className="profile-theme-selector"
                     />
                   </div>
-                  <div className="ascii-field-help">Select your preferred language</div>
+                  <div className="ascii-field-help">Choose your preferred visual theme</div>
                 </div>
               </div>
+              
+              <div className="ascii-form-info">
+                <p>💡 Language settings have been moved to the header navigation for easier access.</p>
+                <p>You can change your language preference using the language selector in the top navigation bar.</p>
+              </div>
             </div>
 
+            <style jsx>{`
+              .profile-theme-selector {
+                width: 100%;
+                background: var(--color-background);
+                border: 1px solid var(--color-border);
+                border-radius: 0;
+              }
+              
+              .profile-theme-selector .app-header-control {
+                width: 100%;
+                background: var(--color-background);
+                border: 1px solid var(--color-border);
+                color: var(--color-foreground);
+                padding: 8px 12px;
+                border-radius: 0;
+                font-family: inherit;
+                font-size: 14px;
+                text-align: left;
+              }
+              
+              .profile-theme-selector .app-dropdown-menu {
+                width: 100%;
+                max-width: none;
+                left: 0 !important;
+                right: 0;
+              }
+              
+              .ascii-form-info {
+                background: var(--color-background-alt);
+                border: 1px solid var(--color-border);
+                border-radius: 4px;
+                padding: 12px;
+                margin-top: 16px;
+                font-size: 0.9rem;
+                color: var(--color-foreground-muted);
+              }
+              
+              .ascii-form-info p {
+                margin: 0 0 8px 0;
+              }
+              
+              .ascii-form-info p:last-child {
+                margin-bottom: 0;
+              }
+            `}</style>
+
             <div className="ascii-form-section">
               <div className="ascii-form-section-title">DISPLAY PREFERENCES</div>
               
diff --git a/src/constants/tradingConstants.js b/src/constants/tradingConstants.js
