integration new apis

src/app/components/language-selector/language-selector.component.html

@@ -22,4 +22,25 @@
       </button>
     }
   </div>
+
+  <button class="currency-button" (click)="toggleCurrency()">
+    <span class="currency-symbol">{{ languageService.getCurrentCurrency()?.symbol }}</span>
+    <span class="currency-code">{{ languageService.currentCurrency() }}</span>
+    <svg class="dropdown-arrow" [class.rotated]="currencyOpen" width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </button>
+
+  <div class="currency-dropdown" [class.open]="currencyOpen">
+    @for (cur of languageService.currencies; track cur.code) {
+      <button 
+        class="currency-option" 
+        [class.active]="languageService.currentCurrency() === cur.code"
+        (click)="selectCurrency(cur)">
+        <span class="cur-symbol">{{ cur.symbol }}</span>
+        <span class="cur-name">{{ cur.name }}</span>
+        <span class="cur-code">{{ cur.code }}</span>
+      </button>
+    }
+  </div>
 </div>

src/app/components/language-selector/language-selector.component.scss

@@ -301,3 +301,162 @@
     }
   }
 }
+
+// ── Currency selector ──
+.language-selector {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.currency-button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  color: #ffffff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 14px;
+  font-weight: 500;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
+  .currency-symbol {
+    font-size: 15px;
+    font-weight: 700;
+  }
+
+  .currency-code {
+    font-size: 13px;
+    letter-spacing: 0.5px;
+  }
+
+  .dropdown-arrow {
+    transition: transform 0.3s ease;
+    opacity: 0.7;
+    &.rotated { transform: rotate(180deg); }
+  }
+}
+
+.currency-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 170px;
+  background: var(--card-bg, #1a1a1a);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+  z-index: 1000;
+  overflow: hidden;
+
+  &.open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+}
+
+.currency-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 11px 16px;
+  background: transparent;
+  border: none;
+  color: #ffffff;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  font-size: 14px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  &.active {
+    background: rgba(255, 255, 255, 0.1);
+    font-weight: 600;
+  }
+
+  .cur-symbol {
+    font-size: 16px;
+    font-weight: 700;
+    width: 20px;
+    text-align: center;
+  }
+
+  .cur-name {
+    flex: 1;
+  }
+
+  .cur-code {
+    font-size: 12px;
+    opacity: 0.6;
+  }
+}
+
+// Light / Novo / Dexar theme adjustments for currency
+:host-context(.novo-header),
+:host-context(.header) {
+  .currency-button {
+    border-color: rgba(0, 0, 0, 0.2);
+    color: #333333;
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+      border-color: rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+
+:host-context(.light-theme) {
+  .currency-dropdown {
+    background: #ffffff;
+    border-color: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  }
+  .currency-option {
+    color: #333333;
+    &:hover { background: rgba(0, 0, 0, 0.05); }
+    &.active { background: rgba(0, 0, 0, 0.1); }
+  }
+}
+
+:host-context(.dexar-header),
+:host-context(.dexar-mobile-menu) {
+  .currency-button {
+    padding: 4px 8px;
+    gap: 3px;
+    background: rgba(255, 255, 255, 0.3);
+    border: 1px solid #677b78;
+    border-radius: 8px;
+    color: #1e3c38;
+    &:hover {
+      background: rgba(255, 255, 255, 0.5);
+    }
+    .currency-symbol { font-size: 14px; color: #1e3c38; }
+    .currency-code { font-size: 13px; color: #1e3c38; }
+    .dropdown-arrow path { stroke: #1e3c38; }
+  }
+  .currency-dropdown {
+    background: #ffffff;
+    border-color: #d3dad9;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+  .currency-option {
+    color: #1e3c38;
+    &:hover { background: rgba(161, 180, 181, 0.2); }
+    &.active { background: rgba(73, 118, 113, 0.1); }
+  }
+}

src/app/components/language-selector/language-selector.component.ts

@@ -1,5 +1,5 @@
 import { Component, HostListener, ElementRef, ChangeDetectionStrategy } from '@angular/core';
-import { LanguageService, Language } from '../../services/language.service';
+import { LanguageService, Language, Currency } from '../../services/language.service';
 
 @Component({
   selector: 'app-language-selector',
@@ -10,6 +10,7 @@ import { LanguageService, Language } from '../../services/language.service';
 })
 export class LanguageSelectorComponent {
   dropdownOpen = false;
+  currencyOpen = false;
 
   constructor(
     public languageService: LanguageService,
@@ -18,6 +19,12 @@ export class LanguageSelectorComponent {
 
   toggleDropdown(): void {
     this.dropdownOpen = !this.dropdownOpen;
+    this.currencyOpen = false;
+  }
+
+  toggleCurrency(): void {
+    this.currencyOpen = !this.currencyOpen;
+    this.dropdownOpen = false;
   }
 
   selectLanguage(lang: Language): void {
@@ -27,14 +34,21 @@ export class LanguageSelectorComponent {
     }
   }
 
+  selectCurrency(currency: Currency): void {
+    this.languageService.setCurrency(currency.code);
+    this.currencyOpen = false;
+  }
+
   closeDropdown(): void {
     this.dropdownOpen = false;
+    this.currencyOpen = false;
   }
 
   @HostListener('document:click', ['$event'])
   onClickOutside(event: Event): void {
     if (!this.elementRef.nativeElement.contains(event.target)) {
       this.dropdownOpen = false;
+      this.currencyOpen = false;
     }
   }
 }